mirror of
https://github.com/filecoin-project/slate.git
synced 2024-12-23 09:01:56 +03:00
icons: restores sub navigation for slates on navigation
This commit is contained in:
parent
ee45da8588
commit
2132af84ff
@ -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,
|
||||
|
@ -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
|
||||
|
@ -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>
|
||||
);
|
||||
|
Loading…
Reference in New Issue
Block a user