Changed HTML to use djlint
This commit is contained in:
@@ -1,78 +1,96 @@
|
||||
<div class="dropdown is-up is-right {% if IsActive %} is-active {% endif %}" id="conversation-dropdown">
|
||||
<div class="dropdown-trigger">
|
||||
<button class="button is-small to-reduce-opacity" aria-haspopup="true" aria-controls="dropdown-menu3"
|
||||
<div class="dropdown is-up is-right {% if IsActive %}is-active{% endif %}"
|
||||
id="conversation-dropdown">
|
||||
<div class="dropdown-trigger">
|
||||
<button class="button is-small to-reduce-opacity"
|
||||
aria-haspopup="true"
|
||||
aria-controls="dropdown-menu3"
|
||||
onclick="this.parentElement.parentElement.classList.toggle('is-active')">
|
||||
<span class="icon">
|
||||
<i class="fa-solid fa-comments"></i>
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
<div class="dropdown-menu" id="dropdown-menu3" role="menu">
|
||||
<div class="dropdown-content">
|
||||
<div class="dropdown-item">
|
||||
<div id="conversation-list">
|
||||
{% for Conversation in Conversations %}
|
||||
<div class="icon-text has-text unselected icon-conv {% if Conversation.Selected %} selected {% endif %}"
|
||||
data-id="{{ Conversation.ID.String() }}" style="cursor: pointer;"
|
||||
onclick="toggleConversationSelection(this, '{{ Conversation.Name }}')"
|
||||
hx-get="/selectConversation?conversation-id={{ Conversation.ID.String() }}" hx-swap="outerHTML"
|
||||
hx-target="#chat-container" name="{{ Conversation.Name }}">
|
||||
<span>{{ Conversation.Name }}</span>
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
<input class="input is-small mt-2 is-hidden" type="text" id="conversation-name-input"
|
||||
name="conversation-name-input" placeholder="Conversation name" autocomplete="off">
|
||||
<div class="is-flex is-justify-content-space-between mt-4 ">
|
||||
<button class="button is-small is-danger {% if SelectedIsDefault %} is-hidden {% endif %}"
|
||||
id="delete-conversation-button" hx-get="/deleteConversation" hx-swap="outerHTML"
|
||||
hx-target="#conversation-dropdown" hx-vals="js:{conversationId: findSelectedConversationID()}">
|
||||
<span class="icon">
|
||||
<i class="fa-solid fa-trash"></i>
|
||||
</span>
|
||||
</button>
|
||||
<button
|
||||
class="button is-small is-primary is-outlined {% if not SelectedIsDefault %} is-hidden {% endif %}"
|
||||
id="archive-default-conversation-button">
|
||||
<span class="icon">
|
||||
<i class="fa-solid fa-box-archive"></i>
|
||||
</span>
|
||||
</button>
|
||||
<button class="button is-small is-danger is-outlined is-hidden" id="cancel-conversation-button">
|
||||
<span class="icon">
|
||||
<i class="fa-solid fa-xmark"></i>
|
||||
</span>
|
||||
</button>
|
||||
<div class="is-flex is-justify-content-flex-end">
|
||||
|
||||
<button class="button is-small is-success is-outlined" id="create-conversation-button">
|
||||
<span class="icon">
|
||||
<i class="fa-solid fa-plus"></i>
|
||||
</span>
|
||||
</button>
|
||||
<button class="button is-small is-success is-outlined is-hidden"
|
||||
id="confirm-conversation-button" hx-get="/createConversation"
|
||||
hx-include="[name='conversation-name-input']" hx-swap="outerHTML"
|
||||
hx-target="#conversation-dropdown">
|
||||
<span class="icon">
|
||||
<i class="fa-solid fa-check"></i>
|
||||
</span>
|
||||
</button>
|
||||
<button class="button is-small is-success is-outlined is-hidden"
|
||||
id="confirm-archive-default-conversation-button" hx-post="/archiveDefaultConversation"
|
||||
hx-include="[name='conversation-name-input']" hx-swap="outerHTML"
|
||||
hx-target="#conversation-dropdown">
|
||||
<span class="icon">
|
||||
<i class="fa-solid fa-check"></i>
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<span class="icon">
|
||||
<i class="fa-solid fa-comments"></i>
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
<div class="dropdown-menu" id="dropdown-menu3" role="menu">
|
||||
<div class="dropdown-content">
|
||||
<div class="dropdown-item">
|
||||
<div id="conversation-list">
|
||||
{% for Conversation in Conversations %}
|
||||
<div class="icon-text has-text unselected icon-conv {% if Conversation.Selected %}selected{% endif %}"
|
||||
data-id="{{ Conversation.ID.String() }}"
|
||||
style="cursor: pointer"
|
||||
onclick="toggleConversationSelection(this, '{{ Conversation.Name }}')"
|
||||
hx-get="/selectConversation?conversation-id={{ Conversation.ID.String() }}"
|
||||
hx-swap="outerHTML"
|
||||
hx-target="#chat-container"
|
||||
name="{{ Conversation.Name }}">
|
||||
<span>{{ Conversation.Name }}</span>
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
</div>
|
||||
<input class="input is-small mt-2 is-hidden"
|
||||
type="text"
|
||||
id="conversation-name-input"
|
||||
name="conversation-name-input"
|
||||
placeholder="Conversation name"
|
||||
autocomplete="off">
|
||||
<div class="is-flex is-justify-content-space-between mt-4 ">
|
||||
<button class="button is-small is-danger {% if SelectedIsDefault %}is-hidden{% endif %}"
|
||||
id="delete-conversation-button"
|
||||
hx-get="/deleteConversation"
|
||||
hx-swap="outerHTML"
|
||||
hx-target="#conversation-dropdown"
|
||||
hx-vals="js:{conversationId: findSelectedConversationID()}">
|
||||
<span class="icon">
|
||||
<i class="fa-solid fa-trash"></i>
|
||||
</span>
|
||||
</button>
|
||||
<button class="button is-small is-primary is-outlined {% if not SelectedIsDefault %}is-hidden{% endif %}"
|
||||
id="archive-default-conversation-button">
|
||||
<span class="icon">
|
||||
<i class="fa-solid fa-box-archive"></i>
|
||||
</span>
|
||||
</button>
|
||||
<button class="button is-small is-danger is-outlined is-hidden"
|
||||
id="cancel-conversation-button">
|
||||
<span class="icon">
|
||||
<i class="fa-solid fa-xmark"></i>
|
||||
</span>
|
||||
</button>
|
||||
<div class="is-flex is-justify-content-flex-end">
|
||||
|
||||
<script>
|
||||
<button class="button is-small is-success is-outlined"
|
||||
id="create-conversation-button">
|
||||
<span class="icon">
|
||||
<i class="fa-solid fa-plus"></i>
|
||||
</span>
|
||||
</button>
|
||||
<button class="button is-small is-success is-outlined is-hidden"
|
||||
id="confirm-conversation-button"
|
||||
hx-get="/createConversation"
|
||||
hx-include="[name='conversation-name-input']"
|
||||
hx-swap="outerHTML"
|
||||
hx-target="#conversation-dropdown">
|
||||
<span class="icon">
|
||||
<i class="fa-solid fa-check"></i>
|
||||
</span>
|
||||
</button>
|
||||
<button class="button is-small is-success is-outlined is-hidden"
|
||||
id="confirm-archive-default-conversation-button"
|
||||
hx-post="/archiveDefaultConversation"
|
||||
hx-include="[name='conversation-name-input']"
|
||||
hx-swap="outerHTML"
|
||||
hx-target="#conversation-dropdown">
|
||||
<span class="icon">
|
||||
<i class="fa-solid fa-check"></i>
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
function findSelectedConversationID() {
|
||||
return document.getElementsByClassName('icon-conv selected')[0].getAttribute('data-id');
|
||||
}
|
||||
@@ -172,5 +190,5 @@
|
||||
document.getElementById('confirm-archive-default-conversation-button').classList.add('is-hidden');
|
||||
}
|
||||
})
|
||||
</script>
|
||||
</div>
|
||||
</script>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user