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

feat view: Enable toggle view button to toggle between grid and list views

Browse Source
This commit is contained in:
Mahdi Dibaiee 2015-09-09 13:28:15 +04:30
parent 49eb62ef2f
commit d56ea95e9b
10 changed files with 137 additions and 93 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

58
build/main.js
View File

@ -31,7 +31,9 @@ function drainQueue() {
currentQueue = queue;
queue = [];
while (++queueIndex < len) {
currentQueue[queueIndex].run();
if (currentQueue) {
currentQueue[queueIndex].run();
}
}
queueIndex = -1;
len = queue.length;
@ -83,7 +85,6 @@ process.binding = function (name) {
throw new Error('process.binding is not supported');
};
// TODO(shtylman)
process.cwd = function () { return '/' };
process.chdir = function (dir) {
throw new Error('process.chdir is not supported');
@ -29679,9 +29680,6 @@ Object.defineProperty(exports, '__esModule', {
});
exports.listFiles = listFiles;
exports.refresh = refresh;
exports.toggle = toggle;
exports.details = details;
exports.list = list;
exports.selectView = selectView;
exports.search = search;
@ -29706,27 +29704,6 @@ function refresh() {
};
}
function toggle() {
return {
type: _actionsTypes.FILES_VIEW,
view: 'toggle'
};
}
function details() {
return {
type: _actionsTypes.FILES_VIEW,
view: 'details'
};
}
function list() {
return {
type: _actionsTypes.FILES_VIEW,
view: 'list'
};
}
function selectView() {
var active = arguments.length <= 0 || arguments[0] === undefined ? true : arguments[0];
@ -29915,7 +29892,6 @@ var TYPES = {
CHANGE_DIRECTORY: Symbol('CHANGE_DIRECTORY'),
LIST_FILES: Symbol('LIST_FILES'),
FILES_VIEW: Symbol('FILES_VIEW'),
SELECT_VIEW: Symbol('SELECT_VIEW'),
NAVIGATION: Symbol('NAVIGATION'),
@ -30538,6 +30514,7 @@ var FileList = (function (_Component) {
var files = _props.files;
var selectView = _props.selectView;
var activeFile = _props.activeFile;
var view = _props.view;
activeFile = activeFile || [];
var settings = _store2['default'].getState().get('settings');
@ -30551,9 +30528,11 @@ var FileList = (function (_Component) {
}
});
var className = 'file-list ' + view;
return _react2['default'].createElement(
'div',
{ className: 'file-list', ref: 'container' },
{ className: className, ref: 'container' },
els
);
}
@ -30585,7 +30564,8 @@ function props(state) {
return {
files: state.get('files'),
selectView: state.get('selectView'),
activeFile: state.get('activeFile')
activeFile: state.get('activeFile'),
view: state.get('settings').view || 'list'
};
}
@ -31443,6 +31423,10 @@ var _actionsDialog = require('actions/dialog');
var _actionsMenu = require('actions/menu');
var _actionsSettings = require('actions/settings');
var _actionsSettings2 = _interopRequireDefault(_actionsSettings);
var _store = require('store');
var _store2 = _interopRequireDefault(_store);
@ -31465,7 +31449,7 @@ var Toolbar = (function (_Component) {
'div',
{ className: 'toolbar' },
_react2['default'].createElement('button', { className: 'icon-plus tour-item', onClick: this.newFile }),
_react2['default'].createElement('button', { className: 'icon-view coming-soon', onClick: (0, _store.bind)((0, _actionsFilesView.toggle)()) }),
_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' })
@ -31495,6 +31479,14 @@ var Toolbar = (function (_Component) {
});
_store2['default'].dispatch(action);
}
}, {
key: 'toggleView',
value: function toggleView() {
var current = _store2['default'].getState().get('settings').view;
var value = current === 'list' ? 'grid' : 'list';
_store2['default'].dispatch((0, _actionsSettings2['default'])({ view: value }));
}
}]);
return Toolbar;
@ -31503,7 +31495,7 @@ var Toolbar = (function (_Component) {
exports['default'] = Toolbar;
module.exports = exports['default'];
},{"./menu":235,"actions/dialog":218,"actions/files-view":220,"actions/menu":221,"react":207,"store":"store"}],241:[function(require,module,exports){
},{"./menu":235,"actions/dialog":218,"actions/files-view":220,"actions/menu":221,"actions/settings":224,"react":207,"store":"store"}],241:[function(require,module,exports){
'use strict';
Object.defineProperty(exports, '__esModule', {
@ -32332,7 +32324,8 @@ var _lodashObjectOmit2 = _interopRequireDefault(_lodashObjectOmit);
var DEFAULT = {
showHiddenFiles: false,
showDirectoriesFirst: true
showDirectoriesFirst: true,
view: 'list'
};
exports['default'] = function (state, action) {
@ -32454,6 +32447,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',
'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'

58
build/style.css
View File

@ -260,34 +260,58 @@ button.coming-soon::after {
opacity: 0.8;
transform: translate(-50%, -50%) rotate(-45deg);
}
.list .file,
.list .directory {
flex: 1 1 100%;
border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}
.list .file p,
.list .directory p {
word-wrap: break-word;
word-break: break-all;
}
.list .file > span,
.list .directory > span {
font-weight: 100;
font-size: 1.5rem;
margin-left: 1rem;
}
.list .file i,
.list .directory i {
margin-right: 1.4rem;
}
.grid .file,
.grid .directory {
flex: 1 0 30%;
max-width: 30%;
padding: 1.4rem 0.5rem;
flex-direction: column;
}
.grid .file p,
.grid .directory p {
max-height: 1.5em;
max-width: 100%;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
}
.grid .file span,
.grid .directory span {
display: none;
}
.file,
.directory {
display: flex;
flex-flow: row;
align-items: center;
padding: 1.4rem;
width: 100%;
font-weight: 200;
font-size: 1.8rem;
box-sizing: border-box;
border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}
.file p,
.directory p {
flex: 1 1;
max-width: calc(100% - 9rem);
text-overflow: ellipsis;
word-wrap: break-word;
}
.file > span,
.directory > span {
font-weight: 100;
font-size: 1.5rem;
margin-left: 1rem;
}
.file i,
.directory i {
margin-right: 1.4rem;
}
.directory i {
display: block;
@ -469,6 +493,10 @@ nav i {
color: #9b9b93;
}
.file-list {
display: flex;
flex-flow: row wrap;
justify-content: space-around;
align-content: flex-start;
height: calc(100vh - 14.5rem);
overflow-x: hidden;
overflow-y: auto;

23
src/js/actions/files-view.js
View File

@ -1,4 +1,4 @@
import { LIST_FILES, FILES_VIEW, SELECT_VIEW, REFRESH, SEARCH } from 'actions/types';
import { LIST_FILES, VIEW, SELECT_VIEW, REFRESH, SEARCH } from 'actions/types';
import store from 'store';
export function listFiles(files) {
@ -14,27 +14,6 @@ export function refresh() {
}
}
export function toggle() {
return {
type: FILES_VIEW,
view: 'toggle'
}
}
export function details() {
return {
type: FILES_VIEW,
view: 'details'
}
}
export function list() {
return {
type: FILES_VIEW,
view: 'list'
}
}
export function selectView(active = true) {
return {
type: SELECT_VIEW,

1
src/js/actions/types.js
View File

@ -2,7 +2,6 @@ const TYPES = {
CHANGE_DIRECTORY: Symbol('CHANGE_DIRECTORY'),
LIST_FILES: Symbol('LIST_FILES'),
FILES_VIEW: Symbol('FILES_VIEW'),
SELECT_VIEW: Symbol('SELECT_VIEW'),
NAVIGATION: Symbol('NAVIGATION'),

9
src/js/components/file-list.js
View File

@ -14,7 +14,7 @@ export default class FileList extends Component {
}
render() {
let { files, selectView, activeFile } = this.props;
let { files, selectView, activeFile, view } = this.props;
activeFile = activeFile || [];
let settings = store.getState().get('settings');
@ -27,8 +27,10 @@ export default class FileList extends Component {
}
});
let className= `file-list ${view}`;
return (
<div className='file-list' ref='container'>
<div className={className} ref='container'>
{els}
</div>
);
@ -53,7 +55,8 @@ function props(state) {
return {
files: state.get('files'),
selectView: state.get('selectView'),
activeFile: state.get('activeFile')
activeFile: state.get('activeFile'),
view: state.get('settings').view || 'list'
}
}

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

@ -1,7 +1,8 @@
import React, { Component } from 'react';
import { toggle as toggleView, refresh, selectView } from 'actions/files-view';
import { refresh, selectView } from 'actions/files-view';
import { show as showDialog } from 'actions/dialog';
import { show as showMenu } from 'actions/menu';
import settings from 'actions/settings';
import store, { bind } from 'store';
import { MENU_WIDTH } from './menu';
@ -10,7 +11,7 @@ export default class Toolbar extends Component {
return (
<div className='toolbar'>
<button className='icon-plus tour-item' onClick={this.newFile} />
<button className='icon-view coming-soon' onClick={bind(toggleView())} />
<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' />
@ -36,4 +37,11 @@ export default class Toolbar extends Component {
});
store.dispatch(action);
}
toggleView() {
let current = store.getState().get('settings').view;
let value = current === 'list' ? 'grid' : 'list';
store.dispatch(settings({view: value}));
}
}

3
src/js/reducers/settings.js
View File

@ -3,7 +3,8 @@ import omit from 'lodash/object/omit';
const DEFAULT = {
showHiddenFiles: false,
showDirectoriesFirst: true
showDirectoriesFirst: true,
view: 'list'
}
export default function(state = DEFAULT, action) {

1
src/js/tour.js
View File

@ -3,6 +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',
'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'

59
src/less/components/entries.less
View File

@ -1,25 +1,11 @@
.file, .directory {
display: flex;
flex-flow: row;
align-items: center;
padding: 1.4rem;
width: 100%;
.light-big;
box-sizing: border-box;
.list .file, .list .directory {
flex: 1 1 100%;
border-bottom: 1px solid @dark-separator;
p {
flex: 1 1;
max-width: ~'calc(100% - 9rem)';
text-overflow: ellipsis;
word-wrap: break-word;
word-break: break-all;
}
> span {
@ -33,6 +19,45 @@
}
}
.grid .file, .grid .directory {
flex: 1 0 30%;
max-width: 30%;
padding: 1.4rem 0.5rem;
flex-direction: column;
p {
max-height: 1.5em;
max-width: 100%;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
}
span {
display: none;
}
}
.file, .directory {
display: flex;
flex-flow: row;
align-items: center;
padding: 1.4rem;
.light-big;
box-sizing: border-box;
p {
flex: 1 1;
}
}
.directory i {
.icon-directory;
}

6
src/less/components/file-list.less
View File

@ -1,4 +1,10 @@
.file-list {
display: flex;
flex-flow: row wrap;
justify-content: space-around;
align-content: flex-start;
height: ~'calc(100vh - 14.5rem)';
overflow-x: hidden;