From 2a58e24ba8d0a75da353a55583cf16bf32df3c7a Mon Sep 17 00:00:00 2001
From: Tobias Markmann <tm@ayena.de>
Date: Fri, 21 Oct 2016 22:38:51 +0200
Subject: Reduce width of sidebar in chat theme; move time inline

The moves the timestamps from the sidebar into the message
block to the right, after the nickname, floating right-aligned
at the top of a message.

This reduces the width of the sidebar.

Test-Information:

Tested with Qt 5.7.0 and QtWebKit TP4 on macOS 10.12.
Tested MUC and 1-to-1 chat views. Tested last message
correction UI behaviour.

Change-Id: Ibd899e9017ac5654b3eb3fe909c9be1524d4b50b

diff --git a/Swift/resources/themes/Default/Incoming/Content.html b/Swift/resources/themes/Default/Incoming/Content.html
index b6e9ec5..15bc088 100644
--- a/Swift/resources/themes/Default/Incoming/Content.html
+++ b/Swift/resources/themes/Default/Incoming/Content.html
@@ -1,9 +1,6 @@
 <!--OTHERS MESSAGE-->
 <div class="message" id="%id%">
     <div class="user">
-        <div class="time">
-            <p>%time%</p>
-        </div>
         <div class="otheravatar">
             <img src="%userIconPath%"/>
         </div>
@@ -14,6 +11,9 @@
     </div>
     <div class="text">
         <p class="otherusername username">%wrapped_sender%</p>
+        <div class="time">
+            %time%
+        </div>
         <div class="message-content">%message%</div>
     </div>
 </div>
diff --git a/Swift/resources/themes/Default/Incoming/NextContent.html b/Swift/resources/themes/Default/Incoming/NextContent.html
index dedc56f..36fdaa3 100644
--- a/Swift/resources/themes/Default/Incoming/NextContent.html
+++ b/Swift/resources/themes/Default/Incoming/NextContent.html
@@ -1,9 +1,6 @@
 <!--OTHERS MESSAGE ADDITIONAL-->
 <div class="message additional" id="%id%">
     <div class="user">
-        <div class="time-additional">
-            <p>%time%</p>
-        </div>
         <div class="systemavatar">
             <img/>
         </div>
@@ -13,6 +10,9 @@
         </div>
     </div>
     <div class="text">
+        <div class="time">
+            %time%
+        </div>
         <div class="message-content">%message%</div>
     </div>
 </div>
diff --git a/Swift/resources/themes/Default/Outgoing/Content.html b/Swift/resources/themes/Default/Outgoing/Content.html
index 7aada5d..e73e785 100644
--- a/Swift/resources/themes/Default/Outgoing/Content.html
+++ b/Swift/resources/themes/Default/Outgoing/Content.html
@@ -1,9 +1,6 @@
 <!--MY MESSAGE-->
 <div class="message" id="%id%">
     <div class="user">
-        <div class="time">
-            <p>%time%</p>
-        </div>
         <div class="myavatar">
             <img src="%userIconPath%"/>
         </div>
@@ -14,6 +11,9 @@
     </div>
     <div class="text">
         <p class="myusername username">%wrapped_sender%</p>
+        <div class="time">
+            %time%
+        </div>
         <div class="message-content">%message%</div>
     </div>
 </div>
diff --git a/Swift/resources/themes/Default/Outgoing/NextContent.html b/Swift/resources/themes/Default/Outgoing/NextContent.html
index 4fc703f..f96f65a 100644
--- a/Swift/resources/themes/Default/Outgoing/NextContent.html
+++ b/Swift/resources/themes/Default/Outgoing/NextContent.html
@@ -1,9 +1,6 @@
 <!--My MESSAGE ADDITIONAL-->
 <div class="message additional" id="%id%">
     <div class="user">
-        <div class="time-additional">
-            <p>%time%</p>
-        </div>
         <div class="systemavatar">
             <img/>
         </div>
@@ -13,6 +10,9 @@
         </div>
     </div>
     <div class="text">
+        <div class="time">
+            %time%
+        </div>
         <div class="message-content">%message%</div>
     </div>
 </div>
diff --git a/Swift/resources/themes/Default/Status.html b/Swift/resources/themes/Default/Status.html
index 55dd082..0a0aaed 100644
--- a/Swift/resources/themes/Default/Status.html
+++ b/Swift/resources/themes/Default/Status.html
@@ -1,16 +1,15 @@
 <!--SYSTEM MESSAGE-->
 <div class="message" id="%id%">
     <div class="user">
-        <div class="time-additional">
-            <p>%time%</p>
-            <img/>
-        </div>
         <div class="systemavatar">
             <img/>
         </div>
         <div class="systemright"></div>
     </div>
     <div class="text">
+        <div class="time">
+            %time%
+        </div>
         <p class="system-message">%message%</p>
     </div>
 </div>
diff --git a/Swift/resources/themes/Default/main.css b/Swift/resources/themes/Default/main.css
index c5cc977..bd69596 100644
--- a/Swift/resources/themes/Default/main.css
+++ b/Swift/resources/themes/Default/main.css
@@ -79,53 +79,30 @@ body {
 .user {
     display: table-cell;
     border: inherit;
-    text-align: center;
     margin-top: 2px;
-    width: 175px;
-    max-width: 175px;
-    min-width: 175px;
-    background-color: #595959;
-}
-
-.time {
-    height: 2.5em;
-    width: 103px;
-    float: left;
     text-align: right;
+    width:     4.6em;
+    max-width: 4.6em;
+    min-width: 4.6em;
+    background-color: #595959;
 }
 
-.time p {
-    margin-top: 3px;
-    margin-bottom: 1px;
-    margin-right: 10px;
-    color: #f9f9f9;
+div.time {
+    color: #ffffff;
     font-size: 80%;
     font-weight: 300;
-}
 
-.time-additional {
-    width: 103px;
-    float: left;
+    float: right;
+    background-color: #595959;
+    border-top-left-radius: 3ex 3ex;
+    border-bottom-left-radius: 3ex 3ex;
+    /* min-width: 50px; */
     text-align: right;
-}
-
-.time-additional p {
-    margin-top: 0px;
-    margin-bottom: 1px;
-    margin-right: 10px;
-    color: #f9f9f9;
-    font-size: 80%;
-    font-weight: 300;
-}
-
-.time img {
-    margin-right: 10px;
-    height: 10px;
-}
-
-.time-additional img {
-    margin-right: 10px;
-    height: 10px;
+    padding-left: 0.5em;
+    padding-right: 0.5em;
+    padding-top: 0.05ex;
+    padding-bottom: 0.05ex;
+    margin-left: 0.5em;
 }
 
 .myavatar {
@@ -164,14 +141,14 @@ body {
 
 .myright {
     float: right;
-    width: 1.65em;
+    width: 1.05em;    /* myuser width/2 - ( other avatar width/2) = 1.05em*/
     height: 2.5em;
     background: #92c47e;
 }
 
 .otherright {
     float: right;
-    width: 1.65em;
+    width: 1.05em;    /* myuser width/2 - ( other avatar width/2) = 1.05em*/
     height: 2.5em;
     background: #6eb6ce;
 }
@@ -195,7 +172,7 @@ body {
 
 .systemright {
     float: right;
-    width: 1.65em;
+    width: 1.05em;    /* myuser width/2 - ( other avatar width/2) = 1.05em*/
     background: #595959;
 }
 
@@ -211,7 +188,6 @@ body {
 .text {
     display: table-cell;
     border: inherit;
-    margin-left: 175px;
     color: #595959;
     vertical-align: top;
 
-- 
cgit v0.10.2-6-g49f6