royale-dev mailing list archives

Site index · List index
Message view « Date » · « Thread »
Top « Date » · « Thread »
From Piotr Zarzycki <piotrzarzyck...@gmail.com>
Subject Re: Working on UI Controls styling
Date Tue, 31 Oct 2017 18:23:29 GMT
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://snag.gy/Am2fRX.jpg)
> 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="
> http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
>     <!-- Generator: Sketch 47.1 (45422) -
> http://www.bohemiancoding.com/sketch -->
>     <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
> http://about.me/carlosrovira
>



-- 

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

Mime
  • Unnamed multipart/alternative (inline, None, 0 bytes)
View raw message