Skip to content

Commit 08bc39c

Browse files
floatingfloating
authored
block out workspace ui and interactions, add examples (#1666)
* block out workspace ui and interactions, add examples
1 parent 36a3b77 commit 08bc39c

File tree

28 files changed

+1041
-575
lines changed

28 files changed

+1041
-575
lines changed

‎app/tray/index.dev.html‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,6 @@
1818
<link rel="stylesheet" href="./index.styl" type="text/css" />
1919
</head>
2020
<body>
21-
<div class="frameOverlay"></div>
2221
<div id="tray"></div>
2322
<script type="module" src="./index.js" nonce="977d893a-29fb-461f-a93b-b64ec585808d"></script>
2423
</body>

‎app/tray/index.html‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,6 @@
1919
<link rel="stylesheet" href="./index.styl" type="text/css" />
2020
</head>
2121
<body>
22-
<div class="frameOverlay"></div>
2322
<div id="tray"></div>
2423
<script type="module" src="./index.js" nonce="13b31a98-7c25-430d-a8b2-e3dc32dd0e83"></script>
2524
</body>

‎app/workspace/Ribbon/Account/index.js‎

Lines changed: 0 additions & 87 deletions
This file was deleted.

‎app/workspace/Spaces/Command/Dock/index.js‎

Lines changed: 0 additions & 89 deletions
This file was deleted.

‎app/workspace/Spaces/Command/index.js‎

Lines changed: 46 additions & 48 deletions
Original file line numberDiff line numberDiff line change
@@ -10,25 +10,7 @@ const Container = styled.div`
1010
display: flex;
1111
flex-direction: row;
1212
margin: auto auto;
13-
width: 900px;
14-
padding-left: 64px;
15-
`
16-
17-
const MainButton = styled.div`
18-
height: 64px;
19-
width: 348px;
20-
border-radius: 16px;
21-
background: var(--ghostAZ);
22-
cursor: pointer;
23-
/* background: linear-gradient(170deg, #211d23, #1c181e);
24-
box-shadow: 6px 6px 12px #1a171c, -6px -6px 12px #241f26; */
25-
/* box-shadow: 20px 20px 60px #1e1a21, -20px -20px 60px #28242d; */
26-
/* box-shadow: 4px 4px 6px var(--ghostA), -4px -4px 6px var(--ghostC); */
27-
/* box-shadow: -6px 6px 12px var(--ghostA), 5px -5px 12px #ffffff, inset -6px 6px 12px var(--ghostC),
28-
inset -5px -5px 14px rgba(255, 255, 255, 0.15); */
29-
&:hover {
30-
background: var(--ghostA);
31-
}
13+
min-width: 900px;
3214
`
3315

3416
class Settings extends React.Component {
@@ -113,33 +95,28 @@ class Settings extends React.Component {
11395
}
11496

11597
const HomeCenter = styled.div`
116-
height: 400px;
11798
width: 65%;
118-
min-height: 100%;
11999
border-radius: 16px;
120100
`
121101
const HomeRight = styled.div`
122102
width: 35%;
123-
min-height: 550px;
124103
border-radius: 16px;
125-
background: var(--ghostA);
104+
border: 2px solid var(--ghostX);
126105
margin-left: 16px;
127-
display: flex;
128-
justify-content: center;
129-
align-items: center;
130106
`
107+
131108
const CommandBar = styled.div`
132109
height: 64px;
133110
width: 100%;
134111
border-radius: 16px;
135-
background: var(--ghostA);
112+
background: var(--ghostAZ);
136113
margin-bottom: 16px;
137114
`
138115
const Portfolio = styled.div`
139-
height: 200px;
116+
height: 300px;
140117
width: 100%;
141118
border-radius: 16px;
142-
background: var(--ghostA);
119+
border: 2px solid var(--ghostX);
143120
margin-bottom: 16px;
144121
display: flex;
145122
justify-content: center;
@@ -150,32 +127,53 @@ const AssetList = styled.div`
150127
height: 200px;
151128
width: 100%;
152129
border-radius: 16px;
153-
background: var(--ghostA);
130+
border: 2px solid var(--ghostX);
154131
margin-bottom: 16px;
155132
display: flex;
156133
justify-content: center;
157134
align-items: center;
158135
`
159136

137+
const ActivityItem = styled.div`
138+
height: 32px;
139+
width: 100%;
140+
border-bottom: 1px solid var(--ghostX);
141+
display: flex;
142+
justify-content: center;
143+
align-items: center;
144+
font-size: 12px;
145+
`
146+
160147
const Home = ({ data }) => (
161-
<Container>
162-
{data.station === 'command' ? (
163-
<CommandBar />
164-
) : data.station === 'dashboard' ? (
165-
<>
166-
<HomeCenter>
167-
<Portfolio>Value</Portfolio>
168-
<AssetList>Assets</AssetList>
169-
<AssetList>Inventory</AssetList>
170-
</HomeCenter>
171-
<HomeRight>
172-
<div>{'Account activity'}</div>
173-
</HomeRight>
174-
</>
175-
) : (
176-
<pre>{JSON.stringify(data, null, 4)}</pre>
177-
)}
178-
</Container>
148+
<>
149+
<Container>
150+
{data.station === 'command' ? (
151+
<CommandBar />
152+
) : data.station === 'dashboard' ? (
153+
<>
154+
<HomeCenter>
155+
<Portfolio>Value</Portfolio>
156+
<AssetList>Assets</AssetList>
157+
<AssetList>Inventory</AssetList>
158+
</HomeCenter>
159+
<HomeRight>
160+
<ActivityItem>{'Account activity'}</ActivityItem>
161+
<ActivityItem>{'Account activity'}</ActivityItem>
162+
<ActivityItem>{'Account activity'}</ActivityItem>
163+
<ActivityItem>{'Account activity'}</ActivityItem>
164+
<ActivityItem>{'Account activity'}</ActivityItem>
165+
<ActivityItem>{'Account activity'}</ActivityItem>
166+
<ActivityItem>{'Account activity'}</ActivityItem>
167+
<ActivityItem>{'Account activity'}</ActivityItem>
168+
<ActivityItem>{'Account activity'}</ActivityItem>
169+
<ActivityItem>{'Account activity'}</ActivityItem>
170+
</HomeRight>
171+
</>
172+
) : (
173+
<pre>{JSON.stringify(data, null, 4)}</pre>
174+
)}
175+
</Container>
176+
</>
179177
)
180178

181179
export default Home

‎app/workspace/Spaces/Views/index.js‎

Lines changed: 8 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -43,17 +43,14 @@ const Error = ({ isMainnetConnected }) => {
4343
}
4444

4545
const ViewWrap = styled.div`
46-
position: absolute;
47-
top: 80px;
48-
left: 8px;
49-
right: 8px;
50-
bottom: 8px;
46+
position: fixed;
47+
top: 0px;
48+
left: 4px;
49+
right: 4px;
50+
bottom: 0px;
5151
z-index: 99999999;
52-
/* background: linear-gradient(135deg, var(--ghostA), var(--ghostAZ)); */
53-
border: 1px solid linear-gradient(135deg, red, var(--ghostAZ));
54-
background: var(--ghostAZ);
55-
border-radius: 8px;
56-
box-shadow: 0px 0px 16px var(--ghostY);
52+
background: var(--ghostB);
53+
box-shadow: 0px 0px 8px var(--ghostX), 0px 0px 0px 50px var(--ghostZ);
5754
`
5855

5956
const App = ({ id }) => {
@@ -91,7 +88,7 @@ const App = ({ id }) => {
9188

9289
return (
9390
<>
94-
{/* <ViewWrap style={{ background: 'var(--ghostB)' }} /> */}
91+
<ViewWrap />
9592
{/* <div className='mainTop' />
9693
<div className='mainDappLoading'>
9794
{shouldDisplayError ? (

0 commit comments

Comments
 (0)