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

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

@ -266,12 +266,8 @@
{/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 callbacks.onReply}
<button class="messagebox__toolbar-btn" title="Svar" onclick={handleReply}>💬</button>
{/if}
{#if isOwnMessage && !editing && callbacks.onEdit} {#if isOwnMessage && !editing && callbacks.onEdit}
<button class="messagebox__toolbar-btn" title="Rediger" onclick={startEdit}>✏️</button> <button class="messagebox__toolbar-btn" title="Rediger" onclick={startEdit}>✏️</button>
{/if} {/if}
@ -285,9 +281,11 @@
<button class="messagebox__toolbar-btn" title="AI-behandling" onclick={handleMagic} disabled={isAiProcessing}>✨</button> <button class="messagebox__toolbar-btn" title="AI-behandling" onclick={handleMagic} disabled={isAiProcessing}>✨</button>
{/if} {/if}
</div> </div>
{#if callbacks.onTogglePin || (isOwnMessage && !editing && callbacks.onDelete)} <!-- Nedre toolbar: samtale-handlinger -->
<div class="messagebox__toolbar-divider"></div> <div class="messagebox__toolbar messagebox__toolbar--bottom">
<div class="messagebox__toolbar-group"> {#if callbacks.onReply}
<button class="messagebox__toolbar-btn" title="Svar" onclick={handleReply}>💬</button>
{/if}
{#if callbacks.onTogglePin} {#if callbacks.onTogglePin}
<button class="messagebox__toolbar-btn" title={message.pinned ? 'Løsne' : 'Fest'} onclick={handleTogglePin}>📌</button> <button class="messagebox__toolbar-btn" title={message.pinned ? 'Løsne' : 'Fest'} onclick={handleTogglePin}>📌</button>
{/if} {/if}
@ -295,8 +293,6 @@
<button class="messagebox__toolbar-btn messagebox__toolbar-btn--danger" title="Slett" onclick={handleDelete}>🗑️</button> <button class="messagebox__toolbar-btn messagebox__toolbar-btn--danger" title="Slett" onclick={handleDelete}>🗑️</button>
{/if} {/if}
</div> </div>
{/if}
</div>
{#if confirmingDelete} {#if confirmingDelete}
<div class="messagebox__confirm-delete"> <div class="messagebox__confirm-delete">
<span>Slette melding?</span> <span>Slette melding?</span>
@ -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;