apps/photoprism
1
0
Fork 0
mirror of https://github.com/photoprism/photoprism.git synced 2025-10-04 16:33:19 +08:00
Code Issues Packages Projects Releases Wiki Activity

Frontend: #4556 change packages to vue 3 and connected one (not all), fix errors in console,change attrs in some components (dark, text-xs-right and etc). The problem with icons.

Browse Source
This commit is contained in:
Anastasiia
2024-10-15 17:37:56 +02:00
parent 0b780610ba
commit 94eaa7a97c
82 changed files with 1752 additions and 8654 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2784
frontend/package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

17
frontend/package.json
View File

@@ -29,6 +29,8 @@
"@babel/runtime": "^7.25.6",
"@lcdp/offline-plugin": "^5.1.1",
"@mdi/font": "^7.4.47",
"@vue/compat": "^3.5.11",
"@vue/compiler-sfc": "^3.5.11",
"@vvo/tzdb": "^6.145.0",
"axios": "^1.7.7",
"axios-mock-adapter": "^2.0.0",
@@ -52,7 +54,7 @@
"eslint-plugin-node": "^11.1.0",
"eslint-plugin-prettier": "^5.2.1",
"eslint-plugin-promise": "^6.6.0",
"eslint-plugin-vue": "^9.27.0",
"eslint-plugin-vue": "^9.28.0",
"eslint-webpack-plugin": "^4.2.0",
"eventsource-polyfill": "^0.9.6",
"file-loader": "^6.2.0",
@@ -93,18 +95,17 @@
"tar": "^7.4.3",
"url-loader": "^4.1.1",
"util": "^0.12.5",
"vue": "^2.7.14",
"vue": "^3.5.11",
"vue-fullscreen": "^2.6.1",
"vue-gettext": "^2.1.12",
"vue-infinite-scroll": "^2.0.2",
"vue-loader": "^15.10.1",
"vue-loader": "^17.4.2",
"vue-loader-plugin": "^1.3.0",
"vue-luxon": "^0.10.0",
"vue-router": "^3.6.5",
"vue-router": "^4.4.5",
"vue-style-loader": "^4.1.3",
"vue-template-compiler": "^2.7.16",
"vue2-filters": "^0.14.0",
"vuetify": "^2.7.1",
"vue3-gettext": "^2.1.12",
"vuetify": "^3.7.2",
"webpack": "^5.94.0",
"webpack-bundle-analyzer": "^4.10.2",
"webpack-cli": "^5.1.4",
@@ -122,6 +123,6 @@
">0.25% and last 2 years"
],
"devDependencies": {
"eslint-plugin-vuetify": "^1.1.0"
"eslint-plugin-vuetify": "^2.4.0"
}
}

110
frontend/src/app.js
View File

@@ -30,30 +30,32 @@ import Api from "common/api";
import Notify from "common/notify";
import Scrollbar from "common/scrollbar";
import Clipboard from "common/clipboard";
import Components from "component/components";
import { installComponents } from "component/components";
import { installDialogs } from "dialog/dialogs";
import customIcons from "component/icons";
import Dialogs from "dialog/dialogs";
import Event from "pubsub-js";
import GetTextPlugin from "vue-gettext";
import { createGettext } from 'vue3-gettext';
import Log from "common/log";
import PhotoPrism from "app.vue";
import Router from "vue-router";
import { createRouter, createWebHistory } from 'vue-router';
import Routes from "app/routes";
import { config, session } from "app/session";
import { Settings } from "luxon";
import Socket from "common/websocket";
import Viewer from "common/viewer";
import Vue from "vue";
import Vuetify from "vuetify";
import { createApp } from 'vue';
import { createVuetify } from 'vuetify';
import VueLuxon from "vue-luxon";
import VueFilters from "vue2-filters";
import VueFullscreen from "vue-fullscreen";
// import VueFilters from "vue2-filters";
// import VueFullscreen from "vue-fullscreen";
import VueInfiniteScroll from "vue-infinite-scroll";
import Hls from "hls.js";
import "common/maptiler-lang";
import { T, Mount } from "common/vm";
import * as offline from "@lcdp/offline-plugin/runtime";
import '@mdi/font/css/materialdesignicons.css'
import { aliases, mdi } from 'vuetify/iconsets/mdi';
import 'vuetify/styles';
import '@mdi/font/css/materialdesignicons.css';
config.progress(50);
@@ -64,9 +66,10 @@ config.update().finally(() => {
const isPublic = config.isPublic();
const isMobile = /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) || (navigator.maxTouchPoints && navigator.maxTouchPoints > 2);
let app = createApp(PhotoPrism);
// Initialize language and detect alignment.
Vue.config.language = config.getLanguage();
Settings.defaultLocale = Vue.config.language.substring(0, 2);
app.config.globalProperties.$language = config.getLanguage();
Settings.defaultLocale = app.config.globalProperties.$language.substring(0, 2);
// Detect right-to-left languages such as Arabic and Hebrew
const rtl = config.rtl();
@@ -77,19 +80,19 @@ config.update().finally(() => {
window.Hls = Hls;
// Assign helpers to VueJS prototype.
Vue.prototype.$event = Event;
Vue.prototype.$notify = Notify;
Vue.prototype.$scrollbar = Scrollbar;
Vue.prototype.$viewer = viewer;
Vue.prototype.$session = session;
Vue.prototype.$api = Api;
Vue.prototype.$log = Log;
Vue.prototype.$socket = Socket;
Vue.prototype.$config = config;
Vue.prototype.$clipboard = Clipboard;
Vue.prototype.$isMobile = isMobile;
Vue.prototype.$rtl = rtl;
Vue.prototype.$sponsorFeatures = () => {
app.config.globalProperties.$event = Event;
app.config.globalProperties.$notify = Notify;
app.config.globalProperties.$scrollbar = Scrollbar;
app.config.globalProperties.$viewer = viewer;
app.config.globalProperties.$session = session;
app.config.globalProperties.$api = Api;
app.config.globalProperties.$log = Log;
app.config.globalProperties.$socket = Socket;
app.config.globalProperties.$config = config;
app.config.globalProperties.$clipboard = Clipboard;
app.config.globalProperties.$isMobile = isMobile;
app.config.globalProperties.$rtl = rtl;
app.config.globalProperties.$sponsorFeatures = () => {
return config.load().finally(() => {
if (config.values.sponsor) {
return Promise.resolve();
@@ -100,35 +103,42 @@ config.update().finally(() => {
};
// Register Vuetify.
Vue.use(Vuetify);
const vuetify = new Vuetify(
{
rtl,
console.log('app', app);
const vuetify = createVuetify({
// rtl,
icons: {
iconfont: 'mdi',
values: {
...customIcons,
}
defaultSet: 'mdi',
aliases,
sets: {
mdi,
...customIcons
},
},
theme
}
);
});
console.log('vuetify', vuetify);
// Register other VueJS plugins.
Vue.use(GetTextPlugin, {
const gettext = createGettext({
translations: config.translations,
silent: true, // !config.values.debug,
defaultLanguage: Vue.config.language,
autoAddKeyAttributes: true,
defaultLanguage: app.config.globalProperties.$language,
// autoAddKeyAttributes: true,
});
app.use(gettext);
Vue.use(VueLuxon);
Vue.use(VueInfiniteScroll);
Vue.use(VueFullscreen);
Vue.use(VueFilters);
Vue.use(Components);
Vue.use(Dialogs);
Vue.use(Router);
// TODO: check it
// debugger;
// app.use(VueLuxon);
app.config.globalProperties.$luxon = VueLuxon;
app.config.globalProperties.$fullscreen = VueInfiniteScroll;
app.use(VueInfiniteScroll);
// app.use(VueFullscreen);
// app.use(VueFilters);
// app.use(Components);
installComponents(app);
// app.use(Dialogs);
installDialogs(app);
// make scroll-pos-restore compatible with bfcache
// this is required to make scroll-pos-restore work on iOS in PWA-mode
@@ -159,14 +169,13 @@ config.update().finally(() => {
localStorage.removeItem("lastScrollPosBeforePageHide");
});
app.use(vuetify);
// Configure client-side routing.
const router = new Router({
const router = createRouter({
history: createWebHistory(config.baseUri + "/library/"),
routes: Routes,
mode: "history",
base: config.baseUri + "/library/",
saveScrollPosition: true,
scrollBehavior: (to, from, savedPosition) => {
scrollBehavior(to, from, savedPosition) {
let prevScrollPos = savedPosition;
if (window.positionToRestore !== undefined) {
@@ -187,6 +196,7 @@ config.update().finally(() => {
}
},
});
app.use(router);
router.beforeEach((to, from, next) => {
if (document.querySelector(".v-dialog--active.v-dialog--fullscreen")) {
@@ -249,7 +259,7 @@ config.update().finally(() => {
}
// Start application.
Mount(Vue, PhotoPrism, router, vuetify);
Mount(app);
if (config.baseUri === "") {
offline.install();
}

2
frontend/src/app.vue
View File

@@ -33,7 +33,7 @@ export default {
},
computed: {
appClass: function () {
return [this.$route.meta.background, this.$vuetify.breakpoint.smAndDown ? "small-screen" : "large-screen", this.$route.meta.hideNav ? "hide-nav" : "show-nav"];
return [this.$route.meta.background, this.$vuetify.display.smAndDown ? "small-screen" : "large-screen", this.$route.meta.hideNav ? "hide-nav" : "show-nav"];
},
},
created() {

10
frontend/src/app/routes.js
View File

@@ -73,7 +73,7 @@ export default [
},
{
name: "help",
path: "/help*",
path: "/help/:pathMatch(.*)*",
component: Help,
meta: { title: $gettext("Help & Support"), auth: false },
},
@@ -94,7 +94,7 @@ export default [
},
{
name: "admin",
path: "/admin/*",
path: "/admin/:pathMatch(.*)*",
component: Admin,
meta: {
title: $gettext("Settings"),
@@ -298,10 +298,10 @@ export default [
},
{
name: "files",
path: "/index/files*",
path: "/index/files/:pathMatch(.*)*",
component: Browse,
meta: { title: $gettext("File Browser"), auth: true },
},
},
{
name: "hidden",
path: "/hidden",
@@ -463,7 +463,7 @@ export default [
props: { tab: 3 },
},
{
path: "*",
path: '/:pathMatch(.*)*',
redirect: "/albums",
},
];

8
frontend/src/common/vm.js
View File

@@ -19,10 +19,6 @@ export function $ngettext(msgid, plural, n) {
return vm.$ngettext(msgid, plural, n);
}
export function Mount(Vue, app, router, vuetify) {
vm = new Vue({
router,
vuetify,
render: (h) => h(app),
}).$mount("#photoprism");
export function Mount(app) {
app.mount("#photoprism");
}

14
frontend/src/component/album/clipboard.vue
View File

@@ -3,29 +3,29 @@
<v-container v-if="selection.length > 0" fluid class="pa-0">
<v-speed-dial id="t-clipboard" v-model="expanded" fixed bottom direction="top" transition="slide-y-reverse-transition" :right="!rtl" :left="rtl" :class="`p-clipboard ${!rtl ? '--ltr' : '--rtl'} p-album-clipboard`">
<template #activator>
<v-btn fab dark color="accent darken-2" class="action-menu">
<v-btn fab theme="dark" color="accent darken-2" class="action-menu">
<!-- TODO: change this icon -->
<v-icon v-if="selection.length === 0">menu</v-icon>
<span v-else class="count-clipboard">{{ selection.length }}</span>
</v-btn>
</template>
<v-btn v-if="canShare" fab dark small :title="$gettext('Share')" color="share" :disabled="selection.length !== 1" class="action-share" @click.stop="shareDialog()">
<v-btn v-if="canShare" fab theme="dark" small :title="$gettext('Share')" color="share" :disabled="selection.length !== 1" class="action-share" @click.stop="shareDialog()">
<v-icon>mdi-share-variant</v-icon>
</v-btn>
<v-btn v-if="canManage" fab dark small :title="$gettext('Edit')" color="edit" :disabled="selection.length !== 1" class="action-edit" @click.stop="editDialog()">
<v-btn v-if="canManage" fab theme="dark" small :title="$gettext('Edit')" color="edit" :disabled="selection.length !== 1" class="action-edit" @click.stop="editDialog()">
<v-icon>mdi-pencil</v-icon>
</v-btn>
<v-btn fab dark small :title="$gettext('Download')" color="download" class="action-download" :disabled="!canDownload || selection.length !== 1" @click.stop="download()">
<v-btn fab theme="dark" small :title="$gettext('Download')" color="download" class="action-download" :disabled="!canDownload || selection.length !== 1" @click.stop="download()">
<v-icon>mdi-download</v-icon>
</v-btn>
<v-btn v-if="canManage" fab dark small :title="$gettext('Add to album')" color="album" :disabled="selection.length === 0" class="action-clone" @click.stop="dialog.album = true">
<v-btn v-if="canManage" fab theme="dark" small :title="$gettext('Add to album')" color="album" :disabled="selection.length === 0" class="action-clone" @click.stop="dialog.album = true">
<v-icon>mdi-bookmark</v-icon>
</v-btn>
<v-btn v-if="canDelete && deletable.includes(context)" fab dark small color="remove" :title="$gettext('Delete')" :disabled="selection.length === 0" class="action-delete" @click.stop="dialog.delete = true">
<v-btn v-if="canDelete && deletable.includes(context)" fab theme="dark" small color="remove" :title="$gettext('Delete')" :disabled="selection.length === 0" class="action-delete" @click.stop="dialog.delete = true">
<v-icon>mdi-delete</v-icon>
</v-btn>
<v-btn fab dark small color="accent" class="action-clear" @click.stop="clearClipboard()">
<v-btn fab theme="dark" small color="accent" class="action-clear" @click.stop="clearClipboard()">
<v-icon>mdi-close</v-icon>
</v-btn>
</v-speed-dial>

6
frontend/src/component/album/toolbar.vue
View File

@@ -1,8 +1,8 @@
<template>
<v-form ref="form" lazy-validation autocomplete="off" class="p-photo-toolbar p-album-toolbar" accept-charset="UTF-8" @submit.prevent="updateQuery()">
<v-toolbar flat :dense="$vuetify.breakpoint.smAndDown" class="page-toolbar" color="secondary">
<v-toolbar flat :dense="$vuetify.display.smAndDown" class="page-toolbar" color="secondary">
<v-toolbar-title :title="album.Title">
<span class="hidden-xs-only">
<span class="hidden-xs">
<router-link :to="{ name: collectionRoute }">
{{ T(collectionTitle) }}
</router-link>
@@ -13,7 +13,7 @@
<v-spacer></v-spacer>
<v-btn icon class="hidden-xs-only action-reload" :title="$gettext('Reload')" @click.stop="refresh()">
<v-btn icon class="hidden-xs action-reload" :title="$gettext('Reload')" @click.stop="refresh()">
<v-icon>mdi-refresh</v-icon>
</v-btn>

8
frontend/src/component/auth/footer.vue
View File

@@ -2,18 +2,18 @@
<div class="auth-footer">
<footer>
<v-row align="start" class="pa-0 ma-0">
<v-col cols="12" sm="6" class="pa-0 body-2 text-selectable text-xs-center white--text text-sm-left">
<v-col cols="12" sm="6" class="pa-0 body-2 text-selectable text-center white--text text-sm-left">
{{ about }}
</v-col>
<v-col v-if="legalInfo" cols="12" sm="6" class="pa-0 body-2 text-xs-center text-sm-right white--text">
<v-col v-if="legalInfo" cols="12" sm="6" class="pa-0 body-2 text-center text-sm-right white--text">
<a v-if="legalUrl" :href="legalUrl" target="_blank" class="text-link" :style="`color: ${colors.link}!important`">{{ legalInfo }}</a>
<span v-else>{{ legalInfo }}</span>
</v-col>
<v-col v-else-if="caption" cols="12" sm="6" class="pa-0 body-2 text-selectable text-xs-center text-sm-right white--text">
<v-col v-else-if="caption" cols="12" sm="6" class="pa-0 body-2 text-selectable text-center text-sm-right white--text">
<strong>{{ caption }}</strong>
</v-col>
<v-col v-else cols="12" sm="6" class="pa-0 body-2 text-selectable text-xs-center text-sm-right white--text">
<v-col v-else cols="12" sm="6" class="pa-0 body-2 text-selectable text-center text-sm-right white--text">
<router-link to="/about" class="text-link">
<span class="white--text">Made with ❤️ in Berlin</span>
</router-link>

2
frontend/src/component/auth/header.vue
View File

@@ -1,6 +1,6 @@
<template>
<div class="auth-header">
<div id="auth-logo" class="logo text-xs-center">
<div id="auth-logo" class="logo text-center">
<img :src="$config.getIcon()" :alt="config.name" />
</div>
</div>

54
frontend/src/component/components.js
View File

@@ -47,32 +47,28 @@ import IconLivePhoto from "component/icon/live-photo.vue";
import IconSponsor from "component/icon/sponsor.vue";
import IconPrism from "component/icon/prism.vue";
const components = {};
components.install = (Vue) => {
Vue.component("PNotify", PNotify);
Vue.component("PNavigation", PNavigation);
Vue.component("PScrollTop", PScrollTop);
Vue.component("PLoadingBar", PLoadingBar);
Vue.component("PVideoPlayer", PVideoPlayer);
Vue.component("PPhotoViewer", PPhotoViewer);
Vue.component("PPhotoToolbar", PPhotoToolbar);
Vue.component("PPhotoCards", PPhotoCards);
Vue.component("PPhotoMosaic", PPhotoMosaic);
Vue.component("PPhotoList", PPhotoList);
Vue.component("PPhotoPreview", PPhotoPreview);
Vue.component("PPhotoClipboard", PPhotoClipboard);
Vue.component("PAlbumClipboard", PAlbumClipboard);
Vue.component("PAlbumToolbar", PAlbumToolbar);
Vue.component("PLabelClipboard", PLabelClipboard);
Vue.component("PFileClipboard", PFileClipboard);
Vue.component("PSubjectClipboard", PSubjectClipboard);
Vue.component("PAuthHeader", PAuthHeader);
Vue.component("PAuthFooter", PAuthFooter);
Vue.component("PAboutFooter", PAboutFooter);
Vue.component("IconLivePhoto", IconLivePhoto);
Vue.component("IconSponsor", IconSponsor);
Vue.component("IconPrism", IconPrism);
};
export default components;
export function installComponents(app) {
app.component("PNotify", PNotify);
app.component("PNavigation", PNavigation);
app.component("PScrollTop", PScrollTop);
app.component("PLoadingBar", PLoadingBar);
app.component("PVideoPlayer", PVideoPlayer);
app.component("PPhotoViewer", PPhotoViewer);
app.component("PPhotoToolbar", PPhotoToolbar);
app.component("PPhotoCards", PPhotoCards);
app.component("PPhotoMosaic", PPhotoMosaic);
app.component("PPhotoList", PPhotoList);
app.component("PPhotoPreview", PPhotoPreview);
app.component("PPhotoClipboard", PPhotoClipboard);
app.component("PAlbumClipboard", PAlbumClipboard);
app.component("PAlbumToolbar", PAlbumToolbar);
app.component("PLabelClipboard", PLabelClipboard);
app.component("PFileClipboard", PFileClipboard);
app.component("PSubjectClipboard", PSubjectClipboard);
app.component("PAuthHeader", PAuthHeader);
app.component("PAuthFooter", PAuthFooter);
app.component("PAboutFooter", PAboutFooter);
app.component("IconLivePhoto", IconLivePhoto);
app.component("IconSponsor", IconSponsor);
app.component("IconPrism", IconPrism);
}

8
frontend/src/component/file/clipboard.vue
View File

@@ -3,22 +3,22 @@
<v-container v-if="selection.length > 0" fluid class="pa-0">
<v-speed-dial id="t-clipboard" v-model="expanded" fixed bottom direction="top" transition="slide-y-reverse-transition" :right="!rtl" :left="rtl" :class="`p-clipboard ${!rtl ? '--ltr' : '--rtl'} p-file-clipboard`">
<template #activator>
<v-btn fab dark color="accent darken-2" class="action-menu">
<v-btn fab theme="dark" color="accent darken-2" class="action-menu">
<!-- TODO: change this icon -->
<v-icon v-if="selection.length === 0">menu</v-icon>
<span v-else class="count-clipboard">{{ selection.length }}</span>
</v-btn>
</template>
<v-btn v-if="$config.feature('download')" fab dark small :title="$gettext('Download')" color="download" class="action-download" :disabled="selection.length === 0" @click.stop="download()">
<v-btn v-if="$config.feature('download')" fab theme="dark" small :title="$gettext('Download')" color="download" class="action-download" :disabled="selection.length === 0" @click.stop="download()">
<v-icon>mdi-download</v-icon>
</v-btn>
<v-btn v-if="$config.feature('albums')" fab dark small :title="$gettext('Add to album')" color="album" :disabled="selection.length === 0" class="action-album" @click.stop="dialog.album = true">
<v-btn v-if="$config.feature('albums')" fab theme="dark" small :title="$gettext('Add to album')" color="album" :disabled="selection.length === 0" class="action-album" @click.stop="dialog.album = true">
<v-icon>mdi-bookmark</v-icon>
</v-btn>
<v-btn fab dark small color="accent" class="action-clear" @click.stop="clearClipboard()">
<v-btn fab theme="dark" small color="accent" class="action-clear" @click.stop="clearClipboard()">
<v-icon>mdi-close</v-icon>
</v-btn>
</v-speed-dial>

6
frontend/src/component/footer.vue
View File

@@ -2,7 +2,7 @@
<v-card flat tile class="application footer">
<v-card-actions class="footer-actions">
<v-row align="start" class="pt-6">
<v-col cols="12" sm="6" class="px-0 pb-2 body-1 text-selectable text-xs-left">
<v-col cols="12" sm="6" class="px-0 pb-2 body-1 text-selectable text-left">
<strong
><router-link to="/about" class="text-link text-selectable">
{{ about }}{{ getMembership() }}
@@ -13,8 +13,8 @@
>
</v-col>
<v-col cols="12" sm="6" class="px-0 pb-2 body-1 text-xs-center text-sm-right">
<div class="hidden-xs-only">
<v-col cols="12" sm="6" class="px-0 pb-2 body-1 text-center text-sm-right">
<div class="hidden-xs">
<a href="https://raw.githubusercontent.com/photoprism/photoprism/develop/NOTICE" target="_blank" class="text-link">3rd-party software packages</a>
<a href="https://www.photoprism.app/about/team/" target="_blank" class="body-link">© 2018-2024 PhotoPrism UG</a>
</div>

8
frontend/src/component/label/clipboard.vue
View File

@@ -3,7 +3,7 @@
<v-container v-if="selection.length > 0" fluid class="pa-0">
<v-speed-dial id="t-clipboard" v-model="expanded" fixed bottom direction="top" transition="slide-y-reverse-transition" :right="!rtl" :left="rtl" :class="`p-clipboard ${!rtl ? '--ltr' : '--rtl'} p-label-clipboard`">
<template #activator>
<v-btn fab dark color="accent darken-2" class="action-menu">
<v-btn fab theme="dark" color="accent darken-2" class="action-menu">
<!-- TODO: change this icon -->
<v-icon v-if="selection.length === 0">menu</v-icon>
<span v-else class="count-clipboard">{{ selection.length }}</span>
@@ -23,14 +23,14 @@
TODO: change this icon
<v-icon>cloud_download</v-icon>
</v-btn -->
<v-btn fab dark small :title="$gettext('Add to album')" color="album" :disabled="!canAddAlbums || selection.length === 0" class="action-album" @click.stop="dialog.album = true">
<v-btn fab theme="dark" small :title="$gettext('Add to album')" color="album" :disabled="!canAddAlbums || selection.length === 0" class="action-album" @click.stop="dialog.album = true">
<v-icon>mdi-bookmark</v-icon>
</v-btn>
<v-btn fab dark small color="remove" :title="$gettext('Delete')" :disabled="!canManage || selection.length === 0" class="action-delete" @click.stop="dialog.delete = true">
<v-btn fab theme="dark" small color="remove" :title="$gettext('Delete')" :disabled="!canManage || selection.length === 0" class="action-delete" @click.stop="dialog.delete = true">
<v-icon>mdi-delete</v-icon>
</v-btn>
<v-btn fab dark small color="accent" class="action-clear" @click.stop="clearClipboard()">
<v-btn fab theme="dark" small color="accent" class="action-clear" @click.stop="clearClipboard()">
<v-icon>mdi-close</v-icon>
</v-btn>
</v-speed-dial>

14
frontend/src/component/navigation.vue
View File

@@ -1,35 +1,35 @@
<template>
<div id="p-navigation" :class="{ 'sidenav-visible': drawer }">
<template v-if="visible && $vuetify.breakpoint.smAndDown">
<v-toolbar dark fixed flat dense color="navigation darken-1" class="nav-small elevation-2" @click.stop.prevent>
<template v-if="visible && $vuetify.display.smAndDown">
<v-toolbar theme="dark" fixed flat dense color="navigation darken-1" class="nav-small elevation-2" @click.stop.prevent>
<v-avatar class="nav-avatar" tile :size="28" :class="{ clickable: auth }" @click.stop.prevent="showNavigation()">
<img :src="appIcon" :alt="config.name" :class="{ 'animate-hue': indexing }" />
</v-avatar>
<v-toolbar-title class="nav-title">
<span :class="{ clickable: auth }" @click.stop.prevent="showNavigation()">{{ page.title }}</span>
</v-toolbar-title>
<v-btn fab dark :ripple="false" color="transparent" class="mobile-menu-trigger elevation-0" @click.stop.prevent="speedDial = true">
<v-btn fab theme="dark" :ripple="false" color="transparent" class="mobile-menu-trigger elevation-0" @click.stop.prevent="speedDial = true">
<!-- TODO: change icon -->
<v-icon dark>more_vert</v-icon>
</v-btn>
</v-toolbar>
</template>
<template v-else-if="visible && !auth">
<v-toolbar dark flat dense color="navigation darken-1" class="nav-small">
<v-toolbar theme="dark" flat dense color="navigation darken-1" class="nav-small">
<v-avatar class="nav-avatar" tile :size="28">
<img :src="appIcon" :alt="config.name" />
</v-avatar>
<v-toolbar-title class="nav-title">
{{ page.title }}
</v-toolbar-title>
<v-btn fab dark :ripple="false" color="transparent" class="mobile-menu-trigger elevation-0" @click.stop.prevent="speedDial = true">
<v-btn fab theme="dark" :ripple="false" color="transparent" class="mobile-menu-trigger elevation-0" @click.stop.prevent="speedDial = true">
<!-- TODO: change icon -->
<v-icon dark>more_vert</v-icon>
</v-btn>
</v-toolbar>
</template>
<v-navigation-drawer v-if="visible && auth" v-model="drawer" :mini-variant="isMini" :width="270" :mobile-breakpoint="960" :mini-variant-width="80" class="nav-sidebar navigation p-flex-nav" fixed dark app :right="rtl">
<v-toolbar flat :dense="$vuetify.breakpoint.smAndDown">
<v-navigation-drawer v-if="visible && auth" v-model="drawer" :mini-variant="isMini" :width="270" :mobile-breakpoint="960" :mini-variant-width="80" class="nav-sidebar navigation p-flex-nav" fixed theme="dark" app :right="rtl">
<v-toolbar flat :dense="$vuetify.display.smAndDown">
<v-list class="navigation-home">
<v-list-item class="nav-logo">
<v-list-item-avatar class="nav-avatar clickable" @click.stop.prevent="goHome">

2
frontend/src/component/photo-viewer.vue
View File

@@ -10,7 +10,7 @@
<div class="pswp__ui pswp__ui--hidden">
<div class="pswp__top-bar">
<div class="pswp__taken hidden-xs-only">
<div class="pswp__taken hidden-xs">
{{ formatDate(item.TakenAtLocal) }}
</div>

16
frontend/src/component/photo/cards.vue
View File

@@ -28,7 +28,9 @@
<div class="pa-6 card-details">
<div>
<h3 class="body-2 mb-2" :title="photo.Title">
{{ photo.Title | truncate(80) }}
<!-- TODO: change this filter -->
<!-- {{ photo.Title | truncate(80) }} -->
{{ photo.Title }}
</h3>
<div v-if="photo.Description" class="caption mb-2">
{{ photo.Description }}
@@ -128,13 +130,13 @@
<v-card-actions v-if="!isSharedView && photo.Quality < 3 && context === 'review'" class="card-details pa-0">
<v-row align="center">
<v-col cols="6" class="text-xs-center pa-1">
<v-btn color="card darken-1" small depressed dark block :rounded="false" class="action-archive text-xs-center" :title="$gettext('Archive')" @click.stop="photo.archive()">
<v-col cols="6" class="text-center pa-1">
<v-btn color="card darken-1" small depressed theme="dark" block :rounded="false" class="action-archive text-center" :title="$gettext('Archive')" @click.stop="photo.archive()">
<v-icon dark>mdi-close</v-icon>
</v-btn>
</v-col>
<v-col cols="6" class="text-xs-center pa-1">
<v-btn color="card darken-1" small depressed dark block :rounded="false" class="action-approve text-xs-center" :title="$gettext('Approve')" @click.stop="photo.approve()">
<v-col cols="6" class="text-center pa-1">
<v-btn color="card darken-1" small depressed theme="dark" block :rounded="false" class="action-approve text-center" :title="$gettext('Approve')" @click.stop="photo.approve()">
<!-- TODO: change this icon -->
<v-icon dark>check</v-icon>
</v-btn>
@@ -146,7 +148,9 @@
<div>
<h3 class="body-2 mb-2" :title="photo.Title">
<button class="action-title-edit" :data-uid="photo.UID" @click.exact="isSharedView ? openPhoto(index) : editPhoto(index)">
{{ photo.Title | truncate(80) }}
<!-- TODO: change this filter -->
<!-- {{ photo.Title | truncate(80) }} -->
{{ photo.Title }}
</button>
</h3>
<div v-if="photo.Description" class="caption mb-2" :title="$gettext('Description')">

24
frontend/src/component/photo/clipboard.vue
View File

@@ -3,46 +3,46 @@
<v-container v-if="selection.length > 0" fluid class="pa-0">
<v-speed-dial id="t-clipboard" v-model="expanded" fixed bottom direction="top" transition="slide-y-reverse-transition" :right="!rtl" :left="rtl" :class="`p-clipboard ${!rtl ? '--ltr' : '--rtl'} p-photo-clipboard`">
<template #activator>
<v-btn fab dark color="accent darken-2" class="action-menu">
<v-btn fab theme="dark" color="accent darken-2" class="action-menu">
<!-- TODO: change this icon -->
<v-icon v-if="selection.length === 0">menu</v-icon>
<span v-else class="count-clipboard">{{ selection.length }}</span>
</v-btn>
</template>
<v-btn v-if="canShare && context !== 'archive' && context !== 'hidden' && context !== 'review'" fab dark small :title="$gettext('Share')" color="share" :disabled="selection.length === 0 || busy" class="action-share" @click.stop="dialog.share = true">
<v-btn v-if="canShare && context !== 'archive' && context !== 'hidden' && context !== 'review'" fab theme="dark" small :title="$gettext('Share')" color="share" :disabled="selection.length === 0 || busy" class="action-share" @click.stop="dialog.share = true">
<v-icon>mdi-cloud</v-icon>
</v-btn>
<v-btn v-if="canManage && context === 'review'" fab dark small :title="$gettext('Approve')" color="share" :disabled="selection.length === 0 || busy" class="action-approve" @click.stop="batchApprove">
<v-btn v-if="canManage && context === 'review'" fab theme="dark" small :title="$gettext('Approve')" color="share" :disabled="selection.length === 0 || busy" class="action-approve" @click.stop="batchApprove">
<!-- TODO: change this icon -->
<v-icon>check</v-icon>
</v-btn>
<v-btn v-if="canEdit" fab dark small :title="$gettext('Edit')" color="edit" :disabled="selection.length === 0 || busy" class="action-edit" @click.stop="edit">
<v-btn v-if="canEdit" fab theme="dark" small :title="$gettext('Edit')" color="edit" :disabled="selection.length === 0 || busy" class="action-edit" @click.stop="edit">
<v-icon>mdi-pencil</v-icon>
</v-btn>
<v-btn v-if="canTogglePrivate && context !== 'archive' && context !== 'hidden'" fab dark small :title="$gettext('Change private flag')" color="private" :disabled="selection.length === 0 || busy" class="action-private" @click.stop="batchPrivate">
<v-btn v-if="canTogglePrivate && context !== 'archive' && context !== 'hidden'" fab theme="dark" small :title="$gettext('Change private flag')" color="private" :disabled="selection.length === 0 || busy" class="action-private" @click.stop="batchPrivate">
<v-icon>mdi-lock</v-icon>
</v-btn>
<v-btn v-if="canDownload && context !== 'archive'" fab dark small :title="$gettext('Download')" :disabled="busy" color="download" class="action-download" @click.stop="download()">
<v-btn v-if="canDownload && context !== 'archive'" fab theme="dark" small :title="$gettext('Download')" :disabled="busy" color="download" class="action-download" @click.stop="download()">
<v-icon>mdi-download</v-icon>
</v-btn>
<v-btn v-if="canEditAlbum && context !== 'archive' && context !== 'hidden'" fab dark small :title="$gettext('Add to album')" color="album" :disabled="selection.length === 0 || busy" class="action-album" @click.stop="dialog.album = true">
<v-btn v-if="canEditAlbum && context !== 'archive' && context !== 'hidden'" fab theme="dark" small :title="$gettext('Add to album')" color="album" :disabled="selection.length === 0 || busy" class="action-album" @click.stop="dialog.album = true">
<v-icon>mdi-bookmark</v-icon>
</v-btn>
<v-btn v-if="canArchive && !isAlbum && context !== 'archive' && context !== 'hidden'" fab dark small color="remove" :title="$gettext('Archive')" :disabled="selection.length === 0 || busy" class="action-archive" @click.stop="archivePhotos">
<v-btn v-if="canArchive && !isAlbum && context !== 'archive' && context !== 'hidden'" fab theme="dark" small color="remove" :title="$gettext('Archive')" :disabled="selection.length === 0 || busy" class="action-archive" @click.stop="archivePhotos">
<v-icon>mdi-package-down</v-icon>
</v-btn>
<v-btn v-if="canArchive && !album && context === 'archive' && context !== 'hidden'" fab dark small color="restore" :title="$gettext('Restore')" :disabled="selection.length === 0 || busy" class="action-restore" @click.stop="batchRestore">
<v-btn v-if="canArchive && !album && context === 'archive' && context !== 'hidden'" fab theme="dark" small color="restore" :title="$gettext('Restore')" :disabled="selection.length === 0 || busy" class="action-restore" @click.stop="batchRestore">
<!-- TODO: change this icon -->
<v-icon>unarchive</v-icon>
</v-btn>
<v-btn v-if="canEditAlbum && isAlbum" fab dark small :title="$gettext('Remove from album')" color="remove" :disabled="selection.length === 0 || busy" class="action-remove" @click.stop="removeFromAlbum">
<v-btn v-if="canEditAlbum && isAlbum" fab theme="dark" small :title="$gettext('Remove from album')" color="remove" :disabled="selection.length === 0 || busy" class="action-remove" @click.stop="removeFromAlbum">
<v-icon>mdi-eject</v-icon>
</v-btn>
<v-btn v-if="canDelete && !album && context === 'archive'" fab dark small :title="$gettext('Delete')" color="remove" :disabled="selection.length === 0 || busy" class="action-delete" @click.stop="deletePhotos">
<v-btn v-if="canDelete && !album && context === 'archive'" fab theme="dark" small :title="$gettext('Delete')" color="remove" :disabled="selection.length === 0 || busy" class="action-delete" @click.stop="deletePhotos">
<v-icon>mdi-delete</v-icon>
</v-btn>
<v-btn fab dark small color="accent" class="action-clear" @click.stop="clearClipboard()">
<v-btn fab theme="dark" small color="accent" class="action-clear" @click.stop="clearClipboard()">
<v-icon>mdi-close</v-icon>
</v-btn>
</v-speed-dial>

16
frontend/src/component/photo/list.vue
View File

@@ -26,19 +26,19 @@
<thead>
<tr>
<th class="p-col-select" />
<th class="text-xs-left">
<th class="text-left">
{{ $gettext("Title") }}
</th>
<th class="text-xs-left hidden-xs-only">
<th class="text-left hidden-xs">
{{ $gettext("Taken") }}
</th>
<th class="text-xs-left hidden-sm-and-down">
<th class="text-left hidden-sm-and-down">
{{ $gettext("Camera") }}
</th>
<th class="text-xs-left hidden-xs-only">
<th class="text-left hidden-xs">
{{ showName ? $gettext("Name") : $gettext("Location") }}
</th>
<th class="text-xs-center hidden-xs-only" />
<th class="text-center hidden-xs" />
</tr>
</thead>
<tbody>
@@ -75,7 +75,7 @@
<td class="p-photo-desc clickable" :data-uid="photo.UID" @click.exact="isSharedView ? openPhoto(index) : editPhoto(index)">
{{ photo.Title }}
</td>
<td class="p-photo-desc hidden-xs-only" :title="photo.getDateString()">
<td class="p-photo-desc hidden-xs" :title="photo.getDateString()">
<button @click.stop.prevent="openDate(index)">
{{ photo.shortDateString() }}
</button>
@@ -83,7 +83,7 @@
<td class="p-photo-desc hidden-sm-and-down">
<button @click.stop.prevent="editPhoto(index)">{{ photo.CameraMake }} {{ photo.CameraModel }}</button>
</td>
<td class="p-photo-desc hidden-xs-only">
<td class="p-photo-desc hidden-xs">
<button v-if="filter.order === 'name'" :title="$gettext('Name')" @click.exact="downloadFile(index)">
{{ photo.FileName }}
</button>
@@ -95,7 +95,7 @@
</span>
</td>
<template v-if="!isSharedView">
<td class="text-xs-center">
<td class="text-center">
<template v-if="index < firstVisibleElementIndex || index > lastVisibileElementIndex">
<div v-if="hidePrivate" class="v-btn v-btn--icon v-btn--small" />
<div class="v-btn v-btn--icon v-btn--small" />

4
frontend/src/component/photo/toolbar.vue
View File

@@ -1,6 +1,6 @@
<template>
<v-form ref="form" lazy-validation autocomplete="off" class="p-photo-toolbar" accept-charset="UTF-8" :class="{ embedded: embedded }" @submit.prevent="updateQuery()">
<v-toolbar flat :dense="$vuetify.breakpoint.smAndDown" :height="embedded ? 45 : undefined" class="page-toolbar" color="secondary">
<v-toolbar flat :dense="$vuetify.display.smAndDown" :height="embedded ? 45 : undefined" class="page-toolbar" color="secondary">
<template v-if="!embedded">
<v-text-field
:value="filter.q"
@@ -35,7 +35,7 @@
<v-icon>location_off</v-icon>
</v-btn>
<v-btn icon class="hidden-xs-only action-reload" :title="$gettext('Reload')" @click.stop="refresh()">
<v-btn icon class="hidden-xs action-reload" :title="$gettext('Reload')" @click.stop="refresh()">
<v-icon>mdi-refresh</v-icon>
</v-btn>

2
frontend/src/component/scroll-top.vue
View File

@@ -1,6 +1,6 @@
<template>
<transition name="fade-transition">
<v-btn v-if="show" color="transparent" dark fab fixed class="p-scroll-top" @click.stop="scrollToTop">
<v-btn v-if="show" color="transparent" theme="dark" fab fixed class="p-scroll-top" @click.stop="scrollToTop">
<v-icon>mdi-arrow-up</v-icon>
</v-btn>
</transition>

8
frontend/src/component/subject/clipboard.vue
View File

@@ -3,21 +3,21 @@
<v-container v-if="selection.length > 0" fluid class="pa-0">
<v-speed-dial id="t-clipboard" v-model="expanded" fixed bottom direction="top" transition="slide-y-reverse-transition" :right="!rtl" :left="rtl" :class="`p-clipboard ${!rtl ? '--ltr' : '--rtl'} p-subject-clipboard`">
<template #activator>
<v-btn fab dark color="accent darken-2" class="action-menu">
<v-btn fab theme="dark" color="accent darken-2" class="action-menu">
<v-icon v-if="selection.length === 0">mdi-menu</v-icon>
<span v-else class="count-clipboard">{{ selection.length }}</span>
</v-btn>
</template>
<v-btn fab dark small :title="$gettext('Download')" color="download" class="action-download" :disabled="!canDownload || selection.length !== 1" @click.stop="download()">
<v-btn fab theme="dark" small :title="$gettext('Download')" color="download" class="action-download" :disabled="!canDownload || selection.length !== 1" @click.stop="download()">
<v-icon>mdi-download</v-icon>
</v-btn>
<v-btn v-if="canAddAlbums" fab dark small :title="$gettext('Add to album')" color="album" :disabled="selection.length === 0" class="action-album" @click.stop="dialog.album = true">
<v-btn v-if="canAddAlbums" fab theme="dark" small :title="$gettext('Add to album')" color="album" :disabled="selection.length === 0" class="action-album" @click.stop="dialog.album = true">
<v-icon>mdi-bookmark</v-icon>
</v-btn>
<v-btn fab dark small color="accent" class="action-clear" @click.stop="clearClipboard()">
<v-btn fab theme="dark" small color="accent" class="action-clear" @click.stop="clearClipboard()">
<v-icon>mdi-close</v-icon>
</v-btn>
</v-speed-dial>

1
frontend/src/css/app.css
View File

@@ -23,7 +23,6 @@ Additional information can be found in our Developer Guide:
*/
@import url("vendor/icons/material-design-icons.css");
@import url("../../node_modules/vuetify/dist/vuetify.min.css");
@import url("../../node_modules/maplibre-gl/dist/maplibre-gl.css");
@import url("typography.css");

202
frontend/src/css/vendor/icons/LICENSE vendored
View File

@@ -1,202 +0,0 @@
Apache License
Version 2.0, January 2004
http://www.apache.org/licenses/
TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION
1. Definitions.
"License" shall mean the terms and conditions for use, reproduction,
and distribution as defined by Sections 1 through 9 of this document.
"Licensor" shall mean the copyright owner or entity authorized by
the copyright owner that is granting the License.
"Legal Entity" shall mean the union of the acting entity and all
other entities that control, are controlled by, or are under common
control with that entity. For the purposes of this definition,
"control" means (i) the power, direct or indirect, to cause the
direction or management of such entity, whether by contract or
otherwise, or (ii) ownership of fifty percent (50%) or more of the
outstanding shares, or (iii) beneficial ownership of such entity.
"You" (or "Your") shall mean an individual or Legal Entity
exercising permissions granted by this License.
"Source" form shall mean the preferred form for making modifications,
including but not limited to software source code, documentation
source, and configuration files.
"Object" form shall mean any form resulting from mechanical
transformation or translation of a Source form, including but
not limited to compiled object code, generated documentation,
and conversions to other media types.
"Work" shall mean the work of authorship, whether in Source or
Object form, made available under the License, as indicated by a
copyright notice that is included in or attached to the work
(an example is provided in the Appendix below).
"Derivative Works" shall mean any work, whether in Source or Object
form, that is based on (or derived from) the Work and for which the
editorial revisions, annotations, elaborations, or other modifications
represent, as a whole, an original work of authorship. For the purposes
of this License, Derivative Works shall not include works that remain
separable from, or merely link (or bind by name) to the interfaces of,
the Work and Derivative Works thereof.
"Contribution" shall mean any work of authorship, including
the original version of the Work and any modifications or additions
to that Work or Derivative Works thereof, that is intentionally
submitted to Licensor for inclusion in the Work by the copyright owner
or by an individual or Legal Entity authorized to submit on behalf of
the copyright owner. For the purposes of this definition, "submitted"
means any form of electronic, verbal, or written communication sent
to the Licensor or its representatives, including but not limited to
communication on electronic mailing lists, source code control systems,
and issue tracking systems that are managed by, or on behalf of, the
Licensor for the purpose of discussing and improving the Work, but
excluding communication that is conspicuously marked or otherwise
designated in writing by the copyright owner as "Not a Contribution."
"Contributor" shall mean Licensor and any individual or Legal Entity
on behalf of whom a Contribution has been received by Licensor and
subsequently incorporated within the Work.
2. Grant of Copyright License. Subject to the terms and conditions of
this License, each Contributor hereby grants to You a perpetual,
worldwide, non-exclusive, no-charge, royalty-free, irrevocable
copyright license to reproduce, prepare Derivative Works of,
publicly display, publicly perform, sublicense, and distribute the
Work and such Derivative Works in Source or Object form.
3. Grant of Patent License. Subject to the terms and conditions of
this License, each Contributor hereby grants to You a perpetual,
worldwide, non-exclusive, no-charge, royalty-free, irrevocable
(except as stated in this section) patent license to make, have made,
use, offer to sell, sell, import, and otherwise transfer the Work,
where such license applies only to those patent claims licensable
by such Contributor that are necessarily infringed by their
Contribution(s) alone or by combination of their Contribution(s)
with the Work to which such Contribution(s) was submitted. If You
institute patent litigation against any entity (including a
cross-claim or counterclaim in a lawsuit) alleging that the Work
or a Contribution incorporated within the Work constitutes direct
or contributory patent infringement, then any patent licenses
granted to You under this License for that Work shall terminate
as of the date such litigation is filed.
4. Redistribution. You may reproduce and distribute copies of the
Work or Derivative Works thereof in any medium, with or without
modifications, and in Source or Object form, provided that You
meet the following conditions:
(a) You must give any other recipients of the Work or
Derivative Works a copy of this License; and
(b) You must cause any modified files to carry prominent notices
stating that You changed the files; and
(c) You must retain, in the Source form of any Derivative Works
that You distribute, all copyright, patent, trademark, and
attribution notices from the Source form of the Work,
excluding those notices that do not pertain to any part of
the Derivative Works; and
(d) If the Work includes a "NOTICE" text file as part of its
distribution, then any Derivative Works that You distribute must
include a readable copy of the attribution notices contained
within such NOTICE file, excluding those notices that do not
pertain to any part of the Derivative Works, in at least one
of the following places: within a NOTICE text file distributed
as part of the Derivative Works; within the Source form or
documentation, if provided along with the Derivative Works; or,
within a display generated by the Derivative Works, if and
wherever such third-party notices normally appear. The contents
of the NOTICE file are for informational purposes only and
do not modify the License. You may add Your own attribution
notices within Derivative Works that You distribute, alongside
or as an addendum to the NOTICE text from the Work, provided
that such additional attribution notices cannot be construed
as modifying the License.
You may add Your own copyright statement to Your modifications and
may provide additional or different license terms and conditions
for use, reproduction, or distribution of Your modifications, or
for any such Derivative Works as a whole, provided Your use,
reproduction, and distribution of the Work otherwise complies with
the conditions stated in this License.
5. Submission of Contributions. Unless You explicitly state otherwise,
any Contribution intentionally submitted for inclusion in the Work
by You to the Licensor shall be under the terms and conditions of
this License, without any additional terms or conditions.
Notwithstanding the above, nothing herein shall supersede or modify
the terms of any separate license agreement you may have executed
with Licensor regarding such Contributions.
6. Trademarks. This License does not grant permission to use the trade
names, trademarks, service marks, or product names of the Licensor,
except as required for reasonable and customary use in describing the
origin of the Work and reproducing the content of the NOTICE file.
7. Disclaimer of Warranty. Unless required by applicable law or
agreed to in writing, Licensor provides the Work (and each
Contributor provides its Contributions) on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or
implied, including, without limitation, any warranties or conditions
of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A
PARTICULAR PURPOSE. You are solely responsible for determining the
appropriateness of using or redistributing the Work and assume any
risks associated with Your exercise of permissions under this License.
8. Limitation of Liability. In no event and under no legal theory,
whether in tort (including negligence), contract, or otherwise,
unless required by applicable law (such as deliberate and grossly
negligent acts) or agreed to in writing, shall any Contributor be
liable to You for damages, including any direct, indirect, special,
incidental, or consequential damages of any character arising as a
result of this License or out of the use or inability to use the
Work (including but not limited to damages for loss of goodwill,
work stoppage, computer failure or malfunction, or any and all
other commercial damages or losses), even if such Contributor
has been advised of the possibility of such damages.
9. Accepting Warranty or Additional Liability. While redistributing
the Work or Derivative Works thereof, You may choose to offer,
and charge a fee for, acceptance of support, warranty, indemnity,
or other liability obligations and/or rights consistent with this
License. However, in accepting such obligations, You may act only
on Your own behalf and on Your sole responsibility, not on behalf
of any other Contributor, and only if You agree to indemnify,
defend, and hold each Contributor harmless for any liability
incurred by, or claims asserted against, such Contributor by reason
of your accepting any such warranty or additional liability.
END OF TERMS AND CONDITIONS
APPENDIX: How to apply the Apache License to your work.
To apply the Apache License to your work, attach the following
boilerplate notice, with the fields enclosed by brackets "[]"
replaced with your own identifying information. (Don't include
the brackets!) The text should be enclosed in the appropriate
comment syntax for the file format. We also recommend that a
file or class name and description of purpose be included on the
same "printed page" as the copyright notice for easier
identification within third-party archives.
Copyright [yyyy] [name of copyright owner]
Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at
http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.

BIN
frontend/src/css/vendor/icons/fonts/MaterialIcons-Regular.eot vendored
View File

Binary file not shown.

2195
frontend/src/css/vendor/icons/fonts/MaterialIcons-Regular.json vendored
View File

File diff suppressed because it is too large Load Diff

BIN
frontend/src/css/vendor/icons/fonts/MaterialIcons-Regular.ttf vendored
View File

Binary file not shown.

BIN
frontend/src/css/vendor/icons/fonts/MaterialIcons-Regular.woff vendored
View File

Binary file not shown.

BIN
frontend/src/css/vendor/icons/fonts/MaterialIcons-Regular.woff2 vendored
View File

Binary file not shown.

4420
frontend/src/css/vendor/icons/material-design-icons.css vendored
View File

File diff suppressed because it is too large Load Diff

24
frontend/src/dialog/account/apps.vue
View File

@@ -4,12 +4,12 @@
<v-card raised elevation="24">
<v-card-title class="pa-2">
<v-row class="pa-2">
<v-col cols="9" class="text-xs-left">
<v-col cols="9" class="text-left">
<h3 class="headline pa-0">
<translate>Apps and Devices</translate>
</h3>
</v-col>
<v-col cols="3" class="text-xs-right">
<v-col cols="3" class="text-right">
<v-icon v-if="action === 'add'" size="28" color="primary">mdi-plus</v-icon>
<!-- TODO: change this icon -->
<v-icon v-else-if="action === 'copy'" size="28" color="primary">password</v-icon>
@@ -52,7 +52,7 @@
</v-card-text>
<v-card-actions class="pa-2">
<v-row class="pa-2">
<v-col cols="12" class="text-xs-right">
<v-col cols="12" class="text-right">
<v-btn depressed color="secondary-light" class="action-back ml-0" @click.stop="onBack">
<translate>Back</translate>
</v-btn>
@@ -91,7 +91,7 @@
</v-card-text>
<v-card-actions class="pa-2">
<v-row class="pa-2">
<v-col cols="12" class="text-xs-right">
<v-col cols="12" class="text-right">
<v-btn depressed color="secondary-light" class="action-close ml-0" @click.stop="close">
<translate>Close</translate>
</v-btn>
@@ -140,7 +140,7 @@
</v-card-text>
<v-card-actions class="pa-2">
<v-row class="pa-2">
<v-col cols="12" class="text-xs-right">
<v-col cols="12" class="text-right">
<v-btn depressed color="secondary-light" class="action-cancel ml-0" @click.stop="onCancel">
<translate>Cancel</translate>
</v-btn>
@@ -159,19 +159,19 @@
<v-data-table v-model="selected" :headers="listColumns" :items="results" hide-default-footer class="elevation-0 user-results list-view" item-key="ID" :no-data-text="$gettext('Nothing was found.')">
<template #item="props">
<tr :data-name="props.item.ClientName">
<td class="text-selectable text-xs-left">
<td class="text-selectable text-left">
{{ props.item.ClientName }}
</td>
<td class="text-xs-left hidden-xs-only" nowrap>
<td class="text-left hidden-xs" nowrap>
{{ scopeInfo(props.item.AuthScope) }}
</td>
<td class="text-xs-left" nowrap>
<td class="text-left" nowrap>
{{ formatDateTime(props.item.LastActive) }}
</td>
<td class="text-xs-left hidden-sm-and-down" nowrap>
<td class="text-left hidden-sm-and-down" nowrap>
{{ formatDate(props.item.Expires) }}
</td>
<td class="text-xs-right" nowrap>
<td class="text-right" nowrap>
<v-btn icon small text :ripple="false" class="action-remove action-secondary" color="transparent" @click.stop.prevent="onRevoke(props.item)">
<v-icon color="secondary-dark">mdi-delete</v-icon>
</v-btn>
@@ -184,7 +184,7 @@
</v-card-text>
<v-card-actions class="pa-2">
<v-row class="pa-2">
<v-col cols="12" class="text-xs-right">
<v-col cols="12" class="text-right">
<v-btn depressed color="secondary-light" class="action-close ml-0" @click.stop="close">
<translate>Close</translate>
</v-btn>
@@ -249,7 +249,7 @@ export default {
{ text: this.$gettext("Name"), value: "ID", sortable: false, align: "left" },
{
text: this.$gettext("Scope"),
class: "hidden-xs-only",
class: "hidden-xs",
value: "AuthScope",
sortable: false,
align: "left",

16
frontend/src/dialog/account/passcode.vue
View File

@@ -4,12 +4,12 @@
<v-card raised elevation="24">
<v-card-title class="pa-2">
<v-row class="pa-2">
<v-col cols="10" class="text-xs-left">
<v-col cols="10" class="text-left">
<h3 class="headline pa-0">
<translate>2-Factor Authentication</translate>
</h3>
</v-col>
<v-col cols="2" class="text-xs-right">
<v-col cols="2" class="text-right">
<!-- TODO: change this icon -->
<v-icon v-if="page === 'setup'" size="28" color="primary">gpp_maybe</v-icon>
<!-- TODO: change this icon -->
@@ -57,7 +57,7 @@
</v-card-text>
<v-card-actions class="pa-2">
<v-row class="pa-2">
<v-col cols="12" class="text-xs-right">
<v-col cols="12" class="text-right">
<v-btn depressed color="secondary-light" class="action-close ml-0" @click.stop="close">
<translate>Close</translate>
</v-btn>
@@ -80,7 +80,7 @@
</v-col>
</v-row>
<v-row>
<v-col cols="12" class="pa-2 subtitle-1 text-xs-center">
<v-col cols="12" class="pa-2 subtitle-1 text-center">
<pre class="clickable" @click.stop.prevent="copyText(key.Secret)">{{ key.Secret }}</pre>
</v-col>
<v-col cols="12" class="pa-2">
@@ -110,7 +110,7 @@
</v-card-text>
<v-card-actions class="pa-2">
<v-row class="pa-2">
<v-col cols="12" class="text-xs-right">
<v-col cols="12" class="text-right">
<v-btn depressed color="secondary-light" class="action-cancel ml-0" @click.stop="close">
<translate>Cancel</translate>
</v-btn>
@@ -154,7 +154,7 @@
</v-card-text>
<v-card-actions class="pa-2">
<v-row class="pa-2">
<v-col cols="12" class="text-xs-right">
<v-col cols="12" class="text-right">
<v-btn depressed color="secondary-light" class="action-cancel ml-0" @click.stop="close">
<translate>Cancel</translate>
</v-btn>
@@ -208,7 +208,7 @@
</v-card-text>
<v-card-actions class="pa-2">
<v-row class="pa-2">
<v-col cols="12" class="text-xs-right">
<v-col cols="12" class="text-right">
<v-btn depressed color="primary-button" class="action-deactivate white--text compact ml-0" :disabled="setupDisabled()" @click.stop="onDeactivate">
<translate>Deactivate</translate>
</v-btn>
@@ -230,7 +230,7 @@
</v-card-text>
<v-card-actions class="pa-2">
<v-row class="pa-2">
<v-col cols="12" class="text-xs-right">
<v-col cols="12" class="text-right">
<v-btn depressed color="secondary-light" class="action-close mr-0" @click.stop="close">
<translate>Close</translate>
</v-btn>

6
frontend/src/dialog/account/password.vue
View File

@@ -4,12 +4,12 @@
<v-card raised elevation="24">
<v-card-title class="pa-2">
<v-row class="pa-2">
<v-col cols="9" class="text-xs-left">
<v-col cols="9" class="text-left">
<h3 class="headline pa-0">
<translate>Change Password</translate>
</h3>
</v-col>
<v-col cols="3" class="text-xs-right">
<v-col cols="3" class="text-right">
<v-icon size="28" color="primary">mdi-lock</v-icon>
</v-col>
</v-row>
@@ -86,7 +86,7 @@
</v-card-text>
<v-card-actions class="pt-1 pb-2 px-2">
<v-row class="pa-2">
<v-col cols="12" class="text-xs-right">
<v-col cols="12" class="text-right">
<v-btn depressed color="secondary-light" class="action-cancel ml-0" @click.stop="close">
<translate>Cancel</translate>
</v-btn>

8
frontend/src/dialog/album/delete.vue
View File

@@ -3,19 +3,19 @@
<v-card raised elevation="24">
<v-container fluid class="pb-2 pr-2 pl-2">
<v-row>
<v-col cols="3" class="text-xs-center">
<v-col cols="3" class="text-center">
<v-icon size="54" color="secondary-dark lighten-1">mdi-delete-outline</v-icon>
</v-col>
<v-col cols="9" class="text-xs-left" align-self="center">
<v-col cols="9" class="text-left" align-self="center">
<div class="subtitle-1 pr-1">
<translate key="Are you sure you want to delete these albums?">Are you sure you want to delete these albums?</translate>
</div>
</v-col>
<v-col cols="12" class="text-xs-right pt-6">
<v-col cols="12" class="text-right pt-6">
<v-btn depressed color="secondary-light" class="action-cancel" @click.stop="cancel">
<translate key="Cancel">Cancel</translate>
</v-btn>
<v-btn color="primary-button" depressed dark class="action-confirm" @click.stop="confirm">
<v-btn color="primary-button" depressed theme="dark" class="action-confirm" @click.stop="confirm">
<translate key="Delete">Delete</translate>
</v-btn>
</v-col>

4
frontend/src/dialog/album/edit.vue
View File

@@ -44,11 +44,11 @@
</v-card-text>
<v-card-actions class="pt-0 px-6">
<v-row class="pa-2">
<v-col cols="12" class="text-xs-right">
<v-col cols="12" class="text-right">
<v-btn depressed color="secondary-light" class="action-cancel" @click.stop="close">
<translate>Cancel</translate>
</v-btn>
<v-btn depressed dark color="primary-button" class="action-confirm" :disabled="disabled" @click.stop="confirm">
<v-btn depressed theme="dark" color="primary-button" class="action-confirm" :disabled="disabled" @click.stop="confirm">
<translate>Save</translate>
</v-btn>
</v-col>

8
frontend/src/dialog/confirm.vue
View File

@@ -3,20 +3,20 @@
<v-card raised elevation="24">
<v-container fluid class="pb-2 pr-2 pl-2">
<v-row>
<v-col cols="3" class="text-xs-center">
<v-col cols="3" class="text-center">
<!-- TODO: change this icon -->
<v-icon size="54" color="secondary-dark lighten-1">{{ icon }}</v-icon>
</v-col>
<v-col cols="9" class="text-xs-left" align-self="center">
<v-col cols="9" class="text-left" align-self="center">
<div class="subtitle-1 pr-1">
<translate>Are you sure?</translate>
</div>
</v-col>
<v-col cols="12" class="pt-6 text-xs-right">
<v-col cols="12" class="pt-6 text-right">
<v-btn depressed color="secondary-light" class="action-cancel compact" @click.stop="cancel">
<translate key="Cancel">Cancel</translate>
</v-btn>
<v-btn color="primary-button" depressed dark class="action-confirm compact" @click.stop="confirm">
<v-btn color="primary-button" depressed theme="dark" class="action-confirm compact" @click.stop="confirm">
<translate key="Delete">Yes</translate>
</v-btn>
</v-col>

54
frontend/src/dialog/dialogs.js
View File

@@ -47,32 +47,28 @@ import PAccountAppsDialog from "dialog/account/apps.vue";
import PAccountPasscodeDialog from "dialog/account/passcode.vue";
import PAccountPasswordDialog from "dialog/account/password.vue";
const dialogs = {};
dialogs.install = (Vue) => {
Vue.component("PServiceAddDialog", PServiceAddDialog);
Vue.component("PServiceRemoveDialog", PServiceRemoveDialog);
Vue.component("PServiceEditDialog", PServiceEditDialog);
Vue.component("PPhotoArchiveDialog", PPhotoArchiveDialog);
Vue.component("PPhotoAlbumDialog", PPhotoAlbumDialog);
Vue.component("PPhotoEditDialog", PPhotoEditDialog);
Vue.component("PPhotoDeleteDialog", PPhotoDeleteDialog);
Vue.component("PFileDeleteDialog", PFileDeleteDialog);
Vue.component("PAlbumEditDialog", PAlbumEditDialog);
Vue.component("PAlbumDeleteDialog", PAlbumDeleteDialog);
Vue.component("PLabelDeleteDialog", PLabelDeleteDialog);
Vue.component("PPeopleMergeDialog", PPeopleMergeDialog);
Vue.component("PUploadDialog", PUploadDialog);
Vue.component("PVideoViewer", PVideoViewer);
Vue.component("PShareDialog", PShareDialog);
Vue.component("PShareUploadDialog", PShareUploadDialog);
Vue.component("PWebdavDialog", PWebdavDialog);
Vue.component("PReloadDialog", PReloadDialog);
Vue.component("PSponsorDialog", PSponsorDialog);
Vue.component("PConfirmDialog", PConfirmDialog);
Vue.component("PAccountAppsDialog", PAccountAppsDialog);
Vue.component("PAccountPasscodeDialog", PAccountPasscodeDialog);
Vue.component("PAccountPasswordDialog", PAccountPasswordDialog);
};
export default dialogs;
export function installDialogs(app) {
app.component("PServiceAddDialog", PServiceAddDialog);
app.component("PServiceRemoveDialog", PServiceRemoveDialog);
app.component("PServiceEditDialog", PServiceEditDialog);
app.component("PPhotoArchiveDialog", PPhotoArchiveDialog);
app.component("PPhotoAlbumDialog", PPhotoAlbumDialog);
app.component("PPhotoEditDialog", PPhotoEditDialog);
app.component("PPhotoDeleteDialog", PPhotoDeleteDialog);
app.component("PFileDeleteDialog", PFileDeleteDialog);
app.component("PAlbumEditDialog", PAlbumEditDialog);
app.component("PAlbumDeleteDialog", PAlbumDeleteDialog);
app.component("PLabelDeleteDialog", PLabelDeleteDialog);
app.component("PPeopleMergeDialog", PPeopleMergeDialog);
app.component("PUploadDialog", PUploadDialog);
app.component("PVideoViewer", PVideoViewer);
app.component("PShareDialog", PShareDialog);
app.component("PShareUploadDialog", PShareUploadDialog);
app.component("PWebdavDialog", PWebdavDialog);
app.component("PReloadDialog", PReloadDialog);
app.component("PSponsorDialog", PSponsorDialog);
app.component("PConfirmDialog", PConfirmDialog);
app.component("PAccountAppsDialog", PAccountAppsDialog);
app.component("PAccountPasscodeDialog", PAccountPasscodeDialog);
app.component("PAccountPasswordDialog", PAccountPasswordDialog);
}

8
frontend/src/dialog/file/delete.vue
View File

@@ -3,19 +3,19 @@
<v-card raised elevation="24">
<v-container fluid class="pb-2 pr-2 pl-2">
<v-row>
<v-col cols="3" class="text-xs-center">
<v-col cols="3" class="text-center">
<v-icon size="54" color="secondary-dark lighten-1">mdi-delete-outline</v-icon>
</v-col>
<v-col cols="9" class="text-xs-left" align-self="center">
<v-col cols="9" class="text-left" align-self="center">
<div class="subtitle-1 pr-1">
<translate>Are you sure you want to permanently delete this file?</translate>
</div>
</v-col>
<v-col cols="12" class="text-xs-right pt-6">
<v-col cols="12" class="text-right pt-6">
<v-btn depressed color="secondary-light" class="action-cancel" @click.stop="cancel">
<translate key="Cancel">Cancel</translate>
</v-btn>
<v-btn color="primary-button" depressed dark class="action-confirm" @click.stop="confirm">
<v-btn color="primary-button" depressed theme="dark" class="action-confirm" @click.stop="confirm">
<translate key="Delete">Delete</translate>
</v-btn>
</v-col>

8
frontend/src/dialog/label/delete.vue
View File

@@ -3,19 +3,19 @@
<v-card raised elevation="24">
<v-container fluid class="pb-2 pr-2 pl-2">
<v-row>
<v-col cols="3" class="text-xs-center">
<v-col cols="3" class="text-center">
<v-icon size="54" color="secondary-dark lighten-1">mdi-delete-outline</v-icon>
</v-col>
<v-col cols="9" class="text-xs-left" align-self="center">
<v-col cols="9" class="text-left" align-self="center">
<div class="subtitle-1 pr-1">
<translate key="Are you sure you want to delete these labels?">Are you sure you want to delete these labels?</translate>
</div>
</v-col>
<v-col cols="12" class="text-xs-right pt-6">
<v-col cols="12" class="text-right pt-6">
<v-btn depressed color="secondary-light" class="action-cancel" @click.stop="cancel">
<translate key="Cancel">Cancel</translate>
</v-btn>
<v-btn color="primary-button" depressed dark class="action-confirm" @click.stop="confirm">
<v-btn color="primary-button" depressed theme="dark" class="action-confirm" @click.stop="confirm">
<translate key="Delete">Delete</translate>
</v-btn>
</v-col>

8
frontend/src/dialog/people/merge.vue
View File

@@ -3,20 +3,20 @@
<v-card raised elevation="24">
<v-container fluid class="pb-2 pr-2 pl-2">
<v-row>
<v-col cols="3" class="text-xs-center">
<v-col cols="3" class="text-center">
<!-- TODO: change this icon -->
<v-icon size="54" color="secondary-dark lighten-1">people</v-icon>
</v-col>
<v-col cols="9" class="text-xs-left" align-self="center">
<v-col cols="9" class="text-left" align-self="center">
<div class="subtitle-1 pr-1">
{{ prompt }}
</div>
</v-col>
<v-col cols="12" class="text-xs-right pt-6">
<v-col cols="12" class="text-right pt-6">
<v-btn depressed color="secondary-light" class="action-cancel" @click.stop="cancel">
<translate key="No">No</translate>
</v-btn>
<v-btn color="primary-button" depressed dark class="action-confirm" @click.stop="confirm">
<v-btn color="primary-button" depressed theme="dark" class="action-confirm" @click.stop="confirm">
<translate key="Yes">Yes</translate>
</v-btn>
</v-col>

6
frontend/src/dialog/photo/album.vue
View File

@@ -3,11 +3,11 @@
<v-card raised elevation="24">
<v-card-text class="pt-6 px-6">
<v-row>
<v-col cols="3" class="text-xs-left">
<v-col cols="3" class="text-left">
<!-- TODO: change this icon -->
<v-icon size="60" color="secondary-dark lighten-1">photo_album</v-icon>
</v-col>
<v-col cols="9" class="text-xs-left" align-self="center">
<v-col cols="9" class="text-left" align-self="center">
<v-autocomplete
ref="input"
v-model="album"
@@ -33,7 +33,7 @@
</v-card-text>
<v-card-actions class="pt-0 pb-6 px-6">
<v-row class="pa-0">
<v-col cols="12" class="text-xs-right">
<v-col cols="12" class="text-right">
<v-btn depressed color="secondary-light" class="action-cancel mx-1" @click.stop="cancel">
<translate>Cancel</translate>
</v-btn>

8
frontend/src/dialog/photo/archive.vue
View File

@@ -3,19 +3,19 @@
<v-card raised elevation="24">
<v-container fluid class="pb-2 pr-2 pl-2">
<v-row>
<v-col cols="3" class="text-xs-center">
<v-col cols="3" class="text-center">
<v-icon size="54" color="secondary-dark lighten-1">mdi-package-down</v-icon>
</v-col>
<v-col cols="9" class="text-xs-left" align-self="center">
<v-col cols="9" class="text-left" align-self="center">
<div class="subtitle-1 pr-1">
<translate>Are you sure you want to archive the selection?</translate>
</div>
</v-col>
<v-col cols="12" class="text-xs-right pt-6">
<v-col cols="12" class="text-right pt-6">
<v-btn depressed color="secondary-light" class="action-cancel" @click.stop="cancel">
<translate>No</translate>
</v-btn>
<v-btn color="primary-button" depressed dark class="action-confirm" @click.stop="confirm">
<v-btn color="primary-button" depressed theme="dark" class="action-confirm" @click.stop="confirm">
<translate>Yes</translate>
</v-btn>
</v-col>

10
frontend/src/dialog/photo/delete.vue
View File

@@ -3,10 +3,10 @@
<v-card raised elevation="24">
<v-container fluid class="pb-2 pr-2 pl-2">
<v-row>
<v-col cols="3" class="text-xs-center">
<v-col cols="3" class="text-center">
<v-icon size="54" color="secondary-dark lighten-1">mdi-delete-outline</v-icon>
</v-col>
<v-col cols="9" class="text-xs-left" align-self="center">
<v-col cols="9" class="text-left" align-self="center">
<div v-if="text === ''" class="subtitle-1 pr-1">
<translate>Are you sure you want to permanently delete these pictures?</translate>
</div>
@@ -14,14 +14,14 @@
{{ text }}
</div>
</v-col>
<v-col cols="12" class="text-xs-right pt-6">
<v-col cols="12" class="text-right pt-6">
<v-btn depressed color="secondary-light" class="action-cancel" @click.stop="cancel">
<translate key="Cancel">Cancel</translate>
</v-btn>
<v-btn v-if="action === ''" color="primary-button" depressed dark class="action-confirm" @click.stop="confirm">
<v-btn v-if="action === ''" color="primary-button" depressed theme="dark" class="action-confirm" @click.stop="confirm">
<translate key="Delete">Delete</translate>
</v-btn>
<v-btn v-else color="primary-button" depressed dark class="action-confirm" @click.stop="confirm">
<v-btn v-else color="primary-button" depressed theme="dark" class="action-confirm" @click.stop="confirm">
{{ action }}
</v-btn>
</v-col>

14
frontend/src/dialog/photo/edit.vue
View File

@@ -1,8 +1,8 @@
<template>
<v-dialog :value="show" fullscreen hide-overlay scrollable persistent class="p-photo-edit-dialog" @keydown.esc="close">
<v-card color="application">
<v-toolbar dark flat color="navigation" :dense="$vuetify.breakpoint.smAndDown">
<v-btn icon dark class="action-close" @click.stop="close">
<v-toolbar theme="dark" flat color="navigation" :dense="$vuetify.display.smAndDown">
<v-btn icon theme="dark" class="action-close" @click.stop="close">
<v-icon>mdi-close</v-icon>
</v-btn>
<v-toolbar-title
@@ -22,9 +22,9 @@
</v-btn>
</v-toolbar-items>
</v-toolbar>
<v-tabs v-model="active" elevation="0" grow class="form transparent" background-color="secondary" slider-color="primary-dark" :height="$vuetify.breakpoint.smAndDown ? 48 : 64">
<v-tabs v-model="active" elevation="0" grow class="form transparent" background-color="secondary" slider-color="primary-dark" :height="$vuetify.display.smAndDown ? 48 : 64">
<v-tab id="tab-details" ripple>
<v-icon v-if="$vuetify.breakpoint.smAndDown" :title="$gettext('Details')">mdi-pencil</v-icon>
<v-icon v-if="$vuetify.display.smAndDown" :title="$gettext('Details')">mdi-pencil</v-icon>
<template v-else>
<v-icon :size="18" :left="!rtl" :right="rtl">mdi-pencil</v-icon>
<translate key="Details">Details</translate>
@@ -32,7 +32,7 @@
</v-tab>
<v-tab id="tab-labels" ripple :disabled="!$config.feature('labels')">
<v-icon v-if="$vuetify.breakpoint.smAndDown" :title="$gettext('Labels')">mdi-label</v-icon>
<v-icon v-if="$vuetify.display.smAndDown" :title="$gettext('Labels')">mdi-label</v-icon>
<template v-else>
<v-icon :size="18" :left="!rtl" :right="rtl">mdi-label</v-icon>
<v-badge color="secondary-dark" :left="rtl" :right="!rtl">
@@ -45,7 +45,7 @@
</v-tab>
<v-tab id="tab-people" :disabled="!$config.feature('people')" ripple>
<v-icon v-if="$vuetify.breakpoint.smAndDown" :title="$gettext('People')">mdi-account-multiple</v-icon>
<v-icon v-if="$vuetify.display.smAndDown" :title="$gettext('People')">mdi-account-multiple</v-icon>
<template v-else>
<v-icon :size="18" :left="!rtl" :right="rtl">mdi-account-multiple</v-icon>
<v-badge color="secondary-dark" :left="rtl" :right="!rtl">
@@ -58,7 +58,7 @@
</v-tab>
<v-tab id="tab-files" ripple>
<v-icon v-if="$vuetify.breakpoint.smAndDown" :title="$gettext('Files')">mdi-film</v-icon>
<v-icon v-if="$vuetify.display.smAndDown" :title="$gettext('Files')">mdi-film</v-icon>
<template v-else>
<v-icon :size="18" :left="!rtl" :right="rtl">mdi-film</v-icon>
<v-badge color="secondary-dark" :left="rtl" :right="!rtl">

6
frontend/src/dialog/photo/edit/details.vue
View File

@@ -371,15 +371,15 @@
></v-textarea>
</v-col>
<v-col v-if="!disabled" cols="12" :class="rtl ? 'text-xs-left' : 'text-xs-right'" class="pt-6">
<v-col v-if="!disabled" cols="12" :class="rtl ? 'text-left' : 'text-right'" class="pt-6">
<v-btn depressed color="secondary-light" class="compact action-close" @click.stop="close">
<translate>Close</translate>
</v-btn>
<v-btn color="primary-button" depressed dark class="compact action-apply action-approve" @click.stop="save(false)">
<v-btn color="primary-button" depressed theme="dark" class="compact action-apply action-approve" @click.stop="save(false)">
<span v-if="$config.feature('review') && model.Quality < 3"><translate>Approve</translate></span>
<span v-else><translate>Apply</translate></span>
</v-btn>
<v-btn color="primary-button" depressed dark class="compact action-done hidden-xs-only" @click.stop="save(true)">
<v-btn color="primary-button" depressed theme="dark" class="compact action-done hidden-xs" @click.stop="save(true)">
<translate>Done</translate>
</v-btn>
</v-col>

12
frontend/src/dialog/photo/edit/files.vue
View File

@@ -32,19 +32,19 @@
<translate>Actions</translate>
</td>
<td>
<v-btn v-if="features.download" small depressed dark color="primary-button" class="btn-action action-download" :disabled="busy" @click.stop.prevent="downloadFile(file)">
<v-btn v-if="features.download" small depressed theme="dark" color="primary-button" class="btn-action action-download" :disabled="busy" @click.stop.prevent="downloadFile(file)">
<translate>Download</translate>
</v-btn>
<v-btn v-if="features.edit && (file.FileType === 'jpg' || file.FileType === 'png') && !file.Error && !file.Primary" small depressed dark color="primary-button" class="btn-action action-primary" :disabled="busy" @click.stop.prevent="primaryFile(file)">
<v-btn v-if="features.edit && (file.FileType === 'jpg' || file.FileType === 'png') && !file.Error && !file.Primary" small depressed theme="dark" color="primary-button" class="btn-action action-primary" :disabled="busy" @click.stop.prevent="primaryFile(file)">
<translate>Primary</translate>
</v-btn>
<v-btn v-if="features.edit && !file.Sidecar && !file.Error && !file.Primary && file.Root === '/'" small depressed dark color="primary-button" class="btn-action action-unstack" :disabled="busy" @click.stop.prevent="unstackFile(file)">
<v-btn v-if="features.edit && !file.Sidecar && !file.Error && !file.Primary && file.Root === '/'" small depressed theme="dark" color="primary-button" class="btn-action action-unstack" :disabled="busy" @click.stop.prevent="unstackFile(file)">
<translate>Unstack</translate>
</v-btn>
<v-btn v-if="features.delete && !file.Primary" small depressed dark color="primary-button" class="btn-action action-delete" :disabled="busy" @click.stop.prevent="showDeleteDialog(file)">
<v-btn v-if="features.delete && !file.Primary" small depressed theme="dark" color="primary-button" class="btn-action action-delete" :disabled="busy" @click.stop.prevent="showDeleteDialog(file)">
<translate>Delete</translate>
</v-btn>
<v-btn v-if="experimental && canAccessPrivate && file.Primary" small depressed dark color="primary-button" class="btn-action action-open-folder" :href="folderUrl(file)" target="_blank">
<v-btn v-if="experimental && canAccessPrivate && file.Primary" small depressed theme="dark" color="primary-button" class="btn-action action-open-folder" :href="folderUrl(file)" target="_blank">
<translate>File Browser</translate>
</v-btn>
</td>
@@ -316,7 +316,7 @@ export default {
sortable: false,
class: "hidden-sm-and-down",
},
{ text: this.$gettext("Size"), value: "Size", sortable: false, class: "hidden-xs-only" },
{ text: this.$gettext("Size"), value: "Size", sortable: false, class: "hidden-xs" },
{ text: this.$gettext("Type"), value: "", sortable: false, align: "left" },
{ text: this.$gettext("Status"), value: "", sortable: false, align: "left" },
],

12
frontend/src/dialog/photo/edit/labels.vue
View File

@@ -17,11 +17,11 @@
</template>
</v-edit-dialog>
</td>
<td class="text-xs-left">
<td class="text-left">
{{ sourceName(props.item.LabelSrc) }}
</td>
<td class="text-xs-center"> {{ 100 - props.item.Uncertainty }}% </td>
<td class="text-xs-center">
<td class="text-center"> {{ 100 - props.item.Uncertainty }}% </td>
<td class="text-center">
<v-btn v-if="disabled" icon small text :ripple="false" class="action-view" title="Search" @click.stop.prevent="searchLabel(props.item.Label)">
<v-icon color="secondary-dark">mdi-magnify</v-icon>
</v-btn>
@@ -42,11 +42,11 @@
<td>
<v-text-field v-model="newLabel" :rules="[nameRule]" color="secondary-dark" autocomplete="off" :label="$gettext('Name')" single-line flat solo hide-details autofocus class="input-label" @keyup.enter="addLabel"></v-text-field>
</td>
<td class="text-xs-left">
<td class="text-left">
{{ sourceName("manual") }}
</td>
<td class="text-xs-center"> 100% </td>
<td class="text-xs-center">
<td class="text-center"> 100% </td>
<td class="text-center">
<v-btn icon small text :ripple="false" title="Add" class="p-photo-label-add" @click.stop.prevent="addLabel">
<v-icon color="secondary-dark">mdi-plus</v-icon>
</v-btn>

8
frontend/src/dialog/photo/edit/people.vue
View File

@@ -22,15 +22,15 @@
<v-card-actions class="card-details pa-0">
<v-row v-if="marker.Invalid" align="center">
<v-col cols="12" class="text-xs-center pa-0">
<v-btn color="transparent" :disabled="busy" large depressed block :rounded="false" class="action-undo text-xs-center" :title="$gettext('Undo')" @click.stop="onApprove(marker)">
<v-col cols="12" class="text-center pa-0">
<v-btn color="transparent" :disabled="busy" large depressed block :rounded="false" class="action-undo text-center" :title="$gettext('Undo')" @click.stop="onApprove(marker)">
<!-- TODO: change this icon -->
<v-icon dark>undo</v-icon>
</v-btn>
</v-col>
</v-row>
<v-row v-else-if="marker.SubjUID" align="center">
<v-col cols="12" class="text-xs-left pa-0">
<v-col cols="12" class="text-left pa-0">
<v-text-field
v-model="marker.Name"
:rules="[textRule]"
@@ -51,7 +51,7 @@
</v-col>
</v-row>
<v-row v-else align="center">
<v-col cols="12" class="text-xs-left pa-0">
<v-col cols="12" class="text-left pa-0">
<!-- TODO: check property allow-overflow TEST -->
<v-combobox
v-model="marker.Name"

2
frontend/src/dialog/reload.vue
View File

@@ -9,7 +9,7 @@
<v-btn color="secondary-light" class="compact mx-2" depressed @click="close">
<translate>Cancel</translate>
</v-btn>
<v-btn color="primary-button" class="action-update-reload compact" dark small depressed @click="reload">
<v-btn color="primary-button" class="action-update-reload compact" theme="dark" small depressed @click="reload">
<translate>Reload</translate>
</v-btn>
</v-card-actions>

6
frontend/src/dialog/service/add.vue
View File

@@ -38,15 +38,15 @@
</v-card-text>
<v-card-actions class="pt-1 pb-2 px-2">
<v-row class="pa-2">
<v-col cols="12" class="text-xs-left caption">
<v-col cols="12" class="text-left caption">
<translate>Note: Only WebDAV servers, like Nextcloud or PhotoPrism, can be configured as remote service for backup and file upload.</translate>
<translate>Support for additional services, like Google Drive, will be added over time.</translate>
</v-col>
<v-col cols="12" class="text-xs-right pt-2">
<v-col cols="12" class="text-right pt-2">
<v-btn depressed color="secondary-light" class="action-cancel ml-2" @click.stop="cancel">
<span>{{ label.cancel }}</span>
</v-btn>
<v-btn depressed dark color="primary-button" class="action-confirm compact mr-0" @click.stop="confirm">
<v-btn depressed theme="dark" color="primary-button" class="action-confirm compact mr-0" @click.stop="confirm">
<span>{{ label.confirm }}</span>
</v-btn>
</v-col>

14
frontend/src/dialog/service/edit.vue
View File

@@ -8,8 +8,8 @@
{{ $gettext("Manual Upload") }}
</h3>
</v-col>
<v-col cols="3" class="text-xs-right">
<v-switch v-model="model.AccShare" color="secondary-dark" :true-value="true" :false-value="false" :disabled="model.AccType !== 'webdav'" class="ma-0 hidden-xs-only float-right" hide-details></v-switch>
<v-col cols="3" class="text-right">
<v-switch v-model="model.AccShare" color="secondary-dark" :true-value="true" :false-value="false" :disabled="model.AccType !== 'webdav'" class="ma-0 hidden-xs float-right" hide-details></v-switch>
<v-switch v-model="model.AccShare" color="secondary-dark" :true-value="true" :false-value="false" :disabled="model.AccType !== 'webdav'" class="ma-0 hidden-sm-and-up float-right" hide-details></v-switch>
</v-col>
</v-row>
@@ -19,8 +19,8 @@
{{ $gettext("Remote Sync") }}
</h3>
</v-col>
<v-col cols="3" class="text-xs-right">
<v-switch v-model="model.AccSync" color="secondary-dark" :true-value="true" :false-value="false" :disabled="model.AccType !== 'webdav'" class="mt-0 hidden-xs-only float-right" hide-details flat></v-switch>
<v-col cols="3" class="text-right">
<v-switch v-model="model.AccSync" color="secondary-dark" :true-value="true" :false-value="false" :disabled="model.AccType !== 'webdav'" class="mt-0 hidden-xs float-right" hide-details flat></v-switch>
<v-switch v-model="model.AccSync" color="secondary-dark" :true-value="true" :false-value="false" :disabled="model.AccType !== 'webdav'" class="mt-0 hidden-sm-and-up float-right" hide-details flat></v-switch>
</v-col>
</v-row>
@@ -30,7 +30,7 @@
{{ $gettext("Edit Account") }}
</h3>
</v-col>
<v-col cols="2" class="text-xs-right">
<v-col cols="2" class="text-right">
<v-btn icon text :ripple="false" class="action-remove mt-0" @click.stop.prevent="remove()">
<v-icon color="secondary-dark">mdi-delete</v-icon>
</v-btn>
@@ -146,11 +146,11 @@
</v-card-text>
<v-card-actions class="pt-0 pb-2 px-2">
<v-row class="pa-2">
<v-col cols="12" class="text-xs-right pt-6 pb-0">
<v-col cols="12" class="text-right pt-6 pb-0">
<v-btn depressed color="secondary-light" class="action-cancel ml-2" @click.stop="cancel">
<translate>Cancel</translate>
</v-btn>
<v-btn depressed dark color="primary-button" class="action-save compact" @click.stop="save">
<v-btn depressed theme="dark" color="primary-button" class="action-save compact" @click.stop="save">
<translate>Save</translate>
</v-btn>
</v-col>

8
frontend/src/dialog/service/remove.vue
View File

@@ -3,19 +3,19 @@
<v-card raised elevation="24">
<v-container fluid class="pb-2 pr-2 pl-2">
<v-row>
<v-col cols="3" class="text-xs-center">
<v-col cols="3" class="text-center">
<v-icon size="54" color="secondary-dark lighten-1">mdi-delete-outline</v-icon>
</v-col>
<v-col cols="9" class="text-xs-left" align-self="center">
<v-col cols="9" class="text-left" align-self="center">
<div class="subtitle-1 pr-1">
<translate key="Are you sure you want to delete this account?">Are you sure you want to delete this account?</translate>
</div>
</v-col>
<v-col cols="12" class="text-xs-right pt-6">
<v-col cols="12" class="text-right pt-6">
<v-btn depressed color="secondary-light" class="action-cancel ml-2" @click.stop="cancel">
<translate key="Cancel">Cancel</translate>
</v-btn>
<v-btn depressed dark color="primary-button" class="action-confirm" @click.stop="confirm">
<v-btn depressed theme="dark" color="primary-button" class="action-confirm" @click.stop="confirm">
<translate key="Delete">Delete</translate>
</v-btn>
</v-col>

16
frontend/src/dialog/share.vue
View File

@@ -8,8 +8,8 @@
<translate :translate-params="{ name: model.modelName() }">Share %{name}</translate>
</h3>
</v-col>
<v-col cols="3" :class="rtl ? 'text-xs-left' : 'text-xs-right'">
<v-btn icon text dark color="secondary-dark" class="ma-0 action-add-link" :title="$gettext('Add Link')" @click.stop="add">
<v-col cols="3" :class="rtl ? 'text-left' : 'text-right'">
<v-btn icon text theme="dark" color="secondary-dark" class="ma-0 action-add-link" :title="$gettext('Add Link')" @click.stop="add">
<v-icon>mdi-link-plus</v-icon>
</v-btn>
</v-col>
@@ -19,7 +19,7 @@
<v-expansion-panels class="pa-0 elevation-0">
<v-expansion-panel v-for="(link, index) in links" :key="link.UID" class="pa-0 elevation-0 secondary mb-1">
<template #header>
<button :class="`text-xs-${!rtl ? 'left' : 'right'} action-url ml-0 mt-0 mb-0 pa-0 mr-2`" style="user-select: none" @click.stop="copyUrl(link)">
<button :class="`text-${!rtl ? 'left' : 'right'} action-url ml-0 mt-0 mb-0 pa-0 mr-2`" style="user-select: none" @click.stop="copyUrl(link)">
<!-- TODO: change this icon -->
<v-icon size="16" class="pr-1">link</v-icon>
/s/<strong v-if="link.Token" style="font-weight: 500"> {{ link.getToken() }} </strong><span v-else>…</span>
@@ -51,13 +51,13 @@
@click:append="showPassword = !showPassword"
></v-text-field>
</v-col -->
<v-col cols="6" :class="rtl ? 'text-xs-left' : 'text-xs-right'" class="pa-2">
<v-col cols="6" :class="rtl ? 'text-left' : 'text-right'" class="pa-2">
<v-btn small icon text color="remove" class="ma-0 action-delete" :title="$gettext('Delete')" @click.stop.exact="remove(index)">
<v-icon>mdi-delete</v-icon>
</v-btn>
</v-col>
<v-col cols="6" :class="rtl ? 'text-xs-left' : 'text-xs-right'" class="pa-2">
<v-btn depressed dark color="primary-button" class="ma-0 compact action-save" @click.stop.exact="update(link)">
<v-col cols="6" :class="rtl ? 'text-left' : 'text-right'" class="pa-2">
<v-btn depressed theme="dark" color="primary-button" class="ma-0 compact action-save" @click.stop.exact="update(link)">
<translate>Save</translate>
</v-btn>
</v-col>
@@ -68,7 +68,7 @@
</v-expansion-panel>
</v-expansion-panels>
<v-container fluid :text-xs-left="!rtl" :text-xs-right="rtl" class="pb-0 pt-6 pr-0 pl-0 caption">
<v-container fluid :text-left="!rtl" :text-right="rtl" class="pb-0 pt-6 pr-0 pl-0 caption">
<translate :translate-params="{ name: model.modelName() }">People you share a link with will be able to view public contents.</translate>
<translate>A click will copy it to your clipboard.</translate>
<translate>Any private photos and videos remain private and won't be shared.</translate>
@@ -82,7 +82,7 @@
<translate>WebDAV Upload</translate>
</v-btn>
</v-col>
<v-col cols="6" :class="rtl ? 'text-xs-left' : 'text-xs-right'">
<v-col cols="6" :class="rtl ? 'text-left' : 'text-right'">
<v-btn depressed color="secondary-light" class="action-close" @click.stop="confirm">
<translate>Close</translate>
</v-btn>

14
frontend/src/dialog/share/upload.vue
View File

@@ -8,8 +8,8 @@
<translate>WebDAV Upload</translate>
</h3>
</v-col>
<v-col cols="4" class="text-xs-right">
<v-btn icon text dark color="secondary-dark" class="ma-0" @click.stop="setup">
<v-col cols="4" class="text-right">
<v-btn icon text theme="dark" color="secondary-dark" class="ma-0" @click.stop="setup">
<v-icon>mdi-cloud</v-icon>
</v-btn>
</v-col>
@@ -17,10 +17,10 @@
</v-card-title>
<v-card-text class="pt-0">
<v-row>
<v-col cols="12" class="text-xs-left pt-2">
<v-col cols="12" class="text-left pt-2">
<v-select v-model="service" color="secondary-dark" hide-details hide-no-data filled flat :label="$gettext('Account')" item-text="AccName" item-value="ID" return-object :disabled="loading || noServices" :items="services" @change="onChange"> </v-select>
</v-col>
<v-col cols="12" class="text-xs-left pt-2">
<v-col cols="12" class="text-left pt-2">
<v-autocomplete
v-model="path"
color="secondary-dark"
@@ -40,14 +40,14 @@
>
</v-autocomplete>
</v-col>
<v-col cols="12" class="text-xs-right pt-6">
<v-col cols="12" class="text-right pt-6">
<v-btn depressed color="secondary-light" class="action-cancel ml-0 mt-0 mb-0 mr-2" @click.stop="cancel">
<translate>Cancel</translate>
</v-btn>
<v-btn v-if="noServices" :disabled="isPublic && !isDemo" color="primary-button" depressed dark class="action-setup ma-0" @click.stop="setup">
<v-btn v-if="noServices" :disabled="isPublic && !isDemo" color="primary-button" depressed theme="dark" class="action-setup ma-0" @click.stop="setup">
<translate>Setup</translate>
</v-btn>
<v-btn v-else :disabled="noServices" color="primary-button" depressed dark class="action-upload ma-0" @click.stop="confirm">
<v-btn v-else :disabled="noServices" color="primary-button" depressed theme="dark" class="action-upload ma-0" @click.stop="confirm">
<translate>Upload</translate>
</v-btn>
</v-col>

4
frontend/src/dialog/sponsor.vue
View File

@@ -8,7 +8,7 @@
<translate>Support Our Mission</translate>
</h3>
</v-col>
<v-col cols="2" class="text-xs-right">
<v-col cols="2" class="text-right">
<v-icon size="26" color="secondary-dark" v-html="'$vuetify.icons.prism'"></v-icon>
</v-col>
</v-row>
@@ -30,7 +30,7 @@
</v-card-text>
<v-card-actions class="pt-0 px-2">
<v-row class="px-2">
<v-col cols="12" class="text-xs-right py-2">
<v-col cols="12" class="text-right py-2">
<v-btn depressed color="secondary-light" class="action-close compact" @click.stop="close">
<translate>No thanks</translate>
</v-btn>

11
frontend/src/dialog/upload.vue
View File

@@ -1,8 +1,9 @@
<template>
<v-dialog :value="show" fullscreen hide-overlay scrollable persistent class="p-upload-dialog" @keydown.esc="cancel">
<v-card color="application">
<v-toolbar dark flat color="navigation" :dense="$vuetify.breakpoint.smAndDown">
<v-btn icon dark @click.stop="cancel">
<v-toolbar theme="dark" flat color="navigation" :dense="$vuetify.display.smAndDown">
<v-btn icon theme="dark" @click.stop="cancel">
<!-- TODO: check icon -->
<v-icon>mdi-close</v-icon>
</v-btn>
<v-toolbar-title>
@@ -46,7 +47,9 @@
<template #selection="data">
<v-chip :key="JSON.stringify(data.item)" :input-value="data.selected" :disabled="data.disabled" class="v-chip--select-multi" @click="data.parent.selectItem(data.item)">
<v-icon class="pr-1">mdi-bookmark</v-icon>
{{ data.item.Title ? data.item.Title : data.item | truncate(40) }}
<!-- TODO: change this filter -->
<!-- {{ data.item.Title ? data.item.Title : data.item | truncate(40) }} -->
{{ data.item.Title ? data.item.Title : data.item }}
</v-chip>
</template>
</v-combobox>
@@ -59,7 +62,7 @@
</p>
<v-progress-linear v-model="completedTotal" height="1.5em" color="secondary-dark" :indeterminate="indexing">
<p class="px-2 ma-0 text-xs-right opacity-85"
<p class="px-2 ma-0 text-right opacity-85"
><span v-if="eta">{{ eta }}</span></p
>
</v-progress-linear>

4
frontend/src/dialog/webdav.vue
View File

@@ -3,12 +3,12 @@
<v-card class="pa-2">
<v-card-title class="headline pa-0">
<v-row class="pa-2">
<v-col cols="9" class="text-xs-left">
<v-col cols="9" class="text-left">
<h3 class="headline pa-0">
<translate>Connect via WebDAV</translate>
</h3>
</v-col>
<v-col cols="3" class="text-xs-right">
<v-col cols="3" class="text-right">
<!-- TODO: change this icon -->
<v-icon size="28" color="primary">sync_alt</v-icon>
</v-col>

12
frontend/src/page/about/about.vue
View File

@@ -1,6 +1,6 @@
<template>
<div class="p-page p-page-about">
<v-toolbar flat color="secondary" :dense="$vuetify.breakpoint.smAndDown">
<v-toolbar flat color="secondary" :dense="$vuetify.display.smAndDown">
<v-toolbar-title> {{ $config.getAbout() }}{{ getMembership() }} </v-toolbar-title>
<v-spacer></v-spacer>
@@ -28,14 +28,14 @@
<translate>Your continued support helps us provide regular updates and remain independent, so we can fulfill our mission and protect your privacy.</translate>
<translate>Being 100% self-funded and independent, we can promise you that we will never sell your data and that we will always be transparent about our software and services.</translate>
</p>
<p v-if="isSuperAdmin" class="text-xs-center my-6">
<p v-if="isSuperAdmin" class="text-center my-6">
<v-btn to="/upgrade" color="primary-button" class="white--text px-4 py-2 action-membership" rounded depressed>
<translate>Upgrade Now</translate>
<v-icon v-if="rtl" left dark>mdi-chevron-left</v-icon>
<v-icon v-else right dark>mdi-chevron-right</v-icon>
</v-btn>
</p>
<p v-else class="text-xs-center my-6">
<p v-else class="text-center my-6">
<v-btn href="https://link.photoprism.app/membership" target="_blank" color="primary-button" class="white--text px-4 py-2 action-membership" rounded depressed>
<translate>Learn more</translate>
<v-icon v-if="rtl" left dark>mdi-chevron-left</v-icon>
@@ -50,7 +50,7 @@
<translate>Your continued support helps us provide regular updates and remain independent, so we can fulfill our mission and protect your privacy.</translate>
<translate>You are welcome to contact us at membership@photoprism.app for questions regarding your membership.</translate>
</p>
<p class="text-xs-center my-6">
<p class="text-center my-6">
<v-btn href="https://my.photoprism.app/dashboard" target="_blank" color="primary-button" class="white--text px-4 py-2 action-membership" rounded depressed>
<translate>Manage Account</translate>
<v-icon v-if="rtl" left dark>mdi-chevron-left</v-icon>
@@ -111,7 +111,7 @@
>
</div>
<p class="text-xs-center pt-6 ma-0 pb-0">
<p class="text-center pt-6 ma-0 pb-0">
<router-link to="/license">
<img :src="$config.staticUri + '/img/badge-agpl.svg'" alt="License AGPL v3" style="max-width: 100%" />
</router-link>
@@ -122,7 +122,7 @@
<a target="_blank" href="https://link.photoprism.app/reddit" rel="nofollow"><img :src="$config.staticUri + '/img/badge-reddit.svg'" alt="Reddit" style="max-width: 100%" /></a>
</p>
<p class="caption mt-6 text-xs-center">
<p class="caption mt-6 text-center">
PhotoPrism® is a <a href="https://www.photoprism.app/trademark" target="_blank" class="text-link">registered trademark</a>. By using the software and services we provide, you agree to our <a href="https://www.photoprism.app/terms" target="_blank" class="text-link">Terms of Service</a>,
<a href="https://www.photoprism.app/privacy" target="_blank" class="text-link">Privacy Policy</a>, and <a href="https://www.photoprism.app/code-of-conduct" target="_blank" class="text-link">Code of Conduct</a>.
</p>

8
frontend/src/page/about/feedback.vue
View File

@@ -1,6 +1,6 @@
<template>
<div class="p-page p-page-support">
<v-toolbar flat color="secondary" :dense="$vuetify.breakpoint.smAndDown">
<v-toolbar flat color="secondary" :dense="$vuetify.display.smAndDown">
<v-toolbar-title>
<translate>Contact Us</translate>
</v-toolbar-title>
@@ -10,14 +10,14 @@
</v-btn>
</v-toolbar>
<v-container v-if="sent" fluid class="pa-6">
<h3 class="title font-weight-bold pt-6 pb-2 text-xs-center">
<h3 class="title font-weight-bold pt-6 pb-2 text-center">
<translate>We appreciate your feedback!</translate>
</h3>
<p class="body-2 py-6 text-xs-center">
<p class="body-2 py-6 text-center">
<translate>Due to the high volume of emails we receive, our team may be unable to get back to you immediately.</translate>
<translate>We do our best to respond within five business days or less.</translate>
</p>
<p class="mt-6 text-xs-center">
<p class="mt-6 text-center">
<img src="https://cdn.photoprism.app/thank-you/colorful.png" width="100%" alt="THANK YOU" />
</p>
</v-container>

2
frontend/src/page/about/license.vue
View File

@@ -1,6 +1,6 @@
<template>
<div class="p-page p-page-license">
<v-toolbar flat color="secondary" :dense="$vuetify.breakpoint.smAndDown">
<v-toolbar flat color="secondary" :dense="$vuetify.display.smAndDown">
<v-toolbar-title>
<translate>License</translate>
</v-toolbar-title>

16
frontend/src/page/albums.vue
View File

@@ -1,7 +1,7 @@
<template>
<div v-infinite-scroll="loadMore" :class="$config.aclClasses('albums')" class="p-page p-page-albums" style="user-select: none" :infinite-scroll-disabled="scrollDisabled" :infinite-scroll-distance="scrollDistance" :infinite-scroll-listen-for-event="'scrollRefresh'">
<v-form ref="form" class="p-albums-search" lazy-validation @submit.prevent="updateQuery()">
<v-toolbar flat :dense="$vuetify.breakpoint.smAndDown" class="page-toolbar" color="secondary">
<v-toolbar flat :dense="$vuetify.display.smAndDown" class="page-toolbar" color="secondary">
<v-text-field
:value="filter.q"
solo
@@ -188,7 +188,9 @@
<div>
<h3 class="body-2 mb-0">
<button v-if="album.Type !== 'month'" class="action-title-edit" :data-uid="album.UID" @click.stop.prevent="edit(album)">
{{ album.Title | truncate(80) }}
<!-- TODO: change this filter -->
<!-- {{ album.Title | truncate(80) }} -->
{{ album.Title }}
</button>
<button v-else class="action-title-edit" :data-uid="album.UID" @click.stop.prevent="edit(album)">
{{ album.getDateString() | capitalize }}
@@ -200,7 +202,9 @@
<v-card-text class="pb-2 pt-0 card-details" style="user-select: none" @click.stop.prevent="">
<div v-if="album.Description" class="caption mb-2" :title="$gettext('Description')">
<button @click.exact="edit(album)">
{{ album.Description | truncate(100) }}
<!-- TODO: change this filter -->
<!-- {{ album.Description | truncate(100) }} -->
{{ album.Description }}
</button>
</div>
@@ -217,7 +221,9 @@
</div>
<div v-else-if="album.Type === 'folder'" class="caption mb-2">
<button @click.exact="edit(album)">
/{{ album.Path | truncate(100) }}
<!-- TODO: change this filter -->
<!-- /{{ album.Path | truncate(100) }} -->
/{{ album.Path }}
</button>
</div>
<div v-if="album.Category !== ''" class="caption mb-2 d-inline-block">
@@ -237,7 +243,7 @@
</v-card>
</v-col>
</v-row>
<div v-if="canManage && staticFilter.type === 'album' && config.count.albums === 0" class="text-xs-center my-2">
<div v-if="canManage && staticFilter.type === 'album' && config.count.albums === 0" class="text-center my-2">
<v-btn class="action-add" color="secondary" rounded @click.prevent="create">
<translate>Add Album</translate>
</v-btn>

14
frontend/src/page/auth/login.vue
View File

@@ -93,24 +93,24 @@
</v-col>
</template>
<v-col cols="12" class="px-2 pt-1 pb-0 auth-actions">
<div class="action-buttons auth-buttons text-xs-center">
<v-btn v-if="enterCode" :color="colors.secondary" outlined :block="$vuetify.breakpoint.xsOnly" :style="`color: ${colors.link}!important`" class="action-cancel ra-6 px-4 py-2 opacity-80" @click.stop.prevent="onCancel">
<div class="action-buttons auth-buttons text-center">
<v-btn v-if="enterCode" :color="colors.secondary" outlined :block="$vuetify.display.xs" :style="`color: ${colors.link}!important`" class="action-cancel ra-6 px-4 py-2 opacity-80" @click.stop.prevent="onCancel">
<translate>Cancel</translate>
</v-btn>
<v-btn v-else-if="registerUri" :color="colors.secondary" outlined :block="$vuetify.breakpoint.xsOnly" :style="`color: ${colors.link}!important`" class="action-register ra-6 px-4 py-2 opacity-80" @click.stop.prevent="onRegister">
<v-btn v-else-if="registerUri" :color="colors.secondary" outlined :block="$vuetify.display.xs" :style="`color: ${colors.link}!important`" class="action-register ra-6 px-4 py-2 opacity-80" @click.stop.prevent="onRegister">
<translate>Create Account</translate>
</v-btn>
<v-btn :color="colors.primary" depressed :disabled="loginDisabled" :block="$vuetify.breakpoint.xsOnly" class="white--text action-confirm ra-6 py-2 px-4" @click.stop.prevent="onLogin">
<v-btn :color="colors.primary" depressed :disabled="loginDisabled" :block="$vuetify.display.xs" class="white--text action-confirm ra-6 py-2 px-4" @click.stop.prevent="onLogin">
<translate>Sign in</translate>
<v-icon v-if="rtl" left dark>mdi-chevron-left</v-icon>
<v-icon v-else right dark>mdi-chevron-right</v-icon>
</v-btn>
</div>
<div v-if="enterCode" class="auth-links text-xs-center opacity-80">
<div v-if="enterCode" class="auth-links text-center opacity-80">
<translate>Can't access your authenticator app or device?</translate>
<translate>Use your recovery code or contact an administrator for help.</translate>
</div>
<div v-else-if="passwordResetUri" class="auth-links text-xs-center opacity-80">
<div v-else-if="passwordResetUri" class="auth-links text-center opacity-80">
<a :href="passwordResetUri" class="text-link link--text">
<translate>Forgot password?</translate>
</a>
@@ -119,7 +119,7 @@
<template v-if="config.ext.oidc.enabled && !enterCode">
<v-col cols="12" class="px-2 pb-4 oidc-actions">
<v-divider :dark="true"></v-divider>
<div class="text-xs-center oidc-buttons pt-6">
<div class="text-center oidc-buttons pt-6">
<v-btn :color="colors.primary" depressed :disabled="loading" block class="white--text action-oidc-login ra-6 my-0 py-0 px-4" @click.stop.prevent="onOidcLogin">
<img alt="" class="oidc-icon v-icon--left theme--dark" :src="config.ext.oidc.icon" />
<translate :translate-params="{ provider: config.ext.oidc.provider }">Continue with %{provider}</translate>

24
frontend/src/page/connect.vue
View File

@@ -1,6 +1,6 @@
<template>
<div class="p-page p-page-upgrade">
<v-toolbar flat color="secondary" :dense="$vuetify.breakpoint.smAndDown">
<v-toolbar flat color="secondary" :dense="$vuetify.display.smAndDown">
<v-toolbar-title>
<translate>Membership</translate>
<v-icon v-if="rtl">mdi-chevron-left</v-icon>
@@ -39,17 +39,17 @@
</v-alert>
</v-col>
<v-col cols="12" class="pa-2">
<v-btn color="primary-button lighten-2" :block="$vuetify.breakpoint.xsOnly" class="ml-0" outlined :disabled="busy" @click.stop="reset">
<v-btn color="primary-button lighten-2" :block="$vuetify.display.xs" class="ml-0" outlined :disabled="busy" @click.stop="reset">
<translate>Cancel</translate>
</v-btn>
<v-btn color="primary-button" :block="$vuetify.breakpoint.xsOnly" class="white--text ml-0" href="https://www.photoprism.app/contact" target="_blank" depressed>
<v-btn color="primary-button" :block="$vuetify.display.xs" class="white--text ml-0" href="https://www.photoprism.app/contact" target="_blank" depressed>
<translate>Contact Us</translate>
</v-btn>
</v-col>
</v-row>
<v-row v-else-if="success">
<v-col cols="12" class="pa-2 d-flex">
<p class="subtitle-1 text-xs-left flex-grow-1">
<p class="subtitle-1 text-left flex-grow-1">
<translate>Your account has been successfully connected.</translate>
<span v-if="$config.values.restart">
<translate>Please restart your instance for the changes to take effect.</translate>
@@ -57,15 +57,15 @@
</p>
</v-col>
<v-col cols="12" class="d-flex grow pa-2">
<v-btn href="https://my.photoprism.app/dashboard" target="_blank" color="primary-button lighten-2 flex-grow-1" :block="$vuetify.breakpoint.xsOnly" class="ml-0" outlined :disabled="busy">
<v-btn href="https://my.photoprism.app/dashboard" target="_blank" color="primary-button lighten-2 flex-grow-1" :block="$vuetify.display.xs" class="ml-0" outlined :disabled="busy">
<translate>Manage Account</translate>
</v-btn>
<v-btn v-if="$config.values.restart && !$config.values.disable.restart" color="primary-button" :block="$vuetify.breakpoint.xsOnly" class="white--text ml-0" depressed :disabled="busy" @click.stop.p.prevent="onRestart">
<v-btn v-if="$config.values.restart && !$config.values.disable.restart" color="primary-button" :block="$vuetify.display.xs" class="white--text ml-0" depressed :disabled="busy" @click.stop.p.prevent="onRestart">
<translate>Restart</translate>
<!-- TODO: change this icon -->
<v-icon :right="!rtl" :left="rtl" dark>restart_alt</v-icon>
</v-btn>
<v-btn v-if="$config.getTier() < 4" href="https://my.photoprism.app/dashboard/membership" target="_blank" color="primary-button" :block="$vuetify.breakpoint.xsOnly" class="white--text ml-0" depressed :disabled="busy">
<v-btn v-if="$config.getTier() < 4" href="https://my.photoprism.app/dashboard/membership" target="_blank" color="primary-button" :block="$vuetify.display.xs" class="white--text ml-0" depressed :disabled="busy">
<translate>Upgrade Now</translate>
<v-icon v-if="rtl" left dark>mdi-chevron-left</v-icon>
<v-icon v-else right dark>mdi-chevron-right</v-icon>
@@ -84,20 +84,20 @@
</p>
<!-- TODO: check property return-masked-value TEST -->
<v-text-field v-model="form.token" flat solo hide-details return-masked-value :mask="tokenMask" autocomplete="off" color="secondary-dark" background-color="secondary-light" :label="$gettext('Activation Code')" type="text"> </v-text-field>
<div class="action-buttons text-xs-left mt-6">
<v-btn v-if="$config.getTier() >= 4" href="https://my.photoprism.app/dashboard" target="_blank" color="primary-button lighten-2" :block="$vuetify.breakpoint.xsOnly" class="ml-0" outlined :disabled="busy">
<div class="action-buttons text-left mt-6">
<v-btn v-if="$config.getTier() >= 4" href="https://my.photoprism.app/dashboard" target="_blank" color="primary-button lighten-2" :block="$vuetify.display.xs" class="ml-0" outlined :disabled="busy">
<translate>Manage Account</translate>
</v-btn>
<v-btn v-else color="primary-button lighten-2" :block="$vuetify.breakpoint.xsOnly" class="ml-0" outlined :disabled="busy" @click.stop="compare">
<v-btn v-else color="primary-button lighten-2" :block="$vuetify.display.xs" class="ml-0" outlined :disabled="busy" @click.stop="compare">
<translate>Compare Editions</translate>
</v-btn>
<v-btn v-if="!form.token.length" color="primary-button" class="white--text ml-0 action-proceed" :block="$vuetify.breakpoint.xsOnly" depressed :disabled="busy" @click.stop="connect">
<v-btn v-if="!form.token.length" color="primary-button" class="white--text ml-0 action-proceed" :block="$vuetify.display.xs" depressed :disabled="busy" @click.stop="connect">
<translate>Register</translate>
<v-icon v-if="rtl" left dark>mdi-chevron-left</v-icon>
<v-icon v-else right dark>mdi-chevron-right</v-icon>
</v-btn>
<v-btn v-else color="primary-button" :block="$vuetify.breakpoint.xsOnly" class="white--text ml-0 action-activate" depressed :disabled="busy || form.token.length !== tokenMask.length" @click.stop="activate">
<v-btn v-else color="primary-button" :block="$vuetify.display.xs" class="white--text ml-0 action-activate" depressed :disabled="busy || form.token.length !== tokenMask.length" @click.stop="activate">
<translate>Activate</translate>
<v-icon v-if="rtl" left dark>mdi-chevron-left</v-icon>
<v-icon v-else right dark>mdi-chevron-right</v-icon>

2
frontend/src/page/discover.vue
View File

@@ -1,6 +1,6 @@
<template>
<div class="p-page p-page-discover">
<v-tabs v-model="active" elevation="0" grow class="transparent" background-color="secondary" slider-color="secondary-dark" :height="$vuetify.breakpoint.smAndDown ? 48 : 64">
<v-tabs v-model="active" elevation="0" grow class="transparent" background-color="secondary" slider-color="secondary-dark" :height="$vuetify.display.smAndDown ? 48 : 64">
<v-tab id="tab-discover-colors" ripple @click="changePath('/discover')">
<translate>Colors</translate>
</v-tab>

2
frontend/src/page/discover/colors.vue
View File

@@ -1,6 +1,6 @@
<template>
<div class="p-tab p-tab-discover-colors">
<v-container grid-list-xs text-xs-center fluid>
<v-container grid-list-xs text-center fluid>
<p class="subtitle-1 pb-6"> This is a very first draft for a "Discover" area where you can find photos by color, by similarity, by season or just randomly. Feedback and contributions welcome. </p>
<v-row class="p-colors">

2
frontend/src/page/discover/todo.vue
View File

@@ -1,6 +1,6 @@
<template>
<div class="p-tab p-tab-discover-todo">
<v-container grid-list-xs text-xs-center fluid>
<v-container grid-list-xs text-center fluid>
<p class="subtitle-1 pb-6"> This is a very first draft for a "Discover" area where you can find photos by color, by similarity, by season or just randomly. Feedback and contributions welcome. </p>
</v-container>
</div>

2
frontend/src/page/help.vue
View File

@@ -1,6 +1,6 @@
<template>
<div id="photoprism-help" class="p-page p-page-help">
<v-toolbar flat color="secondary" :dense="$vuetify.breakpoint.smAndDown">
<v-toolbar flat color="secondary" :dense="$vuetify.display.smAndDown">
<v-toolbar-title>
<translate>Help</translate>
</v-toolbar-title>

2
frontend/src/page/labels.vue
View File

@@ -1,7 +1,7 @@
<template>
<div v-infinite-scroll="loadMore" :class="$config.aclClasses('labels')" class="p-page p-page-labels" style="user-select: none" :infinite-scroll-disabled="scrollDisabled" :infinite-scroll-distance="scrollDistance" :infinite-scroll-listen-for-event="'scrollRefresh'">
<v-form ref="form" class="p-labels-search" lazy-validation @submit.stop.prevent="updateQuery()">
<v-toolbar flat :dense="$vuetify.breakpoint.smAndDown" class="page-toolbar" color="secondary">
<v-toolbar flat :dense="$vuetify.display.smAndDown" class="page-toolbar" color="secondary">
<v-text-field
:value="filter.q"
solo

4
frontend/src/page/library.vue
View File

@@ -1,8 +1,8 @@
<template>
<div :class="$config.aclClasses('library')" class="p-page p-page-library">
<v-tabs v-model="active" elevation="0" class="transparent" grow background-color="secondary" slider-color="secondary-dark" :height="$vuetify.breakpoint.smAndDown ? 48 : 64">
<v-tabs v-model="active" elevation="0" class="transparent" grow background-color="secondary" slider-color="secondary-dark" :height="$vuetify.display.smAndDown ? 48 : 64">
<v-tab v-for="(item, index) in tabs" :id="'tab-' + item.name" :key="index" :class="item.class" ripple @click="changePath(item.path)">
<v-icon v-if="$vuetify.breakpoint.smAndDown" :title="item.label">{{ item.icon }}</v-icon>
<v-icon v-if="$vuetify.display.smAndDown" :title="item.label">{{ item.icon }}</v-icon>
<template v-else>
<v-icon :size="18" :left="!rtl" :right="rtl">{{ item.icon }}</v-icon> {{ item.label }}
</template>

2
frontend/src/page/library/browse.vue
View File

@@ -1,7 +1,7 @@
<template>
<div class="p-page p-page-files">
<v-form ref="form" class="p-files-search" lazy-validation @submit.prevent="updateQuery">
<v-toolbar flat color="secondary" :dense="$vuetify.breakpoint.smAndDown">
<v-toolbar flat color="secondary" :dense="$vuetify.display.smAndDown">
<v-toolbar-title>
<router-link to="/index/files">
<translate key="Originals">Originals</translate>

2
frontend/src/page/library/errors.vue
View File

@@ -1,6 +1,6 @@
<template>
<div v-infinite-scroll="loadMore" class="p-page p-page-errors" :infinite-scroll-disabled="scrollDisabled" :infinite-scroll-distance="scrollDistance" :infinite-scroll-listen-for-event="'scrollRefresh'">
<v-toolbar flat :dense="$vuetify.breakpoint.smAndDown" class="page-toolbar" color="secondary">
<v-toolbar flat :dense="$vuetify.display.smAndDown" class="page-toolbar" color="secondary">
<v-text-field
:value="filter.q"
solo

2
frontend/src/page/library/import.vue
View File

@@ -61,7 +61,7 @@
<translate>Cancel</translate>
</v-btn>
<v-btn v-if="!$config.values.readonly && $config.feature('upload')" :disabled="busy || !ready" color="primary-button" class="white--text ml-0 hidden-xs-only action-upload" depressed @click.stop="showUpload()">
<v-btn v-if="!$config.values.readonly && $config.feature('upload')" :disabled="busy || !ready" color="primary-button" class="white--text ml-0 hidden-xs action-upload" depressed @click.stop="showUpload()">
<translate>Upload</translate>
<v-icon :right="!rtl" :left="rtl" dark>mdi-cloud-upload</v-icon>
</v-btn>

2
frontend/src/page/library/index.vue
View File

@@ -1,5 +1,5 @@
<template>
<div class="p-tab p-tab-index">
<div class="p-tab p-tab-index">
<v-form ref="form" class="p-photo-index" lazy-validation @submit.prevent="submit">
<v-container fluid>
<p class="subtitle-1">

4
frontend/src/page/people.vue
View File

@@ -1,9 +1,9 @@
<template>
<div class="p-page p-page-people" :class="$config.aclClasses('people')">
<!-- TODO: check property touchless TEST -->
<v-tabs v-model="active" elevation="0" class="transparent" grow touchless background-color="secondary" slider-color="secondary-dark" :height="$vuetify.breakpoint.smAndDown ? 48 : 64">
<v-tabs v-model="active" elevation="0" class="transparent" grow touchless background-color="secondary" slider-color="secondary-dark" :height="$vuetify.display.smAndDown ? 48 : 64">
<v-tab v-for="(item, index) in tabs" :id="'tab-' + item.name" :key="index" :class="item.class" ripple @click.stop.prevent="changePath(item.path)">
<v-icon v-if="$vuetify.breakpoint.smAndDown" :title="item.label">{{ item.icon }}</v-icon>
<v-icon v-if="$vuetify.display.smAndDown" :title="item.label">{{ item.icon }}</v-icon>
<template v-else>
<v-icon :size="18" :left="!rtl" :right="rtl">{{ item.icon }}</v-icon>
<v-badge color="secondary-dark" :left="rtl" :right="!rtl">

6
frontend/src/page/people/new.vue
View File

@@ -47,7 +47,7 @@
<v-card-actions class="card-details pa-0">
<v-row v-if="model.SubjUID" align="center">
<v-col cols="12" class="text-xs-left pa-0">
<v-col cols="12" class="text-left pa-0">
<v-text-field
:value="model.Name"
:rules="[textRule]"
@@ -71,7 +71,7 @@
</v-col>
</v-row>
<v-row align="center">
<v-col cols="12" class="text-xs-left pa-0">
<v-col cols="12" class="text-left pa-0">
<!-- TODO: check property allow-overflow TEST -->
<v-combobox
:value="model.Name"
@@ -111,7 +111,7 @@
</v-card>
</v-col>
</v-row>
<div class="text-xs-center mt-4 mb-2">
<div class="text-center mt-4 mb-2">
<v-btn color="secondary" rounded depressed :to="{ name: 'all', query: { q: 'face:new' } }">
<translate>Show all new faces</translate>
</v-btn>

4
frontend/src/page/people/recognized.vue
View File

@@ -130,7 +130,9 @@
<v-card-text class="pb-2 pt-0 card-details" style="user-select: none" @click.stop.prevent="">
<div v-if="model.About" class="caption mb-2" :title="$gettext('About')">
{{ model.About | truncate(100) }}
<!-- TODO: change this filter -->
<!-- {{ model.About | truncate(100) }} -->
{{ model.About }}
</div>
<div class="caption mb-2">

4
frontend/src/page/settings.vue
View File

@@ -1,9 +1,9 @@
<template>
<div class="p-page p-page-settings" :class="$config.aclClasses('settings')">
<!-- TODO: check property touchless TEST -->
<v-tabs v-model="active" elevation="0" class="transparent" grow touchless background-color="secondary" slider-color="secondary-dark" :height="$vuetify.breakpoint.smAndDown ? 48 : 64">
<v-tabs v-model="active" elevation="0" class="transparent" grow touchless background-color="secondary" slider-color="secondary-dark" :height="$vuetify.display.smAndDown ? 48 : 64">
<v-tab v-for="(item, index) in tabs" :id="'tab-' + item.name" :key="index" :class="item.class" ripple @click="changePath(item.path)">
<v-icon v-if="$vuetify.breakpoint.smAndDown" :title="item.label">{{ item.icon }}</v-icon>
<v-icon v-if="$vuetify.display.smAndDown" :title="item.label">{{ item.icon }}</v-icon>
<template v-else>
<v-icon :size="18" :left="!rtl" :right="rtl">{{ item.icon }}</v-icon>
{{ item.label }}

6
frontend/src/page/settings/account.vue
View File

@@ -127,9 +127,9 @@
</v-row>
<v-row>
<v-col class="pa-2 text-xs-center" cols="4" sm="3" md="2" align-self="center">
<v-avatar :size="$vuetify.breakpoint.xsOnly ? 100 : 128" :class="{ clickable: !busy }" @click.stop.prevent="onChangeAvatar()">
<img :src="$vuetify.breakpoint.xsOnly ? user.getAvatarURL('tile_100') : user.getAvatarURL('tile_224')" :alt="accountInfo" :title="$gettext('Change Avatar')" />
<v-col class="pa-2 text-center" cols="4" sm="3" md="2" align-self="center">
<v-avatar :size="$vuetify.display.xs ? 100 : 128" :class="{ clickable: !busy }" @click.stop.prevent="onChangeAvatar()">
<img :src="$vuetify.display.xs ? user.getAvatarURL('tile_100') : user.getAvatarURL('tile_224')" :alt="accountInfo" :title="$gettext('Change Avatar')" />
</v-avatar>
</v-col>

4
frontend/src/page/settings/advanced.vue
View File

@@ -4,7 +4,7 @@
<v-card flat tile class="mt-0 px-1 application">
<v-card-actions v-if="$config.values.restart">
<v-row align="start">
<v-col cols="12" class="pa-2 text-xs-left">
<v-col cols="12" class="pa-2 text-left">
<!-- TODO: change icon -->
<v-alert color="primary" icon="info" class="pa-2" type="info" outlined>
<a style="color: inherit" href="#restart">
@@ -375,7 +375,7 @@
<v-row align="start">
<v-col cols="12" class="pa-2">
<a id="restart"></a>
<v-btn color="primary-button" :block="$vuetify.breakpoint.xsOnly" :disabled="busy || !$config.values.restart" class="white--text" depressed @click.stop.p.prevent="onRestart">
<v-btn color="primary-button" :block="$vuetify.display.xs" :disabled="busy || !$config.values.restart" class="white--text" depressed @click.stop.p.prevent="onRestart">
<translate>Restart</translate>
<v-icon :right="!rtl" :left="rtl" dark>mdi-restart</v-icon>
</v-btn>

12
frontend/src/page/settings/services.vue
View File

@@ -8,13 +8,13 @@
{{ props.item.AccName }}
</button>
</td>
<td class="text-xs-center">
<td class="text-center">
<v-btn icon small text :ripple="false" class="action-toggle-share" color="transparent" @click.stop.prevent="editSharing(props.item)">
<v-icon v-if="props.item.AccShare" color="secondary-dark">mdi-check</v-icon>
<v-icon v-else color="secondary-dark">mdi-cog</v-icon>
</v-btn>
</td>
<td class="text-xs-center">
<td class="text-center">
<v-btn icon small text :ripple="false" class="action-toggle-sync" color="transparent" @click.stop.prevent="editSync(props.item)">
<v-icon v-if="props.item.AccErrors" color="secondary-dark" :title="props.item.AccError">mdi-alert </v-icon>
<!-- TODO: change icon -->
@@ -26,7 +26,7 @@
<td class="hidden-sm-and-down">
{{ formatDate(props.item.SyncDate) }}
</td>
<td class="hidden-xs-only text-xs-right" nowrap>
<td class="hidden-xs text-right" nowrap>
<v-btn icon small text :ripple="false" class="action-remove action-secondary" color="transparent" @click.stop.prevent="remove(props.item)">
<v-icon color="secondary-dark">mdi-delete</v-icon>
</v-btn>
@@ -45,13 +45,13 @@
</p>
<v-form ref="form" lazy-validation class="p-form-settings mt-2" accept-charset="UTF-8" @submit.prevent="add">
<v-btn v-if="user.hasWebDAV()" depressed color="secondary-light" class="action-webdav-dialog compact ml-0 my-2 mr-2" :block="$vuetify.breakpoint.xsOnly" :disabled="isPublic || isDemo" @click.stop="webdavDialog">
<v-btn v-if="user.hasWebDAV()" depressed color="secondary-light" class="action-webdav-dialog compact ml-0 my-2 mr-2" :block="$vuetify.display.xs" :disabled="isPublic || isDemo" @click.stop="webdavDialog">
<translate>Connect via WebDAV</translate>
<!-- TODO: change icon -->
<v-icon :right="!rtl" :left="rtl" dark>sync_alt</v-icon>
</v-btn>
<v-btn color="primary-button" class="white--text compact ml-0 my-2 mr-2" :block="$vuetify.breakpoint.xsOnly" :disabled="isPublic || isDemo" depressed @click.stop="add">
<v-btn color="primary-button" class="white--text compact ml-0 my-2 mr-2" :block="$vuetify.display.xs" :disabled="isPublic || isDemo" depressed @click.stop="add">
<translate>Connect</translate>
<v-icon :right="!rtl" :left="rtl" dark>mdi-plus</v-icon>
</v-btn>
@@ -101,7 +101,7 @@ export default {
class: "hidden-sm-and-down",
align: "left",
},
{ text: "", value: "", sortable: false, class: "hidden-xs-only", align: "right" },
{ text: "", value: "", sortable: false, class: "hidden-xs", align: "right" },
],
rtl: this.$rtl,
};

2
frontend/src/share.vue
View File

@@ -33,7 +33,7 @@ export default {
},
computed: {
appClass: function () {
return [this.$route.meta.background, this.$vuetify.breakpoint.smAndDown ? "small-screen" : "large-screen", this.$route.meta.hideNav ? "hide-nav" : "show-nav"];
return [this.$route.meta.background, this.$vuetify.display.smAndDown ? "small-screen" : "large-screen", this.$route.meta.hideNav ? "hide-nav" : "show-nav"];
},
},
created() {

12
frontend/webpack.config.js
View File

@@ -74,7 +74,10 @@ const config = {
modules: isCustom ? [PATHS.custom, PATHS.src, PATHS.modules] : [PATHS.src, PATHS.modules],
preferRelative: true,
alias: {
vue: isDev ? "vue/dist/vue.js" : "vue/dist/vue.min.js",
// TODO: change it
'vue$': 'vue/dist/vue.runtime.esm-bundler.js',
// vue: isDev ? "vue/dist/vue.js" : "vue/dist/vue.min.js",
vue: '@vue/compat',
},
},
plugins: [
@@ -106,10 +109,7 @@ const config = {
rules: [
{
test: /\.vue$/,
include: isCustom ? [PATHS.custom, PATHS.src] : [PATHS.src],
use: [
{
loader: "vue-loader",
loader: 'vue-loader',
options: {
loaders: {
js: "babel-loader",
@@ -117,8 +117,6 @@ const config = {
},
},
},
],
},
{
test: /\.js$/,
include: PATHS.src,