You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@royale.apache.org by ca...@apache.org on 2018/09/07 10:43:22 UTC
[royale-asjs] branch develop updated: Refactor ErrorTip to use
ToolTip, and adds tooltip example to Jewel Example in Label section
This is an automated email from the ASF dual-hosted git repository.
carlosrovira 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 a9a31e4 Refactor ErrorTip to use ToolTip, and adds tooltip example to Jewel Example in Label section
a9a31e4 is described below
commit a9a31e41b0c1fff754a576198ee9cb15e89d941e
Author: Carlos Rovira <ca...@apache.org>
AuthorDate: Fri Sep 7 12:43:17 2018 +0200
Refactor ErrorTip to use ToolTip, and adds tooltip example to Jewel Example in Label section
---
.../src/main/royale/LabelPlayGround.mxml | 6 +-
.../projects/Jewel/src/main/resources/defaults.css | 7 +-
.../Jewel/src/main/resources/jewel-manifest.xml | 2 +-
.../royale/org/apache/royale/jewel/ErrorTip.as | 187 ---------------------
.../royale/jewel/beads/validators/Validator.as | 6 +-
.../jewel/supportClasses/tooltip/ErrorTipLabel.as} | 87 +++++-----
.../Jewel/src/main/sass/components/_tooltip.sass | 26 ++-
.../JewelTheme/src/main/resources/defaults.css | 10 +-
.../src/main/sass/components-primary/_tooltip.sass | 28 ++-
9 files changed, 87 insertions(+), 272 deletions(-)
diff --git a/examples/royale/JewelExample/src/main/royale/LabelPlayGround.mxml b/examples/royale/JewelExample/src/main/royale/LabelPlayGround.mxml
index c8b054d..bc27657 100644
--- a/examples/royale/JewelExample/src/main/royale/LabelPlayGround.mxml
+++ b/examples/royale/JewelExample/src/main/royale/LabelPlayGround.mxml
@@ -35,7 +35,11 @@ limitations under the License.
<j:Card width="350">
<html:H3 text="Jewel Label"/>
- <j:Label id="label" text="This is a Label" click="labelClick(event)" className="cursor-pointer"/>
+ <j:Label id="label" text="This is a Label" click="labelClick(event)" className="cursor-pointer">
+ <j:beads>
+ <j:ToolTip toolTip="This Label is clickable!"/>
+ </j:beads>
+ </j:Label>
<j:Label text="This is a multiline label with more text that wraps if container has set a width"
multiline="true"/>
diff --git a/frameworks/projects/Jewel/src/main/resources/defaults.css b/frameworks/projects/Jewel/src/main/resources/defaults.css
index 2dfc3b3..2a4713e 100644
--- a/frameworks/projects/Jewel/src/main/resources/defaults.css
+++ b/frameworks/projects/Jewel/src/main/resources/defaults.css
@@ -3367,13 +3367,10 @@ j|TitleBar {
pointer-events: none;
z-index: 5;
}
-
-.jewel.errorTip {
- padding: 6px;
- z-index: 5;
+.jewel.tooltip.error {
margin-top: -31px !important;
}
-.jewel.errorTip::before {
+.jewel.tooltip.error::before {
top: 100%;
left: 8px;
position: absolute;
diff --git a/frameworks/projects/Jewel/src/main/resources/jewel-manifest.xml b/frameworks/projects/Jewel/src/main/resources/jewel-manifest.xml
index cbf9ea0..75b121e 100644
--- a/frameworks/projects/Jewel/src/main/resources/jewel-manifest.xml
+++ b/frameworks/projects/Jewel/src/main/resources/jewel-manifest.xml
@@ -67,7 +67,7 @@
<component id="ToolTipLabel" class="org.apache.royale.jewel.supportClasses.tooltip.ToolTipLabel" />
<component id="Form" class="org.apache.royale.jewel.Form"/>
- <component id="ErrorTip" class="org.apache.royale.jewel.ErrorTip"/>
+ <component id="ErrorTipLabel" class="org.apache.royale.jewel.supportClasses.tooltip.ErrorTipLabel"/>
<component id="Validator" class="org.apache.royale.jewel.beads.validators.Validator"/>
<component id="FormValidator" class="org.apache.royale.jewel.beads.validators.FormValidator"/>
diff --git a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/ErrorTip.as b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/ErrorTip.as
deleted file mode 100644
index 481e411..0000000
--- a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/ErrorTip.as
+++ /dev/null
@@ -1,187 +0,0 @@
-////////////////////////////////////////////////////////////////////////////////
-//
-// 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 org.apache.royale.jewel
-{
- import org.apache.royale.core.StyledUIBase;
- import org.apache.royale.core.ITextModel;
-
- COMPILE::JS
- {
- import org.apache.royale.core.WrappedHTMLElement;
- import org.apache.royale.html.util.addElementToWrapper;
- }
-
-
- /**
- * The ErrorTip class implements the basic control for displaying
- * error text.
- *
- * @toplevel
- * @langversion 3.0
- * @playerversion Flash 10.2
- * @playerversion AIR 2.6
- * @productversion Royale 0.9.4
- */
- public class ErrorTip extends StyledUIBase
- {
- /**
- * Constructor.
- *
- * @langversion 3.0
- * @playerversion Flash 10.2
- * @playerversion AIR 2.6
- * @productversion Royale 0.9.4
- */
- public function ErrorTip()
- {
- super();
- typeNames = "jewel errorTip";
- COMPILE::SWF
- {
- mouseEnabled = false;
- }
- }
-
- COMPILE::JS
- protected var textNode:Text;
-
- COMPILE::JS
- private var _text:String = "";
-
- /**
- * The text to display in the error tip.
- *
- * @langversion 3.0
- * @playerversion Flash 10.2
- * @playerversion AIR 2.6
- * @productversion Royale 0.9.4
- */
- public function get text():String
- {
- COMPILE::SWF
- {
- return ITextModel(model).text;
- }
- COMPILE::JS
- {
- return _text;
- }
- }
-
- /**
- * @private
- */
- public function set text(value:String):void
- {
- COMPILE::SWF
- {
- ITextModel(model).text = value;
- }
- COMPILE::JS
- {
- if (textNode)
- {
- _text = value;
- textNode.nodeValue = value;
- }
- }
-
- }
-
- /**
- * The html-formatted text to display in the error tip.
- *
- * @langversion 3.0
- * @playerversion Flash 10.2
- * @playerversion AIR 2.6
- * @productversion Royale 0.9.4
- */
- public function get html():String
- {
- COMPILE::SWF
- {
- return ITextModel(model).html;
- }
- COMPILE::JS
- {
- return element.innerHTML;
- }
- }
-
- /**
- * @private
- */
- public function set html(value:String):void
- {
- COMPILE::SWF
- {
- ITextModel(model).html = value;
- }
- COMPILE::JS
- {
- this.element.innerHTML = value;
- }
- }
-
- private var _multiline:Boolean;
- /**
- * A boolean flag to activate "multiline" effect selector.
- * Allow the error tip to have more than one line if needed
- *
- * @langversion 3.0
- * @playerversion Flash 10.2
- * @playerversion AIR 2.6
- * @productversion Royale 0.9.4
- */
- public function get multiline():Boolean
- {
- return _multiline;
- }
-
- public function set multiline(value:Boolean):void
- {
- if (_multiline != value)
- {
- _multiline = value;
- toggleClass("multiline", _multiline);
- }
- }
-
-
- /**
- * @royaleignorecoercion org.apache.royale.core.WrappedHTMLElement
- */
- COMPILE::JS
- override protected function createElement():WrappedHTMLElement
- {
- addElementToWrapper(this,'div');
-
- textNode = document.createTextNode(_text) as Text;
- element.appendChild(textNode);
-
- positioner = element;
-
- positioner.style.position = "absolute";
- positioner.style.pointerEvents = "none";
-
- return element;
- }
-
- }
-}
\ No newline at end of file
diff --git a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/validators/Validator.as b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/validators/Validator.as
index 3cc0154..769e766 100644
--- a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/validators/Validator.as
+++ b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/validators/Validator.as
@@ -24,7 +24,7 @@ package org.apache.royale.jewel.beads.validators
import org.apache.royale.core.UIBase;
import org.apache.royale.events.Event;
import org.apache.royale.geom.Point;
- import org.apache.royale.jewel.ErrorTip;
+ import org.apache.royale.jewel.supportClasses.tooltip.ErrorTipLabel;
import org.apache.royale.utils.PointUtils;
import org.apache.royale.utils.UIUtils;
@@ -58,7 +58,7 @@ package org.apache.royale.jewel.beads.validators
public static const RIGHT:int = 10003;
public static const MIDDLE:int = 10004;
- private var _errorTip:ErrorTip;
+ private var _errorTip:ErrorTipLabel;
private var _host:IPopUpHost;
private var _xPos:int = LEFT;
private var _yPos:int = TOP;
@@ -231,7 +231,7 @@ package org.apache.royale.jewel.beads.validators
if (_errorTip == null) {
- _errorTip = new ErrorTip();
+ _errorTip = new ErrorTipLabel();
_host = UIUtils.findPopUpHost(hostComponent);
_host.popUpParent.addElement(_errorTip, false);
diff --git a/frameworks/projects/Jewel/src/main/sass/components/_tooltip.sass b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/supportClasses/tooltip/ErrorTipLabel.as
similarity index 56%
copy from frameworks/projects/Jewel/src/main/sass/components/_tooltip.sass
copy to frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/supportClasses/tooltip/ErrorTipLabel.as
index 65ea79c..74875dc 100644
--- a/frameworks/projects/Jewel/src/main/sass/components/_tooltip.sass
+++ b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/supportClasses/tooltip/ErrorTipLabel.as
@@ -1,40 +1,47 @@
-////////////////////////////////////////////////////////////////////////////////
-//
-// 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.
-//
-////////////////////////////////////////////////////////////////////////////////
-
-// Jewel ToolTip
-
-// ToolTip variables
-.jewel.tooltip
- padding: 6px
- position: absolute
- pointer-events: none
- z-index: 5
-
-.jewel
- &.errorTip
- padding: 6px
- z-index: 5
- margin-top: -31px !important
-
- &::before
- top: 100%
- left: 8px
- position: absolute
- content: ""
- margin-top: 0px
+////////////////////////////////////////////////////////////////////////////////
+//
+// 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 org.apache.royale.jewel.supportClasses.tooltip
+{
+ /**
+ * The ErrorTipLabel class is the control used for ToolTip bead to popup
+ * an error text over a control
+ *
+ * @toplevel
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.4
+ */
+ public class ErrorTipLabel extends ToolTipLabel
+ {
+ /**
+ * Constructor.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.4
+ */
+ public function ErrorTipLabel()
+ {
+ super();
+ typeNames = "jewel tooltip error";
+ }
+ }
+}
\ No newline at end of file
diff --git a/frameworks/projects/Jewel/src/main/sass/components/_tooltip.sass b/frameworks/projects/Jewel/src/main/sass/components/_tooltip.sass
index 65ea79c..f87cf92 100644
--- a/frameworks/projects/Jewel/src/main/sass/components/_tooltip.sass
+++ b/frameworks/projects/Jewel/src/main/sass/components/_tooltip.sass
@@ -20,21 +20,19 @@
// Jewel ToolTip
// ToolTip variables
-.jewel.tooltip
- padding: 6px
- position: absolute
- pointer-events: none
- z-index: 5
-
.jewel
- &.errorTip
+ &.tooltip
padding: 6px
+ position: absolute
+ pointer-events: none
z-index: 5
- margin-top: -31px !important
+
+ &.error
+ margin-top: -31px !important
- &::before
- top: 100%
- left: 8px
- position: absolute
- content: ""
- margin-top: 0px
+ &::before
+ top: 100%
+ left: 8px
+ position: absolute
+ content: ""
+ margin-top: 0px
diff --git a/frameworks/themes/JewelTheme/src/main/resources/defaults.css b/frameworks/themes/JewelTheme/src/main/resources/defaults.css
index 409430c..1bfdccb 100644
--- a/frameworks/themes/JewelTheme/src/main/resources/defaults.css
+++ b/frameworks/themes/JewelTheme/src/main/resources/defaults.css
@@ -766,15 +766,13 @@ a:active {
.jewel.tooltip {
color: #FFFFFF;
background: #1198e9;
-}
-
-.jewel.errorTip {
- color: #FFFFFF;
- background: #EC1C24;
box-shadow: 0px 3px 3px 0 rgba(0, 0, 0, 0.4);
animation: slide-up 0.4s ease;
}
-.jewel.errorTip::before {
+.jewel.tooltip.error {
+ background: #EC1C24;
+}
+.jewel.tooltip.error::before {
border-top-color: #EC1C24;
border: solid 8px transparent;
}
diff --git a/frameworks/themes/JewelTheme/src/main/sass/components-primary/_tooltip.sass b/frameworks/themes/JewelTheme/src/main/sass/components-primary/_tooltip.sass
index 9464217..1b38d12 100644
--- a/frameworks/themes/JewelTheme/src/main/sass/components-primary/_tooltip.sass
+++ b/frameworks/themes/JewelTheme/src/main/sass/components-primary/_tooltip.sass
@@ -24,22 +24,20 @@
&.tooltip
color: $font-theme-color
background: darken($primary-color, 10%)
-
-.jewel
- &.errorTip
- color: $font-theme-color
- background: $error-color
box-shadow: 0px 3px 3px 0 rgba(0, 0, 0, 0.4)
animation: slide-up 0.4s ease
- &::before
- border-top-color: $error-color //this the arrow
- border: solid 8px transparent
+ &.error
+ background: $error-color
+
+ &::before
+ border-top-color: $error-color //this the arrow
+ border: solid 8px transparent
- @keyframes slide-up
- 0%
- opacity: 0
- transform: translateY(20px)
- 100%
- opacity: 1
- transform: translateY(0)
\ No newline at end of file
+ @keyframes slide-up
+ 0%
+ opacity: 0
+ transform: translateY(20px)
+ 100%
+ opacity: 1
+ transform: translateY(0)
\ No newline at end of file