change color picker panel behavior to scroll when all the colors don'…

…t fit closes #173
ailon · Dec 11, 2023 · 4f76744 · 4f76744
1 parent a504fc3
commit 4f76744
Show file tree

Hide file tree

Showing 3 changed files with 41 additions and 0 deletions.
diff --git a/src/ui/Toolbox.ts b/src/ui/Toolbox.ts
@@ -115,6 +115,44 @@ export class Toolbox {
       )
     );
 
+    this.styles.addRule(
+      new StyleRule(
+        `.${this.toolboxPanelRowStyleClass.name} > div`,
+        `
+        scrollbar-width: thin;
+        `
+      )
+    );
+
+    this.styles.addRule(
+      new StyleRule(
+        `.${this.toolboxPanelRowStyleClass.name} > div::-webkit-scrollbar`,
+        `
+      height: 10px;
+      width: 10px;
+    `
+      )
+    );
+
+    this.styles.addRule(
+      new StyleRule(
+        `.${this.toolboxPanelRowStyleClass.name} > div::-webkit-scrollbar-track`,
+        `
+        background-color: transparent;
+        `
+      )
+    );
+
+    this.styles.addRule(
+      new StyleRule(
+        `.${this.toolboxPanelRowStyleClass.name} > div::-webkit-scrollbar-thumb`,
+        `
+        background-color: #444;
+        border-radius: 20px;
+        border: 2px solid #aaa;
+        `
+      )
+    );
   }
 
   /**

diff --git a/src/ui/toolbox-panels/ColorPickerPanel.ts b/src/ui/toolbox-panels/ColorPickerPanel.ts
@@ -45,6 +45,7 @@ export class ColorPickerPanel extends ToolboxPanel {
   public getUi(): HTMLDivElement {
     const panelDiv = document.createElement('div');
     panelDiv.style.overflow = 'hidden';
+    panelDiv.style.overflowX = 'scroll';
     panelDiv.style.whiteSpace = 'nowrap';
     this.colors.forEach((color) => {
       const colorBoxContainer = this.getColorBox(color);

diff --git a/test/manual/index.ts b/test/manual/index.ts
@@ -73,6 +73,8 @@ export class Experiments {
 
       this.markerArea1.settings.defaultColorsFollowCurrentColors = true;
 
+      this.markerArea1.settings.defaultColorSet = ['yellow', 'green','red','yellow', 'green','red','yellow', 'green','red','yellow', 'green','red','yellow', 'green','red','yellow', 'green','red',];
+
       // this.markerArea1.targetRoot = document.getElementById('app');
       // this.markerArea1.settings.uiOffsetTop = -this.markerArea1.styles.settings.toolbarHeight;