Hi Maria,
Thank you very much for your testimonial.
Today I was able to finally solve the problem with a !important to override
the shadow.
Funny that my current status, issues that I'm facing and solutions it's
exactly as yours :)
Maria Jose Esteve <mjest...@iest.com> escreveu no dia sábado, 12/02/2022
à(s) 16:58:
> Hi Hugo,
> My main project also started like yours. I loaded the default JewelTheme,
> so I could use Jewel and then mashed the CSS's in my defaults.css. Now it's
> a bit different: we compile our own Theme based on Jewel but with our own
> colors and our own effects, using sass.
> There are times when just creating a new CSS class and adding it to the
> component (via the "className" property in the mxml tag or with
> addClass/toggleClasse) is enough, but there are other times when I have to
> do a bit more research to mash up the particular style I want to modify.
> And the most drastic thing that I have had to do, because I have not been
> able to replace the styles that I needed, has been to "extend" the control
> and in the constructor to override the typeNames.
>
> Focusing on your need to put a surplus to the "list-popup" of the ComboBox
> this is what I would do:
>
>
> - IDENTIFY THE STYLE I NEED TO REPLACE. Looking at the DOM code
> displayed by the browser, I see that the class defined for the "list-popup"
> of the combo is "combobox-popup open jewel list".
>
>
>
>
> If you notice, the ".combobox-popup .jewel.list @media (min-width:767px)"
> style has the highest priority. That's where the "box-shadow: none
> ¡important" shadow is overridden. If we override that style, the next one
> to be applied is the one defined in the main class, without @media, where
> "shadow does exist":
>
>
> If you want all your combobox-popup's to have this style, in your
> defaults.css you must specify your style:
>
> @media (min-width: 767px) {
> .combobox-popup.open .jewel.list {
> box-shadow: 0 0 6px 1px rgb(1 1 1 / 70%) !important;
> transform: none;
> transition: none;
> }
> }
>
> This way it works as you wish:
>
>
>
> In the case of the ComboBox, in addition, you must consider that the
> combobox-popup of Jewel, in Tablet and Phone is visualized in another way,
> being positioned in the inferior part. If you need to give it an "always"
> style of your own, you should modify the general one: (I have added for
> this example "border-radius: 1rem;"
>
> .combobox-popup.open .jewel.list {
> border-radius: 1rem;
> opacity: 1;
> transform: translate(-50%, -100%);
> transition: transform 0.3s 0ms, opacity 0.3s 0ms;
> }
>
>
> This is what I like the least, so much manual work overcomes me, but it is
> also true that if you do it "once" you have it done "forever".
> In the public repository that I have for examples I still work this way,
> without sass, and I code the CSS of Jewel and some other JS components like
> the Inspire-Tree or the JSCalendar.
> I've created a branch [1] with these tests in case you're interested in
> seeing it in action. I have overridden the main view and the mxml of this
> example is shown directly.
>
> I am sure that everyone who has worked with their own stylesheet has faced
> the same problems as us and maybe they could give us another view (Carlos,
> Greg, Piotr,...)
>
> [1] https://github.com/mjesteve/royale-examples-community/tree/CSS_Hugo
>
> Hiedra
>
> -----Mensaje original-----
> De: Hugo Ferreira <*hferreira...@gmail.com* <hferreira...@gmail.com>>
> Enviado el: jueves, 10 de febrero de 2022 9:11
> Para: Apache Royale Development <*dev@royale.apache.org*
> <dev@royale.apache.org>>
> Asunto: Re: How to change the List from Jewel ComboBox
>
> Hi Hiedra,
>
> My project definition:
> I'm using a mix of Basic (when I don't need Jewel components) and Jewel
> components for my project.
> I don't use any CSS file that comes with Jewel.
> I'm skinning as much as I can with my own CSS file (compiling from a jess
> file).
>
> My issue:
> What happens with the Jewel components, all of them apply a "jewel" class
> at code time on the class constructor and this "jewel" conflicts with some
> CSS attributes (even though I don't load the jewel template css files).
>
> What I have done to fix this on Jewel TextInput:
> I had created my own TextInput that extends from Jewel TextInput and at
> constructor method I set typeNames = "" and this works.
>
> For Jewel ComboBox is much more complex:
> Jewel ComboBox is built at runtime by a set of classes: ComboBox (the
> base), ComboBoxView (how CombBox is built with a TextInput and a Button),
> ComboBoxPopUp, ComboBoxPopUpView, etc. ...
> Is the ComboBoxPopupView that builds the list when you click on CombBox
> and this is a Jewel List again with "jewel" class name that conflicts with
> my own CSS (I want to add a shadow).
>
> The only solution (a monkey patch) that I found without recreating
> everything was:
> I Created the full path of Jewel List on my own project.
> I Copied the Jewel List file to this folder.
> I Setted the typeNames to ""
>
> A better solution would be:
> 1. Ignoring the typeNames on every Jewel component with CSS (I don't know
> how and if it is possible).
> 2. Overriding the jewel CSS class behaviour with my own CSS to do nothing
> and don't conflict anymore (I don't know how).
> 3. Creating the List.as file but on my own path and defining to use is
> instead of the original one thru CSS (I already tried this several times
> but did not work).
>
>
>
>
>
> Maria Jose Esteve <*mjest...@iest.com* <mjest...@iest.com>> escreveu no
> dia quinta, 10/02/2022
> à(s) 03:08:
>
> > Hi Hugo,
> > I would focus on CSS but since I don't know what you need I can't be
> > 100% sure.
> > Could you share your requirements? (maybe the only thing to debug is
> > the hierarchy of classes in the CSS).
> >
> > Hiedra
> >
> > -----Mensaje original-----
> > De: Hugo Ferreira <*hferreira...@gmail.com* <hferreira...@gmail.com>>
> Enviado el: jueves, 10 de
> > febrero de 2022 1:56
> > Para: Apache Royale Development <*dev@royale.apache.org*
> <dev@royale.apache.org>>
> > Asunto: How to change the List from Jewel ComboBox
> >
> > Hi,
> >
> > I need to change the List component from a Jewel ComboBox without have
> > to override/copy everything, so, if I create the following
> > folder: org.apache.royale.jewel on my project and the the List.as file
> > within, I can override at runtime the List behaviour from a Jewel
> ComboBox.
> > This simply works however it's a ugly monkey patch.
> >
> > There is any better alternative ?
> >
> > I tried using a css file following other examples without success.
> >
> > By the way, I need this just to clean the typeNames property from the
> > List.as otherwise my own style does not work, so if there is a better
> > way even better.
> >
>
>
