chiu
/
filebrowser
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases 1 Wiki Activity

updated styling

This commit is contained in:
Graham Steffaniak 2023-07-22 23:12:26 -05:00
parent e8739b5dd1
commit 421b1c9ef6
9 changed files with 98 additions and 176 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
frontend/public/themes/dark.css
View File

@ -28,6 +28,13 @@ header {
background: var(--surfacePrimary);
}
@supports (backdrop-filter: none) {
header {
background: transparent;
backdrop-filter: blur(16px) invert(0.1);
}
}
#search #input {
background: var(--surfaceSecondary);
border-color: var(--surfacePrimary);
@ -185,6 +192,9 @@ table th {
#editor-container .bar {
background: var(--surfacePrimary);
}
nav {
background: var(--surfaceSecondary) !important;
}
@media (max-width: 736px) {
#file-selection {
@ -193,9 +203,6 @@ table th {
#file-selection span {
color: var(--textPrimary) !important;
}
nav {
background: var(--surfaceSecondary) !important;
}
#dropdown {
background: var(--surfaceSecondary) !important;
}

29
frontend/src/components/Sidebar.vue
View File

@ -1,6 +1,35 @@
<template>
<nav :class="{ active }">
<template v-if="isLogged">
<!--
i want this here eventually
<action
v-if="headerButtons.download"
icon="file_download"
:label="$t('buttons.download')"
@action="download"
:counter="selectedCount"
/>
<action
v-if="headerButtons.upload"
icon="file_upload"
id="upload-button"
:label="$t('buttons.upload')"
@action="upload"
/>
<action
v-if="headerButtons.shell"
icon="code"
:label="$t('buttons.shell')"
@action="$store.commit('toggleShell')"
/>
<action
:icon="viewIcon"
:label="$t('buttons.switchView')"
@action="switchView"
/>
-->
<button
class="action"
@click="toRoot"

24
frontend/src/components/header/HeaderBar.vue
View File

@ -1,12 +1,10 @@
<template>
<header>
<img v-if="showLogo !== undefined" :src="logoURL" />
<action
v-if="showMenu !== undefined"
class="menu-button"
icon="menu"
:label="$t('buttons.toggleSidebar')"
@action="openSidebar()"
@action="toggleSidebar()"
/>
<slot />
@ -15,25 +13,11 @@
<slot name="actions" />
</div>
<action
v-if="this.$slots.actions"
id="more"
icon="more_vert"
:label="$t('buttons.more')"
@action="$store.commit('showHover', 'more')"
/>
<div
class="overlay"
v-show="this.$store.state.show == 'more'"
@click="$store.commit('closeHovers')"
/>
</header>
</template>
<script>
import { logoURL } from "@/utils/constants";
import Action from "@/components/header/Action";
export default {
@ -48,8 +32,12 @@ export default {
};
},
methods: {
openSidebar() {
toggleSidebar() {
if ( this.$store.state.show == "sidebar" ) {
this.$store.commit("closeHovers");
} else {
this.$store.commit("showHover", "sidebar");
}
},
},
};

6
frontend/src/components/prompts/Prompts.vue
View File

@ -1,7 +1,6 @@
<template>
<div>
<component ref="currentComponent" :is="currentComponent"></component>
<div v-show="showOverlay" @click="resetPrompts" class="overlay"></div>
</div>
</template>
@ -104,11 +103,6 @@ export default {
return (matched && this.show) || null;
},
showOverlay: function () {
return (
this.show !== null && this.show !== "search" && this.show !== "more"
);
},
},
methods: {
resetPrompts() {

25
frontend/src/css/base.css
View File

@ -77,7 +77,28 @@ nav .action {
overflow: hidden;
text-overflow: ellipsis;
}
nav {
z-index: 99999;
background: #fff;
height: 100%;
width: 16em;
box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
transition: .1s ease left;
left: -17em;
}
body.rtl nav {
left: unset;
right: -17em;
}
nav.active {
left: 0;
}
body.rtl nav.active {
left: unset;
right: 0;
}
body.rtl .action {
direction: rtl;
text-align: right;
@ -92,9 +113,7 @@ nav .action > * {
}
main {
min-height: 1em;
margin: 0 1em 1em auto;
width: calc(100% - 19em);
margin: 1em;
}
.breadcrumbs {

11
frontend/src/css/dashboard.css
View File

@ -311,17 +311,6 @@ body.rtl .card .card-title>*:first-child {
flex: 1;
}
.overlay {
background-color: rgba(0, 0, 0, 0.5);
position: fixed;
top: 0;
left: 0;
height: 100%;
width: 100%;
z-index: 9999;
animation: .1s show forwards;
}
/* * * * * * * * * * * * * * * *
* PROMPT - MOVE *

32
frontend/src/css/header.css
View File

@ -3,17 +3,23 @@ header {
border-bottom: 1px solid rgba(0, 0, 0, 0.075);
box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
position: fixed;
justify-content: space-between;
top: 0;
left: 0;
height: 4em;
width: 100%;
padding: 0;
display: flex;
padding: 0.5em 0.5em 0.5em 1em;
padding: 0.5em;
align-items: center;
backdrop-filter: blur(6px);
background-color: white;
}
@supports (backdrop-filter: none) {
header {
background-color: transparent;
backdrop-filter: blur(16px) invert(0.1);
}
}
header > * {
flex: 0 0 auto;
}
@ -27,11 +33,6 @@ header title {
font-size: 1.2em;
}
header .overlay {
width: 0;
height: 0;
}
header a,
header a:hover {
color: inherit;
@ -55,20 +56,17 @@ header>div div {
position: relative;
}
header .search-button,
header .menu-button {
display: none;
}
#more {
display: none;
}
#search {
position: relative;
height: 100%;
width: 100%;
max-width: 25em;
position: absolute;
height: 3em;
width: 50%;
max-width: 50em;
left: 50%;
transform: translate(-50%,0%);
}
#search.active {

81
frontend/src/css/mobile.css
View File

@ -1,19 +1,10 @@
@media (max-width: 1024px) {
nav {
width: 10em
}
/* Mobile Only fix div hidden by bottom navigation bar of mobile browser when using height: 100vh */
#previewer .preview {
height: calc(100% - 4em) !important;
}
}
@media (max-width: 1024px) {
main {
width: calc(100% - 13em)
}
}
@media (max-width: 736px) {
body {
padding-bottom: 5em;
@ -27,23 +18,6 @@
#more {
display: inherit
}
header .overlay {
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.1);
}
#dropdown {
position: fixed;
top: 1em;
right: 1em;
display: block;
background-color: #fff;
box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
transform: scale(0);
transition: .1s ease-in-out transform;
transform-origin: top right;
z-index: 99999;
}
body.rtl #dropdown {
right: unset;
@ -51,25 +25,6 @@
transform-origin: top left;
}
#dropdown > div {
display: block;
}
#dropdown.active {
transform: scale(1);
}
#dropdown .action {
display: flex;
align-items: center;
border-radius: 0;
width: 100%;
}
#dropdown .action span:not(.counter) {
display: inline-block;
padding: .4em;
}
#dropdown .counter {
left: 2.25em;
}
#file-selection {
position: fixed;
bottom: 1em;
@ -96,34 +51,7 @@
#file-selection .action span {
display: none;
}
nav {
top: 0;
z-index: 99999;
background: #fff;
height: 100%;
width: 16em;
box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
transition: .1s ease left;
left: -17em;
}
body.rtl nav {
left: unset;
right: -17em;
}
nav.active {
left: 0;
}
body.rtl nav.active {
left: unset;
right: 0;
}
header .search-button,
header .menu-button {
display: inherit;
}
header img {
display: none;
}
@ -142,18 +70,9 @@
body.rtl #nav .wrapper {
margin-right: unset;
}
body.rtl .dashboard .row {
margin-right: unset;
}
main {
margin: 0 1em;
width: calc(100% - 2em);
}
#search {
display: none;
}
#search.active {
display: block;
}

49
frontend/src/views/files/Listing.vue
View File

@ -1,16 +1,9 @@
<template>
<div>
<header-bar showMenu showLogo>
<search /> <title />
<action
class="search-button"
icon="search"
:label="$t('buttons.search')"
@action="openSearch()"
/>
<search />
<template #actions>
<template v-if="!isMobile">
<template >
<action
v-if="headerButtons.share"
icon="share"
@ -44,39 +37,23 @@
:label="$t('buttons.delete')"
show="delete"
/>
</template>
<action
v-if="headerButtons.shell"
icon="code"
:label="$t('buttons.shell')"
@action="$store.commit('toggleShell')"
v-if="headerButtons.info"
icon="info"
:label="$t('buttons.info')"
show="info" />
<action
v-if="headerButtons.select"
icon="check_circle"
:label="$t('buttons.selectMultiple')"
@action="toggleMultipleSelection"
/>
</template>
<action
:icon="viewIcon"
:label="$t('buttons.switchView')"
@action="switchView"
/>
<action
v-if="headerButtons.download"
icon="file_download"
:label="$t('buttons.download')"
@action="download"
:counter="selectedCount"
/>
<action
v-if="headerButtons.upload"
icon="file_upload"
id="upload-button"
:label="$t('buttons.upload')"
@action="upload"
/>
<action icon="info" :label="$t('buttons.info')" show="info" />
<action
icon="check_circle"
:label="$t('buttons.selectMultiple')"
@action="toggleMultipleSelection"
/>
</template>
</header-bar>
@ -374,6 +351,8 @@ export default {
},
headerButtons() {
return {
info: this.selectedCount > 0,
select: this.selectedCount > 0,
upload: this.user.perm.create,
download: this.user.perm.download,
shell: this.user.perm.execute && enableExec,