diff options
Diffstat (limited to 'src/client/views')
| -rw-r--r-- | src/client/views/MainViewModal.scss | 4 | ||||
| -rw-r--r-- | src/client/views/global/globalCssVariables.scss | 1 | ||||
| -rw-r--r-- | src/client/views/nodes/DocumentLinksButton.scss | 1 | ||||
| -rw-r--r-- | src/client/views/nodes/DocumentLinksButton.tsx | 1 | ||||
| -rw-r--r-- | src/client/views/nodes/button/FontIconBox.tsx | 66 |
5 files changed, 53 insertions, 20 deletions
diff --git a/src/client/views/MainViewModal.scss b/src/client/views/MainViewModal.scss index 5f19590b4..03cb5cc84 100644 --- a/src/client/views/MainViewModal.scss +++ b/src/client/views/MainViewModal.scss @@ -4,6 +4,7 @@ z-index: 10000; width: 100%; height: 100%; + .dialogue-box { position: absolute; z-index: 1000; @@ -11,11 +12,8 @@ justify-content: center; align-self: center; align-content: center; - padding: 20px; - // background: gainsboro; background: white; border-radius: 10px; - border: 0.5px solid black; box-shadow: #00000044 5px 5px 10px; transform: translate(-50%, -50%); top: 50%; diff --git a/src/client/views/global/globalCssVariables.scss b/src/client/views/global/globalCssVariables.scss index 2fd67a8dc..caa9f4fe5 100644 --- a/src/client/views/global/globalCssVariables.scss +++ b/src/client/views/global/globalCssVariables.scss @@ -1,6 +1,7 @@ @import url("https://fonts.googleapis.com/css2?family=Roboto&display=swap"); // colors $white: #ffffff; +$off-white: #fdfdfd; $light-gray: #dfdfdf; $medium-gray: #9f9f9f; $dark-gray: #323232; diff --git a/src/client/views/nodes/DocumentLinksButton.scss b/src/client/views/nodes/DocumentLinksButton.scss index b37b68249..228e1bdcb 100644 --- a/src/client/views/nodes/DocumentLinksButton.scss +++ b/src/client/views/nodes/DocumentLinksButton.scss @@ -50,6 +50,7 @@ width: 80%; height: 80%; font-size: 100%; + font-family: 'Roboto'; transition: 0.2s ease all; &:hover { diff --git a/src/client/views/nodes/DocumentLinksButton.tsx b/src/client/views/nodes/DocumentLinksButton.tsx index 7648e866e..bf9499d1d 100644 --- a/src/client/views/nodes/DocumentLinksButton.tsx +++ b/src/client/views/nodes/DocumentLinksButton.tsx @@ -266,6 +266,7 @@ export class DocumentLinksButton extends React.Component<DocumentLinksButtonProp style={{ backgroundColor: Colors.LIGHT_BLUE, color: Colors.BLACK, + fontSize: "25px", width: btnDim, height: btnDim, }}> diff --git a/src/client/views/nodes/button/FontIconBox.tsx b/src/client/views/nodes/button/FontIconBox.tsx index 7ff3e388f..f78bb6842 100644 --- a/src/client/views/nodes/button/FontIconBox.tsx +++ b/src/client/views/nodes/button/FontIconBox.tsx @@ -106,21 +106,15 @@ export class FontIconBox extends DocComponent<ButtonProps, FontIconDocument>(Fon }; // Script for checking the outcome of the toggle - const checkScript: string = StrCast(this.rootDoc.script) + "(true)"; + const checkScript: string = StrCast(this.rootDoc.script) + "(0, true)"; const checkResult: number = ScriptField.MakeScript(checkScript)?.script.run().result; - const dropdown = - <div - className="menuButton-dropdownBox" - style={{ left: 0 }} - > - {/* DROPDOWN BOX CONTENTS */} - </div>; if (numType === NumButtonType.Slider) { - return ( + const dropdown = <div - className={`menuButton ${this.type} ${numType}`} + className="menuButton-dropdownBox" + style={{ left: 0 }} > <input type="range" step="1" min="0" max="100" value={checkResult} className={"toolbar-slider"} id="duration-slider" @@ -128,29 +122,63 @@ export class FontIconBox extends DocComponent<ButtonProps, FontIconDocument>(Fon onPointerUp={() => { if (this._batch) this._batch.end(); }} onChange={(e: React.ChangeEvent<HTMLInputElement>) => { e.stopPropagation(); setValue(Number(e.target.value)); }} /> + </div>; + return ( + <div + className={`menuButton ${this.type} ${numType}`} + onClick={action(() => this.rootDoc.dropDownOpen = !this.rootDoc.dropDownOpen)} + > + {checkResult} + {dropdown} </div> ); } else if (numType === NumButtonType.DropdownOptions) { + const items: number[] = []; + for (let i = 0; i < 100; i++) { + if (i % 2 === 0) { + items.push(i); + } + } + items.map((value) => { + return <div className="list-item" key={`${value}`} + style={{ + backgroundColor: value === checkResult ? Colors.LIGHT_BLUE : undefined + }} + onClick={() => setValue(value)}> + {value} + </div>; + }); return ( <div className={`menuButton ${this.type} ${numType}`} - onDoubleClick={action(() => this.rootDoc.dropDownOpen = !this.rootDoc.dropDownOpen)} > - <div className="numBtn-subtract"> + <div className="numBtn-subtract" onClick={action((e) => setValue(checkResult - 1))}> <FontAwesomeIcon className={`fontIconBox-icon-${this.type}`} icon={"plus"} /> </div> - <div> + <div + onPointerDown={(e) => e.stopPropagation()} + onDoubleClick={action(() => this.rootDoc.dropDownOpen = !this.rootDoc.dropDownOpen)} + > <input + style={{ width: 100 }} className="input" type="number" value={checkResult} onChange={action((e) => setValue(Number(e.target.value)))} /> </div> - <div className="numBtn-plus"> + <div className="numBtn-plus" onClick={action((e) => setValue(checkResult + 1))}> <FontAwesomeIcon className={`fontIconBox-icon-${this.type}`} icon={"plus"} /> </div> - {this.rootDoc.dropDownOpen ? dropdown : null} + {this.rootDoc.dropDownOpen ? + <div> + <div className="menuButton-dropdownList" + style={{ left: 0 }}> + {items} + </div> + <div className="dropbox-background" onClick={(e) => { e.stopPropagation(); this.rootDoc.dropDownOpen = false; }} /> + </div> : null} + </div> ); } else { @@ -576,9 +604,13 @@ Scripting.addGlobal(function changeFontHighlight(color?: string, checkResult?: b // toggle: Set overlay status of selected document -Scripting.addGlobal(function changeFontSize(size: string) { +Scripting.addGlobal(function changeFontSize(size: string, checkResult?: boolean) { + if (checkResult) { + const size: number = parseInt(StrCast(Doc.UserDoc()._fontSize), 10); + return size; + } console.log(size); - Doc.UserDoc()._fontSize = size; + Doc.UserDoc()._fontSize = size + "px"; }); Scripting.addGlobal(function toggleBold(checkResult?: boolean) { |