diff options
author | geireann <60007097+geireann@users.noreply.github.com> | 2021-08-24 08:19:42 -0400 |
---|---|---|
committer | geireann <60007097+geireann@users.noreply.github.com> | 2021-08-24 08:19:42 -0400 |
commit | 44a2517ca0f153e63a75bfdef5e624ac24acaa28 (patch) | |
tree | e0d3d7ee4f66c28e89e61373a7386d3109187d36 | |
parent | 101f04d82e49335fb2a55301a4ef4e7b04f081e6 (diff) |
icon updates
-rw-r--r-- | src/client/util/CurrentUserUtils.ts | 2 | ||||
-rw-r--r-- | src/client/views/nodes/button/FontIconBox.scss | 13 | ||||
-rw-r--r-- | src/client/views/nodes/button/FontIconBox.tsx | 30 |
3 files changed, 28 insertions, 17 deletions
diff --git a/src/client/util/CurrentUserUtils.ts b/src/client/util/CurrentUserUtils.ts index c7aa57ff0..c305a495c 100644 --- a/src/client/util/CurrentUserUtils.ts +++ b/src/client/util/CurrentUserUtils.ts @@ -989,7 +989,7 @@ export class CurrentUserUtils { { title: "Back", toolTip: "Go back", btnType: ButtonType.ClickButton, icon: "arrow-left", click: 'webBack()' }, { title: "Forward", toolTip: "Go forward", btnType: ButtonType.ClickButton, icon: "arrow-right", click: 'webForward()' }, { title: "Reload", toolTip: "Reload webpage", btnType: ButtonType.ClickButton, icon: "redo-alt", click: 'webReload()' }, - { title: "URL", toolTip: "URL", width: 150, btnType: ButtonType.EditableText, icon: "lock", script: 'webSetURL' }, + { title: "URL", toolTip: "URL", width: 150, btnType: ButtonType.EditableText, icon: "lock", ignoreClick: true, script: 'webSetURL' }, ]; return tools; diff --git a/src/client/views/nodes/button/FontIconBox.scss b/src/client/views/nodes/button/FontIconBox.scss index c1f5282d0..b6aa2ba60 100644 --- a/src/client/views/nodes/button/FontIconBox.scss +++ b/src/client/views/nodes/button/FontIconBox.scss @@ -209,6 +209,19 @@ } } + &.editableTxt { + cursor: pointer; + background: transparent; + width: 100%; + height: 100%; + + &:hover { + background-color: $close-red; + } + + + } + &.drpDownBtn { cursor: pointer; background: transparent; diff --git a/src/client/views/nodes/button/FontIconBox.tsx b/src/client/views/nodes/button/FontIconBox.tsx index 46d92cd6e..054e55c56 100644 --- a/src/client/views/nodes/button/FontIconBox.tsx +++ b/src/client/views/nodes/button/FontIconBox.tsx @@ -152,7 +152,6 @@ export class FontIconBox extends DocComponent<ButtonProps, FontIconDocument>(Fon let noviceList: string[] = []; let text: string | undefined; let dropdown = true; - let show = true; let icon: IconProp = "caret-down"; @@ -164,6 +163,8 @@ export class FontIconBox extends DocComponent<ButtonProps, FontIconDocument>(Fon dropdown = false; text = StrCast(selected.Document.type); icon = Doc.toIcon(selected.Document); + } else { + text = "None selected"; } noviceList = [CollectionViewType.Freeform, CollectionViewType.Schema, CollectionViewType.Stacking]; } else if (script === 'changeFont') { @@ -175,8 +176,6 @@ export class FontIconBox extends DocComponent<ButtonProps, FontIconDocument>(Fon } noviceList = ["Roboto", "Times New Roman", "Arial", "Georgia", "Comic Sans MS", "Tahoma", "Impact", "Crimson Text"]; - } else { - show = false; } const items = this.buttonList.map((value) => { @@ -206,7 +205,7 @@ export class FontIconBox extends DocComponent<ButtonProps, FontIconDocument>(Fon return ( <div className={`menuButton ${this.type} ${active}`} - style={{ display: show ? undefined : "none", backgroundColor: this.rootDoc.dropDownOpen ? Colors.MEDIUM_BLUE : backgroundColor, color: color, borderBottomLeftRadius: this.dropdown ? 0 : undefined }} + style={{ backgroundColor: this.rootDoc.dropDownOpen ? Colors.MEDIUM_BLUE : backgroundColor, color: color, borderBottomLeftRadius: this.dropdown ? 0 : undefined }} onClick={dropdown ? () => this.rootDoc.dropDownOpen = !this.rootDoc.dropDownOpen : undefined}> <div className="menuButton-dropdown-header"> {text && text[0].toUpperCase() + text.slice(1)} @@ -269,7 +268,7 @@ export class FontIconBox extends DocComponent<ButtonProps, FontIconDocument>(Fon }; return ( <div className={`menuButton ${this.type} ${active}`} - style={{ display: selectedDoc ? undefined : "none", color: color, borderBottomLeftRadius: this.dropdown ? 0 : undefined }} + style={{ color: color, borderBottomLeftRadius: this.dropdown ? 0 : undefined }} onClick={() => this.rootDoc.dropDownOpen = !this.rootDoc.dropDownOpen} onPointerDown={e => e.stopPropagation()}> <FontAwesomeIcon className={`fontIconBox-icon-${this.type}`} icon={this.icon} color={color} /> @@ -315,9 +314,16 @@ 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 ? + !switchToggle ? + <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> : <div> <label className="switch"> <input type="checkbox" @@ -327,14 +333,6 @@ export class FontIconBox extends DocComponent<ButtonProps, FontIconDocument>(Fon <span className="slider round"></span> </label> </div> - : - <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> ); } @@ -365,7 +363,7 @@ export class FontIconBox extends DocComponent<ButtonProps, FontIconDocument>(Fon }; return <div className={`menuButton ${this.type}`}> - TEST + <FontAwesomeIcon className={`fontIconBox-icon-${this.type}`} icon={this.icon} /> <EditableView GetValue={() => ""} SetValue={setValue} contents="..."> </EditableView> </div>; |