Improved style of attribute form

app/imports/api/creature/properties/Attributes.js

@@ -57,11 +57,11 @@ let AttributeSchema = schema({
 		type: Number,
 		optional: true,
 	},
-	// The damage done to the attribute, always negative
+	// The damage done to the attribute, always positive
-  adjustment: {
+  damage: {
     type: SimpleSchema.Integer,
     optional: true,
-		max: 0,
+		min: 0,
   },
   // Can the value be decimal?
   decimal: {

app/imports/api/library/LibraryNodes.js

@@ -5,7 +5,6 @@ import librarySchemas from '/imports/api/library/librarySchemas.js';
 import Libraries from '/imports/api/library/Libraries.js';
 import { assertEditPermission } from '/imports/api/sharing/sharingPermissions.js';
 import getModifierFields from '/imports/api/getModifierFields.js';
-import simpleSchemaMixin from '/imports/api/creature/mixins/simpleSchemaMixin.js';
 
 let LibraryNodes = new Mongo.Collection('libraryNodes');
 

app/imports/ui/components/global/SmartSelect.vue

@@ -8,6 +8,7 @@
 		@change="change"
 		@focus="focused = true"
 		@blur="focused = false"
+		box
 	>
 		<slot name="prepend" slot="prepend"/>
 	</v-select>

app/imports/ui/components/global/TextField.vue

@@ -7,6 +7,7 @@
 		@input="input"
 		@focus="focused = true"
 		@blur="focused = false"
+		box
 	/>
 </template>
 

app/imports/ui/creature/properties/attributes/AttributeForm.vue

@@ -1,37 +1,51 @@
 <template lang="html">
-  <div>
+  <div class="attribute-form">
-  	<text-field
+		<div class="layout column align-center">
-			label="Name"
+			<text-field
-			:value="model.name"
+				label="Base Value"
-			@change="(name, ack) => $emit('change', {name}, ack)"
+				type="number"
-			:error-messages="errors.name"
+				class="base-value-field text-xs-center large-format no-flex"
-			:debounce-time="debounceTime"
+				:value="model.baseValue"
-		/>
+				@change="(baseValue, ack) => $emit('change', {baseValue}, ack)"
-		<text-field
+				hint="This is the value of the attribute before effects are applied"
-			label="Variable name"
+				:error-messages="errors.baseValue"
-			:value="model.variableName"
+				:debounce-time="debounceTime"
-			@change="(variableName, ack) => $emit('change', {variableName}, ack)"
+			/>
-			hint="Use this name in formulae to reference this attribute"
+			<v-switch
-			:error-messages="errors.variableName"
+				label="Allow decimal values"
-			:debounce-time="debounceTime"
+				class="no-flex"
-		/>
+				:value="model.decimal"
-		<text-field
+				:error-messages="errors.decimal"
-			label="Base Value"
+				@change="e => $emit('change', {decimal: !!e})"
-			type="number"
+			/>
-			:value="model.baseValue"
+			<text-field
-			@change="(baseValue, ack) => $emit('change', {baseValue}, ack)"
+				label="Damage"
-			hint="This is the value of the attribute before effects are applied"
+				type="number"
-			:error-messages="errors.baseValue"
+				class="damage-field no-flex text-xs-center"
-			:debounce-time="debounceTime"
+				:value="model.damage"
-		/>
+				@change="(damage, ack) => $emit('change', {damage}, ack)"
-		<text-field
+				:error-messages="errors.adjustment"
-			label="Damage"
+				:debounce-time="debounceTime"
-			type="number"
+			/>
-			:value="damage"
+		</div>
-			@change="(damage, ack) => $emit('change', {adjustment: -damage || damage}, ack)"
+		<div class="layout row wrap">
-			:error-messages="errors.adjustment"
+			<text-field
-			:debounce-time="debounceTime"
+				label="Name"
-		/>
+				:value="model.name"
+				@change="(name, ack) => $emit('change', {name}, ack)"
+				:error-messages="errors.name"
+				:debounce-time="debounceTime"
+			/>
+			<text-field
+				label="Variable name"
+				:value="model.variableName"
+				style="flex-basis: 300px;"
+				@change="(variableName, ack) => $emit('change', {variableName}, ack)"
+				hint="Use this name in formulae to reference this attribute"
+				:error-messages="errors.variableName"
+				:debounce-time="debounceTime"
+			/>
+		</div>
 		<smart-select
 			label="Type"
 			:items="attributeTypes"
@@ -39,33 +53,32 @@
 			:error-messages="errors.type"
 			:menu-props="{auto: true, lazy: true}"
 			@change="(type, ack) => $emit('change', {type}, ack)"
+			:hint="attributeTypeHints[model.type]"
 			:debounce-time="debounceTime"
 		/>
-		<v-switch
+		<div class="layout row wrap">
-			label="Allow decimal values"
+			<smart-select
-			:value="model.decimal"
+				label="Reset"
-			:error-messages="errors.decimal"
+				clearable
-			@change="e => $emit('change', {decimal: !!e})"
+				style="flex-basis: 300px;"
-		/>
+				:items="resetOptions"
-		<smart-select
+				:value="model.reset"
-			label="Reset"
+				:error-messages="errors.reset"
-			clearable
+				:menu-props="{auto: true, lazy: true}"
-			:items="resetOptions"
+				@change="(reset, ack) => $emit('change', {reset}, ack)"
-			:value="model.reset"
+				:debounce-time="debounceTime"
-			:error-messages="errors.reset"
+			/>
-			:menu-props="{auto: true, lazy: true}"
+			<text-field
-			@change="(reset, ack) => $emit('change', {reset}, ack)"
+				label="Reset Multiplier"
-			:debounce-time="debounceTime"
+				type="number"
-		/>
+				style="flex-basis: 400px;"
-		<text-field
+				:value="model.resetMultiplier"
-			label="Reset Multiplier"
+				:error-messages="errors.resetMultiplier"
-			type="number"
+				@change="(resetMultiplier, ack) => $emit('change', {resetMultiplier}, ack)"
-			:value="model.resetMultiplier"
+				hint="Some attributes, like hit dice, only reset by half their total on a long rest"
-			:error-messages="errors.resetMultiplier"
+				:debounce-time="debounceTime"
-			@change="(resetMultiplier, ack) => $emit('change', {resetMultiplier}, ack)"
+			/>
-			hint="Some attributes, like hit dice, only reset by half their total on a long rest"
+		</div>
-			:debounce-time="debounceTime"
-		/>
   </div>
 </template>
 
@@ -82,51 +95,67 @@
 			},
 			debounceTime: Number,
 		},
-		computed: {
+		data(){
-			damage(){
+			let data = {
-				return this.model.adjustment && -this.model.adjustment
+				attributeTypes: [
-			},
+					{
+						text: 'Ability score',
+						value: 'ability',
+						help: 'Ability scores are your primary attributes, like Strength and Intelligence',
+					}, {
+						text: 'Stat',
+						value: 'stat',
+						help: 'Stats are attributes with a numerical value like speed or carrying capacity',
+					}, {
+						text: 'Modifier',
+						value: 'modifier',
+						help: 'Modifiers are attributes that are added to rolls, like proficiency bonus',
+					}, {
+						text: 'Hit dice',
+						value: 'hitDice',
+					}, {
+						text: 'Health bar',
+						value: 'healthBar',
+					}, {
+						text: 'Resource',
+						value: 'resource',
+						help: 'Resources are attributes that are spent to fuel actions, like sorcery points or ki'
+					}, {
+						text: 'Spell slot',
+						value: 'spellSlot',
+					}, {
+						text: 'Utility',
+						value: 'utility',
+						help: 'Utility attributes aren\'t displayed on your character sheet, but can be referenced or used in calculations',
+					},
+				],
+				resetOptions: [
+					{
+						text: 'Short rest',
+						value: 'shortRest',
+					}, {
+						text: 'Long rest',
+						value: 'longRest',
+					}
+				]
+			};
+			data.attributeTypeHints = {};
+			data.attributeTypes.forEach(type => {
+				data.attributeTypeHints[type.value] = type.help;
+			});
+			return data;
 		},
-		data(){ return{
-			attributeTypes: [
-				{
-					text: 'Ability score',
-					value: 'ability',
-				}, {
-					text: 'Stat',
-					value: 'stat',
-				}, {
-					text: 'Modifier',
-					value: 'modifier',
-				}, {
-					text: 'Hit dice',
-					value: 'hitDice',
-				}, {
-					text: 'Health bar',
-					value: 'healthBar',
-				}, {
-					text: 'Resource',
-					value: 'resource',
-				}, {
-					text: 'Spell slot',
-					value: 'spellSlot',
-				}, {
-					text: 'Utility',
-					value: 'utility',
-				},
-			],
-			resetOptions: [
-				{
-					text: 'Short rest',
-					value: 'shortRest',
-				}, {
-					text: 'Long rest',
-					value: 'longRest',
-				}
-			]
-		}},
 	};
 </script>
 
 <style lang="css" scoped>
+	.no-flex {
+		flex: initial;
+	}
+	.layout.row.wrap {
+		margin-right: -8px;
+	}
+	.layout.row.wrap > *{
+		margin-right: 8px;
+	}
 </style>

app/imports/ui/styles/centeredInputs.css

@@ -0,0 +1,3 @@
+.text-xs-center input {
+  text-align: center;
+}

app/imports/ui/styles/largeFormatInputs.css

@@ -0,0 +1,6 @@
+.large-format input {
+  font-size: 34px;
+  font-weight: 400;
+  height: 34px;
+  max-height: 60px;
+}

app/imports/ui/styles/stylesIndex.js

@@ -1,2 +1,4 @@
 import './speedDial.css';
 import './inheritBackgrounds.css';
+import './centeredInputs.css';
+import './largeFormatInputs.css';