Add message edit icons to mockups

updates #421
This commit is contained in:
JC Brand 2018-07-19 17:06:00 +02:00
parent d25b227ba4
commit 5444f54d00
6 changed files with 79 additions and 2 deletions

View File

@ -7741,7 +7741,8 @@ body.reset {
box-shadow: none;
height: 100vh;
min-height: 50vh;
width: 100%; }
width: 100%;
overflow: hidden; }
#conversejs.converse-fullscreen .chatbox .chat-body {
background-color: #3AA569;
border-top-left-radius: 4px;
@ -8859,6 +8860,8 @@ body.reset {
-webkit-animation: colorchange-chatmessage 1s; }
#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; }
#conversejs .message.chat-msg.correcting.groupchat {
background-color: #fdf1ee; }
#conversejs .message.chat-msg.correcting:not(.groupchat) {
@ -8896,6 +8899,16 @@ body.reset {
word-wrap: break-word; }
#conversejs .message.chat-msg .chat-msg-media audio {
width: 100%; }
#conversejs .message.chat-msg .chat-msg-actions .chat-msg-action {
height: 14px;
font-size: 14px;
padding: 0;
border: none;
display: none;
background: transparent;
cursor: pointer; }
#conversejs .message.chat-msg .chat-msg-actions .chat-msg-action:focus {
display: block; }
#conversejs .message.chat-msg .avatar {
margin-top: 0.5em;
height: 36px;

View File

@ -16,7 +16,7 @@
<noscript><p><img src="//stats.opkode.com/piwik.php?idsite=1" style="border:0;" alt="" /></p></noscript>
<![if gte IE 11]>
<link type="text/css" rel="stylesheet" media="screen" href="/css/converse.css" />
<script src="/dist/converse.min.js"></script>
<script src="/dist/converse.js"></script>
<![endif]>
<style>

View File

@ -52,6 +52,9 @@
He jests at scars that never felt a wound.
</span>
</div>
<div class="chat-msg-actions">
<button class="chat-msg-action fa fa-pencil" title="Edit this message">&nbsp;</button>
</div>
</div>
<div class="message date-separator">
@ -70,6 +73,9 @@
But soft, what light through yonder window breaks?
</span>
</div>
<div class="chat-msg-actions">
<button class="chat-msg-action fa fa-pencil" title="Edit this message">&nbsp;</button>
</div>
</div>
<div class="message chat-msg chat-msg-followup">
@ -83,6 +89,9 @@
It is the east and Juliet is the sun!
</span>
</div>
<div class="chat-msg-actions">
<button class="chat-msg-action fa fa-pencil" title="Edit this message">&nbsp;</button>
</div>
</div>
<div class="message chat-msg chat-msg-followup">
@ -96,6 +105,9 @@
Arise, fair sun, and kill the envious moon,
</span>
</div>
<div class="chat-msg-actions">
<button class="chat-msg-action fa fa-pencil" title="Edit this message">&nbsp;</button>
</div>
</div>
<div class="message chat-info chat-event">Romeo Montague is busy</div>
@ -114,6 +126,9 @@
And I'll no longer be a Capulet.
</span>
</div>
<div class="chat-msg-actions">
<button class="chat-msg-action fa fa-pencil" title="Edit this message">&nbsp;</button>
</div>
</div>
</div>

View File

@ -59,6 +59,9 @@
<span class="chat-msg-time">15:31</span>
</span>
<span class="chat-msg-text">He jests at scars that never felt a wound.</span>
</div>
<div class="chat-msg-actions">
<button class="chat-msg-action fa fa-pencil" title="Edit this message">&nbsp;</button>
</div>
</div>
@ -80,6 +83,9 @@
<span class="chat-msg-text">
But, soft! what light through yonder window breaks?
</span>
</div>
<div class="chat-msg-actions">
<button class="chat-msg-action fa fa-pencil" title="Edit this message">&nbsp;</button>
</div>
</div>
<div class="message chat-msg chat-msg-followup">
@ -90,6 +96,9 @@
<span class="chat-msg-time">19:36</span>
</span>
<span class="chat-msg-text">It is the east, and Juliet is the sun.</span>
</div>
<div class="chat-msg-actions">
<button class="chat-msg-action fa fa-pencil" title="Edit this message">&nbsp;</button>
</div>
</div>
<div class="message chat-msg chat-msg-followup">
@ -100,6 +109,9 @@
<span class="chat-msg-time">19:36</span>
</span>
<span class="chat-msg-text">Arise, fair sun, and kill the envious moon, Who is already sick and pale with grief</span>
</div>
<div class="chat-msg-actions">
<button class="chat-msg-action fa fa-pencil" title="Edit this message">&nbsp;</button>
</div>
</div>
@ -117,6 +129,9 @@
And I'll no longer be a Capulet.
</span>
<div class="chat-msg-media"></div>
</div>
<div class="chat-msg-actions">
<button class="chat-msg-action fa fa-pencil" title="Edit this message">&nbsp;</button>
</div>
</div>
@ -166,6 +181,9 @@
</div>
<div class="chat-msg-media"></div>
</div>
<div class="chat-msg-actions">
<button class="chat-msg-action fa fa-pencil" title="Edit this message">&nbsp;</button>
</div>
</div>
<div class="message chat-info chat-event" data-isodate="2018-03-07T10:21:09+01:00" data-join="&quot;Mercutio&quot;">Mercutio has entered the room</div>
@ -181,6 +199,9 @@
<span class="chat-msg-time">19:49</span>
</span>
<span class="chat-msg-text">I mean, sir, in delay We waste our lights in vain, like lamps by day.</span>
</div>
<div class="chat-msg-actions">
<button class="chat-msg-action fa fa-pencil" title="Edit this message">&nbsp;</button>
</div>
</div>
@ -194,6 +215,9 @@
<span class="chat-msg-text">
Take our good meaning, for our judgment sits.
Five times in that ere once in our five wits.</span>
</div>
<div class="chat-msg-actions">
<button class="chat-msg-action fa fa-pencil" title="Edit this message">&nbsp;</button>
</div>
</div>
@ -209,6 +233,9 @@
Which is as thin of substance as the air And more inconstant than the wind, who wooes
Even now the frozen bosom of the north, And, being anger'd, puffs away from thence,
Turning his face to the dew-dropping south.</span>
</div>
<div class="chat-msg-actions">
<button class="chat-msg-action fa fa-pencil" title="Edit this message">&nbsp;</button>
</div>
</div>

View File

@ -592,6 +592,7 @@
height: $fullpage-chat-height;
min-height: $fullpage-chat-height/2;
width: $fullpage-chat-width;
overflow: hidden;
}
.chat-body {
background-color: $chat-head-color;

View File

@ -72,6 +72,12 @@
}
&:hover {
background-color: rgba(0, 0, 0, 0.035);
.chat-msg-actions {
.chat-msg-action {
display: block;
}
}
}
&.correcting {
&.groupchat {
@ -134,6 +140,21 @@
}
}
.chat-msg-actions {
.chat-msg-action {
height: $message-font-size;
font-size: $message-font-size;
padding: 0;
border: none;
display: none;
background: transparent;
cursor: pointer;
&:focus {
display: block;
}
}
}
.avatar {
margin-top: 0.5em;
height: 36px;