You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@myfaces.apache.org by hn...@apache.org on 2023/12/11 08:43:59 UTC
(myfaces-tobago) branch main updated: feature(demo): small and mobile menu
This is an automated email from the ASF dual-hosted git repository.
hnoeth pushed a commit to branch main
in repository https://gitbox.apache.org/repos/asf/myfaces-tobago.git
The following commit(s) were added to refs/heads/main by this push:
new 3982229efa feature(demo): small and mobile menu
3982229efa is described below
commit 3982229efa0ecf9245be15ee66ea2cd09228d448
Author: Tino <ti...@irian.eu>
AuthorDate: Wed Nov 29 10:42:59 2023 +0100
feature(demo): small and mobile menu
* display a mobile optimized menu on small and mobile devices
---
.../tobago-example-demo/src/main/scss/demo.scss | 9 +++++++
.../tobago-example-demo/src/main/webapp/main.xhtml | 31 ++++++++++++++++++++--
.../src/main/webapp/navigation.xhtml | 7 +++--
3 files changed, 41 insertions(+), 6 deletions(-)
diff --git a/tobago-example/tobago-example-demo/src/main/scss/demo.scss b/tobago-example/tobago-example-demo/src/main/scss/demo.scss
index eefe47e184..54079723a1 100644
--- a/tobago-example/tobago-example-demo/src/main/scss/demo.scss
+++ b/tobago-example/tobago-example-demo/src/main/scss/demo.scss
@@ -15,6 +15,15 @@
* limitations under the License.
*/
+.hide-navigation{
+ display: none;
+}
+
+.navigation-box{
+ --bs-card-border-radius: 0;
+ border: none;
+}
+
.box-shadow {
box-shadow: 0 0 5px 5px rgba(200, 200, 200, 0.5);
}
diff --git a/tobago-example/tobago-example-demo/src/main/webapp/main.xhtml b/tobago-example/tobago-example-demo/src/main/webapp/main.xhtml
index 007e82ffc9..bdc5dec0b7 100644
--- a/tobago-example/tobago-example-demo/src/main/webapp/main.xhtml
+++ b/tobago-example/tobago-example-demo/src/main/webapp/main.xhtml
@@ -52,13 +52,40 @@
<ui:include src="/menu.xhtml"/>
+ <tc:box label="Menu" id="small-view-menu" collapsed="true" collapsedMode="hidden">
+ <f:facet name="bar">
+ <tc:buttons>
+ <tc:button id="show-menu" image="bi-arrow-bar-down" omit="true">
+ <tc:operation name="show" for="small-view-menu"/>
+ </tc:button>
+ <tc:button id="hide-menu" image="bi-arrow-bar-up" omit="true">
+ <tc:operation name="hide" for="small-view-menu"/>
+ </tc:button>
+ </tc:buttons>
+ </f:facet>
+ <tc:style customClass="scrollableBox d-block d-lg-none navigation-box"/>
+ <tc:style overflowY="scroll" height="20rem" selector=".scrollableBox .card-body"/>
+ <tc:panel id="clientPanel" collapsedMode="hidden">
+ <ui:include src="/navigation.xhtml">
+ <ui:param name="navigationName" value="navigation-small"/>
+ <ui:param name="navigationId" value="nav-small"/>
+ <ui:param name="linkId" value="cmd-small"/>
+ </ui:include>
+ </tc:panel>
+ </tc:box>
+
<tc:panel>
<tc:style customClass="#{navigationState.viewSource ? '' : 'container-lg'}"/>
- <tc:segmentLayout small="4seg 8seg" medium="3seg 9seg" large="2seg 10seg">
+ <tc:segmentLayout large="2seg 10seg">
<f:event type="preRenderView" listener="#{navigationState.sync}"/>
<tc:panel>
- <ui:include src="/navigation.xhtml"/>
+ <tc:style customClass="d-lg-block hide-navigation"/>
+ <ui:include src="/navigation.xhtml">
+ <ui:param name="navigationName" value="navigation"/>
+ <ui:param name="navigationId" value="nav"/>
+ <ui:param name="linkId" value="cmd"/>
+ </ui:include>
</tc:panel>
<tc:splitLayout columns="1fr">
diff --git a/tobago-example/tobago-example-demo/src/main/webapp/navigation.xhtml b/tobago-example/tobago-example-demo/src/main/webapp/navigation.xhtml
index 3c9d42cbea..bb1791fac7 100644
--- a/tobago-example/tobago-example-demo/src/main/webapp/navigation.xhtml
+++ b/tobago-example/tobago-example-demo/src/main/webapp/navigation.xhtml
@@ -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,13 +16,13 @@
* limitations under the License.
-->
-<f:subview id="navigator"
+<f:subview id="#{navigationName}"
xmlns:f="jakarta.faces.core"
xmlns:tc="http://myfaces.apache.org/tobago/component">
- <tc:tree id="nav" value="#{navigationTree.tree}" var="node" state="#{navigationState.state}">
+ <tc:tree id="#{navigationId}" value="#{navigationTree.tree}" var="node" state="#{navigationState.state}">
<tc:treeNode id="node">
<tc:link
- id="cmd"
+ id="#{linkId}"
label="» #{node.label}"
outcome="#{node.outcome}"/>
</tc:treeNode>