diff options
Diffstat (limited to 'viewer')
-rw-r--r-- | viewer/src/assets/scss/buefy.scss | 3 | ||||
-rw-r--r-- | viewer/src/assets/scss/global.scss | 15 | ||||
-rw-r--r-- | viewer/src/assets/scss/theme.scss | 7 | ||||
-rw-r--r-- | viewer/src/components/LdProposition.vue | 14 | ||||
-rw-r--r-- | viewer/src/plugins/fontawesome.ts | 8 | ||||
-rw-r--r-- | viewer/src/views/GalleryThumbnail.vue | 2 | ||||
-rw-r--r-- | viewer/src/views/PanelLeft.vue | 5 | ||||
-rw-r--r-- | viewer/src/views/PanelTop.vue | 78 |
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 | ||
33 | library.add( | 37 | library.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 | ||
42 | Vue.component("fa-icon", FontAwesomeIcon); | 50 | Vue.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 | ||
@@ -44,23 +46,8 @@ import Gallery from "./Gallery.vue"; | |||
44 | 46 | ||