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 className="nav__item">
<button>
File
<span className="nav__item-header">File</span>
<InlineSVG src={triangleUrl} />
</button>
<ul className="nav__dropdown">
<li className="nav__dropdown-heading">
<span>File</span>
<InlineSVG src={triangleUrl} />
</li>
<li className="nav__dropdown-item">
<button
onClick={() => {
@ -85,24 +89,32 @@ class Nav extends React.PureComponent {
</li>
<li className="nav__item">
<button>
Edit
<span className="nav__item-header">Edit</span>
<InlineSVG src={triangleUrl} />
</button>
<ul className="nav__dropdown">
<li className="nav__dropdown-heading">
<span>Edit</span>
<InlineSVG src={triangleUrl} />
</li>
<li className="nav__dropdown-item">
Tidy Code
</li>
<li cclassName="nav__dropdown-item">
<li className="nav__dropdown-item">
Find
</li>
</ul>
</li>
<li className="nav__item">
<button>
Sketch
<span className="nav__item-header">Sketch</span>
<InlineSVG src={triangleUrl} />
</button>
<ul className="nav__dropdown">
<li className="nav__dropdown-heading">
<span>Sketch</span>
<InlineSVG src={triangleUrl} />
</li>
<li className="nav__dropdown-item">
Run
</li>
@ -113,10 +125,14 @@ class Nav extends React.PureComponent {
</li>
<li className="nav__item">
<button>
Help
<span className="nav__item-header">Help</span>
<InlineSVG src={triangleUrl} />
</button>
<ul className="nav__dropdown">
<li className="nav__dropdown-heading">
<span>Help</span>
<InlineSVG src={triangleUrl} />
</li>
<li className="nav__dropdown-item">
Keyboard Shortcuts
</li>
@ -135,51 +151,53 @@ class Nav extends React.PureComponent {
</ul>
</li>
</ul>
<ul className="nav__items-right" title="user-menu">
{(() => {
if (!this.props.user.authenticated) {
return (
<li className="nav__item">
<p>
<Link to="/login">Log in</Link>
<span className="nav__item-spacer">or</span>
<Link to="/signup">Sign up</Link>
</p>
{ !this.props.user.authenticated &&
<ul className="nav__items-right" title="user-menu">
<li className="nav__item">
<p>
<Link to="/login">Log in</Link>
<span className="nav__item-spacer">or</span>
<Link to="/signup">Sign up</Link>
</p>
</li>
</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>
);
}
return (
<li className="nav__item">
<a>Hello, {this.props.user.username}!</a>
<ul className="nav__dropdown">
<li className="nav__dropdown-heading">
<a>Hello, {this.props.user.username}!</a>
</li>
<li>
<Link to={`/${this.props.user.username}/sketches`}>
My sketches
</Link>
</li>
<li>
<Link to={`/${this.props.user.username}/assets`}>
My assets
</Link>
</li>
<li>
<Link to={`/${this.props.user.username}/account`}>
My account
</Link>
</li>
<li>
<button onClick={this.props.logoutUser} >
Log out
</button>
</li>
</ul>
</li>
);
})()}
</ul>
<li className="nav__dropdown-item">
<Link to={`/${this.props.user.username}/sketches`}>
My sketches
</Link>
</li>
<li className="nav__dropdown-item">
<Link to={`/${this.props.user.username}/assets`}>
My assets
</Link>
</li>
<li className="nav__dropdown-item">
<Link to={`/${this.props.user.username}/account`}>
Settings
</Link>
</li>
<li className="nav__dropdown-item">
<button onClick={this.props.logoutUser} >
Log out
</button>
</li>
</ul>
</li>
</ul> }
<div className="nav__announce">
This is a preview version of the editor, that has not yet been officially released.
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,
modal-button-color: #333,
heading-text-color: #333,
secondary-text-color: #6b6b6b,
secondary-text-color: #a8a8a8,
inactive-text-color: #b5b5b5,
background-color: #fbfbfb,
preview-placeholder-color: #dcdcdc,
@ -30,7 +30,8 @@ $themes: (
button-active-color: $white,
modal-background-color: #f4f4f4,
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-hover-color: $icon-hover-color,
icon-toast-hover-color: $white,
@ -44,14 +45,15 @@ $themes: (
input-text-color: #333,
input-border-color: #b5b5b5,
about-list-text-color: #4a4a4a,
search-background-color: #ebebeb
search-background-color: #ebebeb,
dropdown-color: #414141
),
dark: (
logo-color: $p5js-pink,
primary-text-color: $white,
modal-button-color: $white,
heading-text-color: $white,
secondary-text-color: #c2c2c2,
secondary-text-color: #DADADA,
inactive-text-color: #b5b5b5,
background-color: #333,
preview-placeholder-color: #dcdcdc,
@ -80,7 +82,8 @@ $themes: (
input-text-color: #333,
input-border-color: #b5b5b5,
about-list-text-color: #f4f4f4,
search-background-color: #ebebeb
search-background-color: #ebebeb,
dropdown-color: #414141
),
contrast: (
logo-color: $yellow,
@ -115,7 +118,8 @@ $themes: (
input-text-color: #333,
input-border-color: #b5b5b5,
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() {
border-bottom: 1px dashed map-get($theme-map, 'inactive-text-color');
}
& button {
padding: 0;
}
}
.nav__items-left, .nav__items-right {
@ -15,22 +18,24 @@
flex-direction: row;
justify-content: flex-end;
height: 100%;
align-items: center;
}
.nav__items-left {
& button {
@include themify() {
color: getThemifyVariable('inactive-text-color');
color: getThemifyVariable('secondary-text-color');
}
}
}
.nav__item {
position: relative;
padding: 0 #{24 / $base-font-size}rem;
padding: 0 #{10 / $base-font-size}rem;
display: flex;
align-items: center;
justify-content: center;
height: 100%;
}
.nav__item:first-child {
@ -41,38 +46,43 @@
padding-right: #{15 / $base-font-size}rem;
}
.nav__item-header {
margin-right: #{5 / $base-font-size}rem;
}
.nav__dropdown {
@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 getThemifyVariable('shadow-color');
box-shadow: 0 0 18px 0 getThemifyVariable('shadow-color');
color: getThemifyVariable('dropdown-color');
}
display: none;
text-align: left;
width: #{140 / $base-font-size}rem;
width: #{180 / $base-font-size}rem;
.nav__item:hover &, .nav__item--open & {
display: flex;
position: absolute;
flex-direction: column;
top: 50%;
top: 4px;
left: 0;
height: auto;
}
padding-bottom: #{8 / $base-font-size}rem;
z-index: 1;
z-index: 9999;
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 {
@include themify() {
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 {
@ -95,9 +105,11 @@
@include themify() {
border-bottom: 1px dashed map-get($theme-map, 'inactive-text-color');
}
margin-top: #{3 / $base-font-size}rem;
text-align: center;
margin-bottom: #{4 / $base-font-size}rem;
height: #{(42 - 5) / $base-font-size}rem;
display: flex;
align-items: center;
justify-content: space-between;
margin: 0 #{16 / $base-font-size}rem;
}
.nav__dropdown-heading a, .nav__dropdown-heading a:hover {
@ -108,6 +120,40 @@
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 {
position: absolute;
top: #{40 / $base-font-size}rem;