mirror of
https://github.com/VueFileManager/vuefilemanager.git
synced 2026-04-05 18:23:48 +00:00
- cancel/resume subscription fix
- upload into root folder fix - custom color theme part 3
This commit is contained in:
Peter Papp
@@ -169,7 +169,7 @@
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
.popup-wrapper {
|
||||
background: $dark_mode_background;
|
||||
background: $dark_mode_foreground;
|
||||
}
|
||||
.popup-content {
|
||||
.title {
|
||||
|
||||
@@ -120,9 +120,15 @@
|
||||
}
|
||||
|
||||
polyline, path {
|
||||
stroke: $theme;
|
||||
color: inherit;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.popup-wrapper {
|
||||
.button-base.secondary {
|
||||
background: lighten($dark_mode_foreground, 3%);
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -46,38 +46,12 @@ import { events } from '@/bus'
|
||||
&.showed {
|
||||
display: block;
|
||||
}
|
||||
|
||||
/deep/.menu-option {
|
||||
|
||||
&:hover {
|
||||
background: $light_background;
|
||||
|
||||
.text-label {
|
||||
color: $theme;
|
||||
}
|
||||
|
||||
path,
|
||||
/deep/ line,
|
||||
/deep/ polyline,
|
||||
rect,
|
||||
circle,
|
||||
polygon {
|
||||
stroke: $theme !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
.sorting-preview {
|
||||
background: $dark_mode_foreground;
|
||||
|
||||
/deep/ .menu-option {
|
||||
&:hover {
|
||||
background: rgba($theme, 0.1);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@@ -214,18 +214,5 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.sharelink {
|
||||
|
||||
.lock-icon {
|
||||
|
||||
&:hover {
|
||||
|
||||
path, rect {
|
||||
stroke: $theme;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -59,14 +59,14 @@
|
||||
</div>
|
||||
|
||||
<span @click.stop="showItemActions" class="show-actions" v-if="$isMobile() && ! multiSelectMode && canShowMobileOptions">
|
||||
<FontAwesomeIcon icon="ellipsis-h" class="icon-action"></FontAwesomeIcon>
|
||||
<MoreHorizontalIcon icon="ellipsis-h" size="16" class="icon-action text-theme"/>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {LinkIcon, UserPlusIcon, CheckIcon} from 'vue-feather-icons'
|
||||
import {LinkIcon, UserPlusIcon, CheckIcon, MoreHorizontalIcon} from 'vue-feather-icons'
|
||||
import FolderIcon from '@/components/FilesView/FolderIcon'
|
||||
import {debounce} from 'lodash'
|
||||
import {mapGetters} from 'vuex'
|
||||
@@ -76,6 +76,7 @@ export default {
|
||||
name: 'FileItemGrid',
|
||||
props: ['item'],
|
||||
components: {
|
||||
MoreHorizontalIcon,
|
||||
UserPlusIcon,
|
||||
CheckIcon,
|
||||
LinkIcon,
|
||||
@@ -349,8 +350,8 @@ export default {
|
||||
@include font-size(12);
|
||||
}
|
||||
|
||||
path {
|
||||
fill: $theme;
|
||||
circle {
|
||||
color: inherit;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -64,7 +64,7 @@
|
||||
<transition name="slide-from-right">
|
||||
<div class="actions" v-if="$isMobile() && ! mobileMultiSelect">
|
||||
<span @click.stop="showItemActions" class="show-actions">
|
||||
<FontAwesomeIcon icon="ellipsis-v" class="icon-action"></FontAwesomeIcon>
|
||||
<MoreVerticalIcon size="16" class="icon-action text-theme" />
|
||||
</span>
|
||||
</div>
|
||||
</transition>
|
||||
@@ -73,7 +73,7 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { LinkIcon, UserPlusIcon, CheckIcon } from 'vue-feather-icons'
|
||||
import { LinkIcon, UserPlusIcon, CheckIcon, MoreVerticalIcon } from 'vue-feather-icons'
|
||||
import FolderIcon from '@/components/FilesView/FolderIcon'
|
||||
import { debounce } from 'lodash'
|
||||
import { mapGetters } from 'vuex'
|
||||
@@ -83,6 +83,7 @@ export default {
|
||||
name: 'FileItemList',
|
||||
props: ['item'],
|
||||
components: {
|
||||
MoreVerticalIcon,
|
||||
UserPlusIcon,
|
||||
LinkIcon,
|
||||
FolderIcon,
|
||||
@@ -367,8 +368,8 @@ export default {
|
||||
.icon-action {
|
||||
@include font-size(14);
|
||||
|
||||
path {
|
||||
fill: $theme;
|
||||
circle {
|
||||
color: inherit;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -580,10 +581,6 @@ export default {
|
||||
&.is-clicked {
|
||||
background: $dark_mode_foreground;
|
||||
|
||||
.item-name .name {
|
||||
color: $theme;
|
||||
}
|
||||
|
||||
.file-icon {
|
||||
path {
|
||||
fill: $dark_mode_background;
|
||||
|
||||
@@ -1,18 +1,18 @@
|
||||
<template>
|
||||
<button class="mobile-action-button">
|
||||
<div class="flex">
|
||||
<credit-card-icon v-if="icon === 'credit-card'" size="15" class="icon"></credit-card-icon>
|
||||
<folder-plus-icon v-if="icon === 'folder-plus'" size="15" class="icon"></folder-plus-icon>
|
||||
<list-icon v-if="icon === 'th-list'" size="15" class="icon"></list-icon>
|
||||
<trash-icon v-if="icon === 'trash'" size="15" class="icon"></trash-icon>
|
||||
<grid-icon v-if="icon === 'th'" size="15" class="icon"></grid-icon>
|
||||
<user-plus-icon v-if="icon === 'user-plus'" size="15" class="icon"></user-plus-icon>
|
||||
<plus-icon v-if="icon === 'plus'" size="15" class="icon"></plus-icon>
|
||||
<check-square-icon v-if="icon === 'check-square'" size="15" class="icon"></check-square-icon>
|
||||
<x-square-icon v-if="icon === 'x-square'" size="15" class="icon"></x-square-icon>
|
||||
<check-icon v-if="icon === 'check'" size="15" class="icon"></check-icon>
|
||||
<dollar-sign-icon v-if="icon === 'dollar-sign'" size="15" class="icon"></dollar-sign-icon>
|
||||
<sorting-and-preview-icon v-if="icon === 'preview-sorting'" size="15" class="icon preview-sorting"></sorting-and-preview-icon>
|
||||
<credit-card-icon v-if="icon === 'credit-card'" size="15" class="icon dark-text-theme" />
|
||||
<folder-plus-icon v-if="icon === 'folder-plus'" size="15" class="icon dark-text-theme" />
|
||||
<list-icon v-if="icon === 'th-list'" size="15" class="icon dark-text-theme" />
|
||||
<trash-icon v-if="icon === 'trash'" size="15" class="icon dark-text-theme" />
|
||||
<grid-icon v-if="icon === 'th'" size="15" class="icon dark-text-theme" />
|
||||
<user-plus-icon v-if="icon === 'user-plus'" size="15" class="icon dark-text-theme" />
|
||||
<plus-icon v-if="icon === 'plus'" size="15" class="icon dark-text-theme" />
|
||||
<check-square-icon v-if="icon === 'check-square'" size="15" class="icon dark-text-theme" />
|
||||
<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" />
|
||||
<span class="label">
|
||||
<slot></slot>
|
||||
</span>
|
||||
@@ -103,7 +103,7 @@
|
||||
background: $dark_mode_foreground;
|
||||
|
||||
path, line, polyline, rect, circle {
|
||||
stroke: $theme;
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
.label {
|
||||
|
||||
@@ -315,11 +315,11 @@ export default {
|
||||
computed: {
|
||||
...mapGetters(['fileInfoDetail', 'user']),
|
||||
favourites() {
|
||||
return this.user.relationships.favourites.data.attributes.folders
|
||||
return this.user.data.relationships.favourites.data.attributes.folders
|
||||
},
|
||||
isInFavourites() {
|
||||
return this.favourites.find(
|
||||
(el) => el.unique_id == this.fileInfoDetail[0].unique_id
|
||||
(el) => el.id == this.fileInfoDetail[0].id
|
||||
)
|
||||
},
|
||||
isFile() {
|
||||
@@ -369,7 +369,7 @@ export default {
|
||||
if (
|
||||
this.favourites &&
|
||||
!this.favourites.find(
|
||||
(el) => el.unique_id == this.fileInfoDetail[0].unique_id
|
||||
(el) => el.id == this.fileInfoDetail[0].id
|
||||
)
|
||||
) {
|
||||
this.$store.dispatch('addToFavourites', this.fileInfoDetail[0])
|
||||
|
||||
@@ -82,12 +82,6 @@ export default {
|
||||
color: $dark_mode_text_secondary;
|
||||
}
|
||||
}
|
||||
|
||||
.icon-wrapper {
|
||||
.icon {
|
||||
stroke: $theme;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -106,16 +106,12 @@ import {
|
||||
}
|
||||
}
|
||||
@media (prefers-color-scheme: dark) {
|
||||
.danger {
|
||||
&:hover {
|
||||
background: rgba($danger, 0.1) !important;
|
||||
}
|
||||
}
|
||||
|
||||
.menu-option {
|
||||
color: $dark_mode_text_primary;
|
||||
|
||||
&:hover {
|
||||
background: rgba($theme, 0.1);
|
||||
background: lighten($dark_mode_foreground, 2%);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -103,7 +103,7 @@ export default {
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
.popup-wrapper {
|
||||
background: $dark_mode_background;
|
||||
background: $dark_mode_foreground;
|
||||
}
|
||||
.popup-content {
|
||||
.title {
|
||||
|
||||
@@ -437,7 +437,7 @@ export default {
|
||||
@media (prefers-color-scheme: dark) {
|
||||
|
||||
.emoji-wrapper {
|
||||
background: $dark_mode_background;
|
||||
background: lighten($dark_mode_foreground, 2%);
|
||||
|
||||
.emoji-input {
|
||||
background: $dark_mode_foreground;
|
||||
@@ -469,7 +469,7 @@ export default {
|
||||
}
|
||||
|
||||
.select-input-wrapper {
|
||||
background: $dark_mode_foreground;
|
||||
background: lighten($dark_mode_foreground, 3%);
|
||||
|
||||
.not-selected {
|
||||
span {
|
||||
|
||||
@@ -159,22 +159,11 @@ export default {
|
||||
line,
|
||||
path,
|
||||
polygon {
|
||||
stroke: $dark_mode_text_primary !important;
|
||||
color: inherit !important;
|
||||
}
|
||||
|
||||
.icon-item {
|
||||
border-color: #333333;
|
||||
|
||||
&:hover {
|
||||
background: rgba($theme, 0.1);
|
||||
|
||||
line,
|
||||
polyline,
|
||||
path,
|
||||
polygon {
|
||||
stroke: $theme !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
@@ -187,11 +187,11 @@
|
||||
.input-area {
|
||||
background: $dark_mode_foreground;
|
||||
border-color: $dark_mode_foreground;
|
||||
}
|
||||
|
||||
.option-icon {
|
||||
path {
|
||||
fill: $theme
|
||||
}
|
||||
.popup-wrapper {
|
||||
.input-area {
|
||||
background: lighten($dark_mode_foreground, 3%);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -202,16 +202,12 @@
|
||||
border-bottom: none;
|
||||
|
||||
&:hover {
|
||||
background: rgba($theme, .1);
|
||||
|
||||
.option-value {
|
||||
color: $theme;
|
||||
}
|
||||
background: lighten($dark_mode_foreground, 5%);
|
||||
|
||||
.option-icon {
|
||||
|
||||
path, circle {
|
||||
stroke: $theme;
|
||||
color: inherit;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -94,5 +94,11 @@
|
||||
.switch {
|
||||
background: $dark_mode_foreground;
|
||||
}
|
||||
|
||||
.popup-wrapper {
|
||||
.switch {
|
||||
background: lighten($dark_mode_foreground, 3%);
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -7,7 +7,7 @@
|
||||
</div>
|
||||
<div class="label">
|
||||
<h1 class="title">{{ title }}</h1>
|
||||
<x-icon @click="closePopup" size="22" class="close-icon" />
|
||||
<x-icon @click="closePopup" size="22" class="close-icon hover-text-theme" />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
@@ -80,7 +80,7 @@
|
||||
background: $light_background;
|
||||
|
||||
line {
|
||||
stroke: $theme;
|
||||
color: inherit;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -141,7 +141,7 @@
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
.popup-wrapper {
|
||||
background: $dark_mode_background;
|
||||
background: $dark_mode_foreground;
|
||||
box-shadow: $dark_mode_popup_shadow;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -18,7 +18,7 @@
|
||||
<div class="input">
|
||||
<input v-model="pickedItem.name" :class="{'is-error': errors[0]}" ref="input" type="text" class="focus-border-theme" :placeholder="$t('popup_rename.placeholder')">
|
||||
<div @click="pickedItem.name = ''" class="close-icon-wrapper">
|
||||
<x-icon class="close-icon" size="14" />
|
||||
<x-icon class="close-icon hover-text-theme" size="14" />
|
||||
</div>
|
||||
</div>
|
||||
<span class="error-message" v-if="errors[0]">{{ errors[0] }}</span>
|
||||
@@ -168,14 +168,14 @@ export default {
|
||||
&:hover {
|
||||
.close-icon {
|
||||
line {
|
||||
stroke: $theme;
|
||||
color: inherit;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.close-icon {
|
||||
line {
|
||||
stroke: rgba($text-muted, 0.3);
|
||||
color: rgba($text-muted, 0.3);
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -191,14 +191,14 @@ export default {
|
||||
|
||||
.close-icon {
|
||||
line {
|
||||
stroke: $theme !important;
|
||||
color: inherit !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.close-icon {
|
||||
line {
|
||||
stroke: rgba($dark_mode_text_primary, 0.3) !important;
|
||||
color: rgba($dark_mode_text_primary, 0.3) !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -108,13 +108,19 @@
|
||||
border-color: transparent;
|
||||
|
||||
.tab.active {
|
||||
background: rgba($theme, 0.1);
|
||||
background: lighten($dark_mode_foreground, 7%);
|
||||
|
||||
.tab-title {
|
||||
color: $theme;
|
||||
color: $dark_mode_text_primary;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.popup-wrapper {
|
||||
.tab-wrapper {
|
||||
background: lighten($dark_mode_foreground, 2%);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
@@ -429,18 +429,6 @@ export default {
|
||||
|
||||
.table {
|
||||
|
||||
.table-header {
|
||||
|
||||
tr {
|
||||
td, th {
|
||||
|
||||
span {
|
||||
color: $theme;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.table-body {
|
||||
tr, th {
|
||||
&:hover {
|
||||
|
||||
@@ -31,7 +31,7 @@
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
.text-label {
|
||||
color: $theme;
|
||||
opacity: 0.35;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -5,7 +5,7 @@
|
||||
<div class="icon-item">
|
||||
|
||||
<!--If is file or image, then link item-->
|
||||
<span v-if="isFile || (isImage && !item.thumbnail) " class="file-icon-text">{{ item.mimetype }}</span>
|
||||
<span v-if="isFile || (isImage && !item.thumbnail) " class="file-icon-text text-theme">{{ item.mimetype }}</span>
|
||||
|
||||
<!--Folder thumbnail-->
|
||||
<FontAwesomeIcon v-if="isFile || (isImage && !item.thumbnail)" class="file-icon" :class="{'file-icon-mobile' : $isMobile()}" icon="file"/>
|
||||
@@ -138,7 +138,6 @@
|
||||
text-align: center;
|
||||
left: 0;
|
||||
right: 0;
|
||||
color: $theme;
|
||||
font-weight: 600;
|
||||
user-select: none;
|
||||
max-width: 20px;
|
||||
@@ -194,6 +193,16 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.popup-wrapper {
|
||||
.file-item {
|
||||
.icon-item .file-icon {
|
||||
path {
|
||||
fill: lighten($dark_mode_foreground, 3%);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 690px) and (prefers-color-scheme: dark) {
|
||||
|
||||
@@ -168,28 +168,6 @@
|
||||
.label {
|
||||
color: $dark_mode_text_primary;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background: rgba($theme, .1);
|
||||
}
|
||||
|
||||
&.is-selected {
|
||||
background: rgba($theme, .1);
|
||||
}
|
||||
}
|
||||
|
||||
&.is-selected {
|
||||
background: rgba($theme, .1);
|
||||
}
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) and (max-width: 690px) {
|
||||
.folder-item {
|
||||
|
||||
&:hover,
|
||||
&.is-selected {
|
||||
background: rgba($theme, .1);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -240,28 +240,6 @@
|
||||
.label {
|
||||
color: $dark_mode_text_primary;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background: rgba($theme, .1);
|
||||
}
|
||||
|
||||
&.is-selected {
|
||||
background: rgba($theme, .1);
|
||||
}
|
||||
}
|
||||
|
||||
&.is-selected {
|
||||
background: rgba($theme, .1);
|
||||
}
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) and (max-width: 690px) {
|
||||
.folder-item {
|
||||
|
||||
&:hover,
|
||||
&.is-selected {
|
||||
background: rgba($theme, .1);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -248,10 +248,6 @@
|
||||
&:hover {
|
||||
background: $dark_mode_background;
|
||||
}
|
||||
|
||||
path, line, polyline, rect, circle {
|
||||
stroke: $dark_mode_text_primary;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
<template>
|
||||
<div class="user-meta" v-if="user">
|
||||
<b class="name">{{ user.data.attributes.name }}</b>
|
||||
<span class="email">{{ user.data.attributes.email }}</span>
|
||||
<b class="name">{{ user.data.relationships.settings.data.attributes.name }}</b>
|
||||
<span class="email text-theme">{{ user.data.attributes.email }}</span>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@@ -32,7 +32,6 @@
|
||||
.email {
|
||||
display: block;
|
||||
@include font-size(12);
|
||||
color: $theme;
|
||||
font-weight: 600;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -175,7 +175,7 @@
|
||||
return this.config.isSaaS && this.config.app_payments_active
|
||||
},
|
||||
canShowUpgradeWarning() {
|
||||
return this.config.storageLimit && this.user.data.attributes.used > 95
|
||||
return this.config.storageLimit && this.user.data.attributes.storage.used > 95
|
||||
},
|
||||
canShowIncompletePayment() {
|
||||
return this.user.data.attributes.incomplete_payment
|
||||
|
||||
11
resources/sass/app.scss
vendored
11
resources/sass/app.scss
vendored
@@ -373,7 +373,7 @@
|
||||
.icon {
|
||||
|
||||
path, line, polyline, rect, circle, ellipse {
|
||||
stroke: $dark_mode_text_primary;
|
||||
color: $dark_mode_text_primary;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -385,21 +385,16 @@
|
||||
.icon {
|
||||
|
||||
path, line, polyline, rect, circle, ellipse {
|
||||
stroke: $dark_mode_text_primary;
|
||||
color: $dark_mode_text_primary;
|
||||
}
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background: rgba($theme, .1);
|
||||
|
||||
.label {
|
||||
color: $theme;
|
||||
}
|
||||
|
||||
.icon {
|
||||
|
||||
path, line, polyline, rect, circle, ellipse {
|
||||
stroke: $theme;
|
||||
color: inherit;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
11
resources/sass/vuefilemanager/_forms.scss
vendored
11
resources/sass/vuefilemanager/_forms.scss
vendored
@@ -295,4 +295,15 @@ input[type="email"] {
|
||||
-webkit-text-fill-color: rgba($dark_mode_text_secondary, 0.8);
|
||||
}
|
||||
}
|
||||
|
||||
.popup-wrapper {
|
||||
|
||||
textarea,
|
||||
input[type="password"],
|
||||
input[type="text"],
|
||||
input[type="number"],
|
||||
input[type="email"] {
|
||||
background: lighten($dark_mode_foreground, 3%);
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -82,4 +82,8 @@
|
||||
.folder-item.is-dragenter {border-color: {{ $settings->app_color }} !important;}
|
||||
.favourites.is-dragenter .menu-list {border-color: {{ $settings->app_color }} !important;}
|
||||
|
||||
{{-- Dark mode --}}
|
||||
@media (prefers-color-scheme: dark) {
|
||||
.dark-text-theme {color: {{ $settings->app_color }}}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user