thereadme/Hawk
1
0
Fork 0
Code Issues 6 Pull Requests Projects Releases 1 Wiki Activity

feat back: replaced toolbar's "Toggle View" button with "Back" - resolve #6

Browse Source 
Views are now listed in navigation drawer as a radio-button group
This commit is contained in:
Mahdi Dibaiee 2015-09-28 16:33:56 +03:30
parent b3b2ddf4f8
commit 25ff79af90
11 changed files with 104 additions and 48 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
build/img/Back.svg Normal file
View File

@ -0,0 +1,16 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg width="15px" height="24px" viewBox="0 0 15 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">
<!-- Generator: Sketch 3.3.3 (12072) - http://www.bohemiancoding.com/sketch -->
<title>Back</title>
<desc>Created with Sketch.</desc>
<defs></defs>
<g id="Components" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage">
<g id="Toolbar" sketch:type="MSArtboardGroup" transform="translate(-26.000000, -14.000000)" stroke="#63B0CD" fill="#63B0CD">
<g sketch:type="MSLayerGroup" id="Buttons">
<g transform="translate(26.000000, 7.000000)" sketch:type="MSShapeGroup">
<path d="M7.57710348,12.9048675 C7.04180408,12.7876066 6.46141311,12.9389926 6.04498016,13.3554255 L-2.89216446,22.2925701 C-3.53902314,22.9394288 -3.5418885,23.9953224 -2.89240043,24.6448105 C-2.23838425,25.2988266 -1.18977849,25.2941929 -0.540160097,24.6445745 L7.22721202,16.8772024 L14.9945841,24.6445745 C15.6414428,25.2914332 16.6973364,25.2942985 17.3468245,24.6448105 C18.0008407,23.9907943 17.9962069,22.9421885 17.3465885,22.2925701 L8.40944389,13.3554255 C8.17328851,13.1192701 7.88261547,12.9689485 7.57710348,12.9048675 Z" id="Back" transform="translate(7.228579, 19.000000) rotate(-90.000000) translate(-7.228579, -19.000000) "></path>
</g>
</g>
</g>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.5 KiB

53
build/main.js
View File

@ -30294,16 +30294,6 @@ var Breadcrumb = (function (_Component) {
)
);
}
}, {
key: 'goUp',
value: function goUp() {
var current = store.getState().get('cwd');
var up = current.split('/').slice(0, -1).join('/');
if (up === current) return;
store.dispatch((0, _actionsChangedir2['default'])(up));
}
}, {
key: 'componentDidUpdate',
value: function componentDidUpdate() {
@ -31087,6 +31077,35 @@ var Navigation = (function (_Component) {
)
)
),
_react2['default'].createElement(
'p',
null,
'View'
),
_react2['default'].createElement(
'ul',
null,
_react2['default'].createElement(
'li',
null,
_react2['default'].createElement('input', { id: 'view-list', name: 'view', 'data-value': 'list', type: 'radio', defaultChecked: settings.filter === 'list' }),
_react2['default'].createElement(
'label',
{ htmlFor: 'view-list' },
'List'
)
),
_react2['default'].createElement(
'li',
null,
_react2['default'].createElement('input', { id: 'view-grid', name: 'view', 'data-value': 'grid', type: 'radio', defaultChecked: settings.filter === 'grid' }),
_react2['default'].createElement(
'label',
{ htmlFor: 'view-grid' },
'Grid'
)
)
),
_react2['default'].createElement(
'p',
null,
@ -31551,8 +31570,8 @@ var Toolbar = (function (_Component) {
return _react2['default'].createElement(
'div',
{ className: 'toolbar' },
_react2['default'].createElement('button', { className: 'icon-back tour-item', onClick: this.goUp }),
_react2['default'].createElement('button', { className: 'icon-plus tour-item', onClick: this.newFile }),
_react2['default'].createElement('button', { className: 'icon-view tour-item', onClick: this.toggleView }),
_react2['default'].createElement('button', { className: 'icon-refresh tour-item', onClick: (0, _store.bind)((0, _actionsFilesView.refresh)()) }),
_react2['default'].createElement('button', { className: 'icon-select tour-item', onClick: (0, _store.bind)((0, _actionsFilesView.selectView)('toggle')) }),
_react2['default'].createElement('button', { className: 'icon-more tour-item', onClick: this.showMore.bind(this), ref: 'more' })
@ -31573,6 +31592,16 @@ var Toolbar = (function (_Component) {
var transform = 'translate(0, -100%)';
_store2['default'].dispatch((0, _actionsMenu.show)('moreMenu', { style: { left: left, top: top, transform: transform } }));
}
}, {
key: 'goUp',
value: function goUp() {
var current = _store2['default'].getState().get('cwd');
var up = current.split('/').slice(0, -1).join('/');
if (up === current) return;
_store2['default'].dispatch(changedir(up));
}
}, {
key: 'newFile',
value: function newFile() {
@ -32612,7 +32641,7 @@ var MESSAGES = {
'icon-refresh': 'Refresh File List',
'icon-select': 'Select files for batch actions',
'icon-more': 'Actions used on selected files such as Copy, Delete, Move, …',
'icon-view': 'Toggle between List and Grid view',
'icon-back': 'Navigate to top directory',
'drawer': 'Extra options, tools and links are here',
'icon-search': 'Search your storage for a certain file',
'swipe-instruction': 'Swipe from left to right to go to parent folder'

15
build/style.css
View File

@ -59,18 +59,11 @@
.icon-cross svg * {
fill: white;
}
.icon-up {
.icon-back {
display: block;
display: inline-block;
border: 11px solid transparent;
border-right-color: #63b0cd;
border-top-width: 8px;
border-bottom-width: 8px;
border-radius: 3px;
margin-right: 0.5rem;
position: relative;
top: 2px;
right: 0.5rem;
background: url(/img/Back.svg) no-repeat;
width: 15px;
height: 24px;
}
.regular-medium {
font-weight: normal;

BIN
design/userinterface.sketch
View File

Binary file not shown.

BIN
releases/hawk-1.0.0.zip
View File

Binary file not shown.

16
src/img/Back.svg Normal file
View File

@ -0,0 +1,16 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg width="15px" height="24px" viewBox="0 0 15 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">
<!-- Generator: Sketch 3.3.3 (12072) - http://www.bohemiancoding.com/sketch -->
<title>Back</title>
<desc>Created with Sketch.</desc>
<defs></defs>
<g id="Components" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage">
<g id="Toolbar" sketch:type="MSArtboardGroup" transform="translate(-26.000000, -14.000000)" stroke="#63B0CD" fill="#63B0CD">
<g sketch:type="MSLayerGroup" id="Buttons">
<g transform="translate(26.000000, 7.000000)" sketch:type="MSShapeGroup">
<path d="M7.57710348,12.9048675 C7.04180408,12.7876066 6.46141311,12.9389926 6.04498016,13.3554255 L-2.89216446,22.2925701 C-3.53902314,22.9394288 -3.5418885,23.9953224 -2.89240043,24.6448105 C-2.23838425,25.2988266 -1.18977849,25.2941929 -0.540160097,24.6445745 L7.22721202,16.8772024 L14.9945841,24.6445745 C15.6414428,25.2914332 16.6973364,25.2942985 17.3468245,24.6448105 C18.0008407,23.9907943 17.9962069,22.9421885 17.3465885,22.2925701 L8.40944389,13.3554255 C8.17328851,13.1192701 7.88261547,12.9689485 7.57710348,12.9048675 Z" id="Back" transform="translate(7.228579, 19.000000) rotate(-90.000000) translate(-7.228579, -19.000000) "></path>
</g>
</g>
</g>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.5 KiB

9
src/js/components/breadcrumb.js
View File

@ -57,15 +57,6 @@ export default class Breadcrumb extends Component {
);
}
goUp() {
let current = store.getState().get('cwd');
let up = current.split('/').slice(0, -1).join('/');
if (up === current) return;
store.dispatch(changedir(up));
}
componentDidUpdate() {
let container = React.findDOMNode(this.refs.container);
let currents = container.querySelectorAll('span:not(.history)');

12
src/js/components/navigation.js
View File

@ -40,6 +40,18 @@ export default class Navigation extends Component {
</li>
</ul>
<p>View</p>
<ul>
<li>
<input id='view-list' name='view' data-value='list' type='radio' defaultChecked={settings.filter === 'list'} />
<label htmlFor='view-list'>List</label>
</li>
<li>
<input id='view-grid' name='view' data-value='grid' type='radio' defaultChecked={settings.filter === 'grid'} />
<label htmlFor='view-grid'>Grid</label>
</li>
</ul>
<p>Tools</p>
<ul>
<li className='coming-soon'>

11
src/js/components/toolbar.js
View File

@ -10,8 +10,8 @@ export default class Toolbar extends Component {
render() {
return (
<div className='toolbar'>
<button className='icon-back tour-item' onClick={this.goUp} />
<button className='icon-plus tour-item' onClick={this.newFile} />
<button className='icon-view tour-item' onClick={this.toggleView} />
<button className='icon-refresh tour-item' onClick={bind(refresh())} />
<button className='icon-select tour-item' onClick={bind(selectView('toggle'))} />
<button className='icon-more tour-item' onClick={this.showMore.bind(this)} ref='more' />
@ -30,6 +30,15 @@ export default class Toolbar extends Component {
store.dispatch(showMenu('moreMenu', {style: {left, top, transform}}));
}
goUp() {
let current = store.getState().get('cwd');
let up = current.split('/').slice(0, -1).join('/');
if (up === current) return;
store.dispatch(changedir(up));
}
newFile() {
let cwd = store.getState().get('cwd');
let action = showDialog('createDialog', {

2
src/js/tour.js
View File

@ -3,7 +3,7 @@ const MESSAGES = {
'icon-refresh': 'Refresh File List',
'icon-select': 'Select files for batch actions',
'icon-more': 'Actions used on selected files such as Copy, Delete, Move, …',
'icon-view': 'Toggle between List and Grid view',
'icon-back': 'Navigate to top directory',
'drawer': 'Extra options, tools and links are here',
'icon-search': 'Search your storage for a certain file',
'swipe-instruction': 'Swipe from left to right to go to parent folder'

18
src/less/icons.less
View File

@ -66,19 +66,9 @@
}
}
.icon-up {
.icon-back {
.icon;
display: inline-block;
border: 11px solid transparent;
border-right-color: @blue;
border-top-width: 8px;
border-bottom-width: 8px;
border-radius: 3px;
margin-right: 0.5rem;
position: relative;
top: 2px;
right: 0.5rem;
background: url(/img/Back.svg) no-repeat;
width: 15px;
height: 24px;
}