Mirrors/photoprism
1
0
Fork 0
mirror of https://github.com/photoprism/photoprism.git synced 2026-01-23 02:24:24 +00:00
Code Issues Projects Releases Wiki Activity

Version 2.7 part 1

Browse source
This commit is contained in:
Anastasiia 2024-09-27 23:50:53 +02:00
parent 0b391d26ec
commit 04311154cf
91 changed files with 1812 additions and 1970 deletions
Download patch file Download diff file Expand all files Collapse all files

2
assets/templates/index.gohtml
View file

@ -18,7 +18,7 @@
<meta name="twitter:image" content="{{ .config.SitePreview }}">
<meta name="twitter:description" content="{{ .config.SiteDescription }}">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="apple-mobile-web-app-title" content="{{ .config.SiteTitle }}">

2
docker/demo/index.gohtml
View file

@ -19,7 +19,7 @@
<meta name="twitter:image" content="{{ .config.SitePreview }}">
<meta name="twitter:description" content="{{ .config.SiteDescription }}">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="apple-mobile-web-app-title" content="{{ .config.SiteTitle }}">

2
frontend/.eslintrc.js
View file

@ -6,7 +6,7 @@ module.exports = {
node: true,
mocha: true,
},
extends: ["eslint:recommended", "plugin:vue/recommended", "plugin:prettier/recommended"],
extends: ["eslint:recommended", "plugin:vue/recommended", "plugin:prettier/recommended", "plugin:vue/base", "plugin:vuetify/base",],
settings: {
"prettier/prettier": {

234
frontend/package-lock.json generated
View file

@ -91,7 +91,7 @@
"vue-style-loader": "^4.1.3",
"vue-template-compiler": "^2.7.16",
"vue2-filters": "^0.14.0",
"vuetify": "^1.5.24",
"vuetify": "^2.7.1",
"webpack": "^5.94.0",
"webpack-bundle-analyzer": "^4.10.2",
"webpack-cli": "^5.1.4",
@ -100,6 +100,10 @@
"webpack-md5-hash": "^0.0.6",
"webpack-merge": "^6.0.1"
},
"devDependencies": {
"@mdi/font": "^7.4.47",
"eslint-plugin-vuetify": "^2.4.0"
},
"engines": {
"node": ">= 18.0.0",
"npm": ">= 9.0.0",
@ -3388,6 +3392,13 @@
"gl-style-validate": "dist/gl-style-validate.mjs"
}
},
"node_modules/@mdi/font": {
"version": "7.4.47",
"resolved": "https://registry.npmjs.org/@mdi/font/-/font-7.4.47.tgz",
"integrity": "sha512-43MtGpd585SNzHZPcYowu/84Vz2a2g31TvPMTm9uTiCSWzaheQySUcSyUH/46fPnuPQWof2yd0pGBtzee/IQWw==",
"dev": true,
"license": "Apache-2.0"
},
"node_modules/@nicolo-ribaudo/chokidar-2": {
"version": "2.1.8-no-fsevents.3",
"resolved": "https://registry.npmjs.org/@nicolo-ribaudo/chokidar-2/-/chokidar-2-2.1.8-no-fsevents.3.tgz",
@ -4899,42 +4910,6 @@
"integrity": "sha512-E+XQCRwSbaaiChtv6k6Dwgc+bx+Bs6vuKJHHl5kox/BaKbhiXzqQOwK4cO22yElGp2OCmjwVhT3HmxgyPGnJfQ==",
"license": "MIT"
},
"node_modules/builtin-modules": {
"version": "3.3.0",
"resolved": "https://registry.npmjs.org/builtin-modules/-/builtin-modules-3.3.0.tgz",
"integrity": "sha512-zhaCDicdLuWN5UbN5IMnFqNMhNfo919sH85y2/ea+5Yg9TsTkeZxpL+JLbp6cgYFS4sRLp3YV4S6yDuqVWHYOw==",
"license": "MIT",
"peer": true,
"engines": {
"node": ">=6"
},
"funding": {
"url": "https://github.com/sponsors/sindresorhus"
}
},
"node_modules/builtins": {
"version": "5.1.0",
"resolved": "https://registry.npmjs.org/builtins/-/builtins-5.1.0.tgz",
"integrity": "sha512-SW9lzGTLvWTP1AY8xeAMZimqDrIaSdLQUcVr9DMef51niJ022Ri87SwRRKYm4A6iHfkPaiVUu/Duw2Wc4J7kKg==",
"license": "MIT",
"peer": true,
"dependencies": {
"semver": "^7.0.0"
}
},
"node_modules/builtins/node_modules/semver": {
"version": "7.6.3",
"resolved": "https://registry.npmjs.org/semver/-/semver-7.6.3.tgz",
"integrity": "sha512-oVekP1cKtI+CTDvHWYFUcMtsK/00wmAEfyqKfNdARm8u1wNVhSgaX7A8d4UuIlUI5e84iEwOhs7ZPYRmzU9U6A==",
"license": "ISC",
"peer": true,
"bin": {
"semver": "bin/semver.js"
},
"engines": {
"node": ">=10"
}
},
"node_modules/buntis": {
"version": "0.2.1",
"resolved": "https://registry.npmjs.org/buntis/-/buntis-0.2.1.tgz",
@ -6785,35 +6760,6 @@
"url": "https://opencollective.com/eslint"
}
},
"node_modules/eslint-compat-utils": {
"version": "0.5.1",
"resolved": "https://registry.npmjs.org/eslint-compat-utils/-/eslint-compat-utils-0.5.1.tgz",
"integrity": "sha512-3z3vFexKIEnjHE3zCMRo6fn/e44U7T1khUjg+Hp0ZQMCigh28rALD0nPFBcGZuiLC5rLZa2ubQHDRln09JfU2Q==",
"license": "MIT",
"peer": true,
"dependencies": {
"semver": "^7.5.4"
},
"engines": {
"node": ">=12"
},
"peerDependencies": {
"eslint": ">=6.0.0"
}
},
"node_modules/eslint-compat-utils/node_modules/semver": {
"version": "7.6.3",
"resolved": "https://registry.npmjs.org/semver/-/semver-7.6.3.tgz",
"integrity": "sha512-oVekP1cKtI+CTDvHWYFUcMtsK/00wmAEfyqKfNdARm8u1wNVhSgaX7A8d4UuIlUI5e84iEwOhs7ZPYRmzU9U6A==",
"license": "ISC",
"peer": true,
"bin": {
"semver": "bin/semver.js"
},
"engines": {
"node": ">=10"
}
},
"node_modules/eslint-config-prettier": {
"version": "9.1.0",
"resolved": "https://registry.npmjs.org/eslint-config-prettier/-/eslint-config-prettier-9.1.0.tgz",
@ -6954,28 +6900,6 @@
"eslint": ">=4.19.1"
}
},
"node_modules/eslint-plugin-es-x": {
"version": "7.8.0",
"resolved": "https://registry.npmjs.org/eslint-plugin-es-x/-/eslint-plugin-es-x-7.8.0.tgz",
"integrity": "sha512-7Ds8+wAAoV3T+LAKeu39Y5BzXCrGKrcISfgKEqTS4BDN8SFEDQd0S43jiQ8vIa3wUKD07qitZdfzlenSi8/0qQ==",
"funding": [
"https://github.com/sponsors/ota-meshi",
"https://opencollective.com/eslint"
],
"license": "MIT",
"peer": true,
"dependencies": {
"@eslint-community/eslint-utils": "^4.1.2",
"@eslint-community/regexpp": "^4.11.0",
"eslint-compat-utils": "^0.5.1"
},
"engines": {
"node": "^14.18.0 || >=16.0.0"
},
"peerDependencies": {
"eslint": ">=8"
}
},
"node_modules/eslint-plugin-html": {
"version": "8.1.1",
"resolved": "https://registry.npmjs.org/eslint-plugin-html/-/eslint-plugin-html-8.1.1.tgz",
@ -7060,64 +6984,6 @@
"node": ">=0.10.0"
}
},
"node_modules/eslint-plugin-n": {
"version": "16.6.2",
"resolved": "https://registry.npmjs.org/eslint-plugin-n/-/eslint-plugin-n-16.6.2.tgz",
"integrity": "sha512-6TyDmZ1HXoFQXnhCTUjVFULReoBPOAjpuiKELMkeP40yffI/1ZRO+d9ug/VC6fqISo2WkuIBk3cvuRPALaWlOQ==",
"license": "MIT",
"peer": true,
"dependencies": {
"@eslint-community/eslint-utils": "^4.4.0",
"builtins": "^5.0.1",
"eslint-plugin-es-x": "^7.5.0",
"get-tsconfig": "^4.7.0",
"globals": "^13.24.0",
"ignore": "^5.2.4",
"is-builtin-module": "^3.2.1",
"is-core-module": "^2.12.1",
"minimatch": "^3.1.2",
"resolve": "^1.22.2",
"semver": "^7.5.3"
},
"engines": {
"node": ">=16.0.0"
},
"funding": {
"url": "https://github.com/sponsors/mysticatea"
},
"peerDependencies": {
"eslint": ">=7.0.0"
}
},
"node_modules/eslint-plugin-n/node_modules/globals": {
"version": "13.24.0",
"resolved": "https://registry.npmjs.org/globals/-/globals-13.24.0.tgz",
"integrity": "sha512-AhO5QUcj8llrbG09iWhPU2B204J1xnPeL8kQmVorSsy+Sjj1sk8gIyh6cUocGmH4L0UuhAJy+hJMRA4mgA4mFQ==",
"license": "MIT",
"peer": true,
"dependencies": {
"type-fest": "^0.20.2"
},
"engines": {
"node": ">=8"
},
"funding": {
"url": "https://github.com/sponsors/sindresorhus"
}
},
"node_modules/eslint-plugin-n/node_modules/semver": {
"version": "7.6.3",
"resolved": "https://registry.npmjs.org/semver/-/semver-7.6.3.tgz",
"integrity": "sha512-oVekP1cKtI+CTDvHWYFUcMtsK/00wmAEfyqKfNdARm8u1wNVhSgaX7A8d4UuIlUI5e84iEwOhs7ZPYRmzU9U6A==",
"license": "ISC",
"peer": true,
"bin": {
"semver": "bin/semver.js"
},
"engines": {
"node": ">=10"
}
},
"node_modules/eslint-plugin-node": {
"version": "11.1.0",
"resolved": "https://registry.npmjs.org/eslint-plugin-node/-/eslint-plugin-node-11.1.0.tgz",
@ -7232,6 +7098,21 @@
"node": ">=10"
}
},
"node_modules/eslint-plugin-vuetify": {
"version": "2.4.0",
"resolved": "https://registry.npmjs.org/eslint-plugin-vuetify/-/eslint-plugin-vuetify-2.4.0.tgz",
"integrity": "sha512-WAZjnGXPrxqHBzYjxxUT8jf30O69Hitmj+wYhTIEG/XgqfvnPwqVtqrU2FGLsDtfFskKva0vuZemfbiq8yA/fQ==",
"dev": true,
"license": "MIT",
"dependencies": {
"eslint-plugin-vue": "^9.6.0",
"requireindex": "^1.2.0"
},
"peerDependencies": {
"eslint": "^8.0.0",
"vuetify": "^3.0.0"
}
},
"node_modules/eslint-rule-docs": {
"version": "1.1.235",
"resolved": "https://registry.npmjs.org/eslint-rule-docs/-/eslint-rule-docs-1.1.235.tgz",
@ -8447,19 +8328,6 @@
"url": "https://github.com/sponsors/ljharb"
}
},
"node_modules/get-tsconfig": {
"version": "4.8.1",
"resolved": "https://registry.npmjs.org/get-tsconfig/-/get-tsconfig-4.8.1.tgz",
"integrity": "sha512-k9PN+cFBmaLWtVz29SkUoqU5O0slLuHJXt/2P+tMVFT+phsSGXGkp9t3rQIqdz0e+06EHNGs3oM6ZX1s2zHxRg==",
"license": "MIT",
"peer": true,
"dependencies": {
"resolve-pkg-maps": "^1.0.0"
},
"funding": {
"url": "https://github.com/privatenumber/get-tsconfig?sponsor=1"
}
},
"node_modules/get-value": {
"version": "2.0.6",
"resolved": "https://registry.npmjs.org/get-value/-/get-value-2.0.6.tgz",
@ -9181,22 +9049,6 @@
"node": ">=4"
}
},
"node_modules/is-builtin-module": {
"version": "3.2.1",
"resolved": "https://registry.npmjs.org/is-builtin-module/-/is-builtin-module-3.2.1.tgz",
"integrity": "sha512-BSLE3HnV2syZ0FK0iMA/yUGplUeMmNz4AW5fnTunbCIqZi4vG3WjJT9FHMy5D69xmAYBHXQhJdALdpwVxV501A==",
"license": "MIT",
"peer": true,
"dependencies": {
"builtin-modules": "^3.3.0"
},
"engines": {
"node": ">=6"
},
"funding": {
"url": "https://github.com/sponsors/sindresorhus"
}
},
"node_modules/is-callable": {
"version": "1.2.7",
"resolved": "https://registry.npmjs.org/is-callable/-/is-callable-1.2.7.tgz",
@ -13484,6 +13336,16 @@
"node": ">=0.10.0"
}
},
"node_modules/requireindex": {
"version": "1.2.0",
"resolved": "https://registry.npmjs.org/requireindex/-/requireindex-1.2.0.tgz",
"integrity": "sha512-L9jEkOi3ASd9PYit2cwRfyppc9NoABujTP8/5gFcbERmo5jUoAKovIC3fsF17pkTnGsrByysqX+Kxd2OTNI1ww==",
"dev": true,
"license": "MIT",
"engines": {
"node": ">=0.10.5"
}
},
"node_modules/requires-port": {
"version": "1.0.0",
"resolved": "https://registry.npmjs.org/requires-port/-/requires-port-1.0.0.tgz",
@ -13528,16 +13390,6 @@
"node": ">=8"
}
},
"node_modules/resolve-pkg-maps": {
"version": "1.0.0",
"resolved": "https://registry.npmjs.org/resolve-pkg-maps/-/resolve-pkg-maps-1.0.0.tgz",
"integrity": "sha512-seS2Tj26TBVOC2NIc2rOe2y2ZO7efxITtLZcGSOnHHNOQ7CkiUBfw0Iw2ck6xkIhPwLhKNLS8BO+hEpngQlqzw==",
"license": "MIT",
"peer": true,
"funding": {
"url": "https://github.com/privatenumber/resolve-pkg-maps?sponsor=1"
}
},
"node_modules/resolve-protobuf-schema": {
"version": "2.1.0",
"resolved": "https://registry.npmjs.org/resolve-protobuf-schema/-/resolve-protobuf-schema-2.1.0.tgz",
@ -15850,12 +15702,16 @@
"license": "MIT"
},
"node_modules/vuetify": {
"version": "1.5.24",
"resolved": "https://registry.npmjs.org/vuetify/-/vuetify-1.5.24.tgz",
"integrity": "sha512-guFOgEgZ8VpSgNXOv1QL2fOliaJBoiyNnf+bBqcXsnIppJGRlW1wyT6Ux7ZlQyphSHs+UK1aJNUjcyAtoOiHWg==",
"version": "2.7.2",
"resolved": "https://registry.npmjs.org/vuetify/-/vuetify-2.7.2.tgz",
"integrity": "sha512-qr04ww7uzAPQbpk751x4fSdjsJ+zREzjQ/rBlcQGuWS6MIMFMXcXcwvp4+/tnGsULZxPMWfQ0kmZmg5Yc/XzgQ==",
"license": "MIT",
"funding": {
"type": "github",
"url": "https://github.com/sponsors/johnleider"
},
"peerDependencies": {
"vue": "^2.5.18"
"vue": "^2.6.4"
}
},
"node_modules/walk": {

8
frontend/package.json
View file

@ -103,7 +103,7 @@
"vue-style-loader": "^4.1.3",
"vue-template-compiler": "^2.7.16",
"vue2-filters": "^0.14.0",
"vuetify": "^1.5.24",
"vuetify": "^2.7.1",
"webpack": "^5.94.0",
"webpack-bundle-analyzer": "^4.10.2",
"webpack-cli": "^5.1.4",
@ -119,5 +119,9 @@
},
"browserslist": [
">0.25% and last 2 years"
]
],
"devDependencies": {
"@mdi/font": "^7.4.47",
"eslint-plugin-vuetify": "^2.4.0"
}
}

5
frontend/src/app.js
View file

@ -99,7 +99,8 @@ config.update().finally(() => {
};
// Register Vuetify.
Vue.use(Vuetify, { rtl, icons, theme });
Vue.use(Vuetify);
const vuetify = new Vuetify({ rtl, icons, theme });
// Register other VueJS plugins.
Vue.use(GetTextPlugin, {
@ -236,7 +237,7 @@ config.update().finally(() => {
}
// Start application.
Mount(Vue, PhotoPrism, router);
Mount(Vue, PhotoPrism, router, vuetify);
if (config.baseUri === "") {
offline.install();
}

4
frontend/src/app.vue
View file

@ -7,9 +7,9 @@
<v-app :class="appClass">
<p-navigation></p-navigation>
<v-content>
<v-main>
<router-view></router-view>
</v-content>
</v-main>
</v-app>
<p-video-viewer></p-video-viewer>

3
frontend/src/common/vm.js
View file

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

20
frontend/src/component/auth/footer.vue
View file

@ -1,24 +1,24 @@
<template>
<div class="auth-footer">
<footer>
<v-layout wrap align-top pa-0 ma-0>
<v-flex xs12 sm6 class="pa-0 body-2 text-selectable text-xs-center white--text text-sm-left">
<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">
{{ about }}
</v-flex>
</v-col>
<v-flex v-if="legalInfo" xs12 sm6 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-xs-center text-sm-right white--text">
<a v-if="legalUrl" :href="legalUrl" target="_blank" class="text-link" :style="`color: ${colors.link}!important`">{{ legalInfo }}</a>
<span v-else>{{ legalInfo }}</span>
</v-flex>
<v-flex v-else-if="caption" xs12 sm6 class="pa-0 body-2 text-selectable text-xs-center text-sm-right white--text">
</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">
<strong>{{ caption }}</strong>
</v-flex>
<v-flex v-else xs12 sm6 class="pa-0 body-2 text-selectable text-xs-center text-sm-right white--text">
</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">
<router-link to="/about" class="text-link">
<span class="white--text">Made with ❤️ in Berlin</span>
</router-link>
</v-flex>
</v-layout>
</v-col>
</v-row>
</footer>
</div>
</template>

12
frontend/src/component/footer.vue
View file

@ -1,8 +1,8 @@
<template>
<v-card flat tile class="application footer">
<v-card-actions class="footer-actions">
<v-layout wrap align-top pt-3>
<v-flex xs12 sm6 class="px-0 pb-2 body-1 text-selectable text-xs-left">
<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">
<strong
><router-link to="/about" class="text-link text-selectable">
{{ about }}{{ getMembership() }}
@ -11,15 +11,15 @@
<span class="body-link text-selectable"
>Build&nbsp;<a href="https://docs.photoprism.app/release-notes/" target="_blank" :title="version" class="body-link">{{ build }}</a></span
>
</v-flex>
</v-col>
<v-flex xs12 sm6 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-xs-center text-sm-right">
<div class="hidden-xs-only">
<a href="https://raw.githubusercontent.com/photoprism/photoprism/develop/NOTICE" target="_blank" class="text-link">3rd-party software packages</a>
<a href="https://www.photoprism.app/about/team/" target="_blank" class="body-link">© 2018-2024 PhotoPrism UG</a>
</div>
</v-flex>
</v-layout>
</v-col>
</v-row>
</v-card-actions>
</v-card>
</template>

680
frontend/src/component/navigation.vue
View file

@ -1,7 +1,7 @@
<template>
<div id="p-navigation" :class="{ 'sidenav-visible': drawer }">
<template v-if="visible && $vuetify.breakpoint.smAndDown">
<v-toolbar dark fixed flat scroll-off-screen dense color="navigation darken-1" class="nav-small elevation-2" @click.stop.prevent>
<v-toolbar dark fixed flat dense color="navigation darken-1" class="nav-small elevation-2" @click.stop.prevent>
<v-avatar class="nav-avatar" tile :size="28" :class="{ clickable: auth }" @click.stop.prevent="showNavigation()">
<img :src="appIcon" :alt="config.name" :class="{ 'animate-hue': indexing }" />
</v-avatar>
@ -14,7 +14,7 @@
</v-toolbar>
</template>
<template v-else-if="visible && !auth">
<v-toolbar dark flat scroll-off-screen dense color="navigation darken-1" class="nav-small">
<v-toolbar dark flat dense color="navigation darken-1" class="nav-small">
<v-avatar class="nav-avatar" tile :size="28">
<img :src="appIcon" :alt="config.name" />
</v-avatar>
@ -26,520 +26,508 @@
</v-btn>
</v-toolbar>
</template>
<v-navigation-drawer v-if="visible && auth" v-model="drawer" :mini-variant="isMini" :width="270" :mobile-break-point="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 dark app :right="rtl">
<v-toolbar flat :dense="$vuetify.breakpoint.smAndDown">
<v-list class="navigation-home">
<v-list-tile class="nav-logo">
<v-list-tile-avatar class="nav-avatar clickable" @click.stop.prevent="goHome">
<v-list-item class="nav-logo">
<v-list-item-avatar class="nav-avatar clickable" @click.stop.prevent="goHome">
<img :src="appIcon" :alt="appName" :class="{ 'animate-hue': indexing }" />
</v-list-tile-avatar>
<v-list-tile-content>
<v-list-tile-title class="title">
</v-list-item-avatar>
<v-list-item-content>
<v-list-item-title class="title">
{{ appName }}
</v-list-tile-title>
</v-list-tile-content>
<v-list-tile-action class="hidden-sm-and-down" :title="$gettext('Minimize')">
</v-list-item-title>
</v-list-item-content>
<v-list-item-action class="hidden-sm-and-down" :title="$gettext('Minimize')">
<v-btn icon class="nav-minimize" @click.stop="toggleIsMini()">
<v-icon v-if="!rtl">chevron_left</v-icon>
<v-icon v-else>chevron_right</v-icon>
</v-btn>
</v-list-tile-action>
</v-list-tile>
</v-list-item-action>
</v-list-item>
</v-list>
</v-toolbar>
<v-list class="pt-3 p-flex-menu navigation-menu">
<v-list-tile v-if="isMini && !isRestricted" class="nav-expand" @click.stop="toggleIsMini()">
<v-list-tile-action :title="$gettext('Expand')">
<v-list class="pt-6 p-flex-menu navigation-menu">
<v-list-item v-if="isMini && !isRestricted" class="nav-expand" @click.stop="toggleIsMini()">
<v-list-item-action :title="$gettext('Expand')">
<v-icon v-if="!rtl">chevron_right</v-icon>
<v-icon v-else>chevron_left</v-icon>
</v-list-tile-action>
</v-list-tile>
</v-list-item-action>
</v-list-item>
<v-list-tile v-if="isMini && $config.feature('search')" to="/browse" class="nav-browse" @click.stop="">
<v-list-tile-action :title="$gettext('Search')">
<v-list-item v-if="isMini && $config.feature('search')" to="/browse" class="nav-browse" @click.stop="">
<v-list-item-action :title="$gettext('Search')">
<v-icon>search</v-icon>
</v-list-tile-action>
</v-list-item-action>
<v-list-tile-content>
<v-list-tile-title>
<v-list-item-content>
<v-list-item-title>
<translate>Search</translate>
</v-list-tile-title>
</v-list-tile-content>
</v-list-tile>
</v-list-item-title>
</v-list-item-content>
</v-list-item>
<v-list-group v-if="!isMini && $config.feature('search')" prepend-icon="search" no-action>
<template #activator>
<v-list-tile to="/browse" class="nav-browse" @click.stop="">
<v-list-tile-content>
<v-list-tile-title class="p-flex-menuitem">
<translate key="Search">Search</translate>
<span v-if="config.count.all > 0" :class="`nav-count ${rtl ? '--rtl' : ''}`">{{ config.count.all | abbreviateCount }}</span>
</v-list-tile-title>
</v-list-tile-content>
</v-list-tile>
</template>
<v-list-item slot="activator" to="/browse" class="nav-browse" @click.stop="">
<v-list-item-content>
<v-list-item-title class="p-flex-menuitem">
<translate key="Search">Search</translate>
<span v-if="config.count.all > 0" :class="`nav-count ${rtl ? '--rtl' : ''}`">{{ config.count.all | abbreviateCount }}</span>
</v-list-item-title>
</v-list-item-content>
</v-list-item>
<v-list-tile :to="{ name: 'browse', query: { q: 'mono:true quality:3 photo:true' } }" :exact="true" class="nav-monochrome" @click.stop="">
<v-list-tile-content>
<v-list-tile-title :class="`p-flex-menuitem menu-item ${rtl ? '--rtl' : ''}`">
<v-list-item :to="{ name: 'browse', query: { q: 'mono:true quality:3 photo:true' } }" :exact="true" class="nav-monochrome" @click.stop="">
<v-list-item-content>
<v-list-item-title :class="`p-flex-menuitem menu-item ${rtl ? '--rtl' : ''}`">
<translate>Monochrome</translate>
</v-list-tile-title>
</v-list-tile-content>
</v-list-tile>
</v-list-item-title>
</v-list-item-content>
</v-list-item>
<v-list-tile :to="{ name: 'browse', query: { q: 'panoramas' } }" :exact="true" class="nav-panoramas" @click.stop="">
<v-list-tile-content>
<v-list-tile-title :class="`menu-item ${rtl ? '--rtl' : ''}`">
<v-list-item :to="{ name: 'browse', query: { q: 'panoramas' } }" :exact="true" class="nav-panoramas" @click.stop="">
<v-list-item-content>
<v-list-item-title :class="`menu-item ${rtl ? '--rtl' : ''}`">
<translate>Panoramas</translate>
</v-list-tile-title>
</v-list-tile-content>
</v-list-tile>
</v-list-item-title>
</v-list-item-content>
</v-list-item>
<v-list-tile :to="{ name: 'browse', query: { q: 'animated' } }" :exact="true" class="nav-animated" @click.stop="">
<v-list-tile-content>
<v-list-tile-title :class="`menu-item ${rtl ? '--rtl' : ''}`">
<v-list-item :to="{ name: 'browse', query: { q: 'animated' } }" :exact="true" class="nav-animated" @click.stop="">
<v-list-item-content>
<v-list-item-title :class="`menu-item ${rtl ? '--rtl' : ''}`">
<translate>Animated</translate>
</v-list-tile-title>
</v-list-tile-content>
</v-list-tile>
</v-list-item-title>
</v-list-item-content>
</v-list-item>
<v-list-tile v-show="isSponsor" :to="{ name: 'browse', query: { q: 'vectors' } }" :exact="true" class="nav-vectors" @click.stop="">
<v-list-tile-content>
<v-list-tile-title :class="`menu-item ${rtl ? '--rtl' : ''}`">
<v-list-item v-show="isSponsor" :to="{ name: 'browse', query: { q: 'vectors' } }" :exact="true" class="nav-vectors" @click.stop="">
<v-list-item-content>
<v-list-item-title :class="`menu-item ${rtl ? '--rtl' : ''}`">
<translate>Vectors</translate>
</v-list-tile-title>
</v-list-tile-content>
</v-list-tile>
</v-list-item-title>
</v-list-item-content>
</v-list-item>
<v-list-tile :to="{ name: 'photos', query: { q: 'stacks' } }" :exact="true" class="nav-stacks" @click.stop="">
<v-list-tile-content>
<v-list-tile-title :class="`p-flex-menuitem menu-item ${rtl ? '--rtl' : ''}`">
<v-list-item :to="{ name: 'photos', query: { q: 'stacks' } }" :exact="true" class="nav-stacks" @click.stop="">
<v-list-item-content>
<v-list-item-title :class="`p-flex-menuitem menu-item ${rtl ? '--rtl' : ''}`">
<translate>Stacks</translate>
</v-list-tile-title>
</v-list-tile-content>
</v-list-tile>
</v-list-item-title>
</v-list-item-content>
</v-list-item>
<v-list-tile :to="{ name: 'photos', query: { q: 'scans' } }" :exact="true" class="nav-scans" @click.stop="">
<v-list-tile-content>
<v-list-tile-title :class="`p-flex-menuitem menu-item ${rtl ? '--rtl' : ''}`">
<v-list-item :to="{ name: 'photos', query: { q: 'scans' } }" :exact="true" class="nav-scans" @click.stop="">
<v-list-item-content>
<v-list-item-title :class="`p-flex-menuitem menu-item ${rtl ? '--rtl' : ''}`">
<translate>Scans</translate>
</v-list-tile-title>
</v-list-tile-content>
</v-list-tile>
</v-list-item-title>
</v-list-item-content>
</v-list-item>
<v-list-tile v-if="canManagePhotos" v-show="$config.feature('review')" to="/review" class="nav-review" @click.stop="">
<v-list-tile-content>
<v-list-tile-title :class="`p-flex-menuitem menu-item ${rtl ? '--rtl' : ''}`">
<v-list-item v-if="canManagePhotos" v-show="$config.feature('review')" to="/review" class="nav-review" @click.stop="">
<v-list-item-content>
<v-list-item-title :class="`p-flex-menuitem menu-item ${rtl ? '--rtl' : ''}`">
<translate>Review</translate>
<span v-show="config.count.review > 0" :class="`nav-count ${rtl ? '--rtl' : ''}`">{{ config.count.review | abbreviateCount }}</span>
</v-list-tile-title>
</v-list-tile-content>
</v-list-tile>
</v-list-item-title>
</v-list-item-content>
</v-list-item>
<v-list-tile v-show="$config.feature('archive')" to="/archive" class="nav-archive" @click.stop="">
<v-list-tile-content>
<v-list-tile-title :class="`p-flex-menuitem menu-item ${rtl ? '--rtl' : ''}`">
<v-list-item v-show="$config.feature('archive')" to="/archive" class="nav-archive" @click.stop="">
<v-list-item-content>
<v-list-item-title :class="`p-flex-menuitem menu-item ${rtl ? '--rtl' : ''}`">
<translate>Archive</translate>
<span v-show="config.count.archived > 0" :class="`nav-count ${rtl ? '--rtl' : ''}`">{{ config.count.archived | abbreviateCount }}</span>
</v-list-tile-title>
</v-list-tile-content>
</v-list-tile>
</v-list-item-title>
</v-list-item-content>
</v-list-item>
</v-list-group>
<v-list-tile v-if="isMini" v-show="$config.feature('albums')" to="/albums" class="nav-albums" @click.stop="">
<v-list-tile-action :title="$gettext('Albums')">
<v-list-item v-if="isMini" v-show="$config.feature('albums')" to="/albums" class="nav-albums" @click.stop="">
<v-list-item-action :title="$gettext('Albums')">
<v-icon>bookmark</v-icon>
</v-list-tile-action>
</v-list-item-action>
<v-list-tile-content>
<v-list-tile-title :class="`menu-item ${rtl ? '--rtl' : ''}`">
<v-list-item-content>
<v-list-item-title :class="`menu-item ${rtl ? '--rtl' : ''}`">
<translate key="Albums">Albums</translate>
</v-list-tile-title>
</v-list-tile-content>
</v-list-tile>
</v-list-item-title>
</v-list-item-content>
</v-list-item>
<v-list-group v-if="!isMini" v-show="$config.feature('albums')" prepend-icon="bookmark" no-action>
<template #activator>
<v-list-tile :to="{ name: 'albums' }" class="nav-albums" @click.stop="">
<v-list-tile-content>
<v-list-tile-title class="p-flex-menuitem">
<translate key="Albums">Albums</translate>
<span v-if="config.count.albums > 0" :class="`nav-count ${rtl ? '--rtl' : ''}`">{{ config.count.albums | abbreviateCount }}</span>
</v-list-tile-title>
</v-list-tile-content>
</v-list-tile>
</template>
<v-list-item slot="activator" :to="{ name: 'albums' }" class="nav-albums" @click.stop="">
<v-list-item-content>
<v-list-item-title class="p-flex-menuitem">
<translate key="Albums">Albums</translate>
<span v-if="config.count.albums > 0" :class="`nav-count ${rtl ? '--rtl' : ''}`">{{ config.count.albums | abbreviateCount }}</span>
</v-list-item-title>
</v-list-item-content>
</v-list-item>
<v-list-tile to="/unsorted" class="nav-unsorted">
<v-list-tile-content>
<v-list-tile-title :class="`p-flex-menuitem menu-item ${rtl ? '--rtl' : ''}`">
<v-list-item to="/unsorted" class="nav-unsorted">
<v-list-item-content>
<v-list-item-title :class="`p-flex-menuitem menu-item ${rtl ? '--rtl' : ''}`">
<translate key="Unsorted">Unsorted</translate>
</v-list-tile-title>
</v-list-tile-content>
</v-list-tile>
</v-list-item-title>
</v-list-item-content>
</v-list-item>
</v-list-group>
<v-list-tile v-if="isMini && $config.feature('videos')" to="/videos" class="nav-video" @click.stop="">
<v-list-tile-action :title="$gettext('Videos')">
<v-list-item v-if="isMini && $config.feature('videos')" to="/videos" class="nav-video" @click.stop="">
<v-list-item-action :title="$gettext('Videos')">
<v-icon>play_circle_fill</v-icon>
</v-list-tile-action>
</v-list-item-action>
<v-list-tile-content>
<v-list-tile-title :class="`menu-item ${rtl ? '--rtl' : ''}`">
<v-list-item-content>
<v-list-item-title :class="`menu-item ${rtl ? '--rtl' : ''}`">
<translate key="Videos">Videos</translate>
</v-list-tile-title>
</v-list-tile-content>
</v-list-tile>
</v-list-item-title>
</v-list-item-content>
</v-list-item>
<v-list-group v-if="!isMini && $config.feature('videos')" prepend-icon="play_circle_fill" no-action>
<template #activator>
<v-list-tile to="/videos" class="nav-video" @click.stop="">
<v-list-tile-content>
<v-list-tile-title class="p-flex-menuitem">
<translate key="Videos">Videos</translate>
<span v-show="config.count.videos > 0" :class="`nav-count ${rtl ? '--rtl' : ''}`">{{ config.count.videos | abbreviateCount }}</span>
</v-list-tile-title>
</v-list-tile-content>
</v-list-tile>
</template>
<v-list-item slot="activator" to="/videos" class="nav-video" @click.stop="">
<v-list-item-content>
<v-list-item-title class="p-flex-menuitem">
<translate key="Videos">Videos</translate>
<span v-show="config.count.videos > 0" :class="`nav-count ${rtl ? '--rtl' : ''}`">{{ config.count.videos | abbreviateCount }}</span>
</v-list-item-title>
</v-list-item-content>
</v-list-item>
<v-list-tile :to="{ name: 'live' }" class="nav-live" @click.stop="">
<v-list-tile-content>
<v-list-tile-title :class="`p-flex-menuitem menu-item ${rtl ? '--rtl' : ''}`">
<v-list-item :to="{ name: 'live' }" class="nav-live" @click.stop="">
<v-list-item-content>
<v-list-item-title :class="`p-flex-menuitem menu-item ${rtl ? '--rtl' : ''}`">
<translate>Live Photos</translate>
<span v-show="config.count.live > 0" :class="`nav-count ${rtl ? '--rtl' : ''}`">{{ config.count.live | abbreviateCount }}</span>
</v-list-tile-title>
</v-list-tile-content>
</v-list-tile>
</v-list-item-title>
</v-list-item-content>
</v-list-item>
</v-list-group>
<v-list-tile v-show="$config.feature('people') && (canManagePeople || config.count.people > 0)" :to="{ name: 'people' }" class="nav-people" @click.stop="">
<v-list-tile-action :title="$gettext('People')">
<v-list-item v-show="$config.feature('people') && (canManagePeople || config.count.people > 0)" :to="{ name: 'people' }" class="nav-people" @click.stop="">
<v-list-item-action :title="$gettext('People')">
<v-icon>person</v-icon>
</v-list-tile-action>
</v-list-item-action>
<v-list-tile-content>
<v-list-tile-title class="p-flex-menuitem">
<v-list-item-content>
<v-list-item-title class="p-flex-menuitem">
<translate key="People">People</translate>
<span v-show="config.count.people > 0" :class="`nav-count ${rtl ? '--rtl' : ''}`">{{ config.count.people | abbreviateCount }}</span>
</v-list-tile-title>
</v-list-tile-content>
</v-list-tile>
</v-list-item-title>
</v-list-item-content>
</v-list-item>
<v-list-tile v-show="$config.feature('favorites')" :to="{ name: 'favorites' }" class="nav-favorites" @click.stop="">
<v-list-tile-action :title="$gettext('Favorites')">
<v-list-item v-show="$config.feature('favorites')" :to="{ name: 'favorites' }" class="nav-favorites" @click.stop="">
<v-list-item-action :title="$gettext('Favorites')">
<v-icon>favorite</v-icon>
</v-list-tile-action>
</v-list-item-action>
<v-list-tile-content>
<v-list-tile-title class="p-flex-menuitem">
<v-list-item-content>
<v-list-item-title class="p-flex-menuitem">
<translate key="Favorites">Favorites</translate>
<span v-show="config.count.favorites > 0" :class="`nav-count ${rtl ? '--rtl' : ''}`">{{ config.count.favorites | abbreviateCount }}</span>
</v-list-tile-title>
</v-list-tile-content>
</v-list-tile>
</v-list-item-title>
</v-list-item-content>
</v-list-item>
<v-list-tile v-show="$config.feature('moments')" :to="{ name: 'moments' }" class="nav-moments" @click.stop="">
<v-list-tile-action :title="$gettext('Moments')">
<v-list-item v-show="$config.feature('moments')" :to="{ name: 'moments' }" class="nav-moments" @click.stop="">
<v-list-item-action :title="$gettext('Moments')">
<v-icon>star</v-icon>
</v-list-tile-action>
</v-list-item-action>
<v-list-tile-content>
<v-list-tile-title class="p-flex-menuitem">
<v-list-item-content>
<v-list-item-title class="p-flex-menuitem">
<translate key="Moments">Moments</translate>
<span v-show="config.count.moments > 0" :class="`nav-count ${rtl ? '--rtl' : ''}`">{{ config.count.moments | abbreviateCount }}</span>
</v-list-tile-title>
</v-list-tile-content>
</v-list-tile>
</v-list-item-title>
</v-list-item-content>
</v-list-item>
<v-list-tile v-show="$config.feature('moments')" :to="{ name: 'calendar' }" class="nav-calendar" @click.stop="">
<v-list-tile-action :title="$gettext('Calendar')">
<v-list-item v-show="$config.feature('moments')" :to="{ name: 'calendar' }" class="nav-calendar" @click.stop="">
<v-list-item-action :title="$gettext('Calendar')">
<v-icon>date_range</v-icon>
</v-list-tile-action>
</v-list-item-action>
<v-list-tile-content>
<v-list-tile-title class="p-flex-menuitem">
<v-list-item-content>
<v-list-item-title class="p-flex-menuitem">
<translate key="Calendar">Calendar</translate>
<span v-show="config.count.months > 0" :class="`nav-count ${rtl ? '--rtl' : ''}`">{{ config.count.months | abbreviateCount }}</span>
</v-list-tile-title>
</v-list-tile-content>
</v-list-tile>
</v-list-item-title>
</v-list-item-content>
</v-list-item>
<v-list-tile v-if="isRestricted" v-show="$config.feature('places')" to="/states" class="nav-states" @click.stop="">
<v-list-tile-action :title="$gettext('States')">
<v-list-item v-if="isRestricted" v-show="$config.feature('places')" to="/states" class="nav-states" @click.stop="">
<v-list-item-action :title="$gettext('States')">
<v-icon>near_me</v-icon>
</v-list-tile-action>
</v-list-item-action>
<v-list-tile-content>
<v-list-tile-title class="p-flex-menuitem" @click.stop="">
<v-list-item-content>
<v-list-item-title class="p-flex-menuitem" @click.stop="">
<translate key="States">States</translate>
<span v-show="config.count.states > 0" :class="`nav-count ${rtl ? '--rtl' : ''}`">{{ config.count.states | abbreviateCount }}</span>
</v-list-tile-title>
</v-list-tile-content>
</v-list-tile>
</v-list-item-title>
</v-list-item-content>
</v-list-item>
<template v-if="canSearchPlaces">
<v-list-tile v-if="isMini" v-show="canSearchPlaces && $config.feature('places')" :to="{ name: 'places' }" class="nav-places" @click.stop="">
<v-list-tile-action :title="$gettext('Places')">
<v-list-item v-if="isMini" v-show="canSearchPlaces && $config.feature('places')" :to="{ name: 'places' }" class="nav-places" @click.stop="">
<v-list-item-action :title="$gettext('Places')">
<v-icon>place</v-icon>
</v-list-tile-action>
</v-list-item-action>
<v-list-tile-content>
<v-list-tile-title class="p-flex-menuitem">
<v-list-item-content>
<v-list-item-title class="p-flex-menuitem">
<translate key="Places">Places</translate>
</v-list-tile-title>
</v-list-tile-content>
</v-list-tile>
</v-list-item-title>
</v-list-item-content>
</v-list-item>
<v-list-group v-if="!isMini" v-show="canSearchPlaces && $config.feature('places')" prepend-icon="place" no-action>
<template #activator>
<v-list-tile to="/places" class="nav-places" @click.stop="">
<v-list-tile-content>
<v-list-tile-title class="p-flex-menuitem">
<translate key="Places">Places</translate>
<span v-show="config.count.places > 0" :class="`nav-count ${rtl ? '--rtl' : ''}`">{{ config.count.places | abbreviateCount }}</span>
</v-list-tile-title>
</v-list-tile-content>
</v-list-tile>
</template>
<v-list-item slot="activator" to="/places" class="nav-places" @click.stop="">
<v-list-item-content >
<v-list-item-title class="p-flex-menuitem">
<translate key="Places">Places</translate>
<span v-show="config.count.places > 0" :class="`nav-count ${rtl ? '--rtl' : ''}`">{{ config.count.places | abbreviateCount }}</span>
</v-list-item-title>
</v-list-item-content>
</v-list-item>
<v-list-tile to="/states" class="nav-states" @click.stop="">
<v-list-tile-content>
<v-list-tile-title :class="`p-flex-menuitem menu-item ${rtl ? '--rtl' : ''}`">
<v-list-item to="/states" class="nav-states" @click.stop="">
<v-list-item-content>
<v-list-item-title :class="`p-flex-menuitem menu-item ${rtl ? '--rtl' : ''}`">
<translate key="States">States</translate>
<span v-show="config.count.states > 0" :class="`nav-count ${rtl ? '--rtl' : ''}`">{{ config.count.states | abbreviateCount }}</span>
</v-list-tile-title>
</v-list-tile-content>
</v-list-tile>
</v-list-item-title>
</v-list-item-content>
</v-list-item>
</v-list-group>
</template>
<v-list-tile v-show="$config.feature('labels')" to="/labels" class="nav-labels" @click.stop="">
<v-list-tile-action :title="$gettext('Labels')">
<v-list-item v-show="$config.feature('labels')" to="/labels" class="nav-labels" @click.stop="">
<v-list-item-action :title="$gettext('Labels')">
<v-icon>label</v-icon>
</v-list-tile-action>
</v-list-item-action>
<v-list-tile-content>
<v-list-tile-title class="p-flex-menuitem">
<v-list-item-content>
<v-list-item-title class="p-flex-menuitem">
<translate key="Labels">Labels</translate>
<span v-show="config.count.labels > 0" :class="`nav-count ${rtl ? '--rtl' : ''}`">{{ config.count.labels | abbreviateCount }}</span>
</v-list-tile-title>
</v-list-tile-content>
</v-list-tile>
</v-list-item-title>
</v-list-item-content>
</v-list-item>
<v-list-tile v-show="$config.feature('folders')" :to="{ name: 'folders' }" class="nav-folders" @click.stop="">
<v-list-tile-action :title="$gettext('Folders')">
<v-list-item v-show="$config.feature('folders')" :to="{ name: 'folders' }" class="nav-folders" @click.stop="">
<v-list-item-action :title="$gettext('Folders')">
<v-icon>folder</v-icon>
</v-list-tile-action>
</v-list-item-action>
<v-list-tile-content>
<v-list-tile-title class="p-flex-menuitem">
<v-list-item-content>
<v-list-item-title class="p-flex-menuitem">
<translate key="Folders">Folders</translate>
<span v-show="config.count.folders > 0" :class="`nav-count ${rtl ? '--rtl' : ''}`">{{ config.count.folders | abbreviateCount }}</span>
</v-list-tile-title>
</v-list-tile-content>
</v-list-tile>
</v-list-item-title>
</v-list-item-content>
</v-list-item>
<v-list-tile v-show="$config.feature('private')" to="/private" class="nav-private" @click.stop="">
<v-list-tile-action :title="$gettext('Private')">
<v-list-item v-show="$config.feature('private')" to="/private" class="nav-private" @click.stop="">
<v-list-item-action :title="$gettext('Private')">
<v-icon>lock</v-icon>
</v-list-tile-action>
</v-list-item-action>
<v-list-tile-content>
<v-list-tile-title class="p-flex-menuitem">
<v-list-item-content>
<v-list-item-title class="p-flex-menuitem">
<translate key="Private">Private</translate>
<span v-show="config.count.private > 0" :class="`nav-count ${rtl ? '--rtl' : ''}`">{{ config.count.private | abbreviateCount }}</span>
</v-list-tile-title>
</v-list-tile-content>
</v-list-tile>
</v-list-item-title>
</v-list-item-content>
</v-list-item>
<v-list-tile v-if="isMini && $config.feature('library')" :to="{ name: 'library_index' }" class="nav-library" @click.stop="">
<v-list-tile-action :title="$gettext('Library')">
<v-list-item v-if="isMini && $config.feature('library')" :to="{ name: 'library_index' }" class="nav-library" @click.stop="">
<v-list-item-action :title="$gettext('Library')">
<v-icon>camera_roll</v-icon>
</v-list-tile-action>
</v-list-item-action>
<v-list-tile-content>
<v-list-tile-title>
<v-list-item-content>
<v-list-item-title>
<translate key="Library">Library</translate>
</v-list-tile-title>
</v-list-tile-content>
</v-list-tile>
</v-list-item-title>
</v-list-item-content>
</v-list-item>
<v-list-group v-if="!isMini && $config.feature('library')" prepend-icon="camera_roll" no-action>
<template #activator>
<v-list-tile :to="{ name: 'library_index' }" class="nav-library" @click.stop="">
<v-list-tile-content>
<v-list-tile-title class="p-flex-menuitem">
<translate key="Library">Library</translate>
</v-list-tile-title>
</v-list-tile-content>
</v-list-tile>
</template>
<v-list-item slot="activator" :to="{ name: 'library_index' }" class="nav-library" @click.stop="">
<v-list-item-content>
<v-list-item-title class="p-flex-menuitem">
<translate key="Library">Library</translate>
</v-list-item-title>
</v-list-item-content>
</v-list-item>
<v-list-tile v-show="$config.feature('files')" to="/index/files" class="nav-originals" @click.stop="">
<v-list-tile-content>
<v-list-tile-title :class="`p-flex-menuitem menu-item ${rtl ? '--rtl' : ''}`">
<v-list-item v-show="$config.feature('files')" to="/index/files" class="nav-originals" @click.stop="">
<v-list-item-content>
<v-list-item-title :class="`p-flex-menuitem menu-item ${rtl ? '--rtl' : ''}`">
<translate key="Originals">Originals</translate>
<span v-show="config.count.files > 0 && canAccessPrivate" :class="`nav-count ${rtl ? '--rtl' : ''}`">{{ config.count.files | abbreviateCount }}</span>
</v-list-tile-title>
</v-list-tile-content>
</v-list-tile>
</v-list-item-title>
</v-list-item-content>
</v-list-item>
<v-list-tile :to="{ name: 'hidden' }" class="nav-hidden" @click.stop="">
<v-list-tile-content>
<v-list-tile-title :class="`p-flex-menuitem menu-item ${rtl ? '--rtl' : ''}`">
<v-list-item :to="{ name: 'hidden' }" class="nav-hidden" @click.stop="">
<v-list-item-content>
<v-list-item-title :class="`p-flex-menuitem menu-item ${rtl ? '--rtl' : ''}`">
<translate key="Hidden">Hidden</translate>
<span v-show="config.count.hidden > 0" :class="`nav-count ${rtl ? '--rtl' : ''}`">{{ config.count.hidden | abbreviateCount }}</span>
</v-list-tile-title>
</v-list-tile-content>
</v-list-tile>
</v-list-item-title>
</v-list-item-content>
</v-list-item>
<v-list-tile :to="{ name: 'errors' }" class="nav-errors" @click.stop="">
<v-list-tile-content>
<v-list-tile-title :class="`p-flex-menuitem menu-item ${rtl ? '--rtl' : ''}`">
<v-list-item :to="{ name: 'errors' }" class="nav-errors" @click.stop="">
<v-list-item-content>
<v-list-item-title :class="`p-flex-menuitem menu-item ${rtl ? '--rtl' : ''}`">
<translate key="Errors">Errors</translate>
</v-list-tile-title>
</v-list-tile-content>
</v-list-tile>
</v-list-item-title>
</v-list-item-content>
</v-list-item>
</v-list-group>
<template v-if="!config.disable.settings">
<v-list-tile v-if="isMini" v-show="$config.feature('settings')" :to="{ name: 'settings' }" class="nav-settings" @click.stop="">
<v-list-tile-action :title="$gettext('Settings')">
<v-list-item v-if="isMini" v-show="$config.feature('settings')" :to="{ name: 'settings' }" class="nav-settings" @click.stop="">
<v-list-item-action :title="$gettext('Settings')">
<v-icon>settings</v-icon>
</v-list-tile-action>
</v-list-item-action>
<v-list-tile-content>
<v-list-tile-title>
<v-list-item-content>
<v-list-item-title>
<translate key="Settings">Settings</translate>
</v-list-tile-title>
</v-list-tile-content>
</v-list-tile>
</v-list-item-title>
</v-list-item-content>
</v-list-item>
<v-list-group v-else v-show="$config.feature('settings')" prepend-icon="settings" no-action>
<template #activator>
<v-list-tile :to="{ name: 'settings' }" class="nav-settings" @click.stop="">
<v-list-tile-content>
<v-list-tile-title>
<translate key="Settings">Settings</translate>
</v-list-tile-title>
</v-list-tile-content>
</v-list-tile>
</template>
<v-list-item slot="activator" :to="{ name: 'settings' }" class="nav-settings" @click.stop="">
<v-list-item-content>
<v-list-item-title>
<translate key="Settings">Settings</translate>
</v-list-item-title>
</v-list-item-content>
</v-list-item>
<v-list-tile v-if="canManageUsers" :to="{ path: '/admin/users' }" :exact="false" class="nav-admin-users" @click.stop="">
<v-list-tile-content>
<v-list-tile-title :class="`menu-item ${rtl ? '--rtl' : ''}`">
<v-list-item v-if="canManageUsers" :to="{ path: '/admin/users' }" :exact="false" class="nav-admin-users" @click.stop="">
<v-list-item-content>
<v-list-item-title :class="`menu-item ${rtl ? '--rtl' : ''}`">
<translate>Users</translate>
</v-list-tile-title>
</v-list-tile-content>
</v-list-tile>
</v-list-item-title>
</v-list-item-content>
</v-list-item>
<v-list-tile v-show="featFeedback" :to="{ name: 'feedback' }" :exact="true" class="nav-feedback" @click.stop="">
<v-list-tile-content>
<v-list-tile-title :class="`menu-item ${rtl ? '--rtl' : ''}`">
<v-list-item v-show="featFeedback" :to="{ name: 'feedback' }" :exact="true" class="nav-feedback" @click.stop="">
<v-list-item-content>
<v-list-item-title :class="`menu-item ${rtl ? '--rtl' : ''}`">
<translate>Feedback</translate>
</v-list-tile-title>
</v-list-tile-content>
</v-list-tile>
</v-list-item-title>
</v-list-item-content>
</v-list-item>
<v-list-tile :to="{ name: 'license' }" :exact="true" class="nav-license" @click.stop="">
<v-list-tile-content>
<v-list-tile-title :class="`menu-item ${rtl ? '--rtl' : ''}`">
<v-list-item :to="{ name: 'license' }" :exact="true" class="nav-license" @click.stop="">
<v-list-item-content>
<v-list-item-title :class="`menu-item ${rtl ? '--rtl' : ''}`">
<translate key="License">License</translate>
</v-list-tile-title>
</v-list-tile-content>
</v-list-tile>
</v-list-item-title>
</v-list-item-content>
</v-list-item>
<v-list-tile v-show="featUpgrade" :to="{ name: 'upgrade' }" class="nav-upgrade" :exact="true" @click.stop="">
<v-list-tile-content>
<v-list-tile-title :class="`menu-item ${rtl ? '--rtl' : ''}`">
<v-list-item v-show="featUpgrade" :to="{ name: 'upgrade' }" class="nav-upgrade" :exact="true" @click.stop="">
<v-list-item-content>
<v-list-item-title :class="`menu-item ${rtl ? '--rtl' : ''}`">
<translate key="Upgrade">Upgrade</translate>
</v-list-tile-title>
</v-list-tile-content>
</v-list-tile>
</v-list-item-title>
</v-list-item-content>
</v-list-item>
<v-list-tile :to="{ name: 'about' }" :exact="true" class="nav-about" @click.stop="">
<v-list-tile-content>
<v-list-tile-title :class="`menu-item ${rtl ? '--rtl' : ''}`">
<v-list-item :to="{ name: 'about' }" :exact="true" class="nav-about" @click.stop="">
<v-list-item-content>
<v-list-item-title :class="`menu-item ${rtl ? '--rtl' : ''}`">
<translate>About</translate>
</v-list-tile-title>
</v-list-tile-content>
</v-list-tile>
</v-list-item-title>
</v-list-item-content>
</v-list-item>
</v-list-group>
</template>
<v-list-tile v-show="!auth" :to="{ name: 'login' }" class="nav-login" @click.stop="">
<v-list-tile-action :title="$gettext('Login')">
<v-list-item v-show="!auth" :to="{ name: 'login' }" class="nav-login" @click.stop="">
<v-list-item-action :title="$gettext('Login')">
<v-icon>lock</v-icon>
</v-list-tile-action>
</v-list-item-action>
<v-list-tile-content>
<v-list-tile-title>
<v-list-item-content>
<v-list-item-title>
<translate key="Login">Login</translate>
</v-list-tile-title>
</v-list-tile-content>
</v-list-tile>
</v-list-item-title>
</v-list-item-content>
</v-list-item>
<v-list-tile v-show="featMembership" :to="{ name: 'upgrade' }" class="nav-upgrade" @click.stop="">
<v-list-tile-action :title="$gettext('Upgrade')">
<v-list-item v-show="featMembership" :to="{ name: 'upgrade' }" class="nav-upgrade" @click.stop="">
<v-list-item-action :title="$gettext('Upgrade')">
<v-icon v-if="isPro">verified</v-icon>
<v-icon v-else>diamond</v-icon>
</v-list-tile-action>
</v-list-item-action>
<v-list-tile-content>
<v-list-tile-title v-if="isPro">
<v-list-item-content>
<v-list-item-title v-if="isPro">
<translate key="Upgrade">Upgrade</translate>
</v-list-tile-title>
<v-list-tile-title v-else>
</v-list-item-title>
<v-list-item-title v-else>
<translate key="Support Our Mission">Support Our Mission</translate>
</v-list-tile-title>
</v-list-tile-content>
</v-list-tile>
</v-list-item-title>
</v-list-item-content>
</v-list-item>
</v-list>
<v-list class="p-user-box">
<v-list-tile v-show="$config.disconnected" to="/help/websockets" class="nav-connecting navigation" @click.stop="">
<v-list-tile-action :title="$gettext('Offline')">
<v-list-item v-show="$config.disconnected" to="/help/websockets" class="nav-connecting navigation" @click.stop="">
<v-list-item-action :title="$gettext('Offline')">
<v-icon color="warning">wifi_off</v-icon>
</v-list-tile-action>
</v-list-item-action>
<v-list-tile-content>
<v-list-tile-title class="text--warning">
<v-list-item-content>
<v-list-item-title class="text--warning">
<translate key="Offline">Offline</translate>
</v-list-tile-title>
</v-list-tile-content>
</v-list-tile>
</v-list-item-title>
</v-list-item-content>
</v-list-item>
<v-list-tile v-show="auth && !isPublic" class="p-profile" @click.stop="onAccountSettings">
<v-list-tile-avatar size="36">
<v-list-item v-show="auth && !isPublic" class="p-profile" @click.stop="onAccountSettings">
<v-list-item-avatar size="36">
<img :src="userAvatarURL" :alt="accountInfo" :title="accountInfo" />
</v-list-tile-avatar>
</v-list-item-avatar>
<v-list-tile-content>
<v-list-tile-title>{{ displayName }}</v-list-tile-title>
<v-list-tile-sub-title>{{ accountInfo }}</v-list-tile-sub-title>
</v-list-tile-content>
<v-list-item-content>
<v-list-item-title>{{ displayName }}</v-list-item-title>
<v-list-item-subtitle>{{ accountInfo }}</v-list-item-subtitle>
</v-list-item-content>
<v-list-tile-action :title="$gettext('Logout')">
<v-list-item-action :title="$gettext('Logout')">
<v-btn icon @click.stop.prevent="onLogout">
<v-icon>power_settings_new</v-icon>
</v-btn>
</v-list-tile-action>
</v-list-tile>
</v-list-item-action>
</v-list-item>
<v-list-tile v-show="isMini && auth && !isPublic" class="nav-logout" @click.stop.prevent="onLogout">
<v-list-tile-action :title="$gettext('Logout')">
<v-list-item v-show="isMini && auth && !isPublic" class="nav-logout" @click.stop.prevent="onLogout">
<v-list-item-action :title="$gettext('Logout')">
<v-icon>power_settings_new</v-icon>
</v-list-tile-action>
</v-list-item-action>
<v-list-tile-content>
<v-list-tile-title>
<v-list-item-content>
<v-list-item-title>
<translate key="Logout">Logout</translate>
</v-list-tile-title>
</v-list-tile-content>
</v-list-tile>
</v-list-item-title>
</v-list-item-content>
</v-list-item>
</v-list>
</v-navigation-drawer>
<div id="mobile-menu" :class="{ active: speedDial }" @click.stop="speedDial = false">

4
frontend/src/component/notify.vue
View file

@ -1,7 +1,7 @@
<template>
<v-snackbar id="p-notify" v-model="visible" :color="color" :timeout="0" :class="textColor" :bottom="true">
<v-snackbar id="p-notify" v-model="visible" :color="color" :timeout="-1" :class="textColor" :bottom="true">
<span :dir="!rtl ? 'let' : 'rtl'">{{ text }}</span>
<v-btn :class="textColor + ' pr-0'" icon flat @click="close">
<v-btn :class="textColor + ' pr-0'" icon text @click="close">
<v-icon :class="textColor">close</v-icon>
</v-btn>
</v-snackbar>

42
frontend/src/component/photo/cards.vue
View file

@ -1,7 +1,7 @@
<template>
<v-container grid-list-xs fluid class="pa-2 p-photos p-photo-cards">
<template v-if="photos.length === 0">
<v-alert :value="true" color="secondary-dark" :icon="isSharedView ? 'image_not_supported' : 'lightbulb_outline'" class="no-results ma-2 opacity-70" outline>
<v-alert color="secondary-dark" :icon="isSharedView ? 'image_not_supported' : 'lightbulb_outline'" class="no-results ma-2 opacity-70" outlined>
<h3 v-if="filter.order === 'edited'" class="body-2 ma-0 pa-0">
<translate>No recently edited pictures</translate>
</h3>
@ -19,12 +19,12 @@
</p>
</v-alert>
</template>
<v-layout row wrap class="search-results photo-results cards-view" :class="{ 'select-results': selectMode }">
<v-row class="search-results photo-results cards-view" :class="{ 'select-results': selectMode }">
<div v-for="(photo, index) in photos" ref="items" :key="photo.ID" :data-index="index" class="flex xs12 sm6 md4 lg3 xlg2 ul1 d-flex">
<div v-if="index < firstVisibleElementIndex || index > lastVisibileElementIndex" :data-uid="photo.UID" class="card result placeholder">
<div v-if="index < firstVisibleElementIndex || index > lastVisibileElementIndex" :data-uid="photo.UID" class="card result placeholder flex-grow-1">
<div class="card darken-1 image" />
<div v-if="photo.Quality < 3 && context === 'review'" style="width: 100%; height: 34px" />
<div class="pa-3 card-details">
<div class="pa-6 card-details">
<div>
<h3 class="body-2 mb-2" :title="photo.Title">
{{ photo.Title | truncate(80) }}
@ -57,7 +57,7 @@
</div>
</div>
</div>
<div v-else :data-id="photo.ID" :data-uid="photo.UID" class="result card" :class="photo.classes()" @contextmenu.stop="onContextMenu($event, index)">
<div v-else :data-id="photo.ID" :data-uid="photo.UID" class="result card flex-grow-1" :class="photo.classes()" @contextmenu.stop="onContextMenu($event, index)">
<div class="card-background card"></div>
<div
:key="photo.Hash"
@ -71,11 +71,11 @@
@mouseover="playLive(photo)"
@mouseleave="pauseLive(photo)"
>
<v-layout v-if="photo.Type === 'live' || photo.Type === 'animated'" class="live-player">
<v-row v-if="photo.Type === 'live' || photo.Type === 'animated'" class="live-player">
<video :id="'live-player-' + photo.ID" :key="photo.ID" width="500" height="500" preload="none" loop muted playsinline>
<source :src="photo.videoUrl()" />
</video>
</v-layout>
</v-row>
<button
v-if="photo.Type !== 'image' || photo.isStack()"
@ -125,21 +125,21 @@
</div>
<v-card-actions v-if="!isSharedView && photo.Quality < 3 && context === 'review'" class="card-details pa-0">
<v-layout row wrap align-center>
<v-flex xs6 class="text-xs-center pa-1">
<v-btn color="card darken-1" small depressed dark block :round="false" class="action-archive text-xs-center" :title="$gettext('Archive')" @click.stop="photo.archive()">
<v-icon dark>clear</v-icon>
</v-btn>
</v-flex>
<v-flex xs6 class="text-xs-center pa-1">
<v-btn color="card darken-1" small depressed dark block :round="false" class="action-approve text-xs-center" :title="$gettext('Approve')" @click.stop="photo.approve()">
<v-icon dark>check</v-icon>
</v-btn>
</v-flex>
</v-layout>
<v-row align="center">
<v-col cols="6" class="text-xs-center pa-1">
<v-btn color="card darken-1" small depressed dark block :rounded="false" class="action-archive text-xs-center" :title="$gettext('Archive')" @click.stop="photo.archive()">
<v-icon dark>clear</v-icon>
</v-btn>
</v-col>
<v-col cols="6" class="text-xs-center pa-1">
<v-btn color="card darken-1" small depressed dark block :rounded="false" class="action-approve text-xs-center" :title="$gettext('Approve')" @click.stop="photo.approve()">
<v-icon dark>check</v-icon>
</v-btn>
</v-col>
</v-row>
</v-card-actions>
<div class="pa-3 card-details">
<div class="pa-6 card-details">
<div>
<h3 class="body-2 mb-2" :title="photo.Title">
<button class="action-title-edit" :data-uid="photo.UID" @click.exact="isSharedView ? openPhoto(index) : editPhoto(index)">
@ -200,7 +200,7 @@
</div>
</div>
</div>
</v-layout>
</v-row>
</v-container>
</template>
<script>

6
frontend/src/component/photo/list.vue
View file

@ -1,7 +1,7 @@
<template>
<div>
<div v-if="photos.length === 0" class="pa-2">
<v-alert :value="true" color="secondary-dark" :icon="isSharedView ? 'image_not_supported' : 'lightbulb_outline'" class="no-results ma-2 opacity-70" outline>
<v-alert color="secondary-dark" :icon="isSharedView ? 'image_not_supported' : 'lightbulb_outline'" class="no-results ma-2 opacity-70" outlined>
<h3 v-if="filter.order === 'edited'" class="body-2 ma-0 pa-0">
<translate>No recently edited pictures</translate>
</h3>
@ -100,11 +100,11 @@
</template>
<template v-else>
<v-btn v-if="hidePrivate" class="input-private" icon small flat :ripple="false" :data-uid="photo.UID" @click.stop.prevent="photo.togglePrivate()">
<v-btn v-if="hidePrivate" class="input-private" icon small text :ripple="false" :data-uid="photo.UID" @click.stop.prevent="photo.togglePrivate()">
<v-icon v-if="photo.Private" color="secondary-dark" class="select-on">lock</v-icon>
<v-icon v-else color="secondary" class="select-off">lock_open</v-icon>
</v-btn>
<v-btn class="input-favorite" icon small flat :ripple="false" :data-uid="photo.UID" @click.stop.prevent="photo.toggleLike()">
<v-btn class="input-favorite" icon small text :ripple="false" :data-uid="photo.UID" @click.stop.prevent="photo.toggleLike()">
<v-icon v-if="photo.Favorite" color="secondary-dark" :data-uid="photo.UID" class="select-on">favorite</v-icon>
<v-icon v-else color="secondary" :data-uid="photo.UID" class="select-off">favorite_border</v-icon>
</v-btn>

10
frontend/src/component/photo/mosaic.vue
View file

@ -1,7 +1,7 @@
<template>
<v-container grid-list-xs fluid class="pa-2 p-photos p-photo-mosaic">
<div v-if="photos.length === 0" class="pa-0">
<v-alert :value="true" color="secondary-dark" :icon="isSharedView ? 'image_not_supported' : 'lightbulb_outline'" class="no-results ma-2 opacity-70" outline>
<v-alert color="secondary-dark" :icon="isSharedView ? 'image_not_supported' : 'lightbulb_outline'" class="no-results ma-2 opacity-70" outlined>
<h3 v-if="filter.order === 'edited'" class="body-2 ma-0 pa-0">
<translate>No recently edited pictures</translate>
</h3>
@ -19,7 +19,7 @@
</p>
</v-alert>
</div>
<v-layout row wrap class="search-results photo-results mosaic-view" :class="{ 'select-results': selectMode }">
<v-row class="search-results photo-results mosaic-view" :class="{ 'select-results': selectMode }">
<div v-for="(photo, index) in photos" ref="items" :key="photo.ID" class="flex xs4 sm3 md2 lg1" :data-index="index">
<!--
The following div is the layout + size container. It makes the browser not
@ -45,11 +45,11 @@
@mouseover="playLive(photo)"
@mouseleave="pauseLive(photo)"
>
<v-layout v-if="photo.Type === 'live' || photo.Type === 'animated'" class="live-player">
<v-row v-if="photo.Type === 'live' || photo.Type === 'animated'" class="live-player">
<video :id="'live-player-' + photo.ID" :key="photo.ID" width="224" height="224" preload="none" loop muted playsinline>
<source :src="photo.videoUrl()" />
</video>
</v-layout>
</v-row>
<button
v-if="photo.Type !== 'image' || photo.isStack()"
@ -99,7 +99,7 @@
</div>
</div>
</div>
</v-layout>
</v-row>
</v-container>
</template>
<script>

44
frontend/src/component/photo/toolbar.vue
View file

@ -13,7 +13,7 @@
validate-on-blur
autocorrect="off"
autocapitalize="none"
browser-autocomplete="off"
autocomplete="off"
:label="$gettext('Search')"
prepend-inner-icon="search"
color="secondary-dark"
@ -22,7 +22,7 @@
updateFilter({ q: v });
}
"
@keyup.enter.native="(e) => updateQuery({ q: e.target.value })"
@keyup.enter="(e) => updateQuery({ q: e.target.value })"
@click:clear="
() => {
updateQuery({ q: '' });
@ -75,8 +75,8 @@
<v-card v-show="searchExpanded" class="pt-1 page-toolbar-expanded" flat color="secondary-light">
<v-card-text>
<v-layout row wrap>
<v-flex xs12 sm6 md3 pa-2 class="p-countries-select">
<v-row>
<v-col cols="12" sm="6" md="3" class="pa-2 p-countries-select">
<v-select
:value="filter.country"
:label="$gettext('Country')"
@ -97,8 +97,8 @@
"
>
</v-select>
</v-flex>
<v-flex xs12 sm6 md3 pa-2 class="p-camera-select">
</v-col>
<v-col cols="12" sm="6" md="3" class="pa-2 p-camera-select">
<v-select
:value="filter.camera"
:label="$gettext('Camera')"
@ -118,8 +118,8 @@
"
>
</v-select>
</v-flex>
<v-flex xs12 sm6 md3 pa-2 class="p-view-select">
</v-col>
<v-col cols="12" sm="6" md="3" class="pa-2 p-view-select">
<v-select
id="viewSelect"
:value="settings.view"
@ -137,8 +137,8 @@
"
>
</v-select>
</v-flex>
<v-flex xs12 sm6 md3 pa-2 class="p-time-select">
</v-col>
<v-col cols="12" sm="6" md="3" class="pa-2 p-time-select">
<v-select
:value="filter.order"
:label="$gettext('Sort Order')"
@ -156,8 +156,8 @@
"
>
</v-select>
</v-flex>
<v-flex xs12 sm6 md3 pa-2 class="p-year-select">
</v-col>
<v-col cols="12" sm="6" md="3" class="pa-2 p-year-select">
<v-select
:value="filter.year"
:label="$gettext('Year')"
@ -177,8 +177,8 @@
"
>
</v-select>
</v-flex>
<v-flex xs12 sm6 md3 pa-2 class="p-month-select">
</v-col>
<v-col cols="12" sm="6" md="3" class="pa-2 p-month-select">
<v-select
:value="filter.month"
:label="$gettext('Month')"
@ -198,8 +198,8 @@
"
>
</v-select>
</v-flex>
<!-- v-flex xs12 sm6 md3 pa-2 class="p-lens-select">
</v-col>
<!-- v-col cols="12" sm="6" md="3" class="pa-2 p-lens-select">
<v-select @change="dropdownChange"
:label="labels.lens"
flat solo hide-details
@ -210,8 +210,8 @@
v-model="filter.lens"
:items="lensOptions">
</v-select>
</v-flex -->
<v-flex xs12 sm6 md3 pa-2 class="p-color-select">
</v-col -->
<v-col cols="12" sm="6" md="3" class="pa-2 p-color-select">
<v-select
:value="filter.color"
:label="$gettext('Color')"
@ -231,8 +231,8 @@
"
>
</v-select>
</v-flex>
<v-flex xs12 sm6 md3 pa-2 class="p-category-select">
</v-col>
<v-col cols="12" sm="6" md="3" class="pa-2 p-category-select">
<v-select
:value="filter.label"
:label="$gettext('Category')"
@ -252,8 +252,8 @@
"
>
</v-select>
</v-flex>
</v-layout>
</v-col>
</v-row>
</v-card-text>
</v-card>
<p-photo-delete-dialog :show="dialog.delete" :text="$gettext('Are you sure you want to delete all archived pictures?')" :action="$gettext('Delete All')" @cancel="dialog.delete = false" @confirm="batchDelete">

2
frontend/src/css/app.css
View file

@ -180,7 +180,7 @@ ol, ul {
padding: 1px 0 1px 8px !important;
}
body #photoprism .v-list__tile .v-icon {
body #photoprism .v-list__item .v-icon {
color: inherit;
}

10
frontend/src/css/navigation.css
View file

@ -4,11 +4,11 @@
z-index: 10;
}
nav .v-list__tile__title.title {
nav .v-list__item__title.title {
line-height: normal!important;
}
.v-navigation-drawer>.theme--dark.v-list .v-list__tile__sub-title {
.v-navigation-drawer>.theme--dark.v-list .v-list__item__sub-title {
color: #ffffff77;
}
@ -44,7 +44,7 @@ nav .v-list__tile__title.title {
}
#p-navigation .menu-item.--rtl {
/* Margin title from right 72px, the calc is the 72px minus the original "v-list-tile" right margin 16px */
/* Margin title from right 72px, the calc is the 72px minus the original "v-list-item" right margin 16px */
margin-right: calc(72px - 16px);
}
@ -85,7 +85,7 @@ nav .v-list__tile__title.title {
color: #000;
}
#app.small-screen.show-nav main div.v-content__wrap {
#app.small-screen.show-nav main div.v-main__wrap {
padding-top: 48px;
}
@ -158,7 +158,7 @@ nav .v-list__tile__title.title {
margin-right: 0;
}
#photoprism .nav-logo .v-list__tile__action {
#photoprism .nav-logo .v-list__item__action {
min-width: 35px;
}

10
frontend/src/css/themes/abyss.css
View file

@ -1,10 +1,10 @@
/* Abyss Theme */
body.dark-theme.theme-abyss,
.theme-abyss .v-content__wrap,
.theme-abyss .v-main__wrap,
.theme-abyss .p-page,
.theme-abyss .form,
.theme-abyss .v-content {
.theme-abyss .v-main {
background: #202020 !important;
}
@ -52,7 +52,7 @@ body.dark-theme.theme-abyss,
#photoprism.theme-abyss,
#photoprism.theme-abyss .p-page a,
#photoprism.theme-abyss .v-datatable a,
#photoprism.theme-abyss .theme--light.v-expansion-panel .v-expansion-panel__container,
#photoprism.theme-abyss .theme--light.v-expansion-panels .v-expansion-panel__container,
#photoprism.theme-abyss .theme--light.v-tabs__bar .v-tabs__div,
#photoprism.theme-abyss .theme--light {
color: #fff;
@ -70,7 +70,7 @@ body.dark-theme.theme-abyss,
color: #eee;
}
#photoprism.theme-abyss .theme--light.v-list .v-list__tile__sub-title,
#photoprism.theme-abyss .theme--light.v-list .v-list__item__sub-title,
#photoprism.theme-abyss .accent--text {
color: #643da9 !important;
}
@ -86,7 +86,7 @@ body.dark-theme.theme-abyss,
color: #999 !important;
}
#photoprism.theme-abyss .theme--light.v-list .v-list__tile__mask {
#photoprism.theme-abyss .theme--light.v-list .v-list__item__mask {
color: #cccccc;
background: transparent;
}

8
frontend/src/css/themes/carbon.css
View file

@ -1,10 +1,10 @@
/* Carbon Dark Theme */
body.dark-theme.theme-carbon,
.theme-carbon .v-content__wrap,
.theme-carbon .v-main__wrap,
.theme-carbon .p-page,
.theme-carbon .form,
.theme-carbon .v-content {
.theme-carbon .v-main {
background: #16141c !important;
}
@ -69,7 +69,7 @@ body.dark-theme.theme-carbon,
color: #ffffff !important;
}
#photoprism.theme-carbon .theme--light.v-list .v-list__tile__sub-title,
#photoprism.theme-carbon .theme--light.v-list .v-list__item__sub-title,
#photoprism.theme-carbon .accent--text {
color: #D3CBFF !important;
}
@ -85,7 +85,7 @@ body.dark-theme.theme-carbon,
color: #999 !important;
}
#photoprism.theme-carbon .theme--light.v-list .v-list__tile__mask {
#photoprism.theme-carbon .theme--light.v-list .v-list__item__mask {
color: #cccccc;
background: transparent;
}

10
frontend/src/css/themes/chrome.css
View file

@ -1,10 +1,10 @@
/* Chrome Dark Theme */
body.dark-theme.theme-chrome,
.theme-chrome .v-content__wrap,
.theme-chrome .v-main__wrap,
.theme-chrome .p-page,
.theme-chrome .form,
.theme-chrome .v-content {
.theme-chrome .v-main {
background: #1d1d1d !important;
}
@ -25,7 +25,7 @@ body.dark-theme.theme-chrome,
body.dark-theme #photoprism.theme-chrome,
body.dark-theme #photoprism.theme-chrome .v-datatable a,
body.dark-theme #photoprism.theme-chrome .theme--light.v-expansion-panel .v-expansion-panel__container,
body.dark-theme #photoprism.theme-chrome .theme--light.v-expansion-panels .v-expansion-panel__container,
body.dark-theme #photoprism.theme-chrome .theme--light.v-tabs__bar .v-tabs__div {
color: #ffffff;
caret-color: #ffffff;
@ -110,7 +110,7 @@ body.dark-theme #photoprism.theme-chrome .v-card .theme--light.v-text-field--box
color: #ffffff !important;
}
#photoprism.theme-chrome .theme--light.v-list .v-list__tile__sub-title,
#photoprism.theme-chrome .theme--light.v-list .v-list__item__sub-title,
#photoprism.theme-chrome .accent--text {
color: #ffffff !important;
}
@ -126,7 +126,7 @@ body.dark-theme #photoprism.theme-chrome .v-card .theme--light.v-text-field--box
color: #999 !important;
}
#photoprism.theme-chrome .theme--light.v-list .v-list__tile__mask {
#photoprism.theme-chrome .theme--light.v-list .v-list__item__mask {
color: #cccccc;
background: transparent;
}

16
frontend/src/css/themes/default.css
View file

@ -12,7 +12,7 @@ body.dark-theme #photoprism .v-table .theme--light.v-text-field--solo>.v-input__
background: transparent;
}
body.dark-theme .theme--light.v-list .v-list__tile--highlighted,
body.dark-theme .theme--light.v-list .v-list__item--highlighted,
body.dark-theme .theme--light.v-list a:hover {
background: rgba(255,255,255,0.3) !important;
}
@ -29,7 +29,7 @@ body.dark-theme .theme--light.v-table tbody tr:hover {
background: #343434;
}
.theme--light.v-list .v-list__tile--highlighted,
.theme--light.v-list .v-list__item--highlighted,
.theme--light.v-list a:hover {
background: rgba(155,155,155,0.3) !important;
}
@ -47,7 +47,7 @@ body.dark-theme #photoprism .v-card .theme--light.v-text-field--box>.v-input__co
body.dark-theme #photoprism,
body.dark-theme #photoprism .p-page a,
body.dark-theme #photoprism .v-datatable a,
body.dark-theme #photoprism .theme--light.v-expansion-panel .v-expansion-panel__container,
body.dark-theme #photoprism .theme--light.v-expansion-panels .v-expansion-panel__container,
body.dark-theme #photoprism .theme--light.v-tabs__bar .v-tabs__div,
body.dark-theme #photoprism .theme--light {
color: #ffffff;
@ -86,7 +86,7 @@ body.dark-theme #photoprism .v-card .theme--light.v-text-field--box>.v-input__co
body.dark-theme #photoprism,
body.dark-theme #photoprism .p-page a,
body.dark-theme #photoprism .v-datatable a,
body.dark-theme #photoprism .theme--light.v-expansion-panel .v-expansion-panel__container,
body.dark-theme #photoprism .theme--light.v-expansion-panels .v-expansion-panel__container,
body.dark-theme #photoprism .theme--light.v-tabs__bar .v-tabs__div,
body.dark-theme #photoprism .theme--light,
body.dark-theme #photoprism .theme--light.v-table thead th,
@ -114,10 +114,10 @@ body.dark-theme #photoprism .v-tabs .v-badge__badge {
/* Default Theme */
body.dark-theme.theme-default,
.theme-default .v-content__wrap,
.theme-default .v-main__wrap,
.theme-default .p-page,
.theme-default .form,
.theme-default .v-content {
.theme-default .v-main {
background: #2f3031 !important;
}
@ -183,7 +183,7 @@ body.dark-theme.theme-default,
color: #f6f7e8 !important;
}
#photoprism.theme-default .theme--light.v-list .v-list__tile__sub-title,
#photoprism.theme-default .theme--light.v-list .v-list__item__sub-title,
#photoprism.theme-default .accent--text {
color: #8F4FE3 !important;
}
@ -199,7 +199,7 @@ body.dark-theme.theme-default,
color: #999 !important;
}
#photoprism.theme-default .theme--light.v-list .v-list__tile__mask {
#photoprism.theme-default .theme--light.v-list .v-list__item__mask {
color: #cccccc;
background: transparent;
}

10
frontend/src/css/themes/gemstone.css
View file

@ -1,10 +1,10 @@
/* Gemstone Dark Theme */
body.dark-theme.theme-gemstone,
.theme-gemstone .v-content__wrap,
.theme-gemstone .v-main__wrap,
.theme-gemstone .p-page,
.theme-gemstone .form,
.theme-gemstone .v-content {
.theme-gemstone .v-main {
background: #2f2f31 !important;
}
@ -70,7 +70,7 @@ body.dark-theme.theme-gemstone,
#photoprism.theme-gemstone,
#photoprism.theme-gemstone .p-page a,
#photoprism.theme-gemstone .v-datatable a,
#photoprism.theme-gemstone .theme--light.v-expansion-panel .v-expansion-panel__container,
#photoprism.theme-gemstone .theme--light.v-expansion-panels .v-expansion-panel__container,
#photoprism.theme-gemstone .theme--light.v-tabs__bar .v-tabs__div,
#photoprism.theme-gemstone .theme--light {
color: #fff;
@ -88,7 +88,7 @@ body.dark-theme.theme-gemstone,
color: #eee;
}
#photoprism.theme-gemstone .theme--light.v-list .v-list__tile__sub-title,
#photoprism.theme-gemstone .theme--light.v-list .v-list__item__sub-title,
#photoprism.theme-gemstone .accent--text {
color: #BABEDC !important;
}
@ -104,7 +104,7 @@ body.dark-theme.theme-gemstone,
color: #999 !important;
}
#photoprism.theme-gemstone .theme--light.v-list .v-list__tile__mask {
#photoprism.theme-gemstone .theme--light.v-list .v-list__item__mask {
color: #cccccc;
background: transparent;
}

10
frontend/src/css/themes/grayscale.css
View file

@ -17,10 +17,10 @@ body.dark-theme.theme-grayscale {
stroke: rgba(200, 189, 177, 0.3);
}
.theme-grayscale .v-content__wrap,
.theme-grayscale .v-main__wrap,
.theme-grayscale .p-page,
.theme-grayscale .form,
.theme-grayscale .v-content {
.theme-grayscale .v-main {
background: #525252 !important;
}
@ -71,7 +71,7 @@ body.dark-theme.theme-grayscale {
#photoprism.theme-grayscale,
#photoprism.theme-grayscale .p-page a,
#photoprism.theme-grayscale .v-datatable a,
#photoprism.theme-grayscale .theme--light.v-expansion-panel .v-expansion-panel__container,
#photoprism.theme-grayscale .theme--light.v-expansion-panels .v-expansion-panel__container,
#photoprism.theme-grayscale .theme--light.v-tabs__bar .v-tabs__div,
#photoprism.theme-grayscale .theme--light {
color: #fff;
@ -89,7 +89,7 @@ body.dark-theme.theme-grayscale {
color: #e3d5c3;
}
#photoprism.theme-grayscale .theme--light.v-list .v-list__tile__sub-title,
#photoprism.theme-grayscale .theme--light.v-list .v-list__item__sub-title,
#photoprism.theme-grayscale .accent--text {
color: #e3d5c3 !important;
}
@ -105,7 +105,7 @@ body.dark-theme.theme-grayscale {
color: #999 !important;
}
#photoprism.theme-grayscale .theme--light.v-list .v-list__tile__mask {
#photoprism.theme-grayscale .theme--light.v-list .v-list__item__mask {
color: #cccccc;
background: transparent;
}

4
frontend/src/css/themes/lavender.css
View file

@ -1,10 +1,10 @@
/* Lavender Theme */
body.dark-theme.theme-lavender,
.theme-lavender .v-content__wrap,
.theme-lavender .v-main__wrap,
.theme-lavender .p-page,
.theme-lavender .form,
.theme-lavender .v-content {
.theme-lavender .v-main {
background: #fafafa !important;
}

8
frontend/src/css/themes/mint.css
View file

@ -1,10 +1,10 @@
/* Mint Dark Theme */
body.dark-theme.theme-mint,
.theme-mint .v-content__wrap,
.theme-mint .v-main__wrap,
.theme-mint .p-page,
.theme-mint .form,
.theme-mint .v-content {
.theme-mint .v-main {
background: #121212 !important;
}
@ -56,7 +56,7 @@ body.dark-theme.theme-mint,
color: #f6f7e8 !important;
}
#photoprism.theme-mint .theme--light.v-list .v-list__tile__sub-title,
#photoprism.theme-mint .theme--light.v-list .v-list__item__sub-title,
#photoprism.theme-mint .accent--text {
color: #2bb14c !important;
}
@ -72,7 +72,7 @@ body.dark-theme.theme-mint,
color: #999 !important;
}
#photoprism.theme-mint .theme--light.v-list .v-list__tile__mask {
#photoprism.theme-mint .theme--light.v-list .v-list__item__mask {
color: #cccccc;
background: transparent;
}

10
frontend/src/css/themes/neon.css
View file

@ -10,10 +10,10 @@
}
body.dark-theme.theme-neon,
.theme-neon .v-content__wrap,
.theme-neon .v-main__wrap,
.theme-neon .p-page,
.theme-neon .form,
.theme-neon .v-content {
.theme-neon .v-main {
background: #242326 !important;
}
@ -61,7 +61,7 @@ body.dark-theme.theme-neon,
#photoprism.theme-neon,
#photoprism.theme-neon .p-page a,
#photoprism.theme-neon .v-datatable a,
#photoprism.theme-neon .theme--light.v-expansion-panel .v-expansion-panel__container,
#photoprism.theme-neon .theme--light.v-expansion-panels .v-expansion-panel__container,
#photoprism.theme-neon .theme--light.v-tabs__bar .v-tabs__div,
#photoprism.theme-neon .theme--light {
color: #fff;
@ -79,7 +79,7 @@ body.dark-theme.theme-neon,
color: #eee;
}
#photoprism.theme-neon .theme--light.v-list .v-list__tile__sub-title,
#photoprism.theme-neon .theme--light.v-list .v-list__item__sub-title,
#photoprism.theme-neon .accent--text {
color: #d532d2 !important;
}
@ -95,7 +95,7 @@ body.dark-theme.theme-neon,
color: #999 !important;
}
#photoprism.theme-neon .theme--light.v-list .v-list__tile__mask {
#photoprism.theme-neon .theme--light.v-list .v-list__item__mask {
color: #cccccc;
background: transparent;
}

14
frontend/src/css/themes/nordic.css
View file

@ -4,7 +4,7 @@ body.theme-nordic #p-navigation.theme--dark,
body.theme-nordic #p-navigation .theme--dark.v-icon,
body.theme-nordic #p-navigation .theme--dark.v-list,
body.theme-nordic #p-navigation .theme--dark.v-toolbar,
#photoprism.theme-nordic .v-navigation-drawer>.theme--dark.v-list .v-list__tile__sub-title,
#photoprism.theme-nordic .v-navigation-drawer>.theme--dark.v-list .v-list__item__sub-title,
body.theme-nordic .theme--light.application {
color: #4C566A;
}
@ -19,10 +19,10 @@ body.theme-nordic #p-navigation .navigation-home.theme--dark .nav-logo {
}
body.theme-nordic,
.theme-nordic .v-content__wrap,
.theme-nordic .v-main__wrap,
.theme-nordic .p-page,
.theme-nordic .form,
.theme-nordic .v-content {
.theme-nordic .v-main {
background: #f7f8fa !important;
}
@ -51,7 +51,7 @@ body.theme-nordic,
}
#photoprism.theme-nordic .theme--dark.v-toolbar,
#photoprism.theme-nordic .v-list__tile.theme--dark,
#photoprism.theme-nordic .v-list__item.theme--dark,
#photoprism.theme-nordic .theme--dark.v-toolbar .v-icon,
#photoprism.theme-nordic .theme--light.v-table thead th,
#photoprism.theme-nordic .theme--light.v-table tbody td {
@ -91,7 +91,7 @@ body.theme-nordic,
#photoprism.theme-nordic,
#photoprism.theme-nordic .p-page a,
#photoprism.theme-nordic .v-datatable a,
#photoprism.theme-nordic .theme--light.v-expansion-panel .v-expansion-panel__container,
#photoprism.theme-nordic .theme--light.v-expansion-panels .v-expansion-panel__container,
#photoprism.theme-nordic .theme--light.v-tabs__bar .v-tabs__div,
#photoprism.theme-nordic .theme--light {
color: #333333;
@ -109,7 +109,7 @@ body.theme-nordic,
color: #4C566A;
}
#photoprism.theme-nordic .theme--light.v-list .v-list__tile__sub-title,
#photoprism.theme-nordic .theme--light.v-list .v-list__item__sub-title,
#photoprism.theme-nordic .accent--text {
color: #326f80 !important;
}
@ -125,7 +125,7 @@ body.theme-nordic,
color: #999 !important;
}
#photoprism.theme-nordic .theme--light.v-list .v-list__tile__mask {
#photoprism.theme-nordic .theme--light.v-list .v-list__item__mask {
color: #cccccc;
background: transparent;
}

10
frontend/src/css/themes/shadow.css
View file

@ -17,10 +17,10 @@ body.dark-theme.theme-shadow {
stroke: rgba(196, 241, 229, 0.3);
}
.theme-shadow .v-content__wrap,
.theme-shadow .v-main__wrap,
.theme-shadow .p-page,
.theme-shadow .form,
.theme-shadow .v-content {
.theme-shadow .v-main {
background: #444 !important;
}
@ -71,7 +71,7 @@ body.dark-theme.theme-shadow {
#photoprism.theme-shadow,
#photoprism.theme-shadow .p-page a,
#photoprism.theme-shadow .v-datatable a,
#photoprism.theme-shadow .theme--light.v-expansion-panel .v-expansion-panel__container,
#photoprism.theme-shadow .theme--light.v-expansion-panels .v-expansion-panel__container,
#photoprism.theme-shadow .theme--light.v-tabs__bar .v-tabs__div,
#photoprism.theme-shadow .theme--light {
color: #fff;
@ -89,7 +89,7 @@ body.dark-theme.theme-shadow {
color: #eee;
}
#photoprism.theme-shadow .theme--light.v-list .v-list__tile__sub-title,
#photoprism.theme-shadow .theme--light.v-list .v-list__item__sub-title,
#photoprism.theme-shadow .accent--text {
color: #c4f1e5 !important;
}
@ -105,7 +105,7 @@ body.dark-theme.theme-shadow {
color: #999 !important;
}
#photoprism.theme-shadow .theme--light.v-list .v-list__tile__mask {
#photoprism.theme-shadow .theme--light.v-list .v-list__item__mask {
color: #cccccc;
background: transparent;
}

10
frontend/src/css/themes/vanta.css
View file

@ -17,10 +17,10 @@ body.dark-theme.theme-vanta {
stroke: rgba(5, 221, 225, 0.3);
}
.theme-vanta .v-content__wrap,
.theme-vanta .v-main__wrap,
.theme-vanta .p-page,
.theme-vanta .form,
.theme-vanta .v-content {
.theme-vanta .v-main {
background: #212121 !important;
}
@ -71,7 +71,7 @@ body.dark-theme.theme-vanta {
#photoprism.theme-vanta,
#photoprism.theme-vanta .p-page a,
#photoprism.theme-vanta .v-datatable a,
#photoprism.theme-vanta .theme--light.v-expansion-panel .v-expansion-panel__container,
#photoprism.theme-vanta .theme--light.v-expansion-panels .v-expansion-panel__container,
#photoprism.theme-vanta .theme--light.v-tabs__bar .v-tabs__div,
#photoprism.theme-vanta .theme--light {
color: #fff;
@ -89,7 +89,7 @@ body.dark-theme.theme-vanta {
color: #eee;
}
#photoprism.theme-vanta .theme--light.v-list .v-list__tile__sub-title,
#photoprism.theme-vanta .theme--light.v-list .v-list__item__sub-title,
#photoprism.theme-vanta .accent--text {
color: #05dde1 !important;
}
@ -105,7 +105,7 @@ body.dark-theme.theme-vanta {
color: #999 !important;
}
#photoprism.theme-vanta .theme--light.v-list .v-list__tile__mask {
#photoprism.theme-vanta .theme--light.v-list .v-list__item__mask {
color: #cccccc;
background: transparent;
}

10
frontend/src/css/themes/yellowstone.css
View file

@ -1,10 +1,10 @@
/* Yellowstone Dark Theme */
body.dark-theme.theme-yellowstone,
.theme-yellowstone .v-content__wrap,
.theme-yellowstone .v-main__wrap,
.theme-yellowstone .p-page,
.theme-yellowstone .form,
.theme-yellowstone .v-content {
.theme-yellowstone .v-main {
background: #32312f !important;
}
@ -65,7 +65,7 @@ body.dark-theme.theme-yellowstone,
#photoprism.theme-yellowstone,
#photoprism.theme-yellowstone .p-page a,
#photoprism.theme-yellowstone .v-datatable a,
#photoprism.theme-yellowstone .theme--light.v-expansion-panel .v-expansion-panel__container,
#photoprism.theme-yellowstone .theme--light.v-expansion-panels .v-expansion-panel__container,
#photoprism.theme-yellowstone .theme--light.v-tabs__bar .v-tabs__div,
#photoprism.theme-yellowstone .theme--light {
color: #fff;
@ -83,7 +83,7 @@ body.dark-theme.theme-yellowstone,
color: #eee;
}
#photoprism.theme-yellowstone .theme--light.v-list .v-list__tile__sub-title,
#photoprism.theme-yellowstone .theme--light.v-list .v-list__item__sub-title,
#photoprism.theme-yellowstone .accent--text {
color: #ffb700 !important;
}
@ -99,7 +99,7 @@ body.dark-theme.theme-yellowstone,
color: #999 !important;
}
#photoprism.theme-yellowstone .theme--light.v-list .v-list__tile__mask {
#photoprism.theme-yellowstone .theme--light.v-list .v-list__item__mask {
color: #cccccc;
background: transparent;
}

117
frontend/src/dialog/account/apps.vue
View file

@ -1,29 +1,29 @@
<template>
<v-dialog :value="show" lazy persistent max-width="610" class="modal-dialog p-account-apps-dialog" @keydown.esc="close">
<v-dialog :value="show" persistent max-width="610" class="modal-dialog p-account-apps-dialog" @keydown.esc="close">
<v-form ref="form" lazy-validation dense class="form-password" accept-charset="UTF-8" @submit.prevent>
<v-card raised elevation="24">
<v-card-title primary-title class="pa-2">
<v-layout row wrap class="pa-2">
<v-flex xs9 class="text-xs-left">
<v-row class="pa-2">
<v-col cols="9" class="text-xs-left">
<h3 class="headline pa-0">
<translate>Apps and Devices</translate>
</h3>
</v-flex>
<v-flex xs3 class="text-xs-right">
</v-col>
<v-col cols="3" class="text-xs-right">
<v-icon v-if="action === 'add'" size="28" color="primary">add</v-icon>
<v-icon v-else-if="action === 'copy'" size="28" color="primary">password</v-icon>
<v-icon v-else size="28" color="primary">devices</v-icon>
</v-flex>
</v-layout>
</v-col>
</v-row>
</v-card-title>
<!-- Confirm -->
<template v-if="confirmAction !== ''">
<v-card-text class="py-0 px-2">
<v-layout wrap align-top>
<v-flex xs12 class="pa-2 body-1">
<v-row align="start">
<v-col cols="12" class="pa-2 body-1">
<translate>Enter your password to confirm the action and continue:</translate>
</v-flex>
<v-flex xs12 class="pa-2">
</v-col>
<v-col cols="12" class="pa-2">
<v-text-field
v-model="password"
:disabled="busy"
@ -38,38 +38,37 @@
autocorrect="off"
autocapitalize="none"
autocomplete="current-password"
browser-autocomplete="current-password"
class="input-password text-selectable"
:append-icon="showPassword ? 'visibility' : 'visibility_off'"
:append-icon="showPassword ? 'mdi-eye' : 'mdi-eye-off'"
prepend-inner-icon="lock"
color="secondary-dark"
@click:append="showPassword = !showPassword"
@keyup.enter.native="onConfirm"
@keyup.enter="onConfirm"
></v-text-field>
</v-flex>
</v-layout>
</v-col>
</v-row>
</v-card-text>
<v-card-actions class="pa-2">
<v-layout row wrap class="pa-2">
<v-flex xs12 text-xs-right>
<v-row class="pa-2">
<v-col cols="12" class="text-xs-right">
<v-btn depressed color="secondary-light" class="action-back ml-0" @click.stop="onBack">
<translate>Back</translate>
</v-btn>
<v-btn depressed color="primary-button" :disabled="!password || password.length < 4" class="action-confirm white--text compact mr-0" @click.stop="onConfirm">
<translate>Continue</translate>
</v-btn>
</v-flex>
</v-layout>
</v-col>
</v-row>
</v-card-actions>
</template>
<!-- Copy -->
<template v-else-if="action === 'copy'">
<v-card-text class="py-0 px-2">
<v-layout wrap align-top>
<v-flex xs12 class="pa-2 body-1">
<v-row align="start">
<v-col cols="12" class="pa-2 body-1">
<translate>Please copy the following randomly generated app password and keep it in a safe place, as you will not be able to see it again:</translate>
</v-flex>
<v-flex xs12 class="pa-2">
</v-col>
<v-col cols="12" class="pa-2">
<v-text-field
v-model="appPassword"
type="text"
@ -80,18 +79,17 @@
autocorrect="off"
autocapitalize="none"
autocomplete="off"
browser-autocomplete="off"
append-icon="content_copy"
append-icon="mdi-content-copy"
class="input-app-password text-selectable"
color="secondary-dark"
@click:append="onCopyAppPassword"
></v-text-field>
</v-flex>
</v-layout>
</v-col>
</v-row>
</v-card-text>
<v-card-actions class="pa-2">
<v-layout row wrap class="pa-2">
<v-flex xs12 text-xs-right>
<v-row class="pa-2">
<v-col cols="12" class="text-xs-right">
<v-btn depressed color="secondary-light" class="action-close ml-0" @click.stop="close">
<translate>Close</translate>
</v-btn>
@ -101,18 +99,18 @@
<v-btn v-else depressed color="primary-button" class="action-copy white--text compact mr-0" @click.stop="onCopyAppPassword">
<translate>Copy</translate>
</v-btn>
</v-flex>
</v-layout>
</v-col>
</v-row>
</v-card-actions>
</template>
<!-- Add -->
<template v-else-if="action === 'add'">
<v-card-text class="py-0 px-2">
<v-layout wrap align-top>
<v-flex xs12 class="pa-2 body-1">
<v-row align="start">
<v-col cols="12" class="pa-2 body-1">
<translate>To generate a new app-specific password, please enter the name and authorization scope of the application and select an expiration date:</translate>
</v-flex>
<v-flex xs12 class="pa-2">
</v-col>
<v-col cols="12" class="pa-2">
<v-text-field
v-model="app.client_name"
:disabled="busy"
@ -122,42 +120,41 @@
required
autofocus
hide-details
box
filled
autocorrect="off"
autocapitalize="none"
autocomplete="off"
browser-autocomplete="off"
class="input-name text-selectable"
color="secondary-dark"
></v-text-field>
</v-flex>
<v-flex xs12 sm6 class="pa-2">
<v-select v-model="app.scope" hide-details box :disabled="busy" :items="auth.ScopeOptions()" :label="$gettext('Scope')" :menu-props="{ maxHeight: 346 }" color="secondary-dark" background-color="secondary-light" class="input-scope"></v-select>
</v-flex>
<v-flex xs12 sm6 class="pa-2">
<v-select v-model="app.expires_in" :disabled="busy" :label="$gettext('Expires')" browser-autocomplete="off" hide-details box flat color="secondary-dark" class="input-expires" item-text="text" item-value="value" :items="options.Expires()"></v-select>
</v-flex>
</v-layout>
</v-col>
<v-col cols="12" sm="6" class="pa-2">
<v-select v-model="app.scope" hide-details filled :disabled="busy" :items="auth.ScopeOptions()" :label="$gettext('Scope')" :menu-props="{ maxHeight: 346 }" color="secondary-dark" background-color="secondary-light" class="input-scope"></v-select>
</v-col>
<v-col cols="12" sm="6" class="pa-2">
<v-select v-model="app.expires_in" :disabled="busy" :label="$gettext('Expires')" autocomplete="off" hide-details filled flat color="secondary-dark" class="input-expires" item-text="text" item-value="value" :items="options.Expires()"></v-select>
</v-col>
</v-row>
</v-card-text>
<v-card-actions class="pa-2">
<v-layout row wrap class="pa-2">
<v-flex xs12 text-xs-right>
<v-row class="pa-2">
<v-col cols="12" class="text-xs-right">
<v-btn depressed color="secondary-light" class="action-cancel ml-0" @click.stop="onCancel">
<translate>Cancel</translate>
</v-btn>
<v-btn depressed color="primary-button" :disabled="app.client_name === '' || app.scope === ''" class="action-generate white--text compact mr-0" @click.stop="onGenerate">
<translate>Generate</translate>
</v-btn>
</v-flex>
</v-layout>
</v-col>
</v-row>
</v-card-actions>
</template>
<!-- Apps -->
<template v-else>
<v-card-text class="py-0 px-2">
<v-layout wrap align-top>
<v-flex xs12 class="pa-2">
<v-data-table v-model="selected" :headers="listColumns" :items="results" hide-actions disable-initial-sort class="elevation-0 user-results list-view" item-key="ID" :no-data-text="$gettext('Nothing was found.')">
<v-row align="start">
<v-col cols="12" class="pa-2">
<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 #items="props">
<tr :data-name="props.item.ClientName">
<td class="text-selectable text-xs-left">
@ -173,27 +170,27 @@
{{ formatDate(props.item.Expires) }}
</td>
<td class="text-xs-right" nowrap>
<v-btn icon small flat :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">delete</v-icon>
</v-btn>
</td>
</tr>
</template>
</v-data-table>
</v-flex>
</v-layout>
</v-col>
</v-row>
</v-card-text>
<v-card-actions class="pa-2">
<v-layout row wrap class="pa-2">
<v-flex xs12 text-xs-right>
<v-row class="pa-2">
<v-col cols="12" class="text-xs-right">
<v-btn depressed color="secondary-light" class="action-close ml-0" @click.stop="close">
<translate>Close</translate>
</v-btn>
<v-btn depressed color="primary-button" class="action-add white--text compact mr-0" @click.stop="onAdd">
<translate>Add</translate>
</v-btn>
</v-flex>
</v-layout>
</v-col>
</v-row>
</v-card-actions>
</template>
</v-card>

197
frontend/src/dialog/account/passcode.vue
View file

@ -1,29 +1,29 @@
<template>
<v-dialog :value="show" lazy persistent max-width="500" class="modal-dialog p-account-passcode-dialog" @keydown.esc="close">
<v-dialog :value="show" persistent max-width="500" class="modal-dialog p-account-passcode-dialog" @keydown.esc="close">
<v-form ref="form" lazy-validation dense accept-charset="UTF-8" class="form-password" @submit.prevent>
<v-card raised elevation="24">
<v-card-title primary-title class="pa-2">
<v-layout row wrap class="pa-2">
<v-flex xs10 class="text-xs-left">
<v-row class="pa-2">
<v-col cols="10" class="text-xs-left">
<h3 class="headline pa-0">
<translate>2-Factor Authentication</translate>
</h3>
</v-flex>
<v-flex xs2 class="text-xs-right">
</v-col>
<v-col cols="2" class="text-xs-right">
<v-icon v-if="page === 'setup'" size="28" color="primary">gpp_maybe</v-icon>
<v-icon v-else-if="page === 'deactivate'" size="28" color="primary">gpp_good</v-icon>
<v-icon v-else size="28" color="primary">settings</v-icon>
</v-flex>
</v-layout>
</v-col>
</v-row>
</v-card-title>
<!-- Setup -->
<template v-if="page === 'setup'">
<v-card-text class="py-0 px-2">
<v-layout wrap align-top>
<v-flex xs12 class="pa-2 body-2">
<v-row align="start">
<v-col cols="12" class="pa-2 body-2">
<translate>After entering your password for confirmation, you can set up two-factor authentication with a compatible authenticator app or device:</translate>
</v-flex>
<v-flex xs12 class="pa-2">
</v-col>
<v-col cols="12" class="pa-2">
<v-text-field
v-model="password"
:disabled="busy"
@ -38,93 +38,94 @@
autocorrect="off"
autocapitalize="none"
autocomplete="current-password"
browser-autocomplete="current-password"
class="input-password text-selectable"
:append-icon="showPassword ? 'visibility' : 'visibility_off'"
:append-icon="showPassword ? 'mdi-eye' : 'mdi-eye-off'"
prepend-inner-icon="lock"
color="secondary-dark"
@click:append="showPassword = !showPassword"
@keyup.enter.native="onSetup"
@keyup.enter="onSetup"
></v-text-field>
</v-flex>
</v-layout>
<v-flex xs12 class="pa-2 body-1">
<translate>Enabling two-factor authentication means that you will need a randomly generated verification code to log in, so even if someone gains access to your password, they will not be able to access your account.</translate>
</v-flex>
</v-col>
</v-row>
<v-row>
<v-col cols="12" class="pa-2 body-1">
<translate>Enabling two-factor authentication means that you will need a randomly generated verification code to log in, so even if someone gains access to your password, they will not be able to access your account.</translate>
</v-col>
</v-row>
</v-card-text>
<v-card-actions class="pa-2">
<v-layout row wrap class="pa-2">
<v-flex xs12 text-xs-right>
<v-row class="pa-2">
<v-col cols="12" class="text-xs-right">
<v-btn depressed color="secondary-light" class="action-close ml-0" @click.stop="close">
<translate>Close</translate>
</v-btn>
<v-btn depressed color="primary-button" class="action-setup white--text compact mr-0" :disabled="setupDisabled()" @click.stop="onSetup">
<translate>Setup</translate>
</v-btn>
</v-flex>
</v-layout>
</v-col>
</v-row>
</v-card-actions>
</template>
<!-- Confirm -->
<template v-else-if="page === 'confirm'">
<v-card-text class="py-0 px-2">
<v-layout wrap align-top>
<v-flex xs12 class="pa-2 body-1">
<v-row align="start">
<v-col cols="12" class="pa-2 body-1">
<translate>Scan the QR code with your authenticator app or use the setup key shown below and then enter the generated verification code:</translate>
</v-flex>
<v-flex xs12 class="pa-2">
</v-col>
<v-col cols="12" class="pa-2">
<img :src="key.QRCode" class="width-100" alt="QR Code" />
</v-flex>
</v-layout>
<v-flex xs12 class="pa-2 subheading text-xs-center">
<pre class="clickable" @click.stop.prevent="copyText(key.Secret)">{{ key.Secret }}</pre>
</v-flex>
<v-flex xs12 class="pa-2">
<v-text-field
v-model="code"
:disabled="busy"
name="one-time-code"
type="text"
:label="$gettext('Verification Code')"
mask="### ###"
pattern="[0-9]*"
inputmode="numeric"
hide-details
required
solo
flat
autocorrect="off"
autocapitalize="none"
autocomplete="one-time-code"
browser-autocomplete="one-time-code"
class="input-code"
color="secondary-dark"
prepend-inner-icon="verified_user"
@keyup.enter.native="onConfirm"
></v-text-field>
</v-flex>
</v-col>
</v-row>
<v-row>
<v-col cols="12" class="pa-2 subtitle-1 text-xs-center">
<pre class="clickable" @click.stop.prevent="copyText(key.Secret)">{{ key.Secret }}</pre>
</v-col>
<v-col cols="12" class="pa-2">
<v-text-field
v-model="code"
:disabled="busy"
name="one-time-code"
type="text"
:label="$gettext('Verification Code')"
mask="### ###"
pattern="[0-9]*"
inputmode="numeric"
hide-details
required
solo
autocorrect="off"
autocapitalize="none"
autocomplete="one-time-code"
class="input-code"
color="secondary-dark"
prepend-inner-icon="verified_user"
@keyup.enter="onConfirm"
></v-text-field>
</v-col>
</v-row>
</v-card-text>
<v-card-actions class="pa-2">
<v-layout row wrap class="pa-2">
<v-flex xs12 text-xs-right>
<v-row class="pa-2">
<v-col cols="12" class="text-xs-right">
<v-btn depressed color="secondary-light" class="action-cancel ml-0" @click.stop="close">
<translate>Cancel</translate>
</v-btn>
<v-btn depressed color="primary-button" class="action-confirm white--text compact mr-0" :disabled="code.length !== 6" @click.stop="onConfirm">
<translate>Confirm</translate>
</v-btn>
</v-flex>
</v-layout>
</v-col>
</v-row>
</v-card-actions>
</template>
<!-- Activate -->
<template v-else-if="page === 'activate'">
<v-card-text class="py-0 px-2">
<v-layout wrap align-top>
<v-flex xs12 class="pa-2 body-2">
<v-row align="start">
<v-col cols="12" class="pa-2 body-2">
<translate>Use the following recovery code to access your account when you are unable to generate a valid verification code with your authenticator app:</translate>
</v-flex>
<v-flex xs12 class="pa-2">
</v-col>
<v-col cols="12" class="pa-2">
<v-text-field
v-model="key.RecoveryCode"
type="text"
@ -136,22 +137,21 @@
autocorrect="off"
autocapitalize="none"
autocomplete="off"
browser-autocomplete="off"
append-icon="content_copy"
append-icon="mdi-content-copy"
class="input-recoverycode"
color="secondary-dark"
@click:append="onCopyRecoveryCode"
></v-text-field>
</v-flex>
<v-flex xs12 class="pa-2 body-1">
</v-col>
<v-col cols="12" class="pa-2 body-1">
<translate>To avoid being locked out of your account, please download, print or copy this recovery code now and keep it in a safe place.</translate>
<translate>It is a one-time use code that will disable 2FA for your account when you use it.</translate>
</v-flex>
</v-layout>
</v-col>
</v-row>
</v-card-text>
<v-card-actions class="pa-2">
<v-layout row wrap class="pa-2">
<v-flex xs12 text-xs-right>
<v-row class="pa-2">
<v-col cols="12" class="text-xs-right">
<v-btn depressed color="secondary-light" class="action-cancel ml-0" @click.stop="close">
<translate>Cancel</translate>
</v-btn>
@ -161,25 +161,25 @@
<v-btn v-else depressed color="primary-button" class="action-copy white--text compact mr-0" @click.stop="onCopyRecoveryCode">
<translate>Copy</translate>
</v-btn>
</v-flex>
</v-layout>
</v-col>
</v-row>
</v-card-actions>
</template>
<!-- Deactivate -->
<template v-else-if="page === 'deactivate'">
<v-card-text class="py-0 px-2">
<v-layout wrap align-top>
<v-flex xs12 class="pa-2 body-2">
<v-row align="start">
<v-col cols="12" class="pa-2 body-2">
<translate>Two-factor authentication has been enabled for your account.</translate>
</v-flex>
<v-flex xs12 class="pa-2 body-1">
</v-col>
<v-col cols="12" class="pa-2 body-1">
<translate>If you lose access to your authenticator app or device, you can use your recovery code to regain access to your account.</translate>
<translate>It is a one-time use code that will disable 2FA for your account when you use it.</translate>
</v-flex>
<v-flex xs12 class="pa-2 body-1">
</v-col>
<v-col cols="12" class="pa-2 body-1">
<translate>To switch to a new authenticator app or device, first deactivate two-factor authentication and then reactivate it:</translate>
</v-flex>
<v-flex xs12 class="pa-2">
</v-col>
<v-col cols="12" class="pa-2">
<v-text-field
v-model="password"
:disabled="busy"
@ -192,48 +192,47 @@
autocorrect="off"
autocapitalize="none"
autocomplete="current-password"
browser-autocomplete="current-password"
:label="$gettext('Password')"
class="input-password text-selectable"
:append-icon="showPassword ? 'visibility' : 'visibility_off'"
:append-icon="showPassword ? 'mdi-eye' : 'mdi-eye-off'"
prepend-inner-icon="lock"
color="secondary-dark"
@click:append="showPassword = !showPassword"
@keyup.enter.native="onDeactivate"
@keyup.enter="onDeactivate"
></v-text-field>
</v-flex>
</v-layout>
</v-col>
</v-row>
</v-card-text>
<v-card-actions class="pa-2">
<v-layout row wrap class="pa-2">
<v-flex xs12 text-xs-right>
<v-row class="pa-2">
<v-col cols="12" class="text-xs-right">
<v-btn depressed color="primary-button" class="action-deactivate white--text compact ml-0" :disabled="setupDisabled()" @click.stop="onDeactivate">
<translate>Deactivate</translate>
</v-btn>
<v-btn depressed color="secondary-light" class="action-close mr-0" @click.stop="close">
<translate>Close</translate>
</v-btn>
</v-flex>
</v-layout>
</v-col>
</v-row>
</v-card-actions>
</template>
<!-- Not Available -->
<template v-else-if="page === 'not_available'">
<v-card-text class="py-0 px-2">
<v-layout wrap align-top>
<v-flex xs12 class="pa-2 body-2">
<v-row align="start">
<v-col cols="12" class="pa-2 body-2">
<translate>Only locally managed accounts can be set up for authentication with 2FA.</translate>
</v-flex>
</v-layout>
</v-col>
</v-row>
</v-card-text>
<v-card-actions class="pa-2">
<v-layout row wrap class="pa-2">
<v-flex xs12 text-xs-right>
<v-row class="pa-2">
<v-col cols="12" class="text-xs-right">
<v-btn depressed color="secondary-light" class="action-close mr-0" @click.stop="close">
<translate>Close</translate>
</v-btn>
</v-flex>
</v-layout>
</v-col>
</v-row>
</v-card-actions>
</template>
</v-card>

53
frontend/src/dialog/account/password.vue
View file

@ -1,51 +1,50 @@
<template>
<v-dialog :value="show" lazy persistent max-width="500" class="modal-dialog p-account-password-dialog" @keydown.esc="close">
<v-dialog :value="show" persistent max-width="500" class="modal-dialog p-account-password-dialog" @keydown.esc="close">
<v-form ref="form" dense class="form-password" accept-charset="UTF-8" @submit.prevent>
<v-card raised elevation="24">
<v-card-title primary-title class="pa-2">
<v-layout row wrap class="pa-2">
<v-flex xs9 class="text-xs-left">
<v-row class="pa-2">
<v-col cols="9" class="text-xs-left">
<h3 class="headline pa-0">
<translate>Change Password</translate>
</h3>
</v-flex>
<v-flex xs3 class="text-xs-right">
</v-col>
<v-col cols="3" class="text-xs-right">
<v-icon size="28" color="primary">lock</v-icon>
</v-flex>
</v-layout>
</v-col>
</v-row>
</v-card-title>
<v-card-text class="py-0 px-2">
<v-layout wrap align-top>
<v-flex v-if="oldRequired" xs12 class="px-2 pb-2 caption">
<v-row align="start">
<v-col v-if="oldRequired" cols="12" class="px-2 pb-2 caption">
<translate>Please note that changing your password will log you out on other devices and browsers.</translate>
</v-flex>
<v-flex v-if="oldRequired" xs12 class="px-2 py-1">
</v-col>
<v-col v-if="oldRequired" cols="12" class="px-2 py-1">
<v-text-field
v-model="oldPassword"
hide-details
required
box
filled
flat
type="password"
autocorrect="off"
autocapitalize="none"
autocomplete="current-password"
browser-autocomplete="current-password"
:disabled="busy"
:maxlength="maxLength"
:label="$gettext('Current Password')"
class="input-current-password"
color="secondary-dark"
></v-text-field>
</v-flex>
</v-col>
<v-flex xs12 class="px-2 py-1">
<v-col cols="12" class="px-2 py-1">
<v-text-field
v-model="newPassword"
required
counter
persistent-hint
box
filled
flat
type="password"
:disabled="busy"
@ -54,21 +53,20 @@
autocorrect="off"
autocapitalize="none"
autocomplete="new-password"
browser-autocomplete="new-password"
:label="$gettext('New Password')"
class="input-new-password"
color="secondary-dark"
:hint="$gettextInterpolate($gettext('Must have at least %{n} characters.'), { n: minLength })"
></v-text-field>
</v-flex>
</v-col>
<v-flex xs12 class="px-2 py-1">
<v-col cols="12" class="px-2 py-1">
<v-text-field
v-model="confirmPassword"
required
counter
persistent-hint
box
filled
flat
type="password"
:disabled="busy"
@ -77,27 +75,26 @@
autocorrect="off"
autocapitalize="none"
autocomplete="new-password"
browser-autocomplete="new-password"
:label="$gettext('Retype Password')"
class="input-retype-password"
color="secondary-dark"
:hint="$gettext('Please confirm your new password.')"
@keyup.enter.native="onConfirm"
@keyup.enter="onConfirm"
></v-text-field>
</v-flex>
</v-layout>
</v-col>
</v-row>
</v-card-text>
<v-card-actions class="pt-1 pb-2 px-2">
<v-layout row wrap class="pa-2">
<v-flex xs12 text-xs-right>
<v-row class="pa-2">
<v-col cols="12" class="text-xs-right">
<v-btn depressed color="secondary-light" class="action-cancel ml-0" @click.stop="close">
<translate>Cancel</translate>
</v-btn>
<v-btn depressed color="primary-button" class="action-confirm white--text compact mr-0" :disabled="isDisabled()" @click.stop="onConfirm">
<translate>Save</translate>
</v-btn>
</v-flex>
</v-layout>
</v-col>
</v-row>
</v-card-actions>
</v-card>
</v-form>

20
frontend/src/dialog/album/delete.vue
View file

@ -1,25 +1,25 @@
<template>
<v-dialog :value="show" lazy persistent max-width="350" class="p-album-delete-dialog" @keydown.esc="cancel">
<v-dialog :value="show" persistent max-width="350" class="p-album-delete-dialog" @keydown.esc="cancel">
<v-card raised elevation="24">
<v-container fluid class="pb-2 pr-2 pl-2">
<v-layout row wrap>
<v-flex xs3 text-xs-center>
<v-row>
<v-col cols="3" class="text-xs-center">
<v-icon size="54" color="secondary-dark lighten-1">delete_outline</v-icon>
</v-flex>
<v-flex xs9 text-xs-left align-self-center>
<div class="subheading pr-1">
</v-col>
<v-col cols="9" class="text-xs-left" align-self="center">
<div class="subtitle-1 pr-1">
<translate key="Are you sure you want to delete these albums?">Are you sure you want to delete these albums?</translate>
</div>
</v-flex>
<v-flex xs12 text-xs-right class="pt-3">
</v-col>
<v-col cols="12" class="text-xs-right pt-6">
<v-btn depressed color="secondary-light" class="action-cancel" @click.stop="cancel">
<translate key="Cancel">Cancel</translate>
</v-btn>
<v-btn color="primary-button" depressed dark class="action-confirm" @click.stop="confirm">
<translate key="Delete">Delete</translate>
</v-btn>
</v-flex>
</v-layout>
</v-col>
</v-row>
</v-container>
</v-card>
</v-dialog>

64
frontend/src/dialog/album/edit.vue
View file

@ -1,55 +1,57 @@
<template>
<v-dialog :value="show" lazy persistent max-width="500" class="dialog-album-edit" color="application" @keydown.esc="close">
<v-dialog :value="show" persistent max-width="500" class="dialog-album-edit" color="application" @keydown.esc="close">
<v-form ref="form" lazy-validation dense class="form-album-edit" accept-charset="UTF-8" @submit.prevent="confirm">
<v-card raised elevation="24">
<v-card-title primary-title class="pb-0">
<v-layout row wrap>
<v-flex xs12>
<v-row>
<v-col cols="12">
<h3 class="headline mx-2 mb-0">
<translate :translate-params="{ name: model.modelName() }">Edit %{name}</translate>
</h3>
</v-flex>
</v-layout>
</v-col>
</v-row>
</v-card-title>
<v-card-text>
<v-container fluid class="pa-0">
<v-layout row wrap>
<v-flex v-if="album.Type !== 'month'" xs12 pa-2>
<v-text-field v-model="model.Title" hide-details autofocus box flat :rules="[titleRule]" :label="$gettext('Name')" :disabled="disabled" color="secondary-dark" class="input-title" @keyup.enter.native="confirm"></v-text-field>
</v-flex>
<v-flex xs12 pa-2>
<v-text-field v-model="model.Location" hide-details box flat :label="$gettext('Location')" :disabled="disabled" color="secondary-dark" class="input-location"></v-text-field>
</v-flex>
<v-flex xs12 pa-2>
<v-textarea :key="growDesc" v-model="model.Description" auto-grow hide-details box flat browser-autocomplete="off" :label="$gettext('Description')" :rows="1" :disabled="disabled" class="input-description" color="secondary-dark"></v-textarea>
</v-flex>
<v-flex xs12 pa-2>
<v-combobox v-model="model.Category" hide-details box flat :search-input.sync="model.Category" :items="categories" :disabled="disabled" :label="$gettext('Category')" :allow-overflow="false" return-masked-value color="secondary-dark" class="input-category"></v-combobox>
</v-flex>
<v-flex xs12 sm6 pa-2>
<v-select v-model="model.Order" :label="$gettext('Sort Order')" :menu-props="{ maxHeight: 400 }" hide-details box flat :items="sorting" :disabled="disabled" item-value="value" item-text="text" color="secondary-dark"></v-select>
</v-flex>
<v-flex sm3 pa-2>
<v-row>
<v-col v-if="album.Type !== 'month'" cols="12" class="pa-2">
<v-text-field v-model="model.Title" hide-details autofocus filled flat :rules="[titleRule]" :label="$gettext('Name')" :disabled="disabled" color="secondary-dark" class="input-title" @keyup.enter="confirm"></v-text-field>
</v-col>
<v-col cols="12" class="pa-2">
<v-text-field v-model="model.Location" hide-details filled flat :label="$gettext('Location')" :disabled="disabled" color="secondary-dark" class="input-location"></v-text-field>
</v-col>
<v-col cols="12" class="pa-2">
<v-textarea :key="growDesc" v-model="model.Description" auto-grow hide-details filled flat autocomplete="off" :label="$gettext('Description')" :rows="1" :disabled="disabled" class="input-description" color="secondary-dark"></v-textarea>
</v-col>
<v-col cols="12" class="pa-2">
<!-- TODO: check property return-masked-value -->
<v-combobox v-model="model.Category" hide-details filled flat :search-input.sync="model.Category" :items="categories" :disabled="disabled" :label="$gettext('Category')" :allow-overflow="false" return-masked-value color="secondary-dark" class="input-category"></v-combobox>
</v-col>
<v-col cols="12" sm="6" class="pa-2">
<v-select v-model="model.Order" :label="$gettext('Sort Order')" :menu-props="{ maxHeight: 400 }" hide-details filled flat :items="sorting" :disabled="disabled" item-value="value" item-text="text" color="secondary-dark"></v-select>
</v-col>
<v-col sm="3" class="pa-2">
<!-- TODO: check property flat -->
<v-checkbox v-model="model.Favorite" :disabled="disabled" color="secondary-dark" :label="$gettext('Favorite')" hide-details flat> </v-checkbox>
</v-flex>
<v-flex v-if="experimental && featPrivate" sm3 pa-2>
</v-col>
<v-col v-if="experimental && featPrivate" sm="3" class="pa-2">
<v-checkbox v-model="model.Private" :disabled="disabled" color="secondary-dark" :label="$gettext('Private')" hide-details flat> </v-checkbox>
</v-flex>
</v-layout>
</v-col>
</v-row>
</v-container>
</v-card-text>
<v-card-actions class="pt-0 px-3">
<v-layout row wrap class="pa-2">
<v-flex xs12 text-xs-right>
<v-card-actions class="pt-0 px-6">
<v-row class="pa-2">
<v-col cols="12" class="text-xs-right">
<v-btn depressed color="secondary-light" class="action-cancel" @click.stop="close">
<translate>Cancel</translate>
</v-btn>
<v-btn depressed dark color="primary-button" class="action-confirm" :disabled="disabled" @click.stop="confirm">
<translate>Save</translate>
</v-btn>
</v-flex>
</v-layout>
</v-col>
</v-row>
</v-card-actions>
</v-card>
</v-form>

20
frontend/src/dialog/confirm.vue
View file

@ -1,25 +1,25 @@
<template>
<v-dialog :value="show" lazy persistent max-width="350" class="p-confirm-dialog" @keydown.esc="cancel">
<v-dialog :value="show" persistent max-width="350" class="p-confirm-dialog" @keydown.esc="cancel">
<v-card raised elevation="24">
<v-container fluid class="pb-2 pr-2 pl-2">
<v-layout row wrap>
<v-flex xs3 text-xs-center>
<v-row>
<v-col cols="3" class="text-xs-center">
<v-icon size="54" color="secondary-dark lighten-1">{{ icon }}</v-icon>
</v-flex>
<v-flex xs9 text-xs-left align-self-center>
<div class="subheading pr-1">
</v-col>
<v-col cols="9" class="text-xs-left" align-self="center">
<div class="subtitle-1 pr-1">
<translate>Are you sure?</translate>
</div>
</v-flex>
<v-flex xs12 text-xs-right class="pt-3">
</v-col>
<v-col cols="12" class="pt-6 text-xs-right">
<v-btn depressed color="secondary-light" class="action-cancel compact" @click.stop="cancel">
<translate key="Cancel">Cancel</translate>
</v-btn>
<v-btn color="primary-button" depressed dark class="action-confirm compact" @click.stop="confirm">
<translate key="Delete">Yes</translate>
</v-btn>
</v-flex>
</v-layout>
</v-col>
</v-row>
</v-container>
</v-card>
</v-dialog>

22
frontend/src/dialog/file/delete.vue
View file

@ -1,25 +1,25 @@
<template>
<v-dialog :value="show" lazy persistent max-width="350" class="p-file-delete-dialog" @keydown.esc="cancel">
<v-dialog :value="show" persistent max-width="350" class="p-file-delete-dialog" @keydown.esc="cancel">
<v-card raised elevation="24">
<v-container fluid class="pb-2 pr-2 pl-2">
<v-layout row wrap>
<v-flex xs3 text-xs-center>
<v-row>
<v-col cols="3" class="text-xs-center">
<v-icon size="54" color="secondary-dark lighten-1">delete_outline</v-icon>
</v-flex>
<v-flex xs9 text-xs-left align-self-center>
<div class="subheading pr-1">
</v-col>
<v-col cols="9" class="text-xs-left" align-self="center">
<div class="subtitle-1 pr-1">
<translate>Are you sure you want to permanently delete this file?</translate>
</div>
</v-flex>
<v-flex xs12 text-xs-right class="pt-3">
</v-col>
<v-col cols="12" class="text-xs-right pt-6">
<v-btn depressed color="secondary-light" class="action-cancel" @click.stop="cancel">
<translate key="Cancel">Cancel</translate>
</v-btn>
<v-btn color="primary-button" depressed dark compact class="action-confirm" @click.stop="confirm">
<v-btn color="primary-button" depressed dark class="action-confirm" @click.stop="confirm">
<translate key="Delete">Delete</translate>
</v-btn>
</v-flex>
</v-layout>
</v-col>
</v-row>
</v-container>
</v-card>
</v-dialog>

20
frontend/src/dialog/label/delete.vue
View file

@ -1,25 +1,25 @@
<template>
<v-dialog :value="show" lazy persistent max-width="350" class="p-label-delete-dialog" @keydown.esc="cancel">
<v-dialog :value="show" persistent max-width="350" class="p-label-delete-dialog" @keydown.esc="cancel">
<v-card raised elevation="24">
<v-container fluid class="pb-2 pr-2 pl-2">
<v-layout row wrap>
<v-flex xs3 text-xs-center>
<v-row>
<v-col cols="3" class="text-xs-center">
<v-icon size="54" color="secondary-dark lighten-1">delete_outline</v-icon>
</v-flex>
<v-flex xs9 text-xs-left align-self-center>
<div class="subheading pr-1">
</v-col>
<v-col cols="9" class="text-xs-left" align-self="center">
<div class="subtitle-1 pr-1">
<translate key="Are you sure you want to delete these labels?">Are you sure you want to delete these labels?</translate>
</div>
</v-flex>
<v-flex xs12 text-xs-right class="pt-3">
</v-col>
<v-col cols="12" class="text-xs-right pt-6">
<v-btn depressed color="secondary-light" class="action-cancel" @click.stop="cancel">
<translate key="Cancel">Cancel</translate>
</v-btn>
<v-btn color="primary-button" depressed dark class="action-confirm" @click.stop="confirm">
<translate key="Delete">Delete</translate>
</v-btn>
</v-flex>
</v-layout>
</v-col>
</v-row>
</v-container>
</v-card>
</v-dialog>

20
frontend/src/dialog/people/merge.vue
View file

@ -1,25 +1,25 @@
<template>
<v-dialog :value="show" lazy persistent max-width="350" class="p-people-merge-dialog" @keydown.esc="cancel">
<v-dialog :value="show" persistent max-width="350" class="p-people-merge-dialog" @keydown.esc="cancel">
<v-card raised elevation="24">
<v-container fluid class="pb-2 pr-2 pl-2">
<v-layout row wrap>
<v-flex xs3 text-xs-center>
<v-row>
<v-col cols="3" class="text-xs-center">
<v-icon size="54" color="secondary-dark lighten-1">people</v-icon>
</v-flex>
<v-flex xs9 text-xs-left align-self-center>
<div class="subheading pr-1">
</v-col>
<v-col cols="9" class="text-xs-left" align-self="center">
<div class="subtitle-1 pr-1">
{{ prompt }}
</div>
</v-flex>
<v-flex xs12 text-xs-right class="pt-3">
</v-col>
<v-col cols="12" class="text-xs-right pt-6">
<v-btn depressed color="secondary-light" class="action-cancel" @click.stop="cancel">
<translate key="No">No</translate>
</v-btn>
<v-btn color="primary-button" depressed dark class="action-confirm" @click.stop="confirm">
<translate key="Yes">Yes</translate>
</v-btn>
</v-flex>
</v-layout>
</v-col>
</v-row>
</v-container>
</v-card>
</v-dialog>

30
frontend/src/dialog/photo/album.vue
View file

@ -1,23 +1,23 @@
<template>
<v-dialog :value="show" lazy persistent max-width="356" class="p-photo-album-dialog" @keydown.esc="cancel">
<v-dialog :value="show" persistent max-width="356" class="p-photo-album-dialog" @keydown.esc="cancel">
<v-card raised elevation="24">
<v-card-text class="pt-3 px-3">
<v-layout row wrap>
<v-flex xs3 text-xs-left>
<v-card-text class="pt-6 px-6">
<v-row>
<v-col cols="3" class="text-xs-left">
<v-icon size="60" color="secondary-dark lighten-1">photo_album</v-icon>
</v-flex>
<v-flex xs9 text-xs-left align-self-center>
</v-col>
<v-col cols="9" class="text-xs-left" align-self="center">
<v-autocomplete
ref="input"
v-model="album"
browser-autocomplete="off"
autocomplete="off"
:hint="$gettext('Album Name')"
:items="items"
:search-input.sync="search"
:loading="loading"
hide-no-data
hide-details
box
filled
flat
item-text="Title"
item-value="UID"
@ -27,12 +27,12 @@
@keyup.enter.native="confirm"
>
</v-autocomplete>
</v-flex>
</v-layout>
</v-col>
</v-row>
</v-card-text>
<v-card-actions class="pt-0 pb-3 px-3">
<v-layout row wrap class="pa-0">
<v-flex xs12 text-xs-right>
<v-card-actions class="pt-0 pb-6 px-6">
<v-row class="pa-0">
<v-col cols="12" class="text-xs-right">
<v-btn depressed color="secondary-light" class="action-cancel mx-1" @click.stop="cancel">
<translate>Cancel</translate>
</v-btn>
@ -40,8 +40,8 @@
<span v-if="!album">{{ labels.createAlbum }}</span>
<span v-else>{{ labels.addToAlbum }}</span>
</v-btn>
</v-flex>
</v-layout>
</v-col>
</v-row>
</v-card-actions>
</v-card>
</v-dialog>

20
frontend/src/dialog/photo/archive.vue
View file

@ -1,25 +1,25 @@
<template>
<v-dialog :value="show" lazy persistent max-width="350" class="p-photo-archive-dialog" @keydown.esc="cancel">
<v-dialog :value="show" persistent max-width="350" class="p-photo-archive-dialog" @keydown.esc="cancel">
<v-card raised elevation="24">
<v-container fluid class="pb-2 pr-2 pl-2">
<v-layout row wrap>
<v-flex xs3 text-xs-center>
<v-row>
<v-col cols="3" class="text-xs-center">
<v-icon size="54" color="secondary-dark lighten-1">archive</v-icon>
</v-flex>
<v-flex xs9 text-xs-left align-self-center>
<div class="subheading pr-1">
</v-col>
<v-col cols="9" class="text-xs-left" align-self="center">
<div class="subtitle-1 pr-1">
<translate>Are you sure you want to archive the selection?</translate>
</div>
</v-flex>
<v-flex xs12 text-xs-right class="pt-3">
</v-col>
<v-col cols="12" class="text-xs-right pt-6">
<v-btn depressed color="secondary-light" class="action-cancel" @click.stop="cancel">
<translate>No</translate>
</v-btn>
<v-btn color="primary-button" depressed dark class="action-confirm" @click.stop="confirm">
<translate>Yes</translate>
</v-btn>
</v-flex>
</v-layout>
</v-col>
</v-row>
</v-container>
</v-card>
</v-dialog>

22
frontend/src/dialog/photo/delete.vue
View file

@ -1,20 +1,20 @@
<template>
<v-dialog :value="show" lazy persistent max-width="360" class="p-photo-delete-dialog" @keydown.esc="cancel">
<v-dialog :value="show" persistent max-width="360" class="p-photo-delete-dialog" @keydown.esc="cancel">
<v-card raised elevation="24">
<v-container fluid class="pb-2 pr-2 pl-2">
<v-layout row wrap>
<v-flex xs3 text-xs-center>
<v-row>
<v-col cols="3" class="text-xs-center">
<v-icon size="54" color="secondary-dark lighten-1">delete_outline</v-icon>
</v-flex>
<v-flex xs9 text-xs-left align-self-center>
<div v-if="text === ''" class="subheading pr-1">
</v-col>
<v-col cols="9" class="text-xs-left" align-self="center">
<div v-if="text === ''" class="subtitle-1 pr-1">
<translate>Are you sure you want to permanently delete these pictures?</translate>
</div>
<div v-else class="subheading pr-1">
<div v-else class="subtitle-1 pr-1">
{{ text }}
</div>
</v-flex>
<v-flex xs12 text-xs-right class="pt-3">
</v-col>
<v-col cols="12" class="text-xs-right pt-6">
<v-btn depressed color="secondary-light" class="action-cancel" @click.stop="cancel">
<translate key="Cancel">Cancel</translate>
</v-btn>
@ -24,8 +24,8 @@
<v-btn v-else color="primary-button" depressed dark class="action-confirm" @click.stop="confirm">
{{ action }}
</v-btn>
</v-flex>
</v-layout>
</v-col>
</v-row>
</v-container>
</v-card>
</v-dialog>

16
frontend/src/dialog/photo/edit.vue
View file

@ -1,5 +1,5 @@
<template>
<v-dialog :value="show" fullscreen hide-overlay scrollable lazy 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-toolbar dark flat color="navigation" :dense="$vuetify.breakpoint.smAndDown">
<v-btn icon dark class="action-close" @click.stop="close">
@ -22,7 +22,7 @@
</v-btn>
</v-toolbar-items>
</v-toolbar>
<v-tabs v-model="active" flat grow class="form" color="secondary" slider-color="secondary-dark" :height="$vuetify.breakpoint.smAndDown ? 48 : 64">
<v-tabs v-model="active" elevation="0" grow class="form transparent" background-color="secondary" slider-color="secondary-dark" :height="$vuetify.breakpoint.smAndDown ? 48 : 64">
<v-tab id="tab-details" ripple>
<v-icon v-if="$vuetify.breakpoint.smAndDown" :title="$gettext('Details')">edit</v-icon>
<template v-else>
@ -74,24 +74,24 @@
<v-icon>settings</v-icon>
</v-tab>
<v-tabs-items touchless>
<v-tab-item lazy>
<v-tabs-items touchless v-model="active">
<v-tab-item>
<p-tab-photo-details :key="uid" ref="details" :model="model" :uid="uid" @close="close" @prev="prev" @next="next"></p-tab-photo-details>
</v-tab-item>
<v-tab-item lazy>
<v-tab-item>
<p-tab-photo-labels :key="uid" :model="model" :uid="uid" @close="close"></p-tab-photo-labels>
</v-tab-item>
<v-tab-item lazy>
<v-tab-item>
<p-tab-photo-people :key="uid" :model="model" :uid="uid" @close="close"></p-tab-photo-people>
</v-tab-item>
<v-tab-item lazy>
<v-tab-item>
<p-tab-photo-files :key="uid" :model="model" :uid="uid" @close="close"></p-tab-photo-files>
</v-tab-item>
<v-tab-item v-if="$config.feature('edit')" lazy>
<v-tab-item v-if="$config.feature('edit')">
<p-tab-photo-info :key="uid" :model="model" :uid="uid" @close="close"></p-tab-photo-info>
</v-tab-item>
</v-tabs-items>

206
frontend/src/dialog/photo/edit/details.vue
View file

@ -1,42 +1,42 @@
<template>
<div class="p-tab p-tab-photo-details">
<v-form ref="form" lazy-validation dense class="p-form-photo-details-meta" accept-charset="UTF-8" @submit.prevent="save">
<v-layout class="pa-2" row wrap align-top fill-height>
<v-flex class="pa-2 p-photo" xs12 sm4 md2 fill-height>
<v-card tile class="pa-0 ma-0 elevation-0" :title="model.Title">
<v-row class="pa-2 d-flex align-stretch" align="start">
<v-col class="pa-2 p-photo d-flex" cols="12" sm="4" md="2" align-self="stretch">
<v-card tile class="pa-0 ma-0 elevation-0 flex-grow-1" :title="model.Title">
<v-img v-touch="{ left, right }" :src="model.thumbnailUrl('tile_500')" aspect-ratio="1" class="card darken-1 elevation-0 clickable" @click.exact="openPhoto()">
</v-img>
</v-card>
</v-flex>
<v-flex xs12 sm8 md10 fill-height>
<v-layout row wrap>
<v-flex xs12 lg6 class="pa-2">
</v-col>
<v-col cols="12" sm="8" md="10" class="d-flex" align-self="stretch">
<v-row>
<v-col cols="12" lg="6" class="pa-2">
<v-text-field
v-model="model.Title"
:append-icon="model.TitleSrc === 'manual' ? 'check' : ''"
:append-icon="model.TitleSrc === 'mdi-human-male' ? 'mdi-check' : ''"
:disabled="disabled"
:rules="[textRule]"
hide-details
box
filled
flat
:label="$pgettext('Photo', 'Title')"
placeholder=""
color="secondary-dark"
browser-autocomplete="off"
autocomplete="off"
class="input-title"
></v-text-field>
</v-flex>
</v-col>
<v-flex xs4 md1 pa-2>
<v-col cols="4" md="1" class="pa-2">
<v-autocomplete
v-model="model.Day"
:append-icon="model.TakenSrc === 'manual' ? 'check' : ''"
:disabled="disabled"
:error="invalidDate"
:label="$gettext('Day')"
browser-autocomplete="off"
autocomplete="off"
hide-details
box
filled
flat
hide-no-data
color="secondary-dark"
@ -45,17 +45,17 @@
@change="updateTime"
>
</v-autocomplete>
</v-flex>
<v-flex xs4 md1 pa-2>
</v-col>
<v-col cols="4" md="1" class="pa-2">
<v-autocomplete
v-model="model.Month"
:append-icon="model.TakenSrc === 'manual' ? 'check' : ''"
:disabled="disabled"
:error="invalidDate"
:label="$gettext('Month')"
browser-autocomplete="off"
autocomplete="off"
hide-details
box
filled
flat
hide-no-data
color="secondary-dark"
@ -64,17 +64,17 @@
@change="updateTime"
>
</v-autocomplete>
</v-flex>
<v-flex xs4 md2 pa-2>
</v-col>
<v-col cols="4" md="2" class="pa-2">
<v-autocomplete
v-model="model.Year"
:append-icon="model.TakenSrc === 'manual' ? 'check' : ''"
:disabled="disabled"
:error="invalidDate"
:label="$gettext('Year')"
browser-autocomplete="off"
autocomplete="off"
hide-details
box
filled
flat
hide-no-data
color="secondary-dark"
@ -83,33 +83,33 @@
@change="updateTime"
>
</v-autocomplete>
</v-flex>
</v-col>
<v-flex xs6 md2 class="pa-2">
<v-col cols="6" md="2" class="pa-2">
<v-text-field
v-model="time"
:append-icon="model.TakenSrc === 'manual' ? 'check' : ''"
:append-icon="model.TakenSrc === 'mdi-human-male' ? 'mdi-check' : ''"
:disabled="disabled"
:label="model.timeIsUTC() ? $gettext('Time UTC') : $gettext('Local Time')"
browser-autocomplete="off"
autocomplete="off"
autocorrect="off"
autocapitalize="none"
hide-details
box
filled
flat
return-masked-value
mask="##:##:##"
color="secondary-dark"
class="input-local-time"
></v-text-field>
</v-flex>
</v-col>
<v-flex xs6 sm6 md6 lg3 class="pa-2">
<v-autocomplete v-model="model.TimeZone" :disabled="disabled" :label="$gettext('Time Zone')" browser-autocomplete="off" hide-details box flat hide-no-data color="secondary-dark" item-value="ID" item-text="Name" :items="options.TimeZones()" class="input-timezone" @change="updateTime">
<v-col cols="6" sm="6" md="6" lg="3" class="pa-2">
<v-autocomplete v-model="model.TimeZone" :disabled="disabled" :label="$gettext('Time Zone')" hide-details flat hide-no-data color="secondary-dark" item-value="ID" item-text="Name" :items="options.TimeZones()" class="input-timezone" @change="updateTime">
</v-autocomplete>
</v-flex>
</v-col>
<v-flex xs12 sm8 md4 lg3 class="pa-2">
<v-col cols="12" sm="8" md="4" lg="3" class="pa-2">
<v-autocomplete
v-model="model.Country"
:append-icon="model.PlaceSrc === 'manual' ? 'check' : ''"
@ -117,10 +117,10 @@
:readonly="!!(model.Lat || model.Lng)"
:label="$gettext('Country')"
hide-details
box
filled
flat
hide-no-data
browser-autocomplete="off"
autocomplete="off"
color="secondary-dark"
item-value="Code"
item-text="Name"
@ -128,21 +128,21 @@
class="input-country"
>
</v-autocomplete>
</v-flex>
</v-col>
<v-flex xs4 md2 lg2 class="pa-2">
<v-text-field v-model="model.Altitude" :disabled="disabled" hide-details box flat browser-autocomplete="off" autocorrect="off" autocapitalize="none" :label="$gettext('Altitude (m)')" placeholder="" color="secondary-dark" class="input-altitude"></v-text-field>
</v-flex>
<v-col cols="4" md="2" lg="2" class="pa-2">
<v-text-field v-model="model.Altitude" :disabled="disabled" hide-details flat autocomplete="off" autocorrect="off" autocapitalize="none" :label="$gettext('Altitude (m)')" placeholder="" color="secondary-dark" class="input-altitude"></v-text-field>
</v-col>
<v-flex xs4 sm6 md3 lg2 class="pa-2">
<v-col cols="4" sm="6" md="3" lg="2" class="pa-2">
<v-text-field
v-model="model.Lat"
:append-icon="model.PlaceSrc === 'manual' ? 'check' : ''"
:append-icon="model.PlaceSrc === 'mdi-human-male' ? 'mdi-check' : ''"
:disabled="disabled"
hide-details
box
filled
flat
browser-autocomplete="off"
autocomplete="off"
autocorrect="off"
autocapitalize="none"
:label="$gettext('Latitude')"
@ -151,17 +151,17 @@
class="input-latitude"
@paste="pastePosition"
></v-text-field>
</v-flex>
</v-col>
<v-flex xs4 sm6 md3 lg2 class="pa-2">
<v-col cols="4" sm="6" md="3" lg="2" class="pa-2">
<v-text-field
v-model="model.Lng"
:append-icon="model.PlaceSrc === 'manual' ? 'check' : ''"
:append-icon="model.PlaceSrc === 'mdi-human-male' ? 'mdi-check' : ''"
:disabled="disabled"
hide-details
box
filled
flat
browser-autocomplete="off"
autocomplete="off"
autocorrect="off"
autocapitalize="none"
:label="$gettext('Longitude')"
@ -170,18 +170,18 @@
class="input-longitude"
@paste="pastePosition"
></v-text-field>
</v-flex>
</v-col>
<v-flex xs12 md6 pa-2 class="p-camera-select">
<v-col cols="12" sm="6" class="pa-2 p-camera-select">
<v-select
v-model="model.CameraID"
:append-icon="model.CameraSrc === 'manual' ? 'check' : ''"
:disabled="disabled"
:label="$gettext('Camera')"
:menu-props="{ maxHeight: 346 }"
browser-autocomplete="off"
autocomplete="off"
hide-details
box
filled
flat
color="secondary-dark"
item-value="ID"
@ -190,26 +190,26 @@
class="input-camera"
>
</v-select>
</v-flex>
</v-col>
<v-flex xs6 md3 class="pa-2">
<v-text-field v-model="model.Iso" :disabled="disabled" hide-details box flat browser-autocomplete="off" autocorrect="off" autocapitalize="none" label="ISO" placeholder="" color="secondary-dark" class="input-iso"></v-text-field>
</v-flex>
<v-col cols="6" md="3" class="pa-2">
<v-text-field v-model="model.Iso" :disabled="disabled" hide-details filled flat autocomplete="off" autocorrect="off" autocapitalize="none" label="ISO" placeholder="" color="secondary-dark" class="input-iso"></v-text-field>
</v-col>
<v-flex xs6 md3 class="pa-2">
<v-text-field v-model="model.Exposure" :disabled="disabled" hide-details box flat browser-autocomplete="off" autocorrect="off" autocapitalize="none" :label="$gettext('Exposure')" placeholder="" color="secondary-dark" class="input-exposure"></v-text-field>
</v-flex>
<v-col cols="6" md="3" class="pa-2">
<v-text-field v-model="model.Exposure" :disabled="disabled" hide-details filled flat autocomplete="off" autocorrect="off" autocapitalize="none" :label="$gettext('Exposure')" placeholder="" color="secondary-dark" class="input-exposure"></v-text-field>
</v-col>
<v-flex xs12 md6 pa-2 class="p-lens-select">
<v-col cols="12" md="6" class="pa-2 p-lens-select">
<v-select
v-model="model.LensID"
:append-icon="model.CameraSrc === 'manual' ? 'check' : ''"
:disabled="disabled"
:label="$gettext('Lens')"
:menu-props="{ maxHeight: 346 }"
browser-autocomplete="off"
autocomplete="off"
hide-details
box
filled
flat
color="secondary-dark"
item-value="ID"
@ -218,60 +218,60 @@
class="input-lens"
>
</v-select>
</v-flex>
</v-col>
<v-flex xs6 md3 class="pa-2">
<v-text-field v-model="model.FNumber" f :disabled="disabled" hide-details box flat browser-autocomplete="off" autocorrect="off" autocapitalize="none" :label="$gettext('F Number')" placeholder="" color="secondary-dark" class="input-fnumber"></v-text-field>
</v-flex>
<v-col cols="6" md="3" class="pa-2">
<v-text-field v-model="model.FNumber" f :disabled="disabled" hide-details filled flat autocomplete="off" autocorrect="off" autocapitalize="none" :label="$gettext('F Number')" placeholder="" color="secondary-dark" class="input-fnumber"></v-text-field>
</v-col>
<v-flex xs6 md3 class="pa-2">
<v-text-field v-model="model.FocalLength" :disabled="disabled" hide-details box flat browser-autocomplete="off" :label="$gettext('Focal Length')" placeholder="" color="secondary-dark" class="input-focal-length"></v-text-field>
</v-flex>
<v-col cols="6" md="3" class="pa-2">
<v-text-field v-model="model.FocalLength" :disabled="disabled" hide-details filled flat autocomplete="off" :label="$gettext('Focal Length')" placeholder="" color="secondary-dark" class="input-focal-length"></v-text-field>
</v-col>
<v-flex xs12 md6 class="pa-2">
<v-col cols="12" md="6" class="pa-2">
<v-text-field
v-model="model.Details.Artist"
:append-icon="model.Details.ArtistSrc === 'manual' ? 'check' : ''"
:append-icon="model.Details.ArtistSrc === 'mdi-human-male' ? 'mdi-check' : ''"
:disabled="disabled"
:rules="[textRule]"
hide-details
box
filled
flat
browser-autocomplete="off"
autocomplete="off"
:label="$gettext('Artist')"
placeholder=""
color="secondary-dark"
class="input-artist"
></v-text-field>
</v-flex>
</v-col>
<v-flex xs6 md3 class="pa-2">
<v-col cols="6" md="3" class="pa-2">
<v-text-field
v-model="model.Details.Copyright"
:append-icon="model.Details.CopyrightSrc === 'manual' ? 'check' : ''"
:append-icon="model.Details.CopyrightSrc === 'mdi-human-male' ? 'mdi-check' : ''"
:disabled="disabled"
:rules="[textRule]"
hide-details
box
filled
flat
browser-autocomplete="off"
autocomplete="off"
:label="$gettext('Copyright')"
placeholder=""
color="secondary-dark"
class="input-copyright"
></v-text-field>
</v-flex>
</v-col>
<v-flex xs6 md3 class="pa-2">
<v-col cols="6" md="3" class="pa-2">
<v-textarea
v-model="model.Details.License"
:append-icon="model.Details.LicenseSrc === 'manual' ? 'check' : ''"
:disabled="disabled"
:rules="[textRule]"
hide-details
box
filled
flat
browser-autocomplete="off"
autocomplete="off"
auto-grow
:label="$gettext('License')"
placeholder=""
@ -279,18 +279,18 @@
color="secondary-dark"
class="input-license"
></v-textarea>
</v-flex>
</v-col>
<v-flex xs12 class="pa-2">
<v-col cols="12" class="pa-2">
<v-textarea
v-model="model.Details.Subject"
:append-icon="model.Details.SubjectSrc === 'manual' ? 'check' : ''"
:disabled="disabled"
:rules="[textRule]"
hide-details
box
filled
flat
browser-autocomplete="off"
autocomplete="off"
auto-grow
:label="$gettext('Subject')"
placeholder=""
@ -298,17 +298,17 @@
color="secondary-dark"
class="input-subject"
></v-textarea>
</v-flex>
</v-col>
<v-flex xs12 class="pa-2">
<v-col cols="12" class="pa-2">
<v-textarea
v-model="model.Description"
:append-icon="model.DescriptionSrc === 'manual' ? 'check' : ''"
:disabled="disabled"
hide-details
box
filled
flat
browser-autocomplete="off"
autocomplete="off"
auto-grow
:label="$gettext('Description')"
placeholder=""
@ -316,17 +316,17 @@
color="secondary-dark"
class="input-description"
></v-textarea>
</v-flex>
</v-col>
<v-flex xs12 md8 class="pa-2">
<v-col cols="12" md="8" class="pa-2">
<v-textarea
v-model="model.Details.Keywords"
:append-icon="model.Details.KeywordsSrc === 'manual' ? 'check' : ''"
:disabled="disabled"
hide-details
box
filled
flat
browser-autocomplete="off"
autocomplete="off"
auto-grow
:label="$gettext('Keywords')"
placeholder=""
@ -334,17 +334,17 @@
color="secondary-dark"
class="input-keywords"
></v-textarea>
</v-flex>
</v-col>
<v-flex xs12 md4 class="pa-2">
<v-col cols="12" md="4" class="pa-2">
<v-textarea
v-model="model.Details.Notes"
:append-icon="model.Details.NotesSrc === 'manual' ? 'check' : ''"
:disabled="disabled"
hide-details
box
filled
flat
browser-autocomplete="off"
autocomplete="off"
auto-grow
:label="$gettext('Notes')"
placeholder=""
@ -352,9 +352,9 @@
color="secondary-dark"
class="input-notes"
></v-textarea>
</v-flex>
</v-col>
<v-flex v-if="!disabled" xs12 :text-xs-right="!rtl" :text-xs-left="rtl" class="pt-3">
<v-col v-if="!disabled" cols="12" :class="rtl ? 'text-xs-left' : 'text-xs-right'" class="pt-6">
<v-btn depressed color="secondary-light" class="compact action-close" @click.stop="close">
<translate>Close</translate>
</v-btn>
@ -365,10 +365,10 @@
<v-btn color="primary-button" depressed dark class="compact action-done hidden-xs-only" @click.stop="save(true)">
<translate>Done</translate>
</v-btn>
</v-flex>
</v-layout>
</v-flex>
</v-layout>
</v-col>
</v-row>
</v-col>
</v-row>
<div class="mt-1 clear"></div>
</v-form>
</div>

20
frontend/src/dialog/photo/edit/files.vue
View file

@ -1,8 +1,8 @@
<template>
<div class="p-tab p-tab-photo-files">
<v-expansion-panel expand class="pa-0 elevation-0 secondary" :value="state">
<v-expansion-panels v-model="state" class="pa-0 elevation-0 secondary">
<template v-for="file in model.fileModels()">
<v-expansion-panel-content v-if="!file.Missing" :key="file.UID" class="pa-0 elevation-0 secondary-light" style="margin-top: 1px">
<v-expansion-panel v-if="!file.Missing" :key="file.UID" class="pa-0 elevation-0 secondary-light" style="margin-top: 1px">
<template #header>
<div class="caption filename">
{{ file.baseName(70) }}
@ -14,8 +14,8 @@
<v-alert :value="file.Error" type="error" class="my-0 text-capitalize">
{{ file.Error }}
</v-alert>
<v-layout row wrap fill-height align-center justify-center>
<v-flex xs12 class="pa-0">
<v-row class="d-flex align-stretch" align="center" justify="center">
<v-col cols="12" class="pa-0 flex-grow-1">
<div class="v-table__overflow">
<table class="v-datatable v-table theme--light photo-files">
<tbody>
@ -188,7 +188,7 @@
v-model="file.Orientation"
flat
solo
browser-autocomplete="off"
autocomplete="off"
hide-details
color="secondary-dark"
:items="options.Orientations()"
@ -255,14 +255,14 @@
</tbody>
</table>
</div>
</v-flex>
</v-layout>
</v-col>
</v-row>
</v-container>
</v-card-text>
</v-card>
</v-expansion-panel-content>
</v-expansion-panel>
</template>
</v-expansion-panel>
</v-expansion-panels>
<p-file-delete-dialog :show="deleteFile.dialog" @cancel="closeDeleteDialog" @confirm="confirmDeleteFile"></p-file-delete-dialog>
</div>
</template>
@ -288,7 +288,7 @@ export default {
},
data() {
return {
state: [true],
state: [0],
deleteFile: {
dialog: false,
file: null,

6
frontend/src/dialog/photo/edit/info.vue
View file

@ -22,7 +22,7 @@
<v-icon v-if="model.TypeSrc === 'manual'" class="src">check</v-icon>
</td>
<td>
<v-select v-model="model.Type" flat solo browser-autocomplete="off" hide-details color="secondary-dark" :items="options.PhotoTypes()" class="input-type" @change="save"> </v-select>
<v-select v-model="model.Type" flat solo autocomplete="off" hide-details color="secondary-dark" :items="options.PhotoTypes()" class="input-type" @change="save"> </v-select>
</td>
</tr>
<tr v-if="model.Path">
@ -46,7 +46,7 @@
<translate>Original Name</translate>
</td>
<td>
<v-text-field v-model="model.OriginalName" flat solo dense hide-details browser-autocomplete="off" autocorrect="off" autocapitalize="none" color="secondary-dark" @change="save"></v-text-field>
<v-text-field v-model="model.OriginalName" flat solo dense hide-details autocomplete="off" autocorrect="off" autocapitalize="none" color="secondary-dark" @change="save"></v-text-field>
</td>
</tr>
<tr>
@ -180,7 +180,7 @@
<translate>Accuracy</translate>
</td>
<td>
<v-text-field v-model="model.CellAccuracy" flat solo dense hide-details browser-autocomplete="off" autocorrect="off" autocapitalize="none" color="secondary-dark" type="number" suffix="m" style="width: 100px" @change="save"></v-text-field>
<v-text-field v-model="model.CellAccuracy" flat solo dense hide-details autocomplete="off" autocorrect="off" autocapitalize="none" color="secondary-dark" type="number" suffix="m" style="width: 100px" @change="save"></v-text-field>
</td>
</tr>
<tr>

28
frontend/src/dialog/photo/edit/labels.vue
View file

@ -1,15 +1,15 @@
<template>
<div class="p-tab p-tab-photo-labels">
<v-form ref="form" lazy-validation dense accept-charset="UTF-8" @submit.prevent>
<v-layout class="pa-2-md-and-up" row wrap align-top fill-height>
<v-flex class="pa-2 hidden-sm-and-down" xs12 md2 xxl1 fill-height>
<v-row class="pa-2-md-and-up d-flex align-stretch" align="start">
<v-col class="pa-2 hidden-sm-and-down d-flex" cols="12" md="2" xxl="1" align-self="stretch">
<p-photo-preview :model="model"></p-photo-preview>
</v-flex>
<v-flex class="pa-2-md-and-up ra-4-table-md-and-up" xs12 md10 xxl11 fill-width fill-height>
<v-data-table v-model="selected" :headers="listColumns" :items="model.Labels" hide-actions class="elevation-0 p-results" disable-initial-sort item-key="ID" :no-data-text="$gettext('No labels found')">
</v-col>
<v-col class="pa-2-md-and-up ra-4-table-md-and-up d-flex flex-grow-1" cols="12" md="10" xxl="1" align-self="stretch">
<v-data-table v-model="selected" :headers="listColumns" :items="model.Labels" hide-default-footer class="elevation-0 p-results" item-key="ID" :no-data-text="$gettext('No labels found')">
<template #items="props" class="p-file">
<td>
<v-edit-dialog :return-value.sync="props.item.Label.Name" lazy class="p-inline-edit" @save="renameLabel(props.item.Label)">
<v-edit-dialog :return-value.sync="props.item.Label.Name" class="p-inline-edit" @save="renameLabel(props.item.Label)">
{{ props.item.Label.Name }}
<template #input>
<v-text-field v-model="props.item.Label.Name" :rules="[nameRule]" :label="$gettext('Name')" color="secondary-dark" class="input-rename background-inherit elevation-0" single-line autofocus solo hide-details></v-text-field>
@ -21,37 +21,37 @@
</td>
<td class="text-xs-center"> {{ 100 - props.item.Uncertainty }}% </td>
<td class="text-xs-center">
<v-btn v-if="disabled" icon small flat :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">search</v-icon>
</v-btn>
<v-btn v-else-if="props.item.Uncertainty < 100 && props.item.LabelSrc === 'manual'" icon small flat :ripple="false" class="action-delete" title="Delete" @click.stop.prevent="removeLabel(props.item.Label)">
<v-btn v-else-if="props.item.Uncertainty < 100 && props.item.LabelSrc === 'manual'" icon small text :ripple="false" class="action-delete" title="Delete" @click.stop.prevent="removeLabel(props.item.Label)">
<v-icon color="secondary-dark">delete</v-icon>
</v-btn>
<v-btn v-else-if="props.item.Uncertainty < 100" icon small flat :ripple="false" class="action-remove" title="Remove" @click.stop.prevent="removeLabel(props.item.Label)">
<v-btn v-else-if="props.item.Uncertainty < 100" icon small text :ripple="false" class="action-remove" title="Remove" @click.stop.prevent="removeLabel(props.item.Label)">
<v-icon color="secondary-dark">remove</v-icon>
</v-btn>
<v-btn v-else icon small flat :ripple="false" class="action-on" title="Activate" @click.stop.prevent="activateLabel(props.item.Label)">
<v-btn v-else icon small text :ripple="false" class="action-on" title="Activate" @click.stop.prevent="activateLabel(props.item.Label)">
<v-icon color="secondary-dark">add</v-icon>
</v-btn>
</td>
</template>
<template v-if="!disabled" #footer>
<td>
<v-text-field v-model="newLabel" :rules="[nameRule]" color="secondary-dark" browser-autocomplete="off" :label="$gettext('Name')" single-line flat solo hide-details autofocus class="input-label" @keyup.enter.native="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 class="text-xs-left">
{{ sourceName("manual") }}
</td>
<td class="text-xs-center"> 100% </td>
<td class="text-xs-center">
<v-btn icon small flat :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">add</v-icon>
</v-btn>
</td>
</template>
</v-data-table>
</v-flex>
</v-layout>
</v-col>
</v-row>
<!-- div class="mt-1 clear"></div -->
</v-form>
</div>

44
frontend/src/dialog/photo/edit/people.vue
View file

@ -1,7 +1,7 @@
<template>
<div class="p-tab p-tab-photo-people">
<v-container grid-list-xs fluid class="pa-2 p-faces">
<v-alert :value="markers.length === 0" color="secondary-dark" icon="lightbulb_outline" class="no-results ma-2 opacity-70" outline>
<v-alert :value="markers.length === 0" color="secondary-dark" icon="lightbulb_outline" class="no-results ma-2 opacity-70" outlined>
<h3 class="body-2 ma-0 pa-0">
<translate>No people found</translate>
</h3>
@ -10,32 +10,32 @@
<translate>Recognition starts after indexing has been completed.</translate>
</p>
</v-alert>
<v-layout class="search-results face-results cards-view" row wrap fill-height>
<v-flex v-for="(marker, index) in markers" :key="index" xs12 sm6 md3 xl2 d-flex>
<v-card tile :data-id="marker.UID" style="user-select: none" :class="marker.classes()" class="result card">
<v-row class="search-results face-results cards-view d-flex align-stretch">
<v-col v-for="(marker, index) in markers" :key="index" cols="12" sm="6" md="3" xl="2" class="d-flex">
<v-card tile :data-id="marker.UID" style="user-select: none" :class="marker.classes()" class="result card flex-grow-1">
<div class="card-background card"></div>
<v-img :src="marker.thumbnailUrl('tile_320')" :transition="false" aspect-ratio="1" class="card darken-1">
<v-btn v-if="!marker.SubjUID && !marker.Invalid" :ripple="false" :depressed="false" class="input-reject" icon flat small absolute :title="$gettext('Remove')" @click.stop.prevent="onReject(marker)">
<v-btn v-if="!marker.SubjUID && !marker.Invalid" :ripple="false" :depressed="false" class="input-reject" icon text small absolute :title="$gettext('Remove')" @click.stop.prevent="onReject(marker)">
<v-icon color="white" class="action-reject">clear</v-icon>
</v-btn>
</v-img>
<v-card-actions class="card-details pa-0">
<v-layout v-if="marker.Invalid" row wrap align-center>
<v-flex xs12 class="text-xs-center pa-0">
<v-row v-if="marker.Invalid" align="center">
<v-col cols="12" class="text-xs-center pa-0">
<v-btn color="transparent" :disabled="busy" large depressed block :round="false" class="action-undo text-xs-center" :title="$gettext('Undo')" @click.stop="onApprove(marker)">
<v-icon dark>undo</v-icon>
</v-btn>
</v-flex>
</v-layout>
<v-layout v-else-if="marker.SubjUID" row wrap align-center>
<v-flex xs12 class="text-xs-left pa-0">
</v-col>
</v-row>
<v-row v-else-if="marker.SubjUID" align="center">
<v-col cols="12" class="text-xs-left pa-0">
<v-text-field
v-model="marker.Name"
:rules="[textRule]"
:disabled="busy"
:readonly="true"
browser-autocomplete="off"
autocomplete="off"
autocorrect="off"
class="input-name pa-0 ma-0"
hide-details
@ -45,12 +45,12 @@
clear-icon="eject"
@click:clear="onClearSubject(marker)"
@change="onRename(marker)"
@keyup.enter.native="onRename(marker)"
@keyup.enter="onRename(marker)"
></v-text-field>
</v-flex>
</v-layout>
<v-layout v-else row wrap align-center>
<v-flex xs12 class="text-xs-left pa-0">
</v-col>
</v-row>
<v-row v-else align="center">
<v-col cols="12" class="text-xs-left pa-0">
<v-combobox
v-model="marker.Name"
style="z-index: 250"
@ -69,18 +69,18 @@
hide-no-data
append-icon=""
prepend-inner-icon="person_add"
browser-autocomplete="off"
autocomplete="off"
class="input-name pa-0 ma-0"
@change="onRename(marker)"
@keyup.enter.native="onRename(marker)"
>
</v-combobox>
</v-flex>
</v-layout>
</v-col>
</v-row>
</v-card-actions>
</v-card>
</v-flex>
</v-layout>
</v-col>
</v-row>
</v-container>
</div>
</template>

4
frontend/src/dialog/reload.vue
View file

@ -1,10 +1,10 @@
<template>
<v-dialog :value="show" max-width="300">
<v-card>
<v-card-title class="subheading pa-3">
<v-card-title class="subtitle-1 pa-6">
<translate>PhotoPrism has been updated…</translate>
</v-card-title>
<v-card-actions class="pa-3">
<v-card-actions class="pa-6">
<v-spacer></v-spacer>
<v-btn color="secondary-light" class="compact mx-2" depressed @click="close">
<translate>Cancel</translate>

48
frontend/src/dialog/service/add.vue
View file

@ -1,56 +1,56 @@
<template>
<v-dialog :value="show" lazy persistent max-width="500" class="p-account-add-dialog" @keydown.esc="cancel">
<v-dialog :value="show" persistent max-width="500" class="p-account-add-dialog" @keydown.esc="cancel">
<v-card raised elevation="24">
<v-card-title primary-title class="pa-2">
<v-layout row wrap>
<v-flex xs12 class="pa-2">
<v-row>
<v-col cols="12" class="pa-2">
<h3 class="headline pa-0">
<translate>Add Account</translate>
</h3>
</v-flex>
</v-layout>
</v-col>
</v-row>
</v-card-title>
<v-card-text class="pb-0 pt-0 px-2">
<v-layout row wrap>
<v-flex xs12 class="pa-2">
<v-text-field v-model="model.AccURL" hide-details autofocus box flat :label="$gettext('Service URL')" placeholder="https://www.example.com/" color="secondary-dark" autocorrect="off" autocapitalize="none"></v-text-field>
</v-flex>
<v-flex xs12 sm6 class="pa-2">
<v-text-field v-model="model.AccUser" hide-details box flat :label="$gettext('Username')" placeholder="optional" color="secondary-dark" autocorrect="off" autocapitalize="none"></v-text-field>
</v-flex>
<v-flex xs12 sm6 class="pa-2">
<v-row>
<v-col cols="12" class="pa-2">
<v-text-field v-model="model.AccURL" hide-details autofocus filled flat :label="$gettext('Service URL')" placeholder="https://www.example.com/" color="secondary-dark" autocorrect="off" autocapitalize="none"></v-text-field>
</v-col>
<v-col cols="12" sm="6" class="pa-2">
<v-text-field v-model="model.AccUser" hide-details filled flat :label="$gettext('Username')" placeholder="optional" color="secondary-dark" autocorrect="off" autocapitalize="none"></v-text-field>
</v-col>
<v-col cols="12" sm="6" class="pa-2">
<v-text-field
v-model="model.AccPass"
hide-details
box
filled
flat
browser-autocomplete="new-password"
autocomplete="new-password"
autocapitalize="none"
:label="$gettext('Password')"
placeholder="optional"
color="secondary-dark"
:append-icon="showPassword ? 'visibility' : 'visibility_off'"
:append-icon="showPassword ? 'mdi-eye' : 'mdi-eye-off'"
:type="showPassword ? 'text' : 'password'"
@click:append="showPassword = !showPassword"
></v-text-field>
</v-flex>
</v-layout>
</v-col>
</v-row>
</v-card-text>
<v-card-actions class="pt-1 pb-2 px-2">
<v-layout row wrap class="pa-2">
<v-flex xs12 text-xs-left class="caption">
<v-row class="pa-2">
<v-col cols="12" class="text-xs-left caption">
<translate>Note: Only WebDAV servers, like Nextcloud or PhotoPrism, can be configured as remote service for backup and file upload.</translate>
<translate>Support for additional services, like Google Drive, will be added over time.</translate>
</v-flex>
<v-flex xs12 text-xs-right class="pt-2">
</v-col>
<v-col cols="12" class="text-xs-right pt-2">
<v-btn depressed color="secondary-light" class="action-cancel ml-2" @click.stop="cancel">
<span>{{ label.cancel }}</span>
</v-btn>
<v-btn depressed dark color="primary-button" class="action-confirm compact mr-0" @click.stop="confirm">
<span>{{ label.confirm }}</span>
</v-btn>
</v-flex>
</v-layout>
</v-col>
</v-row>
</v-card-actions>
</v-card>
</v-dialog>

174
frontend/src/dialog/service/edit.vue
View file

@ -1,53 +1,53 @@
<template>
<v-dialog :value="show" lazy persistent max-width="500" class="p-account-edit-dialog" @keydown.esc="cancel">
<v-dialog :value="show" persistent max-width="500" class="p-account-edit-dialog" @keydown.esc="cancel">
<v-card raised elevation="24">
<v-card-title primary-title class="pa-2">
<v-layout v-if="scope === 'sharing'" row wrap class="py-2 pr-0 pl-2">
<v-flex xs9>
<v-row v-if="scope === 'sharing'" class="py-2 pr-0 pl-2">
<v-col cols="9">
<h3 class="headline ma-0 pa-0">
{{ $gettext("Manual Upload") }}
</h3>
</v-flex>
<v-flex xs3 text-xs-right>
</v-col>
<v-col cols="3" class="text-xs-right">
<v-switch v-model="model.AccShare" color="secondary-dark" :true-value="true" :false-value="false" :disabled="model.AccType !== 'webdav'" class="ma-0 hidden-xs-only float-right" hide-details></v-switch>
<v-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-flex>
</v-layout>
<v-layout v-else-if="scope === 'sync'" row wrap class="pa-2">
<v-flex xs9>
</v-col>
</v-row>
<v-row v-else-if="scope === 'sync'" class="pa-2">
<v-col cols="9">
<h3 class="headline ma-0 pa-0">
{{ $gettext("Remote Sync") }}
</h3>
</v-flex>
<v-flex xs3 text-xs-right>
<v-switch v-model="model.AccSync" color="secondary-dark" :true-value="true" :false-value="false" :disabled="model.AccType !== 'webdav'" class="mt-0 hidden-xs-only float-right" hide-details box 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 box flat></v-switch>
</v-flex>
</v-layout>
<v-layout v-else row wrap class="pt-2 pr-0 pl-2">
<v-flex xs10>
</v-col>
<v-col cols="3" class="text-xs-right">
<v-switch v-model="model.AccSync" color="secondary-dark" :true-value="true" :false-value="false" :disabled="model.AccType !== 'webdav'" class="mt-0 hidden-xs-only float-right" hide-details flat></v-switch>
<v-switch v-model="model.AccSync" color="secondary-dark" :true-value="true" :false-value="false" :disabled="model.AccType !== 'webdav'" class="mt-0 hidden-sm-and-up float-right" hide-details flat></v-switch>
</v-col>
</v-row>
<v-row v-else class="pt-2 pr-0 pl-2">
<v-col cols="10">
<h3 class="headline ma-0 pa-0">
{{ $gettext("Edit Account") }}
</h3>
</v-flex>
<v-flex xs2 text-xs-right>
<v-btn icon flat :ripple="false" class="action-remove mt-0" @click.stop.prevent="remove()">
</v-col>
<v-col cols="2" class="text-xs-right">
<v-btn icon text :ripple="false" class="action-remove mt-0" @click.stop.prevent="remove()">
<v-icon color="secondary-dark">delete</v-icon>
</v-btn>
</v-flex>
</v-layout>
</v-col>
</v-row>
</v-card-title>
<v-card-text class="py-0 px-2">
<v-layout v-if="scope === 'sharing'" row wrap>
<v-flex xs12 class="pa-2">
<v-row v-if="scope === 'sharing'">
<v-col cols="12" class="pa-2">
<v-autocomplete
v-model="model.SharePath"
color="secondary-dark"
hide-details
hide-no-data
box
filled
flat
browser-autocomplete="off"
autocomplete="off"
hint="Folder"
:search-input.sync="search"
:items="pathItems"
@ -58,24 +58,24 @@
:disabled="!model.AccShare || loading"
>
</v-autocomplete>
</v-flex>
<v-flex xs12 sm6 class="pa-2 input-share-size">
<v-select v-model="model.ShareSize" :disabled="!model.AccShare" :label="$gettext('Size')" browser-autocomplete="off" hide-details box flat color="secondary-dark" item-text="text" item-value="value" :items="items.sizes"></v-select>
</v-flex>
<v-flex xs12 sm6 class="pa-2">
<v-select v-model="model.ShareExpires" :disabled="!model.AccShare" :label="$gettext('Expires')" browser-autocomplete="off" hide-details box flat color="secondary-dark" item-text="text" item-value="value" :items="options.Expires()"></v-select>
</v-flex>
</v-layout>
<v-layout v-else-if="scope === 'sync'" row wrap>
<v-flex xs12 sm6 class="pa-2">
</v-col>
<v-col cols="12" sm="6" class="pa-2 input-share-size">
<v-select v-model="model.ShareSize" :disabled="!model.AccShare" :label="$gettext('Size')" autocomplete="off" hide-details filled flat color="secondary-dark" item-text="text" item-value="value" :items="items.sizes"></v-select>
</v-col>
<v-col cols="12" sm="6" class="pa-2">
<v-select v-model="model.ShareExpires" :disabled="!model.AccShare" :label="$gettext('Expires')" autocomplete="off" hide-details filled flat color="secondary-dark" item-text="text" item-value="value" :items="options.Expires()"></v-select>
</v-col>
</v-row>
<v-row v-else-if="scope === 'sync'">
<v-col cols="12" sm="6" class="pa-2">
<v-autocomplete
v-model="model.SyncPath"
color="secondary-dark"
hide-details
hide-no-data
box
filled
flat
browser-autocomplete="off"
autocomplete="off"
:hint="$gettext('Folder')"
:search-input.sync="search"
:items="pathItems"
@ -86,73 +86,73 @@
:disabled="!model.AccSync || loading"
>
</v-autocomplete>
</v-flex>
<v-flex xs12 sm6 class="pa-2">
<v-select v-model="model.SyncInterval" :disabled="!model.AccSync" :label="$gettext('Interval')" browser-autocomplete="off" hide-details box flat color="secondary-dark" item-text="text" item-value="value" :items="options.Intervals()"></v-select>
</v-flex>
<v-flex xs12 sm6 class="px-2">
<v-checkbox v-model="model.SyncDownload" :disabled="!model.AccSync || readonly" hide-details box flat color="secondary-dark" on-icon="radio_button_checked" off-icon="radio_button_unchecked" :label="$gettext('Download remote files')" @change="onChangeSync('download')"></v-checkbox>
</v-flex>
<v-flex xs12 sm6 class="px-2">
<v-checkbox v-model="model.SyncFilenames" :disabled="!model.AccSync" hide-details box flat color="secondary-dark" :label="$gettext('Preserve filenames')"></v-checkbox>
</v-flex>
<v-flex xs12 sm6 class="px-2">
<v-checkbox v-model="model.SyncUpload" :disabled="!model.AccSync" hide-details box flat color="secondary-dark" on-icon="radio_button_checked" off-icon="radio_button_unchecked" :label="$gettext('Upload local files')" @change="onChangeSync('upload')"></v-checkbox>
</v-flex>
<v-flex xs12 sm6 class="px-2">
<v-checkbox v-model="model.SyncRaw" :disabled="!model.AccSync" hide-details box flat color="secondary-dark" :label="$gettext('Sync raw and video files')"></v-checkbox>
</v-flex>
</v-layout>
<v-layout v-else row wrap class="pt-0">
<v-flex xs12 class="pa-2">
<v-text-field v-model="model.AccName" hide-details autofocus box flat browser-autocomplete="off" :label="$gettext('Name')" placeholder="" color="secondary-dark" required></v-text-field>
</v-flex>
<v-flex xs12 class="pa-2">
<v-text-field v-model="model.AccURL" hide-details box flat browser-autocomplete="off" :label="$gettext('Service URL')" placeholder="https://www.example.com/" color="secondary-dark"></v-text-field>
</v-flex>
<v-flex xs12 sm6 class="pa-2">
<v-text-field v-model="model.AccUser" hide-details box flat browser-autocomplete="off" :label="$gettext('Username')" placeholder="optional" color="secondary-dark"></v-text-field>
</v-flex>
<v-flex xs12 sm6 class="pa-2">
</v-col>
<v-col cols="12" sm="6" class="pa-2">
<v-select v-model="model.SyncInterval" :disabled="!model.AccSync" :label="$gettext('Interval')" autocomplete="off" hide-details filled flat color="secondary-dark" item-text="text" item-value="value" :items="options.Intervals()"></v-select>
</v-col>
<v-col cols="12" sm="6" class="px-2">
<v-checkbox v-model="model.SyncDownload" :disabled="!model.AccSync || readonly" hide-details flat color="secondary-dark" on-icon="radio_button_checked" off-icon="radio_button_unchecked" :label="$gettext('Download remote files')" @change="onChangeSync('download')"></v-checkbox>
</v-col>
<v-col cols="12" sm="6" class="px-2">
<v-checkbox v-model="model.SyncFilenames" :disabled="!model.AccSync" hide-details flat color="secondary-dark" :label="$gettext('Preserve filenames')"></v-checkbox>
</v-col>
<v-col cols="12" sm="6" class="px-2">
<v-checkbox v-model="model.SyncUpload" :disabled="!model.AccSync" hide-details flat color="secondary-dark" on-icon="radio_button_checked" off-icon="radio_button_unchecked" :label="$gettext('Upload local files')" @change="onChangeSync('upload')"></v-checkbox>
</v-col>
<v-col cols="12" sm="6" class="px-2">
<v-checkbox v-model="model.SyncRaw" :disabled="!model.AccSync" hide-details flat color="secondary-dark" :label="$gettext('Sync raw and video files')"></v-checkbox>
</v-col>
</v-row>
<v-row v-else class="pt-0">
<v-col cols="12" class="pa-2">
<v-text-field v-model="model.AccName" hide-details autofocus filled flat autocomplete="off" :label="$gettext('Name')" placeholder="" color="secondary-dark" required></v-text-field>
</v-col>
<v-col cols="12" class="pa-2">
<v-text-field v-model="model.AccURL" hide-details filled flat autocomplete="off" :label="$gettext('Service URL')" placeholder="https://www.example.com/" color="secondary-dark"></v-text-field>
</v-col>
<v-col cols="12" sm="6" class="pa-2">
<v-text-field v-model="model.AccUser" hide-details filled flat autocomplete="off" :label="$gettext('Username')" placeholder="optional" color="secondary-dark"></v-text-field>
</v-col>
<v-col cols="12" sm="6" class="pa-2">
<v-text-field
v-model="model.AccPass"
hide-details
box
filled
flat
browser-autocomplete="new-password"
autocomplete="new-password"
:label="$gettext('Password')"
placeholder="optional"
color="secondary-dark"
:append-icon="showPassword ? 'visibility' : 'visibility_off'"
:append-icon="showPassword ? 'mdi-eye' : 'mdi-eye-off'"
:type="showPassword ? 'text' : 'password'"
@click:append="showPassword = !showPassword"
></v-text-field>
</v-flex>
<v-flex xs12 sm6 class="pa-2">
<v-text-field v-model="model.AccKey" hide-details box flat browser-autocomplete="off" :label="$gettext('API Key')" placeholder="optional" color="secondary-dark" required></v-text-field>
</v-flex>
<v-flex xs12 sm6 pa-2 class="input-account-type">
<v-select v-model="model.AccType" :label="$gettext('Type')" browser-autocomplete="off" hide-details box flat color="secondary-dark" item-text="text" item-value="value" :items="items.types"> </v-select>
</v-flex>
<v-flex xs12 sm6 class="px-2">
<v-select v-model="model.AccTimeout" :label="$gettext('Timeout')" browser-autocomplete="off" hide-details box flat color="secondary-dark" item-text="text" item-value="value" :items="options.Timeouts()"> </v-select>
</v-flex>
<v-flex xs12 sm6 class="px-2">
<v-select v-model="model.RetryLimit" :label="$gettext('Retry Limit')" browser-autocomplete="off" hide-details box flat color="secondary-dark" item-text="text" item-value="value" :items="options.RetryLimits()"> </v-select>
</v-flex>
</v-layout>
</v-col>
<v-col cols="12" sm="6" class="pa-2">
<v-text-field v-model="model.AccKey" hide-details filled flat autocomplete="off" :label="$gettext('API Key')" placeholder="optional" color="secondary-dark" required></v-text-field>
</v-col>
<v-col cols="12" sm="6" class="pa-2 input-account-type">
<v-select v-model="model.AccType" :label="$gettext('Type')" autocomplete="off" hide-details filled flat color="secondary-dark" item-text="text" item-value="value" :items="items.types"> </v-select>
</v-col>
<v-col cols="12" sm="6" class="px-2">
<v-select v-model="model.AccTimeout" :label="$gettext('Timeout')" autocomplete="off" hide-details filled flat color="secondary-dark" item-text="text" item-value="value" :items="options.Timeouts()"> </v-select>
</v-col>
<v-col cols="12" sm="6" class="px-2">
<v-select v-model="model.RetryLimit" :label="$gettext('Retry Limit')" autocomplete="off" hide-details filled flat color="secondary-dark" item-text="text" item-value="value" :items="options.RetryLimits()"> </v-select>
</v-col>
</v-row>
</v-card-text>
<v-card-actions class="pt-0 pb-2 px-2">
<v-layout row wrap class="pa-2">
<v-flex xs12 text-xs-right class="pt-3 pb-0">
<v-row class="pa-2">
<v-col cols="12" class="text-xs-right pt-6 pb-0">
<v-btn depressed color="secondary-light" class="action-cancel ml-2" @click.stop="cancel">
<translate>Cancel</translate>
</v-btn>
<v-btn depressed dark color="primary-button" class="action-save compact" @click.stop="save">
<translate>Save</translate>
</v-btn>
</v-flex>
</v-layout>
</v-col>
</v-row>
</v-card-actions>
</v-card>
</v-dialog>

20
frontend/src/dialog/service/remove.vue
View file

@ -1,25 +1,25 @@
<template>
<v-dialog :value="show" lazy persistent max-width="350" class="p-account-delete-dialog" @keydown.esc="cancel">
<v-dialog :value="show" persistent max-width="350" class="p-account-delete-dialog" @keydown.esc="cancel">
<v-card raised elevation="24">
<v-container fluid class="pb-2 pr-2 pl-2">
<v-layout row wrap>
<v-flex xs3 text-xs-center>
<v-row>
<v-col cols="3" class="text-xs-center">
<v-icon size="54" color="secondary-dark lighten-1">delete_outline</v-icon>
</v-flex>
<v-flex xs9 text-xs-left align-self-center>
<div class="subheading pr-1">
</v-col>
<v-col cols="9" class="text-xs-left" align-self="center">
<div class="subtitle-1 pr-1">
<translate key="Are you sure you want to delete this account?">Are you sure you want to delete this account?</translate>
</div>
</v-flex>
<v-flex xs12 text-xs-right class="pt-3">
</v-col>
<v-col cols="12" class="text-xs-right pt-6">
<v-btn depressed color="secondary-light" class="action-cancel ml-2" @click.stop="cancel">
<translate key="Cancel">Cancel</translate>
</v-btn>
<v-btn depressed dark color="primary-button" class="action-confirm" @click.stop="confirm">
<translate key="Delete">Delete</translate>
</v-btn>
</v-flex>
</v-layout>
</v-col>
</v-row>
</v-container>
</v-card>
</v-dialog>

80
frontend/src/dialog/share.vue
View file

@ -1,23 +1,23 @@
<template>
<v-dialog :value="show" lazy persistent max-width="500" class="p-share-dialog" @keydown.esc="close">
<v-dialog :value="show" persistent max-width="500" class="p-share-dialog" @keydown.esc="close">
<v-card raised elevation="24">
<v-card-title primary-title class="pb-0">
<v-layout row wrap>
<v-flex xs9>
<v-row>
<v-col cols="9">
<h3 class="headline mb-0">
<translate :translate-params="{ name: model.modelName() }">Share %{name}</translate>
</h3>
</v-flex>
<v-flex xs3 :text-xs-right="!rtl" :text-xs-left="rtl">
<v-btn icon flat dark color="secondary-dark" class="ma-0 action-add-link" :title="$gettext('Add Link')" @click.stop="add">
</v-col>
<v-col cols="3" :class="rtl ? 'text-xs-left' : 'text-xs-right'">
<v-btn icon text dark color="secondary-dark" class="ma-0 action-add-link" :title="$gettext('Add Link')" @click.stop="add">
<v-icon>add_link</v-icon>
</v-btn>
</v-flex>
</v-layout>
</v-col>
</v-row>
</v-card-title>
<v-card-text>
<v-expansion-panel class="pa-0 elevation-0">
<v-expansion-panel-content v-for="(link, index) in links" :key="link.UID" class="pa-0 elevation-0 secondary mb-1">
<v-expansion-panels class="pa-0 elevation-0">
<v-expansion-panel v-for="(link, index) in links" :key="link.UID" class="pa-0 elevation-0 secondary mb-1">
<template #header>
<button :class="`text-xs-${!rtl ? 'left' : 'right'} action-url ml-0 mt-0 mb-0 pa-0 mr-2`" style="user-select: none" @click.stop="copyUrl(link)">
<v-icon size="16" class="pr-1">link</v-icon>
@ -27,66 +27,66 @@
<v-card>
<v-card-text class="secondary-light">
<v-container fluid class="pa-0">
<v-layout row wrap>
<v-flex xs12 class="pa-2">
<v-text-field :value="link.url()" hide-details box flat readonly :label="$gettext('URL')" autocorrect="off" autocapitalize="none" browser-autocomplete="off" color="secondary-dark" class="input-url" @click.stop="selectText($event)"> </v-text-field>
</v-flex>
<v-flex xs12 sm6 class="pa-2">
<v-select v-model="link.Expires" hide-details box flat :label="expires(link)" browser-autocomplete="off" color="secondary-dark" item-text="text" item-value="value" :items="options.Expires()" class="input-expires"> </v-select>
</v-flex>
<v-flex xs12 sm6 class="pa-2">
<v-text-field v-model="link.Token" hide-details box flat required browser-autocomplete="off" autocorrect="off" autocapitalize="none" :label="$gettext('Secret')" :placeholder="$gettext('Token')" color="secondary-dark" class="input-secret"></v-text-field>
</v-flex>
<!-- v-flex xs12 sm6 class="pa-2">
<v-row>
<v-col cols="12" class="pa-2">
<v-text-field :value="link.url()" hide-details filled flat readonly :label="$gettext('URL')" autocorrect="off" autocapitalize="none" autocomplete="off" color="secondary-dark" class="input-url" @click.stop="selectText($event)"> </v-text-field>
</v-col>
<v-col cols="12" sm="6" class="pa-2">
<v-select v-model="link.Expires" hide-details filled flat :label="expires(link)" browser-autocomplete="off" color="secondary-dark" item-text="text" item-value="value" :items="options.Expires()" class="input-expires"> </v-select>
</v-col>
<v-col cols="12" sm="6" class="pa-2">
<v-text-field v-model="link.Token" hide-details filled flat required autocomplete="off" autocorrect="off" autocapitalize="none" :label="$gettext('Secret')" :placeholder="$gettext('Token')" color="secondary-dark" class="input-secret"></v-text-field>
</v-col>
<!-- v-col cols="12" sm="6" class="pa-2">
<v-text-field
hide-details
browser-autocomplete="off"
autocomplete="off"
:label="label.pass"
:placeholder="link.HasPassword ? '••••••••' : 'optional'"
color="secondary-dark"
v-model="link.Password"
:append-icon="showPassword ? 'visibility' : 'visibility_off'"
:append-icon="showPassword ? 'mdi-eye' : 'mdi-eye-off'"
:type="showPassword ? 'text' : 'password'"
@click:append="showPassword = !showPassword"
></v-text-field>
</v-flex -->
<v-flex xs6 :text-xs-left="!rtl" :text-xs-right="rtl" class="pa-2">
<v-btn small icon flat color="remove" class="ma-0 action-delete" :title="$gettext('Delete')" @click.stop.exact="remove(index)">
</v-col -->
<v-col cols="6" :class="rtl ? 'text-xs-left' : 'text-xs-right'" class="pa-2">
<v-btn small icon text color="remove" class="ma-0 action-delete" :title="$gettext('Delete')" @click.stop.exact="remove(index)">
<v-icon>delete</v-icon>
</v-btn>
</v-flex>
<v-flex xs6 :text-xs-right="!rtl" :text-xs-left="rtl" class="pa-2">
</v-col>
<v-col cols="6" :class="rtl ? 'text-xs-left' : 'text-xs-right'" class="pa-2">
<v-btn depressed dark color="primary-button" class="ma-0 compact action-save" @click.stop.exact="update(link)">
<translate>Save</translate>
</v-btn>
</v-flex>
</v-layout>
</v-col>
</v-row>
</v-container>
</v-card-text>
</v-card>
</v-expansion-panel-content>
</v-expansion-panel>
</v-expansion-panel>
</v-expansion-panels>
<v-container fluid :text-xs-left="!rtl" :text-xs-right="rtl" class="pb-0 pt-3 pr-0 pl-0 caption">
<v-container fluid :text-xs-left="!rtl" :text-xs-right="rtl" class="pb-0 pt-6 pr-0 pl-0 caption">
<translate :translate-params="{ name: model.modelName() }">People you share a link with will be able to view public contents.</translate>
<translate>A click will copy it to your clipboard.</translate>
<translate>Any private photos and videos remain private and won't be shared.</translate>
<translate>Alternatively, you can upload files directly to WebDAV servers like Nextcloud.</translate>
</v-container>
</v-card-text>
<v-card-actions class="pt-0 px-3">
<v-layout row wrap class="pa-2">
<v-flex xs6>
<v-card-actions class="pt-0 px-6">
<v-row class="pa-2">
<v-col cols="6">
<v-btn depressed color="secondary-light" class="action-webdav" @click.stop="upload">
<translate>WebDAV Upload</translate>
</v-btn>
</v-flex>
<v-flex xs6 :text-xs-right="!rtl" :text-xs-left="rtl">
</v-col>
<v-col cols="6" :class="rtl ? 'text-xs-left' : 'text-xs-right'">
<v-btn depressed color="secondary-light" class="action-close" @click.stop="confirm">
<translate>Close</translate>
</v-btn>
</v-flex>
</v-layout>
</v-col>
</v-row>
</v-card-actions>
</v-card>
</v-dialog>

38
frontend/src/dialog/share/upload.vue
View file

@ -1,34 +1,34 @@
<template>
<v-dialog :value="show" lazy persistent max-width="400" class="p-share-upload-dialog" @keydown.esc="cancel">
<v-dialog :value="show" persistent max-width="400" class="p-share-upload-dialog" @keydown.esc="cancel">
<v-card raised elevation="24">
<v-card-title primary-title class="pb-0">
<v-layout row wrap>
<v-flex xs8>
<v-row>
<v-col cols="8">
<h3 class="headline mb-0">
<translate>WebDAV Upload</translate>
</h3>
</v-flex>
<v-flex xs4 text-xs-right>
<v-btn icon flat dark color="secondary-dark" class="ma-0" @click.stop="setup">
</v-col>
<v-col cols="4" class="text-xs-right">
<v-btn icon text dark color="secondary-dark" class="ma-0" @click.stop="setup">
<v-icon>cloud</v-icon>
</v-btn>
</v-flex>
</v-layout>
</v-col>
</v-row>
</v-card-title>
<v-card-text class="pt-0">
<v-layout row wrap>
<v-flex xs12 text-xs-left class="pt-2">
<v-select v-model="service" color="secondary-dark" hide-details hide-no-data box flat :label="$gettext('Account')" item-text="AccName" item-value="ID" return-object :disabled="loading || noServices" :items="services" @change="onChange"> </v-select>
</v-flex>
<v-flex xs12 text-xs-left class="pt-2">
<v-row>
<v-col cols="12" class="text-xs-left pt-2">
<v-select v-model="service" color="secondary-dark" hide-details hide-no-data filled flat :label="$gettext('Account')" item-text="AccName" item-value="ID" return-object :disabled="loading || noServices" :items="services" @change="onChange"> </v-select>
</v-col>
<v-col cols="12" class="text-xs-left pt-2">
<v-autocomplete
v-model="path"
color="secondary-dark"
hide-details
hide-no-data
box
filled
flat
browser-autocomplete="off"
autocomplete="off"
hint="Folder"
:search-input.sync="search"
:items="pathItems"
@ -39,8 +39,8 @@
:label="$gettext('Folder')"
>
</v-autocomplete>
</v-flex>
<v-flex xs12 text-xs-right class="pt-4">
</v-col>
<v-col cols="12" class="text-xs-right pt-6">
<v-btn depressed color="secondary-light" class="action-cancel ml-0 mt-0 mb-0 mr-2" @click.stop="cancel">
<translate>Cancel</translate>
</v-btn>
@ -50,8 +50,8 @@
<v-btn v-else :disabled="noServices" color="primary-button" depressed dark class="action-upload ma-0" @click.stop="confirm">
<translate>Upload</translate>
</v-btn>
</v-flex>
</v-layout>
</v-col>
</v-row>
</v-card-text>
</v-card>
</v-dialog>

30
frontend/src/dialog/sponsor.vue
View file

@ -1,21 +1,21 @@
<template>
<v-dialog :value="show" lazy persistent max-width="575" class="modal-dialog sponsor-dialog" @keydown.esc="close">
<v-dialog :value="show" persistent max-width="575" class="modal-dialog sponsor-dialog" @keydown.esc="close">
<v-card raised elevation="24">
<v-card-title primary-title class="px-2 pb-0">
<v-layout row wrap class="px-2">
<v-flex xs10>
<v-row class="px-2">
<v-col cols="10">
<h3 class="title mb-0">
<translate>Support Our Mission</translate>
</h3>
</v-flex>
<v-flex xs2 text-xs-right>
</v-col>
<v-col cols="2" class="text-xs-right">
<v-icon size="26" color="secondary-dark" v-html="'$vuetify.icons.prism'"></v-icon>
</v-flex>
</v-layout>
</v-col>
</v-row>
</v-card-title>
<v-card-text class="px-2">
<v-layout row wrap class="px-2">
<v-flex xs12 class="py-1">
<v-row class="px-2">
<v-col cols="12" class="py-1">
<p class="body-2">
<translate>Your continued support helps us provide regular updates and remain independent, so we can fulfill our mission and protect your privacy.</translate>
</p>
@ -25,12 +25,12 @@
<p class="body-1">
<translate>You are welcome to contact us at membership@photoprism.app for questions regarding your membership.</translate>
</p>
</v-flex>
</v-layout>
</v-col>
</v-row>
</v-card-text>
<v-card-actions class="pt-0 px-2">
<v-layout row wrap class="px-2">
<v-flex xs12 text-xs-right class="py-2">
<v-row class="px-2">
<v-col cols="12" class="text-xs-right py-2">
<v-btn depressed color="secondary-light" class="action-close compact" @click.stop="close">
<translate>No thanks</translate>
</v-btn>
@ -40,8 +40,8 @@
<v-btn v-else depressed color="primary-button" class="white--text action-upgrade compact" @click.stop="upgrade">
<translate>Upgrade Now</translate>
</v-btn>
</v-flex>
</v-layout>
</v-col>
</v-row>
</v-card-actions>
</v-card>
</v-dialog>

19
frontend/src/dialog/upload.vue
View file

@ -1,5 +1,5 @@
<template>
<v-dialog :value="show" fullscreen hide-overlay scrollable lazy 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-toolbar dark flat color="navigation" :dense="$vuetify.breakpoint.smAndDown">
<v-btn icon dark @click.stop="cancel">
@ -14,7 +14,8 @@
<input ref="upload" type="file" multiple class="d-none input-upload" @change.stop="onUpload()" />
<v-container fluid>
<p class="subheading">
<p class="subtitle-1">
<!-- TODO: check property allow-overflow -->
<v-combobox
v-if="total === 0"
v-model="selectedAlbums"
@ -34,16 +35,16 @@
return-object
>
<template #no-data>
<v-list-tile>
<v-list-tile-content>
<v-list-tile-title>
<v-list-item>
<v-list-item-content>
<v-list-item-title>
<translate key="Press enter to create a new album.">Press enter to create a new album.</translate>
</v-list-tile-title>
</v-list-tile-content>
</v-list-tile>
</v-list-item-title>
</v-list-item-content>
</v-list-item>
</template>
<template #selection="data">
<v-chip :key="JSON.stringify(data.item)" :selected="data.selected" :disabled="data.disabled" class="v-chip--select-multi" @input="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">bookmark</v-icon>
{{ data.item.Title ? data.item.Title : data.item | truncate(40) }}
</v-chip>

20
frontend/src/dialog/webdav.vue
View file

@ -1,17 +1,17 @@
<template>
<v-dialog v-model="visible" lazy max-width="500">
<v-dialog v-model="visible" max-width="500">
<v-card class="pa-2">
<v-card-title class="headline pa-0">
<v-layout row wrap class="pa-2">
<v-flex xs9 class="text-xs-left">
<v-row class="pa-2">
<v-col cols="9" class="text-xs-left">
<h3 class="headline pa-0">
<translate>Connect via WebDAV</translate>
</h3>
</v-flex>
<v-flex xs3 class="text-xs-right">
</v-col>
<v-col cols="3" class="text-xs-right">
<v-icon size="28" color="primary">sync_alt</v-icon>
</v-flex>
</v-layout>
</v-col>
</v-row>
</v-card-title>
<v-card-text class="pa-2 body-1">
@ -19,7 +19,7 @@
</v-card-text>
<v-card-text class="pa-2 body-1">
<v-text-field autocorrect="off" autocapitalize="none" browser-autocomplete="off" hide-details readonly single-line outline color="secondary-dark" :value="webdavUrl()" class="input-url" @click.stop="selectText($event)"> </v-text-field>
<v-text-field autocorrect="off" autocapitalize="none" autocomplete="off" hide-details readonly single-line outlined color="secondary-dark" :value="webdavUrl()" class="input-url" @click.stop="selectText($event)"> </v-text-field>
</v-card-text>
<v-card-text class="pa-2 body-1 clickable" @click="windowsHelp($event)">
@ -27,7 +27,7 @@
</v-card-text>
<v-card-text class="pa-2 body-1">
<v-text-field autocorrect="off" autocapitalize="none" browser-autocomplete="off" hide-details readonly single-line outline color="secondary-dark" :value="windowsUrl()" class="input-url" @click.stop="selectText($event)"> </v-text-field>
<v-text-field autocorrect="off" autocapitalize="none" autocomplete="off" hide-details readonly single-line outlined color="secondary-dark" :value="windowsUrl()" class="input-url" @click.stop="selectText($event)"> </v-text-field>
</v-card-text>
<v-card-text class="pa-2 body-1">
@ -35,7 +35,7 @@
</v-card-text>
<v-card-text class="pa-2 body-1">
<v-alert :value="true" color="primary darken-2" icon="info" class="pa-2" type="info" outline>
<v-alert color="primary darken-2" icon="info" class="pa-2" type="info" outlined>
<a style="color: inherit" href="https://docs.photoprism.app/user-guide/sync/webdav/" target="_blank">
<translate>Detailed instructions can be found in our User Guide.</translate>
</a>

34
frontend/src/page/about/about.vue
View file

@ -9,8 +9,8 @@
<v-icon size="26" color="secondary-dark" v-html="'$vuetify.icons.prism'"></v-icon>
</v-btn>
</v-toolbar>
<v-container fluid class="px-4 pt-4 pb-1">
<p class="subheading py-1 pb-2">
<v-container fluid class="px-6 pt-6 pb-1">
<p class="subtitle-1 py-1 pb-2">
<a href="https://www.photoprism.app/" target="_blank">
<strong>
<translate>Our mission is to provide the most user- and privacy-friendly solution to keep your pictures organized and accessible.</translate>
@ -20,7 +20,7 @@
</p>
<template v-if="canUpgrade">
<h3 class="subheading py-2">
<h3 class="subtitle-1 py-2">
<translate>PhotoPrism+ Membership</translate>
</h3>
<p class="text-selectable">
@ -28,15 +28,15 @@
<translate>Your continued support helps us provide regular updates and remain independent, so we can fulfill our mission and protect your privacy.</translate>
<translate>Being 100% self-funded and independent, we can promise you that we will never sell your data and that we will always be transparent about our software and services.</translate>
</p>
<p v-if="isSuperAdmin" class="text-xs-center my-4">
<v-btn to="/upgrade" color="primary-button" class="white--text px-3 py-2 action-membership" round depressed>
<p v-if="isSuperAdmin" class="text-xs-center my-6">
<v-btn to="/upgrade" color="primary-button" class="white--text px-4 py-2 action-membership" rounded depressed>
<translate>Upgrade Now</translate>
<v-icon v-if="rtl" left dark>navigate_before</v-icon>
<v-icon v-else right dark>navigate_next</v-icon>
</v-btn>
</p>
<p v-else class="text-xs-center my-4">
<v-btn href="https://link.photoprism.app/membership" target="_blank" color="primary-button" class="white--text px-3 py-2 action-membership" round depressed>
<p v-else class="text-xs-center my-6">
<v-btn href="https://link.photoprism.app/membership" target="_blank" color="primary-button" class="white--text px-4 py-2 action-membership" rounded depressed>
<translate>Learn more</translate>
<v-icon v-if="rtl" left dark>navigate_before</v-icon>
<v-icon v-else right dark>navigate_next</v-icon>
@ -44,14 +44,14 @@
</p>
</template>
<template v-else-if="isSuperAdmin">
<h3 class="subheading py-2"> <translate>Thank You for Your Support!</translate> <v-icon size="20" color="primary">favorite</v-icon> </h3>
<h3 class="subtitle-1 py-2"> <translate>Thank You for Your Support!</translate> <v-icon size="20" color="primary">favorite</v-icon> </h3>
<p class="text-selectable">
<translate>PhotoPrism is 100% self-funded and independent.</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>
</p>
<p class="text-xs-center my-4">
<v-btn href="https://my.photoprism.app/dashboard" target="_blank" color="primary-button" class="white--text px-3 py-2 action-membership" round depressed>
<p class="text-xs-center my-6">
<v-btn href="https://my.photoprism.app/dashboard" target="_blank" color="primary-button" class="white--text px-4 py-2 action-membership" rounded depressed>
<translate>Manage Account</translate>
<v-icon v-if="rtl" left dark>navigate_before</v-icon>
<v-icon v-else right dark>navigate_next</v-icon>
@ -60,13 +60,13 @@
</template>
<div class="text-columns py-2">
<h3 class="subheading pb-2"> Getting Started </h3>
<h3 class="subtitle-1 pb-2"> Getting Started </h3>
<p class="text-selectable">
Follow our <a href="https://docs.photoprism.app/user-guide/first-steps/" class="text-link" target="_blank">First Steps 👣</a> tutorial to learn how to navigate the user interface and ensure your library is indexed according to your individual preferences. Additional help and
product-specific information can be found in our <a href="https://www.photoprism.app/plus/kb" class="text-link" target="_blank">Knowledge Base</a>.
</p>
<h3 class="subheading pb-2"> User Guide </h3>
<h3 class="subtitle-1 pb-2"> User Guide </h3>
<p>
Visit <a href="https://link.photoprism.app/docs" class="text-link" target="_blank">docs.photoprism.app/user-guide</a> to learn how to sync, organize, and share your pictures. Our <a href="https://docs.photoprism.app/user-guide/" class="text-link" target="_blank">User Guide</a> also covers
many advanced topics, such as <a href="https://docs.photoprism.app/user-guide/use-cases/google/" class="text-link" target="_blank">migrating from Google Photos</a> and
@ -74,7 +74,7 @@
<a href="https://docs.photoprism.app/getting-started/troubleshooting/" class="text-link" target="_blank">docs.photoprism.app/getting-started/troubleshooting</a>.
</p>
<h3 class="subheading pb-2"> Getting Support </h3>
<h3 class="subtitle-1 pb-2"> Getting Support </h3>
<p
>Before reporting a bug, please use our <a href="https://docs.photoprism.app/getting-started/troubleshooting/" class="text-link" target="_blank">Troubleshooting Checklists</a> to determine the cause of your problem. If you have a general question, need help, it could be a local
configuration issue, or a misunderstanding in how the software works, you are welcome to ask in our <a href="https://link.photoprism.app/chat" class="text-link" target="_blank">Community Chat</a> or post your question in
@ -86,7 +86,7 @@
>
<p>We kindly ask you not to report bugs via GitHub Issues unless you are certain to have found a fully reproducible and previously unreported issue that must be fixed directly in the app.</p>
<h3 class="subheading pb-2"> Developer Guide </h3>
<h3 class="subtitle-1 pb-2"> Developer Guide </h3>
<p
>Our <a href="https://docs.photoprism.app/developer-guide/" class="text-link" target="_blank">Developer Guide</a> contains all the information you need to get started as a developer. It guides you from
<a href="https://docs.photoprism.app/developer-guide/setup/" class="text-link" target="_blank">setting up your development environment</a> and <a href="https://docs.photoprism.app/developer-guide/pull-requests/" class="text-link" target="_blank">creating pull requests</a> to
@ -94,7 +94,7 @@
on specific features and links to external resources for further information.</p
>
<h3 class="subheading pb-2"> Terms &amp; Privacy </h3>
<h3 class="subtitle-1 pb-2"> Terms &amp; Privacy </h3>
<p
>Visit <a href="https://www.photoprism.app/terms" class="text-link" target="_blank"><strong>photoprism.app/terms</strong></a> to learn how we work, what you can expect from us, and what we expect from you. What information we collect, how we use it, and under what circumstances we share it
is explained in our <a href="https://www.photoprism.app/privacy" class="text-link" target="_blank">Privacy Policy</a>.</p
@ -111,7 +111,7 @@
>
</div>
<p class="text-xs-center pt-4 ma-0 pb-0">
<p class="text-xs-center pt-6 ma-0 pb-0">
<router-link to="/license">
<img :src="$config.staticUri + '/img/badge-agpl.svg'" alt="License AGPL v3" style="max-width: 100%" />
</router-link>
@ -122,7 +122,7 @@
<a target="_blank" href="https://link.photoprism.app/reddit" rel="nofollow"><img :src="$config.staticUri + '/img/badge-reddit.svg'" alt="Reddit" style="max-width: 100%" /></a>
</p>
<p class="caption mt-4 text-xs-center">
<p class="caption mt-6 text-xs-center">
PhotoPrism® is a <a href="https://www.photoprism.app/trademark" target="_blank" class="text-link">registered trademark</a>. By using the software and services we provide, you agree to our <a href="https://www.photoprism.app/terms" target="_blank" class="text-link">Terms of Service</a>,
<a href="https://www.photoprism.app/privacy" target="_blank" class="text-link">Privacy Policy</a>, and <a href="https://www.photoprism.app/code-of-conduct" target="_blank" class="text-link">Code of Conduct</a>.
</p>

42
frontend/src/page/about/feedback.vue
View file

@ -9,21 +9,21 @@
<v-icon size="26" color="secondary-dark">chat</v-icon>
</v-btn>
</v-toolbar>
<v-container v-if="sent" fluid class="pa-4">
<h3 class="title font-weight-bold pt-4 pb-2 text-xs-center">
<v-container v-if="sent" fluid class="pa-6">
<h3 class="title font-weight-bold pt-6 pb-2 text-xs-center">
<translate>We appreciate your feedback!</translate>
</h3>
<p class="body-2 py-4 text-xs-center">
<p class="body-2 py-6 text-xs-center">
<translate>Due to the high volume of emails we receive, our team may be unable to get back to you immediately.</translate>
<translate>We do our best to respond within five business days or less.</translate>
</p>
<p class="mt-4 text-xs-center">
<p class="mt-6 text-xs-center">
<img src="https://cdn.photoprism.app/thank-you/colorful.png" width="100%" alt="THANK YOU" />
</p>
</v-container>
<v-form v-else ref="form" v-model="valid" autocomplete="off" class="pa-3" lazy-validation>
<v-layout row wrap>
<v-flex xs12 class="pa-2">
<v-form v-else ref="form" v-model="valid" autocomplete="off" class="pa-4" lazy-validation>
<v-row>
<v-col cols="12" class="pa-2">
<v-select
v-model="form.Category"
:disabled="busy"
@ -35,31 +35,31 @@
solo
hide-details
required
browser-autocomplete="off"
autocomplete="off"
class="input-category"
:rules="[(v) => !!v || $gettext('Required')]"
></v-select>
</v-flex>
</v-col>
<v-flex xs12 class="pa-2">
<v-textarea v-model="form.Message" required auto-grow flat solo hide-details browser-autocomplete="off" rows="10" :rules="[(v) => !!v || $gettext('Required')]" :label="$gettext('How can we help?')"></v-textarea>
</v-flex>
<v-col cols="12" class="pa-2">
<v-textarea v-model="form.Message" required auto-grow flat solo hide-details autocomplete="off" rows="10" :rules="[(v) => !!v || $gettext('Required')]" :label="$gettext('How can we help?')"></v-textarea>
</v-col>
<v-flex xs12 sm6 class="pa-2">
<v-text-field v-model="form.UserName" flat solo hide-details browser-autocomplete="off" color="secondary-dark" background-color="secondary-light" :label="$gettext('Name')" type="text"> </v-text-field>
</v-flex>
<v-col cols="12" sm="6" class="pa-2">
<v-text-field v-model="form.UserName" flat solo hide-details autocomplete="off" color="secondary-dark" background-color="secondary-light" :label="$gettext('Name')" type="text"> </v-text-field>
</v-col>
<v-flex xs12 sm6 class="pa-2">
<v-col cols="12" sm="6" class="pa-2">
<v-text-field v-model="form.UserEmail" flat solo hide-details required autocapitalize="none" color="secondary-dark" :rules="[(v) => !!v || $gettext('Required')]" background-color="secondary-light" :label="$gettext('E-Mail')" type="email"> </v-text-field>
</v-flex>
</v-col>
<v-flex xs12 grow class="px-2 py-1">
<v-btn color="primary-button" class="white--text ml-0" depressed :disabled="!form.Category || !form.Message || !form.UserEmail" @click.stop="send">
<v-col cols="12" class="d-flex grow px-2 py-1">
<v-btn color="primary-button" class="white--text ml-0 flex-grow-1" depressed :disabled="!form.Category || !form.Message || !form.UserEmail" @click.stop="send">
<translate>Send</translate>
<v-icon :right="!rtl" :left="rtl" dark>send</v-icon>
</v-btn>
</v-flex>
</v-layout>
</v-col>
</v-row>
</v-form>
<p-about-footer></p-about-footer>

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

@ -11,7 +11,7 @@
<img :src="$config.staticUri + '/img/agplv3-small.png'" alt="AGPLv3 Logo" />
</a>
</v-toolbar>
<v-container fluid class="pa-4 text-selectable">
<v-container fluid class="pa-6 text-selectable">
<h3 style="text-align: center">GNU AFFERO GENERAL PUBLIC LICENSE</h3>
<p style="text-align: center">Version 3, 19 November 2007</p>

2
frontend/src/page/album/photos.vue
View file

@ -2,7 +2,7 @@
<div v-infinite-scroll="loadMore" class="p-page p-page-album-photos" :infinite-scroll-disabled="scrollDisabled" :infinite-scroll-distance="scrollDistance" :infinite-scroll-listen-for-event="'scrollRefresh'">
<p-album-toolbar :filter="filter" :album="model" :settings="settings" :refresh="refresh" :update-filter="updateFilter" :update-query="updateQuery"></p-album-toolbar>
<v-container v-if="loading" fluid class="pa-4">
<v-container v-if="loading" fluid class="pa-6">
<v-progress-linear color="secondary-dark" :indeterminate="true"></v-progress-linear>
</v-container>
<v-container v-else fluid class="pa-0">

46
frontend/src/page/albums.vue
View file

@ -12,7 +12,7 @@
validate-on-blur
class="input-search background-inherit elevation-0"
:label="$gettext('Search')"
browser-autocomplete="off"
autocomplete="off"
autocorrect="off"
autocapitalize="none"
prepend-inner-icon="search"
@ -22,7 +22,7 @@
updateFilter({ q: v });
}
"
@keyup.enter.native="(e) => updateQuery({ q: e.target.value })"
@keyup.enter="(e) => updateQuery({ q: e.target.value })"
@click:clear="
() => {
updateQuery({ q: '' });
@ -48,8 +48,8 @@
</v-toolbar>
<v-card v-show="searchExpanded" class="pt-1 page-toolbar-expanded" flat color="secondary-light">
<v-card-text>
<v-layout row wrap>
<v-flex xs12 sm4 pa-2 class="p-year-select">
<v-row>
<v-col cols="12" sm="4" class="pa-2 p-year-select">
<v-select
:value="filter.year"
:label="$gettext('Year')"
@ -70,8 +70,8 @@
"
>
</v-select>
</v-flex>
<v-flex xs12 sm4 pa-2 class="p-category-select">
</v-col>
<v-col cols="12" sm="4" class="pa-2 p-category-select">
<v-select
:value="filter.category"
:label="$gettext('Category')"
@ -89,8 +89,8 @@
"
>
</v-select>
</v-flex>
<v-flex xs12 sm4 pa-2 class="p-sort-select">
</v-col>
<v-col cols="12" sm="4" class="pa-2 p-sort-select">
<v-select
:value="filter.order"
:label="$gettext('Sort Order')"
@ -108,13 +108,13 @@
"
>
</v-select>
</v-flex>
</v-layout>
</v-col>
</v-row>
</v-card-text>
</v-card>
</v-form>
<v-container v-if="loading" fluid class="pa-4">
<v-container v-if="loading" fluid class="pa-6">
<v-progress-linear color="secondary-dark" :indeterminate="true"></v-progress-linear>
</v-container>
<v-container v-else fluid class="pa-0">
@ -123,7 +123,7 @@
<p-album-clipboard :refresh="refresh" :selection="selection" :share="share" :edit="edit" :clear-selection="clearSelection" :context="context"></p-album-clipboard>
<v-container grid-list-xs fluid class="pa-2">
<v-alert :value="results.length === 0" color="secondary-dark" icon="lightbulb_outline" class="no-results ma-2 opacity-70" outline>
<v-alert :value="results.length === 0" color="secondary-dark" icon="lightbulb_outline" class="no-results ma-2 opacity-70" outlined>
<h3 class="body-2 ma-0 pa-0">
<translate>No albums found</translate>
</h3>
@ -138,9 +138,9 @@
</p>
</v-alert>
<v-layout row wrap class="search-results album-results cards-view" :class="{ 'select-results': selection.length > 0 }">
<v-flex v-for="(album, index) in results" :key="album.UID" xs6 sm4 md3 xlg2 xxl1 d-flex>
<v-card tile :data-uid="album.UID" style="user-select: none" class="result card" :class="album.classes(selection.includes(album.UID))" :to="album.route(view)" @contextmenu.stop="onContextMenu($event, index)">
<v-row class="search-results album-results cards-view" :class="{ 'select-results': selection.length > 0 }">
<v-col v-for="(album, index) in results" :key="album.UID" cols="6" sm="4" md="3" xl="2" xxl="1" class="d-flex">
<v-card tile :data-uid="album.UID" style="user-select: none" class="result card flex-grow-1" :class="album.classes(selection.includes(album.UID))" :to="album.route(view)" @contextmenu.stop="onContextMenu($event, index)">
<div class="card-background card" style="user-select: none"></div>
<v-img
:src="album.thumbnailUrl('tile_500')"
@ -154,16 +154,16 @@
@mousedown.stop.prevent="input.mouseDown($event, index)"
@click.stop.prevent="onClick($event, index)"
>
<v-btn v-if="canShare && album.LinkCount > 0" :ripple="false" icon flat absolute class="action-share" @touchstart.stop.prevent="input.touchStart($event, index)" @touchend.stop.prevent="onShare($event, index)" @touchmove.stop.prevent @click.stop.prevent="onShare($event, index)">
<v-btn v-if="canShare && album.LinkCount > 0" :ripple="false" icon text absolute class="action-share" @touchstart.stop.prevent="input.touchStart($event, index)" @touchend.stop.prevent="onShare($event, index)" @touchmove.stop.prevent @click.stop.prevent="onShare($event, index)">
<v-icon color="white">share</v-icon>
</v-btn>
<v-btn :ripple="false" icon flat absolute class="input-select" @touchstart.stop.prevent="input.touchStart($event, index)" @touchend.stop.prevent="onSelect($event, index)" @touchmove.stop.prevent @click.stop.prevent="onSelect($event, index)">
<v-btn :ripple="false" icon text absolute class="input-select" @touchstart.stop.prevent="input.touchStart($event, index)" @touchend.stop.prevent="onSelect($event, index)" @touchmove.stop.prevent @click.stop.prevent="onSelect($event, index)">
<v-icon color="white" class="select-on">check_circle</v-icon>
<v-icon color="white" class="select-off">radio_button_off</v-icon>
</v-btn>
<v-btn :ripple="false" icon flat absolute class="input-favorite" @touchstart.stop.prevent="input.touchStart($event, index)" @touchend.stop.prevent="toggleLike($event, index)" @touchmove.stop.prevent @click.stop.prevent="toggleLike($event, index)">
<v-btn :ripple="false" icon text absolute class="input-favorite" @touchstart.stop.prevent="input.touchStart($event, index)" @touchend.stop.prevent="toggleLike($event, index)" @touchmove.stop.prevent @click.stop.prevent="toggleLike($event, index)">
<v-icon color="#FFD600" class="select-on">star</v-icon>
<v-icon color="white" class="select-off">star_border</v-icon>
</v-btn>
@ -172,7 +172,7 @@
v-if="canManage && experimental && featPrivate && album.Private"
:ripple="false"
icon
flat
text
absolute
class="input-private"
@touchstart.stop.prevent="input.touchStart($event, index)"
@ -184,7 +184,7 @@
</v-btn>
</v-img>
<v-card-title primary-title class="pl-3 pt-3 pr-3 pb-2 card-details" style="user-select: none">
<v-card-title primary-title class="pl-4 pt-4 pr-4 pb-2 card-details" style="user-select: none">
<div>
<h3 class="body-2 mb-0">
<button v-if="album.Type !== 'month'" class="action-title-edit" :data-uid="album.UID" @click.stop.prevent="edit(album)">
@ -234,10 +234,10 @@
</div>
</v-card-text>
</v-card>
</v-flex>
</v-layout>
</v-col>
</v-row>
<div v-if="canManage && staticFilter.type === 'album' && config.count.albums === 0" class="text-xs-center my-2">
<v-btn class="action-add" color="secondary" round @click.prevent="create">
<v-btn class="action-add" color="secondary" rounded @click.prevent="create">
<translate>Add Album</translate>
</v-btn>
</div>

254
frontend/src/page/auth/login.vue
View file

@ -1,143 +1,137 @@
<template>
<v-container id="auth-login" fluid fill-height class="auth-login wallpaper background-welcome pa-4" :style="wallpaper()">
<v-layout id="auth-layout" class="auth-layout">
<v-flex xs12 sm9 md6 lg4 xl3 xxl2>
<v-container id="auth-login" fluid fill-height class="auth-login wallpaper background-welcome pa-6" :style="wallpaper()">
<v-row id="auth-layout" class="auth-layout">
<v-col cols="12" sm="9" md="6" lg="4" xl="3">
<v-form ref="form" dense class="auth-login-form" accept-charset="UTF-8" @submit.prevent="onLogin">
<v-card id="auth-login-box" class="elevation-12 auth-login-box blur-7">
<v-card-text class="pa-4">
<v-card-text class="pa-6">
<p-auth-header></p-auth-header>
<v-spacer></v-spacer>
<v-layout wrap align-top>
<template v-if="enterCode">
<v-flex xs12 class="pa-2 pb-3 body-1">
<translate>Enter the verification code generated by your authenticator app:</translate>
</v-flex>
<v-flex xs12 class="px-2 py-1">
<v-text-field
id="one-time-code"
key="auth-input-code"
ref="code"
v-model="code"
:disabled="loading"
name="code"
type="text"
:label="$gettext('Verification Code')"
mask="nnn nnn nnn nnn"
inputmode="text"
hide-details
required
solo
flat
light
autofocus
autocorrect="off"
autocapitalize="none"
autocomplete="one-time-code"
browser-autocomplete="one-time-code"
background-color="grey lighten-5"
class="input-code text-selectable"
prepend-inner-icon="verified_user"
color="primary"
@keyup.enter.native="onLogin"
></v-text-field>
</v-flex>
</template>
<template v-else>
<v-flex xs12 class="pa-2">
<v-text-field
id="auth-username"
key="auth-input-username"
v-model="username"
:disabled="loading || enterCode"
name="username"
type="text"
:label="$gettext('Name')"
hide-details
required
solo
flat
light
autofocus
autocorrect="off"
autocapitalize="none"
autocomplete="username"
browser-autocomplete="username"
background-color="grey lighten-5"
class="input-username text-selectable"
color="primary"
prepend-inner-icon="person"
@keyup.enter.native="onLogin"
></v-text-field>
</v-flex>
<v-flex xs12 class="px-2 py-1">
<v-text-field
id="auth-password"
key="auth-input-password"
v-model="password"
:disabled="loading"
name="password"
:type="showPassword ? 'text' : 'password'"
:label="$gettext('Password')"
hide-details
required
solo
flat
light
autocorrect="off"
autocapitalize="none"
autocomplete="current-password"
browser-autocomplete="current-password"
background-color="grey lighten-5"
class="input-password text-selectable"
:append-icon="showPassword ? 'visibility' : 'visibility_off'"
prepend-inner-icon="lock"
color="primary"
@click:append="showPassword = !showPassword"
@keyup.enter.native="onLogin"
></v-text-field>
</v-flex>
</template>
<v-flex xs12 class="px-2 pt-1 pb-0 auth-actions">
<div class="action-buttons auth-buttons text-xs-center">
<v-btn v-if="enterCode" :color="colors.secondary" outline :block="$vuetify.breakpoint.xsOnly" :style="`color: ${colors.link}!important`" class="action-cancel ra-6 px-3 py-2 opacity-80" @click.stop.prevent="onCancel">
<translate>Cancel</translate>
</v-btn>
<v-btn v-else-if="registerUri" :color="colors.secondary" outline :block="$vuetify.breakpoint.xsOnly" :style="`color: ${colors.link}!important`" class="action-register ra-6 px-3 py-2 opacity-80" @click.stop.prevent="onRegister">
<translate>Create Account</translate>
</v-btn>
<v-btn :color="colors.primary" depressed :disabled="loginDisabled" :block="$vuetify.breakpoint.xsOnly" class="white--text action-confirm ra-6 py-2 px-3" @click.stop.prevent="onLogin">
<translate>Sign in</translate>
<v-icon v-if="rtl" left dark>navigate_before</v-icon>
<v-icon v-else right dark>navigate_next</v-icon>
</v-btn>
</div>
<div v-if="enterCode" class="auth-links text-xs-center opacity-80">
<translate>Can't access your authenticator app or device?</translate>
<translate>Use your recovery code or contact an administrator for help.</translate>
</div>
<div v-else-if="passwordResetUri" class="auth-links text-xs-center opacity-80">
<a :href="passwordResetUri" class="text-link link--text">
<translate>Forgot password?</translate>
</a>
</div>
</v-flex>
<template v-if="config.ext.oidc.enabled && !enterCode">
<v-flex xs12 class="px-2 pb-3 oidc-actions">
<v-divider :dark="true"></v-divider>
<div class="text-xs-center oidc-buttons pt-4">
<v-btn :color="colors.primary" depressed :disabled="loading" block class="white--text action-oidc-login ra-6 my-0 py-0 px-3" @click.stop.prevent="onOidcLogin">
<img alt="" class="oidc-icon v-icon--left theme--dark" :src="config.ext.oidc.icon" />
<translate :translate-params="{ provider: config.ext.oidc.provider }">Continue with %{provider}</translate>
<v-row align="start">
<template v-if="enterCode">
<v-col cols="12" class="pa-2 pb-4 body-1">
<translate>Enter the verification code generated by your authenticator app:</translate>
</v-col>
<v-col cols="12" class="px-2 py-1">
<v-text-field
id="one-time-code"
key="auth-input-code"
ref="code"
v-model="code"
:disabled="loading"
name="code"
type="text"
:label="$gettext('Verification Code')"
mask="nnn nnn nnn nnn"
inputmode="text"
hide-details
required
solo
light
autofocus
autocorrect="off"
autocapitalize="none"
autocomplete="one-time-code"
background-color="grey lighten-5"
class="input-code text-selectable"
prepend-inner-icon="verified_user"
color="primary"
@keyup.enter="onLogin"
></v-text-field>
</v-col>
</template>
<template v-else>
<v-col cols="12" class="pa-2">
<v-text-field
id="auth-username"
key="auth-input-username"
v-model="username"
:disabled="loading || enterCode"
name="username"
type="text"
:label="$gettext('Name')"
hide-details
required
solo
light
autofocus
autocorrect="off"
autocapitalize="none"
autocomplete="username"
background-color="grey lighten-5"
class="input-username text-selectable"
color="primary"
prepend-inner-icon="person"
@keyup.enter="onLogin"
></v-text-field>
</v-col>
<v-col cols="12" class="px-2 py-1">
<v-text-field
id="auth-password"
key="auth-input-password"
v-model="password"
:disabled="loading"
name="password"
:type="showPassword ? 'text' : 'password'"
:label="$gettext('Password')"
hide-details
required
solo
light
autocorrect="off"
autocapitalize="none"
autocomplete="current-password"
background-color="grey lighten-5"
class="input-password text-selectable"
:append-icon="showPassword ? 'mdi-eye' : 'mdi-eye-off'"
prepend-inner-icon="lock"
color="primary"
@click:append="showPassword = !showPassword"
@keyup.enter="onLogin"
></v-text-field>
</v-col>
</template>
<v-col cols="12" class="px-2 pt-1 pb-0 auth-actions">
<div class="action-buttons auth-buttons text-xs-center">
<v-btn v-if="enterCode" :color="colors.secondary" outlined :block="$vuetify.breakpoint.xsOnly" :style="`color: ${colors.link}!important`" class="action-cancel ra-6 px-4 py-2 opacity-80" @click.stop.prevent="onCancel">
<translate>Cancel</translate>
</v-btn>
<v-btn v-else-if="registerUri" :color="colors.secondary" outlined :block="$vuetify.breakpoint.xsOnly" :style="`color: ${colors.link}!important`" class="action-register ra-6 px-4 py-2 opacity-80" @click.stop.prevent="onRegister">
<translate>Create Account</translate>
</v-btn>
<v-btn :color="colors.primary" depressed :disabled="loginDisabled" :block="$vuetify.breakpoint.xsOnly" class="white--text action-confirm ra-6 py-2 px-4" @click.stop.prevent="onLogin">
<translate>Sign in</translate>
<v-icon v-if="rtl" left dark>navigate_before</v-icon>
<v-icon v-else right dark>navigate_next</v-icon>
</v-btn>
</div>
</v-flex>
</template>
</v-layout>
<div v-if="enterCode" class="auth-links text-xs-center opacity-80">
<translate>Can't access your authenticator app or device?</translate>
<translate>Use your recovery code or contact an administrator for help.</translate>
</div>
<div v-else-if="passwordResetUri" class="auth-links text-xs-center opacity-80">
<a :href="passwordResetUri" class="text-link link--text">
<translate>Forgot password?</translate>
</a>
</div>
</v-col>
<template v-if="config.ext.oidc.enabled && !enterCode">
<v-col cols="12" class="px-2 pb-4 oidc-actions">
<v-divider :dark="true"></v-divider>
<div class="text-xs-center oidc-buttons pt-6">
<v-btn :color="colors.primary" depressed :disabled="loading" block class="white--text action-oidc-login ra-6 my-0 py-0 px-4" @click.stop.prevent="onOidcLogin">
<img alt="" class="oidc-icon v-icon--left theme--dark" :src="config.ext.oidc.icon" />
<translate :translate-params="{ provider: config.ext.oidc.provider }">Continue with %{provider}</translate>
</v-btn>
</div>
</v-col>
</template>
</v-row>
</v-card-text>
</v-card>
</v-form>
</v-flex>
</v-layout>
</v-col>
</v-row>
<p-auth-footer :colors="colors"></p-auth-footer>
</v-container>
</template>

72
frontend/src/page/connect.vue
View file

@ -25,38 +25,38 @@
<v-icon size="26" color="secondary-dark" v-html="'$vuetify.icons.prism'"></v-icon>
</v-btn>
</v-toolbar>
<v-form ref="form" v-model="valid" autocomplete="off" class="px-3 pt-3 pb-0" lazy-validation @submit.prevent>
<v-layout v-if="busy" row wrap>
<v-flex xs12 d-flex class="text-sm-center pa-2">
<v-progress-linear color="secondary-dark" :indeterminate="true"></v-progress-linear>
</v-flex>
</v-layout>
<v-layout v-else-if="error" row wrap>
<v-flex xs12 class="text-sm-left pa-2">
<v-alert :value="true" color="error" icon="gpp_bad" class="mt-3" outline>
<v-form ref="form" v-model="valid" autocomplete="off" class="px-6 pt-6 pb-0" lazy-validation @submit.prevent>
<v-row v-if="busy">
<v-col cols="12" class="d-flex text-sm-center pa-2">
<v-progress-linear color="secondary-dark flex-grow-1" :indeterminate="true"></v-progress-linear>
</v-col>
</v-row>
<v-row v-else-if="error">
<v-col cols="12" class="text-sm-left pa-2">
<v-alert color="error" icon="gpp_bad" class="mt-6" outlined>
{{ error }}
</v-alert>
</v-flex>
<v-flex xs12 class="pa-2">
<v-btn color="primary-button lighten-2" :block="$vuetify.breakpoint.xsOnly" class="ml-0" outline :disabled="busy" @click.stop="reset">
</v-col>
<v-col cols="12" class="pa-2">
<v-btn color="primary-button lighten-2" :block="$vuetify.breakpoint.xsOnly" class="ml-0" outlined :disabled="busy" @click.stop="reset">
<translate>Cancel</translate>
</v-btn>
<v-btn color="primary-button" :block="$vuetify.breakpoint.xsOnly" class="white--text ml-0" href="https://www.photoprism.app/contact" target="_blank" depressed>
<translate>Contact Us</translate>
</v-btn>
</v-flex>
</v-layout>
<v-layout v-else-if="success" row wrap>
<v-flex xs12 d-flex class="pa-2">
<p class="subheading text-xs-left">
</v-col>
</v-row>
<v-row v-else-if="success">
<v-col cols="12" class="pa-2 d-flex">
<p class="subtitle-1 text-xs-left flex-grow-1">
<translate>Your account has been successfully connected.</translate>
<span v-if="$config.values.restart">
<translate>Please restart your instance for the changes to take effect.</translate>
</span>
</p>
</v-flex>
<v-flex xs12 grow class="pa-2">
<v-btn href="https://my.photoprism.app/dashboard" target="_blank" color="primary-button lighten-2" :block="$vuetify.breakpoint.xsOnly" class="ml-0" outline :disabled="busy">
</v-col>
<v-col cols="12" class="d-flex grow pa-2">
<v-btn href="https://my.photoprism.app/dashboard" target="_blank" color="primary-button lighten-2 flex-grow-1" :block="$vuetify.breakpoint.xsOnly" class="ml-0" outlined :disabled="busy">
<translate>Manage Account</translate>
</v-btn>
<v-btn v-if="$config.values.restart && !$config.values.disable.restart" color="primary-button" :block="$vuetify.breakpoint.xsOnly" class="white--text ml-0" depressed :disabled="busy" @click.stop.p.prevent="onRestart">
@ -68,24 +68,24 @@
<v-icon v-if="rtl" left dark>navigate_before</v-icon>
<v-icon v-else right dark>navigate_next</v-icon>
</v-btn>
</v-flex>
</v-layout>
<v-layout v-else row wrap>
<v-flex v-if="$config.getTier() < 4" xs12 grow align-center justify-center class="px-2 pt-1 pb-3 subheading text-selectable">
</v-col>
</v-row>
<v-row v-else>
<v-col v-if="$config.getTier() < 4" cols="12" class="d-flex align-center justify-center px-2 pt-1 pb-6 subtitle-1 text-selectable">
<translate>Become a member today, support our mission and enjoy our member benefits!</translate>
<translate>Your continued support helps us provide regular updates and remain independent, so we can fulfill our mission and protect your privacy.</translate>
</v-flex>
<v-flex xs12 grow align-center justify-center class="px-2 py-1">
<v-alert :value="true" color="secondary-dark" outline>
<p class="subheading text-selectable">
</v-col>
<v-col cols="12" class="grow align-center justify-center px-2 py-1">
<v-alert color="secondary-dark" outlined>
<p class="subtitle-1 text-selectable">
<strong><translate>To upgrade, you can either enter an activation code or click "Register" to sign up on our website:</translate></strong>
</p>
<v-text-field v-model="form.token" flat solo hide-details return-masked-value :mask="tokenMask" browser-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-3">
<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" outline :disabled="busy">
<v-text-field v-model="form.token" flat solo hide-details return-masked-value :mask="tokenMask" autocomplete="off" color="secondary-dark" background-color="secondary-light" :label="$gettext('Activation Code')" type="text"> </v-text-field>
<div class="action-buttons text-xs-left mt-6">
<v-btn v-if="$config.getTier() >= 4" href="https://my.photoprism.app/dashboard" target="_blank" color="primary-button lighten-2" :block="$vuetify.breakpoint.xsOnly" class="ml-0" outlined :disabled="busy">
<translate>Manage Account</translate>
</v-btn>
<v-btn v-else color="primary-button lighten-2" :block="$vuetify.breakpoint.xsOnly" class="ml-0" outline :disabled="busy" @click.stop="compare">
<v-btn v-else color="primary-button lighten-2" :block="$vuetify.breakpoint.xsOnly" class="ml-0" outlined :disabled="busy" @click.stop="compare">
<translate>Compare Editions</translate>
</v-btn>
@ -101,12 +101,12 @@
</v-btn>
</div>
</v-alert>
</v-flex>
<v-flex xs12 class="px-2 pt-3 pb-0 body-1 text-selectable">
</v-col>
<v-col cols="12" class="px-2 pt-6 pb-0 body-1 text-selectable">
<translate>You are welcome to contact us at membership@photoprism.app for questions regarding your membership.</translate>
<translate>By using the software and services we provide, you agree to our terms of service, privacy policy, and code of conduct.</translate>
</v-flex>
</v-layout>
</v-col>
</v-row>
</v-form>
<p-about-footer></p-about-footer>
</div>

4
frontend/src/page/discover.vue
View file

@ -1,6 +1,6 @@
<template>
<div class="p-page p-page-discover">
<v-tabs v-model="active" flat grow 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.breakpoint.smAndDown ? 48 : 64">
<v-tab id="tab-discover-colors" ripple @click="changePath('/discover')">
<translate>Colors</translate>
</v-tab>
@ -17,7 +17,7 @@
<translate>Random</translate>
</v-tab>
<v-tabs-items touchless>
<v-tabs-items touchless v-model="active">
<v-tab-item>
<p-tab-discover-colors></p-tab-discover-colors>
</v-tab-item>

16
frontend/src/page/discover/colors.vue
View file

@ -1,17 +1,17 @@
<template>
<div class="p-tab p-tab-discover-colors">
<v-container grid-list-xs text-xs-center fluid>
<p class="subheading pb-3"> 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-layout row wrap class="p-colors">
<v-flex v-for="(color, index) in colors" :key="index" class="p-color pa-2" xs3 d-flex grow>
<v-hover>
<v-card slot-scope="{ hover }" :to="{ name: 'browse', query: { color: color.name } }" :dark="useDark(color)" :color="color.example" :flat="!hover" class="clickable py-1">
<v-card-text class="px-0 py-5 body-2">{{ color.label }}</v-card-text>
<v-row class="p-colors">
<v-col v-for="(color, index) in colors" :key="index" class="p-color pa-2 d-flex grow" cols="3">
<v-hover v-slot="{ hover }">
<v-card :to="{ name: 'browse', query: { color: color.name } }" :dark="useDark(color)" :color="color.example" :text="!hover" class="clickable py-1">
<v-card-text class="px-0 py-12 body-2">{{ color.label }}</v-card-text>
</v-card>
</v-hover>
</v-flex>
</v-layout>
</v-col>
</v-row>
</v-container>
</div>
</template>

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

@ -1,7 +1,7 @@
<template>
<div class="p-tab p-tab-discover-todo">
<v-container grid-list-xs text-xs-center fluid>
<p class="subheading pb-3"> 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>
</div>
</template>

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

@ -12,7 +12,7 @@
</v-btn>
</v-toolbar>
<v-container fluid class="px-4 py-2">
<v-container fluid class="px-6 py-2">
<p-help-websockets></p-help-websockets>
</v-container>

20
frontend/src/page/help/websockets.vue
View file

@ -3,8 +3,8 @@
<h3>PhotoPrism uses <a target="_blank" href="https://en.wikipedia.org/wiki/WebSocket">WebSockets</a> for two-way interactive communication between your browser and the server</h3>
<p>If the connection fails and can't be reestablished, your browser won't receive photo counts, log messages, or metadata updates.</p>
<p>To fix this issue, please make sure you didn't block WebSocket connections in your browser or firewall and check the configuration of any Web server that is in front of PhotoPrism:</p>
<v-expansion-panel class="elevation-0">
<v-expansion-panel-content class="secondary mb-1">
<v-expansion-panels class="elevation-0">
<v-expansion-panel class="secondary mb-1">
<template #header>
<div>How to configure NGINX to proxy WebSockets</div>
</template>
@ -35,8 +35,8 @@ http {
<p>Please refer to the <a target="_blank" href="https://nginx.org/en/docs/" class="text-link">official documentation</a> for more details.</p>
</v-card-text>
</v-card>
</v-expansion-panel-content>
<v-expansion-panel-content class="secondary mb-1">
</v-expansion-panel>
<v-expansion-panel class="secondary mb-1">
<template #header>
<div>How to configure Caddy 1 to proxy WebSockets</div>
</template>
@ -54,8 +54,8 @@ example.com {
<p>Please refer to the <a target="_blank" href="https://caddyserver.com/v1/docs/websocket" class="text-link">official documentation</a> for more details.</p>
</v-card-text>
</v-card>
</v-expansion-panel-content>
<v-expansion-panel-content class="secondary mb-1">
</v-expansion-panel>
<v-expansion-panel class="secondary mb-1">
<template #header>
<div>How to configure Caddy 2 to proxy WebSockets</div>
</template>
@ -71,8 +71,8 @@ example.com {
<p>In addition, Caddy 2 may automatically create and update Let's Encrypt HTTPS certificates. Please refer to the <a target="_blank" href="https://caddyserver.com/docs/v2-upgrade#proxy" class="text-link">official documentation</a> for more details.</p>
</v-card-text>
</v-card>
</v-expansion-panel-content>
<v-expansion-panel-content class="secondary mb-1">
</v-expansion-panel>
<v-expansion-panel class="secondary mb-1">
<template #header>
<div>How to reverse proxy WebSockets with Apache 2.4</div>
</template>
@ -97,8 +97,8 @@ ProxyRequests off
<p>The <a target="_blank" href="https://httpd.apache.org/docs/2.4/mod/mod_proxy_wstunnel.html" class="text-link">official documentation</a> explains in detail, how to configure Apache Web Server 2.4 to reverse proxy WebSockets.</p>
</v-card-text>
</v-card>
</v-expansion-panel-content>
</v-expansion-panel>
</v-expansion-panel>
</v-expansion-panels>
</div>
</template>

26
frontend/src/page/labels.vue
View file

@ -13,7 +13,7 @@
class="input-search background-inherit elevation-0"
:label="$gettext('Search')"
prepend-inner-icon="search"
browser-autocomplete="off"
autocomplete="off"
autocorrect="off"
autocapitalize="none"
color="secondary-dark"
@ -22,7 +22,7 @@
updateFilter({ q: v });
}
"
@keyup.enter.native="(e) => updateQuery({ q: e.target.value })"
@keyup.enter="(e) => updateQuery({ q: e.target.value })"
@click:clear="
() => {
updateQuery({ q: '' });
@ -43,7 +43,7 @@
</v-toolbar>
</v-form>
<v-container v-if="loading" fluid class="pa-4">
<v-container v-if="loading" fluid class="pa-6">
<v-progress-linear color="secondary-dark" :indeterminate="true"></v-progress-linear>
</v-container>
<v-container v-else fluid class="pa-0">
@ -52,7 +52,7 @@
<p-scroll-top></p-scroll-top>
<v-container grid-list-xs fluid class="pa-2">
<v-alert :value="results.length === 0" color="secondary-dark" icon="lightbulb_outline" class="no-results ma-2 opacity-70" outline>
<v-alert :value="results.length === 0" color="secondary-dark" icon="lightbulb_outline" class="no-results ma-2 opacity-70" outlined>
<h3 class="body-2 ma-0 pa-0">
<translate>No labels found</translate>
</h3>
@ -61,9 +61,9 @@
<translate>In case pictures you expect are missing, please rescan your library and wait until indexing has been completed.</translate>
</p>
</v-alert>
<v-layout row wrap class="search-results label-results cards-view" :class="{ 'select-results': selection.length > 0 }">
<v-flex v-for="(label, index) in results" :key="label.UID" xs6 sm4 md3 lg2 xxl1 d-flex>
<v-card tile :data-uid="label.UID" style="user-select: none" class="result card" :class="label.classes(selection.includes(label.UID))" :to="label.route(view)" @contextmenu.stop="onContextMenu($event, index)">
<v-row class="search-results label-results cards-view" :class="{ 'select-results': selection.length > 0 }">
<v-col v-for="(label, index) in results" :key="label.UID" cols="6" sm="4" md="3" lg="2" xxl="1" class="d-flex">
<v-card tile :data-uid="label.UID" style="user-select: none" class="result card flex-grow-1" :class="label.classes(selection.includes(label.UID))" :to="label.route(view)" @contextmenu.stop="onContextMenu($event, index)">
<div class="card-background card"></div>
<v-img
:src="label.thumbnailUrl('tile_500')"
@ -77,19 +77,19 @@
@mousedown.stop.prevent="input.mouseDown($event, index)"
@click.stop.prevent="onClick($event, index)"
>
<v-btn v-if="canSelect" :ripple="false" icon flat absolute class="input-select" @touchstart.stop.prevent="input.touchStart($event, index)" @touchend.stop.prevent="onSelect($event, index)" @touchmove.stop.prevent @click.stop.prevent="onSelect($event, index)">
<v-btn v-if="canSelect" :ripple="false" icon text absolute class="input-select" @touchstart.stop.prevent="input.touchStart($event, index)" @touchend.stop.prevent="onSelect($event, index)" @touchmove.stop.prevent @click.stop.prevent="onSelect($event, index)">
<v-icon color="white" class="select-on">check_circle</v-icon>
<v-icon color="white" class="select-off">radio_button_off</v-icon>
</v-btn>
<v-btn :ripple="false" icon flat absolute class="input-favorite" @touchstart.stop.prevent="input.touchStart($event, index)" @touchend.stop.prevent="toggleLike($event, index)" @touchmove.stop.prevent @click.stop.prevent="toggleLike($event, index)">
<v-btn :ripple="false" icon text absolute class="input-favorite" @touchstart.stop.prevent="input.touchStart($event, index)" @touchend.stop.prevent="toggleLike($event, index)" @touchmove.stop.prevent @click.stop.prevent="toggleLike($event, index)">
<v-icon color="#FFD600" class="select-on">star</v-icon>
<v-icon color="white" class="select-off">star_border</v-icon>
</v-btn>
</v-img>
<v-card-title primary-title class="pa-3 card-details" style="user-select: none" @click.stop.prevent="">
<v-edit-dialog v-if="canManage" :return-value.sync="label.Name" lazy class="inline-edit" @save="onSave(label)">
<v-card-title primary-title class="pa-4 card-details" style="user-select: none" @click.stop.prevent="">
<v-edit-dialog v-if="canManage" :return-value.sync="label.Name" class="inline-edit" @save="onSave(label)">
<span v-if="label.Name" class="body-2 ma-0">
{{ label.Name }}
</span>
@ -116,8 +116,8 @@
</div>
</v-card-text>
</v-card>
</v-flex>
</v-layout>
</v-col>
</v-row>
</v-container>
</v-container>
</div>

6
frontend/src/page/library.vue
View file

@ -1,6 +1,6 @@
<template>
<div :class="$config.aclClasses('library')" class="p-page p-page-library">
<v-tabs v-model="active" flat grow 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.breakpoint.smAndDown ? 48 : 64">
<v-tab v-for="(item, index) in tabs" :id="'tab-' + item.name" :key="index" :class="item.class" ripple @click="changePath(item.path)">
<v-icon v-if="$vuetify.breakpoint.smAndDown" :title="item.label">{{ item.icon }}</v-icon>
<template v-else>
@ -8,8 +8,8 @@
</template>
</v-tab>
<v-tabs-items touchless>
<v-tab-item v-for="(item, index) in tabs" :key="index" lazy>
<v-tabs-items touchless v-model="active">
<v-tab-item v-for="(item, index) in tabs" :key="index">
<component :is="item.component"></component>
</v-tab-item>
</v-tabs-items>

20
frontend/src/page/library/browse.vue
View file

@ -21,7 +21,7 @@
</v-toolbar>
</v-form>
<v-container v-if="loading" fluid class="pa-4">
<v-container v-if="loading" fluid class="pa-6">
<v-progress-linear color="secondary-dark" :indeterminate="true"></v-progress-linear>
</v-container>
<v-container v-else fluid class="pa-0">
@ -30,7 +30,7 @@
<p-scroll-top></p-scroll-top>
<v-container grid-list-xs fluid class="pa-2 p-files p-files-cards">
<v-alert :value="results.length === 0" color="secondary-dark" icon="lightbulb_outline" class="no-results ma-2 opacity-70" outline>
<v-alert :value="results.length === 0" color="secondary-dark" icon="lightbulb_outline" class="no-results ma-2 opacity-70" outlined>
<h3 class="body-2 ma-0 pa-0">
<translate>No pictures found</translate>
</h3>
@ -39,9 +39,9 @@
<translate>In case pictures you expect are missing, please rescan your library and wait until indexing has been completed.</translate>
</p>
</v-alert>
<v-layout row wrap class="search-results file-results cards-view" :class="{ 'select-results': selection.length > 0 }">
<v-flex v-for="(model, index) in results" :key="model.UID" xs6 sm4 md3 lg2 xxl1 d-flex>
<v-card tile :data-uid="model.UID" class="result card" :class="model.classes(selection.includes(model.UID))" @contextmenu.stop="onContextMenu($event, index)">
<v-row class="search-results file-results cards-view" :class="{ 'select-results': selection.length > 0 }">
<v-col v-for="(model, index) in results" :key="model.UID" cols="6" sm="4" md="3" lg="2" xxl="1" class="d-flex">
<v-card tile :data-uid="model.UID" class="result card flex-grow-1" :class="model.classes(selection.includes(model.UID))" @contextmenu.stop="onContextMenu($event, index)">
<div class="card-background card"></div>
<v-img
:src="model.thumbnailUrl('tile_500')"
@ -55,13 +55,13 @@
@mousedown.stop.prevent="input.mouseDown($event, index)"
@click.stop.prevent="onClick($event, index)"
>
<v-btn :ripple="false" icon flat absolute class="input-select" @touchstart.stop.prevent="input.touchStart($event, index)" @touchend.stop.prevent="onSelect($event, index)" @touchmove.stop.prevent @click.stop.prevent="onSelect($event, index)">
<v-btn :ripple="false" icon text absolute class="input-select" @touchstart.stop.prevent="input.touchStart($event, index)" @touchend.stop.prevent="onSelect($event, index)" @touchmove.stop.prevent @click.stop.prevent="onSelect($event, index)">
<v-icon color="white" class="select-on">check_circle</v-icon>
<v-icon color="white" class="select-off">radio_button_off</v-icon>
</v-btn>
</v-img>
<v-card-title v-if="model.isFile()" primary-title class="pa-3 card-details" style="user-select: none">
<v-card-title v-if="model.isFile()" primary-title class="pa-4 card-details" style="user-select: none">
<div>
<h3 class="body-2 mb-2" :title="model.Name">
<button @click.exact="openFile(index)">
@ -73,7 +73,7 @@
</div>
</div>
</v-card-title>
<v-card-title v-else primary-title class="pa-3 card-details">
<v-card-title v-else primary-title class="pa-4 card-details">
<div>
<h3 class="body-2 mb-2" :title="model.Title">
<button @click.exact="openFile(index)">
@ -86,8 +86,8 @@
</div>
</v-card-title>
</v-card>
</v-flex>
</v-layout>
</v-col>
</v-row>
</v-container>
</v-container>
</div>

24
frontend/src/page/library/errors.vue
View file

@ -10,7 +10,7 @@
single-line
validate-on-blur
class="input-search background-inherit elevation-0"
browser-autocomplete="off"
autocomplete="off"
autocorrect="off"
autocapitalize="none"
:label="$gettext('Search')"
@ -21,7 +21,7 @@
updateFilter({ q: v });
}
"
@keyup.enter.native="(e) => updateQuery({ q: e.target.value })"
@keyup.enter="(e) => updateQuery({ q: e.target.value })"
@click:clear="
() => {
updateQuery({ q: '' });
@ -39,23 +39,23 @@
<v-icon>bug_report</v-icon>
</v-btn>
</v-toolbar>
<v-container v-if="loading" fluid class="pa-4">
<v-container v-if="loading" fluid class="pa-6">
<v-progress-linear color="secondary-dark" :indeterminate="true"></v-progress-linear>
</v-container>
<v-list v-else-if="errors.length > 0" dense two-line class="transparent pa-1">
<v-list-tile v-for="err in errors" :key="err.ID" avatar class="rounded-4" @click="showDetails(err)">
<v-list-tile-avatar>
<v-list-item v-for="err in errors" :key="err.ID" avatar class="rounded-4" @click="showDetails(err)">
<v-list-item-avatar>
<v-icon :color="err.Level">{{ err.Level }}</v-icon>
</v-list-tile-avatar>
</v-list-item-avatar>
<v-list-tile-content class="text-selectable">
<v-list-tile-title>{{ err.Message }}</v-list-tile-title>
<v-list-tile-sub-title>{{ formatTime(err.Time) }}</v-list-tile-sub-title>
</v-list-tile-content>
</v-list-tile>
<v-list-item-content class="text-selectable">
<v-list-item-title>{{ err.Message }}</v-list-item-title>
<v-list-item-subtitle>{{ formatTime(err.Time) }}</v-list-item-subtitle>
</v-list-item-content>
</v-list-item>
</v-list>
<div v-else class="pa-2">
<v-alert :value="true" color="secondary-dark" icon="check_circle_outline" class="no-results ma-2 opacity-70" outline>
<v-alert color="secondary-dark" icon="check_circle_outline" class="no-results ma-2 opacity-70" outlined>
<p class="body-1 mt-0 mb-0 pa-0">
<template v-if="filter.q !== ''">
<translate>No warnings or error containing this keyword. Note that search is case-sensitive.</translate>

18
frontend/src/page/library/import.vue
View file

@ -2,7 +2,7 @@
<div class="p-tab p-tab-import">
<v-form ref="form" class="p-photo-import" lazy-validation dense @submit.prevent="submit">
<v-container fluid>
<p class="subheading">
<p class="subtitle-1">
<span v-if="fileName" class="break-word"><translate :translate-params="{ name: fileName }">Importing %{name}…</translate></span>
<span v-else-if="busy"><translate>Importing files to originals…</translate></span>
<span v-else-if="completed"><translate>Done.</translate></span>
@ -12,12 +12,12 @@
<v-autocomplete
v-model="settings.import.path"
color="secondary-dark"
class="my-3 input-import-folder"
class="my-6 input-import-folder"
hide-details
hide-no-data
flat
solo
browser-autocomplete="off"
autocomplete="off"
:items="dirs"
:loading="loading"
:disabled="busy || !ready"
@ -32,8 +32,8 @@
<v-progress-linear color="secondary-dark" height="1.5em" :value="completed" :indeterminate="busy"></v-progress-linear>
</p>
<v-layout wrap align-top class="pb-2">
<v-flex xs12 class="px-2 pb-2 pt-2">
<v-row align="start" class="pb-2">
<v-col cols="12" class="px-2 pb-2 pt-2">
<v-checkbox
v-model="settings.import.move"
:disabled="busy || !ready"
@ -46,16 +46,16 @@
@change="onChange"
>
</v-checkbox>
</v-flex>
<v-flex xs12 class="px-2 pb-2 pt-2">
</v-col>
<v-col cols="12" class="px-2 pb-2 pt-2">
<p class="body-1 pt-2">
<translate>Imported files will be sorted by date and given a unique name to avoid duplicates.</translate>
<translate>JPEGs and thumbnails are automatically rendered as needed.</translate>
<translate>Original file names will be stored and indexed.</translate>
<translate>Note you may manually manage your originals folder and importing is optional.</translate>
</p>
</v-flex>
</v-layout>
</v-col>
</v-row>
<v-btn :disabled="!busy || !ready" color="primary-button" class="white--text ml-0 action-cancel" depressed @click.stop="cancelImport()">
<translate>Cancel</translate>

20
frontend/src/page/library/index.vue
View file

@ -2,7 +2,7 @@
<div class="p-tab p-tab-index">
<v-form ref="form" class="p-photo-index" lazy-validation dense @submit.prevent="submit">
<v-container fluid>
<p class="subheading">
<p class="subtitle-1">
<span v-if="fileName" class="break-word">{{ action }} {{ fileName }}…</span>
<span v-else-if="action">{{ action }}…</span>
<span v-else-if="busy"><translate>Indexing media and sidecar files…</translate></span>
@ -13,12 +13,12 @@
<v-autocomplete
v-model="settings.index.path"
color="secondary-dark"
class="my-3 input-index-folder"
class="my-6 input-index-folder"
hide-details
hide-no-data
flat
solo
browser-autocomplete="off"
autocomplete="off"
:items="dirs"
:loading="loading"
:disabled="busy || !ready"
@ -33,8 +33,8 @@
<v-progress-linear color="secondary-dark" height="1.5em" :value="completed" :indeterminate="busy"></v-progress-linear>
</p>
<v-layout wrap align-top class="pb-3">
<v-flex xs12 sm6 lg3 xl2 class="px-2 pb-2 pt-2">
<v-row align="start" class="pb-6">
<v-col cols="12" sm="6" lg="3" xl="2" class="px-2 pb-2 pt-2">
<v-checkbox
v-model="settings.index.rescan"
:disabled="busy || !ready"
@ -47,11 +47,11 @@
@change="onChange"
>
</v-checkbox>
</v-flex>
<v-flex v-if="isAdmin" xs12 sm6 lg3 xl2 class="px-2 pb-2 pt-2">
</v-col>
<v-col v-if="isAdmin" cols="12" sm="6" lg="3" xl="2" class="px-2 pb-2 pt-2">
<v-checkbox v-model="cleanup" :disabled="busy || !ready" class="ma-0 pa-0" color="secondary-dark" :label="$gettext('Cleanup')" :hint="$gettext('Delete orphaned index entries, sidecar files and thumbnails.')" prepend-icon="delete_sweep" persistent-hint> </v-checkbox>
</v-flex>
</v-layout>
</v-col>
</v-row>
<v-btn :disabled="!busy || !ready" color="primary-button" class="white--text ml-0 mt-2 action-cancel" depressed @click.stop="cancelIndexing()">
<translate>Cancel</translate>
@ -62,7 +62,7 @@
<v-icon :right="!rtl" :left="rtl" dark>update</v-icon>
</v-btn>
<v-alert v-if="ready && !busy && config.count.hidden > 1" :value="true" color="error" icon="priority_high" class="mt-3" outline>
<v-alert v-if="ready && !busy && config.count.hidden > 1" color="error" icon="priority_high" class="mt-6" outlined>
<translate :translate-params="{ n: config.count.hidden }">The index currently contains %{n} hidden files.</translate>
<translate>Their format may not be supported, they haven't been converted to JPEG yet or there are duplicates.</translate>
</v-alert>

12
frontend/src/page/library/logs.vue
View file

@ -1,15 +1,15 @@
<template>
<v-container fluid fill-height class="pa-0 ma-0 p-tab p-tab-logs">
<v-layout row wrap fill-height class="pa-0 ma-3">
<v-flex grow xs12 class="pa-2 terminal elevation-0 p-logs" style="overflow: auto">
<p v-if="logs.length === 0" class="p-log-empty">
<v-row class="pa-0 ma-6 d-flex align-stretch">
<v-col cols="12" class="d-flex grow pa-2 terminal elevation-0 p-logs" style="overflow: auto">
<p v-if="logs.length === 0" class="p-log-empty flex-grow-1">
<translate>Nothing to see here yet.</translate>
</p>
<p v-for="(log, index) in logs" :key="index.id" class="p-log-message text-selectable" :class="'p-log-' + log.level">
<p v-for="(log, index) in logs" :key="index.id" class="p-log-message text-selectable flex-grow-1" :class="'p-log-' + log.level">
{{ formatTime(log.time) }} {{ level(log) }} <span>{{ log.message }}</span>
</p>
</v-flex>
</v-layout>
</v-col>
</v-row>
</v-container>
</template>

7
frontend/src/page/people.vue
View file

@ -1,6 +1,7 @@
<template>
<div class="p-page p-page-people" :class="$config.aclClasses('people')">
<v-tabs v-model="active" flat grow touchless color="secondary" slider-color="secondary-dark" :height="$vuetify.breakpoint.smAndDown ? 48 : 64">
<!-- TODO: check property touchless -->
<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-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>
<template v-else>
@ -14,8 +15,8 @@
</template>
</v-tab>
<v-tabs-items touchless>
<v-tab-item v-for="(item, index) in tabs" :key="index" lazy>
<v-tabs-items touchless v-model="active">
<v-tab-item v-for="(item, index) in tabs" :key="index">
<component :is="item.component" :static-filter="item.filter" :active="active === index" @updateFaceCount="onUpdateFaceCount"></component>
</v-tab-item>
</v-tabs-items>

44
frontend/src/page/people/new.vue
View file

@ -5,7 +5,7 @@
<v-spacer></v-spacer>
<v-divider vertical></v-divider>
<v-btn icon overflow flat depressed color="secondary-dark" class="action-reload" :title="$gettext('Reload')" @click.stop="refresh">
<v-btn icon text depressed color="secondary-dark" class="action-reload" :title="$gettext('Reload')" @click.stop="refresh">
<v-icon>refresh</v-icon>
</v-btn>
@ -18,14 +18,14 @@
</v-toolbar>
</v-form>
<v-container v-if="loading" fluid class="pa-4">
<v-container v-if="loading" fluid class="pa-6">
<v-progress-linear color="secondary-dark" :indeterminate="true"></v-progress-linear>
</v-container>
<v-container v-else fluid class="pa-0">
<p-scroll-top></p-scroll-top>
<v-container grid-list-xs fluid class="pa-2">
<v-alert :value="results.length === 0" color="secondary-dark" icon="check_circle_outline" class="no-results ma-2 opacity-70" outline>
<v-alert :value="results.length === 0" color="secondary-dark" icon="check_circle_outline" class="no-results ma-2 opacity-70" outlined>
<h3 class="body-2 ma-0 pa-0">
<translate>No people found</translate>
</h3>
@ -34,25 +34,25 @@
<translate>Recognition starts after indexing has been completed.</translate>
</p>
</v-alert>
<v-layout row wrap class="search-results face-results cards-view" :class="{ 'select-results': selection.length > 0 }">
<v-flex v-for="model in results" :key="model.ID" xs12 sm6 md4 lg3 xl2 xxl1 d-flex>
<v-card :data-id="model.ID" tile style="user-select: none" :class="model.classes()" class="result card">
<v-row class="search-results face-results cards-view" :class="{ 'select-results': selection.length > 0 }">
<v-col v-for="model in results" :key="model.ID" cols="12" sm="6" md="4" lg="3" xl="2" xxl="1" class="d-flex">
<v-card :data-id="model.ID" tile style="user-select: none" :class="model.classes()" class="result card flex-grow-1">
<div class="card-background card"></div>
<v-img :src="model.thumbnailUrl('tile_320')" :transition="false" aspect-ratio="1" class="card darken-1 clickable" @click.stop.prevent="onView(model)">
<v-btn :ripple="false" :depressed="false" class="input-hidden" icon flat small absolute @click.stop.prevent="toggleHidden(model)">
<v-btn :ripple="false" :depressed="false" class="input-hidden" icon text small absolute @click.stop.prevent="toggleHidden(model)">
<v-icon color="white" class="select-on" :title="$gettext('Show')">visibility_off</v-icon>
<v-icon color="white" class="select-off" :title="$gettext('Hide')">clear</v-icon>
</v-btn>
</v-img>
<v-card-actions class="card-details pa-0">
<v-layout v-if="model.SubjUID" row wrap align-center>
<v-flex xs12 class="text-xs-left pa-0">
<v-row v-if="model.SubjUID" align="center">
<v-col cols="12" class="text-xs-left pa-0">
<v-text-field
:value="model.Name"
:rules="[textRule]"
:readonly="readonly"
browser-autocomplete="off"
autocomplete="off"
class="input-name pa-0 ma-0"
hide-details
single-line
@ -62,16 +62,16 @@
onRename(model, newName);
}
"
@keyup.enter.native="
@keyup.enter="
(event) => {
onRename(model, event.target.value);
}
"
></v-text-field>
</v-flex>
</v-layout>
<v-layout v-else row wrap align-center>
<v-flex xs12 class="text-xs-left pa-0">
</v-col>
</v-row>
<v-row align="center">
<v-col cols="12" class="text-xs-left pa-0">
<v-combobox
:value="model.Name"
style="z-index: 250"
@ -90,7 +90,7 @@
hide-no-data
append-icon=""
prepend-inner-icon="person_add"
browser-autocomplete="off"
autocomplete="off"
class="input-name pa-0 ma-0"
@change="
(newName) => {
@ -104,14 +104,14 @@
"
>
</v-combobox>
</v-flex>
</v-layout>
</v-col>
</v-row>
</v-card-actions>
</v-card>
</v-flex>
</v-layout>
<div class="text-xs-center mt-3 mb-2">
<v-btn color="secondary" round depressed :to="{ name: 'all', query: { q: 'face:new' } }">
</v-col>
</v-row>
<div class="text-xs-center mt-4 mb-2">
<v-btn color="secondary" rounded depressed :to="{ name: 'all', query: { q: 'face:new' } }">
<translate>Show all new faces</translate>
</v-btn>
</div>

32
frontend/src/page/people/recognized.vue
View file

@ -14,7 +14,7 @@
class="input-search background-inherit elevation-0"
:label="$gettext('Search')"
prepend-inner-icon="search"
browser-autocomplete="off"
autocomplete="off"
autocorrect="off"
autocapitalize="none"
color="secondary-dark"
@ -23,7 +23,7 @@
updateFilter({ q: v });
}
"
@keyup.enter.native="(e) => updateQuery({ q: e.target.value })"
@keyup.enter="(e) => updateQuery({ q: e.target.value })"
@click:clear="
() => {
updateQuery({ q: '' });
@ -33,7 +33,7 @@
<v-divider vertical></v-divider>
<v-btn icon overflow flat depressed color="secondary-dark" class="action-reload" :title="$gettext('Reload')" @click.stop="refresh()">
<v-btn icon text depressed color="secondary-dark" class="action-reload" :title="$gettext('Reload')" @click.stop="refresh()">
<v-icon>refresh</v-icon>
</v-btn>
@ -48,7 +48,7 @@
</v-toolbar>
</v-form>
<v-container v-if="loading" fluid class="pa-4">
<v-container v-if="loading" fluid class="pa-6">
<v-progress-linear color="secondary-dark" :indeterminate="true"></v-progress-linear>
</v-container>
<v-container v-else fluid class="pa-0">
@ -57,7 +57,7 @@
<p-scroll-top></p-scroll-top>
<v-container grid-list-xs fluid class="pa-2">
<v-alert :value="results.length === 0" color="secondary-dark" icon="lightbulb_outline" class="no-results ma-2 opacity-70" outline>
<v-alert :value="results.length === 0" color="secondary-dark" icon="lightbulb_outline" class="no-results ma-2 opacity-70" outlined>
<h3 class="body-2 ma-0 pa-0">
<translate>No people found</translate>
</h3>
@ -67,9 +67,9 @@
<translate>Recognition starts after indexing has been completed.</translate>
</p>
</v-alert>
<v-layout row wrap class="search-results subject-results cards-view" :class="{ 'select-results': selection.length > 0 }">
<v-flex v-for="(model, index) in results" :key="model.UID" xs6 sm4 md3 lg2 xxl1 d-flex>
<v-card tile :data-uid="model.UID" style="user-select: none" class="result card" :class="model.classes(selection.includes(model.UID))" :to="model.route(view)" @contextmenu.stop="onContextMenu($event, index)">
<v-row class="search-results subject-results cards-view" :class="{ 'select-results': selection.length > 0 }">
<v-col v-for="(model, index) in results" :key="model.UID" cols="6" sm="4" md="3" lg="2" xxl="1" class="d-flex">
<v-card tile :data-uid="model.UID" style="user-select: none" class="result card flex-grow-1" :class="model.classes(selection.includes(model.UID))" :to="model.route(view)" @contextmenu.stop="onContextMenu($event, index)">
<div class="card-background card"></div>
<v-img
:src="model.thumbnailUrl('tile_320')"
@ -89,7 +89,7 @@
:depressed="false"
class="input-hidden"
icon
flat
text
small
absolute
@touchstart.stop.prevent="input.touchStart($event, index)"
@ -100,19 +100,19 @@
<v-icon color="white" class="select-on" :title="$gettext('Show')">visibility_off</v-icon>
<v-icon color="white" class="select-off" :title="$gettext('Hide')">clear</v-icon>
</v-btn>
<v-btn :ripple="false" icon flat absolute class="input-select" @touchstart.stop.prevent="input.touchStart($event, index)" @touchend.stop.prevent="onSelect($event, index)" @touchmove.stop.prevent @click.stop.prevent="onSelect($event, index)">
<v-btn :ripple="false" icon text absolute class="input-select" @touchstart.stop.prevent="input.touchStart($event, index)" @touchend.stop.prevent="onSelect($event, index)" @touchmove.stop.prevent @click.stop.prevent="onSelect($event, index)">
<v-icon color="white" class="select-on">check_circle</v-icon>
<v-icon color="white" class="select-off">radio_button_off</v-icon>
</v-btn>
<v-btn :ripple="false" icon flat absolute class="input-favorite" @touchstart.stop.prevent="input.touchStart($event, index)" @touchend.stop.prevent="toggleLike($event, index)" @touchmove.stop.prevent @click.stop.prevent="toggleLike($event, index)">
<v-btn :ripple="false" icon text absolute class="input-favorite" @touchstart.stop.prevent="input.touchStart($event, index)" @touchend.stop.prevent="toggleLike($event, index)" @touchmove.stop.prevent @click.stop.prevent="toggleLike($event, index)">
<v-icon color="#FFD600" class="select-on">star</v-icon>
<v-icon color="white" class="select-off">star_border</v-icon>
</v-btn>
</v-img>
<v-card-title primary-title class="pa-3 card-details" style="user-select: none" @click.stop.prevent="">
<v-edit-dialog v-if="canManage" :return-value.sync="model.Name" lazy class="inline-edit" @save="onSave(model)">
<v-card-title primary-title class="pa-4 card-details" style="user-select: none" @click.stop.prevent="">
<v-edit-dialog v-if="canManage" :return-value.sync="model.Name" class="inline-edit" @save="onSave(model)">
<span v-if="model.Name" class="body-2 ma-0">
{{ model.Name }}
</span>
@ -143,11 +143,11 @@
</div>
</v-card-text>
</v-card>
</v-flex>
</v-layout>
</v-col>
</v-row>
</v-container>
</v-container>
<p-people-merge-dialog lazy :show="merge.show" :subj1="merge.subj1" :subj2="merge.subj2" @cancel="onCancelMerge" @confirm="onMerge"></p-people-merge-dialog>
<p-people-merge-dialog :show="merge.show" :subj1="merge.subj1" :subj2="merge.subj2" @cancel="onCancelMerge" @confirm="onMerge"></p-people-merge-dialog>
</div>
</template>

2
frontend/src/page/photos.vue
View file

@ -2,7 +2,7 @@
<div v-infinite-scroll="loadMore" :class="$config.aclClasses('photos')" class="p-page p-page-photos" style="user-select: none" :infinite-scroll-disabled="scrollDisabled" :infinite-scroll-distance="scrollDistance" :infinite-scroll-listen-for-event="'scrollRefresh'">
<p-photo-toolbar :context="context" :filter="filter" :static-filter="staticFilter" :settings="settings" :refresh="refresh" :update-filter="updateFilter" :update-query="updateQuery" :on-close="onClose" :embedded="embedded" />
<v-container v-if="loading" fluid class="pa-4">
<v-container v-if="loading" fluid class="pa-6">
<v-progress-linear color="secondary-dark" :indeterminate="true"></v-progress-linear>
</v-container>
<v-container v-else fluid class="pa-0">

4
frontend/src/page/places.vue
View file

@ -14,12 +14,12 @@
class="input-search pa-0 ma-0"
:label="$gettext('Search')"
prepend-inner-icon="search"
browser-autocomplete="off"
autocomplete="off"
autocorrect="off"
autocapitalize="none"
color="secondary-dark"
@click:clear="clearQuery"
@keyup.enter.native="formChange"
@keyup.enter="formChange"
></v-text-field>
</div>
</div>

7
frontend/src/page/settings.vue
View file

@ -1,6 +1,7 @@
<template>
<div class="p-page p-page-settings" :class="$config.aclClasses('settings')">
<v-tabs v-model="active" flat grow touchless color="secondary" slider-color="secondary-dark" :height="$vuetify.breakpoint.smAndDown ? 48 : 64">
<!-- TODO: check property touchless -->
<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-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>
<template v-else>
@ -9,8 +10,8 @@
</template>
</v-tab>
<v-tabs-items touchless>
<v-tab-item v-for="(item, index) in tabs" :key="index" lazy>
<v-tabs-items touchless v-model="active">
<v-tab-item v-for="(item, index) in tabs" :key="index">
<component :is="item.component"></component>
</v-tab-item>
</v-tabs-items>

170
frontend/src/page/settings/account.vue
View file

@ -1,18 +1,18 @@
<template>
<div class="p-tab p-settings-account">
<v-form ref="form" v-model="valid" lazy-validation dense class="p-form-account pb-4 width-lg" accept-charset="UTF-8" @submit.prevent="onChange">
<v-form ref="form" v-model="valid" lazy-validation dense class="p-form-account pb-6 width-lg" accept-charset="UTF-8" @submit.prevent="onChange">
<input ref="upload" type="file" class="d-none input-upload" accept="image/png, image/jpeg" @change.stop="onUploadAvatar()" />
<v-card flat tile class="mt-2 px-1 application">
<v-card-actions>
<v-layout row wrap align-top>
<v-flex xs8 sm9 md10 fill-height class="pa-0">
<v-layout wrap align-top>
<v-flex md2 class="pa-2 hidden-sm-and-down">
<v-row align="start">
<v-col cols="8" sm="9" md="10" class="pa-0 d-flex" align-self="stretch">
<v-row align="start" class="flex-grow-1">
<v-col md="2" class="pa-2 hidden-sm-and-down">
<v-select
v-model="user.Details.Gender"
:label="$gettext('Gender')"
hide-details
box
filled
flat
:disabled="busy"
item-text="text"
@ -24,17 +24,17 @@
@change="onChange"
>
</v-select>
</v-flex>
<v-flex md2 class="pa-2 hidden-sm-and-down">
</v-col>
<v-col md="2" class="pa-2 hidden-sm-and-down">
<v-text-field
v-model="user.Details.NameTitle"
hide-details
required
box
filled
flat
:disabled="busy"
maxlength="32"
browser-autocomplete="off"
autocomplete="off"
autocorrect="off"
autocapitalize="none"
:label="$pgettext('Account', 'Title')"
@ -43,17 +43,17 @@
:rules="[(v) => validLength(v, 0, 32) || $gettext('Invalid')]"
@change="onChangeName"
></v-text-field>
</v-flex>
<v-flex md4 class="pa-2 hidden-sm-and-down">
</v-col>
<v-col md="4" class="pa-2 hidden-sm-and-down">
<v-text-field
v-model="user.Details.GivenName"
hide-details
required
box
filled
flat
:disabled="busy"
maxlength="64"
browser-autocomplete="off"
autocomplete="off"
autocorrect="off"
autocapitalize="none"
:label="$gettext('Given Name')"
@ -62,17 +62,17 @@
:rules="[(v) => validLength(v, 0, 64) || $gettext('Invalid')]"
@change="onChangeName"
></v-text-field>
</v-flex>
<v-flex md4 class="pa-2 hidden-sm-and-down">
</v-col>
<v-col md="4" class="pa-2 hidden-sm-and-down">
<v-text-field
v-model="user.Details.FamilyName"
hide-details
required
box
filled
flat
:disabled="busy"
maxlength="64"
browser-autocomplete="off"
autocomplete="off"
autocorrect="off"
autocapitalize="none"
:label="$gettext('Family Name')"
@ -81,17 +81,17 @@
:rules="[(v) => validLength(v, 0, 64) || $gettext('Invalid')]"
@change="onChangeName"
></v-text-field>
</v-flex>
<v-flex xs12 md4 class="pa-2">
</v-col>
<v-col cols="12" md="4" class="pa-2">
<v-text-field
v-model="user.DisplayName"
hide-details
required
box
filled
flat
:disabled="busy"
maxlength="200"
browser-autocomplete="off"
autocomplete="off"
autocorrect="off"
autocapitalize="none"
:label="$gettext('Display Name')"
@ -100,19 +100,19 @@
:rules="[(v) => validLength(v, 1, 200) || $gettext('Required')]"
@change="onChange"
></v-text-field>
</v-flex>
<v-flex xs12 md8 class="pa-2">
</v-col>
<v-col cols="12" md="8" class="pa-2">
<v-text-field
v-model="user.Email"
hide-details
required
box
filled
flat
validate-on-blur
type="email"
maxlength="250"
:disabled="busy"
browser-autocomplete="off"
autocomplete="off"
autocorrect="off"
autocapitalize="none"
:label="$gettext('Email')"
@ -121,57 +121,57 @@
:rules="[(v) => (!!v && validEmail(v)) || $gettext('Invalid')]"
@change="onChange"
></v-text-field>
</v-flex>
</v-layout>
</v-flex>
</v-col>
</v-row>
</v-col>
</v-row>
<v-flex class="pa-2 text-xs-center" xs4 sm3 md2 align-self-center>
<v-row>
<v-col class="pa-2 text-xs-center" cols="4" sm="3" md="2" align-self="center">
<v-avatar :size="$vuetify.breakpoint.xsOnly ? 100 : 128" :class="{ clickable: !busy }" @click.stop.prevent="onChangeAvatar()">
<img :src="$vuetify.breakpoint.xsOnly ? user.getAvatarURL('tile_100') : user.getAvatarURL('tile_224')" :alt="accountInfo" :title="$gettext('Change Avatar')" />
</v-avatar>
</v-flex>
</v-col>
<v-flex v-if="user.Details.Bio" xs12 class="pa-2">
<v-col v-if="user.Details.Bio" cols="12" class="pa-2">
<v-textarea
v-model="user.Details.Bio"
auto-grow
flat
box
solo
hide-details
rows="2"
class="input-bio"
color="secondary-dark"
autocorrect="off"
autocapitalize="none"
browser-autocomplete="off"
autocomplete="off"
:disabled="busy"
maxlength="2000"
:rules="[(v) => validLength(v, 0, 2000) || $gettext('Invalid')]"
:label="$gettext('Bio')"
@change="onChange"
></v-textarea>
</v-flex>
<v-flex xs12 class="pa-2">
</v-col>
<v-col cols="12" class="pa-2">
<v-textarea
v-model="user.Details.About"
auto-grow
flat
box
solo
hide-details
rows="2"
class="input-about"
color="secondary-dark"
autocorrect="off"
autocapitalize="none"
browser-autocomplete="off"
autocomplete="off"
:disabled="busy"
maxlength="500"
:rules="[(v) => validLength(v, 0, 500) || $gettext('Invalid')]"
:label="$gettext('About')"
@change="onChange"
></v-textarea>
</v-flex>
</v-layout>
</v-col>
</v-row>
</v-card-actions>
</v-card>
<v-card flat tile class="mt-0 px-1 application">
@ -181,34 +181,34 @@
</h3>
</v-card-title>
<v-card-actions>
<v-layout wrap align-top>
<v-flex xs12 sm6 class="pa-2">
<v-row align="start">
<v-col cols="12" sm="6" class="pa-2">
<v-btn block depressed color="secondary-light" class="action-change-password compact" :disabled="isPublic || isDemo || user.Name === '' || getProvider() !== 'local'" @click.stop="showDialog('password')">
<translate>Change Password</translate>
<v-icon :right="!rtl" :left="rtl" dark>lock</v-icon>
</v-btn>
</v-flex>
<v-flex xs12 sm6 class="pa-2">
</v-col>
<v-col cols="12" sm="6" class="pa-2">
<v-btn block depressed color="secondary-light" class="action-passcode-dialog compact" :disabled="isPublic || isDemo || user.disablePasscodeSetup(session.hasPassword())" @click.stop="showDialog('passcode')">
<translate>2-Factor Authentication</translate>
<v-icon v-if="user.AuthMethod === '2fa'" :right="!rtl" :left="rtl" dark>gpp_good</v-icon>
<v-icon v-else-if="user.disablePasscodeSetup(session.hasPassword())" :right="!rtl" :left="rtl" dark>shield</v-icon>
<v-icon v-else :right="!rtl" :left="rtl" dark>gpp_maybe</v-icon>
</v-btn>
</v-flex>
<v-flex xs12 sm6 class="pa-2">
</v-col>
<v-col cols="12" sm="6" class="pa-2">
<v-btn block depressed color="secondary-light" class="action-apps-dialog compact" :disabled="isPublic || isDemo || user.Name === ''" @click.stop="showDialog('apps')">
<translate>Apps and Devices</translate>
<v-icon :right="!rtl" :left="rtl" dark>devices</v-icon>
</v-btn>
</v-flex>
<v-flex xs12 sm6 class="pa-2">
</v-col>
<v-col cols="12" sm="6" class="pa-2">
<v-btn block depressed color="secondary-light" class="action-webdav-dialog compact" :disabled="isPublic || isDemo || !user.hasWebDAV()" @click.stop="showDialog('webdav')">
<translate>Connect via WebDAV</translate>
<v-icon :right="!rtl" :left="rtl" dark>sync_alt</v-icon>
</v-btn>
</v-flex>
</v-layout>
</v-col>
</v-row>
</v-card-actions>
</v-card>
<v-card flat tile class="mt-0 px-1 application">
@ -218,17 +218,17 @@
</h3>
</v-card-title>
<v-card-actions>
<v-layout wrap align-top>
<v-flex xs3 class="pa-2">
<v-autocomplete v-model="user.Details.BirthDay" :disabled="busy" :label="$gettext('Day')" browser-autocomplete="off" hide-no-data hide-details box flat color="secondary-dark" :items="options.Days()" class="input-birth-day" @change="onChange"> </v-autocomplete>
</v-flex>
<v-flex xs3 class="pa-2">
<v-autocomplete v-model="user.Details.BirthMonth" :disabled="busy" :label="$gettext('Month')" browser-autocomplete="off" hide-no-data hide-details box flat color="secondary-dark" :items="options.MonthsShort()" class="input-birth-month" @change="onChange"> </v-autocomplete>
</v-flex>
<v-flex xs6 class="pa-2">
<v-autocomplete v-model="user.Details.BirthYear" :disabled="busy" :label="$gettext('Year')" browser-autocomplete="off" hide-no-data hide-details box flat color="secondary-dark" :items="options.Years()" class="input-birth-year" @change="onChange"> </v-autocomplete>
</v-flex>
</v-layout>
<v-row align="start">
<v-col cols="3" class="pa-2">
<v-autocomplete v-model="user.Details.BirthDay" :disabled="busy" :label="$gettext('Day')" autocomplete="off" hide-no-data hide-details filled flat color="secondary-dark" :items="options.Days()" class="input-birth-day" @change="onChange"> </v-autocomplete>
</v-col>
<v-col cols="3" class="pa-2">
<v-autocomplete v-model="user.Details.BirthMonth" :disabled="busy" :label="$gettext('Month')" autocomplete="off" hide-no-data hide-details filled flat color="secondary-dark" :items="options.MonthsShort()" class="input-birth-month" @change="onChange"> </v-autocomplete>
</v-col>
<v-col cols="6" class="pa-2">
<v-autocomplete v-model="user.Details.BirthYear" :disabled="busy" :label="$gettext('Year')" autocomplete="off" hide-no-data hide-details filled flat color="secondary-dark" :items="options.Years()" class="input-birth-year" @change="onChange"> </v-autocomplete>
</v-col>
</v-row>
</v-card-actions>
</v-card>
<v-card flat tile class="mt-0 px-1 application">
@ -238,17 +238,17 @@
</h3>
</v-card-title>
<v-card-actions>
<v-layout wrap align-top>
<v-flex xs12 class="pa-2">
<v-row align="start">
<v-col cols="12" class="pa-2">
<v-text-field
v-model="user.Details.Location"
hide-details
required
box
filled
flat
:disabled="busy"
maxlength="500"
browser-autocomplete="off"
autocomplete="off"
autocorrect="off"
autocapitalize="none"
:label="$gettext('Location')"
@ -257,17 +257,17 @@
:rules="[(v) => validLength(v, 0, 500) || $gettext('Invalid')]"
@change="onChange"
></v-text-field>
</v-flex>
<v-flex xs12 sm4 class="pa-2">
</v-col>
<v-col cols="12" sm="4" class="pa-2">
<v-autocomplete
v-model="user.Details.Country"
:disabled="busy"
:label="$gettext('Country')"
hide-no-data
hide-details
box
filled
flat
browser-autocomplete="off"
autocomplete="off"
color="secondary-dark"
item-value="Code"
item-text="Name"
@ -277,17 +277,17 @@
@change="onChange"
>
</v-autocomplete>
</v-flex>
<v-flex xs12 sm8 class="pa-2">
</v-col>
<v-col cols="12" sm="8" class="pa-2">
<v-text-field
v-model="user.Details.Phone"
hide-details
required
box
filled
flat
:disabled="busy"
maxlength="32"
browser-autocomplete="off"
autocomplete="off"
autocorrect="off"
autocapitalize="none"
:label="$gettext('Phone')"
@ -296,18 +296,18 @@
:rules="[(v) => validLength(v, 0, 32) || $gettext('Invalid')]"
@change="onChange"
></v-text-field>
</v-flex>
<v-flex xs12 sm6 class="pa-2">
</v-col>
<v-col cols="12" sm="6" class="pa-2">
<v-text-field
v-model="user.Details.SiteURL"
hide-details
required
box
filled
flat
:disabled="busy"
type="url"
maxlength="500"
browser-autocomplete="off"
autocomplete="off"
autocorrect="off"
autocapitalize="none"
:label="$gettext('Website')"
@ -316,18 +316,18 @@
:rules="[(v) => validUrl(v) || $gettext('Invalid')]"
@change="onChange"
></v-text-field>
</v-flex>
<v-flex xs12 sm6 class="pa-2">
</v-col>
<v-col cols="12" sm="6" class="pa-2">
<v-text-field
v-model="user.Details.FeedURL"
hide-details
required
box
filled
flat
:disabled="busy"
type="url"
maxlength="500"
browser-autocomplete="off"
autocomplete="off"
autocorrect="off"
autocapitalize="none"
:label="$gettext('Feed')"
@ -336,8 +336,8 @@
:rules="[(v) => validUrl(v) || $gettext('Invalid')]"
@change="onChange"
></v-text-field>
</v-flex>
</v-layout>
</v-col>
</v-row>
</v-card-actions>
</v-card>
</v-form>

146
frontend/src/page/settings/advanced.vue
View file

@ -3,15 +3,15 @@
<v-form ref="form" lazy-validation dense class="p-form-settings pb-1" accept-charset="UTF-8" @submit.prevent="onChange">
<v-card flat tile class="mt-0 px-1 application">
<v-card-actions v-if="$config.values.restart">
<v-layout wrap align-top>
<v-flex xs12 class="pa-2 text-xs-left">
<v-alert :value="true" color="primary" icon="info" class="pa-2" type="info" outline>
<v-row align="start">
<v-col cols="12" class="pa-2 text-xs-left">
<v-alert color="primary" icon="info" class="pa-2" type="info" outlined>
<a style="color: inherit" href="#restart">
<translate>Changes to the advanced settings require a restart to take effect.</translate>
</a>
</v-alert>
</v-flex>
</v-layout>
</v-col>
</v-row>
</v-card-actions>
<v-card-title primary-title class="pb-0">
@ -21,8 +21,8 @@
</v-card-title>
<v-card-actions>
<v-layout wrap align-top>
<v-flex xs12 sm6 lg3 class="px-2 pb-2 pt-2">
<v-row align="start">
<v-col cols="12" sm="6" lg="3" class="px-2 pb-2 pt-2">
<v-checkbox
v-model="settings.Debug"
:disabled="busy"
@ -34,9 +34,9 @@
persistent-hint
@change="onChange">
</v-checkbox>
</v-flex>
</v-col>
<v-flex xs12 sm6 lg3 class="px-2 pb-2 pt-2">
<v-col cols="12" sm="6" lg="3" class="px-2 pb-2 pt-2">
<v-checkbox
v-model="settings.Experimental"
:disabled="busy"
@ -48,9 +48,9 @@
persistent-hint
@change="onChange">
</v-checkbox>
</v-flex>
</v-col>
<v-flex xs12 sm6 lg3 class="px-2 pb-2 pt-2">
<v-col cols="12" sm="6" lg="3" class="px-2 pb-2 pt-2">
<v-checkbox
v-model="settings.ReadOnly"
:disabled="busy"
@ -63,9 +63,9 @@
@change="onChange"
>
</v-checkbox>
</v-flex>
</v-col>
<v-flex xs12 sm6 lg3 class="px-2 pb-2 pt-2">
<v-col cols="12" sm="6" lg="3" class="px-2 pb-2 pt-2">
<v-checkbox
v-model="settings.DisableBackups"
:disabled="busy"
@ -78,9 +78,9 @@
@change="onChange"
>
</v-checkbox>
</v-flex>
</v-col>
<v-flex xs12 sm6 lg3 class="px-2 pb-2 pt-2">
<v-col cols="12" sm="6" lg="3" class="px-2 pb-2 pt-2">
<v-checkbox
v-model="settings.DisableWebDAV"
:disabled="busy"
@ -93,9 +93,9 @@
@change="onChange"
>
</v-checkbox>
</v-flex>
</v-col>
<v-flex xs12 sm6 lg3 class="px-2 pb-2 pt-2">
<v-col cols="12" sm="6" lg="3" class="px-2 pb-2 pt-2">
<v-checkbox
v-model="settings.DisablePlaces"
:disabled="busy"
@ -107,9 +107,9 @@
persistent-hint
@change="onChange">
</v-checkbox>
</v-flex>
</v-col>
<v-flex xs12 sm6 lg3 class="px-2 pb-2 pt-2">
<v-col cols="12" sm="6" lg="3" class="px-2 pb-2 pt-2">
<v-checkbox
v-model="settings.DisableExifTool"
:disabled="busy || (!settings.Experimental && !settings.DisableExifTool)"
@ -122,9 +122,9 @@
@change="onChange"
>
</v-checkbox>
</v-flex>
</v-col>
<v-flex xs12 sm6 lg3 class="px-2 pb-2 pt-2">
<v-col cols="12" sm="6" lg="3" class="px-2 pb-2 pt-2">
<v-checkbox
v-model="settings.DisableTensorFlow"
:disabled="busy"
@ -137,8 +137,8 @@
@change="onChange"
>
</v-checkbox>
</v-flex>
</v-layout>
</v-col>
</v-row>
</v-card-actions>
<template v-if="!settings.DisableBackups">
@ -149,8 +149,8 @@
</v-card-title>
<v-card-actions>
<v-layout wrap align-top>
<v-flex xs12 sm4 class="px-2 pb-2 pt-2">
<v-row align="start">
<v-col cols="12" sm="4" class="px-2 pb-2 pt-2">
<v-checkbox
v-model="settings.BackupDatabase"
:disabled="busy || settings.BackupSchedule === ''"
@ -163,9 +163,9 @@
@change="onChange"
>
</v-checkbox>
</v-flex>
</v-col>
<v-flex xs12 sm4 class="px-2 pb-2 pt-2">
<v-col cols="12" sm="4" class="px-2 pb-2 pt-2">
<v-checkbox
v-model="settings.BackupAlbums"
:disabled="busy"
@ -178,9 +178,9 @@
@change="onChange"
>
</v-checkbox>
</v-flex>
</v-col>
<v-flex xs12 sm4 class="px-2 pb-2 pt-2">
<v-col cols="12" sm="4" class="px-2 pb-2 pt-2">
<v-checkbox
v-model="settings.SidecarYaml"
:disabled="busy"
@ -193,8 +193,8 @@
@change="onChange"
>
</v-checkbox>
</v-flex>
</v-layout>
</v-col>
</v-row>
</v-card-actions>
</template>
@ -205,26 +205,26 @@
</v-card-title>
<v-card-actions>
<v-layout wrap align-top>
<v-flex v-if="settings.ThumbLibrary === 'imaging'" xs12 class="px-2 pb-2">
<v-select v-model="settings.ThumbFilter" :disabled="busy" :items="options.ThumbFilters()" :label="$gettext('Downscaling Filter')" color="secondary-dark" background-color="secondary-light" hide-details box @change="onChange"></v-select>
</v-flex>
<v-row align="start">
<v-col v-if="settings.ThumbLibrary === 'imaging'" cols="12" class="px-2 pb-2">
<v-select v-model="settings.ThumbFilter" :disabled="busy" :items="options.ThumbFilters()" :label="$gettext('Downscaling Filter')" color="secondary-dark" background-color="secondary-light" hide-details filled @change="onChange"></v-select>
</v-col>
<v-flex xs12 lg4 class="px-2 pb-2">
<v-col cols="12" lg="4" class="px-2 pb-2">
<v-subheader class="pa-0">
{{ $gettextInterpolate($gettext("Static Size Limit: %{n}px"), { n: settings.ThumbSize }) }}
</v-subheader>
<v-slider v-model="settings.ThumbSize" :min="720" :max="7680" :step="4" :disabled="busy" hide-details class="mt-0" @change="onChange"></v-slider>
</v-flex>
</v-col>
<v-flex xs12 sm6 lg4 class="px-2 pb-2">
<v-col cols="12" sm="6" lg="4" class="px-2 pb-2">
<v-subheader class="pa-0">
{{ $gettextInterpolate($gettext("Dynamic Size Limit: %{n}px"), { n: settings.ThumbSizeUncached }) }}
</v-subheader>
<v-slider v-model="settings.ThumbSizeUncached" :min="720" :max="7680" :step="4" :disabled="busy" hide-details class="mt-0" @change="onChange"></v-slider>
</v-flex>
</v-col>
<v-flex xs12 sm6 lg4 class="px-2 pb-2 pt-2">
<v-col cols="12" sm="6" lg="4" class="px-2 pb-2 pt-2">
<v-checkbox
v-model="settings.ThumbUncached"
:disabled="busy"
@ -237,8 +237,8 @@
@change="onChange"
>
</v-checkbox>
</v-flex>
</v-layout>
</v-col>
</v-row>
</v-card-actions>
<v-card-title primary-title class="pb-0">
@ -248,32 +248,32 @@
</v-card-title>
<v-card-actions>
<v-layout wrap align-top>
<v-flex xs12 lg4 class="px-2 pb-2">
<v-row align="start">
<v-col cols="12" lg="4" class="px-2 pb-2">
<v-subheader class="pa-0">
{{ $gettextInterpolate($gettext("JPEG Quality: %{n}"), { n: settings.JpegQuality }) }}
</v-subheader>
<v-slider v-model="settings.JpegQuality" :min="25" :max="100" :disabled="busy" hide-details class="mt-0" @change="onChange"></v-slider>
</v-flex>
</v-col>
<v-flex xs12 sm6 lg4 class="px-2 pb-2">
<v-col cols="12" sm="6" lg="4" class="px-2 pb-2">
<v-subheader class="pa-0">
{{ $gettextInterpolate($gettext("JPEG Size Limit: %{n}px"), { n: settings.JpegSize }) }}
</v-subheader>
<v-flex class="pr-3">
<v-col class="pr-6">
<v-slider v-model="settings.JpegSize" :min="720" :max="30000" :step="20" :disabled="busy" class="mt-0" @change="onChange"></v-slider>
</v-flex>
</v-flex>
</v-col>
</v-col>
<v-flex xs12 sm6 lg4 class="px-2 pb-2">
<v-col cols="12" sm="6" lg="4" class="px-2 pb-2">
<v-subheader class="pa-0">
{{ $gettextInterpolate($gettext("PNG Size Limit: %{n}px"), { n: settings.PngSize }) }}
</v-subheader>
<v-flex class="pr-3">
<v-col class="pr-6">
<v-slider v-model="settings.PngSize" :min="720" :max="30000" :step="20" :disabled="busy" class="mt-0" @change="onChange"></v-slider>
</v-flex>
</v-flex>
</v-layout>
</v-col>
</v-col>
</v-row>
</v-card-actions>
<v-card-title primary-title class="pb-0">
@ -283,8 +283,8 @@
</v-card-title>
<v-card-actions>
<v-layout wrap align-top>
<v-flex xs12 sm6 lg4 class="px-2 pb-2 pt-2">
<v-row align="start">
<v-col cols="12" sm="6" lg="4" class="px-2 pb-2 pt-2">
<v-checkbox
v-model="settings.DisableDarktable"
:disabled="busy || settings.DisableRaw"
@ -297,9 +297,9 @@
@change="onChange"
>
</v-checkbox>
</v-flex>
</v-col>
<v-flex xs12 sm6 lg4 class="px-2 pb-2 pt-2">
<v-col cols="12" sm="6" lg="4" class="px-2 pb-2 pt-2">
<v-checkbox
v-model="settings.DisableRawTherapee"
:disabled="busy || settings.DisableRaw"
@ -312,9 +312,9 @@
@change="onChange"
>
</v-checkbox>
</v-flex>
</v-col>
<v-flex xs12 sm6 lg4 class="px-2 pb-2 pt-2">
<v-col cols="12" sm="6" lg="4" class="px-2 pb-2 pt-2">
<v-checkbox
v-model="settings.RawPresets"
:disabled="busy || settings.DisableRaw"
@ -327,9 +327,9 @@
@change="onChange"
>
</v-checkbox>
</v-flex>
</v-col>
<v-flex xs12 sm6 lg4 class="px-2 pb-2 pt-2">
<v-col cols="12" sm="6" lg="4" class="px-2 pb-2 pt-2">
<v-checkbox
v-model="settings.DisableImageMagick"
:disabled="busy"
@ -342,9 +342,9 @@
@change="onChange"
>
</v-checkbox>
</v-flex>
</v-col>
<v-flex xs12 sm6 lg4 class="px-2 pb-2 pt-2">
<v-col cols="12" sm="6" lg="4" class="px-2 pb-2 pt-2">
<v-checkbox
v-model="settings.DisableFFmpeg"
:disabled="busy || (!settings.Experimental && !settings.DisableFFmpeg)"
@ -357,25 +357,25 @@
@change="onChange"
>
</v-checkbox>
</v-flex>
</v-col>
<v-flex v-if="isSponsor" xs12 sm6 lg4 class="px-2 pb-2 pt-2">
<v-col v-if="isSponsor" cols="12" sm="6" lg="4" class="px-2 pb-2 pt-2">
<v-checkbox v-model="settings.DisableVectors" :disabled="busy" class="ma-0 pa-0 input-disable-vectors" color="secondary-dark" :label="$gettext('Disable Vectors')" :hint="$gettext('Disables vector graphics support.')" prepend-icon="font_download_off" persistent-hint @change="onChange">
</v-checkbox>
</v-flex>
</v-layout>
</v-col>
</v-row>
</v-card-actions>
<v-card-actions v-if="!config.disable.restart" class="pt-3">
<v-layout wrap align-top>
<v-flex xs12 class="pa-2">
<v-card-actions v-if="!config.disable.restart" class="pt-6">
<v-row align="start">
<v-col cols="12" class="pa-2">
<a id="restart"></a>
<v-btn color="primary-button" :block="$vuetify.breakpoint.xsOnly" :disabled="busy || !$config.values.restart" class="white--text" depressed @click.stop.p.prevent="onRestart">
<translate>Restart</translate>
<v-icon :right="!rtl" :left="rtl" dark>restart_alt</v-icon>
</v-btn>
</v-flex>
</v-layout>
</v-col>
</v-row>
</v-card-actions>
</v-card>
</v-form>

120
frontend/src/page/settings/general.vue
View file

@ -9,27 +9,27 @@
</v-card-title>
<v-card-actions>
<v-layout wrap align-top>
<v-flex xs12 sm6 class="px-2 pb-2">
<v-select v-model="settings.ui.theme" :disabled="busy" :items="themes" :label="$gettext('Theme')" :menu-props="{ maxHeight: 346 }" color="secondary-dark" background-color="secondary-light" hide-details box class="input-theme" @change="onChangeTheme"></v-select>
</v-flex>
<v-row align="start">
<v-col cols="12" sm="6" class="px-2 pb-2">
<v-select v-model="settings.ui.theme" :disabled="busy" :items="themes" :label="$gettext('Theme')" :menu-props="{ maxHeight: 346 }" color="secondary-dark" background-color="secondary-light" hide-details filled class="input-theme" @change="onChangeTheme"></v-select>
</v-col>
<v-flex xs12 sm6 class="px-2 pb-2">
<v-select v-model="settings.ui.language" :disabled="busy" :items="languages" :label="$gettext('Language')" :menu-props="{ maxHeight: 346 }" color="secondary-dark" background-color="secondary-light" hide-details box class="input-language" @change="onChange"></v-select>
</v-flex>
</v-layout>
<v-col cols="12" sm="6" class="px-2 pb-2">
<v-select v-model="settings.ui.language" :disabled="busy" :items="languages" :label="$gettext('Language')" :menu-props="{ maxHeight: 346 }" color="secondary-dark" background-color="secondary-light" hide-details filled class="input-language" @change="onChange"></v-select>
</v-col>
</v-row>
</v-card-actions>
</v-card>
<v-card v-if="isDemo || isSuperAdmin" flat tile class="mt-0 px-1 application">
<v-card-actions>
<v-layout wrap align-top>
<v-flex xs12 sm6 lg3 class="px-2 pb-2 pt-2">
<v-row align="start">
<v-col cols="12" sm="6" lg="3" class="px-2 pb-2 pt-2">
<v-checkbox v-model="settings.features.people" :disabled="busy" class="ma-0 pa-0 input-people" color="secondary-dark" :label="$gettext('People')" :hint="$gettext('Recognize faces so people can be assigned and found.')" prepend-icon="person" persistent-hint @change="onChange">
</v-checkbox>
</v-flex>
</v-col>
<v-flex xs12 sm6 lg3 class="px-2 pb-2 pt-2">
<v-col cols="12" sm="6" lg="3" class="px-2 pb-2 pt-2">
<v-checkbox
v-model="settings.features.moments"
:disabled="busy"
@ -42,13 +42,13 @@
@change="onChange"
>
</v-checkbox>
</v-flex>
</v-col>
<v-flex xs12 sm6 lg3 class="px-2 pb-2 pt-2">
<v-col cols="12" sm="6" lg="3" class="px-2 pb-2 pt-2">
<v-checkbox v-model="settings.features.labels" :disabled="busy" class="ma-0 pa-0 input-labels" color="secondary-dark" :label="$gettext('Labels')" :hint="$gettext('Browse and edit image classification labels.')" prepend-icon="label" persistent-hint @change="onChange"> </v-checkbox>
</v-flex>
</v-col>
<v-flex xs12 sm6 lg3 class="px-2 pb-2 pt-2">
<v-col cols="12" sm="6" lg="3" class="px-2 pb-2 pt-2">
<v-checkbox
v-model="settings.features.private"
:disabled="busy"
@ -61,9 +61,9 @@
@change="onChange"
>
</v-checkbox>
</v-flex>
</v-col>
<v-flex xs12 sm6 lg3 class="px-2 pb-2 pt-2">
<v-col cols="12" sm="6" lg="3" class="px-2 pb-2 pt-2">
<v-checkbox
v-model="settings.features.upload"
:disabled="busy || config.readonly || isDemo"
@ -76,14 +76,14 @@
@change="onChange"
>
</v-checkbox>
</v-flex>
</v-col>
<v-flex xs12 sm6 lg3 class="px-2 pb-2 pt-2">
<v-col cols="12" sm="6" lg="3" class="px-2 pb-2 pt-2">
<v-checkbox v-model="settings.features.download" :disabled="busy || isDemo" class="ma-0 pa-0 input-download" color="secondary-dark" :label="$gettext('Download')" :hint="$gettext('Download single files and zip archives.')" prepend-icon="get_app" persistent-hint @change="onChange">
</v-checkbox>
</v-flex>
</v-col>
<v-flex xs12 sm6 lg3 class="px-2 pb-2 pt-2">
<v-col cols="12" sm="6" lg="3" class="px-2 pb-2 pt-2">
<v-checkbox
v-model="settings.features.import"
:disabled="busy || config.readonly || isDemo"
@ -96,32 +96,32 @@
@change="onChange"
>
</v-checkbox>
</v-flex>
</v-col>
<v-flex xs12 sm6 lg3 class="px-2 pb-2 pt-2">
<v-col cols="12" sm="6" lg="3" class="px-2 pb-2 pt-2">
<v-checkbox v-model="settings.features.share" :disabled="busy" class="ma-0 pa-0 input-share" color="secondary-dark" :label="$gettext('Share')" :hint="$gettext('Upload to WebDAV and share links with friends.')" prepend-icon="share" persistent-hint @change="onChange"> </v-checkbox>
</v-flex>
</v-col>
<v-flex xs12 sm6 lg3 class="px-2 pb-2 pt-2">
<v-col cols="12" sm="6" lg="3" class="px-2 pb-2 pt-2">
<v-checkbox v-model="settings.features.edit" :disabled="busy || isDemo" class="ma-0 pa-0 input-edit" color="secondary-dark" :label="$gettext('Edit')" :hint="$gettext('Change photo titles, locations, and other metadata.')" prepend-icon="edit" persistent-hint @change="onChange">
</v-checkbox>
</v-flex>
</v-col>
<v-flex xs12 sm6 lg3 class="px-2 pb-2 pt-2">
<v-col cols="12" sm="6" lg="3" class="px-2 pb-2 pt-2">
<v-checkbox v-model="settings.features.archive" :disabled="busy || isDemo" class="ma-0 pa-0 input-archive" color="secondary-dark" :label="$gettext('Archive')" :hint="$gettext('Hide photos that have been moved to archive.')" prepend-icon="archive" persistent-hint @change="onChange">
</v-checkbox>
</v-flex>
</v-col>
<v-flex xs12 sm6 lg3 class="px-2 pb-2 pt-2">
<v-col cols="12" sm="6" lg="3" class="px-2 pb-2 pt-2">
<v-checkbox v-model="settings.features.delete" :disabled="busy" class="ma-0 pa-0 input-delete" color="secondary-dark" :label="$gettext('Delete')" :hint="$gettext('Permanently remove files to free up storage.')" prepend-icon="delete" persistent-hint @change="onChange"> </v-checkbox>
</v-flex>
</v-col>
<v-flex xs12 sm6 lg3 class="px-2 pb-2 pt-2">
<v-col cols="12" sm="6" lg="3" class="px-2 pb-2 pt-2">
<v-checkbox v-model="settings.features.services" :disabled="busy" class="ma-0 pa-0 input-services" color="secondary-dark" :label="$gettext('Services')" :hint="$gettext('Share your pictures with other apps and services.')" prepend-icon="sync_alt" persistent-hint @change="onChange">
</v-checkbox>
</v-flex>
</v-col>
<v-flex xs12 sm6 lg3 class="px-2 pb-2 pt-2">
<v-col cols="12" sm="6" lg="3" class="px-2 pb-2 pt-2">
<v-checkbox
v-model="settings.features.library"
:disabled="busy || isDemo"
@ -134,18 +134,18 @@
@change="onChange"
>
</v-checkbox>
</v-flex>
</v-col>
<v-flex xs12 sm6 lg3 class="px-2 pb-2 pt-2">
<v-col cols="12" sm="6" lg="3" class="px-2 pb-2 pt-2">
<v-checkbox v-model="settings.features.files" :disabled="busy" class="ma-0 pa-0 input-files" color="secondary-dark" :label="$gettext('Originals')" :hint="$gettext('Browse indexed files and folders in Library.')" prepend-icon="account_tree" persistent-hint @change="onChange">
</v-checkbox>
</v-flex>
</v-col>
<v-flex xs12 sm6 lg3 class="px-2 pb-2 pt-2">
<v-col cols="12" sm="6" lg="3" class="px-2 pb-2 pt-2">
<v-checkbox v-model="settings.features.logs" :disabled="busy" class="ma-0 pa-0 input-logs" color="secondary-dark" :label="$gettext('Logs')" :hint="$gettext('Show server logs in Library.')" prepend-icon="grading" persistent-hint @change="onChange"> </v-checkbox>
</v-flex>
</v-col>
<v-flex xs12 sm6 lg3 class="px-2 pb-2 pt-2">
<v-col cols="12" sm="6" lg="3" class="px-2 pb-2 pt-2">
<v-checkbox
v-model="settings.features.account"
:disabled="busy || isDemo"
@ -158,12 +158,12 @@
@change="onChange"
>
</v-checkbox>
</v-flex>
</v-col>
<v-flex v-if="!config.disable.places" xs12 sm6 lg3 class="px-2 pb-2 pt-2">
<v-col v-if="!config.disable.places" cols="12" sm="6" lg="3" class="px-2 pb-2 pt-2">
<v-checkbox v-model="settings.features.places" :disabled="busy || isDemo" class="ma-0 pa-0 input-places" color="secondary-dark" :label="$gettext('Places')" :hint="$gettext('Search and display photos on a map.')" prepend-icon="place" persistent-hint @change="onChange"> </v-checkbox>
</v-flex>
</v-layout>
</v-col>
</v-row>
</v-card-actions>
</v-card>
@ -175,15 +175,15 @@
</v-card-title>
<v-card-actions>
<v-layout wrap align-top>
<v-flex xs12 sm6 class="px-2 pb-2">
<v-select v-model="settings.maps.style" :disabled="busy" :items="mapsStyle" :label="$gettext('Maps')" :menu-props="{ maxHeight: 346 }" color="secondary-dark" background-color="secondary-light" hide-details box class="input-style" @change="onChangeMapsStyle"></v-select>
</v-flex>
<v-row align="start">
<v-col cols="12" sm="6" class="px-2 pb-2">
<v-select v-model="settings.maps.style" :disabled="busy" :items="mapsStyle" :label="$gettext('Maps')" :menu-props="{ maxHeight: 346 }" color="secondary-dark" background-color="secondary-light" hide-details filled class="input-style" @change="onChangeMapsStyle"></v-select>
</v-col>
<v-flex xs12 sm6 class="px-2 pb-2">
<v-select v-model="settings.maps.animate" :disabled="busy" :items="options.MapsAnimate()" :label="$gettext('Animation')" :menu-props="{ maxHeight: 346 }" color="secondary-dark" background-color="secondary-light" hide-details box class="input-animate" @change="onChange"></v-select>
</v-flex>
</v-layout>
<v-col cols="12" sm="6" class="px-2 pb-2">
<v-select v-model="settings.maps.animate" :disabled="busy" :items="options.MapsAnimate()" :label="$gettext('Animation')" :menu-props="{ maxHeight: 346 }" color="secondary-dark" background-color="secondary-light" hide-details filled class="input-animate" @change="onChange"></v-select>
</v-col>
</v-row>
</v-card-actions>
</v-card>
@ -195,8 +195,8 @@
</v-card-title>
<v-card-actions>
<v-layout wrap align-top>
<v-flex xs12 sm4 class="px-2 pb-2 pt-2">
<v-row align="start">
<v-col cols="12" sm="4" class="px-2 pb-2 pt-2">
<v-checkbox
v-model="settings.download.originals"
:disabled="busy"
@ -209,9 +209,9 @@
@change="onChange"
>
</v-checkbox>
</v-flex>
</v-col>
<v-flex xs12 sm4 class="px-2 pb-2 pt-2">
<v-col cols="12" sm="4" class="px-2 pb-2 pt-2">
<v-checkbox
v-model="settings.download.mediaRaw"
:disabled="busy"
@ -224,9 +224,9 @@
@change="onChange"
>
</v-checkbox>
</v-flex>
</v-col>
<v-flex xs12 sm4 class="px-2 pb-2 pt-2">
<v-col cols="12" sm="4" class="px-2 pb-2 pt-2">
<v-checkbox
v-model="settings.download.mediaSidecar"
:disabled="busy"
@ -239,8 +239,8 @@
@change="onChange"
>
</v-checkbox>
</v-flex>
</v-layout>
</v-col>
</v-row>
</v-card-actions>
</v-card>
</v-form>

32
frontend/src/page/settings/library.vue
View file

@ -9,8 +9,8 @@
</v-card-title>
<v-card-actions>
<v-layout wrap align-top>
<v-flex xs12 sm4 class="px-2 pb-2 pt-2">
<v-row align="start">
<v-col cols="12" sm="4" class="px-2 pb-2 pt-2">
<v-checkbox
v-model="settings.features.estimates"
:disabled="busy"
@ -23,9 +23,9 @@
@change="onChange"
>
</v-checkbox>
</v-flex>
</v-col>
<v-flex xs12 sm4 class="px-2 pb-2 pt-2">
<v-col cols="12" sm="4" class="px-2 pb-2 pt-2">
<v-checkbox
v-model="settings.features.review"
:disabled="busy"
@ -38,9 +38,9 @@
@change="onChange"
>
</v-checkbox>
</v-flex>
</v-col>
<v-flex xs12 sm4 class="px-2 pb-2 pt-2">
<v-col cols="12" sm="4" class="px-2 pb-2 pt-2">
<v-checkbox
v-model="settings.index.convert"
:disabled="busy || demo || (!experimental && settings.index.convert)"
@ -53,8 +53,8 @@
@change="onChange"
>
</v-checkbox>
</v-flex>
</v-layout>
</v-col>
</v-row>
</v-card-actions>
</v-card>
@ -66,8 +66,8 @@
</v-card-title>
<v-card-actions>
<v-layout wrap align-top>
<v-flex xs12 sm4 class="px-2 pb-2 pt-2">
<v-row align="start">
<v-col cols="12" sm="4" class="px-2 pb-2 pt-2">
<v-checkbox
v-model="settings.stack.meta"
:disabled="busy"
@ -80,9 +80,9 @@
@change="onChange"
>
</v-checkbox>
</v-flex>
</v-col>
<v-flex xs12 sm4 class="px-2 pb-2 pt-2">
<v-col cols="12" sm="4" class="px-2 pb-2 pt-2">
<v-checkbox
v-model="settings.stack.uuid"
:disabled="busy"
@ -95,9 +95,9 @@
@change="onChange"
>
</v-checkbox>
</v-flex>
</v-col>
<v-flex xs12 sm4 class="px-2 pb-2 pt-2">
<v-col cols="12" sm="4" class="px-2 pb-2 pt-2">
<v-checkbox
v-model="settings.stack.name"
:disabled="busy"
@ -110,8 +110,8 @@
@change="onChange"
>
</v-checkbox>
</v-flex>
</v-layout>
</v-col>
</v-row>
</v-card-actions>
</v-card>
</v-form>

10
frontend/src/page/settings/services.vue
View file

@ -1,6 +1,6 @@
<template>
<div class="p-tab p-settings-services">
<v-data-table v-model="selected" :headers="listColumns" :items="results" hide-actions disable-initial-sort class="elevation-0 account-results list-view" item-key="ID" :no-data-text="$gettext('No services configured.')">
<v-data-table v-model="selected" :headers="listColumns" :items="results" hide-default-footer class="elevation-0 account-results list-view" item-key="ID" :no-data-text="$gettext('No services configured.')">
<template #items="props">
<tr :data-name="props.item.AccName">
<td class="p-account">
@ -9,13 +9,13 @@
</button>
</td>
<td class="text-xs-center">
<v-btn icon small flat :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">check</v-icon>
<v-icon v-else color="secondary-dark">settings</v-icon>
</v-btn>
</td>
<td class="text-xs-center">
<v-btn icon small flat :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">report_problem </v-icon>
<v-icon v-else-if="props.item.AccSync" color="secondary-dark">sync</v-icon>
<v-icon v-else color="secondary-dark">sync_disabled</v-icon>
@ -25,10 +25,10 @@
{{ formatDate(props.item.SyncDate) }}
</td>
<td class="hidden-xs-only text-xs-right" nowrap>
<v-btn icon small flat :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">delete</v-icon>
</v-btn>
<v-btn icon small flat :ripple="false" class="action-edit" color="transparent" @click.stop.prevent="edit(props.item)">
<v-btn icon small text :ripple="false" class="action-edit" color="transparent" @click.stop.prevent="edit(props.item)">
<v-icon color="secondary-dark">edit</v-icon>
</v-btn>
</td>

4
frontend/src/share.vue
View file

@ -7,9 +7,9 @@
<v-app :class="appClass">
<p-navigation></p-navigation>
<v-content>
<v-main>
<router-view></router-view>
</v-content>
</v-main>
</v-app>
<p-video-viewer></p-video-viewer>

2
frontend/tests/acceptance/page-model/page.js
View file

@ -19,7 +19,7 @@ const sharedialog = new ShareDialog();
export default class Page {
constructor() {
this.selectOption = Selector("div.v-list__tile__title", { timeout: 15000 });
this.selectOption = Selector("div.v-list__item__title", { timeout: 15000 });
this.cardTitle = Selector("button.action-title-edit", { timeout: 7000 });
this.cardDescription = Selector('div[title="Description"]', { timeout: 7000 });
this.cardLocation = Selector("button.action-location", { timeout: 7000 });

2
frontend/tests/acceptance/page-model/toolbar.js
View file

@ -9,7 +9,7 @@ export default class Page {
this.search1 = Selector("div.input-search input");
this.toolbarDescription = Selector(".v-card__text").nth(0);
this.toolbarTitle = Selector("#p-navigation div.v-toolbar__title");
this.toolbarSecondTitle = Selector("main.v-content div.v-toolbar__title");
this.toolbarSecondTitle = Selector("main.v-main div.v-toolbar__title");
this.openMobileToolbar = Selector("button.mobile-menu-trigger");
}