6 files changed, 101 insertions, 28 deletions

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 @@
+/* ldgallery - A static generator which turns a collection of tagged
+--             pictures into a searchable web gallery.
+--
+-- Copyright (C) 2020       Pacien TRAN-GIRARD
+--
+-- This program is free software: you can redistribute it and/or modify
+-- it under the terms of the GNU Affero General Public License as
+-- published by the Free Software Foundation, either version 3 of the
+-- License, or (at your option) any later version.
+--
+-- This program is distributed in the hope that it will be useful,
+-- but WITHOUT ANY WARRANTY; without even the implied warranty of
+-- MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+-- GNU Affero General Public License for more details.
+--
+-- You should have received a copy of the GNU Affero General Public License
+-- along with this program.  If not, see <https://www.gnu.org/licenses/>.
+*/
+
+// Material Design Blue Gray colour palette
+$palette-000: #FFFFFF;
+$palette-050: #ECEFF1;
+$palette-100: #CFD8DC;
+$palette-200: #B0BEC5;
+$palette-300: #90A4AE;
+$palette-400: #78909C;
+$palette-500: #607D8B;
+$palette-600: #546E7A;
+$palette-700: #455A64;
+$palette-800: #37474F;
+$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 @@
 --             pictures into a searchable web gallery.
 --
 -- Copyright (C) 2019-2020  Guillaume FOUET
+--               2020       Pacien TRAN-GIRARD
 --
 -- This program is free software: you can redistribute it and/or modify
 -- it under the terms of the GNU Affero General Public License as
@@ -17,23 +18,48 @@
 -- along with this program.  If not, see <https://www.gnu.org/licenses/>.
 */
 
-// === Theme
+@import '_buefy_variables.scss';
+@import 'palette.scss';
 
-$layout-top: 35px;
-$layout-left: 250px;
 
-$panel-top-bgcolor: #225;
-$panel-top-txtcolor: white;
-$panel-left-bgcolor: $panel-top-bgcolor;
-$panel-left-txtcolor: $panel-top-txtcolor;
-$content-bgcolor: #1e1e1e;
-$toolbar-color: #d62929;
-$loader-color: #272727;
-
-// Overrides - Buefy
-$link: $panel-top-txtcolor;
-$link-hover: lightblue;
-$disabled-color: #656589;
-$control-radius: 0;
-$input-radius: 0;
-$loading-background: $panel-top-bgcolor;
+// Buefy components
+
+$primary: $palette-000;
+$text: $primary;
+$text-light: $palette-100;
+$text-strong: $primary;
+$input-color: $text;
+$input-placeholder-color: $text-light;
+$input-shadow: none;
+$input-border-color: transparent;
+$input-background-color: $palette-500;
+$input-focus-box-border-color: $palette-200;
+$input-focus-box-shadow-color: transparent;
+$link: $primary;
+$link-visited: $link;
+$link-hover: $palette-100;
+$disabled-color: $palette-400;
+$radius: 0;
+$loading-background: $palette-800;
+$title-color: $palette-200;
+$title-size: $size-5;
+$tag-background-color: $palette-800;
+
+
+// Custom components
+
+$panel-top-bgcolor: $palette-800;
+$panel-top-txtcolor: $primary;
+$panel-left-bgcolor: $palette-800;
+$panel-left-txtcolor: $primary;
+$command-buttons-bgcolor: $palette-700;
+$content-bgcolor: $palette-900;
+$toolbar-color: $palette-300;  // FIXME: should be named "scrollbar"
+$loader-color: $palette-800;
+$input-tag-delete-background-color: $palette-700;
+
+
+// Layout
+
+$layout-top: 45px;
+$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 {
 @import "@/assets/scss/theme.scss";
 
 .ld-breadcrumb {
-  border-left: 1px solid $disabled-color;
   padding-left: 15px;
   display: flex;
   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 {
 @import "@/assets/scss/theme.scss";
 
 .command-btns {
+  background-color: $command-buttons-bgcolor;
   justify-content: space-around;
   vertical-align: middle;
   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 @@
 --             pictures into a searchable web gallery.
 --
 -- Copyright (C) 2019-2020  Guillaume FOUET
+--               2020       Pacien TRAN-GIRARD
 --
 -- This program is free software: you can redistribute it and/or modify
 -- it under the terms of the GNU Affero General Public License as
@@ -20,17 +21,28 @@
 <template>
   <div>
     <div v-for="proposed in proposedTags" :key="proposed.rawTag" class="proposition">
-      <div class="operation-btns link" @click="add(Operation.SUBSTRACTION, proposed.rawTag)">
-        <fa-icon icon="minus" />
-      </div>
-      <div class="operation-btns link" @click="add(Operation.ADDITION, proposed.rawTag)">
-        <fa-icon icon="plus" />
-      </div>
-      <div
+      <a
+        class="operation-btns link"
+        :title="$t('tag-propositions.substraction')"
+        @click="add(Operation.SUBSTRACTION, proposed.rawTag)"
+      ><fa-icon icon="minus" alt="[-]" /></a>
+
+      <a
+        class="operation-btns link"
+        :title="$t('tag-propositions.addition')"
+        @click="add(Operation.ADDITION, proposed.rawTag)"
+      ><fa-icon icon="plus" alt="[+]" /></a>
+
+      <a
         class="operation-tag link"
+        :title="$t('tag-propositions.intersection')"
         @click="add(Operation.INTERSECTION, proposed.rawTag)"
-      >{{proposed.rawTag}}</div>
-      <div class="disabled">x{{proposed.count}}</div>
+      >{{proposed.rawTag}}</a>
+
+      <div
+        class="disabled"
+        :title="$t('tag-propositions.item-count')"
+      >{{proposed.count}}</div>
     </div>
   </div>
 </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 @@
   "mode.search": "Search",
   "search.no-results": "No results",
   "panelLeft.propositions": "Proposed tags",
+  "tag-propositions.substraction": "Exclude items with this tag",
+  "tag-propositions.addition": "Include all items with this tag",
+  "tag-propositions.intersection": "Search for this tag",
+  "tag-propositions.item-count": "Item count",
   "gallery.unknowntype": "Unknown item type",
   "command.search": "Open search panel",
   "command.home": "Go to gallery home",