From b86ef6379a2e4b4df90dabefe2b48054035da800 Mon Sep 17 00:00:00 2001
From: rstular <rok@stular.eu>
Date: Thu, 14 May 2020 13:31:33 +0200
Subject: Messaging redesign done

DO NOT MERGE - redesigning messages

CSS update

DNM - css update

DNM - hopefully last CSS update for now

DNM - I take it back, one more

DNM - debugging

DNM - Still debugging

DNM

DNM

DNM

DNM - WIP tab interface

DNM - better storage management

DNM - tabs update

DNM - messaging layout update

Messaging layout update

DNM - styling

DNM - Starting to add "compose functionality"

DNM - WIP FAB

DNM - WIP - modal not dismissible

DNM - Modal layout WIP

DNM - Encryption checkbox

DNM

DNM

DNM

DNM

DNM - Hopefully done?

DNM - Removed comments
---
 pages-src/messaging.bvr | 152 ++++++++++++++++++++++++++++--------------------
 1 file changed, 89 insertions(+), 63 deletions(-)

(limited to 'pages-src')

diff --git a/pages-src/messaging.bvr b/pages-src/messaging.bvr
index ad1d33a..dff3d00 100644
--- a/pages-src/messaging.bvr
+++ b/pages-src/messaging.bvr
@@ -39,75 +39,18 @@
             <span class="right white-text">
                 <i class="material-icons sidenav-trigger" data-target="side-menu">menu</i>
             </span>
+            <span class="right white-text" id="refresh-icon">
+                <a href="#"><i class="material-icons">refresh</i></a>
+            </span>
         </div>
         <div id="loading-bar" class="progress hidden">
             <div class="indeterminate"></div>
         </div>
     </nav>
-		<@?i navigation@>
+	<@?i navigation@>
     <div class="container">
-        <h4><x-su>sendAMessage</x-su></h4>
         <div class="row">
-            <div class="col s12">
-                <div class="row">
-                    <div class="input-field col s5">
-                        <i class="material-icons prefix">account_circle</i>
-                        <input id="full-name" type="text" class="autocomplete-fullname validate">
-                        <label for="full-name"><x-su>recipient</x-su></label>
-                    </div>
-                    <div class="input-field col s5">
-                        <i class="material-icons prefix">subject</i>
-                        <input id="msg-subject" type="text" class="">
-                        <label for="msg-subject"><x-su>messageSubject</x-su></label>
-                    </div>
-                    <div class="input-field col s2">
-                        <button class="btn waves-effect waves-light" id="msg-send" type="button" disabled="disabled" name="action">
-                            <i class="material-icons">send</i>
-                        </button>
-                    </div>
-                </div>
-                <div class="row">
-                    <div class="input-field col s8">
-                        <i class="material-icons prefix">mode_edit</i>
-                        <textarea id="msg-body" class="materialize-textarea"></textarea>
-                        <label for="msg-body"><x-su>messageBody</x-su></label>
-                    </div>
-                    <div class="input-field col s2">
-                        <button class="btn waves-effect waves-light" id="msg-add-photo" type="button">
-                            <i class="material-icons" style="margin: 0 auto">add_a_photo</i>
-                        </button>
-                    </div>
-                    <div class="input-field col s2">
-                        <button onclick="document.getElementById('msg-e2ee-pass').hidden = false" class="btn waves-effect waves-light" id="msg-use-e2ee" type="button">
-                            <i class="material-icons" style="margin: 0 auto">vpn_key</i>
-                        </button>
-                    </div>
-                </div>
-		        <div hidden="hidden" class="row" id="msg-e2ee-pass">
-                    <div class="input-field col s12">
-                        <i class="material-icons prefix">lock</i>
-                        <input id="msg-e2ee-pass-input" type="password" autocomplete="new-password" class="">
-                        <label for="msg-e2ee-pass-input"><x-su>passwordForE2EE</x-su></label>
-                    </div>
-		        </div>
-            </div>
-            <div id="msg-added-image"></div>
-        </div>
-        <h4><x-su>messages</x-su></h4>
-        <button class="btn waves-effect waves-light" id="msg-load-btn" onclick="loadMessages(true, 0);" type="button">
-			<x-su>received</x-su>
-			<i class="material-icons right">inbox</i>
-        </button>
-        <button class="btn waves-effect waves-light" id="msg-load-btn" onclick="loadMessages(true, 1);" type="button">
-			<x-su>sent</x-su>
-			<i class="material-icons right">forward</i>
-        </button>
-        <button class="btn waves-effect waves-light" id="msg-load-btn" onclick="loadMessages(true, 2);" type="button">
-			<x-su>deleted</x-su>
-			<i class="material-icons right">delete</i>
-        </button>
-        <div id="msg-list"></div>
-        <p>
+
             <div class="row" id="storage-bar">
                 <div class="col s4">
                     <x-su>messageStorageUsed</x-su>: 
@@ -124,7 +67,90 @@
                     <x-du>maxMessagesNote</x-du>
                 </p>
             </div>
-        </p>
+
+            <div class="col s12 m12">
+                <ul class="tabs">
+                    <li class="tab col s4"><a href="#beziapp-received" class="active">Received</a></li>
+                    <li class="tab col s4"><a href="#beziapp-sent">Sent</a></li>
+                    <li class="tab col s4"><a href="#beziapp-deleted">Deleted</a></li>
+                </ul>
+            </div>
+            <br>
+            <div id="beziapp-received" class="col s12"><p class="center-align grey-text text-darken-2"><x-su>loadingMessages</x-su></p></div>
+            <div id="beziapp-sent" class="col s12"><p class="center-align grey-text text-darken-2"><x-su>loadingMessages</x-su></p></div>
+            <div id="beziapp-deleted" class="col s12"><p class="center-align grey-text text-darken-2"><x-su>loadingMessages</x-su></p></div>
+        </div>
+    </div>
+
+    <!-- FAB -->
+    <div class="fixed-action-btn" id="fab-new">
+        <a class="btn-floating btn-large fab-new-message modal-trigger" href="#beziapp-new-message">
+          <i class="large material-icons">mode_edit</i>
+        </a>
+    </div>
+
+    <!-- Modal Structure -->
+    <div id="beziapp-new-message" class="modal modal-fixed-footer">
+
+        <div class="modal-content">
+
+            <h4><x-su>sendAMessage</x-su></h4>
+
+            <div class="input-field">
+                <i class="material-icons prefix">account_circle</i>
+                <input id="full-name" type="text" class="autocomplete-fullname validate">
+                <label for="full-name"><x-su>recipient</x-su></label>
+            </div>
+
+            <div class="row">
+
+                <div class="col 11s 11m">
+                    <div class="input-field">
+                        <i class="material-icons prefix">subject</i>
+                        <input id="msg-subject" type="text" class="">
+                        <label for="msg-subject"><x-su>messageSubject</x-su></label>
+                    </div>
+                </div>
+
+                <div class="col 1s 1m">
+                    <button class="btn waves-effect waves-light" id="msg-add-photo" type="button">
+                        <i class="material-icons" style="margin: 0 auto">add_a_photo</i>
+                    </button>
+                </div>
+
+            </div>
+
+            <div class="row">
+                <div class="col s6 m4">
+                    <label>
+                        <input type="checkbox" id="encrypt-checkbox" />
+                        <span><x-su>encryptMessage</x-su></span>
+                    </label>
+                </div>
+
+                <div class="col s6 m8">
+                    <div class="input-field" id="encryption-key-input" hidden>
+                        <i class="material-icons prefix">lock</i>
+                        <input id="msg-e2ee-pass-input" type="password" autocomplete="new-password" class="">
+                        <label for="msg-e2ee-pass-input"><x-su>passwordForE2EE</x-su></label>
+                    </div>
+                </div>
+            </div>
+
+            <div class="input-field">
+                <i class="material-icons prefix">mode_edit</i>
+                <textarea id="msg-body" class="materialize-textarea"></textarea>
+                <label for="msg-body"><x-su>messageBody</x-su></label>
+            </div>
+
+        </div>
+
+        <div class="modal-footer">
+            <div id="modal-footer-right">    
+                <a href="#" class="modal-close waves-effect waves-green btn-flat">Cancel <i class="material-icons right">close</i></a>
+                <a href="#" id="msg-send" class="modal-close waves-effect waves-green btn-flat" disabled>Send <i class="material-icons right">send</i></a>
+            </div>
+        </div>
     </div>
 </body>
 </html>
-- 
cgit v1.2.3