You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@royale.apache.org by yi...@apache.org on 2022/12/07 07:16:17 UTC
[royale-asjs] branch develop updated: Emulation - Use Flex skin for CP
This is an automated email from the ASF dual-hosted git repository.
yishayw pushed a commit to branch develop
in repository https://gitbox.apache.org/repos/asf/royale-asjs.git
The following commit(s) were added to refs/heads/develop by this push:
new 7f9279ff2c Emulation - Use Flex skin for CP
7f9279ff2c is described below
commit 7f9279ff2caaf8575bdf92f476fefdb0490d04fb
Author: Yishay Weiss <yi...@hotmail.com>
AuthorDate: Wed Dec 7 09:16:07 2022 +0200
Emulation - Use Flex skin for CP
---
.../MXRoyale/src/main/resources/defaults.css | 6 +
.../royale/mx/controls/beads/ColorPickerView.as | 24 +-
.../src/main/royale/mx/skins/ColorPickerSkin.as | 286 +++++++++++++++++++++
3 files changed, 299 insertions(+), 17 deletions(-)
diff --git a/frameworks/projects/MXRoyale/src/main/resources/defaults.css b/frameworks/projects/MXRoyale/src/main/resources/defaults.css
index 81b77bcfb6..3d6d427552 100644
--- a/frameworks/projects/MXRoyale/src/main/resources/defaults.css
+++ b/frameworks/projects/MXRoyale/src/main/resources/defaults.css
@@ -1149,4 +1149,10 @@ charts|DataTip
iMeasurementBead: ClassReference("org.apache.royale.html.beads.TextFieldLabelMeasurementBead");
}
+ ColorPickerSkin
+ {
+ iconColor: #111111;
+ disabledIconColor: #999999;
+ }
+
}
diff --git a/frameworks/projects/MXRoyale/src/main/royale/mx/controls/beads/ColorPickerView.as b/frameworks/projects/MXRoyale/src/main/royale/mx/controls/beads/ColorPickerView.as
index 488a620197..2b5564c5e4 100644
--- a/frameworks/projects/MXRoyale/src/main/royale/mx/controls/beads/ColorPickerView.as
+++ b/frameworks/projects/MXRoyale/src/main/royale/mx/controls/beads/ColorPickerView.as
@@ -29,8 +29,6 @@ package mx.controls.beads
import org.apache.royale.events.Event;
import org.apache.royale.events.IEventDispatcher;
import org.apache.royale.geom.Point;
- import org.apache.royale.html.Group;
- import org.apache.royale.html.TextButton;
COMPILE::JS
{
import org.apache.royale.utils.CSSUtils;
@@ -46,6 +44,8 @@ package mx.controls.beads
import org.apache.royale.html.util.getModelByType;
import mx.events.ColorPickerEvent;
import org.apache.royale.html.beads.IComboBoxView;
+ import mx.core.UIComponent;
+ import mx.skins.ColorPickerSkin;
/**
* The ColorPickerView class creates the visual elements of the org.apache.royale.html.ColorPicker
@@ -82,7 +82,7 @@ package mx.controls.beads
return selectedColorDisplay;
}
- private var button:TextButton;
+ private var button:UIComponent;
/**
* The Button component of the ComboBox.
@@ -127,15 +127,8 @@ package mx.controls.beads
var host:UIBase = value as UIBase;
- selectedColorDisplay = new Group();
- (selectedColorDisplay as IStyleableObject).className = "ColorPickerDisplayedColor";
-
- button = new TextButton();
- button.style = {
- "padding": 0,
- "margin": 0
- };
- button.text = '\u25BC';
+ selectedColorDisplay = button = new ColorPickerSkin();
+ button.name = (_strand as UIComponent).enabled ? "upSkin" : "disabledSkin";
if (isNaN(host.width)) selectedColorDisplay.width = 25;
@@ -150,7 +143,7 @@ package mx.controls.beads
host.addElement(selectedColorDisplay);
host.addElement(button);
- loadBeadFromValuesManager(IPopUp, "iPopUp", _strand);
+ loadBeadFromValuesManager(IPopUp, "iPopUp", _strand);
list = _strand.getBeadByType(IColorPickerPopUp) as IUIBase;
list.visible = false;
@@ -263,10 +256,7 @@ package mx.controls.beads
selectedColorDisplay.width = host.width - 20;
}
- button.x = selectedColorDisplay.width;
- button.y = 0;
- button.width = 20;
- button.height = selectedColorDisplay.height;
+ button.setActualSize(20, selectedColorDisplay.height);
COMPILE::JS {
selectedColorDisplay.element.style.position = "absolute";
diff --git a/frameworks/projects/MXRoyale/src/main/royale/mx/skins/ColorPickerSkin.as b/frameworks/projects/MXRoyale/src/main/royale/mx/skins/ColorPickerSkin.as
new file mode 100644
index 0000000000..e2dff8fbbf
--- /dev/null
+++ b/frameworks/projects/MXRoyale/src/main/royale/mx/skins/ColorPickerSkin.as
@@ -0,0 +1,286 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+// 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.
+//
+////////////////////////////////////////////////////////////////////////////////
+
+package mx.skins
+{
+
+import mx.core.UIComponent;
+import mx.display.Graphics;
+
+/**
+ * The skin for all the states of a ColorPicker.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 9
+ * @playerversion AIR 1.1
+ * @productversion Flex 3
+ */
+public class ColorPickerSkin extends UIComponent
+{
+// include "../../core/Version.as";
+
+ //--------------------------------------------------------------------------
+ //
+ // Constructor
+ //
+ //--------------------------------------------------------------------------
+
+ /**
+ * Constructor.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 9
+ * @playerversion AIR 1.1
+ * @productversion Flex 3
+ */
+ public function ColorPickerSkin()
+ {
+ super();
+ }
+
+ //--------------------------------------------------------------------------
+ //
+ // Variables
+ //
+ //--------------------------------------------------------------------------
+
+ /**
+ * @private
+ */
+ private var borderShadowColor:uint = 0x9A9B9D;
+
+ /**
+ * @private
+ */
+ private var borderHighlightColor:uint = 0xFEFEFE;
+
+ /**
+ * @private
+ */
+ private var backgroundColor:uint = 0xE5E6E7;
+
+ /**
+ * @private
+ */
+ private var borderSize:Number = 1;
+
+ /**
+ * @private
+ */
+ private var bevelSize:Number = 1;
+
+ /**
+ * @private
+ */
+ private var arrowWidth:Number = 7;
+
+ /**
+ * @private
+ */
+ private var arrowHeight:Number = 5;
+
+ //--------------------------------------------------------------------------
+ //
+ // Overridden methods
+ //
+ //--------------------------------------------------------------------------
+
+ /**
+ * @private
+ */
+ override protected function updateDisplayList(w:Number, h:Number):void
+ {
+ super.updateDisplayList(w, h);
+
+ var arrowColor:uint = getStyle("iconColor");
+
+ var arrowX:Number = (w - arrowWidth - bevelSize);
+ var arrowY:Number = (h - arrowHeight - bevelSize);
+
+ graphics.clear();
+ graphics.lineStyle(1);
+
+ if (name == "upSkin" || name == "overSkin")
+ {
+ // invisible hit area
+ drawFill(x, y, w + bevelSize, h + bevelSize, 0xCCCCCC, 0);
+
+ // outer border
+ drawBorder(x, y, w, h, borderHighlightColor, borderShadowColor,
+ bevelSize, 1.0);
+
+ // background
+ drawBorder(x + bevelSize, y + bevelSize,
+ w - (bevelSize * 2), h - (bevelSize * 2),
+ backgroundColor, backgroundColor, borderSize, 1.0);
+
+ // inner border
+ drawBorder(x + bevelSize + borderSize, y + bevelSize + borderSize,
+ w - ((bevelSize + borderSize) * 2),
+ h - ((bevelSize + borderSize) * 2),
+ borderShadowColor, borderHighlightColor,
+ bevelSize, 1.0);
+
+ // arrow background
+ drawFill(arrowX, arrowY, arrowWidth, arrowHeight,
+ backgroundColor, 1.0);
+
+ // arrow
+ drawArrow(arrowX + 1.5, arrowY + 1.5,
+ arrowWidth - 3, arrowHeight - 3, arrowColor, 1.0);
+ }
+
+ else if (name == "downSkin")
+ {
+ // invisible hit area
+ drawFill(x, y, w, h, 0xCCCCCC, 0);
+
+ // outer border
+ drawBorder(x, y, w, h, borderHighlightColor, 0xCCCCCC,
+ bevelSize, 1.0);
+
+ // background
+ drawBorder(x + bevelSize, y + bevelSize,
+ w - 2 * bevelSize, h - 2 * bevelSize,
+ backgroundColor, backgroundColor, borderSize, 1.0);
+
+ // inner border
+ drawBorder(x + bevelSize + borderSize, y + bevelSize + borderSize,
+ w - 2 * (bevelSize + borderSize),
+ h - 2 * (bevelSize + borderSize),
+ borderShadowColor, borderHighlightColor,
+ bevelSize, 1.0);
+
+ // arrow background
+ drawFill(arrowX, arrowY, arrowWidth, arrowHeight,
+ backgroundColor, 1.0);
+
+ // arrow
+ drawArrow(arrowX + 1.5, arrowY + 1.5,
+ arrowWidth - 3, arrowHeight - 3, arrowColor, 1.0);
+ }
+
+ else if (name == "disabledSkin")
+ {
+ arrowColor = getStyle("disabledIconColor");
+
+ // For blur effect when disabled
+ drawRoundRect(
+ x, y, w, h, 0,
+ 0xFFFFFF, 0.6);
+
+ // invisible hit area
+ drawFill(x, y, w, h, 0xFFFFFF, 0.25);
+
+ // outer border
+ drawBorder(x, y, w, h, borderHighlightColor, 0xCCCCCC,
+ bevelSize, 1.0);
+
+ // background
+ drawBorder(x + bevelSize, y + bevelSize,
+ w - (bevelSize * 2), h - (bevelSize * 2),
+ backgroundColor, backgroundColor, borderSize, 1.0);
+
+ // inner border
+ drawBorder(x + bevelSize + borderSize, y + bevelSize + borderSize,
+ w - 2 * (bevelSize + borderSize),
+ h - 2 * (bevelSize + borderSize),
+ borderShadowColor, borderHighlightColor,
+ bevelSize, 1.0);
+
+ // arrow background
+ drawFill(arrowX, arrowY, arrowWidth, arrowHeight,
+ backgroundColor, 1.0);
+
+ // blurred arrow
+ drawArrow(arrowX + 1.5, arrowY + 1.5,
+ arrowWidth - 3, arrowHeight - 3, arrowColor, 1.0);
+ }
+ }
+
+ override public function setActualSize(w:Number, h:Number):void
+ {
+ super.setActualSize(w, h);
+ updateDisplayList(w, h);
+ }
+
+ override public function set name(value:String):void
+ {
+ super.name = value;
+ updateDisplayList(getExplicitOrMeasuredWidth(), getExplicitOrMeasuredHeight());
+ }
+
+ //--------------------------------------------------------------------------
+ //
+ // Methods
+ //
+ //--------------------------------------------------------------------------
+
+ /**
+ * @private
+ */
+ private function drawBorder(x:Number, y:Number, w:Number, h:Number,
+ c1:Number, c2:Number, s:Number, a:Number):void
+ {
+ // border line on the left side
+ drawFill(x, y, s, h, c1, a);
+
+ // border line on the top side
+ drawFill(x, y, w, s, c1, a);
+
+ // border line on the right side
+ drawFill(x + (w - s), y, s, h, c2, a);
+
+ // border line on the bottom side
+ drawFill(x, y + (h - s), w, s, c2, a);
+ }
+
+ /**
+ * @private
+ */
+ private function drawFill(x:Number, y:Number, w:Number, h:Number,
+ c:Number, a:Number):void
+ {
+ var g:Graphics = graphics;
+ g.moveTo(x, y);
+ g.beginFill(c, a);
+ g.lineTo(x + w, y);
+ g.lineTo(x + w, h + y);
+ g.lineTo(x, h + y);
+ g.lineTo(x, y);
+ g.endFill();
+ }
+
+ /**
+ * @private
+ */
+ private function drawArrow(x:Number, y:Number, w:Number, h:Number,
+ c:Number, a:Number):void
+ {
+ var g:Graphics = graphics;
+ g.moveTo(x, y);
+ g.beginFill(c, a);
+ g.lineTo(x + w, y);
+ g.lineTo(x + w / 2, h + y);
+ g.lineTo(x, y);
+ g.endFill();
+ }
+}
+
+}