From 573dfdd84f4dbee419cb79985a108b63db1ffd47 Mon Sep 17 00:00:00 2001 From: Arlen Johnson Date: Fri, 27 May 2022 15:13:52 -0400 Subject: [PATCH] Add panel menus (CFM-174) --- app/resources/locales/en_US/menu.po | 25 ++++++++ app/templates/element/javascript.php | 9 +++ app/templates/element/menuMain.php | 32 ++++++---- app/templates/element/menuPanel.php | 96 ++++++++++++++++++++++++++++ app/webroot/css/co-base.css | 47 ++++++++++++++ app/webroot/css/co-responsive.css | 11 ++++ 6 files changed, 209 insertions(+), 11 deletions(-) create mode 100644 app/templates/element/menuPanel.php diff --git a/app/resources/locales/en_US/menu.po b/app/resources/locales/en_US/menu.po index b7a15e410..a866818dc 100644 --- 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 index 53263386c..97f28c837 100644 --- 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 index 67059f827..27bb61546 100644 --- 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 @@ . '' . $m['label'] . ''; print '
  • '; - 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 '
    • '; } } diff --git a/app/templates/element/menuPanel.php b/app/templates/element/menuPanel.php new file mode 100644 index 000000000..4b1226dda --- /dev/null +++ b/app/templates/element/menuPanel.php @@ -0,0 +1,96 @@ + +
    + +

    +

    +
    +
      +
    • + Url->build( + ['plugin' => null, + 'controller' => 'people', + 'action' => 'index', + '?' => [ + 'co_id' => $vv_cur_co->id + ]] + ); + ?> + +
      +

      +
      +
      +       +
      • + + Url->build( + ['plugin' => null, + 'controller' => 'people', + 'action' => 'index', + '?' => [ + 'co_id' => $vv_cur_co->id + ]] + ); + ?> + +
      +

      +
      +
      +       + +
    • + Url->build( + ['plugin' => null, + 'controller' => 'people', + 'action' => 'index', + '?' => [ + 'co_id' => $vv_cur_co->id + ]] + ); + ?> + +
      +

      +
      +
      +       +
      • + */ ?> +
    +
    + + +
    + diff --git a/app/webroot/css/co-base.css b/app/webroot/css/co-base.css index 7e5601c72..f75198948 100644 --- 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 index 27fc2e68c..dc699718c 100644 --- 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 */