From 20a72c2538168d4b6c5452fe4d31819b8cc0faaf Mon Sep 17 00:00:00 2001
From: Amir Raminfar <findamir@gmail.com>
Date: Mon, 29 Mar 2021 20:09:15 -0700
Subject: [PATCH] Cleans up pin icons in favor of columns

---
 assets/components/FuzzySearchModal.vue | 13 +++++++--
 assets/components/SideMenu.vue         | 39 +++++++++++++++-----------
 2 files changed, 34 insertions(+), 18 deletions(-)

diff --git a/assets/components/FuzzySearchModal.vue b/assets/components/FuzzySearchModal.vue
index 85434bfc..bb977743 100644
--- a/assets/components/FuzzySearchModal.vue
+++ b/assets/components/FuzzySearchModal.vue
@@ -14,13 +14,15 @@
       <template slot-scope="props">
         <div class="media">
           <div class="media-left">
-            <span :class="props.option.state"><icon name="crate"></icon></span>
+            <span class="icon is-small" :class="props.option.state"><icon name="crate"></icon></span>
           </div>
           <div class="media-content">
             {{ props.option.name }}
           </div>
           <div class="media-right">
-            <span class="column-icon" @click.stop.prevent="addColumn(props.option)"><icon name="column"></icon></span>
+            <span class="icon is-small column-icon" @click.stop.prevent="addColumn(props.option)" title="Pin as column">
+              <icon name="column"></icon>
+            </span>
           </div>
         </div>
       </template>
@@ -122,5 +124,12 @@ export default {
 
 ::v-deep a.dropdown-item {
   padding-right: 1em;
+
+  .media-right {
+    visibility: hidden;
+  }
+  i &:hover .media-right {
+    visibility: visible;
+  }
 }
 </style>
diff --git a/assets/components/SideMenu.vue b/assets/components/SideMenu.vue
index c8cb6f62..e0e1ad31 100644
--- a/assets/components/SideMenu.vue
+++ b/assets/components/SideMenu.vue
@@ -39,15 +39,20 @@
           active-class="is-active"
           :title="item.name"
         >
-          <div class="is-ellipsis">
-            <span
-              @click.stop.prevent="appendActiveContainer(item)"
-              class="icon is-small will-append-container"
-              :class="{ 'is-active': activeContainersById[item.id] }"
-            >
-              <icon name="pin"></icon>
-            </span>
-            {{ item.name }}
+          <div class="container is-flex is-align-items-center">
+            <div class="is-flex-grow-1 is-ellipsis">
+              {{ item.name }}
+            </div>
+            <div class="is-flex-shrink-1 column-icon">
+              <span
+                class="icon is-small"
+                @click.stop.prevent="appendActiveContainer(item)"
+                v-show="!activeContainersById[item.id]"
+                title="Pin as column"
+              >
+                <icon name="column"></icon>
+              </span>
+            </div>
           </div>
         </router-link>
       </li>
@@ -108,14 +113,16 @@ li.exited a {
   fill: var(--logo-color);
 }
 
-.will-append-container.icon {
-  transition: transform 0.2s ease-out;
-  &.is-active {
-    pointer-events: none;
-    color: var(--primary-color);
-  }
-  .router-link-exact-active & {
+.menu-list li {
+  .column-icon {
     visibility: hidden;
   }
+
+  &:hover .column-icon {
+    visibility: visible;
+    &:hover {
+      color: var(--secondary-color);
+    }
+  }
 }
 </style>