🚧 import dropdown list style from scss

This commit is contained in:
ghalestrilo 2020-07-22 15:37:44 -03:00
parent ca88c4e68c
commit 91a766dd45
3 changed files with 133 additions and 17 deletions

View file

@ -1,6 +1,8 @@
import PropTypes from 'prop-types';
import React from 'react'; import React from 'react';
import PropTypes from 'prop-types';
import { Link } from 'react-router'; import { Link } from 'react-router';
import styled from 'styled-components';
import { remSize, prop, common } from '../theme';
// <ul className="nav__dropdown"> // <ul className="nav__dropdown">
@ -41,14 +43,112 @@ import { Link } from 'react-router';
// 'nav__item--open' // 'nav__item--open'
// %dropdown-open {
// @include themify() {
// background-color: map-get($theme-map, 'modal-background-color');
// border: 1px solid map-get($theme-map, 'modal-border-color');
// box-shadow: 0 0 18px 0 getThemifyVariable('shadow-color');
// color: getThemifyVariable('primary-text-color');
// }
// text-align: left;
// width: #{180 / $base-font-size}rem;
// display: flex;
// position: absolute;
// flex-direction: column;
// top: 95%;
// height: auto;
// z-index: 9999;
// border-radius: #{6 / $base-font-size}rem;
// -------------
// & li:first-child {
// border-radius: #{5 / $base-font-size}rem #{5 / $base-font-size}rem 0 0;
// }
// & li:last-child {
// border-radius: 0 0 #{5 / $base-font-size}rem #{5 / $base-font-size}rem;
// }
// & li {
// & button,
// & a {
// @include themify() {
// color: getThemifyVariable('primary-text-color');
// }
// width: 100%;
// text-align: left;
// padding: #{8 / $base-font-size}rem #{16 / $base-font-size}rem;
// }
// height: #{35 / $base-font-size}rem;
// cursor: pointer;
// display: flex;
// align-items: center;
// }
// & li:hover {
// @include themify() {
// background-color: getThemifyVariable('button-background-hover-color');
// color: getThemifyVariable('button-hover-color')
// }
// & button, & a {
// @include themify() {
// color: getThemifyVariable('button-hover-color');
// }
// }
// }
// }
// %dropdown-open-left {
// @extend %dropdown-open;
// left: 0;
// }
// %dropdown-open-right {
// @extend %dropdown-open;
// right: 0;
// }
const DropdownWrapper = styled.div`
background-color: ${prop('Modal.background')};
border: 1px solid ${prop('Modal.border')};
box-shadow: 0 0 18px 0 ${common.shadowColor};
color: ${prop('primaryTextColor')};
text-align: left;
width: ${remSize(180)};
display: flex;
position: absolute;
flex-direction: column;
top: 95%;
height: auto;
z-index: 9999;
border-radius: ${remSize(6)};
`;
// @include themify() {
// background-color: map-get($theme-map, 'modal-background-color');
// border: 1px solid map-get($theme-map, 'modal-border-color');
// box-shadow: 0 0 18px 0 getThemifyVariable('shadow-color');
// color: getThemifyVariable('primary-text-color');
// }
const Dropdown = ({ items }) => ( const Dropdown = ({ items }) => (
<ul className="nav__dropdown"> <DropdownWrapper>
{items && items.map(item => ( <h1>space</h1>
<li className="nav__dropdown-item"> <h1>space</h1>
<h1>space</h1>
<h1>space</h1>
{/* className="nav__items-left" */}
<ul className="nav__items-left nav__dropdown nav__item nav__item--open">
<h1 className="nav__dropdown-item">hello</h1>
<h1 className="nav__dropdown-item">hello</h1>
{items && items.map(({ title }) => (
<li className="nav__dropdown-item" key={`nav-${title && title.toLowerCase()}`}>
<h1>space</h1>
</li> </li>
)) ))
} }
</ul> </ul>
</DropdownWrapper>
); );
Dropdown.propTypes = { Dropdown.propTypes = {

View file

@ -42,10 +42,6 @@ const BottomBarContent = styled.h2`
// const overlays = {}; // const overlays = {};
// const OverlayManager = name => overlays[name] || null; // const OverlayManager = name => overlays[name] || null;
const headerNavOptions = [
{ icon: PreferencesIcon, title: 'Preferences', route: '/mobile/preferences' }
];
const MobileIDEView = (props) => { const MobileIDEView = (props) => {
const { const {
@ -61,6 +57,10 @@ const MobileIDEView = (props) => {
// const overlayActive = name => (overlay === name); // const overlayActive = name => (overlay === name);
const headerNavOptions = [
{ icon: PreferencesIcon, title: 'Preferences', route: '/mobile/preferences' }
];
return ( return (
<Screen fullscreen> <Screen fullscreen>
<Header <Header
@ -79,6 +79,10 @@ const MobileIDEView = (props) => {
<IconButton to="/mobile/preview" onClick={() => { startSketch(); }} icon={PlayIcon} aria-label="Run sketch" /> <IconButton to="/mobile/preview" onClick={() => { startSketch(); }} icon={PlayIcon} aria-label="Run sketch" />
</Header> </Header>
{/* TODO: Overlays */}
<Dropdown items={headerNavOptions} />
<IDEWrapper> <IDEWrapper>
<Editor <Editor
lintWarning={preferences.lintWarning} lintWarning={preferences.lintWarning}
@ -115,13 +119,12 @@ const MobileIDEView = (props) => {
provideController={setTmController} provideController={setTmController}
/> />
</IDEWrapper> </IDEWrapper>
{/*
<Footer> <Footer>
<Console /> <Console />
<BottomBarContent>Bottom Bar</BottomBarContent> <BottomBarContent>Bottom Bar</BottomBarContent>
</Footer> </Footer> */}
{/* Overlays */}
<Dropdown hidden={overlay !== 'dropdown'} items={headerNavOptions} />
</Screen> </Screen>
); );
}; };

View file

@ -41,7 +41,8 @@ export const grays = {
}; };
export const common = { export const common = {
baseFontSize: 12 baseFontSize: 12,
shadowColor: 'rgba(0, 0, 0, 0.16)'
}; };
export const remSize = size => `${size / common.baseFontSize}rem`; export const remSize = size => `${size / common.baseFontSize}rem`;
@ -95,6 +96,10 @@ export default {
background: grays.light, background: grays.light,
border: grays.middleLight, border: grays.middleLight,
}, },
},
Modal: {
background: grays.light,
border: grays.middleLight
} }
}, },
[Theme.dark]: { [Theme.dark]: {
@ -134,6 +139,10 @@ export default {
background: grays.dark, background: grays.dark,
border: grays.middleDark, border: grays.middleDark,
}, },
},
Modal: {
background: grays.dark,
border: grays.middleDark
} }
}, },
[Theme.contrast]: { [Theme.contrast]: {
@ -173,6 +182,10 @@ export default {
background: grays.dark, background: grays.dark,
border: grays.middleDark, border: grays.middleDark,
}, },
},
Modal: {
background: grays.dark,
border: grays.middleDark
} }
}, },
}; };