chore: small demo styling enhancements (#1579)

ghiscoding · Jun 18, 2024 · 80b682a · 80b682a
1 parent 2f97dbb
commit 80b682a
Show file tree

Hide file tree

Showing 5 changed files with 29 additions and 12 deletions.
diff --git a/examples/vite-demo-vanilla-bundle/src/examples/example03.ts b/examples/vite-demo-vanilla-bundle/src/examples/example03.ts
@@ -223,10 +223,10 @@ export default class Example03 {
         }
       },
       {
-        id: 'action', name: 'Action', field: 'action', width: 100, maxWidth: 100,
+        id: 'action', name: 'Action', field: 'action', width: 90, maxWidth: 90,
         excludeFromExport: true,
         formatter: () => {
-          return `<div class="fake-hyperlink text-color-primary">Action <span class="font-12px">&#9660;</span></div>`;
+          return `<div class="fake-hyperlink text-color-primary flex justify-center">Action <i class="mdi mdi-chevron-down"></i></div>`;
         },
         cellMenu: {
           hideCloseButton: false,

diff --git a/examples/vite-demo-vanilla-bundle/src/examples/example04.scss b/examples/vite-demo-vanilla-bundle/src/examples/example04.scss
@@ -1,4 +1,23 @@
 // @import '@slickgrid-universal/common/dist/styles/sass/slickgrid-theme-material.scss';
 .orange {
   color: orange;
+}
+
+.cell-menu-dropdown {
+  border: 1px solid #a3a3a3;
+  border-radius: 5px;
+  display: flex;
+  align-items: center;
+  height: 90%;
+  width: max-content;
+  padding: 0 12px;
+  cursor: pointer;
+  &:hover {
+    background-color: #a3a3a3;
+    color: #ffffff;
+  }
+
+  .mdi-chevron-down {
+    margin-left: 5px;
+  }
 }
diff --git a/examples/vite-demo-vanilla-bundle/src/examples/example04.ts b/examples/vite-demo-vanilla-bundle/src/examples/example04.ts
@@ -294,9 +294,7 @@ export default class Example04 {
       {
         id: 'action', name: 'Action', field: 'action', width: 100, maxWidth: 100,
         excludeFromExport: true,
-        formatter: () => {
-          return `<div class="fake-hyperlink">Action <span class="font-12px">&#9660;</span></div>`;
-        },
+        formatter: () => `<div class="cell-menu-dropdown">Action<i class="mdi mdi-chevron-down"></i></div>`,
         cellMenu: {
           hideCloseButton: false,
           // you can override the logic of when the menu is usable

diff --git a/examples/vite-demo-vanilla-bundle/src/examples/example18.html b/examples/vite-demo-vanilla-bundle/src/examples/example18.html
@@ -25,7 +25,7 @@ <h6 class="title is-6 italic">
     <div>
       <div class="range">
         <label for="refreshRateRange" class="form-label">Changes Rate(ms)</label>
-        <input type="range" class="form-range" id="refreshRateRange" min="0" max="250" value.bind="refreshRate">
+        <input type="range" class="form-range" id="refreshRateRange" min="0" max="250" step="5" value.bind="refreshRate">
         <span class="refresh-rate">
           <input type="number" class="is-narrow input is-small" value.bind="refreshRate">
         </span>
@@ -44,13 +44,13 @@ <h6 class="title is-6 italic">
       </span>
       <span>
         <label for="change-per-cycle-input">Changes p/Cycle</label>
-        <input type="number" class="is-narrow input is-small" id="change-per-cycle-input" value.bind="minChangePerCycle" max.bind="maxChangePerCycle">
+        <input type="number" class="is-narrow input is-small" id="change-per-cycle-input" value.bind="minChangePerCycle" max.bind="maxChangePerCycle" step="5">
         to
-        <input type="number" class="is-narrow input is-small" value.bind="maxChangePerCycle" min.bind="minChangePerCycle">
+        <input type="number" class="is-narrow input is-small" value.bind="maxChangePerCycle" min.bind="minChangePerCycle" step="5">
       </span>
       <span>
         <label for="highlight-input">Highlight Duration(ms)</label>
-        <input type="number" class="is-narrow input is-small" id="highlight-input" data-test="highlight-input" value.bind="highlightDuration">
+        <input type="number" class="is-narrow input is-small" id="highlight-input" data-test="highlight-input" value.bind="highlightDuration" step="10">
       </span>
       <span class="float-right">
         <button class="button is-small" onclick.delegate="toggleFullScreen()">

diff --git a/examples/vite-demo-vanilla-bundle/src/examples/example20.ts b/examples/vite-demo-vanilla-bundle/src/examples/example20.ts
@@ -32,11 +32,11 @@ export default class Example20 {
 
     // not sure why but ShadowDOM seems a little slower to render,
     // let's wrap the grid resize in a delay & show the grid only after the resize
-    setTimeout(() => {
+    setTimeout(async () => {
       this.sgb = new Slicker.GridBundle(shadowObj.gridContainer as HTMLDivElement, this.columnDefinitions, { ...ExampleGridOptions, ...this.gridOptions }, this.dataset);
-      this.sgb.resizerService.resizeGrid(150);
+      await this.sgb.resizerService.resizeGrid(150);
       shadowObj.gridContainer.style.opacity = '1';
-    }, 50);
+    }, 75);
   }
 
   /**