aboutsummaryrefslogtreecommitdiff
path: root/viewer
diff options
context:
space:
mode:
authorZero~Informatique2020-01-30 21:24:15 +0100
committerZero~Informatique2020-01-30 21:24:15 +0100
commit42105af46681d81959a5d5a9a16ec9e98463a92e (patch)
tree9a7e32da0c3ebcc41199cd2667ca1da113b93d21 /viewer
parent16d319ac092aea56ac9f872129d23fface4b379d (diff)
downloadldgallery-42105af46681d81959a5d5a9a16ec9e98463a92e.tar.gz
viewer: new breadcrumb. navigation buttons. and styling improvements
Diffstat (limited to 'viewer')
-rw-r--r--viewer/src/assets/scss/buefy.scss3
-rw-r--r--viewer/src/assets/scss/global.scss15
-rw-r--r--viewer/src/assets/scss/theme.scss7
-rw-r--r--viewer/src/components/LdProposition.vue14
-rw-r--r--viewer/src/plugins/fontawesome.ts8
-rw-r--r--viewer/src/views/GalleryThumbnail.vue2
-rw-r--r--viewer/src/views/PanelLeft.vue5
-rw-r--r--viewer/src/views/PanelTop.vue78
8 files changed, 74 insertions, 58 deletions
diff --git a/viewer/src/assets/scss/buefy.scss b/viewer/src/assets/scss/buefy.scss
index 7fdb883..735ce6a 100644
--- a/viewer/src/assets/scss/buefy.scss
+++ b/viewer/src/assets/scss/buefy.scss
@@ -24,8 +24,7 @@
24@import "buefy_variables"; 24@import "buefy_variables";
25 25
26// 2. Setup your Custom Colors 26// 2. Setup your Custom Colors
27// $linkedin: #0077b5; 27@import "@/assets/scss/theme.scss";
28// $linkedin-invert: findColorInvert($linkedin);
29 28
30@import "~bulma/sass/utilities/derived-variables"; 29@import "~bulma/sass/utilities/derived-variables";
31 30
diff --git a/viewer/src/assets/scss/global.scss b/viewer/src/assets/scss/global.scss
index 645d4a0..3cfa1a5 100644
--- a/viewer/src/assets/scss/global.scss
+++ b/viewer/src/assets/scss/global.scss
@@ -44,6 +44,21 @@
44 align-items: center; 44 align-items: center;
45} 45}
46 46
47// === Links
48
49.link {
50 color: $link;
51 cursor: pointer;
52 text-decoration: none;
53 & :hover {
54 color: $link-hover;
55 }
56}
57
58.disabled {
59 color: $disabled-color !important;
60}
61
47// === Scrollbar styling 62// === Scrollbar styling
48 63
49.scrollbar { 64.scrollbar {
diff --git a/viewer/src/assets/scss/theme.scss b/viewer/src/assets/scss/theme.scss
index 3f2b623..2314ee8 100644
--- a/viewer/src/assets/scss/theme.scss
+++ b/viewer/src/assets/scss/theme.scss
@@ -19,7 +19,7 @@
19 19
20// === Theme 20// === Theme
21 21
22$layout-top: 70px; 22$layout-top: 35px;
23$layout-left: 250px; 23$layout-left: 250px;
24 24
25$panel-top-bgcolor: #225; 25$panel-top-bgcolor: #225;
@@ -27,7 +27,8 @@ $panel-top-txtcolor: white;
27$panel-left-bgcolor: $panel-top-bgcolor; 27$panel-left-bgcolor: $panel-top-bgcolor;
28$panel-left-txtcolor: $panel-top-txtcolor; 28$panel-left-txtcolor: $panel-top-txtcolor;
29$content-bgcolor: #1e1e1e; 29$content-bgcolor: #1e1e1e;
30
31$toolbar-color: #d62929; 30$toolbar-color: #d62929;
32
33$loader-color: #272727; 31$loader-color: #272727;
32$link: $panel-top-txtcolor;
33$link-hover: lightblue;
34$disabled-color: rgba($link, 0.3);
diff --git a/viewer/src/components/LdProposition.vue b/viewer/src/components/LdProposition.vue
index 9a32e0a..f653e4d 100644
--- a/viewer/src/components/LdProposition.vue
+++ b/viewer/src/components/LdProposition.vue
@@ -19,7 +19,7 @@
19 19
20<template> 20<template>
21 <div> 21 <div>
22 <div v-for="proposed in proposedTags" :key="proposed.rawTag" class="proposition"> 22 <div v-for="proposed in proposedTags" :key="proposed.rawTag" class="proposition link">
23 <fa-icon icon="minus" @click="add(Operation.SUBSTRACTION, proposed.rawTag)" /> 23 <fa-icon icon="minus" @click="add(Operation.SUBSTRACTION, proposed.rawTag)" />
24 <span 24 <span
25 @click="add(Operation.INTERSECTION, proposed.rawTag)" 25 @click="add(Operation.INTERSECTION, proposed.rawTag)"
@@ -51,13 +51,12 @@ export default class LdTagInput extends Vue {
51 .forEach(rawTag => (propositions[rawTag] = (propositions[rawTag] ?? 0) + 1)); 51 .forEach(rawTag => (propositions[rawTag] = (propositions[rawTag] ?? 0) + 1));
52 } else { 52 } else {
53 // Tags count from the whole gallery 53 // Tags count from the whole gallery
54 Object.entries(this.$galleryStore.tags) 54 Object.entries(this.$galleryStore.tags).forEach(entry => (propositions[entry[0]] = entry[1].items.length));
55 .forEach(entry => (propositions[entry[0]] = entry[1].items.length));
56 } 55 }
57 56
58 return Object.entries(propositions) 57 return Object.entries(propositions)
59 .sort((a,b) => b[1] - a[1]) 58 .sort((a, b) => b[1] - a[1])
60 .map(entry => ({rawTag: entry[0], count: entry[1]})); 59 .map(entry => ({ rawTag: entry[0], count: entry[1] }));
61 } 60 }
62 61
63 extractDistinctItems(currentTags: Tag.Search[]): Gallery.Item[] { 62 extractDistinctItems(currentTags: Tag.Search[]): Gallery.Item[] {
@@ -79,12 +78,13 @@ export default class LdTagInput extends Vue {
79</script> 78</script>
80 79
81<style lang="scss"> 80<style lang="scss">
81@import "@/assets/scss/theme.scss";
82
82.proposition { 83.proposition {
83 display: flex; 84 display: flex;
84 justify-content: space-between; 85 justify-content: space-between;
85 align-items: center; 86 align-items: center;
86 margin: 10px; 87 margin: 10px;
87 color: lightcyan;
88 cursor: pointer; 88 cursor: pointer;
89} 89}
90.proposition span { 90.proposition span {
diff --git a/viewer/src/plugins/fontawesome.ts b/viewer/src/plugins/fontawesome.ts
index bb77c01..c17d4a1 100644
--- a/viewer/src/plugins/fontawesome.ts
+++ b/viewer/src/plugins/fontawesome.ts
@@ -28,6 +28,10 @@ import {
28 faPlus, 28 faPlus,
29 faMinus, 29 faMinus,
30 faImage, 30 faImage,
31 faHome,
32 faArrowLeft,
33 faFilter,
34 faAngleRight,
31} from "@fortawesome/free-solid-svg-icons"; 35} from "@fortawesome/free-solid-svg-icons";
32 36
33library.add( 37library.add(
@@ -37,6 +41,10 @@ library.add(
37 faPlus, 41 faPlus,
38 faMinus, 42 faMinus,
39 faImage, 43 faImage,
44 faHome,
45 faArrowLeft,
46 faFilter,
47 faAngleRight,
40); 48);
41 49
42Vue.component("fa-icon", FontAwesomeIcon); 50Vue.component("fa-icon", FontAwesomeIcon);
diff --git a/viewer/src/views/GalleryThumbnail.vue b/viewer/src/views/GalleryThumbnail.vue
index 433a673..66e46d6 100644
--- a/viewer/src/views/GalleryThumbnail.vue
+++ b/viewer/src/views/GalleryThumbnail.vue
@@ -28,7 +28,7 @@
28 @load="loading=false" 28 @load="loading=false"
29 /> 29 />
30 <div v-else class="flex-column flex-center"> 30 <div v-else class="flex-column flex-center">
31 <fa-icon icon="folder" class="fa-4x" /> 31 <fa-icon icon="folder" size="4x" />
32 {{item.path}} 32 {{item.path}}
33 </div> 33 </div>
34 </div> 34 </div>
diff --git a/viewer/src/views/PanelLeft.vue b/viewer/src/views/PanelLeft.vue
index 16be249..35c092a 100644
--- a/viewer/src/views/PanelLeft.vue
+++ b/viewer/src/views/PanelLeft.vue
@@ -24,7 +24,7 @@
24 <h1>{{$t('panelLeft.filters')}}</h1> 24 <h1>{{$t('panelLeft.filters')}}</h1>
25 <ld-tag-input /> 25 <ld-tag-input />
26 <h1>{{$t('panelLeft.propositions')}}</h1> 26 <h1>{{$t('panelLeft.propositions')}}</h1>
27 <ld-proposition /> 27 <ld-proposition class="scrollbar" />
28 </div> 28 </div>
29</template> 29</template>
30 30
@@ -36,7 +36,4 @@ export default class PanelLeft extends Vue {}
36</script> 36</script>
37 37
38<style lang="scss"> 38<style lang="scss">
39.label {
40 color: white;
41}
42</style> 39</style>
diff --git a/viewer/src/views/PanelTop.vue b/viewer/src/views/PanelTop.vue
index 0efc9b6..7e24699 100644
--- a/viewer/src/views/PanelTop.vue
+++ b/viewer/src/views/PanelTop.vue
@@ -18,23 +18,25 @@
18--> 18-->
19 19
20<template> 20<template>
21 <div v-if="isReady"> 21 <div class="flex">
22 <b-steps 22 <div class="command-btns">
23 v-model="activeStep" 23 <fa-icon icon="filter" size="lg" class="disabled" />
24 class="pathBreadcrumb" 24 <router-link to="/" :class="{disabled: $galleryStore.currentItemPath.length <= 1}">
25 type="is-info" 25 <fa-icon icon="home" size="lg" />
26 :has-navigation="false" 26 </router-link>
27 :animated="false" 27 <div class="link" @click="$router.go(-1)">
28 @input="onStepClick" 28 <fa-icon icon="arrow-left" size="lg" />
29 > 29 </div>
30 <b-step-item 30 </div>
31 v-for="item in $galleryStore.currentItemPath" 31 <ul class="pathBreadcrumb">
32 :key="item.path" 32 <li v-for="(item,idx) in $galleryStore.currentItemPath" :key="item.path">
33 :label="item.title" 33 <router-link :to="item.path">
34 :icon="getIcon(item)" 34 <fa-icon :icon="getIcon(item)" size="lg" />
35 :to="item.path" 35 {{item.title}}
36 /> 36 </router-link>
37 </b-steps> 37 <fa-icon v-if="(idx+1) < $galleryStore.currentItemPath.length" icon="angle-right" />
38 </li>
39 </ul>
38 </div> 40 </div>
39</template> 41</template>
40 42