Improved group styles, started forward

app/css/app_mobile.css

@@ -296,27 +296,10 @@ html {
 .im_panel_peer_photo {
   display: none;
 }
-.im_message_text,
-.im_message_document {
-  padding: 7px 10px;
-  border-radius: 3px;
-  background: #f1f1f1;
-}
 .im_history_selectable .im_message_outer_wrap:hover,
 .im_message_selected {
   background: #e1e9f0;
 }
-.im_message_out .im_message_text,
-.im_message_out .im_message_document {
-  background: #e4ecf2;
-}
-
-.im_message_selected .im_message_text,
-.im_message_selected .im_message_document,
-.im_message_selected .im_message_text a {
-  color: #FFF;
-  background: #497495;
-}
 
 
 .im_message_document {
@@ -461,20 +444,46 @@ a.im_message_video_thumb {
   position: static;
 }
 .im_message_wrap {
-  padding: 0 10px;
+  padding: 0 8px;
 }
 .im_content_message_wrap {
   font-size: 1.2em;
   margin-right: 65px;
   margin-left: 0;
+  /*margin-bottom: 0;*/
   float: left;
   position: relative;
+  max-width: 80%;
 }
 .im_message_out.im_content_message_wrap {
   margin-right: 0;
   margin-left: 80px;
   float: right;
 }
+.im_message_fwd.im_content_message_wrap {
+  float: none;
+}
+.im_history_messages_group .im_message_grouped1 .im_content_message_wrap,
+.im_history_messages_group .im_message_grouped2 .im_content_message_wrap,
+.im_history_messages_group .im_message_grouped3 .im_content_message_wrap,
+.im_history_messages_group .im_message_grouped4 .im_content_message_wrap {
+  margin-top: 0;
+  margin-left: 45px;
+}
+.im_message_grouped1 .im_message_out.im_content_message_wrap,
+.im_message_grouped2 .im_message_out.im_content_message_wrap,
+.im_message_grouped3 .im_message_out.im_content_message_wrap,
+.im_message_grouped4 .im_message_out.im_content_message_wrap {
+  margin-left: 0;
+}
+.im_message_grouped1 .im_message_fwd.im_content_message_wrap,
+.im_message_grouped2 .im_message_fwd.im_content_message_wrap,
+.im_message_grouped3 .im_message_fwd.im_content_message_wrap,
+.im_message_grouped4 .im_message_fwd.im_content_message_wrap {
+  margin-left: 80px;
+  margin-top: 0;
+  margin-bottom: 0;
+}
 .im_message_meta {
   float: none;
   position: absolute;
@@ -482,17 +491,80 @@ a.im_message_video_thumb {
   right: -44px;
 }
 .im_message_date {
-  font-size: 13px;
+  font-size: 12px;
 }
 .im_message_out .im_message_meta {
   right: auto;
   left: -60px;
 }
 
-a.im_message_from_photo,
-a.im_message_author {
+.im_message_body,
+.im_message_document {
+  padding: 7px 10px;
+  border-radius: 3px;
+  background: #f1f1f1;
+}
+.im_message_out .im_message_body,
+.im_message_out .im_message_document {
+  background: #e4ecf2;
+}
+.im_message_body_media,
+.im_message_out .im_message_body_media {
+  padding: 0;
+  border-radius: 0;
+  background: none;
+}
+
+.im_message_selected .im_message_body,
+.im_message_selected .im_message_document {
+  background: #497495;
+  color: #FFF;
+}
+.im_message_selected .im_message_body_media {
+  background: none;
+  color: inherit;
+}
+.im_message_selected .im_message_body a {
+  color: #FFF;
+}
+
+
+.im_message_from_photo {
+  width: 40px;
+  height: 40px;
+}
+a.im_message_from_photo {
+  margin-right: 5px;
+  display: none;
+}
+.im_history_messages_group a.im_message_from_photo {
+  display: block;
+}
+.im_message_author {
   display: none;
 }
+.im_history_messages_group a.im_message_author {
+  display: inline;
+  font-size: 13px;
+  font-weight: normal;
+}
+.im_message_grouped1 a.im_message_from_photo,
+.im_message_grouped1 a.im_message_author,
+.im_message_grouped2 a.im_message_from_photo,
+.im_message_grouped2 a.im_message_author,
+.im_message_grouped3 a.im_message_author,
+.im_message_grouped3 a.im_message_from_photo,
+.im_message_grouped4 a.im_message_author,
+.im_message_grouped4 a.im_message_from_photo,
+.im_message_out a.im_message_author,
+.im_message_out a.im_message_from_photo {
+  display: none;
+}
+.im_message_wrap {
+  padding: 0 7px;
+}
+
+
 
 
 .im_message_out .icon-message-status-tick {
@@ -681,6 +753,15 @@ a.im_dialog_selected .im_dialog_unread {
 .im_dialog_message_text {
   color: #8f8f8f;
 }
+
+.im_message_grouped4 .im_message_fwd.im_message_out .im_message_fwd_author_wrap,
+.im_message_grouped4 .im_message_fwd.im_message_out .im_message_text,
+.im_message_grouped4 .im_message_fwd.im_message_out .im_message_media {
+  /*margin-left: 0;*/
+}
+
+
+
 .im_dialogs_scrollable_wrap a.im_dialog:hover,
 .im_dialogs_scrollable_wrap a.im_dialog_selected,
 .im_dialogs_scrollable_wrap .active a.im_dialog,

app/partials/im.html

@@ -162,7 +162,7 @@
                       <span ng-switch-default>No messages here yet...</span>
                     </div>
 
-                    <div class="im_history_messages">
+                    <div class="im_history_messages" ng-class="{im_history_messages_group: historyPeer.id < 0}">
                       <div class="im_history_message_wrap" my-message ng-repeat="historyMessage in history"></div>
                     </div>
                   </div>

app/partials/message.html

@@ -45,7 +45,7 @@
         <span class="im_message_date" ng-bind="::historyMessage.date | time"></span>
       </div>
 
-      <div class="im_message_body">
+      <div class="im_message_body" ng-class="{im_message_body_media: historyMessage._ == 'message' &amp;&amp; historyMessage.media &amp;&amp; historyMessage.media._ != 'messageMediaEmpty'}">
 
         <a class="im_message_author" my-user-link="historyMessage.from_id" short="!historyMessage.to_id.chat_id" color="historyMessage.to_id.chat_id > 0"></a>