+
{AppState()}
diff --git a/src/pages/settings/components/theme/index.js b/src/pages/settings/components/theme/index.js
index ff214aed..47025421 100644
--- a/src/pages/settings/components/theme/index.js
+++ b/src/pages/settings/components/theme/index.js
@@ -5,39 +5,30 @@ import themeSettings from 'globals/theme_settings'
import {connect} from 'umi'
import styles from './index.less'
-import { SketchPicker } from 'react-color';
+import { onError } from 'core/libs/errorhandler'
import { theme, getOptimalOpacityFromIMG, get_style_rule_value } from 'core/libs/style'
import { urlToBase64, imageToBase64, arrayToObject } from 'core'
import exportDataAsFile from 'core/libs/interface/export_data'
-class BackgroundColor extends React.Component{
- state = {
- selected: "#fff"
- }
- sendChanges(){
- this.props.changeColor(this.state.selected)
- }
- selectColor = (color) =>{
- this.setState({selected: color.hex})
- }
- render(){
- return <>
-
- this.sendChanges()}> Change
-
- }
-}
-
-@connect(({ app }) => ({ app }))
-class DarkMode extends React.Component{
- state = {
- model: { active: false, autoTime: '' }
+class ThemeConfigurator extends React.Component{
+
+ componentDidMount(){
+ this.applyStoraged()
}
+ applyStoraged(){
+ const storaged = theme.get()
+ if(storaged && this.state){
+ storaged[this.state.key]? this.setState({ model: storaged[this.state.key]}) : onError.internal_proccess(`"Config key" or "Dispatcher" is missing`)
+ }
+ }
+
+ promiseState = async state => new Promise(resolve => this.setState(state, resolve));
+
handleUpdate(payload){
+ if(!this.state.key || !this.props.dispatch) {
+ return onError.internal_proccess(`"Config key" or "Dispatcher" is missing`)
+ }
if (!payload) {
payload = this.state.model
}
@@ -45,13 +36,33 @@ class DarkMode extends React.Component{
this.props.dispatch({
type: 'app/updateTheme',
payload: {
- key: 'darkmode',
+ key: this.state.key,
value: payload
}
});
}
+
+ handleErase(){
+ this.handleUpdate({})
+ }
+
+ handleExport(){
+ exportDataAsFile({data: JSON.stringify(this.state.model), type: 'text/json'})
+ }
+
+}
+
+@connect(({ app }) => ({ app }))
+class DarkMode extends ThemeConfigurator{
+ constructor(props){
+ super(props),
+ this.state = {
+ key: "darkmode",
+ model: { active: false }
+ }
+
+ }
render(){
- const promiseState = async state => new Promise(resolve => this.setState(state, resolve));
return <>
Dark Mode
@@ -63,8 +74,7 @@ class DarkMode extends React.Component{
{promiseState(prevState => ({ model: { ...prevState.model, active: e }})).then(() => this.handleUpdate())}}
+ onChange={(e) => {this.promiseState(prevState => ({ model: { ...prevState.model, active: e }})).then(() => this.handleUpdate())}}
checked={this.state.model.active}
/>
@@ -76,14 +86,55 @@ class DarkMode extends React.Component{
}
}
+@connect(({ app }) => ({ app }))
+class Colors extends ThemeConfigurator{
+ constructor(props){
+ super(props),
+ this.state = {
+ key: "darkmode",
+ model: { active: false }
+ }
+
+ }
+ render(){
+ return <>
+
+
Dark Mode
+
+
+
+
+
Enabled
+
{this.promiseState(prevState => ({ model: { ...prevState.model, active: e }})).then(() => this.handleUpdate())}}
+ checked={this.state.model.active}
+ />
+
+
+
+
@@ -200,7 +210,7 @@ class BackgroundImage extends React.Component{
checkedChildren="Enabled"
unCheckedChildren="Disabled"
loading={this.state.processing}
- onChange={(e) => {promiseState(prevState => ({ model: { ...prevState.model, active: e }})).then(() => this.handleUpdate())}}
+ onChange={(e) => {this.promiseState(prevState => ({ model: { ...prevState.model, active: e }})).then(() => this.handleUpdate())}}
checked={this.state.model.active}
/>
@@ -266,30 +276,17 @@ class BackgroundImage extends React.Component{
@connect(({ app }) => ({ app }))
export default class ThemeSettings extends React.Component{
state = {
- helper_visible: false,
- helper_fragment: null,
+ helper_fragment: null
}
- helper = {
- open: (e) => {
- this.setState({ helper_visible: true, helper_fragment: e })
- },
- close: () => {
- this.setState({ helper_visible: false, helper_fragment: null })
- }
- }
-
-
render(){
- const settingClick = {
- backgroundImage: () => this.helper.open(),
- overlay: () => this.helper.open() ,
- darkmode: () => this.helper.open()
- }
-
- const isActive = (key) => {
- return key? key.active : false
+ const idToComponent = {
+ backgroundImage: ,
+ darkmode: ,
+ color: ,
}
+ const handleClick = (key) => key? this.setState({helper_fragment: idToComponent[key]}) : null
+ const isActive = (key) => { return key? key.active : false }
return(
Theme
@@ -298,7 +295,7 @@ export default class ThemeSettings extends React.Component{
dataSource={themeSettings}
renderItem={item => (
-
+ handleClick(item.id)}>
{item.icon}{item.title} {isActive(arrayToObject(this.props.app.app_theme)[item.id])? "Enabled" : "Disabled"}
{item.description}
@@ -310,8 +307,8 @@ export default class ThemeSettings extends React.Component{
placement="right"
width="700px"
closable={true}
- onClose={this.helper.close}
- visible={this.state.helper_visible}
+ onClose={() => this.setState({ helper_fragment: null })}
+ visible={this.state.helper_fragment? true : false}
>
{this.state.helper_fragment}
diff --git a/src/theme/base/antd-design.less b/src/theme/base/antd-design.less
index 095d3422..5a2528c7 100644
--- a/src/theme/base/antd-design.less
+++ b/src/theme/base/antd-design.less
@@ -2,7 +2,7 @@
@import '../../../node_modules/antd/lib/style/themes/default.less';
// -------- Colors -----------
-@primary-color: @blue-6;
+@primary-color: #fff;
@info-color: @blue-6;
@success-color: @green-6;
@processing-color: @blue-6;
diff --git a/src/theme/base/index.less b/src/theme/base/index.less
index 3a004d6f..7a9ea174 100644
--- a/src/theme/base/index.less
+++ b/src/theme/base/index.less
@@ -11,8 +11,9 @@
@import './components/Menssaging.less';
@import './components/PostCard.less';
-@AppTheme_global_color: rgb(51, 51, 51);
@AppTheme_global_color_accent: rgb(162, 162, 162);
+
+@AppTheme_global_color: rgb(51, 51, 51);
@AppTheme_global_background: rgb(248, 246, 248);
@AppTheme_global_color_dark: rgb(162, 162, 162);
@@ -71,11 +72,45 @@
background-color: transparent;
}
-#root {
+#app {
overflow: hidden;
color: @AppTheme_global_color!important;
background-color: @AppTheme_global_background!important;
- --accent_color: @AppTheme_global_color_accent;
+ background-repeat: repeat-x;
+ background-size: cover;
+ background-position-y: center;
+
+ overflow: hidden;
+ background-color: transparent;
+ margin: auto;
+ height: 100vh;
+ width: 100vw;
+
+ transition: all @__Global_Components_transitions_dur linear;
+
+ &.dark_mode{
+ color: @AppTheme_global_color_dark!important;
+ background-color: @AppTheme_global_background_dark!important;
+
+ :global{
+ .ant-card{
+ background: @AppTheme_global_background_dark!important;
+ }
+ }
+ }
+
+ &.mobile{
+ >.primary_layout_container {
+ padding: 0;
+ overflow-y: overlay;
+ overflow-x: hidden;
+ min-width: unset;
+ }
+ .primary_layout_content{
+ padding: 35px 15px 15px 15px;
+ }
+ }
+
}
body {
@@ -89,8 +124,6 @@ body {
font-family: @__Global_texted_font;
-
-
}
@media (max-width: @bp-small){