flow: ui
This commit is contained in:
cha0s
parent
5a44a0dfae
commit
249fd6d7c3
24
build/template.ejs
Normal file
24
build/template.ejs
Normal file
|
|
@ -0,0 +1,24 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="<%= htmlWebpackPlugin.options.lang %>">
|
||||
<head>
|
||||
<base href="/" />
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, user-scalable=no" />
|
||||
<title><%= htmlWebpackPlugin.options.title %></title>
|
||||
<style>
|
||||
html {
|
||||
background-color: #212121;
|
||||
}
|
||||
</style>
|
||||
<% if (styleFile) { %>
|
||||
<style data-href="<%= styleFile.href %>">
|
||||
<%= styleFile.content %>
|
||||
</style>
|
||||
<% } %>
|
||||
</head>
|
||||
<body>
|
||||
<div id="<%= htmlWebpackPlugin.options.appMountId %>"></div>
|
||||
<script src="/flecks.config.js"></script>
|
||||
<%= htmlWebpackPlugin.tags.bodyTags %>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -8,8 +8,10 @@
|
|||
html {
|
||||
background-color: #212121;
|
||||
color: #FFFFFF;
|
||||
--background-color-active: rgba(0, 120, 255, 0.5);
|
||||
--color-active: #{$color-active};
|
||||
--message-font-family: verdana, arial, helvetica, sans-serif;
|
||||
--system-font-family: system-ui, Ubuntu, Droid Sans, sans-serif;
|
||||
--title-font-family: LatoLight, Ubuntu, "Droid Sans", sans-serif;
|
||||
--thick-title-font-family: LatoRegular, Ubuntu, "Droid Sans", sans-serif;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -11,6 +11,11 @@
|
|||
|
||||
> :global(.react-tabs) {
|
||||
overflow: auto;
|
||||
scrollbar-width: 0;
|
||||
&::-webkit-scrollbar {
|
||||
width: 0;
|
||||
height: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -4,9 +4,11 @@
|
|||
border: none;
|
||||
border-left: 1px solid rgba(255, 255, 255, 0.1);
|
||||
bottom: 0;
|
||||
color: white;
|
||||
color: rgba(255, 255, 255, 0.6);
|
||||
line-height: normal;
|
||||
padding: 1em;
|
||||
font-family: monospace;
|
||||
font-family: var(--system-font-family);
|
||||
font-size: 0.75em;
|
||||
user-select: none;
|
||||
&:first-child {
|
||||
border: none;
|
||||
|
|
@ -18,7 +20,7 @@
|
|||
background: none;
|
||||
border: none;
|
||||
line-height: 0;
|
||||
margin-left: 0.25em;
|
||||
margin-left: 0.75em;
|
||||
padding: 0;
|
||||
vertical-align: middle;
|
||||
visibility: hidden;
|
||||
|
|
@ -35,6 +37,7 @@
|
|||
border: none;
|
||||
border-left: 1px solid rgba(255, 255, 255, 0.1);
|
||||
border-radius: 0;
|
||||
color: #FFFFFF;
|
||||
}
|
||||
.react-tabs__tab-list {
|
||||
border: none;
|
||||
|
|
|
|||
|
|
@ -7,16 +7,17 @@ import {
|
|||
React,
|
||||
useFlecks,
|
||||
} from '@flecks/react';
|
||||
import {useLocation} from '@flecks/react/router';
|
||||
import {
|
||||
createNextState,
|
||||
useDispatch,
|
||||
useSelector,
|
||||
} from '@flecks/redux';
|
||||
|
||||
import './index.scss';
|
||||
|
||||
import useLocalStorage from '../../../hooks/use-local-storage';
|
||||
import {
|
||||
currentResourceSelector,
|
||||
setCurrentResource,
|
||||
} from '../../../state';
|
||||
import OrganizationActions from './actions';
|
||||
|
|
@ -32,8 +33,8 @@ const Organization = ({
|
|||
uuid,
|
||||
}) => {
|
||||
const dispatch = useDispatch();
|
||||
const current = useSelector(currentResourceSelector);
|
||||
const flecks = useFlecks();
|
||||
const location = useLocation();
|
||||
const [collapsed, setCollapsed] = useLocalStorage('@persea/core/collapsed', {});
|
||||
const treeFromResourcePath = (tree, uuid, [isFile, resourcePath]) => {
|
||||
const parts = resourcePath.split('/');
|
||||
|
|
@ -47,7 +48,6 @@ const Organization = ({
|
|||
walk.nodes.push({
|
||||
...(isFile ? {} : {nodes: []}),
|
||||
classNames: {
|
||||
active: location.pathname === path,
|
||||
collapsed: undefined === collapsed[path] ? true : collapsed[path],
|
||||
},
|
||||
label: part,
|
||||
|
|
@ -67,7 +67,6 @@ const Organization = ({
|
|||
return (
|
||||
<div className={classnames('organization', className)}>
|
||||
<Tree
|
||||
// active={({value}) => location.pathname === join('/project', value)}
|
||||
activate={({value, nodes}) => {
|
||||
const path = join('/project', value);
|
||||
if (!nodes) {
|
||||
|
|
@ -90,10 +89,15 @@ const Organization = ({
|
|||
}
|
||||
}}
|
||||
classNames={{
|
||||
active: location.pathname === path,
|
||||
collapsed: undefined === collapsed[path] ? true : collapsed[path],
|
||||
}}
|
||||
indent={0.5}
|
||||
isActive={(value) => {
|
||||
if (!uuid || !current) {
|
||||
return false;
|
||||
}
|
||||
return value === join(uuid, current);
|
||||
}}
|
||||
label={label}
|
||||
nodes={nodesFromResourcePaths(label, uuid, resourcePaths)}
|
||||
renderLabel={({label, nodes, value}) => {
|
||||
|
|
@ -102,7 +106,7 @@ const Organization = ({
|
|||
.find(({matcher}) => value.match(matcher))
|
||||
.Component;
|
||||
return (
|
||||
<div className="label inline">
|
||||
<div className={classnames('label', 'inline')}>
|
||||
{!nodes && <div className={`icon ${normalizeDisplayName(displayName)}`} />}
|
||||
<span className="text">{label}</span>
|
||||
{value === uuid && (
|
||||
|
|
|
|||
|
|
@ -1,10 +1,12 @@
|
|||
.organization {
|
||||
// background-color: #222;
|
||||
height: 100%;
|
||||
overflow-x: hidden;
|
||||
overflow-y: auto;
|
||||
transition: 0.2s left;
|
||||
width: 100%;
|
||||
.indent {
|
||||
padding-left: 0.35em;
|
||||
}
|
||||
> .tree > .node > .item .label > .text {
|
||||
flex-grow: 1;
|
||||
overflow: hidden;
|
||||
|
|
@ -18,7 +20,7 @@
|
|||
> div:first-child.icon {
|
||||
background-size: cover;
|
||||
flex-grow: unset;
|
||||
margin-right: 0.125em;
|
||||
margin-right: 0.5em;
|
||||
width: 1em;
|
||||
height: 1em;
|
||||
&.AudioComponent {
|
||||
|
|
|
|||
|
|
@ -7,11 +7,7 @@
|
|||
background-color: rgba(255, 255, 255, 0.07);
|
||||
}
|
||||
&.active {
|
||||
background-color: rgba(255, 255, 255, 0.05);
|
||||
border: 1px solid var(--color-active);
|
||||
&:hover {
|
||||
background-color: rgba(255, 255, 255, 0.10);
|
||||
}
|
||||
background-color: var(--background-color-active);
|
||||
}
|
||||
label {
|
||||
padding: 0.5em;
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user