aboutsummaryrefslogtreecommitdiff
path: root/viewer/src/views/PanelTop.vue
diff options
context:
space:
mode:
authorNotkea2020-01-31 18:09:33 +0100
committerGitHub2020-01-31 18:09:33 +0100
commit245fee3fe5abdc6ad14513ef6522446aba4c905a (patch)
tree749ec466c404499f19d571834262b87c14f0d0af /viewer/src/views/PanelTop.vue
parentd94b987463169b254ab69a79ddb58e5beccb0941 (diff)
parentbe8ec3edaed843f08dac3d2bf2f10f7247ef3d3a (diff)
downloadldgallery-245fee3fe5abdc6ad14513ef6522446aba4c905a.tar.gz
Merge pull request #68 from pacien/oz-viewer
Diffstat (limited to 'viewer/src/views/PanelTop.vue')
-rw-r--r--viewer/src/views/PanelTop.vue55
1 files changed, 4 insertions, 51 deletions
diff --git a/viewer/src/views/PanelTop.vue b/viewer/src/views/PanelTop.vue
index e7421f0..60722cd 100644
--- a/viewer/src/views/PanelTop.vue
+++ b/viewer/src/views/PanelTop.vue
@@ -19,64 +19,17 @@
19 19
20<template> 20<template>
21 <div class="flex"> 21 <div class="flex">
22 <div class="command-btns"> 22 <ld-command />
23 <fa-icon icon="tags" size="lg" class="disabled" /> 23 <ld-breadcrumb />
24 <router-link to="/" :class="{disabled: $galleryStore.currentItemPath.length <= 1}">
25 <fa-icon icon="home" size="lg" />
26 </router-link>
27 <div class="link" @click="$router.go(-1)">
28 <fa-icon icon="arrow-left" size="lg" />
29 </div>
30 </div>
31 <ul class="pathBreadcrumb">
32 <li v-for="(item,idx) in $galleryStore.currentItemPath" :key="item.path">
33 <router-link :to="item.path">
34 <fa-icon :icon="getIcon(item)" size="lg" />
35 {{item.title}}
36 </router-link>
37 <fa-icon v-if="(idx+1) < $galleryStore.currentItemPath.length" icon="angle-right" />
38 </li>
39 </ul>
40 </div> 24 </div>
41</template> 25</template>
42 26
43<script lang="ts"> 27<script lang="ts">
44import { Component, Vue, Prop, Watch } from "vue-property-decorator"; 28import { Component, Vue } from "vue-property-decorator";
45import Gallery from "./Gallery.vue";
46 29
47@Component 30@Component
48export default class PanelTop extends Vue { 31export default class PanelTop extends Vue {}
49 getIcon(item: Gallery.Item) {
50 if (item.path.length <= 1) return "home";
51 switch (item.properties.type) {
52 case "picture":
53 return "image";
54 case "directory":
55 return "folder";
56 }
57 }
58}
59</script> 32</script>
60 33
61<style lang="scss"> 34<style lang="scss">
62@import "@/assets/scss/theme.scss";
63
64.pathBreadcrumb {
65 display: flex;
66 list-style: none;
67 margin: 5px;
68 a {
69 margin-right: 5px;
70 }
71 li:not(:first-child) {
72 margin-left: 10px;
73 }
74}
75.command-btns {
76 display: flex;
77 justify-content: space-around;
78 vertical-align: middle;
79 align-items: center;
80 width: $layout-left;
81}
82</style> 35</style>