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

Made health bar compatible with dark mode

Browse Source
This commit is contained in:
Stefan Zermatten
2019-02-15 11:46:25 +02:00
parent 3f6b3fe4c1
commit 96bb072dad
2 changed files with 97 additions and 45 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
app/imports/ui/components/HealthBar.Story.vue
View File

@@ -1,5 +1,5 @@
<template lang="html"> <template lang="html">
<div class="pa-1"> <div class="pa-1" style="background: inherit;">
<health-bar <health-bar
:value="value" :value="value"
:max-value="maxValue" :max-value="maxValue"

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

@@ -1,16 +1,42 @@
<template> <template>
<v-layout row wrap align-center justify-center style="min-height: 48px;" :class="{hover}" class="my-3 white" :id="`${_uid}-${_id}`"> <v-layout
<div class="subheading text-truncate pa-2 name" @mouseover="hover = true" @mouseleave="hover = false" @click="$emit('click', {elementId: `${_uid}-${_id}`})"> row
{{name}} wrap
align-center
justify-center
style="min-height: 48px;"
:class="{ hover }"
class="my-3 health-bar"
:id="`${_uid}-${_id}`"
>
<div
class="subheading text-truncate pa-2 name"
@mouseover="hover = true"
@mouseleave="hover = false"
@click="$emit('click', { elementId: `${_uid}-${_id}` })"
>
{{ name }}
</div> </div>
<v-flex style="height: 20px; flex-basis: 300px; flex-grow: 100;"> <v-flex style="height: 20px; flex-basis: 300px; flex-grow: 100;">
<v-layout column align-center @click="edit" style="cursor: pointer;" class="bar"> <v-layout
<v-progress-linear :value="(value / maxValue) * 100" height="20" color="green lighten-1" class="ma-0"> 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> </v-progress-linear>
<span class="value" <span
class="value"
style="margin-top: -20px; z-index: 1; font-size: 16px; font-weight: 600; height: 20px;" style="margin-top: -20px; z-index: 1; font-size: 16px; font-weight: 600; height: 20px;"
> >
{{value}} / {{maxValue}} {{ value }} / {{ maxValue }}
</span> </span>
</v-layout> </v-layout>
<transition name="transition"> <transition name="transition">
@@ -21,16 +47,22 @@
flat flat
class="transparent toolbar" class="transparent toolbar"
> >
<v-spacer/> <v-spacer />
<v-btn-toggle <v-btn-toggle
v-model="operation" v-model="operation"
@click="$refs.editInput.focus()" @click="$refs.editInput.focus()"
class="mr-2" class="mr-2"
> >
<v-btn @click="$refs.editInput.focus()" class="white"><v-icon>add</v-icon></v-btn> <v-btn @click="$refs.editInput.focus()" class="white"
<v-btn @click="$refs.editInput.focus()" class="white"><v-icon>remove</v-icon></v-btn> ><v-icon>add</v-icon></v-btn
>
<v-btn @click="$refs.editInput.focus()" class="white"
><v-icon>remove</v-icon></v-btn
>
</v-btn-toggle> </v-btn-toggle>
<v-text-field solo hide-details <v-text-field
solo
hide-details
type="number" type="number"
v-if="editing" v-if="editing"
ref="editInput" ref="editInput"
@@ -40,10 +72,14 @@
:prefix="operation === 0 ? '+' : operation === 1 ? '-' : null" :prefix="operation === 0 ? '+' : operation === 1 ? '-' : null"
@focus="$event.target.select()" @focus="$event.target.select()"
@keyup.enter="commitEdit" @keyup.enter="commitEdit"
@keypress.43="operation === 0 ? operation = null : operation = 0" @keypress.43="
@keypress.45="operation === 1 ? operation = null : operation = 1" operation === 0 ? (operation = null) : (operation = 0)
"
@keypress.45="
operation === 1 ? (operation = null) : (operation = 1)
"
@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="white">
<v-icon>done</v-icon> <v-icon>done</v-icon>
@@ -51,7 +87,7 @@
<v-btn small fab @click="cancelEdit" class="mx-0 white"> <v-btn small fab @click="cancelEdit" class="mx-0 white">
<v-icon>close</v-icon> <v-icon>close</v-icon>
</v-btn> </v-btn>
<v-spacer/> <v-spacer />
</v-toolbar> </v-toolbar>
</transition> </transition>
</v-flex> </v-flex>
@@ -63,12 +99,14 @@
<script> <script>
export default { export default {
data(){ return { data() {
editing: false, return {
editValue: 0, editing: false,
operation: null, editValue: 0,
hover: false, operation: null,
}}, hover: false,
};
},
props: { props: {
value: Number, value: Number,
maxValue: Number, maxValue: Number,
@@ -76,40 +114,46 @@
_id: String, _id: String,
}, },
methods: { methods: {
edit(){ edit() {
this.editing = true; this.editing = true;
this.operation = null; this.operation = null;
this.editValue = this.value; this.editValue = this.value;
this.$nextTick(function(){ this.$nextTick(function() {
this.$refs.editInput.focus(); this.$refs.editInput.focus();
}); });
}, },
cancelEdit(){ cancelEdit() {
this.editing = false; this.editing = false;
}, },
commitEdit(){ commitEdit() {
this.editing = false; this.editing = false;
let value = +this.$refs.editInput.lazyValue; let value = +this.$refs.editInput.lazyValue;
let type = this.operation === null ? 'set' : 'increment'; let type = this.operation === null ? 'set' : 'increment';
if (this.operation === 1){ if (this.operation === 1) {
value = -value; value = -value;
} }
this.$emit('change', {type, value}); this.$emit('change', { type, value });
}, },
rejectNonNumbers: function(evt) { rejectNonNumbers: function(evt) {
evt = (evt) ? evt : window.event; evt = evt ? evt : window.event;
var charCode = (evt.which) ? evt.which : evt.keyCode; var charCode = evt.which ? evt.which : evt.keyCode;
if ((charCode > 31 && (charCode < 48 || charCode > 57)) || charCode === 46) { if (
evt.preventDefault();; (charCode > 31 && (charCode < 48 || charCode > 57)) ||
charCode === 46
) {
evt.preventDefault();
} else { } else {
return true; return true;
} }
}, },
}, },
} };
</script> </script>
<style scoped> <style scoped>
.health-bar {
background: inherit;
}
.name { .name {
text-align: center; text-align: center;
cursor: pointer; cursor: pointer;
@@ -125,35 +169,43 @@
transition: box-shadow 0.2s; transition: box-shadow 0.2s;
} }
.bar:hover { .bar:hover {
box-shadow: 0 3px 1px -2px rgba(0,0,0,.2),0 2px 2px 0 rgba(0,0,0,.14),0 1px 5px 0 rgba(0,0,0,.12)!important box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14),
0 1px 5px 0 rgba(0, 0, 0, 0.12) !important;
} }
.toolbar { .toolbar {
margin-left: -50%; margin-left: -50%;
margin-right: -50%; margin-right: -50%;
width: 200%; width: 200%;
margin-top: -34px !important; margin-top: -34px !important;
z-index: 4; z-index: 4;
} }
.hover { .hover {
background: rgb(245, 245, 245) !important; background: #f5f5f5 !important;
} }
.background-transition-enter-active, .background-transition-leave-active{ .theme--dark .hover {
transition: all .2s; background: #515151 !important;
} }
.background-transition-enter, .background-transition-leave-to { .background-transition-enter-active,
.background-transition-leave-active {
transition: all 0.2s;
}
.background-transition-enter,
.background-transition-leave-to {
opacity: 0; opacity: 0;
} }
.transition-enter-active{ .transition-enter-active {
transition: all .2s; transition: all 0.2s;
} }
.transition-leave-active { .transition-leave-active {
transition: all .3s; transition: all 0.3s;
} }
.transition-enter-to, .transition-leave { .transition-enter-to,
.transition-leave {
opacity: 1; opacity: 1;
transform: scaleY(1) !important; transform: scaleY(1) !important;
} }
.transition-enter, .transition-leave-to { .transition-enter,
.transition-leave-to {
opacity: 0; opacity: 0;
transform: scaleY(0) !important; transform: scaleY(0) !important;
} }