roberto/BrainMinder
1
0
Fork 0
Code Issues 9 Pull Requests Actions Packages Projects 1 Releases Wiki Activity

New modal dialogs

Browse Source
This commit is contained in:
roberto 2024-12-11 17:52:09 +01:00
parent 0cc0794807
commit 53b65e9986
16 changed files with 157 additions and 210 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

84
assets/static/css/main.css
View File

@ -97,34 +97,6 @@ body {
z-index: 6;
}
.modal {
z-index: 100;
padding-top: 100px;
position: fixed;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: auto;
background-color: rgb(0, 0, 0);
background-color: rgba(0, 0, 0, 0.4);
display: block;
}
.modal-content {
margin: auto;
background-color: #fff;
position: relative;
padding: 0;
outline: 0;
width: 600px;
color: rgb(84, 84, 84);
}
.modal-content h5 {
font-weight: 600 !important;
}
.display-topleft {
position: absolute;
left: 0;
@ -913,14 +885,55 @@ th.operations, td.operations {
display: block !important
}
#footer-navbar .bar-item:first-child {
padding-left: 0;
}
#item h5 {
font-size: 18px;
}
#footer-navbar {
display: flex;
flex-direction: row;
margin-bottom: 10px;
align-items: flex-start;
}
#footer-navbar button, #footer-navbar a {
margin-right: 10px;
}
#footer-navbar span {
margin-left: 5px;
}
dialog {
border-radius: 8px;
border-color: var(--primary-color);
z-index:100;
}
#dialog-container dialog {
position: fixed;
left: 0;
top: 0;
width: 100%;
height: auto;
}
dialog header {
margin-bottom: 20px;
font-weight: bold;
}
dialog header h5 {
margin-right: 40px;
font-size: 16px;
}
dialog .content {
clear: both;
max-height:600px;
overflow: auto;
}
/* Small */
@media (max-width: 568px) {
#page-title-container {
@ -985,6 +998,10 @@ th.operations, td.operations {
.hide-small {
display: none !important
}
#footer-navbar span {
display: none !important
}
}
/* Min medium */
@ -1086,6 +1103,9 @@ th.operations, td.operations {
}
@media (min-width:993px) {
dialog {
max-width: 600px;
}
.col.l1 {
width: 8.33333%
}

1
assets/static/js/hyperscript.min.js vendored
View File

File diff suppressed because one or more lines are too long

23
assets/static/js/main.js
View File

@ -141,15 +141,13 @@ function bm_toggle_quickbox() {
}
function bm_show_confirm(sender, title, message) {
document.querySelector("#modal-confirm-dialog h5").innerHTML = title;
document.querySelector("#modal-confirm-dialog p").innerHTML = message;
let btn_ok = document.getElementById("modal-confirm-ok");
document.querySelector("#dialog-confirm h5").innerHTML = title;
document.querySelector("#dialog-confirm p").innerHTML = message;
document.querySelector("#dialog-confirm").showModal();
document.getElementById("modal-confirm-ok").addEventListener('click', (event) => {
htmx.trigger(sender, 'confirmed', null);
document.getElementById("modal-confirm-dialog").style.display = "none";
document.querySelector("#dialog-confirm").close();
});
document.getElementById("modal-confirm-dialog").style.display = "block";
}
function bm_item_field_add(type_field_id, widget) {
@ -178,6 +176,19 @@ document.addEventListener("DOMContentLoaded", function(event){
);
*/
document.querySelector('#dialog-confirm').addEventListener('click', (event) => {
if (event.target.classList.contains("close-dialog")) {
event.target.closest('dialog').close();
}
})
document.querySelector('#dialog-container').addEventListener('click', (event) => {
if (event.target.classList.contains("close-dialog")) {
event.target.closest('dialog').close();
event.target.closest('dialog').remove();
}
})
document.body.addEventListener("quickboxNoteClear", function(evt){
document.getElementById("quickbox-note").value = ''
});

45
assets/templates/base.tmpl
View File

@ -1,4 +1,5 @@
{{define "base"}}
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" >
@ -17,10 +18,8 @@
}}
</head>
<body hx-headers='{"X-CSRF-TOKEN": "{{ .CSRFToken }}"}'>
{{template "partial:sidebar" .}}
<div id="page-main">
{{template "partial:sidebar" .}}
<div id="page-main">
<div id="page-top-bar">
<div id="page-title-container">
<a class="hide-large" onclick="bm_toggle_sidebar('main-sidebar'); return false" href="#" style="float: left; padding-right: 10px;">
@ -40,32 +39,32 @@
<div id="page-content">
{{template "page:content" .}}
</div>
</div>
</div>
{{template "partial:footer" .}}
<div id="message"></div>
<div id="modal-container"></div>
<div id="overlay" onclick="bm_overlay_off('main-sidebar')"></div>
<div id="dialog-container"></div>
<div id="modal-confirm-dialog" class="modal" style="display: none;">
<div id="modal-confirm-dialog-content" class="modal-content w3-round-large w3-padding w3-animate-top">
<header class="w3-container">
<span _="on click hide #modal-confirm-dialog" style="margin-top: 2px; margin-right: 8px; padding: 8px;"><i class='bi bi-x-circle-fill'></i></span>
<h5></h5>
</header>
<div class="w3-container">
<p></p>
</div>
<footer class="w3-container">
<p style="text-align: center;">
<button id="modal-confirm-ok" class="w3-btn w3-metro-dark-blue w3-round-large">Ok</button>
<button _="on click hide #modal-confirm-dialog" class="w3-btn w3-light-gray w3-round-large">Cancel</button>
</p>
</footer>
<dialog role="dialog" id="dialog-confirm">
<header>
<div style="float:left; max-width: 420px;">
<h5></h5>
</div>
</div>
<div style="float:right">
<span class="close-dialog button close"><i class='close-dialog bi bi-x-circle-fill'></i></span>
</div>
</header>
<p style="clear: both"></p>
<footer class="w3-container">
<p style="text-align: center;">
<button id="modal-confirm-ok">Ok</button>
<button class="close-dialog">Cancel</button>
</p>
</footer>
</dialog>
<div id="quickbox">
<div class="noswipe" id="quickbox-top-bar">

16
assets/templates/categories/form.tmpl
View File

@ -16,20 +16,10 @@
/>
</p>
<p class="hide-small">
<button class="main"><i class="bi bi-floppy"></i> Save</button>
<a class="button secondary" hx-target="#page-content" hx-push-url="true" hx-get="/categories"><i class="bi bi-arrow-left-circle"></i> Back</a>
</p>
</div>
<div id="footer-navbar-container">
<div id="footer-navbar" class="bar hide-medium hide-large">
<div class="bar-item">
<button type="submit" class="main" title="Save"><i class="bi bi-floppy"></i></button>
<div id="footer-navbar">
<button type="submit" class="main" title="Save"><i class="bi bi-floppy"></i><span>Save</span></button>
<a class="button secondary" href="/categories" hx-get="/categories" hx-push-url="true" hx-target="#page-content" title="Back"><i class="bi bi-arrow-left-circle"></i><span>Back</span></a>
</div>
<div class="bar-item">
<a class="button secondary" href="/categories" hx-get="/categories" hx-push-url="true" hx-target="#page-content" title="Back"><i class="bi bi-arrow-left-circle"></i></a>
</div>
</div>
</div>
</form>
{{ end }}

2
assets/templates/items/all_list_rows.tmpl
View File

@ -42,7 +42,7 @@
{{ template "item:add_to_dashboard" .Id }}
{{ end }}
<button hx-target="#modal-container" hx-get="/item/share/{{.Id}}" title="Share"><i class='bi bi-share'></i></button>
<button href="#" hx-target="#dialog-container" hx-get="/item/share/{{.Id}}" title="Share"><i class="bi bi-share-fill"></i></button>
<button hx-get="/item/update/{{.Id}}" hx-push-url="true" hx-target="#page-content" title="Edit"><i class="bi bi-pencil"></i></button>
<button hx-delete="/item/delete/{{.Id}}" hx-target="closest tr" hx-swap="outerHTML swap:1s" hx-trigger="confirmed" onClick="bm_show_confirm(this, 'Items', 'Delete this item ?')" title="Delete"><i class="bi bi-trash"></i></button>
</td>

32
assets/templates/items/form.tmpl
View File

@ -104,34 +104,16 @@
</fieldset>
</div>
</div>
<p class="hide-small">
<button class="main"><i class="bi bi-floppy"></i> Save</button>
{{ if not (eq .item.Id 0) }}
<a class="button secondary" href="/item/read/{{.item.Id}}" hx-get="/item/read/{{.item.Id}}" hx-push-url="true" hx-target="#page-content"><i class="bi bi-binoculars"></i> View</a>
<a class="button delete" hx-delete="/item/delete/{{.item.Id}}" hx-target="#page-content" hx-trigger="confirmed" onClick="bm_show_confirm(this, 'Items', 'Delete this item ?')"><i class="bi bi-trash"></i> Delete</a>
<a class="button secondary" href="#" hx-target="#modal-container" hx-get="/item/share/{{.item.Id}}" title="Share"><i class="bi bi-share-fill"></i> Share</a>
{{ end }}
<a class="button secondary" hx-target="#page-content" hx-push-url="true" hx-get="/items/type/{{.item.Type_id}}"><i class="bi bi-arrow-left-circle"></i> Back</a>
</p>
<div id="footer-navbar-container">
<div id="footer-navbar" class="bar hide-medium hide-large">
<div class="bar-item">
<button type="submit" class="main" title="Save"><i class="bi bi-floppy"></i></button>
</div>
<div id="footer-navbar">
<button type="submit" class="main" title="Save"><i class="bi bi-floppy"></i><span>Save</span></button>
{{ if not (eq .item.Id 0) }}
<div class="bar-item">
<a class="button delete" hx-delete="/item/delete/{{.item.Id}}" hx-target="#page-content" hx-trigger="confirmed" onClick="bm_show_confirm(this, 'Items', 'Delete this item ?')" title="Delete"><i class="bi bi-trash"></i></a>
</div>
<div class="bar-item">
<a class="button secondary" href="#" hx-target="#modal-container" hx-get="/item/share/{{.item.Id}}" title="Share"><i class="bi bi-share-fill"></i></a>
</div>
<div class="bar-item">
<a class="button secondary" href="/item/read/{{.item.Id}}" hx-get="/item/read/{{.item.Id}}" hx-push-url="true" hx-target="#page-content" title="View"><i class="bi bi-binoculars"></i>
</a>
</div>
<a class="button secondary hide-medium hide-large" href="/item/read/{{.item.Id}}" hx-get="/item/read/{{.item.Id}}" hx-push-url="true" hx-target="#page-content"><i class="bi bi-binoculars"></i><span>View</span></a>
<a class="button secondary hide-small" href="/item/view/{{.Id}}" hx-get="/item/view/{{.Id}}" hx-target="#dialog-container"><i class="bi bi-binoculars"></i><span>View</span></a>
<a class="button delete" hx-delete="/item/delete/{{.item.Id}}" hx-target="#page-content" hx-trigger="confirmed" onClick="bm_show_confirm(this, 'Items', 'Delete this item ?')" title="Delete"><i class="bi bi-trash"></i><span>Delete</span></a>
<a class="button secondary" href="#" hx-target="#dialog-container" hx-get="/item/share/{{.item.Id}}" title="Share"><i class="bi bi-share-fill"></i><span>Share</span></a>
{{ end }}
</div>
<a class="button secondary" hx-target="#page-content" hx-push-url="true" hx-get="/items/type/{{.item.Type_id}}"><i class="bi bi-arrow-left-circle"></i><span>Back</span></a>
</div>
</form>
{{ end }}

2
assets/templates/items/list_rows.tmpl
View File

@ -50,7 +50,7 @@
{{ template "item:add_to_dashboard" .Id }}
{{ end }}
<button hx-target="#modal-container" hx-get="/item/share/{{.Id}}" title="Share"><i class='bi bi-share-fill'></i></button>
<button href="#" hx-target="#dialog-container" hx-get="/item/share/{{.Id}}" title="Share"><i class="bi bi-share-fill"></i></button>
<button hx-get="/item/update/{{.Id}}" hx-push-url="true" hx-target="#page-content" title="Edit"><i class="bi bi-pencil"></i></button>
<button hx-delete="/item/delete/{{.Id}}" hx-target="closest tr" hx-swap="outerHTML swap:1s" hx-trigger="confirmed" onClick="bm_show_confirm(this, 'Items', 'Delete this item ?')" title="Delete"><i class="bi bi-trash"></i></button>
</td>

10
assets/templates/items/read.tmpl
View File

@ -45,18 +45,10 @@
</div>
</div>
<a class="button main hide-small" hx-get="/item/update/{{.item.Id}}" hx-push-url="true" hx-target="#page-content" href="#"><i class="bi bi-pencil"></i> Edit</a>
<a class="button main hide-small" href="#" hx-target="#modal-container" hx-get="/item/share/{{.item.Id}}" title="Share"><i class='bi bi-share-fill'></i> Share</a>
</div>
</div>
<div id="footer-navbar-container">
<div id="footer-navbar" class="bar hide-medium hide-large">
<div class="bar-item">
<div id="footer-navbar">
<a class="button main" hx-get="/item/update/{{.item.Id}}" hx-push-url="true" hx-target="#page-content" title="Edit" href="/item/update/{{.item.Id}}"><i class="bi bi-pencil"></i></a>
</div>
<div class="bar-item">
<a class="button main" hx-get="/item/share/{{.item.Id}}" hx-target="#modal-container" title="Share" href="#"><i class='bi bi-share-fill'></i></a>
</div>
</div>
</div>
{{ end }}

22
assets/templates/items/share.tmpl
View File

@ -1,11 +1,14 @@
{{define "page:content"}}
<div id="modal" class="w3-modal">
<div class="w3-modal-content w3-round-large w3-padding w3-animate-top">
<header class="w3-container" style="margin-bottom: 20px;">
<span _="on click remove #modal"
class="w3-button w3-small w3-round-large w3-display-topright" style="margin-top: 2px; margin-right: 8px; padding: 8px;"><i class='bi bi-x-circle-fill'></i></span>
<h5><i class="bi bi-share-fill" title="Share"></i> Share item</h5>
</header>
<dialog role="dialog" aria-modal="true" open>
<header>
<div style="float:left; max-width: 420px;">
<h5><i class="bi bi-share-fill" title="Share"></i> Share item</h5>
</div>
<div style="float:right">
<span class="close-dialog button close"><i class='close-dialog bi bi-x-circle-fill'></i></span>
</div>
</header>
<div class="content">
<form>
<h5>{{ .item.Title }}</h5>
<div class="w3-row">
@ -89,11 +92,10 @@
</fieldset>
<footer class="w3-container">
<p style="text-align: center;">
<button type="submit" class="w3-btn w3-metro-dark-blue w3-round-large"><i class='bi bi-share-fill'></i> Share</button>
<button type="button" _="on click remove #modal" class="w3-btn w3-light-gray w3-round-large">Close</button>
<button type="submit" class="main"><i class='bi bi-share-fill'></i> Share</button>
</p>
</footer>
</form>
</div>
</div>
</dialog>
{{ end }}

51
assets/templates/items/view.tmpl
View File

@ -1,31 +1,34 @@
{{define "page:content"}}
<div id="modal" class="modal">
<div class="modal-content w3-round-large">
<header class="w3-container" style="margin-bottom: 20px; font-weight: bold;">
<span _="on click remove #modal"
class="w3-button w3-round-large w3-display-topright" style="margin-top: 2px; margin-right: 2px;"><i class='bi bi-x-circle-fill'></i></span>
<h5><i class="{{.item.Type_icon}}" title="{{.item.Type_title}}"></i> {{.item.Type_title}} : {{.item.Title}}</h5>
</header>
<dialog role="dialog" aria-modal="true" open>
<header>
<div style="float:left; max-width: 420px;">
<h5><i class="{{.item.Type_icon}}" title="{{.item.Type_title}}"></i> {{.item.Type_title}} : {{.item.Title}}</h5>
</div>
<div style="float:right">
<a class="button main close-dialog" hx-get="/item/update/{{.item.Id}}" hx-push-url="true" hx-target="#page-content" href="/item/update/{{.item.Id}}"><i class="bi bi-pencil close-dialog"></i></a>
<span class="close-dialog button close"><i class='close-dialog bi bi-x-circle-fill'></i></span>
</div>
</header>
<div class="w3-container" style="max-height:600px; overflow: auto;">
{{ if gt (len .item.Summary) 0}}
<span style="font-weight: bold;">Summary</span>
<div class="summary">
{{.item.Summary_rendered | safeHTML}}
</div>
{{ end }}
<div class="content">
{{ if gt (len .item.Summary) 0}}
<span style="font-weight: bold;">Summary</span>
<div class="summary">
{{.item.Summary_rendered | safeHTML}}
</div>
{{ end }}
{{.item.Description_rendered | safeHTML}}
{{.item.Description_rendered | safeHTML}}
{{ if gt (len .fields) 0}}
<ul class="fields">
{{ range .fields }}
{{ if gt (len .fields) 0}}
<ul class="fields">
{{ range .fields }}
<li><span style="font-weight: bold;">{{.Title}}</span> : {{ renderFieldValue .Value .Widget}}</li>
{{ end }}
</ul>
{{ end }}
</ul>
{{ end }}
{{ template "item:relations_view" .}}
{{ template "item:relations_view" .}}
<div class="row" style="margin-bottom: 20px">
<div class="col half">
@ -48,10 +51,6 @@
</div>
</div>
<div class="row" style="margin-bottom: 20px">
<a class="button main" hx-get="/item/update/{{.item.Id}}" hx-push-url="true" hx-target="#page-content"_="on click remove #modal" href="/item/update/{{.item.Id}}"><i class="bi bi-pencil"></i> Edit</a>
</div>
</div>
</div>
</div>
</dialog>
{{ end }}

17
assets/templates/notebooks/form.tmpl
View File

@ -40,19 +40,10 @@
>
</p>
<p class="hide-small">
<button type="submit" class="main"><i class="bi bi-floppy" title="Save"></i> Save</button>
<a class="button secondary" hx-target="#page-content" hx-push-url="true" hx-get="/notebooks"><i class="bi bi-arrow-left-circle" title="Back"></i> Back</a>
</p>
</div>
<div id="footer-navbar-container">
<div id="footer-navbar" class="bar hide-medium hide-large">
<div class="bar-item">
<button type="submit" class="w3-btn w3-metro-dark-blue w3-round-large" title="Save"><i class="bi bi-floppy"></i></button>
</div>
<div class="bar-item">
<a class="button secondary" href="/notebooks" hx-get="/notebooks" hx-push-url="true" hx-target="#page-content" title="Back"><i class="bi bi-arrow-left-circle"></i></a>
</div>
</div>
<div id="footer-navbar">
<button type="submit" class="w3-btn w3-metro-dark-blue w3-round-large" title="Save"><i class="bi bi-floppy"></i><span>Save</span></button>
<a class="button secondary" href="/notebooks" hx-get="/notebooks" hx-push-url="true" hx-target="#page-content" title="Back"><i class="bi bi-arrow-left-circle"></i><span>Back</span></a>
</div>
</form>
{{ end }}

35
assets/templates/pages/home_items.tmpl
View File

@ -16,42 +16,15 @@
<div class="row">
<div class="col l11 m11 s11">
<h5>
<a class="hide-small" href="/item/view/{{.Id}}" hx-get="/item/view/{{.Id}}" hx-target="#modal-container"><i class="{{.Type_icon}}" title="{{.Type_title}}"></i> {{.Title}}</a>
<a class="hide-small" href="/item/view/{{.Id}}" hx-get="/item/view/{{.Id}}" hx-target="#dialog-container"><i class="{{.Type_icon}}" title="{{.Type_title}}"></i> {{.Title}}</a>
<a class="hide-medium hide-large" href="/item/read/{{.Id}}" hx-get="/item/read/{{.Id}}" hx-target="#page-content" hx-push-url="true"><i class="{{.Type_icon}}" title="{{.Type_title}}"></i> {{.Title}}</a>
</h5>
<div class="home-card-summary">{{.Summary | markdownfy | safeHTML}}</div>
</div>
<div class="col l1 m1 s1">
<a
class="w3-btn w3-medium w3-round-large"
style="float: right; padding: 8px 8px"
hx-get="/item/update/{{.Id}}"
hx-push-url="true"
hx-target="#page-content"
href="/item/update/{{.Id}}"
title="Edit"><i class="bi bi-pencil"></i>
</a>
<a
class="w3-btn w3-medium w3-round-large"
style="float: right; padding: 8px 8px"
href="#"
hx-target="#modal-container"
hx-get="/item/share/{{.Id}}"
title="Share"><i class="bi bi-share-fill"></i>
</a>
<a
class="w3-btn w3-medium w3-round-large"
style="float: right; padding: 8px 8px"
href="#"
hx-delete="/item/remove-from-dashboard/{{.Id}}"
hx-target="closest .item"
hx-swap="outerHTML swap:1s"
hx-trigger="confirmed"
onClick="bm_show_confirm(this, 'Dashboard', 'Remove this item from the dashboard ?')"
title="Remove from dashboard"> <i class="bi bi-pin"></i>
</a>
<a class="button" style="float: right; padding: 8px 8px" hx-get="/item/update/{{.Id}}" hx-push-url="true" hx-target="#page-content" href="/item/update/{{.Id}}" title="Edit"><i class="bi bi-pencil"></i></a>
<a class="button" style="float: right; padding: 8px 8px" href="#" hx-target="#dialog-container" hx-get="/item/share/{{.Id}}" title="Share"><i class="bi bi-share-fill"></i> </a>
<a class="button" style="float: right; padding: 8px 8px" href="#" hx-delete="/item/remove-from-dashboard/{{.Id}}" hx-target="closest .item" hx-swap="outerHTML swap:1s" hx-trigger="confirmed" onClick="bm_show_confirm(this, 'Dashboard', 'Remove this item from the dashboard ?')" title="Remove from dashboard"> <i class="bi bi-pin"></i></a>
</div>
</div>

1
assets/templates/partials/footer.tmpl
View File

@ -2,7 +2,6 @@
<script src="/static/easymde/easymde.min.js"></script>
<script src="/static/js/Sortable.min.js"></script>
<script src="/static/js/htmx/htmx.min.js"></script>
<script src="/static/js/hyperscript.min.js"></script>
<script src="/static/js/handlebars.js"></script>
<script src="/static/js/templates.js"></script>
<script src="/static/js/slimselect.min.js"></script>

4
assets/templates/partials/message.tmpl
View File

@ -4,8 +4,8 @@
{{if eq .messageType "success"}} {{ $messageClass = "alert-success"}}
{{else if eq .messageType "failure"}} {{ $messageClass = "alert-failure"}}
{{ end }}
<div _="init add .show to #message then wait 5s then remove .show from #message" class="w3-panel {{ $messageClass }} w3-padding-4 w3-round-large">
<p><i class="bi bi-check-circle w3-large"></i> {{.messageContent}}</p>
<div _="init add .show to #message then wait 5s then remove .show from #message" class="hide {{ $messageClass }}">
<p><i class="bi bi-check-circle"></i> {{.messageContent}}</p>
<ul>
{{ range $field, $fieldMessage := .messageFieldErrors }}
<li>{{ $fieldMessage }}</li>

16
assets/templates/types/form.tmpl
View File

@ -115,20 +115,10 @@
</div>
</div>
<p class="hide-small">
<button class="main"><i class="bi bi-floppy" title="Save"></i> Save</button>
<a class="button secondary" hx-target="#page-content" hx-push-url="true" hx-get="/types"><i class="bi bi-arrow-left-circle" title="Back"></i> Back</a>
</p>
</div>
<div id="footer-navbar-container">
<div id="footer-navbar" class="bar hide-medium hide-large">
<div class="bar-item">
<button type="submit" class="main" title="Save"><i class="bi bi-floppy"></i></button>
</div>
<div class="bar-item">
<a class="button secondary" hx-target="#page-content" hx-push-url="true" hx-get="/types"><i class="bi bi-arrow-left-circle" title="Back"></i></a>
</div>
</div>
<div id="footer-navbar">
<button type="submit" class="main" title="Save"><i class="bi bi-floppy"></i><span>Save</span></button>
<a class="button secondary" hx-target="#page-content" hx-push-url="true" hx-get="/types"><i class="bi bi-arrow-left-circle" title="Back"></i><span>Back</span></a>
</div>
</form>
{{ end }}