zoriya/flood
1
0
Fork 0
mirror of https://github.com/zoriya/flood.git synced 2026-05-28 09:27:35 +00:00
Code Issues Packages Projects Releases Wiki Activity

Improve form layout

Browse Source
This commit is contained in:
John Furrow
2016-06-02 22:29:13 -07:00
parent 2bb9112d13
commit 1c02bc492e
12 changed files with 92 additions and 60 deletions
Download Patch File Download Diff File Expand all files Collapse all files
client/source/sass/base/_form-elements.scss
+21 -7
View File
@@ -191,6 +191,27 @@ $modal--body--foreground: desaturate(lighten($foreground, 20%), 10%);
.form {
&__row {
display: flex;
& + .form__row {
margin-top: $spacing-unit;
}
}
&__column {
flex: 1;
padding: 0 $spacing-unit * 2/5;
&:first-child {
padding-left: 0;
}
&:last-child {
padding-right: 0;
}
}
&__label {
color: $form--label--foreground;
display: block;
@@ -198,11 +219,4 @@ $modal--body--foreground: desaturate(lighten($foreground, 20%), 10%);
line-height: 1;
margin-bottom: 0.35em;
}
&__row {
& + .form__row {
margin-top: $spacing-unit;
}
}
}
client/source/sass/components/_modals.scss
+7 -3
View File
@@ -29,11 +29,16 @@ $modal--content--padding--left: $spacing-unit;
$modal--actions--margin--top: $spacing-unit;
$modal--tabs--margin--top: $spacing-unit * 2/5;
$modal--tabs--margin--top: $spacing-unit * 1/5;
$modal--tabs--margin--right: $spacing-unit * -1/5;
$modal--tabs--margin--bottom: 0;
$modal--tabs--margin--left: $spacing-unit * -1/5;
$modal--vertical--tabs--margin--top: $spacing-unit * 1/5;
$modal--vertical--tabs--margin--right: 0;
$modal--vertical--tabs--margin--bottom: 0;
$modal--vertical--tabs--margin--left: $modal--padding--horizontal * -1;
$modal--tabs--padding--top: $spacing-unit * 1/5;
$modal--tabs--padding--right: $spacing-unit * 1/5;
$modal--tabs--padding--bottom: $spacing-unit * 2/5;
@@ -118,7 +123,6 @@ $modal--tabs--in-body--background: #11171d;
flex: 0 0 auto;
font-size: 1.25em;
font-weight: 400;
line-height: 1;
overflow: hidden;
padding: $modal--padding--vertical $modal--padding--horizontal;
@@ -312,7 +316,7 @@ $modal--tabs--in-body--background: #11171d;
.modal {
&__tabs {
margin: $modal--padding--vertical 0 0 $modal--padding--horizontal * -1;
margin: $modal--vertical--tabs--margin--top $modal--vertical--tabs--margin--right $modal--vertical--tabs--margin--bottom $modal--vertical--tabs--margin--left;
.modal {
client/source/sass/components/_torrent-details-panel.scss
-1
View File
@@ -38,7 +38,6 @@ $torrent-details--directory-tree--parent-directory--icon--fill: rgba(#3f5465, 0.
color: inherit;
font-size: inherit;
font-weight: inherit;
margin-bottom: $spacing-unit * 2/5;
}
&__sub-heading {
client/source/scripts/components/forms/TextboxRepeater.js
+11 -8
View File
@@ -43,18 +43,21 @@ export default class TextboxRepeater extends React.Component {
return (
<div className="textbox__wrapper form__row" key={index}>
<input className={inputClasses}
onChange={this.handleTextboxChange.bind(textbox, index)}
placeholder={this.props.placeholder}
value={textbox.value}
type="text" />
<div className="floating-action__group">
{removeButton}
{addButton}
<div className="form__column">
<input className={inputClasses}
onChange={this.handleTextboxChange.bind(textbox, index)}
placeholder={this.props.placeholder}
value={textbox.value}
type="text" />
<div className="floating-action__group">
{removeButton}
{addButton}
</div>
</div>
</div>
);
});
return textboxes;
}
client/source/scripts/components/modals/AddTorrentsByFile.js
+6 -4
View File
@@ -130,10 +130,12 @@ export default class AddTorrentsByFile extends React.Component {
return (
<div className="form">
<div className="form__row">
<label className="form__label">
Torrents
</label>
{this.getModalContent()}
<div className="form__column">
<label className="form__label">
Torrents
</label>
{this.getModalContent()}
</div>
</div>
<AddTorrentsDestination onChange={this.handleDestinationChange} />
<AddTorrentsActions dismiss={this.props.dismissModal}
client/source/scripts/components/modals/AddTorrentsByURL.js
+13 -9
View File
@@ -73,7 +73,9 @@ export default class AddTorrentsByURL extends React.Component {
if (this.state.addTorrentsError) {
error = (
<div className="form__row">
{this.state.addTorrentsError}
<div className="form__column">
{this.state.addTorrentsError}
</div>
</div>
);
}
@@ -82,14 +84,16 @@ export default class AddTorrentsByURL extends React.Component {
<div className="form">
{error}
<div className="form__row">
<label className="form__label">
Torrents
</label>
<TextboxRepeater placeholder="Torrent URL"
handleTextboxAdd={this.handleUrlAdd}
handleTextboxChange={this.handleUrlChange}
handleTextboxRemove={this.handleUrlRemove}
textboxes={this.state.urlTextboxes} />
<div className="form__column">
<label className="form__label">
Torrents
</label>
<TextboxRepeater placeholder="Torrent URL"
handleTextboxAdd={this.handleUrlAdd}
handleTextboxChange={this.handleUrlChange}
handleTextboxRemove={this.handleUrlRemove}
textboxes={this.state.urlTextboxes} />
</div>
</div>
<AddTorrentsDestination onChange={this.handleDestinationChange} />
<AddTorrentsActions dismiss={this.props.dismissModal}
client/source/scripts/components/modals/AddTorrentsDestination.js
+10 -8
View File
@@ -44,14 +44,16 @@ export default class AddTorrentsDestination extends React.Component {
return (
<div className="form__row">
<label className="form__label">
Destination
</label>
<input className={textboxClasses}
onChange={this.handleDestinationChange}
placeholder="Destination"
value={this.state.destination}
type="text" />
<div className="form__column">
<label className="form__label">
Destination
</label>
<input className={textboxClasses}
onChange={this.handleDestinationChange}
placeholder="Destination"
value={this.state.destination}
type="text" />
</div>
</div>
);
}
client/source/scripts/components/modals/ModalActions.js
+1 -1
View File
@@ -30,7 +30,7 @@ export default class ModalActions extends React.Component {
});
return (
<div className="modal__button-group form__row">
<div className="modal__button-group">
{buttons}
</div>
);
client/source/scripts/components/modals/MoveTorrents.js
+3 -1
View File
@@ -125,7 +125,9 @@ export default class MoveTorrents extends React.Component {
<AddTorrentsDestination onChange={this.handleDestinationChange}
suggested={this.state.originalSource} />
<div className="form__row">
<Checkbox onChange={this.handleCheckboxChange}>Move data</Checkbox>
<div className="form__column">
<Checkbox onChange={this.handleCheckboxChange}>Move data</Checkbox>
</div>
</div>
</div>
);
client/source/scripts/components/modals/SettingsModal.js
+2 -2
View File
@@ -4,8 +4,8 @@ import React from 'react';
import EventTypes from '../../constants/EventTypes';
import LoadingIndicatorDots from '../icons/LoadingIndicatorDots';
import Modal from './Modal';
import SettingsSpeedLimit from './SettingsSpeedLimit';
import SettingsStore from '../../stores/SettingsStore';
import SpeedLimitTab from '../settings/SpeedLimitTab';
const METHODS_TO_BIND = [
'handleSaveSettingsClick',
@@ -124,7 +124,7 @@ export default class SettingsModal extends React.Component {
render() {
let tabs = {
'speed-limit': {
content: SettingsSpeedLimit,
content: SpeedLimitTab,
props: {
onSettingsChange: this.handleSettingsChange,
settings: this.state.settings
client/source/scripts/components/modals/SettingsSpeedLimit.js → client/source/scripts/components/settings/SpeedLimitTab.js
+17 -13
View File
@@ -2,7 +2,7 @@ import React from 'react';
const METHODS_TO_BIND = ['handleDownloadTextChange', 'handleUploadTextChange'];
export default class SettingsSpeedLimit extends React.Component {
export default class SpeedLimitTab extends React.Component {
constructor() {
super();
@@ -107,20 +107,24 @@ export default class SettingsSpeedLimit extends React.Component {
</p>
<div className="form">
<div className="form__row">
<label className="form__label">
Download Presets
</label>
<input className="textbox" type="text"
onChange={this.handleDownloadTextChange}
value={downloadValue} />
<div className="form__column">
<label className="form__label">
Download Presets
</label>
<input className="textbox" type="text"
onChange={this.handleDownloadTextChange}
value={downloadValue} />
</div>
</div>
<div className="form__row">
<label className="form__label">
Upload Presets
</label>
<input className="textbox" type="text"
onChange={this.handleUploadTextChange}
value={uploadValue} />
<div className="form__column">
<label className="form__label">
Upload Presets
</label>
<input className="textbox" type="text"
onChange={this.handleUploadTextChange}
value={uploadValue} />
</div>
</div>
</div>
</div>
server/models/client.js
+1 -3
View File
@@ -34,9 +34,7 @@ var client = {
// Set the callback for only the last request.
if (index === files.length - 1) {
fileRequest.onComplete((data) => {
callback(data);
});
fileRequest.onComplete(callback);
}
fileRequest.send();