Skip to content

Commit

Permalink
added skin for Alert, but still needs adjusting
Browse files Browse the repository at this point in the history
  • Loading branch information
Bruno Pacola committed May 22, 2014
1 parent 1ffa6f1 commit 23b4486
Show file tree
Hide file tree
Showing 5 changed files with 125 additions and 165 deletions.
4 changes: 2 additions & 2 deletions FlatSparkSkin/.flexLibProperties
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,6 @@
<classEntry path="flatSpark.skins.RadioButtonSkin"/>
<classEntry path="flatSpark.skins.TitleWindowSkin"/>
<classEntry path="flatSpark.skins.TitleWindowCloseButtonSkin"/>
<classEntry path="flatSpark.skins.AlertSkin"/>
<classEntry path="flatSpark.skins.ComboBoxSkin"/>
<classEntry path="flatSpark.skins.ComboBoxButtonSkin"/>
<classEntry path="flatSpark.skins.ComboBoxTextInputSkin"/>
Expand All @@ -33,12 +32,13 @@
<classEntry path="flatSpark.skins.HScrollBarThumbSkin"/>
<classEntry path="flatSpark.skins.ProgressBarSkin"/>
<classEntry path="flatSpark.skins.PanelSkin"/>
<classEntry path="flatSpark.skins.AlertSkin"/>
</includeClasses>
<includeResources>
<resourceEntry destPath="flatSpark/assets/fonts/lato/Lato_Hairline.otf" sourcePath="flatSpark/assets/fonts/lato/Lato_Hairline.otf"/>
<resourceEntry destPath="flatSpark/assets/fonts/lato/Lato_Bold.otf" sourcePath="flatSpark/assets/fonts/lato/Lato_Bold.otf"/>
<resourceEntry destPath="defaults.css" sourcePath="defaults.css"/>
<resourceEntry destPath="flatSpark/assets/fonts/lato/Lato_Hairline_Italic.otf" sourcePath="flatSpark/assets/fonts/lato/Lato_Hairline_Italic.otf"/>
<resourceEntry destPath="defaults.css" sourcePath="defaults.css"/>
<resourceEntry destPath="flatSpark/assets/fonts/lato/Lato_Regular.otf" sourcePath="flatSpark/assets/fonts/lato/Lato_Regular.otf"/>
<resourceEntry destPath="flatSpark/assets/fonts/awesome/FontAwesome.otf" sourcePath="flatSpark/assets/fonts/awesome/FontAwesome.otf"/>
<resourceEntry destPath="flatSpark/assets/fonts/lato/Lato_Bold_Italic.otf" sourcePath="flatSpark/assets/fonts/lato/Lato_Bold_Italic.otf"/>
Expand Down
Binary file modified FlatSparkSkin/bin/FlatSparkSkin.swc
View file
Binary file not shown.
253 changes: 96 additions & 157 deletions FlatSparkSkin/src/flatSpark/skins/AlertSkin.mxml
View file
Original file line number Diff line number Diff line change
@@ -1,118 +1,82 @@
<?xml version="1.0" encoding="utf-8"?>
<s:SparkSkin xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:fb="http://ns.adobe.com/flashbuilder/2009" blendMode="normal" mouseEnabled="false"
<!--
////////////////////////////////////////////////////////////////////////////////
//
// Licensed to the Apache Software Foundation (ASF) under one or more
// contributor license agreements. See the NOTICE file distributed with
// this work for additional information regarding copyright ownership.
// The ASF licenses this file to You under the Apache License, Version 2.0
// (the "License"); you may not use this file except in compliance with
// the License. You may obtain a copy of the License at
//
// http://www.apache.org/licenses/LICENSE-2.0
//
// Unless required by applicable law or agreed to in writing, software
// distributed under the License is distributed on an "AS IS" BASIS,
// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
// See the License for the specific language governing permissions and
// limitations under the License.
//
////////////////////////////////////////////////////////////////////////////////
-->
<s:SparkSkin xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:fb="http://ns.adobe.com/flashbuilder/2009" blendMode="normal" mouseEnabled="false"
minWidth="131" minHeight="30" alpha.disabled="0.5" alpha.disabledWithControlBar="0.5">
<!--
////////////////////////////////////////////////////////////////////////////////
//
// Licensed to the Apache Software Foundation (ASF) under one or more
// contributor license agreements. See the NOTICE file distributed with
// this work for additional information regarding copyright ownership.
// The ASF licenses this file to You under the Apache License, Version 2.0
// (the "License"); you may not use this file except in compliance with
// the License. You may obtain a copy of the License at
//
// http://www.apache.org/licenses/LICENSE-2.0
//
// Unless required by applicable law or agreed to in writing, software
// distributed under the License is distributed on an "AS IS" BASIS,
// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
// See the License for the specific language governing permissions and
// limitations under the License.
//
////////////////////////////////////////////////////////////////////////////////
@author Bogdan Dinu (http://www.badu.ro)
-->
<fx:Metadata>
<![CDATA[
<![CDATA[
[HostComponent("spark.components.Alert")]
]]>
</fx:Metadata>
</fx:Metadata>

<fx:Script fb:purpose="styling">
<![CDATA[
import spark.components.Alert;
/* Define the skin elements that should not be colorized.
For panel, border and title background are skinned, but the content area and title text are not. */
static private const exclusions:Array = ["background", "titleDisplay", "contentGroup", "controlBarGroup"];
/**
* @private
*/
override public function get colorizeExclusions():Array {return exclusions;}
<fx:Script fb:purpose="styling">
<![CDATA[
import flatSpark.utils.ColorUtils;
/* Define the skin elements that should not be colorized.
For panel, border and title background are skinned, but the content area and title text are not. */
static private const exclusions:Array = ["background", "titleDisplay", "contentGroup", "controlBarGroup"];
/**
* @private
*/
override public function get colorizeExclusions():Array {return exclusions;}
/**
* @private
*/
override protected function initializationComplete():void
{
useChromeColor = true;
super.initializationComplete();
}
/**
* @private
*/
override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void
{
setPartCornerRadii(topMaskRect);
setPartCornerRadii(background);
/**
* @private
*/
override protected function initializationComplete():void
{
useChromeColor = true;
super.initializationComplete();
}
if (bottomMaskRect) setPartCornerRadii(bottomMaskRect);
/**
* @private
*/
override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void
{
if (getStyle("borderVisible") == true)
{
border.visible = true;
background.left = background.top = background.right = background.bottom = 1;
contents.left = contents.top = contents.right = contents.bottom = 1;
}
else
{
border.visible = false;
background.left = background.top = background.right = background.bottom = 0;
contents.left = contents.top = contents.right = contents.bottom = 0;
}
dropShadow.visible = getStyle("dropShadowVisible");
var cr:Number = getStyle("cornerRadius");
var withControls:Boolean =
(currentState == "disabledWithControlBar" ||
currentState == "normalWithControlBar");
if (cornerRadius != cr)
{
cornerRadius = cr;
dropShadow.tlRadius = cornerRadius;
dropShadow.trRadius = cornerRadius;
dropShadow.blRadius = withControls ? cornerRadius : 0;
dropShadow.brRadius = withControls ? cornerRadius : 0;
setPartCornerRadii(topMaskRect, withControls);
setPartCornerRadii(border, withControls);
setPartCornerRadii(background, withControls);
}
if (bottomMaskRect) setPartCornerRadii(bottomMaskRect, withControls);
borderStroke.color = getStyle("borderColor");
borderStroke.alpha = getStyle("borderAlpha");
backgroundFill.color = getStyle("backgroundColor");
backgroundFill.alpha = getStyle("backgroundAlpha");
super.updateDisplayList(unscaledWidth, unscaledHeight);
}
/**
* @private
*/
private function setPartCornerRadii(target:Rect):void
{
target.topLeftRadiusX = cornerRadius;
target.topRightRadiusX = cornerRadius;
target.bottomLeftRadiusX = cornerRadius;
target.bottomRightRadiusX = cornerRadius;
}
private var cornerRadius:Number=4;
super.updateDisplayList(unscaledWidth, unscaledHeight);
}
/**
* @private
*/
private function setPartCornerRadii(target:Rect, includeBottom:Boolean):void
{
target.topLeftRadiusX = cornerRadius;
target.topRightRadiusX = cornerRadius;
target.bottomLeftRadiusX = includeBottom ? cornerRadius : 0;
target.bottomRightRadiusX = includeBottom ? cornerRadius : 0;
}
private var cornerRadius:Number;
]]>
]]>
</fx:Script>

<fx:Declarations>
Expand All @@ -126,17 +90,12 @@
<s:State name="disabledWithControlBar" stateGroups="withControls" />
</s:states>

<!-- drop shadow can't be hittable so it stays sibling of other graphics -->
<!--- @private -->
<s:RectangularDropShadow id="dropShadow" blurX="20" blurY="20" alpha="0.32" distance="11"
angle="90" color="#000000" left="0" top="0" right="0" bottom="0"/>

<!-- drop shadow can't be hittable so all other graphics go in this group -->
<s:Group left="0" right="0" top="0" bottom="0">

<!-- top group mask -->
<!--- @private -->
<s:Group left="1" top="1" right="1" bottom="1" id="topGroupMask" >
<s:Group left="0" top="0" right="0" bottom="0" id="topGroupMask" >
<!--- @private -->
<s:Rect id="topMaskRect" left="0" top="0" right="0" bottom="0">
<s:fill>
Expand All @@ -147,7 +106,7 @@

<!-- bottom group mask -->
<!--- @private -->
<s:Group left="1" top="1" right="1" bottom="1" id="bottomGroupMask"
<s:Group left="0" top="0" right="0" bottom="0" id="bottomGroupMask"
includeIn="normalWithControlBar, disabledWithControlBar">
<!--- @private -->
<s:Rect id="bottomMaskRect" left="0" top="0" right="0" bottom="0">
Expand All @@ -157,28 +116,17 @@
</s:Rect>
</s:Group>

<!-- layer 1: border -->
<!--- @private -->
<s:Rect id="border" left="0" right="0" top="0" bottom="0" >
<s:stroke>
<!--- @private -->
<s:SolidColorStroke id="borderStroke" weight="1" />
</s:stroke>
</s:Rect>

<!-- layer 2: background fill -->
<!--- Defines the appearance of the PanelSkin class's background. -->
<s:Rect id="background" left="1" top="1" right="1" bottom="1">
<s:Rect id="background" left="0" top="0" right="0" bottom="0">
<s:fill>
<!--- @private
Defines the PanelSkin class's background fill. The default color is 0xFFFFFF. -->
<s:SolidColor id="backgroundFill" color="#FFFFFF"/>
</s:fill>
</s:Rect>

<!-- layer 3: contents -->
<!--- Contains the vertical stack of titlebar content and controlbar. -->
<s:Group left="1" right="1" top="1" bottom="1" id="contents">
<s:Group left="0" top="0" right="0" bottom="0" id="contents">
<s:layout>
<s:VerticalLayout gap="0" horizontalAlign="justify" />
</s:layout>
Expand All @@ -190,38 +138,31 @@
<!--- @private -->
<s:Rect id="tbFill" left="0" right="0" top="0" bottom="1">
<s:fill>
<s:LinearGradient rotation="90">
<s:GradientEntry color="0xE2E2E2" />
<s:GradientEntry color="0xD9D9D9" />
</s:LinearGradient>
<s:SolidColor color="{ColorUtils.Concrete}"/>
</s:fill>
</s:Rect>

<!-- layer 1: title bar highlight -->
<!--- @private -->
<s:Rect id="tbHilite" left="0" right="0" top="0" bottom="0">
<s:stroke>
<s:LinearGradientStroke rotation="90" weight="1">
<s:GradientEntry color="0xEAEAEA" />
<s:GradientEntry color="0xD9D9D9" />
</s:LinearGradientStroke>
</s:stroke>
<s:Rect id="tbHilite" left="0" right="0" top="0" bottom="1">
<s:fill>
<s:SolidColor color="{ColorUtils.Concrete}"/>
</s:fill>
</s:Rect>

<!-- layer 2: title bar divider -->
<!--- @private -->
<s:Rect id="tbDiv" left="0" right="0" height="1" bottom="0">
<s:fill>
<s:SolidColor color="0xC0C0C0" />
<s:SolidColor color="{ColorUtils.Asbestos}"/>
</s:fill>
</s:Rect>

<!-- layer 3: text -->
<!--- @copy spark.components.Panel#titleDisplay -->
<s:Label id="titleDisplay" maxDisplayedLines="1"
left="9" right="3" top="1" bottom="0" minHeight="30"
verticalAlign="middle" fontWeight="bold">
</s:Label>
<s:Label id="titleDisplay" maxDisplayedLines="1" fontFamily="Lato" fontSize="15" fontStyle="normal" color="#FFFFFF"
left="15" right="5" top="2" bottom="0" minHeight="36" height="36"
verticalAlign="middle" fontWeight="bold" />
</s:Group>

<!--
Expand All @@ -232,16 +173,20 @@
<!--- @copy spark.components.SkinnableContainer#contentGroup -->
<!--<s:Group id="contentGroup" width="100%" height="100%" minWidth="0" minHeight="0">
</s:Group>-->
<s:HGroup width="100%" height="100%" verticalAlign="middle" horizontalAlign="center">
<s:HGroup width="100%" height="100%" verticalAlign="middle" horizontalAlign="center" paddingBottom="20" paddingLeft="20" paddingRight="20" paddingTop="20">
<s:Group id="iconGroup" height="100%">

</s:Group>
<s:VGroup width="100%" height="100%" paddingLeft="5" paddingRight="5" paddingBottom="5"
<s:VGroup width="100%" height="100%" paddingLeft="5" paddingRight="5" paddingBottom="5" gap="20"
verticalAlign="middle" horizontalAlign="center">
<s:RichText id="messageDisplay"
<s:RichText id="messageDisplay" fontFamily="Lato" fontSize="14" fontStyle="normal" color="0x000000" lineHeight="160%"
left="9" right="3" top="1" bottom="0" minHeight="30" maxWidth="400"
verticalAlign="middle"/>
<s:HGroup id="buttonGroup" width="100%" minWidth="0" minHeight="0"

<!--
To-do: Need to adjust the styles for buttons
-->
<s:HGroup id="buttonGroup" width="100%" minWidth="0" minHeight="0" gap="8"
horizontalAlign="center"/>
</s:VGroup>
</s:HGroup>
Expand All @@ -256,27 +201,21 @@
<!-- layer 0: control bar divider line -->
<s:Rect left="0" right="0" top="0" height="1" alpha="0.22">
<s:fill>
<s:SolidColor color="0x000000" />
<s:SolidColor color="#FFFFFF"/>
</s:fill>
</s:Rect>

<!-- layer 1: control bar highlight -->
<s:Rect left="0" right="0" top="1" bottom="0">
<s:stroke>
<s:LinearGradientStroke rotation="90" weight="1">
<s:GradientEntry color="0xE5E5E5" />
<s:GradientEntry color="0xD8D8D8" />
</s:LinearGradientStroke>
</s:stroke>
<s:fill>
<s:SolidColor color="#FFFFFF"/>
</s:fill>
</s:Rect>

<!-- layer 2: control bar fill -->
<s:Rect left="1" right="1" top="2" bottom="1">
<s:fill>
<s:LinearGradient rotation="90">
<s:GradientEntry color="0xDADADA" />
<s:GradientEntry color="0xC5C5C5" />
</s:LinearGradient>
<s:SolidColor color="#FFFFFF"/>
</s:fill>
</s:Rect>
</s:Group>
Expand Down
Binary file modified samples/WebAppTest/bin-debug/WebAppTest.swf
View file
Binary file not shown.
Loading

0 comments on commit 23b4486

Please sign in to comment.