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

114
frontend/src/app.js
View File

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

2
frontend/src/app.vue
View File

@@ -33,7 +33,7 @@ export default {
}, },
computed: { computed: {
appClass: function () { 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() { created() {

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

@@ -73,7 +73,7 @@ export default [
}, },
{ {
name: "help", name: "help",
path: "/help*", path: "/help/:pathMatch(.*)*",
component: Help, component: Help,
meta: { title: $gettext("Help & Support"), auth: false }, meta: { title: $gettext("Help & Support"), auth: false },
}, },
@@ -94,7 +94,7 @@ export default [
}, },
{ {
name: "admin", name: "admin",
path: "/admin/*", path: "/admin/:pathMatch(.*)*",
component: Admin, component: Admin,
meta: { meta: {
title: $gettext("Settings"), title: $gettext("Settings"),
@@ -298,10 +298,10 @@ export default [
}, },
{ {
name: "files", name: "files",
path: "/index/files*", path: "/index/files/:pathMatch(.*)*",
component: Browse, component: Browse,
meta: { title: $gettext("File Browser"), auth: true }, meta: { title: $gettext("File Browser"), auth: true },
}, },
{ {
name: "hidden", name: "hidden",
path: "/hidden", path: "/hidden",
@@ -463,7 +463,7 @@ export default [
props: { tab: 3 }, props: { tab: 3 },
}, },
{ {
path: "*", path: '/:pathMatch(.*)*',
redirect: "/albums", 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); return vm.$ngettext(msgid, plural, n);
} }
export function Mount(Vue, app, router, vuetify) { export function Mount(app) {
vm = new Vue({ app.mount("#photoprism");
router,
vuetify,
render: (h) => h(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-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`"> <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> <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 --> <!-- TODO: change this icon -->
<v-icon v-if="selection.length === 0">menu</v-icon> <v-icon v-if="selection.length === 0">menu</v-icon>
<span v-else class="count-clipboard">{{ selection.length }}</span> <span v-else class="count-clipboard">{{ selection.length }}</span>
</v-btn> </v-btn>
</template> </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-icon>mdi-share-variant</v-icon>
</v-btn> </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-icon>mdi-pencil</v-icon>
</v-btn> </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-icon>mdi-download</v-icon>
</v-btn> </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-icon>mdi-bookmark</v-icon>
</v-btn> </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-icon>mdi-delete</v-icon>
</v-btn> </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-icon>mdi-close</v-icon>
</v-btn> </v-btn>
</v-speed-dial> </v-speed-dial>

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

@@ -1,8 +1,8 @@
<template> <template>
<v-form ref="form" lazy-validation autocomplete="off" class="p-photo-toolbar p-album-toolbar" accept-charset="UTF-8" @submit.prevent="updateQuery()"> <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"> <v-toolbar-title :title="album.Title">
<span class="hidden-xs-only"> <span class="hidden-xs">
<router-link :to="{ name: collectionRoute }"> <router-link :to="{ name: collectionRoute }">
{{ T(collectionTitle) }} {{ T(collectionTitle) }}
</router-link> </router-link>
@@ -13,7 +13,7 @@
<v-spacer></v-spacer> <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-icon>mdi-refresh</v-icon>
</v-btn> </v-btn>

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

@@ -2,18 +2,18 @@
<div class="auth-footer"> <div class="auth-footer">
<footer> <footer>
<v-row align="start" class="pa-0 ma-0"> <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 }} {{ about }}
</v-col> </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> <a v-if="legalUrl" :href="legalUrl" target="_blank" class="text-link" :style="`color: ${colors.link}!important`">{{ legalInfo }}</a>
<span v-else>{{ legalInfo }}</span> <span v-else>{{ legalInfo }}</span>
</v-col> </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> <strong>{{ caption }}</strong>
</v-col> </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"> <router-link to="/about" class="text-link">
<span class="white--text">Made with ❤️ in Berlin</span> <span class="white--text">Made with ❤️ in Berlin</span>
</router-link> </router-link>

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

@@ -1,6 +1,6 @@
<template> <template>
<div class="auth-header"> <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" /> <img :src="$config.getIcon()" :alt="config.name" />
</div> </div>
</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 IconSponsor from "component/icon/sponsor.vue";
import IconPrism from "component/icon/prism.vue"; import IconPrism from "component/icon/prism.vue";
const components = {}; export function installComponents(app) {
app.component("PNotify", PNotify);
components.install = (Vue) => { app.component("PNavigation", PNavigation);
Vue.component("PNotify", PNotify); app.component("PScrollTop", PScrollTop);
Vue.component("PNavigation", PNavigation); app.component("PLoadingBar", PLoadingBar);
Vue.component("PScrollTop", PScrollTop); app.component("PVideoPlayer", PVideoPlayer);
Vue.component("PLoadingBar", PLoadingBar); app.component("PPhotoViewer", PPhotoViewer);
Vue.component("PVideoPlayer", PVideoPlayer); app.component("PPhotoToolbar", PPhotoToolbar);
Vue.component("PPhotoViewer", PPhotoViewer); app.component("PPhotoCards", PPhotoCards);
Vue.component("PPhotoToolbar", PPhotoToolbar); app.component("PPhotoMosaic", PPhotoMosaic);
Vue.component("PPhotoCards", PPhotoCards); app.component("PPhotoList", PPhotoList);
Vue.component("PPhotoMosaic", PPhotoMosaic); app.component("PPhotoPreview", PPhotoPreview);
Vue.component("PPhotoList", PPhotoList); app.component("PPhotoClipboard", PPhotoClipboard);
Vue.component("PPhotoPreview", PPhotoPreview); app.component("PAlbumClipboard", PAlbumClipboard);
Vue.component("PPhotoClipboard", PPhotoClipboard); app.component("PAlbumToolbar", PAlbumToolbar);
Vue.component("PAlbumClipboard", PAlbumClipboard); app.component("PLabelClipboard", PLabelClipboard);
Vue.component("PAlbumToolbar", PAlbumToolbar); app.component("PFileClipboard", PFileClipboard);
Vue.component("PLabelClipboard", PLabelClipboard); app.component("PSubjectClipboard", PSubjectClipboard);
Vue.component("PFileClipboard", PFileClipboard); app.component("PAuthHeader", PAuthHeader);
Vue.component("PSubjectClipboard", PSubjectClipboard); app.component("PAuthFooter", PAuthFooter);
Vue.component("PAuthHeader", PAuthHeader); app.component("PAboutFooter", PAboutFooter);
Vue.component("PAuthFooter", PAuthFooter); app.component("IconLivePhoto", IconLivePhoto);
Vue.component("PAboutFooter", PAboutFooter); app.component("IconSponsor", IconSponsor);
Vue.component("IconLivePhoto", IconLivePhoto); app.component("IconPrism", IconPrism);
Vue.component("IconSponsor", IconSponsor); }
Vue.component("IconPrism", IconPrism);
};
export default components;

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-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`"> <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> <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 --> <!-- TODO: change this icon -->
<v-icon v-if="selection.length === 0">menu</v-icon> <v-icon v-if="selection.length === 0">menu</v-icon>
<span v-else class="count-clipboard">{{ selection.length }}</span> <span v-else class="count-clipboard">{{ selection.length }}</span>
</v-btn> </v-btn>
</template> </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-icon>mdi-download</v-icon>
</v-btn> </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-icon>mdi-bookmark</v-icon>
</v-btn> </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-icon>mdi-close</v-icon>
</v-btn> </v-btn>
</v-speed-dial> </v-speed-dial>

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

@@ -2,7 +2,7 @@
<v-card flat tile class="application footer"> <v-card flat tile class="application footer">
<v-card-actions class="footer-actions"> <v-card-actions class="footer-actions">
<v-row align="start" class="pt-6"> <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 <strong
><router-link to="/about" class="text-link text-selectable"> ><router-link to="/about" class="text-link text-selectable">
{{ about }}{{ getMembership() }} {{ about }}{{ getMembership() }}
@@ -13,8 +13,8 @@
> >
</v-col> </v-col>
<v-col cols="12" sm="6" class="px-0 pb-2 body-1 text-xs-center text-sm-right"> <v-col cols="12" sm="6" class="px-0 pb-2 body-1 text-center text-sm-right">
<div class="hidden-xs-only"> <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://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> <a href="https://www.photoprism.app/about/team/" target="_blank" class="body-link">© 2018-2024 PhotoPrism UG</a>
</div> </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-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`"> <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> <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 --> <!-- TODO: change this icon -->
<v-icon v-if="selection.length === 0">menu</v-icon> <v-icon v-if="selection.length === 0">menu</v-icon>
<span v-else class="count-clipboard">{{ selection.length }}</span> <span v-else class="count-clipboard">{{ selection.length }}</span>
@@ -23,14 +23,14 @@
TODO: change this icon TODO: change this icon
<v-icon>cloud_download</v-icon> <v-icon>cloud_download</v-icon>
</v-btn --> </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-icon>mdi-bookmark</v-icon>
</v-btn> </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-icon>mdi-delete</v-icon>
</v-btn> </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-icon>mdi-close</v-icon>
</v-btn> </v-btn>
</v-speed-dial> </v-speed-dial>

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

@@ -1,35 +1,35 @@
<template> <template>
<div id="p-navigation" :class="{ 'sidenav-visible': drawer }"> <div id="p-navigation" :class="{ 'sidenav-visible': drawer }">
<template v-if="visible && $vuetify.breakpoint.smAndDown"> <template v-if="visible && $vuetify.display.smAndDown">
<v-toolbar dark fixed flat dense color="navigation darken-1" class="nav-small elevation-2" @click.stop.prevent> <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()"> <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 }" /> <img :src="appIcon" :alt="config.name" :class="{ 'animate-hue': indexing }" />
</v-avatar> </v-avatar>
<v-toolbar-title class="nav-title"> <v-toolbar-title class="nav-title">
<span :class="{ clickable: auth }" @click.stop.prevent="showNavigation()">{{ page.title }}</span> <span :class="{ clickable: auth }" @click.stop.prevent="showNavigation()">{{ page.title }}</span>
</v-toolbar-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 --> <!-- TODO: change icon -->
<v-icon dark>more_vert</v-icon> <v-icon dark>more_vert</v-icon>
</v-btn> </v-btn>
</v-toolbar> </v-toolbar>
</template> </template>
<template v-else-if="visible && !auth"> <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"> <v-avatar class="nav-avatar" tile :size="28">
<img :src="appIcon" :alt="config.name" /> <img :src="appIcon" :alt="config.name" />
</v-avatar> </v-avatar>
<v-toolbar-title class="nav-title"> <v-toolbar-title class="nav-title">
{{ page.title }} {{ page.title }}
</v-toolbar-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 --> <!-- TODO: change icon -->
<v-icon dark>more_vert</v-icon> <v-icon dark>more_vert</v-icon>
</v-btn> </v-btn>
</v-toolbar> </v-toolbar>
</template> </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-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.breakpoint.smAndDown"> <v-toolbar flat :dense="$vuetify.display.smAndDown">
<v-list class="navigation-home"> <v-list class="navigation-home">
<v-list-item class="nav-logo"> <v-list-item class="nav-logo">
<v-list-item-avatar class="nav-avatar clickable" @click.stop.prevent="goHome"> <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__ui pswp__ui--hidden">
<div class="pswp__top-bar"> <div class="pswp__top-bar">
<div class="pswp__taken hidden-xs-only"> <div class="pswp__taken hidden-xs">
{{ formatDate(item.TakenAtLocal) }} {{ formatDate(item.TakenAtLocal) }}
</div> </div>

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

@@ -28,7 +28,9 @@
<div class="pa-6 card-details"> <div class="pa-6 card-details">
<div> <div>
<h3 class="body-2 mb-2" :title="photo.Title"> <h3 class="body-2 mb-2" :title="photo.Title">
{{ photo.Title | truncate(80) }} <!-- TODO: change this filter -->
<!-- {{ photo.Title | truncate(80) }} -->
{{ photo.Title }}
</h3> </h3>
<div v-if="photo.Description" class="caption mb-2"> <div v-if="photo.Description" class="caption mb-2">
{{ photo.Description }} {{ photo.Description }}
@@ -128,13 +130,13 @@
<v-card-actions v-if="!isSharedView && photo.Quality < 3 && context === 'review'" class="card-details pa-0"> <v-card-actions v-if="!isSharedView && photo.Quality < 3 && context === 'review'" class="card-details pa-0">
<v-row align="center"> <v-row align="center">
<v-col cols="6" class="text-xs-center pa-1"> <v-col cols="6" class="text-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-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-icon dark>mdi-close</v-icon>
</v-btn> </v-btn>
</v-col> </v-col>
<v-col cols="6" class="text-xs-center pa-1"> <v-col cols="6" class="text-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-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 --> <!-- TODO: change this icon -->
<v-icon dark>check</v-icon> <v-icon dark>check</v-icon>
</v-btn> </v-btn>
@@ -146,7 +148,9 @@
<div> <div>
<h3 class="body-2 mb-2" :title="photo.Title"> <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)"> <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> </button>
</h3> </h3>
<div v-if="photo.Description" class="caption mb-2" :title="$gettext('Description')"> <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-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`"> <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> <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 --> <!-- TODO: change this icon -->
<v-icon v-if="selection.length === 0">menu</v-icon> <v-icon v-if="selection.length === 0">menu</v-icon>
<span v-else class="count-clipboard">{{ selection.length }}</span> <span v-else class="count-clipboard">{{ selection.length }}</span>
</v-btn> </v-btn>
</template> </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-icon>mdi-cloud</v-icon>
</v-btn> </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 --> <!-- TODO: change this icon -->
<v-icon>check</v-icon> <v-icon>check</v-icon>
</v-btn> </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-icon>mdi-pencil</v-icon>
</v-btn> </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-icon>mdi-lock</v-icon>
</v-btn> </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-icon>mdi-download</v-icon>
</v-btn> </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-icon>mdi-bookmark</v-icon>
</v-btn> </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-icon>mdi-package-down</v-icon>
</v-btn> </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 --> <!-- TODO: change this icon -->
<v-icon>unarchive</v-icon> <v-icon>unarchive</v-icon>
</v-btn> </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-icon>mdi-eject</v-icon>
</v-btn> </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-icon>mdi-delete</v-icon>
</v-btn> </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-icon>mdi-close</v-icon>
</v-btn> </v-btn>
</v-speed-dial> </v-speed-dial>

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

@@ -26,19 +26,19 @@
<thead> <thead>
<tr> <tr>
<th class="p-col-select" /> <th class="p-col-select" />
<th class="text-xs-left"> <th class="text-left">
{{ $gettext("Title") }} {{ $gettext("Title") }}
</th> </th>
<th class="text-xs-left hidden-xs-only"> <th class="text-left hidden-xs">
{{ $gettext("Taken") }} {{ $gettext("Taken") }}
</th> </th>
<th class="text-xs-left hidden-sm-and-down"> <th class="text-left hidden-sm-and-down">
{{ $gettext("Camera") }} {{ $gettext("Camera") }}
</th> </th>
<th class="text-xs-left hidden-xs-only"> <th class="text-left hidden-xs">
{{ showName ? $gettext("Name") : $gettext("Location") }} {{ showName ? $gettext("Name") : $gettext("Location") }}
</th> </th>
<th class="text-xs-center hidden-xs-only" /> <th class="text-center hidden-xs" />
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
@@ -75,7 +75,7 @@
<td class="p-photo-desc clickable" :data-uid="photo.UID" @click.exact="isSharedView ? openPhoto(index) : editPhoto(index)"> <td class="p-photo-desc clickable" :data-uid="photo.UID" @click.exact="isSharedView ? openPhoto(index) : editPhoto(index)">
{{ photo.Title }} {{ photo.Title }}
</td> </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)"> <button @click.stop.prevent="openDate(index)">
{{ photo.shortDateString() }} {{ photo.shortDateString() }}
</button> </button>
@@ -83,7 +83,7 @@
<td class="p-photo-desc hidden-sm-and-down"> <td class="p-photo-desc hidden-sm-and-down">
<button @click.stop.prevent="editPhoto(index)">{{ photo.CameraMake }} {{ photo.CameraModel }}</button> <button @click.stop.prevent="editPhoto(index)">{{ photo.CameraMake }} {{ photo.CameraModel }}</button>
</td> </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)"> <button v-if="filter.order === 'name'" :title="$gettext('Name')" @click.exact="downloadFile(index)">
{{ photo.FileName }} {{ photo.FileName }}
</button> </button>
@@ -95,7 +95,7 @@
</span> </span>
</td> </td>
<template v-if="!isSharedView"> <template v-if="!isSharedView">
<td class="text-xs-center"> <td class="text-center">
<template v-if="index < firstVisibleElementIndex || index > lastVisibileElementIndex"> <template v-if="index < firstVisibleElementIndex || index > lastVisibileElementIndex">
<div v-if="hidePrivate" class="v-btn v-btn--icon v-btn--small" /> <div v-if="hidePrivate" class="v-btn v-btn--icon v-btn--small" />
<div 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> <template>
<v-form ref="form" lazy-validation autocomplete="off" class="p-photo-toolbar" accept-charset="UTF-8" :class="{ embedded: embedded }" @submit.prevent="updateQuery()"> <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"> <template v-if="!embedded">
<v-text-field <v-text-field
:value="filter.q" :value="filter.q"
@@ -35,7 +35,7 @@
<v-icon>location_off</v-icon> <v-icon>location_off</v-icon>
</v-btn> </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-icon>mdi-refresh</v-icon>
</v-btn> </v-btn>

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

@@ -1,6 +1,6 @@
<template> <template>
<transition name="fade-transition"> <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-icon>mdi-arrow-up</v-icon>
</v-btn> </v-btn>
</transition> </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-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`"> <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> <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> <v-icon v-if="selection.length === 0">mdi-menu</v-icon>
<span v-else class="count-clipboard">{{ selection.length }}</span> <span v-else class="count-clipboard">{{ selection.length }}</span>
</v-btn> </v-btn>
</template> </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-icon>mdi-download</v-icon>
</v-btn> </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-icon>mdi-bookmark</v-icon>
</v-btn> </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-icon>mdi-close</v-icon>
</v-btn> </v-btn>
</v-speed-dial> </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/vuetify/dist/vuetify.min.css");
@import url("../../node_modules/maplibre-gl/dist/maplibre-gl.css"); @import url("../../node_modules/maplibre-gl/dist/maplibre-gl.css");
@import url("typography.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 raised elevation="24">
<v-card-title class="pa-2"> <v-card-title class="pa-2">
<v-row 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"> <h3 class="headline pa-0">
<translate>Apps and Devices</translate> <translate>Apps and Devices</translate>
</h3> </h3>
</v-col> </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> <v-icon v-if="action === 'add'" size="28" color="primary">mdi-plus</v-icon>
<!-- TODO: change this icon --> <!-- TODO: change this icon -->
<v-icon v-else-if="action === 'copy'" size="28" color="primary">password</v-icon> <v-icon v-else-if="action === 'copy'" size="28" color="primary">password</v-icon>
@@ -52,7 +52,7 @@
</v-card-text> </v-card-text>
<v-card-actions class="pa-2"> <v-card-actions class="pa-2">
<v-row 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"> <v-btn depressed color="secondary-light" class="action-back ml-0" @click.stop="onBack">
<translate>Back</translate> <translate>Back</translate>
</v-btn> </v-btn>
@@ -91,7 +91,7 @@
</v-card-text> </v-card-text>
<v-card-actions class="pa-2"> <v-card-actions class="pa-2">
<v-row 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"> <v-btn depressed color="secondary-light" class="action-close ml-0" @click.stop="close">
<translate>Close</translate> <translate>Close</translate>
</v-btn> </v-btn>
@@ -140,7 +140,7 @@
</v-card-text> </v-card-text>
<v-card-actions class="pa-2"> <v-card-actions class="pa-2">
<v-row 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"> <v-btn depressed color="secondary-light" class="action-cancel ml-0" @click.stop="onCancel">
<translate>Cancel</translate> <translate>Cancel</translate>
</v-btn> </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.')"> <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"> <template #item="props">
<tr :data-name="props.item.ClientName"> <tr :data-name="props.item.ClientName">
<td class="text-selectable text-xs-left"> <td class="text-selectable text-left">
{{ props.item.ClientName }} {{ props.item.ClientName }}
</td> </td>
<td class="text-xs-left hidden-xs-only" nowrap> <td class="text-left hidden-xs" nowrap>
{{ scopeInfo(props.item.AuthScope) }} {{ scopeInfo(props.item.AuthScope) }}
</td> </td>
<td class="text-xs-left" nowrap> <td class="text-left" nowrap>
{{ formatDateTime(props.item.LastActive) }} {{ formatDateTime(props.item.LastActive) }}
</td> </td>
<td class="text-xs-left hidden-sm-and-down" nowrap> <td class="text-left hidden-sm-and-down" nowrap>
{{ formatDate(props.item.Expires) }} {{ formatDate(props.item.Expires) }}
</td> </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-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-icon color="secondary-dark">mdi-delete</v-icon>
</v-btn> </v-btn>
@@ -184,7 +184,7 @@
</v-card-text> </v-card-text>
<v-card-actions class="pa-2"> <v-card-actions class="pa-2">
<v-row 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"> <v-btn depressed color="secondary-light" class="action-close ml-0" @click.stop="close">
<translate>Close</translate> <translate>Close</translate>
</v-btn> </v-btn>
@@ -249,7 +249,7 @@ export default {
{ text: this.$gettext("Name"), value: "ID", sortable: false, align: "left" }, { text: this.$gettext("Name"), value: "ID", sortable: false, align: "left" },
{ {
text: this.$gettext("Scope"), text: this.$gettext("Scope"),
class: "hidden-xs-only", class: "hidden-xs",
value: "AuthScope", value: "AuthScope",
sortable: false, sortable: false,
align: "left", align: "left",

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

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

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

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

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

@@ -3,19 +3,19 @@
<v-card raised elevation="24"> <v-card raised elevation="24">
<v-container fluid class="pb-2 pr-2 pl-2"> <v-container fluid class="pb-2 pr-2 pl-2">
<v-row> <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-icon size="54" color="secondary-dark lighten-1">mdi-delete-outline</v-icon>
</v-col> </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"> <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> <translate key="Are you sure you want to delete these albums?">Are you sure you want to delete these albums?</translate>
</div> </div>
</v-col> </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"> <v-btn depressed color="secondary-light" class="action-cancel" @click.stop="cancel">
<translate key="Cancel">Cancel</translate> <translate key="Cancel">Cancel</translate>
</v-btn> </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> <translate key="Delete">Delete</translate>
</v-btn> </v-btn>
</v-col> </v-col>

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

@@ -44,11 +44,11 @@
</v-card-text> </v-card-text>
<v-card-actions class="pt-0 px-6"> <v-card-actions class="pt-0 px-6">
<v-row 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" @click.stop="close"> <v-btn depressed color="secondary-light" class="action-cancel" @click.stop="close">
<translate>Cancel</translate> <translate>Cancel</translate>
</v-btn> </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> <translate>Save</translate>
</v-btn> </v-btn>
</v-col> </v-col>

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

@@ -3,20 +3,20 @@
<v-card raised elevation="24"> <v-card raised elevation="24">
<v-container fluid class="pb-2 pr-2 pl-2"> <v-container fluid class="pb-2 pr-2 pl-2">
<v-row> <v-row>
<v-col cols="3" class="text-xs-center"> <v-col cols="3" class="text-center">
<!-- TODO: change this icon --> <!-- TODO: change this icon -->
<v-icon size="54" color="secondary-dark lighten-1">{{ icon }}</v-icon> <v-icon size="54" color="secondary-dark lighten-1">{{ icon }}</v-icon>
</v-col> </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"> <div class="subtitle-1 pr-1">
<translate>Are you sure?</translate> <translate>Are you sure?</translate>
</div> </div>
</v-col> </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"> <v-btn depressed color="secondary-light" class="action-cancel compact" @click.stop="cancel">
<translate key="Cancel">Cancel</translate> <translate key="Cancel">Cancel</translate>
</v-btn> </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> <translate key="Delete">Yes</translate>
</v-btn> </v-btn>
</v-col> </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 PAccountPasscodeDialog from "dialog/account/passcode.vue";
import PAccountPasswordDialog from "dialog/account/password.vue"; import PAccountPasswordDialog from "dialog/account/password.vue";
const dialogs = {}; export function installDialogs(app) {
app.component("PServiceAddDialog", PServiceAddDialog);
dialogs.install = (Vue) => { app.component("PServiceRemoveDialog", PServiceRemoveDialog);
Vue.component("PServiceAddDialog", PServiceAddDialog); app.component("PServiceEditDialog", PServiceEditDialog);
Vue.component("PServiceRemoveDialog", PServiceRemoveDialog); app.component("PPhotoArchiveDialog", PPhotoArchiveDialog);
Vue.component("PServiceEditDialog", PServiceEditDialog); app.component("PPhotoAlbumDialog", PPhotoAlbumDialog);
Vue.component("PPhotoArchiveDialog", PPhotoArchiveDialog); app.component("PPhotoEditDialog", PPhotoEditDialog);
Vue.component("PPhotoAlbumDialog", PPhotoAlbumDialog); app.component("PPhotoDeleteDialog", PPhotoDeleteDialog);
Vue.component("PPhotoEditDialog", PPhotoEditDialog); app.component("PFileDeleteDialog", PFileDeleteDialog);
Vue.component("PPhotoDeleteDialog", PPhotoDeleteDialog); app.component("PAlbumEditDialog", PAlbumEditDialog);
Vue.component("PFileDeleteDialog", PFileDeleteDialog); app.component("PAlbumDeleteDialog", PAlbumDeleteDialog);
Vue.component("PAlbumEditDialog", PAlbumEditDialog); app.component("PLabelDeleteDialog", PLabelDeleteDialog);
Vue.component("PAlbumDeleteDialog", PAlbumDeleteDialog); app.component("PPeopleMergeDialog", PPeopleMergeDialog);
Vue.component("PLabelDeleteDialog", PLabelDeleteDialog); app.component("PUploadDialog", PUploadDialog);
Vue.component("PPeopleMergeDialog", PPeopleMergeDialog); app.component("PVideoViewer", PVideoViewer);
Vue.component("PUploadDialog", PUploadDialog); app.component("PShareDialog", PShareDialog);
Vue.component("PVideoViewer", PVideoViewer); app.component("PShareUploadDialog", PShareUploadDialog);
Vue.component("PShareDialog", PShareDialog); app.component("PWebdavDialog", PWebdavDialog);
Vue.component("PShareUploadDialog", PShareUploadDialog); app.component("PReloadDialog", PReloadDialog);
Vue.component("PWebdavDialog", PWebdavDialog); app.component("PSponsorDialog", PSponsorDialog);
Vue.component("PReloadDialog", PReloadDialog); app.component("PConfirmDialog", PConfirmDialog);
Vue.component("PSponsorDialog", PSponsorDialog); app.component("PAccountAppsDialog", PAccountAppsDialog);
Vue.component("PConfirmDialog", PConfirmDialog); app.component("PAccountPasscodeDialog", PAccountPasscodeDialog);
Vue.component("PAccountAppsDialog", PAccountAppsDialog); app.component("PAccountPasswordDialog", PAccountPasswordDialog);
Vue.component("PAccountPasscodeDialog", PAccountPasscodeDialog); }
Vue.component("PAccountPasswordDialog", PAccountPasswordDialog);
};
export default dialogs;

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

@@ -3,19 +3,19 @@
<v-card raised elevation="24"> <v-card raised elevation="24">
<v-container fluid class="pb-2 pr-2 pl-2"> <v-container fluid class="pb-2 pr-2 pl-2">
<v-row> <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-icon size="54" color="secondary-dark lighten-1">mdi-delete-outline</v-icon>
</v-col> </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"> <div class="subtitle-1 pr-1">
<translate>Are you sure you want to permanently delete this file?</translate> <translate>Are you sure you want to permanently delete this file?</translate>
</div> </div>
</v-col> </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"> <v-btn depressed color="secondary-light" class="action-cancel" @click.stop="cancel">
<translate key="Cancel">Cancel</translate> <translate key="Cancel">Cancel</translate>
</v-btn> </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> <translate key="Delete">Delete</translate>
</v-btn> </v-btn>
</v-col> </v-col>

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

@@ -3,19 +3,19 @@
<v-card raised elevation="24"> <v-card raised elevation="24">
<v-container fluid class="pb-2 pr-2 pl-2"> <v-container fluid class="pb-2 pr-2 pl-2">
<v-row> <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-icon size="54" color="secondary-dark lighten-1">mdi-delete-outline</v-icon>
</v-col> </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"> <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> <translate key="Are you sure you want to delete these labels?">Are you sure you want to delete these labels?</translate>
</div> </div>
</v-col> </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"> <v-btn depressed color="secondary-light" class="action-cancel" @click.stop="cancel">
<translate key="Cancel">Cancel</translate> <translate key="Cancel">Cancel</translate>
</v-btn> </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> <translate key="Delete">Delete</translate>
</v-btn> </v-btn>
</v-col> </v-col>

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

@@ -3,20 +3,20 @@
<v-card raised elevation="24"> <v-card raised elevation="24">
<v-container fluid class="pb-2 pr-2 pl-2"> <v-container fluid class="pb-2 pr-2 pl-2">
<v-row> <v-row>
<v-col cols="3" class="text-xs-center"> <v-col cols="3" class="text-center">
<!-- TODO: change this icon --> <!-- TODO: change this icon -->
<v-icon size="54" color="secondary-dark lighten-1">people</v-icon> <v-icon size="54" color="secondary-dark lighten-1">people</v-icon>
</v-col> </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"> <div class="subtitle-1 pr-1">
{{ prompt }} {{ prompt }}
</div> </div>
</v-col> </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"> <v-btn depressed color="secondary-light" class="action-cancel" @click.stop="cancel">
<translate key="No">No</translate> <translate key="No">No</translate>
</v-btn> </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> <translate key="Yes">Yes</translate>
</v-btn> </v-btn>
</v-col> </v-col>

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

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

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

@@ -3,19 +3,19 @@
<v-card raised elevation="24"> <v-card raised elevation="24">
<v-container fluid class="pb-2 pr-2 pl-2"> <v-container fluid class="pb-2 pr-2 pl-2">
<v-row> <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-icon size="54" color="secondary-dark lighten-1">mdi-package-down</v-icon>
</v-col> </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"> <div class="subtitle-1 pr-1">
<translate>Are you sure you want to archive the selection?</translate> <translate>Are you sure you want to archive the selection?</translate>
</div> </div>
</v-col> </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"> <v-btn depressed color="secondary-light" class="action-cancel" @click.stop="cancel">
<translate>No</translate> <translate>No</translate>
</v-btn> </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> <translate>Yes</translate>
</v-btn> </v-btn>
</v-col> </v-col>

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

@@ -3,10 +3,10 @@
<v-card raised elevation="24"> <v-card raised elevation="24">
<v-container fluid class="pb-2 pr-2 pl-2"> <v-container fluid class="pb-2 pr-2 pl-2">
<v-row> <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-icon size="54" color="secondary-dark lighten-1">mdi-delete-outline</v-icon>
</v-col> </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"> <div v-if="text === ''" class="subtitle-1 pr-1">
<translate>Are you sure you want to permanently delete these pictures?</translate> <translate>Are you sure you want to permanently delete these pictures?</translate>
</div> </div>
@@ -14,14 +14,14 @@
{{ text }} {{ text }}
</div> </div>
</v-col> </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"> <v-btn depressed color="secondary-light" class="action-cancel" @click.stop="cancel">
<translate key="Cancel">Cancel</translate> <translate key="Cancel">Cancel</translate>
</v-btn> </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> <translate key="Delete">Delete</translate>
</v-btn> </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 }} {{ action }}
</v-btn> </v-btn>
</v-col> </v-col>

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

@@ -1,8 +1,8 @@
<template> <template>
<v-dialog :value="show" fullscreen hide-overlay scrollable persistent class="p-photo-edit-dialog" @keydown.esc="close"> <v-dialog :value="show" fullscreen hide-overlay scrollable persistent class="p-photo-edit-dialog" @keydown.esc="close">
<v-card color="application"> <v-card color="application">
<v-toolbar dark flat color="navigation" :dense="$vuetify.breakpoint.smAndDown"> <v-toolbar theme="dark" flat color="navigation" :dense="$vuetify.display.smAndDown">
<v-btn icon dark class="action-close" @click.stop="close"> <v-btn icon theme="dark" class="action-close" @click.stop="close">
<v-icon>mdi-close</v-icon> <v-icon>mdi-close</v-icon>
</v-btn> </v-btn>
<v-toolbar-title <v-toolbar-title
@@ -22,9 +22,9 @@
</v-btn> </v-btn>
</v-toolbar-items> </v-toolbar-items>
</v-toolbar> </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-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> <template v-else>
<v-icon :size="18" :left="!rtl" :right="rtl">mdi-pencil</v-icon> <v-icon :size="18" :left="!rtl" :right="rtl">mdi-pencil</v-icon>
<translate key="Details">Details</translate> <translate key="Details">Details</translate>
@@ -32,7 +32,7 @@
</v-tab> </v-tab>
<v-tab id="tab-labels" ripple :disabled="!$config.feature('labels')"> <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> <template v-else>
<v-icon :size="18" :left="!rtl" :right="rtl">mdi-label</v-icon> <v-icon :size="18" :left="!rtl" :right="rtl">mdi-label</v-icon>
<v-badge color="secondary-dark" :left="rtl" :right="!rtl"> <v-badge color="secondary-dark" :left="rtl" :right="!rtl">
@@ -45,7 +45,7 @@
</v-tab> </v-tab>
<v-tab id="tab-people" :disabled="!$config.feature('people')" ripple> <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> <template v-else>
<v-icon :size="18" :left="!rtl" :right="rtl">mdi-account-multiple</v-icon> <v-icon :size="18" :left="!rtl" :right="rtl">mdi-account-multiple</v-icon>
<v-badge color="secondary-dark" :left="rtl" :right="!rtl"> <v-badge color="secondary-dark" :left="rtl" :right="!rtl">
@@ -58,7 +58,7 @@
</v-tab> </v-tab>
<v-tab id="tab-files" ripple> <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> <template v-else>
<v-icon :size="18" :left="!rtl" :right="rtl">mdi-film</v-icon> <v-icon :size="18" :left="!rtl" :right="rtl">mdi-film</v-icon>
<v-badge color="secondary-dark" :left="rtl" :right="!rtl"> <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-textarea>
</v-col> </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"> <v-btn depressed color="secondary-light" class="compact action-close" @click.stop="close">
<translate>Close</translate> <translate>Close</translate>
</v-btn> </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-if="$config.feature('review') && model.Quality < 3"><translate>Approve</translate></span>
<span v-else><translate>Apply</translate></span> <span v-else><translate>Apply</translate></span>
</v-btn> </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> <translate>Done</translate>
</v-btn> </v-btn>
</v-col> </v-col>

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

@@ -32,19 +32,19 @@
<translate>Actions</translate> <translate>Actions</translate>
</td> </td>
<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> <translate>Download</translate>
</v-btn> </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> <translate>Primary</translate>
</v-btn> </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> <translate>Unstack</translate>
</v-btn> </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> <translate>Delete</translate>
</v-btn> </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> <translate>File Browser</translate>
</v-btn> </v-btn>
</td> </td>
@@ -316,7 +316,7 @@ export default {
sortable: false, sortable: false,
class: "hidden-sm-and-down", 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("Type"), value: "", sortable: false, align: "left" },
{ text: this.$gettext("Status"), 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> </template>
</v-edit-dialog> </v-edit-dialog>
</td> </td>
<td class="text-xs-left"> <td class="text-left">
{{ sourceName(props.item.LabelSrc) }} {{ sourceName(props.item.LabelSrc) }}
</td> </td>
<td class="text-xs-center"> {{ 100 - props.item.Uncertainty }}% </td> <td class="text-center"> {{ 100 - props.item.Uncertainty }}% </td>
<td class="text-xs-center"> <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-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-icon color="secondary-dark">mdi-magnify</v-icon>
</v-btn> </v-btn>
@@ -42,11 +42,11 @@
<td> <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> <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>
<td class="text-xs-left"> <td class="text-left">
{{ sourceName("manual") }} {{ sourceName("manual") }}
</td> </td>
<td class="text-xs-center"> 100% </td> <td class="text-center"> 100% </td>
<td class="text-xs-center"> <td class="text-center">
<v-btn icon small text :ripple="false" title="Add" class="p-photo-label-add" @click.stop.prevent="addLabel"> <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-icon color="secondary-dark">mdi-plus</v-icon>
</v-btn> </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-card-actions class="card-details pa-0">
<v-row v-if="marker.Invalid" align="center"> <v-row v-if="marker.Invalid" align="center">
<v-col cols="12" class="text-xs-center pa-0"> <v-col cols="12" class="text-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-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 --> <!-- TODO: change this icon -->
<v-icon dark>undo</v-icon> <v-icon dark>undo</v-icon>
</v-btn> </v-btn>
</v-col> </v-col>
</v-row> </v-row>
<v-row v-else-if="marker.SubjUID" align="center"> <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-text-field
v-model="marker.Name" v-model="marker.Name"
:rules="[textRule]" :rules="[textRule]"
@@ -51,7 +51,7 @@
</v-col> </v-col>
</v-row> </v-row>
<v-row v-else align="center"> <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 --> <!-- TODO: check property allow-overflow TEST -->
<v-combobox <v-combobox
v-model="marker.Name" 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"> <v-btn color="secondary-light" class="compact mx-2" depressed @click="close">
<translate>Cancel</translate> <translate>Cancel</translate>
</v-btn> </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> <translate>Reload</translate>
</v-btn> </v-btn>
</v-card-actions> </v-card-actions>

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

@@ -38,15 +38,15 @@
</v-card-text> </v-card-text>
<v-card-actions class="pt-1 pb-2 px-2"> <v-card-actions class="pt-1 pb-2 px-2">
<v-row class="pa-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>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> <translate>Support for additional services, like Google Drive, will be added over time.</translate>
</v-col> </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"> <v-btn depressed color="secondary-light" class="action-cancel ml-2" @click.stop="cancel">
<span>{{ label.cancel }}</span> <span>{{ label.cancel }}</span>
</v-btn> </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> <span>{{ label.confirm }}</span>
</v-btn> </v-btn>
</v-col> </v-col>

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

@@ -8,8 +8,8 @@
{{ $gettext("Manual Upload") }} {{ $gettext("Manual Upload") }}
</h3> </h3>
</v-col> </v-col>
<v-col cols="3" class="text-xs-right"> <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-only 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-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-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-col>
</v-row> </v-row>
@@ -19,8 +19,8 @@
{{ $gettext("Remote Sync") }} {{ $gettext("Remote Sync") }}
</h3> </h3>
</v-col> </v-col>
<v-col cols="3" class="text-xs-right"> <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-only 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-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-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-col>
</v-row> </v-row>
@@ -30,7 +30,7 @@
{{ $gettext("Edit Account") }} {{ $gettext("Edit Account") }}
</h3> </h3>
</v-col> </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-btn icon text :ripple="false" class="action-remove mt-0" @click.stop.prevent="remove()">
<v-icon color="secondary-dark">mdi-delete</v-icon> <v-icon color="secondary-dark">mdi-delete</v-icon>
</v-btn> </v-btn>
@@ -146,11 +146,11 @@
</v-card-text> </v-card-text>
<v-card-actions class="pt-0 pb-2 px-2"> <v-card-actions class="pt-0 pb-2 px-2">
<v-row class="pa-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"> <v-btn depressed color="secondary-light" class="action-cancel ml-2" @click.stop="cancel">
<translate>Cancel</translate> <translate>Cancel</translate>
</v-btn> </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> <translate>Save</translate>
</v-btn> </v-btn>
</v-col> </v-col>

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

@@ -3,19 +3,19 @@
<v-card raised elevation="24"> <v-card raised elevation="24">
<v-container fluid class="pb-2 pr-2 pl-2"> <v-container fluid class="pb-2 pr-2 pl-2">
<v-row> <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-icon size="54" color="secondary-dark lighten-1">mdi-delete-outline</v-icon>
</v-col> </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"> <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> <translate key="Are you sure you want to delete this account?">Are you sure you want to delete this account?</translate>
</div> </div>
</v-col> </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"> <v-btn depressed color="secondary-light" class="action-cancel ml-2" @click.stop="cancel">
<translate key="Cancel">Cancel</translate> <translate key="Cancel">Cancel</translate>
</v-btn> </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> <translate key="Delete">Delete</translate>
</v-btn> </v-btn>
</v-col> </v-col>

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

@@ -8,8 +8,8 @@
<translate :translate-params="{ name: model.modelName() }">Share %{name}</translate> <translate :translate-params="{ name: model.modelName() }">Share %{name}</translate>
</h3> </h3>
</v-col> </v-col>
<v-col cols="3" :class="rtl ? 'text-xs-left' : 'text-xs-right'"> <v-col cols="3" :class="rtl ? 'text-left' : 'text-right'">
<v-btn icon text dark color="secondary-dark" class="ma-0 action-add-link" :title="$gettext('Add Link')" @click.stop="add"> <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-icon>mdi-link-plus</v-icon>
</v-btn> </v-btn>
</v-col> </v-col>
@@ -19,7 +19,7 @@
<v-expansion-panels class="pa-0 elevation-0"> <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"> <v-expansion-panel v-for="(link, index) in links" :key="link.UID" class="pa-0 elevation-0 secondary mb-1">
<template #header> <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 --> <!-- TODO: change this icon -->
<v-icon size="16" class="pr-1">link</v-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> /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" @click:append="showPassword = !showPassword"
></v-text-field> ></v-text-field>
</v-col --> </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-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-icon>mdi-delete</v-icon>
</v-btn> </v-btn>
</v-col> </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 depressed dark color="primary-button" class="ma-0 compact action-save" @click.stop.exact="update(link)"> <v-btn depressed theme="dark" color="primary-button" class="ma-0 compact action-save" @click.stop.exact="update(link)">
<translate>Save</translate> <translate>Save</translate>
</v-btn> </v-btn>
</v-col> </v-col>
@@ -68,7 +68,7 @@
</v-expansion-panel> </v-expansion-panel>
</v-expansion-panels> </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 :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>A click will copy it to your clipboard.</translate>
<translate>Any private photos and videos remain private and won't be shared.</translate> <translate>Any private photos and videos remain private and won't be shared.</translate>
@@ -82,7 +82,7 @@
<translate>WebDAV Upload</translate> <translate>WebDAV Upload</translate>
</v-btn> </v-btn>
</v-col> </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"> <v-btn depressed color="secondary-light" class="action-close" @click.stop="confirm">
<translate>Close</translate> <translate>Close</translate>
</v-btn> </v-btn>

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

@@ -8,8 +8,8 @@
<translate>WebDAV Upload</translate> <translate>WebDAV Upload</translate>
</h3> </h3>
</v-col> </v-col>
<v-col cols="4" class="text-xs-right"> <v-col cols="4" class="text-right">
<v-btn icon text dark color="secondary-dark" class="ma-0" @click.stop="setup"> <v-btn icon text theme="dark" color="secondary-dark" class="ma-0" @click.stop="setup">
<v-icon>mdi-cloud</v-icon> <v-icon>mdi-cloud</v-icon>
</v-btn> </v-btn>
</v-col> </v-col>
@@ -17,10 +17,10 @@
</v-card-title> </v-card-title>
<v-card-text class="pt-0"> <v-card-text class="pt-0">
<v-row> <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-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>
<v-col cols="12" class="text-xs-left pt-2"> <v-col cols="12" class="text-left pt-2">
<v-autocomplete <v-autocomplete
v-model="path" v-model="path"
color="secondary-dark" color="secondary-dark"
@@ -40,14 +40,14 @@
> >
</v-autocomplete> </v-autocomplete>
</v-col> </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"> <v-btn depressed color="secondary-light" class="action-cancel ml-0 mt-0 mb-0 mr-2" @click.stop="cancel">
<translate>Cancel</translate> <translate>Cancel</translate>
</v-btn> </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> <translate>Setup</translate>
</v-btn> </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> <translate>Upload</translate>
</v-btn> </v-btn>
</v-col> </v-col>

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

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

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

@@ -1,8 +1,9 @@
<template> <template>
<v-dialog :value="show" fullscreen hide-overlay scrollable persistent class="p-upload-dialog" @keydown.esc="cancel"> <v-dialog :value="show" fullscreen hide-overlay scrollable persistent class="p-upload-dialog" @keydown.esc="cancel">
<v-card color="application"> <v-card color="application">
<v-toolbar dark flat color="navigation" :dense="$vuetify.breakpoint.smAndDown"> <v-toolbar theme="dark" flat color="navigation" :dense="$vuetify.display.smAndDown">
<v-btn icon dark @click.stop="cancel"> <v-btn icon theme="dark" @click.stop="cancel">
<!-- TODO: check icon -->
<v-icon>mdi-close</v-icon> <v-icon>mdi-close</v-icon>
</v-btn> </v-btn>
<v-toolbar-title> <v-toolbar-title>
@@ -46,7 +47,9 @@
<template #selection="data"> <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-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> <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> </v-chip>
</template> </template>
</v-combobox> </v-combobox>
@@ -59,7 +62,7 @@
</p> </p>
<v-progress-linear v-model="completedTotal" height="1.5em" color="secondary-dark" :indeterminate="indexing"> <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 ><span v-if="eta">{{ eta }}</span></p
> >
</v-progress-linear> </v-progress-linear>

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

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

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

@@ -1,6 +1,6 @@
<template> <template>
<div class="p-page p-page-about"> <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-toolbar-title> {{ $config.getAbout() }}{{ getMembership() }} </v-toolbar-title>
<v-spacer></v-spacer> <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>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> <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>
<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> <v-btn to="/upgrade" color="primary-button" class="white--text px-4 py-2 action-membership" rounded depressed>
<translate>Upgrade Now</translate> <translate>Upgrade Now</translate>
<v-icon v-if="rtl" left dark>mdi-chevron-left</v-icon> <v-icon v-if="rtl" left dark>mdi-chevron-left</v-icon>
<v-icon v-else right dark>mdi-chevron-right</v-icon> <v-icon v-else right dark>mdi-chevron-right</v-icon>
</v-btn> </v-btn>
</p> </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> <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> <translate>Learn more</translate>
<v-icon v-if="rtl" left dark>mdi-chevron-left</v-icon> <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>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> <translate>You are welcome to contact us at membership@photoprism.app for questions regarding your membership.</translate>
</p> </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> <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> <translate>Manage Account</translate>
<v-icon v-if="rtl" left dark>mdi-chevron-left</v-icon> <v-icon v-if="rtl" left dark>mdi-chevron-left</v-icon>
@@ -111,7 +111,7 @@
> >
</div> </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"> <router-link to="/license">
<img :src="$config.staticUri + '/img/badge-agpl.svg'" alt="License AGPL v3" style="max-width: 100%" /> <img :src="$config.staticUri + '/img/badge-agpl.svg'" alt="License AGPL v3" style="max-width: 100%" />
</router-link> </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> <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>
<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>, 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>. <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> </p>

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

@@ -1,6 +1,6 @@
<template> <template>
<div class="p-page p-page-support"> <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> <v-toolbar-title>
<translate>Contact Us</translate> <translate>Contact Us</translate>
</v-toolbar-title> </v-toolbar-title>
@@ -10,14 +10,14 @@
</v-btn> </v-btn>
</v-toolbar> </v-toolbar>
<v-container v-if="sent" fluid class="pa-6"> <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> <translate>We appreciate your feedback!</translate>
</h3> </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>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> <translate>We do our best to respond within five business days or less.</translate>
</p> </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" /> <img src="https://cdn.photoprism.app/thank-you/colorful.png" width="100%" alt="THANK YOU" />
</p> </p>
</v-container> </v-container>

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

@@ -1,6 +1,6 @@
<template> <template>
<div class="p-page p-page-license"> <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> <v-toolbar-title>
<translate>License</translate> <translate>License</translate>
</v-toolbar-title> </v-toolbar-title>

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

@@ -1,7 +1,7 @@
<template> <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'"> <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-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 <v-text-field
:value="filter.q" :value="filter.q"
solo solo
@@ -188,7 +188,9 @@
<div> <div>
<h3 class="body-2 mb-0"> <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)"> <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>
<button v-else class="action-title-edit" :data-uid="album.UID" @click.stop.prevent="edit(album)"> <button v-else class="action-title-edit" :data-uid="album.UID" @click.stop.prevent="edit(album)">
{{ album.getDateString() | capitalize }} {{ album.getDateString() | capitalize }}
@@ -200,7 +202,9 @@
<v-card-text class="pb-2 pt-0 card-details" style="user-select: none" @click.stop.prevent=""> <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')"> <div v-if="album.Description" class="caption mb-2" :title="$gettext('Description')">
<button @click.exact="edit(album)"> <button @click.exact="edit(album)">
{{ album.Description | truncate(100) }} <!-- TODO: change this filter -->
<!-- {{ album.Description | truncate(100) }} -->
{{ album.Description }}
</button> </button>
</div> </div>
@@ -217,7 +221,9 @@
</div> </div>
<div v-else-if="album.Type === 'folder'" class="caption mb-2"> <div v-else-if="album.Type === 'folder'" class="caption mb-2">
<button @click.exact="edit(album)"> <button @click.exact="edit(album)">
/{{ album.Path | truncate(100) }} <!-- TODO: change this filter -->
<!-- /{{ album.Path | truncate(100) }} -->
/{{ album.Path }}
</button> </button>
</div> </div>
<div v-if="album.Category !== ''" class="caption mb-2 d-inline-block"> <div v-if="album.Category !== ''" class="caption mb-2 d-inline-block">
@@ -237,7 +243,7 @@
</v-card> </v-card>
</v-col> </v-col>
</v-row> </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"> <v-btn class="action-add" color="secondary" rounded @click.prevent="create">
<translate>Add Album</translate> <translate>Add Album</translate>
</v-btn> </v-btn>

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

@@ -93,24 +93,24 @@
</v-col> </v-col>
</template> </template>
<v-col cols="12" class="px-2 pt-1 pb-0 auth-actions"> <v-col cols="12" class="px-2 pt-1 pb-0 auth-actions">
<div class="action-buttons auth-buttons text-xs-center"> <div class="action-buttons auth-buttons text-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"> <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> <translate>Cancel</translate>
</v-btn> </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> <translate>Create Account</translate>
</v-btn> </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> <translate>Sign in</translate>
<v-icon v-if="rtl" left dark>mdi-chevron-left</v-icon> <v-icon v-if="rtl" left dark>mdi-chevron-left</v-icon>
<v-icon v-else right dark>mdi-chevron-right</v-icon> <v-icon v-else right dark>mdi-chevron-right</v-icon>
</v-btn> </v-btn>
</div> </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>Can't access your authenticator app or device?</translate>
<translate>Use your recovery code or contact an administrator for help.</translate> <translate>Use your recovery code or contact an administrator for help.</translate>
</div> </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"> <a :href="passwordResetUri" class="text-link link--text">
<translate>Forgot password?</translate> <translate>Forgot password?</translate>
</a> </a>
@@ -119,7 +119,7 @@
<template v-if="config.ext.oidc.enabled && !enterCode"> <template v-if="config.ext.oidc.enabled && !enterCode">
<v-col cols="12" class="px-2 pb-4 oidc-actions"> <v-col cols="12" class="px-2 pb-4 oidc-actions">
<v-divider :dark="true"></v-divider> <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"> <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" /> <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> <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> <template>
<div class="p-page p-page-upgrade"> <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> <v-toolbar-title>
<translate>Membership</translate> <translate>Membership</translate>
<v-icon v-if="rtl">mdi-chevron-left</v-icon> <v-icon v-if="rtl">mdi-chevron-left</v-icon>
@@ -39,17 +39,17 @@
</v-alert> </v-alert>
</v-col> </v-col>
<v-col cols="12" class="pa-2"> <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> <translate>Cancel</translate>
</v-btn> </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> <translate>Contact Us</translate>
</v-btn> </v-btn>
</v-col> </v-col>
</v-row> </v-row>
<v-row v-else-if="success"> <v-row v-else-if="success">
<v-col cols="12" class="pa-2 d-flex"> <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> <translate>Your account has been successfully connected.</translate>
<span v-if="$config.values.restart"> <span v-if="$config.values.restart">
<translate>Please restart your instance for the changes to take effect.</translate> <translate>Please restart your instance for the changes to take effect.</translate>
@@ -57,15 +57,15 @@
</p> </p>
</v-col> </v-col>
<v-col cols="12" class="d-flex grow pa-2"> <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> <translate>Manage Account</translate>
</v-btn> </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> <translate>Restart</translate>
<!-- TODO: change this icon --> <!-- TODO: change this icon -->
<v-icon :right="!rtl" :left="rtl" dark>restart_alt</v-icon> <v-icon :right="!rtl" :left="rtl" dark>restart_alt</v-icon>
</v-btn> </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> <translate>Upgrade Now</translate>
<v-icon v-if="rtl" left dark>mdi-chevron-left</v-icon> <v-icon v-if="rtl" left dark>mdi-chevron-left</v-icon>
<v-icon v-else right dark>mdi-chevron-right</v-icon> <v-icon v-else right dark>mdi-chevron-right</v-icon>
@@ -84,20 +84,20 @@
</p> </p>
<!-- TODO: check property return-masked-value TEST --> <!-- 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> <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"> <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.breakpoint.xsOnly" class="ml-0" outlined :disabled="busy"> <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> <translate>Manage Account</translate>
</v-btn> </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> <translate>Compare Editions</translate>
</v-btn> </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> <translate>Register</translate>
<v-icon v-if="rtl" left dark>mdi-chevron-left</v-icon> <v-icon v-if="rtl" left dark>mdi-chevron-left</v-icon>
<v-icon v-else right dark>mdi-chevron-right</v-icon> <v-icon v-else right dark>mdi-chevron-right</v-icon>
</v-btn> </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> <translate>Activate</translate>
<v-icon v-if="rtl" left dark>mdi-chevron-left</v-icon> <v-icon v-if="rtl" left dark>mdi-chevron-left</v-icon>
<v-icon v-else right dark>mdi-chevron-right</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> <template>
<div class="p-page p-page-discover"> <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')"> <v-tab id="tab-discover-colors" ripple @click="changePath('/discover')">
<translate>Colors</translate> <translate>Colors</translate>
</v-tab> </v-tab>

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

@@ -1,6 +1,6 @@
<template> <template>
<div class="p-tab p-tab-discover-colors"> <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> <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"> <v-row class="p-colors">

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

@@ -1,6 +1,6 @@
<template> <template>
<div class="p-tab p-tab-discover-todo"> <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> <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> </v-container>
</div> </div>

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

@@ -1,6 +1,6 @@
<template> <template>
<div id="photoprism-help" class="p-page p-page-help"> <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> <v-toolbar-title>
<translate>Help</translate> <translate>Help</translate>
</v-toolbar-title> </v-toolbar-title>

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

@@ -1,7 +1,7 @@
<template> <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'"> <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-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 <v-text-field
:value="filter.q" :value="filter.q"
solo solo

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

@@ -1,8 +1,8 @@
<template> <template>
<div :class="$config.aclClasses('library')" class="p-page p-page-library"> <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-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> <template v-else>
<v-icon :size="18" :left="!rtl" :right="rtl">{{ item.icon }}</v-icon> {{ item.label }} <v-icon :size="18" :left="!rtl" :right="rtl">{{ item.icon }}</v-icon> {{ item.label }}
</template> </template>

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

@@ -1,7 +1,7 @@
<template> <template>
<div class="p-page p-page-files"> <div class="p-page p-page-files">
<v-form ref="form" class="p-files-search" lazy-validation @submit.prevent="updateQuery"> <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> <v-toolbar-title>
<router-link to="/index/files"> <router-link to="/index/files">
<translate key="Originals">Originals</translate> <translate key="Originals">Originals</translate>

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

@@ -1,6 +1,6 @@
<template> <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'"> <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 <v-text-field
:value="filter.q" :value="filter.q"
solo solo

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

@@ -61,7 +61,7 @@
<translate>Cancel</translate> <translate>Cancel</translate>
</v-btn> </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> <translate>Upload</translate>
<v-icon :right="!rtl" :left="rtl" dark>mdi-cloud-upload</v-icon> <v-icon :right="!rtl" :left="rtl" dark>mdi-cloud-upload</v-icon>
</v-btn> </v-btn>

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

@@ -1,5 +1,5 @@
<template> <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-form ref="form" class="p-photo-index" lazy-validation @submit.prevent="submit">
<v-container fluid> <v-container fluid>
<p class="subtitle-1"> <p class="subtitle-1">

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

@@ -1,9 +1,9 @@
<template> <template>
<div class="p-page p-page-people" :class="$config.aclClasses('people')"> <div class="p-page p-page-people" :class="$config.aclClasses('people')">
<!-- TODO: check property touchless TEST --> <!-- 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-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> <template v-else>
<v-icon :size="18" :left="!rtl" :right="rtl">{{ item.icon }}</v-icon> <v-icon :size="18" :left="!rtl" :right="rtl">{{ item.icon }}</v-icon>
<v-badge color="secondary-dark" :left="rtl" :right="!rtl"> <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-card-actions class="card-details pa-0">
<v-row v-if="model.SubjUID" align="center"> <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 <v-text-field
:value="model.Name" :value="model.Name"
:rules="[textRule]" :rules="[textRule]"
@@ -71,7 +71,7 @@
</v-col> </v-col>
</v-row> </v-row>
<v-row align="center"> <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 --> <!-- TODO: check property allow-overflow TEST -->
<v-combobox <v-combobox
:value="model.Name" :value="model.Name"
@@ -111,7 +111,7 @@
</v-card> </v-card>
</v-col> </v-col>
</v-row> </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' } }"> <v-btn color="secondary" rounded depressed :to="{ name: 'all', query: { q: 'face:new' } }">
<translate>Show all new faces</translate> <translate>Show all new faces</translate>
</v-btn> </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=""> <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')"> <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>
<div class="caption mb-2"> <div class="caption mb-2">

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

@@ -1,9 +1,9 @@
<template> <template>
<div class="p-page p-page-settings" :class="$config.aclClasses('settings')"> <div class="p-page p-page-settings" :class="$config.aclClasses('settings')">
<!-- TODO: check property touchless TEST --> <!-- 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-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> <template v-else>
<v-icon :size="18" :left="!rtl" :right="rtl">{{ item.icon }}</v-icon> <v-icon :size="18" :left="!rtl" :right="rtl">{{ item.icon }}</v-icon>
{{ item.label }} {{ item.label }}

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

@@ -127,9 +127,9 @@
</v-row> </v-row>
<v-row> <v-row>
<v-col class="pa-2 text-xs-center" cols="4" sm="3" md="2" align-self="center"> <v-col class="pa-2 text-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()"> <v-avatar :size="$vuetify.display.xs ? 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')" /> <img :src="$vuetify.display.xs ? user.getAvatarURL('tile_100') : user.getAvatarURL('tile_224')" :alt="accountInfo" :title="$gettext('Change Avatar')" />
</v-avatar> </v-avatar>
</v-col> </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 flat tile class="mt-0 px-1 application">
<v-card-actions v-if="$config.values.restart"> <v-card-actions v-if="$config.values.restart">
<v-row align="start"> <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 --> <!-- TODO: change icon -->
<v-alert color="primary" icon="info" class="pa-2" type="info" outlined> <v-alert color="primary" icon="info" class="pa-2" type="info" outlined>
<a style="color: inherit" href="#restart"> <a style="color: inherit" href="#restart">
@@ -375,7 +375,7 @@
<v-row align="start"> <v-row align="start">
<v-col cols="12" class="pa-2"> <v-col cols="12" class="pa-2">
<a id="restart"></a> <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> <translate>Restart</translate>
<v-icon :right="!rtl" :left="rtl" dark>mdi-restart</v-icon> <v-icon :right="!rtl" :left="rtl" dark>mdi-restart</v-icon>
</v-btn> </v-btn>

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

@@ -8,13 +8,13 @@
{{ props.item.AccName }} {{ props.item.AccName }}
</button> </button>
</td> </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-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-if="props.item.AccShare" color="secondary-dark">mdi-check</v-icon>
<v-icon v-else color="secondary-dark">mdi-cog</v-icon> <v-icon v-else color="secondary-dark">mdi-cog</v-icon>
</v-btn> </v-btn>
</td> </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-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> <v-icon v-if="props.item.AccErrors" color="secondary-dark" :title="props.item.AccError">mdi-alert </v-icon>
<!-- TODO: change icon --> <!-- TODO: change icon -->
@@ -26,7 +26,7 @@
<td class="hidden-sm-and-down"> <td class="hidden-sm-and-down">
{{ formatDate(props.item.SyncDate) }} {{ formatDate(props.item.SyncDate) }}
</td> </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-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-icon color="secondary-dark">mdi-delete</v-icon>
</v-btn> </v-btn>
@@ -45,13 +45,13 @@
</p> </p>
<v-form ref="form" lazy-validation class="p-form-settings mt-2" accept-charset="UTF-8" @submit.prevent="add"> <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> <translate>Connect via WebDAV</translate>
<!-- TODO: change icon --> <!-- TODO: change icon -->
<v-icon :right="!rtl" :left="rtl" dark>sync_alt</v-icon> <v-icon :right="!rtl" :left="rtl" dark>sync_alt</v-icon>
</v-btn> </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> <translate>Connect</translate>
<v-icon :right="!rtl" :left="rtl" dark>mdi-plus</v-icon> <v-icon :right="!rtl" :left="rtl" dark>mdi-plus</v-icon>
</v-btn> </v-btn>
@@ -101,7 +101,7 @@ export default {
class: "hidden-sm-and-down", class: "hidden-sm-and-down",
align: "left", align: "left",
}, },
{ text: "", value: "", sortable: false, class: "hidden-xs-only", align: "right" }, { text: "", value: "", sortable: false, class: "hidden-xs", align: "right" },
], ],
rtl: this.$rtl, rtl: this.$rtl,
}; };

2
frontend/src/share.vue
View File

@@ -33,7 +33,7 @@ export default {
}, },
computed: { computed: {
appClass: function () { 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() { created() {

22
frontend/webpack.config.js
View File

@@ -74,7 +74,10 @@ const config = {
modules: isCustom ? [PATHS.custom, PATHS.src, PATHS.modules] : [PATHS.src, PATHS.modules], modules: isCustom ? [PATHS.custom, PATHS.src, PATHS.modules] : [PATHS.src, PATHS.modules],
preferRelative: true, preferRelative: true,
alias: { 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: [ plugins: [
@@ -106,18 +109,13 @@ const config = {
rules: [ rules: [
{ {
test: /\.vue$/, test: /\.vue$/,
include: isCustom ? [PATHS.custom, PATHS.src] : [PATHS.src], loader: 'vue-loader',
use: [ options: {
{ loaders: {
loader: "vue-loader", js: "babel-loader",
options: { css: "css-loader",
loaders: {
js: "babel-loader",
css: "css-loader",
},
},
}, },
], },
}, },
{ {
test: /\.js$/, test: /\.js$/,