menu drawer

filecoin-project · Mar 4, 2025 · 449c3db · 449c3db
1 parent 395bc47
commit 449c3db
Show file tree

Hide file tree

Showing 20 changed files with 247 additions and 240 deletions.
diff --git a/web/static/config/edit.html b/web/static/config/edit.html
@@ -3,6 +3,7 @@
 <head>
     <title>JSON Schema Editor</title>
     <script type="module" src="/ux/curio-ux.mjs"></script>
+    <script type="module" src="/ux/components/Drawer.mjs"></script>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.21.1/axios.min.js"></script>
     <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
     <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
@@ -92,6 +93,9 @@
 
             <div id="editor" data-bs-theme="dark"></div>
             <script>
+                console.log(document.querySelector('ui-drawer'));
+                console.log(document.querySelector('curio-ux'));
+
                 var editor;
                 var urlParams = new URLSearchParams(window.location.search);
                 var layer = urlParams.get('layer');

diff --git a/web/static/gc/index.html b/web/static/gc/index.html
@@ -4,6 +4,7 @@
 <head>
     <title>Storage GC</title>
     <script type="module" src="/ux/curio-ux.mjs"></script>
+    <script type="module" src="/ux/components/Drawer.mjs"></script>
     <script type="module" src="/storage-gc.mjs"></script>
     <script type="module" src="gc-marks.mjs"></script>
 </head>

diff --git a/web/static/index.html b/web/static/index.html
@@ -18,6 +18,7 @@
     <script type="module" src="pipeline-stats.mjs"></script>
     <script type="module" src="actor-summary.mjs"></script>
     <script type="module" src="/ux/curio-ux.mjs"></script>
+<script type="module" src="/ux/components/Drawer.mjs"></script>
     <script type="module" src="/ux/components/Drawer.mjs"></script>
     <script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-datalabels@2"></script>
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"

diff --git a/web/static/pages/actor/index.html b/web/static/pages/actor/index.html
@@ -5,6 +5,7 @@
     <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
     <script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-datalabels@2"></script>
     <script type="module" src="/ux/curio-ux.mjs"></script>
+    <script type="module" src="/ux/components/Drawer.mjs"></script>
     <script type="module" src="actor-detail.mjs"></script>
 </head>
 <body style="visibility:hidden" data-bs-theme="dark">

diff --git a/web/static/pages/config/list/index.html b/web/static/pages/config/list/index.html
@@ -3,6 +3,7 @@
 <head>
   <title>Configurations</title>
   <script type="module" src="/ux/curio-ux.mjs"></script>
+  <script type="module" src="/ux/components/Drawer.mjs"></script>
   <script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.21.1/axios.min.js"></script>
   <script type="module" src="config-list.mjs"></script>
   <link rel="stylesheet" href="/ux/main.css">

diff --git a/web/static/pages/ipni/index.html b/web/static/pages/ipni/index.html
@@ -3,6 +3,7 @@
 <head>
     <title>IPNI</title>
     <script type="module" src="/ux/curio-ux.mjs"></script>
+    <script type="module" src="/ux/components/Drawer.mjs"></script>
     <script type="module" src="ipni_status.mjs"></script>
     <script type="module" src="ipni_search.mjs"></script>
 </head>

diff --git a/web/static/pages/market-settings/index.html b/web/static/pages/market-settings/index.html
@@ -3,6 +3,7 @@
 <head>
     <title>Market Settings</title>
     <script type="module" src="/ux/curio-ux.mjs"></script>
+    <script type="module" src="/ux/components/Drawer.mjs"></script>
     <script type="module" src="allow-list.mjs"></script>
     <script type="module" src="client-filters.mjs"></script>
     <script type="module" src="pricing-filters.mjs"></script>

diff --git a/web/static/pages/market/index.html b/web/static/pages/market/index.html
@@ -8,6 +8,7 @@
     <script type="module" src="deal-pipelines.mjs"></script>
     <script type="module" src="pending-deals.mjs"></script>
     <script type="module" src="piece-summary.mjs"></script>
+    <script type="module" src="/ux/components/Drawer.mjs"></script>
 </head>
 <body style="visibility:hidden; background:rgb(11, 22, 34)" data-bs-theme="dark">
 <curio-ux>

diff --git a/web/static/pages/mk12-deal/index.html b/web/static/pages/mk12-deal/index.html
@@ -4,6 +4,7 @@
 <head>
     <title>Deals</title>
     <script type="module" src="/ux/curio-ux.mjs"></script>
+    <script type="module" src="/ux/components/Drawer.mjs"></script>
     <script type="module" src="deal.mjs"></script>
 </head>
 

diff --git a/web/static/pages/mk12-deals/index.html b/web/static/pages/mk12-deals/index.html
@@ -3,6 +3,7 @@
 <head>
     <title>Storage Marker</title>
     <script type="module" src="/ux/curio-ux.mjs"></script>
+    <script type="module" src="/ux/components/Drawer.mjs"></script>
     <script type="module" src="deal-search.mjs"></script>
     <script type="module" src="mk12-deals.mjs"></script>
     <script type="module" src="legacy-deals.mjs"></script>

diff --git a/web/static/pages/node_info/index.html b/web/static/pages/node_info/index.html
@@ -3,6 +3,7 @@
   <head>
     <title>Node Info</title>
     <script type="module" src="/ux/curio-ux.mjs"></script>
+  <script type="module" src="/ux/components/Drawer.mjs"></script>
     <script type="module" src="node-info.mjs"></script>
   </head>
   <body style="visibility:hidden; background:rgb(11, 22, 34)" data-bs-theme="dark">

diff --git a/web/static/pages/piece/index.html b/web/static/pages/piece/index.html
@@ -3,6 +3,7 @@
   <head>
     <title>Piece Info</title>
     <script type="module" src="/ux/curio-ux.mjs"></script>
+  <script type="module" src="/ux/components/Drawer.mjs"></script>
     <script type="module" src="piece-info.mjs"></script>
   </head>
   <body style="visibility:hidden; background:rgb(11, 22, 34)" data-bs-theme="dark">

diff --git a/web/static/pages/pipeline_porep/index.html b/web/static/pages/pipeline_porep/index.html
@@ -3,6 +3,7 @@
     <title>Curio PoRep Pipeline</title>
     <script src="https://unpkg.com/[email protected]" integrity="sha384-xcuj3WpfgjlKF+FXhSQFQ0ZNr39ln+hwjN3npfM9VBnUskLolQAcN80McRIVOPuO" crossorigin="anonymous"></script>
     <script type="module" src="/ux/curio-ux.mjs"></script>
+    <script type="module" src="/ux/components/Drawer.mjs"></script>
     <script type="module" src="/chain-connectivity.mjs"></script>
     <script type="module" src="pipeline-porep-sectors.mjs"></script>
     <script type="module" src="restart-all-button.mjs"></script>

diff --git a/web/static/pages/sector/index.html b/web/static/pages/sector/index.html
@@ -3,6 +3,7 @@
   <head>
     <title>Node Info</title>
     <script type="module" src="/ux/curio-ux.mjs"></script>
+  <script type="module" src="/ux/components/Drawer.mjs"></script>
     <script type="module" src="sector-info.mjs"></script>
   </head>
   <body style="visibility:hidden; background:rgb(11, 22, 34)" data-bs-theme="dark">

diff --git a/web/static/pages/task/id/index.html b/web/static/pages/task/id/index.html
@@ -3,6 +3,7 @@
 <head>
     <title>Task Details</title>
     <script type="module" src="/ux/curio-ux.mjs"></script>
+<script type="module" src="/ux/components/Drawer.mjs"></script>
     <script type="module" src="task-status.mjs"></script>
     <script type="module" src="task-details.mjs"></script>
     <script type="module" src="task-history.mjs"></script>

diff --git a/web/static/pages/task/index.html b/web/static/pages/task/index.html
@@ -4,6 +4,7 @@
 <head>
     <title>Task Info</title>
     <script type="module" src="/ux/curio-ux.mjs"></script>
+    <script type="module" src="/ux/components/Drawer.mjs"></script>
     <script type="module" src="task-machines.mjs"></script>
     <script type="module" src="task-history.mjs"></script>
 </head>

diff --git a/web/static/sector/index.html b/web/static/sector/index.html
@@ -5,6 +5,7 @@
   <title>Sector List</title>
   <script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.21.1/axios.min.js"></script>
   <script type="module" src="/ux/curio-ux.mjs"></script>
+  <script type="module" src="/ux/components/Drawer.mjs"></script>
 
   <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
 

diff --git a/web/static/snap/index.html b/web/static/snap/index.html
@@ -4,6 +4,7 @@
 <head>
     <title>Upgrade Pipeline</title>
     <script type="module" src="/ux/curio-ux.mjs"></script>
+    <script type="module" src="/ux/components/Drawer.mjs"></script>
     <script type="module" src="upgrade-sectors.mjs"></script>
     <script type="module" src="restart-all-snap-button.mjs"></script>
 </head>

diff --git a/web/static/ux/components/Drawer.mjs b/web/static/ux/components/Drawer.mjs
@@ -78,7 +78,7 @@ class Drawer extends StyledLitElement {
   render() {
     return html`
       <div>
-        <button class="open-btn" @click=${this.handleToggle}>${this.label}</button>
+        <button class="open-btn" anchor=${this.anchor} @click=${this.handleToggle}>${this.label}</button>
         <dialog
           class="dialog"
           aria-label=${this.label}
@@ -111,15 +111,40 @@ Drawer.styles = [
     
     .open-btn {
       position: fixed;
-      top: 0;
-      right: 0;
-      transform-origin: bottom right;
-      transform: rotate(-90deg);
       color: var(--color-text-primary);
       background-color: var(--color-secondary-light);
       border-radius: 8px 8px 0 0;
       padding: 0.75rem 1.2rem;
       font-size: 0.9rem;
+      
+      &[anchor="right"] {
+        top: 0;
+        right: 0;
+        transform-origin: bottom right;
+        transform: rotate(-90deg);
+      }
+      
+      &[anchor="left"] {
+        top: 30%;
+        left: 0;
+        transform: rotate(90deg); 
+        transform-origin: bottom left;
+      }
+      
+      &[anchor="top"] {
+        top: 0;
+        left: 50%;
+        border-radius: 0 0 8px 8px;
+        transform: rotate(0deg);
+        transform-origin: top center;
+      }
+      
+      &[anchor="bottom"] {
+        bottom: 0;
+        left: 50%;
+        transform: rotate(0deg);
+        transform-origin: bottom center;
+      }
 
       &:hover, &:active {
         cursor: pointer;
@@ -152,7 +177,7 @@ Drawer.styles = [
         bottom: 0;
         right: auto;
         left: 0;
-        width: 40rem;
+        width: 20rem;
         min-height: 100vh;
         max-height: 100vh;
         box-shadow: 8px 0 20px 4px var(--color-shadow-main);