Hi Carlos,
Looks good to me. Thanks for doing this.
I'm not sure I understand all of the aspects of this effort. My current
understanding is that Google Material is under the Apache License and thus
we can use it if we want to. Am I correct that MaterialDesignLite is one
implementation of Google Material and we could create our own
implementation and it could be visually different?
Also, IIRC, Material has different components than Flex did so we'd have
to invent some new looks anyway. So having a TextInput with borders all
around would just be our flavor of Material.
Regarding colors, it looks like Material is parameterized around a couple
of colors. So if we did our skins to work against parameterized colors
then would it really matter what color we choose?
Regarding Basic components, right now Checkbox is a <label><input
type="check"/>caption</label>. AIUI, you cannot style the <input> on many
browsers, so I think we have to have a different set of elements in a
checkbox. It looks like Bootstrap uses:
<label><input type="check"/><span />Caption</label>
Where the span uses a special symbol font with checked and unchecked boxes.
Thanks,
Alex
On 11/2/17, 5:15 PM, "carlos.rov...@gmail.com on behalf of Carlos Rovira"
<carlos.rov...@gmail.com on behalf of carlosrov...@apache.org> wrote:
>Hi,
>
>I want to expose my initial work (very very initial) on two styles for
>Royale
>
>
>Wireframe:
>https://na01.safelinks.protection.outlook.com/?url=https%3A%2F%2Fsnag.gy%2
>FtDFxQT.jpg&data=02%7C01%7C%7C203485b5b9c744aed92608d522500f48%7Cfa7b1b5a7
>b34438794aed2c178decee1%7C0%7C0%7C636452649612378558&sdata=%2Fk8YQxC5bDOaC
>D8ZfcTzpuqZyBNTKKvkFgqDgnnWZ%2BA%3D&reserved=0
>
>(Wireframe intention is for quick Royale App prototyping, people will use
>this to start their applications, and then moving to it's own styling that
>could be another royale theme provided by us, or something done by users.
>
>Vivid (to put some temporal name):
>https://na01.safelinks.protection.outlook.com/?url=https%3A%2F%2Fsnag.gy%2
>FqKShm0.jpg&data=02%7C01%7C%7C203485b5b9c744aed92608d522500f48%7Cfa7b1b5a7
>b34438794aed2c178decee1%7C0%7C0%7C636452649612378558&sdata=kxYE7ylOsXPUEeE
>r%2BU3AnSe9zEyqgqmsIAAYW6nVuGs%3D&reserved=0
>
>(*Please, Notice that only the first button has some styling here*)
>(This theme could be the default theme for royale components like halo was
>for mx and spark was for spark)
>
>I want to put in place all the main components, so I would need some
>"component list" (Button, TextInput, CheckBox,...and what more?.), and
>we'll be centering all the effort in only that list of components.
>We need to "paint" all and the code all.
>
>The concept of theme involve a concrete set of components (and this bring
>us again if we should do this to be pluggable for Basic, or go directly
>with Express, I think even Basic should be able to use a theme maybe using
>beads to be PAYG)
>
>So, before continue tomorrow, I want some feedback on this:
>
>* I think Wireframe is clearly something Black&White, maybe as I did, in
>some grey scale colors. But for Vivid, I'm still figuring if it should be
>something "flat" and very simple, or go with something more elaborated
>since the thing I did in the example with orange button.
>
>* I like the look and feel of Google Material, how textfields looks and
>behaves, the animations, and visual concepts. But the problem is that all
>that visuals are clearly Google Material. Should we create something more
>new? This has a problem that maybe we could reach something great....or
>not, and is more work to iterate something until we reach a good point.
>For example, the text input I created has the classic box look, for me
>Material Design is better with only a bootom line, but the first is more
>generalist, while the second is clearly google, android,... I could try to
>think in something new a see what happens
>
>* In the other hand, someone would want to join me in this effort? If so I
>could center in the design part, and other person could work with me on
>the
>example project "RoyaleThemes". The example app is very important, since
>it
>could have a playground for every component so we can tweak at runtime. we
>could even generate the code to get that look...this could be like
>FlexThemeManager App that we had in the Flex days.
>
>* About colors for the second again, don't have any preferences right now,
>I put the same colors that use on the web in the first button, but as I
>said before things (colors and forms) could change dramatically in the
>second set. In the first one (Wireframe) I think it's ok to go the path
>exposed in the image example.
>
>Thanks for your comments on this, we'll be defining what we want as we
>comment here ok?
>I'm done for today,
>
>
>
>
>
>
>2017-11-02 14:22 GMT+01:00 Carlos Rovira <carlosrov...@apache.org>:
>
>> Thanks Harbs!
>>
>> very useful, I'll be keeping this info as I make some work
>>
>> Carlos
>>
>> 2017-11-02 12:13 GMT+01:00 Harbs <harbs.li...@gmail.com>:
>>
>>> BTW, the kind of thing we should be striving for in theme-able
>>>components
>>> is something like this:
>>>
>>>
>>>https://na01.safelinks.protection.outlook.com/?url=https%3A%2F%2Fvcalend
>>>ar.netlify.com%2F&data=02%7C01%7C%7C203485b5b9c744aed92608d522500f48%7Cf
>>>a7b1b5a7b34438794aed2c178decee1%7C0%7C0%7C636452649612378558&sdata=b3VtV
>>>VdACL0Z2EVnIFo2%2BgqSFmJMocDL6k%2Ba6A1ewco%3D&reserved=0
>>><https://na01.safelinks.protection.outlook.com/?url=https%3A%2F%2Fvcalen
>>>dar.netlify.com%2F&data=02%7C01%7C%7C203485b5b9c744aed92608d522500f48%7C
>>>fa7b1b5a7b34438794aed2c178decee1%7C0%7C0%7C636452649612378558&sdata=b3Vt
>>>VVdACL0Z2EVnIFo2%2BgqSFmJMocDL6k%2Ba6A1ewco%3D&reserved=0>
>>>
>>> > On Nov 2, 2017, at 12:01 PM, Harbs <harbs.li...@gmail.com> wrote:
>>> >
>>> > FYI, I worked out a theming class for my (Royale) InDesign extensions
>>> which allows for setting global CSS at runtime. The approach might be
>>> useful in your theming effort:
>>> >
>>>https://na01.safelinks.protection.outlook.com/?url=https%3A%2F%2Fpaste.a
>>>pache.org%2FcOBC&data=02%7C01%7C%7C203485b5b9c744aed92608d522500f48%7Cfa
>>>7b1b5a7b34438794aed2c178decee1%7C0%7C0%7C636452649612378558&sdata=bRWKxm
>>>LL16u%2B48IXYdA%2FoEtLWF3eU%2FIGQzBfcVCar5g%3D&reserved=0
>>><https://na01.safelinks.protection.outlook.com/?url=https%3A%2F%2Fpaste.
>>>apache.org%2FcOBC&data=02%7C01%7C%7C203485b5b9c744aed92608d522500f48%7Cf
>>>a7b1b5a7b34438794aed2c178decee1%7C0%7C0%7C636452649612378558&sdata=bRWKx
>>>mLL16u%2B48IXYdA%2FoEtLWF3eU%2FIGQzBfcVCar5g%3D&reserved=0>
>>> >
>>> > (Some of the code is specific to Adobe Extensions.)
>>> >
>>> > Some pointers:
>>> > I used inject_html because I needed some overrides in a CSS file. I
>>> might have been able to rework it so the CSS file was not needed.
>>> >
>>> > There is a function called createStyleSheet which is commented out.
>>> That creates a stylesheet called “royale_theme_styles”. It’s the same
>>>as
>>> including a blank css file with the same name, but it’s loaded
>>>dynamically
>>> rather than requiring the file to be included. If that function is used
>>> inject_html is not necessary.
>>> >
>>> > The order of dynamically loaded CSS has the same rules as CSS loaded
>>> via declaring it in HTML and the later ones override the earlier ones.
>>>We
>>> can probably take advantage of that for different levels of defaults.
>>> >
>>> > HTH,
>>> > Harbs
>>> >
>>> >> On Nov 1, 2017, at 8:05 PM, Carlos Rovira <carlosrov...@apache.org
>>> <mailto:carlosrov...@apache.org>> wrote:
>>> >>
>>> >> Hi,
>>> >>
>>> >> I think I could start to try what Harbs expose, although I think
>>>what I
>>> >> will need in the end is to control some SVG parts with variables.
>>>Maybe
>>> >> with the showed SVG/CSS relation could be sufficient. I'll be
>>>showing
>>> how
>>> >> limitations I find. As well as Alex said having inline SVG as HTML
>>> would be
>>> >> very useful.
>>> >>
>>> >> 2017-11-01 18:27 GMT+01:00 Harbs <harbs.li...@gmail.com <mailto:
>>> harbs.li...@gmail.com>>:
>>> >>
>>> >>> I’m not sure. I haven’t seen problems.
>>> >>>
>>> >>> The only issues that come to mind are:
>>> >>> 1. There’s no load events on SVG images on Microsoft browsers.
>>> >>> 2. Chrome has issues with SVG, transforms and fractional pixels.
>>> >>> 3. There’s some blending issues that different browsers handle
>>> differently
>>> >>> depending on isolation modes.
>>> >>>
>>> >>> There’s likely other issues, but these are ones that I’ve had to
>>>deal
>>> with.
>>> >>>
>>> >>> The major gotcha in terms of mixing HTML and SVG is that HTML can
>>>not
>>> be
>>> >>> nested inside SVG without ForeignObject. ForeignObject does not
>>>have
>>> full
>>> >>> browser support.
>>> >>>
>>> >>>> On Nov 1, 2017, at 7:08 PM, Alex Harui <aha...@adobe.com.INVALID
>>> <mailto:aha...@adobe.com.INVALID>> wrote:
>>> >>>>
>>> >>>> A couple of years ago, I thought I had learned that some browsers
>>>had
>>> >>>> issues with SVG background-images. Maybe psuedo-states were
>>> involved,
>>> >>> but
>>> >>>> a Button might "blink" as it changed states and loaded an SVG
>>> >>>> background-image. Do we know if that was just a bug in some
>>>browser
>>> or
>>> >>> is
>>> >>>> that still a concern?
>>> >>>>
>>> >>>> I think I would like to see a simple set of HTML/SVG/CSS/JS that
>>> shows
>>> >>> how
>>> >>>> any declarative SVG and JS have to work together to handle
>>>resizable
>>> >>>> skins/components. Then it might be more obvious what needs to
>>> change in
>>> >>>> the tooling. We allow inline HTML now in MXML. I think we
>>> can/should
>>> >>>> allow inline SVG, but for both inline HTML and SVG, id's in the
>>> inline
>>> >>>> content do not become id's to MXML and AS.
>>> >>>>
>>> >>>> HTH,
>>> >>>> -Alex
>>> >>>>
>>> >>>
>>> >>>
>>> >
>>>
>>>
>>
>>
>> --
>> Carlos Rovira
>>
>>https://na01.safelinks.protection.outlook.com/?url=http%3A%2F%2Fabout.me%
>>2Fcarlosrovira&data=02%7C01%7C%7C203485b5b9c744aed92608d522500f48%7Cfa7b1
>>b5a7b34438794aed2c178decee1%7C0%7C0%7C636452649612378558&sdata=C7a72gwfH2
>>64wTla%2Fl%2FT9fLB5ODZWiSnRqIzGfFCREU%3D&reserved=0
>>
>>
>
>
>--
>Carlos Rovira
>https://na01.safelinks.protection.outlook.com/?url=http%3A%2F%2Fabout.me%2
>Fcarlosrovira&data=02%7C01%7C%7C203485b5b9c744aed92608d522500f48%7Cfa7b1b5
>a7b34438794aed2c178decee1%7C0%7C0%7C636452649612378558&sdata=C7a72gwfH264w
>Tla%2Fl%2FT9fLB5ODZWiSnRqIzGfFCREU%3D&reserved=0
