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 d4b0969 jewel-drawer: New DrawerFooter component
d4b0969 is described below
commit d4b096983b6d951abc766d2c127b11c77bbd73a4
Author: Carlos Rovira <[email protected]>
AuthorDate: Mon Feb 17 21:54:12 2020 +0100
jewel-drawer: New DrawerFooter component
---
.../projects/Jewel/src/main/resources/defaults.css | 7 +++
.../Jewel/src/main/resources/jewel-manifest.xml | 1 +
.../jewel/supportClasses/drawer/DrawerFooter.as | 52 ++++++++++++++++++++++
.../Jewel/src/main/sass/components/_drawer.sass | 8 ++++
.../JewelTheme/src/main/resources/defaults.css | 30 +++++++++++++
.../src/main/sass/components-primary/_drawer.sass | 51 ++++++++++++++++++++-
6 files changed, 148 insertions(+), 1 deletion(-)
diff --git a/frameworks/projects/Jewel/src/main/resources/defaults.css
b/frameworks/projects/Jewel/src/main/resources/defaults.css
index 7adba5d..2e72257 100644
--- a/frameworks/projects/Jewel/src/main/resources/defaults.css
+++ b/frameworks/projects/Jewel/src/main/resources/defaults.css
@@ -777,6 +777,13 @@ j|Divider {
touch-action: pan-y;
}
+.jewel.drawerfooter {
+ display: flex;
+ position: relative;
+ width: 100%;
+ height: 66px;
+}
+
j|DrawerBase {
IBeadLayout:
ClassReference("org.apache.royale.jewel.beads.layouts.NullLayout");
}
diff --git a/frameworks/projects/Jewel/src/main/resources/jewel-manifest.xml
b/frameworks/projects/Jewel/src/main/resources/jewel-manifest.xml
index e5e11b7..4df1ef8 100644
--- a/frameworks/projects/Jewel/src/main/resources/jewel-manifest.xml
+++ b/frameworks/projects/Jewel/src/main/resources/jewel-manifest.xml
@@ -135,6 +135,7 @@
<component id="Drawer" class="org.apache.royale.jewel.Drawer"/>
<component id="DrawerHeader"
class="org.apache.royale.jewel.supportClasses.drawer.DrawerHeader"/>
<component id="DrawerContent"
class="org.apache.royale.jewel.supportClasses.drawer.DrawerContent"/>
+ <component id="DrawerFooter"
class="org.apache.royale.jewel.supportClasses.drawer.DrawerFooter"/>
<component id="HideDrawerOnMouseDown"
class="org.apache.royale.jewel.beads.controls.drawer.HideDrawerOnMouseDown"/>
diff --git
a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/supportClasses/drawer/DrawerFooter.as
b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/supportClasses/drawer/DrawerFooter.as
new file mode 100644
index 0000000..7bcc4d3
--- /dev/null
+++
b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/supportClasses/drawer/DrawerFooter.as
@@ -0,0 +1,52 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+// 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.supportClasses.drawer
+{
+ import org.apache.royale.jewel.supportClasses.bar.BarRow;
+
+ /**
+ * The DrawerFooter class is a Bar component to use as the last
content in a Drawer.
+ * for different items like
+ * a title, navigation icon, and/or icon buttons.
+ * Normaly is located at the top or bottom of a container and use to
fill all
+ * horizontal availale space. It's responsive as screen size changes
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.7
+ */
+ public class DrawerFooter extends BarRow
+ {
+ /**
+ * constructor.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.7
+ */
+ public function DrawerFooter()
+ {
+ super();
+
+ typeNames = "jewel drawerfooter"
+ }
+ }
+}
diff --git a/frameworks/projects/Jewel/src/main/sass/components/_drawer.sass
b/frameworks/projects/Jewel/src/main/sass/components/_drawer.sass
index 985108c..ebfec06 100644
--- a/frameworks/projects/Jewel/src/main/sass/components/_drawer.sass
+++ b/frameworks/projects/Jewel/src/main/sass/components/_drawer.sass
@@ -22,6 +22,7 @@
// Drawer variables
$drawer-float-width-offset: 60px
$drawer-float-max-width: 310px
+$drawerfooter-bar-row-height: 66px
.jewel.drawer
@@ -124,6 +125,11 @@ $drawer-float-max-width: 310px
-webkit-overflow-scrolling: touch //Momentum (innercial) Scrolling on iOS
touch-action: pan-y
+.jewel.drawerfooter
+ display: flex
+ position: relative
+ width: 100%
+ height: $drawerfooter-bar-row-height
j|DrawerBase
@@ -137,3 +143,5 @@ j|DrawerHeader
j|DrawerContent
IBeadLayout:
ClassReference("org.apache.royale.jewel.beads.layouts.NullLayout")
+
+j|DrawerFooter
\ No newline at end of file
diff --git a/frameworks/themes/JewelTheme/src/main/resources/defaults.css
b/frameworks/themes/JewelTheme/src/main/resources/defaults.css
index 2df61a5..6cf1946 100644
--- a/frameworks/themes/JewelTheme/src/main/resources/defaults.css
+++ b/frameworks/themes/JewelTheme/src/main/resources/defaults.css
@@ -515,6 +515,36 @@ j|Card {
padding: 16px;
}
+.jewel.drawerfooter {
+ background: linear-gradient(#404040, #262626);
+ border-top: 1px solid #595959;
+ border-bottom: 1px solid black;
+ color: #FFFFFF;
+ text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.7);
+}
+.jewel.drawerfooter .jewel.barsection {
+ padding: 8px 12px;
+}
+.jewel.drawerfooter .jewel.barsection button {
+ background: transparent;
+ box-shadow: none;
+ border: none;
+ padding: 12px;
+ fill: #FFFFFF;
+ color: inherit;
+ text-shadow: 0 -1px 0 rgba(10, 90, 138, 0.7);
+}
+.jewel.drawerfooter .jewel.barsection button:hover, .jewel.drawerfooter
.jewel.barsection button:hover:focus, .jewel.drawerfooter .jewel.barsection
button:active, .jewel.drawerfooter .jewel.barsection button:active:focus,
.jewel.drawerfooter .jewel.barsection button:focus {
+ background: transparent;
+ box-shadow: none;
+ border: none;
+}
+.jewel.drawerfooter .jewel.barsection button[disabled] {
+ background: transparent;
+ box-shadow: none;
+ border: none;
+}
+
.jewel.dropdownlist {
background-color: white;
border: 1px solid #b3b3b3;
diff --git
a/frameworks/themes/JewelTheme/src/main/sass/components-primary/_drawer.sass
b/frameworks/themes/JewelTheme/src/main/sass/components-primary/_drawer.sass
index 4270818..3d67417 100644
--- a/frameworks/themes/JewelTheme/src/main/sass/components-primary/_drawer.sass
+++ b/frameworks/themes/JewelTheme/src/main/sass/components-primary/_drawer.sass
@@ -97,10 +97,59 @@ $drawer-fixed-width: 240px
// DrawerContent
.jewel.drawercontent
+// DrawerFooter
+$drawerfooter-bar-section-vertical-padding: 8px
+$drawerfooter-bar-section-horizontal-padding: 12px
+$drawerfooter-bar-button-padding: 12px
+
+.jewel.drawerfooter
+ @if $flat
+ background: $footer-color
+ border: 0px solid
+ @else
+ background: linear-gradient(lighten($footer-color, 5%),
darken($footer-color, 5%))
+ border-top: 1px solid lighten($footer-color, 15%)
+ border-bottom: 1px solid darken($footer-color, 20%)
+ // box-shadow: 0px 0px 6px 1px rgba(.7, .7, .7, .7)
+
+ color: $font-theme-color
+
+ @if not $flat //and $text-color == $font-theme-color
+ text-shadow: 0 -1px 0 rgba(darken($footer-color, 30%), .7)
+ @else
+ text-shadow: none
+
+ .jewel.barsection
+ padding: $drawerfooter-bar-section-vertical-padding
$drawerfooter-bar-section-horizontal-padding
+
+ button
+ background: transparent
+ box-shadow: none
+ border: none
+ padding: $drawerfooter-bar-button-padding
+ fill: $font-theme-color
+ color: inherit
+
+ @if not $flat //and $text-color == $font-theme-color
+ text-shadow: 0 -1px 0 rgba(darken($primary-color, 30%), .7)
+ @else
+ text-shadow: none
+
+ &:hover, &:hover:focus, &:active, &:active:focus, &:focus
+ background: transparent
+ box-shadow: none
+ border: none
+
+ &[disabled]
+ background: transparent
+ box-shadow: none
+ border: none
j|Drawer
j|DrawerHeader
-j|DrawerContent
\ No newline at end of file
+j|DrawerContent
+
+j|DrawerFooter
\ No newline at end of file
