From 00fc7767baf4157427164ef5cf127887690dbcf5 Mon Sep 17 00:00:00 2001 From: Ramona Beinstingel Date: Thu, 4 Jul 2024 16:08:16 +0200 Subject: [PATCH 1/8] Tiny UI Improvements --- .../course-conversations.component.html | 6 +++--- .../course-conversations.component.scss | 8 ++------ .../course-wide-search.component.html | 12 +++++++----- .../conversation-header.component.html | 10 +++++----- .../conversation-messages.component.html | 2 +- .../accordion-add-options.component.scss | 4 ++-- .../conversation-options.component.html | 4 ++-- .../conversation-options.component.scss | 5 +++++ .../sidebar-card-small.component.html | 8 ++++---- .../sidebar-card-small.component.scss | 15 --------------- 10 files changed, 31 insertions(+), 43 deletions(-) diff --git a/src/main/webapp/app/overview/course-conversations/course-conversations.component.html b/src/main/webapp/app/overview/course-conversations/course-conversations.component.html index d66b3f8edaf2..d91230c81b50 100644 --- a/src/main/webapp/app/overview/course-conversations/course-conversations.component.html +++ b/src/main/webapp/app/overview/course-conversations/course-conversations.component.html @@ -1,5 +1,5 @@ -
+
} -
+
@if (activeConversation) { @@ -50,7 +50,7 @@ }
-
+
@if (!!postInThread) {
- @if (!courseWideSearchConfig.searchTerm) { -

All Messages

- } @else { -

Search Results for "{{ courseWideSearchConfig.searchTerm }}"

- } +

+ @if (!courseWideSearchConfig.searchTerm) { + All Messages + } @else { + Search Results for "{{ courseWideSearchConfig.searchTerm }}" + } +

diff --git a/src/main/webapp/app/overview/course-conversations/layout/conversation-header/conversation-header.component.html b/src/main/webapp/app/overview/course-conversations/layout/conversation-header/conversation-header.component.html index db8ac0d2a6c0..7e81985c5289 100644 --- a/src/main/webapp/app/overview/course-conversations/layout/conversation-header/conversation-header.component.html +++ b/src/main/webapp/app/overview/course-conversations/layout/conversation-header/conversation-header.component.html @@ -2,7 +2,7 @@
-

+

@if (activeConversationAsChannel) {
@if (activeConversationAsChannel?.subTypeReferenceId) { - + {{ channelSubTypeReferenceTranslationKey | artemisTranslate }} } - @if (canAddUsers(activeConversation)) { - } diff --git a/src/main/webapp/app/overview/course-conversations/layout/conversation-messages/conversation-messages.component.html b/src/main/webapp/app/overview/course-conversations/layout/conversation-messages/conversation-messages.component.html index 9b89efeaed9f..c85bcb8e4dc8 100644 --- a/src/main/webapp/app/overview/course-conversations/layout/conversation-messages/conversation-messages.component.html +++ b/src/main/webapp/app/overview/course-conversations/layout/conversation-messages/conversation-messages.component.html @@ -1,5 +1,5 @@ @if (course) { -
+
diff --git a/src/main/webapp/app/shared/sidebar/accordion-add-options/accordion-add-options.component.scss b/src/main/webapp/app/shared/sidebar/accordion-add-options/accordion-add-options.component.scss index 2fe32f83bf4d..a9acacbbb52e 100644 --- a/src/main/webapp/app/shared/sidebar/accordion-add-options/accordion-add-options.component.scss +++ b/src/main/webapp/app/shared/sidebar/accordion-add-options/accordion-add-options.component.scss @@ -4,9 +4,9 @@ .sidebar-button { border: 0; - border-radius: var(--bs-btn-border-radius); &:hover { - background-color: var(--metis-conversation-sidebar-button-background-hover); + background-color: var(--transparent); + color: var(--link-item-color); } } diff --git a/src/main/webapp/app/shared/sidebar/conversation-options/conversation-options.component.html b/src/main/webapp/app/shared/sidebar/conversation-options/conversation-options.component.html index 7d712ea51d3f..39d52538a222 100644 --- a/src/main/webapp/app/shared/sidebar/conversation-options/conversation-options.component.html +++ b/src/main/webapp/app/shared/sidebar/conversation-options/conversation-options.component.html @@ -1,9 +1,9 @@
-
-
diff --git a/src/main/webapp/app/shared/sidebar/conversation-options/conversation-options.component.scss b/src/main/webapp/app/shared/sidebar/conversation-options/conversation-options.component.scss index e70e71d66bfa..b700d287dae9 100644 --- a/src/main/webapp/app/shared/sidebar/conversation-options/conversation-options.component.scss +++ b/src/main/webapp/app/shared/sidebar/conversation-options/conversation-options.component.scss @@ -1,6 +1,11 @@ .option-buttons { .sidebar-button { border-width: 0; + + &:hover { + background-color: var(--transparent); + color: var(--link-item-color); + } } .dropdown-toggle::after { diff --git a/src/main/webapp/app/shared/sidebar/sidebar-card-small/sidebar-card-small.component.html b/src/main/webapp/app/shared/sidebar/sidebar-card-small/sidebar-card-small.component.html index 5e949709c866..4ba959ab59fc 100644 --- a/src/main/webapp/app/shared/sidebar/sidebar-card-small/sidebar-card-small.component.html +++ b/src/main/webapp/app/shared/sidebar/sidebar-card-small/sidebar-card-small.component.html @@ -2,18 +2,18 @@ operates differently over the MetisConversations service, it will get adjusted in a followup PR -->
-
+
@if (sidebarItem.conversation) { -
+
} diff --git a/src/main/webapp/app/shared/sidebar/sidebar-card-small/sidebar-card-small.component.scss b/src/main/webapp/app/shared/sidebar/sidebar-card-small/sidebar-card-small.component.scss index 05f2dbe9b661..97e8bdb01d29 100644 --- a/src/main/webapp/app/shared/sidebar/sidebar-card-small/sidebar-card-small.component.scss +++ b/src/main/webapp/app/shared/sidebar/sidebar-card-small/sidebar-card-small.component.scss @@ -13,18 +13,3 @@ border-color: var(--sidebar-card-selected-bg) !important; } } - -.padding-small { - padding-bottom: 0.1rem; - padding-top: 0.5rem; - padding-left: 0.25rem; -} - -.inline-block { - display: inline-block; - vertical-align: middle; -} - -.padding-bottom { - padding-bottom: 0.4rem; -} From 72f19b1a4d66cf7fe72904e0dc6b66d436410a62 Mon Sep 17 00:00:00 2001 From: Ramona Beinstingel Date: Thu, 18 Jul 2024 16:59:47 +0200 Subject: [PATCH 2/8] more improvements --- .../course-wide-search.component.html | 1 - .../conversation-messages.component.html | 6 +-- ...conversation-thread-sidebar.component.html | 2 +- .../app/shared/metis/post/post.component.html | 32 +++++++-------- .../posting-content.component.scss | 1 + .../answer-post-header.component.html | 10 ++--- .../post-header/post-header.component.html | 32 +++++++-------- .../answer-post-reactions-bar.component.html | 19 +++++---- .../post-reactions-bar.component.html | 41 ++++++++++--------- .../posting-reactions-bar.component.scss | 11 ++--- .../posting-thread.component.html | 2 +- .../answer-post-header.component.spec.ts | 4 +- .../post-header/post-header.component.spec.ts | 2 +- 13 files changed, 77 insertions(+), 86 deletions(-) diff --git a/src/main/webapp/app/overview/course-conversations/course-wide-search/course-wide-search.component.html b/src/main/webapp/app/overview/course-conversations/course-wide-search/course-wide-search.component.html index a72ba04b594c..bff54e94c32c 100644 --- a/src/main/webapp/app/overview/course-conversations/course-wide-search/course-wide-search.component.html +++ b/src/main/webapp/app/overview/course-conversations/course-wide-search/course-wide-search.component.html @@ -88,7 +88,6 @@

}
-
+
@if (isFetchingPosts) {
@@ -64,7 +64,6 @@
@for (post of posts; track postsTrackByFn($index, post)) { -
+
} -
@if (_activeConversation && newPost && canCreateNewMessageInConversation(_activeConversation)) {
diff --git a/src/main/webapp/app/overview/course-conversations/layout/conversation-thread-sidebar/conversation-thread-sidebar.component.html b/src/main/webapp/app/overview/course-conversations/layout/conversation-thread-sidebar/conversation-thread-sidebar.component.html index 96cc87834937..07c2bac953ab 100644 --- a/src/main/webapp/app/overview/course-conversations/layout/conversation-thread-sidebar/conversation-thread-sidebar.component.html +++ b/src/main/webapp/app/overview/course-conversations/layout/conversation-thread-sidebar/conversation-thread-sidebar.component.html @@ -20,7 +20,7 @@
@if (post !== undefined) {
-
+
-
+
+
-
+
@if (showAnnouncementIcon) { @@ -66,22 +66,20 @@ @if (displayInlineInput && !readOnlyMode) { } -
+
@if (!previewMode) { -
- -
+ }
diff --git a/src/main/webapp/app/shared/metis/posting-content/posting-content.component.scss b/src/main/webapp/app/shared/metis/posting-content/posting-content.component.scss index 59e68a3a7ba8..8510a7b1d6be 100644 --- a/src/main/webapp/app/shared/metis/posting-content/posting-content.component.scss +++ b/src/main/webapp/app/shared/metis/posting-content/posting-content.component.scss @@ -12,4 +12,5 @@ .edited-text { color: var(--metis-gray); + font-size: smaller; } diff --git a/src/main/webapp/app/shared/metis/posting-header/answer-post-header/answer-post-header.component.html b/src/main/webapp/app/shared/metis/posting-header/answer-post-header/answer-post-header.component.html index c32e075170c1..fe1a9112ea21 100644 --- a/src/main/webapp/app/shared/metis/posting-header/answer-post-header/answer-post-header.component.html +++ b/src/main/webapp/app/shared/metis/posting-header/answer-post-header/answer-post-header.component.html @@ -1,17 +1,17 @@
- - {{ + + {{ userRoleBadge | artemisTranslate }} - + {{ posting.author?.name }} - @if (postingIsOfToday) { - {{ todayFlag | artemisTranslate }} + {{ todayFlag | artemisTranslate }} } - + {{ postingIsOfToday ? (posting.creationDate | artemisDate: 'time') : (posting.creationDate | artemisDate: 'short-date') }} diff --git a/src/main/webapp/app/shared/metis/posting-header/post-header/post-header.component.html b/src/main/webapp/app/shared/metis/posting-header/post-header/post-header.component.html index 883b22541646..2d6423a9be5e 100644 --- a/src/main/webapp/app/shared/metis/posting-header/post-header/post-header.component.html +++ b/src/main/webapp/app/shared/metis/posting-header/post-header/post-header.component.html @@ -1,21 +1,19 @@ -
-
- - @if (posting.author) { - {{ - userRoleBadge | artemisTranslate - }} - - {{ posting.author?.name }} - - } - - - @if (postingIsOfToday) { - {{ todayFlag | artemisTranslate }} - } - - {{ postingIsOfToday ? (posting.creationDate | artemisDate: 'time') : (posting.creationDate | artemisDate: 'short-date') }} +
+
+ @if (posting.author) { + {{ + userRoleBadge | artemisTranslate + }} + + {{ posting.author?.name }} + } + - + @if (postingIsOfToday) { + {{ todayFlag | artemisTranslate }} + } + + {{ postingIsOfToday ? (posting.creationDate | artemisDate: 'time') : (posting.creationDate | artemisDate: 'short-date') }} @if (posting.resolved) { }
- +
@if (!isReadOnlyMode) { +
@if (!isCommunicationPage) { @if (sortedAnswerPosts.length === 0) { -
+
} @if (!showAnswers && sortedAnswerPosts.length > 0) { -
+
} -
- +
+
} -
+
@if (displayPriority === DisplayPriority.PINNED || canPin) {
-