nexus/vuefilemanager
2
0
Fork 0
mirror of https://github.com/VueFileManager/vuefilemanager.git synced 2026-04-20 17:02:16 +00:00
Code Issues Packages Projects Releases Wiki Activity

custom color theme part 2

Browse Source
This commit is contained in:
Peter Papp
2021-03-22 07:45:38 +01:00
parent cff7cd6b32
commit 4999b23474
39 changed files with 312 additions and 437 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
resources/js/components/FilesView/FileItemGrid.vue
View File

@@ -26,7 +26,7 @@
<img loading="lazy" v-if="isImage && item.thumbnail" class="image" :src="item.thumbnail" :alt="item.name" />
<!--Else show only folder icon-->
<FolderIcon v-if="isFolder" :item="item" location="file-item-grid" class="folder" />
<FolderIcon v-if="isFolder" :item="item" location="file-item-grid" class="folder svg-color-theme" />
</div>
<!--Name-->
@@ -40,12 +40,12 @@
<!--Shared Icon-->
<div v-if="$checkPermission('master') && item.shared" class="item-shared">
<link-icon size="12" class="shared-icon"></link-icon>
<link-icon size="12" class="shared-icon text-theme" />
</div>
<!--Participant owner Icon-->
<div v-if="$checkPermission('master') && item.author !== 'user'" class="item-shared">
<user-plus-icon size="12" class="shared-icon"></user-plus-icon>
<user-plus-icon size="12" class="shared-icon text-theme" />
</div>
<!--Filesize-->

71
resources/js/components/FilesView/Option.vue
View File

@@ -1,20 +1,23 @@
<template>
<li class="menu-option" :class="[icon === 'trash' ? 'danger' : '']">
<div class="icon">
<trash-2-icon v-if="icon === 'trash'" size="17"></trash-2-icon>
<life-buoy-icon v-if="icon === 'restore'" size="17"></life-buoy-icon>
<trash-icon v-if="icon === 'empty-trash'" size="17"></trash-icon>
<eye-icon v-if="icon ==='detail'" size="17"></eye-icon>
<download-cloud-icon v-if="icon === 'download'" size="17"></download-cloud-icon>
<edit2-icon v-if="icon === 'rename'" size="17"></edit2-icon>
<corner-down-right-icon v-if="icon === 'move-item'" size="17"></corner-down-right-icon>
<link-icon v-if="icon === 'share'" size="17"></link-icon>
<star-icon v-if="icon === 'favourites'" size="17"></star-icon>
<folder-plus-icon v-if="icon === 'create-folder'" size="17"></folder-plus-icon>
<smile-icon v-if="icon === 'no-options'" size="17"></smile-icon>
<paperclip-icon v-if="icon === 'zip-folder'" size="17"></paperclip-icon>
<li class="menu-option group">
<div class="icon group-hover-text-theme">
<calendar-icon v-if="icon === 'calendar'" size="17" class="group-hover-text-theme"/>
<grid-icon v-if="icon === 'grid'" size="17" class="group-hover-text-theme"/>
<list-icon v-if="icon === 'list'" size="17" class="group-hover-text-theme"/>
<trash-2-icon v-if="icon === 'trash'" size="17" class="group-hover-text-theme"/>
<life-buoy-icon v-if="icon === 'restore'" size="17" class="group-hover-text-theme"/>
<trash-icon v-if="icon === 'empty-trash'" size="17" class="group-hover-text-theme"/>
<eye-icon v-if="icon ==='detail'" size="17" class="group-hover-text-theme"/>
<download-cloud-icon v-if="icon === 'download'" size="17" class="group-hover-text-theme"/>
<edit2-icon v-if="icon === 'rename'" size="17" class="group-hover-text-theme"/>
<corner-down-right-icon v-if="icon === 'move-item'" size="17" class="group-hover-text-theme"/>
<link-icon v-if="icon === 'share'" size="17" class="group-hover-text-theme"/>
<star-icon v-if="icon === 'favourites'" size="17" class="group-hover-text-theme"/>
<folder-plus-icon v-if="icon === 'create-folder'" size="17" class="group-hover-text-theme"/>
<smile-icon v-if="icon === 'no-options'" size="17" class="group-hover-text-theme"/>
<paperclip-icon v-if="icon === 'zip-folder'" size="17" class="group-hover-text-theme"/>
</div>
<div class="text-label">
<div class="text-label group-hover-text-theme">
{{ title }}
</div>
</li>
@@ -60,22 +63,6 @@ import {
@import "@assets/vuefilemanager/_variables";
@import "@assets/vuefilemanager/_mixins";
.danger {
.text-label {
color: $danger !important;
}
.icon {
path,
line,
polyline,
rect,
circle,
polygon {
stroke: $danger !important;
}
}
}
.menu-option {
white-space: nowrap;
font-weight: 700;
@@ -90,6 +77,15 @@ import {
.icon {
margin-right: 20px;
line-height: 0;
path,
line,
polyline,
rect,
circle,
polygon {
color: inherit;
}
}
.text-label {
@@ -98,19 +94,6 @@ import {
&:hover {
background: $light_background;
.text-label {
color: $theme;
}
path,
line,
polyline,
rect,
circle,
polygon {
stroke: $theme;
}
}
}
@media (prefers-color-scheme: dark) {

20
resources/js/components/FilesView/OptionGroup.vue
View File

@@ -15,19 +15,19 @@
@import "@assets/vuefilemanager/_mixins";
.menu-option-group {
padding: 5px 0;
border-bottom: 1px solid $light_mode_border;
padding: 5px 0;
border-bottom: 1px solid $light_mode_border;
&:first-child {
padding-top: 0;
}
&:last-child {
padding-bottom: 0;
border-bottom: none;
}
&:first-child {
padding-top: 0;
}
&:last-child {
padding-bottom: 0;
border-bottom: none;
}
}
@media (prefers-color-scheme: dark) {
.menu-option-group {
border-color: $dark_mode_border_color;

9
resources/js/components/FilesView/SearchBar.vue
View File

@@ -1,14 +1,14 @@
<template>
<div class="search-bar">
<div class="icon" v-if="!isQuery">
<search-icon size="19"></search-icon>
<search-icon size="19" />
</div>
<div class="icon" v-if="isQuery" @click="resetQuery">
<x-icon class="pointer" size="19"></x-icon>
<x-icon class="pointer" size="19" />
</div>
<input
v-model="query"
class="query"
class="query focus-border-theme"
type="text"
name="query"
:placeholder="$t('inputs.placeholder_search_files')"
@@ -99,8 +99,7 @@
}
&:focus {
border: 1px solid $theme;
box-shadow: 0 0 7px rgba($theme, 0.3);
//box-shadow: 0 0 7px rgba($theme, 0.3);
}
&:focus + .icon {

17
resources/js/components/FilesView/SortingAndPreviewMenu.vue
View File

@@ -1,6 +1,15 @@
<template>
<div class="menu-options" id="menu-list">
<ul class="menu-option-group">
<OptionGroup class="menu-option-group">
<Option v-if="isList" @click="changePreview('grid')" :title="$t('preview_sorting.grid_view')" icon="grid" />
<Option v-if="isGrid" @click="changePreview('list')" :title="$t('preview_sorting.list_view')" icon="list" />
</OptionGroup>
<OptionGroup class="menu-option-group">
<Option @click.stop="sort('created_at')" :title="$t('preview_sorting.sort_date')" icon="calendar" />
<Option @click.stop="sort('name')" :title="$t('preview_sorting.sort_alphabet')" icon="alphabet" />
</OptionGroup>
<ul v-if="false" class="menu-option-group">
<li v-if="isList" class="menu-option" @click="changePreview('grid')">
<div class="icon">
<grid-icon size="17"/>
@@ -18,7 +27,7 @@
</div>
</li>
</ul>
<ul class="menu-option-group">
<ul v-if="false" class="menu-option-group">
<li class="menu-option" @click.stop="sort('created_at')">
<div class="icon">
<calendar-icon size="17"/>
@@ -47,6 +56,8 @@
<script>
import OptionGroup from '@/components/FilesView/OptionGroup'
import Option from '@/components/FilesView/Option'
import { CalendarIcon, ListIcon, GridIcon, ArrowUpIcon, CheckIcon } from 'vue-feather-icons'
import AlphabetIcon from '@/components/FilesView/Icons/AlphabetIcon'
import { mapGetters } from 'vuex'
@@ -55,6 +66,8 @@ import { events } from '@/bus'
export default {
name: 'SortingAndPreviewMenu',
components: {
OptionGroup,
Option,
CalendarIcon,
AlphabetIcon,
ArrowUpIcon,

6
resources/js/components/FilesView/Spinner.vue
View File

@@ -1,6 +1,6 @@
<template>
<div id="loading-bar-spinner" class="spinner">
<div class="spinner-icon"></div>
<div class="spinner-icon border-top-theme border-left-theme"></div>
</div>
</template>
@@ -28,8 +28,8 @@
width: 40px;
height: 40px;
border: solid 4px transparent;
border-top-color: $theme !important;
border-left-color: $theme !important;
//border-top-color: $theme !important;
//border-left-color: $theme !important;
border-radius: 50%;
}