fix(fe/bg): dialog bg is always fixed

This commit is contained in:
hexxa 2022-03-19 19:33:33 +08:00 committed by Hexxa
parent f5717b05b1
commit 48cabf9a71
5 changed files with 22 additions and 11 deletions

View file

@ -126,7 +126,9 @@
right: 0; right: 0;
top: 0; top: 0;
bottom: 0; bottom: 0;
background: url("/static/img/textured_paper.png") repeat fixed center; background-color: rgba(20, 20, 20, 0.8);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
overflow: scroll; overflow: scroll;
z-index: 100; z-index: 100;
} }

View file

@ -52,7 +52,7 @@
} }
.theme-default #bg { .theme-default #bg {
background: url("/static/img/textured_paper.png") repeat fixed center; /* background: url("/static/img/textured_paper.png") repeat fixed center; */
position: fixed; position: fixed;
left: 0; left: 0;
right: 0; right: 0;
@ -123,7 +123,9 @@
right: 0; right: 0;
top: 0; top: 0;
bottom: 0; bottom: 0;
background: url("/static/img/textured_paper.png") repeat fixed center; background-color: rgba(200, 200, 200, 0.5);
backdrop-filter: blur(5px);
-webkit-backdrop-filter: blur(9.5px);
overflow: scroll; overflow: scroll;
z-index: 100; z-index: 100;
} }

View file

@ -2,7 +2,7 @@ import * as React from "react";
import { Map } from "immutable"; import { Map } from "immutable";
import { ICoreState, MsgProps, UIProps } from "./core_state"; import { ICoreState, MsgProps, UIProps } from "./core_state";
import { IconProps } from "./visual/icons"; import { IconProps, iconSize } from "./visual/icons";
import { PaneSettings } from "./pane_settings"; import { PaneSettings } from "./pane_settings";
import { AdminPane, AdminProps } from "./pane_admin"; import { AdminPane, AdminProps } from "./pane_admin";
@ -43,13 +43,13 @@ export class SettingsDialog extends React.Component<Props, State, {}> {
tabIcons={Map<string, IconProps>({ tabIcons={Map<string, IconProps>({
preferencePane: { preferencePane: {
name: "RiSettings3Fill", name: "RiSettings3Fill",
size: "1.6rem", size: iconSize("s"),
color: "cyan1", color: "focus",
}, },
managementPane: { managementPane: {
name: "RiWindowFill", name: "RiWindowFill",
size: "1.6rem", size: iconSize("s"),
color: "cyan1", color: "focus",
}, },
})} })}
ui={this.props.ui} ui={this.props.ui}

View file

@ -765,7 +765,7 @@ export class BgCfg extends React.Component<BgProps, BgState, {}> {
setClientCfg = async () => { setClientCfg = async () => {
const bgURL = this.props.ui.bg.url; const bgURL = this.props.ui.bg.url;
if (bgURL.length === 0 || bgURL.length >= 4096) { if (bgURL.length >= 4096) {
alertMsg(this.props.msg.pkg.get("bg.url.alert")); alertMsg(this.props.msg.pkg.get("bg.url.alert"));
return; return;
} }

View file

@ -31,6 +31,13 @@ export class RootFrame extends React.Component<Props, State, {}> {
} }
makeBgStyle = (): Object => { makeBgStyle = (): Object => {
if (
this.props.login.preferences.bg.url === "" &&
this.props.ui.bg.url === ""
) {
return {};
}
let bgStyle = undefined; let bgStyle = undefined;
if ( if (
this.props.login.preferences != null && this.props.login.preferences != null &&
@ -66,7 +73,7 @@ export class RootFrame extends React.Component<Props, State, {}> {
return ( return (
<div id="root-frame" className={`${theme} ${fontSizeClass}`}> <div id="root-frame" className={`${theme} ${fontSizeClass}`}>
<div id="bg" style={{}}> <div id="bg" style={bgStyle}>
<Layers <Layers
login={this.props.login} login={this.props.login}
admin={this.props.admin} admin={this.props.admin}