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/11/17 21:06:59 UTC
[royale-asjs] branch develop updated: improvements to Wizard
component: add title, and refactor view to layout the title on top,
and make buttons have a pad area so the user doesn't have to target the
button. refactor styles too
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 329510a improvements to Wizard component: add title, and refactor view to layout the title on top, and make buttons have a pad area so the user doesn't have to target the button. refactor styles too
329510a is described below
commit 329510a48c71848a731d5c22e317bedd892cb9ef
Author: Carlos Rovira <ca...@apache.org>
AuthorDate: Sat Nov 17 22:06:53 2018 +0100
improvements to Wizard component: add title, and refactor view to layout the title on top, and make buttons have a pad area so the user doesn't have to target the button. refactor styles too
---
.../projects/Jewel/src/main/resources/defaults.css | 17 ++-
.../main/royale/org/apache/royale/jewel/Label.as | 7 +-
.../main/royale/org/apache/royale/jewel/Wizard.as | 57 +++++++-
.../royale/jewel/beads/models/WizardModel.as | 47 +++++--
.../apache/royale/jewel/beads/models/WizardStep.as | 25 +++-
.../apache/royale/jewel/beads/views/WizardView.as | 155 +++++++++++----------
.../Jewel/src/main/sass/components/_wizard.sass | 26 +++-
.../JewelTheme/src/main/resources/defaults.css | 15 ++
.../src/main/sass/components-primary/_wizard.sass | 19 ++-
9 files changed, 256 insertions(+), 112 deletions(-)
diff --git a/frameworks/projects/Jewel/src/main/resources/defaults.css b/frameworks/projects/Jewel/src/main/resources/defaults.css
index 474502e..ac4af2a 100644
--- a/frameworks/projects/Jewel/src/main/resources/defaults.css
+++ b/frameworks/projects/Jewel/src/main/resources/defaults.css
@@ -3664,11 +3664,20 @@ j|TopAppBarTitle {
IBeadLayout: ClassReference("org.apache.royale.jewel.beads.layouts.NullLayout");
}
-.jewel .next {
- flex: 1 1 0;
+.jewel .wizard .main {
+ align-items: center;
+ width: 100%;
+ height: 100%;
+}
+.jewel .precontent {
+ width: 100%;
+ flex: 1 0;
}
-.jewel .previous {
- flex: 1 1 0;
+.jewel.next, .jewel.previous {
+ height: 100%;
+ align-items: center;
+ justify-content: center;
+ cursor: pointer;
}
.jewel .wizardcontent {
height: 100%;
diff --git a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/Label.as b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/Label.as
index 5287fb4..d97a92a 100644
--- a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/Label.as
+++ b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/Label.as
@@ -18,16 +18,13 @@
////////////////////////////////////////////////////////////////////////////////
package org.apache.royale.jewel
{
- import org.apache.royale.core.ITextModel;
- import org.apache.royale.core.StyledUIBase;
- import org.apache.royale.core.ValuesManager;
- import org.apache.royale.events.Event;
- import org.apache.royale.events.IEventDispatcher;
COMPILE::JS
{
import org.apache.royale.core.WrappedHTMLElement;
import org.apache.royale.html.util.addElementToWrapper;
}
+ import org.apache.royale.core.ITextModel;
+ import org.apache.royale.core.StyledUIBase;
/**
* Dispatched when the user clicks on a Label.
diff --git a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/Wizard.as b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/Wizard.as
index 4a8b2ef..d3126b0 100644
--- a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/Wizard.as
+++ b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/Wizard.as
@@ -20,6 +20,7 @@ package org.apache.royale.jewel
{
import org.apache.royale.core.IChild;
import org.apache.royale.core.IContainerBaseStrandChildrenHost;
+ import org.apache.royale.core.UIBase;
import org.apache.royale.events.Event;
import org.apache.royale.jewel.beads.models.WizardModel;
import org.apache.royale.jewel.beads.models.WizardStep;
@@ -45,6 +46,16 @@ package org.apache.royale.jewel
* @productversion Royale 0.9.4
*/
[Event(name="goToNextStep", type="org.apache.royale.events.Event")]
+
+ /**
+ * Indicates a change of step
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.4
+ */
+ [Event(name="change", type="org.apache.royale.events.Event")]
/**
*
@@ -72,14 +83,56 @@ package org.apache.royale.jewel
}
/**
+ * The string to display in the org.apache.royale.jewel.TitleBar.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9
+ * @royaleignorecoercion org.apache.royale.jewel.beads.models.WizardModel
+ */
+ public function get title():String
+ {
+ return WizardModel(model).text;
+ }
+ /**
+ * @royaleignorecoercion org.apache.royale.jewel.beads.models.WizardModel
+ */
+ public function set title(value:String):void
+ {
+ WizardModel(model).text = value;
+ }
+
+ /**
+ * The HTML string to display in the org.apache.royale.jewel.TitleBar.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9
+ * @royaleignorecoercion org.apache.royale.jewel.beads.models.WizardModel
+ */
+ public function get htmlTitle():String
+ {
+ return WizardModel(model).html;
+ }
+ /**
+ * @royaleignorecoercion org.apache.royale.jewel.beads.models.WizardModel
+ */
+ public function set htmlTitle(value:String):void
+ {
+ WizardModel(model).html = value;
+ }
+
+ /**
* @royalesuppresspublicvarwarning
*/
- public var previousButton:IconButton = null;
+ public var previousButton:UIBase = null;
/**
* @royalesuppresspublicvarwarning
*/
- public var nextButton:IconButton = null;
+ public var nextButton:UIBase = null;
/**
* the pages of the wizard
diff --git a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/models/WizardModel.as b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/models/WizardModel.as
index 0e67d85..9edc43c 100644
--- a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/models/WizardModel.as
+++ b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/models/WizardModel.as
@@ -20,6 +20,7 @@ package org.apache.royale.jewel.beads.models
{
import org.apache.royale.core.IBeadModel;
import org.apache.royale.core.IStrand;
+ import org.apache.royale.core.ITextModel;
import org.apache.royale.events.Event;
import org.apache.royale.events.EventDispatcher;
@@ -32,7 +33,7 @@ package org.apache.royale.jewel.beads.models
* @productversion Royale 0.9.4
*/
[Bindable]
- public class WizardModel extends EventDispatcher implements IBeadModel
+ public class WizardModel extends EventDispatcher implements IBeadModel, ITextModel
{
/**
* constructor.
@@ -62,32 +63,55 @@ package org.apache.royale.jewel.beads.models
_strand = value;
}
- private var _title:String;
-
+ private var _text:String;
/**
* The title string for the org.apache.royale.jewel.Wizard.
*
- * @copy org.apache.royale.core.ITitleBarModel#title
+ * @copy org.apache.royale.jewel.beads.models.WizardModel#title
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.4
+ */
+ [Bindable(event="textChange")]
+ public function get text():String
+ {
+ return _text;
+ }
+ public function set text(value:String):void
+ {
+ if(value != _text) {
+ _text = value;
+ dispatchEvent(new Event('textChange'));
+ }
+ }
+
+ private var _html:String;
+ /**
+ * The HTML string for the title.
+ *
+ * @copy org.apache.royale.jewel.beads.models.WizardModel#html
*
* @langversion 3.0
* @playerversion Flash 10.2
* @playerversion AIR 2.6
* @productversion Royale 0.9.4
*/
- public function get title():String
+ [Bindable(event="htmlChange")]
+ public function get html():String
{
- return _title;
+ return _html;
}
- public function set title(value:String):void
+ public function set html(value:String):void
{
- if(value != _title) {
- _title = value;
- dispatchEvent(new Event('titleChange'));
+ if( value != _html ) {
+ _html = value;
+ dispatchEvent( new Event('htmlChange') );
}
}
private var _currentStep:WizardStep;
-
/**
* the current step or page visualized in this wizard
*
@@ -96,6 +120,7 @@ package org.apache.royale.jewel.beads.models
* @playerversion AIR 2.6
* @productversion Royale 0.9.4
*/
+ [Bindable(event="currentStepChange")]
public function get currentStep():WizardStep
{
return _currentStep;
diff --git a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/models/WizardStep.as b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/models/WizardStep.as
index 48e2941..6430d64 100644
--- a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/models/WizardStep.as
+++ b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/models/WizardStep.as
@@ -50,7 +50,6 @@ package org.apache.royale.jewel.beads.models
}
private var _name:String;
-
/**
* the name of the step
*
@@ -71,7 +70,6 @@ package org.apache.royale.jewel.beads.models
}
private var _previousStep:String = null;
-
/**
* the previous step to go
*
@@ -94,7 +92,6 @@ package org.apache.royale.jewel.beads.models
}
private var _nextStep:String = null;
-
/**
* the next step to go
*
@@ -117,7 +114,6 @@ package org.apache.royale.jewel.beads.models
}
private var _page:WizardPage;
-
/**
* the page associated with this data
*
@@ -137,8 +133,27 @@ package org.apache.royale.jewel.beads.models
}
}
- private var _initialPage:Boolean;
+ private var _stepLabel:String;
+ /**
+ * the label for this step
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.4
+ */
+ public function get stepLabel():String
+ {
+ return _stepLabel;
+ }
+ public function set stepLabel(value:String):void
+ {
+ if(value != _stepLabel) {
+ _stepLabel = value;
+ }
+ }
+ private var _initialPage:Boolean;
/**
* the initial page to show in the wizard
*
diff --git a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/views/WizardView.as b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/views/WizardView.as
index 7f1c4a1..9898cf8 100644
--- a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/views/WizardView.as
+++ b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/views/WizardView.as
@@ -21,20 +21,20 @@ package org.apache.royale.jewel.beads.views
COMPILE::SWF {
import org.apache.royale.core.SimpleCSSStylesWithFlex;
}
- import org.apache.royale.core.IBeadLayout;
import org.apache.royale.core.IBeadView;
- import org.apache.royale.core.IChild;
import org.apache.royale.core.IContainerBaseStrandChildrenHost;
import org.apache.royale.core.ILayoutView;
import org.apache.royale.core.IStrand;
- import org.apache.royale.core.IViewport;
import org.apache.royale.core.UIBase;
import org.apache.royale.core.ValuesManager;
import org.apache.royale.events.Event;
import org.apache.royale.events.IEventDispatcher;
import org.apache.royale.html.beads.GroupView;
import org.apache.royale.jewel.Button;
+ import org.apache.royale.jewel.HGroup;
import org.apache.royale.jewel.IconButton;
+ import org.apache.royale.jewel.Label;
+ import org.apache.royale.jewel.VGroup;
import org.apache.royale.jewel.Wizard;
import org.apache.royale.jewel.beads.models.WizardModel;
import org.apache.royale.jewel.supportClasses.wizard.WizardLayoutProxy;
@@ -83,11 +83,11 @@ package org.apache.royale.jewel.beads.views
* @playerversion AIR 2.6
* @productversion Royale 0.9.4
*/
- public function get previousButton():IconButton
+ public function get previousButton():UIBase
{
return wizard.previousButton;
}
- public function set previousButton(value:IconButton):void
+ public function set previousButton(value:UIBase):void
{
wizard.previousButton = value;
}
@@ -100,17 +100,16 @@ package org.apache.royale.jewel.beads.views
* @playerversion AIR 2.6
* @productversion Royale 0.9.4
*/
- public function get nextButton():IconButton
+ public function get nextButton():UIBase
{
return wizard.nextButton;
}
- public function set nextButton(value:IconButton):void
+ public function set nextButton(value:UIBase):void
{
wizard.nextButton = value;
}
- // private var _titleBar:UIBase;
-
+ private var _titleLabel:UIBase;
/**
* The org.apache.royale.jewel.TitleBar component of the
* org.apache.royale.jewel.Wizard.
@@ -120,18 +119,17 @@ package org.apache.royale.jewel.beads.views
* @playerversion AIR 2.6
* @productversion Royale 0.9.4
*/
- // public function get titleBar():UIBase
- // {
- // return _titleBar;
- // }
-
+ public function get titleLabel():UIBase
+ {
+ return _titleLabel;
+ }
/**
* @private
*/
- // public function set titleBar(value:UIBase):void
- // {
- // _titleBar = value;
- // }
+ public function set titleLabel(value:UIBase):void
+ {
+ _titleLabel = value;
+ }
private var _contentArea:UIBase;
/**
@@ -171,57 +169,30 @@ package org.apache.royale.jewel.beads.views
super.strand = value;
wizard = value as Wizard;
-
+
model = _strand.getBeadByType(WizardModel) as WizardModel;
model.addEventListener("currentStepChange", handleStepChange);
- // Look for a layout and/or viewport bead on the wizard's beads list. If one
- // is found, pull it off so it will not be added permanently
- // to the strand.
- var beads:Array = wizard.beads;
- var transferLayoutBead:IBeadLayout;
- var transferViewportBead:IViewport;
- if (wizard.beads != null) {
- for(var i:int=wizard.beads.length-1; i >= 0; i--) {
- if (wizard.beads[i] is IBeadLayout) {
- transferLayoutBead = wizard.beads[i] as IBeadLayout;
- wizard.beads.splice(i, 1);
- }
- else if (wizard.beads[i] is IViewport) {
- transferViewportBead = wizard.beads[i] as IViewport
- wizard.beads.splice(i, 1);
- }
- }
+ trace("wizard.model.text:" + wizard.model.text);
+ if (!_titleLabel) {
+ _titleLabel = new Label();
+ (_titleLabel as Label).text = wizard.model.text;
}
-
- // if (!_titleBar) {
- // _titleBar = new TitleBar();
- // }
- // _titleBar.id = "wizardTitleBar";
- // _titleBar.addEventListener("close", handleClose);
- // replace the TitleBar's model with the Wizard's model (it implements ITitleBarModel) so that
- // any changes to values in the Wizard's model that correspond values in the TitleBar will
- // be picked up automatically by the TitleBar.
- // titleBar.model = wizard.model;
- // if (titleBar.parent == null) {
- // (_strand as IContainerBaseStrandChildrenHost).$addElement(titleBar);
- // }
+ //_titleLabel.id = "wizardTitle";
+ titleLabel.className = "wizardTitle";
+ // replace the Label's model with the Wizard's model (it implements ITextModel) so that
+ // any changes to values in the Wizard's model that correspond values in the Label will
+ // be picked up automatically by the Title Label.
+ titleLabel.model = wizard.model;
+
+ model.addEventListener("textChange", textChangeHandler);
+ model.addEventListener("htmlChange", textChangeHandler);
if (!_contentArea) {
var cls:Class = ValuesManager.valuesImpl.getValue(_strand, "iWizardContentArea");
_contentArea = new cls() as UIBase;
// _contentArea.id = "content";
-
- // add the layout bead to the content area.
- if (transferLayoutBead)
- _contentArea.addBead(transferLayoutBead);
- else
- setupContentAreaLayout();
-
- // add the viewport bead to the content area.
- if (transferViewportBead)
- _contentArea.addBead(transferViewportBead);
-
+ setupContentAreaLayout();
}
COMPILE::SWF {
@@ -232,31 +203,53 @@ package org.apache.royale.jewel.beads.views
IEventDispatcher(value).addEventListener("initComplete", handleInitComplete);
}
- // super.strand = value;
+ // adds an vgroup so we can arrange vertically the title and then the rest of content
+ var vg:VGroup = new VGroup();
+ vg.className = "jewel wizard main"
+ vg.gap = 3;
+ (_strand as IContainerBaseStrandChildrenHost).$addElement(vg);
+ // add title
+ if (titleLabel.parent == null) {
+ vg.addElement(titleLabel);
+ }
+
+ var g:HGroup = new HGroup();
+ g.className = "precontent";
+ g.gap = 3;
+ g.itemsHorizontalAlign = "itemsCentered";
+ // add the group that holds buttons and content
+ if (g.parent == null) {
+ vg.addElement(g);
+ //g.addBead(_strand.getBeadByType(IBeadLayout));
+ }
+
+ // add previous button
if (previousButton == null) {
- previousButton = createButton("previous", Button.SECONDARY);
+ previousButton = createButton("previous", Button.SECONDARY) as UIBase;
}
- previousButton.className = "previous";
+ previousButton.className = "jewel wizard previous";
if (previousButton != null && previousButton.parent == null) {
- (_strand as IContainerBaseStrandChildrenHost).$addElement(previousButton);
+ g.addElement(previousButton);
}
+ // add content
if (contentArea.parent == null) {
- (_strand as IContainerBaseStrandChildrenHost).$addElement(contentArea as IChild);
+ g.addElement(contentArea);
}
+ // add next button
if (nextButton == null) {
- nextButton = createButton("next", Button.SECONDARY);
+ nextButton = createButton("next", Button.SECONDARY) as UIBase;
}
- nextButton.className = "next";
+ nextButton.className = "jewel wizard next";
if (nextButton != null && nextButton.parent == null) {
- (_strand as IContainerBaseStrandChildrenHost).$addElement(nextButton);
+ g.addElement(nextButton);
}
setupLayout();
}
-
+
/**
*
*/
@@ -272,6 +265,14 @@ package org.apache.royale.jewel.beads.views
}
/**
+ *
+ */
+ public function textChangeHandler(event:Event):void
+ {
+ (titleLabel as Label).text = model.text;
+ }
+
+ /**
* @private
*/
protected function handleStepChange(event:Event):void
@@ -297,8 +298,8 @@ package org.apache.royale.jewel.beads.views
protected function setupLayout():void
{
// COMPILE::JS {
- // _titleBar.element.style["flex-grow"] = "0";
- // _titleBar.element.style["order"] = "1";
+ // _titleLabel.element.style["flex-grow"] = "0";
+ // _titleLabel.element.style["order"] = "1";
// }
COMPILE::SWF {
@@ -312,13 +313,13 @@ package org.apache.royale.jewel.beads.views
}
// COMPILE::SWF {
- // _titleBar.percentWidth = 100;
+ // _titleLabel.percentWidth = 100;
- // if (_titleBar.style == null) {
- // _titleBar.style = new SimpleCSSStylesWithFlex();
+ // if (_titleLabel.style == null) {
+ // _titleLabel.style = new SimpleCSSStylesWithFlex();
// }
- // _titleBar.style.flexGrow = 0;
- // _titleBar.style.order = 1;
+ // _titleLabel.style.flexGrow = 0;
+ // _titleLabel.style.order = 1;
// }
// COMPILE::JS {
@@ -364,7 +365,7 @@ package org.apache.royale.jewel.beads.views
protected function handleSizeChange(event:Event):void
{
COMPILE::JS {
- // _titleBar.percentWidth = 100;
+ // _titleLabel.percentWidth = 100;
_contentArea.percentWidth = 100;
}
diff --git a/frameworks/projects/Jewel/src/main/sass/components/_wizard.sass b/frameworks/projects/Jewel/src/main/sass/components/_wizard.sass
index 7769e38..61ad735 100644
--- a/frameworks/projects/Jewel/src/main/sass/components/_wizard.sass
+++ b/frameworks/projects/Jewel/src/main/sass/components/_wizard.sass
@@ -23,11 +23,27 @@
.jewel
.wizard
-
- .next
- flex: 1 1 0
- .previous
- flex: 1 1 0
+ .main
+ align-items: center
+ width: 100%
+ height: 100%
+ &.label
+ &.wizardTitle
+
+
+ .precontent
+ width: 100%
+ flex: 1 0
+
+ &.next, &.previous
+ height: 100%
+ align-items: center
+ justify-content: center
+ cursor: pointer
+ &:hover
+
+ .jewel.button
+
.wizardcontent
height: 100%
flex-grow: 100
diff --git a/frameworks/themes/JewelTheme/src/main/resources/defaults.css b/frameworks/themes/JewelTheme/src/main/resources/defaults.css
index 9788b87..4cdb6aa 100644
--- a/frameworks/themes/JewelTheme/src/main/resources/defaults.css
+++ b/frameworks/themes/JewelTheme/src/main/resources/defaults.css
@@ -927,6 +927,21 @@ a:active {
padding-right: 0;
}
+.jewel.label.wizardTitle {
+ color: #3CADF1;
+ font-size: 2em !important;
+}
+.jewel.next, .jewel.previous {
+ min-width: 44px;
+}
+.jewel.next:hover, .jewel.previous:hover {
+ background: rgba(0, 0, 0, 0.1);
+ border-radius: 5px;
+}
+.jewel.next .jewel.button, .jewel.previous .jewel.button {
+ width: calc(100% - 10px);
+}
+
j|Wizard {
gap: 3;
itemsVerticalAlign: itemsCentered;
diff --git a/frameworks/themes/JewelTheme/src/main/sass/components-primary/_wizard.sass b/frameworks/themes/JewelTheme/src/main/sass/components-primary/_wizard.sass
index e250c76..c3f913c 100644
--- a/frameworks/themes/JewelTheme/src/main/sass/components-primary/_wizard.sass
+++ b/frameworks/themes/JewelTheme/src/main/sass/components-primary/_wizard.sass
@@ -23,10 +23,23 @@
.jewel
.wizard
-
- .next
+ .main
+
+ &.label
+ &.wizardTitle
+ color: $primary-color
+ font-size: 2em !important
+
+ .precontent
+
+ &.next, &.previous
+ min-width: 44px
+ &:hover
+ background: rgba(0, 0, 0, 0.1)
+ border-radius: 5px
+ .jewel.button
+ width: calc(100% - 10px)
- .previous
.wizardcontent