mirror of
https://github.com/ragestudio/comty.git
synced 2025-06-09 10:34:17 +00:00
update: model, layout styles
This commit is contained in:
srgooglo
parent
511748a311
commit
d4b65ea014
@ -1,34 +1,32 @@
|
||||
module.exports = [
|
||||
import * as Icons from 'components/Icons'
|
||||
|
||||
export default [
|
||||
{
|
||||
id: 'session_noexpire',
|
||||
icon: <Icons.Watch />,
|
||||
type: 'switch',
|
||||
title: 'No expire session',
|
||||
description: 'Force the app to not expire any session... [Developer]',
|
||||
},
|
||||
{
|
||||
id: 'search_ontype',
|
||||
icon: <Icons.CornerDownRight />,
|
||||
type: 'switch',
|
||||
title: 'Detect input on search bar',
|
||||
description:
|
||||
'Force the app to automaticly search when a type input is detected... [Developer]',
|
||||
description: 'Force the app to automaticly search when a type input is detected... [Developer]',
|
||||
},
|
||||
{
|
||||
id: 'post_hidebar',
|
||||
icon: <Icons.Menu />,
|
||||
type: 'switch',
|
||||
title: 'Auto hide postbar',
|
||||
description: 'Force the app to dont hide the post actions (likes, comments ...etc) automaticly... [Developer]',
|
||||
description: 'Force the app to hide the post actions (likes, comments ...etc) automaticly... [Developer]',
|
||||
},
|
||||
{
|
||||
id: 'verbosity',
|
||||
icon: <Icons.Terminal />,
|
||||
type: 'switch',
|
||||
title: 'Enable core verbosity',
|
||||
description: 'Show all console logs... [Developer]',
|
||||
},
|
||||
{
|
||||
id: 'overlay_loosefocus',
|
||||
type: 'switch',
|
||||
title: 'Overlay loose focus',
|
||||
description: 'Close the overlay when loose focus',
|
||||
},
|
||||
|
||||
}
|
||||
]
|
||||
|
||||
@ -46,13 +46,38 @@ export default [
|
||||
}
|
||||
},
|
||||
{
|
||||
id: 'notifications',
|
||||
title: 'Notifications',
|
||||
icon: <Icons.Inbox/>,
|
||||
id: 'rooms',
|
||||
title: 'Rooms',
|
||||
icon: <Icons.Box />,
|
||||
attributes: {
|
||||
require: 'login'
|
||||
}
|
||||
},
|
||||
{
|
||||
id: 'workshop',
|
||||
title: 'Workshop',
|
||||
icon: <Icons.Package />,
|
||||
attributes: {
|
||||
require: 'login'
|
||||
}
|
||||
},
|
||||
{
|
||||
id: 'streams',
|
||||
title: 'Streams',
|
||||
icon: <Icons.Tv />,
|
||||
attributes: {
|
||||
require: 'login'
|
||||
}
|
||||
},
|
||||
{
|
||||
id: 'debug',
|
||||
title: 'Debug',
|
||||
icon: <Icons.Tool />,
|
||||
attributes: {
|
||||
position: "bottom",
|
||||
require: "dev"
|
||||
}
|
||||
},
|
||||
{
|
||||
id: 'settings',
|
||||
title: 'Settings',
|
||||
|
||||
@ -7,6 +7,7 @@ const {
|
||||
dialog,
|
||||
shell,
|
||||
screen,
|
||||
BrowserView,
|
||||
globalShortcut
|
||||
} = require('electron');
|
||||
const path = require('path');
|
||||
@ -37,17 +38,22 @@ if (!gotTheLock) {
|
||||
|
||||
function createWindow() {
|
||||
mainWindow = new BrowserWindow({
|
||||
title: packagejson.title,
|
||||
icon: path.join(__dirname, './icon.png'),
|
||||
width: 1100,
|
||||
height: 700,
|
||||
minWidth: 1100,
|
||||
minHeight: 700,
|
||||
minWidth: 1256,
|
||||
minHeight: 755,
|
||||
show: true,
|
||||
frame: false,
|
||||
transparent: false,
|
||||
hasShadow: true,
|
||||
//webgl: true,
|
||||
visualEffectState: "followWindow",
|
||||
backgroundColor: '#00ffffff',
|
||||
webPreferences: {
|
||||
//enableRemoteModule: true,
|
||||
enableBlinkFeatures: true,
|
||||
experimentalFeatures: true,
|
||||
nodeIntegration: true,
|
||||
// Disable in dev since I think hot reload is messing with it
|
||||
@ -103,7 +109,10 @@ function createWindow() {
|
||||
},
|
||||
{
|
||||
label: 'Reload',
|
||||
click: () => ipcMain.invoke("appRestart")
|
||||
click: () => {
|
||||
app.relaunch();
|
||||
mainWindow.close();
|
||||
}
|
||||
},
|
||||
{
|
||||
label: 'Close app',
|
||||
@ -117,7 +126,6 @@ function createWindow() {
|
||||
tray.on('double-click', () => mainWindow.show());
|
||||
|
||||
mainWindow.loadURL(app_path);
|
||||
|
||||
if (is.dev()) {
|
||||
mainWindow.webContents.openDevTools();
|
||||
}
|
||||
@ -137,7 +145,7 @@ app.on('ready', () => {
|
||||
if (is.dev()) {
|
||||
loadWindow = new BrowserWindow({
|
||||
width: 700,
|
||||
height: 600,
|
||||
height: 500,
|
||||
frame: false,
|
||||
resizable: false,
|
||||
center: true,
|
||||
|
||||
30
main/partials/WindowAppBar.css
Normal file
30
main/partials/WindowAppBar.css
Normal file
@ -0,0 +1,30 @@
|
||||
.WindowAppBar {
|
||||
-webkit-app-region: drag;
|
||||
position: relative;
|
||||
vertical-align: top;
|
||||
width: 100%;
|
||||
height: 25px;
|
||||
z-index: 5000;
|
||||
background-color: #2d2d2d;
|
||||
}
|
||||
|
||||
.WindowControl {
|
||||
float: right;
|
||||
height: 100%;
|
||||
padding: 0 20px 0 0;
|
||||
transition: all 140ms linear;
|
||||
color: #747474;
|
||||
}
|
||||
|
||||
.anticon{
|
||||
margin: 0 15px 0 15px;
|
||||
display: inline-block;
|
||||
color: inherit;
|
||||
font-style: normal;
|
||||
vertical-align: middle;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.WindowControl:hover{
|
||||
color: #ffffff;
|
||||
}
|
||||
25
main/partials/WindowAppBar.html
Normal file
25
main/partials/WindowAppBar.html
Normal file
@ -0,0 +1,25 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<link rel="stylesheet" href="WindowAppBar.css">
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="WindowAppBar">
|
||||
<div class="WindowControl">
|
||||
<span role="img" aria-label="minus" id="minimize-button" class="anticon">
|
||||
<svg viewBox="64 64 896 896" focusable="false" class="" data-icon="minus" width="1em" height="1em" fill="currentColor" aria-hidden="true"><path d="M872 474H152c-4.4 0-8 3.6-8 8v60c0 4.4 3.6 8 8 8h720c4.4 0 8-3.6 8-8v-60c0-4.4-3.6-8-8-8z"></path></svg>
|
||||
</span>
|
||||
<span role="img" aria-label="fullscreen" class="anticon">
|
||||
<svg viewBox="64 64 896 896" focusable="false" class="" data-icon="fullscreen" width="1em" height="1em" fill="currentColor" aria-hidden="true"><path d="M290 236.4l43.9-43.9a8.01 8.01 0 00-4.7-13.6L169 160c-5.1-.6-9.5 3.7-8.9 8.9L179 329.1c.8 6.6 8.9 9.4 13.6 4.7l43.7-43.7L370 423.7c3.1 3.1 8.2 3.1 11.3 0l42.4-42.3c3.1-3.1 3.1-8.2 0-11.3L290 236.4zm352.7 187.3c3.1 3.1 8.2 3.1 11.3 0l133.7-133.6 43.7 43.7a8.01 8.01 0 0013.6-4.7L863.9 169c.6-5.1-3.7-9.5-8.9-8.9L694.8 179c-6.6.8-9.4 8.9-4.7 13.6l43.9 43.9L600.3 370a8.03 8.03 0 000 11.3l42.4 42.4zM845 694.9c-.8-6.6-8.9-9.4-13.6-4.7l-43.7 43.7L654 600.3a8.03 8.03 0 00-11.3 0l-42.4 42.3a8.03 8.03 0 000 11.3L734 787.6l-43.9 43.9a8.01 8.01 0 004.7 13.6L855 864c5.1.6 9.5-3.7 8.9-8.9L845 694.9zm-463.7-94.6a8.03 8.03 0 00-11.3 0L236.3 733.9l-43.7-43.7a8.01 8.01 0 00-13.6 4.7L160.1 855c-.6 5.1 3.7 9.5 8.9 8.9L329.2 845c6.6-.8 9.4-8.9 4.7-13.6L290 787.6 423.7 654c3.1-3.1 3.1-8.2 0-11.3l-42.4-42.4z"></path></svg>
|
||||
</span>
|
||||
<span role="img" aria-label="close" id="close-button" class="anticon">
|
||||
<svg viewBox="64 64 896 896" focusable="false" class="" data-icon="close" width="1em" height="1em" fill="currentColor" aria-hidden="true"><path d="M563.8 512l262.5-312.9c4.4-5.2.7-13.1-6.1-13.1h-79.8c-4.7 0-9.2 2.1-12.3 5.7L511.6 449.8 295.1 191.7c-3-3.6-7.5-5.7-12.3-5.7H203c-6.8 0-10.5 7.9-6.1 13.1L459.4 512 196.9 824.9A7.95 7.95 0 00203 838h79.8c4.7 0 9.2-2.1 12.3-5.7l216.5-258.1 216.5 258.1c3 3.6 7.5 5.7 12.3 5.7h79.8c6.8 0 10.5-7.9 6.1-13.1L563.8 512z"></path></svg>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@ -1,33 +1,49 @@
|
||||
body {
|
||||
background-color: transparent;
|
||||
border-radius: 12px;
|
||||
resize: none;
|
||||
font-family: 'Alata', sans-serif;
|
||||
}
|
||||
.wrapper {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-direction: column;
|
||||
background-color: #222222;
|
||||
color: #efefef;
|
||||
border-radius: 12px;
|
||||
text-align: center;
|
||||
padding: 20px;
|
||||
}
|
||||
.bouncy-logo {
|
||||
width: 400px;
|
||||
height: 400px;
|
||||
margin: 0 auto;
|
||||
position: relative;
|
||||
body {
|
||||
background-color: transparent;
|
||||
border-radius: 12px;
|
||||
font-family: 'Alata', sans-serif;
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
overflow: hidden;
|
||||
user-select: none;
|
||||
-webkit-app-region: drag;
|
||||
}
|
||||
.bouncy-logo .ball img {
|
||||
position: absolute;
|
||||
height: 200px;
|
||||
|
||||
.wrapper {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-direction: column;
|
||||
background-color: #efefef;
|
||||
color: #2d2d2d;
|
||||
border-radius: 12px;
|
||||
text-align: center;
|
||||
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.bouncy-logo{
|
||||
width: 100%;
|
||||
height: auto;
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
.bouncy-logo .ball {
|
||||
height: auto;
|
||||
width: 100%;
|
||||
transform: translate(-10px, 0);
|
||||
}
|
||||
|
||||
.bouncy-logo .ball svg {
|
||||
width: 200px;
|
||||
top: 0;
|
||||
left: 43%;
|
||||
transform: translate(-50%, 0);
|
||||
height: 200px;
|
||||
margin: auto;
|
||||
|
||||
-webkit-animation-direction: alternate;
|
||||
-webkit-animation-duration: 1s;
|
||||
-webkit-animation-name: my-bounce;
|
||||
@ -37,14 +53,17 @@ body {
|
||||
animation-name: my-bounce;
|
||||
animation-iteration-count: infinite;
|
||||
}
|
||||
|
||||
.shadow{
|
||||
width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
.bouncy-logo .ball-shadow {
|
||||
background: radial-gradient(50% 50%, #ccc 0%, transparent 100%);
|
||||
margin: auto;
|
||||
background: radial-gradient(50% 50%, rgba(204, 204, 204, 0.45) 0%, transparent 100%);
|
||||
height: 50px;
|
||||
width: 200px;
|
||||
position: absolute;
|
||||
top: 230px;
|
||||
left: 50%;
|
||||
transform: translate(-50%, 0);
|
||||
-webkit-animation-direction: alternate;
|
||||
-webkit-animation-duration: 1s;
|
||||
-webkit-animation-name: my-grow;
|
||||
@ -59,24 +78,20 @@ body {
|
||||
from {
|
||||
width: 200px;
|
||||
height: 50px;
|
||||
top: 230px;
|
||||
}
|
||||
to {
|
||||
width: 150px;
|
||||
height: 10px;
|
||||
top: 240px;
|
||||
}
|
||||
}
|
||||
@keyframes my-grow {
|
||||
from {
|
||||
width: 200px;
|
||||
height: 50px;
|
||||
top: 230px;
|
||||
}
|
||||
to {
|
||||
width: 150px;
|
||||
height: 10px;
|
||||
top: 240px;
|
||||
}
|
||||
}
|
||||
@-webkit-keyframes my-bounce {
|
||||
|
||||
@ -4,8 +4,19 @@
|
||||
<body>
|
||||
<div class="wrapper">
|
||||
<div class="bouncy-logo">
|
||||
<div class="ball-shadow"></div>
|
||||
<div class="ball"><img src="../../public/logo.svg"></div>
|
||||
<div class="ball">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 100 120">
|
||||
<path
|
||||
d="M77.55,29.69,92,18.78a1.42,1.42,0,0,0,.25-2,39.2,39.2,0,0,0-56.31-4.21A38.05,38.05,0,0,0,23.23,42a38.09,38.09,0,0,0,3.62,15.1A38.65,38.65,0,0,0,37.8,70.84,39.46,39.46,0,0,0,83.37,73a38.26,38.26,0,0,0,8.41-7.4,1.41,1.41,0,0,0-.23-2L77.65,53a1.43,1.43,0,0,0-1.9.15A17,17,0,0,1,72.55,56a17.75,17.75,0,0,1-9,2.88c-8.32.31-13.62-5.69-14-6.13a17.68,17.68,0,0,1-4.13-10.13,17.93,17.93,0,0,1,4.56-13A17.46,17.46,0,0,1,71.7,26.34a17.3,17.3,0,0,1,4,3.2A1.41,1.41,0,0,0,77.55,29.69Z"
|
||||
style="fill: rgba(51, 51, 51, 0.45); backdrop-filter: blur(2px);"
|
||||
/>
|
||||
<path
|
||||
d="M13,63.17a2.77,2.77,0,0,1,3.75,1.43A48.38,48.38,0,0,0,32.07,84.53,48.83,48.83,0,0,0,52.34,93.3,47.37,47.37,0,0,0,92.57,81.8a2.77,2.77,0,0,1,4,.3l6.23,7.4a2.79,2.79,0,0,1-.21,3.83,63.83,63.83,0,0,1-6,5,62.21,62.21,0,0,1-7.44,4.7A60.84,60.84,0,0,1,77,108a62.3,62.3,0,0,1-27,1.51A62.51,62.51,0,0,1,40.18,107,61.5,61.5,0,0,1,20.1,95.69,61.73,61.73,0,0,1,2.41,71a2.79,2.79,0,0,1,1.42-3.55Z"
|
||||
style="fill: rgba(51, 51, 51, 0.45); backdrop-filter: blur(2px);"
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
<div class="shadow"><div class="ball-shadow"></div></div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
|
||||
@ -4,8 +4,19 @@
|
||||
<body>
|
||||
<div class="wrapper">
|
||||
<div class="bouncy-logo">
|
||||
<div class="ball-shadow"></div>
|
||||
<div class="ball"><img src="../../public/logo.svg"></div>
|
||||
<div class="ball">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 100 120">
|
||||
<path
|
||||
d="M77.55,29.69,92,18.78a1.42,1.42,0,0,0,.25-2,39.2,39.2,0,0,0-56.31-4.21A38.05,38.05,0,0,0,23.23,42a38.09,38.09,0,0,0,3.62,15.1A38.65,38.65,0,0,0,37.8,70.84,39.46,39.46,0,0,0,83.37,73a38.26,38.26,0,0,0,8.41-7.4,1.41,1.41,0,0,0-.23-2L77.65,53a1.43,1.43,0,0,0-1.9.15A17,17,0,0,1,72.55,56a17.75,17.75,0,0,1-9,2.88c-8.32.31-13.62-5.69-14-6.13a17.68,17.68,0,0,1-4.13-10.13,17.93,17.93,0,0,1,4.56-13A17.46,17.46,0,0,1,71.7,26.34a17.3,17.3,0,0,1,4,3.2A1.41,1.41,0,0,0,77.55,29.69Z"
|
||||
style="fill: rgba(51, 51, 51, 0.45); backdrop-filter: blur(2px);"
|
||||
/>
|
||||
<path
|
||||
d="M13,63.17a2.77,2.77,0,0,1,3.75,1.43A48.38,48.38,0,0,0,32.07,84.53,48.83,48.83,0,0,0,52.34,93.3,47.37,47.37,0,0,0,92.57,81.8a2.77,2.77,0,0,1,4,.3l6.23,7.4a2.79,2.79,0,0,1-.21,3.83,63.83,63.83,0,0,1-6,5,62.21,62.21,0,0,1-7.44,4.7A60.84,60.84,0,0,1,77,108a62.3,62.3,0,0,1-27,1.51A62.51,62.51,0,0,1,40.18,107,61.5,61.5,0,0,1,20.1,95.69,61.73,61.73,0,0,1,2.41,71a2.79,2.79,0,0,1,1.42-3.55Z"
|
||||
style="fill: rgba(51, 51, 51, 0.45); backdrop-filter: blur(2px);"
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
<div class="shadow"><div class="ball-shadow"></div></div>
|
||||
</div>
|
||||
<h2> Starting the development server... </h2>
|
||||
</div>
|
||||
|
||||
@ -3,7 +3,7 @@
|
||||
"UUID": "C8mVSr-4nmPp2-pr5Vrz-CU4kg4",
|
||||
"title": "Comty™",
|
||||
"DevBuild": true,
|
||||
"version": "0.8.30",
|
||||
"version": "0.9.1",
|
||||
"stage": "dev-pre",
|
||||
"description": "",
|
||||
"author": "RageStudio",
|
||||
@ -74,8 +74,11 @@
|
||||
"react-reveal": "^1.2.2",
|
||||
"react-scripts": "^3.4.1",
|
||||
"react-virtualized": "^9.21.2",
|
||||
"redux-socket.io": "^1.4.0",
|
||||
"redux-thunk": "^2.3.0",
|
||||
"simple-icons": "^3.3.0",
|
||||
"slash": "^3.0.0",
|
||||
"socket.io-client": "^2.3.0",
|
||||
"stack-trace": "0.0.10",
|
||||
"store": "^2.0.12",
|
||||
"styled-components": "^5.1.1",
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
.aboutWrapper {
|
||||
margin: auto;
|
||||
max-width: 70vw;
|
||||
width: 500px;
|
||||
width: 450px;
|
||||
vertical-align: middle;
|
||||
position: relative;
|
||||
background-color: rgba(73, 72, 72, 0.349);
|
||||
|
||||
@ -4,6 +4,7 @@ import * as Icons from 'components/Icons'
|
||||
import styles from '../index.less'
|
||||
|
||||
export interface Card_Component_props {
|
||||
style: object;
|
||||
type: string;
|
||||
children: any;
|
||||
}
|
||||
@ -18,13 +19,14 @@ const Card_Component = (props: Card_Component_props) => {
|
||||
if (!props.type) frag = (props.children)
|
||||
|
||||
return(
|
||||
<div className={styles.render_component}>
|
||||
<div style={props.style} className={styles.render_component}>
|
||||
{frag}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
Card_Component.defaultProps = {
|
||||
style: null,
|
||||
type: null,
|
||||
children: <h2>Empty</h2>
|
||||
}
|
||||
|
||||
@ -43,7 +43,7 @@
|
||||
|
||||
height: 100%;
|
||||
// 150px extra for left-sider
|
||||
width: calc( 100% + 150px );
|
||||
width: 87%;
|
||||
backdrop-filter: blur(2px);
|
||||
&.mobile{
|
||||
overflow-y: scroll;
|
||||
@ -161,4 +161,11 @@
|
||||
h2 {
|
||||
color: #ffffff;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.mainElement {
|
||||
> div {
|
||||
margin: 30px 0;
|
||||
}
|
||||
}
|
||||
@ -4,6 +4,7 @@ import { connect } from 'umi'
|
||||
import classnames from 'classnames'
|
||||
import styles from './index.less'
|
||||
import * as errorhandler from 'core/libs/errorhandler'
|
||||
import * as antd from 'antd'
|
||||
|
||||
import {
|
||||
Primary,
|
||||
@ -95,8 +96,16 @@ export default class Overlay extends React.PureComponent {
|
||||
|
||||
|
||||
render() {
|
||||
const { overlayElement, overlayActive } = this.props.app
|
||||
|
||||
const { overlayElement, overlayActive, session_data, session_valid, session_uuid } = this.props.app
|
||||
const mainElement = (
|
||||
<div>
|
||||
<div><__searchBar /></div>
|
||||
<div className={styles.mainElement}>
|
||||
<Card_Component>Banana</Card_Component>
|
||||
{session_valid? <Card_Component style={{ display: 'flex', lineHeight: '30px', wordBreak: 'break-all' }} ><antd.Avatar src={session_data.avatar} shape="square" /> <div style={{ marginLeft: '10px' }}> @{session_data.username}<span style={{ fontSize: "11px" }}>#{session_uuid}</span></div></Card_Component> : null }
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
const renderElement = () => {
|
||||
|
||||
if (overlayElement && overlayActive) {
|
||||
@ -116,7 +125,7 @@ export default class Overlay extends React.PureComponent {
|
||||
}
|
||||
|
||||
return(
|
||||
<Primary id="main" fragment={<> <div><__searchBar /></div> <div></div> </>} />
|
||||
<Primary id="main" fragment={mainElement} />
|
||||
)
|
||||
|
||||
}
|
||||
|
||||
@ -34,7 +34,8 @@ export default class Sider_Default extends React.PureComponent {
|
||||
<antd.Layout.Sider
|
||||
trigger={null}
|
||||
className={styles.left_sider_container}
|
||||
style={{ flex:'unset', maxWidth: 'unset', minWidth: '200px', width: '100%'}}
|
||||
width="175px"
|
||||
style={{ flex:'unset', maxWidth: 'unset', minWidth: '175px', width: '100%'}}
|
||||
>
|
||||
<div className={styles.left_sider_brandholder}>
|
||||
<img
|
||||
|
||||
@ -8,7 +8,7 @@
|
||||
font-family: @__Global_texted_font;
|
||||
font-weight: 600;
|
||||
|
||||
width: 100%;
|
||||
width: 65%;
|
||||
height: 100%;
|
||||
|
||||
z-index: 40;
|
||||
|
||||
@ -10,7 +10,12 @@
|
||||
z-index: 5000;
|
||||
top: 0;
|
||||
right: 0;
|
||||
background-color: rgba(0, 0, 0, 0);
|
||||
background-color: rgba(54, 54, 54, 0);
|
||||
transition: all 150ms ease-in-out;
|
||||
}
|
||||
|
||||
.navbar:hover{
|
||||
background-color: rgba(54, 54, 54, 0.658);
|
||||
}
|
||||
|
||||
.controls{
|
||||
@ -21,6 +26,19 @@
|
||||
width: auto;
|
||||
margin: auto;
|
||||
> div{
|
||||
padding: 0 6px;
|
||||
padding: 0 14px;
|
||||
svg{
|
||||
margin: 0!important;
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
> div:hover{
|
||||
background-color: rgba(54, 54, 54, 0.808);
|
||||
color: #fdfdfd;
|
||||
}
|
||||
transition: all 150ms ease-in-out;
|
||||
}
|
||||
|
||||
.controls:hover{
|
||||
background-color: rgba(54, 54, 54, 0.705);
|
||||
}
|
||||
@ -5,7 +5,6 @@ import styles from './Loader.less'
|
||||
const Loader = (loading) => {
|
||||
return (
|
||||
<div className={classNames(styles.wrapper, {[styles.end]: !loading })}>
|
||||
<span>Loading... </span>
|
||||
<div
|
||||
className={styles.newloader}
|
||||
>
|
||||
|
||||
@ -1,26 +1,17 @@
|
||||
@import '~theme/index.less';
|
||||
|
||||
.wrapper {
|
||||
font-family: @__Global_general_font_family;
|
||||
color: white;
|
||||
line-height: 55px;
|
||||
span{
|
||||
margin: 0 10px 0 auto;
|
||||
}
|
||||
|
||||
user-select: none;
|
||||
position: absolute;
|
||||
z-index: 1000;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
width: 140px;
|
||||
height: 55px;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-around;
|
||||
width: auto;
|
||||
height: 29px;
|
||||
|
||||
margin: 30px;
|
||||
background-color: #2d2d2dc2;
|
||||
border-radius: 28px;
|
||||
margin: 10px;
|
||||
|
||||
|
||||
&.end {
|
||||
animation: unshow 0.8s linear;
|
||||
@ -32,11 +23,9 @@
|
||||
}
|
||||
|
||||
.newloader {
|
||||
transform: translate(21px,27px) scale(0.3);
|
||||
width: 0px;
|
||||
height: 0px;
|
||||
margin: 0 45px 0 0;
|
||||
position: relative;
|
||||
transform: scale(0.28);
|
||||
width: 54px;
|
||||
height: 23px;
|
||||
}
|
||||
|
||||
.newloader>div {
|
||||
|
||||
@ -408,3 +408,26 @@ export function get_value(source,key){
|
||||
export function iatToString(iat){
|
||||
return new Date(iat * 1000).toLocaleString()
|
||||
}
|
||||
|
||||
export function extendIDCode(id){
|
||||
num.toString().padStart(4, "0");
|
||||
|
||||
}
|
||||
|
||||
export function generateUUID( lenght = 6 ){
|
||||
let text = ""
|
||||
const possibleChars = "abcdefghijklmnopqrstuvwxyz0123456789"
|
||||
|
||||
for ( let i = 0; i < 6; i++ )
|
||||
text += possibleChars.charAt ( Math.floor ( Math.random () * possibleChars.length ) )
|
||||
|
||||
return text
|
||||
}
|
||||
|
||||
/**
|
||||
* Generate a random string
|
||||
* @returns {string}
|
||||
*/
|
||||
export function generateRandomId( length = 15 ){
|
||||
return Math.random ().toString ( 36 ).substring ( 0, length );
|
||||
}
|
||||
@ -88,7 +88,7 @@ class PrimaryLayout extends React.Component {
|
||||
{isActive(currentTheme['backgroundImage'])? <div style={{
|
||||
backgroundImage: `url(${currentTheme.backgroundImage.src})`,
|
||||
transition: "all 150ms linear",
|
||||
position: 'absolute',
|
||||
position: 'absolute',
|
||||
width: '100vw',
|
||||
height: '100vh',
|
||||
backgroundRepeat: "repeat-x",
|
||||
|
||||
@ -3,14 +3,14 @@
|
||||
// PRIMARY LAYOUT
|
||||
.primary_layout_container {
|
||||
background-color: transparent;
|
||||
transition: all @__Global_Components_transitions_dur linear;
|
||||
transition: all 150ms ease-in-out;
|
||||
|
||||
overflow-x: hidden;
|
||||
// overflow-y: overlay;
|
||||
|
||||
width: auto;
|
||||
height: 100%;
|
||||
|
||||
height: 97%;
|
||||
|
||||
position: relative;
|
||||
bottom: 0;
|
||||
display: flex;
|
||||
@ -20,10 +20,10 @@
|
||||
min-width: 570px;
|
||||
|
||||
@media (min-width: @bp-medium) {
|
||||
min-width: 650px;
|
||||
min-width: 750px;
|
||||
}
|
||||
@media (min-width: @bp-large) {
|
||||
min-width: 850px;
|
||||
@media (min-width: @bp-xlarge) {
|
||||
min-width: 1112px;
|
||||
}
|
||||
|
||||
&.interfaced{
|
||||
@ -36,9 +36,9 @@
|
||||
vertical-align: middle;
|
||||
width: 100%;
|
||||
padding: @primary_layout_content_padding;
|
||||
transition: all @__Global_layout_transitions-dur ease;
|
||||
transition: all 150ms ease-in-out;
|
||||
|
||||
@media (max-width: @bp-medium) {
|
||||
@media (min-width: @bp-medium) {
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@ -292,7 +292,13 @@ export default {
|
||||
break;
|
||||
}
|
||||
case 'dev':{
|
||||
callback(state.session_data.dev? true : false)
|
||||
if(state.session_data){
|
||||
return callback(state.session_data.dev? true : false)
|
||||
}
|
||||
return callback(false)
|
||||
}
|
||||
case 'embedded':{
|
||||
callback(state.electron? true : false)
|
||||
break;
|
||||
}
|
||||
default:{
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
import React from 'react'
|
||||
import themeStyle from 'theme/base/vars.less'
|
||||
|
||||
class AntdDebug extends React.Component{
|
||||
export default class AntdDebug extends React.Component{
|
||||
state = {
|
||||
styleLink: document.getElementById('theme-style'),
|
||||
body: document.getElementsByTagName('body')[0]
|
||||
@ -14,4 +14,3 @@ class AntdDebug extends React.Component{
|
||||
)
|
||||
}
|
||||
}
|
||||
export default AntdDebug
|
||||
355
src/pages/debug/api.js
Normal file
355
src/pages/debug/api.js
Normal file
@ -0,0 +1,355 @@
|
||||
import React from 'react';
|
||||
import {v3_request} from 'api';
|
||||
import { api_request } from 'core/libs/v3_model'
|
||||
import {
|
||||
Row,
|
||||
Col,
|
||||
Select,
|
||||
Form,
|
||||
Input,
|
||||
Button,
|
||||
List,
|
||||
Tag,
|
||||
Checkbox,
|
||||
} from 'antd';
|
||||
import classnames from 'classnames';
|
||||
import { CloseOutlined } from '@ant-design/icons';
|
||||
import endpoints_list from 'config/endpoints';
|
||||
|
||||
import styles from './api.less';
|
||||
|
||||
const { Option } = Select;
|
||||
const InputGroup = Input.Group;
|
||||
const methods = ['POST', 'GET', 'PUT', 'PATCH', 'DELETE'];
|
||||
|
||||
const methodTagColor = {
|
||||
GET: 'green',
|
||||
POST: 'orange',
|
||||
DELETE: 'red',
|
||||
PUT: 'geekblue',
|
||||
};
|
||||
|
||||
const requests = Object.values(endpoints_list).map(item => {
|
||||
let url = item;
|
||||
let method = 'GET';
|
||||
const paramsArray = item.split(' ');
|
||||
if (paramsArray.length === 2) {
|
||||
method = paramsArray[0];
|
||||
url = paramsArray[1];
|
||||
}
|
||||
return {
|
||||
method,
|
||||
url,
|
||||
};
|
||||
});
|
||||
|
||||
let uuid = 2;
|
||||
|
||||
export default class RequestPage extends React.Component {
|
||||
paramsForm = React.createRef();
|
||||
bodyDataForm = React.createRef();
|
||||
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.state = {
|
||||
// Default sets
|
||||
method: 'GET',
|
||||
url: '',
|
||||
ParamsKeys: [1],
|
||||
BodyKeys: [1],
|
||||
result: null,
|
||||
visible: true,
|
||||
};
|
||||
}
|
||||
|
||||
handleRequest = () => {
|
||||
const { method, url } = this.state;
|
||||
let params = {};
|
||||
let body = {};
|
||||
|
||||
this.paramsForm.current
|
||||
.validateFields()
|
||||
.then(values => {
|
||||
if (values) {
|
||||
for (let i in values) {
|
||||
if (i.startsWith('check')) {
|
||||
const index = i.match(/check\[(\d+)\]/)[1];
|
||||
const key = values[`key[${index}]`];
|
||||
params[key] = values[`value[${index}]`];
|
||||
}
|
||||
}
|
||||
}
|
||||
})
|
||||
.catch(errorInfo => {
|
||||
console.log(errorInfo);
|
||||
});
|
||||
|
||||
this.bodyDataForm.current
|
||||
.validateFields()
|
||||
.then(values => {
|
||||
if (values) {
|
||||
for (let i in values) {
|
||||
if (i.startsWith('check')) {
|
||||
const index = i.match(/check\[(\d+)\]/)[1];
|
||||
const key = values[`key[${index}]`];
|
||||
body[key] = values[`value[${index}]`];
|
||||
}
|
||||
}
|
||||
}
|
||||
})
|
||||
.catch(errorInfo => {
|
||||
console.log(errorInfo);
|
||||
});
|
||||
const frame = {
|
||||
method,
|
||||
endpoint: `${method} ${url}`,
|
||||
body,
|
||||
verbose: true
|
||||
}
|
||||
console.log(frame)
|
||||
api_request(frame, (err, res) => {
|
||||
this.setState({
|
||||
result: res,
|
||||
});
|
||||
})
|
||||
};
|
||||
|
||||
handleClickListItem = ({ method, url }) => {
|
||||
this.setState({
|
||||
method,
|
||||
url,
|
||||
keys: [uuid++],
|
||||
result: null,
|
||||
});
|
||||
};
|
||||
|
||||
handleInputChange = e => {
|
||||
this.setState({
|
||||
url: e.target.value,
|
||||
});
|
||||
};
|
||||
|
||||
handleSelectChange = method => {
|
||||
this.setState({
|
||||
method,
|
||||
});
|
||||
};
|
||||
|
||||
handleAddParam = () => {
|
||||
const { ParamsKeys } = this.state;
|
||||
const nextKeys = ParamsKeys.concat(uuid);
|
||||
uuid++;
|
||||
this.setState({
|
||||
ParamsKeys: nextKeys,
|
||||
});
|
||||
};
|
||||
|
||||
handleAddBody = () => {
|
||||
const { BodyKeys } = this.state;
|
||||
const nextKeys = BodyKeys.concat(uuid);
|
||||
uuid++;
|
||||
this.setState({
|
||||
BodyKeys: nextKeys,
|
||||
});
|
||||
};
|
||||
|
||||
handleRemoveParam = key => {
|
||||
const { ParamsKeys } = this.state;
|
||||
this.setState({
|
||||
ParamsKeys: ParamsKeys.filter(item => item !== key),
|
||||
});
|
||||
};
|
||||
|
||||
handleRemoveBody = key => {
|
||||
const { BodyKeys } = this.state;
|
||||
this.setState({
|
||||
BodyKeys: BodyKeys.filter(item => item !== key),
|
||||
});
|
||||
};
|
||||
|
||||
handleVisible = () => {
|
||||
this.setState({
|
||||
visible: !this.state.visible,
|
||||
});
|
||||
};
|
||||
|
||||
render() {
|
||||
const { result, url, method, ParamsKeys, BodyKeys, visible } = this.state;
|
||||
|
||||
return (
|
||||
<div>
|
||||
<Row>
|
||||
<Col lg={8} md={24}>
|
||||
<List
|
||||
className={styles.requestList}
|
||||
dataSource={requests}
|
||||
renderItem={item => (
|
||||
<List.Item
|
||||
className={classnames(styles.listItem, {
|
||||
[styles.lstItemActive]:
|
||||
item.method === method && item.url === url,
|
||||
})}
|
||||
onClick={this.handleClickListItem.bind(this, item)}
|
||||
>
|
||||
<span style={{ width: 72 }}>
|
||||
<Tag
|
||||
style={{ marginRight: 8 }}
|
||||
color={methodTagColor[item.method]}
|
||||
>
|
||||
{item.method}
|
||||
</Tag>
|
||||
</span>
|
||||
{item.url}
|
||||
</List.Item>
|
||||
)}
|
||||
/>
|
||||
</Col>
|
||||
<Col lg={16} md={24}>
|
||||
<Row type="flex" justify="space-between">
|
||||
<InputGroup compact size="large" style={{ flex: 1 }}>
|
||||
<Select
|
||||
size="large"
|
||||
value={method}
|
||||
style={{ width: 100 }}
|
||||
onChange={this.handleSelectChange}
|
||||
>
|
||||
{methods.map(item => (
|
||||
<Option value={item} key={item}>
|
||||
{item}
|
||||
</Option>
|
||||
))}
|
||||
</Select>
|
||||
<Input
|
||||
value={url}
|
||||
onChange={this.handleInputChange}
|
||||
style={{ width: 'calc(100% - 200px)' }}
|
||||
/>
|
||||
<Button
|
||||
ghost={visible}
|
||||
type={visible ? 'primary' : ''}
|
||||
onClick={this.handleVisible}
|
||||
size="large"
|
||||
>
|
||||
Params
|
||||
</Button>
|
||||
</InputGroup>
|
||||
|
||||
<Button
|
||||
size="large"
|
||||
type="primary"
|
||||
style={{ width: 100 }}
|
||||
onClick={this.handleRequest}
|
||||
>
|
||||
Send
|
||||
</Button>
|
||||
</Row>
|
||||
|
||||
<Row justify="center">
|
||||
<Col span={12}>
|
||||
<Form ref={this.paramsForm} name="control-ref">
|
||||
<div
|
||||
className={classnames(styles.paramsBlock, {
|
||||
[styles.hideParams]: !visible,
|
||||
})}
|
||||
>
|
||||
{ParamsKeys.map((key, index) => (
|
||||
<Row
|
||||
gutter={8}
|
||||
type="flex"
|
||||
justify="start"
|
||||
align="middle"
|
||||
key={key}
|
||||
>
|
||||
<Col style={{ marginTop: 8 }}>
|
||||
<Form.Item
|
||||
name={`check[${key}]`}
|
||||
valuePropName="checked"
|
||||
>
|
||||
<Checkbox defaultChecked />
|
||||
</Form.Item>
|
||||
</Col>
|
||||
<Col style={{ marginTop: 8 }}>
|
||||
<Form.Item name={`key[${key}]`}>
|
||||
<Input placeholder="Key" />
|
||||
</Form.Item>
|
||||
</Col>
|
||||
<Col style={{ marginTop: 8 }}>
|
||||
<Form.Item name={`value[${key}]`}>
|
||||
<Input placeholder="Value" />
|
||||
</Form.Item>
|
||||
</Col>
|
||||
<Col style={{ marginTop: 8 }}>
|
||||
<CloseOutlined
|
||||
onClick={this.handleRemoveParam.bind(this, key)}
|
||||
style={{ cursor: 'pointer' }}
|
||||
/>
|
||||
</Col>
|
||||
</Row>
|
||||
))}
|
||||
|
||||
<Row style={{ marginTop: 8 }}>
|
||||
<Button onClick={this.handleAddParam}>Add Param</Button>
|
||||
</Row>
|
||||
</div>
|
||||
</Form>
|
||||
</Col>
|
||||
|
||||
<Col span={12}>
|
||||
<Form ref={this.bodyDataForm} name="control-ref">
|
||||
<div
|
||||
className={classnames(styles.paramsBlock, {
|
||||
[styles.hideParams]: !visible,
|
||||
})}
|
||||
>
|
||||
{BodyKeys.map((key, index) => (
|
||||
<Row
|
||||
gutter={8}
|
||||
type="flex"
|
||||
justify="start"
|
||||
align="middle"
|
||||
key={key}
|
||||
>
|
||||
<Col style={{ marginTop: 8 }}>
|
||||
<Form.Item
|
||||
name={`check[${key}]`}
|
||||
valuePropName="checked"
|
||||
>
|
||||
<Checkbox defaultChecked />
|
||||
</Form.Item>
|
||||
</Col>
|
||||
<Col style={{ marginTop: 8 }}>
|
||||
<Form.Item name={`key[${key}]`}>
|
||||
<Input placeholder="Key" />
|
||||
</Form.Item>
|
||||
</Col>
|
||||
<Col style={{ marginTop: 8 }}>
|
||||
<Form.Item name={`value[${key}]`}>
|
||||
<Input placeholder="Value" />
|
||||
</Form.Item>
|
||||
</Col>
|
||||
<Col style={{ marginTop: 8 }}>
|
||||
<CloseOutlined
|
||||
onClick={this.handleRemoveBody.bind(this, key)}
|
||||
style={{ cursor: 'pointer' }}
|
||||
/>
|
||||
</Col>
|
||||
</Row>
|
||||
))}
|
||||
|
||||
<Row style={{ marginTop: 8 }}>
|
||||
<Button onClick={this.handleAddBody}>
|
||||
Add form-data
|
||||
</Button>
|
||||
</Row>
|
||||
</div>
|
||||
</Form>
|
||||
</Col>
|
||||
</Row>
|
||||
|
||||
<div className={styles.result}>{result}</div>
|
||||
</Col>
|
||||
</Row>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
39
src/pages/debug/api.less
Normal file
39
src/pages/debug/api.less
Normal file
@ -0,0 +1,39 @@
|
||||
@import '~theme/index.less';
|
||||
|
||||
.result {
|
||||
height: 700px;
|
||||
width: 100%;
|
||||
background: @hover-color;
|
||||
border-color: #ddd;
|
||||
padding: 16px;
|
||||
margin-top: 16px;
|
||||
word-break: break-word;
|
||||
line-height: 2;
|
||||
overflow: scroll;
|
||||
}
|
||||
|
||||
.requestList {
|
||||
padding-right: 24px;
|
||||
margin-bottom: 24px;
|
||||
.listItem {
|
||||
cursor: pointer;
|
||||
padding-left: 8px;
|
||||
&.lstItemActive {
|
||||
background-color: @hover-color;
|
||||
}
|
||||
.background-hover();
|
||||
}
|
||||
}
|
||||
|
||||
.paramsBlock {
|
||||
overflow: visible;
|
||||
opacity: 1;
|
||||
height: auto;
|
||||
transition: opacity 0.3s;
|
||||
&.hideParams {
|
||||
width: 0;
|
||||
height: 0;
|
||||
opacity: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
}
|
||||
14
src/pages/debug/core.js
Normal file
14
src/pages/debug/core.js
Normal file
@ -0,0 +1,14 @@
|
||||
import React from 'react'
|
||||
import * as antd from 'antd'
|
||||
import * as core from 'core'
|
||||
|
||||
export default class CoreDebug extends React.Component {
|
||||
render(){
|
||||
const handleGenerateUUID = () => { console.log(core.generateUUID()) }
|
||||
return(
|
||||
<div>
|
||||
<antd.Button onClick={() => handleGenerateUUID()} >generate uuid</antd.Button>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
}
|
||||
@ -1,357 +1,93 @@
|
||||
import React from 'react';
|
||||
import {v3_request} from 'api';
|
||||
import { api_request } from 'core/libs/v3_model'
|
||||
import {
|
||||
Row,
|
||||
Col,
|
||||
Select,
|
||||
Form,
|
||||
Input,
|
||||
Button,
|
||||
List,
|
||||
Tag,
|
||||
Checkbox,
|
||||
} from 'antd';
|
||||
import classnames from 'classnames';
|
||||
import { CloseOutlined } from '@ant-design/icons';
|
||||
import endpoints_list from 'config/endpoints';
|
||||
import React from 'react'
|
||||
import { Menu } from 'antd'
|
||||
import * as Icons from 'components/Icons'
|
||||
|
||||
import styles from './index.less';
|
||||
import styles from './index.less'
|
||||
|
||||
const { Option } = Select;
|
||||
const InputGroup = Input.Group;
|
||||
const methods = ['POST', 'GET', 'PUT', 'PATCH', 'DELETE'];
|
||||
import ApiDebug from './api.js'
|
||||
import AntdDebug from './antd.js'
|
||||
import CoreDebug from './core.js'
|
||||
import ThemeDebug from './theme.js'
|
||||
|
||||
const methodTagColor = {
|
||||
GET: 'green',
|
||||
POST: 'orange',
|
||||
DELETE: 'red',
|
||||
PUT: 'geekblue',
|
||||
};
|
||||
|
||||
const requests = Object.values(endpoints_list).map(item => {
|
||||
let url = item;
|
||||
let method = 'GET';
|
||||
const paramsArray = item.split(' ');
|
||||
if (paramsArray.length === 2) {
|
||||
method = paramsArray[0];
|
||||
url = paramsArray[1];
|
||||
}
|
||||
return {
|
||||
method,
|
||||
url,
|
||||
};
|
||||
});
|
||||
|
||||
let uuid = 2;
|
||||
|
||||
class RequestPage extends React.Component {
|
||||
paramsForm = React.createRef();
|
||||
bodyDataForm = React.createRef();
|
||||
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.state = {
|
||||
// Default sets
|
||||
method: 'GET',
|
||||
url: '',
|
||||
ParamsKeys: [1],
|
||||
BodyKeys: [1],
|
||||
result: null,
|
||||
visible: true,
|
||||
};
|
||||
}
|
||||
|
||||
handleRequest = () => {
|
||||
const { method, url } = this.state;
|
||||
let params = {};
|
||||
let body = {};
|
||||
|
||||
this.paramsForm.current
|
||||
.validateFields()
|
||||
.then(values => {
|
||||
if (values) {
|
||||
for (let i in values) {
|
||||
if (i.startsWith('check')) {
|
||||
const index = i.match(/check\[(\d+)\]/)[1];
|
||||
const key = values[`key[${index}]`];
|
||||
params[key] = values[`value[${index}]`];
|
||||
}
|
||||
}
|
||||
}
|
||||
})
|
||||
.catch(errorInfo => {
|
||||
console.log(errorInfo);
|
||||
});
|
||||
|
||||
this.bodyDataForm.current
|
||||
.validateFields()
|
||||
.then(values => {
|
||||
if (values) {
|
||||
for (let i in values) {
|
||||
if (i.startsWith('check')) {
|
||||
const index = i.match(/check\[(\d+)\]/)[1];
|
||||
const key = values[`key[${index}]`];
|
||||
body[key] = values[`value[${index}]`];
|
||||
}
|
||||
}
|
||||
}
|
||||
})
|
||||
.catch(errorInfo => {
|
||||
console.log(errorInfo);
|
||||
});
|
||||
const frame = {
|
||||
method,
|
||||
endpoint: `${method} ${url}`,
|
||||
body,
|
||||
verbose: true
|
||||
}
|
||||
console.log(frame)
|
||||
api_request(frame, (err, res) => {
|
||||
this.setState({
|
||||
result: res,
|
||||
});
|
||||
})
|
||||
};
|
||||
|
||||
handleClickListItem = ({ method, url }) => {
|
||||
this.setState({
|
||||
method,
|
||||
url,
|
||||
keys: [uuid++],
|
||||
result: null,
|
||||
});
|
||||
};
|
||||
|
||||
handleInputChange = e => {
|
||||
this.setState({
|
||||
url: e.target.value,
|
||||
});
|
||||
};
|
||||
|
||||
handleSelectChange = method => {
|
||||
this.setState({
|
||||
method,
|
||||
});
|
||||
};
|
||||
|
||||
handleAddParam = () => {
|
||||
const { ParamsKeys } = this.state;
|
||||
const nextKeys = ParamsKeys.concat(uuid);
|
||||
uuid++;
|
||||
this.setState({
|
||||
ParamsKeys: nextKeys,
|
||||
});
|
||||
};
|
||||
|
||||
handleAddBody = () => {
|
||||
const { BodyKeys } = this.state;
|
||||
const nextKeys = BodyKeys.concat(uuid);
|
||||
uuid++;
|
||||
this.setState({
|
||||
BodyKeys: nextKeys,
|
||||
});
|
||||
};
|
||||
|
||||
handleRemoveParam = key => {
|
||||
const { ParamsKeys } = this.state;
|
||||
this.setState({
|
||||
ParamsKeys: ParamsKeys.filter(item => item !== key),
|
||||
});
|
||||
};
|
||||
|
||||
handleRemoveBody = key => {
|
||||
const { BodyKeys } = this.state;
|
||||
this.setState({
|
||||
BodyKeys: BodyKeys.filter(item => item !== key),
|
||||
});
|
||||
};
|
||||
|
||||
handleVisible = () => {
|
||||
this.setState({
|
||||
visible: !this.state.visible,
|
||||
});
|
||||
};
|
||||
|
||||
render() {
|
||||
const { result, url, method, ParamsKeys, BodyKeys, visible } = this.state;
|
||||
|
||||
return (
|
||||
<div>
|
||||
<Row>
|
||||
<Col lg={8} md={24}>
|
||||
<List
|
||||
className={styles.requestList}
|
||||
dataSource={requests}
|
||||
renderItem={item => (
|
||||
<List.Item
|
||||
className={classnames(styles.listItem, {
|
||||
[styles.lstItemActive]:
|
||||
item.method === method && item.url === url,
|
||||
})}
|
||||
onClick={this.handleClickListItem.bind(this, item)}
|
||||
>
|
||||
<span style={{ width: 72 }}>
|
||||
<Tag
|
||||
style={{ marginRight: 8 }}
|
||||
color={methodTagColor[item.method]}
|
||||
>
|
||||
{item.method}
|
||||
</Tag>
|
||||
</span>
|
||||
{item.url}
|
||||
</List.Item>
|
||||
)}
|
||||
/>
|
||||
</Col>
|
||||
<Col lg={16} md={24}>
|
||||
<Row type="flex" justify="space-between">
|
||||
<InputGroup compact size="large" style={{ flex: 1 }}>
|
||||
<Select
|
||||
size="large"
|
||||
value={method}
|
||||
style={{ width: 100 }}
|
||||
onChange={this.handleSelectChange}
|
||||
>
|
||||
{methods.map(item => (
|
||||
<Option value={item} key={item}>
|
||||
{item}
|
||||
</Option>
|
||||
))}
|
||||
</Select>
|
||||
<Input
|
||||
value={url}
|
||||
onChange={this.handleInputChange}
|
||||
style={{ width: 'calc(100% - 200px)' }}
|
||||
/>
|
||||
<Button
|
||||
ghost={visible}
|
||||
type={visible ? 'primary' : ''}
|
||||
onClick={this.handleVisible}
|
||||
size="large"
|
||||
>
|
||||
Params
|
||||
</Button>
|
||||
</InputGroup>
|
||||
|
||||
<Button
|
||||
size="large"
|
||||
type="primary"
|
||||
style={{ width: 100 }}
|
||||
onClick={this.handleRequest}
|
||||
>
|
||||
Send
|
||||
</Button>
|
||||
</Row>
|
||||
|
||||
<Row justify="center">
|
||||
<Col span={12}>
|
||||
<Form ref={this.paramsForm} name="control-ref">
|
||||
<div
|
||||
className={classnames(styles.paramsBlock, {
|
||||
[styles.hideParams]: !visible,
|
||||
})}
|
||||
>
|
||||
{ParamsKeys.map((key, index) => (
|
||||
<Row
|
||||
gutter={8}
|
||||
type="flex"
|
||||
justify="start"
|
||||
align="middle"
|
||||
key={key}
|
||||
>
|
||||
<Col style={{ marginTop: 8 }}>
|
||||
<Form.Item
|
||||
name={`check[${key}]`}
|
||||
valuePropName="checked"
|
||||
>
|
||||
<Checkbox defaultChecked />
|
||||
</Form.Item>
|
||||
</Col>
|
||||
<Col style={{ marginTop: 8 }}>
|
||||
<Form.Item name={`key[${key}]`}>
|
||||
<Input placeholder="Key" />
|
||||
</Form.Item>
|
||||
</Col>
|
||||
<Col style={{ marginTop: 8 }}>
|
||||
<Form.Item name={`value[${key}]`}>
|
||||
<Input placeholder="Value" />
|
||||
</Form.Item>
|
||||
</Col>
|
||||
<Col style={{ marginTop: 8 }}>
|
||||
<CloseOutlined
|
||||
onClick={this.handleRemoveParam.bind(this, key)}
|
||||
style={{ cursor: 'pointer' }}
|
||||
/>
|
||||
</Col>
|
||||
</Row>
|
||||
))}
|
||||
|
||||
<Row style={{ marginTop: 8 }}>
|
||||
<Button onClick={this.handleAddParam}>Add Param</Button>
|
||||
</Row>
|
||||
</div>
|
||||
</Form>
|
||||
</Col>
|
||||
|
||||
<Col span={12}>
|
||||
<Form ref={this.bodyDataForm} name="control-ref">
|
||||
<div
|
||||
className={classnames(styles.paramsBlock, {
|
||||
[styles.hideParams]: !visible,
|
||||
})}
|
||||
>
|
||||
{BodyKeys.map((key, index) => (
|
||||
<Row
|
||||
gutter={8}
|
||||
type="flex"
|
||||
justify="start"
|
||||
align="middle"
|
||||
key={key}
|
||||
>
|
||||
<Col style={{ marginTop: 8 }}>
|
||||
<Form.Item
|
||||
name={`check[${key}]`}
|
||||
valuePropName="checked"
|
||||
>
|
||||
<Checkbox defaultChecked />
|
||||
</Form.Item>
|
||||
</Col>
|
||||
<Col style={{ marginTop: 8 }}>
|
||||
<Form.Item name={`key[${key}]`}>
|
||||
<Input placeholder="Key" />
|
||||
</Form.Item>
|
||||
</Col>
|
||||
<Col style={{ marginTop: 8 }}>
|
||||
<Form.Item name={`value[${key}]`}>
|
||||
<Input placeholder="Value" />
|
||||
</Form.Item>
|
||||
</Col>
|
||||
<Col style={{ marginTop: 8 }}>
|
||||
<CloseOutlined
|
||||
onClick={this.handleRemoveBody.bind(this, key)}
|
||||
style={{ cursor: 'pointer' }}
|
||||
/>
|
||||
</Col>
|
||||
</Row>
|
||||
))}
|
||||
|
||||
<Row style={{ marginTop: 8 }}>
|
||||
<Button onClick={this.handleAddBody}>
|
||||
Add form-data
|
||||
</Button>
|
||||
</Row>
|
||||
</div>
|
||||
</Form>
|
||||
</Col>
|
||||
</Row>
|
||||
|
||||
<div className={styles.result}>{result}</div>
|
||||
</Col>
|
||||
</Row>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
const debbugers = {
|
||||
apiDebug: <ApiDebug />,
|
||||
antdDebug: <AntdDebug />,
|
||||
coreDebug: <CoreDebug />,
|
||||
themeDebug: <ThemeDebug />
|
||||
}
|
||||
|
||||
export default RequestPage;
|
||||
const { Item } = Menu
|
||||
const menuMap = {
|
||||
apiDebug: (
|
||||
<span>
|
||||
<Icons.Globe /> V3 Api
|
||||
</span>
|
||||
),
|
||||
antdDebug: (
|
||||
<span>
|
||||
<Icons.AntDesignOutlined /> Antd
|
||||
</span>
|
||||
),
|
||||
coreDebug: (
|
||||
<span>
|
||||
<Icons.Box /> Core
|
||||
</span>
|
||||
),
|
||||
themeDebug: (
|
||||
<span>
|
||||
<Icons.Image /> Theme
|
||||
</span>
|
||||
),
|
||||
}
|
||||
|
||||
export default class Debug extends React.Component {
|
||||
constructor(props) {
|
||||
super(props)
|
||||
this.state = {
|
||||
selectKey: '',
|
||||
}
|
||||
}
|
||||
|
||||
getMenu = () => {
|
||||
return Object.keys(menuMap).map(item => (
|
||||
<Item key={item}>{menuMap[item]}</Item>
|
||||
))
|
||||
}
|
||||
|
||||
selectKey = key => {
|
||||
this.setState({
|
||||
selectKey: key,
|
||||
})
|
||||
}
|
||||
|
||||
renderChildren = () => {
|
||||
try {
|
||||
if (!this.state.selectKey) {
|
||||
return <div>Select an debugger</div>
|
||||
}
|
||||
return debbugers[this.state.selectKey]
|
||||
} catch (error) {
|
||||
return <div>Select an debugger</div>
|
||||
}
|
||||
}
|
||||
|
||||
render() {
|
||||
const { selectKey } = this.state
|
||||
return (
|
||||
<div className={styles.main}>
|
||||
<h2>
|
||||
<Icons.SettingOutlined /> Debuggers
|
||||
</h2>
|
||||
<Menu
|
||||
mode="horizontal"
|
||||
selectedKeys={[selectKey]}
|
||||
onClick={({ key }) => this.selectKey(key)}
|
||||
>
|
||||
{this.getMenu()}
|
||||
</Menu>
|
||||
|
||||
<div className={styles.debuggerComponent}>{this.renderChildren()}</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
}
|
||||
@ -1,39 +1,47 @@
|
||||
@import '~theme/index.less';
|
||||
|
||||
.result {
|
||||
height: 600px;
|
||||
.main {
|
||||
font-family: "Nunito", sans-serif;
|
||||
margin: 20px 0 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: 100%;
|
||||
background: @hover-color;
|
||||
border-color: #ddd;
|
||||
padding: 16px;
|
||||
margin-top: 16px;
|
||||
word-break: break-word;
|
||||
line-height: 2;
|
||||
overflow: scroll;
|
||||
}
|
||||
|
||||
.requestList {
|
||||
padding-right: 24px;
|
||||
margin-bottom: 24px;
|
||||
.listItem {
|
||||
cursor: pointer;
|
||||
padding-left: 8px;
|
||||
&.lstItemActive {
|
||||
background-color: @hover-color;
|
||||
}
|
||||
.background-hover();
|
||||
}
|
||||
}
|
||||
|
||||
.paramsBlock {
|
||||
overflow: visible;
|
||||
opacity: 1;
|
||||
height: auto;
|
||||
transition: opacity 0.3s;
|
||||
&.hideParams {
|
||||
width: 0;
|
||||
height: 0;
|
||||
opacity: 0;
|
||||
overflow: hidden;
|
||||
overflow: auto;
|
||||
color: @__Global_layout_color;
|
||||
background-color: #ffffff;
|
||||
padding: 15px;
|
||||
border-radius: 10px;
|
||||
|
||||
:global {
|
||||
.ant-menu-inline {
|
||||
color: @__Global_layout_color;
|
||||
background-color: transparent;
|
||||
border: none;
|
||||
}
|
||||
|
||||
.ant-menu:not(.ant-menu-horizontal) .ant-menu-item-selected {
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
|
||||
.debuggerComponent {
|
||||
padding: 15px;
|
||||
}
|
||||
|
||||
:global {
|
||||
.ant-list-item {
|
||||
padding-top: 7px;
|
||||
padding-bottom: 7px;
|
||||
}
|
||||
|
||||
.ant-list-split .ant-list-item {
|
||||
border-bottom: 0;
|
||||
}
|
||||
|
||||
.ant-list-item-meta-title {
|
||||
color: rgba(0, 0, 0, 0.733);
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -114,7 +114,7 @@ class Base extends Component {
|
||||
renderItem={item => (
|
||||
<List.Item actions={item.actions} key={item.id}>
|
||||
<List.Item.Meta
|
||||
title={item.title}
|
||||
title={<>{item.icon}{item.title}</>}
|
||||
description={item.description}
|
||||
/>
|
||||
{this.renderSetting(item)}
|
||||
|
||||
11
src/pages/settings/components/electron/index.js
Normal file
11
src/pages/settings/components/electron/index.js
Normal file
@ -0,0 +1,11 @@
|
||||
import React from 'react'
|
||||
|
||||
export default class ElectronSettings extends React.Component{
|
||||
render(){
|
||||
return(
|
||||
<div>
|
||||
Electron
|
||||
</div>
|
||||
)
|
||||
}
|
||||
}
|
||||
@ -27,7 +27,7 @@ class ThemeConfigurator extends React.Component{
|
||||
|
||||
handleUpdate(payload){
|
||||
if(!this.state.key || !this.props.dispatch) {
|
||||
return onError.internal_proccess(`"Config key" or "Dispatcher" is missing`)
|
||||
return onError.internal_proccess(`"Config key" or "App/Dispatcher" is missing`)
|
||||
}
|
||||
if (!payload) {
|
||||
payload = this.state.model
|
||||
@ -128,8 +128,8 @@ class BackgroundImage extends ThemeConfigurator{
|
||||
key: "backgroundImage",
|
||||
model: { active: false, opacity: null, src: null },
|
||||
|
||||
textColor: this.rgbToScheme(getComputedStyle(document.getElementById("app")).color),
|
||||
overlayColor: this.rgbToScheme(getComputedStyle(document.getElementById("app")).backgroundColor),
|
||||
textColor: this.rgbToScheme(getComputedStyle(document.getElementById("root")).color),
|
||||
overlayColor: this.rgbToScheme(getComputedStyle(document.getElementById("root")).backgroundColor),
|
||||
|
||||
processing: null,
|
||||
customURL: '',
|
||||
|
||||
@ -1,7 +1,6 @@
|
||||
import React from 'react'
|
||||
import { Menu } from 'antd'
|
||||
import * as Icons from 'components/Icons'
|
||||
import * as Feather from 'feather-reactjs'
|
||||
|
||||
import styles from './style.less'
|
||||
|
||||
@ -13,50 +12,57 @@ import Base from './components/base.js'
|
||||
import AppAbout from './components/about.js'
|
||||
import Theme from './components/theme'
|
||||
|
||||
const { Item } = Menu
|
||||
const menuMap = {
|
||||
base: (
|
||||
<span>
|
||||
<Icons.ControlOutlined /> General
|
||||
</span>
|
||||
),
|
||||
theme: (
|
||||
<span>
|
||||
<Feather.Layers /> Theme
|
||||
</span>
|
||||
),
|
||||
sync: (
|
||||
<span>
|
||||
<Icons.SyncOutlined /> Sync™
|
||||
</span>
|
||||
),
|
||||
security: (
|
||||
<span>
|
||||
<Feather.Lock /> Security & Privacity
|
||||
</span>
|
||||
),
|
||||
notification: (
|
||||
<span>
|
||||
<Feather.Bell /> Notification
|
||||
</span>
|
||||
),
|
||||
earnings: (
|
||||
<span>
|
||||
<Icons.DollarCircleOutlined /> Earnings
|
||||
</span>
|
||||
),
|
||||
help: (
|
||||
<span>
|
||||
<Icons.LifeBuoy /> Help
|
||||
</span>
|
||||
),
|
||||
about: (
|
||||
<span>
|
||||
<Feather.Info /> About
|
||||
</span>
|
||||
),
|
||||
const Settings = {
|
||||
base: <Base />,
|
||||
about: <AppAbout />,
|
||||
theme: <Theme />,
|
||||
earnings: <Earnings />,
|
||||
security: <SecurityView />,
|
||||
notification: <NotificationView />
|
||||
}
|
||||
|
||||
|
||||
const { Item } = Menu
|
||||
|
||||
const menuList = [
|
||||
{
|
||||
key: "base",
|
||||
title: "General",
|
||||
icons: <Icons.ControlOutlined />,
|
||||
},
|
||||
{
|
||||
key: "app",
|
||||
title: "Application",
|
||||
icons: <Icons.Command />,
|
||||
require: "embedded"
|
||||
},
|
||||
{
|
||||
key: "theme",
|
||||
title: "Customization",
|
||||
icons: <Icons.Layers />,
|
||||
},
|
||||
{
|
||||
key: "security",
|
||||
title: "Security & Privacity",
|
||||
icons: <Icons.ControlOutlined />,
|
||||
},
|
||||
{
|
||||
key: "notification",
|
||||
title: "Notification",
|
||||
icons: <Icons.Bell />,
|
||||
},
|
||||
{
|
||||
key: "help",
|
||||
title: "Help",
|
||||
icons: <Icons.LifeBuoy />,
|
||||
},
|
||||
{
|
||||
key: "about",
|
||||
title: "About",
|
||||
icons: <Icons.Info />,
|
||||
},
|
||||
]
|
||||
|
||||
class GeneralSettings extends React.Component {
|
||||
constructor(props) {
|
||||
super(props)
|
||||
@ -66,8 +72,10 @@ class GeneralSettings extends React.Component {
|
||||
}
|
||||
|
||||
getMenu = () => {
|
||||
return Object.keys(menuMap).map(item => (
|
||||
<Item key={item}>{menuMap[item]}</Item>
|
||||
return menuList.map(item => (
|
||||
<Item key={item.key}>
|
||||
<span>{item.icons} {item.title}</span>
|
||||
</Item>
|
||||
))
|
||||
}
|
||||
|
||||
@ -78,24 +86,11 @@ class GeneralSettings extends React.Component {
|
||||
}
|
||||
|
||||
renderChildren = () => {
|
||||
const { selectKey } = this.state
|
||||
switch (selectKey) {
|
||||
case 'base':
|
||||
return <Base />
|
||||
case 'security':
|
||||
return <SecurityView />
|
||||
case 'theme':
|
||||
return <Theme />
|
||||
case 'notification':
|
||||
return <NotificationView />
|
||||
case 'about':
|
||||
return <AppAbout />
|
||||
case 'earnings':
|
||||
return <Earnings />
|
||||
default:
|
||||
break
|
||||
if(this.state.selectKey){
|
||||
return Settings[this.state.selectKey]
|
||||
}else{
|
||||
<div> Select an setting </div>
|
||||
}
|
||||
return null
|
||||
}
|
||||
|
||||
render() {
|
||||
|
||||
@ -5,7 +5,7 @@
|
||||
margin: 20px 0 0;
|
||||
display: flex;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
height: auto;
|
||||
overflow: auto;
|
||||
color: @__Global_layout_color;
|
||||
background-color: #ffffff;
|
||||
|
||||
@ -39,6 +39,7 @@
|
||||
|
||||
#root{
|
||||
background-color: @AppTheme_global_background!important;
|
||||
color: @AppTheme_global_color!important;
|
||||
}
|
||||
|
||||
.app{
|
||||
@ -62,7 +63,6 @@
|
||||
#app {
|
||||
-webkit-app-region: no-drag;
|
||||
overflow: hidden;
|
||||
border-radius: 12px;
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
|
||||
@ -103,7 +103,7 @@ body {
|
||||
line-height: @base-line-height;
|
||||
|
||||
font-family: @__Global_texted_font;
|
||||
border-radius: 12px;
|
||||
background-color: @AppTheme_global_background!important;
|
||||
}
|
||||
|
||||
@media (max-width: @bp-small){
|
||||
|
||||
@ -3,5 +3,5 @@
|
||||
@primary_layout_container_backgroud: @__Global_layout_backgroud;
|
||||
@primary_layout_container_border-rd: @__Global_layout_border-rd;
|
||||
|
||||
@primary_layout_content_padding: 25px;
|
||||
@primary_layout_content_padding: 0 40px 20px 0;
|
||||
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user