aboutsummaryrefslogtreecommitdiff
path: root/viewer/src
diff options
context:
space:
mode:
authorOzoneGrif2020-01-31 02:26:12 +0100
committerGitHub2020-01-31 02:26:12 +0100
commitd94b987463169b254ab69a79ddb58e5beccb0941 (patch)
tree51f66cdada6a8e920ba80a3aae76393e0127d825 /viewer/src
parent15c806adec22239096a910b92b49fcfb964815bd (diff)
parent2157b66f3ea43137391939992cac4dc901a4ac4e (diff)
downloadldgallery-d94b987463169b254ab69a79ddb58e5beccb0941.tar.gz
Merge pull request #65 from pacien/oz-viewer
viewer improvements
Diffstat (limited to 'viewer/src')
-rw-r--r--viewer/src/@types/gallery/index.d.ts9
-rw-r--r--viewer/src/assets/scss/buefy.scss3
-rw-r--r--viewer/src/assets/scss/global.scss26
-rw-r--r--viewer/src/assets/scss/theme.scss11
-rw-r--r--viewer/src/components/LdKeyPress.vue49
-rw-r--r--viewer/src/components/LdProposition.vue46
-rw-r--r--viewer/src/components/LdTagInput.vue1
-rw-r--r--viewer/src/main.ts2
-rw-r--r--viewer/src/plugins/fontawesome.ts8
-rw-r--r--viewer/src/plugins/router.ts (renamed from viewer/src/router/index.ts)2
-rw-r--r--viewer/src/store/galleryStore.ts2
-rw-r--r--viewer/src/tools.ts17
-rw-r--r--viewer/src/views/GalleryDirectory.vue8
-rw-r--r--viewer/src/views/GalleryPicture.vue4
-rw-r--r--viewer/src/views/GalleryThumbnail.vue12
-rw-r--r--viewer/src/views/MainGallery.vue (renamed from viewer/src/views/Gallery.vue)28
-rw-r--r--viewer/src/views/MainLayout.vue11
-rw-r--r--viewer/src/views/PanelLeft.vue5
-rw-r--r--viewer/src/views/PanelTop.vue78
19 files changed, 221 insertions, 101 deletions
diff --git a/viewer/src/@types/gallery/index.d.ts b/viewer/src/@types/gallery/index.d.ts
index 25407e8..b112b6d 100644
--- a/viewer/src/@types/gallery/index.d.ts
+++ b/viewer/src/@types/gallery/index.d.ts
@@ -18,6 +18,9 @@
18*/ 18*/
19 19
20declare namespace Gallery { 20declare namespace Gallery {
21 interface Other extends Item {
22 properties: OtherProperties,
23 }
21 interface Picture extends Item { 24 interface Picture extends Item {
22 properties: PictureProperties, 25 properties: PictureProperties,
23 } 26 }
@@ -31,7 +34,10 @@ declare namespace Gallery {
31 tags: RawTag[], 34 tags: RawTag[],
32 path: string, 35 path: string,
33 thumbnail?: string, 36 thumbnail?: string,
34 properties: PictureProperties | DirectoryProperties, 37 properties: OtherProperties | PictureProperties | DirectoryProperties,
38 }
39 interface OtherProperties {
40 type: "other",
35 } 41 }
36 interface PictureProperties { 42 interface PictureProperties {
37 type: "picture", 43 type: "picture",
@@ -42,4 +48,5 @@ declare namespace Gallery {
42 items: Item[] 48 items: Item[]
43 } 49 }
44 type RawTag = string; 50 type RawTag = string;
51 type ItemType = "other" | "picture" | "directory";
45} \ No newline at end of file 52} \ No newline at end of file
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 1903c9e..b418911 100644
--- a/viewer/src/assets/scss/global.scss
+++ b/viewer/src/assets/scss/global.scss
@@ -32,6 +32,9 @@
32.nowrap { 32.nowrap {
33 white-space: nowrap; 33 white-space: nowrap;
34} 34}
35.no-scroll-x {
36 overflow-x: hidden;
37}
35 38
36.flex { 39.flex {
37 display: flex; 40 display: flex;
@@ -44,19 +47,35 @@
44 align-items: center; 47 align-items: center;
45} 48}
46 49
50// === Links
51
52.link {
53 color: $link;
54 cursor: pointer;
55 text-decoration: none;
56 &:hover {
57 color: $link-hover;
58 }
59}
60
61.disabled {
62 color: $disabled-color !important;
63}
64
47// === Scrollbar styling 65// === Scrollbar styling
48 66
49.scrollbar { 67.scrollbar {
50 overflow: auto; 68 overflow: auto;
51} 69}
52.scrollbar::-webkit-scrollbar { 70.scrollbar::-webkit-scrollbar {
53 width: 12px; 71 width: 10px;
72 height: 10px;
54} 73}
55.scrollbar::-webkit-scrollbar-corner { 74.scrollbar::-webkit-scrollbar-corner {
56 background-color: transparent; 75 background-color: transparent;
57} 76}
58.scrollbar::-webkit-scrollbar-thumb { 77.scrollbar::-webkit-scrollbar-thumb {
59 box-shadow: inset 0 0 6px black; 78 box-shadow: inset 0 0 1px black;
60 background-color: $toolbar-color; 79 background-color: $toolbar-color;
61} 80}
62 81
@@ -71,6 +90,9 @@
71 margin: 1px; 90 margin: 1px;
72 } 91 }
73} 92}
93img {
94 image-orientation: from-image;
95}
74 96
75// === Effect to apply on lazy-image loading 97// === Effect to apply on lazy-image loading
76 98
diff --git a/viewer/src/assets/scss/theme.scss b/viewer/src/assets/scss/theme.scss
index efd5d79..d3aac99 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,10 @@ $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 31$loader-color: #272727;
33$loader-color: #119; 32$link: $panel-top-txtcolor;
33$link-hover: lightblue;
34$disabled-color: rgba($link, 0.3);
35$control-radius: 0;
36$input-radius: 0;
diff --git a/viewer/src/components/LdKeyPress.vue b/viewer/src/components/LdKeyPress.vue
new file mode 100644
index 0000000..8276607
--- /dev/null
+++ b/viewer/src/components/LdKeyPress.vue
@@ -0,0 +1,49 @@
1<!-- ldgallery - A static generator which turns a collection of tagged
2-- pictures into a searchable web gallery.
3--
4-- Copyright (C) 2019-2020 Guillaume FOUET
5--
6-- This program is free software: you can redistribute it and/or modify
7-- it under the terms of the GNU Affero General Public License as
8-- published by the Free Software Foundation, either version 3 of the
9-- License, or (at your option) any later version.
10--
11-- This program is distributed in the hope that it will be useful,
12-- but WITHOUT ANY WARRANTY; without even the implied warranty of
13-- MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
14-- GNU Affero General Public License for more details.
15--
16-- You should have received a copy of the GNU Affero General Public License
17-- along with this program. If not, see <https://www.gnu.org/licenses/>.
18-->
19
20<script lang="ts">
21import { Component, Vue, Prop, Emit } from "vue-property-decorator";
22
23@Component
24export default class LdKeyPress extends Vue {
25 @Prop({ type: Number, required: true }) readonly keycode!: number;
26 @Prop({ type: String, default: "keyup" }) readonly event!: "keyup" | "keydown" | "keypress";
27
28 mounted() {
29 window.addEventListener(this.event, this.onEvent);
30 }
31
32 destroyed() {
33 window.removeEventListener(this.event, this.onEvent);
34 }
35
36 render() {
37 return null;
38 }
39
40 private onEvent(e: KeyboardEvent) {
41 if (e.keyCode === this.keycode) this.action(e);
42 }
43
44 @Emit()
45 private action(e: KeyboardEvent) {
46 return e;
47 }
48}
49</script> \ No newline at end of file
diff --git a/viewer/src/components/LdProposition.vue b/viewer/src/components/LdProposition.vue
index 9a32e0a..02f7fe4 100644
--- a/viewer/src/components/LdProposition.vue
+++ b/viewer/src/components/LdProposition.vue
@@ -20,11 +20,17 @@
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">