From 21801c1cef055bee8311f2c0530a866eb34e2a6e Mon Sep 17 00:00:00 2001
From: axolotle <nchesnais@mailoo.org>
Date: Mon, 28 Jun 2021 13:05:26 +0200
Subject: [PATCH] make DotButton content overflow & add depart styling

---
 src/assets/scss/abstracts/_mixins.scss  | 14 +++++++++-
 src/components/globals/DotButton.vue    | 34 ++++++++++++++++++++++---
 src/components/nodes/NodeViewFooter.vue |  4 +--
 src/pages/library/LibraryTree.vue       |  4 +++
 src/store/modules/library.js            |  2 +-
 5 files changed, 50 insertions(+), 8 deletions(-)

diff --git a/src/assets/scss/abstracts/_mixins.scss b/src/assets/scss/abstracts/_mixins.scss
index 4ebbd60..22089ae 100644
--- a/src/assets/scss/abstracts/_mixins.scss
+++ b/src/assets/scss/abstracts/_mixins.scss
@@ -12,12 +12,20 @@
   color: color-yiq($background);
   @include gradient-bg($background);
   border-color: $border;
-  @include box-shadow($btn-box-shadow);
+  // @include box-shadow($btn-box-shadow);
+  @if $background == $white {
+    box-shadow: 3px 5px 0 $dark;
+  }
 
   @include hover() {
     color: color-yiq($hover-background);
     @include gradient-bg($hover-background);
     border-color: $hover-border;
+
+    @if $background == $white {
+      background-color: $white;
+      border-color: $dark;
+    }
   }
 
   &:focus,
@@ -25,6 +33,10 @@
     color: color-yiq($hover-background);
     @include gradient-bg($hover-background);
     border-color: $hover-border;
+    @if $background == $white {
+      background-color: $white;
+      border-color: $dark;
+    }
   }
 
   // Disabled comes first so active can properly restyle
diff --git a/src/components/globals/DotButton.vue b/src/components/globals/DotButton.vue
index f3dde65..acc18be 100644
--- a/src/components/globals/DotButton.vue
+++ b/src/components/globals/DotButton.vue
@@ -55,18 +55,44 @@ export default {
 
   &:not(.show),
   &.hide {
-    min-height: 1.1875rem;
-    min-width: 1.1875rem;
+    height: 1.1875rem;
+    width: 1.1875rem;
     padding: 0;
 
     &.dot-btn-depart {
-      min-height: 1.875rem;
-      min-width: 1.875rem;
+      height: 1.875rem;
+      width: 1.875rem;
     }
 
     span {
       display: none;
     }
   }
+
+  &.hide:hover {
+    span {
+      pointer-events: none;
+      position: absolute;
+      display: block;
+      transform: translate(calc(-100% + 1.1875rem), -50%);
+      border-radius: 50rem;
+      padding: 0 $input-btn-padding-x;
+      line-height: 1.5;
+    }
+
+    @each $color, $value in $theme-colors {
+      &.dot-btn-#{$color} {
+        span {
+          background-color: lighten($value, 15%);
+        }
+        &:active,
+        &.active {
+          span {
+            background-color: $value;
+          }
+        }
+      }
+    }
+  }
 }
 </style>
diff --git a/src/components/nodes/NodeViewFooter.vue b/src/components/nodes/NodeViewFooter.vue
index ab1758c..d96ed3a 100644
--- a/src/components/nodes/NodeViewFooter.vue
+++ b/src/components/nodes/NodeViewFooter.vue
@@ -13,7 +13,7 @@
       </div>
 
       <div v-if="mode === 'view' && node.siblings && node.siblings.length">
-        <b-button :id="'siblings-' + node.id">
+        <b-button :id="'siblings-' + node.id" variant="depart" class="mb-2">
           {{ $t('siblings') }}
         </b-button>
 
@@ -36,7 +36,7 @@
     </div>
 
     <div v-if="mode === 'card' && preview" class="mt-2">
-      <b-button @click="onOpenSelf()" variant="outline-dark" class="btn-read">
+      <b-button @click="onOpenSelf()" variant="depart" class="btn-read">
         {{ $t('text.read') }}
       </b-button>
     </div>
diff --git a/src/pages/library/LibraryTree.vue b/src/pages/library/LibraryTree.vue
index 65bbebd..f637aa8 100644
--- a/src/pages/library/LibraryTree.vue
+++ b/src/pages/library/LibraryTree.vue
@@ -193,6 +193,10 @@ foreignObject {
   transform: translate(-50%, -50%);
   pointer-events: none;
 
+  &-depart {
+    box-shadow: none;
+  }
+
   h6 {
     margin: 0;
   }
diff --git a/src/store/modules/library.js b/src/store/modules/library.js
index 063bb2f..5000b8e 100644
--- a/src/store/modules/library.js
+++ b/src/store/modules/library.js
@@ -231,7 +231,7 @@ export default {
         if (a.authors[0].last_name > b.authors[0].last_name) return 1
         return 0
       }).reduce((dict, text) => {
-        const firstChar = text.authors ? text.authors[0].last_name[0].toUpperCase() : 'Pas de noms'
+        const firstChar = text.authors ? text.authors[0].last_name[0].toUpperCase() : '~'
         if (!(firstChar in dict)) dict[firstChar] = []
         dict[firstChar].push(text)
         return dict