Skip to content

C
converse.js
Commit 5444f54d authored by JC Brand's avatar JC Brand
Browse files
Options

Add message edit icons to mockups 

updates #421
parent d25b227b
Show whitespace changes
Inline Side-by-side
Showing with 79 additions and 2 deletions
css/converse.css
View file @ 5444f54d
......@@ -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;
......
demo/embedded.html
View file @ 5444f54d
......@@ -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>
......
mockup/chatbox.html
View file @ 5444f54d
......@@ -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>
......
mockup/chatroom.html
View file @ 5444f54d
......@@ -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>
......
sass/_chatbox.scss
View file @ 5444f54d
......@@ -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;
......
sass/_messages.scss
View file @ 5444f54d
......@@ -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;
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment
GitLab Nexedi Edition | About GitLab | About Nexedi | 沪ICP备2021021310号-2 | 沪ICP备2021021310号-7