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 371f6d4 jewel-tabbar: latest touches: - remove
restrictIndicatorToContent in favor of an ItemRenderer subclass - improve
tabbatbutton content giving some room and space - make tabbar icon item
renderer arrange content vertical - improve tourdejewel Example/SourceCode tabs
with icons
371f6d4 is described below
commit 371f6d46d7974d0a38a99bd2bd05e06a85e76dc6
Author: Carlos Rovira <[email protected]>
AuthorDate: Mon Apr 22 00:04:48 2019 +0200
jewel-tabbar: latest touches:
- remove restrictIndicatorToContent in favor of an ItemRenderer subclass
- improve tabbatbutton content giving some room and space
- make tabbar icon item renderer arrange content vertical
- improve tourdejewel Example/SourceCode tabs with icons
---
.../ExampleAndSourceCodeTabbedSectionContent.as | 4 +-
.../itemRenderers/TabBarIconItemRenderer.mxml | 15 ++---
.../projects/Jewel/src/main/resources/defaults.css | 3 +-
.../Jewel/src/main/resources/jewel-manifest.xml | 1 +
...tonInidicatorRestrictedToContentItemRenderer.as | 66 ++++++++++++++++++++++
.../itemRenderers/TabBarButtonItemRenderer.as | 49 +++++-----------
.../Jewel/src/main/sass/components/_tabbar.sass | 4 +-
.../JewelTheme/src/main/resources/defaults.css | 8 ++-
.../src/main/sass/components-primary/_tabbar.sass | 12 ++--
9 files changed, 106 insertions(+), 56 deletions(-)
diff --git
a/examples/royale/TourDeJewel/src/main/royale/components/ExampleAndSourceCodeTabbedSectionContent.as
b/examples/royale/TourDeJewel/src/main/royale/components/ExampleAndSourceCodeTabbedSectionContent.as
index 16feafe..f92f1a5 100644
---
a/examples/royale/TourDeJewel/src/main/royale/components/ExampleAndSourceCodeTabbedSectionContent.as
+++
b/examples/royale/TourDeJewel/src/main/royale/components/ExampleAndSourceCodeTabbedSectionContent.as
@@ -83,8 +83,8 @@ package components
private function initCompleteHandler(event:Event):void
{
tabBarNavigation = new ArrayList([
- new TabBarButtonVO("Examples", "exampleTab",
null),
- new TabBarButtonVO("Source Code",
"sourceCodeTab", null)
+ new TabBarButtonVO("Examples", "exampleTab",
MaterialIconType.VIEW_COMPACT),
+ new TabBarButtonVO("Source Code",
"sourceCodeTab", MaterialIconType.CODE)
]);
tabbar = new TabBar();
diff --git
a/examples/royale/TourDeJewel/src/main/royale/itemRenderers/TabBarIconItemRenderer.mxml
b/examples/royale/TourDeJewel/src/main/royale/itemRenderers/TabBarIconItemRenderer.mxml
index 25be2ed..8c8e370 100644
---
a/examples/royale/TourDeJewel/src/main/royale/itemRenderers/TabBarIconItemRenderer.mxml
+++
b/examples/royale/TourDeJewel/src/main/royale/itemRenderers/TabBarIconItemRenderer.mxml
@@ -17,12 +17,11 @@ See the License for the specific language governing
permissions and
limitations under the License.
-->
-<j:TabBarButtonItemRenderer xmlns:fx="http://ns.adobe.com/mxml/2009"
+<j:TabBarButtonInidicatorRestrictedToContentItemRenderer
xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:j="library://ns.apache.org/royale/jewel"
xmlns:js="library://ns.apache.org/royale/basic"
xmlns:html="library://ns.apache.org/royale/html"
- xmlns="http://www.w3.org/1999/xhtml"
- restrictIndicatorToContent="true">
+ xmlns="http://www.w3.org/1999/xhtml">
<fx:Script>
<![CDATA[
@@ -40,9 +39,11 @@ limitations under the License.
<js:ItemRendererDataBinding />
</j:beads>
- <js:FontIcon text="{tabButton ? tabButton.icon : ''}" material="true"
visible="{tabButton ? tabButton.icon != null : false}"/>
+ <j:VGroup itemsHorizontalAlign="itemsCentered">
+ <js:FontIcon text="{tabButton ? tabButton.icon : ''}" material="true"
+ visible="{tabButton ? tabButton.icon != null : false}"/>
+ <html:Span text="{tabButton ? tabButton.label : ''}"/>
+ </j:VGroup>
- <html:Span text="{tabButton ? tabButton.label : ''}"/>
-
-</j:TabBarButtonItemRenderer>
+</j:TabBarButtonInidicatorRestrictedToContentItemRenderer>
diff --git a/frameworks/projects/Jewel/src/main/resources/defaults.css
b/frameworks/projects/Jewel/src/main/resources/defaults.css
index eccb762..69bc93a 100644
--- a/frameworks/projects/Jewel/src/main/resources/defaults.css
+++ b/frameworks/projects/Jewel/src/main/resources/defaults.css
@@ -3510,7 +3510,6 @@ j|TabBar {
}
.jewel.tabbarbutton {
- height: 48px;
padding: 0 24px;
position: relative;
display: flex;
@@ -3520,7 +3519,7 @@ j|TabBar {
z-index: 1;
overflow: initial;
}
-.jewel.tabbarbutton .content {
+.jewel.tabbarbutton > .content {
display: flex;
position: relative;
align-items: center;
diff --git a/frameworks/projects/Jewel/src/main/resources/jewel-manifest.xml
b/frameworks/projects/Jewel/src/main/resources/jewel-manifest.xml
index b57ce26..f0c2e51 100644
--- a/frameworks/projects/Jewel/src/main/resources/jewel-manifest.xml
+++ b/frameworks/projects/Jewel/src/main/resources/jewel-manifest.xml
@@ -88,6 +88,7 @@
<component id="TabBar" class="org.apache.royale.jewel.TabBar"/>
<component id="TabBarButtonItemRenderer"
class="org.apache.royale.jewel.itemRenderers.TabBarButtonItemRenderer"/>
+ <component id="TabBarButtonInidicatorRestrictedToContentItemRenderer"
class="org.apache.royale.jewel.itemRenderers.TabBarButtonInidicatorRestrictedToContentItemRenderer"/>
<component id="TabBarContent"
class="org.apache.royale.jewel.TabBarContent"/>
<component id="Navigation" class="org.apache.royale.jewel.Navigation"/>
<component id="NavigationLinkItemRenderer"
class="org.apache.royale.jewel.itemRenderers.NavigationLinkItemRenderer"/>
diff --git
a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/itemRenderers/TabBarButtonInidicatorRestrictedToContentItemRenderer.as
b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/itemRenderers/TabBarButtonInidicatorRestrictedToContentItemRenderer.as
new file mode 100644
index 0000000..1d37100
--- /dev/null
+++
b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/itemRenderers/TabBarButtonInidicatorRestrictedToContentItemRenderer.as
@@ -0,0 +1,66 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+// Licensed to the Apache Software Foundation (ASF) under one or more
+// contributor license agreements. See the NOTICE file distributed with
+// this work for additional information regarding copyright ownership.
+// The ASF licenses this file to You under the Apache License, Version 2.0
+// (the "License"); you may not use this file except in compliance with
+// the License. You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+//
+////////////////////////////////////////////////////////////////////////////////
+package org.apache.royale.jewel.itemRenderers
+{
+ COMPILE::JS
+ {
+ import org.apache.royale.core.WrappedHTMLElement;
+ import org.apache.royale.html.util.addElementToWrapper;
+ }
+ import org.apache.royale.core.StyledMXMLItemRenderer;
+ import org.apache.royale.events.Event;
+ import org.apache.royale.jewel.supportClasses.INavigationRenderer;
+ import org.apache.royale.jewel.supportClasses.util.getLabelFromData;
+
+ /**
+ * The TabBarButtonInidicatorRestrictedToContentItemRenderer
+ * is a TabBarButtonItemRenderer that restrict indicator to content
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.6
+ */
+ public class TabBarButtonInidicatorRestrictedToContentItemRenderer
extends TabBarButtonItemRenderer
+ {
+ /**
+ * constructor.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.4
+ */
+ public function
TabBarButtonInidicatorRestrictedToContentItemRenderer()
+ {
+ super();
+ }
+
+ /**
+ * adding indicator to positioner makes the indicator fill all
available space
+ * adding to "span" HTMLElement restrict indicator to content.
+ * Override this function in TabBarButtonItemRenderer subclasses
+ */
+ COMPILE::JS
+ override protected function addIndicator():void
+ {
+ span.appendChild(indicator);
+ }
+ }
+}
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 feb4554..e4fa6bd 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
@@ -136,13 +136,13 @@ package org.apache.royale.jewel.itemRenderers
}
COMPILE::JS
- private var span:HTMLSpanElement;
+ protected var span:HTMLSpanElement;
COMPILE::JS
- private var indicator:HTMLSpanElement;
+ protected var indicator:HTMLSpanElement;
COMPILE::JS
- private var indicator_content:HTMLSpanElement;
+ protected var indicator_content:HTMLSpanElement;
/**
* @royaleignorecoercion org.apache.royale.core.WrappedHTMLElement
@@ -157,7 +157,7 @@ package org.apache.royale.jewel.itemRenderers
indicator = document.createElement('span') as
HTMLSpanElement;
indicator.className = "indicator";
- positioner.appendChild(indicator);
+ addIndicator();
indicator_content = document.createElement('span') as
HTMLSpanElement;
indicator_content.className = "indicatorContent";
@@ -174,6 +174,17 @@ package org.apache.royale.jewel.itemRenderers
return element;
}
+ /**
+ * adding indicator to positioner makes the indicator fill all
available space
+ * adding to "span" HTMLElement restrict indicator to content.
+ * Override this function in TabBarButtonItemRenderer subclasses
+ */
+ COMPILE::JS
+ protected function addIndicator():void
+ {
+ positioner.appendChild(indicator);
+ }
+
COMPILE::JS
public function get getBoundingBox():ClientRect
{
@@ -249,35 +260,5 @@ package org.apache.royale.jewel.itemRenderers
toggleClass("selected", selected);
}
}
-
-
- private var _restrictIndicatorToContent:Boolean;
- /**
- * Restrict the indicator to content
- *
- * @langversion 3.0
- * @playerversion Flash 10.2
- * @playerversion AIR 2.6
- * @productversion Royale 0.9.6
- */
- public function get restrictIndicatorToContent():Boolean
- {
- return _restrictIndicatorToContent;
- }
- public function set
restrictIndicatorToContent(value:Boolean):void
- {
- _restrictIndicatorToContent = value;
-
- COMPILE::JS
- {
- if(!_restrictIndicatorToContent && positioner &&
indicator)
- {
- positioner.appendChild(indicator);
- } else if(_restrictIndicatorToContent && span &&
indicator)
- {
- span.appendChild(indicator);
- }
- }
- }
}
}
diff --git a/frameworks/projects/Jewel/src/main/sass/components/_tabbar.sass
b/frameworks/projects/Jewel/src/main/sass/components/_tabbar.sass
index 7a0c6bb..2234c48 100644
--- a/frameworks/projects/Jewel/src/main/sass/components/_tabbar.sass
+++ b/frameworks/projects/Jewel/src/main/sass/components/_tabbar.sass
@@ -61,7 +61,7 @@ $tabbarbutton-margin-height: 48px
// TabBarButtonItemRenderer variables
.jewel
&.tabbarbutton
- height: $tabbarbutton-margin-height
+ // height: $tabbarbutton-margin-height
// min-height: $tabbarbutton-margin-height
// margin: $tabbarbutton-margin
padding: $tabbarbutton-padding
@@ -74,7 +74,7 @@ $tabbarbutton-margin-height: 48px
z-index: 1
overflow: initial
- .content
+ > .content
display: flex
position: relative
align-items: center
diff --git a/frameworks/themes/JewelTheme/src/main/resources/defaults.css
b/frameworks/themes/JewelTheme/src/main/resources/defaults.css
index 1a8d5a4..85b23ef 100644
--- a/frameworks/themes/JewelTheme/src/main/resources/defaults.css
+++ b/frameworks/themes/JewelTheme/src/main/resources/defaults.css
@@ -855,10 +855,11 @@ j|FormItem {
text-decoration: none;
letter-spacing: 0.1em;
font-weight: 600;
- transition: background-color 0.3s ease-in-out;
+ transition: background-color 0.3s ease-in-out, color 0.3s ease-in-out;
}
-.jewel.tabbarbutton.selected, .jewel.tabbarbutton.selectable:active {
- color: #3CADF1;
+.jewel.tabbarbutton > .content {
+ padding-top: 12px;
+ padding-bottom: 12px;
}
.jewel.tabbarbutton .indicator > .indicatorContent {
height: 2px;
@@ -868,6 +869,7 @@ j|FormItem {
background: rgba(60, 173, 241, 0.2);
}
.jewel.tabbarbutton.selected, .jewel.tabbarbutton.selectable:active {
+ color: #0f88d1;
background: rgba(60, 173, 241, 0.4);
}
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 7224daa..68cbe04 100644
--- a/frameworks/themes/JewelTheme/src/main/sass/components-primary/_tabbar.sass
+++ b/frameworks/themes/JewelTheme/src/main/sass/components-primary/_tabbar.sass
@@ -50,13 +50,12 @@
letter-spacing: .1em
font-weight: 600
- transition: background-color .3s ease-in-out
- // .content
- // padding: 0px $itemrenderer-padding
+ transition: background-color .3s ease-in-out, color .3s ease-in-out
+
+ > .content
+ padding-top: 12px
+ padding-bottom: 12px
- &.selected, &.selectable:active
- color: $primary-color
-
.indicator
> .indicatorContent
height: 2px
@@ -73,4 +72,5 @@
&.selected, &.selectable:active
// color: $font-theme-color
+ color: darken($primary-color, 15%)
background: rgba($primary-color, .4)
\ No newline at end of file