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 2018/06/28 23:14:32 UTC
[royale-asjs] branch develop updated: Jewel Drawer component
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 8b9a2d9 Jewel Drawer component
8b9a2d9 is described below
commit 8b9a2d9e8363e78d3f4342ab6b75b032e9a963a1
Author: Carlos Rovira <ca...@apache.org>
AuthorDate: Fri Jun 29 01:14:27 2018 +0200
Jewel Drawer component
---
.../royale/JewelExample/src/main/royale/App.mxml | 2 +-
.../JewelExample/src/main/royale/MainContent.mxml | 19 ++--
.../src/main/royale/models/MainNavigationModel.as | 65 ++++++++++++
.../royale/{App.mxml => vos/NavigationLinkVO.as} | 32 +++---
.../projects/Jewel/src/main/resources/defaults.css | 67 ++++++++++++-
.../Jewel/src/main/resources/jewel-manifest.xml | 2 +
.../royale/jewel/ApplicationResponsiveView.as | 85 ++++++++++++++++
.../main/royale/org/apache/royale/jewel/Drawer.as | 111 +++++++++++++++++++++
.../projects/Jewel/src/main/sass/_global.sass | 15 +++
.../Jewel/src/main/sass/components/_drawer.sass | 80 +++++++++++++++
.../Jewel/src/main/sass/components/_topappbar.sass | 10 +-
.../projects/Jewel/src/main/sass/defaults.sass | 1 +
.../JewelTheme/src/main/resources/defaults.css | 28 +++++-
.../JewelTheme/src/main/sass/_functions.sass | 6 ++
.../src/main/sass/components-primary/_drawer.sass | 58 +++++++++++
.../main/sass/components-primary/_topappbar.sass | 2 +-
.../themes/JewelTheme/src/main/sass/defaults.sass | 1 +
17 files changed, 550 insertions(+), 34 deletions(-)
diff --git a/examples/royale/JewelExample/src/main/royale/App.mxml b/examples/royale/JewelExample/src/main/royale/App.mxml
index f97ea18..dd54061 100644
--- a/examples/royale/JewelExample/src/main/royale/App.mxml
+++ b/examples/royale/JewelExample/src/main/royale/App.mxml
@@ -30,6 +30,6 @@
</j:valuesImpl>
<j:initialView>
- <local:MainContent width="100%"/>
+ <local:MainContent/>
</j:initialView>
</j:Application>
diff --git a/examples/royale/JewelExample/src/main/royale/MainContent.mxml b/examples/royale/JewelExample/src/main/royale/MainContent.mxml
index 6505d02..9b85ab0 100644
--- a/examples/royale/JewelExample/src/main/royale/MainContent.mxml
+++ b/examples/royale/JewelExample/src/main/royale/MainContent.mxml
@@ -17,19 +17,26 @@ See the License for the specific language governing permissions and
limitations under the License.
-->
-<j:View 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:local="*">
+<j:ApplicationResponsiveView 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:models="models.*"
+ xmlns:local="*">
+ <j:model>
+ <models:MainNavigationModel id="mainNavigationModel"/>
+ </j:model>
<j:beads>
<js:ContainerDataBinding/>
</j:beads>
+ <j:Drawer id="drawer">
+ </j:Drawer>
+
<j:TopAppBar id="topappbar" fixed="true">
<j:TopAppBarRow>
<j:TopAppBarSection>
- <j:Button><!-- click="drawer.open = !drawer.open" -->
+ <j:Button click="drawer.open = !drawer.open">
<j:icon>
<js:Icon text="{MaterialIconType.MENU}" material="true"/>
</j:icon>
@@ -75,4 +82,4 @@ limitations under the License.
</j:VGroup>
</j:HGroup>
-</j:View>
+</j:ApplicationResponsiveView>
diff --git a/examples/royale/JewelExample/src/main/royale/models/MainNavigationModel.as b/examples/royale/JewelExample/src/main/royale/models/MainNavigationModel.as
new file mode 100644
index 0000000..abd01d5
--- /dev/null
+++ b/examples/royale/JewelExample/src/main/royale/models/MainNavigationModel.as
@@ -0,0 +1,65 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+// 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 models
+{
+ import org.apache.royale.collections.ArrayList;
+
+ import vos.NavigationLinkVO;
+
+ public class MainNavigationModel
+ {
+ private var _controlsDrawerNavigation:ArrayList = new ArrayList([
+ new NavigationLinkVO("Label", "label_panel"),
+ new NavigationLinkVO("Text", "text_panel"),
+ new NavigationLinkVO("Button", "button_panel"),
+ new NavigationLinkVO("TextInput", "textinput_panel")//,
+ // new NavigationLinkVO("CheckBox", "checkbox_panel"),
+ // new NavigationLinkVO("RadioButton", "radiobutton_panel"),
+ // new NavigationLinkVO("Slider", "slider_panel"),
+ // new NavigationLinkVO("Alert", "alert_panel"),
+ // new NavigationLinkVO("List", "list_panel"),
+ // new NavigationLinkVO("DropDownList", "dropdownlist_panel")
+
+ // new NavigationLinkVO("Menu", "menus_panel"),
+ // new NavigationLinkVO("Loading", "loading_panel"),
+ // new NavigationLinkVO("Snackbar", "snackbar_panel"),
+ // new NavigationLinkVO("Tables", "tables_panel"),
+
+ ]);
+ public function get controlsDrawerNavigation():ArrayList
+ {
+ return _controlsDrawerNavigation;
+ }
+
+ private var _containerDrawerNavigation:ArrayList = new ArrayList([
+ new NavigationLinkVO("Grid", "grid_panel"),
+ new NavigationLinkVO("Card", "card_panel")
+
+ // new NavigationLinkVO("Tabs", "tabs_panel"),
+ // new NavigationLinkVO("Snackbar", "snackbar_panel"),
+ // new NavigationLinkVO("Tables", "tables_panel"),
+
+ ]);
+
+ public function get containerDrawerNavigation():ArrayList
+ {
+ return _containerDrawerNavigation;
+ }
+ }
+}
diff --git a/examples/royale/JewelExample/src/main/royale/App.mxml b/examples/royale/JewelExample/src/main/royale/vos/NavigationLinkVO.as
similarity index 66%
copy from examples/royale/JewelExample/src/main/royale/App.mxml
copy to examples/royale/JewelExample/src/main/royale/vos/NavigationLinkVO.as
index f97ea18..ad5ec82 100644
--- a/examples/royale/JewelExample/src/main/royale/App.mxml
+++ b/examples/royale/JewelExample/src/main/royale/vos/NavigationLinkVO.as
@@ -1,5 +1,4 @@
-<?xml version="1.0" encoding="utf-8"?>
-<!---
+////////////////////////////////////////////////////////////////////////////////
//
// Licensed to the Apache Software Foundation (ASF) under one or more
// contributor license agreements. See the NOTICE file distributed with
@@ -17,19 +16,18 @@
// limitations under the License.
//
////////////////////////////////////////////////////////////////////////////////
--->
-<j:Application 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:local="*">
-
- <fx:Style source="../../main/resources/jewel-example-styles.css"/>
-
- <j:valuesImpl>
- <js:SimpleCSSValuesImpl />
- </j:valuesImpl>
+package vos
+{
+ [Bindable]
+ public class NavigationLinkVO
+ {
+ public var label:String;
+ public var href:String;
- <j:initialView>
- <local:MainContent width="100%"/>
- </j:initialView>
-</j:Application>
+ public function NavigationLinkVO(label:String, href:String)
+ {
+ this.label = label;
+ this.href = href;
+ }
+ }
+}
diff --git a/frameworks/projects/Jewel/src/main/resources/defaults.css b/frameworks/projects/Jewel/src/main/resources/defaults.css
index 83d5ed3..de530ac 100644
--- a/frameworks/projects/Jewel/src/main/resources/defaults.css
+++ b/frameworks/projects/Jewel/src/main/resources/defaults.css
@@ -37,6 +37,22 @@ j|View {
IBeadLayout: ClassReference("org.apache.royale.jewel.beads.layouts.BasicLayout");
}
+j|ApplicationView {
+ IBeadView: ClassReference("org.apache.royale.core.beads.GroupView");
+ IBeadLayout: ClassReference("org.apache.royale.jewel.beads.layouts.VerticalLayout");
+}
+
+.responsive {
+ width: 100%;
+ height: 100%;
+ display: flex;
+ flex-direction: column;
+ overflow-y: auto;
+ overflow-x: hidden;
+ position: relative;
+ -webkit-overflow-scrolling: touch;
+}
+
j|Group {
IBeadView: ClassReference("org.apache.royale.core.beads.GroupView");
}
@@ -210,6 +226,51 @@ j|ControlBar {
IMeasurementBead: ClassReference("org.apache.royale.html.beads.ControlBarMeasurementBead");
}
}
+.jewel.drawer {
+ position: fixed;
+ pointer-events: none;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+ overflow: hidden;
+ contain: strict;
+ z-index: 5;
+}
+.jewel.drawer::before {
+ position: absolute;
+ display: block;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+ content: "";
+ opacity: 0;
+}
+.jewel.drawer .jewel.navigation {
+ position: absolute;
+ display: flex;
+ flex-direction: column;
+ left: 0;
+ right: initial;
+ height: 100%;
+}
+.jewel.drawer.open {
+ pointer-events: auto;
+}
+.jewel.drawer.open::before {
+ opacity: 1;
+}
+
+@media (min-width: 768px) {
+ .jewel.drawer .jewel.navigation {
+ width: calc(100% - 60px);
+ max-width: 310px;
+ }
+}
+.remove-app-scroll {
+ overflow: hidden;
+}
@media -royale-swf {
j|DropDownList {
IBeadModel: ClassReference("org.apache.royale.core.beads.models.ArraySelectionModel");
@@ -2566,13 +2627,13 @@ j|TitleBar {
width: 100%;
z-index: 4;
}
-.jewel.topappbar + div {
- padding-top: 64px;
-}
.jewel.topappbar.fixed {
position: fixed;
top: 0px;
}
+.jewel.topappbar.fixed + div {
+ padding-top: 64px;
+}
.jewel.topappbarrow {
display: flex;
diff --git a/frameworks/projects/Jewel/src/main/resources/jewel-manifest.xml b/frameworks/projects/Jewel/src/main/resources/jewel-manifest.xml
index ad8aff7..e5da62e 100644
--- a/frameworks/projects/Jewel/src/main/resources/jewel-manifest.xml
+++ b/frameworks/projects/Jewel/src/main/resources/jewel-manifest.xml
@@ -43,10 +43,12 @@
<component id="List" class="org.apache.royale.jewel.List"/>
<component id="DropDownList" class="org.apache.royale.jewel.DropDownList"/>
+ <component id="ApplicationResponsiveView" class="org.apache.royale.jewel.ApplicationResponsiveView"/>
<component id="TopAppBar" class="org.apache.royale.jewel.TopAppBar"/>
<component id="TopAppBarRow" class="org.apache.royale.jewel.TopAppBarRow"/>
<component id="TopAppBarSection" class="org.apache.royale.jewel.TopAppBarSection"/>
<component id="TopAppBarTitle" class="org.apache.royale.jewel.TopAppBarTitle"/>
+ <component id="Drawer" class="org.apache.royale.jewel.Drawer"/>
<component id="Card" class="org.apache.royale.jewel.Card"/>
<component id="DropDownListList" class="org.apache.royale.jewel.supportClasses.DropDownListList"/>
diff --git a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/ApplicationResponsiveView.as b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/ApplicationResponsiveView.as
new file mode 100644
index 0000000..80e3f30
--- /dev/null
+++ b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/ApplicationResponsiveView.as
@@ -0,0 +1,85 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+// 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
+{
+ import org.apache.royale.core.IApplicationView;
+ import org.apache.royale.events.Event;
+ import org.apache.royale.jewel.beads.layouts.VerticalLayout;
+
+ COMPILE::JS
+ {
+ import org.apache.royale.core.WrappedHTMLElement;
+ }
+
+ /**
+ * The ApplicationResponsiveView class is the main Container component capable of parenting other
+ * components in an Application
+ * It normaly can host a TopAppBar, a Drawer and a Container with other organized content for
+ * navigation
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.3
+ */
+ public class ApplicationResponsiveView extends Group implements IApplicationView
+ {
+ /**
+ * constructor.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.3
+ */
+ public function ApplicationResponsiveView()
+ {
+ super();
+
+ typeNames = "" + VerticalLayout.LAYOUT_TYPE_NAMES;
+ }
+
+ private var _applicationModel:Object;
+
+ [Bindable("modelChanged")]
+ /**
+ * A reference to the Application's model. Usually,
+ * a view is displaying the main model for an
+ * application.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.3
+ */
+ public function get applicationModel():Object
+ {
+ return _applicationModel;
+ }
+
+ /**
+ * @private
+ */
+ public function set applicationModel(value:Object):void
+ {
+ _applicationModel = value;
+ dispatchEvent(new Event("modelChanged"));
+ }
+ }
+}
diff --git a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/Drawer.as b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/Drawer.as
new file mode 100644
index 0000000..769aa3b
--- /dev/null
+++ b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/Drawer.as
@@ -0,0 +1,111 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+// 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
+{
+ import org.apache.royale.events.MouseEvent;
+ import org.apache.royale.core.UIBase;
+
+ COMPILE::JS
+ {
+ import org.apache.royale.core.WrappedHTMLElement;
+ import org.apache.royale.html.util.addElementToWrapper;
+ }
+
+ /**
+ * The Drawer class is a container component used for navigation
+ * can be opened with the menu icon on any screen size.
+ * If fixed could serve as sidebar navigation on larger screens.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.3
+ */
+ public class Drawer extends Group
+ {
+ /**
+ * constructor.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.3
+ */
+ public function Drawer()
+ {
+ super();
+
+ typeNames = "jewel drawer";
+
+ addEventListener(org.apache.royale.events.MouseEvent.CLICK, internalMouseHandler);
+ }
+
+ private function internalMouseHandler(event:org.apache.royale.events.MouseEvent) : void
+ {
+ COMPILE::JS
+ {
+ var hostComponent:UIBase = event.target as UIBase;
+ var hostClassList:DOMTokenList = hostComponent.positioner.classList;
+ if (hostClassList.contains("drawer"))
+ {
+ open = false;
+ //dispatchEvent(new Event("closeDrawer"));
+ }
+ }
+ }
+
+ private var _open:Boolean;
+ /**
+ * Open or close the drawer
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.3
+ */
+ public function get open():Boolean
+ {
+ return _open;
+ }
+
+ public function set open(value:Boolean):void
+ {
+ if (_open != value)
+ {
+ _open = value;
+
+ toggleClass("open", _open);
+
+ COMPILE::JS
+ {//avoid scroll in html
+ document.body.classList.toggle("remove-app-scroll", _open);
+ }
+ }
+ }
+
+ /**
+ * @royaleignorecoercion org.apache.royale.core.WrappedHTMLElement
+ */
+ COMPILE::JS
+ override protected function createElement():WrappedHTMLElement
+ {
+ return addElementToWrapper(this,'aside');
+ }
+ }
+}
diff --git a/frameworks/projects/Jewel/src/main/sass/_global.sass b/frameworks/projects/Jewel/src/main/sass/_global.sass
index d98214e..a8132bb 100644
--- a/frameworks/projects/Jewel/src/main/sass/_global.sass
+++ b/frameworks/projects/Jewel/src/main/sass/_global.sass
@@ -39,6 +39,21 @@ j|View
IBeadView: ClassReference("org.apache.royale.core.beads.GroupView")
IBeadLayout: ClassReference("org.apache.royale.jewel.beads.layouts.BasicLayout")
+j|ApplicationView
+ IBeadView: ClassReference("org.apache.royale.core.beads.GroupView")
+ IBeadLayout: ClassReference("org.apache.royale.jewel.beads.layouts.VerticalLayout")
+ // IBeadLayout: ClassReference("org.apache.royale.jewel.beads.layouts.BasicLayout")
+
+.responsive
+ width: 100%
+ height: 100%
+ display: flex
+ flex-direction: column
+ overflow-y: auto
+ overflow-x: hidden
+ position: relative
+ -webkit-overflow-scrolling: touch
+
j|Group
IBeadView: ClassReference("org.apache.royale.core.beads.GroupView")
diff --git a/frameworks/projects/Jewel/src/main/sass/components/_drawer.sass b/frameworks/projects/Jewel/src/main/sass/components/_drawer.sass
new file mode 100644
index 0000000..d915921
--- /dev/null
+++ b/frameworks/projects/Jewel/src/main/sass/components/_drawer.sass
@@ -0,0 +1,80 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+// 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.
+//
+////////////////////////////////////////////////////////////////////////////////
+
+// Jewel Drawer
+
+// Drawer variables
+$drawer-width-offset: 60px
+$drawer-max-width: 310px
+
+.jewel.drawer
+ position: fixed
+ pointer-events: none
+
+ top: 0
+ left: 0
+
+ width: 100%
+ height: 100%
+
+ overflow: hidden
+ contain: strict
+
+ z-index: 5
+
+ &::before
+ position: absolute
+ display: block
+
+ top: 0
+ left: 0
+
+ width: 100%
+ height: 100%
+
+ content: ""
+ opacity: 0
+
+ & .jewel.navigation
+ position: absolute
+
+ display: flex
+ flex-direction: column
+
+ left: 0
+ right: initial
+
+ height: 100%
+
+ &.open
+ pointer-events: auto
+
+ &::before
+ opacity: 1
+
+@media (min-width: $tablet)
+ .jewel.drawer
+ & .jewel.navigation
+ width: calc(100% - #{$drawer-width-offset})
+ max-width: $drawer-max-width
+
+.remove-app-scroll
+ overflow: hidden
+
+j|Drawer
\ No newline at end of file
diff --git a/frameworks/projects/Jewel/src/main/sass/components/_topappbar.sass b/frameworks/projects/Jewel/src/main/sass/components/_topappbar.sass
index 6d44757..3612041 100644
--- a/frameworks/projects/Jewel/src/main/sass/components/_topappbar.sass
+++ b/frameworks/projects/Jewel/src/main/sass/components/_topappbar.sass
@@ -29,15 +29,15 @@ $top-app-bar-button-size: 48px
justify-content: space-between
width: 100%
z-index: 4
-
- // this adjust the container declared after TopAppBar and with only one row (most common case)
- + div
- padding-top: $top-app-bar-row-height
-
+
&.fixed
position: fixed
top: 0px
+ // this adjust the container declared after TopAppBar and with only one row (most common case)
+ + div
+ padding-top: $top-app-bar-row-height
+
.jewel.topappbarrow
display: flex
position: relative
diff --git a/frameworks/projects/Jewel/src/main/sass/defaults.sass b/frameworks/projects/Jewel/src/main/sass/defaults.sass
index 8e13d04..6f041e1 100644
--- a/frameworks/projects/Jewel/src/main/sass/defaults.sass
+++ b/frameworks/projects/Jewel/src/main/sass/defaults.sass
@@ -28,6 +28,7 @@
@import "components/card"
@import "components/checkbox"
@import "components/controlbar"
+@import "components/drawer"
@import "components/dropdownlist"
@import "components/itemRenderer"
@import "components/label"
diff --git a/frameworks/themes/JewelTheme/src/main/resources/defaults.css b/frameworks/themes/JewelTheme/src/main/resources/defaults.css
index 911d4c1..8b43f4f 100644
--- a/frameworks/themes/JewelTheme/src/main/resources/defaults.css
+++ b/frameworks/themes/JewelTheme/src/main/resources/defaults.css
@@ -229,6 +229,32 @@ j|Card {
font-size: 16px;
}
+.jewel.drawer {
+ color: rgba(0, 0, 0, 0.8);
+}
+.jewel.drawer::before {
+ background-color: rgba(0, 0, 0, 0.65);
+ will-change: opacity;
+ transition: opacity 0.4s 0ms;
+}
+.jewel.drawer .jewel.navigation {
+ border-right: 1px solid #a6a6a6;
+ box-shadow: 0px 0px 6px 1px rgba(1, 1, 1, 0.7);
+ transform: translateX(-104%);
+ will-change: transform;
+ width: calc(100% - 54px);
+ max-width: 280px;
+ background-color: #d9d9d9;
+ transition: transform 250ms 0ms;
+}
+.jewel.drawer.open .jewel.navigation {
+ transform: none;
+ transition: transform 300ms 0ms;
+}
+.jewel.drawer > * {
+ padding-left: 40px;
+}
+
.jewel.dropdownlist {
cursor: pointer;
display: inline-block;
@@ -474,7 +500,7 @@ j|Card {
background: linear-gradient(#54b7f3, #24a3ef);
border-top: 1px solid #83cbf6;
border-bottom: 1px solid #0d79ba;
- box-shadow: 0px 0px 4px 1px rgba(1, 1, 1, 0.7);
+ box-shadow: 0px 0px 6px 1px rgba(1, 1, 1, 0.7);
color: #FFFFFF;
text-shadow: 0 -1px 0 rgba(10, 90, 138, 0.7);
}
diff --git a/frameworks/themes/JewelTheme/src/main/sass/_functions.sass b/frameworks/themes/JewelTheme/src/main/sass/_functions.sass
index 51ddb3d..6a27771 100644
--- a/frameworks/themes/JewelTheme/src/main/sass/_functions.sass
+++ b/frameworks/themes/JewelTheme/src/main/sass/_functions.sass
@@ -39,3 +39,9 @@
@if $index
@return str-slice($string, 1, $index - 1) + $replace + replace-text(str-slice($string, $index + str-length($search)), $search, $replace)
@return $string
+
+
+//$animation-curve-timing-function: cubic-bezier(.3, 0, .1, 2) !default
+@function animation-standard($name, $duration, $delay: 0ms)
+ @return $name $duration $delay //$animation-curve-timing-function
+
diff --git a/frameworks/themes/JewelTheme/src/main/sass/components-primary/_drawer.sass b/frameworks/themes/JewelTheme/src/main/sass/components-primary/_drawer.sass
new file mode 100644
index 0000000..2a1a63f
--- /dev/null
+++ b/frameworks/themes/JewelTheme/src/main/sass/components-primary/_drawer.sass
@@ -0,0 +1,58 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+// 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.
+//
+////////////////////////////////////////////////////////////////////////////////
+
+$drawer-width-offset: 54px
+$drawer-max-width: 280px
+$drawer-padding-left: 40px
+$drawer-transition-close-time: 250ms
+$drawer-transition-open-time: 300ms
+$drawer-transition-close: animation-standard(transform, $drawer-transition-close-time)
+$drawer-transition-open: animation-standard(transform, $drawer-transition-open-time)
+$drawer-overlay-color: #000 !default
+$drawer-overlay-opacity: .65 !default
+
+.jewel.drawer
+ color: rgba(0, 0, 0, 0.8)
+
+ &::before
+ background-color: rgba($drawer-overlay-color, $drawer-overlay-opacity)
+ will-change: opacity
+ transition: animation-standard(opacity, .4s)
+
+ & .jewel.navigation
+ border-right: 1px solid darken($default-color, 20%)
+ box-shadow: 0px 0px 6px 1px rgba(.7, .7, .7, .7)
+ transform: translateX(-104%)
+ will-change: transform
+ width: calc(100% - #{$drawer-width-offset})
+ max-width: $drawer-max-width
+ background-color: $default-color
+ transition: $drawer-transition-close
+
+ &.open
+
+ & .jewel.navigation
+ transform: none
+ transition: $drawer-transition-open
+
+ > *
+ padding-left: $drawer-padding-left
+
+
+j|Drawer
\ No newline at end of file
diff --git a/frameworks/themes/JewelTheme/src/main/sass/components-primary/_topappbar.sass b/frameworks/themes/JewelTheme/src/main/sass/components-primary/_topappbar.sass
index b508c39..27fbe11 100644
--- a/frameworks/themes/JewelTheme/src/main/sass/components-primary/_topappbar.sass
+++ b/frameworks/themes/JewelTheme/src/main/sass/components-primary/_topappbar.sass
@@ -34,7 +34,7 @@ $top-app-bar-button-padding: 12px
background: linear-gradient(lighten($primary-color, 5%), darken($primary-color, 5%))
border-top: 1px solid lighten($primary-color, 15%)
border-bottom: 1px solid darken($primary-color, 20%)
- box-shadow: 0px 0px 4px 1px rgba(.7, .7, .7, .7)
+ box-shadow: 0px 0px 6px 1px rgba(.7, .7, .7, .7)
color: $font-theme-color
diff --git a/frameworks/themes/JewelTheme/src/main/sass/defaults.sass b/frameworks/themes/JewelTheme/src/main/sass/defaults.sass
index e64786e..73d24f3 100644
--- a/frameworks/themes/JewelTheme/src/main/sass/defaults.sass
+++ b/frameworks/themes/JewelTheme/src/main/sass/defaults.sass
@@ -31,6 +31,7 @@
@import "components-primary/card"
@import "components-primary/checkbox"
@import "components-primary/controlbar"
+@import "components-primary/drawer"
@import "components-primary/dropdownlist"
@import "components-primary/itemRenderer"
@import "components-primary/label"