diff options
Diffstat (limited to 'src/client/views/nodes')
| -rw-r--r-- | src/client/views/nodes/button/FontIconBox.scss | 177 | ||||
| -rw-r--r-- | src/client/views/nodes/button/FontIconBox.tsx | 85 |
2 files changed, 162 insertions, 100 deletions
diff --git a/src/client/views/nodes/button/FontIconBox.scss b/src/client/views/nodes/button/FontIconBox.scss index b6aa2ba60..7a6887d38 100644 --- a/src/client/views/nodes/button/FontIconBox.scss +++ b/src/client/views/nodes/button/FontIconBox.scss @@ -52,6 +52,71 @@ &.tglBtn { cursor: pointer; + &.switch { + //TOGGLE + + .switch { + position: relative; + display: inline-block; + width: 100%; + height: 25px; + margin: 0; + } + + .switch input { + opacity: 0; + width: 0; + height: 0; + } + + .slider { + position: absolute; + cursor: pointer; + top: 0; + left: 0; + right: 0; + bottom: 0; + background-color: lightgrey; + -webkit-transition: .4s; + transition: .4s; + } + + .slider:before { + position: absolute; + content: ""; + height: 21px; + width: 21px; + left: 2px; + bottom: 2px; + background-color: $white; + -webkit-transition: .4s; + transition: .4s; + } + + input:checked+.slider { + background-color: $medium-blue; + } + + input:focus+.slider { + box-shadow: 0 0 1px $medium-blue; + } + + input:checked+.slider:before { + -webkit-transform: translateX(26px); + -ms-transform: translateX(26px); + transform: translateX(26px); + } + + /* Rounded sliders */ + .slider.round { + border-radius: $standard-border-radius; + } + + .slider.round:before { + border-radius: $standard-border-radius; + } + } + svg { width: 50% !important; height: 50%; @@ -115,7 +180,7 @@ } &.drpdownList { - width: 100px; + width: 100%; display: grid; grid-auto-columns: 80px 20px; justify-items: center; @@ -165,7 +230,16 @@ cursor: pointer; background: transparent; + &:hover { + background-color: rgba(0, 0, 0, 0.3) !important; + } + &.slider { + color: $white; + cursor: pointer; + flex-direction: column; + background: transparent; + .numberBtn-slider {} .menuButton-dropdownBox { @@ -180,11 +254,43 @@ } } - &.dropdown { + .button { + width: 30%; + display: flex; + align-items: center; + justify-content: center; + + &.number { + width: 40%; + + .button-input { + background: none; + border: none; + text-align: right; + width: 100%; + color: black; + height: 100%; + text-align: center; + } + + .button-input:focus { + outline: none; + } + } + } + + &.list { + width: 100%; + justify-content: space-around; + border: $standard-border; + .menuButton-dropdownList { position: absolute; width: fit-content; height: fit-content; + min-width: 50px; + max-height: 50vh; + overflow: scroll; top: 100%; z-index: 21; background-color: $white; @@ -197,9 +303,8 @@ height: 25px; font-weight: 400; display: flex; - justify-content: left; + justify-content: center; align-items: center; - padding-left: 5px; } .list-item:hover { @@ -219,7 +324,6 @@ background-color: $close-red; } - } &.drpDownBtn { @@ -274,67 +378,4 @@ position: fixed; } -} - - -//TOGGLE - -.switch { - position: relative; - display: inline-block; - width: 50px; - height: 25px; -} - -.switch input { - opacity: 0; - width: 0; - height: 0; -} - -.slider { - position: absolute; - cursor: pointer; - top: 0; - left: 0; - right: 0; - bottom: 0; - background-color: lightgrey; - -webkit-transition: .4s; - transition: .4s; -} - -.slider:before { - position: absolute; - content: ""; - height: 22px; - width: 22px; - left: 4px; - bottom: 4px; - background-color: white; - -webkit-transition: .4s; - transition: .4s; -} - -input:checked+.slider { - background-color: $medium-blue; -} - -input:focus+.slider { - box-shadow: 0 0 1px $medium-blue; -} - -input:checked+.slider:before { - -webkit-transform: translateX(26px); - -ms-transform: translateX(26px); - transform: translateX(26px); -} - -/* Rounded sliders */ -.slider.round { - border-radius: $standard-border-radius; -} - -.slider.round:before { - border-radius: $standard-border-radius; }
\ No newline at end of file diff --git a/src/client/views/nodes/button/FontIconBox.tsx b/src/client/views/nodes/button/FontIconBox.tsx index f78bb6842..4778c2f10 100644 --- a/src/client/views/nodes/button/FontIconBox.tsx +++ b/src/client/views/nodes/button/FontIconBox.tsx @@ -44,7 +44,7 @@ export enum ButtonType { export enum NumButtonType { Slider = "slider", - DropdownOptions = "dropdown", + DropdownOptions = "list", Inline = "inline" } @@ -98,7 +98,7 @@ export class FontIconBox extends DocComponent<ButtonProps, FontIconDocument>(Fon * Number button */ @computed get numberButton() { - const numType: string = StrCast(this.rootDoc.numType); + const numBtnType: string = StrCast(this.rootDoc.numBtnType); const setValue = (value: number) => { // Script for running the toggle const script: string = StrCast(this.rootDoc.script) + "(" + value + ")"; @@ -110,14 +110,14 @@ export class FontIconBox extends DocComponent<ButtonProps, FontIconDocument>(Fon const checkResult: number = ScriptField.MakeScript(checkScript)?.script.run().result; - if (numType === NumButtonType.Slider) { + if (numBtnType === NumButtonType.Slider) { const dropdown = <div className="menuButton-dropdownBox" style={{ left: 0 }} > <input type="range" step="1" min="0" max="100" value={checkResult} - className={"toolbar-slider"} id="duration-slider" + className={"menu-slider"} id="slider" onPointerDown={() => { this._batch = UndoManager.StartBatch("presDuration"); }} onPointerUp={() => { if (this._batch) this._batch.end(); }} onChange={(e: React.ChangeEvent<HTMLInputElement>) => { e.stopPropagation(); setValue(Number(e.target.value)); }} @@ -125,21 +125,21 @@ export class FontIconBox extends DocComponent<ButtonProps, FontIconDocument>(Fon </div>; return ( <div - className={`menuButton ${this.type} ${numType}`} + className={`menuButton ${this.type} ${numBtnType}`} onClick={action(() => this.rootDoc.dropDownOpen = !this.rootDoc.dropDownOpen)} > {checkResult} - {dropdown} + {this.rootDoc.dropDownOpen ? dropdown : null} </div> ); - } else if (numType === NumButtonType.DropdownOptions) { + } else if (numBtnType === NumButtonType.DropdownOptions) { const items: number[] = []; for (let i = 0; i < 100; i++) { if (i % 2 === 0) { items.push(i); } } - items.map((value) => { + const list = items.map((value) => { return <div className="list-item" key={`${value}`} style={{ backgroundColor: value === checkResult ? Colors.LIGHT_BLUE : undefined @@ -150,31 +150,35 @@ export class FontIconBox extends DocComponent<ButtonProps, FontIconDocument>(Fon }); return ( <div - className={`menuButton ${this.type} ${numType}`} + className={`menuButton ${this.type} ${numBtnType}`} > - <div className="numBtn-subtract" onClick={action((e) => setValue(checkResult - 1))}> - <FontAwesomeIcon className={`fontIconBox-icon-${this.type}`} icon={"plus"} /> + <div className={`button`} onClick={action((e) => setValue(checkResult - 1))}> + <FontAwesomeIcon className={`fontIconBox-icon-${this.type}`} icon={"minus"} /> </div> <div - onPointerDown={(e) => e.stopPropagation()} + className={`button ${'number'}`} + onPointerDown={(e) => { + e.stopPropagation(); + e.preventDefault(); + }} onDoubleClick={action(() => this.rootDoc.dropDownOpen = !this.rootDoc.dropDownOpen)} > <input - style={{ width: 100 }} - className="input" + style={{ width: 30 }} + className="button-input" type="number" value={checkResult} onChange={action((e) => setValue(Number(e.target.value)))} /> </div> - <div className="numBtn-plus" onClick={action((e) => setValue(checkResult + 1))}> + <div className={`button`} onClick={action((e) => setValue(checkResult + 1))}> <FontAwesomeIcon className={`fontIconBox-icon-${this.type}`} icon={"plus"} /> </div> {this.rootDoc.dropDownOpen ? <div> <div className="menuButton-dropdownList" style={{ left: 0 }}> - {items} + {list} </div> <div className="dropbox-background" onClick={(e) => { e.stopPropagation(); this.rootDoc.dropDownOpen = false; }} /> </div> : null} @@ -396,17 +400,12 @@ export class FontIconBox extends DocComponent<ButtonProps, FontIconDocument>(Fon <div className="fontIconBox-label" style={{ color: color, backgroundColor: backgroundColor, position: "absolute" }}> {this.label} </div>; - console.log("switchToggle"); - return ( - !switchToggle ? - <div className={`menuButton ${this.type}`} - style={{ opacity: 1, backgroundColor: checkResult ? Colors.MEDIUM_BLUE : "transparent" }} - onClick={this.layoutDoc.ignoreClick ? runScript : undefined} + console.log("switchToggle", switchToggle); + if (switchToggle) { + return ( + <div className={`menuButton ${this.type} ${'switch'}`} + onClick={runScript} > - <FontAwesomeIcon className={`fontIconBox-icon-${this.type}`} icon={this.icon} color={checkResult ? Colors.LIGHT_GRAY : Colors.LIGHT_GRAY} /> - {label} - </div> : - <div> <label className="switch"> <input type="checkbox" checked={checkResult} @@ -415,7 +414,18 @@ export class FontIconBox extends DocComponent<ButtonProps, FontIconDocument>(Fon <span className="slider round"></span> </label> </div> - ); + ); + } else { + return ( + <div className={`menuButton ${this.type}`} + style={{ opacity: 1, backgroundColor: checkResult ? Colors.MEDIUM_BLUE : "transparent" }} + onClick={this.layoutDoc.ignoreClick ? runScript : undefined} + > + <FontAwesomeIcon className={`fontIconBox-icon-${this.type}`} icon={this.icon} color={checkResult ? Colors.LIGHT_GRAY : Colors.LIGHT_GRAY} /> + {label} + </div> + ); + } } @@ -444,11 +454,13 @@ export class FontIconBox extends DocComponent<ButtonProps, FontIconDocument>(Fon return true; }; - return <div className={`menuButton ${this.type}`}> - <FontAwesomeIcon className={`fontIconBox-icon-${this.type}`} icon={this.icon} /> - <EditableView GetValue={() => ""} SetValue={setValue} contents="..."> - </EditableView> - </div>; + return ( + <div className={`menuButton ${this.type}`}> + <FontAwesomeIcon className={`fontIconBox-icon-${this.type}`} icon={"lock"} /> + <EditableView GetValue={() => ""} SetValue={setValue} contents="..."> + </EditableView> + </div> + ); } @@ -649,4 +661,13 @@ Scripting.addGlobal(function setActiveInkTool(tool: InkTool, checkResult?: boole } else { Doc.UserDoc().activeInkTool = InkTool.None; } +}); + +Scripting.addGlobal(function setStrokeWidth(width: number, checkResult?: boolean) { + if (checkResult) { + const width: number = NumCast(Doc.UserDoc().activeInkWidth); + return width; + } + console.log("[width]: " + width); + Doc.UserDoc().activeInkWidth = width; });
\ No newline at end of file |