Theaninova/DeviceManager
1
0
Fork 0
mirror of https://github.com/CharaChorder/DeviceManager.git synced 2026-02-15 21:52:39 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat: matrix

Browse Source
This commit is contained in:
Thea Schöbl
2024-09-13 21:35:52 +02:00
parent 26c43b1966
commit d1fefb88a1
24 changed files with 1386 additions and 59 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
src/routes/(app)/config/chords/+page.svelte
View File

@@ -262,9 +262,7 @@
{/if}
{#each $items.slice(page * $pageSize - (page === 0 ? 0 : 1), (page + 1) * $pageSize - 1) as [chord] (JSON.stringify(chord?.id))}
{#if chord}
<tr>
<ChordEdit {chord} onduplicate={() => (page = 0)} />
</tr>
<ChordEdit {chord} onduplicate={() => (page = 0)} />
{/if}
{/each}</tbody
>
@@ -397,7 +395,7 @@
table {
height: fit-content;
overflow: hidden;
overflow-y: hidden;
transition: all 1s ease;
}
</style>

76
src/routes/(app)/config/chords/ChordEdit.svelte
View File

@@ -89,33 +89,37 @@
}
</script>
<th>
<ChordActionEdit {chord} onsubmit={() => {}} />
</th>
<td>
<ChordPhraseEdit {chord} />
</td>
<td class="table-buttons">
{#if !chord.deleted}
<button transition:slide class="icon compact" onclick={remove}
>delete</button
>
{:else}
<button transition:slide class="icon compact" onclick={restore}
>restore_from_trash</button
>
{/if}
<button disabled={chord.deleted} class="icon compact" onclick={duplicate}
>content_copy</button
>
<button
class="icon compact"
class:disabled={chord.isApplied}
onclick={restore}>undo</button
>
<div class="separator"></div>
<button class="icon compact" onclick={share}>share</button>
</td>
<tr>
<th>
<ChordActionEdit {chord} onsubmit={() => {}} />
</th>
<td class="phrase-edit">
<ChordPhraseEdit {chord} />
</td>
<td>
<div class="table-buttons">
{#if !chord.deleted}
<button transition:slide class="icon compact" onclick={remove}
>delete</button
>
{:else}
<button transition:slide class="icon compact" onclick={restore}
>restore_from_trash</button
>
{/if}
<button disabled={chord.deleted} class="icon compact" onclick={duplicate}
>content_copy</button
>
<button
class="icon compact"
class:disabled={chord.isApplied}
onclick={restore}>undo</button
>
<div class="separator"></div>
<button class="icon compact" onclick={share}>share</button>
</div>
</td>
</tr>
<style lang="scss">
.separator {
@@ -132,17 +136,29 @@
transition: opacity 75ms ease;
}
td {
.phrase-edit {
position: relative;
}
tr {
position: relative;
}
.table-buttons {
opacity: 0;
transition: opacity 75ms ease;
position: absolute;
top: 0;
right: 0;
transform: translate(100%, -50%);
background: var(--md-sys-color-surface-variant);
}
:global(tr):focus-within > .table-buttons,
:global(tr):hover > .table-buttons {
.icon {
font-size: 18px;
}
tr:hover .table-buttons {
opacity: 1;
}
</style>

21
src/routes/(app)/config/chords/ChordEditActions.svelte Normal file
View File

@@ -0,0 +1,21 @@
<div class="table-buttons">
{#if !chord.deleted}
<button transition:slide class="icon compact" onclick={remove}
>delete</button
>
{:else}
<button transition:slide class="icon compact" onclick={restore}
>restore_from_trash</button
>
{/if}
<button disabled={chord.deleted} class="icon compact" onclick={duplicate}
>content_copy</button
>
<button
class="icon compact"
class:disabled={chord.isApplied}
onclick={restore}>undo</button
>
<div class="separator"></div>
<button class="icon compact" onclick={share}>share</button>
</div>