refactor: ui
3
TODO.md
|
@ -8,3 +8,6 @@
|
|||
- Layer flood fill
|
||||
- Layer mute/solo
|
||||
- Tile stamp creation/application
|
||||
- Void 'holes' in generated sed worlds
|
||||
- Fall in to 'deeper' void
|
||||
- Basically endgame
|
24
packages/core/src/components/project/index.module.scss
Normal file
|
@ -0,0 +1,24 @@
|
|||
.project {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.floater {
|
||||
flex-grow: 1;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.resource {
|
||||
background-position: center;
|
||||
background-repeat: no-repeat;
|
||||
background-size: contain;
|
||||
height: 100%;
|
||||
transform: scale(2, 2);
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.room {
|
||||
background-image: url('./map.png');
|
||||
}
|
Before Width: | Height: | Size: 5.5 KiB After Width: | Height: | Size: 5.5 KiB |
|
@ -1,9 +1,9 @@
|
|||
import {PropTypes, React} from '@latus/react';
|
||||
|
||||
const SidebarActions = ({
|
||||
const OrganizationActions = ({
|
||||
collapseAll,
|
||||
}) => (
|
||||
<div className="sidebar-actions">
|
||||
<div className="organization-actions">
|
||||
<button
|
||||
className="button new-file"
|
||||
label="New resource"
|
||||
|
@ -26,12 +26,12 @@ const SidebarActions = ({
|
|||
</div>
|
||||
);
|
||||
|
||||
SidebarActions.defaultProps = {};
|
||||
OrganizationActions.defaultProps = {};
|
||||
|
||||
SidebarActions.propTypes = {
|
||||
OrganizationActions.propTypes = {
|
||||
collapseAll: PropTypes.func.isRequired,
|
||||
};
|
||||
|
||||
SidebarActions.displayName = 'SidebarActions';
|
||||
OrganizationActions.displayName = 'OrganizationActions';
|
||||
|
||||
export default SidebarActions;
|
||||
export default OrganizationActions;
|
Before Width: | Height: | Size: 309 B After Width: | Height: | Size: 309 B |
Before Width: | Height: | Size: 1.3 KiB After Width: | Height: | Size: 1.3 KiB |
Before Width: | Height: | Size: 1.2 KiB After Width: | Height: | Size: 1.2 KiB |
BIN
packages/core/src/components/project/organization/img/map.png
Normal file
After Width: | Height: | Size: 5.5 KiB |
Before Width: | Height: | Size: 1.3 KiB After Width: | Height: | Size: 1.3 KiB |
Before Width: | Height: | Size: 312 B After Width: | Height: | Size: 312 B |
Before Width: | Height: | Size: 318 B After Width: | Height: | Size: 318 B |
Before Width: | Height: | Size: 832 B After Width: | Height: | Size: 832 B |
Before Width: | Height: | Size: 429 B After Width: | Height: | Size: 429 B |
Before Width: | Height: | Size: 1.1 KiB After Width: | Height: | Size: 1.1 KiB |
Before Width: | Height: | Size: 1.8 KiB After Width: | Height: | Size: 1.8 KiB |
|
@ -13,10 +13,10 @@ import {
|
|||
import {createNextState} from '@latus/redux';
|
||||
import 'swipe-touch-events';
|
||||
|
||||
import SidebarActions from './actions';
|
||||
import OrganizationActions from './actions';
|
||||
import './index.scss';
|
||||
|
||||
const Sidebar = ({
|
||||
const Organization = ({
|
||||
className,
|
||||
label,
|
||||
resourcePaths,
|
||||
|
@ -60,7 +60,7 @@ const Sidebar = ({
|
|||
};
|
||||
const path = join('/project', uuid);
|
||||
return (
|
||||
<div className={classnames('sidebar', className)}>
|
||||
<div className={classnames('organization', className)}>
|
||||
<Tree
|
||||
// active={({value}) => location.pathname === join('/project', value)}
|
||||
activate={({value, nodes}) => {
|
||||
|
@ -99,7 +99,7 @@ const Sidebar = ({
|
|||
{!nodes && <div className={`icon ${displayName}`} />}
|
||||
<span className="text">{label}</span>
|
||||
{value === uuid && (
|
||||
<SidebarActions
|
||||
<OrganizationActions
|
||||
collapseAll={(event) => {
|
||||
event.stopPropagation();
|
||||
setCollapsed({});
|
||||
|
@ -115,17 +115,17 @@ const Sidebar = ({
|
|||
);
|
||||
};
|
||||
|
||||
Sidebar.defaultProps = {
|
||||
Organization.defaultProps = {
|
||||
className: '',
|
||||
};
|
||||
|
||||
Sidebar.propTypes = {
|
||||
Organization.propTypes = {
|
||||
className: PropTypes.string.isRequired,
|
||||
label: PropTypes.string.isRequired,
|
||||
resourcePaths: PropTypes.arrayOf(PropTypes.any).isRequired,
|
||||
uuid: PropTypes.string.isRequired,
|
||||
};
|
||||
|
||||
Sidebar.displayName = 'Sidebar';
|
||||
Organization.displayName = 'Organization';
|
||||
|
||||
export default Sidebar;
|
||||
export default Organization;
|
88
packages/core/src/components/project/organization/index.scss
Normal file
|
@ -0,0 +1,88 @@
|
|||
.organization {
|
||||
background-color: #222;
|
||||
height: 100%;
|
||||
overflow-x: hidden;
|
||||
overflow-y: auto;
|
||||
transition: 0.2s left;
|
||||
width: 100%;
|
||||
> .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";
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.organization-actions {
|
||||
display: none;
|
||||
line-height: 0;
|
||||
min-width: 4em;
|
||||
.organization: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');
|
||||
}
|
||||
}
|
||||
}
|