reduce background images

lib/classes/Icon.class.php

@@ -112,7 +112,7 @@ class Icon
         return new self($shape, $role, $attributes);
     }
 
-    protected static $rendering_mode = self::RENDERING_MODE_IMG;
+    protected static $rendering_mode = self::RENDERING_MODE_USE;
     protected static $used_shapes = [];
     protected static $used_extras = [];
 
@@ -435,7 +435,7 @@ class Icon
             $result['alt'] = '';
         }
 
-        $classNames = 'icon-role-' . str_replace('_', '-', $this->role);
+        $classNames = 'studipicon icon-role-' . str_replace('_', '-', $this->role);
 
         if (!self::isStatic($this->shape)) {
             $classNames .= ' icon-shape-' . $this->shape;

lib/classes/sidebar/LinkElement.php

@@ -211,9 +211,10 @@ class LinkElement extends WidgetElement implements ArrayAccess
         }
 
         return sprintf(
-            '<%1$s %2$s>%3$s</%1$s>',
+            '<%1$s %2$s>%3$s %4$s</%1$s>',
             $tag,
             arrayToHtmlAttributes($attributes),
+            $this->icon ? $this->icon->asImg(null, ['class' => 'text-bottom']) : '',
             htmlReady($this->label)
         );
     }

resources/assets/stylesheets/scss/sidebar.scss

@@ -120,7 +120,7 @@ ul.widget-list {
         background-repeat: no-repeat;
         background-position: 0 1px;
         background-size: 16px 16px;
-        padding-left: 20px;
+        padding-left: 2px;
         word-wrap: break-word;
     }
 }

resources/vue/components/StudipIcon.vue

@@ -9,7 +9,7 @@
         v-bind="$attrs"
         v-on="$listeners"
     />
-    <img v-else :src="url" :width="size" :height="size" v-bind="$attrs" v-on="$listeners" />
+    <img v-else :src="url" :width="size" :height="size" :class="css_class" v-bind="$attrs" v-on="$listeners" />
 </template>
 
 <script lang="ts">
@@ -32,7 +32,7 @@ export default Vue.extend({
         name: {
             type: String,
             required: false,
-        },
+        }
     },
     computed: {
         url(): string {
@@ -72,6 +72,9 @@ export default Vue.extend({
                     return 'blue';
             }
         },
+        css_class(): string {
+            return 'studipicon ' +  this.$attrs.class; //TODO: is this correct?
+        }
     },
 });
 </script>

templates/sidebar/list-widget.php

 <ul class="<?= implode(' ', $css_classes) ?>" aria-label="<?= htmlReady($title) ?>">
 <? foreach ($elements as $index => $element): ?>
-    <? if ($element instanceof LinkElement): ?>
-        <? $icon = $element->icon ?? null ?>
-        <? if ($icon && $element->isDisabled()): ?>
-            <? $icon = $icon->copyWithRole('inactive') ?>
-        <? endif ?>
-    <? endif ?>
     <li id="<?= htmlReady($index) ?>"
-        <?= isset($icon) ? 'style="' . $icon->asCSS() .'"' : '' ?>
         <?= !empty($element->active) ? 'class="active"' : '' ?>>
         <?= $element->render() ?>
     </li>