mirror of
https://github.com/filecoin-project/slate.git
synced 2024-12-22 16:41:38 +03:00
navigation: adds new scenes and new icons
This commit is contained in:
@wwwjim
parent
ddf193319b
commit
bf3bcd75e7
@ -3,6 +3,7 @@ const constructFilesTreeForNavigation = (library) => {
|
||||
for (let j = 0; j < library[i].children.length; j++) {
|
||||
let e = library[i].children[j];
|
||||
if (e.decorator === "FILE") {
|
||||
library[i].children[j].pageTitle = "Viewing file";
|
||||
library[i].children[j].ignore = true;
|
||||
}
|
||||
}
|
||||
@ -15,17 +16,24 @@ export const generate = (library) => [
|
||||
{
|
||||
id: 1,
|
||||
name: "Home",
|
||||
pageTitle: "home",
|
||||
pageTitle: "Welcome back!",
|
||||
decorator: "HOME",
|
||||
children: null,
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
name: "Wallet",
|
||||
pageTitle: "your wallet and addresses",
|
||||
pageTitle: "Your wallet and addresses",
|
||||
decorator: "WALLET",
|
||||
},
|
||||
...constructFilesTreeForNavigation(library),
|
||||
{
|
||||
id: 3,
|
||||
name: "Slates",
|
||||
pageTitle: "Your slates",
|
||||
decorator: "SLATES",
|
||||
children: [],
|
||||
},
|
||||
{
|
||||
id: 13,
|
||||
name: "Edit account",
|
||||
@ -36,8 +44,8 @@ export const generate = (library) => [
|
||||
},
|
||||
{
|
||||
id: 14,
|
||||
name: "Settings",
|
||||
pageTitle: "your settings",
|
||||
name: "Filecoin Settings",
|
||||
pageTitle: "Your hot and cold deal settings.",
|
||||
decorator: "SETTINGS",
|
||||
children: null,
|
||||
ignore: true,
|
||||
@ -50,4 +58,12 @@ export const generate = (library) => [
|
||||
children: null,
|
||||
ignore: true,
|
||||
},
|
||||
{
|
||||
id: 16,
|
||||
name: "API Key & Tokens",
|
||||
pageTitle: "you",
|
||||
decorator: "SETTINGS_DEVELOPER",
|
||||
children: null,
|
||||
ignore: true,
|
||||
},
|
||||
];
|
||||
|
||||
@ -1,3 +1,24 @@
|
||||
export const Slates = (props) => (
|
||||
<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"
|
||||
>
|
||||
<path d="m17.42 17.27-2.787-8.02-3.42 6-2.138-3-2.476 5.048" />
|
||||
<path d="m10.7071 8.29289c.390524.390524.390524 1.02369 0 1.41421-.390524.390524-1.02369.390524-1.41421 0-.390524-.390524-.390524-1.02369 0-1.41421.390524-.390524 1.02369-.390524 1.41421 0" />
|
||||
<path d="m1.5 6.5h-.00000004c-.552285-.00000002-1-.447715-1-1v-1 .00000015c-.00000008-.552285.447715-1 1-1h2v-2 .00000015c-.00000008-.552285.447715-1 1-1h1-.00000004c.552285-.00000002 1 .447715 1 1v2h13-.00000004c.552285-.00000002 1 .447715 1 1v13h2-.00000004c.552285-.00000002 1 .447715 1 1v1c0 .552285-.447715 1-1 1h-2v2c0 .552285-.447715 1-1 1h-1-.00000004c-.552285-.00000002-1-.447715-1-1v-2h-13-.00000004c-.552285-.00000002-1-.447715-1-1v-13z" />
|
||||
<path d="m7 17.5c-.27614 0-.5-.22386-.5-.5v-10c0-.27614.22386-.5.5-.5h10c.27614 0 .5.22386.5.5v10c0 .27614-.22386.5-.5.5z" />
|
||||
</g>
|
||||
</svg>
|
||||
);
|
||||
|
||||
export const ExpandBox = (props) => (
|
||||
<svg
|
||||
viewBox="0 0 24 24"
|
||||
|
||||
@ -51,21 +51,12 @@ const STYLES_ICON_ELEMENT = css`
|
||||
const STYLES_ICON_ELEMENT_CUSTOM = css`
|
||||
height: 48px;
|
||||
width: 48px;
|
||||
border-radius: 48px;
|
||||
background-image: url("/public/static/cube_f7f7f7.jpg");
|
||||
background-size: cover;
|
||||
background-position: 50% 50%;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: ${Constants.system.white};
|
||||
background-color: ${Constants.system.black};
|
||||
user-select: none;
|
||||
cursor: pointer;
|
||||
|
||||
svg {
|
||||
transform: rotate(0deg);
|
||||
transition: 200ms ease transform;
|
||||
}
|
||||
`;
|
||||
|
||||
const STYLES_APPLICATION_HEADER = css`
|
||||
@ -177,7 +168,8 @@ export default class ApplicationHeader extends React.Component {
|
||||
onAction={this.props.onAction}
|
||||
navigation={[
|
||||
{ text: "Edit account", value: 13 },
|
||||
{ text: "Settings", value: 14 },
|
||||
{ text: "Filecoin settings", value: 14 },
|
||||
{ text: "API Key & Tokens", value: 16 },
|
||||
]}
|
||||
/>
|
||||
}
|
||||
|
||||
@ -22,6 +22,7 @@ const IconMap = {
|
||||
LOGS: <SVG.Logs height="20px" />,
|
||||
MINERS: <SVG.Miners height="20px" />,
|
||||
STORAGE_MARKET: <SVG.StorageMarket height="20px" />,
|
||||
SLATES: <SVG.Slates height="20px" />,
|
||||
};
|
||||
|
||||
const STYLES_NAVIGATION = css`
|
||||
|
||||
@ -4,6 +4,7 @@ import * as System from "../dist";
|
||||
export default class TestPage extends React.Component {
|
||||
render() {
|
||||
console.log(System.Constants);
|
||||
|
||||
return (
|
||||
<div>
|
||||
<System.H1>Component Library Test</System.H1>
|
||||
|
||||
@ -18,6 +18,8 @@ import SceneStats from "~/scenes/SceneStats";
|
||||
import SceneStatus from "~/scenes/SceneStatus";
|
||||
import SceneStorageMarket from "~/scenes/SceneStorageMarket";
|
||||
import SceneWallet from "~/scenes/SceneWallet";
|
||||
import SceneSlates from "~/scenes/SceneSlates";
|
||||
import SceneSettingsDeveloper from "~/scenes/SceneSettingsDeveloper";
|
||||
|
||||
import SidebarCreateWalletAddress from "~/components/sidebars/SidebarCreateWalletAddress";
|
||||
import SidebarDeleteWalletAddress from "~/components/sidebars/SidebarDeleteWalletAddress";
|
||||
@ -321,7 +323,9 @@ export default class IndexPage extends React.Component {
|
||||
PEERS: <ScenePeers />,
|
||||
LOGS: <SceneLogs />,
|
||||
SETTINGS: <SceneSettings />,
|
||||
SETTINGS_DEVELOPER: <SceneSettingsDeveloper />,
|
||||
EDIT_ACCOUNT: <SceneEditAccount />,
|
||||
SLATES: <SceneSlates />,
|
||||
};
|
||||
|
||||
render() {
|
||||
|
||||
@ -32,6 +32,7 @@ const ICONS = [
|
||||
<SVG.FileImage height={DEFAULT_SYSTEM_ICON_SIZE} />,
|
||||
<SVG.Plus height={DEFAULT_SYSTEM_ICON_SIZE} />,
|
||||
<SVG.CheckBox height={DEFAULT_SYSTEM_ICON_SIZE} />,
|
||||
<OldSVG.Slates height={DEFAULT_SYSTEM_ICON_SIZE} />,
|
||||
];
|
||||
|
||||
const STYLES_ICON = css`
|
||||
@ -94,6 +95,7 @@ import { OldSVG } from 'slate-react-system';`}
|
||||
<OldSVG.Logs height='88px' />
|
||||
<OldSVG.Miners height='88px' />
|
||||
<OldSVG.StorageMarket height='88px' />
|
||||
<OldSVG.Slates height='88px' />
|
||||
<SVG.BandwidthUp height='88px' />
|
||||
<SVG.BandwidthDown height='88px' />
|
||||
<SVG.Information height='88px' />
|
||||
|
||||
@ -86,7 +86,7 @@ export default class SceneSettings extends React.Component {
|
||||
|
||||
return (
|
||||
<ScenePage>
|
||||
<System.H1>Settings</System.H1>
|
||||
<System.H1>Filecoin Settings</System.H1>
|
||||
|
||||
<System.H2 style={{ marginTop: 48 }}>Storage defaults</System.H2>
|
||||
|
||||
|
||||
13
scenes/SceneSettingsDeveloper.js
Normal file
13
scenes/SceneSettingsDeveloper.js
Normal file
@ -0,0 +1,13 @@
|
||||
import * as React from "react";
|
||||
import * as Actions from "~/common/actions";
|
||||
import * as System from "~/components/system";
|
||||
|
||||
import { css } from "@emotion/react";
|
||||
|
||||
import ScenePage from "~/components/core/ScenePage";
|
||||
|
||||
export default class SceneSettingsDeveloper extends React.Component {
|
||||
render() {
|
||||
return <ScenePage>Developer Settings</ScenePage>;
|
||||
}
|
||||
}
|
||||
12
scenes/SceneSlates.js
Normal file
12
scenes/SceneSlates.js
Normal file
@ -0,0 +1,12 @@
|
||||
import * as React from "react";
|
||||
import * as System from "~/components/system";
|
||||
|
||||
import { css } from "@emotion/react";
|
||||
|
||||
import ScenePage from "~/components/core/ScenePage";
|
||||
|
||||
export default class SceneSlates extends React.Component {
|
||||
render() {
|
||||
return <ScenePage>Slates Prototype</ScenePage>;
|
||||
}
|
||||
}
|
||||
Loading…
Reference in New Issue
Block a user