Disabled various buttons when the user doesn't have edit permission
This commit is contained in:
Thaum Rystra
@@ -1,103 +1,128 @@
|
||||
<template>
|
||||
<v-layout
|
||||
row
|
||||
wrap
|
||||
align-center
|
||||
justify-center
|
||||
style="min-height: 48px;"
|
||||
:class="{ hover }"
|
||||
class="my-3 health-bar"
|
||||
:data-id="_id"
|
||||
>
|
||||
<div
|
||||
class="subheading text-truncate pa-2 name"
|
||||
@mouseover="hover = true"
|
||||
@mouseleave="hover = false"
|
||||
@click="$emit('click')"
|
||||
>
|
||||
{{ name }}
|
||||
</div>
|
||||
<v-flex style="height: 20px; flex-basis: 300px; flex-grow: 100;">
|
||||
<v-layout
|
||||
column
|
||||
align-center
|
||||
@click="edit"
|
||||
style="cursor: pointer;"
|
||||
class="bar"
|
||||
>
|
||||
<v-progress-linear
|
||||
:value="(value / maxValue) * 100"
|
||||
height="20"
|
||||
color="green lighten-1"
|
||||
class="ma-0"
|
||||
>
|
||||
</v-progress-linear>
|
||||
<span
|
||||
class="value"
|
||||
style="margin-top: -20px; z-index: 1; font-size: 15px; font-weight: 600; height: 20px;"
|
||||
>
|
||||
{{ value }} / {{ maxValue }}
|
||||
</span>
|
||||
</v-layout>
|
||||
<transition name="transition">
|
||||
<v-toolbar
|
||||
v-if="editing"
|
||||
justify-center
|
||||
height="48"
|
||||
flat
|
||||
class="transparent toolbar"
|
||||
>
|
||||
<v-spacer />
|
||||
<v-btn-toggle
|
||||
:value="operation === 'add' ? 0: operation === 'subtract' ? 1 : null"
|
||||
@click="$refs.editInput.focus()"
|
||||
class="mr-2"
|
||||
>
|
||||
<v-btn
|
||||
@click="toggleAdd(); $nextTick(() => $refs.editInput.focus())"
|
||||
class="filled"
|
||||
>
|
||||
<v-icon>add</v-icon>
|
||||
</v-btn>
|
||||
<v-btn
|
||||
@click="toggleSubtract(); $nextTick(() => $refs.editInput.focus())"
|
||||
class="filled"
|
||||
>
|
||||
<v-icon>remove</v-icon>
|
||||
</v-btn>
|
||||
</v-btn-toggle>
|
||||
<v-text-field
|
||||
solo
|
||||
hide-details
|
||||
type="number"
|
||||
v-if="editing"
|
||||
ref="editInput"
|
||||
style="max-width: 120px;"
|
||||
min="0"
|
||||
:value="editValue"
|
||||
:prepend-inner-icon="operationIcon(operation)"
|
||||
@focus="$event.target.select()"
|
||||
@keypress="keypress"
|
||||
>
|
||||
</v-text-field>
|
||||
<v-btn small fab @click="commitEdit" class="filled" color="red">
|
||||
<v-icon>done</v-icon>
|
||||
</v-btn>
|
||||
<v-btn small fab @click="cancelEdit" class="mx-0 filled">
|
||||
<v-icon>close</v-icon>
|
||||
</v-btn>
|
||||
<v-spacer />
|
||||
</v-toolbar>
|
||||
</transition>
|
||||
</v-flex>
|
||||
<transition name="background-transition">
|
||||
<div v-if="editing" class="page-tint" @click="cancelEdit" />
|
||||
</transition>
|
||||
</v-layout>
|
||||
<v-layout
|
||||
row
|
||||
wrap
|
||||
align-center
|
||||
justify-center
|
||||
style="min-height: 48px;"
|
||||
:class="{ hover }"
|
||||
class="my-3 health-bar"
|
||||
:data-id="_id"
|
||||
>
|
||||
<div
|
||||
class="subheading text-truncate pa-2 name"
|
||||
@mouseover="hover = true"
|
||||
@mouseleave="hover = false"
|
||||
@click="$emit('click')"
|
||||
>
|
||||
{{ name }}
|
||||
</div>
|
||||
<v-flex style="height: 20px; flex-basis: 300px; flex-grow: 100;">
|
||||
<v-layout
|
||||
column
|
||||
align-center
|
||||
style="cursor: pointer;"
|
||||
class="bar"
|
||||
@click="edit"
|
||||
>
|
||||
<v-progress-linear
|
||||
:value="(value / maxValue) * 100"
|
||||
height="20"
|
||||
color="green lighten-1"
|
||||
class="ma-0"
|
||||
/>
|
||||
<span
|
||||
class="value"
|
||||
style="margin-top: -20px; z-index: 1; font-size: 15px; font-weight: 600; height: 20px;"
|
||||
>
|
||||
{{ value }} / {{ maxValue }}
|
||||
</span>
|
||||
</v-layout>
|
||||
<transition name="transition">
|
||||
<v-toolbar
|
||||
v-if="editing"
|
||||
justify-center
|
||||
height="48"
|
||||
flat
|
||||
class="transparent toolbar"
|
||||
>
|
||||
<v-spacer />
|
||||
<v-btn-toggle
|
||||
:value="operation === 'add' ? 0: operation === 'subtract' ? 1 : null"
|
||||
class="mr-2"
|
||||
@click="$refs.editInput.focus()"
|
||||
>
|
||||
<v-btn
|
||||
:disabled="context.editPermission === false"
|
||||
class="filled"
|
||||
@click="toggleAdd(); $nextTick(() => $refs.editInput.focus())"
|
||||
>
|
||||
<v-icon>add</v-icon>
|
||||
</v-btn>
|
||||
<v-btn
|
||||
:disabled="context.editPermission === false"
|
||||
class="filled"
|
||||
@click="toggleSubtract(); $nextTick(() => $refs.editInput.focus())"
|
||||
>
|
||||
<v-icon>remove</v-icon>
|
||||
</v-btn>
|
||||
</v-btn-toggle>
|
||||
<v-text-field
|
||||
v-if="editing"
|
||||
ref="editInput"
|
||||
solo
|
||||
hide-details
|
||||
type="number"
|
||||
style="max-width: 120px;"
|
||||
min="0"
|
||||
:value="editValue"
|
||||
:prepend-inner-icon="operationIcon(operation)"
|
||||
:disabled="context.editPermission === false"
|
||||
@focus="$event.target.select()"
|
||||
@keypress="keypress"
|
||||
/>
|
||||
<v-btn
|
||||
small
|
||||
fab
|
||||
class="filled"
|
||||
color="red"
|
||||
@click="commitEdit"
|
||||
>
|
||||
<v-icon>done</v-icon>
|
||||
</v-btn>
|
||||
<v-btn
|
||||
small
|
||||
fab
|
||||
class="mx-0 filled"
|
||||
@click="cancelEdit"
|
||||
>
|
||||
<v-icon>close</v-icon>
|
||||
</v-btn>
|
||||
<v-spacer />
|
||||
</v-toolbar>
|
||||
</transition>
|
||||
</v-flex>
|
||||
<transition name="background-transition">
|
||||
<div
|
||||
v-if="editing"
|
||||
class="page-tint"
|
||||
@click="cancelEdit"
|
||||
/>
|
||||
</transition>
|
||||
</v-layout>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
inject: {
|
||||
context: { default: {} }
|
||||
},
|
||||
props: {
|
||||
value: Number,
|
||||
maxValue: Number,
|
||||
name: String,
|
||||
_id: String,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
editing: false,
|
||||
@@ -106,12 +131,6 @@
|
||||
hover: false,
|
||||
};
|
||||
},
|
||||
props: {
|
||||
value: Number,
|
||||
maxValue: Number,
|
||||
name: String,
|
||||
_id: String,
|
||||
},
|
||||
methods: {
|
||||
edit() {
|
||||
this.editing = true;
|
||||
@@ -138,7 +157,7 @@
|
||||
case 'set':
|
||||
return 'forward';
|
||||
case 'add':
|
||||
return 'add';
|
||||
return 'add';
|
||||
case 'subtract':
|
||||
return 'remove';
|
||||
}
|
||||
|
||||
@@ -17,7 +17,7 @@
|
||||
<v-btn
|
||||
icon
|
||||
small
|
||||
:disabled="currentValue >= model.value"
|
||||
:disabled="currentValue >= model.value || context.editPermission === false"
|
||||
@click="increment(1)"
|
||||
>
|
||||
<v-icon>arrow_drop_up</v-icon>
|
||||
@@ -25,7 +25,7 @@
|
||||
<v-btn
|
||||
icon
|
||||
small
|
||||
:disabled="currentValue <= 0"
|
||||
:disabled="currentValue <= 0 || context.editPermission === false"
|
||||
@click="increment(-1)"
|
||||
>
|
||||
<v-icon>arrow_drop_down</v-icon>
|
||||
@@ -68,6 +68,9 @@ import ComputedForCreature from '/imports/ui/components/computation/ComputedForC
|
||||
export default {
|
||||
components: {
|
||||
Computed: ComputedForCreature,
|
||||
},
|
||||
inject: {
|
||||
context: { default: {} }
|
||||
},
|
||||
props: {
|
||||
model: {
|
||||
|
||||
@@ -1,37 +1,51 @@
|
||||
<template lang="html">
|
||||
<v-card class="resource-card layout row" :class="hover ? 'elevation-8': ''">
|
||||
<div class="buttons layout column justify-center pl-3">
|
||||
<v-btn icon small :disabled="currentValue >= value" @click="increment(1)">
|
||||
<v-icon>arrow_drop_up</v-icon>
|
||||
</v-btn>
|
||||
<v-btn icon small :disabled="currentValue <= 0" @click="increment(-1)">
|
||||
<v-icon>arrow_drop_down</v-icon>
|
||||
</v-btn>
|
||||
</div>
|
||||
<div
|
||||
class="layout row align-center value pl-2 pr-3"
|
||||
>
|
||||
<div class="display-1">{{currentValue}}</div>
|
||||
<div class="title ml-2 max-value">/{{value}}</div>
|
||||
</div>
|
||||
<div
|
||||
class="content layout row align-center pr-3"
|
||||
@click="click"
|
||||
@mouseover="hover = true"
|
||||
@mouseleave="hover = false"
|
||||
>
|
||||
<div class="text-truncate ">
|
||||
{{name}}
|
||||
</div>
|
||||
</div>
|
||||
</v-card>
|
||||
<v-card
|
||||
class="resource-card layout row"
|
||||
:class="hover ? 'elevation-8': ''"
|
||||
>
|
||||
<div class="buttons layout column justify-center pl-3">
|
||||
<v-btn
|
||||
icon
|
||||
small
|
||||
:disabled="currentValue >= value || context.editPermission === false"
|
||||
@click="increment(1)"
|
||||
>
|
||||
<v-icon>arrow_drop_up</v-icon>
|
||||
</v-btn>
|
||||
<v-btn
|
||||
icon
|
||||
small
|
||||
:disabled="currentValue <= 0 || context.editPermission === false"
|
||||
@click="increment(-1)"
|
||||
>
|
||||
<v-icon>arrow_drop_down</v-icon>
|
||||
</v-btn>
|
||||
</div>
|
||||
<div
|
||||
class="layout row align-center value pl-2 pr-3"
|
||||
>
|
||||
<div class="display-1">
|
||||
{{ currentValue }}
|
||||
</div>
|
||||
<div class="title ml-2 max-value">
|
||||
/{{ value }}
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="content layout row align-center pr-3"
|
||||
@click="click"
|
||||
@mouseover="hover = true"
|
||||
@mouseleave="hover = false"
|
||||
>
|
||||
<div class="text-truncate ">
|
||||
{{ name }}
|
||||
</div>
|
||||
</div>
|
||||
</v-card>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data(){ return{
|
||||
hover: false,
|
||||
}},
|
||||
props: {
|
||||
_id: String,
|
||||
name: String,
|
||||
@@ -39,6 +53,12 @@
|
||||
value: Number,
|
||||
damage: Number,
|
||||
},
|
||||
data(){ return{
|
||||
hover: false,
|
||||
}},
|
||||
inject: {
|
||||
context: { default: {} }
|
||||
},
|
||||
computed: {
|
||||
currentValue(){
|
||||
return this.value - (this.damage || 0);
|
||||
|
||||
@@ -1,61 +1,92 @@
|
||||
<template lang="html">
|
||||
<v-list-tile class="spell-slot-list-tile" :class="{hover}">
|
||||
<v-list-tile
|
||||
class="spell-slot-list-tile"
|
||||
:class="{hover}"
|
||||
>
|
||||
<v-list-tile-action>
|
||||
<div
|
||||
v-if="value > 4"
|
||||
class="layout row align-center"
|
||||
>
|
||||
<div class="buttons layout column justify-center">
|
||||
<v-btn
|
||||
icon
|
||||
small
|
||||
:disabled="
|
||||
currentValue >= value ||
|
||||
context.editPermission === false
|
||||
"
|
||||
@click="increment(1)"
|
||||
>
|
||||
<v-icon>arrow_drop_up</v-icon>
|
||||
</v-btn>
|
||||
<v-btn
|
||||
icon
|
||||
small
|
||||
:disabled="
|
||||
currentValue <= 0 ||
|
||||
context.editPermission === false
|
||||
"
|
||||
@click="increment(-1)"
|
||||
>
|
||||
<v-icon>arrow_drop_down</v-icon>
|
||||
</v-btn>
|
||||
</div>
|
||||
<div
|
||||
class="layout row value"
|
||||
style="align-items: baseline;"
|
||||
>
|
||||
<div class="display-1">
|
||||
{{ currentValue }}
|
||||
</div>
|
||||
<div class="title ml-2 max-value">
|
||||
/{{ value }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<v-list-tile-action>
|
||||
<div
|
||||
v-else
|
||||
class="layout row align-center justify-end slot-buttons"
|
||||
>
|
||||
<v-btn
|
||||
v-for="i in value"
|
||||
:key="i"
|
||||
icon
|
||||
small
|
||||
:disabled="
|
||||
!(i === currentValue || i === currentValue + 1) ||
|
||||
context.editPermission === false
|
||||
"
|
||||
@click="increment(i > currentValue ? 1 : -1)"
|
||||
>
|
||||
<v-icon>
|
||||
{{
|
||||
i > currentValue ?
|
||||
'radio_button_unchecked' :
|
||||
'radio_button_checked'
|
||||
}}
|
||||
</v-icon>
|
||||
</v-btn>
|
||||
</div>
|
||||
</v-list-tile-action>
|
||||
|
||||
<div class="layout row align-center" v-if="value > 4">
|
||||
<div class="buttons layout column justify-center">
|
||||
<v-btn icon small :disabled="currentValue >= value" @click="increment(1)">
|
||||
<v-icon>arrow_drop_up</v-icon>
|
||||
</v-btn>
|
||||
<v-btn icon small :disabled="currentValue <= 0" @click="increment(-1)">
|
||||
<v-icon>arrow_drop_down</v-icon>
|
||||
</v-btn>
|
||||
</div>
|
||||
<div class="layout row value" style="align-items: baseline;">
|
||||
<div class="display-1">{{currentValue}}</div>
|
||||
<div class="title ml-2 max-value">/{{value}}</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="layout row align-center justify-end slot-buttons" v-else>
|
||||
<v-btn
|
||||
icon
|
||||
small
|
||||
v-for="i in value"
|
||||
:disabled="!(i === currentValue || i === currentValue + 1)"
|
||||
:key="i"
|
||||
@click="increment(i > currentValue ? 1 : -1)"
|
||||
>
|
||||
<v-icon>{{
|
||||
i > currentValue ?
|
||||
'radio_button_unchecked' :
|
||||
'radio_button_checked'
|
||||
}}</v-icon>
|
||||
</v-btn>
|
||||
</div>
|
||||
|
||||
</v-list-tile-action>
|
||||
|
||||
<v-list-tile-content
|
||||
class="content ml-2"
|
||||
@click="click"
|
||||
@mouseover="hover = true"
|
||||
@mouseleave="hover = false"
|
||||
>
|
||||
<v-list-tile-title>
|
||||
{{name}}
|
||||
</v-list-tile-title>
|
||||
</v-list-tile-content>
|
||||
</v-list-tile>
|
||||
<v-list-tile-content
|
||||
class="content ml-2"
|
||||
@click="click"
|
||||
@mouseover="hover = true"
|
||||
@mouseleave="hover = false"
|
||||
>
|
||||
<v-list-tile-title>
|
||||
{{ name }}
|
||||
</v-list-tile-title>
|
||||
</v-list-tile-content>
|
||||
</v-list-tile>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import numberToSignedString from '/imports/ui/utility/numberToSignedString.js';
|
||||
export default {
|
||||
data(){ return{
|
||||
hover: false,
|
||||
}},
|
||||
props: {
|
||||
_id: String,
|
||||
name: String,
|
||||
@@ -66,6 +97,12 @@ export default {
|
||||
default: 0,
|
||||
},
|
||||
},
|
||||
data(){ return{
|
||||
hover: false,
|
||||
}},
|
||||
inject: {
|
||||
context: { default: {} }
|
||||
},
|
||||
computed: {
|
||||
currentValue(){
|
||||
return this.value - this.damage;
|
||||
|
||||
Reference in New Issue
Block a user