gaschz/trilium
1
0
Fork 0
mirror of https://github.com/zadam/trilium.git synced 2025-12-29 10:44:25 +01:00
Code Issues Actions 12 Packages Projects Releases Wiki Activity

style/UI switcher illustration: improve

Browse Source
This commit is contained in:
Adorian Doran 2025-12-25 01:22:35 +02:00
parent 45c8b24b9c
commit ac086bc2a4
2 changed files with 82 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

61
apps/client/src/widgets/type_widgets/options/appearance.css
View File

@ -54,6 +54,7 @@
}
.content {
padding-inline-start: 6px;
background-color: var(--main-background-color);
flex-grow: 1;
border-top-left-radius: 6px;
@ -68,7 +69,9 @@
padding: 5px;
.title {
margin-inline-start: 4px;
flex-grow: 1;
font-size: 12px;
}
}
@ -81,13 +84,63 @@
.ribbon-header {
display: flex;
gap: 3px;
}
.ribbon-body {
height: 20px;
background-color: rgba(0, 0, 0, 0.05);
border-radius: 6px;
margin: 1px 0;
border: 0 solid var(--main-text-color);
border-top-width: 1px;
border-bottom-width: 1px;
margin: 2px 0;
.ribbon-body-content {
height: 4px;
margin-block: 4px;
background: repeating-linear-gradient(90deg, currentColor, currentColor 10px, transparent 10px, transparent 22px);
opacity: .5;
}
}
}
.note-header {
display: flex;
flex-direction: column;
padding-inline: 2px;
.note-toolbar {
align-self: flex-end;
}
.note-inline-title {
display: flex;
align-items: center;
padding-bottom: 4px;
.note-icon {
display: flex;
width: 22px;
height: 22px;
justify-content: center;
align-items: center;
border-radius: 50%;
background: var(--note-icon-hover-background-color);
font-size: 12px;
color: var(--note-icon-color);
}
.note-title-row {
margin-inline-start: 4px;
line-height: 1;
.title {
font-size: 11px;
}
.subtitle {
font-size: 6px;
opacity: .5;
}
}
}
}

30
apps/client/src/widgets/type_widgets/options/appearance.tsx
View File

@ -159,11 +159,29 @@ function LayoutIllustration({ isNewLayout }: { isNewLayout?: boolean }) {
<div className="tab-bar" />
<div className="content">
<div className="title-bar">
<Icon icon="bx bx-note" />
<span className="title">Title</span>
<Icon icon="bx bx-dock-right" />
{(isNewLayout) ? (
<div className="note-header">
<div className="note-toolbar">
<Icon icon="bx bx-dock-right" />
</div>
<div className="note-inline-title">
<Icon className="note-icon" icon="bx bx-leaf" />
<div className="note-title-row">
<div className="title">Title</div>
<div className="subtitle">Just a sample note</div>
</div>
</div>
</div>
) : (
<div>
<div className="title-bar">
<Icon icon="bx bx-leaf" />
<span className="title">Title</span>
<Icon icon="bx bx-dock-right" />
</div>
</div>
)}
{!isNewLayout && <div className="ribbon">
<div className="ribbon-header">
@ -173,7 +191,9 @@ function LayoutIllustration({ isNewLayout }: { isNewLayout?: boolean }) {
<Icon icon="bx bx-collection" />
</div>
<div className="ribbon-body" />
<div className="ribbon-body">
<div className="ribbon-body-content"></div>
</div>
</div>}
{isNewLayout && <div className="note-title-actions">