Add message edit icons to mockups

updates #421

css/converse.css

@@ -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

@@ -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

@@ -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

@@ -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

@@ -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

@@ -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;