Use "p-" prefix for PhotoPrism frontend components #15
This commit is contained in:
parent
e855262bb2
commit
5c69939966
12 changed files with 34 additions and 33 deletions
|
@ -48,7 +48,7 @@ main {
|
|||
top: -8px;
|
||||
}
|
||||
|
||||
#app-navigation {
|
||||
#p-navigation {
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
|
|
|
@ -1,18 +1,18 @@
|
|||
<template>
|
||||
<div id="app">
|
||||
<app-loading-bar ref="loadingBar" height="4"></app-loading-bar>
|
||||
<p-loading-bar ref="loadingBar" height="4"></p-loading-bar>
|
||||
|
||||
<app-alert></app-alert>
|
||||
<p-alert></p-alert>
|
||||
|
||||
<v-app>
|
||||
<app-navigation></app-navigation>
|
||||
<p-navigation></p-navigation>
|
||||
|
||||
<v-content>
|
||||
<router-view></router-view>
|
||||
</v-content>
|
||||
</v-app>
|
||||
|
||||
<app-gallery></app-gallery>
|
||||
<p-photo-viewer></p-photo-viewer>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
|
|
@ -135,10 +135,10 @@
|
|||
</v-btn>
|
||||
</v-speed-dial>
|
||||
|
||||
<app-photo-tiles v-if="query.view === 'tiles'" :photos="results" :open="openPhoto" :select="selectPhoto" :like="likePhoto"></app-photo-tiles>
|
||||
<app-photo-mosaic v-if="query.view === 'mosaic'" :photos="results" :open="openPhoto" :select="selectPhoto" :like="likePhoto"></app-photo-mosaic>
|
||||
<app-photo-details v-if="query.view === 'details'" :photos="results" :open="openPhoto" :select="selectPhoto" :like="likePhoto"></app-photo-details>
|
||||
<app-photo-list v-if="query.view === 'list'" :photos="results" :selected-photos="selected" :open="openPhoto" :select="selectPhoto" :like="likePhoto"></app-photo-list>
|
||||
<p-photo-tiles v-if="query.view === 'tiles'" :photos="results" :open="openPhoto" :select="selectPhoto" :like="likePhoto"></p-photo-tiles>
|
||||
<p-photo-mosaic v-if="query.view === 'mosaic'" :photos="results" :open="openPhoto" :select="selectPhoto" :like="likePhoto"></p-photo-mosaic>
|
||||
<p-photo-details v-if="query.view === 'details'" :photos="results" :open="openPhoto" :select="selectPhoto" :like="likePhoto"></p-photo-details>
|
||||
<p-photo-list v-if="query.view === 'list'" :photos="results" :selected-photos="selected" :open="openPhoto" :select="selectPhoto" :like="likePhoto"></p-photo-list>
|
||||
|
||||
<v-snackbar
|
||||
v-model="snackbarVisible"
|
||||
|
|
|
@ -1,23 +1,23 @@
|
|||
import AppAlert from "./app-alert.vue";
|
||||
import AppNavigation from "./app-navigation.vue";
|
||||
import AppLoadingBar from "./app-loading-bar.vue";
|
||||
import AppGallery from "./app-gallery.vue";
|
||||
import AppPhotoDetails from "./app-photo-details.vue";
|
||||
import AppPhotoTiles from "./app-photo-tiles.vue";
|
||||
import AppPhotoMosaic from "./app-photo-mosaic.vue";
|
||||
import AppPhotoList from "./app-photo-list.vue";
|
||||
import PAlert from "./p-alert.vue";
|
||||
import PNavigation from "./p-navigation.vue";
|
||||
import PLoadingBar from "./p-loading-bar.vue";
|
||||
import PPhotoDetails from "./p-photo-details.vue";
|
||||
import PPhotoTiles from "./p-photo-tiles.vue";
|
||||
import PPhotoMosaic from "./p-photo-mosaic.vue";
|
||||
import PPhotoList from "./p-photo-list.vue";
|
||||
import PPhotoViewer from "./p-photo-viewer.vue";
|
||||
|
||||
const components = {};
|
||||
|
||||
components.install = (Vue) => {
|
||||
Vue.component("app-alert", AppAlert);
|
||||
Vue.component("app-gallery", AppGallery);
|
||||
Vue.component("app-navigation", AppNavigation);
|
||||
Vue.component("app-loading-bar", AppLoadingBar);
|
||||
Vue.component("app-photo-details", AppPhotoDetails);
|
||||
Vue.component("app-photo-tiles", AppPhotoTiles);
|
||||
Vue.component("app-photo-mosaic", AppPhotoMosaic);
|
||||
Vue.component("app-photo-list", AppPhotoList);
|
||||
Vue.component("p-alert", PAlert);
|
||||
Vue.component("p-navigation", PNavigation);
|
||||
Vue.component("p-loading-bar", PLoadingBar);
|
||||
Vue.component("p-photo-details", PPhotoDetails);
|
||||
Vue.component("p-photo-tiles", PPhotoTiles);
|
||||
Vue.component("p-photo-mosaic", PPhotoMosaic);
|
||||
Vue.component("p-photo-list", PPhotoList);
|
||||
Vue.component("p-photo-viewer", PPhotoViewer);
|
||||
};
|
||||
|
||||
export default components;
|
||||
|
|
|
@ -22,7 +22,7 @@
|
|||
import Event from 'pubsub-js';
|
||||
|
||||
export default {
|
||||
name: 'app-alert',
|
||||
name: 'PAlert',
|
||||
data() {
|
||||
return {
|
||||
text: '',
|
|
@ -43,7 +43,7 @@
|
|||
})();
|
||||
|
||||
export default {
|
||||
name: 'app-loading-bar',
|
||||
name: "PLoadingBar",
|
||||
data () {
|
||||
return {
|
||||
error: false,
|
|
@ -1,5 +1,5 @@
|
|||
<template>
|
||||
<div id="app-navigation">
|
||||
<div id="p-navigation">
|
||||
<v-toolbar dark color="grey darken-3" class="hidden-lg-and-up" @click.stop="showNavigation()">
|
||||
<v-toolbar-side-icon></v-toolbar-side-icon>
|
||||
|
||||
|
@ -209,6 +209,7 @@
|
|||
|
||||
<script>
|
||||
export default {
|
||||
name: "PNavigation",
|
||||
data() {
|
||||
return {
|
||||
drawer: null,
|
|
@ -79,7 +79,7 @@
|
|||
</template>
|
||||
<script>
|
||||
export default {
|
||||
name: 'app-photo-details',
|
||||
name: 'PPhotoDetails',
|
||||
props: {
|
||||
photos: Array,
|
||||
open: Function,
|
|
@ -29,7 +29,7 @@
|
|||
</template>
|
||||
<script>
|
||||
export default {
|
||||
name: 'app-photo-list',
|
||||
name: 'PPhotoList',
|
||||
props: {
|
||||
photos: Array,
|
||||
selectedPhotos: Array,
|
|
@ -59,7 +59,7 @@
|
|||
</template>
|
||||
<script>
|
||||
export default {
|
||||
name: 'app-photo-mosaic',
|
||||
name: 'PPhotoMosaic',
|
||||
props: {
|
||||
photos: Array,
|
||||
open: Function,
|
|
@ -59,7 +59,7 @@
|
|||
</template>
|
||||
<script>
|
||||
export default {
|
||||
name: 'app-photo-tiles',
|
||||
name: 'PPhotoTiles',
|
||||
props: {
|
||||
photos: Array,
|
||||
open: Function,
|
|
@ -74,7 +74,7 @@
|
|||
import 'photoswipe/dist/default-skin/default-skin.css'
|
||||
|
||||
export default {
|
||||
name: "photoswipe",
|
||||
name: "PPhotoViewer",
|
||||
methods: {
|
||||
openGallery: function () {
|
||||
},
|
Loading…
Reference in a new issue