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 2020/09/01 16:05:14 UTC
[royale-asjs] branch develop updated: jewel-tabbar: add
TabBarPresentationModel.indicatorToOppositeSide to make it possible tabbars
located below content and indicators on top (or content on the left and
indicator point to content)
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 1b605b3 jewel-tabbar: add TabBarPresentationModel.indicatorToOppositeSide to make it possible tabbars located below content and indicators on top (or content on the left and indicator point to content)
1b605b3 is described below
commit 1b605b3fdfbf13fc0baa9ba64704424e803bd78e
Author: Carlos Rovira <ca...@apache.org>
AuthorDate: Tue Sep 1 18:04:17 2020 +0200
jewel-tabbar: add TabBarPresentationModel.indicatorToOppositeSide to make it possible tabbars located below content and indicators on top (or content on the left and indicator point to content)
---
.../projects/Jewel/src/main/resources/defaults.css | 19 +++++++++++++++
.../itemRenderers/TabBarItemRendererInitializer.as | 7 ++++++
.../jewel/beads/models/TabBarPresentationModel.as | 27 ++++++++++++++++++++++
.../Jewel/src/main/sass/components/_tabbar.sass | 21 +++++++++++++++++
.../JewelTheme/src/main/resources/defaults.css | 2 --
.../src/main/sass/components-primary/_tabbar.sass | 2 --
6 files changed, 74 insertions(+), 4 deletions(-)
diff --git a/frameworks/projects/Jewel/src/main/resources/defaults.css b/frameworks/projects/Jewel/src/main/resources/defaults.css
index 783dc87..1c22f3b 100644
--- a/frameworks/projects/Jewel/src/main/resources/defaults.css
+++ b/frameworks/projects/Jewel/src/main/resources/defaults.css
@@ -3702,6 +3702,9 @@ j|TabBar {
opacity: 0;
align-self: flex-end;
}
+.jewel.tabbarbutton.indicator-opposite-side .indicator > .indicator-content {
+ align-self: flex-start;
+}
.jewel.tabbarbutton.selected .indicator > .indicator-content {
opacity: 1;
}
@@ -3712,11 +3715,27 @@ j|TabBar {
.jewel.tabbar.layout.horizontal .indicator > .indicator-content {
width: 100%;
}
+.jewel.tabbar.layout.horizontal .indicator-opposite-side ._internal_ {
+ bottom: initial;
+ top: 0;
+}
+.jewel.tabbar.layout.horizontal .indicator-opposite-side .indicator > .indicator-content {
+ bottom: initial;
+}
.jewel.tabbar.layout.vertical ._internal_ {
right: 0;
}
.jewel.tabbar.layout.vertical .indicator > .indicator-content {
+ position: absolute;
height: 100%;
+ right: 0;
+}
+.jewel.tabbar.layout.vertical .indicator-opposite-side ._internal_ {
+ right: initial;
+ left: 0;
+}
+.jewel.tabbar.layout.vertical .indicator-opposite-side .indicator > .indicator-content {
+ right: initial;
}
j|TabBarButtonItemRenderer {
diff --git a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/itemRenderers/TabBarItemRendererInitializer.as b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/itemRenderers/TabBarItemRendererInitializer.as
index fcc244c..040b738 100644
--- a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/itemRenderers/TabBarItemRendererInitializer.as
+++ b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/itemRenderers/TabBarItemRendererInitializer.as
@@ -26,6 +26,7 @@ package org.apache.royale.jewel.beads.itemRenderers
import org.apache.royale.core.layout.IPaddings;
import org.apache.royale.jewel.beads.layouts.Paddings;
import org.apache.royale.jewel.beads.models.ListPresentationModel;
+ import org.apache.royale.jewel.beads.models.TabBarPresentationModel;
import org.apache.royale.jewel.itemRenderers.TabBarButtonItemRenderer;
/**
@@ -66,6 +67,12 @@ package org.apache.royale.jewel.beads.itemRenderers
{
TabBarButtonItemRenderer(ir).percentWidth = 100;
}
+
+ //indicatorToOppositeSide
+ if((presentationModel as TabBarPresentationModel).indicatorToOppositeSide)
+ {
+ TabBarButtonItemRenderer(ir).addClass("indicator-opposite-side");
+ }
}
/**
diff --git a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/models/TabBarPresentationModel.as b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/models/TabBarPresentationModel.as
index 63bf8ec..f7e8537 100644
--- a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/models/TabBarPresentationModel.as
+++ b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/models/TabBarPresentationModel.as
@@ -18,6 +18,9 @@
////////////////////////////////////////////////////////////////////////////////
package org.apache.royale.jewel.beads.models
{
+ import org.apache.royale.events.Event;
+ import org.apache.royale.events.IEventDispatcher;
+
/**
* The TabBarPresentationModel holds values used by tabbar controls for presenting
* their user interfaces.
@@ -52,5 +55,29 @@ package org.apache.royale.jewel.beads.models
// also default is center alignment of content
align = "center";
}
+
+ private var _indicatorToOppositeSide:Boolean = false;
+ /**
+ * Indicator is positioned by default at the bottom on horizontal tabbars,
+ * and to right on vertical tabbars. Setting this to "true", make the indicator
+ * be positioned on top (horizontal tabbars), or left (vertical tabbars).
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.10.0
+ */
+ public function get indicatorToOppositeSide():Boolean
+ {
+ return _indicatorToOppositeSide;
+ }
+ public function set indicatorToOppositeSide(value:Boolean):void
+ {
+ if (value != _indicatorToOppositeSide) {
+ _indicatorToOppositeSide = value;
+ if(_strand)
+ (_strand as IEventDispatcher).dispatchEvent(new Event("indicatorToOppositeSideChanged"));
+ }
+ }
}
}
diff --git a/frameworks/projects/Jewel/src/main/sass/components/_tabbar.sass b/frameworks/projects/Jewel/src/main/sass/components/_tabbar.sass
index 75c1ba4..27eb4d2 100644
--- a/frameworks/projects/Jewel/src/main/sass/components/_tabbar.sass
+++ b/frameworks/projects/Jewel/src/main/sass/components/_tabbar.sass
@@ -99,6 +99,11 @@ $tabbarbutton-margin: 0 !default
opacity: 0
align-self: flex-end
+ &.indicator-opposite-side
+ .indicator
+ > .indicator-content
+ align-self: flex-start
+
&.selected
.indicator
> .indicator-content
@@ -114,12 +119,28 @@ $tabbarbutton-margin: 0 !default
.indicator
> .indicator-content
width: 100%
+ .indicator-opposite-side
+ ._internal_
+ bottom: initial
+ top: 0
+ .indicator
+ > .indicator-content
+ bottom: initial
&.vertical
._internal_
right: 0
.indicator
> .indicator-content
+ position: absolute
height: 100%
+ right: 0
+ .indicator-opposite-side
+ ._internal_
+ right: initial
+ left: 0
+ .indicator
+ > .indicator-content
+ right: initial
j|TabBarButtonItemRenderer
diff --git a/frameworks/themes/JewelTheme/src/main/resources/defaults.css b/frameworks/themes/JewelTheme/src/main/resources/defaults.css
index 90958c4..ca55591 100644
--- a/frameworks/themes/JewelTheme/src/main/resources/defaults.css
+++ b/frameworks/themes/JewelTheme/src/main/resources/defaults.css
@@ -1210,8 +1210,6 @@ j|TabBar {
}
.jewel.tabbar.layout.vertical .indicator > .indicator-content {
width: 2px;
- right: 0;
- position: absolute;
}
.jewel.simpletable {
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 4354406..9a3765a 100644
--- a/frameworks/themes/JewelTheme/src/main/sass/components-primary/_tabbar.sass
+++ b/frameworks/themes/JewelTheme/src/main/sass/components-primary/_tabbar.sass
@@ -85,8 +85,6 @@ j|TabBar
.indicator
> .indicator-content
width: 2px
- right: 0
- position: absolute
// j|TabBarButtonItemRenderer
// itemsHorizontalAlign: itemsCenter
\ No newline at end of file