sidelinja/server
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

UI: bruk play-symboler (◀ ▶) for revisjonspiler

Browse source 
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
vegard 2026-03-16 03:46:10 +01:00
parent bc0da66d2a
commit 52b71e6440
1 changed files with 41 additions and 44 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

85
web/src/lib/components/MessageBox.svelte
View file

@ -266,35 +266,31 @@
{/if} {/if}
</div> </div>
{/if} {/if}
<!-- Flytende toolbar — gruppert: handlinger | forvaltning --> <!-- Øvre toolbar: opprett/transformer-handlinger -->
<div class="messagebox__toolbar"> <div class="messagebox__toolbar messagebox__toolbar--top">
<div class="messagebox__toolbar-group"> {#if isOwnMessage && !editing && callbacks.onEdit}
{#if callbacks.onReply} <button class="messagebox__toolbar-btn" title="Rediger" onclick={startEdit}>✏️</button>
<button class="messagebox__toolbar-btn" title="Svar" onclick={handleReply}>💬</button> {/if}
{/if} {#if callbacks.onConvertToKanban}
{#if isOwnMessage && !editing && callbacks.onEdit} <button class="messagebox__toolbar-btn" title="Opprett kanban-kort" onclick={handleConvertToKanban}>📋</button>
<button class="messagebox__toolbar-btn" title="Rediger" onclick={startEdit}>✏️</button> {/if}
{/if} {#if callbacks.onConvertToCalendar}
{#if callbacks.onConvertToKanban} <button class="messagebox__toolbar-btn" title="Opprett kalenderhendelse" onclick={handleConvertToCalendar}>📅</button>
<button class="messagebox__toolbar-btn" title="Opprett kanban-kort" onclick={handleConvertToKanban}>📋</button> {/if}
{/if} {#if callbacks.onMagic}
{#if callbacks.onConvertToCalendar} <button class="messagebox__toolbar-btn" title="AI-behandling" onclick={handleMagic} disabled={isAiProcessing}>✨</button>
<button class="messagebox__toolbar-btn" title="Opprett kalenderhendelse" onclick={handleConvertToCalendar}>📅</button> {/if}
{/if} </div>
{#if callbacks.onMagic} <!-- Nedre toolbar: samtale-handlinger -->
<button class="messagebox__toolbar-btn" title="AI-behandling" onclick={handleMagic} disabled={isAiProcessing}>✨</button> <div class="messagebox__toolbar messagebox__toolbar--bottom">
{/if} {#if callbacks.onReply}
</div> <button class="messagebox__toolbar-btn" title="Svar" onclick={handleReply}>💬</button>
{#if callbacks.onTogglePin || (isOwnMessage && !editing && callbacks.onDelete)} {/if}
<div class="messagebox__toolbar-divider"></div> {#if callbacks.onTogglePin}
<div class="messagebox__toolbar-group"> <button class="messagebox__toolbar-btn" title={message.pinned ? 'Løsne' : 'Fest'} onclick={handleTogglePin}>📌</button>
{#if callbacks.onTogglePin} {/if}
<button class="messagebox__toolbar-btn" title={message.pinned ? 'Løsne' : 'Fest'} onclick={handleTogglePin}>📌</button> {#if isOwnMessage && !editing && callbacks.onDelete}
{/if} <button class="messagebox__toolbar-btn messagebox__toolbar-btn--danger" title="Slett" onclick={handleDelete}>🗑️</button>
{#if isOwnMessage && !editing && callbacks.onDelete}
<button class="messagebox__toolbar-btn messagebox__toolbar-btn--danger" title="Slett" onclick={handleDelete}>🗑️</button>
{/if}
</div>
{/if} {/if}
</div> </div>
{#if confirmingDelete} {#if confirmingDelete}
@ -349,8 +345,8 @@
{/if} {/if}
</button> </button>
{#if showingRevision} {#if showingRevision}
<button class="messagebox__revision-nav" onclick={prevRevision} disabled={revisionIndex >= revisions.length - 1}>&larr;</button> <button class="messagebox__revision-nav" onclick={prevRevision} disabled={revisionIndex >= revisions.length - 1}>&#9664;</button>
<button class="messagebox__revision-nav" onclick={nextRevision}>&rarr;</button> <button class="messagebox__revision-nav" onclick={nextRevision}>&#9654;</button>
{#if revisionIndex >= 0} {#if revisionIndex >= 0}
<button class="messagebox__revision-toggle" onclick={(e) => { e.stopPropagation(); revisionIndex = -1; }}> <button class="messagebox__revision-toggle" onclick={(e) => { e.stopPropagation(); revisionIndex = -1; }}>
nåværende nåværende
@ -456,10 +452,9 @@
font-size: 0.65rem; font-size: 0.65rem;
} }
/* === Flytende toolbar (absolutt-posisjonert, ingen layout-shift) === */ /* === Flytende toolbars (absolutt-posisjonert, ingen layout-shift) === */
.messagebox__toolbar { .messagebox__toolbar {
position: absolute; position: absolute;
top: -0.6rem;
right: 0.4rem; right: 0.4rem;
display: flex; display: flex;
gap: 0.1rem; gap: 0.1rem;
@ -473,11 +468,24 @@
z-index: 5; z-index: 5;
} }
.messagebox__toolbar--top {
top: -0.6rem;
}
.messagebox__toolbar--bottom {
bottom: -0.6rem;
}
.messagebox--expanded:hover .messagebox__toolbar { .messagebox--expanded:hover .messagebox__toolbar {
opacity: 1; opacity: 1;
pointer-events: auto; pointer-events: auto;
} }
/* Skjul tomme toolbars (kun har betingede barn) */
.messagebox__toolbar:empty {
display: none;
}
.messagebox__toolbar-btn { .messagebox__toolbar-btn {
font-size: 0.7rem; font-size: 0.7rem;
background: none; background: none;
@ -497,17 +505,6 @@
background: rgba(220, 38, 38, 0.25); background: rgba(220, 38, 38, 0.25);
} }
.messagebox__toolbar-group {
display: flex;
gap: 0.1rem;
}
.messagebox__toolbar-divider {
width: 1px;
background: #2d3148;
margin: 0.1rem 0.15rem;
}
.messagebox__confirm-delete { .messagebox__confirm-delete {
display: flex; display: flex;
align-items: center; align-items: center;