refactor: ui
This commit is contained in:
cha0s
parent
0ba8b3258a
commit
4c92d0821e
|
|
@ -19,19 +19,21 @@ import history from './history';
|
|||
const Persea = React.memo(() => {
|
||||
const isLoggedIn = useSelector(userIdSelector);
|
||||
return (
|
||||
<ConnectedRouter history={history}>
|
||||
<Switch>
|
||||
<Route path="/login">
|
||||
{isLoggedIn ? <Redirect to="/" /> : Login}
|
||||
<div className="persea">
|
||||
<ConnectedRouter history={history}>
|
||||
<Switch>
|
||||
<Route path="/login">
|
||||
{isLoggedIn ? <Redirect to="/" /> : Login}
|
||||
</Route>
|
||||
<Route path="/dashboard" component={Dashboard} />
|
||||
<Route path="/project/:uuid:uri(/*)?" component={ProjectRoute} />
|
||||
</Switch>
|
||||
<Route exact path="/">
|
||||
<Redirect to="/dashboard" />
|
||||
</Route>
|
||||
<Route path="/dashboard" component={Dashboard} />
|
||||
<Route path="/project/:uuid" component={ProjectRoute} />
|
||||
</Switch>
|
||||
<Route exact path="/">
|
||||
<Redirect to="/dashboard" />
|
||||
</Route>
|
||||
{!isLoggedIn && <Redirect to="/login" />}
|
||||
</ConnectedRouter>
|
||||
{!isLoggedIn && <Redirect to="/login" />}
|
||||
</ConnectedRouter>
|
||||
</div>
|
||||
);
|
||||
});
|
||||
|
||||
|
|
|
|||
|
|
@ -111,11 +111,6 @@ label, .label {
|
|||
min-height: 3em;
|
||||
padding: 1em;
|
||||
user-select: none;
|
||||
// @media(min-width: 20em) {
|
||||
// align-items: center;
|
||||
// flex-direction: row;
|
||||
// justify-content: space-between;
|
||||
// }
|
||||
&:nth-of-type(2n+1) {
|
||||
background-color: rgba(0, 0, 0, 0.15);
|
||||
}
|
||||
|
|
@ -178,38 +173,6 @@ textarea {
|
|||
resize: none;
|
||||
}
|
||||
|
||||
.grow-wrap {
|
||||
/* easy way to plop the elements on top of each other and have them both sized based on the tallest one's height */
|
||||
display: grid;
|
||||
}
|
||||
.grow-wrap::after {
|
||||
/* Note the weird space! Needed to preventy jumpy behavior */
|
||||
content: attr(data-replicated-value) " ";
|
||||
|
||||
/* This is how textarea text behaves */
|
||||
white-space: pre-wrap;
|
||||
|
||||
/* Hidden from view, clicks, and screen readers */
|
||||
visibility: hidden;
|
||||
}
|
||||
.grow-wrap > textarea {
|
||||
/* You could leave this, but after a user resizes, then it ruins the auto sizing */
|
||||
resize: none;
|
||||
|
||||
/* Firefox shows scrollbar on growth, you can hide like this. */
|
||||
overflow: hidden;
|
||||
}
|
||||
.grow-wrap > textarea,
|
||||
.grow-wrap::after {
|
||||
/* Identical styling required!! */
|
||||
border: 1px solid black;
|
||||
padding: 0.5rem;
|
||||
font: inherit;
|
||||
|
||||
/* Place on top of each other */
|
||||
grid-area: 1 / 1 / 2 / 2;
|
||||
}
|
||||
|
||||
fieldset {
|
||||
background-color: #151515;
|
||||
border: 1px solid rgba(255, 255, 255, 0.1);
|
||||
|
|
@ -233,6 +196,11 @@ button, .button {
|
|||
&:hover {
|
||||
background-color: rgba(255, 255, 255, 0.05);
|
||||
}
|
||||
.active {
|
||||
box-shadow: 0px 0px 5px #00e1ff inset;
|
||||
background-color: #006370;
|
||||
border: 2px solid #006370;
|
||||
}
|
||||
}
|
||||
|
||||
button, input[type="checkbox"], input[type="checkbox"] + label {
|
||||
|
|
@ -289,8 +257,7 @@ img {
|
|||
image-rendering: pixelated;
|
||||
}
|
||||
|
||||
button.active {
|
||||
box-shadow: 0px 0px 5px #00e1ff inset;
|
||||
background-color: #006370;
|
||||
border: 2px solid #006370;
|
||||
.persea {
|
||||
height: 100vh;
|
||||
width: 100vw;
|
||||
}
|
||||
|
|
|
|||
34
packages/core/src/components/project/bottom/index.jsx
Normal file
34
packages/core/src/components/project/bottom/index.jsx
Normal file
|
|
@ -0,0 +1,34 @@
|
|||
import {
|
||||
classnames,
|
||||
hot,
|
||||
React,
|
||||
} from '@latus/react';
|
||||
|
||||
import {locals} from './index.module.scss';
|
||||
|
||||
function Bottom() {
|
||||
const buttons = [
|
||||
<button className={classnames(locals.organization)} type="button">
|
||||
<svg height="512pt" viewBox="0 0 512 512" width="512pt" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="m512 312v-160h-230v62h-152v-54h100v-160h-230v160h90v294h192v58h230v-160h-230v62h-152v-160h152v58zm-472-272h150v80h-150zm282 352h150v80h-150zm0-200h150v80h-150zm0 0" />
|
||||
</svg>
|
||||
</button>,
|
||||
// eslint-disable-next-line jsx-a11y/control-has-associated-label
|
||||
<button className={classnames(locals.resource, 'active')} type="button" />,
|
||||
];
|
||||
return (
|
||||
<div className={locals.bottom}>
|
||||
<div className={locals.buttons}>
|
||||
{buttons}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
Bottom.defaultProps = {};
|
||||
|
||||
Bottom.displayName = 'Bottom';
|
||||
|
||||
Bottom.propTypes = {};
|
||||
|
||||
export default hot(module)(Bottom);
|
||||
|
|
@ -0,0 +1,46 @@
|
|||
.bottom {
|
||||
height: 3rem;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.buttons {
|
||||
align-items: center;
|
||||
display: flex;
|
||||
height: 100%;
|
||||
justify-content: space-around;
|
||||
|
||||
button {
|
||||
background-color: transparent;
|
||||
border: 2px transparent;
|
||||
height: 2em;
|
||||
padding: 0.5rem;
|
||||
width: 2em;
|
||||
|
||||
&:focus, &:hover {
|
||||
background-color: transparent;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
&:global(.active) {
|
||||
border-bottom: 1px solid #009fb4;
|
||||
}
|
||||
|
||||
svg {
|
||||
fill: #999;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
button.side {
|
||||
padding: 0.35rem;
|
||||
}
|
||||
|
||||
button.resource {
|
||||
background-image: url('./map.png');
|
||||
background-origin: content-box;
|
||||
background-repeat: no-repeat;
|
||||
background-size: cover;
|
||||
padding: 0.25rem;
|
||||
}
|
||||
BIN
packages/core/src/components/project/bottom/map.png
Normal file
BIN
packages/core/src/components/project/bottom/map.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 5.5 KiB |
1
packages/core/src/components/project/bottom/settings.svg
Normal file
1
packages/core/src/components/project/bottom/settings.svg
Normal file
|
|
@ -0,0 +1 @@
|
|||
<svg id="Layer_1" enable-background="new 0 0 512 512" height="512" viewBox="0 0 512 512" width="512" xmlns="http://www.w3.org/2000/svg"><g><path d="m113.147 53.166h-2.175v-22.456c0-16.934-13.777-30.71-30.788-30.71-16.934 0-30.71 13.776-30.71 30.71v22.456c-22.985-1.145-43.857 15.46-43.857 39.432v123.282c0 24.002 20.867 40.512 43.856 39.431v225.979c0 16.934 13.776 30.71 30.788 30.71 16.934 0 30.71-13.776 30.71-30.71v-225.979c22.21.781 41.606-16.895 41.606-39.431v-42.882c0-9.434-15.078-9.883-15.078.002 0 14.287.078 28.588.078 42.88 0 13.471-10.959 24.431-24.431 24.431h-68.098c-13.471 0-24.431-10.96-24.431-24.431v-123.282c0-13.472 10.959-24.432 24.431-24.432h68.099c13.471 0 24.431 10.96 24.431 24.432 0 13.466-.078 26.941-.078 40.402 0 9.459 15.078 9.869 15.078.004v-40.406c0-21.743-17.689-39.432-39.431-39.432zm-17.175 428.124c0 8.662-7.047 15.71-15.788 15.71-8.663 0-15.71-7.048-15.71-15.71v-225.979h31.498zm-31.498-450.58c0-8.662 7.047-15.71 15.788-15.71 8.663 0 15.71 7.048 15.71 15.71v22.456h-31.498z"/><path d="m290.612 255.094h-3.3v-224.384c0-16.934-13.776-30.71-30.788-30.71-16.934 0-30.71 13.776-30.71 30.71v224.384c-22.604-.988-42.731 16.189-42.731 39.431v123.283c0 23.349 20.118 40.263 42.731 39.432v24.051c0 16.934 13.777 30.71 30.788 30.71 16.934 0 30.71-13.776 30.71-30.71v-24.051c22.604.988 42.731-16.189 42.731-39.432v-123.284c0-21.742-17.689-39.43-39.431-39.43zm-49.799-224.384c0-8.662 7.048-15.71 15.788-15.71 8.663 0 15.71 7.048 15.71 15.71v224.384h-31.498zm31.499 450.58c0 8.662-7.047 15.71-15.788 15.71-8.663 0-15.71-7.048-15.71-15.71v-24.051h31.498zm42.731-63.482c0 13.472-10.96 24.432-24.431 24.432h-68.099c-13.471 0-24.431-10.96-24.431-24.432v-123.284c0-13.471 10.959-24.431 24.431-24.431h68.099c13.471 0 24.431 10.96 24.431 24.431z"/><path d="m466.952 139.191h-3.3v-108.481c0-16.934-13.776-30.71-30.788-30.71-16.934 0-30.71 13.776-30.71 30.71v108.481c-22.604-.988-42.731 16.19-42.731 39.432v123.282c0 23.349 20.118 40.263 42.731 39.432v139.953c0 16.934 13.777 30.71 30.788 30.71 16.934 0 30.71-13.776 30.71-30.71v-44.29c0-9.697-15-9.697-15 0v44.29c0 8.662-7.047 15.71-15.788 15.71-8.663 0-15.71-7.048-15.71-15.71v-139.953h31.498v52.663c0 9.697 15 9.697 15 0v-52.663c22.604.988 42.731-16.189 42.731-39.432v-123.282c0-21.742-17.689-39.432-39.431-39.432zm-49.799-108.481c0-8.662 7.048-15.71 15.788-15.71 8.663 0 15.71 7.048 15.71 15.71v108.481h-31.498zm74.23 271.195c0 13.472-10.96 24.432-24.431 24.432h-68.099c-13.471 0-24.431-10.96-24.431-24.432v-123.282c0-13.472 10.959-24.432 24.431-24.432h68.099c13.471 0 24.431 10.96 24.431 24.432z"/><path d="m102.347 100.484h-46.498c-4.142 0-7.5 3.357-7.5 7.5s3.358 7.5 7.5 7.5h46.498c4.142 0 7.5-3.357 7.5-7.5s-3.358-7.5-7.5-7.5z"/><path d="m102.347 146.738h-46.498c-4.142 0-7.5 3.357-7.5 7.5s3.358 7.5 7.5 7.5h46.498c4.142 0 7.5-3.357 7.5-7.5s-3.358-7.5-7.5-7.5z"/><path d="m102.347 192.993h-46.498c-4.142 0-7.5 3.357-7.5 7.5s3.358 7.5 7.5 7.5h46.498c4.142 0 7.5-3.357 7.5-7.5s-3.358-7.5-7.5-7.5z"/><path d="m279.812 302.412h-46.498c-4.142 0-7.5 3.357-7.5 7.5s3.358 7.5 7.5 7.5h46.498c4.142 0 7.5-3.357 7.5-7.5s-3.358-7.5-7.5-7.5z"/><path d="m279.812 348.666h-46.498c-4.142 0-7.5 3.357-7.5 7.5s3.358 7.5 7.5 7.5h46.498c4.142 0 7.5-3.357 7.5-7.5s-3.358-7.5-7.5-7.5z"/><path d="m279.812 394.921h-46.498c-4.142 0-7.5 3.357-7.5 7.5s3.358 7.5 7.5 7.5h46.498c4.142 0 7.5-3.357 7.5-7.5s-3.358-7.5-7.5-7.5z"/><path d="m456.151 186.51h-46.498c-4.142 0-7.5 3.357-7.5 7.5s3.358 7.5 7.5 7.5h46.498c4.142 0 7.5-3.357 7.5-7.5s-3.358-7.5-7.5-7.5z"/><path d="m456.151 232.764h-46.498c-4.142 0-7.5 3.357-7.5 7.5s3.358 7.5 7.5 7.5h46.498c4.142 0 7.5-3.357 7.5-7.5s-3.358-7.5-7.5-7.5z"/><path d="m456.151 279.019h-46.498c-4.142 0-7.5 3.357-7.5 7.5s3.358 7.5 7.5 7.5h46.498c4.142 0 7.5-3.357 7.5-7.5s-3.358-7.5-7.5-7.5z"/></g></svg>
|
||||
|
After Width: | Height: | Size: 3.7 KiB |
|
|
@ -1,47 +1,66 @@
|
|||
import './index.scss';
|
||||
|
||||
import {
|
||||
useResourceController,
|
||||
} from '@avocado/resource-persea';
|
||||
import {
|
||||
classnames,
|
||||
hot,
|
||||
IconPages,
|
||||
PropTypes,
|
||||
React,
|
||||
Route,
|
||||
useEffect,
|
||||
useParams,
|
||||
useRef,
|
||||
useState,
|
||||
} from '@latus/react';
|
||||
import {
|
||||
useSelector,
|
||||
} from '@latus/redux';
|
||||
|
||||
import {structureSelector} from '../../state/projects';
|
||||
import ResourceRoute from '../resource/route';
|
||||
import Sidebar from './sidebar';
|
||||
import Organization from './organization';
|
||||
|
||||
function Project({structure: {label, resourcePaths}, uuid}) {
|
||||
import {locals} from './index.module.scss';
|
||||
|
||||
function Project({uuid}) {
|
||||
const {uri} = useParams();
|
||||
const [currentPageIndex, setCurrentPageIndex] = useState(0);
|
||||
const ref = useRef();
|
||||
const [isSidebarOpen, setIsSidebarOpen] = useState(false);
|
||||
useEffect(() => {
|
||||
const {current} = ref;
|
||||
const onSwipeLeft = () => {
|
||||
setIsSidebarOpen(false);
|
||||
};
|
||||
const onSwipeRight = () => {
|
||||
setIsSidebarOpen(true);
|
||||
};
|
||||
current.addEventListener('swipeleft', onSwipeLeft);
|
||||
current.addEventListener('swiperight', onSwipeRight);
|
||||
return () => {
|
||||
current.removeEventListener('swipeleft', onSwipeLeft);
|
||||
current.removeEventListener('swiperight', onSwipeRight);
|
||||
};
|
||||
}, [ref]);
|
||||
return (
|
||||
<div className="project" ref={ref}>
|
||||
<Sidebar
|
||||
className={classnames({open: isSidebarOpen})}
|
||||
const {label, resourcePaths} = useSelector((state) => structureSelector(state, uuid));
|
||||
const iconPages = [];
|
||||
// Organization
|
||||
iconPages.push({
|
||||
Icon: (
|
||||
<svg viewBox="0 0 512 512">
|
||||
<path d="m512 312v-160h-230v62h-152v-54h100v-160h-230v160h90v294h192v58h230v-160h-230v62h-152v-160h152v58zm-472-272h150v80h-150zm282 352h150v80h-150zm0-200h150v80h-150zm0 0" />
|
||||
</svg>
|
||||
),
|
||||
Page: (
|
||||
<Organization
|
||||
label={label}
|
||||
uuid={uuid}
|
||||
resourcePaths={resourcePaths}
|
||||
/>
|
||||
<div className="resource-container">
|
||||
<Route path="/project/:uuid:uri(/*)" component={ResourceRoute} />
|
||||
</div>
|
||||
),
|
||||
});
|
||||
const {className} = useResourceController(uri);
|
||||
// Resource
|
||||
iconPages.push({
|
||||
Icon: (
|
||||
<div className={classnames(locals.resource, className)} />
|
||||
),
|
||||
Page: (
|
||||
<Route path="/project/:uuid:uri(/*)" component={ResourceRoute} />
|
||||
),
|
||||
});
|
||||
return (
|
||||
<div className={locals.project} ref={ref}>
|
||||
<IconPages
|
||||
iconsAreBelow={false}
|
||||
iconPages={iconPages}
|
||||
index={currentPageIndex}
|
||||
onIndexChanged={setCurrentPageIndex}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
@ -54,8 +73,7 @@ export const propTypes = PropTypes.shape({
|
|||
Project.displayName = 'Project';
|
||||
|
||||
Project.propTypes = {
|
||||
structure: propTypes.isRequired,
|
||||
uuid: PropTypes.string.isRequired,
|
||||
};
|
||||
|
||||
export default Project;
|
||||
export default hot(module)(Project);
|
||||
|
|
|
|||
|
|
@ -1,14 +0,0 @@
|
|||
.project {
|
||||
display: flex;
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
.resource-container {
|
||||
background-color: rgba(0, 0, 0, 0.2);
|
||||
flex-grow: 1;
|
||||
overflow: auto;
|
||||
}
|
||||
}
|
||||
|
||||
[class*="ResizePanel-module_ResizeHandleHorizontal"] {
|
||||
display: none;
|
||||
}
|
||||
|
|
@ -4,15 +4,12 @@ import {join} from 'path';
|
|||
|
||||
import {Resource} from '@avocado/resource';
|
||||
import {PropTypes, React} from '@latus/react';
|
||||
import {useSelector} from '@latus/redux';
|
||||
|
||||
import {structureSelector} from '../../../state/projects';
|
||||
import Project from '../index';
|
||||
|
||||
const ProjectRoute = ({match: {params: {uuid}}}) => {
|
||||
const structure = useSelector((state) => structureSelector(state, uuid));
|
||||
Resource.root = join('/projects', uuid);
|
||||
return <Project uuid={uuid} structure={structure} />;
|
||||
return <Project uuid={uuid} />;
|
||||
};
|
||||
|
||||
ProjectRoute.displayName = 'ProjectRoute';
|
||||
|
|
|
|||
|
|
@ -1,98 +0,0 @@
|
|||
.sidebar {
|
||||
background-color: #222;
|
||||
height: 100%;
|
||||
overflow-x: hidden;
|
||||
overflow-y: auto;
|
||||
left: -100vw;
|
||||
position: absolute;
|
||||
transition: 0.2s left;
|
||||
width: 100%;
|
||||
z-index: 100;
|
||||
&.open {
|
||||
left: 0;
|
||||
}
|
||||
@media(min-width: 90rem) {
|
||||
position: static;
|
||||
width: 30rem;
|
||||
}
|
||||
> .tree > .node > .item .label > .text {
|
||||
flex-grow: 1;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
.label.inline {
|
||||
justify-content: flex-start;
|
||||
> div:first-child.icon {
|
||||
background-size: cover;
|
||||
flex-grow: unset;
|
||||
margin-right: 0.125em;
|
||||
width: 1em;
|
||||
height: 1em;
|
||||
&.AudioComponent {
|
||||
background-image: url('./img/sound.png');
|
||||
}
|
||||
&.Binary {
|
||||
background-image: url('./img/question.png');
|
||||
}
|
||||
&.EntityComponent {
|
||||
background-image: url('./img/joystick.png');
|
||||
}
|
||||
&.ImageComponent {
|
||||
background-image: url('./img/image.png');
|
||||
}
|
||||
&.RoomComponent {
|
||||
background-image: url('./img/map.png');
|
||||
}
|
||||
&.ScriptComponent {
|
||||
background-image: url('./img/script.png');
|
||||
}
|
||||
&.SoundComponent {
|
||||
background-image: url('./img/music.png');
|
||||
}
|
||||
&.TextComponent {
|
||||
background-image: url('./img/note.png');
|
||||
}
|
||||
}
|
||||
}
|
||||
.node {
|
||||
&.parent > .item .label:before {
|
||||
color: #999;
|
||||
content: "\25BE";
|
||||
margin-right: 0.25em;
|
||||
}
|
||||
&.collapsed {
|
||||
&.parent > .item .label:before {
|
||||
color: #999;
|
||||
content: "\25B8";
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.sidebar-actions {
|
||||
display: none;
|
||||
line-height: 0;
|
||||
min-width: 4em;
|
||||
.sidebar:hover & {
|
||||
display: block;
|
||||
}
|
||||
button {
|
||||
background-color: transparent;
|
||||
background-size: cover;
|
||||
background-repeat: no-repeat;
|
||||
border: none;
|
||||
margin: 0;
|
||||
margin-right: 0.25em;
|
||||
width: 1em;
|
||||
height: 1em;
|
||||
&.collapse-all {
|
||||
background-image: url('./img/collapse-all.svg');
|
||||
}
|
||||
&.new-file {
|
||||
background-image: url('./img/new-file.svg');
|
||||
}
|
||||
&.new-folder {
|
||||
background-image: url('./img/new-folder.svg');
|
||||
}
|
||||
}
|
||||
}
|
||||
Loading…
Reference in New Issue
Block a user