Skip to content

Commit 27168f0

Browse files
ghalestriloghalestrilo
committed
🚧 update nav mobile routes when logged in
2 parents 19ffdd4 + f844023 commit 27168f0

File tree

12 files changed

+80
-43
lines changed

12 files changed

+80
-43
lines changed

‎client/components/Dropdown.jsx‎

Lines changed: 21 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -36,9 +36,7 @@ const DropdownWrapper = styled.ul`
3636
background-color: ${prop('Button.hover.background')};
3737
color: ${prop('Button.hover.foreground')};
3838
39-
& button, & a {
40-
color: ${prop('Button.hover.foreground')};
41-
}
39+
* { color: ${prop('Button.hover.foreground')}; }
4240
}
4341
4442
li {
@@ -48,12 +46,21 @@ const DropdownWrapper = styled.ul`
4846
align-items: center;
4947
5048
& button,
49+
& button span,
5150
& a {
51+
padding: ${remSize(8)} ${remSize(16)};
52+
}
53+
54+
* {
55+
text-align: left;
56+
justify-content: left;
57+
5258
color: ${prop('primaryTextColor')};
5359
width: 100%;
54-
text-align: left;
55-
padding: ${remSize(8)} ${remSize(16)};
60+
justify-content: flex-start;
5661
}
62+
63+
& button span { padding: 0px }
5764
}
5865
`;
5966

@@ -63,18 +70,22 @@ const DropdownWrapper = styled.ul`
6370
const Dropdown = ({ items, align }) => (
6471
<DropdownWrapper align={align} >
6572
{/* className="nav__items-left" */}
66-
{items && items.map(({ title, icon, href }) => (
73+
{items && items.map(({
74+
title, icon, href, action
75+
}) => (
6776
<li key={`nav-${title && title.toLowerCase()}`}>
68-
<Link to={href}>
69-
{/* {MaybeIcon(icon, `Navigate to ${title}`)} */}
70-
{title}
71-
</Link>
77+
{/* {MaybeIcon(icon, `Navigate to ${title}`)} */}
78+
{href
79+
? <IconButton to={href}>{title}</IconButton>
80+
: <IconButton onClick={() => action()}>{title}</IconButton>}
81+
7282
</li>
7383
))
7484
}
7585
</DropdownWrapper>
7686
);
7787

88+
7889
Dropdown.propTypes = {
7990
align: PropTypes.oneOf(['left', 'right']),
8091
items: PropTypes.arrayOf(PropTypes.shape({

‎client/components/mobile/IconButton.jsx‎

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -17,15 +17,19 @@ const IconButton = (props) => {
1717
const Icon = icon;
1818

1919
return (<ButtonWrapper
20-
iconBefore={<Icon />}
20+
iconBefore={icon && <Icon />}
2121
kind={Button.kinds.inline}
2222
focusable="false"
2323
{...otherProps}
2424
/>);
2525
};
2626

2727
IconButton.propTypes = {
28-
icon: PropTypes.func.isRequired
28+
icon: PropTypes.func
29+
};
30+
31+
IconButton.defaultProps = {
32+
icon: null
2933
};
3034

3135
export default IconButton;

‎client/modules/IDE/actions/editorAccessibility.js‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -14,3 +14,9 @@ export function clearLintMessage() {
1414
type: ActionTypes.CLEAR_LINT_MESSAGE
1515
};
1616
}
17+
18+
export function toggleForceDesktop() {
19+
return {
20+
type: ActionTypes.TOGGLE_FORCE_DESKTOP
21+
};
22+
}

‎client/modules/IDE/components/AddToCollectionList.jsx‎

Lines changed: 9 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@ import Loader from '../../App/components/loader';
1414
import QuickAddList from './QuickAddList';
1515

1616
const projectInCollection = (project, collection) =>
17-
collection.items.find(item => item.project.id === project.id) != null;
17+
collection.items.find(item => item.projectId === project.id) != null;
1818

1919
class CollectionList extends React.Component {
2020
constructor(props) {
@@ -81,12 +81,14 @@ class CollectionList extends React.Component {
8181
}
8282

8383
return (
84-
<div className="quick-add-wrapper">
85-
<Helmet>
86-
<title>{this.getTitle()}</title>
87-
</Helmet>
88-
89-
{content}
84+
<div className="collection-add-sketch">
85+
<div className="quick-add-wrapper">
86+
<Helmet>
87+
<title>{this.getTitle()}</title>
88+
</Helmet>
89+
90+
{content}
91+
</div>
9092
</div>
9193
);
9294
}

‎client/modules/IDE/components/AddToCollectionSketchList.jsx‎

Lines changed: 7 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -72,11 +72,13 @@ class SketchList extends React.Component {
7272
}
7373

7474
return (
75-
<div className="quick-add-wrapper">
76-
<Helmet>
77-
<title>{this.getSketchesTitle()}</title>
78-
</Helmet>
79-
{content}
75+
<div className="collection-add-sketch">
76+
<div className="quick-add-wrapper">
77+
<Helmet>
78+
<title>{this.getSketchesTitle()}</title>
79+
</Helmet>
80+
{content}
81+
</div>
8082
</div>
8183
);
8284
}

‎client/modules/IDE/components/CollectionList/CollectionList.jsx‎

Lines changed: 4 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -170,12 +170,10 @@ class CollectionList extends React.Component {
170170
closeOverlay={this.hideAddSketches}
171171
isFixedHeight
172172
>
173-
<div className="collection-add-sketch">
174-
<AddToCollectionSketchList
175-
username={this.props.username}
176-
collection={find(this.props.collections, { id: this.state.addingSketchesToCollectionId })}
177-
/>
178-
</div>
173+
<AddToCollectionSketchList
174+
username={this.props.username}
175+
collection={find(this.props.collections, { id: this.state.addingSketchesToCollectionId })}
176+
/>
179177
</Overlay>
180178
)
181179
}

‎client/modules/IDE/pages/MobileIDEView.jsx‎

Lines changed: 9 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,7 @@ import { getHTMLFile } from '../reducers/files';
2020

2121
// Local Imports
2222
import Editor from '../components/Editor';
23-
import { PlayIcon, MoreIcon, CircleFolderIcon } from '../../../common/icons';
23+
import { PlayIcon, MoreIcon } from '../../../common/icons';
2424

2525
import IconButton from '../../../components/mobile/IconButton';
2626
import Header from '../../../components/mobile/Header';
@@ -63,26 +63,28 @@ const NavItem = styled.li`
6363
position: relative;
6464
`;
6565

66-
const getNavOptions = (username = undefined, toggleForceDesktop = () => {}) =>
66+
const getNavOptions = (username = undefined, logoutUser = () => {}, toggleForceDesktop = () => {}) =>
6767
(username
6868
? [
6969
{ icon: PreferencesIcon, title: 'Preferences', href: '/preferences', },
7070
{ icon: PreferencesIcon, title: 'My Stuff', href: `/${username}/sketches` },
7171
{ icon: PreferencesIcon, title: 'Examples', href: '/p5/sketches' },
7272
{ icon: PreferencesIcon, title: 'Original Editor', action: toggleForceDesktop, },
73+
{ icon: PreferencesIcon, title: 'Logout', action: logoutUser, },
7374
]
7475
: [
7576
{ icon: PreferencesIcon, title: 'Preferences', href: '/preferences', },
7677
{ icon: PreferencesIcon, title: 'Examples', href: '/p5/sketches' },
77-
{ icon: PreferencesIcon, title: 'Original Editor', href: '/', },
78+
{ icon: PreferencesIcon, title: 'Original Editor', action: toggleForceDesktop, },
79+
{ icon: PreferencesIcon, title: 'Login', href: '/login', },
7880
]
7981
);
8082

8183
const MobileIDEView = (props) => {
8284
const {
8385
preferences, ide, editorAccessibility, project, updateLintMessage, clearLintMessage,
8486
selectedFile, updateFileContent, files, user, params,
85-
closeEditorOptions, showEditorOptions,
87+
closeEditorOptions, showEditorOptions, logoutUser,
8688
startRefreshSketch, stopSketch, expandSidebar, collapseSidebar, clearConsole, console,
8789
showRuntimeErrorWarning, hideRuntimeErrorWarning, startSketch, getProject, clearPersistedState, setUnsavedChanges,
8890
toggleForceDesktop
@@ -111,7 +113,7 @@ const MobileIDEView = (props) => {
111113

112114
// Screen Modals
113115
const [toggleNavDropdown, NavDropDown] = useAsModal(<Dropdown
114-
items={getNavOptions(username, toggleForceDesktop)}
116+
items={getNavOptions(username, logoutUser, toggleForceDesktop)}
115117
align="right"
116118
/>);
117119

@@ -296,6 +298,8 @@ MobileIDEView.propTypes = {
296298
username: PropTypes.string,
297299
}).isRequired,
298300

301+
logoutUser: PropTypes.func.isRequired,
302+
299303
setUnsavedChanges: PropTypes.func.isRequired,
300304
getProject: PropTypes.func.isRequired,
301305
clearPersistedState: PropTypes.func.isRequired,

‎client/modules/IDE/reducers/editorAccessibility.js‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@ const initialState = {
77
let messageId = 0;
88

99
const editorAccessibility = (state = initialState, action) => {
10+
console.log('accessbility');
1011
switch (action.type) {
1112
case ActionTypes.UPDATE_LINT_MESSAGE:
1213
messageId += 1;
@@ -18,7 +19,7 @@ const editorAccessibility = (state = initialState, action) => {
1819
case ActionTypes.CLEAR_LINT_MESSAGE:
1920
return Object.assign({}, state, { lintMessages: [] });
2021
case ActionTypes.TOGGLE_FORCE_DESKTOP:
21-
return { ...state, forceDesktop: !state.forceDesktop };
22+
return Object.assign({}, state, { forceDesktop: !(state.forceDesktop) });
2223
default:
2324
return state;
2425
}

‎client/modules/User/components/Collection.jsx‎

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -398,9 +398,10 @@ class Collection extends React.Component {
398398
closeOverlay={this.hideAddSketches}
399399
isFixedHeight
400400
>
401-
<div className="collection-add-sketch">
402-
<AddToCollectionSketchList username={this.props.username} collection={this.props.collection} />
403-
</div>
401+
<AddToCollectionSketchList
402+
username={this.props.username}
403+
collection={this.props.collection}
404+
/>
404405
</Overlay>
405406
)
406407
}

‎client/routes.jsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -44,7 +44,7 @@ const onRouteChange = (store) => {
4444

4545
const routes = store => (
4646
<Route path="/" component={App} onChange={() => { onRouteChange(store); }}>
47-
<IndexRoute onEnter={checkAuth(store)} component={mobileFirst(MobileIDEView, IDEView)} />
47+
<IndexRoute onEnter={checkAuth(store)} component={mobileFirst(MobileIDEView, IDEView, store)} />
4848

4949
<Route path="/login" component={userIsNotAuthenticated(LoginView)} />
5050
<Route path="/signup" component={userIsNotAuthenticated(SignupView)} />

0 commit comments

Comments
 (0)