diff --git a/source/Behavior/Behavior.ts b/source/Behavior/Behavior.ts index 3a7c27c..6c0346a 100644 --- a/source/Behavior/Behavior.ts +++ b/source/Behavior/Behavior.ts @@ -1,7 +1,7 @@ import { BehaviorRecorder, IAnyBehaviorRecorder } from "@Model/Behavior"; import { Template } from "./Template"; -const AllBehaviors: IAnyBehaviorRecorder[] = new Array(20).fill(0).map((_, i) => { +const AllBehaviors: IAnyBehaviorRecorder[] = new Array(4).fill(0).map((_, i) => { let behavior = new BehaviorRecorder(Template); behavior.behaviorId = behavior.behaviorId + i; return behavior; diff --git a/source/Component/BehaviorList/BehaviorList.scss b/source/Component/BehaviorList/BehaviorList.scss index d1cdf0a..952ad08 100644 --- a/source/Component/BehaviorList/BehaviorList.scss +++ b/source/Component/BehaviorList/BehaviorList.scss @@ -10,6 +10,7 @@ div.behavior-list { div.behavior-item { margin: 5px; height: $behavior-item-height; + user-select: none; border-radius: 3px; cursor: pointer; display: flex; diff --git a/source/Component/BehaviorPopup/BehaviorPopup.scss b/source/Component/BehaviorPopup/BehaviorPopup.scss index 4adb767..8886442 100644 --- a/source/Component/BehaviorPopup/BehaviorPopup.scss +++ b/source/Component/BehaviorPopup/BehaviorPopup.scss @@ -5,6 +5,10 @@ div.behavior-popup { height: 100%; } +span.behavior-popup-select-counter { + opacity: .75; +} + div.behavior-popup-search-box { padding: 10px 0 10px 10px; width: calc(100% - 10px); diff --git a/source/Component/BehaviorPopup/BehaviorPopup.tsx b/source/Component/BehaviorPopup/BehaviorPopup.tsx index ad58909..b87154c 100644 --- a/source/Component/BehaviorPopup/BehaviorPopup.tsx +++ b/source/Component/BehaviorPopup/BehaviorPopup.tsx @@ -62,19 +62,46 @@ class BehaviorPopupComponent extends Component< ; } + private showBehaviorInfo = (behavior: IRenderBehavior) => { + if (this.props.status) { + const status = this.props.status; + status.popup.showPopup(ConfirmPopup, { + infoI18n: behavior.describe as any, + titleI18N: "Popup.Behavior.Info.Title", + titleI18NOption: { + behavior: I18N(this.props, behavior.behaviorName as any) + }, + yesI18n: "Popup.Behavior.Info.Confirm", + }) + } + } + + private renderActionBar = () => { + return + } + public render(): ReactNode { return { if (this.state.focusBehavior.has(behavior)) { this.state.focusBehavior.delete(behavior); @@ -83,19 +110,6 @@ class BehaviorPopupComponent extends Component< } this.forceUpdate(); }} - action={(behavior)=>{ - if (this.props.status) { - const status = this.props.status; - status.popup.showPopup(ConfirmPopup, { - infoI18n: behavior.describe as any, - titleI18N: "Popup.Behavior.Info.Title", - titleI18NOption: { - behavior: I18N(this.props, behavior.behaviorName as any) - }, - yesI18n: "Popup.Behavior.Info.Confirm", - }) - } - }} /> } diff --git a/source/Component/ConfirmPopup/ConfirmPopup.scss b/source/Component/ConfirmPopup/ConfirmPopup.scss index dacdaf1..bbf0309 100644 --- a/source/Component/ConfirmPopup/ConfirmPopup.scss +++ b/source/Component/ConfirmPopup/ConfirmPopup.scss @@ -47,7 +47,17 @@ div.confirm-root { justify-content: flex-end; align-items: center; + div.action-right-view { + width: 100%; + height: 100%; + flex-shrink: 1; + display: flex; + align-items: center; + padding-left: 10px; + } + div.action-button { + flex-shrink: 0; height: 26px; padding: 0 10px; border-radius: 3px; diff --git a/source/Component/ConfirmPopup/ConfirmPopup.tsx b/source/Component/ConfirmPopup/ConfirmPopup.tsx index 4cb4130..0fad186 100644 --- a/source/Component/ConfirmPopup/ConfirmPopup.tsx +++ b/source/Component/ConfirmPopup/ConfirmPopup.tsx @@ -68,6 +68,7 @@ interface IConfirmContentProps { hidePadding?: boolean; className?: string; actions: IActionButtonProps[]; + customFooter?: () => ReactNode; header?: () => ReactNode; headerHeight?: number; } @@ -154,10 +155,14 @@ class ConfirmContent extends Component {
+
+ {this.props.customFooter ? this.props.customFooter() : null} +
{ - this.props.actions.map((prop, index) => { - return this.renderActionButton(prop, index); - }) + this.props.actions ? + this.props.actions.map((prop, index) => { + return this.renderActionButton(prop, index); + }) : null }
; diff --git a/source/Component/Localization/Localization.tsx b/source/Component/Localization/Localization.tsx index 1a16ee7..bc3c619 100644 --- a/source/Component/Localization/Localization.tsx +++ b/source/Component/Localization/Localization.tsx @@ -9,7 +9,7 @@ const LanguageDataBase = { EN_US, ZH_CN } -type AllI18nKeys = keyof typeof EN_US; +type AllI18nKeys = (keyof typeof EN_US) | string; interface ILocalizationProps { className?: string; @@ -17,14 +17,17 @@ interface ILocalizationProps { options?: Record; } -function I18N(language: Language | IMixinSettingProps, key: keyof typeof EN_US, values?: Record) { +function I18N(language: Language | IMixinSettingProps, key: AllI18nKeys, values?: Record) { let lang: Language; if (typeof language === "string") { lang = language; } else { lang = language.setting?.language ?? "EN_US"; } - let i18nValue = LanguageDataBase[lang][key]; + let languageDataBase = LanguageDataBase[lang]; + if (!languageDataBase) languageDataBase = LanguageDataBase["EN_US"]; + let i18nValue = languageDataBase[key as keyof typeof EN_US]; + if (!i18nValue) i18nValue = key; if (values) { for (let valueKey in values) { i18nValue = i18nValue.replaceAll(new RegExp(`\\{\\s*${valueKey}\\s*\\}`, "g"), values[valueKey]); diff --git a/source/Component/ObjectPicker/ObjectPicker.scss b/source/Component/ObjectPicker/ObjectPicker.scss index c2ae567..9e202f7 100644 --- a/source/Component/ObjectPicker/ObjectPicker.scss +++ b/source/Component/ObjectPicker/ObjectPicker.scss @@ -1,4 +1,5 @@ @import "../Theme/Theme.scss"; +@import "../PickerList/RainbowBg.scss"; $line-min-height: 24px; diff --git a/source/Component/ObjectPicker/ObjectPicker.tsx b/source/Component/ObjectPicker/ObjectPicker.tsx index 5566212..8670868 100644 --- a/source/Component/ObjectPicker/ObjectPicker.tsx +++ b/source/Component/ObjectPicker/ObjectPicker.tsx @@ -97,20 +97,8 @@ class ObjectPicker extends Component
@@ -145,7 +137,7 @@ class ObjectPicker extends Component { - disPlayInfo.needI18n ? + disPlayInfo.internal ? : {disPlayInfo.name} } diff --git a/source/Component/PickerList/PickerList.scss b/source/Component/PickerList/PickerList.scss index c961877..8f75819 100644 --- a/source/Component/PickerList/PickerList.scss +++ b/source/Component/PickerList/PickerList.scss @@ -1,3 +1,5 @@ +@import "./RainbowBg.scss"; + div.picker-list-root { min-width: 200px; height: 100%; diff --git a/source/Component/PickerList/PickerList.tsx b/source/Component/PickerList/PickerList.tsx index 95cab17..9533221 100644 --- a/source/Component/PickerList/PickerList.tsx +++ b/source/Component/PickerList/PickerList.tsx @@ -12,7 +12,8 @@ interface IDisplayInfo { color: string; icon: string; name: string; - needI18n?: boolean; + internal: boolean; + allLabel: boolean; }; interface IDisplayItem { @@ -21,12 +22,23 @@ interface IDisplayItem { mark?: boolean; } -function getObjectDisplayInfo(item: IPickerListItem): IDisplayInfo { +function getObjectDisplayInfo(item?: IPickerListItem): IDisplayInfo { - let color: number[] = []; + if (!item) { + return { + color: "transparent", + icon: "Label", + name: "Input.Error.Select", + internal: true, + allLabel: false + } + } + + let color: number[] | string = []; let icon: string = "tag"; let name: string = ""; - let needI18n: boolean = false; + let internal: boolean = false; + let allLabel: boolean = false; if (item instanceof Range) { icon = "CubeShape" @@ -35,6 +47,7 @@ function getObjectDisplayInfo(item: IPickerListItem): IDisplayInfo { icon = "WebAppBuilderFragment" } if (item instanceof CtrlObject) { + color = []; color[0] = Math.round(item.color[0] * 255); color[1] = Math.round(item.color[1] * 255); color[2] = Math.round(item.color[2] * 255); @@ -43,7 +56,9 @@ function getObjectDisplayInfo(item: IPickerListItem): IDisplayInfo { if (item instanceof Label) { if (item.isBuildIn) { - needI18n = true; + internal = true; + allLabel = true; + color = "transparent"; if (item.id === "AllRange") { icon = "ProductList"; name = "Build.In.Label.Name.All.Range"; @@ -60,11 +75,16 @@ function getObjectDisplayInfo(item: IPickerListItem): IDisplayInfo { } } + if (Array.isArray(color)) { + color = `rgb(${color[0]},${color[1]},${color[2]})`; + } + return { - color: needI18n ? "transparent" : `rgb(${color[0]},${color[1]},${color[2]})`, + color: color, icon: icon, name: name, - needI18n: needI18n + internal: internal, + allLabel: allLabel } } @@ -92,7 +112,11 @@ class PickerList extends Component { } }} > -
{
{ - displayInfo.needI18n ? - : + displayInfo.internal ? + : displayInfo.name }
diff --git a/source/Component/PickerList/RainbowBg.scss b/source/Component/PickerList/RainbowBg.scss new file mode 100644 index 0000000..b2b787f --- /dev/null +++ b/source/Component/PickerList/RainbowBg.scss @@ -0,0 +1,13 @@ +div.rainbow-back-ground-color { + background-image: linear-gradient( + to top, + orangered, + orange, + gold, + lightgreen, + cyan, + dodgerblue, + mediumpurple, + hotpink, + orangered); +} \ No newline at end of file diff --git a/source/Component/Popup/Popup.tsx b/source/Component/Popup/Popup.tsx index c029472..6e8e129 100644 --- a/source/Component/Popup/Popup.tsx +++ b/source/Component/Popup/Popup.tsx @@ -78,9 +78,6 @@ class Popup extends Component {popup.onRenderHeader()} @@ -257,6 +254,11 @@ class Popup extends Component { + if (this.props.status) { + this.props.status.popup.topping(popup); + } + }} > {this.renderDragLine(ResizeDragDirection.top, popup)}
diff --git a/source/Context/Popups.ts b/source/Context/Popups.ts index 561832c..e5e4cd6 100644 --- a/source/Context/Popups.ts +++ b/source/Context/Popups.ts @@ -163,8 +163,12 @@ class PopupController extends Emitter { newPopup = new (popup ?? Popup)(props); } newPopup.init(this, `P-${this.idIndex ++}`); - this.popups.push(newPopup); - this.sortPopup(); + + // 延迟渲染防止焦点冲突 + setTimeout(() => { + this.popups.push(newPopup); + this.sortPopup(); + }); return newPopup; } diff --git a/source/Localization/EN-US.ts b/source/Localization/EN-US.ts index 9e858c0..124c4f1 100644 --- a/source/Localization/EN-US.ts +++ b/source/Localization/EN-US.ts @@ -54,6 +54,7 @@ const EN_US = { "Popup.Setting.Title": "Preferences setting", "Popup.Add.Behavior.Title": "Add behavior", "Popup.Add.Behavior.Action.Add": "Add all select behavior", + "Popup.Add.Behavior.Select.Counter": "Selected {count} behavior", "Popup.Behavior.Info.Title": "Behavior details: {behavior}", "Popup.Behavior.Info.Confirm": "OK, I know it", "Build.In.Label.Name.All.Group": "All group", diff --git a/source/Localization/ZH-CN.ts b/source/Localization/ZH-CN.ts index 1283176..3495892 100644 --- a/source/Localization/ZH-CN.ts +++ b/source/Localization/ZH-CN.ts @@ -54,6 +54,7 @@ const ZH_CN = { "Popup.Setting.Title": "首选项设置", "Popup.Add.Behavior.Title": "添加行为", "Popup.Add.Behavior.Action.Add": "添加全部选中行为", + "Popup.Add.Behavior.Select.Counter": "已选择 {count} 个行为", "Popup.Behavior.Info.Title": "行为详情: {behavior}", "Popup.Behavior.Info.Confirm": "好的, 我知道了", "Build.In.Label.Name.All.Group": "全部群",