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