jschaufuss/DiceCloud
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Improved style of attribute form

Browse Source
This commit is contained in:
Stefan Zermatten
2019-07-18 14:36:39 +02:00
parent d28d6de684
commit 11d3b0fa8d
8 changed files with 145 additions and 104 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
app/imports/api/creature/properties/Attributes.js
View File

@@ -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: {

1
app/imports/api/library/LibraryNodes.js
View File

@@ -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');

1
app/imports/ui/components/global/SmartSelect.vue
View File

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

1
app/imports/ui/components/global/TextField.vue
View File

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

229
app/imports/ui/creature/properties/attributes/AttributeForm.vue
View File

@@ -1,37 +1,51 @@
<template lang="html">
<div>
<text-field
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"
@change="(variableName, ack) => $emit('change', {variableName}, ack)"
hint="Use this name in formulae to reference this attribute"
:error-messages="errors.variableName"
:debounce-time="debounceTime"
/>
<text-field
label="Base Value"
type="number"
:value="model.baseValue"
@change="(baseValue, ack) => $emit('change', {baseValue}, ack)"
hint="This is the value of the attribute before effects are applied"
:error-messages="errors.baseValue"
:debounce-time="debounceTime"
/>
<text-field
label="Damage"
type="number"
:value="damage"
@change="(damage, ack) => $emit('change', {adjustment: -damage || damage}, ack)"
:error-messages="errors.adjustment"
:debounce-time="debounceTime"
/>
<div class="attribute-form">
<div class="layout column align-center">
<text-field
label="Base Value"
type="number"
class="base-value-field text-xs-center large-format no-flex"
:value="model.baseValue"
@change="(baseValue, ack) => $emit('change', {baseValue}, ack)"
hint="This is the value of the attribute before effects are applied"
:error-messages="errors.baseValue"
:debounce-time="debounceTime"
/>
<v-switch
label="Allow decimal values"
class="no-flex"
:value="model.decimal"
:error-messages="errors.decimal"
@change="e => $emit('change', {decimal: !!e})"
/>
<text-field
label="Damage"
type="number"
class="damage-field no-flex text-xs-center"
:value="model.damage"
@change="(damage, ack) => $emit('change', {damage}, ack)"
:error-messages="errors.adjustment"
:debounce-time="debounceTime"
/>
</div>
<div class="layout row wrap">
<text-field
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
label="Allow decimal values"
:value="model.decimal"
:error-messages="errors.decimal"
@change="e => $emit('change', {decimal: !!e})"
/>
<smart-select
label="Reset"
clearable
:items="resetOptions"
:value="model.reset"
:error-messages="errors.reset"
:menu-props="{auto: true, lazy: true}"
@change="(reset, ack) => $emit('change', {reset}, ack)"
:debounce-time="debounceTime"
/>
<text-field
label="Reset Multiplier"
type="number"
:value="model.resetMultiplier"
:error-messages="errors.resetMultiplier"
@change="(resetMultiplier, ack) => $emit('change', {resetMultiplier}, ack)"
hint="Some attributes, like hit dice, only reset by half their total on a long rest"
:debounce-time="debounceTime"
/>
<div class="layout row wrap">
<smart-select
label="Reset"
clearable
style="flex-basis: 300px;"
:items="resetOptions"
:value="model.reset"
:error-messages="errors.reset"
:menu-props="{auto: true, lazy: true}"
@change="(reset, ack) => $emit('change', {reset}, ack)"
:debounce-time="debounceTime"
/>
<text-field
label="Reset Multiplier"
type="number"
style="flex-basis: 400px;"
:value="model.resetMultiplier"
:error-messages="errors.resetMultiplier"
@change="(resetMultiplier, ack) => $emit('change', {resetMultiplier}, ack)"
hint="Some attributes, like hit dice, only reset by half their total on a long rest"
:debounce-time="debounceTime"
/>
</div>
</div>
</template>
@@ -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',
}
]
}},
};
</script>
<style lang="css" scoped>
.no-flex {
flex: initial;
}
.layout.row.wrap {
margin-right: -8px;
}
.layout.row.wrap > *{
margin-right: 8px;
}
</style>

3
app/imports/ui/styles/centeredInputs.css Normal file
View File

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

6
app/imports/ui/styles/largeFormatInputs.css Normal file
View File

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

2
app/imports/ui/styles/stylesIndex.js
View File

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