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<mailto:hferreira...@gmail.com>>
Enviado el: jueves, 10 de febrero de 2022 9:11
Para: Apache Royale Development
<dev@royale.apache.org<mailto: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<mailto: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<mailto:hferreira...@gmail.com>>
> Enviado el: jueves, 10 de
> febrero de 2022 1:56
> Para: Apache Royale Development
> <dev@royale.apache.org<mailto: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.
>
