gaschz/trilium
1
0
Fork 0
mirror of https://github.com/zadam/trilium.git synced 2025-10-20 15:19:01 +02:00
Code Issues Actions 19 Packages Projects Releases Wiki Activity

feat(toast): improve layout for toasts without title

Browse Source
This commit is contained in:
Elian Doran 2025-09-24 22:40:03 +03:00
parent 120324c3f0
commit 15f344fe4a
No known key found for this signature in database
3 changed files with 63 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

36
apps/client/src/services/toast.ts
View File

@ -4,7 +4,7 @@ import utils from "./utils.js";
export interface ToastOptions { export interface ToastOptions {
id?: string; id?: string;
icon: string; icon: string;
title: string; title?: string;
message: string; message: string;
delay?: number; delay?: number;
autohide?: boolean; autohide?: boolean;
@ -12,20 +12,32 @@ export interface ToastOptions {
} }
function toast(options: ToastOptions) { function toast(options: ToastOptions) {
const $toast = $( const $toast = $(options.title
`<div class="toast" role="alert" aria-live="assertive" aria-atomic="true"> ? `\
<div class="toast-header"> <div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
<strong class="me-auto"> <div class="toast-header">
<strong class="me-auto">
<span class="bx bx-${options.icon}"></span>
<span class="toast-title"></span>
</strong>
<button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
</div>
<div class="toast-body"></div>
</div>`
: `
<div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
<div class="toast-icon">
<span class="bx bx-${options.icon}"></span> <span class="bx bx-${options.icon}"></span>
<span class="toast-title"></span> </div>
</strong> <div class="toast-body"></div>
<button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button> <div class="toast-header">
</div> <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
<div class="toast-body"></div> </div>
</div>` </div>`
); );
$toast.find(".toast-title").text(options.title); $toast.toggleClass("no-title", !options.title);
$toast.find(".toast-title").text(options.title ?? "");
$toast.find(".toast-body").html(options.message); $toast.find(".toast-body").html(options.message);
if (options.id) { if (options.id) {

20
apps/client/src/stylesheets/style.css
View File

@ -1141,6 +1141,26 @@ a.external:not(.no-arrow):after, a[href^="http://"]:not(.no-arrow):after, a[href
overflow: hidden; overflow: hidden;
} }
.toast.no-title {
display: flex;
flex-direction: row;
}
.toast.no-title .toast-icon {
display: flex;
align-items: center;
padding: var(--bs-toast-padding-y) var(--bs-toast-padding-x);
}
.toast.no-title .toast-body {
padding-left: 0;
padding-right: 0;
}
.toast.no-title .toast-header {
background-color: unset !important;
}
.ck-mentions .ck-button { .ck-mentions .ck-button {
font-size: var(--detail-font-size) !important; font-size: var(--detail-font-size) !important;
padding: 5px; padding: 5px;

19
apps/client/src/stylesheets/theme-next/base.css
View File

@ -342,7 +342,10 @@ li.dropdown-item a.dropdown-item-button:focus-visible {
#toast-container .toast .toast-header .btn-close { #toast-container .toast .toast-header .btn-close {
margin: 0 0 0 12px; margin: 0 0 0 12px;
}
#toast-container .toast.no-title {
flex-direction: row;
} }
#toast-container .toast .toast-body { #toast-container .toast .toast-body {
@ -350,6 +353,22 @@ li.dropdown-item a.dropdown-item-button:focus-visible {
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
padding-top: 0; padding-top: 0;
color: var(--muted-text-color);
}
#toast-container .toast:not(.no-title) .bx {
margin-right: 0.5em;
font-size: 1.1em;
}
#toast-container .toast.no-title .bx {
margin-right: 0;
font-size: 1.3em;
}
#toast-container .toast.no-title .toast-body {
padding-top: var(--bs-toast-padding-x);
color: var(--toast-text-color);
} }
/* /*