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

Created smart toggles for limited choice fields

Browse Source
This commit is contained in:
Stefan Zermatten
2023-05-16 19:28:32 +02:00
parent baf99c65b3
commit 2c6cd7d243
8 changed files with 216 additions and 157 deletions
Download Patch File Download Diff File Expand all files Collapse all files

70
app/imports/client/ui/components/global/SmartToggle.vue Normal file
View File

@@ -0,0 +1,70 @@
<template lang="html">
<outlined-input
:name="label"
class="mb-6 pt-1"
>
<v-btn-toggle
v-bind="$attrs"
mandatory
tile
group
:value="safeValue"
color="accent"
style="flex-wrap: wrap;"
>
<v-btn
v-for="(option, i) in options"
:key="`toggle-option-${i}`"
:value="option.value"
:disabled="isDisabled || (clickedValue != option.value && loading)"
:plain="clickedValue != option.value && loading"
:loading="clickedValue == option.value && loading"
height="42"
v-on="(value == option.value) ? {} : { click() { click(option.value) } }"
>
{{ option.name }}
</v-btn>
</v-btn-toggle>
<v-expand-transition>
<div
v-if="errors.length"
class="pa-2 error--text"
>
{{ errors.join('\n\n') }}
</div>
</v-expand-transition>
</outlined-input>
</template>
<script lang="js">
import SmartInput from '/imports/client/ui/components/global/SmartInputMixin.js';
import OutlinedInput from '/imports/client/ui/properties/viewers/shared/OutlinedInput.vue';
export default {
components: {
OutlinedInput,
},
mixins: [SmartInput],
props: {
label: {
type: String,
default: '',
},
options: {
type: Array,
default: () => [],
}
},
data() {
return {
clickedValue: undefined,
};
},
methods: {
click(val) {
this.clickedValue = val;
this.change(val);
},
}
};
</script>

2
app/imports/client/ui/components/global/globalIndex.js
View File

@@ -10,6 +10,7 @@ import SmartBtn from '/imports/client/ui/components/global/SmartBtn.vue';
import SmartCombobox from '/imports/client/ui/components/global/SmartCombobox.vue';
import SmartCheckbox from '/imports/client/ui/components/global/SmartCheckbox.vue';
import SmartSwitch from '/imports/client/ui/components/global/SmartSwitch.vue';
import SmartToggle from '/imports/client/ui/components/global/SmartToggle.vue';
import SvgIcon from '/imports/client/ui/components/global/SvgIcon.vue';
import SmartSlider from '/imports/client/ui/components/global/SmartSlider.vue';
@@ -24,4 +25,5 @@ Vue.component('SmartCombobox', SmartCombobox);
Vue.component('SmartCheckbox', SmartCheckbox);
Vue.component('SmartSlider', SmartSlider);
Vue.component('SmartSwitch', SmartSwitch);
Vue.component('SmartToggle', SmartToggle);
Vue.component('SvgIcon', SvgIcon);

14
app/imports/client/ui/properties/forms/ActionForm.vue
View File

@@ -63,19 +63,21 @@
/>
</v-slide-x-transition>
<smart-select
label="Target"
style="flex-basis: 300px;"
:items="targetOptions"
<smart-toggle
label="Target creature"
:value="model.target"
:options="[
{name: 'Single Target', value: 'singleTarget'},
{name: 'Multiple Targets', value: 'multipleTargets'},
{name: 'Self', value: 'self'},
]"
:error-messages="errors.target"
:menu-props="{auto: true, lazy: true}"
@change="change('target', ...arguments)"
/>
<inline-computation-field
label="Summary"
hint="This will appear in the action card in the character sheet, summarise what the action does"
hint="This will appear in the action card in the character sheet, summarize what the action does"
:model="model.summary"
:error-messages="errors.summary"
@change="({path, value, ack}) =>

71
app/imports/client/ui/properties/forms/AdjustmentForm.vue
View File

@@ -34,11 +34,14 @@
cols="12"
md="6"
>
<smart-select
<smart-toggle
label="Operation"
hint="Should the attribute be damaged by the amount, or set to the amount"
:items="adjustmentOps"
:value="model.operation"
:options="[
{ name: 'Damage', value: 'increment' },
{ name: 'Set', value: 'set' },
]"
:error-messages="errors.operation"
@change="change('operation', ...arguments)"
/>
@@ -47,14 +50,14 @@
cols="12"
md="6"
>
<smart-select
v-if="parentTarget !== 'self'"
label="Target"
:hint="targetOptionHint"
:items="targetOptions"
<smart-toggle
label="Target creature"
:value="model.target"
:options="[
{name: 'Action Target', value: 'target'},
{name: 'Self', value: 'self'},
]"
:error-messages="errors.target"
:menu-props="{auto: true, lazy: true}"
@change="change('target', ...arguments)"
/>
</v-col>
@@ -85,58 +88,10 @@ import propertyFormMixin from '/imports/client/ui/properties/forms/shared/proper
export default {
mixins: [propertyFormMixin, attributeListMixin],
props: {
parentTarget: {
type: String,
default: undefined,
},
},
data() {
return {
adjustmentOps: [
{ text: 'Damage', value: 'increment' },
{ text: 'Set', value: 'set' },
],
damageHint: 'The amount of damage to apply to the selected stat, can be a calculation or roll. Negative values will restore the selected from previous damage. If the operation is set, this is the final value of the stat instead.',
setHint: 'The value of the stat after applying this adjustment. The stat\'s value can\'t exceed its total',
}
},
computed: {
targetOptions() {
if (this.parentTarget === 'singleTarget') {
return [
{
text: 'Self',
value: 'self',
}, {
text: 'Target',
value: 'every',
},
];
} else {
return [
{
text: 'Self',
value: 'self',
}, {
text: 'Target',
value: 'target',
},
];
}
},
targetOptionHint() {
let hints = {
self: 'The damage will be applied to the character\'s own attribute when taking the action',
target: 'The damage will be applied to the target of the action',
each: 'The damage will be rolled separately for each of the targets of the action',
every: 'The damage will be rolled once and applied to each of the targets of the action',
};
if (this.parentTarget === 'singleTarget') {
hints.each = hints.target;
hints.every = hints.target;
}
return hints[this.model.target];
damageHint: 'The amount of damage to apply, negative values will heal',
setHint: 'The value to set the stat to',
}
},
}

187
app/imports/client/ui/properties/forms/AttributeForm.vue
View File

@@ -79,90 +79,115 @@
v-if="model.attributeType === 'healthBar'"
name="Health Bar"
>
<div
class="d-flex flex-wrap align-center justify-start"
>
<div class="text-subtitle-1">
Damaged Colors:
<div class="d-flex flex-column align-center mb-4">
<div class="text-caption mb-4">
Damaged Colors
</div>
<outlined-input
name="Half"
class="mb-4 ml-2"
<div
class="d-flex flex-wrap align-center justify-start"
>
<color-picker
:value="model.healthBarColorMid"
:width="54"
:height="54"
@input="value => $emit('change', {path: ['healthBarColorMid'], value})"
/>
</outlined-input>
<outlined-input
name="Empty"
class="mb-4 ml-2"
>
<color-picker
:value="model.healthBarColorLow"
:width="54"
:height="54"
@input="value => $emit('change', {path: ['healthBarColorLow'], value})"
/>
</outlined-input>
<outlined-input
name="Half"
class="mb-4"
>
<color-picker
:value="model.healthBarColorMid"
:width="54"
:height="54"
@input="value => $emit('change', {path: ['healthBarColorMid'], value})"
/>
</outlined-input>
<outlined-input
name="Empty"
class="mb-4 ml-2"
>
<color-picker
:value="model.healthBarColorLow"
:width="54"
:height="54"
@input="value => $emit('change', {path: ['healthBarColorLow'], value})"
/>
</outlined-input>
</div>
</div>
<v-layout
wrap
class="mt-4"
>
<text-field
label="Damage order"
type="number"
style="max-width: 300px;"
hint="Lower ordered health bars will take damage before higher ordered ones"
class="mr-4"
:disabled="model.healthBarNoDamage"
:value="model.healthBarDamageOrder"
:error-messages="errors.healthBarDamageOrder"
@change="change('healthBarDamageOrder', ...arguments)"
/>
<smart-switch
label="Ignore damage"
class="mr-4"
:value="model.healthBarNoDamage"
:error-messages="errors.healthBarNoDamage"
@change="change('healthBarNoDamage', ...arguments)"
/>
<smart-switch
label="Prevent damage overflow"
:value="model.healthBarNoDamageOverflow"
:error-messages="errors.healthBarNoDamageOverflow"
@change="change('healthBarNoDamageOverflow', ...arguments)"
/>
</v-layout>
<v-layout wrap>
<text-field
label="Healing order"
type="number"
style="max-width: 300px;"
hint="Lower ordered health bars will take healing before higher ordered ones"
class="mr-4"
:disabled="model.healthBarNoHealing"
:value="model.healthBarHealingOrder"
:error-messages="errors.healthBarHealingOrder"
@change="change('healthBarHealingOrder', ...arguments)"
/>
<smart-switch
label="Ignore healing"
class="mr-4"
:value="model.healthBarNoHealing"
:error-messages="errors.healthBarNoHealing"
@change="change('healthBarNoHealing', ...arguments)"
/>
<smart-switch
label="Prevent healing overflow"
:value="model.healthBarNoHealingOverflow"
:error-messages="errors.healthBarNoHealingOverflow"
@change="change('healthBarNoHealingOverflow', ...arguments)"
/>
</v-layout>
<v-row dense>
<v-col
cols="12"
md="4"
>
<text-field
label="Damage order"
type="number"
hint="Lower ordered health bars will take damage before higher ordered ones"
:disabled="model.healthBarNoDamage"
:value="model.healthBarDamageOrder"
:error-messages="errors.healthBarDamageOrder"
@change="change('healthBarDamageOrder', ...arguments)"
/>
</v-col>
<v-col
cols="12"
md="4"
sm="6"
>
<smart-switch
label="Ignore damage"
:value="model.healthBarNoDamage"
:error-messages="errors.healthBarNoDamage"
@change="change('healthBarNoDamage', ...arguments)"
/>
</v-col>
<v-col
cols="12"
md="4"
sm="6"
>
<smart-switch
label="Prevent damage overflow"
:value="model.healthBarNoDamageOverflow"
:error-messages="errors.healthBarNoDamageOverflow"
@change="change('healthBarNoDamageOverflow', ...arguments)"
/>
</v-col>
<v-col
cols="12"
md="4"
>
<text-field
label="Healing order"
type="number"
hint="Lower ordered health bars will take healing before higher ordered ones"
:disabled="model.healthBarNoHealing"
:value="model.healthBarHealingOrder"
:error-messages="errors.healthBarHealingOrder"
@change="change('healthBarHealingOrder', ...arguments)"
/>
</v-col>
<v-col
cols="12"
md="4"
sm="6"
>
<smart-switch
label="Ignore healing"
:value="model.healthBarNoHealing"
:error-messages="errors.healthBarNoHealing"
@change="change('healthBarNoHealing', ...arguments)"
/>
</v-col>
<v-col
cols="12"
md="4"
sm="6"
>
<smart-switch
label="Prevent healing overflow"
:value="model.healthBarNoHealingOverflow"
:error-messages="errors.healthBarNoHealingOverflow"
@change="change('healthBarNoHealingOverflow', ...arguments)"
/>
</v-col>
</v-row>
</form-section>
</v-expand-transition>
<form-section name="Damage">

21
app/imports/client/ui/properties/forms/BuffForm.vue
View File

@@ -18,16 +18,17 @@
$emit('change', {path: ['duration', ...path], value, ack})"
/>
-->
<v-expand-transition>
<smart-select
v-if="!model.applied"
label="Target"
:items="targetOptions"
:value="model.target"
:error-messages="errors.target"
:menu-props="{auto: true, lazy: true}"
@change="change('target', ...arguments)"
/>
<smart-toggle
v-if="!model.applied"
label="Target creature"
:value="model.target"
:options="[
{name: 'Action Target', value: 'target'},
{name: 'Self', value: 'self'},
]"
:error-messages="errors.target"
@change="change('target', ...arguments)"
/>
</v-expand-transition>
<form-sections>
<form-section

2
app/imports/client/ui/properties/forms/shared/IconColorMenu.vue
View File

@@ -28,14 +28,12 @@
</template>
<script lang="js">
import PropertyIcon from '/imports/client/ui/properties/shared/PropertyIcon.vue';
import ColorPicker from '/imports/client/ui/components/ColorPicker.vue';
import OutlinedInput from '/imports/client/ui/properties/viewers/shared/OutlinedInput.vue';
export default {
components: {
OutlinedInput,
PropertyIcon,
ColorPicker,
},
props: {

6
app/imports/client/ui/properties/viewers/shared/OutlinedInput.vue
View File

@@ -49,4 +49,10 @@ export default {
.outlined-input.theme--dark:not(.no-hover):hover {
border-color: #fff;
}
.outlined-input .name {
color: rgba(0,0,0,.6);
}
.outlined-input.theme--dark .name {
color: rgba(255,255,255,.7);
}
</style>