width selector

2 files changed, 24 insertions, 5 deletions

diff --git a/src/client/views/ContextMenu.scss b/src/client/views/ContextMenu.scss
index ff6ad526e..23c1942b1 100644
--- a/src/client/views/ContextMenu.scss
+++ b/src/client/views/ContextMenu.scss
@@ -174,6 +174,8 @@
     height: 300px;
     background-color: white;
     border: solid 1px black;
+    color: black;
+    z-index: 99999999;
 
     .top-bar {
         height: 20px;
@@ -195,8 +197,21 @@
     }
 
     .bottom-box{
+        display: flex;
+        flex-direction: row;
+        justify-content: center;
+        align-items: center;
+        gap: 3px;
+        height: 100%;
+        width: 100%;
+
         .width-selector{
-            
+            width: 100px;
+        }
+
+        .max-min-selector{
+            height: 15px;
+            width: 30px;
         }
     }
 }
diff --git a/src/client/views/ContextMenu.tsx b/src/client/views/ContextMenu.tsx
index dca00c2bf..b80d97e81 100644
--- a/src/client/views/ContextMenu.tsx
+++ b/src/client/views/ContextMenu.tsx
@@ -44,8 +44,10 @@ export class ContextMenu extends ObservableReactComponent<{}> {
     @observable _mouseX: number = -1;
     @observable _mouseY: number = -1;
     @observable _shouldDisplay: boolean = false;
-    @observable _displayColorPicker: boolean = false;
+
+    @observable _displayBorderMenu: boolean = false;
     @observable _selectorWidth: number = 0;
+    @observable _widthMinMax: {min: string, max: string} = {min: '1', max: '100'};
 
     constructor(props: any) {
         super(props);
@@ -125,7 +127,7 @@ export class ContextMenu extends ObservableReactComponent<{}> {
     }
 
     @action setColorPickerDisplay = (display: boolean) => {
-        this._displayColorPicker = display;
+        this._displayBorderMenu = display;
     }
 
     static readonly buffer = 20;
@@ -244,7 +246,9 @@ export class ContextMenu extends ObservableReactComponent<{}> {
                 color={StrCast(layoutDoc._layout_borderColor)}
                 />
                 <div className='bottom-box'>
-                    <input className='width-selector' type="range" min="1" max="100" value={this._selectorWidth} id="myRange" onChange={e => {layoutDoc._layout_borderWidth = e.target.value; this._selectorWidth = Number(e.target.value); console.log(layoutDoc._layout_borderWidth)}}/>
+                    <input className='max-min-selector' defaultValue={this._widthMinMax.min} onChange={e => this._widthMinMax.max = e.target.value}/>
+                    <input className='width-selector' type="range" min={this._widthMinMax.min} max={this._widthMinMax.max} value={this._selectorWidth} id="myRange" onChange={e => {layoutDoc._layout_borderWidth = e.target.value; this._selectorWidth = Number(e.target.value); console.log(layoutDoc._layout_borderWidth)}}/>
+                    <input className='max-min-selector' defaultValue={this._widthMinMax.max} onChange={e => this._widthMinMax.max = e.target.value}/>
                 </div>
             </div>
         );
@@ -254,7 +258,7 @@ export class ContextMenu extends ObservableReactComponent<{}> {
         this.itemsNeedSearch && setTimeout(() => this._searchRef.current?.focus());
         return (
             <div>
-                {this._displayColorPicker ? this.colorPicker : null}
+                {this._displayBorderMenu ? this.colorPicker : null}
                 <div
                     className="contextMenu-cont"
                     ref={action((r: any) => {