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 7afdd03 - Fix the main layout to allow fixed / scrolled content -
Added ScrollableSectionContent to complement SectionContent - SectionContent
now extends Container to allow ScrollableViewPort - remove some additional
styles in TouDeJewel not needed anymore - WizardPage now extends
ScrollableSectionContent to allow content be scrollable if needed while
navigation buttons are always centered in visible screen - Minor fixes to
Tabbar to be compliant with this update
7afdd03 is described below
commit 7afdd0300f292c18f98735fda56cb6659a23445e
Author: Carlos Rovira <[email protected]>
AuthorDate: Mon Mar 11 23:46:54 2019 +0100
- Fix the main layout to allow fixed / scrolled content
- Added ScrollableSectionContent to complement SectionContent
- SectionContent now extends Container to allow ScrollableViewPort
- remove some additional styles in TouDeJewel not needed anymore
- WizardPage now extends ScrollableSectionContent to allow content be
scrollable if needed while navigation buttons are always centered in visible
screen
- Minor fixes to Tabbar to be compliant with this update
---
.../src/main/resources/jewel-example-styles.css | 10 ----
.../TourDeJewel/src/main/royale/MainContent.mxml | 2 +-
.../ExampleAndSourceCodeTabbedSectionContent.as | 62 ++++------------------
.../projects/Jewel/src/main/resources/defaults.css | 21 ++++++--
.../Jewel/src/main/resources/jewel-manifest.xml | 1 +
.../royale/jewel/ScrollableSectionContent.as} | 46 ++++++++++------
.../org/apache/royale/jewel/SectionContent.as | 2 +-
.../royale/org/apache/royale/jewel/WizardPage.as | 2 +-
.../projects/Jewel/src/main/sass/_global.sass | 2 +-
.../sass/components/_applicationmaincontent.sass | 6 +--
.../src/main/sass/components/_sectioncontent.sass | 13 +++++
.../Jewel/src/main/sass/components/_tabbar.sass | 5 +-
.../JewelTheme/src/main/resources/defaults.css | 2 +-
.../src/main/sass/components-primary/_tabbar.sass | 2 +-
14 files changed, 81 insertions(+), 95 deletions(-)
diff --git
a/examples/royale/TourDeJewel/src/main/resources/jewel-example-styles.css
b/examples/royale/TourDeJewel/src/main/resources/jewel-example-styles.css
index 463f93d..4fcaa08 100644
--- a/examples/royale/TourDeJewel/src/main/resources/jewel-example-styles.css
+++ b/examples/royale/TourDeJewel/src/main/resources/jewel-example-styles.css
@@ -22,16 +22,6 @@
@namespace "http://www.w3.org/1999/xhtml";;
@namespace j "library://ns.apache.org/royale/jewel";
-.mainContent
-{
- padding: 5px;
-}
-
-.jewel.section
-{
- padding-top: 20px;
-}
-
.iconListItemRenderer
{
IItemRenderer: ClassReference("itemRenderers.IconListItemRenderer");
diff --git a/examples/royale/TourDeJewel/src/main/royale/MainContent.mxml
b/examples/royale/TourDeJewel/src/main/royale/MainContent.mxml
index 4041389..d29a252 100644
--- a/examples/royale/TourDeJewel/src/main/royale/MainContent.mxml
+++ b/examples/royale/TourDeJewel/src/main/royale/MainContent.mxml
@@ -207,7 +207,7 @@ limitations under the License.
</j:BarRow>
</j:TopAppBar>
- <j:ApplicationMainContent localId="main" hasTopAppBar="true"
hasFooterBar="true" className="mainContent" selectedContent = "welcome_panel">
+ <j:ApplicationMainContent localId="main" hasTopAppBar="true"
hasFooterBar="true" selectedContent = "welcome_panel">
<local:WelcomeSection name="welcome_panel"/>
<local:AlertPlayGround name="alert_panel"/>
<local:ButtonPlayGround name="button_panel"/>
diff --git
a/examples/royale/TourDeJewel/src/main/royale/components/ExampleAndSourceCodeTabbedSectionContent.as
b/examples/royale/TourDeJewel/src/main/royale/components/ExampleAndSourceCodeTabbedSectionContent.as
index 2cb8e5b..16feafe 100644
---
a/examples/royale/TourDeJewel/src/main/royale/components/ExampleAndSourceCodeTabbedSectionContent.as
+++
b/examples/royale/TourDeJewel/src/main/royale/components/ExampleAndSourceCodeTabbedSectionContent.as
@@ -25,7 +25,7 @@ package components
import org.apache.royale.html.elements.A;
import org.apache.royale.html.elements.Code;
import org.apache.royale.html.elements.Pre;
- import org.apache.royale.jewel.SectionContent;
+ import org.apache.royale.jewel.ScrollableSectionContent;
import org.apache.royale.jewel.TabBar;
import org.apache.royale.jewel.TabBarContent;
@@ -35,7 +35,7 @@ package components
import vos.TabBarButtonVO;
- public class ExampleAndSourceCodeTabbedSectionContent extends
SectionContent implements IContainerBaseStrandChildrenHost
+ public class ExampleAndSourceCodeTabbedSectionContent extends
ScrollableSectionContent implements IContainerBaseStrandChildrenHost
{
/**
* constructor.
@@ -49,7 +49,7 @@ package components
{
super();
- exampleTab = new SectionContent();
+ exampleTab = new ScrollableSectionContent();
exampleTab.name = "exampleTab";
contentArea = exampleTab;
@@ -60,8 +60,8 @@ package components
private var tabbar:TabBar;
private var tabBarNavigation:ArrayList;
private var tabcontent:TabBarContent;
- private var exampleTab:SectionContent;
- private var sourceCodeTab:SectionContent;
+ private var exampleTab:ScrollableSectionContent;
+ private var sourceCodeTab:ScrollableSectionContent;
private var sourceCodeMXMLText:Code;
private var sourceCodeUrlPrefix:String =
"https://api.github.com/repos/apache/royale-asjs/contents/examples/royale/TourDeJewel/src/main/royale/";;
@@ -93,7 +93,7 @@ package components
tabbar.dataProvider = tabBarNavigation;
$addElement(tabbar);
- sourceCodeTab = new SectionContent();
+ sourceCodeTab = new ScrollableSectionContent();
sourceCodeTab.name = "sourceCodeTab";
var link:A = new A();
link.href = sourceCodeUrlWebPrefix + sourceCodeUrl;
@@ -139,52 +139,8 @@ package components
}
}
- public function $addElement(c:IChild, dispatchEvent:Boolean =
true):void
- {
- super.addElement(c, dispatchEvent);
- }
-
- /**
- * @private
- * @suppress {undefinedNames}
- * Support strandChildren.
- */
- public function $addElementAt(c:IChild, index:int,
dispatchEvent:Boolean = true):void
- {
- super.addElementAt(c, index, dispatchEvent);
- }
- public function get $numElements():int
- {
- return super.numElements;
- }
-
- public function $getElementAt(index:int):IChild
- {
- return super.getElementAt(index);
- }
-
- /**
- * @private
- * @suppress {undefinedNames}
- * Support strandChildren.
- */
- public function $removeElement(c:IChild, dispatchEvent:Boolean =
true):void
- {
- super.removeElement(c, dispatchEvent);
- }
-
- /**
- * @private
- * @suppress {undefinedNames}
- * Support strandChildren.
- */
- public function $getElementIndex(c:IChild):int
- {
- return super.getElementIndex(c);
- }
-
- private var _contentArea:SectionContent;
+ private var _contentArea:ScrollableSectionContent;
/**
* The content area of the formItem.
*
@@ -193,11 +149,11 @@ package components
* @playerversion AIR 2.6
* @productversion Royale 0.9.4
*/
- public function get contentArea():SectionContent
+ public function get contentArea():ScrollableSectionContent
{
return _contentArea;
}
- public function set contentArea(value:SectionContent):void
+ public function set
contentArea(value:ScrollableSectionContent):void
{
_contentArea = value;
}
diff --git a/frameworks/projects/Jewel/src/main/resources/defaults.css
b/frameworks/projects/Jewel/src/main/resources/defaults.css
index eb438cd..e21e342 100644
--- a/frameworks/projects/Jewel/src/main/resources/defaults.css
+++ b/frameworks/projects/Jewel/src/main/resources/defaults.css
@@ -57,7 +57,7 @@ j|ApplicationResponsiveView {
.applicationResponsiveView {
display: inline-flex;
width: 100%;
- min-height: 100%;
+ height: 100%;
}
j|ApplicationView {
@@ -3322,6 +3322,9 @@ j|PopUp {
flex-flow: column nowrap;
height: 100%;
}
+.jewel.section > * {
+ flex: 0 0 auto;
+}
.jewel.section.is-selected {
display: flex;
}
@@ -3330,6 +3333,12 @@ j|SectionContent {
IBeadLayout:
ClassReference("org.apache.royale.jewel.beads.layouts.NullLayout");
}
+j|ScrollableSectionContent {
+ IBeadLayout:
ClassReference("org.apache.royale.jewel.beads.layouts.NullLayout");
+ IViewport:
ClassReference("org.apache.royale.jewel.supportClasses.scrollbar.ScrollingViewport");
+ IViewportModel:
ClassReference("org.apache.royale.html.beads.models.ViewportModel");
+}
+
.jewel.slider {
position: relative;
height: 27px;
@@ -3467,6 +3476,10 @@ j|Snackbar {
IBeadView:
ClassReference("org.apache.royale.jewel.beads.views.SnackbarView");
}
+.jewel.tabbar {
+ height: 48px;
+}
+
j|TabBar {
IBeadView: ClassReference("org.apache.royale.jewel.beads.views.ListView");
IBeadController:
ClassReference("org.apache.royale.jewel.beads.controllers.ListSingleSelectionMouseController");
@@ -3898,15 +3911,15 @@ j|WizardContent {
.jewel.main {
width: 100%;
- min-height: 100%;
+ height: 100%;
}
.has-topappbar {
- padding-top: 64px !important;
+ padding-top: 66px !important;
}
.has-footerbar {
- padding-bottom: 64px !important;
+ padding-bottom: 66px !important;
}
j|ApplicationMainContent {
diff --git a/frameworks/projects/Jewel/src/main/resources/jewel-manifest.xml
b/frameworks/projects/Jewel/src/main/resources/jewel-manifest.xml
index b67b343..3b28fdd 100644
--- a/frameworks/projects/Jewel/src/main/resources/jewel-manifest.xml
+++ b/frameworks/projects/Jewel/src/main/resources/jewel-manifest.xml
@@ -101,6 +101,7 @@
<component id="ApplicationMainContent"
class="org.apache.royale.jewel.ApplicationMainContent"/>
<component id="SectionContent"
class="org.apache.royale.jewel.SectionContent"/>
+ <component id="ScrollableSectionContent"
class="org.apache.royale.jewel.ScrollableSectionContent"/>
<component id="Drawer" class="org.apache.royale.jewel.Drawer"/>
<component id="DrawerHeader"
class="org.apache.royale.jewel.supportClasses.drawer.DrawerHeader"/>
diff --git
a/frameworks/projects/Jewel/src/main/sass/components/_sectioncontent.sass
b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/ScrollableSectionContent.as
similarity index 57%
copy from
frameworks/projects/Jewel/src/main/sass/components/_sectioncontent.sass
copy to
frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/ScrollableSectionContent.as
index 8b493d4..bab2a1f 100644
--- a/frameworks/projects/Jewel/src/main/sass/components/_sectioncontent.sass
+++
b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/ScrollableSectionContent.as
@@ -16,21 +16,33 @@
// limitations under the License.
//
////////////////////////////////////////////////////////////////////////////////
+package org.apache.royale.jewel
+{
+ /**
+ * The ScrollableSectionContent class is a scrollable container
component capable of parenting other
+ * components. This class is used along with Tabs to separate content
and
+ * present and organize data for the user.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.6
+ */
+ public class ScrollableSectionContent extends SectionContent
+ {
+ /**
+ * constructor.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.6
+ */
+ public function ScrollableSectionContent()
+ {
+ super();
-// Jewel SectionContent
-
-// SectionContent variables
-
-.jewel.section
- //padding: 40px
- display: none
- flex-flow: column nowrap
- height: 100%
-
- &.is-selected
- display: flex
-
-j|SectionContent
- IBeadLayout:
ClassReference("org.apache.royale.jewel.beads.layouts.NullLayout")
- // IBeadLayout:
ClassReference("org.apache.royale.jewel.beads.layouts.VerticalLayout")
- // gap: 3
+ typeNames = "jewel section scrollable";
+ }
+ }
+}
\ No newline at end of file
diff --git
a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/SectionContent.as
b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/SectionContent.as
index cf0340a..2bdf8c1 100644
---
a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/SectionContent.as
+++
b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/SectionContent.as
@@ -36,7 +36,7 @@ package org.apache.royale.jewel
* @playerversion AIR 2.6
* @productversion Royale 0.9.4
*/
- public class SectionContent extends Group implements ISelectableContent
+ public class SectionContent extends Container implements
ISelectableContent
{
/**
* constructor.
diff --git
a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/WizardPage.as
b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/WizardPage.as
index ac40c69..21dd736 100644
---
a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/WizardPage.as
+++
b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/WizardPage.as
@@ -47,7 +47,7 @@ package org.apache.royale.jewel
/**
* WizardPage is the main class for a page inside the WizardContent
*/
- public class WizardPage extends SectionContent
+ public class WizardPage extends ScrollableSectionContent
{
/**
* constructor.
diff --git a/frameworks/projects/Jewel/src/main/sass/_global.sass
b/frameworks/projects/Jewel/src/main/sass/_global.sass
index 43dbea4..f095e54 100644
--- a/frameworks/projects/Jewel/src/main/sass/_global.sass
+++ b/frameworks/projects/Jewel/src/main/sass/_global.sass
@@ -55,7 +55,7 @@ j|ApplicationResponsiveView
.applicationResponsiveView
display: inline-flex
width: 100%
- min-height: 100% // can't have 100% height without prevents app
scrolling
+ height: 100%
j|ApplicationView
IBeadView: ClassReference("org.apache.royale.html.beads.GroupView")
diff --git
a/frameworks/projects/Jewel/src/main/sass/components/_applicationmaincontent.sass
b/frameworks/projects/Jewel/src/main/sass/components/_applicationmaincontent.sass
index d521fb6..97afe11 100644
---
a/frameworks/projects/Jewel/src/main/sass/components/_applicationmaincontent.sass
+++
b/frameworks/projects/Jewel/src/main/sass/components/_applicationmaincontent.sass
@@ -23,7 +23,7 @@
.jewel.main
width: 100%
- min-height: 100%
+ height: 100%
// display: inline-block
// flex-grow: 1
@@ -35,10 +35,10 @@
// used by ApplicationMainContent
// depends on $top-app-bar-row-height
.has-topappbar
- padding-top: $top-app-bar-row-height !important
+ padding-top: ($top-app-bar-row-height + 2) !important
.has-footerbar
- padding-bottom: $footer-bar-row-height !important
+ padding-bottom: ($footer-bar-row-height + 2) !important
j|ApplicationMainContent
IBeadView: ClassReference("org.apache.royale.html.beads.ContainerView")
diff --git
a/frameworks/projects/Jewel/src/main/sass/components/_sectioncontent.sass
b/frameworks/projects/Jewel/src/main/sass/components/_sectioncontent.sass
index 8b493d4..69271d7 100644
--- a/frameworks/projects/Jewel/src/main/sass/components/_sectioncontent.sass
+++ b/frameworks/projects/Jewel/src/main/sass/components/_sectioncontent.sass
@@ -26,11 +26,24 @@
display: none
flex-flow: column nowrap
height: 100%
+
+ > *
+ flex: 0 0 auto
&.is-selected
display: flex
+
+ &.scrollable
+ // min-height: 100%
j|SectionContent
IBeadLayout:
ClassReference("org.apache.royale.jewel.beads.layouts.NullLayout")
// IBeadLayout:
ClassReference("org.apache.royale.jewel.beads.layouts.VerticalLayout")
// gap: 3
+
+j|ScrollableSectionContent
+ IBeadLayout:
ClassReference("org.apache.royale.jewel.beads.layouts.NullLayout")
+ IViewport:
ClassReference("org.apache.royale.jewel.supportClasses.scrollbar.ScrollingViewport")
+ IViewportModel:
ClassReference("org.apache.royale.html.beads.models.ViewportModel")
+ // IBeadLayout:
ClassReference("org.apache.royale.jewel.beads.layouts.VerticalLayout")
+ // gap: 3
diff --git a/frameworks/projects/Jewel/src/main/sass/components/_tabbar.sass
b/frameworks/projects/Jewel/src/main/sass/components/_tabbar.sass
index 1d40605..da8a5b9 100644
--- a/frameworks/projects/Jewel/src/main/sass/components/_tabbar.sass
+++ b/frameworks/projects/Jewel/src/main/sass/components/_tabbar.sass
@@ -20,9 +20,10 @@
// Jewel TabBar
// TabBar variables
-
+$tabbarbutton-margin-height: 48px
.jewel.tabbar
+ height: $tabbarbutton-margin-height
j|TabBar
@@ -42,7 +43,7 @@ $tabbarbutton-padding: 0.68em 1.12em !default
// TabBarButtonItemRenderer variables
.jewel.tabbarbutton
- min-height: 48px
+ min-height: $tabbarbutton-margin-height
margin: $tabbarbutton-margin
padding: $tabbarbutton-padding
diff --git a/frameworks/themes/JewelTheme/src/main/resources/defaults.css
b/frameworks/themes/JewelTheme/src/main/resources/defaults.css
index e5aab52..1685754 100644
--- a/frameworks/themes/JewelTheme/src/main/resources/defaults.css
+++ b/frameworks/themes/JewelTheme/src/main/resources/defaults.css
@@ -833,7 +833,7 @@ j|FormItem {
}
.jewel.tabbarbutton {
margin: 0;
- padding: 0 16px;
+ padding: 14px 16px;
font-family: "Lato", sans-serif;
font-size: 1em;
font-weight: 500;
diff --git
a/frameworks/themes/JewelTheme/src/main/sass/components-primary/_tabbar.sass
b/frameworks/themes/JewelTheme/src/main/sass/components-primary/_tabbar.sass
index 8ee998c..44f5851 100644
--- a/frameworks/themes/JewelTheme/src/main/sass/components-primary/_tabbar.sass
+++ b/frameworks/themes/JewelTheme/src/main/sass/components-primary/_tabbar.sass
@@ -32,7 +32,7 @@
// NavigationLinkItemRenderer variables
.jewel.tabbarbutton
margin: 0
- padding: 0 $itemrenderer-padding
+ padding: ($itemrenderer-padding - 2) $itemrenderer-padding
font:
family: $font-stack
size: $font-size
