MDL-55607 theme_noname: Remove icon styles - We only need .icon every…

…where. Part of MDL-55071
UniGe · Sep 23, 2016 · 072364d · 072364d
1 parent c1d6e95
commit 072364d
Show file tree

Hide file tree

Showing 12 changed files with 72 additions and 160 deletions.
diff --git a/theme/noname/scss/moodle.scss b/theme/noname/scss/moodle.scss
@@ -14,6 +14,7 @@ $breadcrumb-divider-rtl: "◀" !default;
 // Old Moodle stuff from base theme.
 // Massive, needs broken up.
 @import "moodle/core";
+@import "moodle/icons";
 @import "moodle/admin";
 @import "moodle/blocks";
 @import "moodle/calendar";

diff --git a/theme/noname/scss/moodle/admin.scss b/theme/noname/scss/moodle/admin.scss
@@ -592,10 +592,6 @@
         }
 
         .displayname {
-            .pluginicon {
-                margin-right: 5px;
-                width: 16px;
-            }
             .plugindir {
                 @extend .text-muted;
                 font-size: $font-size-sm;

diff --git a/theme/noname/scss/moodle/core.scss b/theme/noname/scss/moodle/core.scss
@@ -171,14 +171,6 @@ img.resize {
 .action-menu {
     white-space: nowrap;
 }
-.action-menu img {
-    width: 16px;
-    height: 16px;
-    box-sizing: content-box;
-}
-.action-menu .dropdown-menu img {
-    padding-right: 0.5rem;
-}
 .action-menu .userpicture {
     width: auto;
     height: auto;
@@ -193,33 +185,11 @@ img.resize {
     width: 0.8em;
 }
 /* Icon styles */
-img.icon,
-img.iconhelp, .helplink img {
-    height: 16px;
-    vertical-align: text-bottom;
-    width: 16px;
-    padding-right: 0.5rem;
-    box-sizing: content-box;
-}
-img.iconlarge {
+img.activityicon {
     height: 24px;
     width: 24px;
     vertical-align: middle;
 }
-img.iconsort {
-    vertical-align: text-bottom;
-    padding-left: .3em;
-    margin-bottom: .15em;
-}
-img.icontoggle {
-    height: 17px;
-    vertical-align: middle;
-    width: 50px;
-}
-img.iconkbhelp {
-    height: 17px;
-    width: 49px;
-}
 .boxaligncenter {
     margin-left: auto;
     margin-right: auto;
@@ -259,11 +229,6 @@ img.uihint {
 table.flexible .emptyrow {
     display: none;
 }
-img.emoticon {
-    vertical-align: middle;
-    width: 15px;
-    height: 15px;
-}
 form.popupform,
 form.popupform div {
     display: inline;
@@ -1305,9 +1270,6 @@ body#page-lib-editor-tinymce-plugins-moodlemedia-preview {
         input[type=radio] {
             display: inline-block;
         }
-        .modicon {
-            display: inline-block;
-        }
         .typename {
             display: inline-block;
             width: 65%;
@@ -1327,20 +1289,12 @@ body#page-lib-editor-tinymce-plugins-moodlemedia-preview {
     padding-bottom: 0.4em;
 }
 .choosercontainer #chooseform .option .typename,
-.choosercontainer #chooseform .option span.modicon img.icon,
-.choosercontainer #chooseform .nonoption .typename,
-.choosercontainer #chooseform .nonoption span.modicon img.icon {
+.choosercontainer #chooseform .nonoption .typename {
     padding: 0 0 0 0.5em;
 }
 
-.chooserdialogue-course-modchooser .choosercontainer #chooseform .option span.modicon img.icon,
-.chooserdialogue-course-modchooser .choosercontainer #chooseform .nonoption span.modicon img.icon {
-    height: 24px;
-    width: 24px;
-}
 .choosercontainer #chooseform .option input[type=radio],
-.choosercontainer #chooseform .option span.typename,
-.choosercontainer #chooseform .option span.modicon {
+.choosercontainer #chooseform .option span.typename {
     vertical-align: middle;
 }
 .choosercontainer #chooseform .option label {

diff --git a/theme/noname/scss/moodle/course.scss b/theme/noname/scss/moodle/course.scss
@@ -29,11 +29,6 @@
 .section_add_menus .urlselect select {
     margin-left: .2em;
 }
-.section_add_menus .urlselect img.iconhelp {
-    padding: 0;
-    margin: 0;
-    vertical-align: text-bottom;
-}
 
 .sitetopic ul.section {
     margin: 0;
@@ -90,13 +85,6 @@
             display: table-cell;
             padding-right: 4px;
             min-height: 2em;
-
-            .dimmed {
-                img.activityicon {
-                  opacity: 0.5;
-                  filter: alpha(opacity=50);
-                }
-            }
         }
     }
     .label {
@@ -437,10 +425,6 @@ span.editinstructions {
     margin-top: .2em;
     padding: .3em;
 }
-.dndupload-preview img.icon {
-    vertical-align: text-bottom;
-    padding: 0;
-}
 .dndupload-progress-outer {
     @extend progress;
 }
@@ -462,9 +446,6 @@ span.editinstructions {
     margin: 0 .22em;
     vertical-align: text-bottom;
 }
-#page-admin-course-manage #movecourses td img.icon {
-    padding: 0;
-}
 
 #coursesearch {
     margin-top: 1em;
@@ -523,15 +504,10 @@ span.editinstructions {
     padding:0;
     margin:0;
 }
-.coursebox .enrolmenticons {
-    padding:3px 0;
-    float:right;
-}
 .coursebox .moreinfo {
     padding:3px 0;
     float:right;
 }
-.coursebox .enrolmenticons img,
 .coursebox .moreinfo img {
     margin:0 .2em;
 }
@@ -784,11 +760,6 @@ span.editinstructions {
                 background-color: $table-bg-hover;
             }
         }
-        .tree-icon {
-            margin: 2px 6px 0 0;
-            width:12px;
-            vertical-align:inherit;
-        }
         &[data-selected='1'] {
             > div {
                 background-color: $table-bg-accent;
@@ -798,15 +769,6 @@ span.editinstructions {
             }
         }
 
-        // Tree item indenting to represent depth.
-        .tree-icon {margin-left:0;}
-        li .tree-icon {margin-left:1em;}
-        li li .tree-icon {margin-left:2em;}
-        li li li .tree-icon {margin-left:3em;}
-        li li li li .tree-icon {margin-left:4em;}
-        li li li li li .tree-icon {margin-left:4.5em;}
-        li li li li li li .tree-icon {margin-left:5em;}
-        li li li li li li li .tree-icon {margin-left:5.5em;}
     }
 
     .item-actions {

diff --git a/theme/noname/scss/moodle/grade.scss b/theme/noname/scss/moodle/grade.scss
@@ -50,12 +50,6 @@
             margin: 0.5em;
             padding: 1em;
             border: 1px solid #aaa;
-            .action-icon {
-                display: inline-block;
-                position: relative;
-                height: 64px;
-                width: 64px;
-            }
             .action-text {
                 position: relative;
                 top: 0.4em;
@@ -210,9 +204,6 @@
     td.column-name {
         padding-left: 24px;
     }
-    .column-name h4 img.icon {
-        padding-left: 0;
-    }
     .category input[type="text"],
     .category .column-range,
     .categoryitem,

diff --git a/theme/noname/scss/moodle/icons.scss b/theme/noname/scss/moodle/icons.scss
@@ -0,0 +1,25 @@
+// The only class we need for icons is .icon
+// Standardize the size, padding and alignment for all icons in Moodle.
+.icon {
+    width: 16px;
+    height: 16px;
+    vertical-align: middle;
+    margin: 0;
+    padding: 0;
+    box-sizing: content-box;
+    margin-right: 0.5rem;
+}
+
+a:first-of-type > .icon {
+    margin-left: 0.5rem;
+}
+
+// Fix the cog icon for an action menu.
+.action-menu > .dropdown {
+    margin-left: -0.5rem;
+}
+
+// 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 {
+    margin-left: 0px;
+}
diff --git a/theme/noname/scss/moodle/message.scss b/theme/noname/scss/moodle/message.scss
@@ -230,12 +230,6 @@ table.message .searchresults td {
 .message .messagearea .messagehistory .messageactive {
   background-color: $table-bg-hover;
 }
-.message .messagearea .messagehistory .messagecontent .deleteicon {
-    width: 20px;
-    position: absolute;
-    top: -2px;
-    right: 0;
-}
 .message .messagearea .messagesend {
     padding-top: 20px;
     clear: both;

diff --git a/theme/noname/scss/moodle/modules.scss b/theme/noname/scss/moodle/modules.scss
@@ -346,32 +346,6 @@ div#dock {
         }
 
 
-        // A little bit of visual feedback for the action menu when Javascript is disabled.
-        .menu {
-            .menu-action.icon {
-                img {
-                    border-radius: 0;
-                    background: transparent;
-                    box-shadow: none;
-                }
-                &:hover img {
-                    background: #fff;
-                    border-radius: 4px;
-                    box-shadow: 0px 0px 16px rgba(0, 0, 0, 0.125);
-                }
-            }
-        }
-        &[data-enhanced] .menu {
-            .menu-action.icon,
-            .menu-action.icon:hover {
-                img {
-                    border-radius: 0;
-                    background: transparent;
-                    box-shadow: none;
-                }
-            }
-        }
-
     }
 }
 .jsenabled {

diff --git a/theme/noname/scss/moodle/question.scss b/theme/noname/scss/moodle/question.scss
@@ -134,9 +134,6 @@
         margin-left: 0px;
         float: none;
     }
-    img.iconsmall {
-        padding: 0;
-    }
     .iconcol {
         padding: 3px;
     }

diff --git a/theme/noname/scss/moodle/undo.scss b/theme/noname/scss/moodle/undo.scss
@@ -143,27 +143,6 @@ div.c1.btn {
 #questionbank + .container {
     width: auto;
 }
-// In Moodle .hide is the eye icon
-// In Bootstrap it hides things
-img.hide {
-    display: inherit;
-}
-
-// Bootstrap adds a background sprite to anything with classname starting "icon-".
-// we only want to load it if we use them in content.
-.icon-bar,
-img.icon-post,
-img.icon-info,
-img.icon-warn,
-img.icon-pre {
-    background-image: none;
-}
-
-//Bootstrap needs tooltips to be specified. Moodle does not use this
-.tooltip {
-    opacity: 1;
-    display: inline;
-}
 
 // Allow the custom menu to expand/collapse when the user hovers over it with JS disabled.
 body:not(.jsenabled) .dropdown:hover > .dropdown-menu {
@@ -185,4 +164,4 @@ body:not(.jsenabled) .langmenu:hover > .dropdown-menu,
 
 ol {
     margin: 0 0 $line-height-base / 2 2.5em;
-}
+}
diff --git a/theme/noname/scss/moodle/user.scss b/theme/noname/scss/moodle/user.scss
@@ -63,9 +63,6 @@
     }
 }
 
-.userlist .action-icon img {
-    vertical-align: middle;
-}
 .userlist #showall {
     margin: 10px 0;
 }

diff --git a/theme/noname/templates/core/pix_icon.mustache b/theme/noname/templates/core/pix_icon.mustache
@@ -0,0 +1,42 @@
+{{!
+    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/>.
+}}
+{{!
+    @template core/pix_icon
+
+    Moodle pix_icon template.
+
+    The purpose of this template is to render a pix_icon.
+
+    Classes required for JS:
+    * none
+
+    Data attributes required for JS:
+    * none
+
+    Context variables required for this template:
+    * attributes Array of name / value pairs.
+
+    Example context (json):
+    {
+        "attributes": [
+            { "name": "src", "value": "http://moodle.com/wp-content/themes/moodle/images/logo-hat2.png" },
+            { "name": "class", "value": "iconsmall" }
+        ]
+    }
+
+}}
+<img class="icon" {{#attributes}}{{name}}="{{value}}" {{/attributes}}/>