aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
Diffstat
-rw-r--r--src/client/documents/Documents.ts4
-rw-r--r--src/client/util/CurrentUserUtils.ts15
-rw-r--r--src/client/views/nodes/button/FontIconBox.scss177
-rw-r--r--src/client/views/nodes/button/FontIconBox.tsx85
4 files changed, 176 insertions, 105 deletions
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<string>(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<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
generated by cgit v1.2.3-70-g09d2 (git 2.46.0) at 2025-10-08 20:30:50 +0000