Split filesystem up in components
Also thumbnails work now
This commit is contained in:
@@ -1,52 +1,31 @@
|
||||
<script>
|
||||
import { onMount } from 'svelte';
|
||||
import { formatDate, formatDataVolume, formatThousands } from '../util/Formatting.svelte'
|
||||
import { fs_get_file_url, fs_get_node, fs_split_path } from './FilesystemAPI.js'
|
||||
import Sharebar from './Sharebar.svelte'
|
||||
import Modal from '../util/Modal.svelte'
|
||||
import FileManager from './filemanager/FileManager.svelte';
|
||||
import Audio from './viewers/Audio.svelte';
|
||||
import Image from './viewers/Image.svelte';
|
||||
import Video from './viewers/Video.svelte';
|
||||
import PDF from './viewers/PDF.svelte';
|
||||
import PixeldrainLogo from '../util/PixeldrainLogo.svelte';
|
||||
import LoadingIndicator from '../util/LoadingIndicator.svelte';
|
||||
import EditWindow from './filemanager/EditWindow.svelte';
|
||||
import EditWindow from './EditWindow.svelte';
|
||||
import { fs_file_url } from './FilesystemUtil';
|
||||
import Toolbar from './Toolbar.svelte';
|
||||
import Breadcrumbs from './Breadcrumbs.svelte';
|
||||
import DetailsWindow from './DetailsWindow.svelte';
|
||||
import Navigator from './Navigator.svelte';
|
||||
import FilePreview from './viewers/FilePreview.svelte';
|
||||
|
||||
let toolbar_visible = (window.innerWidth > 600)
|
||||
let toolbar_toggle = () => {
|
||||
toolbar_visible = !toolbar_visible
|
||||
if (!toolbar_visible) {
|
||||
sharebar_visible = false
|
||||
}
|
||||
}
|
||||
|
||||
let sharebar
|
||||
let sharebar_visible = false
|
||||
$: {
|
||||
if (typeof(sharebar) !== "undefined") {
|
||||
sharebar.setVisible(sharebar_visible)
|
||||
}
|
||||
}
|
||||
|
||||
let details
|
||||
let download_frame
|
||||
let details_visible = false
|
||||
let edit_window
|
||||
let download_frame
|
||||
let edit_visible = false
|
||||
|
||||
// State
|
||||
let navigator
|
||||
let state = {
|
||||
path: window.initial_node.path,
|
||||
base: window.initial_node.path[window.initial_node.base_index],
|
||||
base_index: window.initial_node.base_index,
|
||||
root: window.initial_node.path[0],
|
||||
children: window.initial_node.children,
|
||||
permissions: {
|
||||
create: window.initial_node.permissions.create,
|
||||
read: window.initial_node.permissions.read,
|
||||
update: window.initial_node.permissions.update,
|
||||
delete: window.initial_node.permissions.delete,
|
||||
},
|
||||
permissions: window.initial_node.permissions,
|
||||
|
||||
// Shortcuts
|
||||
base: window.initial_node.path[window.initial_node.base_index],
|
||||
root: window.initial_node.path[0],
|
||||
|
||||
// Passwords for accessing this bucket. Passwords are not always required
|
||||
// but sometimes they are
|
||||
@@ -70,194 +49,7 @@ let state = {
|
||||
shuffle: false,
|
||||
}
|
||||
|
||||
// Tallys
|
||||
$: total_directories = state.children.reduce((acc, cur) => cur.type === "dir" ? acc + 1 : acc, 0)
|
||||
$: total_files = state.children.reduce((acc, cur) => cur.type === "file" ? acc + 1 : acc, 0)
|
||||
$: total_file_size = state.children.reduce((acc, cur) => acc + cur.file_size, 0)
|
||||
|
||||
const sort_children = children => {
|
||||
children.sort((a, b) => {
|
||||
// Sort directories before files
|
||||
if (a.type !== b.type) {
|
||||
return a.type === "dir" ? -1 : 1
|
||||
}
|
||||
return a.name.localeCompare(b.name)
|
||||
})
|
||||
}
|
||||
|
||||
const navigate = async (path, push_history) => {
|
||||
state.loading = true
|
||||
console.debug("Navigating to path", path, push_history)
|
||||
|
||||
try {
|
||||
let resp = await fs_get_node(state.root.id, path)
|
||||
open_node(resp, push_history)
|
||||
} catch (err) {
|
||||
let errj = JSON.parse(err)
|
||||
|
||||
if (errj.value === "path_not_found") {
|
||||
if (path !== "/" && path !== "") {
|
||||
console.debug("Path", path, "was not found, trying to navigate to parent")
|
||||
navigate(fs_split_path(path).parent, push_history)
|
||||
}
|
||||
} else {
|
||||
console.error(err)
|
||||
alert("Error: "+err)
|
||||
}
|
||||
} finally {
|
||||
state.loading = false
|
||||
}
|
||||
}
|
||||
const reload = () => { navigate(state.base.path, false) }
|
||||
|
||||
const open_node = (node, push_history) => {
|
||||
// We need to properly URL encode the file paths so they don't cause
|
||||
// issues.. but we also want the slashes to stay clean. So here we encode
|
||||
// the whole path, then decode the slashes
|
||||
let cleanup_func = p => p.path_uri = encodeURIComponent(p.path).replaceAll("%2F", "/")
|
||||
node.path.forEach(cleanup_func)
|
||||
node.children.forEach(cleanup_func)
|
||||
|
||||
// Update window title and navigation history
|
||||
window.document.title = node.path[node.base_index].name+" ~ pixeldrain"
|
||||
if (push_history) {
|
||||
window.history.pushState(
|
||||
{}, window.document.title,
|
||||
"/d/"+node.path[0].id+node.path[node.base_index].path,
|
||||
)
|
||||
}
|
||||
|
||||
// If the new node is a child of the previous node we save the parent's
|
||||
// children array
|
||||
if (node.path.length > 0 && node.path[node.path.length-1].path === state.base.path) {
|
||||
console.debug("Current parent path and new node path match. Saving siblings")
|
||||
|
||||
state.siblings_path = node.path[node.path.length-1].path
|
||||
state.siblings = state.children
|
||||
}
|
||||
|
||||
// Sort directory children
|
||||
sort_children(node.children)
|
||||
|
||||
// Update shared state
|
||||
state.path = node.path
|
||||
state.base = node.path[node.base_index]
|
||||
state.base_index = node.base_index
|
||||
state.root = node.path[0]
|
||||
state.children = node.children
|
||||
state.permissions = node.permissions
|
||||
|
||||
// Update the viewer area with the right viewer type
|
||||
if (state.base.type === "bucket" || state.base.type === "dir") {
|
||||
state.viewer_type = "dir"
|
||||
} else if (state.base.file_type.startsWith("image")) {
|
||||
state.viewer_type = "image"
|
||||
} else if (
|
||||
state.base.file_type.startsWith("audio") ||
|
||||
state.base.file_type === "application/ogg" ||
|
||||
state.base.name.endsWith(".mp3")
|
||||
) {
|
||||
state.viewer_type = "audio"
|
||||
} else if (
|
||||
state.base.file_type.startsWith("video") ||
|
||||
state.base.file_type === "application/matroska" ||
|
||||
state.base.file_type === "application/x-matroska"
|
||||
) {
|
||||
state.viewer_type = "video"
|
||||
} else if (
|
||||
state.base.file_type === "application/pdf" ||
|
||||
state.base.file_type === "application/x-pdf"
|
||||
) {
|
||||
state.viewer_type = "pdf"
|
||||
} else {
|
||||
state.viewer_type = ""
|
||||
}
|
||||
|
||||
console.debug("Opened node", node)
|
||||
|
||||
// Remove spinner
|
||||
state.loading = false
|
||||
}
|
||||
|
||||
onMount(() => open_node(window.initial_node, false))
|
||||
|
||||
// Opens a sibling of the currently open file. The offset is relative to the
|
||||
// file which is currently open. Give a positive number to move forward and a
|
||||
// negative number to move backward
|
||||
const open_sibling = async offset => {
|
||||
if (state.path.length <= 1) {
|
||||
return
|
||||
}
|
||||
|
||||
state.loading = true
|
||||
|
||||
// Check if we already have siblings cached
|
||||
if (state.siblings != null && state.siblings_path == state.path[state.path.length - 2].path) {
|
||||
console.debug("Using cached siblings")
|
||||
} else {
|
||||
console.debug("Cached siblings not available. Fetching new")
|
||||
try {
|
||||
let resp = await fs_get_node(state.root.id, state.path[state.path.length - 2].path)
|
||||
|
||||
// Sort directory children to make sure the order is consistent
|
||||
sort_children(resp.children)
|
||||
|
||||
// Save new siblings in global state
|
||||
state.siblings_path = state.path[state.path.length - 2].path
|
||||
state.siblings = resp.children
|
||||
} catch (err) {
|
||||
console.error(err)
|
||||
alert(err)
|
||||
state.loading = false
|
||||
return
|
||||
}
|
||||
}
|
||||
|
||||
let next_sibling = null
|
||||
|
||||
if (state.shuffle) {
|
||||
// Shuffle is on, pick a random sibling
|
||||
for (let i = 0; i < 10; i++) {
|
||||
next_sibling = state.siblings[Math.floor(Math.random()*state.siblings.length)]
|
||||
|
||||
// If we selected the same sibling we already have open we try
|
||||
// again. Else we break the loop
|
||||
if (next_sibling.name !== state.base.name) {
|
||||
break
|
||||
}
|
||||
}
|
||||
} else {
|
||||
// Loop over the parent node's children to find the one which is
|
||||
// currently open. Then, if possible, we save the one which comes before
|
||||
// or after it
|
||||
for (let i = 0; i < state.siblings.length; i++) {
|
||||
if (
|
||||
state.siblings[i].name === state.base.name &&
|
||||
i+offset >= 0 && // Prevent underflow
|
||||
i+offset < state.siblings.length // Prevent overflow
|
||||
) {
|
||||
next_sibling = state.siblings[i+offset]
|
||||
break
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// If we found a sibling we open it
|
||||
if (next_sibling !== null) {
|
||||
console.debug("Opening sibling", next_sibling)
|
||||
navigate(next_sibling.path, true)
|
||||
} else {
|
||||
console.debug("No siblings found")
|
||||
state.loading = false
|
||||
}
|
||||
}
|
||||
|
||||
// Capture browser back and forward navigation buttons
|
||||
window.onpopstate = (e) => {
|
||||
// Get the part of the URL after the bucket ID and navigate to it
|
||||
let path = document.location.pathname.replace("/d/"+state.root.id, "")
|
||||
navigate(decodeURIComponent(path), false)
|
||||
};
|
||||
onMount(() => navigator.open_node(window.initial_node, false))
|
||||
|
||||
const keydown = e => {
|
||||
if (e.ctrlKey || e.altKey || e.metaKey) {
|
||||
@@ -268,11 +60,15 @@ const keydown = e => {
|
||||
}
|
||||
|
||||
switch (e.key) {
|
||||
case "Escape":
|
||||
hide();
|
||||
break;
|
||||
case "i":
|
||||
details.toggle()
|
||||
details_visible = !details_visible
|
||||
break;
|
||||
case "e":
|
||||
if (edit_visible) {
|
||||
edit_visible = false
|
||||
} else {
|
||||
edit_window.edit(state.base)
|
||||
}
|
||||
break;
|
||||
case "s":
|
||||
download()
|
||||
@@ -280,150 +76,83 @@ const keydown = e => {
|
||||
case "r":
|
||||
state.shuffle = !state.shuffle
|
||||
break;
|
||||
case "a", "ArrowLeft":
|
||||
open_sibling(-1)
|
||||
case "a":
|
||||
case "ArrowLeft":
|
||||
navigator.open_sibling(-1)
|
||||
break;
|
||||
case "d", "ArrowRight":
|
||||
open_sibling(1)
|
||||
case "d":
|
||||
case "ArrowRight":
|
||||
navigator.open_sibling(1)
|
||||
break;
|
||||
}
|
||||
};
|
||||
|
||||
const download = () => {
|
||||
download_frame.src = fs_get_file_url(state.root.id, state.base.path) + "?attach"
|
||||
download_frame.src = fs_file_url(state.root.id, state.base.path) + "?attach"
|
||||
}
|
||||
const share = () => {
|
||||
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
<svelte:window on:keydown={keydown} />
|
||||
|
||||
<LoadingIndicator loading={state.loading}/>
|
||||
|
||||
<Navigator bind:this={navigator} bind:state/>
|
||||
|
||||
<div class="file_viewer">
|
||||
<div class="file_viewer_headerbar">
|
||||
<button on:click={toolbar_toggle} class="button_toggle_toolbar round" class:button_highlight={toolbar_visible}>
|
||||
<div class="headerbar">
|
||||
<button
|
||||
on:click={() => toolbar_visible = !toolbar_visible}
|
||||
class="button_toggle_toolbar round"
|
||||
class:button_highlight={toolbar_visible}
|
||||
>
|
||||
<i class="icon">menu</i>
|
||||
</button>
|
||||
<a href="/" id="button_home" class="button button_home round">
|
||||
<PixeldrainLogo style="height: 1.6em; width: 1.6em; margin: 0 0.2em 0 0; color: currentColor;"></PixeldrainLogo>
|
||||
<PixeldrainLogo style="height: 1.6em; width: 1.6em; margin: 0 0.2em 0 0; color: currentColor;"/>
|
||||
</a>
|
||||
<div class="file_viewer_headerbar_title">
|
||||
{#each state.path as node, i}
|
||||
<a
|
||||
href={state.path_root+node.path}
|
||||
class="breadcrumb button"
|
||||
class:button_highlight={state.base_index === i}
|
||||
on:click|preventDefault={() => {navigate(node.path, true)}}>
|
||||
{node.name}
|
||||
</a>
|
||||
{/each}
|
||||
<div class="breadcrumbs">
|
||||
<Breadcrumbs state={state} navigator={navigator}/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="list_navigator"></div>
|
||||
<div class="file_viewer_window">
|
||||
<div class="toolbar" class:toolbar_visible>
|
||||
{#if state.base.type === "file"}
|
||||
<div class="toolbar_label">Size</div>
|
||||
<div class="toolbar_statistic">{formatDataVolume(state.base.file_size, 3)}</div>
|
||||
{:else if state.base.type === "dir" || state.base.type === "bucket"}
|
||||
<div class="toolbar_label">Directories</div>
|
||||
<div class="toolbar_statistic">{formatThousands(total_directories, 3)}</div>
|
||||
<div class="toolbar_label">Files</div>
|
||||
<div class="toolbar_statistic">{formatThousands(total_files, 3)}</div>
|
||||
<div class="toolbar_label">Total size</div>
|
||||
<div class="toolbar_statistic">{formatDataVolume(total_file_size, 3)}</div>
|
||||
{/if}
|
||||
|
||||
<div class="separator"></div>
|
||||
<div class="file_preview">
|
||||
<Toolbar
|
||||
visible={toolbar_visible}
|
||||
navigator={navigator}
|
||||
state={state}
|
||||
bind:details_visible={details_visible}
|
||||
edit_window={edit_window}
|
||||
bind:edit_visible={edit_visible}
|
||||
on:download={download}
|
||||
/>
|
||||
|
||||
<div class="button_row">
|
||||
<button on:click={() => {open_sibling(-1)}}>
|
||||
<i class="icon">skip_previous</i>
|
||||
</button>
|
||||
<button on:click={() => {state.shuffle = !state.shuffle}} class:button_highlight={state.shuffle}>
|
||||
<i class="icon">shuffle</i>
|
||||
</button>
|
||||
<button on:click={() => {open_sibling(1)}}>
|
||||
<i class="icon">skip_next</i>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{#if state.base.type === "file"}
|
||||
<button on:click={download} class="toolbar_button">
|
||||
<i class="icon">save</i> Download
|
||||
</button>
|
||||
{/if}
|
||||
<button id="btn_download_list" class="toolbar_button" style="display: none;">
|
||||
<i class="icon">save</i> DL all files
|
||||
</button>
|
||||
<button id="btn_copy" class="toolbar_button">
|
||||
<i class="icon">content_copy</i> <u>C</u>opy Link
|
||||
</button>
|
||||
<button on:click={() => sharebar_visible = !sharebar_visible} class="toolbar_button" class:button_highlight={sharebar_visible}>
|
||||
<i class="icon">share</i> Share
|
||||
</button>
|
||||
<button on:click={details.toggle} class="toolbar_button" class:button_highlight={details_visible}>
|
||||
<i class="icon">help</i> Deta<u>i</u>ls
|
||||
</button>
|
||||
{#if state.base.path !== "/"}
|
||||
<button on:click={() => edit_window.edit(state.base)} class="toolbar_button">
|
||||
<i class="icon">edit</i> <u>E</u>dit
|
||||
</button>
|
||||
{/if}
|
||||
</div>
|
||||
<Sharebar bind:this={sharebar}></Sharebar>
|
||||
|
||||
<div class="file_viewer_file_preview checkers" class:toolbar_visible>
|
||||
{#if state.viewer_type === "dir"}
|
||||
<FileManager state={state} on:navigate={e => {navigate(e.detail, true)}} on:loading={e => {state.loading = e.detail}}></FileManager>
|
||||
{:else if state.viewer_type === "audio"}
|
||||
<Audio state={state} on:open_sibling={e => {open_sibling(e.detail)}}></Audio>
|
||||
{:else if state.viewer_type === "image"}
|
||||
<Image state={state} on:open_sibling={e => {open_sibling(e.detail)}}></Image>
|
||||
{:else if state.viewer_type === "video"}
|
||||
<Video state={state} on:open_sibling={e => {open_sibling(e.detail)}}></Video>
|
||||
{:else if state.viewer_type === "pdf"}
|
||||
<PDF state={state}></PDF>
|
||||
{/if}
|
||||
</div>
|
||||
<FilePreview
|
||||
navigator={navigator}
|
||||
state={state}
|
||||
toolbar_visible={toolbar_visible}
|
||||
edit_window={edit_window}
|
||||
on:loading={e => {state.loading = e.detail}}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<!-- This frame will load the download URL when a download button is pressed -->
|
||||
<iframe bind:this={download_frame} title="Frame for downloading files" style="display: none; width: 1px; height: 1px;"></iframe>
|
||||
<iframe
|
||||
bind:this={download_frame}
|
||||
title="Frame for downloading files"
|
||||
style="display: none; width: 1px; height: 1px;">
|
||||
</iframe>
|
||||
|
||||
<Modal bind:this={details} title="Details" width="800px" role="prompt">
|
||||
<table style="min-width: 100%;">
|
||||
<tr><td colspan="2"><h3>Node details</h3></td></tr>
|
||||
<tr><td>Name</td><td>{state.base.name}</td></tr>
|
||||
<tr><td>Path</td><td>{state.base.path}</td></tr>
|
||||
<tr><td>Type</td><td>{state.base.type}</td></tr>
|
||||
<tr><td>Date created</td><td>{formatDate(state.base.date_created, true, true, true)}</td></tr>
|
||||
<tr><td>Date modified</td><td>{formatDate(state.base.date_modified, true, true, true)}</td></tr>
|
||||
<tr><td>Mode</td><td>{state.base.mode_string}</td></tr>
|
||||
{#if state.base.id}
|
||||
<tr>
|
||||
<td>Public ID</td>
|
||||
<td><a href="/d/{state.base.id}">{state.base.id}</a></td>
|
||||
</tr>
|
||||
{/if}
|
||||
{#if state.base.type === "file"}
|
||||
<tr><td>File type</td><td>{state.base.file_type}</td></tr>
|
||||
<tr><td>File size</td><td>{formatDataVolume(state.base.file_size)}</td></tr>
|
||||
<tr><td>SHA256 sum</td><td>{state.base.sha256_sum}</td></tr>
|
||||
{/if}
|
||||
<DetailsWindow
|
||||
state={state}
|
||||
bind:visible={details_visible}
|
||||
/>
|
||||
|
||||
<tr><td colspan="2"><h3>Bucket details</h3></td></tr>
|
||||
<tr><td>ID</td><td>{state.root.id}</td></tr>
|
||||
<tr><td>Name</td><td>{state.root.name}</td></tr>
|
||||
<tr><td>Date created</td><td>{formatDate(state.root.date_created, true, true, true)}</td></tr>
|
||||
<tr><td>Date modified</td><td>{formatDate(state.root.date_modified, true, true, true)}</td></tr>
|
||||
</table>
|
||||
</Modal>
|
||||
|
||||
<EditWindow bind:this={edit_window} bucket={state.root.id} on:reload={() => reload()}/>
|
||||
<EditWindow
|
||||
bind:this={edit_window}
|
||||
bind:visible={edit_visible}
|
||||
bucket={state.root.id}
|
||||
on:navigate={e => navigator.navigate(e.path, e.push_history)}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
@@ -441,7 +170,7 @@ const share = () => {
|
||||
}
|
||||
|
||||
/* Headerbar (row 1) */
|
||||
.file_viewer > .file_viewer_headerbar {
|
||||
.headerbar {
|
||||
flex-grow: 0;
|
||||
flex-shrink: 0;
|
||||
display: flex;
|
||||
@@ -453,7 +182,7 @@ const share = () => {
|
||||
}
|
||||
|
||||
/* Headerbar components */
|
||||
.file_viewer > .file_viewer_headerbar > * {
|
||||
.headerbar > * {
|
||||
flex-grow: 0;
|
||||
flex-shrink: 0;
|
||||
margin-left: 4px;
|
||||
@@ -461,10 +190,10 @@ const share = () => {
|
||||
display: inline;
|
||||
align-self: center;
|
||||
}
|
||||
.file_viewer > .file_viewer_headerbar > .button_toggle_toolbar > .icon {
|
||||
.button_toggle_toolbar > .icon {
|
||||
font-size: 1.6em;
|
||||
}
|
||||
.file_viewer > .file_viewer_headerbar > .file_viewer_headerbar_title {
|
||||
.breadcrumbs {
|
||||
flex-grow: 1;
|
||||
flex-shrink: 1;
|
||||
display: flex;
|
||||
@@ -473,14 +202,6 @@ const share = () => {
|
||||
flex-wrap: wrap;
|
||||
flex-direction: row;
|
||||
}
|
||||
.breadcrumb {
|
||||
min-width: 1em;
|
||||
text-align: center;
|
||||
padding: 6px 8px;
|
||||
margin: 4px;
|
||||
word-break: break-all;
|
||||
}
|
||||
|
||||
.button_home::after {
|
||||
content: "pixeldrain";
|
||||
}
|
||||
@@ -489,27 +210,8 @@ const share = () => {
|
||||
content: "pd";
|
||||
}
|
||||
}
|
||||
/* List Navigator (row 2) */
|
||||
.file_viewer > .list_navigator {
|
||||
flex-grow: 0;
|
||||
flex-shrink: 0;
|
||||
position: relative;
|
||||
display: none; /* Becomes visible if the page is a list */
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
line-height: 1em;
|
||||
overflow-x: auto;
|
||||
overflow-y: hidden;
|
||||
z-index: 50;
|
||||
white-space: nowrap;
|
||||
}
|
||||
/* .file_viewer > .list_navigator > .list_item{
|
||||
height: 2.6em !important;
|
||||
width: 220px !important;
|
||||
} */
|
||||
|
||||
/* File preview area (row 3) */
|
||||
.file_viewer > .file_viewer_window {
|
||||
/* File preview area (row 2) */
|
||||
.file_preview {
|
||||
flex-grow: 1;
|
||||
flex-shrink: 1;
|
||||
position: relative;
|
||||
@@ -519,66 +221,4 @@ const share = () => {
|
||||
margin: 0;
|
||||
z-index: 9;
|
||||
}
|
||||
.file_viewer > .file_viewer_window > .file_viewer_file_preview {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
display: inline-block;
|
||||
min-height: 100px;
|
||||
min-width: 100px;
|
||||
text-align: center;
|
||||
vertical-align: middle;
|
||||
transition: left 0.5s;
|
||||
overflow: hidden;
|
||||
border-radius: 12px;
|
||||
border: 2px solid var(--separator);
|
||||
}
|
||||
|
||||
/* Toolbar */
|
||||
.toolbar {
|
||||
position: absolute;
|
||||
width: 8em;
|
||||
z-index: 49;
|
||||
overflow: hidden;
|
||||
float: left;
|
||||
left: -8em;
|
||||
bottom: 0;
|
||||
top: 0;
|
||||
padding: 0;
|
||||
text-align: left;
|
||||
transition: left 0.5s;
|
||||
}
|
||||
.toolbar.toolbar_visible { left: 0; }
|
||||
.file_viewer > .file_viewer_window > .file_viewer_file_preview.toolbar_visible { left: 8em; }
|
||||
|
||||
.toolbar > .separator {
|
||||
height: 2px;
|
||||
width: 100%;
|
||||
margin: 4px 0;
|
||||
background-color: var(--separator);
|
||||
}
|
||||
.toolbar_button {
|
||||
text-align: left;
|
||||
width: calc(100% - 6px);
|
||||
}
|
||||
.toolbar_label {
|
||||
text-align: left;
|
||||
padding-left: 10px;
|
||||
font-size: 0.8em;
|
||||
line-height: 0.7em;
|
||||
margin-top: 0.5em;
|
||||
}
|
||||
.toolbar_statistic {
|
||||
text-align: center;
|
||||
}
|
||||
.button_row {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
}
|
||||
.button_row > * {
|
||||
flex: 1 1 auto;
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user