diff --git a/source/Component/AttrInput/AttrInput.scss b/source/Component/AttrInput/AttrInput.scss index 727a96e..f578672 100644 --- a/source/Component/AttrInput/AttrInput.scss +++ b/source/Component/AttrInput/AttrInput.scss @@ -1,7 +1,6 @@ @import "../Theme/Theme.scss"; -$line-min-height: 24px; -$root-min-height: 26px; +$line-min-height: 26px; div.attr-input { width: 100%; @@ -23,7 +22,7 @@ div.attr-input { width: 50%; height: 100%; max-width: 180px; - min-height: $root-min-height; + min-height: $line-min-height; div.input-content { box-sizing: border-box; @@ -33,14 +32,13 @@ div.attr-input { display: flex; justify-content: space-between; align-items: center; - min-height: $root-min-height; + height: $line-min-height; input { width: 100%; height: 100%; border: none; outline:none; - min-height: $line-min-height; }; input:focus { @@ -73,17 +71,35 @@ div.attr-input { padding-top: 5px; min-height: $line-min-height; } + + div.error-view { + border-radius: 3px; + overflow: hidden; + display: flex; + align-items: center; + height: $line-min-height; + text-overflow: ellipsis; + word-wrap: none; + word-break: keep-all; + white-space: nowrap; + cursor:not-allowed; + + span { + padding-left: 8px; + } + } } } div.dark.attr-input { - div.input-content, + div.input-content, div.error-view, div.input-content input { background-color: $lt-bg-color-lvl3-dark; color: $lt-font-color-normal-dark; } + div.error-view:hover, div.button-left:hover, div.button-right:hover { background-color: $lt-bg-color-lvl2-dark; } @@ -91,12 +107,13 @@ div.dark.attr-input { div.light.attr-input { - div.input-content, + div.input-content, div.error-view, div.input-content input { background-color: $lt-bg-color-lvl3-light; color: $lt-font-color-normal-light; } + div.error-view:hover, div.button-left:hover, div.button-right:hover { background-color: $lt-bg-color-lvl2-light; } diff --git a/source/Component/AttrInput/AttrInput.tsx b/source/Component/AttrInput/AttrInput.tsx index 52c26ba..c496140 100644 --- a/source/Component/AttrInput/AttrInput.tsx +++ b/source/Component/AttrInput/AttrInput.tsx @@ -153,6 +153,16 @@ class AttrInput extends Component { this.error = this.check(value.toString()); } + private renderErrorInput() { + return
+ { + this.props.disableI18n ? + : + {this.props.value} + } +
+ } + public render(): ReactNode { return {
{ this.props.disable ? - this.props.disableI18n ? - : -
{this.props.value}
: + this.renderErrorInput() : this.renderInput() }
diff --git a/source/Component/ColorInput/ColorInput.scss b/source/Component/ColorInput/ColorInput.scss new file mode 100644 index 0000000..7f8706f --- /dev/null +++ b/source/Component/ColorInput/ColorInput.scss @@ -0,0 +1,90 @@ +@import "../Theme/Theme.scss"; + +$line-min-height: 26px; + +div.color-input-root { + width: 100%; + display: flex; + min-height: $line-min-height; + padding: 5px 0; + + div.input-intro { + width: 50%; + height: 100%; + max-width: 220px; + display: flex; + align-items: center; + padding-right: 5px; + box-sizing: border-box; + } + + div.root-content { + width: 50%; + height: 100%; + max-width: 180px; + min-height: $line-min-height; + border-radius: 3px; + overflow: hidden; + display: flex; + + div.color-view { + width: $line-min-height; + max-width: $line-min-height; + display: flex; + justify-content: center; + align-items: center; + + div.color-box { + width: 12px; + height: 12px; + } + } + + div.value-view { + width: 100%; + height: 100%; + min-height: $line-min-height; + display: flex; + align-items: center; + + div.text-box { + padding-left: 5px; + } + } + + div.error-box { + display: flex; + align-items: center; + padding-left: 8px; + } + } +} + +div.dark.color-input-root { + + div.root-content { + background-color: $lt-bg-color-lvl3-dark; + color: $lt-font-color-normal-dark; + } + + div.root-content:hover { + background-color: $lt-bg-color-lvl2-dark; + } +} + +div.light.color-input-root { + + div.root-content { + background-color: $lt-bg-color-lvl3-light; + color: $lt-font-color-normal-light; + } + + div.root-content:hover { + background-color: $lt-bg-color-lvl2-light; + } +} + +div.color-picker-root { + width: 300px; + height: 340px; +} \ No newline at end of file diff --git a/source/Component/ColorInput/ColorInput.tsx b/source/Component/ColorInput/ColorInput.tsx new file mode 100644 index 0000000..febf0fb --- /dev/null +++ b/source/Component/ColorInput/ColorInput.tsx @@ -0,0 +1,133 @@ +import { Component, createRef, ReactNode } from "react"; +import { FontLevel, Theme } from "@Component/Theme/Theme"; +import { Callout, ColorPicker, DirectionalHint } from "@fluentui/react"; +import { AllI18nKeys, Localization } from "@Component/Localization/Localization"; +import "./ColorInput.scss"; + +interface IColorInputProps { + keyI18n: AllI18nKeys; + infoI18n?: AllI18nKeys; + value?: number[]; + normal?: boolean; + disable?: boolean; + disableI18n?: AllI18nKeys; + valueChange?: (color: number[]) => any; +} + +interface IColorInputState { + isPickerVisible: boolean; +} + +class ColorInput extends Component { + + public constructor(props: IColorInputProps) { + super(props); + this.state = { + isPickerVisible: false + } + } + + private pickerTarget = createRef(); + + private renderPicker() { + return { + this.setState({ + isPickerVisible: false + }) + }} + > +
+ { + if (this.props.valueChange) { + if (this.props.normal) { + this.props.valueChange([ + color.r / 255, + color.g / 255, + color.b / 255, + ]) + } else { + this.props.valueChange([ + color.r, + color.g, + color.b, + ]) + } + } + }} + /> +
+ + } + + private renderErrorInput() { + return
+ { + this.props.disableI18n ? + : + {this.props.value} + } +
; + } + + private renderColorInput() { + return <> +
+
+
+
+
{this.getColorString(true)}
+
+ ; + } + + private getColorString(display?: boolean) { + let color: number[] = this.props.value?.concat([]) ?? [0, 0, 0]; + if (this.props.normal) { + color[0] = Math.round(color[0] * 255); + color[1] = Math.round(color[1] * 255); + color[2] = Math.round(color[2] * 255); + } + if (display) { + return `rgb ( ${color[0] ?? 0}, ${color[1] ?? 0}, ${color[2] ?? 0} )`; + } else { + return `rgb(${color[0] ?? 0},${color[1] ?? 0},${color[2] ?? 0})`; + } + } + + public render(): ReactNode { + return <> + +
+ +
+
{ + this.setState({ + isPickerVisible: !this.props.disable + }) + }} + > + { this.props.disable ? null : this.renderColorInput() } + { this.props.disable ? this.renderErrorInput() : null } +
+ + + {this.state.isPickerVisible ? this.renderPicker(): null} + + } +} + +export { ColorInput }; \ No newline at end of file diff --git a/source/Component/DetailsList/DetailsList.scss b/source/Component/DetailsList/DetailsList.scss index c9a6d31..d98dcbb 100644 --- a/source/Component/DetailsList/DetailsList.scss +++ b/source/Component/DetailsList/DetailsList.scss @@ -39,7 +39,7 @@ div.details-list { div.light.details-list { div.details-list-item:nth-child(2n-1) { - background-color: rgba($lt-bg-color-lvl5-light, .4); + background-color: rgba($lt-bg-color-lvl5-light, .3); } div.details-list-item:hover { @@ -59,7 +59,7 @@ div.light.details-list { div.dark.details-list { div.details-list-item:nth-child(2n-1) { - background-color: rgba($lt-bg-color-lvl5-dark, .8); + background-color: rgba($lt-bg-color-lvl5-dark, .4); } div.details-list-item:hover { diff --git a/source/Localization/EN-US.ts b/source/Localization/EN-US.ts index 6b79f72..2ab0d8c 100644 --- a/source/Localization/EN-US.ts +++ b/source/Localization/EN-US.ts @@ -41,8 +41,9 @@ const EN_US = { "Common.Attr.Key.Radius.X": "Radius X", "Common.Attr.Key.Radius.Y": "Radius Y", "Common.Attr.Key.Radius.Z": "Radius Z", - "Common.Attr.Key.Error.Multiple": "Cannot edit multiple values", - "Panel.Info.Range.Details.Attr.Error.Not.Range": "The focus object is not a Range", + "Common.Attr.Key.Color": "Color", + "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", } export default EN_US; \ No newline at end of file diff --git a/source/Localization/ZH-CN.ts b/source/Localization/ZH-CN.ts index 3c5663b..80753da 100644 --- a/source/Localization/ZH-CN.ts +++ b/source/Localization/ZH-CN.ts @@ -41,8 +41,9 @@ const ZH_CN = { "Common.Attr.Key.Radius.X": "X 半径", "Common.Attr.Key.Radius.Y": "Y 半径", "Common.Attr.Key.Radius.Z": "Z 半径", - "Common.Attr.Key.Error.Multiple": "无法编辑多重数值", - "Panel.Info.Range.Details.Attr.Error.Not.Range": "焦点对象不是一个范围", + "Common.Attr.Key.Color": "颜色", + "Common.Attr.Key.Error.Multiple": "多重数值", + "Panel.Info.Range.Details.Attr.Error.Not.Range": "对象不是一个范围", "Panel.Info.Range.Details.Attr.Error.Unspecified": "未指定范围对象", } export default ZH_CN; \ No newline at end of file diff --git a/source/Panel/RangeDetails/RangeDetails.tsx b/source/Panel/RangeDetails/RangeDetails.tsx index f583bed..4fe9548 100644 --- a/source/Panel/RangeDetails/RangeDetails.tsx +++ b/source/Panel/RangeDetails/RangeDetails.tsx @@ -4,6 +4,7 @@ import { useStatusWithEvent, IMixinStatusProps, Status } from "@Context/Status"; import { AllI18nKeys } from "@Component/Localization/Localization"; import { Range } from "@Model/Range"; import { ObjectID } from "@Model/Renderer"; +import { ColorInput } from "@Component/ColorInput/ColorInput"; import "./RangeDetails.scss"; @useStatusWithEvent("rangeAttrChange", "focusObjectChange") @@ -11,6 +12,7 @@ class RangeDetails extends Component { public readonly AttrI18nKey: AllI18nKeys[] = [ "Common.Attr.Key.Display.Name", + "Common.Attr.Key.Color", "Common.Attr.Key.Position.X", "Common.Attr.Key.Position.Y", "Common.Attr.Key.Position.Z", @@ -59,28 +61,34 @@ class RangeDetails extends Component { status.changeRangeAttrib(range.id, "displayName", val); })} - {this.renderAttrInput(range.id, 1, range.position[0], (val, status) => { + { + if (this.props.status) { + this.props.status.changeRangeAttrib(range.id, "color", color); + } + }}/> + + {this.renderAttrInput(range.id, 2, range.position[0], (val, status) => { range.position[0] = (val as any) / 1; status.changeRangeAttrib(range.id, "position", range.position); }, .1)} - {this.renderAttrInput(range.id, 2, range.position[1], (val, status) => { + {this.renderAttrInput(range.id, 3, range.position[1], (val, status) => { range.position[1] = (val as any) / 1; status.changeRangeAttrib(range.id, "position", range.position); }, .1)} - {this.renderAttrInput(range.id, 3, range.position[2], (val, status) => { + {this.renderAttrInput(range.id, 4, range.position[2], (val, status) => { range.position[2] = (val as any) / 1; status.changeRangeAttrib(range.id, "position", range.position); }, .1)} - {this.renderAttrInput(range.id, 4, range.radius[0], (val, status) => { + {this.renderAttrInput(range.id, 5, 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, 5, range.radius[1], (val, status) => { + {this.renderAttrInput(range.id, 6, 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, 6, range.radius[2], (val, status) => { + {this.renderAttrInput(range.id, 7, range.radius[2], (val, status) => { range.radius[2] = (val as any) / 1; status.changeRangeAttrib(range.id, "radius", range.radius); }, .1, undefined, 0)}