Add toggles input component
This commit is contained in:
parent
212c149b34
commit
47e3c973fb
63
source/Component/TogglesInput/TogglesInput.scss
Normal file
63
source/Component/TogglesInput/TogglesInput.scss
Normal file
@ -0,0 +1,63 @@
|
||||
@import "../Theme/Theme.scss";
|
||||
|
||||
$line-min-height: 26px;
|
||||
|
||||
div.toggles-input {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
min-height: $line-min-height;
|
||||
padding: 5px 0;
|
||||
|
||||
div.toggles-intro {
|
||||
width: 50%;
|
||||
height: 100%;
|
||||
max-width: 220px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding-right: 5px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
div.toggles-content {
|
||||
width: 50%;
|
||||
height: 100%;
|
||||
max-width: 180px;
|
||||
min-height: $line-min-height;
|
||||
|
||||
div.checkbox {
|
||||
width: $line-min-height;
|
||||
height: $line-min-height;
|
||||
overflow: hidden;
|
||||
border-radius: 3px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
cursor: pointer;
|
||||
user-select: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
div.dark.toggles-input {
|
||||
|
||||
div.toggles-content div.checkbox {
|
||||
background-color: $lt-bg-color-lvl3-dark;
|
||||
color: $lt-font-color-normal-dark;
|
||||
}
|
||||
|
||||
div.toggles-content div.checkbox:hover {
|
||||
background-color: $lt-bg-color-lvl2-dark;
|
||||
}
|
||||
}
|
||||
|
||||
div.light.toggles-input {
|
||||
|
||||
div.toggles-content div.checkbox {
|
||||
background-color: $lt-bg-color-lvl3-light;
|
||||
color: $lt-font-color-normal-light;
|
||||
}
|
||||
|
||||
div.toggles-content div.checkbox:hover {
|
||||
background-color: $lt-bg-color-lvl2-light;
|
||||
}
|
||||
}
|
||||
45
source/Component/TogglesInput/TogglesInput.tsx
Normal file
45
source/Component/TogglesInput/TogglesInput.tsx
Normal file
@ -0,0 +1,45 @@
|
||||
import { AllI18nKeys, Localization } from "@Component/Localization/Localization";
|
||||
import { Theme } from "@Component/Theme/Theme";
|
||||
import { Icon } from "@fluentui/react";
|
||||
import { Component, ReactNode } from "react";
|
||||
import "./TogglesInput.scss";
|
||||
|
||||
interface ITogglesInputProps {
|
||||
keyI18n: AllI18nKeys;
|
||||
infoI18n?: AllI18nKeys;
|
||||
value?: boolean;
|
||||
disable?: boolean;
|
||||
valueChange?: (color: boolean) => any;
|
||||
}
|
||||
|
||||
class TogglesInput extends Component<ITogglesInputProps> {
|
||||
public render(): ReactNode {
|
||||
return <Theme className="toggles-input">
|
||||
<div className="toggles-intro">
|
||||
<Localization i18nKey={this.props.keyI18n}/>
|
||||
</div>
|
||||
<div className="toggles-content">
|
||||
<div
|
||||
className="checkbox"
|
||||
style={{
|
||||
cursor: this.props.disable ? "not-allowed" : "pointer"
|
||||
}}
|
||||
onClick={(() => {
|
||||
if (this.props.disable) {
|
||||
return;
|
||||
}
|
||||
if (this.props.valueChange) {
|
||||
this.props.valueChange(!this.props.value);
|
||||
}
|
||||
})}
|
||||
>
|
||||
<Icon iconName="CheckMark" style={{
|
||||
display: this.props.value ? "inline-block" : "none"
|
||||
}}></Icon>
|
||||
</div>
|
||||
</div>
|
||||
</Theme>
|
||||
}
|
||||
}
|
||||
|
||||
export { TogglesInput };
|
||||
@ -42,6 +42,7 @@ const EN_US = {
|
||||
"Common.Attr.Key.Radius.Y": "Radius Y",
|
||||
"Common.Attr.Key.Radius.Z": "Radius Z",
|
||||
"Common.Attr.Key.Color": "Color",
|
||||
"Common.Attr.Key.Display": "Display",
|
||||
"Common.Attr.Key.Error.Multiple": "Multiple values",
|
||||
"Panel.Info.Range.Details.Attr.Error.Not.Range": "Object is not a Range",
|
||||
"Panel.Info.Range.Details.Attr.Error.Unspecified": "Unspecified range object",
|
||||
|
||||
@ -42,6 +42,7 @@ const ZH_CN = {
|
||||
"Common.Attr.Key.Radius.Y": "Y 半径",
|
||||
"Common.Attr.Key.Radius.Z": "Z 半径",
|
||||
"Common.Attr.Key.Color": "颜色",
|
||||
"Common.Attr.Key.Display": "显示",
|
||||
"Common.Attr.Key.Error.Multiple": "多重数值",
|
||||
"Panel.Info.Range.Details.Attr.Error.Not.Range": "对象不是一个范围",
|
||||
"Panel.Info.Range.Details.Attr.Error.Unspecified": "未指定范围对象",
|
||||
|
||||
@ -5,6 +5,7 @@ import { AllI18nKeys } from "@Component/Localization/Localization";
|
||||
import { Range } from "@Model/Range";
|
||||
import { ObjectID } from "@Model/Renderer";
|
||||
import { ColorInput } from "@Component/ColorInput/ColorInput";
|
||||
import { TogglesInput } from "@Component/TogglesInput/TogglesInput";
|
||||
import "./RangeDetails.scss";
|
||||
|
||||
@useStatusWithEvent("rangeAttrChange", "focusObjectChange")
|
||||
@ -12,6 +13,7 @@ class RangeDetails extends Component<IMixinStatusProps> {
|
||||
|
||||
public readonly AttrI18nKey: AllI18nKeys[] = [
|
||||
"Common.Attr.Key.Display.Name",
|
||||
"Common.Attr.Key.Display",
|
||||
"Common.Attr.Key.Color",
|
||||
"Common.Attr.Key.Position.X",
|
||||
"Common.Attr.Key.Position.Y",
|
||||
@ -55,40 +57,48 @@ class RangeDetails extends Component<IMixinStatusProps> {
|
||||
}
|
||||
|
||||
private renderFrom(range: Range) {
|
||||
// console.log(range);
|
||||
|
||||
let keyIndex = 0;
|
||||
|
||||
return <>
|
||||
{this.renderAttrInput(range.id, 0, range.displayName, (val, status) => {
|
||||
{this.renderAttrInput(range.id, keyIndex ++, range.displayName, (val, status) => {
|
||||
status.changeRangeAttrib(range.id, "displayName", val);
|
||||
})}
|
||||
|
||||
<TogglesInput keyI18n={this.AttrI18nKey[keyIndex ++]} value={range.display} valueChange={(val) => {
|
||||
if (this.props.status) {
|
||||
this.props.status.changeRangeAttrib(range.id, "display", val);
|
||||
}
|
||||
}}/>
|
||||
|
||||
<ColorInput keyI18n="Common.Attr.Key.Color" value={range.color} normal valueChange={(color) => {
|
||||
<ColorInput keyI18n={this.AttrI18nKey[keyIndex ++]} value={range.color} normal valueChange={(color) => {
|
||||
if (this.props.status) {
|
||||
this.props.status.changeRangeAttrib(range.id, "color", color);
|
||||
}
|
||||
}}/>
|
||||
|
||||
{this.renderAttrInput(range.id, 2, range.position[0], (val, status) => {
|
||||
{this.renderAttrInput(range.id, keyIndex ++, range.position[0], (val, status) => {
|
||||
range.position[0] = (val as any) / 1;
|
||||
status.changeRangeAttrib(range.id, "position", range.position);
|
||||
}, .1)}
|
||||
{this.renderAttrInput(range.id, 3, range.position[1], (val, status) => {
|
||||
{this.renderAttrInput(range.id, keyIndex ++, range.position[1], (val, status) => {
|
||||
range.position[1] = (val as any) / 1;
|
||||
status.changeRangeAttrib(range.id, "position", range.position);
|
||||
}, .1)}
|
||||
{this.renderAttrInput(range.id, 4, range.position[2], (val, status) => {
|
||||
{this.renderAttrInput(range.id, keyIndex ++, range.position[2], (val, status) => {
|
||||
range.position[2] = (val as any) / 1;
|
||||
status.changeRangeAttrib(range.id, "position", range.position);
|
||||
}, .1)}
|
||||
|
||||
{this.renderAttrInput(range.id, 5, range.radius[0], (val, status) => {
|
||||
{this.renderAttrInput(range.id, keyIndex ++, range.radius[0], (val, status) => {
|
||||
range.radius[0] = (val as any) / 1;
|
||||
status.changeRangeAttrib(range.id, "radius", range.radius);
|
||||
}, .1, undefined, 0)}
|
||||
{this.renderAttrInput(range.id, 6, range.radius[1], (val, status) => {
|
||||
{this.renderAttrInput(range.id, keyIndex ++, range.radius[1], (val, status) => {
|
||||
range.radius[1] = (val as any) / 1;
|
||||
status.changeRangeAttrib(range.id, "radius", range.radius);
|
||||
}, .1, undefined, 0)}
|
||||
{this.renderAttrInput(range.id, 7, range.radius[2], (val, status) => {
|
||||
{this.renderAttrInput(range.id, keyIndex ++, range.radius[2], (val, status) => {
|
||||
range.radius[2] = (val as any) / 1;
|
||||
status.changeRangeAttrib(range.id, "radius", range.radius);
|
||||
}, .1, undefined, 0)}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user