Improved styles, added non-retina icons

app/css/app.css

@@ -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;
   }
 
-}
+}

app/index.html

@@ -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>

app/js/app.js

@@ -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: '/'});
 
 }]);

app/js/directives.js

@@ -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()});
+          if (!$(sendPanelWrap).hasClass('im_panel_fixed_bottom')) {
-          $(sendPanelWrap).addClass('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');

app/partials/im.html

@@ -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>

app/vendor/jquery.emojiarea/jquery.emojiarea.js

@@ -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');
 	};