mirror of
https://github.com/ragestudio/comty.git
synced 2025-06-09 10:34:17 +00:00
0.2.12A1
This commit is contained in:
SrGooglo
parent
56992b74e3
commit
0c1d9e1f8b
@ -9,15 +9,17 @@ start_cli_dev(){
|
||||
}
|
||||
|
||||
start_dev(){
|
||||
systemctl start comty_dev
|
||||
sudo systemctl start comty_dev
|
||||
echo "Starting dev server..."
|
||||
}
|
||||
|
||||
stop_dev(){
|
||||
systemctl stop comty_dev
|
||||
sudo systemctl stop comty_dev
|
||||
echo "Stoping dev server..."
|
||||
}
|
||||
|
||||
show_logs(){
|
||||
sudo journalctl -u comty_dev
|
||||
}
|
||||
|
||||
show_menus() {
|
||||
clear
|
||||
@ -27,18 +29,19 @@ show_menus() {
|
||||
echo "1. Start CLI Server"
|
||||
echo "2. Start Server"
|
||||
echo "3. Stop Server"
|
||||
echo "4. Show DevServer Logs"
|
||||
echo "0. Exit"
|
||||
}
|
||||
|
||||
read_options(){
|
||||
local choice
|
||||
read -p "Enter choice [ 1 - 3] " choice
|
||||
read -p "Enter choice [ 1 - 4 ] " choice
|
||||
case $choice in
|
||||
0) exit 0;;
|
||||
1) start_cli_dev ;;
|
||||
2) start_dev ;;
|
||||
3) stop_dev ;;
|
||||
|
||||
4) show_logs;;
|
||||
*) echo -e "${RED}Error...${STD}" && sleep 2
|
||||
esac
|
||||
}
|
||||
|
||||
0
globals/badges_list.js
Normal file → Executable file
0
globals/badges_list.js
Normal file → Executable file
@ -2,7 +2,7 @@
|
||||
"name": "comty-development",
|
||||
"title": "Comty™",
|
||||
"DevBuild": true,
|
||||
"version": "0.2.11",
|
||||
"version": "0.2.12",
|
||||
"description": "",
|
||||
"main": "index.js",
|
||||
"author": "RageStudio",
|
||||
|
||||
@ -1,34 +0,0 @@
|
||||
import React from 'react'
|
||||
import style from './styles.less'
|
||||
class CoreLoader extends React.PureComponent {
|
||||
render(){
|
||||
const { type } = this.props;
|
||||
if ( type == 'circle') {
|
||||
return (
|
||||
<div className={style.newloader}>
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
if ( type == 'box') {
|
||||
return(
|
||||
<div>
|
||||
<div className={style.loader}>
|
||||
<svg viewBox="0 0 80 80">
|
||||
<rect x="8" y="8" width="64" height="64"></rect>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
return null;
|
||||
}
|
||||
}
|
||||
export default CoreLoader;
|
||||
@ -1,141 +0,0 @@
|
||||
.loader {
|
||||
--path: #2F3545;
|
||||
// OLDDOT => --dot: #5628EE;
|
||||
// DOT RS--dot: rgb(0, 254, 161);
|
||||
--dot: #F3B425;
|
||||
--duration: 3s;
|
||||
width: 44px;
|
||||
height: 44px;
|
||||
position: relative;
|
||||
&:before {
|
||||
content: '';
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
border-radius: 50%;
|
||||
position: absolute;
|
||||
display: block;
|
||||
background: var(--dot);
|
||||
top: 37px;
|
||||
left: 19px;
|
||||
transform: translate(-18px, -18px);
|
||||
animation: dotRect var(--duration) cubic-bezier(0.785, 0.135, 0.15, 0.86) infinite;
|
||||
}
|
||||
svg {
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
rect,
|
||||
polygon,
|
||||
circle {
|
||||
fill: none;
|
||||
stroke: var(--path);
|
||||
stroke-width: 10px;
|
||||
stroke-linejoin: round;
|
||||
stroke-linecap: round;
|
||||
}
|
||||
polygon {
|
||||
stroke-dasharray: 145 (221 - 145) 145 (221 - 145);
|
||||
stroke-dashoffset: 0;
|
||||
animation: pathTriangle var(--duration) cubic-bezier(0.785, 0.135, 0.15, 0.86) infinite;
|
||||
}
|
||||
rect {
|
||||
stroke-dasharray: (256 / 4 * 3) (256 / 4) (256 / 4 * 3) (256 / 4);
|
||||
stroke-dashoffset: 0;
|
||||
animation: pathRect 3s cubic-bezier(0.785, 0.135, 0.15, 0.86) infinite;
|
||||
}
|
||||
circle {
|
||||
stroke-dasharray: (200 / 4 * 3) (200 / 4) (200 / 4 * 3) (200 / 4);
|
||||
stroke-dashoffset: 75;
|
||||
animation: pathCircle var(--duration) cubic-bezier(0.785, 0.135, 0.15, 0.86) infinite;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes pathTriangle {
|
||||
33% {
|
||||
stroke-dashoffset: 74;
|
||||
}
|
||||
66% {
|
||||
stroke-dashoffset: 147;
|
||||
}
|
||||
100% {
|
||||
stroke-dashoffset: 221;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes dotTriangle {
|
||||
33% {
|
||||
transform: translate(0, 0);
|
||||
}
|
||||
66% {
|
||||
transform: translate(10px, -18px);
|
||||
}
|
||||
100% {
|
||||
transform: translate(-10px, -18px);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes pathRect {
|
||||
25% {
|
||||
stroke-dashoffset: 64;
|
||||
}
|
||||
50% {
|
||||
stroke-dashoffset: 128;
|
||||
}
|
||||
75% {
|
||||
stroke-dashoffset: 192;
|
||||
}
|
||||
100% {
|
||||
stroke-dashoffset: 256;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes dotRect {
|
||||
25% {
|
||||
transform: translate(0, 0);
|
||||
}
|
||||
50% {
|
||||
transform: translate(18px, -18px);
|
||||
}
|
||||
75% {
|
||||
transform: translate(0, -36px);
|
||||
}
|
||||
100% {
|
||||
transform: translate(-18px, -18px);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes pathCircle {
|
||||
25% {
|
||||
stroke-dashoffset: 125;
|
||||
}
|
||||
50% {
|
||||
stroke-dashoffset: 175;
|
||||
}
|
||||
75% {
|
||||
stroke-dashoffset: 225;
|
||||
}
|
||||
100% {
|
||||
stroke-dashoffset: 275;
|
||||
}
|
||||
}
|
||||
|
||||
.loader {
|
||||
display: inline-block;
|
||||
margin: 0 16px;
|
||||
}
|
||||
|
||||
html {
|
||||
-webkit-font-smoothing: antialiased;
|
||||
}
|
||||
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
&:before,
|
||||
&:after {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
@ -1,151 +0,0 @@
|
||||
import React, { PureComponent, Fragment } from 'react'
|
||||
import { Icon as LegacyIcon } from '@ant-design/compatible';
|
||||
import {
|
||||
Menu,
|
||||
Layout,
|
||||
Avatar,
|
||||
Popover,
|
||||
Badge,
|
||||
List,
|
||||
Switch,
|
||||
Tooltip,
|
||||
Dropdown,
|
||||
Button,
|
||||
} from 'antd';
|
||||
import { Trans, withI18n } from '@lingui/react'
|
||||
import { Ellipsis } from 'ant-design-pro'
|
||||
import classnames from 'classnames'
|
||||
import PropTypes from 'prop-types'
|
||||
import styles from './Header.less'
|
||||
import { config } from 'utils'
|
||||
|
||||
import * as ycore from 'ycore'
|
||||
import moment from 'moment'
|
||||
|
||||
@withI18n()
|
||||
class Header extends PureComponent {
|
||||
constructor(props){
|
||||
super(props),
|
||||
this.state = {
|
||||
createMenuVisible: false,
|
||||
}
|
||||
}
|
||||
isDarkMode = () => {
|
||||
const {theme} = this.props
|
||||
if (theme == "light") {
|
||||
return false;
|
||||
}
|
||||
return true;
|
||||
}
|
||||
handleCreateMenuVisible() {
|
||||
this.setState({ createMenuVisible: !this.state.createMenuVisible });
|
||||
}
|
||||
handleOpenMenu() {
|
||||
let ListControls = [
|
||||
(<div>
|
||||
<Button type="dashed" icon={<LegacyIcon type="close" />} shape="circle" onClick={() => ycore.ControlBar.close()}></Button>
|
||||
</div>
|
||||
)
|
||||
]
|
||||
ycore.ControlBar.set(ListControls)
|
||||
}
|
||||
|
||||
render() {
|
||||
const {
|
||||
i18n,
|
||||
fixed,
|
||||
theme,
|
||||
collapsed,
|
||||
newRouteList,
|
||||
notifications,
|
||||
onCollapseChange,
|
||||
onAllNotificationsRead,
|
||||
} = this.props
|
||||
|
||||
|
||||
const notificationIcon = (
|
||||
<Popover
|
||||
placement="bottomRight"
|
||||
trigger="click"
|
||||
key="notifications"
|
||||
overlayClassName={styles.notificationPopover}
|
||||
getPopupContainer={() => document.querySelector('#layoutHeader')}
|
||||
content={
|
||||
<div className={styles.notification}>
|
||||
<List
|
||||
itemLayout="horizontal"
|
||||
dataSource={notifications}
|
||||
locale={{
|
||||
emptyText: <Trans>You have viewed all notifications.</Trans>,
|
||||
}}
|
||||
renderItem={item => (
|
||||
<List.Item className={styles.notificationItem}>
|
||||
<List.Item.Meta
|
||||
title={
|
||||
<Ellipsis tooltip lines={1}>
|
||||
{' '}
|
||||
{item.title}{' '}
|
||||
</Ellipsis>
|
||||
}
|
||||
description={moment(item.date).fromNow()}
|
||||
/>
|
||||
<LegacyIcon
|
||||
style={{ fontSize: '15px', color: '#ccc' }}
|
||||
type="right"
|
||||
/>
|
||||
</List.Item>
|
||||
)}
|
||||
/>
|
||||
{notifications.length ? (
|
||||
<div
|
||||
onClick={onAllNotificationsRead}
|
||||
className={styles.clearButton}
|
||||
>
|
||||
<Trans>Clear notifications</Trans>
|
||||
</div>
|
||||
) : null}
|
||||
</div>
|
||||
}
|
||||
>
|
||||
<Badge
|
||||
count={notifications.length}
|
||||
dot
|
||||
offset={[-10, 10]}
|
||||
className={styles.iconButton}
|
||||
>
|
||||
<LegacyIcon className={styles.iconFont} type="bell" />
|
||||
</Badge>
|
||||
</Popover>
|
||||
)
|
||||
|
||||
return (
|
||||
<Layout.Header id='layoutHeader' className={classnames(styles.header, {[styles.fixed]: fixed}, {[styles.collapsed]: !collapsed} )} >
|
||||
<div className={classnames(styles.containersWrappers, {[styles.collapsed]: !collapsed})} >
|
||||
<div className={styles.leftContainer}>
|
||||
<Tooltip title={'Main'}><LegacyIcon type="home" className={styles.iconButton} onClick={() => ycore.crouter.native('main')} style={{ fontSize: '15px' }} /></Tooltip>
|
||||
<Tooltip title={'Search'}><LegacyIcon type="search" className={styles.iconButton} style={{ fontSize: '15px' }} /></Tooltip>
|
||||
</div>
|
||||
<div className={styles.rightContainer}>
|
||||
<Tooltip title={'Create'}><LegacyIcon type="plus" onClick={() => this.handleOpenMenu()} className={styles.iconButton} style={{ fontSize: '15px' }} /></Tooltip>
|
||||
{notificationIcon}
|
||||
</div>
|
||||
</div>
|
||||
</Layout.Header>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
Header.propTypes = {
|
||||
fixed: PropTypes.bool,
|
||||
menus: PropTypes.array,
|
||||
theme: PropTypes.string,
|
||||
newRouteList: PropTypes.array,
|
||||
collapsed: PropTypes.bool,
|
||||
onSignOut: PropTypes.func,
|
||||
notifications: PropTypes.array,
|
||||
onThemeChange: PropTypes.func,
|
||||
onCollapseChange: PropTypes.func,
|
||||
onAllNotificationsRead: PropTypes.func,
|
||||
}
|
||||
|
||||
export default Header
|
||||
@ -1,251 +0,0 @@
|
||||
@import '~themes/vars.less';
|
||||
|
||||
@LDarkMode-backgroud: rgba(47, 46, 48, 0.74);
|
||||
@LLightMode-backgroud: #fff;
|
||||
|
||||
@LDarkMode-color: #fff;
|
||||
@LLightMode-color: #2F2E30;
|
||||
.createMenu {
|
||||
width: 30px;
|
||||
margin: 0 auto 0 auto;
|
||||
height: 190px;
|
||||
}
|
||||
.brand {
|
||||
display: flex;
|
||||
vertical-align: middle;
|
||||
margin: 0 20px 0 23px;
|
||||
width: 90px;
|
||||
}
|
||||
:global{
|
||||
.ant-layout-header{
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
.containersWrappers{
|
||||
display: flex;
|
||||
&.collapsed {
|
||||
width: ~'calc(100% - 80px)';
|
||||
}
|
||||
}
|
||||
.header {
|
||||
-webkit-box-shadow: 0px 9px 15px -6px rgba(158,158,158,0.82);
|
||||
-moz-box-shadow: 0px 9px 15px -6px rgba(158,158,158,0.82);
|
||||
box-shadow: 0px 9px 15px -6px rgba(158,158,158,0.82);
|
||||
display: flex;
|
||||
width: 100%;
|
||||
background-color: #FEB500; // * #F3F3F3 *//
|
||||
color:#fff;
|
||||
height: 45px;
|
||||
z-index: 9;
|
||||
align-items: center;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
z-index: 10;
|
||||
transition: width 0.2s;
|
||||
right: 0;
|
||||
transition: all 0.2s ease;
|
||||
&.collapsed {
|
||||
width: ~'calc(100% - 180px)';
|
||||
background-color: @LDarkMode-backgroud;
|
||||
color: @DarkMode-color;
|
||||
border-color: transparent;
|
||||
box-shadow: none;
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
:global {
|
||||
|
||||
.ant-menu-submenu-title {
|
||||
height: 40px;
|
||||
}
|
||||
|
||||
.ant-menu-horizontal {
|
||||
line-height: 40px;
|
||||
|
||||
&>.ant-menu-submenu:hover {
|
||||
color: @primary-color;
|
||||
background-color: @hover-color;
|
||||
}
|
||||
}
|
||||
|
||||
.ant-menu {
|
||||
border-bottom: none;
|
||||
height: 40px;
|
||||
}
|
||||
|
||||
.ant-menu-horizontal>.ant-menu-submenu {
|
||||
top: 0;
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
.ant-menu-horizontal>.ant-menu-item,
|
||||
.ant-menu-horizontal>.ant-menu-submenu {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.ant-menu-horizontal>.ant-menu-item-active,
|
||||
.ant-menu-horizontal>.ant-menu-item-open,
|
||||
.ant-menu-horizontal>.ant-menu-item-selected,
|
||||
.ant-menu-horizontal>.ant-menu-item:hover,
|
||||
.ant-menu-horizontal>.ant-menu-submenu-active,
|
||||
.ant-menu-horizontal>.ant-menu-submenu-open,
|
||||
.ant-menu-horizontal>.ant-menu-submenu-selected,
|
||||
.ant-menu-horizontal>.ant-menu-submenu:hover {
|
||||
border-bottom: none;
|
||||
}
|
||||
}
|
||||
|
||||
.rightContainer {
|
||||
display: flex;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
margin: 0 50px;
|
||||
}
|
||||
.leftContainer {
|
||||
margin: 0 0 0 50px;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.button {
|
||||
color:#fff;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
line-height: 40px;
|
||||
text-align: center;
|
||||
font-size: 18px;
|
||||
cursor: pointer;
|
||||
transition: @transition-ease-in;
|
||||
|
||||
&:hover {
|
||||
color: @primary-color;
|
||||
background-color: @hover-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
.iconButton {
|
||||
color: @Theme-Shade-Color;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
border-radius: 53px;
|
||||
cursor: pointer;
|
||||
.background-hover();
|
||||
|
||||
&:hover {
|
||||
.iconFont {
|
||||
color: @primary-color;
|
||||
}
|
||||
}
|
||||
|
||||
&+.iconButton {
|
||||
margin-left: 8px;
|
||||
}
|
||||
|
||||
.iconFont {
|
||||
color: #b2b0c7;
|
||||
font-size: 24px;
|
||||
}
|
||||
}
|
||||
.iconButtonADD {
|
||||
color: #b2b0c7;
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
border-radius: 24px;
|
||||
cursor: pointer;
|
||||
.background-hover();
|
||||
|
||||
&:hover {
|
||||
.iconFont {
|
||||
color: @primary-color;
|
||||
}
|
||||
}
|
||||
|
||||
&+.iconButton {
|
||||
margin-left: 8px;
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
.search {
|
||||
padding: 0 12px;
|
||||
&:hover {
|
||||
background: transparent;
|
||||
}
|
||||
}
|
||||
.avatar {
|
||||
margin:~'calc((64px - 24px) / 4.4)'0;
|
||||
margin-right: 8px;
|
||||
color: @primary-color;
|
||||
vertical-align: top;
|
||||
background: rgba(255, 255, 255, 0.85);
|
||||
}
|
||||
|
||||
.notification {
|
||||
padding: 24px 0;
|
||||
|
||||
.notificationItem {
|
||||
transition: all 0.3s;
|
||||
padding: 12px 24px;
|
||||
cursor: pointer;
|
||||
|
||||
&:hover {
|
||||
background-color: @hover-color;
|
||||
}
|
||||
}
|
||||
|
||||
.clearButton {
|
||||
text-align: center;
|
||||
height: 48px;
|
||||
line-height: 48px;
|
||||
cursor: pointer;
|
||||
.background-hover();
|
||||
}
|
||||
}
|
||||
|
||||
.notificationPopover {
|
||||
:global {
|
||||
.ant-popover-inner-content {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.ant-popover-arrow {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.ant-list-item-content {
|
||||
flex: 0;
|
||||
margin-left: 16px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.createMenuPopover {
|
||||
:global {
|
||||
.ant-popover-inner {
|
||||
background-color: transparent;
|
||||
box-shadow: unset;
|
||||
}
|
||||
|
||||
.ant-popover-inner-content {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.ant-popover-arrow {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.ant-list-item-content {
|
||||
flex: 0;
|
||||
margin-left: 16px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -1,133 +0,0 @@
|
||||
import React, { PureComponent, Fragment } from 'react'
|
||||
import PropTypes from 'prop-types'
|
||||
import { Icon as LegacyIcon } from '@ant-design/compatible';
|
||||
import { Menu } from 'antd';
|
||||
import Navlink from 'umi/navlink'
|
||||
import withRouter from 'umi/withRouter'
|
||||
import {SDCP} from 'ycore'
|
||||
import {
|
||||
arrayToTree,
|
||||
queryAncestors,
|
||||
pathMatchRegexp,
|
||||
addLangPrefix,
|
||||
} from 'utils'
|
||||
import store from 'store'
|
||||
import styles from './Menu.less'
|
||||
|
||||
|
||||
const { SubMenu } = Menu
|
||||
|
||||
|
||||
@withRouter
|
||||
class SiderMenu extends PureComponent {
|
||||
state = {
|
||||
openKeys: store.get('openKeys') || [],
|
||||
}
|
||||
|
||||
onOpenChange = openKeys => {
|
||||
const { menus } = this.props
|
||||
const rootSubmenuKeys = menus.filter(_ => !_.menuParentId).map(_ => _.id)
|
||||
|
||||
const latestOpenKey = openKeys.find(
|
||||
key => this.state.openKeys.indexOf(key) === -1
|
||||
)
|
||||
|
||||
let newOpenKeys = openKeys
|
||||
if (rootSubmenuKeys.indexOf(latestOpenKey) !== -1) {
|
||||
newOpenKeys = latestOpenKey ? [latestOpenKey] : []
|
||||
}
|
||||
|
||||
this.setState({
|
||||
openKeys: newOpenKeys,
|
||||
})
|
||||
store.set('openKeys', newOpenKeys)
|
||||
}
|
||||
|
||||
generateMenus = data => {
|
||||
return data.map(item => {
|
||||
if (item.children) {
|
||||
return (
|
||||
<SubMenu
|
||||
key={item.id}
|
||||
className={styles.SubMenuItems}
|
||||
title={
|
||||
<Fragment>
|
||||
{item.icon && <LegacyIcon type={item.icon} />}
|
||||
<span className={styles.SubItemTitle}>{item.name}</span>
|
||||
</Fragment>
|
||||
}
|
||||
>
|
||||
{this.generateMenus(item.children)}
|
||||
</SubMenu>
|
||||
);
|
||||
}
|
||||
return (
|
||||
<Menu.Item key={item.id} >
|
||||
<Navlink to={addLangPrefix(item.route) || '#'}>
|
||||
{item.icon && <LegacyIcon type={item.icon} />}
|
||||
<span>{item.name}</span>
|
||||
</Navlink>
|
||||
</Menu.Item>
|
||||
);
|
||||
});
|
||||
}
|
||||
|
||||
render() {
|
||||
const {
|
||||
collapsed,
|
||||
theme,
|
||||
menus,
|
||||
location,
|
||||
isMobile,
|
||||
onCollapseChange,
|
||||
} = this.props
|
||||
|
||||
// Generating tree-structured data for menu content.
|
||||
const menuTree = arrayToTree(menus, 'id', 'menuParentId')
|
||||
|
||||
// Find a menu that matches the pathname.
|
||||
const currentMenu = menus.find(
|
||||
_ => _.route && pathMatchRegexp(_.route, location.pathname)
|
||||
)
|
||||
|
||||
// Find the key that should be selected according to the current menu.
|
||||
const selectedKeys = currentMenu
|
||||
? queryAncestors(menus, currentMenu, 'menuParentId').map(_ => _.id)
|
||||
: []
|
||||
|
||||
const menuProps = collapsed
|
||||
? {}
|
||||
: {
|
||||
openKeys: this.state.openKeys,
|
||||
}
|
||||
|
||||
return (
|
||||
<Menu
|
||||
theme={theme}
|
||||
mode="inline"
|
||||
onOpenChange={this.onOpenChange}
|
||||
selectedKeys={selectedKeys}
|
||||
onClick={
|
||||
isMobile
|
||||
? () => {
|
||||
onCollapseChange(true)
|
||||
}
|
||||
: undefined
|
||||
}
|
||||
{...menuProps}
|
||||
>
|
||||
{this.generateMenus(menuTree)}
|
||||
</Menu>
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
SiderMenu.propTypes = {
|
||||
menus: PropTypes.array,
|
||||
theme: PropTypes.string,
|
||||
isMobile: PropTypes.bool,
|
||||
collapsed: PropTypes.bool,
|
||||
onCollapseChange: PropTypes.func,
|
||||
}
|
||||
|
||||
export default SiderMenu
|
||||
@ -1,5 +0,0 @@
|
||||
@import '~themes/vars.less';
|
||||
|
||||
.SubItemTitle {
|
||||
font-size: 14px;
|
||||
}
|
||||
@ -1,6 +1,5 @@
|
||||
import Header from './Header'
|
||||
import Sider from './Sider'
|
||||
import ChatSider from './ChatSider'
|
||||
import Control from './Control'
|
||||
|
||||
export { Header, Sider, Control, ChatSider }
|
||||
export { Sider, Control, ChatSider }
|
||||
|
||||
@ -1,13 +0,0 @@
|
||||
@import url('https://fonts.googleapis.com/css?family=Nunito:400&display=swap');
|
||||
|
||||
.typo1 {
|
||||
font-family: 'Nunito', sans-serif;
|
||||
vertical-align: text-top;
|
||||
color: #333333;
|
||||
font-size: 25px;
|
||||
display: inline-block;
|
||||
font-weight: 400;
|
||||
white-space: nowrap;
|
||||
margin-left: 13px;
|
||||
margin-top: 25px;
|
||||
}
|
||||
@ -1,50 +0,0 @@
|
||||
import React from 'react'
|
||||
import * as ycore from 'ycore'
|
||||
import * as antd from 'antd'
|
||||
import { CustomIcons } from 'components'
|
||||
import styles from './index.less'
|
||||
|
||||
var userData = ycore.SDCP()
|
||||
|
||||
class MainSidebar extends React.Component {
|
||||
state = {
|
||||
collapsed: false,
|
||||
};
|
||||
render(){
|
||||
return(
|
||||
<div className={styles.main_menuWrapper}>
|
||||
<antd.Divider orientation="left"><antd.Icon type="notification" /> <span>Feed</span></antd.Divider>
|
||||
<antd.Menu >
|
||||
<antd.Menu.Item key="main_feed_key">
|
||||
<antd.Icon theme="filled" style={{ color: '#4d91ea' }} type="home" />
|
||||
<span>News Feed</span>
|
||||
</antd.Menu.Item>
|
||||
<antd.Menu.Item key="albums_key">
|
||||
<antd.Icon theme="filled" style={{ color: '#8bc34a' }} type="picture" />
|
||||
<span>Albums</span>
|
||||
</antd.Menu.Item>
|
||||
<antd.Menu.Item key="saved_posts_key">
|
||||
<antd.Icon theme="filled" style={{ color: '#673ab7' }} type="save" />
|
||||
<span>Saved Posts</span>
|
||||
</antd.Menu.Item>
|
||||
<antd.Menu.Item key="groups_key">
|
||||
<antd.Icon style={{ color: '#03A9F4' }} type="team" />
|
||||
<span>Groups</span>
|
||||
</antd.Menu.Item>
|
||||
<antd.Menu.Item key="events_key">
|
||||
<antd.Icon theme="filled" style={{ color: '#f25e4e' }} type="schedule" />
|
||||
<span>Events</span>
|
||||
</antd.Menu.Item>
|
||||
</antd.Menu>
|
||||
<antd.Divider orientation="left"><antd.Icon type="compass" /> <span>Explore</span></antd.Divider>
|
||||
<antd.Menu>
|
||||
<antd.Menu.Item key="5"><antd.Icon theme="filled" style={{ color: '#ff7a45' }} type="fire" /><span>Popular Posts</span></antd.Menu.Item>
|
||||
<antd.Menu.Item key="6"><antd.Icon theme="filled" style={{ color: '#e91e63' }} type="eye" /><span>Discover</span></antd.Menu.Item>
|
||||
<antd.Menu.Item key="7"><antd.Icon style={{ color: '#673AB7' }} type="dollar" /><span>Fundings</span></antd.Menu.Item>
|
||||
<antd.Menu.Item key="8"><antd.Icon theme="filled" style={{ color: '#ff5991' }} component={CustomIcons.CommonThings} /><span>Common Things</span></antd.Menu.Item>
|
||||
</antd.Menu>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
}
|
||||
export default MainSidebar;
|
||||
@ -1,53 +0,0 @@
|
||||
@import '~themes/vars.less';
|
||||
|
||||
.main_menuWrapper{
|
||||
float: left;
|
||||
margin: 0 auto 0 auto;
|
||||
top: 70px;
|
||||
width: 20vw;
|
||||
vertical-align: middle;
|
||||
background-color: #fff;
|
||||
border: 1px rgba(128, 128, 128, 0.11) solid;
|
||||
border-radius: 10px;
|
||||
font-family: "Poppins", sans-serif;
|
||||
:global {
|
||||
.ant-menu{
|
||||
background-color: transparent;
|
||||
border-color: transparent;
|
||||
}
|
||||
.ant-menu-vertical .ant-menu-item:not(:last-child), .ant-menu-vertical-left .ant-menu-item:not(:last-child), .ant-menu-vertical-right .ant-menu-item:not(:last-child), .ant-menu-inline .ant-menu-item:not(:last-child) {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
.ant-menu-item{
|
||||
margin-left: 15px;
|
||||
height: 28px;
|
||||
line-height: 28px;
|
||||
}
|
||||
.ant-divider-horizontal.ant-divider-with-text-center, .ant-divider-horizontal.ant-divider-with-text-left, .ant-divider-horizontal.ant-divider-with-text-right {
|
||||
display: table;
|
||||
margin: 7px 0;
|
||||
color: rgba(0, 0, 0, 0.712);
|
||||
font-weight: 430;
|
||||
font-size: 13px;
|
||||
white-space: nowrap;
|
||||
text-align: center;
|
||||
background: transparent;
|
||||
}
|
||||
.ant-menu-item .anticon, .ant-menu-submenu-title .anticon {
|
||||
min-width: 14px;
|
||||
margin-right: 4px;
|
||||
font-size: 14px;
|
||||
transition: font-size 0.15s cubic-bezier(0.215, 0.61, 0.355, 1), margin 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
.profileKey{
|
||||
:global{
|
||||
padding-left: -0;
|
||||
.ant-avatar {
|
||||
margin: 0 5px 0 -15px;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
0
src/components/PageTransition/animations.js
Normal file → Executable file
0
src/components/PageTransition/animations.js
Normal file → Executable file
0
src/components/PageTransition/index.js
Normal file → Executable file
0
src/components/PageTransition/index.js
Normal file → Executable file
0
src/components/PageTransition/presets.js
Normal file → Executable file
0
src/components/PageTransition/presets.js
Normal file → Executable file
0
src/components/PageTransition/styles.js
Normal file → Executable file
0
src/components/PageTransition/styles.js
Normal file → Executable file
0
src/components/SearchCard/index.js
Normal file → Executable file
0
src/components/SearchCard/index.js
Normal file → Executable file
0
src/components/SearchCard/index.less
Normal file → Executable file
0
src/components/SearchCard/index.less
Normal file → Executable file
0
src/components/UserBadges/index.js
Normal file → Executable file
0
src/components/UserBadges/index.js
Normal file → Executable file
0
src/components/UserBadges/index.less
Normal file → Executable file
0
src/components/UserBadges/index.less
Normal file → Executable file
0
src/components/UserProfile/components/Follow_btn.js
Normal file → Executable file
0
src/components/UserProfile/components/Follow_btn.js
Normal file → Executable file
57
src/components/UserProfile/components/Follow_btn.scss
Executable file
57
src/components/UserProfile/components/Follow_btn.scss
Executable file
@ -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%; }
|
||||
}
|
||||
0
src/components/UserProfile/components/follow_btn.scss
Normal file → Executable file
0
src/components/UserProfile/components/follow_btn.scss
Normal file → Executable file
@ -5,13 +5,11 @@ import CustomIcons from './CustomIcons'
|
||||
import Loader from './Loader/Loader.js'
|
||||
import ScrollBar from './ScrollBar'
|
||||
import Page from './Page'
|
||||
import CoreLoader from './CoreLoader'
|
||||
|
||||
// App Layout Components
|
||||
import * as MyLayout from './Layout/index.js'
|
||||
import MicroHeader from './MicroHeader'
|
||||
import HeaderSearch from './HeaderSearch'
|
||||
import MainSidebar from './MainSidebar'
|
||||
import PageTransition from './PageTransition'
|
||||
import YulioID from './YulioID'
|
||||
|
||||
@ -39,11 +37,9 @@ export
|
||||
Loader,
|
||||
Page,
|
||||
ScrollBar,
|
||||
CoreLoader,
|
||||
PostCard,
|
||||
PostCreator,
|
||||
CustomIcons,
|
||||
MainSidebar,
|
||||
LikeBTN,
|
||||
MainFeed,
|
||||
MicroHeader
|
||||
|
||||
@ -5,21 +5,23 @@ import PropTypes from 'prop-types'
|
||||
import withRouter from 'umi/withRouter'
|
||||
import { connect } from 'dva'
|
||||
import { MyLayout, PageTransition, HeaderSearch } from 'components'
|
||||
import classnames from 'classnames'
|
||||
import * as ycore from 'ycore'
|
||||
import { Layout, Drawer, Result, Button, Checkbox } from 'antd'
|
||||
import { Layout, Result, Button } from 'antd'
|
||||
import { enquireScreen, unenquireScreen } from 'enquire-js'
|
||||
import { config, pathMatchRegexp, langFromPath } from 'utils'
|
||||
import { langFromPath } from 'utils'
|
||||
import store from 'store';
|
||||
import Error from '../pages/404'
|
||||
import classnames from 'classnames'
|
||||
|
||||
import * as ycore from 'ycore'
|
||||
import * as antd from 'antd'
|
||||
import * as Icons from '@ant-design/icons'
|
||||
|
||||
import styles from './PrimaryLayout.less'
|
||||
|
||||
const { Content } = Layout
|
||||
const { ChatSider, Sider, Control } = MyLayout
|
||||
const { Sider, Control } = MyLayout
|
||||
|
||||
const userData = ycore.SDCP()
|
||||
|
||||
|
||||
@withRouter
|
||||
@connect(({ app, loading }) => ({ app, loading }))
|
||||
class PrimaryLayout extends PureComponent {
|
||||
@ -36,9 +38,7 @@ class PrimaryLayout extends PureComponent {
|
||||
}
|
||||
this.ResByPassHandler = this.ResByPassHandler.bind(this);
|
||||
}
|
||||
setControls(e){
|
||||
this.setState({BarControls: e})
|
||||
}
|
||||
|
||||
componentDidMount() {
|
||||
this.enquireHandler = enquireScreen(mobile => {
|
||||
const { isMobile } = this.state
|
||||
@ -49,17 +49,21 @@ class PrimaryLayout extends PureComponent {
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
componentWillUnmount() {
|
||||
unenquireScreen(this.enquireHandler)
|
||||
}
|
||||
|
||||
setControls(e){
|
||||
this.setState({BarControls: e})
|
||||
}
|
||||
|
||||
onCollapseChange = () => {
|
||||
const fromStore = store.get('collapsed')
|
||||
|
||||
this.setState({ collapsed: !this.state.collapsed })
|
||||
store.set('collapsed', !fromStore)
|
||||
|
||||
|
||||
}
|
||||
|
||||
ResByPassHandler() {
|
||||
const {RemByPass} = this.state;
|
||||
if (RemByPass == true){
|
||||
@ -82,7 +86,9 @@ class PrimaryLayout extends PureComponent {
|
||||
render() {
|
||||
const { app, location, dispatch, children } = this.props
|
||||
const { theme, routeList, notifications } = app
|
||||
const { isMobile, resbypass, collapsed, rememberbypass, searchidden } = this.state
|
||||
const { isMobile, resbypass } = this.state
|
||||
const collapsed = (this.state.collapsed? true : false)
|
||||
|
||||
const { onCollapseChange } = this
|
||||
// Localized route name.
|
||||
const lang = langFromPath(location.pathname)
|
||||
@ -97,34 +103,9 @@ class PrimaryLayout extends PureComponent {
|
||||
})
|
||||
: routeList
|
||||
|
||||
// Find a route that matches the pathname.
|
||||
const currentRoute = newRouteList.find(
|
||||
_ => _.route && pathMatchRegexp(_.route, location.pathname)
|
||||
)
|
||||
|
||||
// MenuParentId is equal to -1 is not a available menu.
|
||||
const menus = newRouteList.filter(_ => _.menuParentId !== '-1')
|
||||
const headerProps = {
|
||||
menus,
|
||||
theme,
|
||||
collapsed,
|
||||
newRouteList,
|
||||
notifications,
|
||||
onCollapseChange,
|
||||
onThemeChange(theme) {
|
||||
dispatch({
|
||||
type: 'app/handleThemeChange',
|
||||
payload: theme,
|
||||
})
|
||||
},
|
||||
fixed: config.fixedHeader,
|
||||
onAllNotificationsRead() {
|
||||
dispatch({ type: 'app/allNotificationsRead' })
|
||||
},
|
||||
|
||||
}
|
||||
const SiderProps = {
|
||||
menus,
|
||||
theme,
|
||||
isMobile,
|
||||
collapsed,
|
||||
@ -136,10 +117,9 @@ class PrimaryLayout extends PureComponent {
|
||||
})
|
||||
},
|
||||
}
|
||||
const currentPathname = location.pathname
|
||||
|
||||
const ContainerProps = {
|
||||
theme,
|
||||
currentPathname,
|
||||
collapsed,
|
||||
}
|
||||
const MobileWarning = () =>{
|
||||
@ -148,7 +128,7 @@ class PrimaryLayout extends PureComponent {
|
||||
return(
|
||||
<div className={styles.mobilewarning}>
|
||||
<Result status="warning" title="Low resolution warning"
|
||||
extra={ <div style={{ color: "white" }}><h3 style={{ color: "white" }}>This version of the application is not fully compatible with the resolution of this screen, a higher resolution is recommended for an optimal experience</h3><span>Please choose an option to continue</span><br /><br /><br /><Checkbox onChange={this.setState({ RemByPass: true })}>Don't Show this again</Checkbox><br /><br /><br /><Button type="dashed" onClick={this.ResByPassHandler}>Continue</Button></div> }/>
|
||||
extra={ <div style={{ color: "white" }}><h3 style={{ color: "white" }}>This version of the application is not fully compatible with the resolution of this screen, a higher resolution is recommended for an optimal experience</h3><span>Please choose an option to continue</span><br /><br /><Button type="dashed" onClick={this.ResByPassHandler}>Continue</Button></div> }/>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
0
src/pages/__m/index.js
Normal file → Executable file
0
src/pages/__m/index.js
Normal file → Executable file
0
src/pages/__m/style.less
Normal file → Executable file
0
src/pages/__m/style.less
Normal file → Executable file
0
src/pages/hamza/index.js
Normal file → Executable file
0
src/pages/hamza/index.js
Normal file → Executable file
@ -1,20 +1,11 @@
|
||||
import React from 'react'
|
||||
import * as antd from 'antd'
|
||||
import * as ycore from 'ycore'
|
||||
import {PostCreator, MainSidebar, MainFeed, MicroHeader} from 'components'
|
||||
import {PostCreator, MainFeed} from 'components'
|
||||
import styles from './index.less'
|
||||
import { RefreshFeed } from 'components/MainFeed'
|
||||
import { HandleVisibility } from 'components/PostCreator'
|
||||
import { HandleShow } from 'components/MicroHeader'
|
||||
|
||||
const userData = ycore.SDCP()
|
||||
|
||||
class Main extends React.Component {
|
||||
constructor(props){
|
||||
super(props)
|
||||
this.state = {
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
render(){
|
||||
return (
|
||||
|
||||
0
src/pages/settings/components/about.js
Normal file → Executable file
0
src/pages/settings/components/about.js
Normal file → Executable file
0
src/pages/settings/components/about.less
Normal file → Executable file
0
src/pages/settings/components/about.less
Normal file → Executable file
15
src/pages/settings/components/earnings.js
Normal file
15
src/pages/settings/components/earnings.js
Normal file
@ -0,0 +1,15 @@
|
||||
import React from 'react'
|
||||
import * as ycore from 'ycore'
|
||||
import * as antd from 'antd'
|
||||
import * as Icons from '@ant-design/icons'
|
||||
|
||||
export default class Earnings extends React.Component {
|
||||
render(){
|
||||
return(
|
||||
<div>
|
||||
<h1><Icons.PaperClipOutlined /> Redeem an Code</h1>
|
||||
|
||||
</div>
|
||||
)
|
||||
}
|
||||
}
|
||||
@ -10,13 +10,16 @@ import NotificationView from './components/notification.js';
|
||||
import SecurityView from './components/security.js';
|
||||
import Base from './components/base.js'
|
||||
import AppAbout from './components/about.js'
|
||||
import Earnings from './components/earnings.js'
|
||||
|
||||
const { Item } = Menu;
|
||||
const menuMap = {
|
||||
base: 'App',
|
||||
security: 'Security',
|
||||
base: 'General',
|
||||
security: 'Security & Privacity',
|
||||
notification: 'Notification',
|
||||
about: 'App About'
|
||||
earnings: 'Earnings',
|
||||
about: 'About'
|
||||
|
||||
};
|
||||
|
||||
const { Title } = Typography;
|
||||
@ -50,6 +53,8 @@ class GeneralSettings extends React.Component {
|
||||
return <NotificationView />;
|
||||
case 'about':
|
||||
return <AppAbout />;
|
||||
case 'earnings':
|
||||
return <Earnings />
|
||||
default:
|
||||
break;
|
||||
}
|
||||
@ -60,7 +65,7 @@ class GeneralSettings extends React.Component {
|
||||
const { mode, selectKey } = this.state;
|
||||
return (
|
||||
<div>
|
||||
<Title className={styles.titleHead}><Icons.SettingOutlined /> Settings</Title>
|
||||
<Title className={styles.titleHead}> {this.getMenu()} </Title>
|
||||
<GridContent>
|
||||
<div
|
||||
className={styles.main}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user