[ui] rudimentary "detail" mode
This commit is contained in:
parent
578a3fdcd8
commit
15c524c07d
1 changed files with 16 additions and 1 deletions
|
@ -11,6 +11,9 @@
|
||||||
export let only: boolean;
|
export let only: boolean;
|
||||||
|
|
||||||
let editable = false;
|
let editable = false;
|
||||||
|
let detail = only;
|
||||||
|
let detailChanged = false;
|
||||||
|
$: if (!detailChanged) detail = only;
|
||||||
|
|
||||||
function visit() {
|
function visit() {
|
||||||
window.open(normUrl(`/browse/${address}`), "_blank");
|
window.open(normUrl(`/browse/${address}`), "_blank");
|
||||||
|
@ -23,13 +26,21 @@
|
||||||
});
|
});
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<div class="view" class:editable>
|
<div class="view" class:editable class:detail>
|
||||||
<header>
|
<header>
|
||||||
<IconButton
|
<IconButton
|
||||||
name="pencil"
|
name="pencil"
|
||||||
on:click={() => (editable = !editable)}
|
on:click={() => (editable = !editable)}
|
||||||
active={editable}
|
active={editable}
|
||||||
/>
|
/>
|
||||||
|
<IconButton
|
||||||
|
name="fullscreen"
|
||||||
|
on:click={() => {
|
||||||
|
detail = !detail;
|
||||||
|
detailChanged = true;
|
||||||
|
}}
|
||||||
|
active={detail}
|
||||||
|
/>
|
||||||
<IconButton name="bookmark" on:click={() => visit()} disabled={only} />
|
<IconButton name="bookmark" on:click={() => visit()} disabled={only} />
|
||||||
<IconButton
|
<IconButton
|
||||||
name="x-circle"
|
name="x-circle"
|
||||||
|
@ -58,6 +69,10 @@
|
||||||
border-style: dashed;
|
border-style: dashed;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
&.detail {
|
||||||
|
max-width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
header {
|
header {
|
||||||
font-size: 20px;
|
font-size: 20px;
|
||||||
position: relative;
|
position: relative;
|
||||||
|
|
Loading…
Reference in a new issue