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

static styling of filter widget

Browse Source
This commit is contained in:
Tim Daubenschütz 2015-08-04 10:06:02 +02:00
parent ae8bc674d2
commit 7ee296c963
4 changed files with 34 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
js/components/ascribe_piece_list_bulk_modal/piece_list_bulk_modal_selected_editions_widget.js
View File

@ -1,7 +1,7 @@
'use strict'; 'use strict';
import React from 'react'; import React from 'react';
import { getLangText } from '../../utils/lang_utils.js' import { getLangText } from '../../utils/lang_utils.js';
let PieceListBulkModalSelectedEditionsWidget = React.createClass({ let PieceListBulkModalSelectedEditionsWidget = React.createClass({
propTypes: { propTypes: {

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

@ -2,6 +2,8 @@
import React from 'react'; import React from 'react';
import PieceListToolbarFilterWidget from './piece_list_toolbar_filter_widget';
import Input from 'react-bootstrap/lib/Input'; import Input from 'react-bootstrap/lib/Input';
import Glyphicon from 'react-bootstrap/lib/Glyphicon'; import Glyphicon from 'react-bootstrap/lib/Glyphicon';
import { getLangText } from '../../utils/lang_utils'; import { getLangText } from '../../utils/lang_utils';
@ -41,6 +43,9 @@ let PieceListToolbar = React.createClass({
onChange={this.searchFor} onChange={this.searchFor}
addonAfter={searchIcon} /> addonAfter={searchIcon} />
</span> </span>
<span className="pull-right">
<PieceListToolbarFilterWidget />
</span>
</div> </div>
</div> </div>
</div> </div>

19
js/components/ascribe_piece_list_toolbar/piece_list_toolbar_filter_widget.js
View File

@ -5,25 +5,28 @@ import React from 'react';
import Glyphicon from 'react-bootstrap/lib/Glyphicon'; import Glyphicon from 'react-bootstrap/lib/Glyphicon';
import DropdownButton from 'react-bootstrap/lib/DropdownButton'; import DropdownButton from 'react-bootstrap/lib/DropdownButton';
import MenuItem from 'react-bootstrap/lib/MenuItem'; import MenuItem from 'react-bootstrap/lib/MenuItem';
import { getLangText } from '../../utils/lang_utils.js' import { getLangText } from '../../utils/lang_utils.js';
let PieceListToolbarFilterWidgetFilter = React.createClass({ let PieceListToolbarFilterWidgetFilter = React.createClass({
render() { render() {
let filterIcon = <Glyphicon glyph='filter' className="filter-glyph"/>; let filterIcon = <Glyphicon glyph='filter' className="filter-glyph"/>;
return ( return (
<DropdownButton title={filterIcon}> <DropdownButton
title={filterIcon}
className="ascribe-piece-list-toolbar-filter-widget">
<li style={{'textAlign': 'center'}}> <li style={{'textAlign': 'center'}}>
<em>{getLangText('Show Pieces that')}:</em> <em>{getLangText('Show Pieces that')}:</em>
</li> </li>
<MenuItem eventKey='1'> <MenuItem eventKey='1' style={{'textAlign': 'center'}}>
<div className="checkbox"> <div className="checkbox-line">
{getLangText('I can transfer')} <input type="checkbox" /> <label>{getLangText('I can transfer')}<input type="checkbox" /></label>
</div> </div>
</MenuItem> </MenuItem>
<MenuItem eventKey='2'> <MenuItem eventKey='2' style={{'textAlign': 'center'}}>
<div className="checkbox"> <div className="checkbox-line">
{getLangText('I can consign')} <input type="checkbox" /> <label>{getLangText('I can consign')}<input type="checkbox" /></label>
</div> </div>
</MenuItem> </MenuItem>
</DropdownButton> </DropdownButton>

17
sass/ascribe_piece_list_toolbar.scss
View File

@ -6,4 +6,21 @@
.search-bar { .search-bar {
max-width: 160px; max-width: 160px;
input {
height: 33px;
}
}
.ascribe-piece-list-toolbar-filter-widget {
margin-right: 1em;
.checkbox-line {
label {
font-weight: normal;
}
input {
position: relative;
top: 2px;
margin-left: 10px;
}
}
} }