Apply the light color to the icon fill instead of the bulb icon itself

This commit is contained in:
Fabio Manganiello 2022-05-30 09:18:19 +02:00
parent 89560e7c38
commit 0689e05e96
Signed by untrusted user: blacklight
GPG key ID: D90FBA7F76362774

View file

@ -1,8 +1,10 @@
<template> <template>
<div class="entity-icon-container"> <div class="entity-icon-container"
:class="{'with-color-fill': !!colorFill}"
:style="colorFillStyle">
<img src="@/assets/img/spinner.gif" class="loading" v-if="loading"> <img src="@/assets/img/spinner.gif" class="loading" v-if="loading">
<i class="fas fa-circle-exclamation error" v-else-if="error" /> <i class="fas fa-circle-exclamation error" v-else-if="error" />
<Icon v-bind="icon" v-else /> <Icon v-bind="computedIcon" v-else />
</div> </div>
</template> </template>
@ -27,6 +29,11 @@ export default {
type: Object, type: Object,
required: true, required: true,
}, },
hasColorFill: {
type: Boolean,
default: false,
},
}, },
data() { data() {
@ -37,6 +44,21 @@ export default {
}, },
computed: { computed: {
colorFill() {
return (this.hasColorFill && this.icon.color) ? this.icon.color : null
},
colorFillStyle() {
return this.colorFill ? {'background': this.colorFill} : {}
},
computedIcon() {
const icon = {...this.icon}
if (this.colorFill)
delete icon.color
return icon
},
type() { type() {
let entityType = (this.entity.type || '') let entityType = (this.entity.type || '')
return entityType.charAt(0).toUpperCase() + entityType.slice(1) return entityType.charAt(0).toUpperCase() + entityType.slice(1)
@ -49,11 +71,19 @@ export default {
@import "vars"; @import "vars";
.entity-icon-container { .entity-icon-container {
width: 2.5em; width: 1.625em;
height: 1.5em; height: 1.5em;
display: inline-flex;
margin-top: 0.25em; margin-top: 0.25em;
margin-left: 0.25em;
position: relative; position: relative;
text-align: center; text-align: center;
justify-content: center;
align-items: center;
&.with-color-fill {
border-radius: 1em;
}
.loading { .loading {
position: absolute; position: absolute;