Uploaded image for project: 'Apache Flex'
  1. Apache Flex
  2. FLEX-23586

Spark TitleWindow close button should be vertically centered instead of using top constraint

    XMLWordPrintableJSON

Details

    • Improvement
    • Status: Closed
    • Major
    • Resolution: Won't Fix
    • Adobe Flex SDK 4.0 (Release)
    • None
    • Spark: TitleWindow
    • None
    • Affected OS(s): All OS Platforms
      Language Found: English

    Description

      Found in 4.0.0.14159.

      Steps to reproduce:
      1. Compile and run attached MXML file.
      2. Drag the Slder to resize the TitleWindow container's title bar area.

      Actual Results:
      Text is vertically aligned, but close button isnt.

      Expected Results:
      Button should be vertically aligned, not pinned to top-right corner.

      Workaround (if any):
      (a) Reskin s:TitleWindow and change the top="7" constraint to verticalAlign="0" (see line 232 in spark/skins/spark/TitleWindowSkin.mxml:

      <!--- @copy spark.components.TitleWindow#closeButton -->
      <s:Button id="closeButton" skinClass="spark.skins.spark.TitleWindowCloseButtonSkin"
      width="15" height="15" right="7" top="7" />

      (b) Set the verticalAlign property/constraint in the TitleWindow container's creationComplete event handler (no need to reskin, which is nicer – but requires you to set this on each individual TitleWindow with non-standard title bar height):

      <s:HSlider id="sl" minimum="30" maximum="120" change="tw.titleDisplay.minHeight = sl.value;" />

      <s:TitleWindow id="tw"
      title="Spark TitleWindow title"
      height="200"
      x="20" y="20"
      creationComplete="tw.closeButton.verticalCenter = 0;">
      <s:layout>
      <s:VerticalLayout paddingLeft="20" paddingRight="20" paddingTop="20" paddingBottom="20" />
      </s:layout>
      <s:Label text="Foo bar" />
      </s:TitleWindow>

      (c) Betterer still, set the verticalAlign style/constraint globally using clever CSS. Setting this style seems to override the top constraint in the skin. So double-bonus of not needing to reskin, and being able to do this globally with a few lines of CSS:

      <fx:Style>
      @namespace s "library://ns.adobe.com/flex/spark";
      @namespace mx "library://ns.adobe.com/flex/mx";

      s|TitleWindow #closeButton

      { verticalCenter: 0; }

      </fx:Style>

      <s:HSlider id="sl" minimum="30" maximum="120" change="tw.titleDisplay.minHeight = sl.value;" />

      <s:TitleWindow id="tw"
      title="Spark TitleWindow title"
      height="200"
      x="20" y="20">
      <s:layout>
      <s:VerticalLayout paddingLeft="20" paddingRight="20" paddingTop="20" paddingBottom="20" />
      </s:layout>
      <s:Label text="Foo bar" />
      </s:TitleWindow>

      Attachments

        Activity

          People

            adobejira Adobe JIRA
            adobejira Adobe JIRA
            Votes:
            0 Vote for this issue
            Watchers:
            0 Start watching this issue

            Dates

              Created:
              Updated:
              Resolved: