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

custom color theme part 4

Browse Source
This commit is contained in:
Peter Papp
2021-03-27 10:56:23 +01:00
parent 9e330da7a6
commit bb3f4d4bda
10 changed files with 126 additions and 517 deletions
Download Patch File Download Diff File Expand all files Collapse all files
resources/js/components/FilesView/DesktopToolbar.vue
-11
View File
@@ -395,16 +395,5 @@ export default {
background: $dark_mode_foreground !important;
}
}
.preview-sorting {
/deep/ .label {
color: $text !important;
}
/deep/ .preview-sorting {
path, line, polyline, rect, circle {
stroke: $dark_mode_text_primary !important;
}
}
}
}
</style>
resources/js/components/FilesView/FileItemList.vue
+2 -1
View File
@@ -363,9 +363,10 @@ export default {
.show-actions {
cursor: pointer;
padding: 12px 6px 12px;
padding: 12px 0 12px 6px;
.icon-action {
margin-top: 9px;
@include font-size(14);
circle {
resources/js/components/FilesView/Icons/AlphabetIcon.vue
+1 -1
View File
@@ -1,5 +1,5 @@
<template>
<svg class="alphabet-icon" fill="none" stroke="currentColor" stroke-width="2" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round" width="15px" height="15px" viewBox="0 0 13 15" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<svg class="alphabet-icon" fill="none" stroke="currentColor" stroke-width="2" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round" width="15px" height="15px" viewBox="0 0 15 15" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<polyline id="Path" points="11.1999993 13.1999991 5.59999967 0.199999094 0 13.1999991 5.59999967 0.199999094"></polyline>
<line x1="2.25" y1="8" x2="8.75" y2="8" id="Line-2"></line>
</svg>
resources/js/components/FilesView/Icons/SortingAndPreviewIcon.vue
+17 -18
View File
@@ -1,20 +1,19 @@
<template>
<svg
width="15px" height="15px" viewBox="0 0 18 18" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<g id="VueFileManager" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round">
<g id="Storage-Alert-Copy" transform="translate(-1092.000000, -28.000000)" stroke="#000000" stroke-width="1.4">
<g id="Toolbar" transform="translate(331.000000, 19.000000)">
<g id="Tools" transform="translate(581.000000, 9.000000)">
<g id="sort-icon" transform="translate(181.000000, 1.000000)">
<rect id="Rectangle" x="9.77777778" y="0" width="6.22222222" height="6.22222222"></rect>
<rect id="Rectangle" x="9.77777778" y="9.77777778" width="6.22222222" height="6.22222222"></rect>
<line x1="0" y1="2" x2="6" y2="2" id="Path"></line>
<line x1="0" y1="8" x2="6" y2="8" id="Path"></line>
<line x1="0" y1="14" x2="6" y2="14" id="Path"></line>
</g>
</g>
</g>
</g>
</g>
<svg class="preview-list-icon" fill="none" stroke="currentColor" stroke-width="1.5" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round" width="15px" height="15px" viewBox="0 0 20 18" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<rect x="9.77777778" y="0" width="6.22222222" height="6.22222222"></rect>
<rect x="9.77777778" y="9.77777778" width="6.22222222" height="6.22222222"></rect>
<line x1="0" y1="2" x2="6" y2="2"></line>
<line x1="0" y1="8" x2="6" y2="8"></line>
<line x1="0" y1="14" x2="6" y2="14"></line>
</svg>
</template>
</template>
<style lang="scss">
.preview-list-icon {
rect, line {
color: inherit;
}
}
</style>
resources/js/components/FilesView/MobileActionButton.vue
+1 -15
View File
@@ -12,7 +12,7 @@
<x-square-icon v-if="icon === 'x-square'" size="15" class="icon dark-text-theme" />
<check-icon v-if="icon === 'check'" size="15" class="icon dark-text-theme" />
<dollar-sign-icon v-if="icon === 'dollar-sign'" size="15" class="icon dark-text-theme" />
<sorting-and-preview-icon v-if="icon === 'preview-sorting'" size="15" class="icon preview-sorting" />
<sorting-and-preview-icon v-if="icon === 'preview-sorting'" size="15" class="icon dark-text-theme preview-sorting" />
<span class="label">
<slot></slot>
</span>
@@ -82,20 +82,6 @@
&:active {
@include transform(scale(0.95));
}
/*&:hover {
background: rgba($theme, 0.1);
.icon {
path, line, polyline, rect, circle {
stroke: $theme;
}
}
.label {
color: $theme;
}
}*/
}
@media (prefers-color-scheme: dark) {
resources/js/components/FilesView/MobileActionButtonUpload.vue
+2 -2
View File
@@ -1,7 +1,7 @@
<template>
<button class="mobile-action-button">
<div class="flex">
<upload-cloud-icon class="icon" size="15"></upload-cloud-icon>
<upload-cloud-icon class="icon dark-text-theme" size="15" />
<label label="file" class="label button file-input button-base">
<slot></slot>
<input
@@ -69,7 +69,7 @@
background: $dark_mode_foreground;
path, line, polyline, rect, circle {
stroke: $theme;
color: inherit;
}
.label {
resources/js/components/FilesView/MobileActions.vue
+6 -31
View File
@@ -6,9 +6,9 @@
<MobileActionButton @click.native="$store.dispatch('emptyTrash')" icon="trash">
{{ $t('context_menu.empty_trash') }}
</MobileActionButton>
<MobileMultiSelectButton @click.native="enableMultiSelectMode">
<MobileActionButton @click.native="enableMultiSelectMode" icon="check-square">
{{ $t('context_menu.select') }}
</MobileMultiSelectButton>
</MobileActionButton>
<MobileActionButton class="preview-sorting" @click.native="showViewOptions" icon="preview-sorting">
{{$t('preview_sorting.preview_sorting_button')}}
</MobileActionButton>
@@ -23,9 +23,9 @@
<MobileActionButtonUpload :class="{'is-inactive' : multiSelectMode}">
{{ $t('context_menu.upload') }}
</MobileActionButtonUpload>
<MobileMultiSelectButton @click.native="enableMultiSelectMode">
<MobileActionButton @click.native="enableMultiSelectMode" icon="check-square">
{{ $t('context_menu.select') }}
</MobileMultiSelectButton>
</MobileActionButton>
<MobileActionButton class="preview-sorting" @click.native="showViewOptions" icon="preview-sorting">
{{$t('preview_sorting.preview_sorting_button')}}
</MobileActionButton>
@@ -49,9 +49,9 @@
<!--ContextMenu for Base location with VISITOR permission-->
<div v-if="baseLocationVisitorMenu && ! multiSelectMode" class="mobile-actions">
<MobileMultiSelectButton @click.native="enableMultiSelectMode">
<MobileActionButton @click.native="enableMultiSelectMode" icon="check-square">
{{ $t('context_menu.select') }}
</MobileMultiSelectButton>
</MobileActionButton>
<MobileActionButton class="preview-sorting" @click.native="showViewOptions" icon="preview-sorting">
{{$t('preview_sorting.preview_sorting_button')}}
</MobileActionButton>
@@ -64,7 +64,6 @@
<script>
import MobileActionButtonUpload from '@/components/FilesView/MobileActionButtonUpload'
import MobileMultiSelectButton from '@/components/FilesView/MobileMultiSelectButton'
import MobileActionButton from '@/components/FilesView/MobileActionButton'
import UploadProgress from '@/components/FilesView/UploadProgress'
import {mapGetters} from 'vuex'
@@ -74,7 +73,6 @@
name: 'MobileActions',
components: {
MobileActionButtonUpload,
MobileMultiSelectButton,
MobileActionButton,
UploadProgress,
},
@@ -157,18 +155,6 @@
position: absolute;
}
.preview-sorting {
background: $light_background !important;
/deep/ .label {
color: $text !important;
}
/deep/ .preview-sorting {
path, line, polyline, rect, circle {
stroke: $text !important;
}
}
}
#mobile-actions-wrapper {
display: none;
background: white;
@@ -202,16 +188,5 @@
#mobile-actions-wrapper {
background: $dark_mode_background;
}
.preview-sorting {
background: $dark_mode_foreground !important;
/deep/ .label {
color: $dark_mode_text_primary !important;
}
/deep/ .preview-sorting {
path, line, polyline, rect, circle {
stroke: $theme !important;
}
}
}
}
</style>
resources/js/components/FilesView/MobileMultiSelectButton.vue
-100
View File
@@ -1,100 +0,0 @@
<template>
<button class="mobile-action-button" :class="{'active' : mobileSelectingActive}">
<div class="flex" >
<CheckSquareIcon size="15" class="icon"></CheckSquareIcon>
<span class="label">
<slot></slot>
</span>
</div>
</button>
</template>
<script>
import {CheckSquareIcon} from "vue-feather-icons";
import {events} from '@/bus'
export default {
name: 'MobileActionButton',
props: [
'icon'
],
components: {
CheckSquareIcon
},
data () {
return {
mobileSelectingActive: false
}
},
mounted() {
events.$on('mobileSelecting:start' , () => {
this.mobileSelectingActive = true
})
events.$on('mobileSelecting:stop' , () => {
this.mobileSelectingActive = false
})
}
}
</script>
<style scoped lang="scss">
@import '@assets/vuefilemanager/_variables';
@import '@assets/vuefilemanager/_mixins';
.mobile-action-button {
background: $light_background;
margin-right: 15px;
border-radius: 8px;
padding: 7px 10px;
cursor: pointer;
border: none;
@include transition(150ms);
.flex {
display: flex;
align-items: center;
}
.icon {
margin-right: 10px;
@include font-size(14);
path, line, polyline, rect, circle {
@include transition(150ms);
}
}
.label {
@include transition(150ms);
@include font-size(14);
font-weight: 700;
color: $text;
}
}
.active {
.icon {
path, line, polyline, rect, circle {
stroke: $theme !important;
}
}
.label {
color: $theme !important;
}
}
@media (prefers-color-scheme: dark) {
.mobile-action-button {
background: $dark_mode_foreground;
path, line, polyline, rect, circle {
stroke: $theme;
}
.label {
color: $dark_mode_text_primary;
}
}
}
</style>