This commit is contained in:
cha0s 2022-03-20 17:12:19 -05:00
parent 5a44a0dfae
commit 249fd6d7c3
7 changed files with 52 additions and 16 deletions

24
build/template.ejs Normal file
View 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>

View File

@ -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;
}

View File

@ -11,6 +11,11 @@
> :global(.react-tabs) {
overflow: auto;
scrollbar-width: 0;
&::-webkit-scrollbar {
width: 0;
height: 0;
}
}
}

View File

@ -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;

View File

@ -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 && (

View File

@ -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 {

View File

@ -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;