From 11d3b0fa8dac629a1ff8ff79396ca9774a1fd047 Mon Sep 17 00:00:00 2001 From: Stefan Zermatten Date: Thu, 18 Jul 2019 14:36:39 +0200 Subject: [PATCH] Improved style of attribute form --- .../api/creature/properties/Attributes.js | 6 +- app/imports/api/library/LibraryNodes.js | 1 - .../ui/components/global/SmartSelect.vue | 1 + .../ui/components/global/TextField.vue | 1 + .../properties/attributes/AttributeForm.vue | 229 ++++++++++-------- app/imports/ui/styles/centeredInputs.css | 3 + app/imports/ui/styles/largeFormatInputs.css | 6 + app/imports/ui/styles/stylesIndex.js | 2 + 8 files changed, 145 insertions(+), 104 deletions(-) create mode 100644 app/imports/ui/styles/centeredInputs.css create mode 100644 app/imports/ui/styles/largeFormatInputs.css diff --git a/app/imports/api/creature/properties/Attributes.js b/app/imports/api/creature/properties/Attributes.js index 81dcd4ed..3821a5b1 100644 --- a/app/imports/api/creature/properties/Attributes.js +++ b/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 - adjustment: { + // The damage done to the attribute, always positive + damage: { type: SimpleSchema.Integer, optional: true, - max: 0, + min: 0, }, // Can the value be decimal? decimal: { diff --git a/app/imports/api/library/LibraryNodes.js b/app/imports/api/library/LibraryNodes.js index 277d8b31..eecfa76d 100644 --- a/app/imports/api/library/LibraryNodes.js +++ b/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'); diff --git a/app/imports/ui/components/global/SmartSelect.vue b/app/imports/ui/components/global/SmartSelect.vue index a0b524a0..6298f814 100644 --- a/app/imports/ui/components/global/SmartSelect.vue +++ b/app/imports/ui/components/global/SmartSelect.vue @@ -8,6 +8,7 @@ @change="change" @focus="focused = true" @blur="focused = false" + box > diff --git a/app/imports/ui/components/global/TextField.vue b/app/imports/ui/components/global/TextField.vue index 4af470ce..b542c338 100644 --- a/app/imports/ui/components/global/TextField.vue +++ b/app/imports/ui/components/global/TextField.vue @@ -7,6 +7,7 @@ @input="input" @focus="focused = true" @blur="focused = false" + box /> diff --git a/app/imports/ui/creature/properties/attributes/AttributeForm.vue b/app/imports/ui/creature/properties/attributes/AttributeForm.vue index c96344aa..4803d93e 100644 --- a/app/imports/ui/creature/properties/attributes/AttributeForm.vue +++ b/app/imports/ui/creature/properties/attributes/AttributeForm.vue @@ -1,37 +1,51 @@ @@ -82,51 +95,67 @@ }, debounceTime: Number, }, - computed: { - damage(){ - return this.model.adjustment && -this.model.adjustment - }, + data(){ + let data = { + 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', - } - ] - }}, }; diff --git a/app/imports/ui/styles/centeredInputs.css b/app/imports/ui/styles/centeredInputs.css new file mode 100644 index 00000000..527cc41a --- /dev/null +++ b/app/imports/ui/styles/centeredInputs.css @@ -0,0 +1,3 @@ +.text-xs-center input { + text-align: center; +} diff --git a/app/imports/ui/styles/largeFormatInputs.css b/app/imports/ui/styles/largeFormatInputs.css new file mode 100644 index 00000000..f75b3659 --- /dev/null +++ b/app/imports/ui/styles/largeFormatInputs.css @@ -0,0 +1,6 @@ +.large-format input { + font-size: 34px; + font-weight: 400; + height: 34px; + max-height: 60px; +} diff --git a/app/imports/ui/styles/stylesIndex.js b/app/imports/ui/styles/stylesIndex.js index bf8bcfe9..6b55d439 100644 --- a/app/imports/ui/styles/stylesIndex.js +++ b/app/imports/ui/styles/stylesIndex.js @@ -1,2 +1,4 @@ import './speedDial.css'; import './inheritBackgrounds.css'; +import './centeredInputs.css'; +import './largeFormatInputs.css';