MDL-55831 theme_noname: Adapt action menu templates

Part of MDL-55071

theme/noname/classes/output/core_renderer.php

@@ -33,6 +33,7 @@ use single_select;
 use paging_bar;
 use url_select;
 use context_course;
+use pix_icon;
 
 defined('MOODLE_INTERNAL') || die;
 
@@ -353,7 +354,31 @@ class core_renderer extends \core_renderer {
      * @return string HTML
      */
     public function render_action_menu(action_menu $menu) {
-        return $this->render_from_template('core/action_menu', $menu);
+
+        // We don't want the class icon there!
+        foreach ($menu->get_secondary_actions() as $action) {
+            if ($action instanceof \action_menu_link && $action->has_class('icon')) {
+                $action->attributes['class'] = preg_replace('/(^|\s+)icon(\s+|$)/i', '', $action->attributes['class']);
+            }
+        }
+
+        $context = $menu->export_for_template($this);
+
+        // We do not want the icon with the caret, the caret is added by Bootstrap.
+        if (empty($context->primary->menutrigger)) {
+            $newurl = $this->pix_url('t/edit', 'moodle');
+            $context->primary->icon['attributes'] = array_reduce($context->primary->icon['attributes'],
+                function($carry, $item) use ($newurl) {
+                    if ($item['name'] === 'src') {
+                        $item['value'] = $newurl->out(false);
+                    }
+                    $carry[] = $item;
+                    return $carry;
+                }, []
+            );
+        }
+
+        return $this->render_from_template('core/action_menu', $context);
     }
 
     /**

theme/noname/scss/moodle/blocks.scss

@@ -18,7 +18,7 @@
         /* So that the caret takes the colour of the icon. */
         color: #999;
         &::after {
-            margin-left: -($spacer/2);
+            margin-left: 0;
         }
     }
 }

theme/noname/scss/moodle/core.scss

@@ -171,7 +171,6 @@ img.resize {
     width: 1em;
 }
 .action-menu .dropdown-toggle {
-    margin-right: 0.5rem;
     text-decoration: none;
 }
 .action-menu {
@@ -1724,11 +1723,6 @@ ul.dragdrop-keyboard-drag li {
     list-style-type: none;
 }
 
-.block-control-actions .moodle-core-dragdrop-draghandle img {
-    width: 12px;
-    height: 12px;
-}
-
 a.disabled:hover,
 a.disabled {
     text-decoration: none;

theme/noname/scss/moodle/course.scss

@@ -106,9 +106,12 @@
     }
 
     .filler {
+        // This must be sized like an icon to fill the space.
         width: 16px;
         height: 16px;
-        padding: 0.3em;
+        margin: 0;
+        padding: 0;
+        margin: 0 ($spacer / 2);
         display: inline-block;
     }
 

theme/noname/scss/moodle/icons.scss

@@ -20,7 +20,7 @@ a:first-of-type > .icon {
 }
 
 // Fix the first item in a drop down menu (it's a list of links and icons, but has been made vertical.
-.dropdown a.dropdown-item .icon {
+.dropdown .dropdown-item .icon {
     margin-left: 0px;
 }
 

theme/noname/scss/moodle/modules.scss

@@ -225,13 +225,6 @@ div#dock {
     width: 100%;
 }
 
-// Dropdown styling.
-.dropdown-menu {
-    > li > a {
-        padding: 3px 20px 3px 8px;
-    }
-}
-
 // Survey module
 
 .path-mod-survey {
@@ -267,14 +260,6 @@ div#dock {
       //  }
  //   }
 //}
-.dropdown-menu {
-    .divider {
-        width: auto;
-        height: 1px;
-        border-left: 0 none;
-        border-right: 0 none;
-    }
-}
 
 // Usermenu
 .usermenu {

theme/noname/templates/core/action_menu.mustache

-<div class="action-menu pull-xs-right">
-    {{#get_primary_actions}}
-        {{> core/action_menu_item_icon}}
-    {{/get_primary_actions}}
-    <span class="dropdown">
-        <a class="dropdown-toggle"
-                role="button"
-                href="#"
-                id="dropdown-{{uniqid}}"
-                data-toggle="dropdown"
-                aria-haspopup="true"
-                aria-expanded="false">
-                {{#menutrigger}}{{{menutrigger}}}{{/menutrigger}}
-                {{^menutrigger}}{{#pix}}t/edit{{/pix}}<span class="sr-only">{{#str}}edit{{/str}}</span>{{/menutrigger}}
-                </a>
-        <div class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdown-{{uniqid}}">
-            {{#get_secondary_actions}}
-                {{> core/action_menu_item}}
-            {{/get_secondary_actions}}
+{{!
+    This file is part of Moodle - http://moodle.org/
+
+    Moodle is free software: you can redistribute it and/or modify
+    it under the terms of the GNU General Public License as published by
+    the Free Software Foundation, either version 3 of the License, or
+    (at your option) any later version.
+
+    Moodle is distributed in the hope that it will be useful,
+    but WITHOUT ANY WARRANTY; without even the implied warranty of
+    MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+    GNU General Public License for more details.
+
+    You should have received a copy of the GNU General Public License
+    along with Moodle.  If not, see <http://www.gnu.org/licenses/>.
+}}
+{{!
+    Action menu.
+}}
+<div class="action-menu {{classes}}" {{#attributes}}{{name}}="{{value}}"{{/attributes}}>
+    {{#primary}}
+
+        <div class="{{classes}}" {{#attributes}}{{name}}="{{value}}"{{/attributes}}>
+
+            {{#prioritise}}{{> core/action_menu_trigger }}{{/prioritise}}<!--
+
+            -->{{#items}}{{> core/action_menu_item }}{{/items}}<!--
+
+            -->{{^prioritise}}{{> core/action_menu_trigger }}{{/prioritise}}
+
         </div>
-    </span>
-</div>
\ No newline at end of file
+
+    {{/primary}}
+</div>

theme/noname/templates/core/action_menu_item.mustache

-{{#text}}
-<a class="dropdown-item" href="{{{url}}}">
-    {{#icon}}{{{get_icon_html}}}{{/icon}}{{text}}
-</a>
-{{/text}}
\ No newline at end of file
+{{!
+    This file is part of Moodle - http://moodle.org/
+
+    Moodle is free software: you can redistribute it and/or modify
+    it under the terms of the GNU General Public License as published by
+    the Free Software Foundation, either version 3 of the License, or
+    (at your option) any later version.
+
+    Moodle is distributed in the hope that it will be useful,
+    but WITHOUT ANY WARRANTY; without even the implied warranty of
+    MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+    GNU General Public License for more details.
+
+    You should have received a copy of the GNU General Public License
+    along with Moodle.  If not, see <http://www.gnu.org/licenses/>.
+}}
+{{!
+    Action menu item.
+}}
+{{#actionmenulink}}{{> core/action_menu_link }}{{/actionmenulink}}
+{{#actionmenufiller}}<span class="filler">&nbsp;</span>{{/actionmenufiller}}
+{{#actionlink}}{{> core/action_link }}{{/actionlink}}
+{{#pixicon}}{{> core/pix_icon }}{{/pixicon}}
+{{#rawhtml}}{{{.}}}{{/rawhtml}}
\ No newline at end of file

theme/noname/templates/core/action_menu_item_icon.mustache

-{{#text}}
-<a href="{{{url}}}">
-    {{#icon}}{{{get_icon_html}}}{{/icon}}<span class="sr-only">{{text}}</span>
-</a>
-{{/text}}
\ No newline at end of file

theme/noname/templates/core/action_menu_link.mustache

+{{!
+    This file is part of Moodle - http://moodle.org/
+
+    Moodle is free software: you can redistribute it and/or modify
+    it under the terms of the GNU General Public License as published by
+    the Free Software Foundation, either version 3 of the License, or
+    (at your option) any later version.
+
+    Moodle is distributed in the hope that it will be useful,
+    but WITHOUT ANY WARRANTY; without even the implied warranty of
+    MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+    GNU General Public License for more details.
+
+    You should have received a copy of the GNU General Public License
+    along with Moodle.  If not, see <http://www.gnu.org/licenses/>.
+}}
+{{!
+    Action menu link.
+}}
+{{^disabled}}
+    <a href="{{url}}" class="{{classes}}" {{#attributes}}{{name}}={{#quote}}{{value}}{{/quote}}{{/attributes}} {{#showtext}}aria-labelledby="actionmenuaction-{{instance}}"{{/showtext}}>{{#icon}}{{>core/pix_icon}}{{/icon}}{{#showtext}}<span class="menu-action-text" id="actionmenuaction-{{instance}}">{{{text}}}</span>{{/showtext}}</a>
+{{/disabled}}
+{{#disabled}}
+    <span class="currentlink" role="menuitem">{{#icon}}{{>core/pix_icon}}{{/icon}}{{{text}}}</span>
+{{/disabled}}

theme/noname/templates/core/action_menu_trigger.mustache

+{{!
+    This file is part of Moodle - http://moodle.org/
+
+    Moodle is free software: you can redistribute it and/or modify
+    it under the terms of the GNU General Public License as published by
+    the Free Software Foundation, either version 3 of the License, or
+    (at your option) any later version.
+
+    Moodle is distributed in the hope that it will be useful,
+    but WITHOUT ANY WARRANTY; without even the implied warranty of
+    MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+    GNU General Public License for more details.
+
+    You should have received a copy of the GNU General Public License
+    along with Moodle.  If not, see <http://www.gnu.org/licenses/>.
+}}
+{{!
+    Action menu trigger.
+}}
+<span class="dropdown">
+    <a href="#" class="dropdown-toggle" id="dropdown-{{instance}}" title="{{title}}" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">{{{actiontext}}}{{{menutrigger}}}{{#icon}}{{> core/pix_icon}}{{/icon}}{{#rawicon}}{{{.}}}{{/rawicon}}{{#menutrigger}}<b class="caret"></b>{{/menutrigger}}</a>
+    {{#secondary}}
+        <div class="dropdown-menu dropdown-menu-right {{classes}}" {{#attributes}}{{name}}="{{value}}"{{/attributes}} aria-labelledby="dropdown-{{instance}}">
+            {{#items}}<!--
+                -->{{#actionmenulink}}<a href="{{url}}" class="dropdown-item {{classes}}" {{#attributes}}{{name}}={{#quote}}{{value}}{{/quote}}{{/attributes}} {{#showtext}}aria-labelledby="actionmenuaction-{{instance}}"{{/showtext}}>{{#icon}}{{>core/pix_icon}}{{/icon}}{{#showtext}}<span class="menu-action-text" id="actionmenuaction-{{instance}}">{{{text}}}</span>{{/showtext}}</a>{{/actionmenulink}}<!--
+                -->{{#actionmenufiller}}<div class="dropdown-divider"></div>{{/actionmenufiller}}<!--
+                -->{{^actionmenulink}}{{^actionmenufiller}}<div class="dropdown-item">{{> core/action_menu_item }}</div>{{/actionmenufiller}}{{/actionmenulink}}<!--
+            -->{{/items}}
+        </div>
+    {{/secondary}}
+</span>

theme/noname/templates/core/pix_icon.mustache

@@ -39,4 +39,4 @@
     }
 
 }}
-<img class="icon" {{#attributes}}{{name}}="{{value}}" {{/attributes}}/>
+<img class="icon" {{#attributes}}{{name}}="{{value}}" {{/attributes}}/>
\ No newline at end of file