Changed item editor window to column layout

js/Variables.scss

@@ -14,6 +14,7 @@ $color5: #a09b8c;
 $color6: #cdbe91;
 $color7: #c89b3c;
 $color8: #463714;
+$color9: #1e282d;
 
 $link-color1: #0080b9;
 $link-color2: #52abd1;

js/components/BorderButton.scss

@@ -1,7 +1,8 @@
 .btn, input[type="submit"] {
 	text-align: center;
 	background-color: #1a1a1a;
-	padding: 3px 14px 6px;
+	padding: 3px 16px 6px;
+	// padding: 3px 14px 6px;
 	letter-spacing: 0.05em;
 	border: 2px solid transparent;
 	border-image: linear-gradient(to bottom, #c6a767 0%, #ad8736 10%, #9a7830 76%, #6d5024 100%) 1 1 1 1;

js/components/Button.js

@@ -4,6 +4,7 @@ import classNames from 'classnames';
 export default class Button extends Component {
 
 	static propTypes = {
+		autoWidth: PropTypes.bool,
 		className: PropTypes.any,
 		disabled: PropTypes.bool,
 		fullWidth: PropTypes.bool,
@@ -14,13 +15,14 @@ export default class Button extends Component {
 	
 	render() {
 		
-		const { className, primary, fullWidth, disabled, round, children, onClick, ...other } = this.props;
+		const { autoWidth, className, primary, fullWidth, disabled, round, children, onClick, ...other } = this.props;
 
 		const allClassNames = classNames({
 			'btn': true,
 			'btn-round': round,
 			'btn-text': !round,
 			'btn-primary': primary,
+			'autoWidth': autoWidth,
 			'fullWidth': fullWidth,
 			'disabled': disabled,
 			[className]: className

js/components/Button.scss

@@ -14,4 +14,9 @@
 		color: #31353a;
 		pointer-events: none;
 	}
+
+	&.autoWidth {
+		width: auto;
+		min-width: auto;
+	}
 }

js/components/Hr.js

@@ -0,0 +1,10 @@
+import React, { Component } from 'react';
+
+export default class Hr extends Component {
+
+	render() {
+		return (
+			<hr {...this.props} />
+		);
+	}
+}

js/components/TextField.js

@@ -35,7 +35,11 @@ export default class TextField extends Component {
 
 		let { className, countCurrent, countMax, disabled, fullWidth, hint, label, onChange, onKeyDown, type, value } = this.props;
 
-		className = classNames('textfield', fullWidth && 'fullWidth', disabled && 'disabled', className);
+		className = classNames(className, {
+			'textfield': true,
+			'fullWidth': fullWidth,
+			'disabled': disabled
+		});
 
 		const hintElement = hint ? (
 			<div className={classNames('textfield-hint', value && 'hide')}>{hint}</div>

js/utils/data/Item.js

@@ -4,8 +4,51 @@ export default class Item extends Core {
 	
 	constructor(args) {
 		super(args);
-		let { price, weight } = args;
+		let {
+			price,
+			weight,
+			gr,
+			ct,
+			ddn,
+			dds,
+			df,
+			db,
+			at,
+			pa,
+			re,
+			length,
+			stp,
+			range,
+			rt,
+			am,
+			pro,
+			enc,
+			addp
+		} = args;
+
 		this.price = price;
 		this.weight = weight;
+		this.gr = gr;
+		
+		this.combattechnique = ct;
+		this.damageDiceNumber = ddn;
+		this.damageDiceSides = dds;
+		this.damageFlat = df;
+		this.damageBonus = db;
+		this.at = at;
+		this.pa = pa;
+		this.reach = re;
+		this.length = length;
+		this.stp = stp;
+		this.range = range;
+		this.reloadtime = rt;
+		this.ammunition = am;
+		this.pro = pro;
+		this.enc = enc;
+		this.addpenalties = addp;
+
+		this.number = 1;
+		this.where = '';
+		this.template = 'ITEMTPL_0';
 	}
 }

js/views/items/ItemEditor.js

@@ -2,6 +2,8 @@ import Checkbox from '../../components/Checkbox';
 import CombatTechniquesStore from '../../stores/CombatTechniquesStore';
 import Dialog from '../../components/Dialog';
 import Dropdown from '../../components/Dropdown';
+import Hr from '../../components/Hr';
+import IconButton from '../../components/IconButton';
 import Label from '../../components/Label';
 import React, { Component, PropTypes } from 'react';
 import TextField from '../../components/TextField';
@@ -61,17 +63,26 @@ export default class ItemEditor extends Component {
 					{
 						label: 'Speichern',
 						onClick: null,
+						autoWidth: true,
 						disabled: true
 					}
 				]}>
 				<div className="main">
-					<TextField
-						className="name"
-						label="Name"
-						value={name}
-						onChange={this.onEvent.bind(null, 'name')}
-						/>
-					<div className="container">
+					<div className="row">
+						<TextField
+							className="number"
+							label="Menge"
+							value={amount}
+							onChange={this.onEvent.bind(null, 'amount')}
+							/>
+						<TextField
+							className="name"
+							label="Name"
+							value={name}
+							onChange={this.onEvent.bind(null, 'name')}
+							/>
+					</div>
+					<div className="row">
 						<TextField
 							className="price"
 							label="Preis in S"
@@ -84,12 +95,6 @@ export default class ItemEditor extends Component {
 							value={weight}
 							onChange={this.onEvent.bind(null, 'weight')}
 							/>
-						<TextField
-							className="amount"
-							label="Menge"
-							value={amount}
-							onChange={this.onEvent.bind(null, 'amount')}
-							/>
 						<TextField
 							className="where"
 							label="Wo getragen"
@@ -97,207 +102,225 @@ export default class ItemEditor extends Component {
 							onChange={this.onEvent.bind(null, 'where')}
 							/>
 					</div>
-					<Dropdown
-						className="gr"
-						label="Art"
-						value={gr}
-						options={[
-							['Allgemein',5],
-							['Nahkampfwaffe',1],
-							['Fernkampfwaffe',2],
-							['Rüstung',3],
-							['Munition',4]
-						]}
-						onChange={this.onValue.bind(null, 'gr')}
-						/>
-					<Dropdown
-						className="tpl"
-						label="Vorlage"
-						hint="Keine"
-						value={tpl}
-						options={[]}
-						onChange={this.onValue.bind(null, 'tpl')}
-						/>
+					<div className="row">
+						<Dropdown
+							className="gr"
+							label="Art"
+							value={gr}
+							options={[
+								['Allgemein',5],
+								['Nahkampfwaffe',1],
+								['Fernkampfwaffe',2],
+								['Rüstung',3],
+								['Munition',4]
+							]}
+							onChange={this.onValue.bind(null, 'gr')}
+							/>
+					</div>
+					<Hr />
+					<div className="row">
+						<Dropdown
+							className="tpl"
+							label="Vorlage"
+							hint="Keine"
+							value={tpl}
+							options={[]}
+							onChange={this.onValue.bind(null, 'tpl')}
+							/>
+						<IconButton
+							icon="&#xE876;"
+							disabled
+							/>
+						<IconButton
+							icon="&#xE876;"
+							disabled
+							/>
+					</div>
 				</div>
-				{
-					gr === 1 ? (
-						<div className="melee">
+				{ gr === 1 ? ( <div className="melee">
+					<Hr />
+					<div className="row">
+						<Dropdown
+							className="ct"
+							label="Kampftechnik"
+							hint="Keine"
+							value={ct}
+							options={CombatTechniquesStore.getAll().filter(e => e.gr === 1).map(e => [e.name, e.id])}
+							onChange={this.onValue.bind(null, 'ct')}
+							/>
+					</div>
+					<div className="row">
+						<TextField
+							className="db"
+							label="Schadensb."
+							value={dpb}
+							onChange={this.onEvent.bind(null, 'dpb')}
+							/>
+						<div className="container">
+							<Label text="Schaden" />
+							<TextField
+								className="ddn"
+								value={dpdn}
+								onChange={this.onEvent.bind(null, 'dpdn')}
+								/>
 							<Dropdown
-								className="ct"
-								label="Kampftechnik"
-								hint="Keine"
-								value={ct}
-								options={CombatTechniquesStore.getAll().filter(e => e.gr === 1).map(e => [e.name, e.id])}
-								onChange={this.onValue.bind(null, 'ct')}
+								className="dds"
+								hint="W"
+								value={dpds}
+								options={[['W3',3],['W6',6],['W20',20]]}
+								onChange={this.onValue.bind(null, 'dpds')}
 								/>
 							<TextField
-								className="dpb"
-								label="Schadensb."
-								value={dpb}
-								onChange={this.onEvent.bind(null, 'dpb')}
+								className="df"
+								value={dpf}
+								onChange={this.onEvent.bind(null, 'dpf')}
 								/>
-							<div className="container">
-								<Label text="Schaden" />
-								<TextField
-									className="dpdn"
-									value={dpdn}
-									onChange={this.onEvent.bind(null, 'dpdn')}
-									/>
-								<Dropdown
-									className="dpds"
-									hint="W"
-									value={dpds}
-									options={[['W3',3],['W6',6],['W20',20]]}
-									onChange={this.onValue.bind(null, 'dpds')}
-									/>
-								<TextField
-									className="dpf"
-									value={dpf}
-									onChange={this.onEvent.bind(null, 'dpf')}
-									/>
-							</div>
-							<div className="container">
-								<Label text="AT/PA-Mod" />
-								<TextField
-									className="at"
-									value={at}
-									onChange={this.onEvent.bind(null, 'at')}
-									/>
-								<TextField
-									className="pa"
-									value={pa}
-									onChange={this.onEvent.bind(null, 'pa')}
-									/>
-							</div>
-							<Dropdown
-								className="re"
-								label="Reichweite"
-								hint="Auswählen"
-								value={re}
-								options={[['Kurz',1],['Mittel',2],['Lang',3]]}
-								onChange={this.onValue.bind(null, 're')}
-								/>
-							{
-								ct === 'CT_10' ? (
-									<TextField
-										className="stp"
-										label="Strukturp."
-										value={stp}
-										onChange={this.onEvent.bind(null, 'length')}
-										/>
-								) : (
-									<TextField
-										className="length"
-										label="Länge in Hf."
-										value={length}
-										onChange={this.onEvent.bind(null, 'length')}
-										/>
-								)
-							}
 						</div>
-					) : null
-				}
-				{
-					gr === 2 ? (
-						<div className="ranged">
-							<Dropdown
-								className="ct"
-								label="Kampftechnik"
-								hint="Keine"
-								value={ct}
-								options={CombatTechniquesStore.getAll().filter(e => e.gr === 2).map(e => [e.name, e.id])}
-								onChange={this.onValue.bind(null, 'ct')}
+					</div>
+					<div className="row">
+						<Dropdown
+							className="re"
+							label="Reichweite"
+							hint="Auswählen"
+							value={re}
+							options={[['Kurz',1],['Mittel',2],['Lang',3]]}
+							onChange={this.onValue.bind(null, 're')}
+							/>
+						<div className="container">
+							<Label text="AT/PA-Mod" />
+							<TextField
+								className="at"
+								value={at}
+								onChange={this.onEvent.bind(null, 'at')}
 								/>
 							<TextField
-								className="rt"
-								label="Ladezeiten"
-								value={rt}
-								onChange={this.onEvent.bind(null, 'rt')}
+								className="pa"
+								value={pa}
+								onChange={this.onEvent.bind(null, 'pa')}
+								disabled={ct === 'CT_6'}
 								/>
-							<div className="container">
-								<Label text="Schaden" />
-								<TextField
-									className="dpdn"
-									value={dpdn}
-									onChange={this.onEvent.bind(null, 'dpdn')}
-									/>
-								<Dropdown
-									className="dpds"
-									value={dpds}
-									options={[['W3',3],['W6',6],['W20',20]]}
-									onChange={this.onValue.bind(null, 'dpds')}
-									/>
-								<TextField
-									className="dpf"
-									value={dpf}
-									onChange={this.onEvent.bind(null, 'dpf')}
-									/>
-							</div>
-							<div className="container">
-								<TextField
-									className="rb1"
-									label="Nah"
-									value={rb1}
-									onChange={this.onValue.bind(null, 'rb1')}
-									/>
-								<TextField
-									className="rb2"
-									label="Mittel"
-									value={rb2}
-									onChange={this.onValue.bind(null, 'rb2')}
-									/>
-								<TextField
-									className="rb3"
-									label="Weit"
-									value={rb3}
-									onChange={this.onValue.bind(null, 'rb3')}
-									/>
-							</div>
-							<Dropdown
-								className="am"
-								label="Munition"
-								hint="Keine"
-								value={am}
-								options={[
-									['Keine',null]
-								]}
-								onChange={this.onValue.bind(null, 'am')}
+						</div>
+						{ ct === 'CT_10' ? (
+							<TextField
+								className="stp"
+								label="Strukturp."
+								value={stp}
+								onChange={this.onEvent.bind(null, 'length')}
 								/>
+						) : (
 							<TextField
 								className="length"
 								label="Länge in Hf."
 								value={length}
 								onChange={this.onEvent.bind(null, 'length')}
 								/>
-						</div>
-					) : null
-				}
-				{
-					gr === 3 ? (
-						<div className="armor">
-							<div className="container">
-								<TextField
-									className="pro"
-									label="RS"
-									value={pro}
-									onChange={this.onEvent.bind(null, 'pro')}
-									/>
-								<TextField
-									className="enc"
-									label="BE"
-									value={enc}
-									onChange={this.onEvent.bind(null, 'enc')}
-									/>
-							</div>
-							<Checkbox
-								className="addp"
-								label="Zusätzliche Abzüge"
-								checked={addp}
-								onClick={this.onSwitch.bind(null, 'addp')}
+						) }
+					</div>
+				</div> ) : null }
+				{ gr === 2 ? ( <div className="ranged">
+					<Hr />
+					<div className="row">
+						<Dropdown
+							className="ct"
+							label="Kampftechnik"
+							hint="Keine"
+							value={ct}
+							options={CombatTechniquesStore.getAll().filter(e => e.gr === 2).map(e => [e.name, e.id])}
+							onChange={this.onValue.bind(null, 'ct')}
+							/>
+					</div>
+					<div className="row">
+						<TextField
+							className="rt"
+							label="Ladezeiten"
+							value={rt}
+							onChange={this.onEvent.bind(null, 'rt')}
+							/>
+						<div className="container">
+							<Label text="Schaden" />
+							<TextField
+								className="ddn"
+								value={dpdn}
+								onChange={this.onEvent.bind(null, 'dpdn')}
+								/>
+							<Dropdown
+								className="dds"
+								hint="W"
+								value={dpds}
+								options={[['W3',3],['W6',6],['W20',20]]}
+								onChange={this.onValue.bind(null, 'dpds')}
+								/>
+							<TextField
+								className="df"
+								value={dpf}
+								onChange={this.onEvent.bind(null, 'dpf')}
 								/>
 						</div>
-					) : null
-				}
+					</div>
+					<div className="row">
+						<div className="container">
+							<TextField
+								className="rb1"
+								label="Nah"
+								value={rb1}
+								onChange={this.onValue.bind(null, 'rb1')}
+								/>
+							<TextField
+								className="rb2"
+								label="Mittel"
+								value={rb2}
+								onChange={this.onValue.bind(null, 'rb2')}
+								/>
+							<TextField
+								className="rb3"
+								label="Weit"
+								value={rb3}
+								onChange={this.onValue.bind(null, 'rb3')}
+								/>
+						</div>
+						<Dropdown
+							className="am"
+							label="Munition"
+							hint="Keine"
+							value={am}
+							options={[
+								['Keine',null]
+							]}
+							onChange={this.onValue.bind(null, 'am')}
+							/>
+						<TextField
+							className="length"
+							label="Länge in Hf."
+							value={length}
+							onChange={this.onEvent.bind(null, 'length')}
+							/>
+					</div>
+				</div> ) : null }
+				{ gr === 3 ? ( <div className="armor">
+					<Hr />
+					<div className="row">
+						<div className="container">
+							<TextField
+								className="pro"
+								label="RS"
+								value={pro}
+								onChange={this.onEvent.bind(null, 'pro')}
+								/>
+							<TextField
+								className="enc"
+								label="BE"
+								value={enc}
+								onChange={this.onEvent.bind(null, 'enc')}
+								/>
+						</div>
+						<Checkbox
+							className="addp"
+							label="Zusätzliche Abzüge"
+							checked={addp}
+							onClick={this.onSwitch.bind(null, 'addp')}
+							/>
+					</div>
+				</div> ) : null }
 			</Dialog>
 		);
 	}

js/views/items/ItemEditor.scss

@@ -1,79 +1,108 @@
 #item-editor {
 	.modal-container {
-		width: 820px;
-		height: 250px;
+		// width: 820px;
+		width: 400px;
+		// height: 250px;
 		// height: 740px;
 
 		.modal-content-inner {
+			display: flex;
+			flex-direction: column;
+
 			> div {
 				display: flex;
-				align-items: flex-end;
+				flex-direction: column;
 
-				&.main > div.container {
-					flex-grow: 2.3;
-				}	
-
-				&.armor > div.container {
-					flex: none;
-				}	
-
-				> div.container {
-					position: relative;
-					height: 50px;
+				> div.row {
 					display: flex;
+					margin-top: 10px;
 					align-items: flex-end;
 
-					> label {
-						position: absolute;
+					&:first-child {
+						margin-top: 0;
+					}
 
-						+ div:nth-child(2) {
-							margin-left: 0;
+					> div:not(:first-child) {
+						margin-left: 20px;
+					}
+
+					> div, > div.container > div {
+						flex: 1 1 0;
+						margin: 0;
+					}
+
+					div {
+						&.textfield, &.dropdown {
+							width: auto;
 						}
 					}
 
-					> div:not(:first-child)  {
-						margin-left: 10px;
-					}
-				}
-
-				> div:not(:first-child) {
-					margin-left: 20px;
-				}
-
-				> div, > div.container > div {
-					flex: 1 1 0;
-					margin: 0;
-				}
-
-				div {
-					&.textfield, &.dropdown {
-						width: auto;
-					}
-				}
-
-				> div {
-					&.ct {
+					div.container {
+						position: relative;
+						height: 50px;
+						display: flex;
+						align-items: flex-end;
 						flex: none;
-						width: 165px;
-					}
-				}
 
-				> div.container > div {
-					&.dpdn, &.dpds, &.dpf, &.at, &.pa, &.rb1, &.rb2, &.rb3, &.pro, &.enc {
-						flex: none;
-					}
+						> label {
+							position: absolute;
 
-					&.dpds {
-						width: 65px;
-					}
+							+ div:nth-child(2) {
+								margin-left: 0;
+							}
+						}
 
-					&.dpdn, &.dpf, &.at, &.pa, &.rb1, &.rb2, &.rb3, &.pro, &.enc {
-						width: 40px;
-
-						input {
-							text-align: center;
+						> div:not(:first-child)  {
+							margin-left: 10px;
 						}
 					}
+
+					> div {
+						&.number, &.btn {
+							flex: none;
+						}
+
+						&.number {
+							width: 60px;
+						}
+
+						&.btn {
+							margin-left: 10px;
+						}
+
+						&.where {
+							flex-grow: 2;
+						}
+					}
+
+					> div.container > div {
+						&.ddn, &.dds, &.df, &.at, &.pa, &.rb1, &.rb2, &.rb3, &.pro, &.enc {
+							flex: none;
+						}
+
+						&.dds {
+							width: 65px;
+						}
+
+						&.ddn, &.df, &.at, &.pa, &.rb1, &.rb2, &.rb3, &.pro, &.enc {
+							width: 40px;
+
+							input {
+								text-align: center;
+							}
+						}
+					}
+				}
+			}
+
+			hr {
+				margin: 15px 0 5px;
+				border: none;
+				height: 1px;
+				background: $color9;
+
+				&:first-child {
+					margin-top: 5px;
 				}
 			}
 		}