jedmund/jedmund-svelte
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

style: enhance toolbar with glassmorphism and improved design

Browse source 
- Add white background with subtle gray border and rounded corners
- Remove initial drop shadow, add shadow on hover
- Reduce vertical padding for more compact design
- Update button hover states to use darker gray
- Add sticky positioning with gap from top
- Improve responsive padding and animations

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
Justin Edmund 2025-06-26 11:58:34 -04:00
parent 2f20209d66
commit 15ce9caae9
1 changed files with 175 additions and 96 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

271
src/lib/components/admin/composer/ComposerToolbar.svelte
View file

@ -40,52 +40,16 @@
</script> </script>
<div class="editor-toolbar"> <div class="editor-toolbar">
<div class="edra-toolbar"> <div class="toolbar-container">
<!-- Text Style Dropdown --> <div class="edra-toolbar">
<div class="text-style-dropdown"> <!-- Text Style Dropdown -->
<button
bind:this={dropdownTriggerRef}
class="dropdown-trigger"
onclick={onTextStyleDropdownToggle}
>
<span>{currentTextStyle}</span>
<svg
width="12"
height="12"
viewBox="0 0 12 12"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M3 4.5L6 7.5L9 4.5"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
/>
</svg>
</button>
</div>
<span class="separator"></span>
{#each Object.keys(filteredCommands).filter((key) => !excludedCommands.includes(key)) as keys}
{@const groups = filteredCommands[keys].commands}
{#each groups as command}
<EdraToolBarIcon {command} {editor} />
{/each}
<span class="separator"></span>
{/each}
{#if showMediaLibrary}
<!-- Media Dropdown -->
<div class="text-style-dropdown"> <div class="text-style-dropdown">
<button <button
bind:this={mediaDropdownTriggerRef} bind:this={dropdownTriggerRef}
class="dropdown-trigger" class="dropdown-trigger"
onclick={onMediaDropdownToggle} onclick={onTextStyleDropdownToggle}
> >
<span>Insert</span> <span>{currentTextStyle}</span>
<svg <svg
width="12" width="12"
height="12" height="12"
@ -105,43 +69,81 @@
</div> </div>
<span class="separator"></span> <span class="separator"></span>
{/if}
{#if colorCommands.length > 0} {#each Object.keys(filteredCommands).filter((key) => !excludedCommands.includes(key)) as keys}
<EdraToolBarIcon {@const groups = filteredCommands[keys].commands}
command={colorCommands[0]} {#each groups as command}
{editor} <EdraToolBarIcon {command} {editor} />
style={`color: ${editor.getAttributes('textStyle').color};`} {/each}
onclick={() => { <span class="separator"></span>
const color = editor.getAttributes('textStyle').color {/each}
const hasColor = editor.isActive('textStyle', { color })
if (hasColor) { {#if showMediaLibrary}
editor.chain().focus().unsetColor().run() <!-- Media Dropdown -->
} else { <div class="text-style-dropdown">
const color = prompt('Enter the color of the text:') <button
if (color !== null) { bind:this={mediaDropdownTriggerRef}
editor.chain().focus().setColor(color).run() class="dropdown-trigger"
onclick={onMediaDropdownToggle}
>
<span>Insert</span>
<svg
width="12"
height="12"
viewBox="0 0 12 12"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M3 4.5L6 7.5L9 4.5"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
/>
</svg>
</button>
</div>
<span class="separator"></span>
{/if}
{#if colorCommands.length > 0}
<EdraToolBarIcon
command={colorCommands[0]}
{editor}
style={`color: ${editor.getAttributes('textStyle').color};`}
onclick={() => {
const color = editor.getAttributes('textStyle').color
const hasColor = editor.isActive('textStyle', { color })
if (hasColor) {
editor.chain().focus().unsetColor().run()
} else {
const color = prompt('Enter the color of the text:')
if (color !== null) {
editor.chain().focus().setColor(color).run()
}
} }
} }}
}} />
/> <EdraToolBarIcon
<EdraToolBarIcon command={colorCommands[1]}
command={colorCommands[1]} {editor}
{editor} style={`background-color: ${editor.getAttributes('highlight').color};`}
style={`background-color: ${editor.getAttributes('highlight').color};`} onclick={() => {
onclick={() => { const hasHightlight = editor.isActive('highlight')
const hasHightlight = editor.isActive('highlight') if (hasHightlight) {
if (hasHightlight) { editor.chain().focus().unsetHighlight().run()
editor.chain().focus().unsetHighlight().run() } else {
} else { const color = prompt('Enter the color of the highlight:')
const color = prompt('Enter the color of the highlight:') if (color !== null) {
if (color !== null) { editor.chain().focus().setHighlight({ color }).run()
editor.chain().focus().setHighlight({ color }).run() }
} }
} }}
}} />
/> {/if}
{/if} </div>
</div> </div>
</div> </div>
@ -150,23 +152,59 @@
@import '$styles/mixins'; @import '$styles/mixins';
.editor-toolbar { .editor-toolbar {
border-bottom: 1px solid $gray-90;
background: $white;
position: sticky; position: sticky;
top: 0; top: $unit;
z-index: 10; z-index: 20;
padding: $unit 0; padding: $unit $unit-2x;
margin: 0 0 $unit-2x 0;
background: rgba($white, 0.98);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
border: 1px solid rgba($gray-90, 0.2);
border-radius: $corner-radius-md;
box-shadow: none;
transition: all 0.2s ease;
animation: slideDown 0.3s ease-out;
&:hover {
background: $white;
border-color: rgba($gray-85, 0.3);
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
}
}
@keyframes slideDown {
from {
opacity: 0;
transform: translateY(-10px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.toolbar-container {
max-width: $page-width;
margin: 0 auto;
padding: 0 $unit-2x;
@include breakpoint('phone') {
padding: 0;
}
} }
.edra-toolbar { .edra-toolbar {
display: flex; display: flex;
align-items: center; align-items: center;
gap: 4px; gap: 6px;
padding: 0 $unit-6x; padding: 0 $unit-6x;
flex-wrap: wrap; flex-wrap: wrap;
height: 44px;
@include breakpoint('phone') { @include breakpoint('phone') {
padding: 0 $unit-4x; padding: 0 $unit-4x;
gap: 4px;
} }
} }
@ -179,35 +217,76 @@
display: flex; display: flex;
align-items: center; align-items: center;
gap: 4px; gap: 4px;
padding: 6px 10px; padding: 6px 12px;
background: transparent; background: rgba($gray-95, 0.5);
border: 1px solid transparent; border: 1px solid rgba($gray-85, 0.3);
border-radius: $corner-radius; border-radius: $corner-radius;
font-size: 14px; font-size: 13px;
font-weight: 500;
color: $gray-10; color: $gray-10;
cursor: pointer; cursor: pointer;
transition: all 0.2s ease; transition: all 0.15s ease;
height: 32px;
&:hover { &:hover {
background: $gray-95; background: rgba($gray-90, 0.8);
border-color: $gray-85; border-color: rgba($gray-80, 0.5);
transform: translateY(-1px);
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
} }
&:active { &:active {
background: $gray-90; background: rgba($gray-85, 0.9);
transform: translateY(0);
box-shadow: none;
} }
svg { svg {
width: 12px; width: 10px;
height: 12px; height: 10px;
opacity: 0.5; opacity: 0.6;
} }
} }
.separator { .separator {
width: 1px; width: 1px;
height: 20px; height: 24px;
background: $gray-85; background: rgba($gray-85, 0.3);
margin: 0 4px; margin: 0 6px;
opacity: 0.6;
}
// Override edra toolbar icon styles for floating appearance
:global(.editor-toolbar .edra-command-button) {
min-width: 32px;
min-height: 32px;
background-color: transparent;
border-radius: $corner-radius;
transition: all 0.15s ease;
&:hover {
background-color: rgba($gray-85, 0.6);
transform: translateY(-1px);
}
&:active {
background-color: rgba($gray-85, 0.7);
transform: translateY(0);
}
&.active {
background-color: rgba($blue-50, 0.1);
color: $blue-40;
&:hover {
background-color: rgba($blue-50, 0.15);
}
}
}
:global(.editor-toolbar .edra-toolbar-icon) {
width: 16px;
height: 16px;
stroke-width: 2px;
} }
</style> </style>