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 2019/02/23 15:57:36 UTC
[royale-asjs] branch develop updated: form & formitem changes
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 f6fc0e1 form & formitem changes
f6fc0e1 is described below
commit f6fc0e18c5307d6f0a0edb09b33ee4a8c0f675c3
Author: Carlos Rovira <ca...@apache.org>
AuthorDate: Sat Feb 23 16:57:29 2019 +0100
form & formitem changes
---
.../projects/Jewel/src/main/resources/defaults.css | 15 ++-
.../Jewel/src/main/resources/jewel-manifest.xml | 2 +
.../royale/jewel/beads/layouts/FormItemLayout.as | 113 ++++++++++++++++++++
.../royale/jewel/beads/layouts/FormLayout.as | 115 +++++++++++++++++++++
.../royale/jewel/beads/views/FormHeadingView.as | 1 +
.../royale/jewel/beads/views/FormItemView.as | 24 +++--
.../projects/Jewel/src/main/sass/_global.sass | 2 +-
.../src/main/sass/components/_formheading.sass | 4 +
.../Jewel/src/main/sass/components/_formitem.sass | 6 +-
.../Jewel/src/main/sass/components/_layout.sass | 15 +++
.../JewelTheme/src/main/resources/defaults.css | 13 ++-
.../main/sass/components-primary/_formitem.sass | 15 ++-
12 files changed, 303 insertions(+), 22 deletions(-)
diff --git a/frameworks/projects/Jewel/src/main/resources/defaults.css b/frameworks/projects/Jewel/src/main/resources/defaults.css
index cc1a21a..37e47c9 100644
--- a/frameworks/projects/Jewel/src/main/resources/defaults.css
+++ b/frameworks/projects/Jewel/src/main/resources/defaults.css
@@ -116,7 +116,7 @@ j|DataContainer {
}
j|Form {
- IBeadLayout: ClassReference("org.apache.royale.jewel.beads.layouts.VerticalLayout");
+ IBeadLayout: ClassReference("org.apache.royale.jewel.beads.layouts.FormLayout");
}
@media -royale-swf {
@@ -812,6 +812,10 @@ j|FooterBar {
.jewel.formheading {
line-height: 2em;
}
+.jewel.formheading .jewel.label.headingLabel {
+ white-space: initial;
+ flex: 1 1 auto;
+}
j|FormHeading {
IBeadLayout: ClassReference("org.apache.royale.jewel.beads.layouts.HorizontalLayout");
@@ -820,7 +824,7 @@ j|FormHeading {
}
j|FormItem {
- IBeadLayout: ClassReference("org.apache.royale.jewel.beads.layouts.HorizontalLayout");
+ IBeadLayout: ClassReference("org.apache.royale.jewel.beads.layouts.FormItemLayout");
IBeadView: ClassReference("org.apache.royale.jewel.beads.views.FormItemView");
IBeadModel: ClassReference("org.apache.royale.jewel.beads.models.FormItemModel");
IFormItemContentArea: ClassReference("org.apache.royale.jewel.Group");
@@ -927,6 +931,10 @@ j|Label {
.layout.horizontal.centered > * {
flex: 0 0 auto;
}
+.layout.horizontal.formitem {
+ width: 100%;
+ align-items: flex-start;
+}
.layout.horizontal.gap-1x3px > *:first-child {
margin: 0px;
}
@@ -1005,6 +1013,9 @@ j|Label {
flex-direction: column;
height: 100%;
}
+.layout.vertical.form {
+ width: 100%;
+}
.layout.vertical.gap-1x3px > *:first-child {
margin: 0px;
}
diff --git a/frameworks/projects/Jewel/src/main/resources/jewel-manifest.xml b/frameworks/projects/Jewel/src/main/resources/jewel-manifest.xml
index bb7c340..265c2b6 100644
--- a/frameworks/projects/Jewel/src/main/resources/jewel-manifest.xml
+++ b/frameworks/projects/Jewel/src/main/resources/jewel-manifest.xml
@@ -147,6 +147,8 @@
<component id="SimpleVerticalLayout" class="org.apache.royale.jewel.beads.layouts.SimpleVerticalLayout"/>
<component id="HorizontalLayout" class="org.apache.royale.jewel.beads.layouts.HorizontalLayout"/>
<component id="VerticalLayout" class="org.apache.royale.jewel.beads.layouts.VerticalLayout"/>
+ <component id="FormLayout" class="org.apache.royale.jewel.beads.layouts.FormLayout"/>
+ <component id="FormItemLayout" class="org.apache.royale.jewel.beads.layouts.FormItemLayout"/>
<component id="HorizontalCenteredLayout" class="org.apache.royale.jewel.beads.layouts.HorizontalCenteredLayout"/>
<component id="VerticalCenteredLayout" class="org.apache.royale.jewel.beads.layouts.VerticalCenteredLayout"/>
<component id="HorizontalFlowLayout" class="org.apache.royale.jewel.beads.layouts.HorizontalFlowLayout"/>
diff --git a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/layouts/FormItemLayout.as b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/layouts/FormItemLayout.as
new file mode 100644
index 0000000..8f58321
--- /dev/null
+++ b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/layouts/FormItemLayout.as
@@ -0,0 +1,113 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+// 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.beads.layouts
+{
+ COMPILE::JS {
+ import org.apache.royale.core.UIBase;
+ }
+ import org.apache.royale.core.ILayoutChild;
+ import org.apache.royale.core.ILayoutView;
+ import org.apache.royale.core.IUIBase;
+ import org.apache.royale.events.Event;
+
+ /**
+ * The BasicLayout class is a simple layout
+ * bead. It takes the set of children and lays them out
+ * as specified by CSS properties like left, right, top
+ * and bottom.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.4
+ */
+ public class FormItemLayout extends HorizontalLayout
+ {
+ /**
+ * Constructor.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.4
+ */
+ public function FormItemLayout()
+ {
+ super();
+ }
+
+ /**
+ * @royalesuppresspublicvarwarning
+ */
+ public static const LAYOUT_TYPE_NAMES:String = "layout formitem";
+
+ /**
+ * Add class selectors when the component is addedToParent
+ * Otherwise component will not get the class selectors when
+ * perform "removeElement" and then "addElement"
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.4
+ */
+ override public function beadsAddedHandler(event:Event = null):void
+ {
+ super.beadsAddedHandler();
+
+ COMPILE::JS
+ {
+ if(hostClassList.contains("formitem"))
+ hostClassList.remove("formitem");
+ hostClassList.add("formitem");
+ }
+ }
+
+ /**
+ * @copy org.apache.royale.core.IBeadLayout#layout
+ * @royaleignorecoercion org.apache.royale.core.UIBase
+ */
+ override public function layout():Boolean
+ {
+ COMPILE::SWF
+ {
+ return true;
+ }
+
+ COMPILE::JS
+ {
+ /**
+ * This Layout uses the following CSS rules
+ * no code needed in JS for layout
+ *
+ * .layout {
+ * display: flex;
+ * }
+ *
+ * .layout.formitem {
+ * width: 100%;
+ * flex-wrap: wrap;
+ * }
+ */
+
+ return true;
+ }
+ }
+ }
+}
diff --git a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/layouts/FormLayout.as b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/layouts/FormLayout.as
new file mode 100644
index 0000000..00ae316
--- /dev/null
+++ b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/layouts/FormLayout.as
@@ -0,0 +1,115 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+// 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.beads.layouts
+{
+ COMPILE::JS {
+ import org.apache.royale.core.UIBase;
+ }
+ import org.apache.royale.core.ILayoutChild;
+ import org.apache.royale.core.ILayoutView;
+ import org.apache.royale.core.IUIBase;
+ import org.apache.royale.events.Event;
+
+ /**
+ * The BasicLayout class is a simple layout
+ * bead. It takes the set of children and lays them out
+ * as specified by CSS properties like left, right, top
+ * and bottom.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.4
+ */
+ public class FormLayout extends VerticalLayout
+ {
+ /**
+ * Constructor.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.4
+ */
+ public function FormLayout()
+ {
+ super();
+ }
+
+ /**
+ * @royalesuppresspublicvarwarning
+ */
+ public static const LAYOUT_TYPE_NAMES:String = "layout form";
+
+ /**
+ * Add class selectors when the component is addedToParent
+ * Otherwise component will not get the class selectors when
+ * perform "removeElement" and then "addElement"
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.4
+ */
+ override public function beadsAddedHandler(event:Event = null):void
+ {
+ super.beadsAddedHandler();
+
+ COMPILE::JS
+ {
+ if(hostClassList.contains("form"))
+ hostClassList.remove("form");
+ hostClassList.add("form");
+ }
+ }
+
+ /**
+ * @copy org.apache.royale.core.IBeadLayout#layout
+ * @royaleignorecoercion org.apache.royale.core.UIBase
+ */
+ override public function layout():Boolean
+ {
+ COMPILE::SWF
+ {
+ // TO DO
+ return true;
+ }
+
+ COMPILE::JS
+ {
+ /**
+ * This Layout uses the following CSS rules
+ * no code needed in JS for layout
+ *
+ * .layout {
+ * display: flex;
+ * }
+ *
+ * .layout.form {
+ * width: 100%;
+ * }
+ *
+ *
+ */
+
+ return true;
+ }
+ }
+ }
+}
diff --git a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/views/FormHeadingView.as b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/views/FormHeadingView.as
index 4a871e6..da79e42 100644
--- a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/views/FormHeadingView.as
+++ b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/views/FormHeadingView.as
@@ -108,6 +108,7 @@ package org.apache.royale.jewel.beads.views
if (headingLabel == null) {
headingLabel = createLabel(model.text);
+ headingLabel.className="headingLabel";
}
if (headingLabel != null && headingLabel.parent == null) {
formHeading.addElement(headingLabel);
diff --git a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/views/FormItemView.as b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/views/FormItemView.as
index 8cfaecb..ac2b9c0 100644
--- a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/views/FormItemView.as
+++ b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/views/FormItemView.as
@@ -37,6 +37,7 @@ package org.apache.royale.jewel.beads.views
import org.apache.royale.jewel.beads.layouts.VerticalLayout;
import org.apache.royale.jewel.beads.models.FormItemModel;
import org.apache.royale.jewel.supportClasses.formitem.FormItemLayoutProxy;
+ import org.apache.royale.jewel.HGroup;
/**
@@ -77,7 +78,7 @@ package org.apache.royale.jewel.beads.views
private var _contentArea:UIBase;
/**
- * The content area of the formItem.
+ * The content area of the formItem.
*
* @langversion 3.0
* @playerversion Flash 10.2
@@ -124,9 +125,8 @@ package org.apache.royale.jewel.beads.views
model.addEventListener("htmlChange", textChangeHandler);
model.addEventListener("requiredChange", requiredChangeHandler);
- // Look for a layout and/or viewport bead on the formItem's beads list. If one
- // is found, pull it off so it will not be added permanently
- // to the strand.
+ // Look for a layout and/or viewport bead on the formItem's beads list delcared in MXML.
+ // If one is found, pull it off so it will not be added permanently to the strand.
var beads:Array = formItem.beads;
var transferLayoutBead:IBeadLayout;
var transferViewportBead:IViewport;
@@ -146,7 +146,7 @@ package org.apache.royale.jewel.beads.views
if (!_contentArea) {
var cls:Class = ValuesManager.valuesImpl.getValue(_strand, "iFormItemContentArea");
_contentArea = new cls() as UIBase;
- // _contentArea.id = "content";
+ _contentArea.className = "content";
// add the layout bead to the content area.
if (transferLayoutBead)
@@ -168,6 +168,14 @@ package org.apache.royale.jewel.beads.views
}
// super.strand = value;
+ var labelGroup:HGroup;
+ if (labelGroup == null) {
+ labelGroup = new HGroup();
+ labelGroup.gap = 2;
+ }
+ if (labelGroup != null && labelGroup.parent == null) {
+ (_strand as IContainerBaseStrandChildrenHost).$addElement(labelGroup);
+ }
if (textLabel == null) {
textLabel = createLabel(model.text);
@@ -175,7 +183,7 @@ package org.apache.royale.jewel.beads.views
textLabel.className = "formlabel";
}
if (textLabel != null && textLabel.parent == null) {
- (_strand as IContainerBaseStrandChildrenHost).$addElement(textLabel);
+ labelGroup.addElement(textLabel);
textLabelAlign = new TextAlign();
textLabelAlign.align = model.labelAlign;
textLabel.addBead(textLabelAlign);
@@ -187,7 +195,7 @@ package org.apache.royale.jewel.beads.views
requiredLabel.className = "required";
}
if (requiredLabel != null && requiredLabel.parent == null) {
- (_strand as IContainerBaseStrandChildrenHost).$addElement(requiredLabel);
+ labelGroup.addElement(requiredLabel);
}
if (contentArea.parent == null) {
@@ -225,7 +233,7 @@ package org.apache.royale.jewel.beads.views
{
var defaultContentAreaLayout:VerticalLayout = new VerticalLayout();
defaultContentAreaLayout.gap = 3;
- defaultContentAreaLayout.itemsHorizontalAlign = "itemsCenter";
+ // defaultContentAreaLayout.itemsHorizontalAlign = "itemsCenter";
contentArea.addBead(defaultContentAreaLayout);
}
diff --git a/frameworks/projects/Jewel/src/main/sass/_global.sass b/frameworks/projects/Jewel/src/main/sass/_global.sass
index a30c0f1..a0f154a 100644
--- a/frameworks/projects/Jewel/src/main/sass/_global.sass
+++ b/frameworks/projects/Jewel/src/main/sass/_global.sass
@@ -115,7 +115,7 @@ j|DataContainer
IViewportModel: ClassReference("org.apache.royale.html.beads.models.ViewportModel")
j|Form
- IBeadLayout: ClassReference("org.apache.royale.jewel.beads.layouts.VerticalLayout")
+ IBeadLayout: ClassReference("org.apache.royale.jewel.beads.layouts.FormLayout")
@media -royale-swf
j|View
diff --git a/frameworks/projects/Jewel/src/main/sass/components/_formheading.sass b/frameworks/projects/Jewel/src/main/sass/components/_formheading.sass
index d1a6fef..3ad6f9e 100644
--- a/frameworks/projects/Jewel/src/main/sass/components/_formheading.sass
+++ b/frameworks/projects/Jewel/src/main/sass/components/_formheading.sass
@@ -27,6 +27,10 @@
.jewel.label.spacerLabel
.jewel.label.requiredSpacerLabel
+
+ .jewel.label.headingLabel
+ white-space: initial
+ flex: 1 1 auto
j|FormHeading
IBeadLayout: ClassReference("org.apache.royale.jewel.beads.layouts.HorizontalLayout")
diff --git a/frameworks/projects/Jewel/src/main/sass/components/_formitem.sass b/frameworks/projects/Jewel/src/main/sass/components/_formitem.sass
index 5d390b6..d71b327 100644
--- a/frameworks/projects/Jewel/src/main/sass/components/_formitem.sass
+++ b/frameworks/projects/Jewel/src/main/sass/components/_formitem.sass
@@ -27,9 +27,13 @@
.jewel.label.required
+ .content
+ // border: 1px solid red
+
+
j|FormItem
- IBeadLayout: ClassReference("org.apache.royale.jewel.beads.layouts.HorizontalLayout")
+ IBeadLayout: ClassReference("org.apache.royale.jewel.beads.layouts.FormItemLayout")
IBeadView: ClassReference("org.apache.royale.jewel.beads.views.FormItemView")
IBeadModel: ClassReference("org.apache.royale.jewel.beads.models.FormItemModel")
IFormItemContentArea: ClassReference("org.apache.royale.jewel.Group")
diff --git a/frameworks/projects/Jewel/src/main/sass/components/_layout.sass b/frameworks/projects/Jewel/src/main/sass/components/_layout.sass
index 4856561..e6d19ac 100644
--- a/frameworks/projects/Jewel/src/main/sass/components/_layout.sass
+++ b/frameworks/projects/Jewel/src/main/sass/components/_layout.sass
@@ -66,6 +66,13 @@ $gap-size: 10px !default
> *
flex: 0 0 auto
+ // FormItemLayout
+ &.formitem
+ width: 100%
+ // flex-wrap: wrap
+ align-items: flex-start
+ // justify-content: center
+
@for $i from 1 through $gaps
&.gap-#{$i}x#{$gap-step}px
> *:first-child
@@ -92,6 +99,14 @@ $gap-size: 10px !default
flex-direction: column
height: 100%
+ // FormLayout (consider for now Forms are always vertical)
+ &.form
+ width: 100%
+
+ // FormItemLayout
+ // &.formitem
+ // width: 100%
+
@for $i from 1 through $gaps
&.gap-#{$i}x#{$gap-step}px
> *:first-child
diff --git a/frameworks/themes/JewelTheme/src/main/resources/defaults.css b/frameworks/themes/JewelTheme/src/main/resources/defaults.css
index dcc71d5..262fe16 100644
--- a/frameworks/themes/JewelTheme/src/main/resources/defaults.css
+++ b/frameworks/themes/JewelTheme/src/main/resources/defaults.css
@@ -524,17 +524,20 @@ j|FormHeading {
}
.jewel.formitem .jewel.label.formlabel {
- width: 160px;
+ width: 120px;
+ line-height: 2.75em;
}
.jewel.formitem .jewel.label.required {
color: #EC1C24;
- font-size: 1.6em !important;
- width: 10px;
+ font-size: 2.1em !important;
+ width: 14px;
+}
+.jewel.formitem .content {
+ width: 200px;
}
j|FormItem {
- gap: 3;
- itemsVerticalAlign: itemsCentered;
+ gap: 2;
}
.fonticon.dark {
diff --git a/frameworks/themes/JewelTheme/src/main/sass/components-primary/_formitem.sass b/frameworks/themes/JewelTheme/src/main/sass/components-primary/_formitem.sass
index d0f8209..5fedab8 100644
--- a/frameworks/themes/JewelTheme/src/main/sass/components-primary/_formitem.sass
+++ b/frameworks/themes/JewelTheme/src/main/sass/components-primary/_formitem.sass
@@ -24,13 +24,18 @@
.jewel.formitem
.jewel.label.formlabel
- width: 160px
+ width: 120px
+ line-height: 2.75em
+ // border: 1px solid
.jewel.label.required
color: $error-color
- font-size: 1.6em !important
- width: 10px
+ font-size: 2.1em !important
+ width: 14px
+ // border: 1px solid
+ .content
+ width: 200px
j|FormItem
- gap: 3
- itemsVerticalAlign: itemsCentered
\ No newline at end of file
+ gap: 2
+ //itemsVerticalAlign: itemsCentered
\ No newline at end of file