Using CSS to transform Dashboard 2 widgets

Dashboard
1

We have seen how Dashboard 1 widgets can be completely transformed with CSS.

Is it possible for Dashboard 2 widgets to come with a summary of the relevant CSS classes to style them, eg the class used for the icon, legend, pointer, sectors etc, etc?

2

For that gauge the CSS doesn't do much, it is SVG in most of components.

3

I'm not just thinking about gauges though.

For example a button
image
And a button with a little CSS
image

4

This CSS talk is worth of separate thread @Paul-Reed don't you agree..

Edit > Done - Paul

5

I just wonder if there is somebody involved with deep knowledge base about vuetify elements in terms of CSS. Because of for that kind of summary the one must be familiar with strategy and the architecture of vuetify not only having ability to read and understand the CSS.

Let's see the button...(with icon, but there is more options thus not everything will be covered)

What can we find...

Button:
 .v-btn
 .v-btn--block
 .v-btn--density-default
 .v-btn--elevated
 .v-btn--flat
 .v-btn--icon
 .v-btn--size-default
 .v-btn--variant-elevated
 .v-btn--variant-flat
 .v-btn--variant-outlined
 .v-btn--variant-text
 .v-theme--nrdb

Button content (span-s):
 .v-btn__content
 .v-btn__overlay
 .v-btn__prepend
 .v-btn__underlay

Content content:
 .mdi
 .mdi-antenna
 .notranslate
 .v-icon
 .v-icon--size-default
 .v-icon--size-x-large
 .v-theme--nrdb

Now, what can we do with that list? Categorize maybe but not more because of majority of cases those classes are not applied as for single class for single element doing it's thing. They are used in combinations and then they affect as conditional rules. And that is the thing why it is not straightforward to describe what some class does.

The other thing is - you maybe will be able to describe singe use case for element in terms of CSS. But that will be the description of current conditions. The user wants to override the default look so in case it is not just "change the color" it eventually takes more than currently applied styles. And that is whole new world which can not be described as we don't know anything about the design target.

So even if somebody wants to take that excessive work and describe what classes do in widgets, The usability of that information is only quarter of the picture if even that.

Finding css what affects the elements look and feel is base skill. And that does the trick for almost all cases. Next thing is to understand selectors and from that up the sky is the limit. Nothing beats DEV tools.

6

@jbudd I'm not using any of the ready-made elements that d2 offers because my clients always ask me to modify everything.. I create them from scratch with ui-templat and that might help. I'm still developing, but everyone is helping me a lot. This button is fully configurable, I receive ON and OFF and Send ON and OFF... including the option in the node to not let the input message pass straight through, avoiding loppings

image

<template>
    <v-btn class="button_Quarto" ref="button" stacked @click="alternar">
        <div class="title_Quarto">Quarto</div>
        <v-icon class="icon_Quarto" ref="icon">{{icon}}</v-icon>
    </v-btn>
</template>

<script>
    export default {
        data() {
            return {
                value: "OFF",
                icon: "mdi-bed"
            };
        },
        methods: {
            alternar: function () {
                if (this.value === 'ON') {
                    this.desligar();
                } else if (this.value === 'OFF') {
                    this.ligar();
                } else {
                    this.desligar();
                }
            },
            ligar: function () {
                this.icon = "mdi-bed";
                this.$refs.icon.$el.style.color = '#BD9608';
                this.$refs.icon.$el.style.textShadow = '0px 0px 10px #BD9608';
                if (this.value === 'OFF') {
                    this.send({ payload: 'ON' });
                    this.value = "ON"; 
                }
            },
            desligar: function () {
                this.icon = "mdi-bed";
                this.$refs.icon.$el.style.color = '#A9A9A9';
                this.$refs.icon.$el.style.textShadow = '0px 0px 0px';
                if (this.value === 'ON') {
                    this.send({ payload: 'OFF' });
                    this.value = "OFF"; 
                }
            }
        },
        watch: {
            msg: function(){
                if(this.msg.payload != undefined){
                    console.log('got message :',this.msg)
                    if (this.msg.payload === "ON") {
                        this.ligar();
                    } else if (this.msg.payload === "OFF") {
                        this.desligar();                        
                    }
                }
            }
        }
    }
</script>

<style>
    .button_Quarto {
        display: flex; 
        flex-direction: column; 
        margin: auto; 
        height: 75px; 
        width: 75px; 
        background-color: #4F4F4F; 
        color: #000000; 
        border: 1px solid #000000; 
        ont-size: 14px; 
        border-radius: 18px;"
    }
    .title_Quarto {
        font-size: 85%;
    }
    .icon_Quarto {
        font-size: 40px;
    }
</style>
7

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.