<__searchBar />
<__searchBar />
} />
)
}
diff --git a/src/components/Layout/Sider/default/index.js b/src/components/Layout/Sider/default/index.js
index 4ecb0a02..2e998812 100644
--- a/src/components/Layout/Sider/default/index.js
+++ b/src/components/Layout/Sider/default/index.js
@@ -15,12 +15,12 @@ export default class Sider_Default extends React.PureComponent {
renderMenus(data){
return data.map(e => {
- return(
+ return e.desktop? (
diff --git a/src/models/app.js b/src/models/app.js
index e451925b..8b336508 100755
--- a/src/models/app.js
+++ b/src/models/app.js
@@ -26,7 +26,8 @@ export default {
controlActive: false,
feedOutdated: false,
- app_settings: store.get('app_settings'),
+ app_settings: store.get(app_config.app_settings_storage),
+ app_theme: store.get(app_config.appTheme_container),
notifications: [],
locationQuery: {},
@@ -52,7 +53,7 @@ export default {
cancelRequest.forEach((value, key) => {
if (value.pathname !== window.location.pathname) {
- value.cancel(CANCEL_REQUEST_MESSAGE);
+ value.cancel('cancel request');
cancelRequest.delete(key);
}
});
@@ -113,6 +114,25 @@ export default {
}
});
},
+ *updateTheme({payload}, {call, put, select}){
+ if (!payload) return false;
+ let tmp = []
+
+ const keys = Object.keys(payload)
+ const values = Object.values(payload)
+ const lenght = keys.length
+
+ for (let i = 0; i < lenght; i++) {
+ let obj = {}
+ obj.key = keys[i]
+ obj.value = values[i]
+
+ tmp[i] = obj
+ }
+
+ return yield put({ type: 'handleUpdateTheme', payload: tmp });
+
+ },
},
reducers: {
updateState(state, { payload }) {
@@ -131,6 +151,12 @@ export default {
state.notifications = [];
},
+ handleUpdateTheme(state, { payload }) {
+ verbosity.debug(payload)
+ store.set(app_config.appTheme_container, payload);
+ state.app_theme = payload
+ },
+
disconnectServices(state) {
state.service_valid = false;
state.session_valid = false;
diff --git a/src/pages/debug/index.js b/src/pages/debug/index.js
index 141ad75b..35e8734c 100644
--- a/src/pages/debug/index.js
+++ b/src/pages/debug/index.js
@@ -14,7 +14,6 @@ import {
import classnames from 'classnames';
import { CloseOutlined } from '@ant-design/icons';
import endpoints_list from 'config/endpoints';
-import { Page } from 'components';
import styles from './index.less';
@@ -171,7 +170,7 @@ class RequestPage extends React.Component {
const { result, url, method, ParamsKeys, BodyKeys, visible } = this.state;
return (
-
+
-
+
);
}
}
diff --git a/src/pages/debug/theme.js b/src/pages/debug/theme.js
new file mode 100644
index 00000000..ed51cf58
--- /dev/null
+++ b/src/pages/debug/theme.js
@@ -0,0 +1,79 @@
+import React from 'react'
+import * as antd from 'antd'
+import * as themeLIB from 'core/libs/style'
+
+function getBase64(img, callback) {
+ const reader = new FileReader()
+ reader.addEventListener('load', () => callback(reader.result))
+ reader.readAsDataURL(img)
+ }
+
+export default class themedebug extends React.PureComponent {
+ state = {
+ textColor: {r: '255', g: '255', b: '255'},
+ overlayColor: {r: '0', g: '0', b: '0'},
+
+ optimal: null,
+ file: null,
+ fileURL: null,
+ }
+ ToogleUpload() {
+ this.setState({ uploader: !this.state.uploader })
+ }
+ handleDeleteFile = () => {
+ this.setState({ fileURL: null })
+ }
+ handleFileUpload = info => {
+ if (info.file.status === 'uploading') {
+ this.setState({ loading: true })
+ return
+ }
+ if (info.file.status === 'done') {
+ this.setState({ file: info.file.originFileObj, uploader: false })
+ getBase64(info.file.originFileObj, fileURL => {
+ this.setState({ fileURL, loading: false })
+ })
+ }
+ }
+
+ handleGetOptimal() {
+ const optimal = themeLIB.getOptimalOpacityFromIMG({ textColor: this.state.textColor, overlayColor: this.state.overlayColor, img: this.state.fileURL })
+ this.setState({ optimal: optimal })
+ }
+
+ schemeToRGB(values) {
+ return `rgb(${values.r}, ${values.g}, ${values.b})`
+ }
+
+ render(){
+
+ return(
+ - {result}
+ this.handleGetOptimal()}> Get OPACITY
+
+
+ Click to Upload
+
+
+
+ )
+ }
+}
\ No newline at end of file
diff --git a/src/pages/settings/components/base.js b/src/pages/settings/components/base.js
index 0caff7d9..ed1a2cac 100755
--- a/src/pages/settings/components/base.js
+++ b/src/pages/settings/components/base.js
@@ -1,30 +1,29 @@
import React, { Component, Fragment } from 'react'
import { List, Switch, Button, notification, InputNumber } from 'antd'
import ListSettings from 'globals/settings'
-import ControlBar from 'components/layout/ControlBar'
+import { control } from 'components/layout/ControlBar'
import verbosity from 'core/libs/verbosity'
import * as Icons from 'components/Icons'
+import { settings, newSetting } from 'core/libs/settings'
class Base extends Component {
constructor(props) {
- super(props),
- (this.state = {
- SettingRepo: ListSettings,
- forSave: false,
- })
+ super(props);
+ this.state = {
+ list: ListSettings,
+ };
}
- rendersets = item => {
- let e = item.type
- switch (e) {
+ renderSetting = item => {
+ switch (item.type) {
case 'switch':
return (
+ {JSON.stringify(this.state.file)}
+ textColor:{JSON.stringify(this.state.textColor)}
+ overlayColor:{JSON.stringify(this.state.overlayColor)}
+ +
+
+
+ + textColor:{JSON.stringify(this.state.textColor)}
+ overlayColor:{JSON.stringify(this.state.overlayColor)}
+ +
+ 
+
+
+
+
+ Sample text
+
-
- )
- } catch (err) {
- return verbosity.log(err)
- }
- }
handleControlBar() {
const ListControls = [
- (
-
@@ -76,7 +52,7 @@ class Base extends Component {
,
]
- ControlBar.set(ListControls)
+ control.set(ListControls)
}
saveChanges() {
@@ -87,39 +63,44 @@ class Base extends Component {
description:
'The configuration has been saved, it may for some configuration to make changes you need to reload the application',
})
- setTimeout(app._app.refresh(), 1000)
- ControlBar.close()
+ control.close()
}
- onChangeSwitch(item) {
+ onChange(item) {
try {
- this.handleControlBar()
- const to = !item.value
- const updatedValue = [...this.state.SettingRepo].map(ita =>
- ita === item ? Object.assign(ita, { value: to }) : ita
- )
- this.setState({ SettingRepo: updatedValue, forSave: true })
- verbosity.log(`Changing ${item.SettingID} to value ${to}`)
+ switch (item.type) {
+ case 'switch': {
+ item.to = !settings.get(item.id)
+ verbosity.debug(`Changing setting (${item.id}: ${settings.get(item.id)}) => ${item.to}`)
+ settings.set(item.id, item.to)
+ this.handleChange(item)
+
+ }
+ case 'numeric': {
+
+ }
+ default: {
+ return null
+ }
+ }
} catch (err) {
console.log(err)
}
}
- onChangeNumeric(value, item) {
- this.HandleChangeNumeric(value)
- }
- HandleChangeNumeric(item, value) {
+
+
+ handleChange(item) {
try {
- this.handleControlBar()
- console.log(item.SettingID, value)
- const updatedValue = [...this.state.SettingRepo].map(ita =>
- ita === item ? Object.assign(ita, { value: value }) : ita
+ const updatedValue = this.state.list.map(element =>
+ element.id === item.id ? Object.assign(element, { value: item.to }) : element
)
- this.setState({ SettingRepo: updatedValue, forSave: true })
- verbosity.log(`Changing ${item.SettingID} to value ${to}`)
+ this.setState({ list: updatedValue})
} catch (err) {
console.log(err)
}
}
+
+
render() {
return (
- {this.SettingRender(this.state.SettingRepo)}
+ - (
+
+
+ }
+ return Hey, this file is too much large!
+ So it couldn't be displayed. +
+ {string}
+
+ }
+ antd.Modal.confirm({
+ title:
+
+ { this.state.model.src?
+ )
+ }
+
return (
<>
-
+ { this.state.model.src?
+ 
+
:
+
+ Sample text
+Sample text
+Sample text
+Sample text
+Some text here
+Some text here
+ +No Background
} +
+
+
+
+
+
+
+
+
+
+ {
+ promiseState(prevState => ({ model: { ...prevState.model, active: e }})).then(() => this.handleUpdate())
+ }}
+ checked={this.state.model.active}
+ />
+
+
+
+
+
+ {
+ this.setState(
+ prevState => ({
+ model: {
+ ...prevState.model,
+ opacity: e/100
+ }
+ })
+ )
+ }} onAfterChange={() => this.handleUpdate()} value={this.state.model.opacity*100} />
+
+
+
+
+ this.handleExport()}> Export
+
+
+
+
+ this.handleErase()} okText="Yes" cancelText="No">
+ Delete
+
+
+
+
+ Unsplash
+ +
+
+
: null}
+ {this.state.params? JSON.stringify(this.state.params) : null}
+
+
+
+
+
+
+ {this.state.processing?
+ Upload from your files
+
+
+
+ +
+
+ Or
+
+ Upload from URL
+ this.handleCustomURL(this.state.customURL)} onChange={e => this.setState({ customURL: e.target.value })} value={this.state.customURL} placeholder="http://example.com/my_coolest_image.jpg" />
+
+
: null}
+ {this.state.params? JSON.stringify(this.state.params) : null}
+
-
-
+ (
+
+ {item.icon}{item.title}
+
+ )}
+ />
+
div {
+ width: 100%;
+ margin: 0 10px;
+ }
+}
+
+.background_image_uploader{
+ width: 100%;
+ margin: auto;
+ display: flex;
+ flex-direction: row;
+ text-align: center;
+
+ > div {
+ width: 100%;
+ margin: 0 10px;
+ }
+}
+
+.background_image_preview{
+ position: relative;
+ height: 50%;
+
+ img{
+ z-index: 9;
+ width: 100%;
+ border-radius: 8px;
+ }
+
+ .text_wrapper{
+ position: absolute;
+ z-index: 10;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+ height: 100%;
+ width: 100%;
+
+ h1{
+ font-size: 68px;
+ }
+ }
+}
\ No newline at end of file
diff --git a/src/theme/base/index.less b/src/theme/base/index.less
index d1e2bf76..3a004d6f 100644
--- a/src/theme/base/index.less
+++ b/src/theme/base/index.less
@@ -11,12 +11,16 @@
@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_background: rgb(248, 246, 248);
-@__Global_backgroud_image: "";
+@AppTheme_global_color_dark: rgb(162, 162, 162);
+@AppTheme_global_background_dark: rgb(51, 51, 51);
@__Global_general_font_family: "Poppins", sans-serif;
@__Global_texted_font: "Manrope", sans-serif;
-@__Global_alternative_font: "Netflix Sans";
+@__Global_alternative_font: "Netflix Sans", sans-serif;
@__Global_layout_backgroud: #F8F6F8;
@__Global_layout_color: #2d2d2d;
@@ -24,22 +28,19 @@
@__Global_layout_transitions-dur: 200ms;
@__Global_Components_transitions_dur: 150ms;
-
@__Global_SwapAnimDuration: 170ms;
@__Global_backdrop_backgroud: rgba(158, 158, 158, 0.5);
+@app_accent_gradient: linear-gradient(90deg, rgba(237,111,86,1) 0%, rgba(234,89,89,1) 100%);
+
@transition-ease-in: all 0.3s ease-out;
@transition-ease-out: all 0.3s ease-out;
@transition-ease-inout: all 150ms ease-in-out;
-
-
-
@Overlay_wrapper_hidden_width: 22vw;
@Overlay_wrapper_showFull_width: 94.2%;
@Overlay_wrapper_showHalf_width: 35vw;
-@Overlay_container_bg_background: #F8F6F8;
@Overlay_container_1_btn_backgroud: #4c4c4c;
@@ -72,12 +73,14 @@
#root {
overflow: hidden;
+ color: @AppTheme_global_color!important;
+ background-color: @AppTheme_global_background!important;
+ --accent_color: @AppTheme_global_color_accent;
}
body {
scroll-behavior: smooth;
height: 100%;
- background-color: transparent;
overflow: hidden;
@@ -86,9 +89,8 @@ body {
font-family: @__Global_texted_font;
- background-color: @primary_layout_backgroud;
-
+
}
@media (max-width: @bp-small){
diff --git a/src/theme/base/layout/LeftSider.less b/src/theme/base/layout/LeftSider.less
index fb1464d7..a07a5313 100644
--- a/src/theme/base/layout/LeftSider.less
+++ b/src/theme/base/layout/LeftSider.less
@@ -1,4 +1,4 @@
-@left_sider_color: #333;
+@left_sider_color: @AppTheme_global_color;
@left_sider_sizeIcons: 19px;
@left_sider_menu__onhover_backgroud: rgb(80, 80, 80);
@left_sider_menu__onhover_color: rgb(80, 80, 80);
\ No newline at end of file
-
-
-
-
-
+
+ {item.icon}{item.title} {this.state.style[item.id]? "Enabled" : "Disabled"}
+ {item.description}
+