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

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

View File

@ -31,7 +31,9 @@ function drainQueue() {
currentQueue = queue; currentQueue = queue;
queue = []; queue = [];
while (++queueIndex < len) { while (++queueIndex < len) {
currentQueue[queueIndex].run(); if (currentQueue) {
currentQueue[queueIndex].run();
}
} }
queueIndex = -1; queueIndex = -1;
len = queue.length; len = queue.length;
@ -83,7 +85,6 @@ process.binding = function (name) {
throw new Error('process.binding is not supported'); throw new Error('process.binding is not supported');
}; };
// TODO(shtylman)
process.cwd = function () { return '/' }; process.cwd = function () { return '/' };
process.chdir = function (dir) { process.chdir = function (dir) {
throw new Error('process.chdir is not supported'); throw new Error('process.chdir is not supported');
@ -29679,9 +29680,6 @@ Object.defineProperty(exports, '__esModule', {
}); });
exports.listFiles = listFiles; exports.listFiles = listFiles;
exports.refresh = refresh; exports.refresh = refresh;
exports.toggle = toggle;
exports.details = details;
exports.list = list;
exports.selectView = selectView; exports.selectView = selectView;
exports.search = search; 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() { function selectView() {
var active = arguments.length <= 0 || arguments[0] === undefined ? true : arguments[0]; var active = arguments.length <= 0 || arguments[0] === undefined ? true : arguments[0];
@ -29915,7 +29892,6 @@ var TYPES = {
CHANGE_DIRECTORY: Symbol('CHANGE_DIRECTORY'), CHANGE_DIRECTORY: Symbol('CHANGE_DIRECTORY'),
LIST_FILES: Symbol('LIST_FILES'), LIST_FILES: Symbol('LIST_FILES'),
FILES_VIEW: Symbol('FILES_VIEW'),
SELECT_VIEW: Symbol('SELECT_VIEW'), SELECT_VIEW: Symbol('SELECT_VIEW'),
NAVIGATION: Symbol('NAVIGATION'), NAVIGATION: Symbol('NAVIGATION'),
@ -30538,6 +30514,7 @@ var FileList = (function (_Component) {
var files = _props.files; var files = _props.files;
var selectView = _props.selectView; var selectView = _props.selectView;
var activeFile = _props.activeFile; var activeFile = _props.activeFile;
var view = _props.view;
activeFile = activeFile || []; activeFile = activeFile || [];
var settings = _store2['default'].getState().get('settings'); var settings = _store2['default'].getState().get('settings');
@ -30551,9 +30528,11 @@ var FileList = (function (_Component) {
} }
}); });
var className = 'file-list ' + view;
return _react2['default'].createElement( return _react2['default'].createElement(
'div', 'div',
{ className: 'file-list', ref: 'container' }, { className: className, ref: 'container' },
els els
); );
} }
@ -30585,7 +30564,8 @@ function props(state) {
return { return {
files: state.get('files'), files: state.get('files'),
selectView: state.get('selectView'), 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 _actionsMenu = require('actions/menu');
var _actionsSettings = require('actions/settings');
var _actionsSettings2 = _interopRequireDefault(_actionsSettings);
var _store = require('store'); var _store = require('store');
var _store2 = _interopRequireDefault(_store); var _store2 = _interopRequireDefault(_store);
@ -31465,7 +31449,7 @@ var Toolbar = (function (_Component) {
'div', 'div',
{ className: 'toolbar' }, { className: 'toolbar' },
_react2['default'].createElement('button', { className: 'icon-plus tour-item', onClick: this.newFile }), _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-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-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' }) _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); _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; return Toolbar;
@ -31503,7 +31495,7 @@ var Toolbar = (function (_Component) {
exports['default'] = Toolbar; exports['default'] = Toolbar;
module.exports = exports['default']; 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'; 'use strict';
Object.defineProperty(exports, '__esModule', { Object.defineProperty(exports, '__esModule', {
@ -32332,7 +32324,8 @@ var _lodashObjectOmit2 = _interopRequireDefault(_lodashObjectOmit);
var DEFAULT = { var DEFAULT = {
showHiddenFiles: false, showHiddenFiles: false,
showDirectoriesFirst: true showDirectoriesFirst: true,
view: 'list'
}; };
exports['default'] = function (state, action) { exports['default'] = function (state, action) {
@ -32454,6 +32447,7 @@ var MESSAGES = {
'icon-refresh': 'Refresh File List', 'icon-refresh': 'Refresh File List',
'icon-select': 'Select files for batch actions', 'icon-select': 'Select files for batch actions',
'icon-more': 'Actions used on selected files such as Copy, Delete, Move, …', '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', 'drawer': 'Extra options, tools and links are here',
'icon-search': 'Search your storage for a certain file', 'icon-search': 'Search your storage for a certain file',
'swipe-instruction': 'Swipe from left to right to go to parent folder' 'swipe-instruction': 'Swipe from left to right to go to parent folder'

View File

@ -260,34 +260,58 @@ button.coming-soon::after {
opacity: 0.8; opacity: 0.8;
transform: translate(-50%, -50%) rotate(-45deg); 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, .file,
.directory { .directory {
display: flex; display: flex;
flex-flow: row; flex-flow: row;
align-items: center; align-items: center;
padding: 1.4rem; padding: 1.4rem;
width: 100%;
font-weight: 200; font-weight: 200;
font-size: 1.8rem; font-size: 1.8rem;
box-sizing: border-box; box-sizing: border-box;
border-bottom: 1px solid rgba(0, 0, 0, 0.1);
} }
.file p, .file p,
.directory p { .directory p {
flex: 1 1; 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 { .directory i {
display: block; display: block;
@ -469,6 +493,10 @@ nav i {
color: #9b9b93; color: #9b9b93;
} }
.file-list { .file-list {
display: flex;
flex-flow: row wrap;
justify-content: space-around;
align-content: flex-start;
height: calc(100vh - 14.5rem); height: calc(100vh - 14.5rem);
overflow-x: hidden; overflow-x: hidden;
overflow-y: auto; overflow-y: auto;

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'; import store from 'store';
export function listFiles(files) { 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) { export function selectView(active = true) {
return { return {
type: SELECT_VIEW, type: SELECT_VIEW,

View File

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

View File

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

View File

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

View File

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

View File

@ -3,6 +3,7 @@ const MESSAGES = {
'icon-refresh': 'Refresh File List', 'icon-refresh': 'Refresh File List',
'icon-select': 'Select files for batch actions', 'icon-select': 'Select files for batch actions',
'icon-more': 'Actions used on selected files such as Copy, Delete, Move, …', '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', 'drawer': 'Extra options, tools and links are here',
'icon-search': 'Search your storage for a certain file', 'icon-search': 'Search your storage for a certain file',
'swipe-instruction': 'Swipe from left to right to go to parent folder' 'swipe-instruction': 'Swipe from left to right to go to parent folder'

View File

@ -1,25 +1,11 @@
.file, .directory { .list .file, .list .directory {
display: flex; flex: 1 1 100%;
flex-flow: row;
align-items: center;
padding: 1.4rem;
width: 100%;
.light-big;
box-sizing: border-box;
border-bottom: 1px solid @dark-separator; border-bottom: 1px solid @dark-separator;
p { p {
flex: 1 1;
max-width: ~'calc(100% - 9rem)';
text-overflow: ellipsis;
word-wrap: break-word; word-wrap: break-word;
word-break: break-all;
} }
> span { > 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 { .directory i {
.icon-directory; .icon-directory;
} }

View File

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