Update.
This commit is contained in:
parent
25d109beed
commit
dd80f3732b
src/snek
@ -412,8 +412,8 @@ a {
|
|||||||
display: block;
|
display: block;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
}
|
}
|
||||||
|
}
|
||||||
}
|
|
||||||
/*
|
/*
|
||||||
body {
|
body {
|
||||||
justify-content: flex-start;
|
justify-content: flex-start;
|
||||||
@ -429,3 +429,89 @@ a {
|
|||||||
position:sticky;
|
position:sticky;
|
||||||
}*/
|
}*/
|
||||||
}
|
}
|
||||||
|
|
||||||
|
dialog {
|
||||||
|
position: fixed;
|
||||||
|
top: 50%;
|
||||||
|
left: 50%;
|
||||||
|
transform: translate(-50%, -50%);
|
||||||
|
|
||||||
|
border: none;
|
||||||
|
border-radius: 12px;
|
||||||
|
padding: 24px;
|
||||||
|
background-color: #000; /* Deep black */
|
||||||
|
color: #f1f1f1;
|
||||||
|
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.8);
|
||||||
|
width: 90%;
|
||||||
|
max-width: 400px;
|
||||||
|
|
||||||
|
animation: dialogFadeIn 0.3s ease-out, dialogScaleIn 0.3s ease-out;
|
||||||
|
z-index: 1000;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Backdrop styling */
|
||||||
|
dialog::backdrop {
|
||||||
|
background: rgba(0, 0, 0, 0.7);
|
||||||
|
backdrop-filter: blur(4px);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Title and content */
|
||||||
|
dialog .dialog-title {
|
||||||
|
font-size: 1.5rem;
|
||||||
|
font-weight: bold;
|
||||||
|
margin-bottom: 16px;
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
|
||||||
|
dialog .dialog-content {
|
||||||
|
font-size: 1rem;
|
||||||
|
color: #ccc;
|
||||||
|
margin-bottom: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Button layout */
|
||||||
|
dialog .dialog-actions {
|
||||||
|
display: flex;
|
||||||
|
justify-content: flex-end;
|
||||||
|
gap: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
dialog .dialog-button {
|
||||||
|
padding: 8px 16px;
|
||||||
|
font-size: 0.95rem;
|
||||||
|
border-radius: 8px;
|
||||||
|
border: none;
|
||||||
|
cursor: pointer;
|
||||||
|
transition: background 0.2s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
@keyframes dialogFadeIn {
|
||||||
|
from { opacity: 0; }
|
||||||
|
to { opacity: 1; }
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes dialogScaleIn {
|
||||||
|
from { transform: scale(0.95) translate(-50%, -50%); opacity: 0; }
|
||||||
|
to { transform: scale(1) translate(-50%, -50%); opacity: 1; }
|
||||||
|
}
|
||||||
|
|
||||||
|
dialog .dialog-button.primary {
|
||||||
|
background-color: #f05a28;
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
|
||||||
|
dialog .dialog-button.primary:hover {
|
||||||
|
background-color: #f05a28;
|
||||||
|
}
|
||||||
|
|
||||||
|
dialog .dialog-button.secondary {
|
||||||
|
background-color: #f0a328;
|
||||||
|
color: #eee;
|
||||||
|
}
|
||||||
|
|
||||||
|
dialog .dialog-button.secondary:hover {
|
||||||
|
background-color: #f0b84c;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
61
src/snek/templates/dialog_help.html
Normal file
61
src/snek/templates/dialog_help.html
Normal file
@ -0,0 +1,61 @@
|
|||||||
|
|
||||||
|
<dialog id="help-dialog">
|
||||||
|
<div class="dialog-backdrop">
|
||||||
|
<div class="dialog-box">
|
||||||
|
<div class="dialog-title"><h2>Help</h2></div>
|
||||||
|
<div class="dialog-content">
|
||||||
|
<help-command-list></help-command-list>
|
||||||
|
</div>
|
||||||
|
<div class="dialog-actions">
|
||||||
|
<button class="dialog-button primary">Close</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</dialog>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
class HelpCommandListComponent extends HTMLElement {
|
||||||
|
helpCommands = [
|
||||||
|
{
|
||||||
|
command: "/help",
|
||||||
|
description: "Show this help message"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
command: "/online",
|
||||||
|
description: "Show online users"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
command: "/clear",
|
||||||
|
description: "Clear the board"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
command: "/img-gen",
|
||||||
|
description: "Generate an image"
|
||||||
|
}
|
||||||
|
];
|
||||||
|
|
||||||
|
constructor() {
|
||||||
|
super();
|
||||||
|
}
|
||||||
|
|
||||||
|
connectedCallback() {
|
||||||
|
this.innerHTML = this.helpCommands
|
||||||
|
.map(cmd => `<div><h2>${cmd.command}</h2><div>${cmd.description}</div></div>`)
|
||||||
|
.join('');
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
customElements.define('help-command-list', HelpCommandListComponent);
|
||||||
|
|
||||||
|
const helpDialog = document.getElementById("help-dialog");
|
||||||
|
const helpCloseButton = helpDialog.querySelector('.dialog-button.primary');
|
||||||
|
function showHelp() {
|
||||||
|
helpDialog.showModal();
|
||||||
|
|
||||||
|
helpCloseButton.focus();
|
||||||
|
}
|
||||||
|
helpCloseButton.addEventListener('click', () => {
|
||||||
|
helpDialog.close();
|
||||||
|
});
|
||||||
|
|
||||||
|
</script>
|
28
src/snek/templates/dialog_online.html
Normal file
28
src/snek/templates/dialog_online.html
Normal file
@ -0,0 +1,28 @@
|
|||||||
|
|
||||||
|
<dialog id="online-users">
|
||||||
|
<div class="dialog-backdrop">
|
||||||
|
<div class="dialog-box">
|
||||||
|
<div class="dialog-title"><h2>Online Users</h2></div>
|
||||||
|
<div class="dialog-content"><user-list></user-list></div>
|
||||||
|
<div class="dialog-actions">
|
||||||
|
<button class="dialog-button primary">Close</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</dialog>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
const onlineUsersDialog = document.getElementById("online-users");
|
||||||
|
const closeButton = onlineUsersDialog.querySelector('.dialog-button.primary');
|
||||||
|
|
||||||
|
closeButton.addEventListener('click', () => {
|
||||||
|
onlineUsersDialog.close();
|
||||||
|
});
|
||||||
|
|
||||||
|
async function showOnline() {
|
||||||
|
const users = await app.rpc.getOnlineUsers('{{ channel.uid.value }}');
|
||||||
|
onlineUsersDialog.querySelector('user-list').data = users;
|
||||||
|
onlineUsersDialog.showModal();
|
||||||
|
closeButton.focus();
|
||||||
|
}
|
||||||
|
</script>
|
@ -1,117 +0,0 @@
|
|||||||
<style>
|
|
||||||
/* Ensure the dialog appears centered when open as modal */
|
|
||||||
#online-users {
|
|
||||||
position: fixed;
|
|
||||||
top: 50%;
|
|
||||||
left: 50%;
|
|
||||||
transform: translate(-50%, -50%);
|
|
||||||
|
|
||||||
border: none;
|
|
||||||
border-radius: 12px;
|
|
||||||
padding: 24px;
|
|
||||||
background-color: #111; /* Deep black */
|
|
||||||
color: #f1f1f1;
|
|
||||||
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.8);
|
|
||||||
width: 90%;
|
|
||||||
max-width: 400px;
|
|
||||||
|
|
||||||
animation: fadeIn 0.3s ease-out, scaleIn 0.3s ease-out;
|
|
||||||
z-index: 1000;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Backdrop styling */
|
|
||||||
#online-users::backdrop {
|
|
||||||
background: rgba(0, 0, 0, 0.7);
|
|
||||||
backdrop-filter: blur(4px);
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Title and content */
|
|
||||||
#online-users .dialog-title {
|
|
||||||
font-size: 1.5rem;
|
|
||||||
font-weight: bold;
|
|
||||||
margin-bottom: 16px;
|
|
||||||
color: #fff;
|
|
||||||
}
|
|
||||||
|
|
||||||
#online-users .dialog-content {
|
|
||||||
font-size: 1rem;
|
|
||||||
color: #ccc;
|
|
||||||
margin-bottom: 20px;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Button layout */
|
|
||||||
#online-users .dialog-actions {
|
|
||||||
display: flex;
|
|
||||||
justify-content: flex-end;
|
|
||||||
gap: 10px;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Buttons */
|
|
||||||
#online-users .dialog-button {
|
|
||||||
padding: 8px 16px;
|
|
||||||
font-size: 0.95rem;
|
|
||||||
border-radius: 8px;
|
|
||||||
border: none;
|
|
||||||
cursor: pointer;
|
|
||||||
transition: background 0.2s ease;
|
|
||||||
}
|
|
||||||
|
|
||||||
#online-users .dialog-button.primary {
|
|
||||||
background-color: #4f46e5;
|
|
||||||
color: white;
|
|
||||||
}
|
|
||||||
|
|
||||||
#online-users .dialog-button.primary:hover {
|
|
||||||
background-color: #4338ca;
|
|
||||||
}
|
|
||||||
|
|
||||||
#online-users .dialog-button.secondary {
|
|
||||||
background-color: #333;
|
|
||||||
color: #eee;
|
|
||||||
}
|
|
||||||
|
|
||||||
#online-users .dialog-button.secondary:hover {
|
|
||||||
background-color: #444;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Animations */
|
|
||||||
@keyframes fadeIn {
|
|
||||||
from { opacity: 0; }
|
|
||||||
to { opacity: 1; }
|
|
||||||
}
|
|
||||||
|
|
||||||
@keyframes scaleIn {
|
|
||||||
from { transform: scale(0.95) translate(-50%, -50%); opacity: 0; }
|
|
||||||
to { transform: scale(1) translate(-50%, -50%); opacity: 1; }
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|
||||||
|
|
||||||
<dialog id="online-users">
|
|
||||||
<div class="dialog-backdrop">
|
|
||||||
<div class="dialog-box">
|
|
||||||
<div class="dialog-title"><h2>Currently online</h2></div>
|
|
||||||
<div class="dialog-content"><user-list></user-list></div>
|
|
||||||
<div class="dialog-actions">
|
|
||||||
<button class="dialog-button primary">Close</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</dialog>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
const onlineDialog = document.getElementById("online-users");
|
|
||||||
const dialogButton = onlineDialog.querySelector('.dialog-button.primary');
|
|
||||||
|
|
||||||
dialogButton.addEventListener('click', () => {
|
|
||||||
onlineDialog.close();
|
|
||||||
});
|
|
||||||
|
|
||||||
async function showOnlineUsers() {
|
|
||||||
const users = await app.rpc.getOnlineUsers('{{ channel.uid.value }}');
|
|
||||||
onlineDialog.querySelector('user-list').data = users;
|
|
||||||
onlineDialog.showModal();
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
|
|
||||||
|
|
@ -21,7 +21,8 @@
|
|||||||
<upload-button channel="{{ channel.uid.value }}"></upload-button>
|
<upload-button channel="{{ channel.uid.value }}"></upload-button>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
{% include "online.html" %}
|
{% include "dialog_help.html" %}
|
||||||
|
{% include "dialog_online.html" %}
|
||||||
<script type="module">
|
<script type="module">
|
||||||
import { app } from "/app.js";
|
import { app } from "/app.js";
|
||||||
import { Schedule } from "/schedule.js";
|
import { Schedule } from "/schedule.js";
|
||||||
@ -32,13 +33,16 @@
|
|||||||
}
|
}
|
||||||
getInputField().autoComplete = {
|
getInputField().autoComplete = {
|
||||||
"/online": () =>{
|
"/online": () =>{
|
||||||
showOnlineUsers();
|
showOnline();
|
||||||
},
|
},
|
||||||
"/clear": () => {
|
"/clear": () => {
|
||||||
document.querySelector(".chat-messages").innerHTML = '';
|
document.querySelector(".chat-messages").innerHTML = '';
|
||||||
},
|
},
|
||||||
"/live": () =>{
|
"/live": () =>{
|
||||||
getInputField().liveType = !getInputField().liveType
|
getInputField().liveType = !getInputField().liveType
|
||||||
|
},
|
||||||
|
"/help": () => {
|
||||||
|
showHelp();
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
Loading…
Reference in New Issue
Block a user