aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
authorZero~Informatique2020-09-10 18:44:05 +0200
committerG.Fouet2020-09-11 21:53:18 +0200
commit6737bfd38a0568d61c691a507303a65550ae23fc (patch)
treed9e44d09c458a97fd2f5699b54374e9725e41301
parent4c839e0f30fad9e5df29f1f0682380581c582713 (diff)
downloadldgallery-6737bfd38a0568d61c691a507303a65550ae23fc.tar.gz
viewer: information panel scrollbar and collapse with animation
github: resolves #78
-rw-r--r--viewer/src/assets/scss/theme.scss4
-rw-r--r--viewer/src/assets/scss/transition.scss13
-rw-r--r--viewer/src/main.ts1
-rw-r--r--viewer/src/plugins/buefy.ts3
-rw-r--r--viewer/src/views/MainLayout.vue2
-rw-r--r--viewer/src/views/PanelLeft.vue26
6 files changed, 34 insertions, 15 deletions
diff --git a/viewer/src/assets/scss/theme.scss b/viewer/src/assets/scss/theme.scss
index 0c351e5..c59eba9 100644
--- a/viewer/src/assets/scss/theme.scss
+++ b/viewer/src/assets/scss/theme.scss
@@ -76,3 +76,7 @@ $proposed-category-bgcolor: $palette-700;
76 76
77$layout-top: 45px; 77$layout-top: 45px;
78$layout-left: 250px; 78$layout-left: 250px;
79
80// Transitions
81
82$transition-flex-expand: 0.1s;
diff --git a/viewer/src/assets/scss/transition.scss b/viewer/src/assets/scss/transition.scss
new file mode 100644
index 0000000..160f625
--- /dev/null
+++ b/viewer/src/assets/scss/transition.scss
@@ -0,0 +1,13 @@
1@import "~@/assets/scss/theme.scss";
2
3// === Transitions for Vue
4
5.flex-expand-enter-active, .flex-expand-leave-active {
6 transition: max-height $transition-flex-expand linear;
7}
8.flex-expand-enter, .flex-expand-leave-to {
9 max-height: 0%;
10}
11.flex-expand-enter-to, .flex-expand-leave {
12 max-height: 100%;
13}
diff --git a/viewer/src/main.ts b/viewer/src/main.ts
index 1c48c55..4d07835 100644
--- a/viewer/src/main.ts
+++ b/viewer/src/main.ts
@@ -20,6 +20,7 @@
20import Vue from "vue"; 20import Vue from "vue";
21import "@/assets/scss/global.scss"; 21import "@/assets/scss/global.scss";
22import "@/assets/scss/scrollbar.scss"; 22import "@/assets/scss/scrollbar.scss";
23import "@/assets/scss/transition.scss";
23import store from "@/store"; 24import store from "@/store";
24import i18n from "@/plugins/i18n"; 25import i18n from "@/plugins/i18n";
25import router from "@/plugins/router"; 26import router from "@/plugins/router";
diff --git a/viewer/src/plugins/buefy.ts b/viewer/src/plugins/buefy.ts
index 6cca8e7..7a71019 100644
--- a/viewer/src/plugins/buefy.ts
+++ b/viewer/src/plugins/buefy.ts
@@ -28,8 +28,6 @@ import Button from "buefy/src/components/button";
28// @ts-ignore 28// @ts-ignore
29import SnackBar from "buefy/src/components/snackbar"; 29import SnackBar from "buefy/src/components/snackbar";
30// @ts-ignore 30// @ts-ignore
31import Collapse from "buefy/src/components/collapse";
32// @ts-ignore
33import Tag from "buefy/src/components/tag"; 31import Tag from "buefy/src/components/tag";
34 32
35import "@/assets/scss/buefy.scss"; 33import "@/assets/scss/buefy.scss";
@@ -38,7 +36,6 @@ Vue.use(Taginput);
38Vue.use(Loading); 36Vue.use(Loading);
39Vue.use(Button); 37Vue.use(Button);
40Vue.use(SnackBar); 38Vue.use(SnackBar);
41Vue.use(Collapse);
42Vue.use(Tag); 39Vue.use(Tag);
43 40
44declare module "vue/types/vue" { 41declare module "vue/types/vue" {
diff --git a/viewer/src/views/MainLayout.vue b/viewer/src/views/MainLayout.vue
index 2dd7a57..80778f6 100644
--- a/viewer/src/views/MainLayout.vue
+++ b/viewer/src/views/MainLayout.vue
@@ -106,7 +106,7 @@ html {
106} 106}
107.layout { 107.layout {
108 position: fixed; 108 position: fixed;
109 transition: all 0.1s linear; 109 transition: all $transition-flex-expand linear;
110 top: 0; 110 top: 0;
111 bottom: 0; 111 bottom: 0;
112 left: 0; 112 left: 0;
diff --git a/viewer/src/views/PanelLeft.vue b/viewer/src/views/PanelLeft.vue
index f8d6faf..12c95d1 100644
--- a/viewer/src/views/PanelLeft.vue
+++ b/viewer/src/views/PanelLeft.vue
@@ -18,7 +18,7 @@
18--> 18-->
19 19
20<template> 20<template>
21 <div class="flex-column sidebar"> 21 <div class="flex-column" :class="$style.sidebar">
22 <ld-tag-input 22 <ld-tag-input
23 :search-filters.sync="searchFilters" 23 :search-filters.sync="searchFilters"
24 :tags-index="$galleryStore.tagsIndex" 24 :tags-index="$galleryStore.tagsIndex"
@@ -26,7 +26,7 @@
26 /> 26 />
27 <ld-command-search @clear="clear" @search="search" /> 27 <ld-command-search @clear="clear" @search="search" />
28 <h1 class="title">{{ $t("panelLeft.propositions") }}</h1> 28 <h1 class="title">{{ $t("panelLeft.propositions") }}</h1>
29 <div class="scrollbar no-scroll-x flex-grow-1"> 29 <div class="scrollbar no-scroll-x flex-grow-1" :class="$style.flexShrink1000">
30 <ld-proposition 30 <ld-proposition
31 v-for="category in $galleryStore.tagsCategories" 31 v-for="category in $galleryStore.tagsCategories"
32 :key="category.tag" 32 :key="category.tag"
@@ -37,13 +37,13 @@
37 :current-tags="currentTags" 37 :current-tags="currentTags"
38 /> 38 />
39 </div> 39 </div>
40 <b-collapse animation="slide" :open.sync="infoOpen"> 40 <h1 class="flex title" @click="infoOpen = !infoOpen">
41 <h1 slot="trigger" class="flex title"> 41 {{ $t("panelLeft.information.title") }}
42 {{ $t("panelLeft.information.title") }} 42 <fa-icon :icon="infoOpen ? 'caret-down' : 'caret-up'" />
43 <fa-icon :icon="infoOpen ? 'caret-down' : 'caret-up'" /> 43 </h1>
44 </h1> 44 <transition name="flex-expand">
45 <ld-information :item="$galleryStore.currentItem" /> 45 <ld-information v-show="infoOpen" :item="$galleryStore.currentItem" class="scrollbar no-scroll-x" />
46 </b-collapse> 46 </transition>
47 </div> 47 </div>
48</template> 48</template>
49 49
@@ -92,11 +92,11 @@ export default class PanelLeft extends Vue {
92} 92}
93</script> 93</script>
94 94
95<style lang="scss"> 95<style lang="scss" module>
96@import "~@/assets/scss/theme.scss"; 96@import "~@/assets/scss/theme.scss";
97 97
98.sidebar { 98.sidebar {
99 .title { 99 :global(.title) {
100 background-color: $proposed-category-bgcolor; 100 background-color: $proposed-category-bgcolor;
101 padding: 0.2em 0.5em; 101 padding: 0.2em 0.5em;
102 margin: 0 0 1px 0; 102 margin: 0 0 1px 0;
@@ -109,4 +109,8 @@ export default class PanelLeft extends Vue {
109 } 109 }
110 } 110 }
111} 111}
112
113.flexShrink1000 {
114 flex-shrink: 1000;
115}
112</style> 116</style>