pixeldrain/fnx_web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Update file manager styling

Browse Source
This commit is contained in:
Fornax
2022-11-07 17:10:17 +01:00
parent cd8bf8afe4
commit e43278acdb
3 changed files with 23 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
svelte/src/filesystem/filemanager/CreateDirectory.svelte
View File

@@ -34,8 +34,10 @@ onMount(() => { name_input.focus() })
<style> <style>
.create_dir { .create_dir {
display: flex; display: inline-flex;
flex-direction: row; flex-direction: row;
width: 100%;
max-width: 1000px;
} }
.create_dir > img { .create_dir > img {
height: 32px; height: 32px;

31
svelte/src/filesystem/filemanager/FileManager.svelte
View File

@@ -96,28 +96,36 @@ const toggle_select = () => {
<div class="container"> <div class="container">
<div class="width_container"> <div class="width_container">
<div class="toolbar"> <div class="toolbar">
<button on:click={navigate_up} disabled={state.parents.length === 0}><i class="icon">arrow_back</i></button> <button on:click={navigate_up} disabled={state.parents.length === 0} title="Back">
<button on:click={reload}><i class="icon">refresh</i></button> <i class="icon">arrow_back</i>
</button>
<button on:click={reload} title="Refresh directory listing">
<i class="icon">refresh</i>
</button>
{#if directory_view === "list"} {#if directory_view === "list"}
<button on:click={() => {directory_view = "gallery"}} alt="Switch to gallery view"> <button on:click={() => {directory_view = "gallery"}} title="Switch to gallery view">
<i class="icon">collections</i> <i class="icon">collections</i>
</button> </button>
{:else if directory_view === "gallery"} {:else if directory_view === "gallery"}
<button on:click={() => {directory_view = "list"}} alt="Switch to list view"> <button on:click={() => {directory_view = "list"}} title="Switch to list view">
<i class="icon">list</i> <i class="icon">list</i>
</button> </button>
{/if} {/if}
<div class="toolbar_spacer"></div> <div class="toolbar_spacer"></div>
{#if state.bucket.permissions.update} {#if state.bucket.permissions.update}
<button on:click={uploader.picker}><i class="icon">cloud_upload</i></button> <button on:click={uploader.picker} title="Upload files to this directory">
<button on:click={() => {creating_dir = !creating_dir}} class:button_highlight={creating_dir}> <i class="icon">cloud_upload</i>
</button>
<button on:click={() => {creating_dir = !creating_dir}} class:button_highlight={creating_dir} title="Make folder">
<i class="icon">create_new_folder</i> <i class="icon">create_new_folder</i>
</button> </button>
<button <button
on:click={toggle_select} on:click={toggle_select}
class:button_highlight={mode === "selecting"}> class:button_highlight={mode === "selecting"}
title="Select and delete files"
>
<i class="icon">edit</i> <i class="icon">edit</i>
</button> </button>
{/if} {/if}
@@ -175,21 +183,20 @@ const toggle_select = () => {
.width_container { .width_container {
position: relative; position: relative;
display: block; display: block;
max-width: 95%; width: 100%;
width: 1000px;
margin: auto; margin: auto;
padding: 0; padding: 0;
background: var(--shaded_background);
} }
.toolbar { .toolbar {
position: relative; position: relative;
display: inline-flex; display: inline-flex;
flex-direction: row; flex-direction: row;
width: 100%; width: 100%;
margin: 16px 0 0 0; max-width: 1000px;
margin: 0;
padding: 0; padding: 0;
justify-content: center; justify-content: center;
background: var(--shaded_background);
border-radius: 6px;
} }
.toolbar > * { flex: 0 0 auto; } .toolbar > * { flex: 0 0 auto; }
.toolbar_spacer { flex: 1 1 auto; } .toolbar_spacer { flex: 1 1 auto; }

2
svelte/src/filesystem/filemanager/ListView.svelte
View File

@@ -80,7 +80,7 @@ const node_icon = node => {
border-collapse: collapse; border-collapse: collapse;
border-radius: 8px; border-radius: 8px;
max-width: 95%; max-width: 100%;
width: 1000px; width: 1000px;
} }
.directory > * { .directory > * {