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 c23a5f3 jewel-tabbar: more changes to improve visuals in tabbar, as
well mouse events since now we have content and indicator that is not filling
all available tabbarbutton space
c23a5f3 is described below
commit c23a5f3c28abfa27d5b9ae875ec24e8a1ad40f7b
Author: Carlos Rovira <[email protected]>
AuthorDate: Wed Apr 17 23:58:30 2019 +0200
jewel-tabbar: more changes to improve visuals in tabbar, as well mouse
events since now we have content and indicator that is not filling all
available tabbarbutton space
---
.../projects/Jewel/src/main/resources/defaults.css | 29 +++++++++++++++--
.../itemRenderers/TabBarButtonItemRenderer.as | 26 +++++++++++++--
.../Jewel/src/main/sass/components/_tabbar.sass | 38 +++++++++++++++++++---
.../JewelTheme/src/main/resources/defaults.css | 16 +++------
.../src/main/sass/components-primary/_tabbar.sass | 29 ++++++++++-------
5 files changed, 106 insertions(+), 32 deletions(-)
diff --git a/frameworks/projects/Jewel/src/main/resources/defaults.css
b/frameworks/projects/Jewel/src/main/resources/defaults.css
index 2f638e8..876bc16 100644
--- a/frameworks/projects/Jewel/src/main/resources/defaults.css
+++ b/frameworks/projects/Jewel/src/main/resources/defaults.css
@@ -3480,6 +3480,9 @@ j|Snackbar {
.jewel.tabbar {
display: flex;
+ position: relative;
+ transform: none;
+ will-change: transform;
}
j|TabBar {
@@ -3496,23 +3499,43 @@ j|TabBar {
.jewel.tabbarbutton {
height: 48px;
- margin: 0;
- padding: 0 1.12em;
+ padding: 0 24px;
position: relative;
display: flex;
flex: 1 0 auto;
white-space: nowrap;
+ justify-content: center;
text-transform: uppercase;
text-decoration: none;
z-index: 1;
}
.jewel.tabbarbutton .content {
display: flex;
+ position: relative;
align-items: center;
justify-content: center;
- width: 100%;
height: inherit;
}
+.jewel.tabbarbutton .indicator {
+ display: flex;
+ position: absolute;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+ pointer-events: none;
+ z-index: 1;
+}
+.jewel.tabbarbutton .indicator .indicatorContent {
+ align-self: flex-end;
+ width: 100%;
+ transform-origin: left;
+ opacity: 0;
+ transition: transform 0.25s ease;
+}
+.jewel.tabbarbutton.selected .indicator .indicatorContent {
+ opacity: 1;
+}
j|TabBarButtonItemRenderer {
IBeadController:
ClassReference("org.apache.royale.jewel.beads.controllers.ItemRendererMouseController");
diff --git
a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/itemRenderers/TabBarButtonItemRenderer.as
b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/itemRenderers/TabBarButtonItemRenderer.as
index 12fdb95..cc778d9 100644
---
a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/itemRenderers/TabBarButtonItemRenderer.as
+++
b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/itemRenderers/TabBarButtonItemRenderer.as
@@ -53,6 +53,8 @@ package org.apache.royale.jewel.itemRenderers
{
super();
+ hoverable = false;
+
typeNames = "jewel tabbarbutton";
addClass("selectable");
}
@@ -146,7 +148,16 @@ package org.apache.royale.jewel.itemRenderers
var span:HTMLSpanElement = addElementToWrapper(this, 'span') as
HTMLSpanElement;
span.className = "content";
positioner = document.createElement('button') as
WrappedHTMLElement;
- //a.setAttribute('href', href);
+
+ indicator = document.createElement('span') as
HTMLSpanElement;
+ indicator.className = "indicator";
+ positioner.appendChild(indicator);
+
+ var indicator_content:HTMLSpanElement =
document.createElement('span') as HTMLSpanElement;
+ indicator_content.className = "indicatorContent";
+ indicator.appendChild(indicator_content);
+
+ //a.setAttribute('href', href);
// if(MXMLDescriptor == null)
// {
@@ -158,6 +169,9 @@ package org.apache.royale.jewel.itemRenderers
}
COMPILE::JS
+ private var indicator:HTMLSpanElement;
+
+ COMPILE::JS
private var _positioner:WrappedHTMLElement;
COMPILE::JS
@@ -208,8 +222,16 @@ package org.apache.royale.jewel.itemRenderers
// there's no selection only hover state
if(hoverable)
toggleClass("hovered", hovered);
- if(selectable)
+ if(selectable) {
toggleClass("selected", selected);
+
+ // COMPILE::JS
+ // {
+ // indicator.classList.toggle("selected",
selected);
+ // }
+ }
+
+
}
}
}
diff --git a/frameworks/projects/Jewel/src/main/sass/components/_tabbar.sass
b/frameworks/projects/Jewel/src/main/sass/components/_tabbar.sass
index e216527..c8fcb02 100644
--- a/frameworks/projects/Jewel/src/main/sass/components/_tabbar.sass
+++ b/frameworks/projects/Jewel/src/main/sass/components/_tabbar.sass
@@ -24,7 +24,11 @@ $tabbarbutton-margin-height: 48px
.jewel.tabbar
display: flex
- // flex: 1 0 auto
+
+ position: relative
+ // flex: 1 0 auto --> make TabBarContent positioned at bottom
+ transform: none
+ will-change: transform
j|TabBar
@@ -39,21 +43,22 @@ j|TabBar
IDataProviderItemRendererMapper:
ClassReference("org.apache.royale.jewel.beads.itemRenderers.DataItemRendererFactoryForCollectionView")
// Jewel TabBarButtonItemRenderer
-$tabbarbutton-margin: 0 !default
-$tabbarbutton-padding: 0 1.12em !default
+// $tabbarbutton-margin: 0 !default
+$tabbarbutton-padding: 0 24px !default
// TabBarButtonItemRenderer variables
.jewel
&.tabbarbutton
height: $tabbarbutton-margin-height
// min-height: $tabbarbutton-margin-height
- margin: $tabbarbutton-margin
+ // margin: $tabbarbutton-margin
padding: $tabbarbutton-padding
position: relative
display: flex
flex: 1 0 auto
white-space: nowrap
+ justify-content: center
text-transform: uppercase
text-decoration: none
@@ -62,12 +67,35 @@ $tabbarbutton-padding: 0 1.12em !default
.content
display: flex
+ position: relative
align-items: center
justify-content: center
- width: 100%
+ // width: 100%
height: inherit
+ .indicator
+ display: flex
+ position: absolute
+ top: 0
+ left: 0
+ width: 100%
+ height: 100%
+ pointer-events: none
+ z-index: 1
+
+ .indicatorContent
+ align-self: flex-end
+ width: 100%
+ transform-origin: left
+ opacity: 0
+ transition: transform .25s ease //cubic-bezier(.4,0,.2,1)
+
+ &.selected
+ .indicator
+ .indicatorContent
+ opacity: 1
+
j|TabBarButtonItemRenderer
IBeadController:
ClassReference("org.apache.royale.jewel.beads.controllers.ItemRendererMouseController")
diff --git a/frameworks/themes/JewelTheme/src/main/resources/defaults.css
b/frameworks/themes/JewelTheme/src/main/resources/defaults.css
index 298a5d4..5d1da55 100644
--- a/frameworks/themes/JewelTheme/src/main/resources/defaults.css
+++ b/frameworks/themes/JewelTheme/src/main/resources/defaults.css
@@ -842,8 +842,6 @@ j|FormItem {
}
}
.jewel.tabbarbutton {
- margin: 0;
- padding: 0;
font-size: 1em;
font-weight: 500;
border: none;
@@ -851,16 +849,12 @@ j|FormItem {
outline: none;
color: rgba(0, 0, 0, 0.6);
}
-.jewel.tabbarbutton .content {
- padding: 0px 16px;
-}
-.jewel.tabbarbutton.hovered:hover {
- color: #FFFFFF;
- background: #6cc1f4;
-}
.jewel.tabbarbutton.selected, .jewel.tabbarbutton.selectable:active {
- color: #FFFFFF;
- background: #54b7f3;
+ color: #3CADF1;
+}
+.jewel.tabbarbutton .indicator .indicatorContent {
+ height: 2px;
+ background-color: #3CADF1;
}
.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 d43b057..f14f519 100644
--- a/frameworks/themes/JewelTheme/src/main/sass/components-primary/_tabbar.sass
+++ b/frameworks/themes/JewelTheme/src/main/sass/components-primary/_tabbar.sass
@@ -32,8 +32,8 @@
// NavigationLinkItemRenderer variables
.jewel
&.tabbarbutton
- margin: 0
- padding: 0
+ // margin: 0
+ // padding: 0
font:
// family: $font-stack
size: $font-size
@@ -44,13 +44,20 @@
outline: none
color: rgba(black, 0.6)
- .content
- padding: 0px $itemrenderer-padding
-
- &.hovered:hover
- color: $font-theme-color
- background: lighten($primary-color, 10%)
-
+ // .content
+ // padding: 0px $itemrenderer-padding
+
&.selected, &.selectable:active
- color: $font-theme-color
- background: lighten($primary-color, 5%)
\ No newline at end of file
+ color: $primary-color
+
+ .indicator
+ .indicatorContent
+ height: 2px
+ background-color: $primary-color
+ // &.hovered:hover
+ // color: $font-theme-color
+ // background: lighten($primary-color, 10%)
+
+ // &.selected, &.selectable:active
+ // color: $font-theme-color
+ // background: lighten($primary-color, 5%)
\ No newline at end of file
