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