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/16 14:38:38 UTC
[royale-asjs] branch develop updated: jewel-tabbar: global
improvements to the component. TabBar now selects first tab by default
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 f6dae56 jewel-tabbar: global improvements to the component. TabBar now selects first tab by default
f6dae56 is described below
commit f6dae5687b78ed095cb66efbf3aa3192ee66db30
Author: Carlos Rovira <ca...@apache.org>
AuthorDate: Tue Apr 16 16:38:31 2019 +0200
jewel-tabbar: global improvements to the component. TabBar now selects first tab by default
---
.../projects/Jewel/src/main/resources/defaults.css | 22 +++++++++---
.../main/royale/org/apache/royale/jewel/List.as | 1 -
.../main/royale/org/apache/royale/jewel/TabBar.as | 10 +++---
.../Jewel/src/main/sass/components/_tabbar.sass | 35 ++++++++++++++----
.../JewelTheme/src/main/resources/defaults.css | 13 +++++--
.../src/main/sass/components-primary/_tabbar.sass | 41 +++++++++++++---------
6 files changed, 86 insertions(+), 36 deletions(-)
diff --git a/frameworks/projects/Jewel/src/main/resources/defaults.css b/frameworks/projects/Jewel/src/main/resources/defaults.css
index 862220a..2f638e8 100644
--- a/frameworks/projects/Jewel/src/main/resources/defaults.css
+++ b/frameworks/projects/Jewel/src/main/resources/defaults.css
@@ -3479,13 +3479,13 @@ j|Snackbar {
}
.jewel.tabbar {
- height: 48px;
+ display: flex;
}
j|TabBar {
IBeadView: ClassReference("org.apache.royale.jewel.beads.views.ListView");
IBeadController: ClassReference("org.apache.royale.jewel.beads.controllers.ListSingleSelectionMouseController");
- IBeadLayout: ClassReference("org.apache.royale.jewel.beads.layouts.HorizontalLayout");
+ IBeadLayout: ClassReference("org.apache.royale.jewel.beads.layouts.NullLayout");
IItemRendererClassFactory: ClassReference("org.apache.royale.core.ItemRendererClassFactory");
IItemRenderer: ClassReference("org.apache.royale.jewel.itemRenderers.TabBarButtonItemRenderer");
IViewport: ClassReference("org.apache.royale.jewel.supportClasses.scrollbar.ScrollingViewport");
@@ -3495,9 +3495,23 @@ j|TabBar {
}
.jewel.tabbarbutton {
- min-height: 48px;
+ height: 48px;
margin: 0;
- padding: 0.68em 1.12em;
+ padding: 0 1.12em;
+ position: relative;
+ display: flex;
+ flex: 1 0 auto;
+ white-space: nowrap;
+ text-transform: uppercase;
+ text-decoration: none;
+ z-index: 1;
+}
+.jewel.tabbarbutton .content {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ width: 100%;
+ height: inherit;
}
j|TabBarButtonItemRenderer {
diff --git a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/List.as b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/List.as
index afe06b1..c46b3c2 100644
--- a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/List.as
+++ b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/List.as
@@ -29,7 +29,6 @@ package org.apache.royale.jewel
import org.apache.royale.jewel.beads.models.ListPresentationModel;
import org.apache.royale.jewel.supportClasses.DataContainerBase;
-
/**
* Indicates that the initialization of the list is complete.
*
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 6f232ed..902cfe6 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
@@ -18,13 +18,13 @@
////////////////////////////////////////////////////////////////////////////////
package org.apache.royale.jewel
{
- import org.apache.royale.events.MouseEvent;
-
COMPILE::JS
{
- import org.apache.royale.core.WrappedHTMLElement;
- import org.apache.royale.html.util.addElementToWrapper;
+ import org.apache.royale.core.WrappedHTMLElement;
+ import org.apache.royale.html.util.addElementToWrapper;
}
+ import org.apache.royale.events.MouseEvent;
+ import org.apache.royale.core.ISelectionModel;
/**
* The Navigation class is a List used for navigate other organized content
@@ -53,6 +53,8 @@ package org.apache.royale.jewel
typeNames = "jewel tabbar";
+ ISelectionModel(model).selectedIndex = 0;
+
addEventListener(MouseEvent.CLICK, internalMouseHandler);
}
diff --git a/frameworks/projects/Jewel/src/main/sass/components/_tabbar.sass b/frameworks/projects/Jewel/src/main/sass/components/_tabbar.sass
index da8a5b9..e216527 100644
--- a/frameworks/projects/Jewel/src/main/sass/components/_tabbar.sass
+++ b/frameworks/projects/Jewel/src/main/sass/components/_tabbar.sass
@@ -23,13 +23,14 @@
$tabbarbutton-margin-height: 48px
.jewel.tabbar
- height: $tabbarbutton-margin-height
+ display: flex
+ // flex: 1 0 auto
j|TabBar
IBeadView: ClassReference("org.apache.royale.jewel.beads.views.ListView")
IBeadController: ClassReference("org.apache.royale.jewel.beads.controllers.ListSingleSelectionMouseController")
- IBeadLayout: ClassReference("org.apache.royale.jewel.beads.layouts.HorizontalLayout")
+ IBeadLayout: ClassReference("org.apache.royale.jewel.beads.layouts.NullLayout")
IItemRendererClassFactory: ClassReference("org.apache.royale.core.ItemRendererClassFactory")
IItemRenderer: ClassReference("org.apache.royale.jewel.itemRenderers.TabBarButtonItemRenderer")
IViewport: ClassReference("org.apache.royale.jewel.supportClasses.scrollbar.ScrollingViewport")
@@ -39,13 +40,33 @@ j|TabBar
// Jewel TabBarButtonItemRenderer
$tabbarbutton-margin: 0 !default
-$tabbarbutton-padding: 0.68em 1.12em !default
+$tabbarbutton-padding: 0 1.12em !default
// TabBarButtonItemRenderer variables
-.jewel.tabbarbutton
- min-height: $tabbarbutton-margin-height
- margin: $tabbarbutton-margin
- padding: $tabbarbutton-padding
+.jewel
+ &.tabbarbutton
+ height: $tabbarbutton-margin-height
+ // min-height: $tabbarbutton-margin-height
+ margin: $tabbarbutton-margin
+ padding: $tabbarbutton-padding
+
+ position: relative
+ display: flex
+ flex: 1 0 auto
+ white-space: nowrap
+
+ text-transform: uppercase
+ text-decoration: none
+
+ z-index: 1
+
+ .content
+ display: flex
+ align-items: center
+ justify-content: center
+
+ width: 100%
+ height: inherit
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 1ac2da8..298a5d4 100644
--- a/frameworks/themes/JewelTheme/src/main/resources/defaults.css
+++ b/frameworks/themes/JewelTheme/src/main/resources/defaults.css
@@ -843,17 +843,24 @@ j|FormItem {
}
.jewel.tabbarbutton {
margin: 0;
- padding: 14px 16px;
+ padding: 0;
font-size: 1em;
font-weight: 500;
+ border: none;
+ background: none;
+ outline: none;
color: rgba(0, 0, 0, 0.6);
}
+.jewel.tabbarbutton .content {
+ padding: 0px 16px;
+}
.jewel.tabbarbutton.hovered:hover {
- background: #f3f3f3 !important;
+ color: #FFFFFF;
+ background: #6cc1f4;
}
.jewel.tabbarbutton.selected, .jewel.tabbarbutton.selectable:active {
color: #FFFFFF;
- background: #54b7f3 !important;
+ background: #54b7f3;
}
.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 ea1949a..d43b057 100644
--- a/frameworks/themes/JewelTheme/src/main/sass/components-primary/_tabbar.sass
+++ b/frameworks/themes/JewelTheme/src/main/sass/components-primary/_tabbar.sass
@@ -30,20 +30,27 @@
// Jewel NavigationLinkItemRenderer
// NavigationLinkItemRenderer variables
-.jewel.tabbarbutton
- margin: 0
- padding: ($itemrenderer-padding - 2) $itemrenderer-padding
- font:
- // family: $font-stack
- size: $font-size
- weight: $font-weight-normal + 100
-
- color: rgba(black, 0.6)
-
- &.hovered:hover
- //color: $font-theme-color
- background: lighten($default-color, 10%) !important
-
- &.selected, &.selectable:active
- color: $font-theme-color
- background: lighten($primary-color, 5%) !important
\ No newline at end of file
+.jewel
+ &.tabbarbutton
+ margin: 0
+ padding: 0
+ font:
+ // family: $font-stack
+ size: $font-size
+ weight: $font-weight-normal + 100
+
+ border: none
+ background: none
+ outline: none
+ color: rgba(black, 0.6)
+
+ .content
+ padding: 0px $itemrenderer-padding
+
+ &.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