MDL-55413 theme_noname: action-menu conversion
authorDamyon Wiese <damyon@moodle.com>
Thu, 28 Jul 2016 04:22:13 +0000 (12:22 +0800)
committerDan Poltawski <dan@moodle.com>
Fri, 23 Sep 2016 09:49:49 +0000 (10:49 +0100)
Convert action-menus to templates using bootstrap4 markup.
Includes changes to iconsmall/smallicon.

Part of MDL-55071

lib/outputcomponents.php
theme/noname/classes/output/core_renderer.php
theme/noname/scss/moodle/admin.scss
theme/noname/scss/moodle/backup-restore.scss
theme/noname/scss/moodle/core.scss
theme/noname/scss/moodle/course.scss
theme/noname/templates/core/action_menu.mustache [new file with mode: 0644]
theme/noname/templates/core/action_menu_item.mustache [new file with mode: 0644]
theme/noname/templates/core/action_menu_item_icon.mustache [new file with mode: 0644]

index 651afc2..f00fba3 100644 (file)
@@ -1057,6 +1057,18 @@ class action_link implements renderable {
     public function has_class($class) {
         return strpos(' ' . $this->attributes['class'] . ' ', ' ' . $class . ' ') !== false;
     }
+
+    /**
+     * Return the rendered HTML for the icon. Useful for rendering action links in a template.
+     * @return string
+     */
+    public function get_icon_html() {
+        global $OUTPUT;
+        if (!$this->icon) {
+            return '';
+        }
+        return $OUTPUT->render($this->icon);
+    }
 }
 
 /**
index e302ade..9d906da 100644 (file)
@@ -25,6 +25,13 @@ use custom_menu;
 use block_contents;
 use stdClass;
 use moodle_url;
+<<<<<<< HEAD
+||||||| parent of 6c769ad9e6... MDL-XXXX theme_noname: action-menu conversion
+use preferences_groups;
+=======
+use preferences_groups;
+use action_menu;
+>>>>>>> 6c769ad9e6... MDL-XXXX theme_noname: action-menu conversion
 
 defined('MOODLE_INTERNAL') || die;
 
@@ -251,4 +258,34 @@ class core_renderer extends \core_renderer {
     public function body_css_classes(array $additionalclasses = array()) {
         return $this->page->bodyclasses;
     }
+
+    /**
+     * Renders preferences groups.
+     *
+     * @param  preferences_groups $renderable The renderable
+     * @return string The output.
+     */
+    public function render_preferences_groups(preferences_groups $renderable) {
+        return $this->render_from_template('core/preferences_groups', $renderable);
+    }
+
+    /**
+     * Renders preferences groups.
+     *
+     * @param  preferences_groups $renderable The renderable
+     * @return string The output.
+     */
+    public function render_preferences_groups(preferences_groups $renderable) {
+        return $this->render_from_template('core/preferences_groups', $renderable);
+    }
+
+    /**
+     * Renders an action menu component.
+     *
+     * @param action_menu $menu
+     * @return string HTML
+     */
+    public function render_action_menu(action_menu $menu) {
+        return $this->render_from_template('core/action_menu', $menu);
+    }
 }
index 361d0aa..508d2bf 100644 (file)
     width: 16px;
 }
 
-// Make them more finger friendly.
-img.iconsmall {
-    margin: 0;
-    padding: 0.3em;
-}
-
-
 #page-admin-qbehaviours .cell.c3,
 #page-admin-qtypes .cell.c3 {
     font-size: $font-size-sm;
@@ -327,10 +320,6 @@ img.iconsmall {
     padding: .15em .5em;
 }
 
-.environmenttable img.iconhelp {
-    padding-right: .3em;
-}
-
 #trustedhosts .generaltable {
     margin-left: auto;
     margin-right: auto;
@@ -520,10 +509,6 @@ img.iconsmall {
             background-color: $state-warning-bg;
         }
         .pluginname {
-            .displayname img.icon {
-                padding-top: 0;
-                padding-bottom: 0;
-            }
             .componentname {
                 font-size: $font-size-sm;
                 @extend .text-muted;
@@ -761,11 +746,6 @@ img.iconsmall {
     text-align: center;
 }
 
-.tinymcesubplugins img.icon {
-    padding-top: 0;
-    padding-bottom: 0;
-}
-
 .maintenancewarning {
     padding: 3px 1em;
     text-align: center;
index e64082e..4885b90 100644 (file)
     background-color: $body-bg;
     border: 1px dotted #666;
 }
-.path-backup .fitem .smallicon {
-    vertical-align: text-bottom;
-}
-
 .backup-restore .backup-section > h2.header,
 .backup-restore .backup-section .backup-sub-section h3 {
     // Copied from bootstrap/forms.less tag legend
index de44690..e8fc8ce 100644 (file)
@@ -162,39 +162,36 @@ img.resize {
     height: 1em;
     width: 1em;
 }
+.action-menu {
+    white-space: nowrap;
+}
+.action-menu img {
+    width: 16px;
+    height: 16px;
+    box-sizing: content-box;
+    padding-right: 0.5rem;
+}
+.action-menu .userpicture {
+    width: auto;
+    height: auto;
+    padding-left: 1rem;
+}
+.mform {
+    max-width: 720px;
+}
 .block img.resize,
 .breadcrumb img.resize {
     height: 0.9em;
     width: 0.8em;
 }
 /* Icon styles */
-img.icon {
-    height: 16px;
-    vertical-align: text-bottom;
-    width: 16px;
-    padding-right: 6px;
-}
-img.iconsmall {
-    height: 12px;
-    margin-right: 3px;
-    vertical-align: middle;
-    //width: 12px;
-    box-sizing: content-box;
-}
+img.icon,
 img.iconhelp, .helplink img {
     height: 16px;
-    padding-left: 3px;
     vertical-align: text-bottom;
     width: 16px;
-}
-h1 img.iconhelp, h1 img.icon,
-h2 img.iconhelp, h2 img.icon,
-h3 img.iconhelp, h3 img.icon,
-h4 img.iconhelp, h4 img.icon,
-h5 img.iconhelp, h5 img.icon,
-h6 img.iconhelp, h6 img.icon {
-  vertical-align: middle;
-  padding: 4px;
+    padding-right: 0.5rem;
+    box-sizing: content-box;
 }
 img.iconlarge {
     height: 24px;
@@ -266,11 +263,6 @@ form.popupform div {
 .arrow_button input {
     overflow: hidden;
 }
-.action-icon img.smallicon {
-    vertical-align: text-bottom;
-    margin: 0 0.3em;
-}
-
 /** The 1-pixel padding is there to avoid phantom scroll bars on OS X (FF, Safari and Chrome)**/
 .no-overflow {
     overflow: auto;
@@ -326,10 +318,6 @@ a.skip:active {
 .blog_entry .tags {
     margin-top: 15px;
 }
-.blog_entry .tags .action-icon img.smallicon {
-    height: 16px;
-    width: 16px;
-}
 .blog_entry .content {
     margin-left: 43px;
 }
@@ -467,11 +455,6 @@ a.skip:active {
 //  @include box-sizing(border-box);
 }
 
-.loginbox .potentialidp .smallicon {
-    vertical-align: text-bottom;
-    margin: 0 .3em;
-}
-
 // Notes
 .notepost {
     margin-bottom: 1em;
@@ -1459,9 +1442,6 @@ body#page-lib-editor-tinymce-plugins-moodlemedia-preview {
     background-color: #fff;
     @include box-shadow(0px 0 10px 0 #ccc);
 }
-.section-modchooser-link img.smallicon {
-    padding: 3px;
-}
 /* Form element: listing */
 .formlistingradio {
     padding-bottom: 25px;
@@ -1780,152 +1760,6 @@ img#persona_signin {
     }
 }
 
-/** Action menu component styles **/
-.moodle-actionmenu,
-.moodle-actionmenu > ul,
-.moodle-actionmenu > ul > li {
-    display: inline-block;
-}
-
-.moodle-actionmenu ul {
-    padding: 0;
-    margin: 0;
-    list-style-type: none;
-}
-
-.section_action_menu .moodle-actionmenu ul.menubar {
-    margin: 0;
-}
-
-.section_action_menu .moodle-actionmenu ul.menu {
-    margin: 0 10px 10px 0;
-}
-
-.moodle-actionmenu .toggle-display,
-.moodle-actionmenu .menu-action-text {
-    display: none; /** Hidden by default, display none so that we don't take up space. **/
-}
-
-.jsenabled {
-    .moodle-actionmenu[data-enhance] {
-        display: block;
-        .menu {
-            display:none;
-        }
-        .toggle-display {
-            display: inline; /** JS is enabled, we'll be using it so return display to normal **/
-            opacity: 0.5;
-        }
-        .toggle-display.textmenu {
-            display: block;
-            margin-left: 4px;
-            padding-left: 4px;
-            padding-right: 4px;
-
-            .iconsmall,
-            .smallicon {
-                margin: 4px 4px 4px 0px;
-                padding: 8px 4px 0px 2px;
-                vertical-align: text-bottom;
-            }
-
-            .caret {
-                margin-top: 8px;
-                margin-left: 2px;
-                border-top-color: $dropdown-link-color;
-                &:hover,
-                &:active {
-                    border-top-color: $dropdown-link-active-color;
-                }
-            }
-        }
-    }
-    .moodle-actionmenu[data-enhanced] {
-        .toggle-display {
-            opacity: 1;
-        }
-        .menu-action-text  {
-            display:inline;
-        }
-    }
-}
-
-.moodle-actionmenu[data-enhanced].show  {
-
-    position: relative;
-
-    .menu {
-
-        display:block;
-        position: absolute;
-        text-align: left;
-        @extend .bg-faded;
-        border: 1px solid $dropdown-border-color;
-        z-index:1000;
-        @include border-radius(5px);
-        @include box-shadow(5px 5px 20px 0 #666);
-
-        a {
-            display: block;
-            color: $dropdown-link-color;
-            padding:2px 1em 2px 28px;
-            &:hover {
-                color: $dropdown-link-hover-color;
-                background-color: $dropdown-link-hover-bg;
-            }
-            &:first-child {
-                @include border-top-radius(4px);
-            }
-            &:last-child {
-                @include border-bottom-radius(4px);
-            }
-        }
-        a.hidden {
-            display:none;
-        }
-        img {
-            vertical-align: middle;
-        }
-        .iconsmall,
-        .smallicon {
-            margin: 4px 4px 4px -24px;
-            padding: 4px;
-        }
-        > li {
-            display:block;
-        }
-
-        /** bottom left of button **/
-        &.align-tl-bl {top: 100%;left:0;margin-top: 4px;}
-        &.align-tr-bl {top: 100%;right: 100%;}
-        &.align-bl-bl {bottom: 100%;left:0;}
-        &.align-br-bl {bottom: 100%;right: 100%;}
-        /** bottom right of button **/
-        &.align-tl-br {top: 100%;left:100%;}
-        &.align-tr-br {top: 100%;right: 0;margin-top: 4px;}
-        &.align-bl-br {bottom: 100%;left:100%;}
-        &.align-br-br {bottom: 100%;right: 0;}
-        /** top left of button **/
-        &.align-tl-tl {top: 0;left:0;}
-        &.align-tr-tl {top: 0;right: 100%;margin-right: 4px;}
-        &.align-bl-tl {bottom: 100%;left:0;margin-bottom: 4px;}
-        &.align-br-tl {bottom: 100%;right: 100%;}
-        /** top right of button **/
-        &.align-tl-tr {top: 0;left:100%;margin-left: 4px;}
-        &.align-tr-tr {top: 0;right: 0;}
-        &.align-bl-tr {bottom: 100%;left:100%;}
-        &.align-br-tr {bottom: 100%;right: 0;margin-bottom: 4px;}
-    }
-    /** no wrap is set - prevent menu items from wrapping **/
-    &.nowrap-items .menu > li {
-        white-space: nowrap;
-    }
-}
-
-.block .moodle-actionmenu {
-    text-align: right;
-}
-
 ul.dragdrop-keyboard-drag li {
     list-style-type: none;
 }
index 3afb88b..a37d27a 100644 (file)
@@ -677,42 +677,6 @@ span.editinstructions {
     margin: 10px 0 20px;
 }
 
-.section {
-    .summary,
-    .activity {
-        .iconsmall {
-            width: 16px;
-            height: 16px;
-        }
-    }
-    .editing_title {
-        .iconsmall {
-            width: 12px;
-            height: 12px;
-            margin: 8px 8px 0px 0;
-            padding: 4px 8px 0px 0;
-            vertical-align: text-bottom;
-        }
-    }
-    .moodle-actionmenu {
-        .iconsmall {
-            max-width: none !important; /** reset sets 100% !important which breaks on IE8 without this !important */
-            width:16px;
-            height:16px;
-            padding: 4px;
-            vertical-align: text-bottom;
-        }
-    }
-    .moodle-actionmenu[data-enhanced] {
-        .menu {
-            img {
-              width: 12px;
-              height: 12px;
-            }
-        }
-    }
-}
-
 /**
  * Course management page
  * Palette
@@ -968,11 +932,6 @@ span.editinstructions {
             margin-right:2rem;
             min-width:3.5em;
             display:inline-block;
-            .smallicon {
-                width:12px;
-                margin-left:4px;
-                vertical-align: inherit;
-            }
         }
         .bulk-action-checkbox {
             margin-right: -3px;
diff --git a/theme/noname/templates/core/action_menu.mustache b/theme/noname/templates/core/action_menu.mustache
new file mode 100644 (file)
index 0000000..c4fc342
--- /dev/null
@@ -0,0 +1,22 @@
+<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}}
+        </div>
+    </span>
+</div>
\ No newline at end of file
diff --git a/theme/noname/templates/core/action_menu_item.mustache b/theme/noname/templates/core/action_menu_item.mustache
new file mode 100644 (file)
index 0000000..2a857e2
--- /dev/null
@@ -0,0 +1,5 @@
+{{#text}}
+<a class="dropdown-item" href="{{{url}}}">
+    {{#icon}}{{{get_icon_html}}}{{/icon}}{{text}}
+</a>
+{{/text}}
\ No newline at end of file
diff --git a/theme/noname/templates/core/action_menu_item_icon.mustache b/theme/noname/templates/core/action_menu_item_icon.mustache
new file mode 100644 (file)
index 0000000..b34c88b
--- /dev/null
@@ -0,0 +1,5 @@
+{{#text}}
+<a href="{{{url}}}">
+    {{#icon}}{{{get_icon_html}}}{{/icon}}<span class="sr-only">{{text}}</span>
+</a>
+{{/text}}
\ No newline at end of file