From ffee3aa75f626a1fed5edae0bbbf4dcc0c803162 Mon Sep 17 00:00:00 2001 From: JC Brand Date: Thu, 19 Jul 2018 23:29:56 +0200 Subject: [PATCH] More work on properly showing a pencil icon to edit messages updates #421 --- css/converse.css | 22 ++++++++--- mockup/chatroom.html | 94 ++++++++++++++++++++++++-------------------- sass/_messages.scss | 23 ++++++++--- 3 files changed, 84 insertions(+), 55 deletions(-) diff --git a/css/converse.css b/css/converse.css index d029bb4425..198405d9db 100644 --- a/css/converse.css +++ b/css/converse.css @@ -8860,7 +8860,7 @@ body.reset { #conversejs .message.chat-msg:hover { background-color: rgba(0, 0, 0, 0.035); } #conversejs .message.chat-msg:hover .chat-msg-actions .chat-msg-action { - display: block; } + opacity: 1; } #conversejs .message.chat-msg.correcting.groupchat { background-color: #fdf1ee; } #conversejs .message.chat-msg.correcting:not(.groupchat) { @@ -8877,16 +8877,26 @@ body.reset { #conversejs .message.chat-msg .spoiler-toggle:before { padding-right: 0.25em; whitespace: nowrap; } - #conversejs .message.chat-msg .chat-msg-content { + #conversejs .message.chat-msg .chat-msg-container { + display: flex; + flex-direction: column; + justify-content: space-between; + align-items: stretch; margin-left: 0.5rem; width: 100%; } + #conversejs .message.chat-msg .chat-msg-content { + display: flex; + flex-direction: row; + justify-content: space-between; + width: 100%; } #conversejs .message.chat-msg .chat-msg-edited { cursor: pointer; } #conversejs .message.chat-msg.headline .chat-msg-content { margin-left: 0; } #conversejs .message.chat-msg .chat-msg-text { padding: 0; - color: #555; } + color: #555; + width: 100%; } #conversejs .message.chat-msg .chat-msg-text a { word-wrap: break-word; word-break: break-all; } @@ -8903,7 +8913,7 @@ body.reset { font-size: 14px; padding: 0; border: none; - display: none; + opacity: 0; background: transparent; cursor: pointer; } #conversejs .message.chat-msg .chat-msg-actions .chat-msg-action:focus { @@ -8914,6 +8924,7 @@ body.reset { vertical-align: middle; width: 36px; } #conversejs .message.chat-msg .chat-msg-heading { + width: 100%; margin-top: 0.5em; padding-right: 0.25rem; padding-bottom: 0.25rem; @@ -8930,13 +8941,12 @@ body.reset { #conversejs .message.chat-msg.chat-action { display: block; } #conversejs .message.chat-msg.chat-action .chat-msg-heading { - float: left; margin-top: 0; padding-bottom: 0; } #conversejs .message.chat-msg.chat-msg-followup .chat-msg-heading, #conversejs .message.chat-msg.chat-msg-followup .avatar { display: none; } - #conversejs .message.chat-msg.chat-msg-followup .chat-msg-content { + #conversejs .message.chat-msg.chat-msg-followup .chat-msg-container { margin-left: 2.75rem; } #conversejs .chatroom-body .message.onload { animation: colorchange-chatmessage-muc 1s; diff --git a/mockup/chatroom.html b/mockup/chatroom.html index e8b00c151a..943427fe6a 100644 --- a/mockup/chatroom.html +++ b/mockup/chatroom.html @@ -53,15 +53,17 @@
-
- +
+
Romeo Montague Developer 15:31 - - He jests at scars that never felt a wound. -
-
- +
+
+
He jests at scars that never felt a wound.
+
+ +
+
@@ -75,63 +77,69 @@
-
- +
+
Romeo Montague 19:36 - - - But, soft! what light through yonder window breaks? - -
-
- +
+
+
But, soft! what light through yonder window breaks?
+
+ +
+
-
- +
+
Romeo Montague 19:36 - - It is the east, and Juliet is the sun. -
-
- +
+
+
It is the east, and Juliet is the sun.
+
+ +
+
-
- +
+
Romeo Montague 19:36 - - Arise, fair sun, and kill the envious moon, Who is already sick and pale with grief -
-
- +
+
+
Arise, fair sun, and kill the envious moon, Who is already sick and pale with grief
+
+ +
+
-
- +
+
Juliet Capulet 19:43 - - - O Romeo, Romeo! wherefore art thou Romeo? - Deny thy father and refuse thy name; - Or, if thou wilt not, be but sworn my love, - And I'll no longer be a Capulet. - -
-
-
- +
+
+
+ O Romeo, Romeo! wherefore art thou Romeo? + Deny thy father and refuse thy name; + Or, if thou wilt not, be but sworn my love, + And I'll no longer be a Capulet. +
+
+
+ +
+
diff --git a/sass/_messages.scss b/sass/_messages.scss index 44a384db71..c4e205721d 100644 --- a/sass/_messages.scss +++ b/sass/_messages.scss @@ -72,10 +72,9 @@ } &:hover { background-color: rgba(0, 0, 0, 0.035); - .chat-msg-actions { .chat-msg-action { - display: block; + opacity: 1; } } } @@ -105,10 +104,21 @@ whitespace: nowrap; } } - .chat-msg-content { + .chat-msg-container { + display: flex; + flex-direction: column; + justify-content: space-between; + align-items: stretch; margin-left: 0.5rem; width: 100%; } + + .chat-msg-content { + display: flex; + flex-direction: row; + justify-content: space-between; + width: 100%; + } .chat-msg-edited { cursor: pointer; } @@ -121,6 +131,7 @@ .chat-msg-text { padding: 0; color: $message-text-color; + width: 100%; a { word-wrap: break-word; word-break: break-all; @@ -146,7 +157,7 @@ font-size: $message-font-size; padding: 0; border: none; - display: none; + opacity: 0; background: transparent; cursor: pointer; &:focus { @@ -162,6 +173,7 @@ width: 36px; } .chat-msg-heading { + width: 100%; margin-top: 0.5em; padding-right: 0.25rem; padding-bottom: 0.25rem; @@ -184,7 +196,6 @@ display: block; .chat-msg-heading { - float: left; margin-top: 0; padding-bottom: 0; } @@ -194,7 +205,7 @@ .avatar { display: none; } - .chat-msg-content { + .chat-msg-container { margin-left: 2.75rem; } }