diff --git a/config/app.settings.js b/config/app.settings.js index 1c05e2b2..e9e1e393 100644 --- a/config/app.settings.js +++ b/config/app.settings.js @@ -12,5 +12,6 @@ export var DevOptions = { StrictLightMode: ReturnDevOption('strict_lightMode'), SignForNotExpire: ReturnDevOption('force_showDevLogs'), MaxJWTexpire: '1556952', - MaxLengthPosts: '512' + MaxLengthPosts: '512', + CurrentBundle: 'light_ng' } \ No newline at end of file diff --git a/config/theme.config.js b/config/theme.config.js index d9def83d..e2034871 100644 --- a/config/theme.config.js +++ b/config/theme.config.js @@ -3,6 +3,6 @@ const path = require('path') const lessToJs = require('less-vars-to-js') module.exports = () => { - const themePath = path.join(__dirname, '../src/themes/vars.less') + const themePath = path.join(__dirname, `../src/themes/vars.less`) return lessToJs(fs.readFileSync(themePath, 'utf8')) } diff --git a/config/ycore.config.js b/config/ycore.config.js index 91a9f37e..ee7913d8 100644 --- a/config/ycore.config.js +++ b/config/ycore.config.js @@ -1,10 +1,15 @@ module.exports = { siteName: 'Comty', copyright: 'RageStudio©', - logoPath: '/logo.svg', + + LogoPath: '/logo.svg', FullLogoPath: '/full_logo.svg', + DarkFullLogoPath: '/dark_full_logo.svg', + DarkLogoPath: '/dark_logo.svg', + apiPrefix: '/api/v1', fixedHeader: true, // sticky primary layout header + resource_bundle: 'light_ng', App_Config: { InitRes: { width: 1000, height: 900}, diff --git a/globals/settings.js b/globals/settings.js index 71f3719b..ed9905f0 100644 --- a/globals/settings.js +++ b/globals/settings.js @@ -1,10 +1,15 @@ const fromStorage = JSON.parse(localStorage.getItem('app_settings')) function StorageValued(e){ - const Ite = fromStorage.map(item => { - return item.SettingID === e? item.value : null - }) - const fr = Ite.filter(Boolean) - return fr.toString() + try { + const Ite = fromStorage.map(item => { + return item.SettingID === e? item.value : null + }) + const fr = Ite.filter(Boolean) + return fr.toString() + } catch (error) { + console.log(error) + return false + } } export var AppSettings = [ { diff --git a/package.json b/package.json index e73745b1..ac7dbc16 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,8 @@ { "name": "comty-development", - "version": "0.1.13", + "title": "Comty™", + "DevBuild": true, + "version": "0.1.15", "description": "", "main": "index.js", "author": "RageStudio", diff --git a/public/dark_full_logo.svg b/public/dark_full_logo.svg new file mode 100644 index 00000000..78e90e9a --- /dev/null +++ b/public/dark_full_logo.svg @@ -0,0 +1 @@ +BalckComtyNG-Logo \ No newline at end of file diff --git a/public/dark_logo.svg b/public/dark_logo.svg new file mode 100644 index 00000000..ef799d4a --- /dev/null +++ b/public/dark_logo.svg @@ -0,0 +1 @@ +black_icon_new2019_black \ No newline at end of file diff --git a/src/@ycore/libs/ycore_sdcp/pre.js b/src/@ycore/libs/ycore_sdcp/pre.js index 07a292ce..b2d23c6f 100644 --- a/src/@ycore/libs/ycore_sdcp/pre.js +++ b/src/@ycore/libs/ycore_sdcp/pre.js @@ -25,6 +25,7 @@ export function InitSDCP(values, done) { { let cooked = JSON.parse(response)['user_data'] let Ensamblator = btoa(JSON.stringify(cooked)) + ycore.SetupApp() ycore.asyncSDCP.setSDCP(Ensamblator).then(() => { ycore.DevOptions.ShowFunctionsLogs? console.log(prefix, ' SDCP Setup done') : null return done(true) @@ -77,4 +78,13 @@ export function SDCP() { return null } } +} +export function SetupApp(){ + // TODO: Default sets + const resourceLoad = localStorage.getItem('resource_bundle') + if (!resourceLoad) { + localStorage.setItem('resource_bundle', 'light_ng') + } + + } \ No newline at end of file diff --git a/src/@ycore/libs/ycore_styles/pre.js b/src/@ycore/libs/ycore_styles/pre.js index 9f3293d8..d1bb4bba 100644 --- a/src/@ycore/libs/ycore_styles/pre.js +++ b/src/@ycore/libs/ycore_styles/pre.js @@ -1,3 +1,11 @@ -export function init(){ - console.log('Init pass!! styles') -} +import {DevOptions} from 'ycore' + +export function CurrentTheme(){ + try { + const bundle = localStorage.getItem('resource_bundle') || DevOptions.resource_bundle + console.log('Loading resource Bundle =>', bundle) + return bundle + } catch (error) { + return null + } +} \ No newline at end of file diff --git a/src/@ycore/ycore_worker.js b/src/@ycore/ycore_worker.js index eae4b9ba..bffce793 100644 --- a/src/@ycore/ycore_worker.js +++ b/src/@ycore/ycore_worker.js @@ -1,3 +1,4 @@ +import React from 'react' import {AppSettings} from '../../globals/settings.js' import {Endpoints} from 'globals/endpoints.js' import umiRouter from 'umi/router'; @@ -12,7 +13,11 @@ export var endpoints = Endpoints; export var yConfig = config.yConfig; var package_json = require("../../package.json"); - +export const AppInfo = { + name: package_json.title, + version: package_json.version, + logo: config.FullLogoPath +} export function ReturnDevOption(e){ const Ite = AppSettings.map(item => { return item.SettingID === e? item.value : null @@ -91,4 +96,29 @@ export const asyncSessionStorage = { export function RefreshONCE(){ window.location.reload(); } - +export function DetectNoNStableBuild(e1) { + switch (e1) { + case 'TagComponent': + if (package_json.DevBuild == true) { + return React.createElement(antd.Tag, { color: 'orange' }, " No Stable"); + } + if (package_json.DevBuild == false) { + return React.createElement(antd.Tag, { color: 'blue' }, " Stable"); + } + else { + return ('No Stable'); + } + break; + default: + if (package_json.DevBuild == true) { + return ('No Stable'); + } + if (package_json.DevBuild == false) { + return ('Stable'); + } + else { + return ('No Stable'); + } + break; + } +} diff --git a/src/components/CustomIcons/index.js b/src/components/CustomIcons/index.js index 0d39a4bb..0b357290 100644 --- a/src/components/CustomIcons/index.js +++ b/src/components/CustomIcons/index.js @@ -1,7 +1,7 @@ const VerifiedBadge = () => ( ) const CommonThings = () => () -const SunSVG = () => () -const MoonSVG = () => () +const SunSVG = () => () +const MoonSVG = () => () const CustomIcons = {VerifiedBadge, CommonThings, SunSVG, MoonSVG} export default CustomIcons diff --git a/src/components/Layout/Header.less b/src/components/Layout/Header.less index 3a21a945..e19aba31 100644 --- a/src/components/Layout/Header.less +++ b/src/components/Layout/Header.less @@ -9,9 +9,6 @@ width: 30px; margin: 0 auto 0 auto; height: 190px; - - - } .brand { display: flex; @@ -36,7 +33,8 @@ box-shadow: 0px 9px 15px -6px rgba(158,158,158,0.82); display: flex; width: 100%; - background-color: #F3F3F3; + background-color: #FEB500; // * #F3F3F3 *// + color:#fff; height: 45px; z-index: 9; align-items: center; @@ -109,7 +107,7 @@ } .button { - color: #b2b0c7; + color:#fff; width: 40px; height: 40px; line-height: 40px; @@ -128,7 +126,7 @@ .iconButton { - color: #b2b0c7; + color: @Theme-Shade-Color; width: 40px; height: 40px; display: flex; diff --git a/src/components/Layout/L_Sider.js b/src/components/Layout/Sider.js similarity index 88% rename from src/components/Layout/L_Sider.js rename to src/components/Layout/Sider.js index ebd67ebc..c83360c8 100644 --- a/src/components/Layout/L_Sider.js +++ b/src/components/Layout/Sider.js @@ -1,10 +1,11 @@ import React, { PureComponent } from 'react' import PropTypes from 'prop-types' +import classnames from 'classnames' import * as antd from 'antd' import { withI18n, Trans } from '@lingui/react' import ScrollBar from '../ScrollBar' import { config } from 'utils' -import styles from './L_Sider.less' +import styles from './Sider.less' import * as ycore from 'ycore'; import router from 'umi/router'; import {CustomIcons} from 'components' @@ -13,7 +14,7 @@ import {CustomIcons} from 'components' const userData = ycore.SDCP() @withI18n() -class L_Sider extends PureComponent { +class Sider extends PureComponent { constructor(props) { super(props); this.state = { @@ -48,25 +49,10 @@ class L_Sider extends PureComponent { if (ycore.DevOptions.StrictLightMode == false) { return "dark" } - if (ycore.DevOptions.StrictLightMode == true && theme == "light") { - return "light" - } - if (ycore.DevOptions.StrictLightMode == true && theme == "dark") { - return "dark" - } - } - UserIsPro(){ - if (userData.is_pro == 1){ - return true - } - return false - } - UserIsAdmin(){ - if (userData.admin == 1){ - return true - } - return false + return theme } + + handleClickMenu = e => { e.key === 'SignOut' && ycore.LogoutCall() e.key === 'settingpage' && router.push('/settings') @@ -103,11 +89,11 @@ class L_Sider extends PureComponent { theme={this.StrictMode()} width="180" collapsed={collapsed || false} - className={styles.sider} + className={classnames(styles.sider, {[styles.darkmd]: this.isDarkMode()} )} onMouseEnter={this.hover} onMouseLeave={this.hover} > - +
ycore.crouter.native('main')} src={collapsed? config.LogoPath : config.FullLogoPath } />
onCollapseChange(!collapsed)} icon={collapsed? (this.Balancer()? "right" : "double-right") : (this.Balancer()? "left" : "double-left") } />
- {this.UserIsPro()? + {ycore.booleanFix(userData.is_pro)? {collapsed ? null : Boosted Posts } @@ -135,7 +121,7 @@ class L_Sider extends PureComponent { {collapsed ? null : General Settings} - {this.UserIsAdmin()? + {ycore.booleanFix(userData.admin)? {collapsed ? null : Admin Area} @@ -169,7 +155,7 @@ class L_Sider extends PureComponent {
- {collapsed? null : } + {collapsed? null : }
@@ -179,7 +165,7 @@ class L_Sider extends PureComponent { } } -L_Sider.propTypes = { +Sider.propTypes = { menus: PropTypes.array, theme: PropTypes.string, isMobile: PropTypes.bool, @@ -188,4 +174,4 @@ L_Sider.propTypes = { onCollapseChange: PropTypes.func, } -export default L_Sider +export default Sider diff --git a/src/components/Layout/L_Sider.less b/src/components/Layout/Sider.less similarity index 81% rename from src/components/Layout/L_Sider.less rename to src/components/Layout/Sider.less index 44dcbd2a..bb84ef16 100644 --- a/src/components/Layout/L_Sider.less +++ b/src/components/Layout/Sider.less @@ -30,7 +30,6 @@ .ant-btn:hover{ background: rgb(255,255,255); background: linear-gradient(270deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.57) 95%); - } } } @@ -44,7 +43,6 @@ z-index: 200; vertical-align: middle; :global{ - .ant-btn { border: none; border-radius: unset; @@ -65,25 +63,25 @@ } .brand { - display: flex; - vertical-align: middle; - padding: 5px; - width: 100%; - max-height: 50px; - -} - -.userInfo{ - font-family: "Poppins", sans-serif; - align-items: center; - text-align: center; - h2{ - color: @LDarkMode-color + img{ + display: flex; + vertical-align: middle; + padding: 5px; + margin: 7px auto 15px auto; + width: 100%; + max-height: 58px; } } +.brand:hover{ + img{ + size: 9cm; + } +} + .avatarFull{ width: 120px; } + .avatar{ margin: 0 0 15px 0; } @@ -97,42 +95,68 @@ } } +.siderhead{ + font-family: 'Source Sans Pro', sans-serif; + display: flex; + align-items: center; + justify-content: center; + ::first-letter{ + margin-left: 7px; + } + height: 60px; + font-size: 17px; +} .siderwrapper { border-color: transparent; - font-size: 13px; font-family: "Poppins", sans-serif; height: 100%; width: 100%; left: 0; position: absolute; + :global { - .ant-menu-inline, .ant-menu-vertical, .ant-menu-vertical-left { - :hover { - background-color: rgb(80, 80, 80); - color: #fff; - } - border-right: 1px solid transparent; - } .ant-layout-sider-dark { background-color: @LDarkMode-backgroud; color: @DarkMode-color; + .ant-menu-item{ + color: @DarkMode-color; + } + .ant-menu-inline, .ant-menu-vertical, .ant-menu-vertical-left { + :hover { + background-color: rgb(80, 80, 80); + color: #fff; + } + border-right: 1px solid transparent; + } } .ant-layout-sider-light { - background-color: @LightMode-backgroud; - color: @LightMode-color; + background-color: @Theme-SiderDeco-Backgroud; + color: @Theme-SiderDeco-Color; + .ant-menu-item{ + color: @Theme-SiderDeco-Color; + } + .ant-menu-inline, .ant-menu-vertical, .ant-menu-vertical-left { + :hover { + background-color: @Theme-Hover-Backgroud; + color: #fff; + } + border-right: 1px solid transparent; + } } } } .sider { + border-right: 1px solid #dbdbdb; + border-radius: 0 10px 10px 0 ; + &.darkmd { + border: none; + } height: 100%; z-index: 50; :global { - .ant-sider{ - background-color: #fff; - } .ant-menu-sub { font-size: 14px; -webkit-box-shadow: 13px 4px 34px 0px rgba(0, 0, 0, 0.005); @@ -148,42 +172,21 @@ color: @LLightMode-color; } } - .siderhead{ - font-family: 'Source Sans Pro', sans-serif; - display: flex; - align-items: center; - justify-content: center; - ::first-letter{ - margin-left: 7px; - } - height: 60px; - font-size: 17px; - } - .sidercontainer{ - width: 100%; - display: flex; - align-items: center; - justify-content: center; - } .menuItems{ background-color: transparent; - color: @LDarkMode-color; margin-bottom: 8px; width: 100%; animation: fadein 0.5s; :global { .ant-menu-item-selected{ - background-color: rgba(82, 82, 82, 0.562); + background-color: transparent; } } - } .menuItemsCollapsed{ background-color: transparent; color: @LDarkMode-color; - width: 100%; - animation: fadein 0.5s; :global { .ant-menu-item { @@ -197,9 +200,7 @@ background-color: rgba(82, 82, 82, 0.562); } } - } - .menuContainer { height: 100%; margin: 18px 0 8px 0; @@ -209,17 +210,14 @@ } overflow-x: hidden; flex: 1; - &::-webkit-scrollbar-thumb { background-color: transparent; } - &:hover { &::-webkit-scrollbar-thumb { background-color: rgba(59, 59, 59, 0.2); } } - :global { .ant-layout-sider-children { display: flex; @@ -245,13 +243,10 @@ font-size: 14px; font-family: 'Source Sans Pro', sans-serif; } - .ant-menu-dark .ant-menu-item a { color: rgb(197, 197, 197); } - } - } } .scrollbar-container { diff --git a/src/components/Layout/index.js b/src/components/Layout/index.js index 4f80a351..9b89d66e 100644 --- a/src/components/Layout/index.js +++ b/src/components/Layout/index.js @@ -1,5 +1,5 @@ import Header from './Header' -import L_Sider from './L_Sider' +import Sider from './Sider' import Control from './Control' -export { Header, L_Sider, Control } +export { Header, Sider, Control } diff --git a/src/components/UserProfile/index.js b/src/components/UserProfile/index.js index 02d7aa7d..bf74d818 100644 --- a/src/components/UserProfile/index.js +++ b/src/components/UserProfile/index.js @@ -28,7 +28,6 @@ const UserHeader = ({ values }) => {
- {ycore.DevOptions.ShowFunctionsLogs? 'si' : 'sad'}

{values.username}{ycore.booleanFix(values.verified)? : null}

{values.about}
diff --git a/src/layouts/BaseLayout.js b/src/layouts/BaseLayout.js index e38d0f82..5ca4bcfd 100644 --- a/src/layouts/BaseLayout.js +++ b/src/layouts/BaseLayout.js @@ -12,6 +12,11 @@ import PublicLayout from './PublicLayout' import PrimaryLayout from './PrimaryLayout' import './BaseLayout.less' +const bundle = localStorage.getItem('resource_bundle') +import(`themes/${bundle}/index.less`) + + + const LayoutMap = { primary: PrimaryLayout, public: PublicLayout, diff --git a/src/layouts/PrimaryLayout.js b/src/layouts/PrimaryLayout.js index 47503904..4d75d811 100644 --- a/src/layouts/PrimaryLayout.js +++ b/src/layouts/PrimaryLayout.js @@ -5,16 +5,16 @@ import PropTypes from 'prop-types' import withRouter from 'umi/withRouter' import { connect } from 'dva' import { MyLayout } from 'components' +import classnames from 'classnames' import { Layout, Drawer, Result, Button, Checkbox } from 'antd' import { enquireScreen, unenquireScreen } from 'enquire-js' import { config, pathMatchRegexp, langFromPath } from 'utils' import store from 'store'; -import classNames from 'classnames' import Error from '../pages/404' import styles from './PrimaryLayout.less' const { Content } = Layout -const { Header, L_Sider, Control } = MyLayout +const { Header, Sider, Control } = MyLayout @withRouter @connect(({ app, loading }) => ({ app, loading })) @@ -44,17 +44,13 @@ class PrimaryLayout extends PureComponent { } }) } - componentWillUnmount() { unenquireScreen(this.enquireHandler) } - onCollapseChange = () => { this.setState({ collapsed: !this.state.collapsed }) store.set('collapsed', this.state.collapsed) - } - ResByPassHandler() { const {RemByPass} = this.state; if (RemByPass == true){ @@ -118,7 +114,7 @@ class PrimaryLayout extends PureComponent { }, } - const LeftSiderProps = { + const SiderProps = { menus, theme, isMobile, @@ -133,7 +129,8 @@ class PrimaryLayout extends PureComponent { } const ContainerProps = { theme, - location + location, + collapsed, } const MobileWarning = () =>{ if (resbypass == false) { @@ -149,19 +146,19 @@ class PrimaryLayout extends PureComponent { return null } + return (
- -
-
-
- + +
+ + {children} -
+
diff --git a/src/layouts/PrimaryLayout.less b/src/layouts/PrimaryLayout.less index 55b6e20f..e23ff3ed 100644 --- a/src/layouts/PrimaryLayout.less +++ b/src/layouts/PrimaryLayout.less @@ -19,12 +19,18 @@ } .content { - height: 100vh; - /* width: 100vw; */ - margin: 5px 15px 5px 50px; + vertical-align: middle; + width: 100%; + float: right; + padding: 35px 25px 15px 60px; + transition: all 0.2s ease; + &.collapsed { + width: ~'calc(100% - 180px)'; + transition: all 0.2s ease; + } } .container_light { - background-color: #E2E6E9; + background-color: @Theme-Layout-Backgroud; //#E2E6E9; transition: background-color 200ms linear; } // TODO: Complete full dark theme diff --git a/src/models/app.js b/src/models/app.js index cd0e4681..919dd28b 100644 --- a/src/models/app.js +++ b/src/models/app.js @@ -76,7 +76,7 @@ export default { // Runtime ycore.MakeBackup() ycore.UpdateSDCP() - + return } else if(!pathMatchRegexp(['','/login'], window.location.pathname)) { console.log('REP') @@ -84,12 +84,14 @@ export default { ycore.LogoutCall() } else{ + router.push({pathname: '/login',}) ycore.RefreshONCE() } } - if(pathMatchRegexp(['/'], window.location.pathname)){ + if(pathMatchRegexp([''], window.location.pathname)){ router.push({pathname: '/login',}) } + }, }, reducers: { diff --git a/src/pages/about/index.js b/src/pages/about/index.js new file mode 100644 index 00000000..b531c78f --- /dev/null +++ b/src/pages/about/index.js @@ -0,0 +1,21 @@ +import React from 'react' +import styles from './index.less' +import * as ycore from 'ycore' +import * as antd from 'antd' + + +class AppAbout extends React.Component { + render(){ + return( +
+ + + +

{ycore.AppInfo.name}

+ v{ycore.AppInfo.version}{ycore.DetectNoNStableBuild('TagComponent')} +
+
+ ) + } +} +export default AppAbout \ No newline at end of file diff --git a/src/pages/about/index.less b/src/pages/about/index.less new file mode 100644 index 00000000..83de9678 --- /dev/null +++ b/src/pages/about/index.less @@ -0,0 +1,17 @@ +.aboutWrapper{ + margin: auto; + max-width: 70vw; + width: 500px; + vertical-align: middle; + position: relative; + background-color: rgba(73, 72, 72, 0.349); + img{ + width: 100%; + padding: 15px; + } +} + +.appName { + font-family: "Poppins", sans-serif; + font-size: 27px; +} \ No newline at end of file diff --git a/src/pages/main/index.js b/src/pages/main/index.js index 83162799..465d43a1 100644 --- a/src/pages/main/index.js +++ b/src/pages/main/index.js @@ -37,7 +37,7 @@ class Main extends React.Component { ) } catch (err) { ycore.notifyError(err) - const paylodd = {user: 'Error', ago: '', avatar: '', content: 'Error displaying data :/', publisher: '' } + const paylodd = {user: '', ago: '', avatar: '', content: '', publisher: '' } return } @@ -48,15 +48,12 @@ class Main extends React.Component { const { loading, createPost } = this.state; return (
- - {createPost? {this.handleRefreshList()}} /> : null} {loading? :
- document.getElementById("PostsWrapper") } /> {this.renderFeedPosts()}
} diff --git a/src/themes/light_ng/index.less b/src/themes/light_ng/index.less new file mode 100644 index 00000000..19fa8803 --- /dev/null +++ b/src/themes/light_ng/index.less @@ -0,0 +1,11 @@ +@Theme-Shade-1: #ff971d; +@Theme-Shade-2: #ffe8d6; +@Theme-Shade-3: #f9f6f7; +@Theme-Shade-4: #ffffff; + +@Theme-Shade-Color: #f9f6f7; +@Theme-Layout-Backgroud: #FAFAFA; +@Theme-SiderDeco-Backgroud: #4D91EA; +@Theme-SiderDeco-Color: #f9f6f7; + +@Theme-Hover-Backgroud: rgba(107, 162, 235, 0.507); \ No newline at end of file diff --git a/src/themes/vars.less b/src/themes/vars.less index 0005321e..42d23077 100644 --- a/src/themes/vars.less +++ b/src/themes/vars.less @@ -1,5 +1,6 @@ @import '~themes/default.less'; @import '~themes/mixin.less'; +@import '~themes/light_ng/index.less'; @DarkMode-backgroud_container: rgb(24, 26, 27); @DarkMode-backgroud: #212121;