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

re #389, update styling in sidebar and editor for icon consistency (#1104)

Browse source 
* re #389, update styling in sidebar and editor for icon consistency

* re #389, remove link to unused icon
This commit is contained in:
Cassie Tarakajian 2019-06-14 13:30:13 -04:00
parent 38e5022661
commit 3c190874da
7 changed files with 39 additions and 19 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

12
client/images/triangle-arrow-down-white.svg Normal file
View file

@ -0,0 +1,12 @@
<svg width="10px" height="10px" viewBox="0 0 5 5" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<title>Down Arrow</title>
<desc>Created with Sketch.</desc>
<defs></defs>
<g id="Symbols" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="environment" transform="translate(-26.000000, -42.000000)" fill="#B5B5B5">
<g id="libraries" transform="translate(21.000000, 32.000000)">
<polygon id="Triangle-3" transform="translate(7.500000, 12.500000) rotate(180.000000) translate(-7.500000, -12.500000) " points="7.5 10 10 15 5 15"></polygon>
</g>
</g>
</g>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 698 B

12
client/images/triangle-arrow-right-white.svg Normal file
View file

@ -0,0 +1,12 @@
<svg width="10px" height="10px" viewBox="0 0 5 5" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<title>Right Arrow</title>
<desc>Created with Sketch.</desc>
<defs></defs>
<g id="Symbols" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="environment" transform="translate(-26.000000, -42.000000)" fill="#FFFFFF">
<g id="libraries" transform="translate(21.000000, 32.000000)">
<polygon id="Triangle-3" transform="translate(7.500000, 12.500000) rotate(90.000000) translate(-7.500000, -12.500000) " points="7.5 10 10 15 5 15"></polygon>
</g>
</g>
</g>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 698 B

2
client/modules/IDE/components/FileNode.jsx
View file

@ -7,7 +7,7 @@ import classNames from 'classnames';
import * as IDEActions from '../actions/ide'; import * as IDEActions from '../actions/ide';
import * as FileActions from '../actions/files'; import * as FileActions from '../actions/files';
const downArrowUrl = require('../../../images/down-arrow.svg'); const downArrowUrl = require('../../../images/down-filled-triangle.svg');
const folderRightUrl = require('../../../images/triangle-arrow-right.svg'); const folderRightUrl = require('../../../images/triangle-arrow-right.svg');
const folderDownUrl = require('../../../images/triangle-arrow-down.svg'); const folderDownUrl = require('../../../images/triangle-arrow-down.svg');
const fileUrl = require('../../../images/file.svg'); const fileUrl = require('../../../images/file.svg');

8
client/modules/IDE/components/Sidebar.jsx
View file

@ -4,8 +4,7 @@ import classNames from 'classnames';
import InlineSVG from 'react-inlinesvg'; import InlineSVG from 'react-inlinesvg';
import ConnectedFileNode from './FileNode'; import ConnectedFileNode from './FileNode';
const folderUrl = require('../../../images/folder.svg'); const downArrowUrl = require('../../../images/down-filled-triangle.svg');
const downArrowUrl = require('../../../images/down-arrow.svg');
class Sidebar extends React.Component { class Sidebar extends React.Component {
constructor(props) { constructor(props) {
@ -72,10 +71,7 @@ class Sidebar extends React.Component {
<nav className={sidebarClass} title="file-navigation" > <nav className={sidebarClass} title="file-navigation" >
<div className="sidebar__header" onContextMenu={this.toggleProjectOptions}> <div className="sidebar__header" onContextMenu={this.toggleProjectOptions}>
<h3 className="sidebar__title"> <h3 className="sidebar__title">
<span className="sidebar__folder-icon"> <span>Sketch Files</span>
<InlineSVG src={folderUrl} />
</span>
<span>project-folder</span>
</h3> </h3>
<div className="sidebar__icons"> <div className="sidebar__icons">
<button <button

2
client/styles/abstracts/_placeholders.scss
View file

@ -189,7 +189,7 @@
display: flex; display: flex;
position: absolute; position: absolute;
flex-direction: column; flex-direction: column;
top: 100%; top: 95%;
height: auto; height: auto;
z-index: 9999; z-index: 9999;
border-radius: #{6 / $base-font-size}rem; border-radius: #{6 / $base-font-size}rem;

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

@ -70,8 +70,8 @@ $themes: (
nav-hover-color: $p5js-pink, nav-hover-color: $p5js-pink,
error-color: $p5js-pink, error-color: $p5js-pink,
table-row-stripe-color: #d6d6d6, table-row-stripe-color: #d6d6d6,
codefold-icon-open: url(../images/down-arrow.svg), codefold-icon-open: url(../images/triangle-arrow-down.svg),
codefold-icon-closed: url(../images/right-arrow.svg), codefold-icon-closed: url(../images/triangle-arrow-right.svg),
form-title-color: rgba(51, 51, 51, 0.87), form-title-color: rgba(51, 51, 51, 0.87),
form-secondary-title-color: $middleGray, form-secondary-title-color: $middleGray,
@ -133,8 +133,8 @@ $themes: (
nav-hover-color: $p5js-pink, nav-hover-color: $p5js-pink,
error-color: $p5js-pink, error-color: $p5js-pink,
table-row-stripe-color: #3f3f3f, table-row-stripe-color: #3f3f3f,
codefold-icon-open: url(../images/down-arrow-white.svg), codefold-icon-open: url(../images/triangle-arrow-down-white.svg),
codefold-icon-closed: url(../images/right-arrow-white.svg), codefold-icon-closed: url(../images/triangle-arrow-right-white.svg),
form-title-color: $white, form-title-color: $white,
form-secondary-title-color: #b5b5b5, form-secondary-title-color: #b5b5b5,
@ -193,8 +193,8 @@ $themes: (
nav-hover-color: $yellow, nav-hover-color: $yellow,
error-color: $p5-contrast-pink, error-color: $p5-contrast-pink,
table-row-stripe-color: #3f3f3f, table-row-stripe-color: #3f3f3f,
codefold-icon-open: url(../images/down-arrow-white.svg), codefold-icon-open: url(../images/triangle-arrow-down-white.svg),
codefold-icon-closed: url(../images/right-arrow-white.svg), codefold-icon-closed: url(../images/triangle-arrow-right-white.svg),
form-title-color: $white, form-title-color: $white,
form-secondary-title-color: #b5b5b5, form-secondary-title-color: #b5b5b5,

10
client/styles/components/_sidebar.scss
View file

@ -75,15 +75,15 @@
.file-item__spacer { .file-item__spacer {
flex-shrink: 0; flex-shrink: 0;
.sidebar__file-item & { .sidebar__file-item & {
width: #{33 / $base-font-size}rem; width: #{19 / $base-font-size}rem;
.sidebar__file-item & { .sidebar__file-item & {
width: #{53 / $base-font-size}rem; width: #{39 / $base-font-size}rem;
.sidebar__file-item & { .sidebar__file-item & {
width: #{73 / $base-font-size}rem; width: #{59 / $base-font-size}rem;
.sidebar__file-item & { .sidebar__file-item & {
width: #{93 / $base-font-size}rem; width: #{79 / $base-font-size}rem;
.sidebar__file-item & { .sidebar__file-item & {
width: #{113 / $base-font-size}rem; width: #{99 / $base-font-size}rem;
} }
} }
} }