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

many updates to nav style

Browse source
This commit is contained in:
Cassie Tarakajian 2017-07-25 15:35:18 -04:00
parent 394772c32c
commit 65b009077b
3 changed files with 139 additions and 71 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

116
client/components/Nav.jsx
View file

@ -19,10 +19,14 @@ class Nav extends React.PureComponent {
</li> </li>
<li className="nav__item"> <li className="nav__item">
<button> <button>
File <span className="nav__item-header">File</span>
<InlineSVG src={triangleUrl} /> <InlineSVG src={triangleUrl} />
</button> </button>
<ul className="nav__dropdown"> <ul className="nav__dropdown">
<li className="nav__dropdown-heading">
<span>File</span>
<InlineSVG src={triangleUrl} />
</li>
<li className="nav__dropdown-item"> <li className="nav__dropdown-item">
<button <button
onClick={() => { onClick={() => {
@ -85,24 +89,32 @@ class Nav extends React.PureComponent {
</li> </li>
<li className="nav__item"> <li className="nav__item">
<button> <button>
Edit <span className="nav__item-header">Edit</span>
<InlineSVG src={triangleUrl} /> <InlineSVG src={triangleUrl} />
</button> </button>
<ul className="nav__dropdown"> <ul className="nav__dropdown">
<li className="nav__dropdown-heading">
<span>Edit</span>
<InlineSVG src={triangleUrl} />
</li>
<li className="nav__dropdown-item"> <li className="nav__dropdown-item">
Tidy Code Tidy Code
</li> </li>
<li cclassName="nav__dropdown-item"> <li className="nav__dropdown-item">
Find Find
</li> </li>
</ul> </ul>
</li> </li>
<li className="nav__item"> <li className="nav__item">
<button> <button>
Sketch <span className="nav__item-header">Sketch</span>
<InlineSVG src={triangleUrl} /> <InlineSVG src={triangleUrl} />
</button> </button>
<ul className="nav__dropdown"> <ul className="nav__dropdown">
<li className="nav__dropdown-heading">
<span>Sketch</span>
<InlineSVG src={triangleUrl} />
</li>
<li className="nav__dropdown-item"> <li className="nav__dropdown-item">
Run Run
</li> </li>
@ -113,10 +125,14 @@ class Nav extends React.PureComponent {
</li> </li>
<li className="nav__item"> <li className="nav__item">
<button> <button>
Help <span className="nav__item-header">Help</span>
<InlineSVG src={triangleUrl} /> <InlineSVG src={triangleUrl} />
</button> </button>
<ul className="nav__dropdown"> <ul className="nav__dropdown">
<li className="nav__dropdown-heading">
<span>Help</span>
<InlineSVG src={triangleUrl} />
</li>
<li className="nav__dropdown-item"> <li className="nav__dropdown-item">
Keyboard Shortcuts Keyboard Shortcuts
</li> </li>
@ -135,51 +151,53 @@ class Nav extends React.PureComponent {
</ul> </ul>
</li> </li>
</ul> </ul>
<ul className="nav__items-right" title="user-menu"> { !this.props.user.authenticated &&
{(() => { <ul className="nav__items-right" title="user-menu">
if (!this.props.user.authenticated) { <li className="nav__item">
return ( <p>
<li className="nav__item"> <Link to="/login">Log in</Link>
<p> <span className="nav__item-spacer">or</span>
<Link to="/login">Log in</Link> <Link to="/signup">Sign up</Link>
<span className="nav__item-spacer">or</span> </p>
<Link to="/signup">Sign up</Link> </li>
</p> </ul>}
{ this.props.user.authenticated &&
<ul className="nav__items-right" title="user-menu">
<li className="nav__item">
<span>Hello, {this.props.user.username}!</span>
</li>
<span className="nav__item-spacer">|</span>
<li className="nav__item">
<button className="nav__item-header">My Account</button>
<InlineSVG src={triangleUrl} />
<ul className="nav__dropdown">
<li className="nav__dropdown-heading">
<button>My Account</button>
<InlineSVG src={triangleUrl} />
</li> </li>
); <li className="nav__dropdown-item">
} <Link to={`/${this.props.user.username}/sketches`}>
return ( My sketches
<li className="nav__item"> </Link>
<a>Hello, {this.props.user.username}!</a> </li>
<ul className="nav__dropdown"> <li className="nav__dropdown-item">
<li className="nav__dropdown-heading"> <Link to={`/${this.props.user.username}/assets`}>
<a>Hello, {this.props.user.username}!</a> My assets
</li> </Link>
<li> </li>
<Link to={`/${this.props.user.username}/sketches`}> <li className="nav__dropdown-item">
My sketches <Link to={`/${this.props.user.username}/account`}>
</Link> Settings
</li> </Link>
<li> </li>
<Link to={`/${this.props.user.username}/assets`}> <li className="nav__dropdown-item">
My assets <button onClick={this.props.logoutUser} >
</Link> Log out
</li> </button>
<li> </li>
<Link to={`/${this.props.user.username}/account`}> </ul>
My account </li>
</Link> </ul> }
</li>
<li>
<button onClick={this.props.logoutUser} >
Log out
</button>
</li>
</ul>
</li>
);
})()}
</ul>
<div className="nav__announce"> <div className="nav__announce">
This is a preview version of the editor, that has not yet been officially released. This is a preview version of the editor, that has not yet been officially released.
It is in development, you can report bugs <a It is in development, you can report bugs <a

16
client/styles/abstracts/_variables.scss
View file

@ -15,7 +15,7 @@ $themes: (
primary-text-color: #333, primary-text-color: #333,
modal-button-color: #333, modal-button-color: #333,
heading-text-color: #333, heading-text-color: #333,
secondary-text-color: #6b6b6b, secondary-text-color: #a8a8a8,
inactive-text-color: #b5b5b5, inactive-text-color: #b5b5b5,
background-color: #fbfbfb, background-color: #fbfbfb,
preview-placeholder-color: #dcdcdc, preview-placeholder-color: #dcdcdc,
@ -30,7 +30,8 @@ $themes: (
button-active-color: $white, button-active-color: $white,
modal-background-color: #f4f4f4, modal-background-color: #f4f4f4,
modal-button-background-color: #e6e6e6, modal-button-background-color: #e6e6e6,
modal-border-color: #B9D0E1, modal-border-color: rgba(17, 17, 17, 0.3),
modal-boder-selected-color: #B9D0E1,
icon-color: $icon-color, icon-color: $icon-color,
icon-hover-color: $icon-hover-color, icon-hover-color: $icon-hover-color,
icon-toast-hover-color: $white, icon-toast-hover-color: $white,
@ -44,14 +45,15 @@ $themes: (
input-text-color: #333, input-text-color: #333,
input-border-color: #b5b5b5, input-border-color: #b5b5b5,
about-list-text-color: #4a4a4a, about-list-text-color: #4a4a4a,
search-background-color: #ebebeb search-background-color: #ebebeb,
dropdown-color: #414141
), ),
dark: ( dark: (
logo-color: $p5js-pink, logo-color: $p5js-pink,
primary-text-color: $white, primary-text-color: $white,
modal-button-color: $white, modal-button-color: $white,
heading-text-color: $white, heading-text-color: $white,
secondary-text-color: #c2c2c2, secondary-text-color: #DADADA,
inactive-text-color: #b5b5b5, inactive-text-color: #b5b5b5,
background-color: #333, background-color: #333,
preview-placeholder-color: #dcdcdc, preview-placeholder-color: #dcdcdc,
@ -80,7 +82,8 @@ $themes: (
input-text-color: #333, input-text-color: #333,
input-border-color: #b5b5b5, input-border-color: #b5b5b5,
about-list-text-color: #f4f4f4, about-list-text-color: #f4f4f4,
search-background-color: #ebebeb search-background-color: #ebebeb,
dropdown-color: #414141
), ),
contrast: ( contrast: (
logo-color: $yellow, logo-color: $yellow,
@ -115,7 +118,8 @@ $themes: (
input-text-color: #333, input-text-color: #333,
input-border-color: #b5b5b5, input-border-color: #b5b5b5,
about-list-text-color: #f4f4f4, about-list-text-color: #f4f4f4,
search-background-color: $white search-background-color: $white,
dropdown-color: #e1e1e1
) )
); );

78
client/styles/components/_nav.scss
View file

@ -7,6 +7,9 @@
@include themify() { @include themify() {
border-bottom: 1px dashed map-get($theme-map, 'inactive-text-color'); border-bottom: 1px dashed map-get($theme-map, 'inactive-text-color');
} }
& button {
padding: 0;
}
} }
.nav__items-left, .nav__items-right { .nav__items-left, .nav__items-right {
@ -15,22 +18,24 @@
flex-direction: row; flex-direction: row;
justify-content: flex-end; justify-content: flex-end;
height: 100%; height: 100%;
align-items: center;
} }
.nav__items-left { .nav__items-left {
& button { & button {
@include themify() { @include themify() {
color: getThemifyVariable('inactive-text-color'); color: getThemifyVariable('secondary-text-color');
} }
} }
} }
.nav__item { .nav__item {
position: relative; position: relative;
padding: 0 #{24 / $base-font-size}rem; padding: 0 #{10 / $base-font-size}rem;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
height: 100%;
} }
.nav__item:first-child { .nav__item:first-child {
@ -41,38 +46,43 @@
padding-right: #{15 / $base-font-size}rem; padding-right: #{15 / $base-font-size}rem;
} }
.nav__item-header {
margin-right: #{5 / $base-font-size}rem;
}
.nav__dropdown { .nav__dropdown {
@include themify() { @include themify() {
background-color: map-get($theme-map, 'modal-background-color'); background-color: map-get($theme-map, 'modal-background-color');
border: 1px solid map-get($theme-map, 'modal-border-color'); border: 1px solid map-get($theme-map, 'modal-border-color');
box-shadow: 0 0 18px getThemifyVariable('shadow-color'); box-shadow: 0 0 18px 0 getThemifyVariable('shadow-color');
color: getThemifyVariable('dropdown-color');
} }
display: none; display: none;
text-align: left; text-align: left;
width: #{140 / $base-font-size}rem; width: #{180 / $base-font-size}rem;
.nav__item:hover &, .nav__item--open & { .nav__item:hover &, .nav__item--open & {
display: flex; display: flex;
position: absolute; position: absolute;
flex-direction: column; flex-direction: column;
top: 50%; top: 4px;
left: 0; left: 0;
height: auto; height: auto;
} }
padding-bottom: #{8 / $base-font-size}rem; z-index: 9999;
z-index: 1; border-radius: #{6 / $base-font-size}rem;
}
.nav__items-right {
padding-right: #{20 / $base-font-size}rem;
& .nav__dropdown {
width: #{121 / $base-font-size}rem;
}
} }
.nav__item-spacer { .nav__item-spacer {
@include themify() { @include themify() {
color: map-get($theme-map, 'inactive-text-color'); color: map-get($theme-map, 'inactive-text-color');
} }
padding: 0 #{15 / $base-font-size}rem;
}
.nav__dropdown li {
padding: #{4 / $base-font-size}rem #{16 / $base-font-size}rem;
width: 100%;
} }
.nav__dropdown a, button { .nav__dropdown a, button {
@ -95,9 +105,11 @@
@include themify() { @include themify() {
border-bottom: 1px dashed map-get($theme-map, 'inactive-text-color'); border-bottom: 1px dashed map-get($theme-map, 'inactive-text-color');
} }
margin-top: #{3 / $base-font-size}rem; height: #{(42 - 5) / $base-font-size}rem;
text-align: center; display: flex;
margin-bottom: #{4 / $base-font-size}rem; align-items: center;
justify-content: space-between;
margin: 0 #{16 / $base-font-size}rem;
} }
.nav__dropdown-heading a, .nav__dropdown-heading a:hover { .nav__dropdown-heading a, .nav__dropdown-heading a:hover {
@ -108,6 +120,40 @@
width: 100%; width: 100%;
} }
.nav__dropdown-heading svg {
transform-origin: 50% 50%;
transform: rotate(180deg);
}
.nav__dropdown-item {
height: #{32 / $base-font-size}rem;
width: 100%;
display: flex;
align-items: center;
padding: 0 #{16 / $base-font-size}rem;
cursor: pointer;
& button, & a {
@include themify() {
color: getThemifyVariable('dropdown-color');
}
}
&:hover {
@include themify() {
background-color: getThemifyVariable('button-background-hover-color');
color: getThemifyVariable('button-hover-color')
}
& button, & a {
@include themify() {
color: getThemifyVariable('button-hover-color');
}
}
}
}
.nav__dropdown-item:last-child {
border-radius: 0 0 #{6 / $base-font-size}rem #{6 / $base-font-size}rem;
}
.nav__announce { .nav__announce {
position: absolute; position: absolute;
top: #{40 / $base-font-size}rem; top: #{40 / $base-font-size}rem;