Improved styles, added non-retina icons
This commit is contained in:
Igor Zhukov
parent
8499d5e068
commit
8aa10dfadc
@ -10,6 +10,7 @@ html {
|
||||
/*background-size: 248px 382px;*/
|
||||
}
|
||||
body {
|
||||
color: #000;
|
||||
background: none;
|
||||
font: 12px/18px "Lucida Grande", "Lucida Sans Unicode", Arial, Helvetica, Verdana, sans-serif;
|
||||
/*-webkit-font-smoothing: antialiased;*/
|
||||
@ -23,6 +24,9 @@ body.non_osx,
|
||||
font: 13px/18px Tahoma, sans-serif, Arial, Helvetica;
|
||||
font-weight: normal;
|
||||
}
|
||||
h1, h2, h3, h4, h5 {
|
||||
color: #222;
|
||||
}
|
||||
.non_osx h4 {
|
||||
font-size: 17px;
|
||||
}
|
||||
@ -214,6 +218,7 @@ fieldset[disabled] .btn-tg.active {
|
||||
margin: 0 18px;
|
||||
}
|
||||
.modal-title {
|
||||
color: #222;
|
||||
font-weight: bold;
|
||||
font-size: 17px;
|
||||
line-height: 1.4;
|
||||
@ -398,6 +403,10 @@ fieldset[disabled] .btn-tg.active {
|
||||
margin-bottom: 0;
|
||||
margin: 0;
|
||||
}
|
||||
.is_1x .im_dialogs_search_field {
|
||||
background-image: url(../img/icons/IconsetW_1x.png);
|
||||
}
|
||||
|
||||
.im_dialogs_search_field:focus,
|
||||
.im_dialogs_search_field:active {
|
||||
background-color: #FFF;
|
||||
@ -415,6 +424,9 @@ fieldset[disabled] .btn-tg.active {
|
||||
background-size: 42px 280px;
|
||||
opacity: 0.6;
|
||||
}
|
||||
.is_1x .im_dialogs_search_clear {
|
||||
background-image: url(../img/icons/IconsetW_1x.png);
|
||||
}
|
||||
.im_dialogs_search_clear:hover {
|
||||
opacity: 1;
|
||||
}
|
||||
@ -427,6 +439,9 @@ fieldset[disabled] .btn-tg.active {
|
||||
padding: 0 19px 0 12px;
|
||||
outline: none ! important;
|
||||
}
|
||||
.im_dialogs_scrollable_wrap .im_dialog_wrap {
|
||||
margin-top: 0;
|
||||
}
|
||||
.im_dialogs_scrollable_wrap a.im_dialog {
|
||||
clear: both;
|
||||
overflow: hidden;
|
||||
@ -440,10 +455,10 @@ fieldset[disabled] .btn-tg.active {
|
||||
}
|
||||
.im_dialogs_scrollable_wrap .active a.im_dialog {
|
||||
border-radius: 2px;
|
||||
background-color: #5785A5;
|
||||
background-color: #6490b1;
|
||||
}
|
||||
.im_dialogs_scrollable_wrap .active a.im_dialog:hover {
|
||||
background-color: #5785A5;
|
||||
background-color: #6490b1;
|
||||
}
|
||||
|
||||
.im_dialogs_scrollable_wrap a.im_dialog .icon,
|
||||
@ -481,10 +496,14 @@ a.im_dialog:hover .im_dialog_message_text {
|
||||
|
||||
}
|
||||
.im_dialog_peer {
|
||||
color: #222;
|
||||
font-weight: bold;
|
||||
margin-top: 2px;
|
||||
margin-bottom: 2px;
|
||||
}
|
||||
.active .im_dialog_peer {
|
||||
color: #FFF;
|
||||
}
|
||||
|
||||
.im_dialog_badge {
|
||||
background: #75BB72;
|
||||
@ -570,7 +589,6 @@ a.im_dialog:hover .im_dialog_message_text {
|
||||
padding: 10px 4px 0;
|
||||
}
|
||||
.im_history_panel_title h4 {
|
||||
color: #333333;
|
||||
margin-bottom: 7px;
|
||||
font-size: 17px;
|
||||
}
|
||||
@ -759,7 +777,7 @@ div.im_message_video_thumb {
|
||||
width: 10px;
|
||||
height: 14px;
|
||||
|
||||
background: url(../img/icons/Location_Active.png) 0 0 no-repeat;
|
||||
background: url(../img/icons/Location_Active.png?1) 0 0 no-repeat;
|
||||
background-size: 10px 14px;
|
||||
}
|
||||
|
||||
@ -786,6 +804,9 @@ div.im_message_video_thumb {
|
||||
border-radius: 3px;
|
||||
margin-right: 10px;
|
||||
}
|
||||
.is_1x .icon-document {
|
||||
background-image: url(../img/icons/IconsetW_1x.png);
|
||||
}
|
||||
|
||||
.im_message_document_info {
|
||||
float: left;
|
||||
@ -800,7 +821,7 @@ div.im_message_video_thumb {
|
||||
}
|
||||
|
||||
.im_message_document_name {
|
||||
color: #000;
|
||||
color: #222;
|
||||
display: inline-block;
|
||||
font-weight: bold;
|
||||
max-width: 200px;
|
||||
@ -911,8 +932,7 @@ div.im_message_video_thumb {
|
||||
}
|
||||
.im_message_date {
|
||||
color: #adadad;
|
||||
font-size: 0.9em;
|
||||
/*font-size: 0.8em;*/
|
||||
font-size: 0.8em;
|
||||
}
|
||||
div.im_message_author,
|
||||
div.im_message_body {
|
||||
@ -1015,6 +1035,9 @@ textarea.im_message_field {
|
||||
background-size: 42px 280px;
|
||||
opacity: 0.8;
|
||||
}
|
||||
.is_1x .icon-paperclip {
|
||||
background-image: url(../img/icons/IconsetW_1x.png);
|
||||
}
|
||||
.im_attach:hover .icon-paperclip {
|
||||
opacity: 1;
|
||||
}
|
||||
@ -1041,6 +1064,9 @@ textarea.im_message_field {
|
||||
background-size: 42px 280px;
|
||||
opacity: 0.8;
|
||||
}
|
||||
.is_1x .icon-emoji {
|
||||
background-image: url(../img/icons/IconsetW_1x.png);
|
||||
}
|
||||
.im_emoji_btn:hover .icon-emoji {
|
||||
opacity: 1;
|
||||
}
|
||||
@ -1086,6 +1112,9 @@ textarea.im_message_field {
|
||||
background-size: 42px 280px;
|
||||
opacity: 0.8;
|
||||
}
|
||||
.is_1x .icon-camera {
|
||||
background-image: url(../img/icons/IconsetW_1x.png);
|
||||
}
|
||||
.im_media_attach:hover .icon-camera {
|
||||
opacity: 1;
|
||||
}
|
||||
@ -1332,6 +1361,9 @@ img.img_fullsize {
|
||||
height: 7px;
|
||||
margin: 0 83px;
|
||||
}
|
||||
.is_1x .emoji-menu-tail {
|
||||
background-image: url(../img/icons/IconsetW_1x.png);
|
||||
}
|
||||
|
||||
|
||||
.emoji-menu .nano > .pane {
|
||||
@ -1394,4 +1426,4 @@ img.img_fullsize {
|
||||
margin: 30px auto 10px;
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 518 B |
BIN
app/img/icons/IconsetW_1x.png
Normal file
BIN
app/img/icons/IconsetW_1x.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 3.2 KiB |
BIN
app/img/icons/Location_Active.png
Executable file → Normal file
BIN
app/img/icons/Location_Active.png
Executable file → Normal file
Binary file not shown.
|
Before Width: | Height: | Size: 574 B After Width: | Height: | Size: 3.2 KiB |
@ -7,7 +7,7 @@
|
||||
<link rel="stylesheet" href="vendor/angular/angular-csp.css"/>
|
||||
<link rel="stylesheet" href="vendor/bootstrap/css/bootstrap.css"/>
|
||||
<link rel="stylesheet" href="vendor/jquery.nanoscroller/nanoscroller.css"/>
|
||||
<link rel="stylesheet" href="css/app.css?15"/>
|
||||
<link rel="stylesheet" href="css/app.css?16"/>
|
||||
<link rel="icon" href="favicon.ico" type="image/x-icon" />
|
||||
|
||||
<meta property="og:title" content="Webogram">
|
||||
@ -34,7 +34,7 @@
|
||||
<script type="text/javascript" src="vendor/console-polyfill/console-polyfill.js?1"></script>
|
||||
<script type="text/javascript" src="vendor/jquery/jquery.min.js"></script>
|
||||
<script type="text/javascript" src="vendor/jquery.nanoscroller/nanoscroller.js"></script>
|
||||
<script type="text/javascript" src="vendor/jquery.emojiarea/jquery.emojiarea.js?2"></script>
|
||||
<script type="text/javascript" src="vendor/jquery.emojiarea/jquery.emojiarea.js?3"></script>
|
||||
|
||||
<script type="text/javascript" src="vendor/angular/angular.js?1"></script>
|
||||
<script type="text/javascript" src="vendor/angular/angular-route.js?1"></script>
|
||||
@ -51,11 +51,11 @@
|
||||
<script type="text/javascript" src="js/lib/mtproto.js?17"></script>
|
||||
|
||||
<script type="text/javascript" src="js/util.js"></script>
|
||||
<script type="text/javascript" src="js/app.js?11"></script>
|
||||
<script type="text/javascript" src="js/app.js?12"></script>
|
||||
<script type="text/javascript" src="js/services.js?13"></script>
|
||||
<script type="text/javascript" src="js/controllers.js?20"></script>
|
||||
<script type="text/javascript" src="js/filters.js?3"></script>
|
||||
<script type="text/javascript" src="js/directives.js?13"></script>
|
||||
<script type="text/javascript" src="js/directives.js?14"></script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@ -11,10 +11,12 @@ window._testMode = location.search.indexOf('test=1') > 0;
|
||||
window._debugMode = location.search.indexOf('debug=1') > 0;
|
||||
window._osX = (navigator.platform || '').toLowerCase().indexOf('mac') != -1 ||
|
||||
(navigator.userAgent || '').toLowerCase().indexOf('mac') != -1;
|
||||
window._retina = window.devicePixelRatio > 1;
|
||||
|
||||
if (!window._osX) {
|
||||
$('body').addClass('non_osx');
|
||||
}
|
||||
$('body').addClass(window._retina ? 'is_2x' : 'is_1x');
|
||||
|
||||
// Declare app level module which depends on filters, and services
|
||||
angular.module('myApp', [
|
||||
@ -55,7 +57,7 @@ config(['$locationProvider', '$routeProvider', '$compileProvider', function($loc
|
||||
// $locationProvider.html5Mode(true);
|
||||
$routeProvider.when('/', {templateUrl: 'partials/welcome.html?2', controller: 'AppWelcomeController'});
|
||||
$routeProvider.when('/login', {templateUrl: 'partials/login.html?3', controller: 'AppLoginController'});
|
||||
$routeProvider.when('/im', {templateUrl: 'partials/im.html?8', controller: 'AppIMController', reloadOnSearch: false});
|
||||
$routeProvider.when('/im', {templateUrl: 'partials/im.html?9', controller: 'AppIMController', reloadOnSearch: false});
|
||||
$routeProvider.otherwise({redirectTo: '/'});
|
||||
|
||||
}]);
|
||||
|
||||
@ -201,8 +201,10 @@ angular.module('myApp.directives', ['myApp.filters'])
|
||||
|
||||
scope.$on('ui_editor_change', function (e, data) {
|
||||
if (data.start) {
|
||||
$(sendFormWrap1).css({height: $(sendFormWrap).height()});
|
||||
$(sendPanelWrap).addClass('im_panel_fixed_bottom');
|
||||
if (!$(sendPanelWrap).hasClass('im_panel_fixed_bottom')) {
|
||||
$(sendFormWrap1).css({height: $(sendFormWrap).height()});
|
||||
$(sendPanelWrap).addClass('im_panel_fixed_bottom');
|
||||
}
|
||||
} else {
|
||||
$(sendFormWrap1).css({height: 'auto'});
|
||||
$(sendPanelWrap).removeClass('im_panel_fixed_bottom');
|
||||
|
||||
@ -13,7 +13,7 @@
|
||||
<div class="im_dialogs_wrap nano">
|
||||
<div class="im_dialogs_scrollable_wrap content">
|
||||
<ul class="nav nav-pills nav-stacked">
|
||||
<li my-dialog dialog-message="dialogMessage" ng-repeat="dialogMessage in dialogs | filter:searchQuery" ng-class="{active: curDialog.peerID == dialogMessage.peerID}"></li>
|
||||
<li class="im_dialog_wrap" my-dialog dialog-message="dialogMessage" ng-repeat="dialogMessage in dialogs | filter:searchQuery" ng-class="{active: curDialog.peerID == dialogMessage.peerID}"></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
37
app/vendor/jquery.emojiarea/jquery.emojiarea.js
vendored
37
app/vendor/jquery.emojiarea/jquery.emojiarea.js
vendored
@ -254,7 +254,13 @@
|
||||
this.$editor = $('<div>').addClass('emoji-wysiwyg-editor');
|
||||
this.$editor.text($textarea.val());
|
||||
this.$editor.attr({contenteditable: 'true'});
|
||||
this.$editor.on('blur keyup paste', function(e) { return self.onChange.apply(self, [e]); });
|
||||
/*! MODIFICATION START
|
||||
Following code was modified by Igor Zhukov, in order to improve rich text paste
|
||||
*/
|
||||
this.$editor.on('paste', function(e) { return self.onPaste.apply(self, [e]); });
|
||||
this.$editor.on('blur keyup', function(e) { return self.onChange.apply(self, [e]); });
|
||||
/*! MODIFICATION END */
|
||||
|
||||
this.$editor.on('mousedown focus', function() { document.execCommand('enableObjectResizing', false, false); });
|
||||
this.$editor.on('blur', function() { document.execCommand('enableObjectResizing', true, true); });
|
||||
|
||||
@ -278,19 +284,24 @@
|
||||
});
|
||||
};
|
||||
|
||||
/*! MODIFICATION START
|
||||
Following code was modified by Igor Zhukov, in order to improve rich text paste
|
||||
*/
|
||||
EmojiArea_WYSIWYG.prototype.onPaste = function(e) {
|
||||
var text = (e.originalEvent || e).clipboardData.getData('text/plain'),
|
||||
self = this;
|
||||
setTimeout(function () {
|
||||
self.onChange();
|
||||
}, 0);
|
||||
if (text.length) {
|
||||
document.execCommand('insertText', false, text);
|
||||
return cancelEvent(e);
|
||||
}
|
||||
return true;
|
||||
}
|
||||
/*! MODIFICATION END */
|
||||
|
||||
EmojiArea_WYSIWYG.prototype.onChange = function(e) {
|
||||
if (e && e.type == 'paste') {
|
||||
var text = (e.originalEvent || e).clipboardData.getData('text/plain'),
|
||||
self = this;
|
||||
setTimeout(function () {
|
||||
self.onChange();
|
||||
}, 0);
|
||||
if (text.length) {
|
||||
document.execCommand('insertText', false, text);
|
||||
return cancelEvent(e);
|
||||
}
|
||||
return true;
|
||||
}
|
||||
this.$textarea.val(this.val()).trigger('change');
|
||||
};
|
||||
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user