flex-dev mailing list archives

Site index · List index
Message view « Date » · « Thread »
Top « Date » · « Thread »
From Peter Ent <p...@adobe.com>
Subject Re: [FlexJS] Summary of Changes
Date Tue, 28 Mar 2017 12:14:17 GMT
I forgot to add that "align-items:center" is not supported on the SWF side
yet. The Flexbox has a number of properties that I still have to implement
on the flex side.

On 3/28/17, 8:11 AM, "Peter Ent" <pent@adobe.com> wrote:

>The HorizontalLayout and VerticalLayout do not center their content
>because the equivalent code on the JS side does not do that (at least it
>did not do that for me in the tests I ran). I think setting margin:auto is
>supposed to help with that.
>
>On the other hand, you can switch to HorizontalFlexLayout and
>VerticalFlexLayout. Then on the Group or Container CSS, do the following:
>
>.styleForVerticalFlexLayout {
>    align-items: center;
>}
>
>.styleForHorizontalFlexLayout {
>    align-items: center;
>}
>
>This is still a learning experience both understanding the complexities of
>CSS and building an system that generates clean and robust HTML/CSS/JS.
>
>Thank you for your patience.
>
>—peter
>
>On 3/27/17, 4:46 PM, "Harbs" <harbs.lists@gmail.com> wrote:
>
>>I probably need to examine the new “flex” layouts.
>>
>>Is there a way to have content centered using those?
>>
>>> On Mar 27, 2017, at 11:35 PM, Harbs <harbs.lists@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 <pent@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.lists@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 <pent@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" <piotrzarzycki21@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
>>>>>>> piotrzarzycki21@gmail.com
>>>>>>> --
>>>>>>> View this message in context:
>>>>>>> 
>>>>>>> 
>>>>>>>https://na01.safelinks.protection.outlook.com/?url=http%3A%2F%2Fapac
>>>>>>>h
>>>>>>>e-f
>>>>>>> le
>>>>>>> 
>>>>>>> 
>>>>>>>x-development.2333347.n4.nabble.com%2FFlexJS-Summary-of-Changes-tp60
>>>>>>>7
>>>>>>>09p
>>>>>>> 60
>>>>>>> 
>>>>>>> 
>>>>>>>779.html&data=02%7C01%7C%7Cd418c8770a394118a2f208d4745e47ea%7Cfa7b1b
>>>>>>>5
>>>>>>>a7b
>>>>>>> 34
>>>>>>> 
>>>>>>> 
>>>>>>>438794aed2c178decee1%7C0%7C0%7C636261395657671115&sdata=29GdLLPJdggl
>>>>>>>Z
>>>>>>>FzZ
>>>>>>> UF
>>>>>>> AOBNCBt0S8qshiPOmXCDEbRKw%3D&reserved=0
>>>>>>> Sent from the Apache Flex Development mailing list archive at
>>>>>>> Nabble.com.
>>>>>> 
>>>>> 
>>>> 
>>> 
>>
>

Mime
View raw message