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

Made health bar editing compatible with dark mode

Browse Source
This commit is contained in:
Stefan Zermatten
2019-02-18 14:26:46 +02:00
parent c5899e0816
commit a31a70f435
1 changed files with 16 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

25
app/imports/ui/components/HealthBar.vue
View File

@@ -53,12 +53,12 @@
@click="$refs.editInput.focus()" @click="$refs.editInput.focus()"
class="mr-2" class="mr-2"
> >
<v-btn @click="$refs.editInput.focus()" class="white" <v-btn @click="$nextTick(() => $refs.editInput.focus())" class="filled">
><v-icon>add</v-icon></v-btn <v-icon>add</v-icon>
> </v-btn>
<v-btn @click="$refs.editInput.focus()" class="white" <v-btn @click="$nextTick(() => $refs.editInput.focus())" class="filled">
><v-icon>remove</v-icon></v-btn <v-icon>remove</v-icon>
> </v-btn>
</v-btn-toggle> </v-btn-toggle>
<v-text-field <v-text-field
solo solo
@@ -69,7 +69,7 @@
style="max-width: 120px;" style="max-width: 120px;"
min="0" min="0"
:value="editValue" :value="editValue"
:prefix="operation === 0 ? '+' : operation === 1 ? '-' : null" :prepend-inner-icon="operation === 0 ? 'add' : operation === 1 ? 'remove' : 'forward'"
@focus="$event.target.select()" @focus="$event.target.select()"
@keyup.enter="commitEdit" @keyup.enter="commitEdit"
@keypress.43=" @keypress.43="
@@ -81,10 +81,10 @@
@keypress="rejectNonNumbers($event)" @keypress="rejectNonNumbers($event)"
> >
</v-text-field> </v-text-field>
<v-btn small fab @click="commitEdit" class="white"> <v-btn small fab @click="commitEdit" class="filled" color="red">
<v-icon>done</v-icon> <v-icon>done</v-icon>
</v-btn> </v-btn>
<v-btn small fab @click="cancelEdit" class="mx-0 white"> <v-btn small fab @click="cancelEdit" class="mx-0 filled">
<v-icon>close</v-icon> <v-icon>close</v-icon>
</v-btn> </v-btn>
<v-spacer /> <v-spacer />
@@ -120,6 +120,7 @@
this.editValue = this.value; this.editValue = this.value;
this.$nextTick(function() { this.$nextTick(function() {
this.$refs.editInput.focus(); this.$refs.editInput.focus();
console.log()
}); });
}, },
cancelEdit() { cancelEdit() {
@@ -185,6 +186,12 @@
.theme--dark .hover { .theme--dark .hover {
background: #515151 !important; background: #515151 !important;
} }
.filled.theme--light {
background: #fff !important;
}
.filled.theme--dark {
background: #424242 !important;
}
.background-transition-enter-active, .background-transition-enter-active,
.background-transition-leave-active { .background-transition-leave-active {
transition: all 0.2s; transition: all 0.2s;