nexus/vuefilemanager
2
0
Fork 0
mirror of https://github.com/VueFileManager/vuefilemanager.git synced 2026-04-29 11:15:58 +00:00
Code Issues Packages Projects Releases Wiki Activity

custom color theme part 1

Browse Source
This commit is contained in:
Peter Papp
2021-03-20 10:25:10 +01:00
parent aa51484303
commit cff7cd6b32
44 changed files with 994 additions and 417 deletions
Download Patch File Download Diff File Expand all files Collapse all files
resources/js/components/Admin/WidgetTotals.vue
+2 -2
View File
@@ -5,7 +5,7 @@
</div>
<router-link :to="{name: linkRoute}" class="footer-link">
<span class="content">{{ linkName }}</span>
<chevron-right-icon size="16"></chevron-right-icon>
<chevron-right-icon size="16" class="text-theme"></chevron-right-icon>
</router-link>
</WidgetWrapper>
</template>
@@ -46,7 +46,7 @@
align-items: center;
polyline {
stroke: $theme;
color: inherit;
}
.content {
resources/js/components/Admin/WidgetWrapper.vue
+4 -4
View File
@@ -3,9 +3,9 @@
<div class="widget-content">
<div class="headline">
<div class="icon">
<users-icon v-if="icon === 'users'" size="19"></users-icon>
<star-icon v-if="icon === 'star'" size="19"></star-icon>
<hard-drive-icon v-if="icon === 'hard-drive'" size="19"></hard-drive-icon>
<users-icon v-if="icon === 'users'" size="19" class="text-theme"></users-icon>
<star-icon v-if="icon === 'star'" size="19" class="text-theme"></star-icon>
<hard-drive-icon v-if="icon === 'hard-drive'" size="19" class="text-theme"></hard-drive-icon>
</div>
<b class="title">{{ title }}</b>
</div>
@@ -44,7 +44,7 @@
margin-right: 10px;
path, circle, line, polygon {
stroke: $theme;
color: inherit;
}
}
}
resources/js/components/Auth/AuthButton.vue
+6 -6
View File
@@ -1,12 +1,12 @@
<template>
<button class="button outline">
<button class="button outline hover-text-theme hover-border-theme">
<span class="text-label">{{ text }}</span>
<span v-if="loading" class="icon">
<FontAwesomeIcon icon="sync-alt" class="sync-alt"/>
<FontAwesomeIcon icon="sync-alt" class="sync-alt svg-color-theme"/>
</span>
<span v-if="! loading && icon" class="icon">
<FontAwesomeIcon :icon="icon"/>
<FontAwesomeIcon :icon="icon" class="svg-color-theme"/>
</span>
</button>
</template>
@@ -74,15 +74,15 @@
.icon {
path {
fill: $theme;
fill: inherit;
}
}
&:hover {
border-color: $theme;
border-color: inherit;
.text-label {
color: $theme;
color: inherit;
}
}
}
resources/js/components/FilesView/ButtonBase.vue
-12
View File
@@ -47,18 +47,6 @@
transform: scale(0.95);
}
&.theme {
background: rgba($theme, .1);
.content {
color: $theme;
}
polyline, path {
stroke: $theme;
}
}
&.theme-solid {
background: $theme;
resources/js/components/FilesView/DesktopToolbar.vue
-27
View File
@@ -227,20 +227,6 @@ export default {
/deep/ .label {
color: $text !important;
}
/deep/ .preview-sorting {
path, line, polyline, rect, circle {
stroke: $text !important;
}
}
&:hover {
/deep/ .preview-sorting {
path, line, polyline, rect, circle {
stroke: $theme !important;
}
}
}
}
.toolbar-wrapper {
@@ -348,22 +334,9 @@ export default {
margin-left: 5px;
&.active {
/deep/ svg {
line,
circle,
rect {
stroke: $theme;
}
}
&.preview-sorting {
background: $light_background;
/deep/ .preview-sorting {
path, line, polyline, rect, circle {
stroke: $theme !important;
}
}
}
}
resources/js/components/FilesView/FileInfoPanel.vue
+1 -2
View File
@@ -15,7 +15,7 @@
</div>
<div class="file-info">
<span ref="name" class="name">{{ fileInfoDetail[0].name }}</span>
<span class="mimetype" v-if="fileInfoDetail[0].mimetype">.{{ fileInfoDetail[0].mimetype }}</span>
<span class="mimetype text-theme" v-if="fileInfoDetail[0].mimetype">.{{ fileInfoDetail[0].mimetype }}</span>
</div>
</div>
</div>
@@ -180,7 +180,6 @@
.mimetype {
@include font-size(12);
font-weight: 600;
color: $theme;
display: block;
}
}
resources/js/components/FilesView/FileItemList.vue
+5 -6
View File
@@ -21,7 +21,7 @@
<!--Thumbnail for item-->
<div class="icon-item">
<!--If is file or image, then link item-->
<span v-if="isFile || (isImage && !item.thumbnail)" class="file-icon-text">
<span v-if="isFile || (isImage && !item.thumbnail)" class="file-icon-text text-theme">
{{ item.mimetype | limitCharacters }}
</span>
@@ -32,7 +32,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-list" class="folder" />
<FolderIcon v-if="isFolder" :item="item" location="file-item-list" class="folder svg-color-theme" />
</div>
<!--Name-->
@@ -44,12 +44,12 @@
<div class="item-info">
<!--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"></link-icon>
</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"></user-plus-icon>
</div>
<!--Filesize and timestamp-->
@@ -401,7 +401,7 @@ export default {
path,
circle,
line {
stroke: $theme;
color: inherit;
}
}
}
@@ -481,7 +481,6 @@ export default {
text-align: center;
left: 0;
right: 0;
color: $theme;
font-weight: 600;
user-select: none;
max-width: 50px;
resources/js/components/FilesView/FolderIcon.vue
-6
View File
@@ -84,12 +84,6 @@
}
}
.default-color {
path {
fill: $theme !important;
}
}
.folder-icon {
path {
resources/js/components/FilesView/ToolbarButton.vue
+102 -94
View File
@@ -1,65 +1,68 @@
<template>
<button class="button" :title="action">
<button class="button hover-text-theme hover-svg-stroke-theme" :title="action">
<corner-down-right-icon
v-if="source === 'move'"
size="19"
></corner-down-right-icon>
v-if="source === 'move'"
size="19"
class="hover-text-theme"
/>
<download-cloud-icon
v-if="source === 'download'"
size="19"
></download-cloud-icon>
v-if="source === 'download'"
size="19"
class="hover-text-theme"
/>
<folder-plus-icon
v-if="source === 'folder-plus'"
size="19"
></folder-plus-icon>
<edit-2-icon v-if="source === 'rename'" size="19"></edit-2-icon>
<printer-icon v-if="source === 'print'" size="19"></printer-icon>
<trash-2-icon v-if="source === 'trash'" size="19"></trash-2-icon>
<list-icon v-if="source === 'th-list'" size="19"></list-icon>
<info-icon v-if="source === 'info'" size="19"></info-icon>
<grid-icon v-if="source === 'th'" size="19"></grid-icon>
<link-icon v-if="source === 'share'" size="19"></link-icon>
<x-icon v-if="source === 'close'" size="19"></x-icon>
<cloud-off-icon v-if="source === 'shared-off'" size="19"></cloud-off-icon>
<sorting-and-preview-icon v-if="source === 'preview-sorting'" size="19" class="preview-sorting"></sorting-and-preview-icon>
v-if="source === 'folder-plus'"
size="19"
class="hover-text-theme"
/>
<edit-2-icon v-if="source === 'rename'" size="19" />
<printer-icon v-if="source === 'print'" size="19" />
<trash-2-icon v-if="source === 'trash'" size="19" />
<list-icon v-if="source === 'th-list'" size="19" />
<info-icon v-if="source === 'info'" size="19" />
<grid-icon v-if="source === 'th'" size="19" />
<link-icon v-if="source === 'share'" size="19" />
<x-icon v-if="source === 'close'" size="19" />
<cloud-off-icon v-if="source === 'shared-off'" size="19" />
<sorting-and-preview-icon v-if="source === 'preview-sorting'" size="19" class="preview-sorting"/>
</button>
</template>
<script>
import {
FolderPlusIcon,
Trash2Icon,
GridIcon,
ListIcon,
Edit2Icon,
InfoIcon,
CornerDownRightIcon,
LinkIcon,
DownloadCloudIcon,
XIcon,
PrinterIcon,
CloudOffIcon,
FolderPlusIcon,
Trash2Icon,
GridIcon,
ListIcon,
Edit2Icon,
InfoIcon,
CornerDownRightIcon,
LinkIcon,
DownloadCloudIcon,
XIcon,
PrinterIcon,
CloudOffIcon,
} from "vue-feather-icons";
import SortingAndPreviewIcon from '@/components/FilesView/Icons/SortingAndPreviewIcon'
export default {
name: "ToolbarButton",
props: ["source", "action"],
components: {
SortingAndPreviewIcon,
CornerDownRightIcon,
DownloadCloudIcon,
FolderPlusIcon,
CloudOffIcon,
PrinterIcon,
Trash2Icon,
Edit2Icon,
ListIcon,
XIcon,
GridIcon,
InfoIcon,
LinkIcon,
},
name: "ToolbarButton",
props: ["source", "action"],
components: {
SortingAndPreviewIcon,
CornerDownRightIcon,
DownloadCloudIcon,
FolderPlusIcon,
CloudOffIcon,
PrinterIcon,
Trash2Icon,
Edit2Icon,
ListIcon,
XIcon,
GridIcon,
InfoIcon,
LinkIcon,
},
};
</script>
@@ -68,65 +71,70 @@ export default {
@import "@assets/vuefilemanager/_mixins";
.preview-sorting {
svg {
width: 19px;
height: 19px;
}
svg {
width: 19px;
height: 19px;
}
rect, line {
@include transition(150ms);
}
}
.button {
height: 42px;
width: 42px;
border-radius: 8px;
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0;
text-align: center;
cursor: pointer;
white-space: nowrap;
outline: none;
border: none;
@include transition(150ms);
background: transparent;
height: 42px;
width: 42px;
border-radius: 8px;
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0;
text-align: center;
cursor: pointer;
white-space: nowrap;
outline: none;
border: none;
@include transition(150ms);
background: transparent;
svg {
color: inherit;
&:hover {
.preview-sorting {
path, line, polyline, rect, circle {
stroke: $theme !important;
}
color: inherit;
}
}
}
&:hover {
background: $light_background;
&:hover {
background: $light_background;
path,
line,
polyline,
rect,
circle {
@include transition(150ms);
stroke: $theme;
path,
line,
polyline,
rect,
circle {
@include transition(150ms);
color: inherit;
}
}
}
}
@media (prefers-color-scheme: dark) {
.button {
background: transparent;
.button {
background: transparent;
&:hover {
background: $dark_mode_foreground;
}
&:hover {
background: $dark_mode_foreground;
}
path,
line,
polyline,
rect,
circle {
stroke: $dark_mode_text_primary;
path,
line,
polyline,
rect,
circle {
stroke: $dark_mode_text_primary;
}
}
}
}
</style>
resources/js/components/FilesView/ToolbarButtonUpload.vue
+16 -4
View File
@@ -1,6 +1,6 @@
<template>
<label label="file" class="button file-input">
<upload-cloud-icon size="17"></upload-cloud-icon>
<label label="file" class="button hover-text-theme file-input">
<upload-cloud-icon size="17" />
<input
@change="emmitFiles"
v-show="false"
@@ -47,12 +47,24 @@
outline: none;
border: none;
svg {
color: inherit;
path, line, polyline, rect, circle {
color: inherit;
}
}
&:hover {
background: $light_background;
path, line, polyline, rect, circle {
path,
line,
polyline,
rect,
circle {
@include transition(150ms);
stroke: $theme;
color: inherit;
}
}
}
resources/js/components/Index/Components/PricingTables.vue
+3 -4
View File
@@ -4,7 +4,7 @@
<div class="plan-wrapper">
<header class="plan-header">
<div class="icon">
<hard-drive-icon size="26"></hard-drive-icon>
<hard-drive-icon class="text-theme" size="26"></hard-drive-icon>
</div>
<h1 class="title">{{ plan.data.attributes.name }}</h1>
<h2 class="description">{{ plan.data.attributes.description }}</h2>
@@ -14,7 +14,7 @@
<span class="storage-description">{{ $t('page_pricing_tables.storage_capacity') }}</span>
</section>
<footer class="plan-footer">
<b class="price">
<b class="price text-theme">
{{ plan.data.attributes.price }}/{{ $t('global.monthly_ac') }}
<small v-if="plan.data.attributes.tax_rates.length > 0" class="vat-disclaimer">{{ $t('page_pricing_tables.vat_excluded') }}</small>
</b>
@@ -73,7 +73,7 @@
.icon {
path, line, polyline, rect, circle {
color: $theme;
color: inherit;
}
}
@@ -113,7 +113,6 @@
}
.price {
color: $theme;
@include font-size(18);
display: block;
padding-top: 5px;
resources/js/components/Index/IndexGetStarted.vue
+4 -11
View File
@@ -8,12 +8,12 @@
:description="index.get_started_description"
></PageTitle>
<router-link tag="button" class="get-started-button" :to="{name: 'SignUp'}">
<router-link tag="button" class="get-started-button bg-theme-800 hover-bg-theme shadow-theme" :to="{name: 'SignUp'}">
<span class="content">{{ $t('page_index.get_started_button') }}</span>
<chevron-right-icon size="22"></chevron-right-icon>
</router-link>
<cloud-icon size="790" class="cloud-bg"></cloud-icon>
<cloud-icon size="790" class="cloud-bg svg-color-theme" />
<div class="icons">
<hard-drive-icon size="42" class="icon"></hard-drive-icon>
@@ -274,10 +274,10 @@
top: 70px;
right: 60px;
transform: scale(-1, 1) rotate(13deg);
opacity: 0.1;
path {
stroke: none;
fill: rgba($theme, 0.05);
}
}
@@ -288,26 +288,19 @@
.get-started-button {
display: flex;
align-items: center;
background: none;
outline: none;
border: none;
margin-left: auto;
margin-right: auto;
cursor: pointer;
background: rgba($theme, 0.8);
padding: 20px 36px;
border-radius: 6px;
box-shadow: 0 5px 10px 2px rgba($theme, 0.34);
//box-shadow: 0 5px 10px 2px rgba($theme, 0.34);
margin-bottom: 395px;
@include transition(150ms);
position: relative;
z-index: 1;
&:hover {
box-shadow: 0 7px 16px 2px rgba($theme, 0.4);
background: rgba($theme, 1);
}
.content {
@include font-size(19);
font-weight: 700;
resources/js/components/Index/IndexNavigation.vue
+5 -11
View File
@@ -12,32 +12,32 @@
</a>
</li>-->
<li>
<router-link :to="{name: 'ContactUs'}">
<router-link :to="{name: 'ContactUs'}" class="hover-text-theme">
{{ $t('page_index.menu.contact_us') }}
</router-link>
</li>
</ul>
<ul v-if="! config.isAuthenticated" class="navigation-links">
<li>
<router-link :to="{name: 'SignIn'}">
<router-link :to="{name: 'SignIn'}" class="hover-text-theme">
{{ $t('page_index.menu.log_in') }}
</router-link>
</li>
<li v-if="config.userRegistration">
<router-link class="cta-button" :to="{name: 'SignUp'}">
<router-link class="cta-button text-theme bg-theme-100" :to="{name: 'SignUp'}">
{{ $t('page_index.menu.sign_in') }}
</router-link>
</li>
</ul>
<ul v-if="config.isAuthenticated" class="navigation-links">
<li v-if="config.userRegistration">
<router-link class="cta-button" :to="{name: 'Files'}">
<router-link class="cta-button text-theme bg-theme-100" :to="{name: 'Files'}">
Go to Files <!--todo: preklad-->
</router-link>
</li>
</ul>
</div>
<router-link class="cta-button log-in" :to="{name: 'SignIn'}">
<router-link class="cta-button log-in text-theme bg-theme-100" :to="{name: 'SignIn'}">
{{ $t('page_index.menu.log_in') }}
</router-link>
</nav>
@@ -98,19 +98,13 @@
font-weight: 700;
@include font-size(17);
@include transition(150ms);
&:hover {
color: $theme;
}
}
}
}
.cta-button {
background: rgba($theme, 0.1);
border-radius: 6px;
padding: 8px 23px;
color: $theme;
@include font-size(17);
font-weight: 700;
resources/js/components/Index/IndexPageFooter.vue
+2 -7
View File
@@ -11,14 +11,14 @@
</a>
</li>-->
<li>
<router-link :to="{name: 'ContactUs'}">
<router-link :to="{name: 'ContactUs'}" class="hover-text-theme">
{{ $t('page_index.menu.contact_us') }}
</router-link>
</li>
</ul>
<ul class="navigation-links">
<li v-if="legal.visibility" v-for="(legal, index) in config.legal" :key="index">
<router-link :to="{name: 'DynamicPage', params: {slug: legal.slug }}">
<router-link :to="{name: 'DynamicPage', params: {slug: legal.slug }}" class="hover-text-theme">
{{ legal.title }}
</router-link>
</li>
@@ -75,10 +75,6 @@
font-weight: 700;
@include font-size(17);
@include transition(150ms);
&:hover {
color: $theme;
}
}
}
}
@@ -90,7 +86,6 @@
padding-bottom: 20px;
/deep/ a {
color: $theme;
font-weight: 700;
}
}
resources/js/components/Others/Forms/FormLabel.vue
+2 -2
View File
@@ -1,6 +1,6 @@
<template>
<div class="form-label">
<edit-2-icon size="22" class="icon"></edit-2-icon>
<edit-2-icon size="22" class="icon text-theme" />
<b class="label">
<slot></slot>
</b>
@@ -31,7 +31,7 @@
margin-right: 10px;
path {
stroke: $theme;
color: inherit;
}
}
resources/js/components/Others/Forms/SelectInput.vue
+5 -4
View File
@@ -18,7 +18,7 @@
<span class="option-value placehoder">{{ placeholder }}</span>
</div>
<chevron-down-icon size="19" class="chevron"></chevron-down-icon>
<chevron-down-icon size="19" class="chevron" />
</div>
<!--Options-->
@@ -117,7 +117,9 @@
}
.input-area {
border: 1px solid transparent;
border-width: 1px;
border-style: solid;
border-color: transparent;
justify-content: space-between;
box-shadow: 0 1px 5px rgba(0, 0, 0, 0.12);
//background: $light_mode_input_background;
@@ -135,8 +137,7 @@
}
&.is-active {
border-color: $theme;
box-shadow: 0 0 7px rgba($theme, 0.3);
//box-shadow: 0 0 7px rgba($theme, 0.3);
.chevron {
@include transform(rotate(180deg));
resources/js/components/Others/Forms/SwitchInput.vue
-1
View File
@@ -83,7 +83,6 @@
}
&.active {
background: $theme;
.switch-button {
left: 25px;
resources/js/components/Others/ListInfoItem.vue
+1 -2
View File
@@ -1,6 +1,6 @@
<template>
<li class="list-info-item">
<b>{{ title }}</b>
<b class="text-theme">{{ title }}</b>
<span v-if="content">{{ content }}</span>
<slot></slot>
</li>
@@ -33,7 +33,6 @@
b {
display: block;
@include font-size(13);
color: $theme;
margin-bottom: 2px;
}
resources/js/components/Others/Tables/DatatableWrapper.vue
+1 -3
View File
@@ -10,7 +10,7 @@
:class="{ 'sortable': column.sortable }"
v-if="! column.hidden"
>
<span>{{ column.label }}</span>
<span class="text-theme">{{ column.label }}</span>
<chevron-up-icon v-if="column.sortable" :class="{ 'arrow-down': filter.sort === 'ASC' }" size="14" class="filter-arrow"></chevron-up-icon>
</th>
@@ -272,7 +272,6 @@ export default {
text-align: left;
span {
color: $theme;
font-weight: 700;
@include font-size(12);
white-space: nowrap;
@@ -311,7 +310,6 @@ export default {
span {
font-size: 13px;
color: $text-muted;
font-weight: bold;
}
}
resources/js/components/Others/TreeMenuNavigator.vue
+4 -4
View File
@@ -2,7 +2,7 @@
<transition name="folder">
<div class="folder-item-wrapper" >
<div class="folder-item" :class="{'is-selected': isSelected , 'is-dragenter': area, 'is-inactive': disabledFolder || disabled && draggedItem.length > 0 }"
<div class="folder-item text-theme" :class="{'is-selected': isSelected , 'is-dragenter': area, 'is-inactive': disabledFolder || disabled && draggedItem.length > 0 }"
:style="indent" @click="getFolder"
@dragover.prevent="dragEnter"
@dragleave="dragLeave"
@@ -11,7 +11,7 @@
>
<chevron-right-icon @click.stop="showTree" size="17" class="icon-arrow"
:class="{'is-opened': isVisible, 'is-visible': nodes.folders.length !== 0}"></chevron-right-icon>
<folder-icon size="17" class="icon"></folder-icon>
<folder-icon size="17" class="icon text-theme"></folder-icon>
<span class="label">{{ nodes.name }}</span>
</div>
@@ -217,12 +217,12 @@
.icon {
path, line, polyline, rect, circle {
stroke: $theme;
color: inherit;
}
}
.label {
color: $theme;
color: inherit;
}
}
}
resources/js/components/Sidebar/MenuBar.vue
+3 -5
View File
@@ -9,8 +9,8 @@
</router-link>
<router-link :to="{name: 'Files'}" :title="$t('locations.home')" class="icon-navigation-item home">
<div class="button-icon">
<hard-drive-icon size="19"></hard-drive-icon>
<div class="button-icon text-theme">
<hard-drive-icon size="19" class="text-theme"></hard-drive-icon>
</div>
</router-link>
@@ -160,7 +160,6 @@
path, line, polyline, rect, circle {
@include transition(150ms);
stroke: black;
}
}
@@ -169,10 +168,9 @@
&.home {
.button-icon {
background: rgba($theme, 0.1);
path, line, polyline, rect, circle {
stroke: $theme;
color: inherit;
}
}
}
resources/js/views/Admin.vue
+12 -12
View File
@@ -10,34 +10,34 @@
<ContentGroup :title="$t('global.admin')" class="navigator">
<div class="menu-list-wrapper vertical">
<router-link :to="{name: 'Dashboard'}" class="menu-list-item link">
<div class="icon">
<div class="icon text-theme">
<box-icon size="17"></box-icon>
</div>
<div class="label">
<div class="label text-theme">
{{ $t('admin_menu.dashboard') }}
</div>
</router-link>
<router-link :to="{name: 'Users'}" class="menu-list-item link">
<div class="icon">
<div class="icon text-theme">
<users-icon size="17"></users-icon>
</div>
<div class="label">
<div class="label text-theme">
{{ $t('admin_menu.users') }}
</div>
</router-link>
<router-link :to="{name: 'AppOthers'}" class="menu-list-item link">
<div class="icon">
<div class="icon text-theme">
<settings-icon size="17"></settings-icon>
</div>
<div class="label">
<div class="label text-theme">
{{ $t('admin_menu.settings') }}
</div>
</router-link>
<router-link :to="{name: 'Pages'}" class="menu-list-item link">
<div class="icon">
<div class="icon text-theme">
<monitor-icon size="17"></monitor-icon>
</div>
<div class="label">
<div class="label text-theme">
{{ $t('admin_menu.pages') }}
</div>
</router-link>
@@ -48,18 +48,18 @@
<ContentGroup v-if="config.isSaaS" title="Subscription" class="navigator">
<div class="menu-list-wrapper vertical">
<router-link :to="{name: 'Plans'}" class="menu-list-item link">
<div class="icon">
<div class="icon text-theme">
<database-icon size="17"></database-icon>
</div>
<div class="label">
<div class="label text-theme">
{{ $t('admin_menu.plans') }}
</div>
</router-link>
<router-link :to="{name: 'Invoices'}" class="menu-list-item link">
<div class="icon">
<div class="icon text-theme">
<file-text-icon size="17"></file-text-icon>
</div>
<div class="label">
<div class="label text-theme">
{{ $t('admin_menu.invoices') }}
</div>
</router-link>
resources/js/views/Admin/AppSettings/AppSettings.vue
+18 -18
View File
@@ -9,60 +9,60 @@
<!--Page Tab links-->
<div class="menu-list-wrapper horizontal">
<router-link replace :to="{name: 'AppOthers'}"
class="menu-list-item link">
<div class="icon">
class="menu-list-item link border-bottom-theme">
<div class="icon text-theme">
<settings-icon size="17"></settings-icon>
</div>
<div class="label">
<div class="label text-theme">
{{ $t('admin_settings.tabs.others') }}
</div>
</router-link>
<router-link replace :to="{name: 'AppAppearance'}"
class="menu-list-item link">
<div class="icon">
class="menu-list-item link link border-bottom-theme">
<div class="icon text-theme">
<eye-icon size="17"></eye-icon>
</div>
<div class="label">
<div class="label text-theme">
{{ $t('admin_settings.tabs.appearance') }}
</div>
</router-link>
<router-link v-if="config.isSaaS" replace :to="{name: 'AppBillings'}"
class="menu-list-item link">
<div class="icon">
class="menu-list-item link link border-bottom-theme">
<div class="icon text-theme">
<file-text-icon size="17"></file-text-icon>
</div>
<div class="label">
<div class="label text-theme">
{{ $t('admin_settings.tabs.billings') }}
</div>
</router-link>
<router-link v-if="config.isSaaS" replace :to="{name: 'AppPayments'}"
class="menu-list-item link">
<div class="icon">
class="menu-list-item link link border-bottom-theme">
<div class="icon text-theme">
<credit-card-icon size="17"></credit-card-icon>
</div>
<div class="label">
<div class="label text-theme">
{{ $t('admin_settings.tabs.payments') }}
</div>
</router-link>
<router-link replace :to="{name: 'AppIndex'}" class="menu-list-item link">
<div class="icon">
<router-link replace :to="{name: 'AppIndex'}" class="menu-list-item link link border-bottom-theme">
<div class="icon text-theme">
<home-icon size="17"></home-icon>
</div>
<div class="label">
<div class="label text-theme">
Homepage
</div>
</router-link>
<router-link replace :to="{name: 'AppEmail'}"
class="menu-list-item link">
<div class="icon">
class="menu-list-item link link border-bottom-theme">
<div class="icon text-theme">
<mail-icon size="17"></mail-icon>
</div>
<div class="label">
<div class="label text-theme">
{{ $t('admin_settings.tabs.email') }}
</div>
</router-link>
resources/js/views/Admin/Dashboard.vue
+4 -6
View File
@@ -22,11 +22,11 @@
{{ data.license }}
</ColorLabel>
</a>
<a href="https://bit.ly/VueFileManager-survey" target="_blank" class="became-backer">
<a href="https://bit.ly/VueFileManager-survey" target="_blank" class="became-backer bg-theme-100">
<div class="icon">
<credit-card-icon size="15"></credit-card-icon>
<credit-card-icon size="15" class="text-theme"></credit-card-icon>
</div>
<span class="content">
<span class="content text-theme">
{{ $t('admin_page_dashboard.backer_button') }}
</span>
</a>
@@ -177,7 +177,6 @@
}
.became-backer {
background: rgba($theme, 0.1);
display: inline-block;
padding: 5px 10px;
border-radius: 6px;
@@ -194,12 +193,11 @@
line-height: 0;
rect, line {
stroke: $theme;
color: inherit;
}
}
.content {
color: $theme;
font-weight: 700;
@include font-size(14);
}
resources/js/views/Auth/ForgottenPassword.vue
+3 -2
View File
@@ -14,6 +14,7 @@
<ValidationProvider tag="div" mode="passive" class="input-wrapper" name="E-Mail" rules="required"
v-slot="{ errors }">
<input v-model="recoverEmail" :placeholder="$t('page_login.placeholder_email')" type="email"
class="focus-border-theme"
:class="{'is-error': errors[0]}"/>
<span class="error-message" v-if="errors[0]">{{ errors[0] }}</span>
</ValidationProvider>
@@ -22,7 +23,7 @@
</ValidationObserver>
<span class="additional-link">{{ $t('page_forgotten_password.password_remember_text') }}
<router-link :to="{name: 'SignIn'}">
<router-link :to="{name: 'SignIn'}" class="text-theme">
{{ $t('page_forgotten_password.password_remember_button') }}
</router-link>
</span>
@@ -37,7 +38,7 @@
<h2>{{ $t('page_forgotten_password.pass_sennded_subtitle') }}</h2>
<span class="additional-link">{{ $t('page_forgotten_password.password_remember_text') }}
<router-link :to="{name: 'SignIn'}">
<router-link :to="{name: 'SignIn'}" class="text-theme">
{{ $t('page_forgotten_password.password_remember_button') }}
</router-link>
</span>
resources/js/views/Auth/SignIn.vue
+8 -5
View File
@@ -14,6 +14,7 @@
<ValidationProvider tag="div" mode="passive" class="input-wrapper" name="E-Mail" rules="required"
v-slot="{ errors }">
<input v-model="loginEmail" :placeholder="$t('page_login.placeholder_email')" type="email"
class="focus-border-theme"
:class="{'is-error': errors[0]}" />
<span class="error-message" v-if="errors[0]">{{ errors[0] }}</span>
</ValidationProvider>
@@ -22,8 +23,9 @@
:disabled="isLoading" />
</ValidationObserver>
<span v-if="config.userRegistration" class="additional-link">{{ $t('page_login.registration_text') }}
<router-link :to="{name: 'SignUp'}">
<span v-if="config.userRegistration" class="additional-link">
{{ $t('page_login.registration_text') }}
<router-link class="text-theme" :to="{name: 'SignUp'}">
{{ $t('page_login.registration_button') }}
</router-link>
</span>
@@ -44,6 +46,7 @@
v-slot="{ errors }">
<input v-model="loginPassword" :placeholder="$t('page_sign_in.placeholder_password')"
type="password"
class="focus-border-theme"
:class="{'is-error': errors[0]}" />
<span class="error-message" v-if="errors[0]">{{ errors[0] }}</span>
</ValidationProvider>
@@ -53,7 +56,7 @@
</ValidationObserver>
<span class="additional-link">{{ $t('page_sign_in.password_reset_text') }}
<router-link :to="{name: 'ForgottenPassword'}">
<router-link :to="{name: 'ForgottenPassword'}" class="text-theme">
{{ $t('page_sign_in.password_reset_button') }}
</router-link>
</span>
@@ -211,8 +214,8 @@
this.$store.commit('PROCESSING_POPUP', undefined)
//if (this.config.isDemo) {
this.loginEmail = 'howdy@hi5ve.digital'
this.loginPassword = 'vuefilemanager'
this.loginEmail = 'howdy@hi5ve.digital'
this.loginPassword = 'vuefilemanager'
//}
}
}
resources/js/views/Auth/SignUp.vue
+7 -7
View File
@@ -17,6 +17,7 @@
<ValidationProvider tag="div" mode="passive" class="input-wrapper" name="E-Mail" rules="required"
v-slot="{ errors }">
<input v-model="register.email" :placeholder="$t('page_registration.placeholder_email')" type="email"
class="focus-border-theme"
:class="{'is-error': errors[0]}"/>
<span class="error-message" v-if="errors[0]">{{ errors[0] }}</span>
</ValidationProvider>
@@ -27,6 +28,7 @@
<ValidationProvider tag="div" mode="passive" class="input-wrapper" name="Full Name" rules="required"
v-slot="{ errors }">
<input v-model="register.name" :placeholder="$t('page_registration.placeholder_name')" type="text"
class="focus-border-theme"
:class="{'is-error': errors[0]}"/>
<span class="error-message" v-if="errors[0]">{{ errors[0] }}</span>
</ValidationProvider>
@@ -37,6 +39,7 @@
<ValidationProvider tag="div" mode="passive" class="input-wrapper" name="Your New Password"
rules="required" v-slot="{ errors }">
<input v-model="register.password" :placeholder="$t('page_registration.placeholder_pass')" type="password"
class="focus-border-theme"
:class="{'is-error': errors[0]}"/>
<span class="error-message" v-if="errors[0]">{{ errors[0] }}</span>
</ValidationProvider>
@@ -47,6 +50,7 @@
<ValidationProvider tag="div" mode="passive" class="input-wrapper" name="Confirm Your Password"
rules="required" v-slot="{ errors }">
<input v-model="register.password_confirmation" :placeholder="$t('page_registration.placeholder_confirm_pass')"
class="focus-border-theme"
type="password" :class="{'is-error': errors[0]}"/>
<span class="error-message" v-if="errors[0]">{{ errors[0] }}</span>
</ValidationProvider>
@@ -54,15 +58,15 @@
<div>
<i18n path="page_registration.agreement" tag="p" class="legal-agreement">
<router-link :to="{name: 'DynamicPage', params: {slug: 'terms-of-service'}}" target="_blank">{{ termsOfService.title }}</router-link>
<router-link :to="{name: 'DynamicPage', params: {slug: 'privacy-policy'}}" target="_blank">{{ privacyPolicy.title }}</router-link>
<router-link :to="{name: 'DynamicPage', params: {slug: 'terms-of-service'}}" target="_blank" class="text-theme">{{ termsOfService.title }}</router-link>
<router-link :to="{name: 'DynamicPage', params: {slug: 'privacy-policy'}}" target="_blank" class="text-theme">{{ privacyPolicy.title }}</router-link>
</i18n>
<AuthButton icon="chevron-right" :text="$t('page_registration.button_create_account')" :loading="isLoading" :disabled="isLoading"/>
</div>
</ValidationObserver>
<span class="additional-link">{{ $t('page_registration.have_an_account') }}
<router-link :to="{name: 'SignIn'}">
<router-link :to="{name: 'SignIn'}" class="text-theme">
{{ $t('page_forgotten_password.password_remember_button') }}
</router-link>
</span>
@@ -201,9 +205,5 @@
font-weight: 700;
line-height: 1.6;
margin: 0 auto;
a {
color: $theme;
}
}
</style>
resources/js/views/FilePages/Files.vue
+10 -10
View File
@@ -12,26 +12,26 @@
<ContentGroup :title="$t('sidebar.locations_title')">
<div class="menu-list-wrapper vertical">
<a class="menu-list-item link" :class="{'is-active': $isThisLocation(['base'])}" @click="goHome">
<div class="icon">
<div class="icon text-theme">
<home-icon size="17"></home-icon>
</div>
<div class="label">
<div class="label text-theme">
{{ $t('sidebar.home') }}
</div>
</a>
<a class="menu-list-item link" :class="{'is-active': $isThisLocation(['latest'])}" @click="getLatest">
<div class="icon">
<div class="icon text-theme">
<upload-cloud-icon size="17"></upload-cloud-icon>
</div>
<div class="label">
<div class="label text-theme">
{{ $t('sidebar.latest') }}
</div>
</a>
<a class="menu-list-item link trash" :class="{'is-active-trash': $isThisLocation(['trash', 'trash-root'])}" @click="getTrash">
<div class="icon">
<a class="menu-list-item link" :class="{'is-active': $isThisLocation(['trash', 'trash-root'])}" @click="getTrash">
<div class="icon text-theme">
<trash2-icon size="17"></trash2-icon>
</div>
<div class="label">
<div class="label text-theme">
{{ $t('locations.trash') }}
</div>
</a>
@@ -56,9 +56,9 @@
</span>
<a @click.stop="openFolder(folder)" class="menu-list-item" :class="{'is-current': (folder && currentFolder) && (currentFolder.id === folder.id)}" v-for="folder in favourites" :key="folder.id">
<div>
<folder-icon size="17" class="folder-icon"></folder-icon>
<span class="label">{{ folder.name }}</span>
<div class="text-theme">
<folder-icon size="17" class="folder-icon text-theme"></folder-icon>
<span class="label text-theme">{{ folder.name }}</span>
</div>
<x-icon size="17" @click.stop="removeFavourite(folder)" class="delete-icon"></x-icon>
</a>
resources/js/views/FilePages/SharedFiles.vue
+4 -4
View File
@@ -7,18 +7,18 @@
<ContentGroup :title="$t('sidebar.locations_title')">
<div class="menu-list-wrapper vertical">
<li class="menu-list-item link" :class="{'is-active': $isThisLocation(['shared'])}" @click="getShared()">
<div class="icon">
<div class="icon text-theme">
<link-icon size="17"></link-icon>
</div>
<div class="label">
<div class="label text-theme">
{{ $t('sidebar.my_shared') }}
</div>
</li>
<li class="menu-list-item link" :class="{'is-active': $isThisLocation(['participant_uploads'])}" @click="getParticipantUploads()">
<div class="icon">
<div class="icon text-theme">
<users-icon size="17"></users-icon>
</div>
<div class="label">
<div class="label text-theme">
{{ $t('sidebar.participant_uploads') }}
</div>
</li>
resources/js/views/Frontpage/ContactUs.vue
+5 -1
View File
@@ -22,6 +22,7 @@
<ValidationProvider tag="div" mode="passive" class="input-wrapper" name="E-Mail" rules="required"
v-slot="{ errors }">
<input v-model="contact.email" :placeholder="$t('page_contact_us.form.email_plac')" type="email"
class="focus-border-theme"
:class="{'is-error': errors[0]}"/>
<span class="error-message" v-if="errors[0]">{{ errors[0] }}</span>
</ValidationProvider>
@@ -31,7 +32,10 @@
<label>{{ $t('page_contact_us.form.message') }}:</label>
<ValidationProvider tag="div" mode="passive" class="input-wrapper" name="Message" rules="required"
v-slot="{ errors }">
<textarea v-model="contact.message" :placeholder="$t('page_contact_us.form.message_plac')" rows="6" :class="{'is-error': errors[0]}"></textarea>
<textarea v-model="contact.message" :placeholder="$t('page_contact_us.form.message_plac')" rows="6"
class="focus-border-theme"
:class="{'is-error': errors[0]}"
></textarea>
<span class="error-message" v-if="errors[0]">{{ errors[0] }}</span>
</ValidationProvider>
</div>
resources/js/views/Profile.vue
+12 -12
View File
@@ -7,28 +7,28 @@
<ContentGroup title="Menu" class="navigator">
<div class="menu-list-wrapper vertical">
<router-link replace :to="{name: 'Profile'}" class="menu-list-item link">
<div class="icon">
<div class="icon text-theme">
<user-icon size="17"></user-icon>
</div>
<div class="label">
<div class="label text-theme">
{{ $t('menu.profile') }}
</div>
</router-link>
<router-link replace :to="{name: 'Storage'}" class="menu-list-item link">
<div class="icon">
<div class="icon text-theme">
<hard-drive-icon size="17"></hard-drive-icon>
</div>
<div class="label">
<div class="label text-theme">
{{ $t('menu.storage') }}
</div>
</router-link>
<router-link replace :to="{name: 'Password'}" class="menu-list-item link">
<div class="icon">
<div class="icon text-theme">
<lock-icon size="17"></lock-icon>
</div>
<div class="label">
<div class="label text-theme">
{{ $t('menu.password') }}
</div>
</router-link>
@@ -37,28 +37,28 @@
<ContentGroup title="Subscription" class="navigator" v-if="canShowSubscriptionSettings">
<div class="menu-list-wrapper vertical">
<router-link replace :to="{name: 'Subscription'}" class="menu-list-item link">
<div class="icon">
<div class="icon text-theme">
<cloud-icon size="17"></cloud-icon>
</div>
<div class="label">
<div class="label text-theme">
{{ $t('menu.subscription') }}
</div>
</router-link>
<router-link replace :to="{name: 'PaymentMethods'}" class="menu-list-item link">
<div class="icon">
<div class="icon text-theme">
<credit-card-icon size="17"></credit-card-icon>
</div>
<div class="label">
<div class="label text-theme">
{{ $t('menu.payment_cards') }}
</div>
</router-link>
<router-link replace :to="{name: 'Invoice'}" class="menu-list-item link">
<div class="icon">
<div class="icon text-theme">
<file-text-icon size="17"></file-text-icon>
</div>
<div class="label">
<div class="label text-theme">
{{ $t('menu.invoices') }}
</div>
</router-link>
resources/js/views/User/Password.vue
+2
View File
@@ -9,6 +9,7 @@
rules="required" v-slot="{ errors }">
<input v-model="newPassword" :placeholder="$t('page_create_password.label_new_pass')"
type="password"
class="focus-border-theme"
:class="{'is-error': errors[0]}"/>
<span class="error-message" v-if="errors[0]">{{ errors[0] }}</span>
</ValidationProvider>
@@ -19,6 +20,7 @@
rules="required" v-slot="{ errors }">
<input v-model="newPasswordConfirmation"
:placeholder="$t('page_create_password.label_confirm_pass')" type="password"
class="focus-border-theme"
:class="{'is-error': errors[0]}"/>
<span class="error-message" v-if="errors[0]">{{ errors[0] }}</span>
</ValidationProvider>
resources/js/views/User/Settings.vue
+9 -1
View File
@@ -20,6 +20,7 @@
v-model="userInfo.name"
:placeholder="$t('page_registration.placeholder_name')"
type="text"
class="focus-border-theme"
/>
</div>
</div>
@@ -52,6 +53,7 @@
v-model="billingInfo.name"
:placeholder="$t('user_settings.name_plac')"
type="text"
class="focus-border-theme"
/>
</div>
</div>
@@ -62,6 +64,7 @@
v-model="billingInfo.address"
:placeholder="$t('user_settings.address_plac')"
type="text"
class="focus-border-theme"
/>
</div>
</div>
@@ -73,6 +76,7 @@
v-model="billingInfo.city"
:placeholder="$t('user_settings.city_plac')"
type="text"
class="focus-border-theme"
/>
</div>
</div>
@@ -83,6 +87,7 @@
v-model="billingInfo.postal_code"
:placeholder="$t('user_settings.postal_code_plac')"
type="text"
class="focus-border-theme"
/>
</div>
</div>
@@ -94,7 +99,8 @@
v-model="billingInfo.country"
:default="billingInfo.country"
:options="countries"
:placeholder="$t('user_settings.country_plac')"/>
:placeholder="$t('user_settings.country_plac')"
/>
</div>
</div>
<div class="block-wrapper">
@@ -104,6 +110,7 @@
v-model="billingInfo.state"
:placeholder="$t('user_settings.state_plac')"
type="text"
class="focus-border-theme"
/>
<small class="input-help">
State, county, province, or region.
@@ -117,6 +124,7 @@
v-model="billingInfo.phone_number"
:placeholder="$t('user_settings.phone_number_plac')"
type="text"
class="focus-border-theme"
/>
</div>
</div>