diff --git a/.umirc.js b/.umirc.js index 9cd6fc22..2c6c3a95 100644 --- a/.umirc.js +++ b/.umirc.js @@ -20,6 +20,7 @@ export default { webpackChunkName: true, loadingComponent: './components/Loader/Loader', }, + routes: { exclude: [ /model\.(j|t)sx?$/, diff --git a/.vscode/launch.json b/.vscode/launch.json new file mode 100644 index 00000000..822e5d1e --- /dev/null +++ b/.vscode/launch.json @@ -0,0 +1,17 @@ +{ + // Use IntelliSense to learn about possible attributes. + // Hover to view descriptions of existing attributes. + // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387 + "version": "0.2.0", + "configurations": [ + { + "type": "node", + "request": "launch", + "name": "Launch Program", + "skipFiles": [ + "/**" + ], + "program": "${file}" + } + ] +} \ No newline at end of file diff --git a/.vsls.json b/.vsls.json new file mode 100644 index 00000000..dadc081b --- /dev/null +++ b/.vsls.json @@ -0,0 +1,6 @@ +{ + "$schema": "http://json.schemastore.org/vsls", + "excludeFiles": [], + "hideFiles": [] + +} \ No newline at end of file diff --git a/package.json b/package.json index e3174f80..fff652b2 100644 --- a/package.json +++ b/package.json @@ -2,7 +2,7 @@ "name": "comty-development", "title": "Comty™", "DevBuild": true, - "version": "0.1.16", + "version": "0.1.17", "description": "", "main": "index.js", "author": "RageStudio", @@ -63,8 +63,6 @@ "validator": "^12.2.0" }, "devDependencies": { - "rimraf": "^3.0.2", - "wait-on": "^4.0.0", "@lingui/babel-preset-react": "^2.9.1", "@lingui/cli": "^2.9.1", "@lingui/loader": "^2.9.1", @@ -88,12 +86,15 @@ "module": "^1.2.5", "now": "^17.0.3", "prettier": "^1.19.1", + "rimraf": "^3.0.2", "stylelint": "^13.1.0", "stylelint-config-prettier": "^8.0.1", "stylelint-config-standard": "^20.0.0", "typescript": "^3.7.5", "umi": "^2.13.3", - "umi-plugin-react": "^1.15.2" + "umi-plugin-react": "^1.15.2", + "wait-on": "^4.0.0", + "workbox-webpack-plugin": "^5.0.0" }, "lingui": { "fallbackLocale": "en", diff --git a/service-worker.js b/service-worker.js index 2283ff9c..54a3962a 100644 --- a/service-worker.js +++ b/service-worker.js @@ -21,19 +21,17 @@ const isLocalhost = Boolean( ); export function register(config) { - if (process.env.NODE_ENV === 'production' && 'serviceWorker' in navigator) { - // The URL constructor is available in all browsers that support SW. + if ('serviceWorker' in navigator) { + console.log("The URL constructor is available in all browsers that support SW") const publicUrl = new URL(process.env.PUBLIC_URL, window.location.href); if (publicUrl.origin !== window.location.origin) { - // Our service worker won't work if PUBLIC_URL is on a different origin - // from what our page is served on. This might happen if a CDN is used to - // serve assets; see https://github.com/facebook/create-react-app/issues/2374 + console.log("Our service worker won't work if PUBLIC_URL is on a different origin from what our page is served on.") return; } window.addEventListener('load', () => { const swUrl = `${process.env.PUBLIC_URL}/service-worker.js`; - + console.log('Loading event...') if (isLocalhost) { // This is running on localhost. Let's check if a service worker still exists or not. checkValidServiceWorker(swUrl, config); diff --git a/src/@ycore/ycore_worker.js b/src/@ycore/ycore_worker.js index bffce793..0081dcff 100644 --- a/src/@ycore/ycore_worker.js +++ b/src/@ycore/ycore_worker.js @@ -5,6 +5,7 @@ import umiRouter from 'umi/router'; import * as antd from "antd" import config from 'config' import './libs.js' +import * as sw from '../../service-worker.js' export * from "./libs.js" export * from "../../config/app.settings.js" @@ -12,12 +13,20 @@ export var { router } = require("utils") export var endpoints = Endpoints; export var yConfig = config.yConfig; + + var package_json = require("../../package.json"); export const AppInfo = { name: package_json.title, version: package_json.version, - logo: config.FullLogoPath + logo: config.FullLogoPath, + logo_dark: config.DarkFullLogoPath } +export function RegSW(){ + console.log('Registering Service Worker...') + sw.register() +} + export function ReturnDevOption(e){ const Ite = AppSettings.map(item => { return item.SettingID === e? item.value : null diff --git a/src/components/CustomIcons/index.js b/src/components/CustomIcons/index.js index 0b357290..1a32f754 100644 --- a/src/components/CustomIcons/index.js +++ b/src/components/CustomIcons/index.js @@ -2,6 +2,7 @@ const VerifiedBadge = () => () const SunSVG = () => () const MoonSVG = () => () +const RobotOutlined = () => () -const CustomIcons = {VerifiedBadge, CommonThings, SunSVG, MoonSVG} +const CustomIcons = {VerifiedBadge, CommonThings, SunSVG, MoonSVG, RobotOutlined} export default CustomIcons diff --git a/src/components/Layout/ChatSider.js b/src/components/Layout/ChatSider.js new file mode 100644 index 00000000..02ecce2d --- /dev/null +++ b/src/components/Layout/ChatSider.js @@ -0,0 +1,37 @@ +import React from 'react' +import styles from './ChatSider.less' +import * as ycore from 'ycore' +import * as antd from 'antd' + + +class ChatSider extends React.Component { + constructor(props){ + super(props), + this.state = { + collapsed: false, + } + } + render(){ + const { collapsed } = this.state + return( +
+ + +
+

Chat

+
+ +
+ ) + } +} +export default ChatSider \ No newline at end of file diff --git a/src/components/Layout/ChatSider.less b/src/components/Layout/ChatSider.less new file mode 100644 index 00000000..a1bf9db5 --- /dev/null +++ b/src/components/Layout/ChatSider.less @@ -0,0 +1,206 @@ +@import '~themes/vars.less'; + +@LDarkMode-backgroud: rgba(47, 46, 48, 0.74); +@LLightMode-backgroud: #fff; + +@LDarkMode-color: #fff; +@LLightMode-color: #2F2E30; + +.chatTitle{ + font-family: "Poppins", sans-serif; + padding: 0 10px 0 0; + float: right; +} + + +.something_thats_pulling_me_down{ + :global{ + text-align: center; + bottom: 0; + position: absolute; + width: 100%; + } +} +.siderhead{ + font-family: 'Source Sans Pro', sans-serif; + display: flex; + align-items: center; + justify-content: center; + ::first-letter{ + margin-left: 7px; + } + height: 60px; + font-size: 17px; +} + +.siderwrapper { + border-color: transparent; + font-size: 13px; + font-family: "Poppins", sans-serif; + height: 100%; + width: 100%; + left: 0; + position: absolute; + + :global { + .ant-layout-sider-dark { + background-color: @LDarkMode-backgroud; + color: @DarkMode-color; + h2{ + color: @Theme-SiderDeco-Color; + } + .ant-menu-item{ + color: @DarkMode-color; + } + .ant-menu-inline, .ant-menu-vertical, .ant-menu-vertical-left { + :hover { + background-color: rgb(80, 80, 80); + color: #fff; + } + border-right: 1px solid transparent; + } + } + .ant-layout-sider-light { + background-color: @Theme-SiderDeco-Backgroud; + color: @Theme-SiderDeco-Color; + h2{ + color: @Theme-SiderDeco-Color; + } + .ant-menu-item{ + color: @Theme-SiderDeco-Color; + } + .ant-menu-inline, .ant-menu-vertical, .ant-menu-vertical-left { + :hover { + background-color: @Theme-Hover-Backgroud; + color: #fff; + } + border-right: 1px solid transparent; + } + } + } +} + +.chatsider { + float: right; + background-color: transparent; + border: 1px @LDarkMode-color solid; + height: 100%; + z-index: 50; + :global { + .ant-menu-dark { + background-color: @LDarkMode-backgroud; + color: @LDarkMode-color; + } + .ant-menu-light { + background-color: @LLightMode-backgroud; + color: @LLightMode-color; + } + } + .menuItems{ + background-color: transparent; + margin-bottom: 8px; + width: 100%; + animation: fadein 0.5s; + :global { + .ant-menu-item-selected{ + background-color: transparent; + } + } + } + .menuItemsCollapsed{ + background-color: transparent; + color: @LDarkMode-color; + width: 100%; + animation: fadein 0.5s; + :global { + .ant-menu-item { + padding: 0 !important; + margin: 2px 0 2px 0; + width: 100%; + text-align: center; + font-size: 20px; + } + .ant-menu-item-selected{ + background-color: rgba(82, 82, 82, 0.562); + } + } + } + .chatContainer { + height: 100%; + margin: 18px 0 8px 0; + .scrollbar-container { + position: initial; + height: 100%; + } + overflow-x: hidden; + flex: 1; + &::-webkit-scrollbar-thumb { + background-color: transparent; + } + &:hover { + &::-webkit-scrollbar-thumb { + background-color: rgba(59, 59, 59, 0.2); + } + } + :global { + .ant-layout-sider-children { + display: flex; + flex-direction: column; + justify-content: space-between; + } + .ant-layout-sider-collapsed { + .ant-menu-item { + left: 0; + margin: 0; + padding: 0; + } + .ant-menu-inline-collapsed > .ant-menu-item{ + padding: 0; + left:0; + } + } + .scrollbar-container { + position: initial; + height: 100%; + } + .ant-menu-inline .ant-menu-item { + font-size: 14px; + font-family: 'Source Sans Pro', sans-serif; + } + .ant-menu-dark .ant-menu-item a { + color: rgb(197, 197, 197); + } + } + } +} +.scrollbar-container { + position: initial; + height: 100%; +} + +@keyframes fadeLeftIn { + 0% { + transform: translateX(5px); + opacity: 0; + } + + 100% { + transform: translateX(0); + opacity: 1; + } +} + +.themeSwitcher { + :global { + .ant-switch-checked { + background-color: #2F2E30; + } + } + svg { + height: 100%; + vertical-align: middle; + } + span { + line-height: 10px; + } +} \ No newline at end of file diff --git a/src/components/Layout/Sider.js b/src/components/Layout/Sider.js index c83360c8..ea8dfc91 100644 --- a/src/components/Layout/Sider.js +++ b/src/components/Layout/Sider.js @@ -55,7 +55,7 @@ class Sider extends PureComponent { handleClickMenu = e => { e.key === 'SignOut' && ycore.LogoutCall() - e.key === 'settingpage' && router.push('/settings') + e.key === 'general_settings' && ycore.crouter.native('settings') e.key === 'accountpage' && router.push('/account') } isDarkMode(){ @@ -103,6 +103,10 @@ class Sider extends PureComponent { }} > + + + {collapsed ? null : Explore } + {ycore.booleanFix(userData.is_pro)? @@ -113,10 +117,6 @@ class Sider extends PureComponent { {collapsed ? null : Upgrade to Pro } } - - - {collapsed ? null : Edit Profile} - {collapsed ? null : General Settings} diff --git a/src/components/Layout/index.js b/src/components/Layout/index.js index 9b89d66e..3eabde75 100644 --- a/src/components/Layout/index.js +++ b/src/components/Layout/index.js @@ -1,5 +1,6 @@ import Header from './Header' import Sider from './Sider' +import ChatSider from './ChatSider' import Control from './Control' -export { Header, Sider, Control } +export { Header, Sider, Control, ChatSider } diff --git a/src/components/MicroHeader/index.less b/src/components/MicroHeader/index.less index 2816a6ef..299698f2 100644 --- a/src/components/MicroHeader/index.less +++ b/src/components/MicroHeader/index.less @@ -1,6 +1,6 @@ @import '~themes/vars.less'; .MicroHeader{ - background-color: transparent; + background-color: transparent !important; padding: 0 5px 0 5px; width: 100%; height: auto; diff --git a/src/components/YulioID/experimental/components/StatusBoxC.js.map b/src/components/YulioID/experimental/components/StatusBoxC.js.map deleted file mode 100644 index f5680ba1..00000000 --- a/src/components/YulioID/experimental/components/StatusBoxC.js.map +++ /dev/null @@ -1 +0,0 @@ -{"version":3,"file":"StatusBoxC.js","sourceRoot":"","sources":["StatusBoxC.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;AAAA,+BAAyC;AACzC,6BAA4B;AAC5B,wCAAiC;AAEjC,yCAAmC;AAEnC;IAAwB,6BAAS;IAE7B,mBAAY,KAAK;QAAjB,YACI,kBAAM,KAAK,CAAC,SAIf;QAHG,KAAI,CAAC,KAAK,GAAG;YACT,QAAQ,EAAE,SAAS;SACtB,CAAA;;IACL,CAAC;IACD,qCAAiB,GAAjB;QACY,IAAA,gCAAS,CAAgB;QACjC,IAAI,CAAC,QAAQ,CAAC,EAAC,QAAQ,EAAE,SAAS,EAAE,CAAC,CAAC;IAC1C,CAAC;IACD,0BAAM,GAAN;QACY,IAAA,8BAAQ,CAAgB;QAEhC,IAAI,QAAQ,IAAI,SAAS,EAAE;YACvB,OAAO,CACL,0CAAK,SAAS,EAAE,qBAAM,CAAC,gBAAgB,EAAE,EAAE,EAAC,YAAY;gBACtD;oBAAK,iCAAC,WAAI,IAAC,IAAI,EAAC,SAAS,EAAC,KAAK,EAAE,EAAE,QAAQ,EAAE,EAAE,EAAE,MAAM,EAAE,MAAM,EAAE,EAAE,IAAI,SAAG,CAAM;gBAChF;oBACE,4CAAM;oBAAA,4CAAM;oBAAA,4CAAM;oBAClB,0CAAK,KAAK,EAAE,EAAE,MAAM,EAAE,MAAM,EAAE;wBAAE,yCAAI,SAAS,EAAE,qBAAM,CAAC,IAAI,EAAE,KAAK,EAAE,EAAE,SAAS,EAAE,QAAQ,EAAE,SAAS,EAAE,KAAK,EAAE,oBAAoB,CAAM,CAClI,CACF,CACP,CAAA;SACJ;QACD,IAAI,QAAQ,IAAI,KAAK,EAAE;YACnB,OAAO,CACL,0CAAK,SAAS,EAAE,qBAAM,CAAC,gBAAgB,EAAE,EAAE,EAAC,YAAY;gBACtD;oBACE,4CAAM;oBAAA,4CAAM;oBAAA,4CAAM;oBAClB,0CAAK,KAAK,EAAE,EAAE,MAAM,EAAE,MAAM,EAAE;wBAAE,yCAAI,SAAS,EAAE,qBAAM,CAAC,IAAI,EAAE,KAAK,EAAE,EAAE,SAAS,EAAE,QAAQ,EAAE,SAAS,EAAE,KAAK,EAAE,SAAS,CAAM,CACvH,CACF,CACP,CAAA;SACD;QACJ,IAAI,QAAQ,IAAI,KAAK,EAAE;YACrB,OAAO,CACL,0CAAK,SAAS,EAAE,qBAAM,CAAC,gBAAgB,EAAE,EAAE,EAAC,YAAY;gBACtD;oBACE,4CAAM;oBAAA,4CAAM;oBAAA,4CAAM;oBAClB,0CAAK,KAAK,EAAE,EAAE,MAAM,EAAE,MAAM,EAAE;wBAAE,yCAAI,SAAS,EAAE,qBAAM,CAAC,IAAI,EAAE,KAAK,EAAE,EAAE,SAAS,EAAE,QAAQ,EAAE,SAAS,EAAE,KAAK,EAAE,SAAS,CAAM,CACvH,CACF,CACP,CAAA;SACD;QAEF,OAAO,IAAI,CAAA;IACf,CAAC;IACL,gBAAC;AAAD,CAAC,AAjDD,CAAwB,iBAAS,GAiDhC;AAED,SAAS,CAAC,SAAS,GAAG;IAClB,YAAY,EAAE,uBAAS,CAAC,IAAI;IAC5B,OAAO,EAAE,uBAAS,CAAC,IAAI;IACvB,SAAS,EAAE,uBAAS,CAAC,MAAM;CAC9B,CAAA;AAED,qBAAe,SAAS,CAAC"} \ No newline at end of file diff --git a/src/components/YulioID/experimental/components/StatusBoxC.old.js b/src/components/YulioID/experimental/components/StatusBoxC.old.js deleted file mode 100644 index 6aaa2d25..00000000 --- a/src/components/YulioID/experimental/components/StatusBoxC.old.js +++ /dev/null @@ -1,64 +0,0 @@ -import React, { Component } from 'react'; -import { Icon } from 'antd'; -import styles from '../yid.scss'; - -import PropTypes from 'prop-types'; - -class StatusBox extends Component { - - constructor(props){ - super(props) - this.state = { - Reactive: 'loading', - } - } - componentDidMount(){ - const { StateCode } = this.props; - this.setState({Reactive: StateCode }); - } - render(){ - const { Reactive } = this.state; - - if (Reactive == 'loading') { - return ( -
-
-
-


-
Wait a sec...
-
-
- ) - } - if (Reactive == '200') { - return ( -
-
-


-
SI
-
-
- ) - } - if (Reactive == '400') { - return ( -
-
-


-
NO
-
-
- ) - } - - return null - } -} - -StatusBox.propTypes = { - handleStatus: PropTypes.func, - Loading: PropTypes.bool, - StateCode: PropTypes.string -} - -export default StatusBox; \ No newline at end of file diff --git a/src/components/YulioID/experimental/components/StatusBoxC.tsx b/src/components/YulioID/experimental/components/StatusBoxC.tsx deleted file mode 100644 index 7e53c372..00000000 --- a/src/components/YulioID/experimental/components/StatusBoxC.tsx +++ /dev/null @@ -1,74 +0,0 @@ -var __extends = (this && this.__extends) || (function () { - var extendStatics = function (d, b) { - extendStatics = Object.setPrototypeOf || - ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) || - function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; }; - return extendStatics(d, b); - }; - return function (d, b) { - extendStatics(d, b); - function __() { this.constructor = d; } - d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __()); - }; -})(); -import * as PropTypes from 'prop-types'; -var react = require("react"); -var antd = require("antd"); -var yid_scss = require("../yid.scss"); - - -var StatusBox = /** @class */ (function (_super) { - __extends(StatusBox, _super); - function StatusBox(props) { - var _this = _super.call(this, props) || this; - _this.state = { - Reactive: 'loading' - }; - return _this; - } - StatusBox.prototype.componentDidMount = function () { - var StateCode = this.props.StateCode; - this.setState({ Reactive: StateCode }); - }; - StatusBox.prototype.render = function () { - var Reactive = this.state.Reactive; - if (Reactive == 'loading') { - return (react.createElement("div", { className: yid_scss.spinner__wrapper, id: "loadingspn" }, - react.createElement("div", null, - react.createElement(antd.Icon, { type: "loading", style: { fontSize: 24, margin: '13px' }, spin: true })), - react.createElement("div", null, - react.createElement("br", null), - react.createElement("br", null), - react.createElement("br", null), - react.createElement("div", { style: { margin: 'auto' } }, - react.createElement("h6", { className: yid_scss.h6lp, style: { textAlign: 'center', marginTop: '15%' } }, "Wait a sec..."))))); - } - if (Reactive == '200') { - return (react.createElement("div", { className: yid_scss.spinner__wrapper, id: "loadingspn" }, - react.createElement("div", null, - react.createElement("br", null), - react.createElement("br", null), - react.createElement("br", null), - react.createElement("div", { style: { margin: 'auto' } }, - react.createElement("h6", { className: yid_scss.h6lp, style: { textAlign: 'center', marginTop: '15%' } }, "SI"))))); - } - if (Reactive == '400') { - return (react.createElement("div", { className: yid_scss.spinner__wrapper, id: "loadingspn" }, - react.createElement("div", null, - react.createElement("br", null), - react.createElement("br", null), - react.createElement("br", null), - react.createElement("div", { style: { margin: 'auto' } }, - react.createElement("h6", { className: yid_scss.h6lp, style: { textAlign: 'center', marginTop: '15%' } }, "NO"))))); - } - return null; - }; - return StatusBox; -}(react.Component)); -StatusBox.PropTypes = { - handleStatus: PropTypes.func, - Loading: PropTypes.bool, - StateCode: PropTypes.string -}; -exports["default"] = StatusBox; -//# sourceMappingURL=StatusBoxC.js.map \ No newline at end of file diff --git a/src/components/YulioID/experimental/model.js b/src/components/YulioID/experimental/model.js deleted file mode 100644 index dbbab857..00000000 --- a/src/components/YulioID/experimental/model.js +++ /dev/null @@ -1,29 +0,0 @@ -import { router, pathMatchRegexp } from 'utils' -import api from 'api' - -const { loginUser } = api - -export default { - namespace: 'login', - - state: {}, - - effects: { - *login({ payload }, { put, call, select }) { - const data = yield call(loginUser, payload) - const { locationQuery } = yield select(_ => _.app) - if (data.success) { - const { from } = locationQuery - yield put({ type: 'app/query' }) - if (!pathMatchRegexp('/login', from)) { - if (from === '/') router.push('/dashboard') - else router.push(from) - } else { - router.push('/dashboard') - } - } else { - throw data - } - }, - }, -} diff --git a/src/components/YulioID/experimental/yid.scss b/src/components/YulioID/experimental/yid.scss deleted file mode 100644 index 5c6418fe..00000000 --- a/src/components/YulioID/experimental/yid.scss +++ /dev/null @@ -1,769 +0,0 @@ -@import url('https://cdnjs.cloudflare.com/ajax/libs/simple-line-icons/2.4.1/css/simple-line-icons.min.css'); -@import url('https://fonts.googleapis.com/css?family=Poppins:300,300i,500,500i,700'); - -.retryBTN{ - margin-top: 150px; - text-align: center; -} -.StateIcon { - font-size: 24px; - margin: 13px; -} - -.StateIcon_exception { - color: red; - font-size: 24px; - margin: 13px; -} - - .mainlp { - --neutralShade0: #f8f8f8; - --neutralShade1: #f2f2f2; - --neutralShade2: #e8e9e9; - --neutralShade3: #d1d3d4; - --neutralShade4: #babdbf; - --neutralShade5: #808488; - --neutralShade6: #666a6d; - --neutralShade7: #4d5052; - --neutralShade8: #212122; - --grayColor: #999; - --lightGrayColor: #ddd; - --borderRadius: 6px; - --boxShadow: 0 2px 5px rgba(#333, 0.2); - } - - /*overall layout*/ - .mainlp { - width: 90%; - max-width: 1050px; - margin: 3em auto 0; - display: grid; - grid: repeat(5, fit-content(300px))/100%; - color: var(--foregroundColor); - text-align: left; - } - - .mainlp .sectionlp { - border: 1px solid var(--accentColor); - position: relative; - padding: 40px 40px 50px; - } - .mainlp .sectionlp > h6 { - color: var(--accentColor); - background: var(--canvasColor); - position: absolute; - top: -10px; - left: 20px; - padding: 0 10px; - } - .mainlp .sectionlp .h6lp.subheader { - color: var(--grayColor); - margin-top: 20px; - margin-bottom: 20px; - width: 100%; - } - - @media (max-width: 992px) { - section:not(:last-child) { - border-width: 0 0 1px; - } - - section:last-child { - border-width: 0; - } - } - @media (min-width: 992px) { - main { - grid: repeat(9, auto)/45% 1fr 45%; - grid-auto-flow: dense; - } - - .media-card-1 { - grid-column: 1 / 2; - border-width: 1px 0; - } - - .media-card-2 { - grid-column: 2 / 4; - border-width: 1px 0 1px 1px; - } - - .media-card-3 { - grid-column: 1 / 4; - border-width: 0; - } - - .filter-section { - grid-column: 3 / 4; - grid-row: 1 / 2; - border-width: 0 0 0 1px; - } - - .well-cta-1 { - grid-row: 3; - grid-column: 1 / 3; - border-width: 1px 1px 0 0; - } - - .well-cta-2 { - grid-row: 2; - grid-column: 2 / 4; - border-width: 1px 0 0; - } - - .tables { - grid-row: 4; - grid-column: 1 / -1; - border-width: 1px 0 0; - } - - .forms { - grid-column: 1 / 3; - border-width: 0; - } - - .comments { - grid-row: 2; - grid-column: 1 / 2; - border-width: 1px 1px 0 0; - padding-top: 60px; - } - - .modals { - grid-row: 3; - grid-column: 3 / 4; - justify-content: center; - border-width: 1px 0 0; - } - } - - - /*checkboxes*/ - input:disabled ~ * { - opacity: 0.3; - user-select: none; - pointer-events: none; - } - - .checkboxtoggle input { - display: none; - } - .checkboxtoggle label { - outline: 0; - display: block; - width: 45px; - height: 16px; - background: var(--grayColor); - position: relative; - cursor: pointer; - border-radius: 2em; - padding: 2px; - transition: all 0.4s ease; - margin: 0; - } - .checkboxtoggle .labellp:after { - position: relative; - display: block; - content: ""; - width: 20px; - height: 20px; - border-radius: 50%; - background: #fff; - transition: all 0.2s ease; - border: 1px solid var(--grayColor); - box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1); - left: -4px; - top: -5px; - } - .checkboxtoggle input:checked + .labellp { - background: var(--accent2Color); - } - .checkboxtoggle input:checked + .labellp:after { - left: 52%; - } - - .checkbox { - position: relative; - user-select: none; - margin-bottom: 10px; - } - .checkbox input { - display: none; - } - .checkbox .labellp { - position: relative; - vertical-align: middle; - cursor: pointer; - font-weight: 500; - padding-left: 35px; - } - .checkbox .box { - display: inline-block; - width: 20px; - border-radius: var(--borderRadius); - border: 1px solid var(--grayColor); - width: 24px; - height: 24px; - vertical-align: middle; - margin-right: 3px; - transition: 0.3s ease; - position: absolute; - left: 0; - } - .checkbox .box:before, .checkbox .box:after { - content: ""; - position: absolute; - width: 4px; - height: 16px; - border-radius: 40px; - background: var(--backgroundColor); - transition: all 0.3s ease; - } - .checkbox .spanlp.box:before { - transform: rotate(45deg) translateY(-5px) translateX(10px) scale(0); - } - .checkbox .spanlp.box:after { - height: 8px; - transform: rotate(-45deg) translateY(10px) translateX(-4px) scale(0); - } - .checkbox input:checked + .labellp .spanlp.box { - background: var(--accent2Color); - border-color: var(--accent2Color); - } - .checkbox input:checked + .labellp .spanlp.box:before { - transform: rotate(45deg) translateY(-5px) translateX(10px) scale(1); - } - .checkbox input:checked + .labellp .spanlp.box:after { - height: 8px; - transform: rotate(-45deg) translateY(10px) translateX(-4px) scale(1); - } - .checkbox input:disabled:checked + .spanlp.box { - background: var(--grayColor); - border: var(--grayColor); - } - .checkbox input:disabled:checked ~ .labellp:before, .checkbox input:disabled:checked ~ .labellp:after { - background: black; - } - - /*buttons & links*/ - .links__sec { - margin: 10px 0 30px; - } - .links a.link { - display: inline; - margin: 10px 30px 5px 0; - border-bottom: 2px dashed; - font-weight: 500; - line-height: 2.5; - cursor: pointer; - color: var(--neutralShade5); - } - .links a.link:hover, .links a.link.hover { - color: var(--neutralShade6); - border-bottom: 2px solid; - } - .links a.link.primary { - color: var(--primaryColor); - } - .links a.link.primary:hover, .links a.link.primary.hover { - color: var(--primaryShade5); - } - .links a.link.secondary { - color: var(--secondaryColor); - } - .links a.link.secondary:hover, .links a.link.secondary.hover { - color: var(--secondaryShade5); - } - - .buttons { - display: flex; - flex-wrap: wrap; - align-items: center; - } - .buttons > * { - flex: 1 1 calc(50% - 20px); - margin-top: 20px; - } - .buttons > *:nth-child(odd) { - margin-right: 20px; - } - - a.buttonlp, - input.buttonlp, - .buttonlp { - outline: none; - width: 100%; - text-align: center; - display: inline-block; - border: none; - font: 500 16px/1 "Poppins", sans-serif; - padding: 20px; - cursor: pointer; - border-radius: var(--borderRadius); - background: var(--primaryColor); - color: var(--backgroundColor); - position: relative; - top: 0; - transition: 0.2s ease; - } - a.buttonlp:hover, a.buttonlp.hover, - input.buttonlp:hover, - input.buttonlp.hover, - .buttonlp:hover, - .buttonlp.hover { - top: -3px; - box-shadow: 0 2px 5px rgba(0, 0, 0, 0.15); - } - a.buttonlp:active, a.buttonlp.active, - input.buttonlp:active, - .input.buttonlp.active, - .buttonlp:active, - .buttonlp.active { - background: var(--primaryShade4); - outline: none; - box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1); - top: 0; - } - a.buttonlp.disabled, - input.buttonlp.disabled, - .buttonlp.disabled { - opacity: 0.4; - user-select: none; - pointer-events: none; - } - a.buttonlp.medium, - input.buttonlp.medium, - .buttonlp.medium { - padding: 15px 18px; - width: auto; - } - a.buttonlp.small, - input.buttonlp.small, - .buttonlp.small { - padding: 10px 12px; - width: auto; - font-size: 14px; - font-weight: 500; - } - a.buttonlp.secondary, - input.buttonlp.secondary, - .buttonlp.secondary { - background: var(--secondaryColor); - } - a.buttonlp.secondary:active, a.buttonlp.secondary:focus, a.buttonlp.secondary.active, - input.buttonlp.secondary:active, - input.buttonlp.secondary:focus, - input.buttonlp.secondary.active, - .buttonlp.secondary:active, - .buttonlp.secondary:focus, - .buttonlp.secondary.active { - background: var(--secondaryShade4); - outline: none; - } - a.buttonlp.accent, - input.buttonlp.accent, - .buttonlp.accent { - background: var(--accentColor); - } - a.buttonlp.accent:active, a.buttonlp.accent:focus, a.buttonlp.accent.active, - input.buttonlp.accent:active, - input.buttonlp.accent:focus, - input.buttonlp.accent.active, - .buttonlp.accent:active, - .buttonlp.accent:focus, - .buttonlp.accent.active { - background: var(--accentShade4); - } - a.buttonlp.accent2, - input.buttonlp.accent2, - .buttonlp.accent2 { - background: var(--accent2Color); - } - a.buttonlp.accent2:active, a.buttonlp.accent2:focus, a.buttonlp.accent2.active, - input.buttonlp.accent2:active, - input.buttonlp.accent2:focus, - input.buttonlp.accent2.active, - .buttonlp.accent2:active, - .buttonlp.accent2:focus, - .buttonlp.accent2.active { - background: var(--accent2Shade4); - } - a.buttonlp.accent3, - input.buttonlp.accent3, - .buttonlp.accent3 { - background: var(--accent3Color); - } - a.buttonlp.accent3:active, a.buttonlp.accent3:focus, a.buttonlp.accent3.active, - input.buttonlp.accent3:active, - input.buttonlp.accent3:focus, - input.buttonlp.accent3.active, - .buttonlp.accent3:active, - .buttonlp.accent3:focus, - .buttonlp.accent3.active { - background: var(--accent3Shade4); - } - - /*inputs*/ - .input__wrapper { - margin-bottom: 10px; - } - .inputRG__wrapper { - margin-bottom: 0px; - } - - .labelform { - font-weight: 500; - display: block; - margin-bottom: 5px; - } - - .inputform, - select, - textarea { - height: 50px; - font-size: 16px; - border: 2px solid var(--neutralShade3); - width: 100%; - padding: 12px; - font-family: "Poppins"; - border-radius: var(--borderRadius); - color: var(--foregroundColor); - background: var(--backgroundColor); - } - .inputform:focus, .inputform.active, - select:focus, - select.active, - textarea:focus, - textarea.active { - outline: none; - border-color: var(--primaryColor); - } - .inputform:disabled, - select:disabled, - textarea:disabled { - cursor: not-allowed; - background: var(--neutralShade1); - opacity: 0.6; - } - Input .inputPasswordform { - height: 50px; - font-size: 16px; - border: 2px solid var(--neutralShade3); - width: 100%; - padding: 12px; - font-family: "Poppins"; - border-radius: var(--borderRadius); - color: var(--foregroundColor); - background: var(--backgroundColor); - } - - Input .inputPasswordform:focus { - outline: none; - border-color: var(--primaryColor); - } - - .inputform.input { - height: 56px; - font-size: 18px; - padding: 15px; - } - - .TOSAccept { - margin: 7px; - } - .TOSAccept span::first-letter { - color: blue; - } - - /*spinner*/ - .spinner + .labellp { - font-size: 14px; - font-weight: 500; - margin-top: 8px; - display: inline-block; - text-transform: uppercase; - color: var(--primaryShade4); - } - - .spinner1 .spinner { - max-width: 50px; - margin: auto; - height: 20px; - position: relative; - } - .spinner1 .spinner:after { - content: ""; - position: absolute; - width: 20px; - height: 20px; - left: -10%; - background: var(--primaryColor); - animation: spinnerLeftRight 1s infinite; - } - .spinner1 .spinner:before { - content: ""; - position: absolute; - width: 20px; - height: 20px; - left: -10%; - background: var(--primaryShade2); - opacity: 1; - animation: spinnerLeftRight 1s infinite 0.06s; - } - - @keyframes spinnerLeftRight { - 0% { - left: 85%; - } - 50% { - left: -10%; - } - 100% { - left: 85%; - } - } - - - #sunset + .labellp { - background: linear-gradient(to right, #ff9557 50%, #ffcc67 50%); - } - .mainlp { - --canvasColor: #f9f9f9; - --backgroundColor: #fff; - --foregroundColor: #111; - --primaryColor: #373F51; - --primaryShade1: #ffe2d1; - --primaryShade2: #ffceb2; - --primaryShade3: #ffb184; - --primaryShade4: #e88850; - --primaryShade5: #d17a48; - --secondaryColor: #ffcc67; - --secondaryShade1: #fff1d5; - --secondaryShade2: #ffde9e; - --secondaryShade3: #ffd074; - --secondaryShade4: #e8ba5e; - --secondaryShade5: #ba954b; - --accentColor: #4e5166; - --accentShade1: #cecfd5; - --accentShade2: #aeafb9; - --accentShade3: #8e909d; - --accentShade4: #6e7081; - --accentShade5: #404354; - --accent2Color: #588b8b; - --accent2Shade1: #c2d4d4; - --accent2Shade2: #a3bfbf; - --accent2Shade3: #85aaaa; - --accent2Shade4: #507f7f; - --accent2Shade5: #497272; - --accent3Color: #fe5f55; - --accent3Shade1: #fec4c1; - --accent3Shade2: #fea7a2; - --accent3Shade3: #fe7c73; - --accent3Shade4: #e7574e; - --accent3Shade5: #b9463e; - } - - .formlogin { - border-radius: 10px; - padding: 30px; - box-shadow: 0 3px 15px rgba(51, 51, 51, 0.2); - background: var(--backgroundColor); - margin-top: 30px; - position: relative; - overflow: hidden; - vertical-align: middle; - } - .formlogin .checkbox { - margin-bottom: 30px; - } - .formlogin .spinner__wrapper { - place-items: center; - position: absolute; - width: 100%; - height: 100%; - left: 0; - top: 0; - background: rgba(255, 255, 255, 0.85); - - } - - @media (min-width: 768px) { - .formlogin { - grid: auto / 1fr 40%; - } - .formlogin .input__wrapper { - grid-column: span 2; - } - .formlogin .inputRG__wrapper { - grid-column: span 2; - } - .formlogin .checkbox { - align-self: center; - margin-bottom: 0; - } - } - #dark:checked ~ .mainlp .spinner__wrapper, - #pinkaru:checked ~ .mainlp .spinner__wrapper { - background: rgba(20, 20, 20, 0.85); - } - - - - - - - - - /*typography 2*/ - .stonglp { - font-weight: 500; - } - - .emlp { - font-style: italic; - } - - .h1lp { - font: 700 48px/1.2 "Poppins", sans-serif; - margin-bottom: 10px; - } - - .h2lp { - font: 700 32px/1.2 "Poppins", sans-serif; - margin-bottom: 10px; - } - - .h3lp { - font: 700 24px/1.2 "Poppins", sans-serif; - margin-bottom: 10px; - } - - .h4lp { - font: 700 20px/1.2 "Poppins", sans-serif; - margin-bottom: 10px; - } - - .h5lp { - font: 500 18px/1.2 "Poppins", sans-serif; - margin-bottom: 10px; - } - - .h6lp { - font: 500 16px/1.2 "Poppins", sans-serif; - text-transform: uppercase; - } - - .apierrort { - font: 700 20px/1.2 "Poppins", sans-serif; - margin-bottom: 10px; -} - -.apierrort::first-letter { - text-transform: uppercase; -} - -.devServer{ - color: orangered; - text-align: left; - margin: 10px; - float: left; - position: fixed; - z-index: 104; - font-size: 16px; - -} -.devServer span{ - text-shadow: 2px 0 0 #fff, -2px 0 0 #fff, 0 2px 0 #fff, 0 -2px 0 #fff, 1px 1px #fff, -1px -1px 0 #fff, 1px -1px 0 #fff, -1px 1px 0 #fff; -} - - -.bgHero iframe { - width: 100%; - height: 100%; - position: fixed; - top: 0; - z-index: 103; -} - -$circle-length: 340px; -$check-length: 230px; - -@keyframes scaleAnimation { - 0% { - opacity: 0; - transform: scale(1.5); - } - 100% { - opacity: 1; - transform: scale(1); - } -} - -@keyframes drawCircle { - 0% { - stroke-dashoffset: $circle-length; - } - 100% { - stroke-dashoffset: 0; - } -} - -@keyframes drawCheck { - 0% { - stroke-dashoffset: $check-length; - } - 100% { - stroke-dashoffset: 0; - } -} - -@keyframes fadeOut { - 0% { - opacity: 1; - } - 100% { - opacity: 0; - } -} - -@keyframes fadeIn { - 0% { - opacity: 0; - } - 100% { - opacity: 1; - } -} - -#successAnimationCircle { - stroke-dasharray: $circle-length $circle-length; - stroke: #FFF; -} - -#successAnimationCheck { - stroke-dasharray: $check-length $check-length; - stroke: #FFF; -} - -#successAnimationResult { - fill: #FFF; - opacity: 0; -} - -#successAnimation .animated { - animation: 1s ease-out 0s 1 both scaleAnimation; - - #successAnimationCircle { - animation: 1s cubic-bezier(0.77, 0, 0.175, 1) 0s 1 both drawCircle, - 0.3s linear 0.9s 1 both fadeOut; - } - - #successAnimationCheck { - animation: 1s cubic-bezier(0.77, 0, 0.175, 1) 0s 1 both drawCheck, - 0.3s linear 0.9s 1 both fadeOut; - } - - #successAnimationResult { - animation: 0.3s linear 0.9s both fadeIn; - } -} diff --git a/src/components/index.js b/src/components/index.js index 58867f5f..ff83708a 100644 --- a/src/components/index.js +++ b/src/components/index.js @@ -9,8 +9,7 @@ import Loader from './Loader/Loader.js' import ScrollBar from './ScrollBar' 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, LikeBTN, MainFeed, MicroHeader} +export { 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 501692ff..8411b62f 100644 --- a/src/layouts/PrimaryLayout.js +++ b/src/layouts/PrimaryLayout.js @@ -14,7 +14,7 @@ import Error from '../pages/404' import styles from './PrimaryLayout.less' const { Content } = Layout -const { Header, Sider, Control } = MyLayout +const { ChatSider, Sider, Control } = MyLayout @withRouter @connect(({ app, loading }) => ({ app, loading })) @@ -161,6 +161,7 @@ class PrimaryLayout extends PureComponent { + ) diff --git a/src/pages/about/index.js b/src/pages/about/index.js index b531c78f..5c3ff1f1 100644 --- a/src/pages/about/index.js +++ b/src/pages/about/index.js @@ -10,7 +10,6 @@ class AppAbout extends React.Component {
-

{ycore.AppInfo.name}

v{ycore.AppInfo.version}{ycore.DetectNoNStableBuild('TagComponent')} diff --git a/src/components/YulioID/experimental/index.js b/src/pages/login/components/YulioID.js similarity index 83% rename from src/components/YulioID/experimental/index.js rename to src/pages/login/components/YulioID.js index e4adfac5..abdba1b6 100644 --- a/src/components/YulioID/experimental/index.js +++ b/src/pages/login/components/YulioID.js @@ -3,11 +3,10 @@ import {GetAuth, InitSDCP, DevOptions, asyncSDCP} from 'ycore'; import PropTypes from 'prop-types'; import { connect } from 'dva'; import { Button, Form, Input, Drawer, Icon, Collapse } from 'antd' -import styles from './yid.scss'; +import styles from './index.less'; import formstyle from './formstyle.less' const FormItem = Form.Item -const RenderInclude = ({ data }) => { if (!data) { return null; } else { return data; } } @connect(({ loading }) => ({ loading })) @Form.create() @@ -71,22 +70,29 @@ class YulioID extends Component { render() { + const { visible } = this.props const { getFieldDecorator } = this.props.form; const { ShowLoading, StateIcon, StateMessage, StateException } = this.state; const { Panel } = Collapse; return ( -
+
-
YulioID™
-

Welcome Back !

+
+
YulioID™
+

Login

+
+ {/* */} @@ -150,11 +156,7 @@ class YulioID extends Component {
@@ -167,24 +169,11 @@ class YulioID extends Component { > Or -
- -
-
- +
+ +
+
)} diff --git a/src/components/YulioID/experimental/formstyle.less b/src/pages/login/components/formstyle.less similarity index 99% rename from src/components/YulioID/experimental/formstyle.less rename to src/pages/login/components/formstyle.less index 9a1a23f1..adf4481c 100644 --- a/src/components/YulioID/experimental/formstyle.less +++ b/src/pages/login/components/formstyle.less @@ -1,5 +1,6 @@ @import '~themes/vars.less'; + .inputform { :global{ input { diff --git a/src/pages/login/components/index.less b/src/pages/login/components/index.less new file mode 100644 index 00000000..3bed52e9 --- /dev/null +++ b/src/pages/login/components/index.less @@ -0,0 +1,368 @@ + @import '~themes/vars.less'; + + .loginWrapper{ + :global{ + .ant-drawer-right.ant-drawer-open .ant-drawer-content-wrapper{ + border-radius: 20px 0 0 20px; + } + .ant-drawer { + box-shadow: none; + border-radius: 20px 0 0 20px; + max-width: 490px; + min-width: 34%; + } + .ant-drawer-content{ + background: #ffffff9f; + border-radius: 20px 0 0 20px; + } + } +} + .retryBTN{ + margin-top: 150px; + text-align: center; + } + .StateIcon { + font-size: 24px; + margin: 13px; + } + .StateIcon_exception { + color: red; + font-size: 24px; + margin: 13px; + } + .mainlp { + word-break: keep-all; + margin: 3em 20px 0 20px; + color: @foregroundColor; + text-align: left; + } + + .mainlp .sectionlp { + border: 1px solid @accentColor; + position: relative; + padding: 40px 40px 50px; + } + .mainlp .sectionlp > h6 { + color: @accentColor; + background: @canvasColor; + position: absolute; + top: -10px; + left: 20px; + padding: 0 10px; + } + .mainlp .sectionlp .h6lp.subheader { + color: @grayColor; + margin-top: 20px; + margin-bottom: 20px; + width: 100%; + } + + @media (max-width: 992px) { + section:not(:last-child) { + border-width: 0 0 1px; + } + + section:last-child { + border-width: 0; + } + } + + + + + .buttons { + display: flex; + flex-wrap: wrap; + align-items: center; + } + .buttons > * { + flex: 1 1 calc(50% - 20px); + margin-top: 20px; + } + .buttons > *:nth-child(odd) { + margin-right: 20px; + } + + a.buttonlp, + input.buttonlp, + .buttonlp { + outline: none; + width: 100%; + text-align: center; + display: inline-block; + border: none; + font: 500 16px/1 "Poppins", sans-serif; + padding: 20px; + cursor: pointer; + border-radius: @borderRadius; + background: @primaryColor; + color: @backgroundColor; + position: relative; + top: 0; + transition: 0.2s ease; + } + a.buttonlp:hover, a.buttonlp.hover, + input.buttonlp:hover, + input.buttonlp.hover, + .buttonlp:hover, + .buttonlp.hover { + top: -3px; + box-shadow: 0 2px 5px rgba(0, 0, 0, 0.15); + } + a.buttonlp:active, a.buttonlp.active, + input.buttonlp:active, + .input.buttonlp.active, + .buttonlp:active, + .buttonlp.active { + background: @primaryShade4; + outline: none; + box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1); + top: 0; + } + a.buttonlp.disabled, + input.buttonlp.disabled, + .buttonlp.disabled { + opacity: 0.4; + user-select: none; + pointer-events: none; + } + a.buttonlp.medium, + input.buttonlp.medium, + .buttonlp.medium { + padding: 15px 18px; + width: auto; + } + a.buttonlp.small, + input.buttonlp.small, + .buttonlp.small { + padding: 10px 12px; + width: auto; + font-size: 14px; + font-weight: 500; + } + a.buttonlp.secondary, + input.buttonlp.secondary, + .buttonlp.secondary { + background: @secondaryColor; + } + a.buttonlp.secondary:active, a.buttonlp.secondary:focus, a.buttonlp.secondary.active, + input.buttonlp.secondary:active, + input.buttonlp.secondary:focus, + input.buttonlp.secondary.active, + .buttonlp.secondary:active, + .buttonlp.secondary:focus, + .buttonlp.secondary.active { + background: @secondaryShade4; + outline: none; + } + a.buttonlp.accent, + input.buttonlp.accent, + .buttonlp.accent { + background: @accentColor; + } + a.buttonlp.accent:active, a.buttonlp.accent:focus, a.buttonlp.accent.active, + input.buttonlp.accent:active, + input.buttonlp.accent:focus, + input.buttonlp.accent.active, + .buttonlp.accent:active, + .buttonlp.accent:focus, + .buttonlp.accent.active { + background: @accentShade4; + } + a.buttonlp.accent2, + input.buttonlp.accent2, + .buttonlp.accent2 { + background: @accent2Color; + } + a.buttonlp.accent2:active, a.buttonlp.accent2:focus, a.buttonlp.accent2.active, + input.buttonlp.accent2:active, + input.buttonlp.accent2:focus, + input.buttonlp.accent2.active, + .buttonlp.accent2:active, + .buttonlp.accent2:focus, + .buttonlp.accent2.active { + background: @accent2Shade4; + } + a.buttonlp.accent3, + input.buttonlp.accent3, + .buttonlp.accent3 { + background: @accent3Color; + } + a.buttonlp.accent3:active, a.buttonlp.accent3:focus, a.buttonlp.accent3.active, + input.buttonlp.accent3:active, + input.buttonlp.accent3:focus, + input.buttonlp.accent3.active, + .buttonlp.accent3:active, + .buttonlp.accent3:focus, + .buttonlp.accent3.active { + background: @accent3Shade4; + } + + /*inputs*/ + .input__wrapper { + margin-bottom: 10px; + } + .inputRG__wrapper { + margin-bottom: 0px; + } + + .labelform { + font-weight: 500; + display: block; + margin-bottom: 5px; + } + + .inputform, + select, + textarea { + height: 50px; + font-size: 16px; + border: 2px solid @neutralShade3; + width: 100%; + padding: 12px; + font-family: "Poppins"; + border-radius: @borderRadius; + color: @foregroundColor; + background: @backgroundColor; + } + .inputform:focus, .inputform.active, + select:focus, + select.active, + textarea:focus, + textarea.active { + outline: none; + border-color: @primaryColor; + } + .inputform:disabled, + select:disabled, + textarea:disabled { + cursor: not-allowed; + background: @neutralShade1; + opacity: 0.6; + } + Input .inputPasswordform { + height: 50px; + font-size: 16px; + border: 2px solid @neutralShade3; + width: 100%; + padding: 12px; + font-family: "Poppins"; + border-radius: @borderRadius; + color: @foregroundColor; + background: @backgroundColor; + } + + Input .inputPasswordform:focus { + outline: none; + border-color: @primaryColor; + } + + .inputform.input { + height: 56px; + font-size: 18px; + padding: 15px; + } + + + /*spinner*/ + .spinner + .labellp { + font-size: 14px; + font-weight: 500; + margin-top: 8px; + display: inline-block; + text-transform: uppercase; + color: @primaryShade4; + } + + .spinner1 .spinner { + max-width: 50px; + margin: auto; + height: 20px; + position: relative; + } + .spinner1 .spinner:after { + content: ""; + position: absolute; + width: 20px; + height: 20px; + left: -10%; + background: @primaryColor; + animation: spinnerLeftRight 1s infinite; + } + .spinner1 .spinner:before { + content: ""; + position: absolute; + width: 20px; + height: 20px; + left: -10%; + background: @primaryShade2; + opacity: 1; + animation: spinnerLeftRight 1s infinite 0.06s; + } + + @keyframes spinnerLeftRight { + 0% { + left: 85%; + } + 50% { + left: -10%; + } + 100% { + left: 85%; + } + } + + + + .formlogin { + border-radius: 10px; + padding: 30px; + box-shadow: 0 3px 15px rgba(51, 51, 51, 0.2); + background: #ffffff44; + margin-top: 30px; + position: relative; + overflow: hidden; + vertical-align: middle; + } + .formlogin .checkbox { + margin-bottom: 30px; + } + .formlogin .spinner__wrapper { + place-items: center; + position: absolute; + width: 100%; + height: 100%; + left: 0; + top: 0; + background: rgba(255, 255, 255, 0.85); + + } + + + + + + .logHeader{ + + h1{ + font: 700 48px/1.2 "Nunito", sans-serif; + text-align: center; + margin-bottom: 10px; + } + h6{ + line-height: 1px; + display: flex; + font: 500 16px/1 "Poppins", sans-serif; + text-transform: uppercase; + img{ + vertical-align: middle; + height: 17px; + } + } +} + +.moreActions{ + display: flex; +} + + \ No newline at end of file diff --git a/src/pages/login/index.js b/src/pages/login/index.js index 4c0d11b9..25da3921 100644 --- a/src/pages/login/index.js +++ b/src/pages/login/index.js @@ -1,18 +1,39 @@ -import React, { Component } from 'react'; -import { YulioID } from 'components'; +import React, { Component } from 'react' +import * as antd from 'antd' +import * as ycore from 'ycore' +import YulioID from './components/YulioID.js' +import styles from './index.less'; + + class Login extends Component { + constructor(props) { + super(props) + this.state = { + showYulioID: true + } + + } + toogleYulioID(){ + this.setState({ showYulioID: !this.state.showYulioID }) + } - - - - render() { - return ( - Using stable
} /> - ) +
+ +
+
+
+
+ {/* */} + {/*
this.toogleYulioID()} icon="login" > Login
*/} +
+

{`v${ycore.AppInfo.version}`}

{ycore.DetectNoNStableBuild('TagComponent')}
+ +
+ + ) } } - export default Login diff --git a/src/pages/login/index.less b/src/pages/login/index.less new file mode 100644 index 00000000..eae72a4b --- /dev/null +++ b/src/pages/login/index.less @@ -0,0 +1,64 @@ +@import '~themes/vars.less'; + +.backgroud{ + position: absolute; + height: 100%; + width: 100%; + z-index: 0; + top: 0; + left: 0; +} +.version{ + display: inline; + z-index: 2; + font-family: "Poppins", sans-serif; + font-size: 11px; + bottom: 0; + position: absolute; + float: left; + margin: 0 0 5px 3%; + color: #F9F9F9; + h2{ + color: #F9F9F9; + } +} +.loginLandingWrapper{ + background-color: #F9F9F9; + width: 100%; + height: 100%; + font-family: "Nunito", sans-serif; + padding: 15px 30px 15px 35px; +} +.brand{ + width: 100%; + top: 0; + float: left; + vertical-align: middle; + position: relative; + img{ + max-width: 11vw; + } +} +.prest{ + z-index: 2; + position: relative; + font-family: "Source Sans Pro", sans-serif; + padding: 25px; + margin: auto; + vertical-align: bottom; + img{ + width: 100%; + max-height: 60vh; + } + .loginbtn{ + margin: auto; + position: relative; + display: flex; + width: 100%; + :global{ + .ant-btn { + margin: auto; + } + } + } +} diff --git a/src/pages/login/model.js b/src/pages/login/model.js deleted file mode 100644 index bcff3b4c..00000000 --- a/src/pages/login/model.js +++ /dev/null @@ -1,27 +0,0 @@ -import { router, pathMatchRegexp } from 'utils' -import api from 'api' - -const { loginUser } = api - -export default { - namespace: 'login', - state: {}, - effects: { - *login({ payload }, { put, call, select }) { - const data = yield call(loginUser, payload) - const { locationQuery } = yield select(_ => _.app) - if (data.success == true) { - const { from } = locationQuery - yield put({ type: 'app/query' }) - if (!pathMatchRegexp('/login', from)) { - if (from === '/') router.push('/dashboard') - else router.push(from) - } else { - router.push('/dashboard') - } - } else { - throw data - } - }, - }, -} diff --git a/src/pages/main/index.js b/src/pages/main/index.js index 69a12b5e..2f1bb5aa 100644 --- a/src/pages/main/index.js +++ b/src/pages/main/index.js @@ -20,7 +20,7 @@ class Main extends React.Component { render(){ return (
-
Kintxy xikito
+
Kintxy xikito
diff --git a/src/pages/main/index.less b/src/pages/main/index.less index e00b07fb..6539d4e2 100644 --- a/src/pages/main/index.less +++ b/src/pages/main/index.less @@ -10,4 +10,11 @@ } } +} +.FeedTools{ + border-radius: 7px; + max-width: 510px; + min-width: 265px; + width: auto; + margin: 23px auto 50px auto; } \ No newline at end of file diff --git a/src/pages/settings/components/base.js b/src/pages/settings/components/base.js index 7acd980f..8f7692e3 100644 --- a/src/pages/settings/components/base.js +++ b/src/pages/settings/components/base.js @@ -2,6 +2,8 @@ import React, { Component, Fragment } from 'react'; import { List, Icon, Switch, Button, notification } from 'antd'; import { AppSettings } from '../../../../globals/settings.js' import { DevOptions, ControlBar } from 'ycore' +import * as ycore from "ycore" +import { CustomIcons } from 'components' class Base extends Component { constructor(props){ @@ -20,6 +22,7 @@ class Base extends Component { SettingRender = data =>{ try{ return( +
)} /> + +
) } catch (err){ @@ -72,7 +77,7 @@ class Base extends Component { return (
-

Behaviors

+

Behaviors

{this.SettingRender(this.state.SettingRepo)}
diff --git a/src/pages/settings/style.less b/src/pages/settings/style.less index 80da049a..c9ac52f1 100644 --- a/src/pages/settings/style.less +++ b/src/pages/settings/style.less @@ -10,7 +10,7 @@ height: 100%; overflow: auto; color: @DarkMode-color_container; - background-color: @DarkMode-backgroud; + background-color: transparent; .leftMenu { width: 224px; border-right: @border-width-base @border-style-base @border-color-split; @@ -18,7 +18,7 @@ .ant-menu-inline { color: @DarkMode-color_container; - background-color: @DarkMode-backgroud; + background-color: transparent; border: none; } .ant-menu:not(.ant-menu-horizontal) .ant-menu-item-selected { diff --git a/src/themes/light_ng/index.less b/src/themes/light_ng/index.less index 19fa8803..1adaa9ca 100644 --- a/src/themes/light_ng/index.less +++ b/src/themes/light_ng/index.less @@ -8,4 +8,56 @@ @Theme-SiderDeco-Backgroud: #4D91EA; @Theme-SiderDeco-Color: #f9f6f7; -@Theme-Hover-Backgroud: rgba(107, 162, 235, 0.507); \ No newline at end of file +@Theme-Hover-Backgroud: rgba(107, 162, 235, 0.507); + + + +// YulioID + +@canvasColor: #f9f9f9; +@backgroundColor: #fff; +@foregroundColor: #111; +@primaryColor: #373F51; +@primaryShade1: #ffe2d1; +@primaryShade2: #ffceb2; +@primaryShade3: #ffb184; +@primaryShade4: #e88850; +@primaryShade5: #d17a48; +@secondaryColor: #ffcc67; +@secondaryShade1: #fff1d5; +@secondaryShade2: #ffde9e; +@secondaryShade3: #ffd074; +@secondaryShade4: #e8ba5e; +@secondaryShade5: #ba954b; +@accentColor: #4e5166; +@accentShade1: #cecfd5; +@accentShade2: #aeafb9; +@accentShade3: #8e909d; +@accentShade4: #6e7081; +@accentShade5: #404354; +@accent2Color: #588b8b; +@accent2Shade1: #c2d4d4; +@accent2Shade2: #a3bfbf; +@accent2Shade3: #85aaaa; +@accent2Shade4: #507f7f; +@accent2Shade5: #497272; +@accent3Color: #fe5f55; +@accent3Shade1: #fec4c1; +@accent3Shade2: #fea7a2; +@accent3Shade3: #fe7c73; +@accent3Shade4: #e7574e; +@accent3Shade5: #b9463e; + +@neutralShade0: #f8f8f8; +@neutralShade1: #f2f2f2; +@neutralShade2: #e8e9e9; +@neutralShade3: #d1d3d4; +@neutralShade4: #babdbf; +@neutralShade5: #808488; +@neutralShade6: #666a6d; +@neutralShade7: #4d5052; +@neutralShade8: #212122; +@grayColor: #999; +@lightGrayColor: #ddd; +@borderRadius: 6px; +@boxShadow: 0 2px 5px rgba(#333, 0.2); \ No newline at end of file