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 1d5f17b fix width topbarapp when drawwer is open to avoid content
overflow screen app size
1d5f17b is described below
commit 1d5f17be8c65e068f9000b8950dc33daebd0d6cb
Author: Carlos Rovira <carlosrov...@apache.org>
AuthorDate: Tue Jul 10 11:26:38 2018 +0200
fix width topbarapp when drawwer is open to avoid content overflow screen
app size
---
.../src/main/resources/jewel-example-styles.css | 9 +++---
.../JewelExample/src/main/royale/MainContent.mxml | 6 ++--
.../projects/Jewel/src/main/resources/defaults.css | 28 ++++++++---------
.../main/royale/org/apache/royale/jewel/Drawer.as | 5 +++
.../royale/org/apache/royale/jewel/TopAppBar.as | 36 ++++++++++++++++++++++
.../sass/components/_applicationmaincontent.sass | 6 ++++
.../Jewel/src/main/sass/components/_topappbar.sass | 5 ---
.../projects/Jewel/src/main/sass/defaults.sass | 2 +-
.../JewelTheme/src/main/resources/defaults.css | 3 ++
.../main/sass/components-primary/_topappbar.sass | 5 +++
10 files changed, 78 insertions(+), 27 deletions(-)
diff --git
a/examples/royale/JewelExample/src/main/resources/jewel-example-styles.css
b/examples/royale/JewelExample/src/main/resources/jewel-example-styles.css
index 57c93c1..29313db 100644
--- a/examples/royale/JewelExample/src/main/resources/jewel-example-styles.css
+++ b/examples/royale/JewelExample/src/main/resources/jewel-example-styles.css
@@ -57,12 +57,13 @@
}
.wrapper {
- outline: 0px dashed navy;
+ /* outline: 0px dashed navy; */
}
.box {
background: #dedede;
- border-radius: 5px;
- padding: 10px;
- outline: 1px dashed navy;
+ border-radius: 3px;
+ padding: 12px;
+ color: white;
+ /* outline: 1px dashed navy; */
}
\ No newline at end of file
diff --git a/examples/royale/JewelExample/src/main/royale/MainContent.mxml
b/examples/royale/JewelExample/src/main/royale/MainContent.mxml
index 9897ee8..3ebb284 100644
--- a/examples/royale/JewelExample/src/main/royale/MainContent.mxml
+++ b/examples/royale/JewelExample/src/main/royale/MainContent.mxml
@@ -77,7 +77,7 @@ limitations under the License.
</j:DrawerContent>
</j:Drawer>
- <j:TopAppBar id="topappbar" fixed="true">
+ <j:TopAppBar id="topappbar" fixed="true" hasDrawer="{drawer.fixed
&& drawer.isOpen}">
<j:TopAppBarRow>
<j:TopAppBarSection>
<j:Button click="drawer.isOpen ? drawer.close() :
drawer.open()">
@@ -104,7 +104,7 @@ limitations under the License.
<j:ApplicationMainContent id="main" hasTopAppBar="true"
className="mainContent">
<local:AlertPlayGround id="alert_panel"/>
- <local:ButtonPlayGround id="button_panel" isActive="true"/>
+ <local:ButtonPlayGround id="button_panel"/>
<local:DropDownListPlayGround id="dropdownlist_panel"/>
<local:CheckBoxPlayGround id="checkbox_panel"/>
<local:HeadingsAndText id="text_panel"/>
@@ -113,7 +113,7 @@ limitations under the License.
<local:RadioButtonPlayGround id="radiobutton_panel"/>
<local:SliderPlayGround id="slider_panel"/>
<local:TextInputPlayGround id="textinput_panel"/>
- <local:GridPlayGround id="grid_panel"/>
+ <local:GridPlayGround id="grid_panel" isActive="true"/>
<local:CardPlayGround id="card_panel"/>
</j:ApplicationMainContent>
diff --git a/frameworks/projects/Jewel/src/main/resources/defaults.css
b/frameworks/projects/Jewel/src/main/resources/defaults.css
index 5ad8fda..c2ab767 100644
--- a/frameworks/projects/Jewel/src/main/resources/defaults.css
+++ b/frameworks/projects/Jewel/src/main/resources/defaults.css
@@ -112,16 +112,6 @@ j|Alert {
IBeadView: ClassReference("org.apache.royale.jewel.beads.views.AlertView");
}
-.jewel.main {
- width: 100%;
-}
-
-j|ApplicationMainContent {
- IBeadView:
ClassReference("org.apache.royale.core.beads.views.ContainerView");
- IViewport: ClassReference("org.apache.royale.core.supportClasses.Viewport");
- IViewportModel:
ClassReference("org.apache.royale.core.beads.models.ViewportModel");
-}
-
.jewel.button {
margin: 0;
padding: 0.72em 1.12em;
@@ -2753,10 +2743,6 @@ j|TitleBar {
transition: box-shadow 200ms linear;
}
-.has-topappbar {
- padding-top: 64px !important;
-}
-
.jewel.topappbarrow {
display: flex;
position: relative;
@@ -2813,4 +2799,18 @@ j|TitleBar {
text-overflow: ellipsis;
}
+.jewel.main {
+ width: 100%;
+}
+
+.has-topappbar {
+ padding-top: 64px !important;
+}
+
+j|ApplicationMainContent {
+ IBeadView:
ClassReference("org.apache.royale.core.beads.views.ContainerView");
+ IViewport: ClassReference("org.apache.royale.core.supportClasses.Viewport");
+ IViewportModel:
ClassReference("org.apache.royale.core.beads.models.ViewportModel");
+}
+
/*# sourceMappingURL=defaults.css.map */
diff --git
a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/Drawer.as
b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/Drawer.as
index 1f70600..680b350 100644
---
a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/Drawer.as
+++
b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/Drawer.as
@@ -94,6 +94,8 @@ package org.apache.royale.jewel
}
private var _isOpen:Boolean;
+
+ [Bindable]
/**
* Open or close the drawer
*
@@ -147,6 +149,8 @@ package org.apache.royale.jewel
}
protected var _fixed:Boolean = false;
+
+ [Bindable]
/**
* A boolean flag to switch between "float" and "fixed" effect
selector.
* Optional. Makes the drawer always fixed instead of floating.
@@ -222,6 +226,7 @@ package org.apache.royale.jewel
}
toggleClass("auto", _auto);
+ autoResizeHandler();
}
}
diff --git
a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/TopAppBar.as
b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/TopAppBar.as
index 976d216..3e54b85 100644
---
a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/TopAppBar.as
+++
b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/TopAppBar.as
@@ -198,5 +198,41 @@ package org.apache.royale.jewel
(c as IUIBase).addedToParent();
}
}
+
+ private var _hasDrawer:Boolean;
+
+ /**
+ * a boolean flag to indicate if the container needs to make some room
+ * for a Drawer so content doesn't get lost on the right
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.3
+ */
+ public function get hasDrawer():Boolean
+ {
+ return _hasDrawer;
+ }
+
+ public function set hasDrawer(value:Boolean):void
+ {
+ if (_hasDrawer != value)
+ {
+ _hasDrawer = value;
+
+ COMPILE::JS
+ {
+ if(_hasDrawer)
+ {
+ header.classList.add("has-drawer");
+ }
+ else
+ {
+ header.classList.remove("has-drawer");
+ }
+ }
+ }
+ }
}
}
diff --git
a/frameworks/projects/Jewel/src/main/sass/components/_applicationmaincontent.sass
b/frameworks/projects/Jewel/src/main/sass/components/_applicationmaincontent.sass
index 502ed0c..985f826 100644
---
a/frameworks/projects/Jewel/src/main/sass/components/_applicationmaincontent.sass
+++
b/frameworks/projects/Jewel/src/main/sass/components/_applicationmaincontent.sass
@@ -31,6 +31,12 @@
// position: relative
// overflow: hidden !important
+// this adjust the container declared after TopAppBar and with only one row
(most common case)
+// used by ApplicationMainContent
+// depends on $top-app-bar-row-height
+.has-topappbar
+ padding-top: $top-app-bar-row-height !important
+
j|ApplicationMainContent
IBeadView:
ClassReference("org.apache.royale.core.beads.views.ContainerView")
//IBeadLayout:
ClassReference("org.apache.royale.jewel.beads.layouts.VerticalLayout") // Basic
layoutr doesn't work here
diff --git a/frameworks/projects/Jewel/src/main/sass/components/_topappbar.sass
b/frameworks/projects/Jewel/src/main/sass/components/_topappbar.sass
index e22157c..b4546fe 100644
--- a/frameworks/projects/Jewel/src/main/sass/components/_topappbar.sass
+++ b/frameworks/projects/Jewel/src/main/sass/components/_topappbar.sass
@@ -38,11 +38,6 @@ $top-app-bar-button-size: 48px
&.fixed
transition: box-shadow 200ms linear
-// this adjust the container declared after TopAppBar and with only one row
(most common case)
-// used by ApplicationMainContent
-.has-topappbar
- padding-top: $top-app-bar-row-height !important
-
.jewel.topappbarrow
display: flex
position: relative
diff --git a/frameworks/projects/Jewel/src/main/sass/defaults.sass
b/frameworks/projects/Jewel/src/main/sass/defaults.sass
index f4fc0d0..cc93ae3 100644
--- a/frameworks/projects/Jewel/src/main/sass/defaults.sass
+++ b/frameworks/projects/Jewel/src/main/sass/defaults.sass
@@ -24,7 +24,6 @@
// Components
@import "components/alert"
-@import "components/applicationmaincontent"
@import "components/button"
@import "components/card"
@import "components/checkbox"
@@ -44,4 +43,5 @@
@import "components/titlebar"
@import "components/togglebutton"
@import "components/topappbar"
+@import "components/applicationmaincontent"
diff --git a/frameworks/themes/JewelTheme/src/main/resources/defaults.css
b/frameworks/themes/JewelTheme/src/main/resources/defaults.css
index 8687337..b2ef53f 100644
--- a/frameworks/themes/JewelTheme/src/main/resources/defaults.css
+++ b/frameworks/themes/JewelTheme/src/main/resources/defaults.css
@@ -552,6 +552,9 @@ j|Card {
color: #FFFFFF;
text-shadow: 0 -1px 0 rgba(10, 90, 138, 0.7);
}
+.jewel.topappbar .topBarAppHeader.has-drawer {
+ width: calc(100% - 240px);
+}
.jewel.topappbarsection {
padding: 8px 12px;
diff --git
a/frameworks/themes/JewelTheme/src/main/sass/components-primary/_topappbar.sass
b/frameworks/themes/JewelTheme/src/main/sass/components-primary/_topappbar.sass
index c1b16d6..74d75cd 100644
---
a/frameworks/themes/JewelTheme/src/main/sass/components-primary/_topappbar.sass
+++
b/frameworks/themes/JewelTheme/src/main/sass/components-primary/_topappbar.sass
@@ -43,6 +43,11 @@ $top-app-bar-button-padding: 12px
text:
shadow: 0 -1px 0 rgba(darken($primary-color, 30%), .7)
+ // this adjust the TopAppBar width when there's a drawer to avoid
content on the right get lost (overflow the screen)
+ // used by TopAppBar
+ // depends on Drawer: $drawer-fixed-width
+ &.has-drawer
+ width: calc(100% - #{$drawer-fixed-width})
//&.fixed
// transition: box-shadow 200ms linear
