🚧 import dropdown list style from scss
This commit is contained in:
parent
ca88c4e68c
commit
91a766dd45
3 changed files with 133 additions and 17 deletions
|
@ -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 = {
|
||||||
|
|
|
@ -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>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
|
@ -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
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
};
|
};
|
||||||
|
|
Loading…
Reference in a new issue