Mercurial > libervia-templates
diff sat_templates/templates/bulma/chat/new_chat_dialog.html @ 403:65c53ec5e777
Bulma: complete redesign:
This is a WIP full redesign of the whole web UI. Only chat is usable at the moment, many
things are broken.
The design uses the new Bulma v1+, has a look closer to industry standards, paves the way
for a dark theme, and should be easy to use.
It's a basis for coming features such as UI/UX for threads.
rel 457
| author | Goffi <goffi@goffi.org> |
|---|---|
| date | Fri, 11 Apr 2025 21:32:05 +0200 |
| parents | |
| children |
line wrap: on
line diff
--- /dev/null Thu Jan 01 00:00:00 1970 +0000 +++ b/sat_templates/templates/bulma/chat/new_chat_dialog.html Fri Apr 11 21:32:05 2025 +0200 @@ -0,0 +1,125 @@ +{% import 'components/avatar.html' as avatar with context %} + +<div class="modal-card jid-search-dialog"> + <header class="modal-card-head"> + <p class="modal-card-title">Start New Chat</p> + <button class="delete action_close"></button> + </header> + <section class="modal-card-body"> + + <div class="tabs is-boxed mt-4"> + <ul> + <li class="is-active" data-tab="direct"> + <a> + <span class="icon has-text-info"> + <i class="fa-solid fa-user"></i> + </span> + <span>Persons</span> + <span class="tag is-info is-light ml-2 direct-count">0</span> + </a> + </li> + <li data-tab="groups"> + <a> + <span class="icon has-text-success"> + <i class="fa-solid fa-users"></i> + </span> + <span>Group Chats</span> + </a> + </li> + </ul> + </div> + + <!-- Direct Messages Tab --> + <div class="direct-content pt-4"> + <div class="field"> + <label class="label">Direct contact search.</label> + <p class="help">Use names, JIDs, or keywords.</p> + <div class="control has-icons-left has-icons-right"> + <input class="input search-input" type="search" + placeholder="Search contacts…"> + <span class="icon is-small is-left"> + <i class="fa-solid fa-magnifying-glass"></i> + </span> + <span class="icon is-right action_clear_search"> + <a role="button" class="delete is-small" aria-label="Clear search"></a> + </span> + </div> + </div> + <div class="direct-items"> + </div> + </div> + + <!-- Group Chats Tab --> + <div class="groups-content is-hidden pt-4"> + <div class="field"> + <label class="label">Room search.</label> + <p class="help">Use names, JIDs, or keywords.</p> + <div class="control has-icons-left has-icons-right"> + <input class="input search-input" type="search" + placeholder="Search rooms…"> + <span class="icon is-small is-left"> + <i class="fa-solid fa-magnifying-glass"></i> + </span> + <span class="icon is-right action_clear_search"> + <a role="button" class="delete is-small" aria-label="Clear search"></a> + </span> + </div> + </div> + <div class="is-flex is-justify-content-space-between mb-4"> + <button class="button is-success is-light action_new_room"> + <span class="icon"> + <i class="fa-solid fa-plus"></i> + </span> + <span>Create New Room</span> + </button> + </div> + + <!-- New Room Form (initially hidden) --> + <div class="box is-hidden mb-4 panel_new_room"> + <div class="field"> + <label class="label">Room Name</label> + <div class="control has-icons-left"> + <input class="input input-room-name" type="text" placeholder="Enter room name"> + <span class="icon is-small is-left"> + <i class="fa-solid fa-hashtag"></i> + </span> + </div> + </div> + <div class="field"> + <label class="label">Room Type</label> + <div class="control"> + <div class="select is-fullwidth"> + <select> + <option>Public Room</option> + {# + FIXME: only public room is supported for now, need to + check config option to use. + <option>Private Room</option> + #} + </select> + </div> + </div> + </div> + <div class="field is-grouped"> + <div class="control"> + <button class="button is-success is-small action_create_room">Create Room</button> + </div> + </div> + <div class="notification is-danger error-message is-hidden mt-4"> + <button class="delete action_hide_error_message"></button> + <p></p> + </div> + </div> + + <!-- Search Result --> + <div class="groups-items"></div> + </div> + </section> + <footer class="modal-card-foot is-justify-content-flex-end"> + <button class="button action_close">Cancel</button> + <button class="button is-primary ml-2 action_ok" disabled>Start Chat</button> + </footer> +</div> + + +