doesnm/quickshare
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

feat(fe/panes): eable background color setting in preferences and management pane

Browse source
This commit is contained in:
hexxa 2022-03-20 20:00:23 +08:00 • committed by Hexxa
parent 95e5be092a
commit 0db1903e42
5 changed files with 66 additions and 21 deletions
Download patch file Download diff file Expand all files Collapse all files

22
src/client/web/src/components/pane_admin.tsx
View file

@ -753,6 +753,13 @@ export class BgCfg extends React.Component<BgProps, BgState, {}> {
});
this.props.update(updater().updateUI);
};
changeBgBgColor = (ev: React.ChangeEvent<HTMLInputElement>) => {
updater().setClientCfg({
...this.props.ui,
bg: { ...this.props.ui.bg, bgColor: ev.target.value },
});
this.props.update(updater().updateUI);
};
constructor(p: BgProps) {
super(p);
@ -900,7 +907,7 @@ export class BgCfg extends React.Component<BgProps, BgState, {}> {
/>
</div>
<div className="inline-block">
<div className="inline-block margin-r-m">
<div className="label">
{this.props.msg.pkg.get("cfg.bg.align")}
</div>
@ -912,6 +919,19 @@ export class BgCfg extends React.Component<BgProps, BgState, {}> {
placeholder={this.props.msg.pkg.get("cfg.bg.align")}
/>
</div>
<div className="inline-block">
<div className="label">
{this.props.msg.pkg.get("cfg.bg.bgColor")}
</div>
<input
name="bg_bgColor"
type="text"
onChange={this.changeBgBgColor}
value={this.props.ui.bg.bgColor}
placeholder={this.props.msg.pkg.get("cfg.bg.bgColor")}
/>
</div>
</div>
</div>
);

24
src/client/web/src/components/pane_settings.tsx
View file

@ -62,6 +62,13 @@ export class PaneSettings extends React.Component<Props, State, {}> {
});
this.props.update(updater().updateLogin);
};
changeBgBgColor = (ev: React.ChangeEvent<HTMLInputElement>) => {
updater().setPreferences({
...this.props.login.preferences,
bg: { ...this.props.login.preferences.bg, bgColor: ev.target.value },
});
this.props.update(updater().updateLogin);
};
changeCSSURL = (ev: React.ChangeEvent<HTMLInputElement>) => {
updater().setPreferences({
...this.props.login.preferences,
@ -370,9 +377,7 @@ export class PaneSettings extends React.Component<Props, State, {}> {
<Container>
<Flexbox
children={List([
<h5 className="title-m">
{this.props.msg.pkg.get("theme")}
</h5>,
<h5 className="title-m">{this.props.msg.pkg.get("theme")}</h5>,
])}
childrenStyles={List([{}, { justifyContent: "flex-end" }])}
/>
@ -502,6 +507,19 @@ export class PaneSettings extends React.Component<Props, State, {}> {
placeholder={this.props.msg.pkg.get("cfg.bg.align")}
/>
</div>
<div className="inline-block margin-r-m">
<div className="label">
{this.props.msg.pkg.get("cfg.bg.bgColor")}
</div>
<input
name="bg_bgColor"
type="text"
onChange={this.changeBgBgColor}
value={this.props.login.preferences.bg.bgColor}
placeholder={this.props.msg.pkg.get("cfg.bg.bgColor")}
/>
</div>
</div>
</Container>

39
src/client/web/src/components/root_frame.tsx
View file

@ -31,30 +31,35 @@ export class RootFrame extends React.Component<Props, State, {}> {
}
makeBgStyle = (): Object => {
if (
this.props.login.preferences.bg.url === "" &&
this.props.ui.bg.url === ""
) {
return {};
}
let bgStyle = undefined;
if (
this.props.login.preferences != null &&
this.props.login.preferences.bg.url !== ""
) {
bgStyle = {
background: `url("${this.props.login.preferences.bg.url}") ${this.props.login.preferences.bg.repeat} ${this.props.login.preferences.bg.position} ${this.props.login.preferences.bg.align}`,
const bgConfig = this.props.login.preferences.bg;
return {
background: `url("${bgConfig.url}") ${bgConfig.repeat} ${bgConfig.position} ${bgConfig.align}`,
};
} else if (this.props.ui.bg.url !== "") {
bgStyle = {
background: `url("${this.props.ui.bg.url}") ${this.props.ui.bg.repeat} ${this.props.ui.bg.position} ${this.props.ui.bg.align}`,
};
} else {
bgStyle = {};
}
return bgStyle;
if (this.props.login.preferences.bg.bgColor !== "") {
return {
backgroundColor: this.props.login.preferences.bg.bgColor,
};
}
if (this.props.ui.bg.url !== "") {
return {
background: `url("${this.props.ui.bg.url}") ${this.props.ui.bg.repeat} ${this.props.ui.bg.position} ${this.props.ui.bg.align}`,
};
}
if (this.props.ui.bg.bgColor !== "") {
return {
backgroundColor: this.props.ui.bg.bgColor,
};
}
return {};
};
render() {

1
src/client/web/src/i18n/en_US.ts
View file

@ -94,6 +94,7 @@ export const msgs: Map<string, string> = Map({
"cfg.bg.repeat": "Repeat",
"cfg.bg.pos": "Position",
"cfg.bg.align": "Align",
"cfg.bg.bgColor": "Background Color",
reset: "Reset",
"bg.url.alert": "Image URL is too short or too long",
"bg.pos.alert": "Position only supports: top, bottom, left, right, center",

1
src/client/web/src/i18n/zh_CN.ts
View file

@ -92,6 +92,7 @@ export const msgs: Map<string, string> = Map({
"cfg.bg.repeat": "重复",
"cfg.bg.pos": "位置",
"cfg.bg.align": "对齐",
"cfg.bg.bgColor": "背景色",
reset: "重置",
"bg.url.alert": "图片链接太短或太长",
"bg.pos.alert": "Position目前仅支持top, bottom, left, right, center",