aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
-rw-r--r--viewer/package.json5
-rw-r--r--viewer/src/assets/scss/palette.scss31
-rw-r--r--viewer/src/assets/scss/theme.scss62
-rw-r--r--viewer/src/components/LdBreadcrumb.vue1
-rw-r--r--viewer/src/components/LdCommand.vue1
-rw-r--r--viewer/src/components/LdProposition.vue30
-rw-r--r--viewer/src/locales/en.json4
-rw-r--r--viewer/visualstudio.code-workspace1
8 files changed, 105 insertions, 30 deletions
diff --git a/viewer/package.json b/viewer/package.json
index 1521dc5..e1761c9 100644
--- a/viewer/package.json
+++ b/viewer/package.json
@@ -5,7 +5,8 @@
5 "scripts": { 5 "scripts": {
6 "serve": "vue-cli-service serve", 6 "serve": "vue-cli-service serve",
7 "build": "vue-cli-service build --modern", 7 "build": "vue-cli-service build --modern",
8 "lint": "vue-cli-service lint", 8 "lint": "vue-cli-service lint --no-fix",
9 "lint-autoformat": "vue-cli-service lint --fix",
9 "i18n:report": "vue-cli-service i18n:report --src './src/**/*.?(js|vue|ts)' --locales './src/locales/**/*.json'" 10 "i18n:report": "vue-cli-service i18n:report --src './src/**/*.?(js|vue|ts)' --locales './src/locales/**/*.json'"
10 }, 11 },
11 "dependencies": { 12 "dependencies": {
@@ -47,4 +48,4 @@
47 "vue-cli-plugin-i18n": "^0.6.1", 48 "vue-cli-plugin-i18n": "^0.6.1",
48 "vue-template-compiler": "^2.6.10" 49 "vue-template-compiler": "^2.6.10"
49 } 50 }
50} 51} \ No newline at end of file
diff --git a/viewer/src/assets/scss/palette.scss b/viewer/src/assets/scss/palette.scss
new file mode 100644
index 0000000..f7eab11
--- /dev/null
+++ b/viewer/src/assets/scss/palette.scss
@@ -0,0 +1,31 @@
1/* ldgallery - A static generator which turns a collection of tagged
2-- pictures into a searchable web gallery.
3--
4-- Copyright (C) 2020 Pacien TRAN-GIRARD
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// Material Design Blue Gray colour palette
21$palette-000: #FFFFFF;
22$palette-050: #ECEFF1;
23$palette-100: #CFD8DC;
24$palette-200: #B0BEC5;
25$palette-300: #90A4AE;
26$palette-400: #78909C;
27$palette-500: #607D8B;
28$palette-600: #546E7A;
29$palette-700: #455A64;
30$palette-800: #37474F;
31$palette-900: #263238;
diff --git a/viewer/src/assets/scss/theme.scss b/viewer/src/assets/scss/theme.scss
index f46b9f5..7972d48 100644
--- a/viewer/src/assets/scss/theme.scss
+++ b/viewer/src/assets/scss/theme.scss
@@ -2,6 +2,7 @@
2-- pictures into a searchable web gallery. 2-- pictures into a searchable web gallery.
3-- 3--
4-- Copyright (C) 2019-2020 Guillaume FOUET 4-- Copyright (C) 2019-2020 Guillaume FOUET
5-- 2020 Pacien TRAN-GIRARD
5-- 6--
6-- This program is free software: you can redistribute it and/or modify 7-- 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-- it under the terms of the GNU Affero General Public License as
@@ -17,23 +18,48 @@
17-- 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/>.
18*/ 19*/
19 20
20// === Theme 21@import '_buefy_variables.scss';
22@import 'palette.scss';
21 23
22$layout-top: 35px;
23$layout-left: 250px;
24 24
25$panel-top-bgcolor: #225; 25// Buefy components
26$panel-top-txtcolor: white; 26
27$panel-left-bgcolor: $panel-top-bgcolor; 27$primary: $palette-000;
28$panel-left-txtcolor: $panel-top-txtcolor; 28$text: $primary;
29$content-bgcolor: #1e1e1e; 29$text-light: $palette-100;
30$toolbar-color: #d62929; 30$text-strong: $primary;
31$loader-color: #272727; 31$input-color: $text;
32 32$input-placeholder-color: $text-light;
33// Overrides - Buefy 33$input-shadow: none;
34$link: $panel-top-txtcolor; 34$input-border-color: transparent;
35$link-hover: lightblue; 35$input-background-color: $palette-500;
36$disabled-color: #656589; 36$input-focus-box-border-color: $palette-200;
37$control-radius: 0; 37$input-focus-box-shadow-color: transparent;
38$input-radius: 0; 38$link: $primary;
39$loading-background: $panel-top-bgcolor; 39$link-visited: $link;
40$link-hover: $palette-100;
41$disabled-color: $palette-400;
42$radius: 0;
43$loading-background: $palette-800;
44$title-color: $palette-200;
45$title-size: $size-5;
46$tag-background-color: $palette-800;
47
48
49// Custom components
50
51$panel-top-bgcolor: $palette-800;
52$panel-top-txtcolor: $primary;
53$panel-left-bgcolor: $palette-800;
54$panel-left-txtcolor: $primary;
55$command-buttons-bgcolor: $palette-700;
56$content-bgcolor: $palette-900;
57$toolbar-color: $palette-300; // FIXME: should be named "scrollbar"
58$loader-color: $palette-800;
59$input-tag-delete-background-color: $palette-700;
60
61
62// Layout
63
64$layout-top: 45px;
65$layout-left: 250px;
diff --git a/viewer/src/components/LdBreadcrumb.vue b/viewer/src/components/LdBreadcrumb.vue
index 171e96a..ebefc50 100644
--- a/viewer/src/components/LdBreadcrumb.vue
+++ b/viewer/src/components/LdBreadcrumb.vue
@@ -45,7 +45,6 @@ export default class LdBreadcrumb extends Vue {
45@import "@/assets/scss/theme.scss"; 45@import "@/assets/scss/theme.scss";
46 46
47.ld-breadcrumb { 47.ld-breadcrumb {
48 border-left: 1px solid $disabled-color;
49 padding-left: 15px; 48 padding-left: 15px;
50 display: flex; 49 display: flex;
51 list-style: none; 50 list-style: none;
diff --git a/viewer/src/components/LdCommand.vue b/viewer/src/components/LdCommand.vue
index 5b9bbff..7590ea7 100644
--- a/viewer/src/components/LdCommand.vue
+++ b/viewer/src/components/LdCommand.vue
@@ -67,6 +67,7 @@ export default class LdCommand extends Vue {
67@import "@/assets/scss/theme.scss"; 67@import "@/assets/scss/theme.scss";
68 68
69.command-btns { 69.command-btns {
70 background-color: $command-buttons-bgcolor;
70 justify-content: space-around; 71 justify-content: space-around;
71 vertical-align: middle; 72 vertical-align: middle;
72 align-items: center; 73 align-items: center;
diff --git a/viewer/src/components/LdProposition.vue b/viewer/src/components/LdProposition.vue
index 0a293a9..395611f 100644
--- a/viewer/src/components/LdProposition.vue
+++ b/viewer/src/components/LdProposition.vue
@@ -2,6 +2,7 @@
2-- pictures into a searchable web gallery. 2-- pictures into a searchable web gallery.
3-- 3--
4-- Copyright (C) 2019-2020 Guillaume FOUET 4-- Copyright (C) 2019-2020 Guillaume FOUET
5-- 2020 Pacien TRAN-GIRARD
5-- 6--
6-- This program is free software: you can redistribute it and/or modify 7-- 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-- it under the terms of the GNU Affero General Public License as
@@ -20,17 +21,28 @@
20<template> 21<template>
21 <div> 22 <div>
22 <div v-for="proposed in proposedTags" :key="proposed.rawTag" class="proposition"> 23 <div v-for="proposed in proposedTags" :key="proposed.rawTag" class="proposition">
23 <div class="operation-btns link" @click="add(Operation.SUBSTRACTION, proposed.rawTag)"> 24 <a
24 <fa-icon icon="minus" /> 25 class="operation-btns link"
25 </div> 26 :title="$t('tag-propositions.substraction')"
26 <div class="operation-btns link" @click="add(Operation.ADDITION, proposed.rawTag)"> 27 @click="add(Operation.SUBSTRACTION, proposed.rawTag)"
27 <fa-icon icon="plus" /> 28 ><fa-icon icon="minus" alt="[-]" /></a>
28 </div> 29
29 <div 30 <a
31 class="operation-btns link"
32 :title="$t('tag-propositions.addition')"
33 @click="add(Operation.ADDITION, proposed.rawTag)"
34 ><fa-icon icon="plus" alt="[+]" /></a>
35
36 <a
30 class="operation-tag link" 37 class="operation-tag link"
38 :title="$t('tag-propositions.intersection')"
31 @click="add(Operation.INTERSECTION, proposed.rawTag)" 39 @click="add(Operation.INTERSECTION, proposed.rawTag)"
32 >{{proposed.rawTag}}</div> 40 >{{proposed.rawTag}}</a>
33 <div class="disabled">x{{proposed.count}}</div> 41
42 <div
43 class="disabled"
44 :title="$t('tag-propositions.item-count')"
45 >{{proposed.count}}</div>
34 </div> 46 </div>
35 </div> 47 </div>
36</template> 48</template>
diff --git a/viewer/src/locales/en.json b/viewer/src/locales/en.json
index 966bc86..dcdf5c5 100644
--- a/viewer/src/locales/en.json
+++ b/viewer/src/locales/en.json
@@ -7,6 +7,10 @@
7 "mode.search": "Search", 7 "mode.search": "Search",
8 "search.no-results": "No results", 8 "search.no-results": "No results",
9 "panelLeft.propositions": "Proposed tags", 9 "panelLeft.propositions": "Proposed tags",
10 "tag-propositions.substraction": "Exclude items with this tag",
11 "tag-propositions.addition": "Include all items with this tag",
12 "tag-propositions.intersection": "Search for this tag",
13 "tag-propositions.item-count": "Item count",
10 "gallery.unknowntype": "Unknown item type", 14 "gallery.unknowntype": "Unknown item type",
11 "command.search": "Open search panel", 15 "command.search": "Open search panel",
12 "command.home": "Go to gallery home", 16 "command.home": "Go to gallery home",
diff --git a/viewer/visualstudio.code-workspace b/viewer/visualstudio.code-workspace
index f8d83c3..0ba3584 100644
--- a/viewer/visualstudio.code-workspace
+++ b/viewer/visualstudio.code-workspace
@@ -16,6 +16,7 @@
16} 16}
17// Recommended Visual Studio Code extensions: 17// Recommended Visual Studio Code extensions:
18// - Vetur 18// - Vetur