ascribe/onion
1
0
Fork 0
mirror of https://github.com/ascribe/onion.git synced 2024-12-22 17:33:14 +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"> <link rel="stylesheet" href="//brick.a.ssl.fastly.net/Source+Sans+Pro:400,600,700,900">
</head> </head>
<body> <body>
<div id="main" class="container"></div> <div id="main" class="container clear-margins-and-paddings"></div>
<div id="modal" class="container"></div> <div id="modal" class="container"></div>
<script src="build/app.js"></script> <script src="build/app.js"></script>
</body> </body>

3
js/actions/edition_list_actions.js
View File

@ -6,7 +6,8 @@ class EditionListActions {
constructor() { constructor() {
this.generateActions( this.generateActions(
'updateEditionList', '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 { '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.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.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 ( return (

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

@ -1,11 +1,16 @@
import React from 'react'; import React from 'react';
import EditionListStore from '../../stores/edition_list_store'; import EditionListStore from '../../stores/edition_list_store';
import EditionListActions from '../../actions/edition_list_actions';
import AclButton from '../acl_button'; import AclButton from '../acl_button';
import PieceListToolbarSelectedEditionsWidget from './piece_list_toolbar_selected_editions_widget'; import PieceListToolbarSelectedEditionsWidget from './piece_list_toolbar_selected_editions_widget';
let PieceListToolbar = React.createClass({ let PieceListToolbar = React.createClass({
propTypes: {
className: React.PropTypes.string
},
getInitialState() { getInitialState() {
return EditionListStore.getState(); return EditionListStore.getState();
}, },
@ -66,17 +71,32 @@ let PieceListToolbar = React.createClass({
return availableAcls; return availableAcls;
}, },
clearAllSelections() {
EditionListActions.clearAllEditionSelections();
},
render() { render() {
let availableAcls = this.getAvailableAcls(); let availableAcls = this.getAvailableAcls();
if(availableAcls.length > 0) {
return ( return (
<div className={this.props.className}>
<div className="row no-margin"> <div className="row no-margin">
<div className="col-xs-12 col-sm-12 col-md-12 col-lg-12 piece-list-toolbar"> <div className="col-xs-12 col-sm-12 col-md-12 col-lg-12 piece-list-toolbar">
<div className="pull-left"> <p></p>
<div className="row">
<div className="text-center">
<PieceListToolbarSelectedEditionsWidget <PieceListToolbarSelectedEditionsWidget
numberOfSelectedEditions={this.fetchSelectedEditionList().length} /> 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>
<div className="pull-right"> </div>
<p></p>
<div className="row">
<div className="text-center">
<AclButton availableAcls={availableAcls} action="transfer" actionFunction={this.bulk} /> <AclButton availableAcls={availableAcls} action="transfer" actionFunction={this.bulk} />
<AclButton availableAcls={availableAcls} action="consign" actionFunction={this.bulk} /> <AclButton availableAcls={availableAcls} action="consign" actionFunction={this.bulk} />
<AclButton availableAcls={availableAcls} action="share" actionFunction={this.bulk} /> <AclButton availableAcls={availableAcls} action="share" actionFunction={this.bulk} />
@ -84,7 +104,13 @@ let PieceListToolbar = React.createClass({
</div> </div>
</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 ( return (
<div> <div>
<PieceListToolbar className="ascribe-piece-list-toolbar" />
<AccordionList <AccordionList
className="ascribe-accordion-list" className="ascribe-accordion-list"
changeOrder={this.accordionChangeOrder} changeOrder={this.accordionChangeOrder}
@ -60,7 +61,6 @@ let PieceList = React.createClass({
page={this.state.page} page={this.state.page}
pageSize={this.state.pageSize}> pageSize={this.state.pageSize}>
{this.state.pieceList.map((item, i) => { {this.state.pieceList.map((item, i) => {
return ( return (
<AccordionListItem <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" 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); 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/style';
@import './ascribe-fonts/ascribe-fonts'; @import './ascribe-fonts/ascribe-fonts';
@import 'ascribe-accordion_list'; @import 'ascribe-accordion_list';
@import 'ascribe-piece-list-toolbar';
.hidden { .hidden {
display: none; display: none;
@ -14,6 +15,12 @@
.navbar-default { .navbar-default {
border-left:0; border-left:0;
border-right:0; border-right:0;
margin-bottom: 3em;
}
.clear-margins-and-paddings {
padding-left:0;
padding-right:0;
} }
.ascribe-color { .ascribe-color {
@ -68,6 +75,9 @@
.ascribe-table-item-column > * { .ascribe-table-item-column > * {
display: table-cell; display: table-cell;
vertical-align: middle; vertical-align: middle;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
} }
.ascribe-table-item-selected { .ascribe-table-item-selected {
@ -78,10 +88,6 @@
cursor: default; cursor: default;
} }
.piece-list-toolbar {
height:3em;
}
.no-margin { .no-margin {
margin-right: 0; margin-right: 0;
margin-left: 0; margin-left: 0;