remove pins from the main table list with shifting icon

Wefunder · Jun 27, 2022 · 75c7111 · 75c7111
1 parent bf39c3d
commit 75c7111
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 2 deletions.
diff --git a/apps/studio/src/assets/styles/app/sidebar/sidebar.scss b/apps/studio/src/assets/styles/app/sidebar/sidebar.scss
@@ -420,9 +420,21 @@
         }
         &.pinned {
           display: inline-flex;
-          i {
+          i.bk-pin {
             color: $theme-primary;
           }
+          i.material-icons {
+            display:none;
+          }
+
+          &:hover {
+            i.material-icons {
+              display: inline;
+            }
+            i.bk-pin {
+              display: none;
+            }
+          }
         }
       }
       i {

diff --git a/apps/studio/src/components/sidebar/core/table_list/TableListItem.vue b/apps/studio/src/components/sidebar/core/table_list/TableListItem.vue
@@ -11,7 +11,10 @@
       <span class="actions" v-bind:class="{'pinned': pinned}">
         <span v-if="!pinned" @mousedown.prevent.stop="pin" class="btn-fab pin" :title="'Pin'"><i class="bk-pin"></i></span>
         <span v-if="pinned" @mousedown.prevent.stop="unpin" class="btn-fab unpin" :title="'Unpin'"><i class="material-icons">clear</i></span>
-        <span v-if="pinned" class="btn-fab pinned"><i class="bk-pin" :title="'Unpin'"></i></span>
+        <span v-if="pinned" @mousedown.prevent.stop="unpin" class="btn-fab pinned">
+          <i class="bk-pin" :title="'Unpin'"></i>
+          <i class="material-icons">clear</i>
+        </span>
       </span>
     </a>
     <div v-if="showColumns" class="sub-items">