From b57422a8a850428c39fb622c597c98a63e398ad5 Mon Sep 17 00:00:00 2001
From: Jan-Hendrik Willms <tleilax+studip@gmail.com>
Date: Thu, 11 May 2023 06:42:14 +0000
Subject: [PATCH] recolor icons via css, fixes #2629
Closes #2629
Merge request studip/studip!1780
---
lib/classes/ResponsiveHelper.php | 8 +++-----
resources/assets/stylesheets/scss/responsive.scss | 5 ++++-
resources/vue/components/responsive/NavigationItem.vue | 4 ++--
3 files changed, 9 insertions(+), 8 deletions(-)
diff --git a/lib/classes/ResponsiveHelper.php b/lib/classes/ResponsiveHelper.php
index 713dd2b9ac4..b470eb07f43 100644
--- a/lib/classes/ResponsiveHelper.php
+++ b/lib/classes/ResponsiveHelper.php
@@ -230,14 +230,12 @@ class ResponsiveHelper
}
$avatar = $avatarClass::getAvatar($course->id);
- if ($avatar->is_customized()) {
- $icon = $avatar->getURL(Avatar::SMALL);
- } else {
- $icon = $standardIcon;
- }
+ $hasAvatar = $avatar->is_customized();
+ $icon = $hasAvatar ? $avatar->getURL(Avatar::SMALL) : $standardIcon;
$cnav = [
'icon' => $icon,
+ 'avatar' => $hasAvatar,
'title' => $course->getFullname(),
'url' => URLHelper::getURL($url, ['cid' => $course->id]),
'parent' => 'browse/my_courses',
diff --git a/resources/assets/stylesheets/scss/responsive.scss b/resources/assets/stylesheets/scss/responsive.scss
index eb0045de10c..cbf2e752059 100644
--- a/resources/assets/stylesheets/scss/responsive.scss
+++ b/resources/assets/stylesheets/scss/responsive.scss
@@ -242,8 +242,11 @@ $sidebarOut: -330px;
img,
svg {
- vertical-align: text-bottom;
+ &:not(.avatar) {
+ filter: contrast(0) brightness(2);
+ }
margin-right: 10px;
+ vertical-align: text-bottom;
}
}
diff --git a/resources/vue/components/responsive/NavigationItem.vue b/resources/vue/components/responsive/NavigationItem.vue
index f98df571899..5fb1452b22f 100644
--- a/resources/vue/components/responsive/NavigationItem.vue
+++ b/resources/vue/components/responsive/NavigationItem.vue
@@ -10,7 +10,7 @@
>
<span class="navigation-icon">
<studip-icon v-if="isCourse" shape="seminar" role="info_alt" :size="24" alt=""></studip-icon>
- <img v-if="item.icon" :src="iconUrl" width="24" alt="" />
+ <img v-if="item.icon" :src="iconUrl" width="24" alt="" :class="{avatar: item.avatar}"/>
</span>
<span class="navigation-text">
{{ item.title }}
@@ -36,7 +36,7 @@
:aria-label="navigateToText(item.title)"
>
<studip-icon v-if="isCourse" shape="seminar" role="info_alt" :size="24" alt=""></studip-icon>
- <img v-if="item.icon" :src="iconUrl" width="24" alt="" />
+ <img v-if="item.icon" :src="iconUrl" width="24" alt="" :class="{avatar: item.avatar}"/>
{{ item.title }}
</a>
</div>
--
GitLab