ascribe/onion
1
0
Fork 0
mirror of https://github.com/ascribe/onion.git synced 2024-12-22 09:23:13 +01:00
Code Issues Releases Wiki Activity

add clear selection functionality

Browse Source
This commit is contained in:
Tim Daubenschütz 2015-06-01 15:12:31 +02:00
parent 7c4d4afbd4
commit 8a18d894cc
8 changed files with 90 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
index.html
View File

@ -9,7 +9,7 @@
<link rel="stylesheet" href="//brick.a.ssl.fastly.net/Source+Sans+Pro:400,600,700,900">
</head>
<body>
<div id="main" class="container"></div>
<div id="main" class="container clear-margins-and-paddings"></div>
<div id="modal" class="container"></div>
<script src="build/app.js"></script>
</body>

3
js/actions/edition_list_actions.js
View File

@ -6,7 +6,8 @@ class EditionListActions {
constructor() {
this.generateActions(
'updateEditionList',
'selectEdition'
'selectEdition',
'clearAllEditionSelections'
);
}

2
js/components/ascribe_accordion_list/accordion_list_item_table_editions.js
View File

@ -49,7 +49,7 @@ let AccordionListItemTableEditions = React.createClass({
new TableColumnContentModel((item) => { return { 'editionId': item.id, 'pieceId': this.props.parentId, 'selectItem': this.selectItem, 'selected': item.selected }}, '', '', TableItemCheckbox, 1, false),
new TableColumnContentModel((item) => { return { 'content': item.edition_number }}, 'num_editions', 'Nr', TableItemText, 1, false),
new TableColumnContentModel((item) => { return { 'content': item.bitcoin_id }}, 'bitcoin_id', 'Bitcoin Address', TableItemText, 5, false),
new TableColumnContentModel((item) => { return { 'content': item.acl }}, 'acl', 'Actions', TableItemAclFiltered, 5, false)
new TableColumnContentModel((item) => { return { 'content': item.acl }}, 'acl', 'Actions', TableItemAclFiltered, 4, false)
];
return (

54
js/components/ascribe_piece_list_toolbar/piece_list_toolbar.js
View File

@ -1,11 +1,16 @@
import React from 'react';
import EditionListStore from '../../stores/edition_list_store';
import EditionListActions from '../../actions/edition_list_actions';
import AclButton from '../acl_button';
import PieceListToolbarSelectedEditionsWidget from './piece_list_toolbar_selected_editions_widget';
let PieceListToolbar = React.createClass({
propTypes: {
className: React.PropTypes.string
},
getInitialState() {
return EditionListStore.getState();
},
@ -66,25 +71,46 @@ let PieceListToolbar = React.createClass({
return availableAcls;
},
clearAllSelections() {
EditionListActions.clearAllEditionSelections();
},
render() {
let availableAcls = this.getAvailableAcls();
return (
<div className="row no-margin">
<div className="col-xs-12 col-sm-12 col-md-12 col-lg-12 piece-list-toolbar">
<div className="pull-left">
<PieceListToolbarSelectedEditionsWidget
numberOfSelectedEditions={this.fetchSelectedEditionList().length} />
</div>
<div className="pull-right">
<AclButton availableAcls={availableAcls} action="transfer" actionFunction={this.bulk} />
<AclButton availableAcls={availableAcls} action="consign" actionFunction={this.bulk} />
<AclButton availableAcls={availableAcls} action="share" actionFunction={this.bulk} />
<AclButton availableAcls={availableAcls} action="loan" actionFunction={this.bulk} />
if(availableAcls.length > 0) {
return (
<div className={this.props.className}>
<div className="row no-margin">
<div className="col-xs-12 col-sm-12 col-md-12 col-lg-12 piece-list-toolbar">
<p></p>
<div className="row">
<div className="text-center">
<PieceListToolbarSelectedEditionsWidget
numberOfSelectedEditions={this.fetchSelectedEditionList().length} />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<span
className="piece-list-toolbar-clear-all"
onClick={this.clearAllSelections}>clear all</span>
</div>
</div>
<p></p>
<div className="row">
<div className="text-center">
<AclButton availableAcls={availableAcls} action="transfer" actionFunction={this.bulk} />
<AclButton availableAcls={availableAcls} action="consign" actionFunction={this.bulk} />
<AclButton availableAcls={availableAcls} action="share" actionFunction={this.bulk} />
<AclButton availableAcls={availableAcls} action="loan" actionFunction={this.bulk} />
</div>
</div>
</div>
</div>
</div>
</div>
);
);
} else {
return null;
}
}
});

2
js/components/piece_list.js
View File

@ -50,6 +50,7 @@ let PieceList = React.createClass({
return (
<div>
<PieceListToolbar className="ascribe-piece-list-toolbar" />
<AccordionList
className="ascribe-accordion-list"
changeOrder={this.accordionChangeOrder}
@ -60,7 +61,6 @@ let PieceList = React.createClass({
page={this.state.page}
pageSize={this.state.pageSize}>
{this.state.pieceList.map((item, i) => {
return (
<AccordionListItem
className="col-xs-12 col-sm-10 col-md-8 col-lg-8 col-sm-offset-1 col-md-offset-2 col-lg-offset-2 ascribe-accordion-list-item"

15
js/stores/edition_list_store.js
View File

@ -31,6 +31,21 @@ class EditionListStore {
}
});
}
onClearAllEditionSelections() {
Object
.keys(this.editionList)
.forEach((pieceId) => {
this.editionList[pieceId]
.forEach((edition) => {
try {
delete edition.selected;
} catch(err) {
//just ignore
}
});
});
}
};
export default alt.createStore(EditionListStore);

20
sass/ascribe-piece-list-toolbar.scss Normal file
View File

@ -0,0 +1,20 @@
.ascribe-piece-list-toolbar {
position: fixed;
top:0;
width:1170px;
height:6em;
background-color: #FAFAFA;
border-left: 0.1em solid #E0E0E0;
border-right: 0.1em solid #E0E0E0;
border-top: 0.1em solid #E0E0E0;
border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px;
border-bottom: 0.2em solid #E0E0E0;
z-index:9999;
}
.piece-list-toolbar-clear-all {
text-decoration: underline;
cursor:pointer;
}

14
sass/main.scss
View File

@ -6,6 +6,7 @@
@import './ascribe-fonts/style';
@import './ascribe-fonts/ascribe-fonts';
@import 'ascribe-accordion_list';
@import 'ascribe-piece-list-toolbar';
.hidden {
display: none;
@ -14,6 +15,12 @@
.navbar-default {
border-left:0;
border-right:0;
margin-bottom: 3em;
}
.clear-margins-and-paddings {
padding-left:0;
padding-right:0;
}
.ascribe-color {
@ -68,6 +75,9 @@
.ascribe-table-item-column > * {
display: table-cell;
vertical-align: middle;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
}
.ascribe-table-item-selected {
@ -78,10 +88,6 @@
cursor: default;
}
.piece-list-toolbar {
height:3em;
}
.no-margin {
margin-right: 0;
margin-left: 0;