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

start to restyle nav

Browse source
This commit is contained in:
Cassie Tarakajian 2017-07-17 17:09:46 -04:00
parent 9eede0f728
commit fd26279fed
4 changed files with 132 additions and 5 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

94
client/components/Nav.jsx
View file

@ -1,11 +1,105 @@
import React, { PropTypes } from 'react';
import { Link } from 'react-router';
import InlineSVG from 'react-inlinesvg';
const triangleUrl = require('../images/down-filled-triangle.svg');
const logoUrl = require('../images/p5js-logo-small.svg');
class Nav extends React.PureComponent {
render() {
return (
<nav className="nav" role="navigation" title="main-navigation">
<ul className="nav__items-left" title="project-menu">
<li>
<InlineSVG src={logoUrl} alt="p5.js logo" />
</li>
<li className="nav__item">
<button>
File
<InlineSVG src={triangleUrl} />
</button>
<ul className="nav__dropdown">
<li>
<button
onClick={() => {
if (!this.props.unsavedChanges) {
this.props.newProject();
} else if (this.props.warnIfUnsavedChanges()) {
this.props.newProject();
}
}}
>
New
</button>
</li>
<li>
<button>
Save
</button>
</li>
<li>
<button>
Duplicate
</button>
</li>
<li>
<button>
Open
</button>
</li>
<li>
<button>
Download
</button>
</li>
</ul>
</li>
<li className="nav__item">
<button>
Edit
<InlineSVG src={triangleUrl} />
</button>
<ul className="nav__dropdown">
<li>
Tidy Code
</li>
<li>
Find
</li>
</ul>
</li>
<li className="nav__item">
<button>
Sketch
<InlineSVG src={triangleUrl} />
</button>
<ul className="nav__dropdown">
<li>
Run
</li>
<li>
Stop
</li>
</ul>
</li>
<li className="nav__item">
<button>
Help
<InlineSVG src={triangleUrl} />
</button>
<ul className="nav__dropdown">
<li>
Keyboard Shortcuts
</li>
<li>
Reference
</li>
<li>
About
</li>
</ul>
</li>
<li className="nav__item">
<button
className="nav__new"

10
client/images/down-filled-triangle.svg Normal file
View file

@ -0,0 +1,10 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg width="9px" height="6px" viewBox="0 0 9 6" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Generator: Sketch 42 (36781) - http://www.bohemiancoding.com/sketch -->
<title>Triangle</title>
<desc>Created with Sketch.</desc>
<defs></defs>
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<polygon id="Triangle" fill="#B5B5B5" transform="translate(4.500000, 3.000000) rotate(180.000000) translate(-4.500000, -3.000000) " points="4.5 0 9 6 0 6"></polygon>
</g>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 633 B

20
client/images/p5js-logo-small.svg Normal file
View file

@ -0,0 +1,20 @@
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="56" height="42" viewBox="0 0 56 42">
<defs>
<path id="a" d="M0 0h36v36H0z"/>
<path id="b" d="M0 0h36v36H0z"/>
</defs>
<g fill="none" fill-rule="evenodd">
<path fill="#ED225D" d="M0 0h56v42H0z"/>
<g transform="translate(10)">
<use fill="#FFF" xlink:href="#a"/>
<path stroke="#979797" d="M.5.5h35v35H.5z"/>
</g>
<path fill="#ED225D" d="M21.025 20.617a2.826 2.826 0 0 0-.941-.795c-.38-.201-.824-.302-1.334-.302-.481 0-.912.104-1.29.314-.38.209-.704.478-.974.805-.27.329-.474.702-.612 1.12a3.85 3.85 0 0 0 0 2.496c.138.411.342.78.612 1.109.27.328.594.593.974.794.378.202.809.302 1.29.302.51 0 .955-.104 1.334-.313.38-.209.693-.477.94-.806.248-.328.434-.701.559-1.12a4.283 4.283 0 0 0 0-2.497c-.125-.409-.31-.778-.558-1.107"/>
<g transform="translate(10)">
<mask id="c" fill="#fff">
<use xlink:href="#b"/>
</mask>
<path fill="#ED225D" d="M32.75 16.44l-.989.717-1.026-1.361-1.001 1.326-.963-.734.975-1.337-1.582-.571.374-1.15 1.586.511v-1.644h1.273v1.647l1.574-.476.373 1.15-1.57.536.975 1.385zm-7.045 8.959a5.208 5.208 0 0 1-1.25 1.769c-.524.481-1.139.85-1.844 1.105a6.559 6.559 0 0 1-2.25.383c-1.334 0-2.46-.312-3.374-.936a5.238 5.238 0 0 1-1.533-1.614l1.953-1.835.03-.01a3.14 3.14 0 0 0 1.125 1.52c.525.384 1.147.576 1.867.576.405 0 .787-.068 1.147-.204.36-.134.675-.33.945-.585.27-.256.484-.575.641-.958.158-.383.237-.815.237-1.296 0-.616-.106-1.127-.315-1.533a2.775 2.775 0 0 0-.821-.98 3.075 3.075 0 0 0-1.136-.519 5.634 5.634 0 0 0-1.282-.146c-.3 0-.619.022-.957.067-.337.046-.667.11-.99.192-.322.083-.637.177-.944.281a6.717 6.717 0 0 0-.821.338l.27-8.722h9.065v2.434h-6.501l-.157 3.449c.254-.075.558-.128.91-.158.353-.03.672-.045.957-.045.78 0 1.503.112 2.17.338a5.15 5.15 0 0 1 1.744.98c.495.429.88.955 1.158 1.578.278.624.416 1.341.416 2.153 0 .887-.153 1.679-.46 2.378zm-11.601-.36a5.504 5.504 0 0 1-1.058 1.825 5.08 5.08 0 0 1-1.664 1.24c-.653.307-1.392.462-2.216.462a4.678 4.678 0 0 1-2.103-.474c-.638-.315-1.13-.743-1.474-1.285h-.045v6.853h-2.7V17.43h2.588v1.51h.067c.135-.21.311-.424.529-.642.217-.218.484-.413.799-.587a4.908 4.908 0 0 1 2.407-.597c.764 0 1.469.147 2.114.44.645.293 1.2.695 1.665 1.206a5.465 5.465 0 0 1 1.08 1.803c.254.691.382 1.435.382 2.231 0 .797-.124 1.544-.371 2.243zM0 36.07h36V0H0v36.071z" mask="url(#c)"/>
</g>
</g>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 2.4 KiB

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

@ -1,20 +1,20 @@
.nav {
width: 100%;
padding: #{10 / $base-font-size}rem #{32 / $base-font-size}rem 0 #{32 / $base-font-size}rem;
height: #{42 / $base-font-size}rem;
display: flex;
flex-direction: row;
justify-content: space-between;
}
.nav__items-left, .nav__items-right {
@include themify() {
border-bottom: 1px dashed map-get($theme-map, 'inactive-text-color');
}
}
.nav__items-left, .nav__items-right {
list-style: none;
display: flex;
flex-direction: row;
justify-content: flex-end;
padding: #{3 / $base-font-size}rem 0;
height: 100%;
}
.nav__items-left {
@ -29,6 +29,9 @@
position: relative;
padding: 0 #{24 / $base-font-size}rem;
text-align: center;
display: flex;
align-items: center;
justify-content: center;
}
.nav__item:first-child {