mirror of
https://github.com/photoprism/photoprism.git
synced 2025-10-01 07:05:30 +08:00
Compare commits
1 Commits
scratch/fr
...
upgrade/vu
| Author | SHA1 | Date | |
|---|---|---|---|
|
bdc1336116 |
6
frontend/package-lock.json
generated
6
frontend/package-lock.json
generated
@@ -11935,9 +11935,9 @@
|
|||||||
"integrity": "sha512-QHZWYOL325Zo+2K7VBNEJTZ496Kd8Z31p85aQJFldKudUUGBmgw4zu4ghl4CyqPwjRCmqZ9lDdx4FSdMnu4fGg=="
|
"integrity": "sha512-QHZWYOL325Zo+2K7VBNEJTZ496Kd8Z31p85aQJFldKudUUGBmgw4zu4ghl4CyqPwjRCmqZ9lDdx4FSdMnu4fGg=="
|
||||||
},
|
},
|
||||||
"vuetify": {
|
"vuetify": {
|
||||||
"version": "1.5.21",
|
"version": "2.1.10",
|
||||||
"resolved": "https://registry.npmjs.org/vuetify/-/vuetify-1.5.21.tgz",
|
"resolved": "https://registry.npmjs.org/vuetify/-/vuetify-2.1.10.tgz",
|
||||||
"integrity": "sha512-x0F2mNoWMXVA2ntrmvfjJFU2elaq2WK1tD9wOBu447xUHdZqswziFD82pNtmWRy3TjEXsLj/ZNO8e5dZig+Iqg=="
|
"integrity": "sha512-hFc6XNYc2YE3HisxCH5VezRFtGQ2RwTvBy7eN+b67UuiGIhvEUR9h3uO4NUuulmvKPKJ4rONN+L9sVszgMBlJQ=="
|
||||||
},
|
},
|
||||||
"watchpack": {
|
"watchpack": {
|
||||||
"version": "1.6.0",
|
"version": "1.6.0",
|
||||||
|
|||||||
@@ -105,7 +105,7 @@
|
|||||||
"vue2-filters": "^0.6.1",
|
"vue2-filters": "^0.6.1",
|
||||||
"vue2-leaflet": "^2.2.1",
|
"vue2-leaflet": "^2.2.1",
|
||||||
"vuelidate": "^0.7.4",
|
"vuelidate": "^0.7.4",
|
||||||
"vuetify": "^1.5.21",
|
"vuetify": "^2.1.10",
|
||||||
"webpack": "^4.41.2",
|
"webpack": "^4.41.2",
|
||||||
"webpack-bundle-analyzer": "^3.6.0",
|
"webpack-bundle-analyzer": "^3.6.0",
|
||||||
"webpack-cli": "^3.3.10",
|
"webpack-cli": "^3.3.10",
|
||||||
|
|||||||
@@ -1,5 +1,6 @@
|
|||||||
import Api from "common/api";
|
import Api from "common/api";
|
||||||
import Notify from "common/notify";
|
import Notify from "common/notify";
|
||||||
|
// import Colors from "vuetify/lib/util/colors";
|
||||||
import Config from "common/config";
|
import Config from "common/config";
|
||||||
import Clipboard from "common/clipboard";
|
import Clipboard from "common/clipboard";
|
||||||
import Components from "component/components";
|
import Components from "component/components";
|
||||||
@@ -11,7 +12,7 @@ import PhotoPrism from "photoprism.vue";
|
|||||||
import Router from "vue-router";
|
import Router from "vue-router";
|
||||||
import Routes from "routes";
|
import Routes from "routes";
|
||||||
import Session from "session";
|
import Session from "session";
|
||||||
import { Settings } from "luxon";
|
import {Settings} from "luxon";
|
||||||
import Socket from "common/websocket";
|
import Socket from "common/websocket";
|
||||||
import Translations from "./i18n/translations.json";
|
import Translations from "./i18n/translations.json";
|
||||||
import Viewer from "common/viewer";
|
import Viewer from "common/viewer";
|
||||||
@@ -38,20 +39,40 @@ Vue.prototype.$socket = Socket;
|
|||||||
Vue.prototype.$config = config;
|
Vue.prototype.$config = config;
|
||||||
Vue.prototype.$clipboard = clipboard;
|
Vue.prototype.$clipboard = clipboard;
|
||||||
|
|
||||||
// Register Vuetify
|
// Configure Vuetify
|
||||||
Vue.use(Vuetify, {
|
const vueOpts = {
|
||||||
theme: {
|
icons: {
|
||||||
primary: "#FFD600",
|
iconfont: "mdiSvg",
|
||||||
secondary: "#b0bec5",
|
|
||||||
accent: "#00B8D4",
|
|
||||||
error: "#E57373",
|
|
||||||
info: "#00B8D4",
|
|
||||||
success: "#00BFA5",
|
|
||||||
warning: "#FFD600",
|
|
||||||
delete: "#E57373",
|
|
||||||
love: "#EF5350",
|
|
||||||
},
|
},
|
||||||
});
|
theme: {
|
||||||
|
themes: {
|
||||||
|
light: {
|
||||||
|
primary: "#FFD600",
|
||||||
|
secondary: "#b0bec5",
|
||||||
|
accent: "#00B8D4",
|
||||||
|
error: "#E57373",
|
||||||
|
info: "#00B8D4",
|
||||||
|
success: "#00BFA5",
|
||||||
|
warning: "#FFD600",
|
||||||
|
delete: "#E57373",
|
||||||
|
love: "#EF5350",
|
||||||
|
},
|
||||||
|
dark: {
|
||||||
|
primary: "#FFD600",
|
||||||
|
secondary: "#b0bec5",
|
||||||
|
accent: "#00B8D4",
|
||||||
|
error: "#E57373",
|
||||||
|
info: "#00B8D4",
|
||||||
|
success: "#00BFA5",
|
||||||
|
warning: "#FFD600",
|
||||||
|
delete: "#E57373",
|
||||||
|
love: "#EF5350",
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
};
|
||||||
|
|
||||||
|
Vue.use(Vuetify);
|
||||||
|
|
||||||
Vue.config.language = "en";
|
Vue.config.language = "en";
|
||||||
Settings.defaultLocale = Vue.config.language;
|
Settings.defaultLocale = Vue.config.language;
|
||||||
@@ -75,22 +96,22 @@ const router = new Router({
|
|||||||
});
|
});
|
||||||
|
|
||||||
router.beforeEach((to, from, next) => {
|
router.beforeEach((to, from, next) => {
|
||||||
if(to.matched.some(record => record.meta.admin)) {
|
if (to.matched.some(record => record.meta.admin)) {
|
||||||
if (isPublic || Session.isAdmin()) {
|
if (isPublic || Session.isAdmin()) {
|
||||||
next();
|
next();
|
||||||
} else {
|
} else {
|
||||||
next({
|
next({
|
||||||
name: "login",
|
name: "login",
|
||||||
params: { nextUrl: to.fullPath },
|
params: {nextUrl: to.fullPath},
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
} else if(to.matched.some(record => record.meta.auth)) {
|
} else if (to.matched.some(record => record.meta.auth)) {
|
||||||
if (isPublic || Session.isUser()) {
|
if (isPublic || Session.isUser()) {
|
||||||
next();
|
next();
|
||||||
} else {
|
} else {
|
||||||
next({
|
next({
|
||||||
name: "login",
|
name: "login",
|
||||||
params: { nextUrl: to.fullPath },
|
params: {nextUrl: to.fullPath},
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
} else {
|
} else {
|
||||||
@@ -99,9 +120,9 @@ router.beforeEach((to, from, next) => {
|
|||||||
});
|
});
|
||||||
|
|
||||||
// Run app
|
// Run app
|
||||||
/* eslint-disable no-unused-vars */
|
new Vue({
|
||||||
const app = new Vue({
|
|
||||||
el: "#photoprism",
|
el: "#photoprism",
|
||||||
|
vuetify: new Vuetify(vueOpts),
|
||||||
router,
|
router,
|
||||||
render: h => h(PhotoPrism),
|
render: h => h(PhotoPrism),
|
||||||
});
|
}).$mount("#photoprism");
|
||||||
|
|||||||
@@ -1,13 +1,13 @@
|
|||||||
<template>
|
<template>
|
||||||
<div id="p-navigation">
|
<div id="p-navigation">
|
||||||
<v-toolbar dark scroll-off-screen color="grey darken-3" class="hidden-lg-and-up p-navigation-small"
|
<v-app-bar dark scroll-off-screen color="grey darken-3" class="hidden-lg-and-up p-navigation-small"
|
||||||
@click.stop="showNavigation()">
|
@click.stop="showNavigation()">
|
||||||
<v-toolbar-side-icon class="p-navigation-show"></v-toolbar-side-icon>
|
<v-app-bar-nav-icon class="p-navigation-show"></v-app-bar-nav-icon>
|
||||||
|
|
||||||
<v-toolbar-title class="p-navigation-title">{{ $router.currentRoute.meta.area }}</v-toolbar-title>
|
<v-toolbar-title class="p-navigation-title">{{ $router.currentRoute.meta.area }}</v-toolbar-title>
|
||||||
|
|
||||||
<v-spacer></v-spacer>
|
<v-spacer></v-spacer>
|
||||||
</v-toolbar>
|
</v-app-bar>
|
||||||
<v-navigation-drawer
|
<v-navigation-drawer
|
||||||
v-model="drawer"
|
v-model="drawer"
|
||||||
:mini-variant="mini"
|
:mini-variant="mini"
|
||||||
@@ -15,116 +15,114 @@
|
|||||||
width="270"
|
width="270"
|
||||||
fixed dark app
|
fixed dark app
|
||||||
>
|
>
|
||||||
<v-toolbar flat>
|
<v-list-item class="p-navigation-logo" color="black">
|
||||||
<v-list>
|
<v-list-item-avatar>
|
||||||
<v-list-tile class="p-navigation-logo">
|
<v-img src="/static/img/logo.png"></v-img>
|
||||||
<v-list-tile-avatar>
|
</v-list-item-avatar>
|
||||||
<img src="/static/img/logo.png">
|
<v-list-item-title class="title">
|
||||||
</v-list-tile-avatar>
|
PhotoPrism
|
||||||
<v-list-tile-content>
|
</v-list-item-title>
|
||||||
<v-list-tile-title class="title">
|
|
||||||
PhotoPrism
|
|
||||||
</v-list-tile-title>
|
|
||||||
</v-list-tile-content>
|
|
||||||
<v-list-tile-action class="hidden-md-and-down">
|
|
||||||
<v-btn icon @click.stop="mini = !mini" class="p-navigation-minimize">
|
|
||||||
<v-icon>chevron_left</v-icon>
|
|
||||||
</v-btn>
|
|
||||||
</v-list-tile-action>
|
|
||||||
</v-list-tile>
|
|
||||||
</v-list>
|
|
||||||
</v-toolbar>
|
|
||||||
|
|
||||||
<v-list class="pt-3">
|
<v-btn
|
||||||
<v-list-tile v-if="mini" @click.stop="mini = !mini" class="p-navigation-expand">
|
icon
|
||||||
<v-list-tile-action>
|
@click.stop="mini = !mini" class="p-navigation-minimize"
|
||||||
|
>
|
||||||
|
<v-icon>chevron_left</v-icon>
|
||||||
|
</v-btn>
|
||||||
|
</v-list-item>
|
||||||
|
|
||||||
|
<v-divider></v-divider>
|
||||||
|
|
||||||
|
<v-list flat class="pt-3">
|
||||||
|
<v-list-item v-if="mini" @click.stop="mini = !mini" class="p-navigation-expand">
|
||||||
|
<v-list-item-icon>
|
||||||
<v-icon>chevron_right</v-icon>
|
<v-icon>chevron_right</v-icon>
|
||||||
</v-list-tile-action>
|
</v-list-item-icon>
|
||||||
</v-list-tile>
|
</v-list-item>
|
||||||
|
|
||||||
<v-list-tile v-if="mini" to="/photos" @click="" class="p-navigation-photos">
|
<v-list-item v-if="mini" to="/photos" @click="" class="p-navigation-photos">
|
||||||
<v-list-tile-action>
|
<v-list-item-icon>
|
||||||
<v-icon>photo</v-icon>
|
<v-icon>photo</v-icon>
|
||||||
</v-list-tile-action>
|
</v-list-item-icon>
|
||||||
|
|
||||||
<v-list-tile-content>
|
<v-list-item-content>
|
||||||
<v-list-tile-title>Photos</v-list-tile-title>
|
<v-list-item-title>Photos</v-list-item-title>
|
||||||
</v-list-tile-content>
|
</v-list-item-content>
|
||||||
</v-list-tile>
|
</v-list-item>
|
||||||
|
|
||||||
<v-list-group v-if="!mini" prepend-icon="photo" no-action>
|
<v-list-group v-if="!mini" prepend-icon="photo" no-action>
|
||||||
<v-list-tile slot="activator" to="/photos" @click.stop="" class="p-navigation-photos">
|
<v-list-item slot="activator" to="/photos" @click.stop="" class="p-navigation-photos">
|
||||||
<v-list-tile-content>
|
<v-list-item-content>
|
||||||
<v-list-tile-title>Photos</v-list-tile-title>
|
<v-list-item-title>Photos</v-list-item-title>
|
||||||
</v-list-tile-content>
|
</v-list-item-content>
|
||||||
</v-list-tile>
|
</v-list-item>
|
||||||
|
|
||||||
<v-list-tile :to="{name: 'photos', query: { q: 'mono:true' }}" :exact="true" @click="">
|
<v-list-item :to="{name: 'photos', query: { q: 'mono:true' }}" :exact="true" @click="">
|
||||||
<v-list-tile-content>
|
<v-list-item-content>
|
||||||
<v-list-tile-title>Monochrome</v-list-tile-title>
|
<v-list-item-title>Monochrome</v-list-item-title>
|
||||||
</v-list-tile-content>
|
</v-list-item-content>
|
||||||
</v-list-tile>
|
</v-list-item>
|
||||||
|
|
||||||
<v-list-tile :to="{name: 'photos', query: { q: 'chroma:50' }}" :exact="true" @click="">
|
<v-list-item :to="{name: 'photos', query: { q: 'chroma:50' }}" :exact="true" @click="">
|
||||||
<v-list-tile-content>
|
<v-list-item-content>
|
||||||
<v-list-tile-title>Vibrant</v-list-tile-title>
|
<v-list-item-title>Vibrant</v-list-item-title>
|
||||||
</v-list-tile-content>
|
</v-list-item-content>
|
||||||
</v-list-tile>
|
</v-list-item>
|
||||||
</v-list-group>
|
</v-list-group>
|
||||||
|
|
||||||
<v-list-tile v-if="mini" to="/albums" @click="">
|
<v-list-item v-if="mini" to="/albums" @click="">
|
||||||
<v-list-tile-action>
|
<v-list-item-icon>
|
||||||
<v-icon>folder</v-icon>
|
<v-icon>folder</v-icon>
|
||||||
</v-list-tile-action>
|
</v-list-item-icon>
|
||||||
|
|
||||||
<v-list-tile-content>
|
<v-list-item-content>
|
||||||
<v-list-tile-title>Albums</v-list-tile-title>
|
<v-list-item-title>Albums</v-list-item-title>
|
||||||
</v-list-tile-content>
|
</v-list-item-content>
|
||||||
</v-list-tile>
|
</v-list-item>
|
||||||
|
|
||||||
<v-list-group v-if="!mini" prepend-icon="folder" no-action>
|
<v-list-group v-if="!mini" prepend-icon="folder" no-action>
|
||||||
<v-list-tile slot="activator" to="/albums" @click="">
|
<v-list-item slot="activator" to="/albums" @click="">
|
||||||
<v-list-tile-content>
|
<v-list-item-content>
|
||||||
<v-list-tile-title>Albums</v-list-tile-title>
|
<v-list-item-title>Albums</v-list-item-title>
|
||||||
</v-list-tile-content>
|
</v-list-item-content>
|
||||||
</v-list-tile>
|
</v-list-item>
|
||||||
|
|
||||||
<v-list-tile @click.stop="$notify.warning('Work in progress')">
|
<v-list-item @click.stop="$notify.warning('Work in progress')">
|
||||||
<v-list-tile-content>
|
<v-list-item-content>
|
||||||
<v-list-tile-title>Work in progress...</v-list-tile-title>
|
<v-list-item-title>Work in progress...</v-list-item-title>
|
||||||
</v-list-tile-content>
|
</v-list-item-content>
|
||||||
</v-list-tile>
|
</v-list-item>
|
||||||
</v-list-group>
|
</v-list-group>
|
||||||
|
|
||||||
<v-list-tile to="/favorites" @click="" class="p-navigation-favorites">
|
<v-list-item to="/favorites" @click="" class="p-navigation-favorites">
|
||||||
<v-list-tile-action>
|
<v-list-item-icon>
|
||||||
<v-icon>favorite</v-icon>
|
<v-icon>favorite</v-icon>
|
||||||
</v-list-tile-action>
|
</v-list-item-icon>
|
||||||
|
|
||||||
<v-list-tile-content>
|
<v-list-item-content>
|
||||||
<v-list-tile-title>Favorites</v-list-tile-title>
|
<v-list-item-title>Favorites</v-list-item-title>
|
||||||
</v-list-tile-content>
|
</v-list-item-content>
|
||||||
</v-list-tile>
|
</v-list-item>
|
||||||
|
|
||||||
<v-list-tile to="/places" @click="" class="p-navigation-places">
|
<v-list-item to="/places" @click="" class="p-navigation-places">
|
||||||
<v-list-tile-action>
|
<v-list-item-icon>
|
||||||
<v-icon>place</v-icon>
|
<v-icon>place</v-icon>
|
||||||
</v-list-tile-action>
|
</v-list-item-icon>
|
||||||
|
|
||||||
<v-list-tile-content>
|
<v-list-item-content>
|
||||||
<v-list-tile-title>Places</v-list-tile-title>
|
<v-list-item-title>Places</v-list-item-title>
|
||||||
</v-list-tile-content>
|
</v-list-item-content>
|
||||||
</v-list-tile>
|
</v-list-item>
|
||||||
|
|
||||||
<v-list-tile to="/labels" @click="" class="p-navigation-labels">
|
<v-list-item to="/labels" @click="" class="p-navigation-labels">
|
||||||
<v-list-tile-action>
|
<v-list-item-icon>
|
||||||
<v-icon>label</v-icon>
|
<v-icon>label</v-icon>
|
||||||
</v-list-tile-action>
|
</v-list-item-icon>
|
||||||
|
|
||||||
<v-list-tile-content>
|
<v-list-item-content>
|
||||||
<v-list-tile-title>Labels</v-list-tile-title>
|
<v-list-item-title>Labels</v-list-item-title>
|
||||||
</v-list-tile-content>
|
</v-list-item-content>
|
||||||
</v-list-tile>
|
</v-list-item>
|
||||||
|
|
||||||
<!-- v-list-tile to="/events" @click="" class="p-navigation-events">
|
<!-- v-list-tile to="/events" @click="" class="p-navigation-events">
|
||||||
<v-list-tile-action>
|
<v-list-tile-action>
|
||||||
@@ -146,45 +144,45 @@
|
|||||||
</v-list-tile-content>
|
</v-list-tile-content>
|
||||||
</v-list-tile -->
|
</v-list-tile -->
|
||||||
|
|
||||||
<v-list-tile to="/library" @click="" class="p-navigation-library" v-if="session.auth || isPublic">
|
<v-list-item to="/library" @click="" class="p-navigation-library" v-if="session.auth || isPublic">
|
||||||
<v-list-tile-action>
|
<v-list-item-icon>
|
||||||
<v-icon>camera_roll</v-icon>
|
<v-icon>camera_roll</v-icon>
|
||||||
</v-list-tile-action>
|
</v-list-item-icon>
|
||||||
|
|
||||||
<v-list-tile-content>
|
<v-list-item-content>
|
||||||
<v-list-tile-title>Library</v-list-tile-title>
|
<v-list-item-title>Library</v-list-item-title>
|
||||||
</v-list-tile-content>
|
</v-list-item-content>
|
||||||
</v-list-tile>
|
</v-list-item>
|
||||||
|
|
||||||
<v-list-tile to="/settings" @click="" class="p-navigation-settings" v-if="session.auth || isPublic">
|
<v-list-item to="/settings" @click="" class="p-navigation-settings" v-if="session.auth || isPublic">
|
||||||
<v-list-tile-action>
|
<v-list-item-icon>
|
||||||
<v-icon>settings</v-icon>
|
<v-icon>settings</v-icon>
|
||||||
</v-list-tile-action>
|
</v-list-item-icon>
|
||||||
|
|
||||||
<v-list-tile-content>
|
<v-list-item-content>
|
||||||
<v-list-tile-title>Settings</v-list-tile-title>
|
<v-list-item-title>Settings</v-list-item-title>
|
||||||
</v-list-tile-content>
|
</v-list-item-content>
|
||||||
</v-list-tile>
|
</v-list-item>
|
||||||
|
|
||||||
<v-list-tile @click="logout" class="p-navigation-logout" v-if="!isPublic && session.auth">
|
<v-list-item @click="logout" class="p-navigation-logout" v-if="!isPublic && session.auth">
|
||||||
<v-list-tile-action>
|
<v-list-item-icon>
|
||||||
<v-icon>power_settings_new</v-icon>
|
<v-icon>power_settings_new</v-icon>
|
||||||
</v-list-tile-action>
|
</v-list-item-icon>
|
||||||
|
|
||||||
<v-list-tile-content>
|
<v-list-item-content>
|
||||||
<v-list-tile-title>Logout</v-list-tile-title>
|
<v-list-item-title>Logout</v-list-item-title>
|
||||||
</v-list-tile-content>
|
</v-list-item-content>
|
||||||
</v-list-tile>
|
</v-list-item>
|
||||||
|
|
||||||
<v-list-tile to="/login" @click="" class="p-navigation-login" v-if="!isPublic && !session.auth">
|
<v-list-item to="/login" @click="" class="p-navigation-login" v-if="!isPublic && !session.auth">
|
||||||
<v-list-tile-action>
|
<v-list-item-icon>
|
||||||
<v-icon>lock</v-icon>
|
<v-icon>lock</v-icon>
|
||||||
</v-list-tile-action>
|
</v-list-item-icon>
|
||||||
|
|
||||||
<v-list-tile-content>
|
<v-list-item-content>
|
||||||
<v-list-tile-title>Login</v-list-tile-title>
|
<v-list-item-title>Login</v-list-item-title>
|
||||||
</v-list-tile-content>
|
</v-list-item-content>
|
||||||
</v-list-tile>
|
</v-list-item>
|
||||||
</v-list>
|
</v-list>
|
||||||
</v-navigation-drawer>
|
</v-navigation-drawer>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@@ -12,7 +12,7 @@
|
|||||||
<v-btn
|
<v-btn
|
||||||
:class="textColor + ' pr-0'"
|
:class="textColor + ' pr-0'"
|
||||||
icon
|
icon
|
||||||
flat
|
text
|
||||||
@click="close"
|
@click="close"
|
||||||
>
|
>
|
||||||
<v-icon>close</v-icon>
|
<v-icon>close</v-icon>
|
||||||
|
|||||||
@@ -8,12 +8,17 @@
|
|||||||
</div>
|
</div>
|
||||||
</v-card-title>
|
</v-card-title>
|
||||||
</v-card>
|
</v-card>
|
||||||
<v-layout row wrap>
|
<v-row row wrap>
|
||||||
<v-flex
|
<v-col
|
||||||
v-for="(photo, index) in photos"
|
v-for="(photo, index) in photos"
|
||||||
:key="index"
|
:key="index"
|
||||||
class="p-photo"
|
class="p-photo"
|
||||||
xs12 sm6 md4 lg3 d-flex
|
cols="12"
|
||||||
|
sm="6"
|
||||||
|
md="4"
|
||||||
|
lg="3"
|
||||||
|
xl="2"
|
||||||
|
d-flex
|
||||||
>
|
>
|
||||||
<v-hover>
|
<v-hover>
|
||||||
<v-card tile slot-scope="{ hover }"
|
<v-card tile slot-scope="{ hover }"
|
||||||
@@ -28,7 +33,7 @@
|
|||||||
@click="openPhoto(index)"
|
@click="openPhoto(index)"
|
||||||
|
|
||||||
>
|
>
|
||||||
<v-layout
|
<v-row
|
||||||
slot="placeholder"
|
slot="placeholder"
|
||||||
fill-height
|
fill-height
|
||||||
align-center
|
align-center
|
||||||
@@ -36,9 +41,9 @@
|
|||||||
ma-0
|
ma-0
|
||||||
>
|
>
|
||||||
<v-progress-circular indeterminate color="grey lighten-5"></v-progress-circular>
|
<v-progress-circular indeterminate color="grey lighten-5"></v-progress-circular>
|
||||||
</v-layout>
|
</v-row>
|
||||||
|
|
||||||
<v-btn v-if="hover || $clipboard.has(photo)" :flat="!hover" :ripple="false"
|
<v-btn v-if="hover || $clipboard.has(photo)" :text="!hover" :ripple="false"
|
||||||
icon large absolute
|
icon large absolute
|
||||||
class="p-photo-select"
|
class="p-photo-select"
|
||||||
@click.stop.prevent="$clipboard.toggle(photo)">
|
@click.stop.prevent="$clipboard.toggle(photo)">
|
||||||
@@ -46,7 +51,7 @@
|
|||||||
<v-icon v-else color="grey lighten-3">radio_button_off</v-icon>
|
<v-icon v-else color="grey lighten-3">radio_button_off</v-icon>
|
||||||
</v-btn>
|
</v-btn>
|
||||||
|
|
||||||
<v-btn v-if="hover || photo.PhotoFavorite" :flat="!hover" :ripple="false"
|
<v-btn v-if="hover || photo.PhotoFavorite" :text="!hover" :ripple="false"
|
||||||
icon large absolute
|
icon large absolute
|
||||||
class="p-photo-like"
|
class="p-photo-like"
|
||||||
@click.stop.prevent="photo.toggleLike()">
|
@click.stop.prevent="photo.toggleLike()">
|
||||||
@@ -78,8 +83,8 @@
|
|||||||
</v-card-title>
|
</v-card-title>
|
||||||
</v-card>
|
</v-card>
|
||||||
</v-hover>
|
</v-hover>
|
||||||
</v-flex>
|
</v-col>
|
||||||
</v-layout>
|
</v-row>
|
||||||
</v-container>
|
</v-container>
|
||||||
</template>
|
</template>
|
||||||
<script>
|
<script>
|
||||||
|
|||||||
@@ -22,7 +22,7 @@
|
|||||||
<td>{{ props.item.TakenAt | luxon:format('dd/MM/yyyy hh:mm:ss') }}</td>
|
<td>{{ props.item.TakenAt | luxon:format('dd/MM/yyyy hh:mm:ss') }}</td>
|
||||||
<td @click="openLocation(props.index)" class="p-pointer">{{ props.item.LocCountry }}</td>
|
<td @click="openLocation(props.index)" class="p-pointer">{{ props.item.LocCountry }}</td>
|
||||||
<td>{{ props.item.CameraMake }} {{ props.item.CameraModel }}</td>
|
<td>{{ props.item.CameraMake }} {{ props.item.CameraModel }}</td>
|
||||||
<td><v-btn icon small flat :ripple="false"
|
<td><v-btn icon small text :ripple="false"
|
||||||
class="p-photo-like"
|
class="p-photo-like"
|
||||||
@click.stop.prevent="props.item.toggleLike()">
|
@click.stop.prevent="props.item.toggleLike()">
|
||||||
<v-icon v-if="props.item.PhotoFavorite" color="pink lighten-3">favorite</v-icon>
|
<v-icon v-if="props.item.PhotoFavorite" color="pink lighten-3">favorite</v-icon>
|
||||||
|
|||||||
@@ -8,13 +8,17 @@
|
|||||||
</div>
|
</div>
|
||||||
</v-card-title>
|
</v-card-title>
|
||||||
</v-card>
|
</v-card>
|
||||||
<v-layout row wrap>
|
<v-row wrap>
|
||||||
<v-flex
|
<v-col
|
||||||
v-for="(photo, index) in photos"
|
v-for="(photo, index) in photos"
|
||||||
:key="index"
|
:key="index"
|
||||||
v-bind:class="{ selected: $clipboard.has(photo) }"
|
v-bind:class="{ selected: $clipboard.has(photo) }"
|
||||||
class="p-photo"
|
class="p-photo"
|
||||||
xs4 sm3 md2 lg1 d-flex
|
cols="4"
|
||||||
|
sm="3"
|
||||||
|
md="2"
|
||||||
|
lg="1"
|
||||||
|
d-flex
|
||||||
>
|
>
|
||||||
<v-hover>
|
<v-hover>
|
||||||
<v-card tile slot-scope="{ hover }"
|
<v-card tile slot-scope="{ hover }"
|
||||||
@@ -26,7 +30,7 @@
|
|||||||
style="cursor: pointer"
|
style="cursor: pointer"
|
||||||
@click="openPhoto(index)"
|
@click="openPhoto(index)"
|
||||||
>
|
>
|
||||||
<v-layout
|
<v-row
|
||||||
slot="placeholder"
|
slot="placeholder"
|
||||||
fill-height
|
fill-height
|
||||||
align-center
|
align-center
|
||||||
@@ -35,9 +39,9 @@
|
|||||||
>
|
>
|
||||||
<v-progress-circular indeterminate
|
<v-progress-circular indeterminate
|
||||||
color="grey lighten-5"></v-progress-circular>
|
color="grey lighten-5"></v-progress-circular>
|
||||||
</v-layout>
|
</v-row>
|
||||||
|
|
||||||
<v-btn v-if="hover || $clipboard.has(photo)" :flat="!hover" :ripple="false"
|
<v-btn v-if="hover || $clipboard.has(photo)" :text="!hover" :ripple="false"
|
||||||
icon small absolute
|
icon small absolute
|
||||||
class="p-photo-select"
|
class="p-photo-select"
|
||||||
@click.stop.prevent="$clipboard.toggle(photo)">
|
@click.stop.prevent="$clipboard.toggle(photo)">
|
||||||
@@ -45,7 +49,7 @@
|
|||||||
<v-icon v-else color="grey lighten-3">radio_button_off</v-icon>
|
<v-icon v-else color="grey lighten-3">radio_button_off</v-icon>
|
||||||
</v-btn>
|
</v-btn>
|
||||||
|
|
||||||
<v-btn v-if="hover || photo.PhotoFavorite" :flat="!hover" :ripple="false"
|
<v-btn v-if="hover || photo.PhotoFavorite" :text="!hover" :ripple="false"
|
||||||
icon small absolute
|
icon small absolute
|
||||||
class="p-photo-like"
|
class="p-photo-like"
|
||||||
@click.stop.prevent="photo.toggleLike()">
|
@click.stop.prevent="photo.toggleLike()">
|
||||||
@@ -56,8 +60,8 @@
|
|||||||
|
|
||||||
</v-card>
|
</v-card>
|
||||||
</v-hover>
|
</v-hover>
|
||||||
</v-flex>
|
</v-col>
|
||||||
</v-layout>
|
</v-row>
|
||||||
</v-container>
|
</v-container>
|
||||||
</template>
|
</template>
|
||||||
<script>
|
<script>
|
||||||
|
|||||||
@@ -45,8 +45,8 @@
|
|||||||
color="blue-grey lighten-5"
|
color="blue-grey lighten-5"
|
||||||
v-show="searchExpanded">
|
v-show="searchExpanded">
|
||||||
<v-card-text>
|
<v-card-text>
|
||||||
<v-layout row wrap>
|
<v-row wrap>
|
||||||
<v-flex xs12 sm6 md3 pa-2 class="p-countries-select">
|
<v-col xs12 sm6 md3 pa-2 class="p-countries-select">
|
||||||
<v-select @change="dropdownChange"
|
<v-select @change="dropdownChange"
|
||||||
label="Country"
|
label="Country"
|
||||||
flat solo hide-details
|
flat solo hide-details
|
||||||
@@ -56,8 +56,8 @@
|
|||||||
v-model="filter.country"
|
v-model="filter.country"
|
||||||
:items="options.countries">
|
:items="options.countries">
|
||||||
</v-select>
|
</v-select>
|
||||||
</v-flex>
|
</v-col>
|
||||||
<v-flex xs12 sm6 md3 pa-2 class="p-camera-select">
|
<v-col xs12 sm6 md3 pa-2 class="p-camera-select">
|
||||||
<v-select @change="dropdownChange"
|
<v-select @change="dropdownChange"
|
||||||
label="Camera"
|
label="Camera"
|
||||||
flat solo hide-details
|
flat solo hide-details
|
||||||
@@ -67,8 +67,8 @@
|
|||||||
v-model="filter.camera"
|
v-model="filter.camera"
|
||||||
:items="options.cameras">
|
:items="options.cameras">
|
||||||
</v-select>
|
</v-select>
|
||||||
</v-flex>
|
</v-col>
|
||||||
<v-flex xs12 sm6 md3 pa-2 class="p-view-select">
|
<v-col xs12 sm6 md3 pa-2 class="p-view-select">
|
||||||
<v-select @change="dropdownChange"
|
<v-select @change="dropdownChange"
|
||||||
label="View"
|
label="View"
|
||||||
flat solo hide-details
|
flat solo hide-details
|
||||||
@@ -77,8 +77,8 @@
|
|||||||
:items="options.views"
|
:items="options.views"
|
||||||
id="viewSelect">
|
id="viewSelect">
|
||||||
</v-select>
|
</v-select>
|
||||||
</v-flex>
|
</v-col>
|
||||||
<v-flex xs12 sm6 md3 pa-2 class="p-time-select">
|
<v-col xs12 sm6 md3 pa-2 class="p-time-select">
|
||||||
<v-select @change="dropdownChange"
|
<v-select @change="dropdownChange"
|
||||||
label="Sort By"
|
label="Sort By"
|
||||||
flat solo hide-details
|
flat solo hide-details
|
||||||
@@ -86,8 +86,8 @@
|
|||||||
v-model="filter.order"
|
v-model="filter.order"
|
||||||
:items="options.sorting">
|
:items="options.sorting">
|
||||||
</v-select>
|
</v-select>
|
||||||
</v-flex>
|
</v-col>
|
||||||
</v-layout>
|
</v-row>
|
||||||
</v-card-text>
|
</v-card-text>
|
||||||
</v-card>
|
</v-card>
|
||||||
</v-form>
|
</v-form>
|
||||||
|
|||||||
@@ -8,13 +8,17 @@
|
|||||||
</div>
|
</div>
|
||||||
</v-card-title>
|
</v-card-title>
|
||||||
</v-card>
|
</v-card>
|
||||||
<v-layout row wrap>
|
<v-row wrap>
|
||||||
<v-flex
|
<v-col
|
||||||
v-for="(photo, index) in photos"
|
v-for="(photo, index) in photos"
|
||||||
:key="index"
|
:key="index"
|
||||||
v-bind:class="{ selected: $clipboard.has(photo) }"
|
v-bind:class="{ selected: $clipboard.has(photo) }"
|
||||||
class="p-photo"
|
class="p-photo"
|
||||||
xs12 sm6 md3 lg2 d-flex
|
cols="12"
|
||||||
|
sm="6"
|
||||||
|
md="3"
|
||||||
|
lg="2"
|
||||||
|
d-flex
|
||||||
>
|
>
|
||||||
<v-hover>
|
<v-hover>
|
||||||
<v-card tile slot-scope="{ hover }"
|
<v-card tile slot-scope="{ hover }"
|
||||||
@@ -26,7 +30,7 @@
|
|||||||
style="cursor: pointer"
|
style="cursor: pointer"
|
||||||
@click="openPhoto(index)"
|
@click="openPhoto(index)"
|
||||||
>
|
>
|
||||||
<v-layout
|
<v-row
|
||||||
slot="placeholder"
|
slot="placeholder"
|
||||||
fill-height
|
fill-height
|
||||||
align-center
|
align-center
|
||||||
@@ -35,9 +39,9 @@
|
|||||||
>
|
>
|
||||||
<v-progress-circular indeterminate
|
<v-progress-circular indeterminate
|
||||||
color="grey lighten-5"></v-progress-circular>
|
color="grey lighten-5"></v-progress-circular>
|
||||||
</v-layout>
|
</v-row>
|
||||||
|
|
||||||
<v-btn v-if="hover || $clipboard.has(photo)" :flat="!hover" :ripple="false"
|
<v-btn v-if="hover || $clipboard.has(photo)" :text="!hover" :ripple="false"
|
||||||
icon large absolute
|
icon large absolute
|
||||||
class="p-photo-select"
|
class="p-photo-select"
|
||||||
@click.stop.prevent="$clipboard.toggle(photo)">
|
@click.stop.prevent="$clipboard.toggle(photo)">
|
||||||
@@ -45,7 +49,7 @@
|
|||||||
<v-icon v-else-if="!$clipboard.has(photo)" color="grey lighten-3">radio_button_off</v-icon>
|
<v-icon v-else-if="!$clipboard.has(photo)" color="grey lighten-3">radio_button_off</v-icon>
|
||||||
</v-btn>
|
</v-btn>
|
||||||
|
|
||||||
<v-btn v-if="hover || photo.PhotoFavorite" :flat="!hover" :ripple="false"
|
<v-btn v-if="hover || photo.PhotoFavorite" :text="!hover" :ripple="false"
|
||||||
icon large absolute
|
icon large absolute
|
||||||
class="p-photo-like"
|
class="p-photo-like"
|
||||||
@click.stop.prevent="photo.toggleLike()">
|
@click.stop.prevent="photo.toggleLike()">
|
||||||
@@ -56,8 +60,8 @@
|
|||||||
|
|
||||||
</v-card>
|
</v-card>
|
||||||
</v-hover>
|
</v-hover>
|
||||||
</v-flex>
|
</v-col>
|
||||||
</v-layout>
|
</v-row>
|
||||||
</v-container>
|
</v-container>
|
||||||
</template>
|
</template>
|
||||||
<script>
|
<script>
|
||||||
|
|||||||
@@ -2,22 +2,22 @@
|
|||||||
<v-dialog v-model="show" persistent max-width="350" class="p-photo-delete-dialog" @keydown.esc="cancel">
|
<v-dialog v-model="show" persistent max-width="350" class="p-photo-delete-dialog" @keydown.esc="cancel">
|
||||||
<v-card raised elevation="24">
|
<v-card raised elevation="24">
|
||||||
<v-container fluid class="pb-2 pr-2 pl-2">
|
<v-container fluid class="pb-2 pr-2 pl-2">
|
||||||
<v-layout row wrap>
|
<v-row wrap>
|
||||||
<v-flex xs3 text-xs-center>
|
<v-col xs3 text-xs-center>
|
||||||
<v-icon size="54" color="grey lighten-1">delete_outline</v-icon>
|
<v-icon size="54" color="grey lighten-1">delete_outline</v-icon>
|
||||||
</v-flex>
|
</v-col>
|
||||||
<v-flex xs9 text-xs-left align-self-center>
|
<v-col xs9 text-xs-left align-self-center>
|
||||||
<div class="subheading pr-1">Are you sure you want to delete these photos?</div>
|
<div class="subheading pr-1">Are you sure you want to delete these photos?</div>
|
||||||
</v-flex>
|
</v-col>
|
||||||
<v-flex xs12 text-xs-right class="pt-3">
|
<v-col xs12 text-xs-right class="pt-3">
|
||||||
<v-btn @click.stop="cancel" depressed color="grey lighten-3" class="p-photo-dialog-cancel">
|
<v-btn @click.stop="cancel" depressed color="grey lighten-3" class="p-photo-dialog-cancel">
|
||||||
Cancel
|
Cancel
|
||||||
</v-btn>
|
</v-btn>
|
||||||
<v-btn color="blue-grey lighten-2" depressed dark @click.stop="confirm"
|
<v-btn color="blue-grey lighten-2" depressed dark @click.stop="confirm"
|
||||||
class="p-photo-dialog-confirm">Delete
|
class="p-photo-dialog-confirm">Delete
|
||||||
</v-btn>
|
</v-btn>
|
||||||
</v-flex>
|
</v-col>
|
||||||
</v-layout>
|
</v-row>
|
||||||
</v-container>
|
</v-container>
|
||||||
</v-card>
|
</v-card>
|
||||||
</v-dialog>
|
</v-dialog>
|
||||||
|
|||||||
@@ -36,8 +36,8 @@
|
|||||||
</div>
|
</div>
|
||||||
</v-card-title>
|
</v-card-title>
|
||||||
</v-card>
|
</v-card>
|
||||||
<v-layout row wrap>
|
<v-row row wrap>
|
||||||
<v-flex
|
<v-col
|
||||||
v-for="(album, index) in results"
|
v-for="(album, index) in results"
|
||||||
:key="index"
|
:key="index"
|
||||||
class="p-album"
|
class="p-album"
|
||||||
@@ -52,7 +52,7 @@
|
|||||||
class="grey lighten-2"
|
class="grey lighten-2"
|
||||||
@click.prevent="openAlbum(index)"
|
@click.prevent="openAlbum(index)"
|
||||||
>
|
>
|
||||||
<v-layout
|
<v-row
|
||||||
slot="placeholder"
|
slot="placeholder"
|
||||||
fill-height
|
fill-height
|
||||||
align-center
|
align-center
|
||||||
@@ -60,7 +60,7 @@
|
|||||||
ma-0
|
ma-0
|
||||||
>
|
>
|
||||||
<v-progress-circular indeterminate color="grey lighten-5"></v-progress-circular>
|
<v-progress-circular indeterminate color="grey lighten-5"></v-progress-circular>
|
||||||
</v-layout>
|
</v-row>
|
||||||
</v-img>
|
</v-img>
|
||||||
|
|
||||||
<v-card-actions>
|
<v-card-actions>
|
||||||
@@ -74,8 +74,8 @@
|
|||||||
</v-card-actions>
|
</v-card-actions>
|
||||||
</v-card>
|
</v-card>
|
||||||
</v-hover>
|
</v-hover>
|
||||||
</v-flex>
|
</v-col>
|
||||||
</v-layout>
|
</v-row>
|
||||||
</v-container>
|
</v-container>
|
||||||
</v-container>
|
</v-container>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@@ -7,8 +7,8 @@
|
|||||||
</v-toolbar>
|
</v-toolbar>
|
||||||
|
|
||||||
<v-container>
|
<v-container>
|
||||||
<v-layout wrap>
|
<v-row wrap>
|
||||||
<v-flex
|
<v-col
|
||||||
xs12
|
xs12
|
||||||
class="mb-3"
|
class="mb-3"
|
||||||
>
|
>
|
||||||
@@ -21,9 +21,9 @@
|
|||||||
color="primary"
|
color="primary"
|
||||||
></v-calendar>
|
></v-calendar>
|
||||||
</v-sheet>
|
</v-sheet>
|
||||||
</v-flex>
|
</v-col>
|
||||||
|
|
||||||
<v-flex
|
<v-col
|
||||||
sm4
|
sm4
|
||||||
xs12
|
xs12
|
||||||
class="text-sm-left text-xs-center"
|
class="text-sm-left text-xs-center"
|
||||||
@@ -37,8 +37,8 @@
|
|||||||
</v-icon>
|
</v-icon>
|
||||||
Prev
|
Prev
|
||||||
</v-btn>
|
</v-btn>
|
||||||
</v-flex>
|
</v-col>
|
||||||
<v-flex
|
<v-col
|
||||||
sm4
|
sm4
|
||||||
xs12
|
xs12
|
||||||
class="text-xs-center"
|
class="text-xs-center"
|
||||||
@@ -48,8 +48,8 @@
|
|||||||
:items="typeOptions"
|
:items="typeOptions"
|
||||||
label="Type"
|
label="Type"
|
||||||
></v-select>
|
></v-select>
|
||||||
</v-flex>
|
</v-col>
|
||||||
<v-flex
|
<v-col
|
||||||
sm4
|
sm4
|
||||||
xs12
|
xs12
|
||||||
class="text-sm-right text-xs-center"
|
class="text-sm-right text-xs-center"
|
||||||
@@ -63,8 +63,8 @@
|
|||||||
keyboard_arrow_right
|
keyboard_arrow_right
|
||||||
</v-icon>
|
</v-icon>
|
||||||
</v-btn>
|
</v-btn>
|
||||||
</v-flex>
|
</v-col>
|
||||||
</v-layout>
|
</v-row>
|
||||||
</v-container>
|
</v-container>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|||||||
@@ -32,8 +32,8 @@
|
|||||||
</div>
|
</div>
|
||||||
</v-card-title>
|
</v-card-title>
|
||||||
</v-card>
|
</v-card>
|
||||||
<v-layout row wrap>
|
<v-row wrap>
|
||||||
<v-flex
|
<v-col
|
||||||
v-for="(label, index) in results"
|
v-for="(label, index) in results"
|
||||||
:key="index"
|
:key="index"
|
||||||
class="p-label"
|
class="p-label"
|
||||||
@@ -48,7 +48,7 @@
|
|||||||
class="grey lighten-2"
|
class="grey lighten-2"
|
||||||
@click.prevent="openLabel(index)"
|
@click.prevent="openLabel(index)"
|
||||||
>
|
>
|
||||||
<v-layout
|
<v-row
|
||||||
slot="placeholder"
|
slot="placeholder"
|
||||||
fill-height
|
fill-height
|
||||||
align-center
|
align-center
|
||||||
@@ -56,7 +56,7 @@
|
|||||||
ma-0
|
ma-0
|
||||||
>
|
>
|
||||||
<v-progress-circular indeterminate color="grey lighten-5"></v-progress-circular>
|
<v-progress-circular indeterminate color="grey lighten-5"></v-progress-circular>
|
||||||
</v-layout>
|
</v-row>
|
||||||
</v-img>
|
</v-img>
|
||||||
|
|
||||||
<v-card-actions>
|
<v-card-actions>
|
||||||
@@ -70,8 +70,8 @@
|
|||||||
</v-card-actions>
|
</v-card-actions>
|
||||||
</v-card>
|
</v-card>
|
||||||
</v-hover>
|
</v-hover>
|
||||||
</v-flex>
|
</v-col>
|
||||||
</v-layout>
|
</v-row>
|
||||||
</v-container>
|
</v-container>
|
||||||
</v-container>
|
</v-container>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@@ -2,8 +2,8 @@
|
|||||||
<div class="p-tab p-tab-general">
|
<div class="p-tab p-tab-general">
|
||||||
<v-container fluid>
|
<v-container fluid>
|
||||||
<v-form ref="form" class="p-form-settings" lazy-validation @submit.prevent="save" dense>
|
<v-form ref="form" class="p-form-settings" lazy-validation @submit.prevent="save" dense>
|
||||||
<v-layout wrap align-center>
|
<v-row wrap align-center>
|
||||||
<v-flex xs12 sm6 class="pr-3">
|
<v-col xs12 sm6 class="pr-3">
|
||||||
<v-select
|
<v-select
|
||||||
:items="languages"
|
:items="languages"
|
||||||
label="Language"
|
label="Language"
|
||||||
@@ -11,9 +11,9 @@
|
|||||||
v-model="settings.language"
|
v-model="settings.language"
|
||||||
flat
|
flat
|
||||||
></v-select>
|
></v-select>
|
||||||
</v-flex>
|
</v-col>
|
||||||
|
|
||||||
<v-flex xs12 sm6 class="pr-3">
|
<v-col xs12 sm6 class="pr-3">
|
||||||
<v-select
|
<v-select
|
||||||
:items="themes"
|
:items="themes"
|
||||||
label="Theme"
|
label="Theme"
|
||||||
@@ -21,8 +21,8 @@
|
|||||||
v-model="settings.theme"
|
v-model="settings.theme"
|
||||||
flat
|
flat
|
||||||
></v-select>
|
></v-select>
|
||||||
</v-flex>
|
</v-col>
|
||||||
</v-layout>
|
</v-row>
|
||||||
|
|
||||||
<v-btn color="blue-grey"
|
<v-btn color="blue-grey"
|
||||||
class="white--text ml-0 mt-2"
|
class="white--text ml-0 mt-2"
|
||||||
|
|||||||
Reference in New Issue
Block a user