chore: polish
This commit is contained in:
cha0s
parent
eb165a96b0
commit
6fa944acf7
|
|
@ -36,13 +36,14 @@
|
|||
"fast-json-patch": "^3.0.0-1",
|
||||
"glob": "^7.1.6",
|
||||
"history": "^4.10.0",
|
||||
"import": "^0.0.6",
|
||||
"lodash.flatten": "^4.4.0",
|
||||
"natsort": "^2.0.2",
|
||||
"rc-slider": "^9.7.1",
|
||||
"react-hex-editor": "^0.3.0",
|
||||
"react-modal": "^3.12.1",
|
||||
"react-resize-panel": "^0.3.5",
|
||||
"react-ui-tree": "^4.0.0"
|
||||
"react-ui-tree": "^4.0.0",
|
||||
"swipe-touch-events": "^1.0.2"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@latus/build": "1.x"
|
||||
|
|
|
|||
|
|
@ -109,15 +109,15 @@ label, .label {
|
|||
font-family: var(--thick-title-font-family);
|
||||
font-size: 1em;
|
||||
min-height: 3em;
|
||||
padding: 0.5em 0.5em 0.5em 1em;
|
||||
padding: 1em;
|
||||
user-select: none;
|
||||
@media(min-width: 20em) {
|
||||
align-items: center;
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
}
|
||||
// @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.05);
|
||||
background-color: rgba(0, 0, 0, 0.15);
|
||||
}
|
||||
&.above {
|
||||
flex-direction: column;
|
||||
|
|
@ -127,6 +127,24 @@ label, .label {
|
|||
margin-top: 1em;
|
||||
}
|
||||
}
|
||||
// non-inline
|
||||
flex-direction: column;
|
||||
width: 100%;
|
||||
> div:first-child {
|
||||
font-size: 0.7em;
|
||||
text-transform: uppercase;
|
||||
opacity: 1;
|
||||
margin-bottom: 1em;
|
||||
}
|
||||
&.inline {
|
||||
align-items: center;
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
> div:first-child {
|
||||
flex-grow: 1;
|
||||
margin: auto 0;
|
||||
}
|
||||
}
|
||||
.center {
|
||||
text-align: center;
|
||||
}
|
||||
|
|
@ -273,6 +291,6 @@ img {
|
|||
|
||||
button.active {
|
||||
box-shadow: 0px 0px 5px #00e1ff inset;
|
||||
background-image: #373737;
|
||||
background-color: #006370;
|
||||
border: 2px solid #006370;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,29 +1,50 @@
|
|||
import './index.scss';
|
||||
|
||||
import {
|
||||
classnames,
|
||||
PropTypes,
|
||||
React,
|
||||
Route,
|
||||
useEffect,
|
||||
useRef,
|
||||
useState,
|
||||
} from '@latus/react';
|
||||
import ResizePanel from 'react-resize-panel';
|
||||
|
||||
import ResourceRoute from '../resource/route';
|
||||
import Sidebar from './sidebar';
|
||||
|
||||
const Project = ({structure: {label, resourcePaths}, uuid}) => (
|
||||
<div className="project">
|
||||
<ResizePanel direction="e">
|
||||
function Project({structure: {label, resourcePaths}, uuid}) {
|
||||
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})}
|
||||
label={label}
|
||||
uuid={uuid}
|
||||
resourcePaths={resourcePaths}
|
||||
/>
|
||||
</ResizePanel>
|
||||
<div className="resource-container">
|
||||
<Route path="/project/:uuid:uri(/*)" component={ResourceRoute} />
|
||||
<div className="resource-container">
|
||||
<Route path="/project/:uuid:uri(/*)" component={ResourceRoute} />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
);
|
||||
}
|
||||
|
||||
export const propTypes = PropTypes.shape({
|
||||
label: PropTypes.string.isRequired,
|
||||
|
|
|
|||
|
|
@ -1,5 +1,3 @@
|
|||
$sidebar-basis: 12rem;
|
||||
|
||||
.project {
|
||||
display: flex;
|
||||
width: 100vw;
|
||||
|
|
@ -14,7 +12,3 @@ $sidebar-basis: 12rem;
|
|||
[class*="ResizePanel-module_ResizeHandleHorizontal"] {
|
||||
display: none;
|
||||
}
|
||||
|
||||
[class*="ResizePanel-module_ResizeContent"] {
|
||||
min-width: $sidebar-basis;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,9 +1,8 @@
|
|||
import './index.scss';
|
||||
|
||||
import {join} from 'path';
|
||||
|
||||
import {Tree} from '@avocado/react';
|
||||
import {
|
||||
classnames,
|
||||
PropTypes,
|
||||
React,
|
||||
useHistory,
|
||||
|
|
@ -12,10 +11,17 @@ import {
|
|||
useState,
|
||||
} from '@latus/react';
|
||||
import {createNextState} from '@latus/redux';
|
||||
import 'swipe-touch-events';
|
||||
|
||||
import SidebarActions from './actions';
|
||||
import './index.scss';
|
||||
|
||||
const Sidebar = ({label, resourcePaths, uuid}) => {
|
||||
const Sidebar = ({
|
||||
className,
|
||||
label,
|
||||
resourcePaths,
|
||||
uuid,
|
||||
}) => {
|
||||
const history = useHistory();
|
||||
const latus = useLatus();
|
||||
const location = useLocation();
|
||||
|
|
@ -54,7 +60,7 @@ const Sidebar = ({label, resourcePaths, uuid}) => {
|
|||
};
|
||||
const path = join('/project', uuid);
|
||||
return (
|
||||
<div className="sidebar">
|
||||
<div className={classnames('sidebar', className)}>
|
||||
<Tree
|
||||
// active={({value}) => location.pathname === join('/project', value)}
|
||||
activate={({value, nodes}) => {
|
||||
|
|
@ -109,11 +115,13 @@ const Sidebar = ({label, resourcePaths, uuid}) => {
|
|||
);
|
||||
};
|
||||
|
||||
Sidebar.defaultProps = {};
|
||||
Sidebar.defaultProps = {
|
||||
className: '',
|
||||
};
|
||||
|
||||
Sidebar.propTypes = {
|
||||
className: PropTypes.string.isRequired,
|
||||
label: PropTypes.string.isRequired,
|
||||
// eslint-disable-next-line react/no-unused-prop-types
|
||||
resourcePaths: PropTypes.arrayOf(PropTypes.any).isRequired,
|
||||
uuid: PropTypes.string.isRequired,
|
||||
};
|
||||
|
|
|
|||
|
|
@ -1,11 +1,20 @@
|
|||
$sidebar-basis: 12rem;
|
||||
|
||||
.sidebar {
|
||||
background-color: #222;
|
||||
height: 100%;
|
||||
min-width: $sidebar-basis;
|
||||
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: 80rem) {
|
||||
position: static;
|
||||
width: 80rem;
|
||||
}
|
||||
> .tree > .node > .item .label > .text {
|
||||
flex-grow: 1;
|
||||
overflow: hidden;
|
||||
|
|
|
|||
|
|
@ -2729,11 +2729,6 @@ caseless@~0.12.0:
|
|||
resolved "https://verdaccio.hq.cha0s.io/caseless/-/caseless-0.12.0.tgz#1b681c21ff84033c826543090689420d187151dc"
|
||||
integrity sha1-G2gcIf+EAzyCZUMJBolCDRhxUdw=
|
||||
|
||||
cash-dom@^4.1.5:
|
||||
version "4.1.5"
|
||||
resolved "https://verdaccio.hq.cha0s.io/cash-dom/-/cash-dom-4.1.5.tgz#0ef0cf205bc7603aa4e2dfada5808442a7a0e6ca"
|
||||
integrity sha512-E6MO0A6ms5iZPtexznQXWRkFEvqdPqCmdx/SiJr2PnhOQNhZNfALkLG5t83Hk3J5JELzED7PJuzhMoS2tT64XA==
|
||||
|
||||
chai@4.2.0:
|
||||
version "4.2.0"
|
||||
resolved "https://verdaccio.hq.cha0s.io/chai/-/chai-4.2.0.tgz#760aa72cf20e3795e84b12877ce0e83737aa29e5"
|
||||
|
|
@ -5229,6 +5224,13 @@ import-local@^2.0.0:
|
|||
pkg-dir "^3.0.0"
|
||||
resolve-cwd "^2.0.0"
|
||||
|
||||
import@^0.0.6:
|
||||
version "0.0.6"
|
||||
resolved "https://verdaccio.hq.cha0s.io/import/-/import-0.0.6.tgz#d0eb79df86aa2677c6db61578a5212b3031e6042"
|
||||
integrity sha1-0Ot534aqJnfG22FXilISswMeYEI=
|
||||
dependencies:
|
||||
optimist "0.3.x"
|
||||
|
||||
imurmurhash@^0.1.4:
|
||||
version "0.1.4"
|
||||
resolved "https://verdaccio.hq.cha0s.io/imurmurhash/-/imurmurhash-0.1.4.tgz#9218b9b2b928a238b13dc4fb6b6d576f231453ea"
|
||||
|
|
@ -6922,6 +6924,13 @@ opn@^5.5.0:
|
|||
dependencies:
|
||||
is-wsl "^1.1.0"
|
||||
|
||||
optimist@0.3.x:
|
||||
version "0.3.7"
|
||||
resolved "https://verdaccio.hq.cha0s.io/optimist/-/optimist-0.3.7.tgz#c90941ad59e4273328923074d2cf2e7cbc6ec0d9"
|
||||
integrity sha1-yQlBrVnkJzMokjB00s8ufLxuwNk=
|
||||
dependencies:
|
||||
wordwrap "~0.0.2"
|
||||
|
||||
optionator@^0.9.1:
|
||||
version "0.9.1"
|
||||
resolved "https://verdaccio.hq.cha0s.io/optionator/-/optionator-0.9.1.tgz#4f236a6373dae0566a6d43e1326674f50c291499"
|
||||
|
|
@ -7543,7 +7552,7 @@ promise-inflight@^1.0.1:
|
|||
resolved "https://verdaccio.hq.cha0s.io/promise-inflight/-/promise-inflight-1.0.1.tgz#98472870bf228132fcbdd868129bad12c3c029e3"
|
||||
integrity sha1-mEcocL8igTL8vdhoEputEsPAKeM=
|
||||
|
||||
prop-types@^15.5.0, prop-types@^15.5.10, prop-types@^15.6.0, prop-types@^15.6.1, prop-types@^15.6.2, prop-types@^15.7.2:
|
||||
prop-types@^15.5.0, prop-types@^15.5.10, prop-types@^15.6.1, prop-types@^15.6.2, prop-types@^15.7.2:
|
||||
version "15.7.2"
|
||||
resolved "https://verdaccio.hq.cha0s.io/prop-types/-/prop-types-15.7.2.tgz#52c41e75b8c87e72b9d9360e0206b99dcbffa6c5"
|
||||
integrity sha512-8QQikdH7//R2vurIJSutZ1smHYTcLpRWEOlHnzcWHmBYrOGUysKwSsrC89BCiFj3CbrfJ/nXFdJepOVrY1GCHQ==
|
||||
|
|
@ -7791,14 +7800,6 @@ react-dom@^17.0.1:
|
|||
object-assign "^4.1.1"
|
||||
scheduler "^0.20.2"
|
||||
|
||||
react-draggable@^4.0.3:
|
||||
version "4.4.3"
|
||||
resolved "https://verdaccio.hq.cha0s.io/react-draggable/-/react-draggable-4.4.3.tgz#0727f2cae5813e36b0e4962bf11b2f9ef2b406f3"
|
||||
integrity sha512-jV4TE59MBuWm7gb6Ns3Q1mxX8Azffb7oTtDtBgFkxRvhDp38YAARmRplrj0+XGkhOJB5XziArX+4HUUABtyZ0w==
|
||||
dependencies:
|
||||
classnames "^2.2.5"
|
||||
prop-types "^15.6.0"
|
||||
|
||||
react-hex-editor@^0.3.0:
|
||||
version "0.3.0"
|
||||
resolved "https://verdaccio.hq.cha0s.io/react-hex-editor/-/react-hex-editor-0.3.0.tgz#4133715faa9eb46ea3f373ec0c81a2e379fe6575"
|
||||
|
|
@ -7863,16 +7864,6 @@ react-redux@^7.2.2:
|
|||
prop-types "^15.7.2"
|
||||
react-is "^16.13.1"
|
||||
|
||||
react-resize-panel@^0.3.5:
|
||||
version "0.3.5"
|
||||
resolved "https://verdaccio.hq.cha0s.io/react-resize-panel/-/react-resize-panel-0.3.5.tgz#43aa3450bf5b5a2566b40c4201445ced96c2a905"
|
||||
integrity sha512-iyHOFTrSt+WV4Ilzi81x6KH3FU7VsGP736rmxepwGrgAEATmCvXzZdluTm3NpsptP7aC3hLODmXwnxusyA393A==
|
||||
dependencies:
|
||||
cash-dom "^4.1.5"
|
||||
classnames "^2.2.6"
|
||||
lodash.debounce "^4.0.8"
|
||||
react-draggable "^4.0.3"
|
||||
|
||||
react-router-dom@^5.2.0:
|
||||
version "5.2.0"
|
||||
resolved "https://verdaccio.hq.cha0s.io/react-router-dom/-/react-router-dom-5.2.0.tgz#9e65a4d0c45e13289e66c7b17c7e175d0ea15662"
|
||||
|
|
@ -9163,6 +9154,11 @@ supports-color@^7.1.0:
|
|||
dependencies:
|
||||
has-flag "^4.0.0"
|
||||
|
||||
swipe-touch-events@^1.0.2:
|
||||
version "1.0.2"
|
||||
resolved "https://verdaccio.hq.cha0s.io/swipe-touch-events/-/swipe-touch-events-1.0.2.tgz#84c2ba1570db85a41bbf082f20a53b165b67326a"
|
||||
integrity sha512-Tj3MeUzzMGVoazK5UloCzX9JCJ9y+Xy/F8tHbZy6bFzjNMTXE0VM6RAyarhtjG+oU70ggEtaYSDvoZPczUMaTg==
|
||||
|
||||
table@^6.0.9:
|
||||
version "6.7.1"
|
||||
resolved "https://verdaccio.hq.cha0s.io/table/-/table-6.7.1.tgz#ee05592b7143831a8c94f3cee6aae4c1ccef33e2"
|
||||
|
|
@ -9887,6 +9883,11 @@ word-wrap@^1.2.3:
|
|||
resolved "https://verdaccio.hq.cha0s.io/word-wrap/-/word-wrap-1.2.3.tgz#610636f6b1f703891bd34771ccb17fb93b47079c"
|
||||
integrity sha512-Hz/mrNwitNRh/HUAtM/VT/5VH+ygD6DV7mYKZAtHOrbs8U7lvPS6xf7EJKMF0uW1KJCl0H701g3ZGus+muE5vQ==
|
||||
|
||||
wordwrap@~0.0.2:
|
||||
version "0.0.3"
|
||||
resolved "https://verdaccio.hq.cha0s.io/wordwrap/-/wordwrap-0.0.3.tgz#a3d5da6cd5c0bc0008d37234bbaf1bed63059107"
|
||||
integrity sha1-o9XabNXAvAAI03I0u68b7WMFkQc=
|
||||
|
||||
worker-farm@^1.7.0:
|
||||
version "1.7.0"
|
||||
resolved "https://verdaccio.hq.cha0s.io/worker-farm/-/worker-farm-1.7.0.tgz#26a94c5391bbca926152002f69b84a4bf772e5a8"
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user