[Feature]Add describing css classes to nova components

[bernhardh]

At the moment, everything in nova is just styled with tailwind css classes like 'relative', 'items-center', 'mb-3', etc. which is fine for a fix design and layout. But if you want to change the look and feel of nova to (for example) reduce the waste of space and reduce scrolling, its nearly impossible or a dirty hack.

Why not adding describing css-classes to the html elements, to make it more easy, to style nova? For example, classes like "edit-view", "index-view", "form-fieldwrapper", etc.

[davidhemphill]

Sorry there's no plans to do this. If you want this, you can reimplement the specific components using a tool and add the wrapper classes for the components.

[bernhardh]

Ok. That you will not make components overwriteable is maybe understandable, but to basically prevent nova to get themeable is not really understandable, especially since it isn't much afford to add some css classes and it wouldn't break anything of the existing logic. Can you tell me (and others) the reason for this?

Reimplementing most of the features just for reducing the waste of space is no option for me. If I would do this, I wouldn't need nova and I wouldn't need to pay for it.

[gregoriohc]

Hi, I have just published a theme helper that add some CSS classes to the nova elements making it easier to style theme: https://novapackages.com/packages/gregoriohc/laravel-nova-theme-classify

[davidhemphill]

Looking into automatically appending the Vue component's tag name to its element classList. So a <ResourceTable> component would have resource-name added as a class. No guarantees, but if it doesn't break anything or slow rendering down significantly it could get added.

[Milkhan]

Looking into automatically appending the Vue component's tag name to its element classList. So a <ResourceTable> component would have resource-name added as a class. No guarantees, but if it doesn't break anything or slow rendering down significantly it could get added.

Any progress on that?

[PatricNox]

We got the ability to overwrite views, vue components as well would be real neat.

[erhuz]

Being able to override vue components would be great. To be able to make Nova suit all kinds projects in a better way without losing upgrade compatibility. This would enable developers to solve project-specific and generic issues not prioritized by the Nova team without having to deal with the consequences of editing nova-core.

[bernhardh]

@davidhemphill: Any plans to see it in the near future? I still believe, that this isn't a big effort to implement nor it will have a big impact on performace, but it would make the live of customizing easier.

[Olie-Chanz]

Looking into automatically appending the Vue component's tag name to its element classList. So a <ResourceTable> component would have resource-name added as a class. No guarantees, but if it doesn't break anything or slow rendering down significantly it could get added.

Any update for this? It's 2021 now. I really believe that developers need this feature. Imagine creating a whole new custom component just to change the font-size of a single text field. It's not a practical solution.

[davidhemphill]

The Nova::enableThemingClasses() method was merged on Jan 6, 2020. This added descriptive classnames to Nova's Vue components.

[m-lotze]

Using a custom <field-wrapper> component like this, would give you a class field-{attribute} on the wrapper element. Wich makes it possible to style fields individually.

<script>
    export default {
        name: 'field-wrapper',
        functional: true,
        props: {
            stacked: { type: Boolean, default: false }
        },
        render: (createElement, context) => {
            const fieldAttribute = _.head(_.compact(_.map(context.children, 'context.field.attribute')))
            let classes = context.props.stacked ? 'flex border-b border-40 flex-col' : 'flex border-b border-40'

            if (fieldAttribute !== undefined) {
                classes += ' field-' + fieldAttribute
            }

            return createElement('div', { class: classes }, context.scopedSlots.default())
        }
    }
</script>

[23creative]

Im mainly a backend dev, so I'm terrible with Vue and welcome any feedback on this solution. But I managed to hack together something that works for me. It is heavily influenced from Formfeed-UK/nova-theming-classes

1. in resources/js folder create a js file named novaAddClasses.js with the following

Nova.bootingCallbacks.unshift(app => {
    let mixin = {
        mounted() {
            this.setThemingClasses();
        },
        methods: {
            setThemingClasses() {

                if (this.$props.panel !== undefined && this.$props.panel.addClass !== undefined) {
                    this.addThemingClass(this.$props.panel.addClass)
                }

                if (this.$props.field !== undefined && this.$props.field.addClass !== undefined) {
                    this.addThemingClass(this.$props.field.addClass)
                }
            },
            addThemingClass(cssClass) {
                const classArray = cssClass.split(" ");
                for(let i = 0; i < classArray.length; i++){
                    if (!this.$el.classList.contains(classArray[i])) {
                        this.$el.classList.add(classArray[i]);
                    }
                }
            }
        }
    }
    app.mixin(mixin);
})

2. in the App\Providers\NovaServiceProvider.php in the boot method add

   Nova::script('theming-classes',resource_path('js/novaAddClasses.js'));

3. When defining fields inside your resource's fields method. Add ->withMeta(["addClass"=>"flex-auto"]) to the field. So a typical field would look like this Text::make("Title", "name")->withMeta(["addClass"=>"flex-auto bg-black"])

[rhino-corey]

The Nova::enableThemingClasses() seems to have been removed in Nova 4. This has added yet another headache to my upgrade from Nova 3 to Nova 4. Yer' killing me here and my dev budget.

Is there any way you can turn the enableThemingClasses() functionality back on in the next release so I don't have to reprogram a ton of code that was written to use those classes?

[sort72]

The Nova::enableThemingClasses() seems to have been removed in Nova 4. This has added yet another headache to my upgrade from Nova 3 to Nova 4. Yer' killing me here and my dev budget.

Is there any way you can turn the enableThemingClasses() functionality back on in the next release so I don't have to reprogram a ton of code that was written to use those classes?

Check this package: https://novapackages.com/packages/formfeed-uk/nova-theming-classes