From 325d3a8c931cb9ff7eadfa29603a3c7ca747911b Mon Sep 17 00:00:00 2001 From: geireann <60007097+geireann@users.noreply.github.com> Date: Tue, 24 Aug 2021 18:10:13 -0400 Subject: css changes for toggle button --- src/client/documents/Documents.ts | 4 + src/client/util/CurrentUserUtils.ts | 15 ++- src/client/views/nodes/button/FontIconBox.scss | 177 +++++++++++++++---------- src/client/views/nodes/button/FontIconBox.tsx | 85 +++++++----- 4 files changed, 176 insertions(+), 105 deletions(-) (limited to 'src') diff --git a/src/client/documents/Documents.ts b/src/client/documents/Documents.ts index 63acd004f..0b33943d6 100644 --- a/src/client/documents/Documents.ts +++ b/src/client/documents/Documents.ts @@ -224,6 +224,10 @@ export class DocumentOptions { userColorBtn?: string; canClick?: string; script?: string; + numBtnType?: string; + numBtnMax?: number; + numBtnMin?: number; + switchToggle?: boolean; //LINEAR VIEW linearViewIsExpanded?: boolean; // is linear view expanded diff --git a/src/client/util/CurrentUserUtils.ts b/src/client/util/CurrentUserUtils.ts index 73a66332f..8044f59f0 100644 --- a/src/client/util/CurrentUserUtils.ts +++ b/src/client/util/CurrentUserUtils.ts @@ -46,7 +46,9 @@ interface Button { icon?: string; btnType?: ButtonType; click?: string; - numType?: NumButtonType; + numBtnType?: NumButtonType; + numBtnMin?: number; + numBtnMax?: number; switchToggle?: boolean; script?: string; width?: number; @@ -946,7 +948,7 @@ export class CurrentUserUtils { "Comic Sans MS", "Tahoma", "Impact", "Crimson Text"], script: 'changeFont' }, - { title: "Font size", toolTip: "Font size", btnType: ButtonType.NumberButton, numType: NumButtonType.DropdownOptions, ignoreClick: true, script: 'changeFontSize'}, + { title: "Font size", toolTip: "Font size", width: 75, btnType: ButtonType.NumberButton, numBtnMax: 200, numBtnMin: 0, numBtnType: NumButtonType.DropdownOptions, ignoreClick: true, script: 'changeFontSize'}, { title: "Bold", toolTip: "Bold (Ctrl+B)", btnType: ButtonType.ToggleButton, icon: "bold", click: 'toggleBold()', script: 'toggleBold' }, { title: "Italic", toolTip: "Italic (Ctrl+I)", btnType: ButtonType.ToggleButton, icon: "italic", click: 'toggleItalic()', script: 'toggleItalic' }, { title: "Underline", toolTip: "Underline (Ctrl+U)", btnType: ButtonType.ToggleButton, icon: "underline", click: 'toggleUnderline()', script: 'toggleUnderline' }, @@ -970,7 +972,7 @@ export class CurrentUserUtils { { title: "Circle", toolTip: "Circle (Ctrl+Shift+C)", btnType: ButtonType.ToggleButton, icon: "circle", click: 'setActiveInkTool("circle")' }, { title: "Square", toolTip: "Square (Ctrl+Shift+S)", btnType: ButtonType.ToggleButton, icon: "square", click: 'setActiveInkTool("square")' }, { title: "Line", toolTip: "Line (Ctrl+Shift+L)", btnType: ButtonType.ToggleButton, icon: "fill-drip", click: 'setActiveInkTool("line")' }, - { title: "Stroke width", toolTip: "Stroke width", width:75, btnType: ButtonType.NumberButton, numType: NumButtonType.Slider, ignoreClick: true, script: 'setLineWidth'}, + { title: "Stroke width", toolTip: "Stroke width", btnType: ButtonType.NumberButton, numBtnType: NumButtonType.Slider, ignoreClick: true, script: 'setStrokeWidth'}, ]; return tools; } @@ -982,6 +984,7 @@ export class CurrentUserUtils { title: "Show preview", toolTip: "Show preview of selected document", btnType: ButtonType.ToggleButton, + width: 50, switchToggle: true, icon: "eye", click: 'toggleSchemaShow()', @@ -1050,9 +1053,10 @@ export class CurrentUserUtils { tools = CurrentUserUtils.textTools(doc); break; default: + tools = CurrentUserUtils.textTools(doc); break; } - tools.map(({ title, toolTip, icon, btnType, numType, click, script, width, list, ignoreClick }) => { + tools.map(({ title, toolTip, icon, btnType, numBtnType, click, script, width, list, ignoreClick, switchToggle }) => { menuDocList.push(Docs.Create.FontIconDocument({ _nativeWidth: width ? width : 25, _nativeHeight: 25, @@ -1060,7 +1064,7 @@ export class CurrentUserUtils { _height: 25, icon, toolTip, - numType, + numBtnType, script, btnType: btnType, btnList: new List(list), @@ -1070,6 +1074,7 @@ export class CurrentUserUtils { system: true, dontUndo: true, title, + switchToggle, color: Colors.WHITE, backgroundColor: "transparent", _dropAction: "alias", 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(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(Fon const checkResult: number = ScriptField.MakeScript(checkScript)?.script.run().result; - if (numType === NumButtonType.Slider) { + if (numBtnType === NumButtonType.Slider) { const dropdown =
{ this._batch = UndoManager.StartBatch("presDuration"); }} onPointerUp={() => { if (this._batch) this._batch.end(); }} onChange={(e: React.ChangeEvent) => { e.stopPropagation(); setValue(Number(e.target.value)); }} @@ -125,21 +125,21 @@ export class FontIconBox extends DocComponent(Fon
; return (
this.rootDoc.dropDownOpen = !this.rootDoc.dropDownOpen)} > {checkResult} - {dropdown} + {this.rootDoc.dropDownOpen ? dropdown : null}
); - } 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
(Fon }); return (
-
setValue(checkResult - 1))}> - +
setValue(checkResult - 1))}> +
e.stopPropagation()} + className={`button ${'number'}`} + onPointerDown={(e) => { + e.stopPropagation(); + e.preventDefault(); + }} onDoubleClick={action(() => this.rootDoc.dropDownOpen = !this.rootDoc.dropDownOpen)} > setValue(Number(e.target.value)))} />
-
setValue(checkResult + 1))}> +
setValue(checkResult + 1))}>
{this.rootDoc.dropDownOpen ?
- {items} + {list}
{ e.stopPropagation(); this.rootDoc.dropDownOpen = false; }} />
: null} @@ -396,17 +400,12 @@ export class FontIconBox extends DocComponent(Fon
{this.label}
; - console.log("switchToggle"); - return ( - !switchToggle ? -
- - {label} -
: -
- ); + ); + } else { + return ( +
+ + {label} +
+ ); + } } @@ -444,11 +454,13 @@ export class FontIconBox extends DocComponent(Fon return true; }; - return
- - ""} SetValue={setValue} contents="..."> - -
; + return ( +
+ + ""} SetValue={setValue} contents="..."> + +
+ ); } @@ -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 -- cgit v1.2.3-70-g09d2