QuickGrid: Sample showing how to change color of sorting indicator does not work

[Aculeo]

Is there an existing issue for this?

• I have searched the existing issues

Describe the bug

In the official sample on the Styling tab for the Blazor component QuickGrid, it shows CSS that sets the sort indicator to blue. But it always shows up as black.

Link: https://aspnet.github.io/quickgridsamples/styling

Perhaps mask-image should be used instead. This allows for setting the color. I was able to successfully change the color with it, but not accounting for ascending/descending icon.

.quickgrid .sort-indicator {
    background-color: red;
    -webkit-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M 2 3.25 L 12 20.75 L 22 3.25 L 12 10 z" /></svg>');
    mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M 2 3.25 L 12 20.75 L 22 3.25 L 12 10 z" /></svg>');
}

Expected Behavior

Color of sort indicator should be changeable

Steps To Reproduce

Use the following CSS as part of the component to customize the sort indicator color:

::deep .quickgrid[theme=corporate] .sort-indicator {
    color: blue;
}

The rule is applied, but seems that SVG colors cannot be changed like this.

Exceptions (if any)

No response

.NET Version

I'm using .NET 6 and the alpha version of QuickGrid, but I suspect the same applies on the .NET 8 version, since the official sample has this problem.

Anything else?

No response

[ghost]

We've moved this issue to the Backlog milestone. This means that it is not going to be worked on for the coming release. We will reassess the backlog following the current release and consider this item at that time. To learn more about our issue management process and to have better expectation regarding different types of issues you can read our Triage Process.

[ghost]

We've moved this issue to the Backlog milestone. This means that it is not going to be worked on for the coming release. We will reassess the backlog following the current release and consider this item at that time. To learn more about our issue management process and to have better expectation regarding different types of issues you can read our Triage Process.

[SiliconDonkey]

This is not a bug. This is a documentation issue on the QuickGrid sample app website. The sort direction indication is an svg graphic so you can change its color with a CSS filter. For example, to change the indicator to bootstrap's primary blue color use this CSS rule:

.quickgrid[theme=default] .sort-indicator {
filter: invert(38%) sepia(82%) saturate(5679%) hue-rotate(203deg) brightness(109%) contrast(102%);
}

[bigtfromaz]

I am not a styling expert, in fact, quite the opposite. Where can we find the default SVG file and how can we change it? I have a theme with a dark background and want to use white.

[SiliconDonkey]

Add the following snippet to your CSS file to achieve a white sort indicator:

.quickgrid[theme=default] .sort-indicator {
filter: invert(100%) sepia(0%) saturate(7500%) hue-rotate(151deg) brightness(115%) contrast(102%);
}

That will make the sort indicator graphics white

[schaveyt]

This was not a helpful thread. how about a breadcrumb to some other examples. What has been quite tricky is trying set the indicator icon afte the ASC or DSC event fires.

[schaveyt]

@bigtfromaz @SiliconDonkey I played around tonight using the browser devtools to identify what exactly has to be overrided to to match the styling I need. I'll tell you right now the documentation is crap from the quick grid.

I am using TailwindCSS and Flowbite and placed the associated utility classes next to the styles.

Add this to your MyComponentWithAQuickGrid.razor.css (ps: you see how to support dark mode as well)

/* Sticky header while scrolling */

::deep .quickgrid {
    font-weight: 400;                                          /* font-normal */
    font-size: 0.875rem;                                        /* text-sm */
    line-height: 2.5rem;                                         /* text-sm (adjusted) */
    text-align: left;                                          /* text-left */


    --tw-text-opacity: 1;                                       /* text-gray-500 */  
    color: rgb(107 114 128 / var(--tw-text-opacity));           /* text-gray-500 */ 
    
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, system-ui, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji;
    
}

::deep .quickgrid[theme=default] .col-title {
    font-weight: 500;
    letter-spacing: 0.05em;
}

::deep :is(.dark .quickgrid) {
    --tw-text-opacity: 1;                                       /* text-gray-400 */    
    color: rgb(156 163 175 / var(--tw-text-opacity));           /* text-gray-400 */      
    
}

::deep thead {
    position: sticky;
    top: 0;

    background-color: rgb(249 250 251 / var(--tw-bg-opacity)); /* bg-gray-50 */
    color: rgb(107 114 128 / var(--tw-text-opacity));          /* text-gray-500 */
    font-weight: 400;                                            /* font-medium */
    text-transform: uppercase;                                  /* uppercase */

    font-size: 0.75rem;                                        /* text-xs */
    line-height: 2.75rem;                                         /* text-xs (adjusted) */

    letter-spacing: 0.6px;                                      /* tracking wider */


}

::deep tr {
    border-width: 1px;                                         /* border */
    --tw-border-opacity: 1;                                    /* border-gray-200 */
    border-color: rgb(229 231 235 / var(--tw-border-opacity)); /* border-gray-200 */
}

::deep :is(.dark tr) {
    --tw-border-opacity: 1;                                    /* dark:border-gray-700 */
    border-color: rgb(55 65 81 / var(--tw-border-opacity));    /* dark:border-gray-700 */
}

::deep :is(.dark thead) {
    background-color: rgb(55 65 81 / var(--tw-bg-opacity));    /* dark:bg-gray-700 */
    color: rgb(255 255 255 / var(--tw-text-opacity));          /* dark:text-white */
}

/* Subtle stripe effect */
/* ::deep tr:nth-child(even) {
    background: rgba(255, 255, 255, 0.4);
} */


::deep .sort-indicator {
    background-image: url('data:image/svg+xml;utf8,<svg class="w-6 h-6" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg>');
}


::deep :is(.dark .quickgrid[theme=default] .col-options) {
    background-color: rgb(55 65 81 / var(--tw-bg-opacity));    /* dark:bg-gray-700 */
    color: rgb(255 255 255 / var(--tw-text-opacity));          /* dark:text-white */
    background-color: rgb(55 65 81 / var(--tw-bg-opacity));    /* dark:bg-gray-700 */
}

::deep :is(.dark .quickgrid[theme=default] input) {
    background-color: rgb(55 65 81 / var(--tw-bg-opacity));    /* dark:bg-gray-700 */
}

Dark Mode

Light Mode

Hope this might help others 🎉