remanso-space/remanso
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

design(stacked-notes): action buttons in vertical bar

Browse Source
This commit is contained in:
Julien Calixte
2026-05-04 10:25:47 +02:00
parent 002cf9a4b1
commit e1afa8903b
4 changed files with 90 additions and 67 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
src/components/NoteFreshnessBadge.vue
View File

@@ -171,7 +171,6 @@ const isBusy = computed(() => props.status === "checking")
/> />
<path d="M3 3l18 18" /> <path d="M3 3l18 18" />
</svg> </svg>
<span class="freshness-label">{{ label }}</span>
</button> </button>
</template> </template>

128
src/components/StackedNote.vue
View File

@@ -269,27 +269,13 @@ const onBadgeClick = async () => {
[`note-${sha}`]: true [`note-${sha}`]: true
}" }"
> >
<a <div class="title-stacked-note breadcrumbs text-sm" :class="titleClassName">
class="title-stacked-note-link"
@click.prevent="scrollToFocusedNote({ noteId: props.sha })"
>
<div
class="title-stacked-note breadcrumbs text-sm"
:class="titleClassName"
>
<ul>
<li v-for="(part, i) in breadcrumbs" :key="i">
{{ part }}
</li>
</ul>
</div>
</a>
<section class="text-content">
<div class="action-bar"> <div class="action-bar">
<note-freshness-badge <note-freshness-badge
:status="freshnessStatus" :status="freshnessStatus"
:last-checked-at="lastCheckedAt" :last-checked-at="lastCheckedAt"
@click="onBadgeClick" @click="onBadgeClick"
class="action"
/> />
<button <button
v-if="isMarkdown" v-if="isMarkdown"
@@ -298,50 +284,62 @@ const onBadgeClick = async () => {
:style="mode === 'edit' ? 'color: var(--color-primary)' : ''" :style="mode === 'edit' ? 'color: var(--color-primary)' : ''"
@click="toggleMode" @click="toggleMode"
> >
<svg <svg
v-if="mode === 'read'" v-if="mode === 'read'"
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
class="icon icon-tabler icon-tabler-edit" class="icon icon-tabler icon-tabler-edit"
width="24" width="24"
height="24" height="24"
viewBox="0 0 24 24" viewBox="0 0 24 24"
stroke-width="1.5" stroke-width="1.5"
stroke="currentColor" stroke="currentColor"
fill="none" fill="none"
stroke-linecap="round" stroke-linecap="round"
stroke-linejoin="round" stroke-linejoin="round"
> >
<path stroke="none" d="M0 0h24v24H0z" fill="none" /> <path stroke="none" d="M0 0h24v24H0z" fill="none" />
<path <path
d="M7 7h-1a2 2 0 0 0 -2 2v9a2 2 0 0 0 2 2h9a2 2 0 0 0 2 -2v-1" d="M7 7h-1a2 2 0 0 0 -2 2v9a2 2 0 0 0 2 2h9a2 2 0 0 0 2 -2v-1"
/> />
<path <path
d="M20.385 6.585a2.1 2.1 0 0 0 -2.97 -2.97l-8.415 8.385v3h3l8.385 -8.415z" d="M20.385 6.585a2.1 2.1 0 0 0 -2.97 -2.97l-8.415 8.385v3h3l8.385 -8.415z"
/> />
<path d="M16 5l3 3" /> <path d="M16 5l3 3" />
</svg> </svg>
<svg <svg
v-else v-else
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
class="icon icon-tabler icon-tabler-device-floppy" class="icon icon-tabler icon-tabler-device-floppy"
width="24" width="24"
height="24" height="24"
viewBox="0 0 24 24" viewBox="0 0 24 24"
stroke-width="2" stroke-width="2"
stroke="currentColor" stroke="currentColor"
fill="none" fill="none"
stroke-linecap="round" stroke-linecap="round"
stroke-linejoin="round" stroke-linejoin="round"
> >
<path stroke="none" d="M0 0h24v24H0z" fill="none" /> <path stroke="none" d="M0 0h24v24H0z" fill="none" />
<path <path
d="M6 4h10l4 4v10a2 2 0 0 1 -2 2h-12a2 2 0 0 1 -2 -2v-12a2 2 0 0 1 2 -2" d="M6 4h10l4 4v10a2 2 0 0 1 -2 2h-12a2 2 0 0 1 -2 -2v-12a2 2 0 0 1 2 -2"
/> />
<path d="M12 14m-2 0a2 2 0 1 0 4 0a2 2 0 1 0 -4 0" /> <path d="M12 14m-2 0a2 2 0 1 0 4 0a2 2 0 1 0 -4 0" />
<path d="M14 4l0 4l-6 0l0 -4" /> <path d="M14 4l0 4l-6 0l0 -4" />
</svg> </svg>
</button> </button>
</div> </div>
<a
class="title-stacked-note-link"
@click.prevent="scrollToFocusedNote({ noteId: props.sha })"
>
<ul>
<li v-for="(part, i) in breadcrumbs" :key="i">
{{ part }}
</li>
</ul>
</a>
</div>
<section class="text-content">
<div v-if="mode === 'edit' && isMarkdown" class="edit"> <div v-if="mode === 'edit' && isMarkdown" class="edit">
<edit-note v-model="rawContent" /> <edit-note v-model="rawContent" />
</div> </div>
@@ -389,7 +387,6 @@ $border-color: rgba(18, 19, 58, 0.2);
background-color: var(--color-base-100); background-color: var(--color-base-100);
color: var(--color-base-content); color: var(--color-base-content);
font-size: 0.8em; font-size: 0.8em;
overflow: hidden;
ul, ul,
li { li {
@@ -415,12 +412,19 @@ $border-color: rgba(18, 19, 58, 0.2);
align-items: center; align-items: center;
justify-content: flex-end; justify-content: flex-end;
gap: 0.25rem; gap: 0.25rem;
margin: 0.2rem 0;
.action {
transform: rotate(-90deg);
}
} }
.action { .action {
margin: 0; margin: 0;
&:hover {
cursor: pointer;
}
img { img {
vertical-align: bottom; vertical-align: bottom;
} }
@@ -452,7 +456,7 @@ $border-color: rgba(18, 19, 58, 0.2);
} }
.title-stacked-note { .title-stacked-note {
padding: 0 1rem; padding: 0;
transform-origin: 0 0; transform-origin: 0 0;
transform: rotate(90deg); transform: rotate(90deg);
} }

1
src/components/StackedPublicNote.vue
View File

@@ -144,7 +144,6 @@ $border-color: rgba(18, 19, 58, 0.2);
background-color: var(--color-base-100); background-color: var(--color-base-100);
color: var(--color-base-content); color: var(--color-base-content);
font-size: 0.8em; font-size: 0.8em;
overflow: hidden;
ul, ul,
li { li {

27
src/styles/app.css
View File

@@ -13,7 +13,11 @@
--light-link: lighten(#445fb9, 45%); --light-link: lighten(#445fb9, 45%);
--background-color: #ffffff; --background-color: #ffffff;
--note-width: 500px; --note-width: 500px;
--note-canvas-bg: color-mix(in oklch, var(--color-base-100) 60%, var(--color-base-200)); --note-canvas-bg: color-mix(
in oklch,
var(--color-base-100) 60%,
var(--color-base-200)
);
--note-sheet-shadow: 1px 0 8px rgb(0 0 0 / 6%); --note-sheet-shadow: 1px 0 8px rgb(0 0 0 / 6%);
--color-contrast-content: var(--color-success); --color-contrast-content: var(--color-success);
--notyf-margin: 0.5rem; --notyf-margin: 0.5rem;
@@ -91,18 +95,35 @@ a {
} }
} }
a.title-stacked-note-link { .title-stacked-note {
color: var(--color-base-content); color: var(--color-base-content);
display: block;
text-decoration: none; text-decoration: none;
position: sticky; position: sticky;
top: 0; top: 0;
overflow: visible;
display: flex;
gap: 0.5rem;
align-items: center;
}
a.title-stacked-note-link {
display: block;
overflow: visible;
&:hover { &:hover {
cursor: pointer; cursor: pointer;
} }
} }
.title-stacked-note ul,
.title-stacked-note li {
margin-top: 0;
margin-bottom: 0;
padding-left: 0;
text-decoration: none;
display: flex;
gap: 1rem;
}
.notyf__toast { .notyf__toast {
border-radius: revert-layer; border-radius: revert-layer;
border: none; border: none;