aboutsummaryrefslogtreecommitdiff
path: root/viewer/src
diff options
context:
space:
mode:
authorZero~Informatique2020-02-14 09:19:53 +0100
committerZero~Informatique2020-02-24 00:04:39 +0100
commit370e3db3455f548699ff5e046e0f8dcc304991ac (patch)
treee29fe9e2afb940eea74c8ed510c46a1eb0fa4d84 /viewer/src
parente42f4e864bac21ed3b19d1869df2cdd4f8c3433c (diff)
downloadldgallery-370e3db3455f548699ff5e046e0f8dcc304991ac.tar.gz
viewer: major code and search mode overhaul
Updated libraries to the lastest version SCSS Formatter as suggested VSC extensions Renamed toolbar-color by scrollbar-color LD components use Props in favor of touching the stores directly (when possible) Moved most common algorithms to a "services" folder Complete search overhaul (lots of code change)
Diffstat (limited to 'viewer/src')
-rw-r--r--viewer/src/assets/scss/global.scss9
-rw-r--r--viewer/src/assets/scss/theme.scss15
-rw-r--r--viewer/src/components/LdBreadcrumb.vue17
-rw-r--r--viewer/src/components/LdCommand.vue16
-rw-r--r--viewer/src/components/LdCommandSearch.vue (renamed from viewer/src/components/LdModeRadio.vue)32
-rw-r--r--viewer/src/components/LdGallery.vue47
-rw-r--r--viewer/src/components/LdPicture.vue2
-rw-r--r--viewer/src/components/LdProposition.vue35
-rw-r--r--viewer/src/components/LdTagInput.vue75
-rw-r--r--viewer/src/components/LdThumbnail.vue4
-rw-r--r--viewer/src/locales/en.json10
-rw-r--r--viewer/src/plugins/buefy.ts4
-rw-r--r--viewer/src/plugins/fontawesome.ts2
-rw-r--r--viewer/src/plugins/router.ts17
-rw-r--r--viewer/src/services/dragscrollclickfix.ts (renamed from viewer/src/dragscrollclickfix.ts)0
-rw-r--r--viewer/src/services/indexfactory.ts101
-rw-r--r--viewer/src/services/indexsearch.ts (renamed from viewer/src/views/MainGallery.vue)66
-rw-r--r--viewer/src/services/navigation.ts (renamed from viewer/src/tools.ts)20
-rw-r--r--viewer/src/store/galleryStore.ts51
-rw-r--r--viewer/src/store/uiStore.ts22
-rw-r--r--viewer/src/views/GalleryDirectory.vue14
-rw-r--r--viewer/src/views/GalleryNavigation.vue63
-rw-r--r--viewer/src/views/GallerySearch.vue36
-rw-r--r--viewer/src/views/MainLayout.vue4
-rw-r--r--viewer/src/views/PanelLeft.vue34
-rw-r--r--viewer/src/views/PanelTop.vue7
26 files changed, 419 insertions, 284 deletions
diff --git a/viewer/src/assets/scss/global.scss b/viewer/src/assets/scss/global.scss
index ed69841..ea25513 100644
--- a/viewer/src/assets/scss/global.scss
+++ b/viewer/src/assets/scss/global.scss
@@ -27,6 +27,10 @@
27 color: red; 27 color: red;
28} 28}
29 29
30button svg + span {
31 margin-left: 7px;
32}
33
30// === Tools 34// === Tools
31 35
32.nowrap { 36.nowrap {
@@ -66,11 +70,10 @@
66// Disable sticky hover styling on touch devices, 70// Disable sticky hover styling on touch devices,
67// on which the virtual cursor doesn't leave the element after being tapped. 71// on which the virtual cursor doesn't leave the element after being tapped.
68// The fix can be applied to `a` elements by using the .link class. 72// The fix can be applied to `a` elements by using the .link class.
69@media (hover:none), (hover:on-demand) { 73@media (hover: none), (hover: on-demand) {
70 .link:hover { 74 .link:hover {
71 color: $link !important; 75 color: $link !important;
72 } 76 }
73
74 .disabled:hover { 77 .disabled:hover {
75 color: $disabled-color !important; 78 color: $disabled-color !important;
76 } 79 }
@@ -90,7 +93,7 @@
90} 93}
91.scrollbar::-webkit-scrollbar-thumb { 94.scrollbar::-webkit-scrollbar-thumb {
92 box-shadow: inset 0 0 1px black; 95 box-shadow: inset 0 0 1px black;
93 background-color: $toolbar-color; 96 background-color: $scrollbar-color;
94} 97}
95 98
96// === Thumbnail tiles alignment 99// === Thumbnail tiles alignment
diff --git a/viewer/src/assets/scss/theme.scss b/viewer/src/assets/scss/theme.scss
index 0a921a9..60504e3 100644
--- a/viewer/src/assets/scss/theme.scss
+++ b/viewer/src/assets/scss/theme.scss
@@ -18,9 +18,8 @@
18-- along with this program. If not, see <https://www.gnu.org/licenses/>. 18-- along with this program. If not, see <https://www.gnu.org/licenses/>.
19*/ 19*/
20 20
21@import '_buefy_variables.scss'; 21@import "_buefy_variables.scss";
22@import 'palette.scss'; 22@import "palette.scss";
23
24 23
25// Buefy components 24// Buefy components
26 25
@@ -44,7 +43,12 @@ $loading-background: $palette-800;
44$title-color: $palette-200; 43$title-color: $palette-200;
45$title-size: $size-5; 44$title-size: $size-5;
46$tag-background-color: $palette-800; 45$tag-background-color: $palette-800;
47 46$button-color: $palette-100;
47$button-background-color: $palette-700;
48$button-border-color: $palette-500;
49$button-focus-color: $button-color;
50$button-focus-border-color: $link;
51$button-focus-box-shadow-size: 0;
48 52
49// Custom components 53// Custom components
50 54
@@ -54,14 +58,13 @@ $panel-left-bgcolor: $palette-800;
54$panel-left-txtcolor: $primary; 58$panel-left-txtcolor: $primary;
55$command-buttons-bgcolor: $palette-700; 59$command-buttons-bgcolor: $palette-700;
56$content-bgcolor: $palette-900; 60$content-bgcolor: $palette-900;
57$toolbar-color: $palette-300; // FIXME: should be named "scrollbar" 61$scrollbar-color: $palette-300;
58$loader-color: $palette-800; 62$loader-color: $palette-800;
59$input-tag-delete-background-color: $palette-700; 63$input-tag-delete-background-color: $palette-700;
60$breadcrumb-margins: 12px; 64$breadcrumb-margins: 12px;
61$breadcrumb-overflow-mask-size: $breadcrumb-margins + 60px; 65$breadcrumb-overflow-mask-size: $breadcrumb-margins + 60px;
62$thumbnail-other-size: 120px; 66$thumbnail-other-size: 120px;
63 67
64
65// Layout 68// Layout
66 69
67$layout-top: 45px; 70$layout-top: 45px;
diff --git a/viewer/src/components/LdBreadcrumb.vue b/viewer/src/components/LdBreadcrumb.vue
index 7f7ef7d..643bfb6 100644
--- a/viewer/src/components/LdBreadcrumb.vue
+++ b/viewer/src/components/LdBreadcrumb.vue
@@ -29,24 +29,29 @@
29 > 29 >
30 <div v-show="overflowMask" class="ld-breadcrumb-overflow-mask"></div> 30 <div v-show="overflowMask" class="ld-breadcrumb-overflow-mask"></div>
31 <ul class="ld-breadcrumb"> 31 <ul class="ld-breadcrumb">
32 <li v-for="(item,idx) in $galleryStore.currentItemPath" :key="item.path"> 32 <li v-for="(item,idx) in currentItemPath" :key="item.path">
33 <fa-icon v-if="idx > 0" icon="angle-right" class="disabled" /> 33 <fa-icon v-if="idx > 0" icon="angle-right" class="disabled" />
34 <router-link :to="item.path" class="link"> 34 <router-link :to="item.path" class="link">
35 <fa-icon :icon="getIcon(item)" size="lg" /> 35 <fa-icon :icon="getIcon(item)" size="lg" />
36 {{item.title}} 36 {{item.title}}
37 </router-link> 37 </router-link>
38 </li> 38 </li>
39 <li v-if="searchMode">
40 <fa-icon icon="search" size="lg" class="disabled" />
41 </li>
39 </ul> 42 </ul>
40 </div> 43 </div>
41</template> 44</template>
42 45
43<script lang="ts"> 46<script lang="ts">
44import { Component, Vue, Ref, Watch } from "vue-property-decorator"; 47import { Component, Vue, Ref, Watch, Prop } from "vue-property-decorator";
45import DragScrollClickFix from "@/dragscrollclickfix"; 48import DragScrollClickFix from "@/services/dragscrollclickfix";
46import Tools from "@/tools"; 49import Navigation from "@/services/navigation";
47 50
48@Component 51@Component
49export default class LdBreadcrumb extends Vue { 52export default class LdBreadcrumb extends Vue {
53 @Prop({ required: true }) readonly currentItemPath!: Gallery.Item[];
54 @Prop(Boolean) readonly searchMode!: boolean;
50 @Ref() readonly breadcrumb!: HTMLUListElement; 55 @Ref() readonly breadcrumb!: HTMLUListElement;
51 56
52 readonly dragScrollClickFix = new DragScrollClickFix(); 57 readonly dragScrollClickFix = new DragScrollClickFix();
@@ -66,7 +71,7 @@ export default class LdBreadcrumb extends Vue {
66 this.overflowMask = this.breadcrumb.scrollLeft > 1; 71 this.overflowMask = this.breadcrumb.scrollLeft > 1;
67 } 72 }
68 73
69 @Watch("$galleryStore.currentItemPath") 74 @Watch("currentItemPath")
70 changedCurrentItemPath() { 75 changedCurrentItemPath() {
71 this.$nextTick(() => { 76 this.$nextTick(() => {
72 this.breadcrumb.scrollLeft = this.breadcrumb.scrollWidth; 77 this.breadcrumb.scrollLeft = this.breadcrumb.scrollWidth;
@@ -75,7 +80,7 @@ export default class LdBreadcrumb extends Vue {
75 } 80 }
76 81
77 getIcon(item: Gallery.Item) { 82 getIcon(item: Gallery.Item) {
78 return Tools.getIcon(item); 83 return Navigation.getIcon(item);
79 } 84 }
80} 85}
81</script> 86</script>
diff --git a/viewer/src/components/LdCommand.vue b/viewer/src/components/LdCommand.vue
index 7590ea7..468c241 100644
--- a/viewer/src/components/LdCommand.vue
+++ b/viewer/src/components/LdCommand.vue
@@ -23,14 +23,6 @@
23 <a class="link" :title="$t('command.search')" @click="$uiStore.toggleFullWidth()"> 23 <a class="link" :title="$t('command.search')" @click="$uiStore.toggleFullWidth()">
24 <fa-icon :icon="commandToggleSearchPanelIcon()" size="lg" /> 24 <fa-icon :icon="commandToggleSearchPanelIcon()" size="lg" />
25 </a> 25 </a>
26 <router-link
27 to="/"
28 class="command-secondary"
29 :class="{'disabled': isRoot()}"
30 :title="$t('command.home')"
31 >
32 <fa-icon icon="home" size="lg" />
33 </router-link>
34 <a class="link command-secondary" :title="$t('command.back')" @click="$router.go(-1)"> 26 <a class="link command-secondary" :title="$t('command.back')" @click="$router.go(-1)">
35 <fa-icon icon="arrow-left" size="lg" /> 27 <fa-icon icon="arrow-left" size="lg" />
36 </a> 28 </a>
@@ -42,21 +34,23 @@
42</template>