From 44127d77f486bcf85682a118a327745c26695f82 Mon Sep 17 00:00:00 2001 From: srgooglo <38926803+srgooglo@users.noreply.github.com> Date: Sun, 16 Feb 2020 17:20:14 +0100 Subject: [PATCH] 0.1.16-T1 Layout Update --- globals/endpoints.js | 3 +- package.json | 2 +- src/@ycore/libs/comty_ng/pre.js | 74 ++++----- src/components/Layout/Sider.less | 14 +- src/components/LikeBtn/index.js | 22 +++ src/components/LikeBtn/index.scss | 214 +++++++++++++++++++++++++ src/components/MainFeed/index.js | 89 ++++++++++ src/components/MicroHeader/index.js | 53 ++++++ src/components/MicroHeader/index.less | 23 +++ src/components/PostCard/index.js | 18 +-- src/components/PostCreator/index.js | 23 ++- src/components/UserProfile/index.js | 48 ++---- src/components/UserProfile/styles.less | 31 ++-- src/components/index.js | 5 +- src/layouts/BaseLayout.js | 5 - src/layouts/BaseLayout.less | 4 +- src/layouts/PrimaryLayout.js | 5 +- src/layouts/PrimaryLayout.less | 10 +- src/pages/main/index.js | 47 +----- src/pages/settings/style.less | 17 +- 20 files changed, 530 insertions(+), 177 deletions(-) create mode 100644 src/components/LikeBtn/index.js create mode 100644 src/components/LikeBtn/index.scss create mode 100644 src/components/MainFeed/index.js create mode 100644 src/components/MicroHeader/index.js create mode 100644 src/components/MicroHeader/index.less diff --git a/globals/endpoints.js b/globals/endpoints.js index 6f9faf8f..8d2ba07c 100644 --- a/globals/endpoints.js +++ b/globals/endpoints.js @@ -1,6 +1,6 @@ module.exports = { Endpoints: { - get_user_posts: "https://api.ragestudio.net/RS-YIBTP/yid/posts?access_token=", + get_posts: "https://api.ragestudio.net/RS-YIBTP/yid/posts?access_token=", find_user: "https://api.ragestudio.net/RS-YIBTP/yid/find_user?access_token=", search_endpoint: "https://api.ragestudio.net/RS-YIBTP/yid/search?access_token=", get_sessions: "https://api.ragestudio.net/RS-YIBTP/yid/session_id?access_token=", @@ -12,7 +12,6 @@ module.exports = { get_marketplace_global: "https://api.ragestudio.net/RS-YIBTP/rs/marketplaceHandler?access_token=", get_config_endpoint: "https://api.ragestudio.net/RS-YIBTP/yid/get-site-settings?access_token=", get_userData_endpoint: "https://api.ragestudio.net/RS-YIBTP/yid/get-user-data?access_token=", - get_userPostFeed: "https://api.ragestudio.net/RS-YIBTP/yid/posts?access_token=", update_userData_endpoint: "https://api.ragestudio.net/RS-YIBTP/yid/update-user-data?access_token=", removeToken: "https://api.ragestudio.net/RS-YIBTP/yid/delete-access-token?access_token=", register_endpoint: "https://api.ragestudio.net/RS-YIBTP/yid/create-account", diff --git a/package.json b/package.json index ac7dbc16..e3174f80 100644 --- a/package.json +++ b/package.json @@ -2,7 +2,7 @@ "name": "comty-development", "title": "Comty™", "DevBuild": true, - "version": "0.1.15", + "version": "0.1.16", "description": "", "main": "index.js", "author": "RageStudio", diff --git a/src/@ycore/libs/comty_ng/pre.js b/src/@ycore/libs/comty_ng/pre.js index 615309e4..c37f2403 100644 --- a/src/@ycore/libs/comty_ng/pre.js +++ b/src/@ycore/libs/comty_ng/pre.js @@ -49,47 +49,39 @@ export function SeachKeywords(key, callback){ }) } -export function GetUserPosts(id, callback) { - let formdata = new FormData(); - formdata.append("server_key", ycore.yConfig.server_key); - formdata.append("type", "get_user_posts"); - formdata.append("id", id) - const urlOBJ = `${ycore.endpoints.get_user_posts}${ycore.GetUserToken.decrypted().UserToken}` - const settings = { - "url": urlOBJ, - "method": "POST", - "timeout": 10000, - "processData": false, - "mimeType": "multipart/form-data", - "contentType": false, - "data": formdata - }; - jquery.ajax(settings) - .done(function (response) { - return callback(null, response); - }) - .fail(function (response) { - const exception = 'Request Failed'; - return callback(exception, response); - }) -} - -export function GetFeedPosts(callback) { - let formdata = new FormData(); - formdata.append("server_key", ycore.yConfig.server_key); - formdata.append("type", "get_news_feed"); - const requestOptions = { - method: 'POST', - body: formdata, - redirect: 'follow' - }; - const objUrl = `${ycore.endpoints.get_userPostFeed}${ycore.GetUserToken.decrypted().UserToken}` - fetch(objUrl, requestOptions) - .then(response => response.text()) - .then(result => { - return callback( null, result) - }) - .catch(error => console.log('Load Post error => ', error)) +export function GetPosts(userid, type, callback) { + let formdata = new FormData(); + formdata.append("server_key", ycore.yConfig.server_key); + switch (type) { + case 'feed': + formdata.append("type", "get_news_feed"); + break; + case 'user': + formdata.append("type", "get_user_posts"); + formdata.append("id", userid) + break; + default: + formdata.append("type", "get_news_feed"); + break; + } + const urlOBJ = `${ycore.endpoints.get_posts}${ycore.GetUserToken.decrypted().UserToken}` + const settings = { + "url": urlOBJ, + "method": "POST", + "timeout": 10000, + "processData": false, + "mimeType": "multipart/form-data", + "contentType": false, + "data": formdata + }; + jquery.ajax(settings) + .done(function (response) { + return callback(null, response); + }) + .fail(function (response) { + const exception = 'Request Failed'; + return callback(exception, response); + }) } export const get_app_session = { diff --git a/src/components/Layout/Sider.less b/src/components/Layout/Sider.less index bb84ef16..18da473f 100644 --- a/src/components/Layout/Sider.less +++ b/src/components/Layout/Sider.less @@ -63,6 +63,7 @@ } .brand { + cursor: pointer; img{ display: flex; vertical-align: middle; @@ -72,11 +73,7 @@ max-height: 58px; } } -.brand:hover{ - img{ - size: 9cm; - } -} + .avatarFull{ width: 120px; @@ -92,7 +89,6 @@ bottom: 0; position: absolute; width: 100%; - } } .siderhead{ @@ -120,6 +116,9 @@ .ant-layout-sider-dark { background-color: @LDarkMode-backgroud; color: @DarkMode-color; + h2{ + color: @Theme-SiderDeco-Color; + } .ant-menu-item{ color: @DarkMode-color; } @@ -134,6 +133,9 @@ .ant-layout-sider-light { background-color: @Theme-SiderDeco-Backgroud; color: @Theme-SiderDeco-Color; + h2{ + color: @Theme-SiderDeco-Color; + } .ant-menu-item{ color: @Theme-SiderDeco-Color; } diff --git a/src/components/LikeBtn/index.js b/src/components/LikeBtn/index.js new file mode 100644 index 00000000..edf2687c --- /dev/null +++ b/src/components/LikeBtn/index.js @@ -0,0 +1,22 @@ +import React from 'react' +import styles from './index.scss' +import classnames from 'classnames' + +class LikeBTN extends React.PureComponent { + render(){ + const { active } = this.props + return( + + ) + } +} + +export default LikeBTN \ No newline at end of file diff --git a/src/components/LikeBtn/index.scss b/src/components/LikeBtn/index.scss new file mode 100644 index 00000000..668c2104 --- /dev/null +++ b/src/components/LikeBtn/index.scss @@ -0,0 +1,214 @@ +.like_button, .like_button:before, .like_button:after { + position: relative; + box-sizing: border-box; + } + .ripple, .ripple:before, .ripple:after { + position: relative; + box-sizing: border-box; + } + + :root { + --color-heart: #EA442B; + --easing: cubic-bezier(.7,0,.3,1); + --duration: .5s; + } + + + .like_button { + font-size: 40px; + border: none; + border-radius: 50%; + background: white; + width: 1em; + height: 1em; + padding: 0; + margin: 0; + outline: none; + z-index: 2; + transition: transform var(--duration) var(--easing); + cursor: pointer; + + &:before { + z-index: -1; + content: ''; + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + border-radius: inherit; + transition: inherit; + } + + &:after { + content: ''; + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + background-color: #fff; + border-radius: inherit; + z-index: -1; + } + + &:active { + &:before { + animation: depress-shadow var(--duration) var(--easing) both; + } + } + + &:focus:after { + animation: depress var(--duration) var(--easing) both; + } + + @keyframes depress { + from, to { + transform: none; + } + 50% { + transform: translateY(5%) scale(0.9); + } + } + + @keyframes depress-shadow { + from, to { + transform: none; + } + 50% { + transform: scale(0.5); + } + } + } + + .like_wrapper { + display: grid; + align-items: center; + justify-content: center; + z-index: 1; + > * { + margin: auto; + grid-area: 1 / 1; + } + } + + .heart { + width: .5em; + height: .5em; + display: block; + + > path { + stroke: var(--color-heart); + stroke-width: 2; + fill: transparent; + transition: fill var(--duration) var(--easing); + + .like_button:focus & { + fill: var(--color-heart); + } + } + + transform-origin: center 80%; + &.activated{ + animation: heart-bounce var(--duration) var(--easing); + @keyframes heart-bounce { + 40% { transform: scale(0.7); } + 0%, 80%, 100% { transform: scale(1); } + } + } + .like_button:focus & { + animation: heart-bounce var(--duration) var(--easing); + @keyframes heart-bounce { + 40% { transform: scale(0.7); } + 0%, 80%, 100% { transform: scale(1); } + } + } + } + + /* Added wrapper to prevent layout jank with resizing particles */ + .particles { + + width: 100%; + height: 100%; + } + + .particle { + position: absolute; + top: 0; + left: 0; + height: .1em; + width: .1em; + border-radius: .05em; + background-color: var(--color); + --percentage: calc( var(--i) / var(--total-particles) ); + --Θ: calc( var(--percentage) * 1turn ); + transform: translate(-50%, -50%) rotate( var(--Θ) ) translateY(0) scaleY(0); + transition: all var(--duration) var(--easing); + + .like_button:focus & { + animation: particles-out calc(var(--duration) * 1.2) var(--easing) forwards; + + @keyframes particles-out { + 50% { + height: .3em; + } + 50%, 60% { + height: .3em; + transform: + translate(-50%, -50%) + rotate( var(--Θ) ) + translateY(.8em) + scale(1) + ; + } + 60% { + height: .2em; + } + 100% { + transform: + translate(-50%, -50%) + rotate( var(--Θ) ) + translateY(1em) + scale(0) + ; + } + } + } + } + + .ripple { + height: 1em; + width: 1em; + border-radius: 50%; + overflow: hidden; + z-index: 1; + + &:before { + content: ''; + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + border: .4em solid var(--color-heart); + border-radius: inherit; + transform: scale(0); + } + + .like_button:focus & { + &:before { + animation: ripple-out var(--duration) var(--easing); + @keyframes ripple-out { + from { transform: scale(0); } + to { transform: scale(5); } + } + } + } + } + + + /* Reset the animation when clicking again! */ + .like_button:focus { + pointer-events: none; + cursor: normal; + } \ No newline at end of file diff --git a/src/components/MainFeed/index.js b/src/components/MainFeed/index.js new file mode 100644 index 00000000..1e0e7f53 --- /dev/null +++ b/src/components/MainFeed/index.js @@ -0,0 +1,89 @@ +import React from 'react' +import * as antd from 'antd' +import * as ycore from 'ycore' +import {PostCard} from 'components' + +var userData = ycore.SDCP() + +export function RefreshFeed(){ + ycore.DevOptions.ShowFunctionsLogs? console.log('Refreshing Feed...') : null + window.MainFeedComponent.handleRefreshList(); + return +} +class MainFeed extends React.Component { + constructor(props){ + super(props) + window.MainFeedComponent = this; + this.state = { + loading: true, + } + } + toogleLoader(){ + this.setState({ loading: !this.state.loading }) + } + componentDidMount(){ + const { get, uid, filters } = this.props + if (!get) { + console.error('Please, fill params with an catch type...') + return + } + ycore.GetPosts(uid, get, (err, result) => this.setState({ feedRaw: result, loading: false })) + } + handleRefreshList(){ + const { get, uid, filters } = this.props + if (!get) { + console.error('Please, fill params with an catch type...') + return + } + this.toogleLoader() + ycore.GetPosts(uid, get, (err, result) => this.setState({ feedRaw: result, loading: false })) + } + renderFeedPosts(e){ + const {feedRaw} = this.state + const { get, filters } = this.props + try { + const feedParsed = JSON.parse(feedRaw)['data'] + ycore.DevOptions.ShowFunctionsLogs? console.log(feedParsed) : null + return ( + feedParsed.map(item=> { + const {id, postText, post_time, publisher, postFile, postFileName, is_liked, is_post_saved, is_post_reported, is_post_boosted, is_post_pinned, post_likes} = item + const paylodd = { + user: publisher.username, + ago: post_time, + avatar: publisher.avatar, + content: postText, + file: postFile, + postFileName: postFileName, + publisher: publisher, + post_likes: post_likes, + is_liked: is_liked, + is_post_saved: is_post_saved, + is_post_reported: is_post_reported, + is_post_boosted: is_post_boosted, + is_post_pinned: is_post_pinned, + } + return + }) + ) + } catch (err) { + ycore.notifyError(err) + const paylodd = {user: '', ago: '', avatar: '', content: '', publisher: '' } + return + } + + } + render(){ + const { loading } = this.state; + return ( +
+ {loading? + + + : + this.renderFeedPosts() + } +
+ ) + } +} +export default MainFeed; \ No newline at end of file diff --git a/src/components/MicroHeader/index.js b/src/components/MicroHeader/index.js new file mode 100644 index 00000000..856bf61d --- /dev/null +++ b/src/components/MicroHeader/index.js @@ -0,0 +1,53 @@ +import React from 'react' +import * as ycore from 'ycore' +import * as antd from 'antd' +import styles from './index.less' +import Radium, {StyleRoot}from 'radium'; +import { fadeInUp, bounceOutDown } from 'react-animations' + +const animationStyles = { + fadeInUp: { + animation: 'x 0.5s', + animationName: Radium.keyframes(fadeInUp, 'fadeInUp') + }, + bounceOutDown: { + animation: 'x 1s', + animationName: Radium.keyframes(bounceOutDown, 'bounceOutDown') + } +} + +export function HandleShow(){ + window.MicroHeaderComponent.toogleShow(); + return +} +class MicroHeader extends React.Component { + constructor(props){ + super(props), + window.MicroHeaderComponent = this; + this.state = { + FadeIN: true, + Show: false + } + } + toogleShow(){ + this.setState({FadeIN: !this.state.FadeIN}) + this.state.FadeIN? this.setState({ Show: true }) : setTimeout(() => this.setState({ Show: false }), 1000) + } + render(){ + const { FadeIN, Show } = this.state + return( + Show? ( + +
+ + + Gatitos el gai + + +
+ + ) : null + ) + } +} +export default MicroHeader \ No newline at end of file diff --git a/src/components/MicroHeader/index.less b/src/components/MicroHeader/index.less new file mode 100644 index 00000000..1393d103 --- /dev/null +++ b/src/components/MicroHeader/index.less @@ -0,0 +1,23 @@ +@import '~themes/vars.less'; +.MicroHeader{ + background-color: transparent; + padding: 0 5px 0 5px; + width: 100%; + height: auto; + position: absolute; + z-index: 100; + top: 0; + text-align: center; + :global { + .ant-card-body { + background-color: rgba(0, 0, 0, 0.1); + max-width: 7%; + margin: auto; + padding: 5px; + } + .ant-btn { + background-color: rgba(0, 0, 0, 0.1); + margin: 3px; + } + } +} \ No newline at end of file diff --git a/src/components/PostCard/index.js b/src/components/PostCard/index.js index 6f0b5635..1198b83e 100644 --- a/src/components/PostCard/index.js +++ b/src/components/PostCard/index.js @@ -1,13 +1,13 @@ import React from 'react' import * as antd from 'antd' import styles from './index.less' -import {CustomIcons} from 'components' +import {CustomIcons, LikeBTN} from 'components' +import * as ycore from 'ycore' const { Meta } = antd.Card; // Set default by configuration const emptyPayload = {user: 'Post Empty', ago: 'This Post is empty', avatar: 'https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png', content: 'Test Test' } -const defaultActions = [,,] class PostCard extends React.PureComponent{ constructor(props){ @@ -53,23 +53,19 @@ class PostCard extends React.PureComponent{ ) } } - isVerifiedAccount(e){ - if(e.verified == 1){ - return true - } - return false - } + + render(){ const { payload, customActions, } = this.props - const { user, ago, avatar, content, file, postFileName, publisher } = payload || emptyPayload; + const { user, ago, avatar, content, file, postFileName, publisher, post_likes } = payload || emptyPayload; + const defaultActions = [
{post_likes}
,,] const actions = customActions || defaultActions; - return(
} - title={} + title={} description={{ago}} bordered="false" /> diff --git a/src/components/PostCreator/index.js b/src/components/PostCreator/index.js index 351a9861..bf757571 100644 --- a/src/components/PostCreator/index.js +++ b/src/components/PostCreator/index.js @@ -3,13 +3,20 @@ import * as antd from 'antd' import * as ycore from 'ycore' import styles from './index.less' import {CustomIcons} from 'components' +import { RefreshFeed } from 'components/MainFeed' const { Meta } = antd.Card; +export function HandleVisibility(){ + window.PostCreatorComponent.ToogleVisibility(); + return +} class PostCreator extends React.PureComponent{ constructor(props){ super(props), + window.PostCreatorComponent = this; this.state = { + visible: false, FadeIN: true, keys_remaining: '512', toolbox_open: false, @@ -18,7 +25,9 @@ class PostCreator extends React.PureComponent{ posting_ok: false } } - + ToogleVisibility(){ + this.setState({ visible: !this.state.visible }) + } renderPostPlayer(payload){ const ident = payload if (ident.includes('.mp4')) { @@ -58,7 +67,6 @@ class PostCreator extends React.PureComponent{ handleChanges = ({ target: { value } }) => { this.setState({ rawtext: value, keys_remaining: (ycore.DevOptions.MaxLengthPosts - value.length) }) - } handleKeysProgressBar(){ const { keys_remaining } = this.state; @@ -93,8 +101,8 @@ class PostCreator extends React.PureComponent{ .then(response => { ycore.DevOptions.ShowFunctionsLogs? console.log(response) : null this.setState({ posting_ok: true, posting: false, rawtext: ''}) - setTimeout( () => { this.setState({ posting_ok: false }) }, 1000) - refreshPull() + setTimeout( () => { this.ToogleVisibility(),this.setState({ posting_ok: false }) }, 1000) + RefreshFeed() // console.warn(`[EXCEPTION] refreshPull or/and toogleShow is not set, the controller handlers not working...`) }) @@ -102,11 +110,12 @@ class PostCreator extends React.PureComponent{ } render(){ - const { keys_remaining, } = this.state; + const { keys_remaining, visible } = this.state; const percent = (((keys_remaining/ycore.DevOptions.MaxLengthPosts) * 100).toFixed(2) ) + if (visible) { return(
- +
} title={

Create a post

} @@ -136,6 +145,8 @@ class PostCreator extends React.PureComponent{ ) + } + return null } } export default PostCreator \ No newline at end of file diff --git a/src/components/UserProfile/index.js b/src/components/UserProfile/index.js index bf74d818..9527efe0 100644 --- a/src/components/UserProfile/index.js +++ b/src/components/UserProfile/index.js @@ -3,7 +3,7 @@ import styles from './styles.less' import * as ycore from 'ycore' import * as antd from 'antd' import { PageHeaderWrapper } from '@ant-design/pro-layout'; -import {CustomIcons, PostCard} from 'components' +import {CustomIcons, MainFeed} from 'components' const userData = ycore.SDCP(); @@ -21,10 +21,11 @@ const UserHeader = ({ values }) => {
+
- +
@@ -37,29 +38,13 @@ const UserHeader = ({ values }) => {
); }; -const UserBody = ({ values }) => { - try { - const feedParsed = JSON.parse(values)['data'] - return ( - feedParsed.map(item=> { - const {id, postText, post_time, publisher, postFile, postFileName} = item - const paylodd = {user: publisher.username, ago: post_time, avatar: publisher.avatar, content: postText, file: postFile, postFileName: postFileName, publisher: publisher } - ycore.DevOptions.ShowFunctionsLogs? console.log([item], paylodd) : null - return - }) - ) - } catch (err) { - const paylodd = {user: 'Error', ago: '', avatar: '', content: 'Error displaying data :/', publisher: '' } - return - } -} - class UserProfile extends React.Component { constructor(props){ super(props), this.state = { + UUID: '', RenderValue: {}, loading: true } @@ -67,6 +52,7 @@ class UserProfile extends React.Component { componentDidMount(){ const { regx } = this.props this.initUser(regx) + // console.log('%c Halo, sabias que el gatitos es gai? ', 'font-weight: bold; font-size: 50px;color: red; text-shadow: 3px 3px 0 rgb(217,31,38) , 6px 6px 0 rgb(226,91,14) , 9px 9px 0 rgb(245,221,8) , 12px 12px 0 rgb(5,148,68) , 15px 15px 0 rgb(2,135,206) , 18px 18px 0 rgb(4,77,145) , 21px 21px 0 rgb(42,21,113)') } initUser = (e) => { @@ -74,12 +60,7 @@ class UserProfile extends React.Component { const raw = parsed.toString() const string = raw.replace('/@', "") - isOwnProfile(e)? ( - ycore.GetUserPosts(userData.id, (exception, response) => { - this.setState({ RenderValue: userData, rawbody: response, loading: false}) - })) - : - (ycore.FindUser(string, (exception, response)=> { + ycore.FindUser(string, (exception, response)=> { exception? ycore.notifyError(exception) : null try { const rp = JSON.parse(response) @@ -96,29 +77,22 @@ class UserProfile extends React.Component { ycore.DevOptions.ShowFunctionsLogs ? console.log(`Using aproximate user! => ${c1} / ${c2}`) : null ycore.crouter.native(`@${c1}`) } - ycore.GetUserPosts(rp['0'].user_id, (exception, response) => { - exception? ycore.notifyError(exception) : null - try { - this.setState({ rawbody: response }) - } catch (err) { - core.notifyError(err) - } - }) - this.setState({ RenderValue: rp['0'], loading: false }) + this.setState({ UUID: rp['0'].user_id, RenderValue: rp['0'], loading: false }) } catch (err) { ycore.notifyError(err) } }) - ) + } render(){ - const { loading } = this.state + const { loading, UUID} = this.state + console.log(UUID) return(
{loading? : (
- +
) }
diff --git a/src/components/UserProfile/styles.less b/src/components/UserProfile/styles.less index f26eb7b3..86c0794a 100644 --- a/src/components/UserProfile/styles.less +++ b/src/components/UserProfile/styles.less @@ -1,6 +1,10 @@ @import '~themes/vars.less'; - +.userWrapper{ + padding: 0 68px 15px 68px; + margin: auto; +} .UserCover { + border-radius: 15px 15px 0 0; position: relative; width: 100%; margin: -32px auto auto auto; @@ -46,23 +50,30 @@ } } +.avatar { + vertical-align: top; + flex: 0 1 72px; + position: absolute; + z-index: 10; + margin: -6% 0 0 -3%; + + & > span { + display: block; + width: 92px; + height: 92px; + } +} + .pageHeaderContent { vertical-align: top; display: flex; - .avatar { - flex: 0 1 72px; - & > span { - display: block; - width: 92px; - height: 92px; - } - } + .content { font-family: "Poppins", sans-serif; position: relative; top: 4px; flex: 1 1 auto; - margin-left: 24px; + margin: 0 0 20px 110px; color: @text-color-secondary; line-height: 22px; .contentTitle { diff --git a/src/components/index.js b/src/components/index.js index ce2c537f..58867f5f 100644 --- a/src/components/index.js +++ b/src/components/index.js @@ -1,4 +1,6 @@ import CustomIcons from './CustomIcons' +import MainFeed from './MainFeed' +import LikeBTN from './LikeBtn' import UserProfile from './UserProfile' import MainSidebar from './MainSidebar' import PostCard from './PostCard' @@ -9,5 +11,6 @@ import * as MyLayout from './Layout/index.js' import Page from './Page' import YulioID from './YulioID/experimental/index.js' import CoreLoader from './CoreLoader' +import MicroHeader from './MicroHeader' -export { UserProfile, MyLayout, Loader, Page, ScrollBar, YulioID, CoreLoader, PostCard, PostCreator, CustomIcons, MainSidebar} +export { UserProfile, MyLayout, Loader, Page, ScrollBar, YulioID, CoreLoader, PostCard, PostCreator, CustomIcons, MainSidebar, LikeBTN, MainFeed, MicroHeader} diff --git a/src/layouts/BaseLayout.js b/src/layouts/BaseLayout.js index 5ca4bcfd..e38d0f82 100644 --- a/src/layouts/BaseLayout.js +++ b/src/layouts/BaseLayout.js @@ -12,11 +12,6 @@ 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/BaseLayout.less b/src/layouts/BaseLayout.less index 31180cf5..9638f196 100644 --- a/src/layouts/BaseLayout.less +++ b/src/layouts/BaseLayout.less @@ -2,7 +2,9 @@ @import '~themes/index.less'; :global { - + #root { + width: 100%; + } #nprogress { pointer-events: none; diff --git a/src/layouts/PrimaryLayout.js b/src/layouts/PrimaryLayout.js index 4d75d811..501692ff 100644 --- a/src/layouts/PrimaryLayout.js +++ b/src/layouts/PrimaryLayout.js @@ -4,7 +4,7 @@ import React, { PureComponent, Fragment } from 'react' import PropTypes from 'prop-types' import withRouter from 'umi/withRouter' import { connect } from 'dva' -import { MyLayout } from 'components' +import { MyLayout, MicroHeader } from 'components' import classnames from 'classnames' import { Layout, Drawer, Result, Button, Checkbox } from 'antd' import { enquireScreen, unenquireScreen } from 'enquire-js' @@ -153,8 +153,9 @@ class PrimaryLayout extends PureComponent {
+
- + {children} diff --git a/src/layouts/PrimaryLayout.less b/src/layouts/PrimaryLayout.less index e23ff3ed..866fc7b2 100644 --- a/src/layouts/PrimaryLayout.less +++ b/src/layouts/PrimaryLayout.less @@ -74,6 +74,14 @@ .ant-card{ background-color: @DarkMode-backgroud; } + .ant-input { + color: @DarkMode-color_container; + background-color: @DarkMode-backgroud; + } + .ant-btn-primary[disabled]{ + color: @DarkMode-color_container; + background-color: @DarkMode-backgroud; + } transition: background-color 200ms linear; } } @@ -87,12 +95,10 @@ background-color: #2d2d2d; color: white; } - .ant-menu-dark { background-color: #2d2d2d; color: white; } - .ant-layout-sider-dark .ant-layout-sider-children { background-color: #2d2d2d; display: flex; diff --git a/src/pages/main/index.js b/src/pages/main/index.js index 465d43a1..b2dac3f0 100644 --- a/src/pages/main/index.js +++ b/src/pages/main/index.js @@ -1,8 +1,11 @@ import React from 'react' import * as antd from 'antd' import * as ycore from 'ycore' -import {PostCard, PostCreator, MainSidebar} from 'components' +import {PostCreator, MainSidebar, MainFeed, MicroHeader} from 'components' import styles from './index.less' +import { RefreshFeed } from 'components/MainFeed' +import { HandleVisibility } from 'components/PostCreator' +import { HandleShow } from 'components/MicroHeader' var userData = ycore.SDCP() @@ -10,53 +13,15 @@ class Main extends React.Component { constructor(props){ super(props) this.state = { - feedRaw: '', loading: true, createPost: true, } } - - componentDidMount(){ - ycore.GetFeedPosts((err, result) => this.setState({ feedRaw: result, loading: false })) - } - handleRefreshList(){ - this.setState({ createPost: !this.state.createPost }) - ycore.GetFeedPosts((err, result) => this.setState({ feedRaw: result, loading: false })) - } - - renderFeedPosts(){ - const {feedRaw} = this.state - try { - const feedParsed = JSON.parse(feedRaw)['data'] - return ( - feedParsed.map(item=> { - const {id, postText, post_time, publisher, postFile, postFileName} = item - const paylodd = {user: publisher.username, ago: post_time, avatar: publisher.avatar, content: postText, file: postFile, postFileName: postFileName, publisher: publisher } - return - }) - ) - } catch (err) { - ycore.notifyError(err) - const paylodd = {user: '', ago: '', avatar: '', content: '', publisher: '' } - return - } - - } - getTarget = () => document.getElementById("PostsWrapper") render(){ - const target = this.getTarget(); - const { loading, createPost } = this.state; return (
- {createPost? {this.handleRefreshList()}} /> : null} - {loading? - - - : -
- document.getElementById("PostsWrapper") } /> - {this.renderFeedPosts()} -
} + +
) } diff --git a/src/pages/settings/style.less b/src/pages/settings/style.less index e7b494f5..80da049a 100644 --- a/src/pages/settings/style.less +++ b/src/pages/settings/style.less @@ -3,17 +3,22 @@ .titleHead{ font-family: "Nunito", sans-serif; } + .main { display: flex; width: 100%; height: 100%; overflow: auto; - background-color: @menu-bg; + color: @DarkMode-color_container; + background-color: @DarkMode-backgroud; .leftMenu { width: 224px; border-right: @border-width-base @border-style-base @border-color-split; :global { + .ant-menu-inline { + color: @DarkMode-color_container; + background-color: @DarkMode-backgroud; border: none; } .ant-menu:not(.ant-menu-horizontal) .ant-menu-item-selected { @@ -72,16 +77,6 @@ } } - // 密码强度 - font.strong { - color: @success-color; - } - font.medium { - color: @warning-color; - } - font.weak { - color: @error-color; - } } @media screen and (max-width: @screen-md) {