Add panel menus (CFM-174)

COmanage · Jun 23, 2022 · 573dfdd · 573dfdd
1 parent c3c8b08
commit 573dfdd
Show file tree

Hide file tree

Showing 6 changed files with 209 additions and 11 deletions.
diff --git a/app/resources/locales/en_US/menu.po b/app/resources/locales/en_US/menu.po
@@ -30,6 +30,12 @@ msgstr "Config"
 msgid "co.connections"
 msgstr "Connections"
 
+msgid "co.external.source.records"
+msgstr "External Source Records"
+
+msgid "co.external.source.records.desc"
+msgstr "See and manage information from your external sources"
+
 msgid "co.lifecycle"
 msgstr "Lifecycle"
 
@@ -42,8 +48,27 @@ msgstr "Groups"
 msgid "co.people"
 msgstr "People"
 
+msgid "co.people.panel.title"
+msgstr "People"
+
+msgid "co.people.panel.desc"
+msgstr "COmanage Registry is a registry for people. This section contains the basic building blocks for modeling and  managing people in COmanage."
+
+msgid "co.pending.enrollments"
+msgstr "Pending Enrollments"
+
+msgid "co.pending.enrollments.desc"
+msgstr "See and manage in-progress enrollments (CO Petitions)"
+
+msgid "co.population"
+msgstr "My Population"
+
+msgid "co.population.desc"
+msgstr "Review and manage people in your collaboration (CO Person Records)"
+
 msgid "co.structure"
 msgstr "Structure"
 
 msgid "co.switch"
 msgstr "Switch CO"
+
diff --git a/app/templates/element/javascript.php b/app/templates/element/javascript.php
@@ -40,6 +40,15 @@
     $('#co-hamburger').click(function() {
       $('#navigation-drawer').toggleClass('visible');
     });
+
+    $('.menu-panel-toggle').click(function() {
+      $(this).next('.menu-panel').toggleClass('visible');  
+    });
+
+    $('.menu-panel-close').click(function() {
+      $(this).closest('.menu-panel').removeClass('visible');
+    });
+
     // END DESKTOP MENU DRAWER BEHAVIOR
 
     // GLOBAL SEARCH

diff --git a/app/templates/element/menuMain.php b/app/templates/element/menuMain.php
@@ -43,7 +43,8 @@
               'action'     => 'index',
               'icon'       => 'person',
               'dropdown'   => 'true',
-              'label'      => __d('menu', 'co.people')
+              'label'      => __d('menu', 'co.people') //,
+              //'panel'      => 'people' // XXX Uncomment this panel setting to enable panel menus
             ],
             [
               'permission' => 'groups',
@@ -92,16 +93,25 @@
                 . '<span class="menu-title">' . $m['label'] . '</span>';
 
               print '<li>';
-              print $this->Html->link(
-                    $linkContent,
-                    ['plugin'       => null,
-                     'controller'   => $m['controller'],
-                     'action'       => $m['action'],
-                     '?'            => [
-                       'co_id' => $vv_cur_co->id
-                     ]],
-                    ['escape' => false, 'title' => $m['label']]
-                  );
+              if(empty($m['panel'])) {
+                print $this->Html->link(
+                  $linkContent,
+                  ['plugin'       => null,
+                   'controller'   => $m['controller'],
+                   'action'       => $m['action'],
+                   '?'            => [
+                     'co_id' => $vv_cur_co->id
+                   ]],
+                  ['escape' => false, 'title' => $m['label']]
+                );  
+              } else {
+                // include the menu panel
+                print $this->Html->link(
+                  $linkContent, '#',
+                  ['escape' => false, 'title' => $m['label'], 'class' => 'menu-panel-toggle nospin']
+                );
+                print $this->element('menuPanel', ['panel' => $m['panel']]);
+              }
               print '</li>';
             }
           }

diff --git a/app/templates/element/menuPanel.php b/app/templates/element/menuPanel.php
@@ -0,0 +1,96 @@
+<?php
+/*
+ * COmanage Registry Main Menu Panels
+ *
+ * Portions licensed to the University Corporation for Advanced Internet
+ * Development, Inc. ("UCAID") under one or more contributor license agreements.
+ * See the NOTICE file distributed with this work for additional information
+ * regarding copyright ownership.
+ *
+ * UCAID 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.
+ *
+ * @link          https://www.internet2.edu/comanage COmanage Project
+ * @package       registry
+ * @since         COmanage Registry v5.0.0
+ * @license       Apache License, Version 2.0 (http://www.apache.org/licenses/LICENSE-2.0)
+ */
+?>
+<div class="menu-panel">
+  <?php if($panel == 'people'): ?>
+    <h2><?= __d('menu','co.people.panel.title') ?></h2>
+    <p><?= __d('menu','co.people.panel.desc') ?></p>
+    <div class="menu-panel-content">
+      <ul class="menu-panel-links">
+        <li>
+          <?php
+          $menuUrl = $this->Url->build(
+            ['plugin'       => null,
+             'controller'   => 'people',
+             'action'       => 'index',
+             '?'            => [
+               'co_id' => $vv_cur_co->id
+             ]]
+          );
+          ?>
+          <a href="<?= $menuUrl ?>" class="menu-panel-primary-link">
+            <div class="menu-panel-primary-link-text">
+              <h3><?= __d('menu','co.population') ?></h3>
+              <div class="menu-panel-link-desc"><?= __d('menu','co.population.desc') ?></div>
+            </div>
+          </a>
+        </li>
+        <?php /* XXX Enable menu items as needed; plugins should fall below these */
+        /*
+        <li>
+          <?php
+          $menuUrl = $this->Url->build(
+            ['plugin'       => null,
+             'controller'   => 'people',
+             'action'       => 'index',
+             '?'            => [
+               'co_id' => $vv_cur_co->id
+             ]]
+          );
+          ?>
+          <a href="<?= $menuUrl ?>" class="menu-panel-primary-link">
+            <div class="menu-panel-primary-link-text">
+              <h3><?= __d('menu','co.pending.enrollments') ?></h3>
+              <div class="menu-panel-link-desc"><?= __d('menu','co.pending.enrollments.desc') ?></div>
+            </div>
+          </a>
+        </li>
+        <li>
+          <?php
+          $menuUrl = $this->Url->build(
+            ['plugin'       => null,
+             'controller'   => 'people',
+             'action'       => 'index',
+             '?'            => [
+               'co_id' => $vv_cur_co->id
+             ]]
+          );
+          ?>
+          <a href="<?= $menuUrl ?>" class="menu-panel-primary-link">
+            <div class="menu-panel-primary-link-text">
+              <h3><?= __d('menu','co.external.source.records') ?></h3>
+              <div class="menu-panel-link-desc"><?= __d('menu','co.external.source.records.desc') ?></div>
+            </div>
+          </a>
+        </li>
+        */ ?>
+      </ul>
+    </div>
+  <?php endif; ?>
+  <button type="button" class="menu-panel-close btn"><span class="material-icons-outlined">close</span></button>
+</div>
+
diff --git a/app/webroot/css/co-base.css b/app/webroot/css/co-base.css
@@ -481,6 +481,53 @@ a#login:active {
 #co-menu-collapse {
   display: none;
 }
+/* Menu Panels */
+.menu-panel {
+  display: none;
+  position: absolute;
+  top: 0;
+  left: 0;
+  z-index: 200;
+  padding: 1rem;
+  width: 100vw;
+  border-right: 1px solid var(--cmg-color-lightgray-006);
+  border-bottom: 1px solid var(--cmg-color-lightgray-006);
+  text-align: left;
+  background-color: var(--cmg-color-white);
+  -webkit-box-shadow: 5px 5px 8px 0px var(--cmg-color-lightgray-003);
+  box-shadow: 5px 5px 8px 0px var(--cmg-color-lightgray-003);
+}
+.menu-panel.visible {
+  display: block;
+}
+.menu-panel-close.btn {
+  position: absolute;
+  right: 0;
+  top: 0;
+  color: #666;
+  padding: 1rem;
+  line-height: 1.2rem;
+}
+#main-menu .menu-panel-primary-link-text h3 {
+  color: var(--cmg-color-blue-001);
+  padding: 0;
+  font-weight: 500;
+}
+#main-menu a.menu-panel-primary-link {
+  display: flex;
+  align-items: center;
+  border: 1px solid var(--cmg-color-white);
+}
+#main-menu .menu-panel-links a.menu-panel-primary-link:hover {
+  background-color: transparent;
+  border: 1px solid var(--cmg-color-lightgray-006);
+}
+#main-menu .menu-panel-links a.menu-panel-primary-link:hover  h3 {  
+  text-decoration: underline;
+}
+#main-menu .menu-panel-primary-link-text {
+  flex: 1;
+}
 /* CONTENT */
 #breadcrumbs {
   font-size: 0.9em;

diff --git a/app/webroot/css/co-responsive.css b/app/webroot/css/co-responsive.css
@@ -219,6 +219,17 @@
   #navigation-drawer.closed .co-menu-collapse-icon {
     transform: rotate(-90deg);
   }
+  /* Menu Panels */
+  .menu-panel {
+    left: calc(100% + 1px);
+    padding: 1rem 1.5rem;
+    width: 60vw;
+    border-right: 1px solid var(--cmg-color-lightgray-006);
+    border-bottom: 1px solid var(--cmg-color-lightgray-006);
+  }
+  .menu-panel-content {
+    display: flex;
+  }
   /* GENERAL */
   .two-col {
     -webkit-column-count: 2; /* Chrome, Safari, Opera */