cha0s/persea-old
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor: icons

Browse Source
This commit is contained in:
cha0s 2020-06-28 11:24:20 -05:00
parent f7eeb15301
commit c68c8f1ef9
8 changed files with 69 additions and 49 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/client/index.scss
View File

@ -197,7 +197,7 @@ select {
}
}
.icon {
padding: 0.75em;
padding: 0 0.25em 0 0.5em;
}
.close {
background-color: transparent;

5
src/client/resource-from-uri.js Normal file
View File

@ -0,0 +1,5 @@
import {all} from './resources.scwp';
const resources = Object.values(all()).map((M) => M.default);
export default (uri) => resources.find((resource) => uri.match(resource.matcher));

6
src/client/resource.jsx
View File

@ -4,19 +4,17 @@ import PropTypes from 'prop-types';
import React from 'react';
import {registerHooks} from 'scwp';
import {all} from './resources.scwp';
import resourceFromUri from './resource-from-uri';
const decorate = compose(
contempo(require('./resource.raw.scss')),
);
const resources = Object.values(all()).map((M) => M.default);
const Resource = (props) => {
const {
uri,
} = props;
const resource = resources.find((r) => uri.match(r.matcher));
const resource = resourceFromUri(uri);
const {
Component = () => (
<div className="unloadable">

40
src/client/resources.jsx
View File

@ -11,6 +11,7 @@ import {
} from 'react-tabs';
import Resource from './resource';
import resourceFromUri from './resource-from-uri';
import {
closeResource,
setActiveResourceUri,
@ -30,24 +31,27 @@ const Resources = (props) => {
onSelect={(index) => dispatch(setActiveResourceUri(uris[index]))}
>
<TabList>
{uris.map((uri) => (
<Tab key={uri}>
<span className="wrapper">
<span className="icon" />
<span className="text">{uri}</span>
<button
className="close"
onClick={(event) => {
dispatch(closeResource(uri));
event.stopPropagation();
}}
type="button"
>
✕
</button>
</span>
</Tab>
))}
{uris.map((uri) => {
const resource = resourceFromUri(uri);
return (
<Tab key={uri}>
<span className="wrapper">
<span className="icon"><resource.Icon /></span>
<span className="text">{uri}</span>
<button
className="close"
onClick={(event) => {
dispatch(closeResource(uri));
event.stopPropagation();
}}
type="button"
>
✕
</button>
</span>
</Tab>
);
})}
</TabList>
{uris.map((uri) => (
<TabPanel key={uri}>

4
src/client/resources.raw.scss
View File

@ -2,3 +2,7 @@
height: 100%;
width: 100%;
}
.wrapper .icon svg {
fill: #999999;
}

46
src/client/sidebar.jsx
View File

@ -9,6 +9,7 @@ import ResourcesPacket from '~/common/packets/resources.packet';
import useSocket from './hooks/useSocket';
import FileExplorerTheme from './react-sortable-tree-theme-file-explorer';
import resourceFromUri from './resource-from-uri';
import {
setActiveResourceUri,
} from './state';
@ -29,32 +30,25 @@ const sortTree = (tree) => tree
return node;
});
const mapComponents = (tree) => tree.map((node) => ({
...node,
children: node.children ? mapComponents(node.children) : [],
rawTitle: node.title,
title: (
<span
className={classnames(
'title',
node.uri ? 'resource' : 'directory',
)}
>
{node.uri && (
<svg
height="1em"
viewBox="0 0 512 512"
width="1em"
>
<path
d="M 511.867188 247.648438 C 511.859375 247.4375 511.832031 247.230469 511.816406 247.015625 C 509.542969 181.140625 482.460938 119.558594 435.269531 73.253906 C 387.125 26.015625 323.460938 0 256 0 C 187.621094 0 123.332031 26.628906 74.980469 74.980469 C 26.628906 123.332031 0 187.621094 0 256 C 0 290.847656 28.351562 319.199219 63.199219 319.199219 C 98.050781 319.199219 126.398438 290.847656 126.398438 256 C 126.398438 157.960938 206.160156 78.199219 304.199219 78.199219 C 401.40625 78.199219 479.480469 154.28125 481.941406 251.402344 C 481.941406 251.449219 481.949219 251.496094 481.953125 251.542969 C 481.980469 253.027344 482 254.519531 482 256 C 482 380.617188 380.617188 482 256 482 C 247.714844 482 241 488.714844 241 497 C 241 505.285156 247.714844 512 256 512 C 324.378906 512 388.667969 485.371094 437.019531 437.019531 C 485.371094 388.667969 512 324.378906 512 256 C 512 253.21875 511.957031 250.410156 511.867188 247.648438 Z M 511.867188 247.648438 "
/>
</svg>
)}
<span className="text">{node.title}</span>
</span>
),
}));
const mapComponents = (tree) => tree.map((node) => {
const resource = node.uri && resourceFromUri(node.uri);
return ({
...node,
children: node.children ? mapComponents(node.children) : [],
rawTitle: node.title,
title: (
<span
className={classnames(
'title',
node.uri ? 'resource' : 'directory',
)}
>
{node.uri && <resource.Icon />}
<span className="text">{node.title}</span>
</span>
),
});
});
const unmapComponents = (tree) => tree.map((node) => ({
...node,

2
src/common/resources/entity/entity.resource.js
View File

@ -1,7 +1,9 @@
import EntityComponent from './entity';
import Icon from './icon';
export default {
keys: ['entity', 'entities'],
Icon,
matcher: /\.entity\.json$/,
Component: EntityComponent,
// eslint-disable-next-line global-require

13
src/common/resources/entity/icon.jsx Normal file
View File

@ -0,0 +1,13 @@
import React from 'react';
export default () => (
<svg
height="1em"
viewBox="0 0 512 512"
width="1em"
>
<path
d="M 511.867188 247.648438 C 511.859375 247.4375 511.832031 247.230469 511.816406 247.015625 C 509.542969 181.140625 482.460938 119.558594 435.269531 73.253906 C 387.125 26.015625 323.460938 0 256 0 C 187.621094 0 123.332031 26.628906 74.980469 74.980469 C 26.628906 123.332031 0 187.621094 0 256 C 0 290.847656 28.351562 319.199219 63.199219 319.199219 C 98.050781 319.199219 126.398438 290.847656 126.398438 256 C 126.398438 157.960938 206.160156 78.199219 304.199219 78.199219 C 401.40625 78.199219 479.480469 154.28125 481.941406 251.402344 C 481.941406 251.449219 481.949219 251.496094 481.953125 251.542969 C 481.980469 253.027344 482 254.519531 482 256 C 482 380.617188 380.617188 482 256 482 C 247.714844 482 241 488.714844 241 497 C 241 505.285156 247.714844 512 256 512 C 324.378906 512 388.667969 485.371094 437.019531 437.019531 C 485.371094 388.667969 512 324.378906 512 256 C 512 253.21875 511.957031 250.410156 511.867188 247.648438 Z M 511.867188 247.648438 "
/>
</svg>
);