From 509f623b24186256bcdf20ff9f5dfdd245f589f4 Mon Sep 17 00:00:00 2001
From: Ron Lucke <lucke@elan-ev.de>
Date: Fri, 18 Oct 2024 14:34:22 +0000
Subject: [PATCH] Neues Design/Blubber: Seitenleiste noch nicht optimal
Closes #4673
Merge request studip/studip!3522
---
.../assets/stylesheets/scss/blubber.scss | 33 ++++++++++++++++---
.../vue/components/blubber/ThreadsWidget.vue | 7 ++--
2 files changed, 32 insertions(+), 8 deletions(-)
diff --git a/resources/assets/stylesheets/scss/blubber.scss b/resources/assets/stylesheets/scss/blubber.scss
index 8c5f5994063..6e1499967ca 100644
--- a/resources/assets/stylesheets/scss/blubber.scss
+++ b/resources/assets/stylesheets/scss/blubber.scss
@@ -345,15 +345,18 @@
height: 50px;
max-height: 50px;
overflow: hidden;
- padding: 10px;
+ padding: 10px 5px 10px 10px;
cursor: pointer;
color: var(--base-color);
- font-weight: bold;
+ font-weight: 400;
border-left: solid 4px transparent;
&.unseen {
- border-color: var(--active-color);
- padding-left: 7px;
+ font-weight: 700;
+
+ .info time {
+ font-weight: 700;
+ }
}
&[v-if],
@@ -389,10 +392,30 @@
flex-direction: column;
height: 60px;
max-height: 60px;
+ width: 100%;
overflow: hidden;
- .name {
+
+ .title {
max-height: 40px;
overflow: hidden;
+ display: flex;
+ flex-direction: row;
+ justify-content: space-between;
+
+ .thread-name {
+ flex-grow: 1;
+ }
+ .unseen-comments-counter {
+ width: 20px;
+ height: 20px;
+ line-height: 20px;
+ text-align: center;
+ background-color: var(--color--red-1);
+ font-size: 12px;
+ font-weight: normal;
+ border-radius: 10px;
+ color: var(--color--font-inverted);
+ }
}
time {
font-size: 0.8em;
diff --git a/resources/vue/components/blubber/ThreadsWidget.vue b/resources/vue/components/blubber/ThreadsWidget.vue
index 15f91abc68d..c19efb437e4 100644
--- a/resources/vue/components/blubber/ThreadsWidget.vue
+++ b/resources/vue/components/blubber/ThreadsWidget.vue
@@ -14,8 +14,9 @@
<a :href="link(thread.id)">
<div class="avatar" :style="{ backgroundImage: 'url(' + thread.avatar + ')' }"></div>
<div class="info">
- <div class="name">
- {{ thread.name }}
+ <div class="title">
+ <span class="thread-name">{{ thread.name }}</span>
+ <span v-if="thread.unseenComments > 0" class="unseen-comments-counter">{{ thread.unseenComments }}</span>
</div>
<studip-date-time
:timestamp="threadLatestActivity(thread)"
@@ -33,7 +34,7 @@
<template #actions>
<a :href="urlCompose" data-dialog="width=600;height=300">
- <studip-icon shape="add" class="text-bottom" />
+ <studip-icon shape="add" />
</a>
</template>
</SidebarWidget>
--
GitLab