diff --git a/globals/endpoints.js b/globals/endpoints.js index 8e963851..02fde365 100755 --- a/globals/endpoints.js +++ b/globals/endpoints.js @@ -1,5 +1,6 @@ module.exports = { Endpoints: { + follow_user: "https://api.ragestudio.net/RSA-COMTY/yid/follow-user?access_token=", action_post: "https://api.ragestudio.net/RSA-COMTY/yid/post-actions?access_token=", get_posts: "https://api.ragestudio.net/RSA-COMTY/yid/posts?access_token=", find_user: "https://api.ragestudio.net/RSA-COMTY/yid/find_user?access_token=", diff --git a/package.json b/package.json index 7e15af1c..a1496e02 100755 --- a/package.json +++ b/package.json @@ -2,7 +2,7 @@ "name": "comty-development", "title": "Comty™", "DevBuild": true, - "version": "0.2.03", + "version": "0.2.05", "description": "", "main": "index.js", "author": "RageStudio", @@ -15,7 +15,7 @@ "@material-ui/icons": "^4.9.1", "@steveeeie/react-page-transition": "^1.1.2", "ant-design-pro": "^2.3.2", - "antd": "^4.0.0", + "antd": "^4.0.1", "autoprefixer": "9.7.4", "axios": "^0.19.2", "babel-core": "7.0.0-bridge.0", diff --git a/src/@ycore/libs/comty_ng/pre.js b/src/@ycore/libs/comty_ng/pre.js index 50246d47..4f5f3392 100755 --- a/src/@ycore/libs/comty_ng/pre.js +++ b/src/@ycore/libs/comty_ng/pre.js @@ -2,6 +2,28 @@ import * as ycore from 'ycore' var jquery = require("jquery"); import * as Icons from '@ant-design/icons' +export function follow_user(id, callback) { + let formdata = new FormData(); + formdata.append("user_id", id); + formdata.append("server_key", ycore.yConfig.server_key); + const requestOptions = { + method: 'POST', + body: formdata, + redirect: 'follow' + }; + ycore.DevOptions.ShowFunctionsLogs? console.log(`Following user => ${id} `) : null + const urlObj = `${ycore.endpoints.follow_user}${ycore.GetUserToken.decrypted().UserToken}` + fetch(urlObj, requestOptions) + .then(response => { + ycore.DevOptions.ShowFunctionsLogs? console.log(response) : null + return callback(false, response) + }) + .catch(error => { + console.log('error', error) + return callback(true, error) + }); +} + export const GetPostPrivacy = { bool: (e) => { switch (e) { @@ -39,12 +61,12 @@ export function PublishPost(privacy, raw, file, callback){ if(!rawtext){ return null } - console.log(privacy) let formdata = new FormData(); formdata.append("user_id", ycore.GetUserToken.decrypted().UserID); formdata.append("server_key", ycore.yConfig.server_key); formdata.append("postPrivacy", privacy) formdata.append("postText", raw); + file? formdata.append("postPhotos", file) : null const requestOptions = { method: 'POST', body: formdata, diff --git a/src/components/CoreLoader/index.js b/src/components/CoreLoader/index.js index e335b7cb..04df4fe1 100755 --- a/src/components/CoreLoader/index.js +++ b/src/components/CoreLoader/index.js @@ -5,12 +5,15 @@ class CoreLoader extends React.PureComponent { const { type } = this.props; if ( type == 'circle') { return ( -
-
- - - -
+
+
+
+
+
+
+
+
+
); } diff --git a/src/components/CoreLoader/styles.less b/src/components/CoreLoader/styles.less index 7dca8c55..a0c79969 100755 --- a/src/components/CoreLoader/styles.less +++ b/src/components/CoreLoader/styles.less @@ -136,3 +136,6 @@ html { box-sizing: border-box; } } + + + diff --git a/src/components/Layout/Sider.js b/src/components/Layout/Sider.js index 1166ce67..4f31d6a4 100755 --- a/src/components/Layout/Sider.js +++ b/src/components/Layout/Sider.js @@ -55,12 +55,13 @@ class Sider extends PureComponent { return theme } - handleClickMenu = e => { e.key === 'SignOut' && ycore.LogoutCall() e.key === 'general_settings' && ycore.crouter.native('settings') e.key === 'accountpage' && router.push('/account') + e.key === 'explore' && router.push('main') } + isDarkMode(){ const { theme } = this.props if (theme == 'dark'){ @@ -104,16 +105,6 @@ class Sider extends PureComponent { Explore - {ycore.booleanFix(userData.is_pro)? - - - Boost - - : - - - PRO - } Settings @@ -150,7 +141,7 @@ class Sider extends PureComponent {
- + ycore.crouter.native(`@${userData.username}`)} size={collapsed? "small" : "large"} shape={collapsed? "circle" : "square"} src={userData.avatar} className={collapsed? styles.avatar : styles.avatarFull} />
{collapsed? null :
ycore.crouter.native(`@${userData.username}`)} >

@{userData.username}

}
diff --git a/src/components/Layout/Sider.less b/src/components/Layout/Sider.less index 8efd449e..046d50fb 100755 --- a/src/components/Layout/Sider.less +++ b/src/components/Layout/Sider.less @@ -93,6 +93,7 @@ } } .siderhead{ + cursor: pointer; font-family: 'Source Sans Pro', sans-serif; display: flex; align-items: center; diff --git a/src/components/Loader/Loader.js b/src/components/Loader/Loader.js index f769598a..dc3b7894 100755 --- a/src/components/Loader/Loader.js +++ b/src/components/Loader/Loader.js @@ -10,7 +10,16 @@ const Loader = ({ spinning = true, fullScreen }) => { return (
- +
+
+
+
+
+
+
+
+
+
) @@ -23,7 +32,16 @@ const Loader = ({ spinning = true, fullScreen }) => { })} >
- +
+
+
+
+
+
+
+
+
+
) diff --git a/src/components/Loader/Loader.less b/src/components/Loader/Loader.less index dadbb586..f7c229df 100755 --- a/src/components/Loader/Loader.less +++ b/src/components/Loader/Loader.less @@ -1,6 +1,6 @@ @import '~themes/vars.less'; .loader { - background-color: rgba(255, 255, 255, 0.945); + background-color: transparent; //rgba(44, 44, 44, 0.74); width: 100%; position: absolute; top: 0; @@ -16,6 +16,12 @@ position: fixed; } + &.hidden{ + z-index: -1; + opacity: 0; + transition: opacity 3s ease 0.5s, z-index 0.1s ease 1.5s; + } + .warpper { position: absolute; right: 0; @@ -26,44 +32,87 @@ justify-content: space-around; } - .inner { - width: 40px; - height: 40px; - margin: 0 auto; - text-indent: -12345px; - border-top: 1px solid rgba(0, 0, 0, 0.08); - border-right: 1px solid rgba(0, 0, 0, 0.08); - border-bottom: 1px solid rgba(0, 0, 0, 0.08); - border-left: 1px solid rgba(0, 0, 0, 0.7); - border-radius: 50%; - z-index: 100001; - :local { - animation: spinner 600ms infinite linear; + .newloader { + transform: scale(0.4); + width: 0px; + height: 0px; + margin: 0 auto; + position: relative; + &.end{ + .loader { + z-index: -1; + opacity: 0; + } + >div { + animation: newloader 0.8s linear; + } + } + } + + .newloader > div { + background-color: rgb(34, 34, 34); + width: 6px; + height: 20px; + position: absolute; + left: -10px; + bottom: 15px; + border-radius: 5px; + transform-origin: 10px 35px; + transform: rotate(0deg); + animation: newloader 0.8s infinite; + } + .newloader > div:nth-child(2) { + transform: rotate(45deg); + animation-delay: 0.1s; + } + .newloader > div:nth-child(3) { + transform: rotate(90deg); + animation-delay: 0.2s; + } + .newloader > div:nth-child(4) { + transform: rotate(135deg); + animation-delay: 0.3s; + } + .newloader > div:nth-child(5) { + transform: rotate(180deg); + animation-delay: 0.4s; + } + .newloader > div:nth-child(6) { + transform: rotate(225deg); + animation-delay: 0.5s; + } + .newloader > div:nth-child(7) { + transform: rotate(270deg); + animation-delay: 0.6s; + } + .newloader > div:nth-child(8) { + transform: rotate(315deg); + animation-delay: 0.7s; + } + @keyframes unshow { + 0%{ + opacity: 1; + } + 100%{ + opacity: 0; + z-index: -1; } } - - .text { - width: 100px; - height: 20px; - text-align: center; - font-size: 12px; - letter-spacing: 4px; - color: #000; - } - - &.hidden { - z-index: -1; - opacity: 0; - transition: opacity 1s ease 0.5s, z-index 0.1s ease 1.5s; + @keyframes newloader { + 0% { + background: transparent; + left: -10px; + transform-origin: 10px 35px; + } + 30% { + background: #fff; + } + 100% { + background: transparent; + left: 10px; + transform-origin: -10px 35px; + } } } -@keyframes spinner { - 0% { - transform: rotate(0deg); - } - 100% { - transform: rotate(360deg); - } -} diff --git a/src/components/PostCard/index.js b/src/components/PostCard/index.js index 03aa4cee..5357da5b 100755 --- a/src/components/PostCard/index.js +++ b/src/components/PostCard/index.js @@ -57,7 +57,7 @@ class PostCard extends React.PureComponent{ } render(){ - const { payload, customActions, } = this.props + const { payload, customActions } = this.props const { id, user, ago, avatar, content, file, postFileName, publisher, post_likes, is_post_pinned, is_liked } = payload || emptyPayload; const defaultActions = [
,,] const actions = customActions || defaultActions; diff --git a/src/components/PostCreator/index.js b/src/components/PostCreator/index.js index ef7e19a8..c002c7af 100755 --- a/src/components/PostCreator/index.js +++ b/src/components/PostCreator/index.js @@ -11,18 +11,11 @@ const { Meta } = antd.Card; const userData = ycore.SDCP(); -const fileList = []; - - -const UploadProps = { - name:'file', - action: 'https://www.mocky.io/v2/5cc8019d300000980a055e76', - multiple: true, - listType: 'picture', - defaultFileList: [...fileList], - className: 'upload-list-inline', -}; - +function getBase64(img, callback) { + const reader = new FileReader(); + reader.addEventListener('load', () => callback(reader.result)); + reader.readAsDataURL(img); + } export function HandleVisibility(){ @@ -42,67 +35,75 @@ class PostCreator extends React.PureComponent{ posting: false, posting_ok: false, shareWith: 'any', + UploadActive: false, } } ToogleVisibility(){ this.setState({ visible: !this.state.visible }) } - renderPostPlayer(payload){ - const ident = payload - if (ident.includes('.mp4')) { - return ( - - ) - } - if (ident.includes('.webm')) { - return ( - - ) - } - if (ident.includes('.mp3')){ - return ( - - ) - } - if (ident.includes('.ogg')){ - return ( - - ) - } - else { - return ( - - ) - } + + ToogleUpload(){ + this.setState({ UploadActive: !this.state.UploadActive }) } - + + handleFileUpload = info => { + console.log('handle') + if (info.file.status === 'uploading') { + this.setState({ loading: true }); + return; + } + if (info.file.status === 'done') { + // Get this url from response in real world. + getBase64(info.file.originFileObj, imageUrl => + this.setState({ + imageUrl, + loading: false, + }), + ); + } + }; + + beforeUpload(file) { + console.log('before') + const isJpgOrPng = file.type === 'image/jpeg' || file.type === 'image/png'; + if (!isJpgOrPng) { + message.error('You can only upload JPG/PNG file!'); + } + const isLt2M = file.size / 1024 / 1024 < 2; + if (!isLt2M) { + message.error('Image must smaller than 2MB!'); + } + return isJpgOrPng && isLt2M; + } + handleChanges = ({ target: { value } }) => { this.setState({ rawtext: value, keys_remaining: (ycore.DevOptions.MaxLengthPosts - value.length) }) } + handleKeysProgressBar(){ const { keys_remaining } = this.state; if (keys_remaining <= 80) { return 'exception' }else return('active') } + handleToggleToolbox = () =>{ this.setState({ toolbox_open: !this.state.toolbox_open }) } - HandlePublishPost = (e) => { - const { rawtext, shareWith, postFile} = this.state; + + handlePublishPost = (e) => { + const { rawtext, shareWith, imageUrl} = this.state; + let postFile; + if (imageUrl) { + console.log('EXIST ',imageUrl) + postFile = imageUrl; + } if(!rawtext){ return null } this.setState({ posting: true, keys_remaining: '512' }) + console.log('to post ',postFile) ycore.PublishPost(ycore.GetPostPrivacy.bool(shareWith), rawtext, postFile, (err, res) => { if (err) { ycore.notifyError(err) @@ -113,13 +114,15 @@ class PostCreator extends React.PureComponent{ RefreshFeed() }) } - + render(){ const { keys_remaining, visible } = this.state; const percent = (((keys_remaining/ycore.DevOptions.MaxLengthPosts) * 100).toFixed(2) ) const changeShare = ({ key }) => { this.setState({ shareWith: key }) } + + const shareOptionsMenu = ( {ycore.GetPostPrivacy.decorator("any")} @@ -133,18 +136,35 @@ class PostCreator extends React.PureComponent{
-
- -
: (this.state.posting? : )} />
- + {this.state.UploadActive? + +

+ +

+

Click or drag file to this area to upload

+

+ Support for a single or bulk upload. +

+
+ : +
+
+ +
: (this.state.posting? : )} />
+
}
- - - - + + this.ToogleUpload()} > diff --git a/src/components/PostCreator/index.less b/src/components/PostCreator/index.less index 79f077ee..74dc353d 100755 --- a/src/components/PostCreator/index.less +++ b/src/components/PostCreator/index.less @@ -158,6 +158,13 @@ } } +.avatar-uploader > .ant-upload { + width: 128px; + height: 128px; + +} + + .proccessUnset{ opacity: 0; transition: opacity 250ms linear; @@ -168,6 +175,7 @@ transition: opacity 250ms linear; animation: proccessSet 250ms linear; } + @keyframes proccessSet { 0% { opacity: 0; } 100% { opacity: 1; } diff --git a/src/components/SearchCard/index.js b/src/components/SearchCard/index.js new file mode 100644 index 00000000..87c6930f --- /dev/null +++ b/src/components/SearchCard/index.js @@ -0,0 +1,65 @@ +import React from 'react' +import * as antd from 'antd' +import * as ycore from 'ycore' +import styles from './index.less' +import * as Icons from '@ant-design/icons'; +import Icon from '@ant-design/icons' +import { CustomIcons } from 'components' + +const userData = ycore.SDCP() +const { Meta } = antd.Card; + + +class SearchCard extends React.PureComponent{ + render(){ + const { source, } = this.props + const { username, avatar, about, id } = source; + const DevInfo = `ID #${id} | Dev ${ycore.booleanFix(source.dev)? 'yes' : 'no'} | ` + const AdminInfo = `RID #${source.country_id} | IP ${source.ip_address} | ` + + const DataStrip = { + title: (e) => { + if( this.props.type == 'Users'){ + return (`@${username}`) + } + if( this.props.type == 'Groups'){ + return (`${source.name}`) + } + return null + }, + description: (e) => { + if( this.props.type == 'Users'){ + return (`${DevInfo}${AdminInfo}`) + } + if( this.props.type == 'Groups'){ + return (`GID #${source.group_id} | Created ${source.registered} | CAT ID #${source.category_id} / ${source.category} |`) + } + return null + }, + about: (e) => { + return( about ) + } + } + return( +
+ +
} + title={ +
+

ycore.crouter.native(`@${username}`)} className={styles.titleUser}>{DataStrip.title()}

+ {ycore.booleanFix(source.verified)? : null} +
} + description={ycore.booleanFix(userData.dev)? {DataStrip.description()} : null} + bordered="false" + /> +

+ + + + +
+ ) + } +} +export default SearchCard \ No newline at end of file diff --git a/src/components/UserCard/index.less b/src/components/SearchCard/index.less old mode 100755 new mode 100644 similarity index 98% rename from src/components/UserCard/index.less rename to src/components/SearchCard/index.less index d47faec0..ef9e76f2 --- a/src/components/UserCard/index.less +++ b/src/components/SearchCard/index.less @@ -5,9 +5,8 @@ border-radius: 7px; max-width: 510px; min-width: 265px; - margin: auto; width: auto; - margin: 23px 50px ; + margin: 23px auto 50px auto; :global{ .ant-card-meta-detail > div:not(:last-child){ margin: 0 diff --git a/src/components/UserCard/index.js b/src/components/UserCard/index.js deleted file mode 100755 index 1a92bb0e..00000000 --- a/src/components/UserCard/index.js +++ /dev/null @@ -1,48 +0,0 @@ -import React from 'react' -import * as antd from 'antd' -import * as ycore from 'ycore' -import styles from './index.less' -import * as Icons from '@ant-design/icons'; -import Icon from '@ant-design/icons' - -const userData = ycore.SDCP() -const { Meta } = antd.Card; -// Set default by configuration -const emptyPayload = {user: 'User Unknown', ago: 'This User is empty', avatar: 'https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png', content: 'Test Test' } - - -class UserCard extends React.PureComponent{ - constructor(props){ - super(props), - this.state = { - - } - } - - render(){ - const { source, } = this.props - const { username, avatar, about, id } = source || emptyPayload; - const DevInfo = `ID #${id} | Developer ${ycore.booleanFix(source.dev)? 'yes' : 'no'} |` - const AdminInfo = `Email ${source.email} | ` - return( -
- -
} - title={ -
-

ycore.crouter.native(`@${username}`)} className={styles.titleUser}>@{username}

-
} - description={ycore.booleanFix(userData.dev)? {DevInfo} {AdminInfo} : null} - bordered="false" - /> -

{about}

- - - -
-
- ) - } -} -export default UserCard \ No newline at end of file diff --git a/src/components/UserProfile/components/like_btn.js b/src/components/UserProfile/components/like_btn.js new file mode 100644 index 00000000..301d6ab0 --- /dev/null +++ b/src/components/UserProfile/components/like_btn.js @@ -0,0 +1,11 @@ +import React from 'react' +import styles from './like_btn.scss' +import classnames from 'classnames' + +export default class Like_btn extends React.Component{ + render(){ + return( + {this.props.followed? 'Following' : 'Follow'} + ) + } +} \ No newline at end of file diff --git a/src/components/UserProfile/components/like_btn.scss b/src/components/UserProfile/components/like_btn.scss new file mode 100644 index 00000000..2a6ad2a4 --- /dev/null +++ b/src/components/UserProfile/components/like_btn.scss @@ -0,0 +1,57 @@ +$width: 120px; +$height: 40px; +$border: 0; + +$violet: #6559ae; +$orange: #ff7159; + +$border-radius: 8px; + +$deg: 120deg; +$size: 400%; +$dur: 15s; + +@mixin clip-frame($width, $height, $border) { + -webkit-clip-path: polygon(0% 100%, $border 100%, $border $border, $width - $border $border, $width - $border $height - $border, $border $height - $border, $border 100%, 100% 100%, 100% 0%, 0% 0%); +} + +.like_btn { + width: 100px; + height: 30px; + line-height: 28px; + padding: 5px 15px 5px 15px; + @extend .text-formatting; + + &:hover { + color: #7e7e7e; + } + + &.nofollowed{ + &:hover { + border: none; + content: ''; + color: white; + border-radius: $border-radius; + background: linear-gradient($deg, $violet, $orange, $violet); + background-size: $size $size; + animation: gradient $dur ease-in-out infinite, border 1s forwards ease-in-out reverse; + } + } +} + +/* helpers */ + +.text-formatting { + text-decoration: none; + text-align: center; + vertical-align: middle; + letter-spacing: 1px; +} + +/* motion */ + +@keyframes gradient { + 0% { background-position: 14% 0%; } + 50% { background-position: 87% 100%; } + 100% { background-position: 14% 0%; } +} diff --git a/src/components/UserProfile/index.js b/src/components/UserProfile/index.js index f854814a..949b7e62 100755 --- a/src/components/UserProfile/index.js +++ b/src/components/UserProfile/index.js @@ -7,6 +7,7 @@ import {CustomIcons, MainFeed} from 'components' import { SetHeaderSearchType } from 'components/HeaderSearch' import * as Icons from '@ant-design/icons'; import Icon from '@ant-design/icons' +import Like_btn from './components/like_btn.js' const userData = ycore.SDCP(); function isOwnProfile(id){ @@ -17,45 +18,25 @@ function isOwnProfile(id){ return false } -const UserHeader = ({ values }) => { - return ( -
-
- -
- - -
- -
-
-
- {ycore.booleanFix(values.nsfw_flag)? NSFW : null} - -
-
-

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

- -
- -
-
- } /> - - ); -}; - - class UserProfile extends React.Component { constructor(props){ super(props), this.state = { UUID: '', RenderValue: {}, - loading: true + loading: true, + Followed: '', } } + + handleFollowUser = () => { + ycore.follow_user(this.state.UUID, (exception, response)=>{ + if(exception){return ycore.notifyError(exception) } + this.setState({Followed: !this.state.Followed}) + return + }) + } + componentDidMount(){ const { regx } = this.props this.initUser(regx) @@ -85,21 +66,52 @@ class UserProfile extends React.Component { ycore.DevOptions.ShowFunctionsLogs ? console.log(`Using aproximate user! => ${c1} / ${c2}`) : null ycore.crouter.native(`@${c1}`) } - this.setState({ UUID: rp['0'].user_id, RenderValue: rp['0'], loading: false }) + this.setState({ UUID: rp['0'].user_id, RenderValue: rp['0'], loading: false , Followed: ycore.booleanFix(rp['0'].is_following)}) } catch (err) { ycore.notifyError(err) } }) } + + UserHeader = (values) => { + return ( +
+
+ +
+ + +
+ +
+
+
+ {ycore.booleanFix(values.nsfw_flag)? NSFW : null} + {ycore.booleanFix(values.is_pro)? CPRO™ : null} + {ycore.booleanFix(values.dev)? DEVELOPER : null} + {isOwnProfile()?
this.handleFollowUser()} >
: null} +
+
+

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

+ +
+ +
+
+ } /> + + ); + }; render(){ - const { loading, UUID} = this.state + const { loading, UUID } = this.state console.log(UUID) return(
{loading? : (
- + {this.UserHeader(this.state.RenderValue)}
) } diff --git a/src/components/UserProfile/styles.less b/src/components/UserProfile/styles.less index 76af1dff..56c33c41 100755 --- a/src/components/UserProfile/styles.less +++ b/src/components/UserProfile/styles.less @@ -1,35 +1,5 @@ @import '~themes/vars.less'; -.userWrapper{ - padding: 0 68px 15px 68px; - margin: auto; - :global{ - .ant-page-header-content { - padding-top: 0; - overflow: initial !important; - } - .ant-page-header { - padding: 20px 0 3px 0; - } - } -} -.TagWrappers{ - float: right; - position: relative; -} -.UserCover { - border-radius: 15px 15px 0 0; - position: relative; - width: 100%; - margin: -32px auto auto auto; - overflow: hidden; - max-height: 40%; - - img{ - width: 100%; - } -} - .textOverflow() { overflow: hidden; white-space: nowrap; @@ -54,19 +24,52 @@ } } -.activitiesList { - padding: 0 24px 8px 24px; - .username { - color: @text-color; - } - .event { - font-weight: normal; +.userWrapper{ + padding: 0 68px 15px 68px; + margin: auto; + :global{ + .ant-page-header-content { + padding-top: 0; + overflow: initial !important; + } + .ant-page-header { + padding: 20px 0 3px 0; + } + .ant-pro-page-header-wrap-page-header-warp { + border-radius: 0 0 20px 20px; + } } } -.avatar { - transform: translate(-40px, -50px); +.TagWrappers{ + width: 100%; + float: right; + position: relative; + margin: 0 0 7px 0 !important; +} +.UserCover { + border-radius: 15px 15px 0 0; + position: relative; + margin: -32px auto auto auto; + max-height: 400px; + overflow: hidden; + + img{ + width: calc(100% + 30px); + overflow: hidden; + margin: auto; + } +} + +.follow_wrapper{ + margin: 0 7px 0 7px; + position: relative; + float: right; +} + +.avatar { + transform: translate(-25px, -45px); & > span { position: relative; z-index: 10; @@ -75,6 +78,8 @@ } :global{ .ant-avatar { + box-shadow: 13px 13px 17px 4px rgba(69, 69, 69, 0.151); + border-radius: 7px; img{ width: 120px; } @@ -85,11 +90,12 @@ .pageHeaderContent { vertical-align: top; display: flex; - .content { font-family: "Poppins", sans-serif; color: @text-color-secondary; + width: 100%; .contentTitle { + padding: 0 10px 10px 0; color: @heading-color; font-weight: 500; font-size: 20px; @@ -98,159 +104,6 @@ } } -.extraContent { - .clearfix(); - - float: right; - white-space: nowrap; - .statItem { - position: relative; - display: inline-block; - padding: 0 32px; - > p:first-child { - margin-bottom: 4px; - color: @text-color-secondary; - font-size: @font-size-base; - line-height: 22px; - } - > p { - margin: 0; - color: @heading-color; - font-size: 30px; - line-height: 38px; - > span { - color: @text-color-secondary; - font-size: 20px; - } - } - &::after { - position: absolute; - top: 8px; - right: 0; - width: 1px; - height: 40px; - background-color: @border-color-split; - content: ''; - } - &:last-child { - padding-right: 0; - &::after { - display: none; - } - } - } -} - -.members { - a { - display: block; - height: 24px; - margin: 12px 0; - color: @text-color; - transition: all 0.3s; - .textOverflow(); - .member { - margin-left: 12px; - font-size: @font-size-base; - line-height: 24px; - vertical-align: top; - } - &:hover { - color: @primary-color; - } - } -} - -.projectList { - :global { - .ant-card-meta-description { - height: 44px; - overflow: hidden; - color: @text-color-secondary; - line-height: 22px; - } - } - .cardTitle { - font-size: 0; - a { - display: inline-block; - height: 24px; - margin-left: 12px; - color: @heading-color; - font-size: @font-size-base; - line-height: 24px; - vertical-align: top; - &:hover { - color: @primary-color; - } - } - } - .projectGrid { - width: 33.33%; - } - .projectItemContent { - display: flex; - height: 20px; - margin-top: 8px; - overflow: hidden; - font-size: 12px; - line-height: 20px; - .textOverflow(); - a { - display: inline-block; - flex: 1 1 0; - color: @text-color-secondary; - .textOverflow(); - &:hover { - color: @primary-color; - } - } - .datetime { - flex: 0 0 auto; - float: right; - color: @disabled-color; - } - } -} - -.datetime { - color: @disabled-color; -} - -@media screen and (max-width: @screen-xl) and (min-width: @screen-lg) { - .activeCard { - margin-bottom: 24px; - } - .members { - margin-bottom: 0; - } - .extraContent { - margin-left: -44px; - .statItem { - padding: 0 16px; - } - } -} - -@media screen and (max-width: @screen-lg) { - .activeCard { - margin-bottom: 24px; - } - .members { - margin-bottom: 0; - } - .extraContent { - float: none; - margin-right: 0; - .statItem { - padding: 0 16px; - text-align: left; - &::after { - display: none; - } - } - } -} @media screen and (max-width: @screen-md) { .extraContent { @@ -286,13 +139,3 @@ } } - - -.main_container { - width: 1200px; - margin-left: auto; - margin-right: auto; -} -.main_content { - padding: 10px 20px; -} \ No newline at end of file diff --git a/src/components/index.js b/src/components/index.js index 1165a9fe..a907bea1 100755 --- a/src/components/index.js +++ b/src/components/index.js @@ -2,7 +2,7 @@ import CustomIcons from './CustomIcons' import PageTransition from './PageTransition' import MainFeed from './MainFeed' import YulioID from './YulioID' -import UserCard from './UserCard' +import SearchCard from './SearchCard' import LikeBTN from './LikeBtn' import UserProfile from './UserProfile' import MainSidebar from './MainSidebar' @@ -16,4 +16,4 @@ import CoreLoader from './CoreLoader' import MicroHeader from './MicroHeader' import HeaderSearch from './HeaderSearch' -export { PageTransition, UserCard, HeaderSearch, YulioID, UserProfile, MyLayout, Loader, Page, ScrollBar, CoreLoader, PostCard, PostCreator, CustomIcons, MainSidebar, LikeBTN, MainFeed, MicroHeader} +export { PageTransition, SearchCard, HeaderSearch, YulioID, UserProfile, MyLayout, Loader, Page, ScrollBar, CoreLoader, PostCard, PostCreator, CustomIcons, MainSidebar, LikeBTN, MainFeed, MicroHeader} diff --git a/src/layouts/PrimaryLayout.js b/src/layouts/PrimaryLayout.js index a92aab15..701136ca 100755 --- a/src/layouts/PrimaryLayout.js +++ b/src/layouts/PrimaryLayout.js @@ -17,6 +17,7 @@ import styles from './PrimaryLayout.less' const { Content } = Layout const { ChatSider, Sider, Control } = MyLayout +const userData = ycore.SDCP() @withRouter @@ -175,9 +176,13 @@ class PrimaryLayout extends PureComponent {
- - {this.state.ContentSecondLayer} - +
+
+ +
+ + {this.state.ContentSecondLayer} +
diff --git a/src/layouts/PrimaryLayout.less b/src/layouts/PrimaryLayout.less index facd8e35..8df9bdd4 100755 --- a/src/layouts/PrimaryLayout.less +++ b/src/layouts/PrimaryLayout.less @@ -1,5 +1,21 @@ @import '~themes/vars.less'; +.SecondHeader{ + float: right; + display: flex; + img { + border-radius: 15px; + width: 40px; + } + .notif_box { + margin: 0 15px 0 5px; + width: 40px; + height: 40px; + border-radius: 15px; + background-color: #78CFED; + } +} + .mobilewarning{ background-color: rgba(0, 0, 0, 0.975); color: white; @@ -118,7 +134,7 @@ .rightContainer{ background-color:#201F23; border-radius: 32px 0 0 32px; - padding: 15px 15px 15px 15px; + padding: 20px 15px 15px 15px; width: 27%; height: 100vh; position: relative; diff --git a/src/pages/hamza/index.js b/src/pages/hamza/index.js new file mode 100644 index 00000000..6acd1650 --- /dev/null +++ b/src/pages/hamza/index.js @@ -0,0 +1,14 @@ + import React from 'react' + import * as ycore from 'ycore' + + export default class Hamza extends React.PureComponent { + render() { + return ( +
+

+ Españita Hola +

+
+ ) + } + } diff --git a/src/pages/s/$search/index.js b/src/pages/s/$search/index.js index 16e8d529..b7984368 100755 --- a/src/pages/s/$search/index.js +++ b/src/pages/s/$search/index.js @@ -1,6 +1,6 @@ import React, { PureComponent } from 'react' import { pathMatchRegexp } from 'utils' -import { UserCard } from 'components' +import { SearchCard } from 'components' import styles from './styles.less' import * as ycore from 'ycore' import * as antd from 'antd' @@ -9,8 +9,6 @@ import Icon from '@ant-design/icons' const userData = ycore.SDCP() - - class SearchPageIndexer extends PureComponent { constructor(props){ super(props), @@ -43,43 +41,70 @@ class SearchPageIndexer extends PureComponent { renderResult = (source) => { try { + const Empty = ( +
+ +
+ ) + // TO DO: Settings serach & Post Search const usersParsed = JSON.parse(source)['users'] const groupsParsed = JSON.parse(source)['groups'] const pagesParsed = JSON.parse(source)['pages'] - if (usersParsed.length >= 1) { + + const users = () => {if (usersParsed.length >= 1) { console.log('Users => ', usersParsed) - return( -
- Users -
- ( - - )} - /> -
-
- ) - } - if (groupsParsed.length >= 1) { - return console.log('Groups => ', groupsParsed) - } - if (pagesParsed.length >= 1) { - return console.log('Pages => ', pagesParsed) + return this.EntryComponent('Users', usersParsed) + }} + const groups = () => {if (groupsParsed.length >= 1) { + console.log('Groups => ', groupsParsed) + return this.EntryComponent('Groups', groupsParsed) + }} + const pages = () => {if (pagesParsed.length >= 1) { + console.log('Pages => ', pagesParsed) + return this.EntryComponent('Pages', pagesParsed) + }} + + if (!usersParsed.length >= 1 && !groupsParsed.length >= 1 && !pagesParsed.length >= 1){ + return Empty } - return null + return [users(), groups(), pages()] + + } catch (error) { + console.log(error) + return

Render Error

+ } + } + EntryComponent = (t, source) => { + try { + return( +
+ {t} +
+ ( + + )} + /> +
+
+ ) + } catch (error) { console.log(error) return

Render Error

diff --git a/src/pages/settings/components/about.js b/src/pages/settings/components/about.js new file mode 100644 index 00000000..549b6252 --- /dev/null +++ b/src/pages/settings/components/about.js @@ -0,0 +1,20 @@ +import React from 'react' +import styles from './about.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/settings/components/about.less b/src/pages/settings/components/about.less new file mode 100644 index 00000000..83de9678 --- /dev/null +++ b/src/pages/settings/components/about.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/settings/index.js b/src/pages/settings/index.js index 9763e94f..5e4fc1e0 100755 --- a/src/pages/settings/index.js +++ b/src/pages/settings/index.js @@ -2,17 +2,21 @@ import React from 'react'; import { GridContent } from '@ant-design/pro-layout'; import { Icon as LegacyIcon } from '@ant-design/compatible'; import { Menu, Typography } from 'antd'; +import * as antd from 'antd' +import * as ycore from 'ycore' import styles from './style.less'; import NotificationView from './components/notification.js'; import SecurityView from './components/security.js'; import Base from './components/base.js' +import AppAbout from './components/about.js' const { Item } = Menu; const menuMap = { base: 'App', security: 'Security', notification: 'Notification', + about: 'App About' }; const { Title } = Typography; @@ -44,6 +48,8 @@ class GeneralSettings extends React.Component { return ; case 'notification': return ; + case 'about': + return ; default: break; } diff --git a/tsconfig.json b/tsconfig.json deleted file mode 100755 index f0aeeee3..00000000 --- a/tsconfig.json +++ /dev/null @@ -1,14 +0,0 @@ -{ - "compilerOptions": { - "experimentalDecorators": true, - "module": "commonjs", - "sourceMap": true, - "jsx": "react" - }, - "include": [ - "./src/components/YulioID/**/*" -], - "exclude": [ - "node_modules" - ] -} \ No newline at end of file