r4sas
/
webogram-i2p
1
0
Fork 0
Code Issues Releases Wiki Activity
Browse Source

Improved styles, updated icons

master
Igor Zhukov 11 years ago
parent
055604c310
commit
19f0c3b6e9
7 changed files with 104 additions and 82 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 97
      app/css/app.css
  2. BIN
      app/img/icons/IconsetW.png
  3. BIN
      app/img/icons/IconsetW_1x.png
  4. 12
      app/js/directives.js
  5. 2
      app/partials/contacts_modal.html
  6. 1
      app/partials/im.html
  7. 74
      app/partials/settings_modal.html

97
app/css/app.css
Unescape View File

@ -187,22 +187,6 @@ fieldset[disabled] .btn-tg.active {
} }
.icon-back {
display: inline-block;
width: 10px;
height: 18px;
vertical-align: text-top;
background: url(../img/icons/IconsetW.png?1) -15px -419px no-repeat;
background-size: 42px 460px;
}
.is_1x .icon-back {
background-image: url(../img/icons/IconsetW_1x.png?2);
}
.tg_page_head .navbar > .container .navbar-brand:hover { .tg_page_head .navbar > .container .navbar-brand:hover {
opacity: 1; opacity: 1;
} }
@ -241,6 +225,23 @@ fieldset[disabled] .btn-tg.active {
padding-top: 15px; padding-top: 15px;
padding-bottom: 15px; padding-bottom: 15px;
} }
.icon-back {
display: inline-block;
width: 10px;
height: 18px;
vertical-align: text-top;
background: url(../img/icons/IconsetW.png?1) -15px -419px no-repeat;
background-size: 42px 560px;
opacity: 0.6;
}
.is_1x .icon-back {
background-image: url(../img/icons/IconsetW_1x.png?2);
}
.tg_page_head .navbar-quick-nav a:hover .icon-back {
opacity: 1;
}
.tg_progress { .tg_progress {
height: 12px; height: 12px;
@ -486,7 +487,7 @@ fieldset[disabled] .btn-tg.active {
font-size: 12px; font-size: 12px;
line-height: normal; line-height: normal;
background: #F2F2F2 url(../img/icons/IconsetW.png?1) -6px -205px no-repeat; background: #F2F2F2 url(../img/icons/IconsetW.png?1) -6px -205px no-repeat;
background-size: 42px 460px; background-size: 42px 560px;
border: 1px solid #F2F2F2; border: 1px solid #F2F2F2;
border-radius: 3px; border-radius: 3px;
padding: 6px 20px 6px 30px; padding: 6px 20px 6px 30px;
@ -510,7 +511,7 @@ fieldset[disabled] .btn-tg.active {
height: 13px; height: 13px;
vertical-align: text-top; vertical-align: text-top;
background: url(../img/icons/IconsetW.png?1) -15px -192px no-repeat; background: url(../img/icons/IconsetW.png?1) -15px -192px no-repeat;
background-size: 42px 460px; background-size: 42px 560px;
opacity: 0.6; opacity: 0.6;
} }
.is_1x .im_dialogs_search_clear { .is_1x .im_dialogs_search_clear {
@ -709,6 +710,7 @@ a.im_dialog:hover .im_dialog_date {
position: relative; position: relative;
z-index: 2; z-index: 2;
min-height: 44px;
} }
.im_history_panel { .im_history_panel {
padding: 10px 4px 0; padding: 10px 4px 0;
@ -762,7 +764,7 @@ a.im_dialog:hover .im_dialog_date {
margin-left: 6px; margin-left: 6px;
background: url(../img/icons/IconsetW.png?1) -17px -444px no-repeat; background: url(../img/icons/IconsetW.png?1) -17px -444px no-repeat;
background-size: 42px 460px; background-size: 42px 560px;
} }
.is_1x .icon-caret { .is_1x .icon-caret {
background-image: url(../img/icons/IconsetW_1x.png?2); background-image: url(../img/icons/IconsetW_1x.png?2);
@ -961,7 +963,7 @@ div.im_message_video_thumb {
height: 19px; height: 19px;
background: url(../img/icons/IconsetW.png?1) -14px -389px no-repeat; background: url(../img/icons/IconsetW.png?1) -14px -389px no-repeat;
background-size: 42px 460px; background-size: 42px 560px;
} }
.is_1x .icon-geo-point { .is_1x .icon-geo-point {
background-image: url(../img/icons/IconsetW_1x.png?2); background-image: url(../img/icons/IconsetW_1x.png?2);
@ -989,7 +991,7 @@ div.im_message_video_thumb {
vertical-align: text-top; vertical-align: text-top;
background: #F2F2F2 url(../img/icons/IconsetW.png?1) -2px -229px no-repeat; background: #F2F2F2 url(../img/icons/IconsetW.png?1) -2px -229px no-repeat;
background-size: 42px 460px; background-size: 42px 560px;
border-radius: 3px; border-radius: 3px;
margin-right: 10px; margin-right: 10px;
} }
@ -1041,7 +1043,7 @@ div.im_message_video_thumb {
vertical-align: text-top; vertical-align: text-top;
background: #F2F2F2 url(../img/icons/IconsetW.png?1) -2px -277px no-repeat; background: #F2F2F2 url(../img/icons/IconsetW.png?1) -2px -277px no-repeat;
background-size: 42px 460px; background-size: 42px 560px;
border-radius: 3px; border-radius: 3px;
margin-right: 10px; margin-right: 10px;
} }
@ -1236,7 +1238,7 @@ span.emoji {
text-align: center; text-align: center;
color: #999; color: #999;
font-size: 1.5em; font-size: 1.5em;
padding: 200px 50px 0; padding: 200px 50px 200px;
} }
.im_send_panel_wrap { .im_send_panel_wrap {
@ -1300,7 +1302,7 @@ textarea.im_message_field {
height: 23px; height: 23px;
vertical-align: text-top; vertical-align: text-top;
background: url(../img/icons/IconsetW.png?1) -12px -68px no-repeat; background: url(../img/icons/IconsetW.png?1) -12px -68px no-repeat;
background-size: 42px 460px; background-size: 42px 560px;
opacity: 0.8; opacity: 0.8;
} }
.is_1x .icon-paperclip { .is_1x .icon-paperclip {
@ -1328,7 +1330,7 @@ textarea.im_message_field {
height: 23px; height: 23px;
vertical-align: text-top; vertical-align: text-top;
background: url(../img/icons/IconsetW.png?1) -10px -4px no-repeat; background: url(../img/icons/IconsetW.png?1) -10px -4px no-repeat;
background-size: 42px 460px; background-size: 42px 560px;
opacity: 0.8; opacity: 0.8;
} }
.is_1x .icon-emoji { .is_1x .icon-emoji {
@ -1378,7 +1380,7 @@ textarea.im_message_field {
height: 21px; height: 21px;
vertical-align: text-top; vertical-align: text-top;
background: url(../img/icons/IconsetW.png?1) -9px -132px no-repeat; background: url(../img/icons/IconsetW.png?1) -9px -132px no-repeat;
background-size: 42px 460px; background-size: 42px 560px;
opacity: 0.8; opacity: 0.8;
} }
.is_1x .icon-camera { .is_1x .icon-camera {
@ -1466,6 +1468,7 @@ img.img_fullsize {
.settings_profile_photo_wrap { .settings_profile_photo_wrap {
width: 120px; width: 120px;
margin-right: 22px; margin-right: 22px;
margin-bottom: 15px;
} }
.settings_profile_photo { .settings_profile_photo {
position: relative; position: relative;
@ -1792,7 +1795,7 @@ img.img_fullsize {
.emoji-menu-tail { .emoji-menu-tail {
background: url(../img/icons/IconsetW.png?1) -14px -268px no-repeat; background: url(../img/icons/IconsetW.png?1) -14px -268px no-repeat;
background-size: 42px 460px; background-size: 42px 560px;
width: 14px; width: 14px;
height: 7px; height: 7px;
margin: 0 83px; margin: 0 83px;
@ -1870,8 +1873,8 @@ img.img_fullsize {
.settings_profile_first_name, .settings_profile_first_name,
.settings_profile_last_name { .settings_profile_last_name {
width: 180px; width: 180px;
margin-bottom: 10px;
float: left; float: left;
margin-bottom: 0;
} }
.settings_profile_first_name label, .settings_profile_first_name label,
.settings_profile_last_name label { .settings_profile_last_name label {
@ -1879,18 +1882,23 @@ img.img_fullsize {
} }
.settings_profile_first_name { .settings_profile_first_name {
margin-right: 22px; margin-right: 22px;
margin-bottom: 10px;
} }
.settings_profile_last_name { .settings_profile_last_name {
margin-right: 10px; margin-right: 10px;
margin-bottom: 15px;
} }
.settings_profile_save { .settings_profile_save {
padding-top: 23px; padding-top: 21px;
float: left; float: left;
} }
.settings_profile_save_btn { .settings_profile_save_btn {
width: 50px; width: 50px;
} }
.settings_profile_edit_form {
margin-bottom: 0;
}
.settings_profile_edit_form input { .settings_profile_edit_form input {
font-size: 12px; font-size: 12px;
line-height: normal; line-height: normal;
@ -1935,7 +1943,7 @@ img.img_fullsize {
font-size: 12px; font-size: 12px;
line-height: normal; line-height: normal;
background: #F2F2F2 url(../img/icons/IconsetW.png?1) -6px -205px no-repeat; background: #F2F2F2 url(../img/icons/IconsetW.png?1) -6px -205px no-repeat;
background-size: 42px 460px; background-size: 42px 560px;
border: 1px solid #F2F2F2; border: 1px solid #F2F2F2;
border-radius: 3px; border-radius: 3px;
padding: 6px 20px 6px 30px; padding: 6px 20px 6px 30px;
@ -1959,7 +1967,7 @@ img.img_fullsize {
height: 13px; height: 13px;
vertical-align: text-top; vertical-align: text-top;
background: url(../img/icons/IconsetW.png?1) -15px -192px no-repeat; background: url(../img/icons/IconsetW.png?1) -15px -192px no-repeat;
background-size: 42px 460px; background-size: 42px 560px;
opacity: 0.6; opacity: 0.6;
} }
.is_1x .contacts_modal_search_clear { .is_1x .contacts_modal_search_clear {
@ -2035,22 +2043,28 @@ a.contacts_modal_contact:hover .contacts_modal_contact_status {
top: 22px; top: 22px;
width: 17px; width: 17px;
height: 15px; height: 15px;
/*margin: 10px 0 0 -75px;*/ background: url(../img/icons/IconsetW.png?1) -13px -366px no-repeat;
background: url(../img/icons/IconsetW.png?1) -13px -343px no-repeat; background-size: 42px 560px;
background-size: 42px 460px; opacity: 0.5;
} }
.is_1x .icon-contact-tick { .is_1x .icon-contact-tick {
background-image: url(../img/icons/IconsetW_1x.png?2); background-image: url(../img/icons/IconsetW_1x.png?2);
} }
.contacts_modal_members_list .active .icon-contact-tick,
.contacts_modal_members_list a.contacts_modal_contact:hover .icon-contact-tick { .contacts_modal_members_list a.contacts_modal_contact:hover .icon-contact-tick {
background-position: -13px -367px; background-position: -13px -366px;
opacity: 0.5; opacity: 1;
} }
.contacts_modal_members_list .active .icon-contact-tick { .contacts_modal_members_list .active .icon-contact-tick {
opacity: 1 !important; background-position: -13px -458px !important;
opacity: 1;
} }
.contacts_modal_members_list .disabled {
pointer-events: none;
}
.contacts_modal_members_list .disabled .icon-contact-tick {
display: none;
}
.contacts_modal_panel { .contacts_modal_panel {
padding-top: 10px; padding-top: 10px;
@ -2064,6 +2078,7 @@ a.contacts_modal_contact:hover .contacts_modal_contact_status {
/* Messages edit panel */ /* Messages edit panel */
.im_edit_panel_wrap { .im_edit_panel_wrap {
display: none;
border-top: 1px solid #EEE; border-top: 1px solid #EEE;
padding: 5px 5px; padding: 5px 5px;
} }
@ -2110,7 +2125,7 @@ a.contacts_modal_contact:hover .contacts_modal_contact_status {
height: 15px; height: 15px;
background: url(../img/icons/IconsetW.png?1) -15px -319px no-repeat; background: url(../img/icons/IconsetW.png?1) -15px -319px no-repeat;
background-size: 42px 460px; background-size: 42px 560px;
} }
.is_1x .icon-delete { .is_1x .icon-delete {
background-image: url(../img/icons/IconsetW_1x.png?2); background-image: url(../img/icons/IconsetW_1x.png?2);
@ -2154,7 +2169,7 @@ a.contacts_modal_contact:hover .contacts_modal_contact_status {
height: 15px; height: 15px;
margin: 10px 0 0 -75px; margin: 10px 0 0 -75px;
background: url(../img/icons/IconsetW.png?1) -13px -343px no-repeat; background: url(../img/icons/IconsetW.png?1) -13px -343px no-repeat;
background-size: 42px 460px; background-size: 42px 560px;
} }
.is_1x .icon-select-tick { .is_1x .icon-select-tick {
background-image: url(../img/icons/IconsetW_1x.png?2); background-image: url(../img/icons/IconsetW_1x.png?2);

BIN
app/img/icons/IconsetW.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 9.8 KiB

After

Width:  |  Height:  |  Size: 12 KiB

BIN
app/img/icons/IconsetW_1x.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 5.1 KiB

After

Width:  |  Height:  |  Size: 5.2 KiB

12
app/js/directives.js
Unescape View File

@ -89,18 +89,19 @@ angular.module('myApp.directives', ['myApp.filters'])
return; return;
} }
$(element).css({
height: $($window).height() - footer.offsetHeight - (headWrap ? headWrap.offsetHeight : 50) - 72
});
updateScroller();
if (!headWrap) { if (!headWrap) {
headWrap = $('.tg_page_head')[0]; headWrap = $('.tg_page_head')[0];
} }
$(element).css({
height: $($window).height() - footer.offsetHeight - (headWrap ? headWrap.offsetHeight : 44) - 72
});
updateScroller();
} }
$($window).on('resize', updateSizes); $($window).on('resize', updateSizes);
updateSizes(); updateSizes();
setTimeout(updateSizes, 1000);
}; };
}) })
@ -286,7 +287,7 @@ angular.module('myApp.directives', ['myApp.filters'])
height: $(sendForm).height() height: $(sendForm).height()
}); });
var historyH = $($window).height() - panelWrap.offsetHeight - sendPanelWrap.offsetHeight - headWrap.offsetHeight - footer.offsetHeight; var historyH = $($window).height() - panelWrap.offsetHeight - sendPanelWrap.offsetHeight - (headWrap ? headWrap.offsetHeight : 44) - footer.offsetHeight;
$(historyWrap).css({ $(historyWrap).css({
height: historyH height: historyH
}); });
@ -306,6 +307,7 @@ angular.module('myApp.directives', ['myApp.filters'])
$($window).on('resize', updateSizes); $($window).on('resize', updateSizes);
updateSizes();
onContentLoaded(updateSizes); onContentLoaded(updateSizes);
} }

2
app/partials/contacts_modal.html
Unescape View File

@ -1,7 +1,7 @@
<div class="contacts_modal_wrap"> <div class="contacts_modal_wrap">
<div class="modal-header"> <div class="modal-header">
<a class="modal-close-link" ng-click="$close()">Close</a> <a class="modal-close-link" ng-click="$dismiss()">Close</a>
<h4 class="modal-title">Contacts</h4> <h4 class="modal-title">Contacts</h4>
</div> </div>

1
app/partials/im.html
Unescape View File

@ -22,6 +22,7 @@
<div class="im_history_col_wrap" ng-controller="AppImHistoryController"> <div class="im_history_col_wrap" ng-controller="AppImHistoryController">
<div ng-if="state.notSelected" class="im_history_not_selected">No history to display</div> <div ng-if="state.notSelected" class="im_history_not_selected">No history to display</div>
<div ng-show="!state.notSelected &amp;&amp; !state.loaded" class="im_history_not_selected">Loading history<span my-typing-dots></span></div>
<div ng-if="state.loaded"> <div ng-if="state.loaded">
<div my-history class="im_history_col"> <div my-history class="im_history_col">

74
app/partials/settings_modal.html
Unescape View File

@ -7,51 +7,55 @@
<div class="modal-body"> <div class="modal-body">
<div class="settings_profile_photo_wrap pull-left"> <div class="clearfix">
<div class="settings_profile_photo"> <div class="settings_profile_photo_wrap pull-left">
<img
class="user_modal_image" <div class="settings_profile_photo">
my-load-thumb <img
thumb="profile.photo" class="user_modal_image"
/> my-load-thumb
<div class="settings_profile_photo_change_wrap"> thumb="profile.photo"
<div ng-if="photo.updating" class="settings_profile_photo_loading">Updating<span my-typing-dots></span></div> />
<div ng-if="!photo.updating"> <div class="settings_profile_photo_change_wrap">
<div class="settings_profile_photo_update_link"> <div ng-if="photo.updating" class="settings_profile_photo_loading">Updating<span my-typing-dots></span></div>
<input my-file-upload type="file" multiple="false" class="im_attach_input" size="120" multiple="false" accept="image/x-png, image/png, image/gif, image/jpeg" /> <div ng-if="!photo.updating">
Update photo <div class="settings_profile_photo_update_link">
<input my-file-upload type="file" multiple="false" class="im_attach_input" size="120" multiple="false" accept="image/x-png, image/png, image/gif, image/jpeg" />
Update photo
</div>
<a ng-if="profile.photo.location" href="" ng-click="deletePhoto()" class="settings_profile_photo_delete_link">Delete photo</a>
</div> </div>
<a ng-if="profile.photo.location" href="" ng-click="deletePhoto()" class="settings_profile_photo_delete_link">Delete photo</a>
</div> </div>
</div> </div>
</div> </div>
</div> <form my-settings-form name="profileForm" class="settings_profile_edit_form">
<form my-settings-form name="profileForm" class="settings_profile_edit_form clearfix"> <div class="form-group settings_profile_first_name" ng-class="{'has-error': error.field == 'first_name'}">
<label class="control-label" for="first_name">
<span ng-if="error.field == 'first_name'">Invalid First Name</span>
<span ng-if="error.field != 'first_name'">First Name</span>
</label>
<input type="text" class="form-control" name="first_name" ng-model="profile.first_name" required />
</div>
<div class="form-group settings_profile_first_name" ng-class="{'has-error': error.field == 'first_name'}"> <div class="form-group settings_profile_last_name" ng-class="{'has-error': error.field == 'last_name'}">
<label class="control-label" for="first_name"> <label class="control-label" for="last_name">
<span ng-if="error.field == 'first_name'">Invalid First Name</span> <span ng-if="error.field == 'last_name'">Invalid Last Name</span>
<span ng-if="error.field != 'first_name'">First Name</span> <span ng-if="error.field != 'last_name'">Last Name</span>
</label> </label>
<input type="text" class="form-control" name="first_name" ng-model="profile.first_name" required /> <input type="text" class="form-control" name="last_name" ng-model="profile.last_name" />
</div> </div>
<div class="form-group settings_profile_last_name" ng-class="{'has-error': error.field == 'last_name'}"> <div class="settings_profile_save">
<label class="control-label" for="last_name"> <button class="btn btn-link settings_profile_save_btn" ng-click="save(profileForm)" ng-disabled="profileForm.$invalid || (!profileForm.last_name.$dirty &amp;&amp; !profileForm.first_name.$dirty)">Save</button>
<span ng-if="error.field == 'last_name'">Invalid Last Name</span> </div>
<span ng-if="error.field != 'last_name'">Last Name</span>
</label>
<input type="text" class="form-control" name="last_name" ng-model="profile.last_name" />
</div>
<div class="settings_profile_save"> </form>
<button class="btn btn-link settings_profile_save_btn" ng-click="save(profileForm)" ng-disabled="profileForm.$invalid || (!profileForm.last_name.$dirty &amp;&amp; !profileForm.first_name.$dirty)">Save</button>
</div>
</form> </div>
<form class="settings_send_choose_form"> <form class="settings_send_choose_form">
<div class="radio"> <div class="radio">

Write Preview
Loading…
Cancel
Save