Simplify the buttons toggling in Chat, use CSS states for that

Add Snap support for the Chat widget

app/views/chat.tpl

@@ -3,6 +3,7 @@
 <?php $this->widget('VisioLink');?>
 <?php $this->widget('Stickers');?>
 <?php $this->widget('Notifications');?>
+<?php $this->widget('Snap');?>
 
 <nav class="color dark">
     <?php $this->widget('Presence');?>

app/widgets/Chat/_chat.tpl

@@ -223,7 +223,7 @@
 <div class="chat_box">
     <ul class="list">
         <li class="{if="$muc && !$conference->connected"}disabled{/if}">
-            <span class="primary icon gray emojis_open" onclick="Stickers_ajaxShow('{$jid}')">
+            <span class="primary icon gray primary_action" onclick="Stickers_ajaxShow('{$jid}')">
                 <i class="material-icons">mood</i>
             </span>
             {if="$c->getUser()->hasUpload()"}
@@ -232,9 +232,12 @@
                     onclick="Upload_ajaxRequest()">
                     <i class="material-icons">attach_file</i>
                 </span>
+                <span class="snap control icon" onclick="Snap.init()">
+                    <i class="material-icons">camera_alt</i>
+                </span>
             {/if}
             <span title="{$c->__('button.submit')}"
-                class="send control icon gray {if="$c->getUser()->hasUpload()"}hide{else}show{/if}"
+                class="send control icon gray"
                   onclick="Chat.sendMessage()">
                 <i class="material-icons">send</i>
             </span>

app/widgets/Chat/chat.css

@@ -44,6 +44,7 @@ main:not(.enabled) #chat_widget {
     margin: 0 auto;
 }
 
+/* Chat box */
 
 #chat_widget .chat_box {
     background-color: rgba(var(--movim-background-main), 1);
@@ -55,8 +56,10 @@ main:not(.enabled) #chat_widget {
     max-width: 100%;
 }
 
+#chat_widget .chat_box.compose ul.list li > .control.upload ~ form,
 #chat_widget .chat_box form {
-    margin-right: 4.5rem;
+    margin-right: 5rem;
+    transition: margin-right .075s;
     padding-left: 7rem;
     padding-right: 1rem;
 }
@@ -100,6 +103,31 @@ main:not(.enabled) #chat_widget {
     animation: loading_opacity 1s infinite alternate;
 }
 
+#chat_widget .chat_box ul.list li {
+    padding: 0.01rem 0;
+}
+
+#chat_widget .chat_box ul.list li > .control.control.send {
+    right: 0rem;
+}
+
+#chat_widget .chat_box:not(.compose) ul.list li > .control.upload ~ .control.send,
+#chat_widget .chat_box.compose ul.list li > .control.upload ~ .control:not(.send),
+#chat_widget .chat_box.compose ul.list li > .control:not(.send) {
+    display: none;
+}
+
+#chat_widget .chat_box ul.list li > .control.upload ~ form {
+    margin-right: 11rem;
+}
+
+@media screen and (max-width: 1024px) {
+    #chat_widget .chat_box {
+        left: 0;
+        width: 100%;
+    }
+}
+
 @keyframes loading_opacity {
     from { opacity: 0.4; }
     to { opacity: 1; }
@@ -161,13 +189,6 @@ main:not(.enabled) #chat_widget {
 #chat_widget .contained:not(.muc) ul li:not(.oppose):not(.separator):not(.date) + li:not(.oppose) .bubble::before {
     display: none;
 }
-/*
-#chat_widget > .placeholder {
-    padding-top: 27em;
-    background-size: 28rem;
-    background-position: center 5rem;
-    background-image: url('img/chat.svg');
-}*/
 
 #chat_widget .contained section > ul > li {
     animation: fadein 0.2s;
@@ -188,37 +209,19 @@ table.emojis td {
     padding: 1rem 0;
 }
 
-.chat_box ul.list li {
-    padding: 0.01rem 0;
-}
-
-.chat_box ul.list li > .control.control {
-    right: 0rem;
-}
-
-#chat_widget .emojis_open:hover,
+#chat_widget .primary_action:hover,
 table.emojis td:hover {
     cursor: pointer;
     background-color: rgba(0, 0, 0, 0.05);
     border-radius: 0.5rem;
 }
 
-@media screen and (max-width: 1024px) {
-    #chat_widget .chat_box {
-        left: 0;
-        width: 100%;
-    }
-}
-
 #chat_widget div.quoted {
     border-right: 4px solid rgb(var(--movim-main));
 }
 
-/*#chat_widget div.call {
-    background-color: red;
-}*/
-
 /* File preview */
+
 #chat_widget div.file:not(.bubble) {
     word-break: break-all;
 }
@@ -300,6 +303,7 @@ table.emojis td:hover {
 }
 
 /* Card */
+
 #chat_widget .bubble ul.card.list {
     max-width: 55rem;
 }

app/widgets/Chat/chat.js

@@ -709,16 +709,12 @@ var Chat = {
         return i;
     },
     toggleAction: function() {
-        var send_button = document.querySelector('.chat_box span.send');
-        var attachment_button = document.querySelector('.chat_box span.upload');
-        if (send_button && attachment_button) {
-            if (Chat.getTextarea().value.length > 0) {
-                send_button.classList.remove('hide');
-                attachment_button.classList.add('hide');
-            } else {
-                send_button.classList.add('hide');
-                attachment_button.classList.remove('hide');
-            }
+        var chatBox = document.querySelector('#chat_widget .chat_box');
+
+        if (chatBox) {
+            Chat.getTextarea().value.length > 0
+                ? chatBox.classList.add('compose')
+                : chatBox.classList.remove('compose');
         }
     },
     getTextarea: function() {

app/widgets/Snap/snap.js

@@ -123,8 +123,12 @@ var Snap = {
         });
 
         Upload.attach(function(file) {
-            document.querySelector('input[name=embed]').value = file.uri;
-            PublishBrief.checkEmbed();
+            const page = MovimUtils.urlParts().page;
+
+            if (page != 'chat') {
+                document.querySelector('input[name=embed]').value = file.uri;
+                PublishBrief.checkEmbed();
+            }
 
             Snap.snap.classList = '';
             Snap.close();