add file icons and file types default to file

This commit is contained in:
catarak 2016-08-25 17:32:27 -04:00
parent cd0dcc9184
commit 1ae27f0d66
8 changed files with 79 additions and 14 deletions

View file

@ -0,0 +1,14 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg width="6px" height="7px" viewBox="0 0 6 7" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Generator: Sketch 39.1 (31720) - http://www.bohemiancoding.com/sketch -->
<title>Triangle 3</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(-25.000000, -41.000000)" stroke="#B5B5B5" fill="#B5B5B5">
<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>

After

Width:  |  Height:  |  Size: 850 B

12
client/images/folder.svg Normal file
View file

@ -0,0 +1,12 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg width="13px" height="12px" viewBox="0 0 9 8" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Generator: Sketch 39.1 (31720) - http://www.bohemiancoding.com/sketch -->
<title>"." project folder</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(-11.000000, -13.000000)" fill="#B5B5B5">
<path d="M15.628,14.604 C15.628,14.604 15.628,13.848 15.016,13.848 L12.88,13.848 C12.256,13.848 12.256,14.604 12.256,14.604 L15.628,14.604 Z M18.964,15.036 L11.932,15.036 C11.524,15.036 11.2,15.36 11.2,15.768 L11.2,20.616 C11.2,20.82 11.356,20.988 11.56,20.988 L19.336,20.988 C19.54,20.988 19.708,20.82 19.708,20.616 L19.708,15.768 C19.708,15.36 19.372,15.036 18.964,15.036 L18.964,15.036 Z" id="&quot;.&quot;-project-folder"></path>
</g>
</g>
</svg>

After

Width:  |  Height:  |  Size: 1,023 B

View file

@ -74,7 +74,7 @@ export function createFile(formProps) {
const postParams = { const postParams = {
name: createUniqueName(formProps.name, state.files), name: createUniqueName(formProps.name, state.files),
url: formProps.url, url: formProps.url,
content: formProps.content || '' content: formProps.content || '',
// TODO pass parent id to API, once there are folders // TODO pass parent id to API, once there are folders
parentId: rootFile.id parentId: rootFile.id
}; };
@ -107,7 +107,7 @@ export function createFile(formProps) {
id, id,
_id: id, _id: id,
url: formProps.url, url: formProps.url,
content: formProps.content || '' content: formProps.content || '',
// TODO pass parent id from File Tree // TODO pass parent id from File Tree
parentId: rootFile.id parentId: rootFile.id
}); });

View file

@ -5,6 +5,7 @@ import { bindActionCreators } from 'redux';
import { connect } from 'react-redux'; import { connect } from 'react-redux';
import InlineSVG from 'react-inlinesvg'; import InlineSVG from 'react-inlinesvg';
const downArrowUrl = require('../../../images/down-arrow.svg'); const downArrowUrl = require('../../../images/down-arrow.svg');
const fileUrl = require('../../../images/file.svg');
import classNames from 'classnames'; import classNames from 'classnames';
export class FileNode extends React.Component { export class FileNode extends React.Component {
@ -70,6 +71,15 @@ export class FileNode extends React.Component {
if (this.props.name !== 'root') { if (this.props.name !== 'root') {
return ( return (
<div className="file-item__content"> <div className="file-item__content">
{(() => { // eslint-disable-line
if (this.props.type === 'file') {
return (
<span className="sidebar__file-item-icon">
<InlineSVG src={fileUrl} />
</span>
);
}
})()}
<a className="sidebar__file-item-name">{this.props.name}</a> <a className="sidebar__file-item-name">{this.props.name}</a>
<input <input
type="text" type="text"
@ -141,6 +151,7 @@ FileNode.propTypes = {
parentId: PropTypes.string, parentId: PropTypes.string,
children: PropTypes.array, children: PropTypes.array,
name: PropTypes.string.isRequired, name: PropTypes.string.isRequired,
type: PropTypes.string.isRequired,
isSelected: PropTypes.bool, isSelected: PropTypes.bool,
isOptionsOpen: PropTypes.bool, isOptionsOpen: PropTypes.bool,
isEditingName: PropTypes.bool, isEditingName: PropTypes.bool,

View file

@ -4,6 +4,8 @@ import InlineSVG from 'react-inlinesvg';
// import SidebarItem from './SidebarItem'; // import SidebarItem from './SidebarItem';
const rightArrowUrl = require('../../../images/right-arrow.svg'); const rightArrowUrl = require('../../../images/right-arrow.svg');
const leftArrowUrl = require('../../../images/left-arrow.svg'); const leftArrowUrl = require('../../../images/left-arrow.svg');
const folderUrl = require('../../../images/folder.svg');
const downArrowUrl = require('../../../images/down-arrow.svg');
import ConnectedFileNode from './FileNode'; import ConnectedFileNode from './FileNode';
class Sidebar extends React.Component { class Sidebar extends React.Component {
@ -25,14 +27,19 @@ class Sidebar extends React.Component {
return ( return (
<nav className={sidebarClass} title="file-navigation" role="navigation"> <nav className={sidebarClass} title="file-navigation" role="navigation">
<div className="sidebar__header"> <div className="sidebar__header">
<h3 className="sidebar__title">Sketch Files</h3> <h3 className="sidebar__title">
<span className="sidebar__folder-icon">
<InlineSVG src={folderUrl} />
</span>
<span>project-folder</span>
</h3>
<div className="sidebar__icons"> <div className="sidebar__icons">
<button <button
aria-label="add file" aria-label="add file"
className="sidebar__add" className="sidebar__add"
onClick={this.props.newFile} onClick={this.props.newFile}
> >
+ <InlineSVG src={downArrowUrl} />
</button> </button>
<button <button
aria-label="collapse file navigation" aria-label="collapse file navigation"

View file

@ -42,26 +42,30 @@ function initialState() {
name: 'root', name: 'root',
id: r, id: r,
_id: r, _id: r,
children: [a, b, c] children: [a, b, c],
type: 'folder'
}, },
{ {
name: 'sketch.js', name: 'sketch.js',
content: defaultSketch, content: defaultSketch,
id: a, id: a,
_id: a, _id: a,
isSelected: true isSelected: true,
type: 'file'
}, },
{ {
name: 'index.html', name: 'index.html',
content: defaultHTML, content: defaultHTML,
id: b, id: b,
_id: b _id: b,
type: 'file'
}, },
{ {
name: 'style.css', name: 'style.css',
content: defaultCSS, content: defaultCSS,
id: c, id: c,
_id: c _id: c,
type: 'file'
}]; }];
} }
@ -101,7 +105,7 @@ const files = (state, action) => {
} }
return file; return file;
}); });
return [...newState, { name: action.name, id: action.id, _id: action._id, content: action.content, url: action.url }]; return [...newState, { name: action.name, id: action.id, _id: action._id, content: action.content, url: action.url, type: 'file' }];
} }
case ActionTypes.SHOW_FILE_OPTIONS: case ActionTypes.SHOW_FILE_OPTIONS:
return state.map(file => { return state.map(file => {

View file

@ -20,9 +20,9 @@
.sidebar__add { .sidebar__add {
@extend %icon; @extend %icon;
cursor: pointer; cursor: pointer;
height: #{26 / $base-font-size}rem; // height: #{26 / $base-font-size}rem;
margin-right: #{16 / $base-font-size}rem; // margin-right: #{16 / $base-font-size}rem;
font-size: #{24 / $base-font-size}rem; // font-size: #{24 / $base-font-size}rem;
.sidebar--contracted & { .sidebar--contracted & {
display: none; display: none;
} }
@ -46,11 +46,14 @@
&:hover .sidebar__file-item-name { &:hover .sidebar__file-item-name {
color: $light-primary-text-color; color: $light-primary-text-color;
} }
&:hover .sidebar__file-item-icon g {
fill: $light-primary-text-color;
}
} }
.file-item__content { .file-item__content {
display: flex; display: flex;
justify-content: space-between; // justify-content: space-between;
position: relative; position: relative;
} }
@ -63,6 +66,8 @@
.sidebar__file-item-show-options { .sidebar__file-item-show-options {
@extend %icon; @extend %icon;
display: none; display: none;
margin-left: auto;
margin-right: 0;
.sidebar__file-item--selected & { .sidebar__file-item--selected & {
display: inline-block; display: inline-block;
} }
@ -96,6 +101,7 @@
.sidebar__contract { .sidebar__contract {
@extend %icon; @extend %icon;
margin-left: #{4 / $base-font-size}rem;
height: #{14 / $base-font-size}rem; height: #{14 / $base-font-size}rem;
& svg { & svg {
height: #{14 / $base-font-size}rem; height: #{14 / $base-font-size}rem;
@ -121,3 +127,14 @@
display: flex; display: flex;
align-items: center; align-items: center;
} }
.sidebar__folder-icon {
margin-right: #{5 / $base-font-size}rem;
& g {
fill: $light-primary-text-color;
}
}
.sidebar__file-item-icon {
margin-right: #{5 / $base-font-size}rem;
}

View file

@ -38,7 +38,7 @@ const fileSchema = new Schema({
content: { type: String, default: '' }, content: { type: String, default: '' },
url: { type: String }, url: { type: String },
children: { type: [ String ], default: [] }, children: { type: [ String ], default: [] },
fileType: { type: String }, fileType: { type: String, default: 'file' },
isSelected: { type: Boolean } isSelected: { type: Boolean }
}, { timestamps: true, _id: true }); }, { timestamps: true, _id: true });