diff options
author | OzoneGrif | 2020-01-31 02:26:12 +0100 |
---|---|---|
committer | GitHub | 2020-01-31 02:26:12 +0100 |
commit | d94b987463169b254ab69a79ddb58e5beccb0941 (patch) | |
tree | 51f66cdada6a8e920ba80a3aae76393e0127d825 /viewer/src | |
parent | 15c806adec22239096a910b92b49fcfb964815bd (diff) | |
parent | 2157b66f3ea43137391939992cac4dc901a4ac4e (diff) | |
download | ldgallery-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.ts | 9 | ||||
-rw-r--r-- | viewer/src/assets/scss/buefy.scss | 3 | ||||
-rw-r--r-- | viewer/src/assets/scss/global.scss | 26 | ||||
-rw-r--r-- | viewer/src/assets/scss/theme.scss | 11 | ||||
-rw-r--r-- | viewer/src/components/LdKeyPress.vue | 49 | ||||
-rw-r--r-- | viewer/src/components/LdProposition.vue | 46 | ||||
-rw-r--r-- | viewer/src/components/LdTagInput.vue | 1 | ||||
-rw-r--r-- | viewer/src/main.ts | 2 | ||||
-rw-r--r-- | viewer/src/plugins/fontawesome.ts | 8 | ||||
-rw-r--r-- | viewer/src/plugins/router.ts (renamed from viewer/src/router/index.ts) | 2 | ||||
-rw-r--r-- | viewer/src/store/galleryStore.ts | 2 | ||||
-rw-r--r-- | viewer/src/tools.ts | 17 | ||||
-rw-r--r-- | viewer/src/views/GalleryDirectory.vue | 8 | ||||
-rw-r--r-- | viewer/src/views/GalleryPicture.vue | 4 | ||||
-rw-r--r-- | viewer/src/views/GalleryThumbnail.vue | 12 | ||||
-rw-r--r-- | viewer/src/views/MainGallery.vue (renamed from viewer/src/views/Gallery.vue) | 28 | ||||
-rw-r--r-- | viewer/src/views/MainLayout.vue | 11 | ||||
-rw-r--r-- | viewer/src/views/PanelLeft.vue | 5 | ||||
-rw-r--r-- | viewer/src/views/PanelTop.vue | 78 |
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 | ||
20 | declare namespace Gallery { | 20 | declare 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 | } |
93 | img { | ||
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"> | ||
21 | import { Component, Vue, Prop, Emit } from "vue-property-decorator"; | ||
22 | |||
23 | @Component | ||
24 | export 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 |