From d3dc0623678c859ace868b14acf2daaa1fa759de Mon Sep 17 00:00:00 2001
From: Eric Schubert <38206611+Kharonus@users.noreply.github.com>
Date: Fri, 10 Jun 2022 14:20:07 +0200
Subject: [PATCH] [chore] add spot hover menu (#10762)

- new hover menu for spot-list
- introduced floating wrapper
- align children to top when list item gets line breaks
- reworked spot list item style
- add word wrap to the spot list title
---
 .../src/app/spot/spot-docs.component.html     | 115 ++++++++++++++++--
 .../app/spot/styles/sass/components/list.sass |  38 +++++-
 2 files changed, 141 insertions(+), 12 deletions(-)

diff --git a/frontend/src/app/spot/spot-docs.component.html b/frontend/src/app/spot/spot-docs.component.html
index cf91e18f19..6cb86de62f 100644
--- a/frontend/src/app/spot/spot-docs.component.html
+++ b/frontend/src/app/spot/spot-docs.component.html
@@ -125,6 +125,11 @@ Currently selected value is {{ toggleValue }}
 
 <h2>Normal list</h2>
 
+<p>HINT: To enable floating actions on hover, every <i>spot-list--item</i> needs a
+  <i>spot-list--item-floating-wrapper</i>, which wraps the item's content and the <i>spot-list-item-floating-actions</i>,
+  but not any sub lists. This way, floating actions on hover are defined specific for each item, hence in the same list
+  items with floating actions can be right next to items without.</p>
+
 <ul class="spot-list">
   <li class="spot-list--item">
     <label class="spot-list--item-action">
@@ -132,6 +137,25 @@ Currently selected value is {{ toggleValue }}
       <div class="spot-list--item-title">Checkbox item</div>
     </label>
   </li>
+  <li class="spot-list--item">
+    <div class="spot-list--item-floating-wrapper">
+      <label class="spot-list--item-action">
+        <spot-checkbox [(ngModel)]="listCheckboxValue"></spot-checkbox>
+        <div class="spot-list--item-title">Checkbox item with hover menu</div>
+      </label>
+      <div class="spot-list--item-floating-actions">
+        <button class="spot-link">
+          <span class="spot-icon spot-icon_folder-open"></span>
+        </button>
+        <button class="spot-link">
+          <span class="spot-icon spot-icon_external-link"></span>
+        </button>
+        <button class="spot-link">
+          <span class="spot-icon spot-icon_file-doc"></span>
+        </button>
+      </div>
+    </div>
+  </li>
   <li class="spot-list--item">
     <label class="spot-list--item-action">
       <spot-checkbox [(ngModel)]="listCheckboxValue"></spot-checkbox>
@@ -139,15 +163,25 @@ Currently selected value is {{ toggleValue }}
     </label>
     <ul class="spot-list">
       <li class="spot-list--item">
-        <label class="spot-list--item-action">
-          <spot-checkbox [(ngModel)]="listCheckboxValue"></spot-checkbox>
-          <div class="spot-list--item-title">Child checkbox item</div>
-        </label>
+        <div class="spot-list--item-floating-wrapper">
+          <label class="spot-list--item-action">
+            <spot-checkbox [(ngModel)]="listCheckboxValue"></spot-checkbox>
+            <div class="spot-list--item-title">Child checkbox item</div>
+          </label>
+          <div class="spot-list--item-floating-actions">
+            <button class="spot-link">
+              <span class="spot-icon spot-icon_folder-open"></span>
+            </button>
+            <button class="spot-link">
+              <span class="spot-icon spot-icon_file-doc"></span>
+            </button>
+          </div>
+        </div>
         <ul class="spot-list">
           <li class="spot-list--item">
             <label class="spot-list--item-action">
               <spot-checkbox [(ngModel)]="listCheckboxValue"></spot-checkbox>
-              <div class="spot-list--item-title">Secon level child</div>
+              <div class="spot-list--item-title">Second level child</div>
             </label>
           </li>
         </ul>
@@ -158,6 +192,22 @@ Currently selected value is {{ toggleValue }}
           <div class="spot-list--item-title">Second child checkbox item</div>
         </label>
       </li>
+      <li class="spot-list--item">
+        <div class="spot-list--item-floating-wrapper">
+          <label class="spot-list--item-action">
+            <spot-checkbox [(ngModel)]="listCheckboxValue"></spot-checkbox>
+            <div class="spot-list--item-title">Second child checkbox item with hover menu</div>
+          </label>
+          <div class="spot-list--item-floating-actions">
+            <button class="spot-link">
+              <span class="spot-icon spot-icon_folder-open"></span>
+            </button>
+            <button class="spot-link">
+              <span class="spot-icon spot-icon_file-doc"></span>
+            </button>
+          </div>
+        </div>
+      </li>
       <li class="spot-list--item">
         <label class="spot-list--item-action spot-list--item-action_disabled">
           <spot-checkbox
@@ -180,6 +230,25 @@ Currently selected value is {{ toggleValue }}
       <div class="spot-list--item-title">Checkbox item</div>
     </label>
   </li>
+  <li class="spot-list--item">
+    <div class="spot-list--item-floating-wrapper">
+      <label class="spot-list--item-action">
+        <spot-checkbox [(ngModel)]="listCheckboxValue"></spot-checkbox>
+        <div class="spot-list--item-title">Checkbox item with hover menu</div>
+      </label>
+      <div class="spot-list--item-floating-actions">
+        <button class="spot-link">
+          <span class="spot-icon spot-icon_folder-open"></span>
+        </button>
+        <button class="spot-link">
+          <span class="spot-icon spot-icon_external-link"></span>
+        </button>
+        <button class="spot-link">
+          <span class="spot-icon spot-icon_file-doc"></span>
+        </button>
+      </div>
+    </div>
+  </li>
   <li class="spot-list--item">
     <label class="spot-list--item-action">
       <spot-checkbox [(ngModel)]="listCheckboxValue"></spot-checkbox>
@@ -187,15 +256,25 @@ Currently selected value is {{ toggleValue }}
     </label>
     <ul class="spot-list spot-list_compact">
       <li class="spot-list--item">
-        <label class="spot-list--item-action">
-          <spot-checkbox [(ngModel)]="listCheckboxValue"></spot-checkbox>
-          <div class="spot-list--item-title">Child checkbox item</div>
-        </label>
+        <div class="spot-list--item-floating-wrapper">
+          <label class="spot-list--item-action">
+            <spot-checkbox [(ngModel)]="listCheckboxValue"></spot-checkbox>
+            <div class="spot-list--item-title">Child checkbox item</div>
+          </label>
+          <div class="spot-list--item-floating-actions">
+            <button class="spot-link">
+              <span class="spot-icon spot-icon_folder-open"></span>
+            </button>
+            <button class="spot-link">
+              <span class="spot-icon spot-icon_file-doc"></span>
+            </button>
+          </div>
+        </div>
         <ul class="spot-list spot-list_compact">
           <li class="spot-list--item">
             <label class="spot-list--item-action">
               <spot-checkbox [(ngModel)]="listCheckboxValue"></spot-checkbox>
-              <div class="spot-list--item-title">Secon level child</div>
+              <div class="spot-list--item-title">Second level child</div>
             </label>
           </li>
         </ul>
@@ -206,6 +285,22 @@ Currently selected value is {{ toggleValue }}
           <div class="spot-list--item-title">Second child checkbox item</div>
         </label>
       </li>
+      <li class="spot-list--item">
+        <div class="spot-list--item-floating-wrapper">
+          <label class="spot-list--item-action">
+            <spot-checkbox [(ngModel)]="listCheckboxValue"></spot-checkbox>
+            <div class="spot-list--item-title">Second child checkbox item with hover menu</div>
+          </label>
+          <div class="spot-list--item-floating-actions">
+            <button class="spot-link">
+              <span class="spot-icon spot-icon_folder-open"></span>
+            </button>
+            <button class="spot-link">
+              <span class="spot-icon spot-icon_file-doc"></span>
+            </button>
+          </div>
+        </div>
+      </li>
       <li class="spot-list--item">
         <label class="spot-list--item-action spot-list--item-action_disabled">
           <spot-checkbox
diff --git a/frontend/src/app/spot/styles/sass/components/list.sass b/frontend/src/app/spot/styles/sass/components/list.sass
index 0ae9da5b97..7475d2fb8e 100644
--- a/frontend/src/app/spot/styles/sass/components/list.sass
+++ b/frontend/src/app/spot/styles/sass/components/list.sass
@@ -14,36 +14,70 @@
       @include spot-body-big
 
       display: flex
-      align-items: center
+      align-items: flex-start
       justify-content: flex-start
       padding: $spot-spacing-0_5 $spot-spacing-1
+      width: 100%
       background-color: transparent
       margin: 0
       border: 0
       cursor: pointer
 
+      > *:first-child
+        flex-shrink: 0
+
       &:hover
         background-color: $spot-color-basic-gray-6
+        text-decoration: none
 
       &_disabled
         color: $spot-color-basic-gray-3
         cursor: default
 
+    &-floating-wrapper
+      position: relative
+      display: flex
+
+      &:hover,
+      &:focus-within
+        background-color: $spot-color-basic-gray-6
+
+    &-floating-actions
+      opacity: 0
+      position: absolute
+      right: 0
+      height: 100%
+      padding: $spot-spacing-0_5 $spot-spacing-1
+      background: linear-gradient(90deg, rgba($spot-color-basic-gray-6, 0) 0%, $spot-color-basic-gray-6 1rem)
+
+      > .spot-link
+        &:not(:first-child)
+          margin-left: $spot-spacing-0_5
+
     &-title
+      margin-right: auto
+      word-break: break-word
       min-height: $spot-spacing-1_5
 
       &:not(:first-child)
         margin-left: $spot-spacing-0_5
+
       &:not(:last-child)
         margin-left: $spot-spacing-0_5
 
+    &-floating-wrapper:hover > &-floating-actions,
+    &-floating-actions:focus-within,
+    &-floating-actions:hover
+      opacity: 1
+
   &_compact &--item:not(:first-child)
     margin-top: $spot-spacing-0_25
 
   &--item > &_compact > &--item:first-child
     margin-top: $spot-spacing-0_25
 
-  &_compact &--item-action
+  &_compact &--item-action,
+  &_compact &--item-floating-actions
     padding: $spot-spacing-0_25 $spot-spacing-1
 
   $item-list: ""