llvy.ltd/casdoor
1
0
Fork 0
mirror of https://github.com/casdoor/casdoor.git synced 2025-07-05 05:50:19 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat: support customize theme (#1500)

Browse Source 
* refactor: simplify functions and improve variable naming

* feat: add themeEditor component

* feat: support customize theme

* chore: resolve conflict and add LICENCE

* chore: format code

* refactor: use icon replace background url

* feat: improve organization and application theme editor
This commit is contained in:
Yaodong Yu
2023-02-01 22:06:40 +08:00
committed by GitHub
parent b47baa06e1
commit 95b32d5ebf
28 changed files with 13025 additions and 12126 deletions
Download Patch File Download Diff File Expand all files Collapse all files

33
web/src/OrganizationEditPage.js
View File

@ -13,7 +13,7 @@
// limitations under the License.
import React from "react";
import {Button, Card, Col, Input, InputNumber, Row, Select, Switch} from "antd";
import {Button, Card, Col, Input, InputNumber, Radio, Row, Select, Switch} from "antd";
import * as OrganizationBackend from "./backend/OrganizationBackend";
import * as ApplicationBackend from "./backend/ApplicationBackend";
import * as LdapBackend from "./backend/LdapBackend";
@ -22,6 +22,7 @@ import i18next from "i18next";
import {LinkOutlined} from "@ant-design/icons";
import LdapTable from "./LdapTable";
import AccountTable from "./AccountTable";
import ThemeEditor from "./common/theme/ThemeEditor";
const {Option} = Select;
@ -316,6 +317,31 @@ class OrganizationEditPage extends React.Component {
/>
</Col>
</Row>
<Row style={{marginTop: "20px"}} >
<Col style={{marginTop: "5px"}} span={(Setting.isMobile()) ? 22 : 2}>
{Setting.getLabel(i18next.t("theme:Theme"), i18next.t("theme:Theme - Tooltip"))} :
</Col>
<Col span={22} style={{marginTop: "5px"}}>
<Row>
<Radio.Group value={this.state.organization.themeData?.isEnabled ?? false} onChange={e => {
const {_, ...theme} = this.state.organization.themeData ?? {...Setting.ThemeDefault, isEnabled: false};
this.updateOrganizationField("themeData", {...theme, isEnabled: e.target.value});
}} >
<Radio.Button value={false}>{i18next.t("organization:Follow global theme")}</Radio.Button>
<Radio.Button value={true}>{i18next.t("theme:Customize theme")}</Radio.Button>
</Radio.Group>
</Row>
{
this.state.organization.themeData?.isEnabled ?
<Row style={{marginTop: "20px"}}>
<ThemeEditor themeData={this.state.organization.themeData} onThemeChange={(_, nextThemeData) => {
const {isEnabled} = this.state.organization.themeData ?? {...Setting.ThemeDefault, isEnabled: false};
this.updateOrganizationField("themeData", {...nextThemeData, isEnabled});
}} />
</Row> : null
}
</Col>
</Row>
<Row style={{marginTop: "20px"}}>
<Col style={{marginTop: "5px"}} span={(Setting.isMobile()) ? 22 : 2}>
{Setting.getLabel(i18next.t("general:LDAPs"), i18next.t("general:LDAPs - Tooltip"))} :
@ -341,6 +367,11 @@ class OrganizationEditPage extends React.Component {
.then((res) => {
if (res.status === "ok") {
Setting.showMessage("success", i18next.t("general:Successfully saved"));
if (this.props.account.organization.name === this.state.organizationName) {
this.props.onChangeTheme(Setting.getThemeData(this.state.organization));
}
this.setState({
organizationName: this.state.organization.name,
});