Allow for tertiary level menu items (Bug #1396435)

Will need some design team cleaning up of the css so best test to make
sure it functionally works/makes sense

Change-Id: I3ac5e45aa1210c14a93b18c31a0c826a1b2dfd83
Signed-off-by: Robert Lyon <robertl@catalyst.net.nz>

htdocs/lib/web.php

@@ -1954,7 +1954,7 @@ function pieform_get_help(Pieform $form, $element) {
  * @return bool
  */
 function in_admin_section() {
-    return defined('ADMIN') || defined('INSTITUTIONALADMIN') || defined('STAFF') || defined('INSTITUTIONALSTAFF');
+    return defined('ADMIN') || defined('INSTITUTIONALADMIN') || defined('STAFF') || defined('INSTITUTIONALSTAFF') || defined('INADMINMENU');
 }
 
 /**
@@ -2800,6 +2800,7 @@ function footer_menu($all=false) {
  *
  * The keys of each menu node are as follows:
  *   path: Where the link sits in the menu. E.g. 'myporfolio/myplugin'
+ *   parent: (optional) The parent path - use if tertiary level menu
  *   url:  The URL to the page, relative to wwwroot. E.g. 'artefact/myplugin/'
  *   title: Translated text to use for the text of the link. E.g. get_string('myplugin', 'artefact.myplugin')
  *   weight: Where in the menu the item should be inserted. Larger number are to the right.
@@ -2816,7 +2817,8 @@ function find_menu_children(&$menu, $path) {
     foreach ($menu as $key => $item) {
         $item['selected'] = defined('MENUITEM')
             && ($item['path'] == MENUITEM
-                || ($item['path'] . '/' == substr(MENUITEM, 0, strlen($item['path'])+1)));
+                || ($item['path'] . '/' == substr(MENUITEM, 0, strlen($item['path'])+1))
+                || (!empty($item['parent']) && $item['parent'] == MENUITEM));
         if (
             ($path == '' && $item['path'] == '') ||
             ($item['path'] != '' && substr($item['path'], 0, strlen($path)) == $path && !preg_match('%/%', substr($item['path'], strlen($path) + 1)))) {

htdocs/theme/default/static/style/style.css

@@ -437,6 +437,126 @@ div.pagination a {
     border-left: 0;
     border-right: 0;
 }
+.main-nav .dropdown-sub li.has-sub a,
+.main-nav .dropdown-sub li.selected.has-sub a {
+    background-image: url(../../../raw/static/images/expand.png);
+    background-repeat: no-repeat;
+    background-position: 100% 50%;
+}
+/******************** Tertiary navigation ********************/
+#tertiary-nav {
+    font-weight: bold;
+    background: #cbcbcb url(../images/submenu.gif) repeat-x 0 bottom;
+}
+#tertiary-nav ul {
+    margin: 0 auto;
+    padding: 0;
+}
+#tertiary-nav li {
+    display: inline-block;
+    list-style-type: none;
+    margin: 0;
+    padding: 0;
+    vertical-align: middle;
+}
+#tertiary-nav li a,
+#tertiary-nav li a:link,
+#tertiary-nav li a:visited,
+#tertiary-nav li a:active {
+    display: inline-block;
+    padding: 5px 10px;
+    text-decoration: none;
+    color: #211C00;
+    border-right: 1px solid #b1b1b1;
+    border-left: 1px solid #dddddd;
+}
+#tertiary-nav li a:hover,
+#tertiary-nav li.selected a:hover,
+#tertiary-nav li a:focus,
+#tertiary-nav li.selected a:focus {
+    color: #335804;
+}
+#tertiary-nav li.selected a,
+#tertiary-nav li.selected a:link,
+#tertiary-nav li.selected a:visited,
+#tertiary-nav li.selected a:active {
+    background: #FFFFFF url(../images/submenu-active.gif) repeat-x right top;
+    color: #4c711d;
+    border-right: 1px solid #c1c1c1;
+    border-left: 1px solid #dddddd;
+}
+#tertiary-nav li:first-child a,
+#tertiary-nav li:first-child a:link,
+#tertiary-nav li:first-child a:visited,
+#tertiary-nav li:first-child a:active {
+    border-left: 0;
+}
+#tertiary-nav li a:hover,
+#tertiary-nav li.selected a:hover,
+#tertiary-nav li a:focus,
+#tertiary-nav li.selected a:focus {
+    color: #7e7327;
+}
+/******************** Dropdown tertiary navigation ********************/
+.main-nav .dropdown-tertiary {
+    display: none;
+    position: absolute;
+    left: 100%;
+    top: 0;
+    z-index: 3;
+    clear: both;
+    padding: 0;
+    margin: 0;
+    min-width: 0;
+}
+.main-nav .dropdown-sub li.has-sub
+.dropdown-tertiary li a {
+    background-image: none;
+}
+.main-nav ul ul li:hover .dropdown-tertiary,
+.main-nav ul ul li .dropdown-tertiary.show-menu {
+    display: block;
+}
+.main-nav .dropdown-tertiary li {
+    list-style: none;
+    display: block;
+}
+.main-nav .dropdown-sub li.selected ul li a,
+.main-nav .dropdown-sub li.selected ul li a:link,
+.main-nav .dropdown-sub li.selected ul li a:visited,
+.main-nav .dropdown-sub li.selected ul li a:active {
+    background: #547b23;
+    color: #FFFFFF;
+    border-top: 1px solid #759a49;
+    border-bottom: 1px solid #406416;
+    border-left: 0;
+    border-right: 0;
+    font-weight: normal;
+}
+.main-nav .dropdown-sub li.selected ul li.selected a,
+.main-nav .dropdown-sub li.selected ul li.selected a:link,
+.main-nav .dropdown-sub li.selected ul li.selected a:visited,
+.main-nav .dropdown-sub li.selected ul li.selected a:active {
+    background: #CACACA;
+    color: #335804;
+    border-top: 1px solid #d6d6d6;
+    border-bottom: 1px solid #c7c7c7;
+    border-left: 0;
+    border-right: 0;
+    font-weight: bold;
+}
+.main-nav .dropdown-sub li.selected ul li a:hover,
+.main-nav .dropdown-sub li.selected ul li.selected a:hover,
+.main-nav .dropdown-sub li.selected ul li a:focus,
+.main-nav .dropdown-sub li.selected ul li.selected a:focus {
+    color: #4C711D;
+    background: #d5d5d5;
+    border-top: 1px solid #e8e8e8;
+    border-bottom: 1px solid #7d7d7d;
+    border-left: 0;
+    border-right: 0;
+}
+
 /******************** Responsive navigation ********************/
 /* reset responsive navigation */
 .rd-nav-title {
@@ -452,7 +572,8 @@ div.pagination a {
     display: none;
 }
 /* hide sub nav when dropdown is turn off */
-.rd-navmenu #sub-nav {
+.rd-navmenu #sub-nav,
+.rd-navmenu #tertiary-nav {
     display: none;
 }
 /* responsive navigation */
@@ -507,6 +628,17 @@ div.pagination a {
     -moz-border-radius: 0 0 5px 5px;
     border-radius: 0 0 5px 5px;
 }
+.rd-navmenu .nav-expand ul.dropdown-tertiary {
+    left: 0;
+    border: 0;
+    display: block;
+    margin: 0 5px;
+    padding: 0;
+    position: inherit;
+}
+.rd-navmenu .nav-expand ul.dropdown-tertiary li {
+    font-size: 0.8em;
+}
 .rd-navmenu .main-nav ul li {
     display: block;
     clear: left;
@@ -607,6 +739,32 @@ div.pagination a {
     color: #568e0e;
     border: 0;
 }
+.rd-navmenu .nav-expand .rd-subnav li.selected ul li a,
+.rd-navmenu .nav-expand .rd-subnav li.selected ul li a:link,
+.rd-navmenu .nav-expand .rd-subnav li.selected ul li a:visited,
+.rd-navmenu .nav-expand .rd-subnav li.selected ul li a:active,
+.rd-navmenu .nav-expand .dropdown-sub li.selected ul li a,
+.rd-navmenu .nav-expand .dropdown-sub li.selected ul li a:link,
+.rd-navmenu .nav-expand .dropdown-sub li.selected ul li a:visited,
+.rd-navmenu .nav-expand .dropdown-sub li.selected ul li a:active {
+    color: #333333;
+    background: none;
+    border: 0;
+    text-decoration: none;
+}
+.rd-navmenu .nav-expand .rd-subnav li.selected ul li.selected a,
+.rd-navmenu .nav-expand .rd-subnav li.selected ul li.selected a:link,
+.rd-navmenu .nav-expand .rd-subnav li.selected ul li.selected a:visited,
+.rd-navmenu .nav-expand .rd-subnav li.selected ul li.selected a:active,
+.rd-navmenu .nav-expand .dropdown-sub li.selected ul li.selected a,
+.rd-navmenu .nav-expand .dropdown-sub li.selected ul li.selected a:link,
+.rd-navmenu .nav-expand .dropdown-sub li.selected ul li.selected a:visited,
+.rd-navmenu .nav-expand .dropdown-sub li.selected ul li.selected a:active {
+    color: #333333;
+    background: none;
+    border: 0;
+    text-decoration: underline;
+}
 
 /* js fallback for 768px or less */
 @media screen and (max-width: 768px) {

htdocs/theme/default/templates/header/navigation.tpl

@@ -10,9 +10,19 @@
                     <ul class="{if $DROPDOWNMENU}dropdown-sub {/if}rd-subnav">
 {strip}
 {foreach from=$item.submenu item=subitem}
-                        <li{if $subitem.selected} class="selected"{/if}><span>
+                        <li class="{if $subitem.selected}selected {/if}{if $subitem.submenu}has-sub {/if}"><span>
                             <a href="{$WWWROOT}{$subitem.url}"{if $subitem.accesskey} accesskey="{$subitem.accesskey}"{/if}>{$subitem.title}</a>
-                        </span></li>
+                        </span>
+                        {if $subitem.submenu}
+                            <ul class="dropdown-tertiary">
+                            {foreach from=$subitem.submenu item=tertiaryitem}
+                                <li{if $tertiaryitem.selected} class="selected"{/if}><span>
+                                    <a href="{$WWWROOT}{$tertiaryitem.url}"{if $tertiaryitem.accesskey} accesskey="{$tertiaryitem.accesskey}"{/if}>{$tertiaryitem.title}</a>
+                                </span></li>
+                            {/foreach}
+                            </ul>
+                        {/if}
+                        </li>
 {/foreach}
 {/strip}
                                         <div class="cl"></div>
@@ -39,11 +49,27 @@
 {if $SELECTEDSUBNAV}
             <ul>{strip}
 {foreach from=$SELECTEDSUBNAV item=item}
-               <li{if $item.selected} class="selected"{/if}><span><a href="{$WWWROOT}{$item.url}"{if $item.accesskey} accesskey="{$item.accesskey}"{/if}>{$item.title}</a></span></li>
+               <li{if $item.selected} class="selected"{/if}><span><a href="{$WWWROOT}{$item.url}"{if $item.accesskey} accesskey="{$item.accesskey}"{/if}>{$item.title}</a></span>
+               {if $item.submenu && $item.selected}
+               {assign var=tertiarymenu value=$item.submenu}
+               {/if}
+               </li>
 {/foreach}
             {/strip}</ul>
 {/if}
             <div class="cb"></div>
-        </div>
+            </div>
+            {if $tertiarymenu}
+                <div id="tertiary-nav">
+                   <ul>{strip}
+                   {foreach from=$tertiarymenu item=tertiaryitem}
+                       <li{if $tertiaryitem.selected} class="selected"{/if}><span>
+                           <a href="{$WWWROOT}{$tertiaryitem.url}"{if $tertiaryitem.accesskey} accesskey="{$tertiaryitem.accesskey}"{/if}>{$tertiaryitem.title}</a>
+                       </span></li>
+                   {/foreach}
+                   {/strip}</ul>
+            <div class="cb"></div>
+            </div>
+           {/if}
 {/if}
 {/if}

htdocs/theme/raw/static/style/style.css

@@ -1701,6 +1701,73 @@ div.rel {
 .main-nav .dropdown-sub li a:focus {
     background: #DDDDDD;
 }
+.main-nav .dropdown-sub li.has-sub a {
+    background-image: url(../images/expand.png);
+    background-repeat: no-repeat;
+    background-position: 100% 50%;
+}
+/******************** Tertiary navigation ********************/
+#tertiary-nav {
+    background: none repeat scroll 0 0 #cccccc;
+}
+#tertiary-nav ul {
+    margin: 0 auto;
+    max-width: 1280px;
+    min-width: 960px;
+    padding: 0;
+}
+#tertiary-nav li {
+    display: inline-block;
+    list-style-type: none;
+    margin: 0;
+    padding: 0;
+    vertical-align: middle;
+}
+#tertiary-nav li a,
+#tertiary-nav li a:link,
+#tertiary-nav li a:visited,
+#tertiary-nav li a:active {
+    display: inline-block;
+    padding: 5px 10px;
+    text-decoration: none;
+}
+#tertiary-nav li.selected a,
+#tertiary-nav li.selected a:link,
+#tertiary-nav li.selected a:visited,
+#tertiary-nav li.selected a:active {
+    color: #333333;
+    font-weight: bold;
+}
+/******************** Dropdown tertiary navigation ********************/
+.main-nav .dropdown-tertiary {
+    display: none;
+    position: absolute;
+    left: 100%;
+    top: 0;
+    z-index: 3;
+    clear: both;
+    padding: 0;
+    margin: 0;
+    min-width: 0;
+}
+.main-nav .dropdown-sub li.has-sub .dropdown-tertiary li a {
+    background-image: none;
+}
+
+.main-nav ul ul li:hover .dropdown-tertiary,
+.main-nav ul ul li .dropdown-tertiary.show-menu {
+    display: block;
+}
+.main-nav .dropdown-tertiary li {
+    list-style: none;
+    display: block;
+}
+.main-nav .dropdown-sub li.selected li a {
+    font-weight: normal;
+}
+.main-nav .dropdown-sub li.selected li.selected a {
+    font-weight: bold;
+}
 /******************** Tabs ********************/
 /* reset responsive tabs (profile tabs are in the form not template) */
 .rd-tab-title {

htdocs/theme/raw/templates/header/navigation.tpl

@@ -10,9 +10,19 @@
                     <ul class="dropdown-sub">
 {strip}
 {foreach from=$item.submenu item=subitem}
-                        <li{if $subitem.selected} class="selected"{/if}><span>
+                        <li class="{if $subitem.selected}selected {/if}{if $subitem.submenu}has-sub {/if}"><span>
                             <a href="{$WWWROOT}{$subitem.url}"{if $subitem.accesskey} accesskey="{$subitem.accesskey}"{/if}>{$subitem.title}</a>
-                        </span></li>
+                        </span>
+                        {if $subitem.submenu}
+                            <ul class="dropdown-tertiary">
+                                {foreach from=$subitem.submenu item=tertiaryitem}
+                                    <li{if $tertiaryitem.selected} class="selected"{/if}><span>
+                                        <a href="{$WWWROOT}{$tertiaryitem.url}"{if $tertiaryitem.accesskey} accesskey="{$tertiaryitem.accesskey}"{/if}>{$tertiaryitem.title}</a>
+                                    </span></li>
+                                {/foreach}
+                            </ul>
+                        {/if}
+                        </li>
 {/foreach}
 {/strip}
                         <div class="cl"></div>
@@ -42,10 +52,25 @@
 {strip}
 {foreach from=$SELECTEDSUBNAV item=item}
                 <li{if $item.selected} class="selected"{/if}><span><a href="{$WWWROOT}{$item.url}"{if $item.accesskey} accesskey="{$item.accesskey}"{/if}>{$item.title}</a></span></li>
+                {if $item.submenu && $item.selected}
+                {assign var=tertiarymenu value=$item.submenu}
+                {/if}
 {/foreach}
             {/strip}</ul>
 {/if}
             <div class="cb"></div>
-        </div>
+            </div>
+            {if $tertiarymenu}
+                <div id="tertiary-nav">
+                    <ul>{strip}
+                    {foreach from=$tertiarymenu item=tertiaryitem}
+                        <li{if $tertiaryitem.selected} class="selected"{/if}><span>
+                            <a href="{$WWWROOT}{$tertiaryitem.url}"{if $tertiaryitem.accesskey} accesskey="{$tertiaryitem.accesskey}"{/if}>{$tertiaryitem.title}</a>
+                        </span></li>
+                    {/foreach}
+                    {/strip}</ul>
+            <div class="cb"></div>
+            </div>
+            {/if}
 {/if}
 {/if}