royale-dev mailing list archives

Site index · List index
Message view « Date » · « Thread »
Top « Date » · « Thread »
From Harbs <harbs.li...@gmail.com>
Subject Re: Working on UI Controls styling
Date Wed, 01 Nov 2017 13:00:00 GMT
<js:ImageButton click="flipHorizontally()" src="assets/images/icons/0896-flip-horizontal2.svg"/>
<js:ImageButton click="flipVertically()" src="assets/images/icons/0897-flip-vertical2.svg"/>


> On Nov 1, 2017, at 2:45 PM, Carlos Rovira <carlos.rovira@codeoscopic.com> wrote:
> 
> Hi Harbs,
> 
> could you post some basic snippet for this to look at your approach?
> 
> Thanks!
> 
> 2017-11-01 13:42 GMT+01:00 Harbs <harbs.lists@gmail.com>:
> 
>> You can use SVG files instead of PNG files. I’m doing that extensively in
>> my app, but that will only work for components which have src or
>> background-image.
>> 
>>> On Nov 1, 2017, at 2:14 PM, Carlos Rovira <carlosrovira@apache.org>
>> wrote:
>>> 
>>> Hi,
>>> 
>>> I started a new project as Piotr suggested. After setup I only put one
>>> single button to start figuring how to do this.
>>> 
>>> I'm starting for now with Basic, but as we discussed, don't know if this
>>> should go directly to express or not...it seems like something we could
>>> plug into Basic at any time as we can plug beads, and Express will come
>>> with some theme bundled. That seem the most natural for me right now
>>> 
>>> Setting up a CSS-only theme seems pretty straight forward for me, and I
>>> could go with it for now.
>>> 
>>> Regarding SVG, right now I don't see the way to add SVG in Royale. As
>> Alex
>>> suggested, I think we need to be able to add SVG in MXML.
>>> I was looking at this topic and seems very powerful since it can be
>>> integrated with CSS as well and in HTML
>>> 
>>> For Example we have: https://css-tricks.com/using-svg/
>>> 
>>> Maybe I could start with only CSS and see how far I can go, making
>>> wireframe and royale themes, as well trying with PNG images to
>> complement,
>>> but I suppose I'll get stuck soon, so maybe we should talk about SVG
>>> support as well and how hard it would be to make it happen in Royale. As
>>> well if you know other ways to integrate SVG right now please let me know
>>> 
>>> Thanks
>>> 
>>> 
>>> 
>>> 
>>> 2017-10-31 21:31 GMT+01:00 Piotr Zarzycki <piotrzarzycki21@gmail.com>:
>>> 
>>>> I can say at this point that I really like idea with swappable view. In
>>>> most cases view is an ActionScript class where we may have more
>> possibility
>>>> to do things. When I was looking last time into the checkbox it for sure
>>>> need to more love, some part of the logic should be moved to the View.
>>>> 
>>>> Piotr
>>>> 
>>>> 2017-10-31 20:50 GMT+01:00 Alex Harui <aharui@adobe.com.invalid>:
>>>> 
>>>>> Ugh,  Something has gone bad in the Basic components.  Things like
>>>>> CheckBox and RadioButton should be creating simple <input
>> type="check"/>
>>>>> and <input type='radio' /> elements.
>>>>> 
>>>>> The ability to style everything belongs in a different set of
>> components.
>>>>> Basic is supposed to generate the simplest tree of HTMLElements even
if
>>>>> they can't be fully styles.  That's so someone can do the equivalent
of
>>>>> just using bare bones <input> elements.
>>>>> 
>>>>> What is currently in Basic CheckBox and RadioButton might be right for
>>>>> creating fully styleable components, or some other composition of
>>>>> HTMLElements might be better.  Carlos, I think that's up to you to
>>>> decide.
>>>>> 
>>>>> An alternative approach is to have the JS implementations of CheckBox
>> and
>>>>> RadioButton have views and the views could create the HTMLElements.
>> That
>>>>> seems a bit heavy for the simple case of someone who just wants to use
>>>>> <input type="check" in an app, but that is a possibility.
>>>>> 
>>>>> It sounds like you are looking for a way to manipulate SVG at runtime.
>>>> It
>>>>> is fine to have "static SVG" which is a block of SVG with that cannot
>> be
>>>>> modified and thus uses percentages and absolute values as best it can.
>>>>> Then we probably want to have a way to create "dynamic" skins with run
>>>>> code to generate or manipulate SVG.  Those will be heavier, but that's
>>>>> PAYG.  Should we try to allow SVG tags in MXML files?  Then you could
>>>>> write code in an fx:Script block around your SVG tags and manipulate
>> the
>>>>> SVG?
>>>>> 
>>>>> So IMO first, we should look into reverting Basic back to single simple
>>>>> HTMLElements where possible, then decide whether we want to have
>>>> swappable
>>>>> views or a new skinnable component set, then build out that component
>> set
>>>>> and see what code it takes to get it to look the way we want it.  And
>>>> then
>>>>> we'll know what code is needed and can plan out how to encapsulate and
>>>>> re-use that code.
>>>>> 
>>>>> My 2 cents,
>>>>> -Alex
>>>>> 
>>>>> On 10/31/17, 11:23 AM, "Piotr Zarzycki" <piotrzarzycki21@gmail.com>
>>>> wrote:
>>>>> 
>>>>>> Hi Carlos,
>>>>>> 
>>>>>> I think you should start looking into the Basic module and later
make
>> an
>>>>>> upgrades to Express once you have all components visually created.
I
>>>> would
>>>>>> not think on that stage about how we implement them rather look how
>> they
>>>>>> look like currently.
>>>>>> 
>>>>>> 1) Create small app or run example with that component from our
>>>>>> repository.
>>>>>> 2) Make it visually with theme
>>>>>> 3) Show on the dev list - once we agree on all of them we can decide
>> how
>>>>>> to
>>>>>> apply those styles.
>>>>>> 
>>>>>> My 2 cents. :) Piotr
>>>>>> 
>>>>>> 
>>>>>> 2017-10-31 19:12 GMT+01:00 Carlos Rovira <carlosrovira@apache.org>:
>>>>>> 
>>>>>>> Hi,
>>>>>>> 
>>>>>>> I'm trying to find a valid workflow to start working in two initial
>>>>>>> faces
>>>>>>> for Royale components.
>>>>>>> 
>>>>>>> I'm talking about to generate some kind of UI sheet with all
controls
>>>>>>> and a
>>>>>>> basic wireframe style and another one that would be what more
people
>>>>>>> will
>>>>>>> be using as default in Royale. From here, will be more easy to
other
>>>>>>> guys
>>>>>>> to change styles. We could event create a Royale Theme editor
in a
>>>> near
>>>>>>> future.
>>>>>>> 
>>>>>>> So, to start working on this I need a design tool, and in this
case,
>> I
>>>>>>> think that one is Sketch App.
>>>>>>> 
>>>>>>> So I can create a design in Sketch with all controls (Button,
>>>> TextInput,
>>>>>>> CheckBox, Panel,...)
>>>>>>> 
>>>>>>> From here, I can generate CSS and SVG code
>>>>>>> 
>>>>>>> For example the code of this simple button
>>>>>>> (https://na01.safelinks.protection.outlook.com/?url=
>>>>> https%3A%2F%2Fsnag.gy
>>>>>>> %2FAm2fRX.jpg&data=02%7C01%7C%7Cc23665e118fc4a7fed4c08d5208c
>>>>> 8494%7Cfa7b1b
>>>>>>> 5a7b34438794aed2c178decee1%7C0%7C0%7C636450710247213906&
>>>>> sdata=Z4b6dMq%2Br
>>>>>>> UmSSxpGYNjgKl0nkRkIlV%2FbQIDLVUIvo6E%3D&reserved=0)
>>>>>>> that
>>>>>>> I did quickly is:
>>>>>>> 
>>>>>>> CSS
>>>>>>> 
>>>>>>> /* Background: */
>>>>>>> background: #D8D8D8;
>>>>>>> border: 1px solid #979797;
>>>>>>> border-radius: 3px;
>>>>>>> 
>>>>>>> /* TextField: */
>>>>>>> font-family: HelveticaNeue;
>>>>>>> font-size: 12px;
>>>>>>> color: #646D7A;
>>>>>>> 
>>>>>>> (CSS is almost all usable)
>>>>>>> 
>>>>>>> And SVG
>>>>>>> 
>>>>>>> <svg width="150px" height="40px" viewBox="0 0 150 40" version="1.1"
>>>>>>> xmlns="
>>>>>>> 
>>>>>>> https://na01.safelinks.protection.outlook.com/?url=
>>>>> http%3A%2F%2Fwww.w3.or
>>>>>>> g%2F2000%2Fsvg&data=02%7C01%7C%7Cc23665e118fc4a7fed4c08d5208c
>>>>> 8494%7Cfa7b1
>>>>>>> b5a7b34438794aed2c178decee1%7C0%7C0%7C636450710247213906&
>>>>> sdata=cWLJ2jj9Ih
>>>>>>> cGnjAB8GEtEIdc3ZZO2OSAsgzPNEVrUzE%3D&reserved=0"
>>>>>>> xmlns:xlink="https://na01.safelinks.protection.outlook.
>>>>> com/?url=http%3A%2
>>>>>>> F%2Fwww.w3.org%2F1999%2Fxlink&data=02%7C01%7C%
>>>>> 7Cc23665e118fc4a7fed4c08d52
>>>>>>> 08c8494%7Cfa7b1b5a7b34438794aed2c178decee1%7C0%7C0%
>>>>> 7C636450710247213906&s
>>>>>>> data=sgNtytSumzad%2BraDA6NoITbm6XqJJx6yHQudjzhpm6Y%3D&reserved=0">
>>>>>>>   <!-- Generator: Sketch 47.1 (45422) -
>>>>>>> 
>>>>>>> https://na01.safelinks.protection.outlook.com/?url=
>>>>> http%3A%2F%2Fwww.bohem
>>>>>>> iancoding.com%2Fsketch&data=02%7C01%7C%
>> 7Cc23665e118fc4a7fed4c08d5208c
>>>>> 8494
>>>>>>> %7Cfa7b1b5a7b34438794aed2c178decee1%7C0%7C0%
>>>>> 7C636450710247213906&sdata=dE
>>>>>>> oGVBONBD6Z1XMTjYcpEc7gq5UqtS8BziB0I3f9qSs%3D&reserved=0 -->
>>>>>>>   <desc>Created with Sketch.</desc>
>>>>>>>   <defs>
>>>>>>>       <rect id="path-1" x="0" y="0" width="150" height="40"
>>>>>>> rx="3"></rect>
>>>>>>>   </defs>
>>>>>>>   <g id="Page-1" stroke="none" stroke-width="1" fill="none"
>>>>>>> fill-rule="evenodd">
>>>>>>>       <g id="Royale" transform="translate(-58.000000, -49.000000)">
>>>>>>>           <g id="Button" transform="translate(58.000000,
>>>> 49.000000)">
>>>>>>>               <g id="Background">
>>>>>>>                   <use fill="#D8D8D8" fill-rule="evenodd"
>>>>>>> xlink:href="#path-1"></use>
>>>>>>>                   <rect stroke="#979797" stroke-width="1"
x="0.5"
>>>>>>> y="0.5"
>>>>>>> width="149" height="39" rx="3"></rect>
>>>>>>>               </g>
>>>>>>>               <text id="TextField" font-family="HelveticaNeue,
>>>>>>> Helvetica
>>>>>>> Neue" font-size="12" font-weight="normal" fill="#646D7A">
>>>>>>>                   <tspan x="57" y="25">Button</tspan>
>>>>>>>               </text>
>>>>>>>           </g>
>>>>>>>       </g>
>>>>>>>   </g>
>>>>>>> </svg>
>>>>>>> 
>>>>>>> (SVG could be a base, but it needs to be removed absolute values
and
>>>>>>> even
>>>>>>> some static parts to be usable)
>>>>>>> 
>>>>>>> I'd like to create a Button "playground" app with a button and
some
>>>>>>> controls that allow us to change how the button looks (colors,
>>>> strokes,
>>>>>>> round corners, font face, font weight,....)
>>>>>>> 
>>>>>>> In the end this would be the starting point of a playground app
for
>>>> all
>>>>>>> Royale controls
>>>>>>> 
>>>>>>> Finaly this would be very useful if we can get the generated
code for
>>>>>>> that
>>>>>>> particular styles and we could apply easily to any app, so change
a
>>>>>>> "theme"
>>>>>>> will be quick and easy. Important: This will only work with our
>> Royale
>>>>>>> components (Express mainly, and maybe Basic?, but not MDL, CreateJS,
>>>> or
>>>>>>> others)
>>>>>>> 
>>>>>>> I'm as well interested in how we could integrate that "view"
in some
>>>>>>> component in order to easy replace visuals for a concrete component.
>>>> For
>>>>>>> example, in the button above will be
>>>>>>> 
>>>>>>> * we'll be making a skin part with SVG code, so we could pass
values
>>>> to
>>>>>>> the
>>>>>>> skin (for example colors, text button, width,...)
>>>>>>> * if not using skins, how can we pass data from the component
to the
>>>> svg
>>>>>>> part? (for example colors, text button, width,...)
>>>>>>> 
>>>>>>> To progress with this effort, I think I could start doing only
two
>>>>>>> controls, and then as we have all considerations in place progress
>>>>>>> through
>>>>>>> the rest.
>>>>>>> 
>>>>>>> Thoughts?
>>>>>>> 
>>>>>>> --
>>>>>>> Carlos Rovira
>>>>>>> 
>>>>>>> https://na01.safelinks.protection.outlook.com/?url=
>>>>> http%3A%2F%2Fabout.me%
>>>>>>> 2Fcarlosrovira&data=02%7C01%7C%7Cc23665e118fc4a7fed4c08d5208c
>>>>> 8494%7Cfa7b1
>>>>>>> b5a7b34438794aed2c178decee1%7C0%7C0%7C636450710247213906&
>>>>> sdata=auPeQ0ub4B
>>>>>>> Iq%2FTscLQWJ0Xxb9XdM2eegav2v1LXcuYY%3D&reserved=0
>>>>>>> 
>>>>>> 
>>>>>> 
>>>>>> 
>>>>>> --
>>>>>> 
>>>>>> Piotr Zarzycki
>>>>>> 
>>>>>> mobile: +48 880 859 557
>>>>>> skype: zarzycki10
>>>>>> 
>>>>>> LinkedIn:
>>>>>> https://na01.safelinks.protection.outlook.com/?url=
>>>>> http%3A%2F%2Fwww.linked
>>>>>> in.com%2Fpiotrzarzycki&data=02%7C01%7C%7Cc23665e118fc4a7fed4c08d5208c
>>>>> 8494%
>>>>>> 7Cfa7b1b5a7b34438794aed2c178decee1%7C0%7C0%
>> 7C636450710247213906&sdata=
>>>>> xZ56
>>>>>> se7Z6gcWKcC7PuWDPW0E6F9wQjEZkuYZO4zvwnY%3D&reserved=0
>>>>>> <https://na01.safelinks.protection.outlook.com/?url=
>>>>> https%3A%2F%2Fpl.linke
>>>>>> din.com%2Fin%2Fpiotr-zarzycki-92a53552&data=02%
>>>>> 7C01%7C%7Cc23665e118fc4a7fe
>>>>>> d4c08d5208c8494%7Cfa7b1b5a7b34438794aed2c178de
>>>>> cee1%7C0%7C0%7C6364507102472
>>>>>> 13906&sdata=1pwc5Fz1vKM2YCp6yUSe6x1Zdh9Au2
>> xqb28Duy2Tqac%3D&reserved=0>
>>>>>> 
>>>>>> GitHub:
>>>>>> https://na01.safelinks.protection.outlook.com/?url=
>>>>> https%3A%2F%2Fgithub.co
>>>>>> m%2Fpiotrzarzycki21&data=02%7C01%7C%7Cc23665e118fc4a7fed4c08d5208c
>>>>> 8494%7Cf
>>>>>> a7b1b5a7b34438794aed2c178decee1%7C0%7C0%7C636450710247213906&sdata=
>>>>> Lr7JdnU
>>>>>> fF%2F4xHJbXVZlZN%2Fw7t4Tz5R5KbZFwdVnZFww%3D&reserved=0
>>>>> 
>>>>> 
>>>> 
>>>> 
>>>> --
>>>> 
>>>> Piotr Zarzycki
>>>> 
>>>> mobile: +48 880 859 557
>>>> skype: zarzycki10
>>>> 
>>>> LinkedIn: http://www.linkedin.com/piotrzarzycki
>>>> <https://pl.linkedin.com/in/piotr-zarzycki-92a53552>
>>>> 
>>>> GitHub: https://github.com/piotrzarzycki21
>>>> 
>>> 
>>> 
>>> 
>>> --
>>> Carlos Rovira
>>> http://about.me/carlosrovira
>> 
>> 
> 
> 
> -- 
> 
> <http://www.codeoscopic.com>
> 
> Carlos Rovira
> 
> Director General
> 
> M: +34 607 22 60 05
> 
> http://www.codeoscopic.com
> 
> 
> Conocenos Avant2 en 1 minuto! <https://avant2.es/#video>
> 
> 
> Este mensaje se dirige exclusivamente a su destinatario y puede contener
> información privilegiada o confidencial. Si ha recibido este mensaje por
> error, le rogamos que nos lo comunique inmediatamente por esta misma vía y
> proceda a su destrucción.
> 
> De la vigente Ley Orgánica de Protección de Datos (15/1999), le comunicamos
> que sus datos forman parte de un fichero cuyo responsable es CODEOSCOPIC
> S.A. La finalidad de dicho tratamiento es facilitar la prestación del
> servicio o información solicitados, teniendo usted derecho de acceso,
> rectificación, cancelación y oposición de sus datos dirigiéndose a nuestras
> oficinas c/ Paseo de la Habana 9-11, 28036, Madrid con la documentación
> necesaria.


Mime
View raw message