style(make findable): popover style & animation

Author: angelo-v

elements/src/components/pos-make-findable/pos-make-findable.css

@@ -1,6 +1,8 @@
 button.main {
   display: flex;
+  transition: width 200ms;
   flex-direction: row;
+  overflow: hidden;
   height: var(--size-8);
   width: var(--size-8);
   align-items: center;
@@ -14,17 +16,57 @@ button.main {
     padding: 0;
     margin: 0;
     display: none;
+    white-space: nowrap;
+  }
+}
+
+.options {
+  position: absolute;
+  animation: fadeIn 300ms;
+  padding: 0;
+  margin-top: var(--size-1);
+  z-index: var(--layer-top);
+
+  ol {
+    display: flex;
+    flex-direction: column;
+    box-shadow: var(--shadow-md);
+    backdrop-filter: var(--blur-md);
+    border-radius: var(--radius-xs);
+    overflow: hidden;
+    background-color: var(--color-grey-200);
+    padding: 0;
+    margin: 0;
+    list-style: none;
+    button {
+      transition: all 300ms var(--ease-in-out-sine);
+      margin: 0;
+      border: none;
+      outline: none;
+      padding: var(--size-2);
+      width: var(--size-full);
+
+      &:hover {
+        filter: brightness(80%);
+      }
+
+      &:active {
+        filter: brightness(90%);
+      }
+    }
   }
 }
 
 svg {
   display: inline-block;
   height: var(--size-6);
+  flex-shrink: 0;
+  flex-grow: 0;
   width: var(--size-6);
 }
 
 button.main:hover {
-  width: auto;
+  width: var(--size-full);
   height: var(--size-8);
   background: var(--color-grey-200);
   color: var(--color-grey-700);
@@ -33,3 +75,12 @@ button.main:hover {
     display: inline-block;
   }
 }
+
+@keyframes fadeIn {
+  0% {
+    opacity: 0;
+  }
+  100% {
+    opacity: 1;
+  }
+}

elements/src/components/pos-make-findable/pos-make-findable.tsx

@@ -75,6 +75,7 @@ export class PosMakeFindable implements PodOsAware {
     if (!session.state.isLoggedIn) {
       return null;
     }
+
     return (
       <Host>
         <button class="main" onClick={e => this.onClick(e)} title="">
@@ -84,7 +85,6 @@ export class PosMakeFindable implements PodOsAware {
             viewBox="0 0 24 24"
             stroke-width="1.5"
             stroke="currentColor"
-            class="size-6"
           >
             <path
               stroke-linecap="round"
@@ -95,17 +95,19 @@ export class PosMakeFindable implements PodOsAware {
           <p>Make this findable</p>
         </button>
         {this.showOptions && (
-          <ol role="listbox">
-            {this.indexes.map((index: LabelIndex) => (
-              <li role="option">
-                <button onClick={e => this.chooseOption(e, index)}>
-                  <pos-resource uri={index.uri} lazy={true}>
-                    <pos-label></pos-label>
-                  </pos-resource>
-                </button>
-              </li>
-            ))}
-          </ol>
+          <div class="options">
+            <ol role="listbox">
+              {this.indexes.map((index: LabelIndex) => (
+                <li role="option">
+                  <button onClick={e => this.chooseOption(e, index)}>
+                    <pos-resource uri={index.uri} lazy={true}>
+                      <pos-label></pos-label>
+                    </pos-resource>
+                  </button>
+                </li>
+              ))}
+            </ol>
+          </div>
         )}
       </Host>
     );