r/p5.js-web-editor
1
0
Fork 0
Code Issues 1 Pull requests Releases 1 Wiki Activity

✨ mount searchbar on examples/dashboard view

Browse source
This commit is contained in:
ghalestrilo 2020-07-28 17:46:22 -03:00
parent 262199d017
commit b2c4a6cd9d
2 changed files with 26 additions and 19 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

43
client/modules/Mobile/MobileDashboard.jsx
View file

@ -11,6 +11,9 @@ import SketchList from '../IDE/components/SketchList';
import CollectionList from '../IDE/components/CollectionList'; import CollectionList from '../IDE/components/CollectionList';
import AssetList from '../IDE/components/AssetList'; import AssetList from '../IDE/components/AssetList';
import Content from './MobileViewContent'; import Content from './MobileViewContent';
import { SketchSearchbar } from '../IDE/components/Searchbar';
const EXAMPLE_USERNAME = 'p5';
const FooterTab = styled.div` const FooterTab = styled.div`
background: ${props => prop(props.selected ? 'backgroundColor' : 'MobilePanel.default.foreground')}; background: ${props => prop(props.selected ? 'backgroundColor' : 'MobilePanel.default.foreground')};
@ -20,34 +23,35 @@ const FooterTab = styled.div`
display: flex; display: flex;
`; `;
const FooterTabContainer = styled.div` const Subheader = styled.div`
.searchbar {
display: flex;
* {
border-radius: 0px;
}
}
.searchbar__input { width: 100%; }
`;
const FooterTabSwitcher = styled.div`
display: flex; display: flex;
h3 { text-align: center; width: 100%; } h3 { text-align: center; width: 100%; }
`; `;
// switch (tabKey) {
// case TabKey.assets:
// return <AssetList key={username} username={username} />;
// case TabKey.collections:
// return <CollectionList key={username} username={username} />;
// case TabKey.sketches:
// default:
// return <SketchList key={username} username={username} />;
// }
const Panels = { const Panels = {
Sketches: props => <SketchList {...props} />, Sketches: props => <SketchList {...props} />,
Collections: () => <CollectionList />, Collections: props => <CollectionList {...props} />,
Assets: () => <AssetList /> Assets: props => <AssetList {...props} />
}; };
const MobileDashboard = ({ username }) => { const MobileDashboard = ({ username }) => {
// const tabs = ['Sketches', 'Collections', 'Assets'];
const Tabs = Object.keys(Panels); const Tabs = Object.keys(Panels);
const [selected, selectTab] = useState(Tabs[0]); const [selected, selectTab] = useState(Tabs[0]);
const isExamples = username === 'p5'; const isExamples = username === EXAMPLE_USERNAME;
return ( return (
<Screen fullscreen> <Screen fullscreen>
@ -56,14 +60,17 @@ const MobileDashboard = ({ username }) => {
</Header> </Header>
<Content> <Content slimheader>
<Subheader>
<SketchSearchbar />
</Subheader>
{Panels[selected] && Panels[selected]({ username })} {Panels[selected] && Panels[selected]({ username })}
</Content> </Content>
<Footer> <Footer>
{!isExamples && {!isExamples &&
<FooterTabContainer> <FooterTabSwitcher>
{Tabs.map(tab => ( {Tabs.map(tab => (
<FooterTab <FooterTab
key={`tab-${tab}`} key={`tab-${tab}`}
@ -73,7 +80,7 @@ const MobileDashboard = ({ username }) => {
<h3>{(tab === 'Sketches' && username === 'p5') ? 'Examples' : tab}</h3> <h3>{(tab === 'Sketches' && username === 'p5') ? 'Examples' : tab}</h3>
</FooterTab>)) </FooterTab>))
} }
</FooterTabContainer> </FooterTabSwitcher>
} }
</Footer> </Footer>
</Screen>); </Screen>);

2
client/modules/Mobile/MobileViewContent.jsx
View file

@ -5,5 +5,5 @@ import { remSize } from '../../theme';
export default styled.div` export default styled.div`
z-index: 0; z-index: 0;
margin-top: ${remSize(68)}; margin-top: ${props => remSize(props.slimheader ? 50 : 68)};
`; `;