Looks interesting. I thought there are (or used to be) issues with SVG and changing some aspect of the SVG on hovering over a button or checkbox, so please make sure your solutions make rollover changes possible.
Thanks, -Alex On 2/18/18, 8:36 AM, "carlos.rov...@gmail.com on behalf of Carlos Rovira" <carlos.rov...@gmail.com on behalf of carlosrov...@apache.org> wrote: >Hi Alex, > >I was investigating SVG possibilities and I think we have many options >[1]. >As well regarding make all SVG I think you refer to this and seems >possible >(example for a checkbox) [2] > >So in the end my workflow is to draw in Sketch and export code in SVG. >then >parametrize the SVG vía CSS (fill, stroke colors, effects like >blur,..etc.. > >I'll be working starting from this. > >[1] >https://na01.safelinks.protection.outlook.com/?url=https%3A%2F%2Fcss-trick >s.com%2Fusing-svg%2F&data=02%7C01%7Caharui%40adobe.com%7C80e3cb8e283749bc8 >8f608d576eddbaf%7Cfa7b1b5a7b34438794aed2c178decee1%7C0%7C0%7C6365456863245 >79420&sdata=IiZDbYLO6RU8gwWSgrYYoyifpNWg0idC3g7K%2BHzTwl8%3D&reserved=0 >[2] >https://na01.safelinks.protection.outlook.com/?url=https%3A%2F%2Fcodepen.i >o%2Fseanseansean%2Fpen%2FIAcvD&data=02%7C01%7Caharui%40adobe.com%7C80e3cb8 >e283749bc88f608d576eddbaf%7Cfa7b1b5a7b34438794aed2c178decee1%7C0%7C0%7C636 >545686324579420&sdata=i45r8IORY9b3el6DelMbyI8NkV9Nv7XeHvOPX%2Fni9Yc%3D&res >erved=0 > > > > >2018-02-13 19:18 GMT+01:00 Alex Harui <aha...@adobe.com.invalid>: > >> Hi Carlos, >> >> Yes, I would love it if there was a way to have a simpler HTML >>structure. >> I saw this article [1] implied you could hide the checkbox. >> I don't know for sure, but my sense is that the HTML structure used by >> bootstrap and mdl couldn't take advantage of browsers supporting >> display:none to hide the checkbox. If you have time, it would be >> interesting to see if you can hide the checkbox and set a >>background-image >> to some SVG. IMO, it would be ok if truly allowing any visuals required >> CSS3 support in the browser. You could have another set of views that >>use >> the MDL-like HTML Trees. >> >> IMO, if you can draw every pixel of the various HTML Input controls by >> hiding the default look and drawing background-images, and mouse hit >> detection still works, you will have a pattern that is closest to that >>of >> Spark in Flex. Even closer would be to have a Div with an SVGElement in >> front or in back of a control with alpha=0, but that seems heavy to me. >> >> It occurred to me how this effort may be analogous to Feathers and >> Starling. Flash has SimpleButton. You give it 3 views (up, down, >>hover) >> and you are done. But if that isn't enough control (can't easily do >> disabled view) then you use a Sprite and write your own mouse code. And >> then you get for a little more code, things like focus and >>accessibility. >> Then if that's not good enough, you use the Stage3D and start writing >> controls that work there, but then you have to draw everything and write >> more code for mouse handling and focus and accessibility. I think you >>can >> find a way in Royale to draw everything, but it might turn out to be a >>lot >> of work in the same way. The less built-in behavior you use, the more >> work it will be. >> >> Good luck, >> -Alex >> >> [1] >> >>https://na01.safelinks.protection.outlook.com/?url=http%3A%2F%2Fwww.css3. >>com%2Fimplementing-custom-checkboxes-and-radio-buttons-&data=02%7C01%7Cah >>arui%40adobe.com%7C80e3cb8e283749bc88f608d576eddbaf%7Cfa7b1b5a7b34438794a >>ed2c178decee1%7C0%7C0%7C636545686324579420&sdata=vbxDDTMw2U2ky%2B9kJV8XY8 >>e%2FvqDzsj8OpRkQKarolQA%3D&reserved=0 >> with-c >> ss3/ >> >> On 2/12/18, 2:10 PM, "carlos.rov...@gmail.com on behalf of Carlos >>Rovira" >> <carlos.rov...@gmail.com on behalf of carlosrov...@apache.org> wrote: >> >> >Hi Alex, >> > >> >very good questions here. Sincerely I'd like to have responses but this >> >path is completely new for me and need to experiment with it. >> >If someone has examples or urls where this is covered, please share >>here, >> >since I'm starting right now to see what can be done. >> > >> >As you see, yesterday I started solving the three project structure and >> >put >> >one component in place. That component has a structure similar as you >>see >> >to what people is doing out there with bootstrap, mdl, and others. >>Maybe >> >that's the best right now, but I'd like to know if something can be >>done >> >with SVG. >> >The perfect world would be to have the simplest html structure that >>could >> >be stylized with basic CSS and/or SVG so you can have almost an >>infinite >> >set >> >of variations and many people could create its own themes based in a >> >concrete structure. >> > >> >One thing I want to explore is CSS structure, For example, instead of >>one >> >CSS to rule them all, I want to have one CSS per component, so you can >> >easily go to >> >"TextField.css" and change the look and feel of that concrete >>component. >> >The in the pom.xml, you'll have all .css added so the final css file >>will >> >be the union of all >> >css files. >> > >> >I think we have to create at least two themes to show case the theme >> >feature, and then we should see if we support things like runtime theme >> >loading to change >> >all the app style with a single click of a button and things like that. >> > >> >I'll be searching for internet the best way to customize controls and >>try >> >SVG in combination of CSS. As I said, any advice on how to proceed is >> >welcome, just please >> >post some example or url in order to understand as much as possible. >> > >> >Thanks! >> > >> > >> > >> > >> >2018-02-12 10:03 GMT+01:00 Alex Harui <aha...@adobe.com.invalid>: >> > >> >> Thanks for getting started on this. Good to know that Theme is >>working >> >> for you. I think we've used Theme in a few other places already like >> >>Flat >> >> in case you want to see it working somewhere else. >> >> >> >> AIUI, Vivid is just one look-and-feel you and others will provide >>based >> >>on >> >> a new "sub-DOM" within the UI components like TextInput. Someone >>will >> >> provide a Wireframe, others will come up with completely different >> >>looks. >> >> So it may be that you will create some other SWC called >> >>"HighlyStyleable" >> >> and that's where the newly structured components will go, and Vivid >>and >> >> VividBlue will be more or less just a set of styles and assets to >>plug >> >> into those sub-DOMs. >> >> >> >> It is fine if this work reduces usage of Express. I don't believe >> >> everyone uses Bootstrap or MDL for every web page. I believe there >>are >> >> people who don't need control over every pixel and are happy using >>the >> >> browser Checkbox as-is. They will continue to use Express and Basic. >> >> >> >> But also, I hope that this styling work ends up being a SWC full of >>new >> >> Views and no other beads. And the components are empty subclasses of >> >>some >> >> Basic or Express component. That would be ideal. It would mean that >> >>all >> >> other kinds of beads in Basic can be re-used in these highly-styled >> >> components and that we've put the right boundary around what a View >>is. >> >> Speak up if it doesn't look like that will be possible. >> >> >> >> Finally, I'm wondering how this work, which I think has the goal of >> >> providing a new default look for Royale, relates to the goal of a >>"truly >> >> skinnable" component set, where just about every pixel would be >> >>described >> >> in SVG. It feels like the sub-DOM approach is similar to the >>Bootstrap >> >> and MDL technique of allowing customizations that can be described in >> >>CSS >> >> operating on the given sub-DOM, which is great. But is the only way >>to >> >> truly allow any look to allow SVG to describe every pixel or can it >>be >> >> done with these sub-DOMs? >> >> >> >> Thoughts? >> >> -Alex >> >> >> >> PS: Done for tonight. Will pick this up in my morning. >> >> >> >> >> >> On 2/11/18, 9:13 AM, "carlos.rov...@gmail.com on behalf of Carlos >> >>Rovira" >> >> <carlos.rov...@gmail.com on behalf of carlosrov...@apache.org> wrote: >> >> >> >> >Hi, >> >> > >> >> >just let you know that I have the basic structure of Vivid new UI >>set, >> >>a >> >> >first Vivid theme test project and a example for this working. >> >> >Right now nothing relevant as a final results, but Alex advice about >> >> >"theme" compiler option is working for me. The only control in this >> >>set of >> >> >projects using all of this is "TextField" vivid control, but now I >> >>need to >> >> >implement some concrete look and feel. >> >> > >> >> >As well, I finaly see what Harbs said about make a new UI set due to >> >>html >> >> >structure change. I need to change basic default html structure. >> >> > >> >> >I think this last is important, and maybe Express could end with no >>use >> >> >due >> >> >to the lack of more HTML structure in each component. >> >> >Without that is very complicated stylize controls, and without >> >>stylizing, >> >> >the UI set is almost useless. If the purpose of Basic and Express is >> >> >having >> >> >the foundation of a third UI set, then that's ok. Just want to >>notice >> >>this >> >> >fact. >> >> > >> >> >About my intentions with all of this: First let you know that I'll >>be >> >> >focusing in make JSOnly controls, and will not spend time with SWF >>for >> >> >now. >> >> >Don't know if this is important for someone right now. >> >> > >> >> >Finally, "RoyaleThemes" example project can be removed since now is >> >> >totally >> >> >useless. I'm working in a new branch "feature/themes". If anyone >>wants >> >>to >> >> >join the effort let me know! (for example make new controls, >>implements >> >> >swf >> >> >version,...) >> >> > >> >> >:) >> >> > >> >> >Carlos >> >> > >> >> >-- >> >> >Carlos Rovira >> >> >https://na01.safelinks.protection.outlook.com/?url= >> >> http%3A%2F%2Fabout.me%2 >> >> >Fcarlosrovira&data=02%7C01%7Caharui%40adobe.com% >> >> 7C4e1bceecd0ec438af45608d5 >> >> >7172e2ea%7Cfa7b1b5a7b34438794aed2c178decee1%7C0%7C0% >> >> 7C636539660665370162&s >> >> >data=Sho46ZzxMYnpV5FRQy%2BwDX%2By14zsYH8mrGlLUDMbORk%3D&reserved=0 >> >> >> >> >> > >> > >> >-- >> >Carlos Rovira >> >https://na01.safelinks.protection.outlook.com/?url= >> http%3A%2F%2Fabout.me%2 >> >Fcarlosrovira&data=02%7C01%7Caharui%40adobe.com% >> 7C49228274fcec44707bca08d5 >> >72658b3a%7Cfa7b1b5a7b34438794aed2c178decee1%7C0%7C0% >> 7C636540702836161826&s >> >data=QqF1036JKww2bAyBSIlSmYlsSGKfyq0YFwbz23YWvnE%3D&reserved=0 >> >> > > >-- >Carlos Rovira >https://na01.safelinks.protection.outlook.com/?url=http%3A%2F%2Fabout.me%2 >Fcarlosrovira&data=02%7C01%7Caharui%40adobe.com%7C80e3cb8e283749bc88f608d5 >76eddbaf%7Cfa7b1b5a7b34438794aed2c178decee1%7C0%7C0%7C636545686324579420&s >data=GW4dFCb7KcRfliPKE4G6aM186uAnzEOSf4XdGJRS1A0%3D&reserved=0
