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

Improved styles, updated icons

Browse Source
This commit is contained in:
Igor Zhukov 2014-03-04 23:52:26 +01:00
parent 055604c310
commit 19f0c3b6e9
7 changed files with 107 additions and 85 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

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

2
app/partials/contacts_modal.html
View File

@ -1,7 +1,7 @@
<div class="contacts_modal_wrap">
<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>
</div>

1
app/partials/im.html
View File

@ -22,6 +22,7 @@
<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-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 my-history class="im_history_col">

80
app/partials/settings_modal.html
View File

@ -7,52 +7,56 @@
<div class="modal-body">
<div class="settings_profile_photo_wrap pull-left">
<div class="clearfix">
<div class="settings_profile_photo">
<img
class="user_modal_image"
my-load-thumb
thumb="profile.photo"
/>
<div class="settings_profile_photo_change_wrap">
<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_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 class="settings_profile_photo_wrap pull-left">
<div class="settings_profile_photo">
<img
class="user_modal_image"
my-load-thumb
thumb="profile.photo"
/>
<div class="settings_profile_photo_change_wrap">
<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_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>
<a ng-if="profile.photo.location" href="" ng-click="deletePhoto()" class="settings_profile_photo_delete_link">Delete photo</a>
</div>
</div>
</div>
<form my-settings-form name="profileForm" class="settings_profile_edit_form">
<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_last_name" ng-class="{'has-error': error.field == 'last_name'}">
<label class="control-label" for="last_name">
<span ng-if="error.field == 'last_name'">Invalid Last Name</span>
<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">
<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 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_last_name" ng-class="{'has-error': error.field == 'last_name'}">
<label class="control-label" for="last_name">
<span ng-if="error.field == 'last_name'">Invalid Last Name</span>
<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">
<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>
<form class="settings_send_choose_form">
<div class="radio">
<label>