You are viewing a plain text version of this content. The canonical link for it is here.
Posted to users@royale.apache.org by Roman Isitua <ro...@gmail.com> on 2022/01/08 16:49:10 UTC
Creating and using spectrum composite components
I have a simple spectrum view that references a container as follows
<sp:Container id="mainGroup" className="container">
<view:SignInForm id="signInForm" includeIn="joinus">
</view:SignInForm>
<!-- <sp:Card x="200" y="200" className="login_card" includeIn="joinus">
<sp:body>
<sp:CardBody>
<sp:CardHeader>
<sp:CardTitle text="Sign In"/>
</sp:CardHeader>
<sp:CardContent>
<sp:Form labelPosition="left">
<sp:FormItem>
<sp:FormLabel text="Username*"/>
<sp:FormField>
<sp:TextField placeholder="Enter your user name"/>
</sp:FormField>
</sp:FormItem>
<sp:FormItem>
<sp:FormLabel text="Password*"/>
<sp:FormField>
<sp:TextField placeholder="Enter password" />
</sp:FormField>
</sp:FormItem>
<sp:FormItem>
<sp:Button flavor="cta" text="Button"/>
</sp:FormItem>
</sp:Form>
</sp:CardContent>
</sp:CardBody>
</sp:body>
</sp:Card> -->
</sp:Container>
The SignInForm contains the definition of the sp:Card in a separate
SignInForm.mxml file.
I noticed that royale does not render the card. However, if I do this
<sp:Container id="mainGroup" className="container">
<!-- <view:SignInForm id="signInForm" includeIn="joinus">
</view:SignInForm> -->
<sp:Card x="200" y="200" className="login_card" includeIn="joinus">
<sp:body>
<sp:CardBody>
<sp:CardHeader>
<sp:CardTitle text="Sign In"/>
</sp:CardHeader>
<sp:CardContent>
<sp:Form labelPosition="left">
<sp:FormItem>
<sp:FormLabel text="Username*"/>
<sp:FormField>
<sp:TextField placeholder="Enter your user name"/>
</sp:FormField>
</sp:FormItem>
<sp:FormItem>
<sp:FormLabel text="Password*"/>
<sp:FormField>
<sp:TextField placeholder="Enter password" />
</sp:FormField>
</sp:FormItem>
<sp:FormItem>
<sp:Button flavor="cta" text="Button"/>
</sp:FormItem>
</sp:Form>
</sp:CardContent>
</sp:CardBody>
</sp:body>
</sp:Card>
</sp:Container>
I have to place the full definition of the sp:Card in the sp:Container for
it to be rendered.
The disadvantage of this is that I cannot define large complex composite
components in separate mxml files and reference them in the main view mxml.
I am able to do this using jewel or material design. It is a very useful
feature.
Any ideas ? Can this be done using spectrum ?
Re: Creating and using spectrum composite components
Posted by Harbs <ha...@gmail.com>.
You will probably want to read about forks too:
https://docs.github.com/en/pull-requests/collaborating-with-pull-requests/working-with-forks/about-forks
> On Jan 8, 2022, at 6:58 PM, Harbs <ha...@gmail.com> wrote:
>
> pull requsest.
> https://docs.github.com/en/pull-requests/collaborating-with-pull-requests/proposing-changes-to-your-work-with-pull-requests/about-pull-requests <https://docs.github.com/en/pull-requests/collaborating-with-pull-requests/proposing-changes-to-your-work-with-pull-requests/about-pull-requests>
>
>
>> On Jan 8, 2022, at 6:55 PM, Roman Isitua <romanisitua@gmail.com <ma...@gmail.com>> wrote:
>>
>> Pardon my ignorance, what is a PR ?
>>
>>
>>
>> On Sat, Jan 8, 2022 at 5:52 PM Harbs <harbs.lists@gmail.com <ma...@gmail.com>> wrote:
>> Card subclasses SpectrumBase.
>>
>> To do what you want, it should subclass Spectrum Group. That’s an oversight.
>>
>> Please make a PR. :-)
>>
>>> On Jan 8, 2022, at 6:49 PM, Roman Isitua <romanisitua@gmail.com <ma...@gmail.com>> wrote:
>>>
>>> I have a simple spectrum view that references a container as follows
>>>
>>> <sp:Container id="mainGroup" className="container">
>>> <view:SignInForm id="signInForm" includeIn="joinus">
>>> </view:SignInForm>
>>> <!-- <sp:Card x="200" y="200" className="login_card" includeIn="joinus">
>>> <sp:body>
>>> <sp:CardBody>
>>> <sp:CardHeader>
>>> <sp:CardTitle text="Sign In"/>
>>> </sp:CardHeader>
>>> <sp:CardContent>
>>> <sp:Form labelPosition="left">
>>> <sp:FormItem>
>>> <sp:FormLabel text="Username*"/>
>>> <sp:FormField>
>>> <sp:TextField placeholder="Enter your user name"/>
>>> </sp:FormField>
>>> </sp:FormItem>
>>> <sp:FormItem>
>>> <sp:FormLabel text="Password*"/>
>>> <sp:FormField>
>>> <sp:TextField placeholder="Enter password" />
>>> </sp:FormField>
>>> </sp:FormItem>
>>> <sp:FormItem>
>>> <sp:Button flavor="cta" text="Button"/>
>>> </sp:FormItem>
>>> </sp:Form>
>>> </sp:CardContent>
>>> </sp:CardBody>
>>> </sp:body>
>>> </sp:Card> -->
>>> </sp:Container>
>>>
>>>
>>> The SignInForm contains the definition of the sp:Card in a separate SignInForm.mxml file.
>>> I noticed that royale does not render the card. However, if I do this
>>>
>>> <sp:Container id="mainGroup" className="container">
>>> <!-- <view:SignInForm id="signInForm" includeIn="joinus">
>>> </view:SignInForm> -->
>>> <sp:Card x="200" y="200" className="login_card" includeIn="joinus">
>>> <sp:body>
>>> <sp:CardBody>
>>> <sp:CardHeader>
>>> <sp:CardTitle text="Sign In"/>
>>> </sp:CardHeader>
>>> <sp:CardContent>
>>> <sp:Form labelPosition="left">
>>> <sp:FormItem>
>>> <sp:FormLabel text="Username*"/>
>>> <sp:FormField>
>>> <sp:TextField placeholder="Enter your user name"/>
>>> </sp:FormField>
>>> </sp:FormItem>
>>> <sp:FormItem>
>>> <sp:FormLabel text="Password*"/>
>>> <sp:FormField>
>>> <sp:TextField placeholder="Enter password" />
>>> </sp:FormField>
>>> </sp:FormItem>
>>> <sp:FormItem>
>>> <sp:Button flavor="cta" text="Button"/>
>>> </sp:FormItem>
>>> </sp:Form>
>>> </sp:CardContent>
>>> </sp:CardBody>
>>> </sp:body>
>>> </sp:Card>
>>> </sp:Container>
>>>
>>> I have to place the full definition of the sp:Card in the sp:Container for it to be rendered.
>>>
>>> The disadvantage of this is that I cannot define large complex composite components in separate mxml files and reference them in the main view mxml.
>>>
>>>
>>> I am able to do this using jewel or material design. It is a very useful feature.
>>>
>>> Any ideas ? Can this be done using spectrum ?
>>>
>>
>
Re: Creating and using spectrum composite components
Posted by Roman Isitua <ro...@gmail.com>.
Thanks.
On Sat, Jan 8, 2022 at 5:58 PM Harbs <ha...@gmail.com> wrote:
> pull requsest.
>
> https://docs.github.com/en/pull-requests/collaborating-with-pull-requests/proposing-changes-to-your-work-with-pull-requests/about-pull-requests
>
>
> On Jan 8, 2022, at 6:55 PM, Roman Isitua <ro...@gmail.com> wrote:
>
> Pardon my ignorance, what is a PR ?
>
>
>
> On Sat, Jan 8, 2022 at 5:52 PM Harbs <ha...@gmail.com> wrote:
>
>> Card subclasses SpectrumBase.
>>
>> To do what you want, it should subclass Spectrum Group. That’s an
>> oversight.
>>
>> Please make a PR. :-)
>>
>> On Jan 8, 2022, at 6:49 PM, Roman Isitua <ro...@gmail.com> wrote:
>>
>> I have a simple spectrum view that references a container as follows
>>
>> <sp:Container id="mainGroup" className="container">
>> <view:SignInForm id="signInForm" includeIn="joinus">
>> </view:SignInForm>
>> <!-- <sp:Card x="200" y="200" className="login_card" includeIn="joinus">
>> <sp:body>
>> <sp:CardBody>
>> <sp:CardHeader>
>> <sp:CardTitle text="Sign In"/>
>> </sp:CardHeader>
>> <sp:CardContent>
>> <sp:Form labelPosition="left">
>> <sp:FormItem>
>> <sp:FormLabel text="Username*"/>
>> <sp:FormField>
>> <sp:TextField placeholder="Enter your user name"/>
>> </sp:FormField>
>> </sp:FormItem>
>> <sp:FormItem>
>> <sp:FormLabel text="Password*"/>
>> <sp:FormField>
>> <sp:TextField placeholder="Enter password" />
>> </sp:FormField>
>> </sp:FormItem>
>> <sp:FormItem>
>> <sp:Button flavor="cta" text="Button"/>
>> </sp:FormItem>
>> </sp:Form>
>> </sp:CardContent>
>> </sp:CardBody>
>> </sp:body>
>> </sp:Card> -->
>> </sp:Container>
>>
>>
>> The SignInForm contains the definition of the sp:Card in a separate
>> SignInForm.mxml file.
>> I noticed that royale does not render the card. However, if I do this
>>
>> <sp:Container id="mainGroup" className="container">
>> <!-- <view:SignInForm id="signInForm" includeIn="joinus">
>> </view:SignInForm> -->
>> <sp:Card x="200" y="200" className="login_card" includeIn="joinus">
>> <sp:body>
>> <sp:CardBody>
>> <sp:CardHeader>
>> <sp:CardTitle text="Sign In"/>
>> </sp:CardHeader>
>> <sp:CardContent>
>> <sp:Form labelPosition="left">
>> <sp:FormItem>
>> <sp:FormLabel text="Username*"/>
>> <sp:FormField>
>> <sp:TextField placeholder="Enter your user name"/>
>> </sp:FormField>
>> </sp:FormItem>
>> <sp:FormItem>
>> <sp:FormLabel text="Password*"/>
>> <sp:FormField>
>> <sp:TextField placeholder="Enter password" />
>> </sp:FormField>
>> </sp:FormItem>
>> <sp:FormItem>
>> <sp:Button flavor="cta" text="Button"/>
>> </sp:FormItem>
>> </sp:Form>
>> </sp:CardContent>
>> </sp:CardBody>
>> </sp:body>
>> </sp:Card>
>> </sp:Container>
>>
>> I have to place the full definition of the sp:Card in the sp:Container
>> for it to be rendered.
>>
>> The disadvantage of this is that I cannot define large complex composite
>> components in separate mxml files and reference them in the main view mxml.
>>
>>
>> I am able to do this using jewel or material design. It is a very useful
>> feature.
>>
>> Any ideas ? Can this be done using spectrum ?
>>
>>
>>
>
Re: Creating and using spectrum composite components
Posted by Harbs <ha...@gmail.com>.
pull requsest.
https://docs.github.com/en/pull-requests/collaborating-with-pull-requests/proposing-changes-to-your-work-with-pull-requests/about-pull-requests
> On Jan 8, 2022, at 6:55 PM, Roman Isitua <ro...@gmail.com> wrote:
>
> Pardon my ignorance, what is a PR ?
>
>
>
> On Sat, Jan 8, 2022 at 5:52 PM Harbs <harbs.lists@gmail.com <ma...@gmail.com>> wrote:
> Card subclasses SpectrumBase.
>
> To do what you want, it should subclass Spectrum Group. That’s an oversight.
>
> Please make a PR. :-)
>
>> On Jan 8, 2022, at 6:49 PM, Roman Isitua <romanisitua@gmail.com <ma...@gmail.com>> wrote:
>>
>> I have a simple spectrum view that references a container as follows
>>
>> <sp:Container id="mainGroup" className="container">
>> <view:SignInForm id="signInForm" includeIn="joinus">
>> </view:SignInForm>
>> <!-- <sp:Card x="200" y="200" className="login_card" includeIn="joinus">
>> <sp:body>
>> <sp:CardBody>
>> <sp:CardHeader>
>> <sp:CardTitle text="Sign In"/>
>> </sp:CardHeader>
>> <sp:CardContent>
>> <sp:Form labelPosition="left">
>> <sp:FormItem>
>> <sp:FormLabel text="Username*"/>
>> <sp:FormField>
>> <sp:TextField placeholder="Enter your user name"/>
>> </sp:FormField>
>> </sp:FormItem>
>> <sp:FormItem>
>> <sp:FormLabel text="Password*"/>
>> <sp:FormField>
>> <sp:TextField placeholder="Enter password" />
>> </sp:FormField>
>> </sp:FormItem>
>> <sp:FormItem>
>> <sp:Button flavor="cta" text="Button"/>
>> </sp:FormItem>
>> </sp:Form>
>> </sp:CardContent>
>> </sp:CardBody>
>> </sp:body>
>> </sp:Card> -->
>> </sp:Container>
>>
>>
>> The SignInForm contains the definition of the sp:Card in a separate SignInForm.mxml file.
>> I noticed that royale does not render the card. However, if I do this
>>
>> <sp:Container id="mainGroup" className="container">
>> <!-- <view:SignInForm id="signInForm" includeIn="joinus">
>> </view:SignInForm> -->
>> <sp:Card x="200" y="200" className="login_card" includeIn="joinus">
>> <sp:body>
>> <sp:CardBody>
>> <sp:CardHeader>
>> <sp:CardTitle text="Sign In"/>
>> </sp:CardHeader>
>> <sp:CardContent>
>> <sp:Form labelPosition="left">
>> <sp:FormItem>
>> <sp:FormLabel text="Username*"/>
>> <sp:FormField>
>> <sp:TextField placeholder="Enter your user name"/>
>> </sp:FormField>
>> </sp:FormItem>
>> <sp:FormItem>
>> <sp:FormLabel text="Password*"/>
>> <sp:FormField>
>> <sp:TextField placeholder="Enter password" />
>> </sp:FormField>
>> </sp:FormItem>
>> <sp:FormItem>
>> <sp:Button flavor="cta" text="Button"/>
>> </sp:FormItem>
>> </sp:Form>
>> </sp:CardContent>
>> </sp:CardBody>
>> </sp:body>
>> </sp:Card>
>> </sp:Container>
>>
>> I have to place the full definition of the sp:Card in the sp:Container for it to be rendered.
>>
>> The disadvantage of this is that I cannot define large complex composite components in separate mxml files and reference them in the main view mxml.
>>
>>
>> I am able to do this using jewel or material design. It is a very useful feature.
>>
>> Any ideas ? Can this be done using spectrum ?
>>
>
Re: Creating and using spectrum composite components
Posted by Roman Isitua <ro...@gmail.com>.
Pardon my ignorance, what is a PR ?
On Sat, Jan 8, 2022 at 5:52 PM Harbs <ha...@gmail.com> wrote:
> Card subclasses SpectrumBase.
>
> To do what you want, it should subclass Spectrum Group. That’s an
> oversight.
>
> Please make a PR. :-)
>
> On Jan 8, 2022, at 6:49 PM, Roman Isitua <ro...@gmail.com> wrote:
>
> I have a simple spectrum view that references a container as follows
>
> <sp:Container id="mainGroup" className="container">
> <view:SignInForm id="signInForm" includeIn="joinus">
> </view:SignInForm>
> <!-- <sp:Card x="200" y="200" className="login_card" includeIn="joinus">
> <sp:body>
> <sp:CardBody>
> <sp:CardHeader>
> <sp:CardTitle text="Sign In"/>
> </sp:CardHeader>
> <sp:CardContent>
> <sp:Form labelPosition="left">
> <sp:FormItem>
> <sp:FormLabel text="Username*"/>
> <sp:FormField>
> <sp:TextField placeholder="Enter your user name"/>
> </sp:FormField>
> </sp:FormItem>
> <sp:FormItem>
> <sp:FormLabel text="Password*"/>
> <sp:FormField>
> <sp:TextField placeholder="Enter password" />
> </sp:FormField>
> </sp:FormItem>
> <sp:FormItem>
> <sp:Button flavor="cta" text="Button"/>
> </sp:FormItem>
> </sp:Form>
> </sp:CardContent>
> </sp:CardBody>
> </sp:body>
> </sp:Card> -->
> </sp:Container>
>
>
> The SignInForm contains the definition of the sp:Card in a separate
> SignInForm.mxml file.
> I noticed that royale does not render the card. However, if I do this
>
> <sp:Container id="mainGroup" className="container">
> <!-- <view:SignInForm id="signInForm" includeIn="joinus">
> </view:SignInForm> -->
> <sp:Card x="200" y="200" className="login_card" includeIn="joinus">
> <sp:body>
> <sp:CardBody>
> <sp:CardHeader>
> <sp:CardTitle text="Sign In"/>
> </sp:CardHeader>
> <sp:CardContent>
> <sp:Form labelPosition="left">
> <sp:FormItem>
> <sp:FormLabel text="Username*"/>
> <sp:FormField>
> <sp:TextField placeholder="Enter your user name"/>
> </sp:FormField>
> </sp:FormItem>
> <sp:FormItem>
> <sp:FormLabel text="Password*"/>
> <sp:FormField>
> <sp:TextField placeholder="Enter password" />
> </sp:FormField>
> </sp:FormItem>
> <sp:FormItem>
> <sp:Button flavor="cta" text="Button"/>
> </sp:FormItem>
> </sp:Form>
> </sp:CardContent>
> </sp:CardBody>
> </sp:body>
> </sp:Card>
> </sp:Container>
>
> I have to place the full definition of the sp:Card in the sp:Container for
> it to be rendered.
>
> The disadvantage of this is that I cannot define large complex composite
> components in separate mxml files and reference them in the main view mxml.
>
>
> I am able to do this using jewel or material design. It is a very useful
> feature.
>
> Any ideas ? Can this be done using spectrum ?
>
>
>
Re: Creating and using spectrum composite components
Posted by Harbs <ha...@gmail.com>.
There’s also FlexContainer which is offers flexbox layout.
But I juts noticed that Container has ContainerBinding baked in and FlexContainer doesn’t. I don’t remember if there was a reason for that. Probably not.
HTH,
Harbs
> On Jan 8, 2022, at 7:19 PM, Roman Isitua <ro...@gmail.com> wrote:
>
> Is a container the best component to use as a wrapper ?
Re: Creating and using spectrum composite components
Posted by Roman Isitua <ro...@gmail.com>.
I will raise the pull request. Thanks.
I guess a temporary work around will be to wrap the card around a container
?
I just did that and it worked.
Is a container the best component to use as a wrapper ?
On Sat, Jan 8, 2022 at 5:52 PM Harbs <ha...@gmail.com> wrote:
> Card subclasses SpectrumBase.
>
> To do what you want, it should subclass Spectrum Group. That’s an
> oversight.
>
> Please make a PR. :-)
>
> On Jan 8, 2022, at 6:49 PM, Roman Isitua <ro...@gmail.com> wrote:
>
> I have a simple spectrum view that references a container as follows
>
> <sp:Container id="mainGroup" className="container">
> <view:SignInForm id="signInForm" includeIn="joinus">
> </view:SignInForm>
> <!-- <sp:Card x="200" y="200" className="login_card" includeIn="joinus">
> <sp:body>
> <sp:CardBody>
> <sp:CardHeader>
> <sp:CardTitle text="Sign In"/>
> </sp:CardHeader>
> <sp:CardContent>
> <sp:Form labelPosition="left">
> <sp:FormItem>
> <sp:FormLabel text="Username*"/>
> <sp:FormField>
> <sp:TextField placeholder="Enter your user name"/>
> </sp:FormField>
> </sp:FormItem>
> <sp:FormItem>
> <sp:FormLabel text="Password*"/>
> <sp:FormField>
> <sp:TextField placeholder="Enter password" />
> </sp:FormField>
> </sp:FormItem>
> <sp:FormItem>
> <sp:Button flavor="cta" text="Button"/>
> </sp:FormItem>
> </sp:Form>
> </sp:CardContent>
> </sp:CardBody>
> </sp:body>
> </sp:Card> -->
> </sp:Container>
>
>
> The SignInForm contains the definition of the sp:Card in a separate
> SignInForm.mxml file.
> I noticed that royale does not render the card. However, if I do this
>
> <sp:Container id="mainGroup" className="container">
> <!-- <view:SignInForm id="signInForm" includeIn="joinus">
> </view:SignInForm> -->
> <sp:Card x="200" y="200" className="login_card" includeIn="joinus">
> <sp:body>
> <sp:CardBody>
> <sp:CardHeader>
> <sp:CardTitle text="Sign In"/>
> </sp:CardHeader>
> <sp:CardContent>
> <sp:Form labelPosition="left">
> <sp:FormItem>
> <sp:FormLabel text="Username*"/>
> <sp:FormField>
> <sp:TextField placeholder="Enter your user name"/>
> </sp:FormField>
> </sp:FormItem>
> <sp:FormItem>
> <sp:FormLabel text="Password*"/>
> <sp:FormField>
> <sp:TextField placeholder="Enter password" />
> </sp:FormField>
> </sp:FormItem>
> <sp:FormItem>
> <sp:Button flavor="cta" text="Button"/>
> </sp:FormItem>
> </sp:Form>
> </sp:CardContent>
> </sp:CardBody>
> </sp:body>
> </sp:Card>
> </sp:Container>
>
> I have to place the full definition of the sp:Card in the sp:Container for
> it to be rendered.
>
> The disadvantage of this is that I cannot define large complex composite
> components in separate mxml files and reference them in the main view mxml.
>
>
> I am able to do this using jewel or material design. It is a very useful
> feature.
>
> Any ideas ? Can this be done using spectrum ?
>
>
>
Re: Creating and using spectrum composite components
Posted by Harbs <ha...@gmail.com>.
Card subclasses SpectrumBase.
To do what you want, it should subclass Spectrum Group. That’s an oversight.
Please make a PR. :-)
> On Jan 8, 2022, at 6:49 PM, Roman Isitua <ro...@gmail.com> wrote:
>
> I have a simple spectrum view that references a container as follows
>
> <sp:Container id="mainGroup" className="container">
> <view:SignInForm id="signInForm" includeIn="joinus">
> </view:SignInForm>
> <!-- <sp:Card x="200" y="200" className="login_card" includeIn="joinus">
> <sp:body>
> <sp:CardBody>
> <sp:CardHeader>
> <sp:CardTitle text="Sign In"/>
> </sp:CardHeader>
> <sp:CardContent>
> <sp:Form labelPosition="left">
> <sp:FormItem>
> <sp:FormLabel text="Username*"/>
> <sp:FormField>
> <sp:TextField placeholder="Enter your user name"/>
> </sp:FormField>
> </sp:FormItem>
> <sp:FormItem>
> <sp:FormLabel text="Password*"/>
> <sp:FormField>
> <sp:TextField placeholder="Enter password" />
> </sp:FormField>
> </sp:FormItem>
> <sp:FormItem>
> <sp:Button flavor="cta" text="Button"/>
> </sp:FormItem>
> </sp:Form>
> </sp:CardContent>
> </sp:CardBody>
> </sp:body>
> </sp:Card> -->
> </sp:Container>
>
>
> The SignInForm contains the definition of the sp:Card in a separate SignInForm.mxml file.
> I noticed that royale does not render the card. However, if I do this
>
> <sp:Container id="mainGroup" className="container">
> <!-- <view:SignInForm id="signInForm" includeIn="joinus">
> </view:SignInForm> -->
> <sp:Card x="200" y="200" className="login_card" includeIn="joinus">
> <sp:body>
> <sp:CardBody>
> <sp:CardHeader>
> <sp:CardTitle text="Sign In"/>
> </sp:CardHeader>
> <sp:CardContent>
> <sp:Form labelPosition="left">
> <sp:FormItem>
> <sp:FormLabel text="Username*"/>
> <sp:FormField>
> <sp:TextField placeholder="Enter your user name"/>
> </sp:FormField>
> </sp:FormItem>
> <sp:FormItem>
> <sp:FormLabel text="Password*"/>
> <sp:FormField>
> <sp:TextField placeholder="Enter password" />
> </sp:FormField>
> </sp:FormItem>
> <sp:FormItem>
> <sp:Button flavor="cta" text="Button"/>
> </sp:FormItem>
> </sp:Form>
> </sp:CardContent>
> </sp:CardBody>
> </sp:body>
> </sp:Card>
> </sp:Container>
>
> I have to place the full definition of the sp:Card in the sp:Container for it to be rendered.
>
> The disadvantage of this is that I cannot define large complex composite components in separate mxml files and reference them in the main view mxml.
>
>
> I am able to do this using jewel or material design. It is a very useful feature.
>
> Any ideas ? Can this be done using spectrum ?
>