Open Aculeo opened 1 year ago
ghost
commented
1 year ago 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
commented
9 months ago 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
commented
8 months ago 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
commented
7 months ago 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
commented
7 months ago 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
commented
7 months ago 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
commented
7 months ago @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 */
}
Hope this might help others 🎉
Is there an existing issue for this?
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-imageshould 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.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:
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