Skip to content

Commit 91a766d

Browse files
ghalestriloghalestrilo
committed
🚧 import dropdown list style from scss
1 parent ca88c4e commit 91a766d

File tree

3 files changed

+133
-17
lines changed

3 files changed

+133
-17
lines changed

‎client/components/Dropdown.jsx

Lines changed: 108 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,8 @@
1-
import PropTypes from 'prop-types';
21
import React from 'react';
2+
import PropTypes from 'prop-types';
33
import { Link } from 'react-router';
4+
import styled from 'styled-components';
5+
import { remSize, prop, common } from '../theme';
46

57

68
// <ul className="nav__dropdown">
@@ -41,14 +43,112 @@ import { Link } from 'react-router';
4143

4244
// 'nav__item--open'
4345

46+
// %dropdown-open {
47+
// @include themify() {
48+
// background-color: map-get($theme-map, 'modal-background-color');
49+
// border: 1px solid map-get($theme-map, 'modal-border-color');
50+
// box-shadow: 0 0 18px 0 getThemifyVariable('shadow-color');
51+
// color: getThemifyVariable('primary-text-color');
52+
// }
53+
// text-align: left;
54+
// width: #{180 / $base-font-size}rem;
55+
// display: flex;
56+
// position: absolute;
57+
// flex-direction: column;
58+
// top: 95%;
59+
// height: auto;
60+
// z-index: 9999;
61+
// border-radius: #{6 / $base-font-size}rem;
62+
// -------------
63+
// & li:first-child {
64+
// border-radius: #{5 / $base-font-size}rem #{5 / $base-font-size}rem 0 0;
65+
// }
66+
// & li:last-child {
67+
// border-radius: 0 0 #{5 / $base-font-size}rem #{5 / $base-font-size}rem;
68+
// }
69+
// & li {
70+
// & button,
71+
// & a {
72+
// @include themify() {
73+
// color: getThemifyVariable('primary-text-color');
74+
// }
75+
// width: 100%;
76+
// text-align: left;
77+
// padding: #{8 / $base-font-size}rem #{16 / $base-font-size}rem;
78+
// }
79+
// height: #{35 / $base-font-size}rem;
80+
// cursor: pointer;
81+
// display: flex;
82+
// align-items: center;
83+
// }
84+
// & li:hover {
85+
// @include themify() {
86+
// background-color: getThemifyVariable('button-background-hover-color');
87+
// color: getThemifyVariable('button-hover-color')
88+
// }
89+
// & button, & a {
90+
// @include themify() {
91+
// color: getThemifyVariable('button-hover-color');
92+
// }
93+
// }
94+
// }
95+
// }
96+
97+
// %dropdown-open-left {
98+
// @extend %dropdown-open;
99+
// left: 0;
100+
// }
101+
102+
// %dropdown-open-right {
103+
// @extend %dropdown-open;
104+
// right: 0;
105+
// }
106+
107+
108+
const DropdownWrapper = styled.div`
109+
background-color: ${prop('Modal.background')};
110+
border: 1px solid ${prop('Modal.border')};
111+
box-shadow: 0 0 18px 0 ${common.shadowColor};
112+
color: ${prop('primaryTextColor')};
113+
114+
text-align: left;
115+
width: ${remSize(180)};
116+
display: flex;
117+
position: absolute;
118+
flex-direction: column;
119+
top: 95%;
120+
height: auto;
121+
z-index: 9999;
122+
border-radius: ${remSize(6)};
123+
`;
124+
125+
126+
// @include themify() {
127+
// background-color: map-get($theme-map, 'modal-background-color');
128+
// border: 1px solid map-get($theme-map, 'modal-border-color');
129+
// box-shadow: 0 0 18px 0 getThemifyVariable('shadow-color');
130+
// color: getThemifyVariable('primary-text-color');
131+
// }
132+
133+
44134
const Dropdown = ({ items }) => (
45-
<ul className="nav__dropdown">
46-
{items && items.map(item => (
47-
<li className="nav__dropdown-item">
48-
</li>
49-
))
50-
}
51-
</ul>
135+
<DropdownWrapper>
136+
<h1>space</h1>
137+
<h1>space</h1>
138+
<h1>space</h1>
139+
<h1>space</h1>
140+
{/* className="nav__items-left" */}
141+
<ul className="nav__items-left nav__dropdown nav__item nav__item--open">
142+
<h1 className="nav__dropdown-item">hello</h1>
143+
<h1 className="nav__dropdown-item">hello</h1>
144+
{items && items.map(({ title }) => (
145+
<li className="nav__dropdown-item" key={`nav-${title && title.toLowerCase()}`}>
146+
<h1>space</h1>
147+
</li>
148+
))
149+
}
150+
</ul>
151+
</DropdownWrapper>
52152
);
53153

54154
Dropdown.propTypes = {

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

Lines changed: 11 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -42,10 +42,6 @@ const BottomBarContent = styled.h2`
4242
// const overlays = {};
4343
// const OverlayManager = name => overlays[name] || null;
4444

45-
const headerNavOptions = [
46-
{ icon: PreferencesIcon, title: 'Preferences', route: '/mobile/preferences' }
47-
];
48-
4945

5046
const MobileIDEView = (props) => {
5147
const {
@@ -61,6 +57,10 @@ const MobileIDEView = (props) => {
6157

6258
// const overlayActive = name => (overlay === name);
6359

60+
const headerNavOptions = [
61+
{ icon: PreferencesIcon, title: 'Preferences', route: '/mobile/preferences' }
62+
];
63+
6464
return (
6565
<Screen fullscreen>
6666
<Header
@@ -79,6 +79,10 @@ const MobileIDEView = (props) => {
7979
<IconButton to="/mobile/preview" onClick={() => { startSketch(); }} icon={PlayIcon} aria-label="Run sketch" />
8080
</Header>
8181

82+
83+
{/* TODO: Overlays */}
84+
<Dropdown items={headerNavOptions} />
85+
8286
<IDEWrapper>
8387
<Editor
8488
lintWarning={preferences.lintWarning}
@@ -115,13 +119,12 @@ const MobileIDEView = (props) => {
115119
provideController={setTmController}
116120
/>
117121
</IDEWrapper>
122+
123+
{/*
118124
<Footer>
119125
<Console />
120126
<BottomBarContent>Bottom Bar</BottomBarContent>
121-
</Footer>
122-
123-
{/* Overlays */}
124-
<Dropdown hidden={overlay !== 'dropdown'} items={headerNavOptions} />
127+
</Footer> */}
125128
</Screen>
126129
);
127130
};

‎client/theme.js

Lines changed: 14 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -41,7 +41,8 @@ export const grays = {
4141
};
4242

4343
export const common = {
44-
baseFontSize: 12
44+
baseFontSize: 12,
45+
shadowColor: 'rgba(0, 0, 0, 0.16)'
4546
};
4647

4748
export const remSize = size => `${size / common.baseFontSize}rem`;
@@ -95,6 +96,10 @@ export default {
9596
background: grays.light,
9697
border: grays.middleLight,
9798
},
99+
},
100+
Modal: {
101+
background: grays.light,
102+
border: grays.middleLight
98103
}
99104
},
100105
[Theme.dark]: {
@@ -134,6 +139,10 @@ export default {
134139
background: grays.dark,
135140
border: grays.middleDark,
136141
},
142+
},
143+
Modal: {
144+
background: grays.dark,
145+
border: grays.middleDark
137146
}
138147
},
139148
[Theme.contrast]: {
@@ -173,6 +182,10 @@ export default {
173182
background: grays.dark,
174183
border: grays.middleDark,
175184
},
185+
},
186+
Modal: {
187+
background: grays.dark,
188+
border: grays.middleDark
176189
}
177190
},
178191
};

0 commit comments

Comments
 (0)