Use "p-" prefix for PhotoPrism frontend components #15

This commit is contained in:
Michael Mayer 2019-05-19 18:19:41 +02:00
parent e855262bb2
commit 5c69939966
12 changed files with 34 additions and 33 deletions

View file

@ -48,7 +48,7 @@ main {
top: -8px;
}
#app-navigation {
#p-navigation {
z-index: 10;
}

View file

@ -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>

View file

@ -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"

View file

@ -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;

View file

@ -22,7 +22,7 @@
import Event from 'pubsub-js';
export default {
name: 'app-alert',
name: 'PAlert',
data() {
return {
text: '',

View file

@ -43,7 +43,7 @@
})();
export default {
name: 'app-loading-bar',
name: "PLoadingBar",
data () {
return {
error: false,

View file

@ -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,

View file

@ -79,7 +79,7 @@
</template>
<script>
export default {
name: 'app-photo-details',
name: 'PPhotoDetails',
props: {
photos: Array,
open: Function,

View file

@ -29,7 +29,7 @@
</template>
<script>
export default {
name: 'app-photo-list',
name: 'PPhotoList',
props: {
photos: Array,
selectedPhotos: Array,

View file

@ -59,7 +59,7 @@
</template>
<script>
export default {
name: 'app-photo-mosaic',
name: 'PPhotoMosaic',
props: {
photos: Array,
open: Function,

View file

@ -59,7 +59,7 @@
</template>
<script>
export default {
name: 'app-photo-tiles',
name: 'PPhotoTiles',
props: {
photos: Array,
open: Function,

View file

@ -74,7 +74,7 @@
import 'photoswipe/dist/default-skin/default-skin.css'
export default {
name: "photoswipe",
name: "PPhotoViewer",
methods: {
openGallery: function () {
},