[ui] respect editable in AudioViewer; add `disable` props to input/selector

feat/vaults
Tomáš Mládek 2022-03-10 20:35:29 +01:00
parent 20b7270197
commit 89332de506
No known key found for this signature in database
GPG Key ID: 65E225C8B3E2ED8A
5 changed files with 24 additions and 8 deletions

View File

@ -102,5 +102,10 @@
input { input {
display: none; display: none;
} }
&.disabled {
pointer-events: none;
opacity: 0.7;
}
} }
</style> </style>

View File

@ -44,7 +44,7 @@
</div> </div>
{/if} {/if}
{#if audio} {#if audio}
<AudioViewer {address} {detail} /> <AudioViewer {address} {detail} {editable} />
{/if} {/if}
{#if video} {#if video}
{#if imageLoaded != address} {#if imageLoaded != address}

View File

@ -16,6 +16,7 @@
export let address: string; export let address: string;
export let detail: boolean; export let detail: boolean;
export let editable: boolean;
let containerEl: HTMLDivElement; let containerEl: HTMLDivElement;
let timelineEl: HTMLDivElement; let timelineEl: HTMLDivElement;
@ -95,7 +96,7 @@
} }
$: if (wavesurfer) { $: if (wavesurfer) {
if (detail) { if (editable) {
wavesurfer.enableDragSelection({ color: DEFAULT_ANNOTATION_COLOR }); wavesurfer.enableDragSelection({ color: DEFAULT_ANNOTATION_COLOR });
} else { } else {
wavesurfer.disableDragSelection(); wavesurfer.disableDragSelection();
@ -232,6 +233,7 @@
Start: <input Start: <input
type="number" type="number"
value={Math.round(currentAnnotation.start * 100) / 100} value={Math.round(currentAnnotation.start * 100) / 100}
disabled={!editable}
on:input={(ev) => { on:input={(ev) => {
currentAnnotation.update({ currentAnnotation.update({
start: parseInt(ev.currentTarget.value), start: parseInt(ev.currentTarget.value),
@ -244,6 +246,7 @@
End: <input End: <input
type="number" type="number"
value={Math.round(currentAnnotation.end * 100) / 100} value={Math.round(currentAnnotation.end * 100) / 100}
disabled={!editable}
on:input={(ev) => { on:input={(ev) => {
currentAnnotation.update({ currentAnnotation.update({
end: parseInt(ev.currentTarget.value), end: parseInt(ev.currentTarget.value),
@ -256,6 +259,7 @@
Color: <input Color: <input
type="color" type="color"
value={currentAnnotation.color || DEFAULT_ANNOTATION_COLOR} value={currentAnnotation.color || DEFAULT_ANNOTATION_COLOR}
disabled={!editable}
on:input={(ev) => { on:input={(ev) => {
currentAnnotation.update({ color: ev.currentTarget.value }); currentAnnotation.update({ color: ev.currentTarget.value });
updateAnnotation(currentAnnotation); updateAnnotation(currentAnnotation);
@ -263,14 +267,16 @@
/> />
</div> </div>
</div> </div>
<div class="existControls"> {#if editable}
<div class="button" on:click={() => currentAnnotation.remove()}> <div class="existControls">
<Icon name="trash" /> <div class="button" on:click={() => currentAnnotation.remove()}>
</div> <Icon name="trash" />
<!-- <div class="button"> </div>
<!-- <div class="button">
<Icon name="check" /> <Icon name="check" />
</div> --> </div> -->
</div> </div>
{/if}
</div> </div>
<div class="content"> <div class="content">
{#key currentAnnotation} {#key currentAnnotation}
@ -278,6 +284,7 @@
type="value" type="value"
valueTypes={["String"]} valueTypes={["String"]}
value={currentAnnotation.data} value={currentAnnotation.data}
disabled={!editable}
on:input={(ev) => { on:input={(ev) => {
currentAnnotation.update({ data: ev.detail }); currentAnnotation.update({ data: ev.detail });
updateAnnotation(currentAnnotation); updateAnnotation(currentAnnotation);

View File

@ -5,6 +5,7 @@
export let placeholder = ""; export let placeholder = "";
export let value = ""; export let value = "";
export let disabled = false;
let focused = false; let focused = false;
$: dispatch("focusChange", focused); $: dispatch("focusChange", focused);
@ -22,6 +23,7 @@
on:input={onInput} on:input={onInput}
on:focus={() => (focused = true)} on:focus={() => (focused = true)}
on:blur={() => (focused = false)} on:blur={() => (focused = false)}
{disabled}
/> />
</div> </div>

View File

@ -18,6 +18,7 @@
export let type: "attribute" | "value"; export let type: "attribute" | "value";
export let valueTypes: VALUE_TYPE[] | undefined = undefined; export let valueTypes: VALUE_TYPE[] | undefined = undefined;
export let placeholder = ""; export let placeholder = "";
export let disabled = false;
let inputValue = ""; let inputValue = "";
if (type == "attribute") { if (type == "attribute") {
@ -194,6 +195,7 @@
bind:value={inputValue} bind:value={inputValue}
on:input={onInput} on:input={onInput}
on:focusChange={(ev) => (inputFocused = ev.detail)} on:focusChange={(ev) => (inputFocused = ev.detail)}
{disabled}
{placeholder} {placeholder}
/> />
{/if} {/if}