I just built another test where I nested Panels in Panels in Panels (since they are compound components) and found some of the layouts still not working right on the JS side.
It looks to me like the problem is not setting the style attributes right using Flexbox. While I spent a good deal of time trying to understand this, I think the algorithmic approach isn't applying the styles correctly in all cases. I'm trying to figure out exactly why my structure isn't styled correctly. Please stay tuned… -peter On 3/27/17, 5:48 PM, "Greg Dove" <greg.d...@gmail.com> wrote: >I've just done a sweep through one project fixing our 'borked' stuff, I >guess the latest change might re-'bork' some of the fixes, but I think at >least these changes should be easier to address. > >Sometimes I needed to swap a Container to a Group and other times not, >because of the relative/absolute changes. >I found it easier to migrate a lot of the layout stuff to pure css for now >using flexbox, thinking that doing so might insulate us from further >changes in the coded layout support. We would have the ability to swap >back >to beads etc later if we want to have that in the mxml, once things have >become stable. > > >On Tue, Mar 28, 2017 at 9:52 AM, Peter Ent <p...@adobe.com> wrote: > >> Does the HTML look OK - the structure. Is there anything missing? You >> should see a simplified nesting of DIVs. If that's the case, then maybe >> there is more work to do with the layouts. >> >> The topmost Container, outer controls, doesn't look like it has a >>layout, >> so with Container that should default to BasicLayout. That's one thing >>to >> check. >> >> Does the Container with id scrollContainer have a parent somewhere with >>a >> fixed width and height? The auto margins should still work for HTML. >> Mostly the work is on the SWF side; the JS code was "cleaned up" so >>maybe >> that's the problem. I took out much of the algorithmic code for Vertical >> and Horizontal layout since I believe HTML would respond property to the >> addition of children, removal of children, resizing, etc. I did have, >>if I >> remember correctly, to add "white-space:nowrap" to the >>HorizontalLayout; I >> don't know that will affect you. >> >> Would you mind tinker with the HTML DOM in the browser to see if you can >> get the look you want? That will help determine if the layout code needs >> to be adjusted. >> >> Thanks and so sorry for the problems. *must use feature branch next >>time* >> —peter >> >> On 3/27/17, 4:35 PM, "Harbs" <harbs.li...@gmail.com> wrote: >> >> >Better, but I still have some problems (there’s probably more): >> > >> > <js:Container width="100%" id="outerControls"> >> > <js:style> >> > <js:SimpleCSSStyles >> backgroundColor="0x444444"/> >> > </js:style> >> > <js:Container id="controls"> >> > <js:style> >> > <js:SimpleCSSStyles >> marginLeft="auto" marginRight="auto"/> >> > </js:style> >> > <js:beads> >> > <js:HorizontalLayout/> >> > </js:beads> >> > <js:ImageButton className="iconButton >> white" width="30" height="30" >> >click="undo_clickHandler(event)" id="undoButton" >> >src="assets/images/icons/0726-undo.svg"> >> > <js:beads> >> > <js:DisableBead/> >> > </js:beads> >> > </js:ImageButton> >> > <js:ImageButton className="iconButton >> white" width="30" height="30" >> >click="redo_clickHandler(event)" id="redoButton" >> >src="assets/images/icons/0727-redo.svg"> >> > <js:beads> >> > <js:DisableBead/> >> > </js:beads> >> > </js:ImageButton> >> > <js:ImageButton className="iconButton >> white" width="30" height="30" >> >click="zoomin_clickHandler(event)" >> >src="assets/images/icons/0806-zoom-in.svg"/> >> > <js:ImageButton className="iconButton >> white" width="30" height="30" >> >click="zoomout_clickHandler(event)" >> >src="assets/images/icons/0807-zoom-out.svg"/> >> > <js:ImageButton className="iconButton >> white" width="30" height="30" >> >click="fitButton_clickHandler(event)" >> >src="assets/images/icons/0843-expand.svg"/> >> > <js:ImageButton className="iconButton >> white" width="30" height="30" >> >click="previewButton_clickHandler(event)" >> >src="assets/images/icons/0786-file-preview-white.svg"/> >> > <js:Spacer width="10"/> >> > <js:ImageButton className="iconButton >> white" width="30" height="30" >> >click="finishButton_clickHandler()" >> >src="assets/images/icons/0821-check.svg"/> >> > <js:Spacer width="10"/> >> > <js:ImageButton className="iconButton >> white" width="30" height="30" >> >click="cancelButton_clickHandler()" >> >src="assets/images/icons/0822-cross2.svg"/> >> > </js:Container> >> > >> >1. This used to create a centered group of buttons. Now, the container >> >has a height of 0 and the buttons don’t show up. >> > >> >2. >> > <js:Container >>className="designOuterContainer" >> id="scrollContainer" >> >width="100%" height="100%"> >> > <js:beads> >> > <js:ScrollingViewport/> >> > </js:beads> >> > <components:DesignAreaHolder >> id="designContainer" >> >className="_holder" y="0"> >> > <components:style> >> > >> <js:SimpleCSSStyles marginLeft="auto" marginRight="auto"/> >> > </components:style> >> > </components:DesignAreaHolder> >> > >> > </js:Container> >> > >> >This used to create a scrolling div that was centered in the the >>window. >> >It now is aligned left, and I don’t know if it scrolls. >> > >> >There’s other issues, and I’ll see tomorrow what I can work around. >> > >> >> On Mar 27, 2017, at 11:08 PM, Peter Ent <p...@adobe.com> wrote: >> >> >> >> Hi, >> >> >> >> I just pushed a change to UIBase to set position="absolute" when >> >>setting x >> >> or y. I think this is perfectly safe and if someone does set x and y >>and >> >> then tries to use a layout where that would be a conflict, they will >>get >> >> have to avoid setting those properties. >> >> >> >> I figured this would eventually happen. Let's see if this fixes the >> >>issue. >> >> >> >> —peter >> >> >> >> >> >> On 3/27/17, 2:58 PM, "Harbs" <harbs.li...@gmail.com> wrote: >> >> >> >>> Peter, >> >>> >> >>> I just tried loading my app with your changes, and everything is >> >>>totally >> >>> borked. We rely a lot on absolute positioning and transformations. >> >>> >> >>> We really need the old behavior in some components. >> >>> >> >>> Is there any components which work the same as they used to? >> >>> >> >>> Harbs >> >>> >> >>>> On Mar 26, 2017, at 6:55 PM, Peter Ent <p...@adobe.com> wrote: >> >>>> >> >>>> For the time being, the Tour main view should have a width and a >> >>>>height: >> >>>> >> >>>> <local:TourJSMainView id="mainView" width="100%" height="900" /> >> >>>> >> >>>> Then in the style section, give everything flex-grow: 1; and it >>should >> >>>> look better. I think some padding and/or margins might be needed, >>but >> >>>>I >> >>>> think I have more work do with the layouts. I'll bump getting the >>tour >> >>>> to >> >>>> the top of the list for this week because I think its nesting of >> >>>> elements >> >>>> is a good test. I think it is just a matter of setting the style >> >>>>values >> >>>> right. HTML structure-wise it looks fine, so that's good. >> >>>> >> >>>> ‹peter >> >>>> >> >>>> On 3/26/17, 11:31 AM, "piotrz" <piotrzarzyck...@gmail.com> wrote: >> >>>> >> >>>>> Peter, >> >>>>> >> >>>>> I've started to experiment with your new classes in TourJS and I >> >>>>>think >> >>>>> I've >> >>>>> achieved some good look, but not everything is working as >>expected. >> >>>>> >> >>>>> For some reason code of examples has not been loaded properly. If >>you >> >>>>> could >> >>>>> review my changes and give some feedback, whether I used your new >> >>>>> classes >> >>>>> in >> >>>>> appropriate manner. >> >>>>> >> >>>>> Thanks, >> >>>>> Piotr >> >>>>> >> >>>>> >> >>>>> >> >>>>> ----- >> >>>>> Apache Flex PMC >> >>>>> piotrzarzyck...@gmail.com >> >>>>> -- >> >>>>> View this message in context: >> >>>>> >> >>>>> >> >>>>>https://na01.safelinks.protection.outlook.com/?url= >> http%3A%2F%2Fapache >> >>>>>-f >> >>>>> le >> >>>>> >> >>>>> >> >>>>>x-development.2333347.n4.nabble.com%2FFlexJS-Summary- >> of-Changes-tp6070 >> >>>>>9p >> >>>>> 60 >> >>>>> >> >>>>> >> >>>>>779.html&data=02%7C01%7C%7Cd418c8770a394118a2f208d4745e >> 47ea%7Cfa7b1b5a >> >>>>>7b >> >>>>> 34 >> >>>>> >> >>>>> >> >>>>>438794aed2c178decee1%7C0%7C0%7C636261395657671115& >> sdata=29GdLLPJdgglZF >> >>>>>zZ >> >>>>> UF >> >>>>> AOBNCBt0S8qshiPOmXCDEbRKw%3D&reserved=0 >> >>>>> Sent from the Apache Flex Development mailing list archive at >> >>>>> Nabble.com. >> >>>> >> >>> >> >> >> > >> >>
