From ec231bb0419bfe5ecba98f8606a072733868d5e2 Mon Sep 17 00:00:00 2001 From: cha0s Date: Fri, 2 Apr 2021 19:39:09 -0500 Subject: [PATCH] refactor: icons and actions --- .../core/src/components/project/index.scss | 2 +- .../components/project/sidebar/actions.jsx | 37 +++++++++++ .../src/components/project/sidebar/index.jsx | 39 ++++++++++- .../src/components/project/sidebar/index.scss | 61 +++++++++++++++++- .../project/sidebar/svg/collapse-all.svg | 4 ++ .../components/project/sidebar/svg/image.png | Bin 0 -> 1292 bytes .../project/sidebar/svg/joystick.png | Bin 0 -> 1208 bytes .../components/project/sidebar/svg/music.png | Bin 0 -> 1378 bytes .../project/sidebar/svg/new-file.svg | 3 + .../project/sidebar/svg/new-folder.svg | 3 + .../components/project/sidebar/svg/note.png | Bin 0 -> 832 bytes .../project/sidebar/svg/question.png | Bin 0 -> 429 bytes .../components/project/sidebar/svg/sound.png | Bin 0 -> 1855 bytes .../core/src/components/resource/index.jsx | 31 --------- .../core/src/components/resource/index.scss | 4 -- 15 files changed, 144 insertions(+), 40 deletions(-) create mode 100644 packages/core/src/components/project/sidebar/actions.jsx create mode 100644 packages/core/src/components/project/sidebar/svg/collapse-all.svg create mode 100644 packages/core/src/components/project/sidebar/svg/image.png create mode 100644 packages/core/src/components/project/sidebar/svg/joystick.png create mode 100644 packages/core/src/components/project/sidebar/svg/music.png create mode 100644 packages/core/src/components/project/sidebar/svg/new-file.svg create mode 100644 packages/core/src/components/project/sidebar/svg/new-folder.svg create mode 100644 packages/core/src/components/project/sidebar/svg/note.png create mode 100644 packages/core/src/components/project/sidebar/svg/question.png create mode 100644 packages/core/src/components/project/sidebar/svg/sound.png delete mode 100644 packages/core/src/components/resource/index.jsx delete mode 100644 packages/core/src/components/resource/index.scss diff --git a/packages/core/src/components/project/index.scss b/packages/core/src/components/project/index.scss index 851d511..10fb384 100644 --- a/packages/core/src/components/project/index.scss +++ b/packages/core/src/components/project/index.scss @@ -1,4 +1,4 @@ -$sidebar-basis: 10rem; +$sidebar-basis: 12rem; .project { display: flex; diff --git a/packages/core/src/components/project/sidebar/actions.jsx b/packages/core/src/components/project/sidebar/actions.jsx new file mode 100644 index 0000000..0c7e284 --- /dev/null +++ b/packages/core/src/components/project/sidebar/actions.jsx @@ -0,0 +1,37 @@ +import {PropTypes, React} from '@latus/react'; + +const SidebarActions = ({ + collapseAll, +}) => ( +
+
+); + +SidebarActions.defaultProps = {}; + +SidebarActions.propTypes = { + collapseAll: PropTypes.func.isRequired, +}; + +SidebarActions.displayName = 'SidebarActions'; + +export default SidebarActions; diff --git a/packages/core/src/components/project/sidebar/index.jsx b/packages/core/src/components/project/sidebar/index.jsx index a1170fb..f669735 100644 --- a/packages/core/src/components/project/sidebar/index.jsx +++ b/packages/core/src/components/project/sidebar/index.jsx @@ -6,15 +6,23 @@ import {Tree} from '@avocado/react'; import { PropTypes, React, + useLatus, useState, } from '@latus/react'; import {createNextState} from '@latus/redux'; import {useHistory, useLocation} from 'react-router-dom'; +import SidebarActions from './actions'; + const Sidebar = ({label, resourcePaths, uuid}) => { const history = useHistory(); + const latus = useLatus(); const location = useLocation(); - const [collapsed, setCollapsed] = useState(JSON.parse(window.localStorage['@persea/core/explorer'] || '{}')); + const [collapsed, __setCollapsed] = useState(JSON.parse(window.localStorage['@persea/core/explorer'] || '{}')); + const setCollapsed = (next) => { + window.localStorage['@persea/core/explorer'] = JSON.stringify(next); + __setCollapsed(next); + }; const treeFromResourcePath = (tree, uuid, [isFile, resourcePath]) => { const parts = resourcePath.split('/'); parts.shift(); @@ -38,11 +46,12 @@ const Sidebar = ({label, resourcePaths, uuid}) => { }); }; const nodesFromResourcePaths = (label, uuid, resourcePaths) => { - const tree = {label, nodes: []}; + const tree = {nodes: []}; resourcePaths .forEach((resourcePath) => treeFromResourcePath(tree, uuid, resourcePath)); return tree.nodes; }; + const path = join('/project', uuid); return (
{ /* eslint-enable no-param-reassign */ }); setCollapsed(next); - window.localStorage['@persea/core/explorer'] = JSON.stringify(next); } }} + classNames={{ + active: location.pathname === path, + collapsed: undefined === collapsed[path] ? true : collapsed[path], + }} + indent={0.5} label={label} nodes={nodesFromResourcePaths(label, uuid, resourcePaths)} + renderLabel={({label, nodes, value}) => { + const {displayName} = latus + .get('%resource-controllers') + .find(({matcher}) => value.match(matcher)) + .Component; + return ( +
+ {!nodes &&
} + {label} + {value === uuid && ( + { + event.stopPropagation(); + setCollapsed({}); + }} + /> + )} +
+ ); + }} value={uuid} />
diff --git a/packages/core/src/components/project/sidebar/index.scss b/packages/core/src/components/project/sidebar/index.scss index 9b642ac..878799e 100644 --- a/packages/core/src/components/project/sidebar/index.scss +++ b/packages/core/src/components/project/sidebar/index.scss @@ -1,4 +1,4 @@ -$sidebar-basis: 10rem; +$sidebar-basis: 12rem; .sidebar { height: 100%; @@ -7,3 +7,62 @@ $sidebar-basis: 10rem; overflow-y: auto; width: 100%; } + +.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('./svg/collapse-all.svg'); + } + &.new-file { + background-image: url('./svg/new-file.svg'); + } + &.new-folder { + background-image: url('./svg/new-folder.svg'); + } + } +} + +.sidebar > .tree > .node > .item .label > .text { + flex-grow: 1; + overflow: hidden; + text-overflow: ellipsis; +} + +.label > .icon { + background-size: cover; + margin-right: 0.125em; + width: 1em; + height: 1em; + &.AudioComponent { + background-image: url('./svg/sound.png'); + } + &.Binary { + background-image: url('./svg/question.png'); + } + &.EntityComponent { + background-image: url('./svg/joystick.png'); + } + &.ImageComponent { + background-image: url('./svg/image.png'); + } + &.SoundComponent { + background-image: url('./svg/music.png'); + } + &.TextComponent { + background-image: url('./svg/note.png'); + } +} diff --git a/packages/core/src/components/project/sidebar/svg/collapse-all.svg b/packages/core/src/components/project/sidebar/svg/collapse-all.svg new file mode 100644 index 0000000..4862c55 --- /dev/null +++ b/packages/core/src/components/project/sidebar/svg/collapse-all.svg @@ -0,0 +1,4 @@ + + + + diff --git a/packages/core/src/components/project/sidebar/svg/image.png b/packages/core/src/components/project/sidebar/svg/image.png new file mode 100644 index 0000000000000000000000000000000000000000..00c0978f63243785fb4455b06de0cc3ff1a870de GIT binary patch literal 1292 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 + + diff --git a/packages/core/src/components/project/sidebar/svg/new-folder.svg b/packages/core/src/components/project/sidebar/svg/new-folder.svg new file mode 100644 index 0000000..2a8d206 --- /dev/null +++ b/packages/core/src/components/project/sidebar/svg/new-folder.svg @@ -0,0 +1,3 @@ + + + diff --git a/packages/core/src/components/project/sidebar/svg/note.png b/packages/core/src/components/project/sidebar/svg/note.png new file mode 100644 index 0000000000000000000000000000000000000000..cee94b377df5bb76b8a82e393dbe69d87299ef06 GIT binary patch literal 832 zcmV-G1Hb%k7RCwCNSItgSK@|Sx-YG&$q!clN z8l*;|3r#d?T=@bd#>Az2_dbE~3499O5sis14I7O@3?}aUk0wAY&?Z(f^v;au%*-v& zav@whVbasv&YhX_&H4G}j4;OFAe-bbA%vWJaP5hNp4K`npePbZ5Iwtk_w`Nsn@Hb3 zAdQ~Bc>4x*Sx8=b*^Cp?xbX1lH0vb!l>+G3T2a>p;KO~=T?n&%(*maMLF>m>=T-p1 zqGJ$Nc^~_w$I6W}D(kS;a3+@92W_Cf%pj650F1(Lb)!27HwPscK7Wgp%P=uO>s#3w zfN&^l&s}#23vh&&?rhs!hXv9YDD)nH^}BF7GF<>oi5k;0?!60yaqC;bE*3Cs{y0z! zm_01OEEq-1S788%$mz&-f%3`&0kG?;-LfF@DHzBFKGn0cpp7z=1@EBr zXuSDD0T8=bASE8=0TYEd3jHI42e?pZeEEcOMS89f9XZ@93uL)~a^c^ zXA;r6E06crbT$uAS%$H*Q<$H5LYh_;s~mjs$DzC1tN?*{B(?wqXPXy zbRfwgk_y!)6})*gi|Um#o=)?g2V#pWIsovxBjY91e*8gg*`SiNP#UV!!Du!o3%Na@ zaup?6SwJtMLJ^fQgVn`#tkw*5B^WF>C^LPL%3RKp7l80C5IX=Mb%jaTUk-Rt+I^XR zPm&A=IE6YJ7X%dE_|7+@6abgPC3htX-gxJKN!BfxgT9{s6JP+8ej?oXyMPw}0000< KMNUMnLSTY;+-*<* literal 0 HcmV?d00001 diff --git a/packages/core/src/components/project/sidebar/svg/question.png b/packages/core/src/components/project/sidebar/svg/question.png new file mode 100644 index 0000000000000000000000000000000000000000..6d4b3790ed2fe8dcb8d7b89623610be7501229a8 GIT binary patch literal 429 zcmeAS@N?(olHy`uVBq!ia0y~yU<5K58CaNs)Vi3hp+HI~z$e5tIX?%;+}6f$c{aoU z-3vL>4nJa0`PlBg3pY5H=O_Q$MZT+%w_@6!Z;dPF>3978H@y}f&ow?#pKH6Z$iSk6Hp`WJn(JLZOu1E=7f z@9X(yma8yNOg;JO<(#D=Ky!eg;W)#}2OOJB(`<#EAR-KM%r3p(jmypDGHV5yAYukG z3i&m6d{{vK0s;y73%4wqAZ&&neh*ev2a^dFLQwK&5^7 zJM>JTrtV=6kcydd4XXGI|BAaXL!gQofMTsz_%v44cd$T&K3FK!-mpqN3v(BrLjCcC pw{zwngX%cUu;&8@nEhdUgFeT#M|;G$w)_SOc)I$ztaD0e0szcgYtaAz literal 0 HcmV?d00001 diff --git a/packages/core/src/components/project/sidebar/svg/sound.png b/packages/core/src/components/project/sidebar/svg/sound.png new file mode 100644 index 0000000000000000000000000000000000000000..8c2baf0439b195248a27b9a0f33163e32f1e286f GIT binary patch literal 1855 zcmV-F2f+A=P)_Fmedq37+!R!-#+~_Q@45G!^Zm~E`(B4qRTUoRkNTJEx$&>%T*d!x z48z!WY|ecOpMCAwfO%BlFJ(@TOCFML8x&73fyJ31TGT)3bqH<`^~L;;K>wQY~)g!SozfTH6Oh=YvV1ArbqC3{x) zm>wG6Hk%DB77G|nCQW#Q0Ssu3)TK;|j zn6a#Smb^}cy*-;8f@%61fy05Eaj&+M9A zh?mX(ouAo))fpXJk*259*$zm`kM4mfCCg*}*K0su4zlfZec2Eq+0SeyDoIPU|R zQXi;XLC5bI+e2fLVbF8`S!tz^6zL0jmhVc%I9HW`<;}ntRd9;}P|CvrkYyzhAvzEA z!aeVS;&0NTA$>)3a4w(zc1&ye`VIxM0DQ;J=oTt)$Ulz>lK^Nd{DL7UGfL=@dF9K@ zk3|5IcvQCcs12&*JW4*%kx9dFftx%VCaoRViUmaA!Xp3-G6Gr-Dzc)<6dAhQUDS!zcjc zK4suQbV5G}?q;}nxdDMIZGb=v;M!m+rf8a&LsVIw#<&-~KW~^sqQNlv)Bbp(7;)3g zRa(r2b(y2sYQG|ZqXF;(?QGgo)PX_Y_{$y!g-0!z34Ji&`TmfYmBiXeA|~-qsNUSU;vzFp*MG&Sv7I1b{bcUd4!a zr^F8P_!PB+L8Z!fl$|46I_(qZVm6%dTyip4Z`weVJol7b5(Qd1CV7yeDIJ%S>}y)I zXEi3A9949bONI0Eh(bE5f3b4?+=u!c4*@_Nqkc_sLz7;i6wN3|Z^faVYnpH0JZ-nz zR}UXC0t86}m)m`hBkB*KhVe4}#&s>C_CIn&V67eKBuq+1^s-Yl4esa}rpHQ{Ck3PI@Ui?!D zI%RL{3trImNugmFOb(&FoUEhtTN*BUvE?2qxLx_FFQ&ysVu^OTTv{oHwi_~xMrb5d zViR%z8Hz;ZDLA%~gXxESsJ7g%Z|1pp{$zN96Ra5aB- z?Q-o!eRFaE53!_dIeo-?=#zY1`OVP2@L}%-vTicza_!mUnEY-xH@j1NB_sliy#gsr z)m2ppz!3_dB|oXo8=`Ja$K6e7d%9w>@D}<1v*O@4jaM$66a-<*$WfypJS+@T2~Daa z)5bdAe|a?vG%6H@>H002ovPDHLkV1gQxf7k#3 literal 0 HcmV?d00001 diff --git a/packages/core/src/components/resource/index.jsx b/packages/core/src/components/resource/index.jsx deleted file mode 100644 index 0a5b0b2..0000000 --- a/packages/core/src/components/resource/index.jsx +++ /dev/null @@ -1,31 +0,0 @@ -import './index.scss'; - -import { - PropTypes, - React, - useLatus, -} from '@latus/react'; -import {useSelector} from '@latus/redux'; -import {resourceSelector, UriContext} from '@persea/core'; - -const Resource = ({uri, uuid}) => { - const latus = useLatus(); - const resource = useSelector((state) => resourceSelector(state, `${uuid}${uri}`)); - const {Component} = latus.get('%resource-controllers')(uri); - return ( -
- - - -
- ); -}; - -Resource.displayName = 'Resource'; - -Resource.propTypes = { - uri: PropTypes.string.isRequired, - uuid: PropTypes.string.isRequired, -}; - -export default Resource; diff --git a/packages/core/src/components/resource/index.scss b/packages/core/src/components/resource/index.scss deleted file mode 100644 index 7c2b8d4..0000000 --- a/packages/core/src/components/resource/index.scss +++ /dev/null @@ -1,4 +0,0 @@ -.resource { - width: 100%; - height: 100%; -}