Implement grid view

AeonSolstice · Nov 4, 2024 · c2050f6 · c2050f6
1 parent bd58809
commit c2050f6
Show file tree

Hide file tree

Showing 4 changed files with 92 additions and 8 deletions.
diff --git a/README.md b/README.md
@@ -6,3 +6,7 @@ This is a simple **t**ime-based **o**ne-**t**ime **p**assword implementation in
 
 [References](refs.md)<br>
 [License](LICENSE)
+
+---
+
+[Free of Bloat](https://github.com/AeonSolstice/bloat)
diff --git a/app.js b/app.js
@@ -32,7 +32,7 @@ const inputData = $('#data-input');
 const selectFormat = $('#format-select');
 const secretsSelect = $('#secrets-select');
 
-let view = 'list';
+let view = localStorage.getItem('view') ?? 'list';
 
 let secrets = JSON.parse(localStorage.getItem('secrets')) ?? [];
 
@@ -49,13 +49,12 @@ function toggleView(kind) {
     btnGrid.classList.add('selected');
     btnList.classList.remove('selected');
 
-    show(viewGrid);
+    show(viewGrid, 'grid');
     hide(viewList);
   }
 
-  build();
-
   view = kind;
+  build();
 }
 
 function build() {
@@ -90,6 +89,35 @@ function build() {
       viewListItems.appendChild(item);
     }
   } else {
+    viewGrid.innerHTML = '';
+
+    for (const s of secrets) {
+      const item = document.createElement('div');
+      const label = document.createElement('div');
+      const actions = document.createElement('div');
+      const editAction = document.createElement('button');
+      const copyAction = document.createElement('button');
+
+      label.className = 'label';
+      label.innerText = s.label;
+
+      actions.className = 'actions';
+
+      editAction.disabled = true;
+      editAction.dataset.tooltip = 'Edit Secret';
+      editAction.appendChild(createIcon('edit'));
+
+      copyAction.dataset.tooltip = 'Copy Code';
+      copyAction.appendChild(createIcon('content_copy'));
+      on(copyAction, 'click', async () => {
+        await copyCode(s);
+      });
+
+      actions.append(copyAction, createSep(), editAction);
+
+      item.append(label, actions);
+      viewGrid.appendChild(item);
+    }
   }
 }
 
@@ -399,10 +427,12 @@ async function doExport(copy = true) {
 }
 
 on(btnList, 'click', () => {
+  localStorage.setItem('view', 'list');
   toggleView('list');
 });
 
 on(btnGrid, 'click', () => {
+  localStorage.setItem('view', 'grid');
   toggleView('grid');
 });
 
@@ -528,3 +558,5 @@ on('#export-modal-btn-export', 'click', () => doExport(false));
 on('#export-modal-btn-copy', 'click', doExport);
 
 build();
+
+$(`#btn-${view}`).classList.add('selected');
diff --git a/index.html b/index.html
@@ -31,18 +31,18 @@
 
       <span class="sep right"></span>
 
-      <button id="btn-list" class="right selected">
+      <button id="btn-list" class="right">
         <span class="material-symbols-outlined">view_list</span>
       </button>
 
-      <button id="btn-grid" class="right" disabled>
+      <button id="btn-grid" class="right">
         <span class="material-symbols-outlined">grid_view</span>
       </button>
     </div>
 
     <div id="content">
       <div id="view-list">
-        <div class="header"></div>
+        <!-- <div class="header"></div> -->
 
         <div class="items"></div>
       </div>

diff --git a/style.css b/style.css
@@ -227,7 +227,55 @@ textarea {
 }
 
 #view-grid {
-  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+  --item-width: 200px;
+  --item-height: 75px;
+  --item-header-height: 30px;
+  --content-height: calc(var(--item-height) - var(--item-header-height));
+
+  grid-template-columns: repeat(auto-fit, minmax(var(--item-width), 1fr));
+
+  /* item */
+  > * {
+    height: var(--item-height);
+    background-color: #757575;
+
+    /* header */
+    > .label {
+      width: 100%;
+      height: var(--item-header-height);
+      background-color: #616161;
+      text-align: center;
+      line-height: var(--item-header-height);
+    }
+
+    > .actions {
+      position: relative;
+      left: 50%;
+      translate: -50% 0;
+
+      width: fit-content;
+      height: var(--content-height);
+
+      > button {
+        --hover-background-color: #9e9e9e;
+        --active-background-color: #424242;
+        --disabled-icon-color: #616161;
+
+        float: left;
+        width: var(--content-height);
+        height: var(--content-height);
+
+        > .material-symbols-outlined {
+          font-size: max(16px, calc(var(--content-height) - 10px));
+          line-height: var(--content-height);
+        }
+
+        &:focus > .material-symbols-outlined {
+          line-height: calc(var(--content-height) - 2px);
+        }
+      }
+    }
+  }
 }
 
 .modal {