change save button styling

resolves #49
This commit is contained in:
2023-11-29 14:31:19 +01:00
parent 3a6483aa61
commit f9cdf70bdb
3 changed files with 19 additions and 10 deletions

View File

@@ -6,8 +6,7 @@ const de = {
saveActions: { saveActions: {
UNDO: "Rückgängig (<kbd class='icon'>shift</kbd> halten um alle Änderungen rückgängig zu machen)", UNDO: "Rückgängig (<kbd class='icon'>shift</kbd> halten um alle Änderungen rückgängig zu machen)",
REDO: "Wiederholen", REDO: "Wiederholen",
APPLY: "Anwenden", SAVE: "Speichern",
SAVE: "Änderungen auf das Gerät schreiben",
}, },
sync: { sync: {
TITLE_READ: "Neueste Änderungen werden abgerufen", TITLE_READ: "Neueste Änderungen werden abgerufen",

View File

@@ -6,8 +6,7 @@ const en = {
saveActions: { saveActions: {
UNDO: "Undo (hold <kbd class='icon'>shift</kbd> to undo all changes)", UNDO: "Undo (hold <kbd class='icon'>shift</kbd> to undo all changes)",
REDO: "Redo", REDO: "Redo",
APPLY: "Apply", SAVE: "Save",
SAVE: "Burn changes to your device",
}, },
backup: { backup: {
TITLE: "Local Backup", TITLE: "Local Backup",

View File

@@ -132,19 +132,30 @@
on:click={redo}>redo</button on:click={redo}>redo</button
> >
{#if $changes.length !== 0} {#if $changes.length !== 0}
<div transition:slide class="separator" />
<button <button
transition:fly={{x: 10}} transition:fly={{x: 10}}
use:action={{title: $LL.saveActions.SAVE(), shortcut: "ctrl+shift+s"}} use:action={{title: $LL.saveActions.SAVE(), shortcut: "ctrl+shift+s"}}
on:click={save} on:click={save}
class="icon">save</button class="click-me"><span class="icon">save</span>{$LL.saveActions.SAVE()}</button
> >
{/if} {/if}
<style lang="scss"> <style lang="scss">
.separator { .click-me {
width: 1px; display: flex;
height: 24px; align-items: center;
background: var(--md-sys-color-outline-variant); justify-content: center;
height: fit-content;
margin-inline: 8px;
padding-block: 2px;
padding-inline-start: 8px;
padding-inline-end: 12px;
font-family: inherit;
font-weight: bold;
color: var(--md-sys-color-primary);
border: 2px solid var(--md-sys-color-primary);
border-radius: 18px;
outline: 2px dashed var(--md-sys-color-primary);
outline-offset: 2px;
} }
</style> </style>