MrKBear/living-together
2
2
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Use rainbow bg color to mark build in label

Browse Source
This commit is contained in:
MrKBear 2022-03-28 15:47:34 +08:00
parent 126324bb0c
commit 241161ebb6
6 changed files with 65 additions and 30 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
source/Component/Localization/Localization.tsx
View File

@ -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<string, string>;
}
function I18N(language: Language | IMixinSettingProps, key: keyof typeof EN_US, values?: Record<string, string>) {
function I18N(language: Language | IMixinSettingProps, key: AllI18nKeys, values?: Record<string, string>) {
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]);

1
source/Component/ObjectPicker/ObjectPicker.scss
View File

@ -1,4 +1,5 @@
@import "../Theme/Theme.scss";
@import "../PickerList/RainbowBg.scss";
$line-min-height: 24px;

24
source/Component/ObjectPicker/ObjectPicker.tsx
View File

@ -97,20 +97,8 @@ class ObjectPicker extends Component<IObjectPickerProps & IMixinStatusProps, IOb
public render(): ReactNode {
let disPlayInfo: IDisplayInfo;
let isDelete: boolean = false;
if (this.props.value) {
disPlayInfo = getObjectDisplayInfo(this.props.value);
isDelete = this.props.value.isDeleted();
} else {
disPlayInfo = {
name: "Input.Error.Select",
icon: "Label",
color: "transparent",
needI18n: true
}
}
let disPlayInfo: IDisplayInfo = getObjectDisplayInfo(this.props.value);
let isDelete: boolean = !!this.props.value?.isDeleted();
return <>
<TextField
@ -129,7 +117,11 @@ class ObjectPicker extends Component<IObjectPickerProps & IMixinStatusProps, IOb
}}
>
<div
className="list-color"
className={
"list-color" + (
disPlayInfo.allLabel ? " rainbow-back-ground-color" : ""
)
}
style={{
backgroundColor: disPlayInfo.color
}}
@ -145,7 +137,7 @@ class ObjectPicker extends Component<IObjectPickerProps & IMixinStatusProps, IOb
}}
>
{
disPlayInfo.needI18n ?
disPlayInfo.internal ?
<Localization i18nKey={disPlayInfo.name as any}/> :
<span>{disPlayInfo.name}</span>
}

2
source/Component/PickerList/PickerList.scss
View File

@ -1,3 +1,5 @@
@import "./RainbowBg.scss";
div.picker-list-root {
min-width: 200px;
height: 100%;

44
source/Component/PickerList/PickerList.tsx
View File

@ -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<IPickerListProps> {
}
}}
>
<div className="list-item-color"
<div className={
"list-item-color" + (
displayInfo.allLabel ? " rainbow-back-ground-color" : ""
)
}
style={{
backgroundColor: displayInfo.color
}}
@ -102,8 +126,8 @@ class PickerList extends Component<IPickerListProps> {
</div>
<div className="list-item-name">
{
displayInfo.needI18n ?
<Localization i18nKey={displayInfo.name as any}/> :
displayInfo.internal ?
<Localization i18nKey={displayInfo.name}/> :
displayInfo.name
}
</div>

13
source/Component/PickerList/RainbowBg.scss Normal file
View File

@ -0,0 +1,13 @@
div.rainbow-back-ground-color {
background-image: linear-gradient(
to top,
orangered,
orange,
gold,
lightgreen,
cyan,
dodgerblue,
mediumpurple,
hotpink,
orangered);
}