start to restyle nav
This commit is contained in:
Cassie Tarakajian
parent
9eede0f728
commit
fd26279fed
4 changed files with 132 additions and 5 deletions
|
|
@ -1,11 +1,105 @@
|
||||||
import React, { PropTypes } from 'react';
|
import React, { PropTypes } from 'react';
|
||||||
import { Link } from 'react-router';
|
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 {
|
class Nav extends React.PureComponent {
|
||||||
render() {
|
render() {
|
||||||
return (
|
return (
|
||||||
<nav className="nav" role="navigation" title="main-navigation">
|
<nav className="nav" role="navigation" title="main-navigation">
|
||||||
<ul className="nav__items-left" title="project-menu">
|
<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">
|
<li className="nav__item">
|
||||||
<button
|
<button
|
||||||
className="nav__new"
|
className="nav__new"
|
||||||
|
|
|
||||||
10
client/images/down-filled-triangle.svg
Normal file
10
client/images/down-filled-triangle.svg
Normal 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>
|
||||||
|
After Width: | Height: | Size: 633 B |
20
client/images/p5js-logo-small.svg
Normal file
20
client/images/p5js-logo-small.svg
Normal 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>
|
||||||
|
After Width: | Height: | Size: 2.4 KiB |
|
|
@ -1,20 +1,20 @@
|
||||||
.nav {
|
.nav {
|
||||||
width: 100%;
|
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;
|
display: flex;
|
||||||
flex-direction: row;
|
flex-direction: row;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
}
|
|
||||||
|
|
||||||
.nav__items-left, .nav__items-right {
|
|
||||||
@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');
|
||||||
}
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav__items-left, .nav__items-right {
|
||||||
list-style: none;
|
list-style: none;
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: row;
|
flex-direction: row;
|
||||||
justify-content: flex-end;
|
justify-content: flex-end;
|
||||||
padding: #{3 / $base-font-size}rem 0;
|
height: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
.nav__items-left {
|
.nav__items-left {
|
||||||
|
|
@ -29,6 +29,9 @@
|
||||||
position: relative;
|
position: relative;
|
||||||
padding: 0 #{24 / $base-font-size}rem;
|
padding: 0 #{24 / $base-font-size}rem;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
.nav__item:first-child {
|
.nav__item:first-child {
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue