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/04/21 17:37:18 UTC
[royale-asjs] branch develop updated: jewel-tabbar: add horizontal
scrolling tabbar feature
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 526d4b6 jewel-tabbar: add horizontal scrolling tabbar feature
526d4b6 is described below
commit 526d4b6a7d1755bfe7375393c88a2881e3236b78
Author: Carlos Rovira <ca...@apache.org>
AuthorDate: Sun Apr 21 19:37:10 2019 +0200
jewel-tabbar: add horizontal scrolling tabbar feature
---
.../projects/Jewel/src/main/resources/defaults.css | 12 +++++++++
.../main/royale/org/apache/royale/jewel/TabBar.as | 29 ++++++++++++++++++++++
.../Jewel/src/main/sass/components/_tabbar.sass | 26 +++++++++++++------
.../src/main/sass/components-primary/_tabbar.sass | 3 ++-
4 files changed, 62 insertions(+), 8 deletions(-)
diff --git a/frameworks/projects/Jewel/src/main/resources/defaults.css b/frameworks/projects/Jewel/src/main/resources/defaults.css
index a36304e..cd21934 100644
--- a/frameworks/projects/Jewel/src/main/resources/defaults.css
+++ b/frameworks/projects/Jewel/src/main/resources/defaults.css
@@ -3479,8 +3479,20 @@ j|Snackbar {
}
.jewel.tabbar {
+ overflow-y: hidden;
+ overflow-x: scroll;
+ -webkit-overflow-scrolling: touch;
+ display: flex;
+ -ms-overflow-style: none;
+ scrollbar-width: none;
+}
+.jewel.tabbar::-webkit-scrollbar {
+ display: none;
+}
+.jewel.tabbar > .content {
display: flex;
position: relative;
+ flex: 1 0 auto;
transform: none;
will-change: transform;
}
diff --git a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/TabBar.as b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/TabBar.as
index b8c4047..6d6db07 100644
--- a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/TabBar.as
+++ b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/TabBar.as
@@ -67,5 +67,34 @@ package org.apache.royale.jewel
event.preventDefault();
}
}
+
+ /**
+ * @royaleignorecoercion org.apache.royale.core.WrappedHTMLElement
+ */
+ COMPILE::JS
+ override protected function createElement():WrappedHTMLElement
+ {
+ addElementToWrapper(this,'div');
+ element.className = "content";
+ positioner = document.createElement('div') as WrappedHTMLElement;
+ return element;
+ }
+
+ COMPILE::JS
+ private var _positioner:WrappedHTMLElement;
+
+ COMPILE::JS
+ override public function get positioner():WrappedHTMLElement
+ {
+ return _positioner;
+ }
+
+ COMPILE::JS
+ override public function set positioner(value:WrappedHTMLElement):void
+ {
+ _positioner = value;
+ _positioner.royale_wrapper = this;
+ _positioner.appendChild(element);
+ }
}
}
diff --git a/frameworks/projects/Jewel/src/main/sass/components/_tabbar.sass b/frameworks/projects/Jewel/src/main/sass/components/_tabbar.sass
index 641c1fc..7cd9c7a 100644
--- a/frameworks/projects/Jewel/src/main/sass/components/_tabbar.sass
+++ b/frameworks/projects/Jewel/src/main/sass/components/_tabbar.sass
@@ -22,13 +22,25 @@
// TabBar variables
$tabbarbutton-margin-height: 48px
-.jewel.tabbar
- display: flex
-
- position: relative
- // flex: 1 0 auto --> make TabBarContent positioned at bottom
- transform: none
- will-change: transform
+.jewel
+ &.tabbar
+ // width: 100%
+ overflow-y: hidden
+ overflow-x: scroll
+ -webkit-overflow-scrolling: touch //Momentum (innercial) Scrolling on iOS
+ display: flex
+ -ms-overflow-style: none // IE 10+
+ scrollbar-width: none // Firefox
+ &::-webkit-scrollbar
+ display: none // Safari and Chrome
+
+ > .content
+ display: flex
+
+ position: relative
+ flex: 1 0 auto
+ transform: none
+ will-change: transform
j|TabBar
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 65d5539..73600c4 100644
--- a/frameworks/themes/JewelTheme/src/main/sass/components-primary/_tabbar.sass
+++ b/frameworks/themes/JewelTheme/src/main/sass/components-primary/_tabbar.sass
@@ -22,7 +22,8 @@
// TabBar variables
-.jewel.tabbar
+.jewel
+ &.tabbar
// Jewel TabBarButtonItemRenderer