filecoin-project/slate
1
1
Fork 0
mirror of https://github.com/filecoin-project/slate.git synced 2024-12-23 00:51:32 +03:00
Code Issues Packages Projects Releases Wiki Activity

icons: restores sub navigation for slates on navigation

Browse Source
This commit is contained in:
@wwwjim 2020-08-09 18:22:52 -07:00
parent ee45da8588
commit 2132af84ff
3 changed files with 75 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
common/navigation-data.js
View File

@ -46,7 +46,6 @@ const constructSlatesTreeForNavigation = (slates) => {
name: s.slatename,
pageTitle: `Viewing ${s.slatename}`,
decorator: "SLATE",
ignore: true,
};
});
};
@ -71,9 +70,8 @@ export const generate = ({ library = [], slates = [] }) => [
name: "Slates",
pageTitle: "Slates",
decorator: "SLATES",
children: null,
children: constructSlatesTreeForNavigation(slates),
},
...constructSlatesTreeForNavigation(slates),
constructFilesTreeForNavigation(library),
{
id: 4,

23
common/svg.js
View File

@ -1,3 +1,26 @@
export const Layers = (props) => {
return (
<svg
viewBox="0 0 24 24"
xmlns="http://www.w3.org/2000/svg"
height={props.height}
style={props.style}
>
<g
fill="none"
stroke="currentColor"
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth="1"
>
<path d="m22.917 6.2-10.209-5.278.00000004.00000002c-.444136-.229361-.971863-.229361-1.416-.0000001l-10.209 5.278-.00000007.00000003c-.3021.156451-.420172.528179-.263721.830279.058544.113046.150675.205177.263721.263721l10.209 5.281h.00000001c.444136.229361.971863.229361 1.416.00000005l10.209-5.275.00000002-.00000001c.3021-.156451.420172-.528179.263721-.830279-.058544-.113046-.150675-.205177-.263721-.263721z" />
<path d="m5.1 9.375-4.017 2.078-.00000007.00000003c-.3021.156451-.420172.528179-.263721.830279.058544.113046.150675.205177.263721.263721l10.209 5.281h.00000001c.444136.229361.971863.229361 1.416.00000005l10.209-5.281.00000002-.00000001c.3021-.156451.420172-.528179.263721-.830279-.058544-.113046-.150675-.205177-.263721-.263721l-4.017-2.078" />
<path d="m5.1 14.625-4.017 2.075-.00000007.00000003c-.3021.156451-.420172.528179-.263721.830279.058544.113046.150675.205177.263721.263721l10.209 5.281h.00000001c.444136.229361.971863.229361 1.416.00000005l10.209-5.275.00000002-.00000001c.3021-.156451.420172-.528179.263721-.830279-.058544-.113046-.150675-.205177-.263721-.263721l-4.017-2.081" />
</g>
</svg>
);
};
export const SettingsDeveloper = (props) => {
return (
<svg

63
components/core/ApplicationNavigation.js
View File

@ -23,7 +23,7 @@ const IconMap = {
LOGS: <SVG.Logs height="20px" />,
MINERS: <SVG.Miners height="20px" />,
STORAGE_MARKET: <SVG.StorageMarket height="20px" />,
SLATES: <SVG.Slates height="20px" />,
SLATES: <SVG.Layers height="20px" />,
SLATE: <SVG.Slates height="20px" />,
LOCAL_DATA: <SVG.HardDrive height="20px" />,
PROFILE_PAGE: <SVG.ProfileUser height="20px" />,
@ -152,17 +152,34 @@ const STYLES_ICON_ELEMENT = css`
}
`;
const Item = ({ data, id, activeIds, level, children, showActive, decorator, onToggleShow, onNavigateTo }) => {
const Item = ({
data,
id,
activeIds,
level,
children,
showActive,
decorator,
onToggleShow,
onNavigateTo,
}) => {
return (
<span css={STYLES_NAVIGATION_ITEM} style={{ padding: `0 0 0 ${level * 16}px` }}>
<span
css={STYLES_NAVIGATION_ITEM}
style={{ padding: `0 0 0 ${level * 16}px` }}
>
<span css={STYLES_EXPANDER} onClick={onToggleShow ? onToggleShow : null}>
<span
css={STYLES_ICON_ELEMENT}
style={{
color: activeIds[id] ? Constants.system.brand : null,
}}>
}}
>
{onToggleShow ? (
<SVG.ExpandArrow height="8px" style={showActive ? { transform: `rotate(90deg)` } : null} />
<SVG.ExpandArrow
height="8px"
style={showActive ? { transform: `rotate(90deg)` } : null}
/>
) : null}
</span>
</span>
@ -171,7 +188,8 @@ const Item = ({ data, id, activeIds, level, children, showActive, decorator, onT
css={STYLES_ICON_ELEMENT}
style={{
color: activeIds[id] ? Constants.system.brand : null,
}}>
}}
>
{IconMap[decorator]}
</span>
</span>
@ -180,7 +198,8 @@ const Item = ({ data, id, activeIds, level, children, showActive, decorator, onT
onClick={() => onNavigateTo({ id }, data)}
style={{
color: activeIds[id] ? Constants.system.brand : null,
}}>
}}
>
{children}
</span>
</span>
@ -197,7 +216,17 @@ class NodeReference extends React.Component {
};
render() {
const { id, activeId, activeIds, level, children, treeChildren, decorator, onNavigateTo, data } = this.props;
const {
id,
activeId,
activeIds,
level,
children,
treeChildren,
decorator,
onNavigateTo,
data,
} = this.props;
const { showTreeChildren } = this.state;
let showActive = showTreeChildren || activeIds[id];
@ -215,7 +244,10 @@ class NodeReference extends React.Component {
treeChildren={treeChildren}
onNavigateTo={onNavigateTo}
decorator={decorator}
onToggleShow={treeChildren && treeChildren.length ? this._handleToggleShow : null}>
onToggleShow={
treeChildren && treeChildren.length ? this._handleToggleShow : null
}
>
{children}
</Item>
@ -239,7 +271,8 @@ class NodeReference extends React.Component {
onNavigateTo={onNavigateTo}
level={level + 1}
treeChildren={child.children}
decorator={child.decorator}>
decorator={child.decorator}
>
{child.name}
</NodeReference>
);
@ -275,7 +308,12 @@ export default class ApplicationNavigation extends React.Component {
}
/>
<a css={STYLES_PROFILE} style={{ marginLeft: 16 }} href={`/${this.props.viewer.username}`} target="_blank">
<a
css={STYLES_PROFILE}
style={{ marginLeft: 16 }}
href={`/${this.props.viewer.username}`}
target="_blank"
>
<span
css={STYLES_PROFILE_IMAGE}
style={{
@ -304,7 +342,8 @@ export default class ApplicationNavigation extends React.Component {
onNavigateTo={this.props.onNavigateTo}
level={0}
treeChildren={each.children}
decorator={each.decorator}>
decorator={each.decorator}
>
{each.name}
</NodeReference>
);