diff options
Diffstat (limited to '')
| -rw-r--r-- | pages-src/messaging.bvr | 152 | ||||
| -rw-r--r-- | pages/messaging.html | 152 |
2 files changed, 178 insertions, 126 deletions
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> diff --git a/pages/messaging.html b/pages/messaging.html index 515770a..31c4749 100644 --- a/pages/messaging.html +++ b/pages/messaging.html @@ -42,12 +42,15 @@ <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> - + <ul id="side-menu" class="sidenav side-menu"> <li><a class="subheader"><h4><b>Beži</b>App</h4></a></li> <li><a href="/pages/timetable.html" class="waves-effect"><i class="material-icons">view_module</i><x-su>timetable</x-su></a></li> @@ -68,68 +71,8 @@ <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>: @@ -146,7 +89,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> |