Chapril/xmpp.chapril.org-conversejs
Chapril/xmpp.chapril.org-conversejs
24
0
Fork 0
Code Issues Pull Requests Projects Releases Activity

Add message edit icons to mockups

Browse Source 
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
css/converse.css
View File

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

2
demo/embedded.html
View File

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

15
mockup/chatbox.html
View File

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

27
mockup/chatroom.html
View File

@ -59,6 +59,9 @@
<span class="chat-msg-time">15:31</span> <span class="chat-msg-time">15:31</span>
</span> </span>
<span class="chat-msg-text">He jests at scars that never felt a wound.</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>
</div> </div>
@ -80,6 +83,9 @@
<span class="chat-msg-text"> <span class="chat-msg-text">
But, soft! what light through yonder window breaks? But, soft! what light through yonder window breaks?
</span> </span>
</div>
<div class="chat-msg-actions">
<button class="chat-msg-action fa fa-pencil" title="Edit this message">&nbsp;</button>
</div> </div>
</div> </div>
<div class="message chat-msg chat-msg-followup"> <div class="message chat-msg chat-msg-followup">
@ -90,6 +96,9 @@
<span class="chat-msg-time">19:36</span> <span class="chat-msg-time">19:36</span>
</span> </span>
<span class="chat-msg-text">It is the east, and Juliet is the sun.</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> </div>
<div class="message chat-msg chat-msg-followup"> <div class="message chat-msg chat-msg-followup">
@ -100,6 +109,9 @@
<span class="chat-msg-time">19:36</span> <span class="chat-msg-time">19:36</span>
</span> </span>
<span class="chat-msg-text">Arise, fair sun, and kill the envious moon, Who is already sick and pale with grief</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>
</div> </div>
@ -117,6 +129,9 @@
And I'll no longer be a Capulet. And I'll no longer be a Capulet.
</span> </span>
<div class="chat-msg-media"></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> </div>
@ -166,6 +181,9 @@
</div> </div>
<div class="chat-msg-media"></div> <div class="chat-msg-media"></div>
</div> </div>
<div class="chat-msg-actions">
<button class="chat-msg-action fa fa-pencil" title="Edit this message">&nbsp;</button>
</div>
</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> <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 class="chat-msg-time">19:49</span>
</span> </span>
<span class="chat-msg-text">I mean, sir, in delay We waste our lights in vain, like lamps by day.</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>
</div> </div>
@ -194,6 +215,9 @@
<span class="chat-msg-text"> <span class="chat-msg-text">
Take our good meaning, for our judgment sits. Take our good meaning, for our judgment sits.
Five times in that ere once in our five wits.</span> 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>
</div> </div>
@ -209,6 +233,9 @@
Which is as thin of substance as the air And more inconstant than the wind, who wooes 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, 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> 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>
</div> </div>

1
sass/_chatbox.scss
View File

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

21
sass/_messages.scss
View File

@ -72,6 +72,12 @@
} }
&:hover { &:hover {
background-color: rgba(0, 0, 0, 0.035); background-color: rgba(0, 0, 0, 0.035);
.chat-msg-actions {
.chat-msg-action {
display: block;
}
}
} }
&.correcting { &.correcting {
&.groupchat { &.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 { .avatar {
margin-top: 0.5em; margin-top: 0.5em;
height: 36px; height: 36px;