mirror of
https://github.com/casdoor/casdoor.git
synced 2025-07-09 09:23:40 +08:00

* feat: add global theme change function * feat: add icons * feat: in app theme changer * feat: use antd built-in themes * fix: multiple styling problem * fix: theme init from localstorage * feat: dark mode footer * feat: casdoor logo color theme * feat: select theme box icon adaptive to theme * fix: menu bar style * fix: language box style * feat: translation * feat: update translation of select theme box without reloading * fix: mobile view * fix: better structured select theme box * feat: add compact icon * fix: redundant theme fetch * fix: redundant theme fetch * fix: various styling problems
82 lines
2.4 KiB
JavaScript
82 lines
2.4 KiB
JavaScript
// Copyright 2021 The Casdoor Authors. All Rights Reserved.
|
|
//
|
|
// Licensed under the Apache License, Version 2.0 (the "License");
|
|
// you may not use this file except in compliance with the License.
|
|
// You may obtain a copy of the License at
|
|
//
|
|
// http://www.apache.org/licenses/LICENSE-2.0
|
|
//
|
|
// Unless required by applicable law or agreed to in writing, software
|
|
// distributed under the License is distributed on an "AS IS" BASIS,
|
|
// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
|
// See the License for the specific language governing permissions and
|
|
// limitations under the License.
|
|
|
|
import React from "react";
|
|
import * as Setting from "./Setting";
|
|
import {Dropdown} from "antd";
|
|
import "./App.less";
|
|
import i18next from "i18next";
|
|
|
|
function themeIcon(themeKey) {
|
|
return <img width={24} alt={themeKey} src={getLogoURL(themeKey)} />;
|
|
}
|
|
|
|
function getLogoURL(themeKey) {
|
|
if (themeKey) {
|
|
return Setting.Themes.find(t => t.key === themeKey)["selectThemeLogo"];
|
|
} else {
|
|
return Setting.Themes.find(t => t.key === localStorage.getItem("theme"))["selectThemeLogo"];
|
|
}
|
|
}
|
|
|
|
class SelectThemeBox extends React.Component {
|
|
constructor(props) {
|
|
super(props);
|
|
this.state = {
|
|
classes: props,
|
|
themes: props.theme ?? ["Default", "Dark", "Compact"],
|
|
icon: null,
|
|
};
|
|
}
|
|
|
|
items = this.getThemes();
|
|
|
|
componentDidMount() {
|
|
i18next.on("languageChanged", () => {
|
|
this.items = this.getThemes();
|
|
});
|
|
localStorage.getItem("theme") ? this.setState({"icon": getLogoURL()}) : this.setState({"icon": getLogoURL("Default")});
|
|
addEventListener("themeChange", (e) => {
|
|
this.setState({"icon": getLogoURL()});
|
|
});
|
|
}
|
|
|
|
getThemes() {
|
|
return Setting.Themes.map((theme) => Setting.getItem(i18next.t(`general:${theme.label}`), theme.key, themeIcon(theme.key)));
|
|
}
|
|
|
|
getOrganizationThemes(themes) {
|
|
const select = [];
|
|
for (const theme of themes) {
|
|
this.items.map((item, index) => item.key === theme ? select.push(item) : null);
|
|
}
|
|
return select;
|
|
}
|
|
|
|
render() {
|
|
const themeItems = this.getOrganizationThemes(this.state.themes);
|
|
const onClick = (e) => {
|
|
Setting.setTheme(e.key);
|
|
};
|
|
|
|
return (
|
|
<Dropdown menu={{items: themeItems, onClick}} >
|
|
<div className="theme-box" style={{display: themeItems.length === 0 ? "none" : null, background: `url(${this.state.icon})`, ...this.props.style}} />
|
|
</Dropdown>
|
|
);
|
|
}
|
|
}
|
|
|
|
export default SelectThemeBox;
|