Skip to content

Commit 71bd25d

Browse files
ghalestriloghalestrilo
committed
🔀 merge from mobile-examples
2 parents 797bf9f + 8d0cfdc commit 71bd25d

File tree

5 files changed

+122
-43
lines changed

5 files changed

+122
-43
lines changed

‎client/components/mobile/Tab.jsx

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
import React from 'react';
2+
import styled from 'styled-components';
3+
import { Link } from 'react-router';
4+
import { prop, remSize } from '../../theme';
5+
6+
export default styled(Link)`
7+
box-sizing: border-box;
8+
9+
10+
background: transparent;
11+
/* border-top: ${remSize(4)} solid ${props => prop(props.selected ? 'colors.p5jsPink' : 'MobilePanel.default.background')}; */
12+
border-top: ${remSize(4)} solid ${props => (props.selected ? prop('TabHighlight') : 'transparent')};
13+
14+
color: ${prop('primaryTextColor')};
15+
16+
padding: ${remSize(8)} ${remSize(16)};
17+
width: 30%;
18+
`;

‎client/components/mobile/TabSwitcher.jsx

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
import React from 'react';
2+
import styled from 'styled-components';
3+
4+
import { prop, remSize } from '../../theme';
5+
6+
export default styled.div`
7+
display: flex;
8+
justify-content: space-between;
9+
10+
h3 { text-align: center; width: 100%; }
11+
border-top: 1px solid ${prop('Separator')};
12+
13+
background: ${props => prop('backgroundColor')};
14+
`;
15+

‎client/modules/App/App.jsx

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -34,9 +34,7 @@ class App extends React.Component {
3434
render() {
3535
return (
3636
<div className="app">
37-
<div style={{ display: 'none' }}>
38-
{this.state.isMounted && !window.devToolsExtension && getConfig('NODE_ENV') === 'development' && <DevTools />}
39-
</div>
37+
{false && this.state.isMounted && !window.devToolsExtension && getConfig('NODE_ENV') === 'development' && <DevTools />}
4038
{this.props.children}
4139
</div>
4240
);

‎client/modules/Mobile/MobileDashboardView.jsx

Lines changed: 63 additions & 40 deletions
Original file line numberDiff line numberDiff line change
@@ -2,27 +2,30 @@ import React from 'react';
22
import PropTypes from 'prop-types';
33
import styled from 'styled-components';
44
import { useSelector } from 'react-redux';
5-
import { withRouter, Link } from 'react-router';
5+
import { withRouter } from 'react-router';
66

77
import Screen from '../../components/mobile/MobileScreen';
88
import Header from '../../components/mobile/Header';
99
import IconButton from '../../components/mobile/IconButton';
10-
import { ExitIcon } from '../../common/icons';
10+
import { ExitIcon, MoreIcon } from '../../common/icons';
1111
import Footer from '../../components/mobile/Footer';
12-
import { prop, remSize } from '../../theme';
12+
import { remSize, prop } from '../../theme';
1313
import SketchList from '../IDE/components/SketchList';
1414
import CollectionList from '../IDE/components/CollectionList';
1515
import AssetList from '../IDE/components/AssetList';
1616
import Content from './MobileViewContent';
1717
import { SketchSearchbar, CollectionSearchbar } from '../IDE/components/Searchbar';
1818
import Button from '../../common/Button';
19+
import useAsModal from '../../components/useAsModal';
20+
import Dropdown from '../../components/Dropdown';
21+
import FooterTabSwitcher from '../../components/mobile/TabSwitcher';
22+
import FooterTab from '../../components/mobile/Tab';
1923

2024
const EXAMPLE_USERNAME = 'p5';
2125

2226
const ContentWrapper = styled(Content)`
2327
table {
2428
table-layout: fixed;
25-
/* white-space: nowrap; */
2629
}
2730
2831
td ,thead button {
@@ -31,38 +34,47 @@ const ContentWrapper = styled(Content)`
3134
text-align: left;
3235
};
3336
34-
thead th { padding-left: 0; }
35-
36-
thead th:not(:first-child), tbody td {
37-
width: ${remSize(54)};
38-
}
39-
40-
tbody th { font-weight: bold; };
4137
4238
tbody th {
43-
font-size: ${remSize(12)};
39+
font-size: ${remSize(16)};
4440
width: 100%;
45-
padding-right: ${remSize(12)}
41+
padding-right: ${remSize(12)};
42+
font-weight: bold;
43+
display: flex;
44+
grid-area: name;
4645
};
4746
48-
tbody td {
49-
text-align: center;
47+
tbody td, thead th {
48+
justify-self: stretch;
49+
align-self: flex-end;
50+
color: ${prop('primaryTextColor')}
5051
}
5152
52-
.sketch-list__sort-button { padding: 0 }
53+
tbody td:nth-child(2) { grid-column-start: 2 }
54+
tbody td:last-child { justify-self: end; text-align: end; }
55+
56+
/* .sketch-list__sort-button { padding: 0 } */
5357
tbody {
5458
height: ${remSize(48)};
5559
}
5660
57-
.sketches-table-container { padding-bottom: ${remSize(160)} }
58-
`;
61+
.sketches-table-container {
62+
padding-bottom: ${remSize(160)};
63+
background: ${prop('SketchList.background')};
64+
}
65+
.sketches-table__row {
66+
background: ${prop('SketchList.card.background')} !important; height: auto
67+
}
5968
60-
const FooterTab = styled(Link)`
61-
background: ${props => prop(props.selected ? 'backgroundColor' : 'MobilePanel.default.foreground')};
62-
color: ${props => prop(`MobilePanel.default.${props.selected ? 'foreground' : 'background'}`)};
63-
padding: ${remSize(8)} ${remSize(16)};
64-
width: 100%;
65-
display: flex;
69+
tr {
70+
align-self: start;
71+
display: grid;
72+
grid-template-columns: repeat(4,1fr);
73+
grid-template-areas: "name name name name" "none content content content";
74+
75+
border-radius: ${remSize(4)}; padding: ${remSize(8)};
76+
box-shadow: 0 0 18px 0 ${prop('shadowColor')};
77+
};
6678
`;
6779

6880
const Subheader = styled.div`
@@ -81,23 +93,17 @@ const SubheaderButton = styled(Button)`
8193
border-radius: 0px !important;
8294
`;
8395

84-
85-
const FooterTabSwitcher = styled.div`
86-
display: flex;
87-
88-
h3 { text-align: center; width: 100%; }
89-
`;
90-
9196
const Panels = {
9297
sketches: SketchList,
9398
collections: CollectionList,
9499
assets: AssetList
95100
};
96101

97-
const CreatePathname = {
98-
sketches: '/mobile',
99-
collections: '/mobile/:username/collections/create',
100-
};
102+
103+
const navOptions = username => [
104+
{ title: 'Create Sketch', href: '/mobile' },
105+
{ title: 'Create Collection', href: `/mobile/${username}/collections/create` }
106+
];
101107

102108

103109
const getPanel = (pathname) => {
@@ -106,35 +112,52 @@ const getPanel = (pathname) => {
106112
return matches && matches.length > 0 && matches[0];
107113
};
108114

109-
const getCreatePathname = (panel, username) => (CreatePathname[panel] || '#').replace(':username', username);
115+
const NavItem = styled.li`
116+
position: relative;
117+
`;
118+
110119

111120
const isOwner = (user, params) => user && params && user.username === params.username;
112121

113122
const renderPanel = (name, props) => (Component => (Component && <Component {...props} mobile />))(Panels[name]);
114123

115124
const MobileDashboard = ({ params, location }) => {
116125
const user = useSelector(state => state.user);
117-
const { username } = params;
126+
const { username: paramsUsername } = params;
118127
const { pathname } = location;
119128

120129
const Tabs = Object.keys(Panels);
121-
const isExamples = username === EXAMPLE_USERNAME;
130+
const isExamples = paramsUsername === EXAMPLE_USERNAME;
122131
const panel = getPanel(pathname);
123132

133+
134+
const [toggleNavDropdown, NavDropdown] = useAsModal(<Dropdown
135+
items={navOptions(user.username)}
136+
align="right"
137+
/>);
138+
124139
return (
125140
<Screen fullscreen key={pathname}>
126141
<Header slim inverted title={isExamples ? 'Examples' : 'My Stuff'}>
142+
<NavItem>
143+
<IconButton
144+
onClick={toggleNavDropdown}
145+
icon={MoreIcon}
146+
aria-label="Options"
147+
/>
148+
<NavDropdown />
149+
150+
</NavItem>
127151
<IconButton to="/mobile" icon={ExitIcon} aria-label="Return to ide view" />
128152
</Header>
129153

130154

131155
<ContentWrapper slimheader>
132156
<Subheader>
133-
{isOwner(user, params) && (panel !== Tabs[2]) && <SubheaderButton to={getCreatePathname(panel, username)}>new</SubheaderButton>}
134157
{panel === Tabs[0] && <SketchSearchbar />}
135158
{panel === Tabs[1] && <CollectionSearchbar />}
136159
</Subheader>
137-
{renderPanel(panel, { username, key: pathname })}
160+
{renderPanel(panel, { username: paramsUsername, key: pathname })}
138161
</ContentWrapper>
139162
<Footer>
140163
{!isExamples &&

‎client/theme.js

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -58,6 +58,7 @@ export const prop = key => (props) => {
5858
return value;
5959
};
6060

61+
6162
export default {
6263
[Theme.light]: {
6364
colors,
@@ -103,6 +104,14 @@ export default {
103104
border: grays.middleLight
104105
},
105106
Separator: grays.middleLight,
107+
108+
TabHighlight: colors.p5jsPink,
109+
SketchList: {
110+
background: grays.lighter,
111+
card: {
112+
background: grays.lighter
113+
}
114+
}
106115
},
107116
[Theme.dark]: {
108117
colors,
@@ -148,6 +157,14 @@ export default {
148157
border: grays.middleDark
149158
},
150159
Separator: grays.middleDark,
160+
161+
TabHighlight: colors.p5jsPink,
162+
SketchList: {
163+
background: grays.darker,
164+
card: {
165+
background: grays.dark
166+
}
167+
}
151168
},
152169
[Theme.contrast]: {
153170
colors,
@@ -193,5 +210,13 @@ export default {
193210
border: grays.middleDark
194211
},
195212
Separator: grays.middleDark,
213+
214+
TabHighlight: grays.darker,
215+
SketchList: {
216+
background: colors.yellow,
217+
card: {
218+
background: grays.dark
219+
}
220+
}
196221
},
197222
};

0 commit comments

Comments
 (0)