adrien/Jade
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Updated UI to use icons

Browse Source
This commit is contained in:
Adrien Bouvais 2024-05-11 14:23:50 +02:00
parent 541cfa45a3
commit ab574edb43
6 changed files with 42 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
static/style.css
View File

@ -5,11 +5,6 @@ html {
}
/* Stuff for message boxes */
.message-content {
background-color: #303030;
border-radius: 5px;
padding: 10px;
}
#chat-messages .message-content pre {
overflow-x: auto;

6
views/chat.html
View File

@ -14,7 +14,11 @@
<button {% if not IsLogin or not HaveKey %}disabled{% endif %} type="submit"
class="send-button button is-primary is-small" hx-post="/requestMultipleMessages"
hx-swap="beforeend settle:200ms" hx-target="#chat-messages" id="chat-input-send-btn"
class="chat-input" hx-include="[name='message'], [name^='model-check-']">Send</button>
class="chat-input" hx-include="[name='message'], [name^='model-check-']">
<span class="icon">
<i class="fa-solid fa-chevron-right"></i>
</span>
</button>
</div>
</div>
</div>

41
views/partials/message-user.html
View File

@ -1,5 +1,5 @@
<div class="message-user mt-3" id="{{ ID }}">
<div class="columns is-vcentered is-mobile">
<div class="columns is-mobile">
<div class="column is-narrow" id="icon-column">
<figure class="image is-48x48" style="flex-shrink: 0;">
<img src="icons/bouvai2.png" alt="User Image">
@ -7,18 +7,45 @@
</div>
<div class="column" id="content-column">
<div class="is-flex">
<div class="message-content" style="position: relative; padding-right: 30px;">
<div class="is-flex is-align-items-start" style="position: relative; padding-right: 30px;">
<div class="message-content">
<div class="message-header">
<p>
You
</p>
</div>
<div class="message-body">
<div class="content" style="overflow-x: auto;">
{{ Content|safe }}
</div>
</div>
<button id="delete-button-{{ ID }}" hx-post="/deleteMessage?id={{ ID }}"
style="position: absolute; top: 3; right: 3;" hx-swap="outerHTML" hx-target="#chat-container"
class="delete" aria-label="delete"></button>
</div>
</div>
</div>
<div class="is-flex is-justify-content mt-2">
<button id="delete-button-{{ ID }}" hx-post="/deleteMessage?id={{ ID }}" hx-swap="outerHTML"
hx-target="#chat-container" class="button is-small is-danger delete-button is-outlined mr-2">
<span class="icon">
<i class="fa-solid fa-trash"></i>
</span>
</button>
<button id="redo-button-{{ ID }}" hx-post="/redoMessage?id={{ ID }}" hx-swap="outerHTML"
hx-target="#chat-container" class="button is-small is-primary delete-button is-outlined">
<span class="icon">
<i class="fa-solid fa-arrows-rotate"></i>
</span>
</button>
</div>
</div>
</div>
</div>
<style>
.delete-button {
opacity: 0;
transition: opacity 0.3s ease;
}
.message-user:hover .delete-button {
opacity: 1;
}
</style>

2
views/partials/popover-models.html
View File

@ -1,7 +1,7 @@
<div class="dropdown is-hoverable is-up">
<div class="dropdown-trigger">
<button class="button is-small" aria-haspopup="true" aria-controls="dropdown-menu4">
<span>Models</span>
<span class="icon"><i class="fa-solid fa-robot"></i></span>
</button>
</div>
<div class="dropdown-menu" id="dropdown-menu4" role="menu">

2
views/partials/popover-settings.html
View File

@ -1,7 +1,7 @@
<div class="dropdown is-hoverable is-up">
<div class="dropdown-trigger">
<button class="button is-small" aria-haspopup="true" aria-controls="dropdown-menu4">
<span>Settings</span>
<span class="icon"><i class="fa-solid fa-key"></i></span>
</button>
</div>
<div class="dropdown-menu" id="dropdown-menu4" role="menu">

2
views/partials/popover-usage.html
View File

@ -1,7 +1,7 @@
<div class="dropdown is-hoverable is-up">
<div class="dropdown-trigger">
<button class="button is-small" aria-haspopup="true" aria-controls="dropdown-menu4">
<span>Usage</span>
<span class="icon"><i class="fa-regular fa-money-bill-1"></i></span>
</button>
</div>
<div class="dropdown-menu" id="dropdown-menu4" role="menu">