search

davecoffin / nativescript-filterable-listpicker

Apache License 2.0
44 stars 22 forks source link

Font colours polluted by external CSS #14

Closed sK0pe closed 6 years ago

sK0pe commented 6 years ago

Request / Question

Which platform(s) does your issue occur on?

Please, provide the following version numbers that your issue occurs with:

Please, tell us how to recreate the issue in as much detail as possible.

Setting a font colour in a common or base scss file such as the following: Page { background-image: url('~/images/foo.png'); background-repeat: no-repeat; background-position: center; background-size: cover; font-size: $font-size; color: $text-color; }

Then import that base scss file into any component that is using the FilterableListPicker

So the above where $text-color represents "white" or "#fff", results in the font colours being overridden.

I guess what I'm asking for is more of a feature request which allows passing a class to colour the modal or at least set the font colours. I can force all colours to be black by setting a scss file style as: FilterableListpicker{ color: "black" }

However going beyond this and specifying: FilterableListpicker{ color: "black"; Button{ color: "red"; } } Is not possible.

The obvious work around is to not import the common styling scss file or for components which require the FilterableListpicker.

However I don't think it's ideal that the component's font colours are not able to be specified or enforce the default style considering the rest of the styling is done via styles in the template.

If there is a better way of styling the component that I have missed I welcome any response. Thanks for your work.

davecoffin commented 6 years ago

Hey there, so what I think I should probably do is set the colors explicitly so css doesn't override them, but also provide optional parameters to set the colors. What exactly would you like to be able to control? Possibilities:

The xml markup is starting to get pretty verbose, but I guess who cares... theyre all optional anyway.

The other option would be to provide themes, like light and dark. I cant imagine why anybody would want like a purple listview with green text or something, but im always surprised by what people decide to do.

Thoughts?

sK0pe commented 6 years ago

I mean that sounds fine, I guess an easier way would be to pass a css class name that could be a parameter that is applied to the modal. Something like - <ListFilterpicker [customClass]="customClassName"></ListFilterpicker>

Then internally obviously you an check if the input is defined and apply it via markup or in the component's JS or TS.

All your options are completely fine.

I mean for the app I'm making, the page theme varies in colour hilight based upon which item is tapped. Colour gives context to the item in the context of the app so the user knows how to treat the item.

I think the themes are another way to go but at the end of the day giving customisation leaves it open to the user and you'll have less feature requests haha!

I've implemented it thus far with just specifying the colour of all ListFilterpicker objects having a different font at the top level app.css file this would just be a bonus.

davecoffin commented 6 years ago

If you wrap the picker element in a gridlayout or stack that has a class, you can style things that way.

<StackLayout class="foo">
    <FilterableListpicker></FilterableListpicker>
</StackLayout>

You can target ListView, TextField, Button etc.

davecoffin commented 6 years ago

There are a ton of styling options now, take a look at all the options in the readme.