From ee9d08a5f82368ec7d31bed49d39aba9b07931ec Mon Sep 17 00:00:00 2001 From: Maksim Sukharev Date: Sat, 20 Jul 2024 18:27:34 +0200 Subject: [PATCH 1/3] style: make type icon in LeftSidebar blend with background Signed-off-by: Maksim Sukharev --- .../ConversationsList/Conversation.vue | 23 +++++++++++++++++++ 1 file changed, 23 insertions(+) diff --git a/src/components/LeftSidebar/ConversationsList/Conversation.vue b/src/components/LeftSidebar/ConversationsList/Conversation.vue index 4cfdf3334d5..42196b27f48 100644 --- a/src/components/LeftSidebar/ConversationsList/Conversation.vue +++ b/src/components/LeftSidebar/ConversationsList/Conversation.vue @@ -25,6 +25,7 @@ :name="item.displayName" :title="item.displayName" :data-nav-id="`conversation_${item.token}`" + :class="['conversation', { 'conversation--active': isActive }]" :actions-aria-label="t('spreed', 'Conversation actions')" :to="to" :bold="!!item.unreadMessages" @@ -341,6 +342,28 @@ export default { color: var(--color-error); } +.conversation { + // Overwrite ConversationIcon styles to blend a type icon with NcListItem + & :deep(.list-item:hover .conversation-icon__type) { + background-color: var(--color-background-hover); + border-color: var(--color-background-hover); + } + + &--active { + &:deep(.list-item .conversation-icon__type) { + color: var(--color-primary-element-text); + background-color: var(--color-primary-element); + border-color: var(--color-primary-element); + } + + &:deep(.list-item:hover .conversation-icon__type) { + color: var(--color-primary-element-text); + background-color: var(--color-primary-element-hover); + border-color: var(--color-primary-element-hover); + } + } +} + :deep(.dialog) { padding-block: 0 8px; padding-inline: 12px 8px; From 3e5626cfd92ff8708f700b2727bcae4339df4425 Mon Sep 17 00:00:00 2001 From: Maksim Sukharev Date: Sat, 20 Jul 2024 18:29:45 +0200 Subject: [PATCH 2/3] style: restrict NcTextArea resizing to vertical Signed-off-by: Maksim Sukharev --- .../NewConversationDialog/NewConversationSetupPage.vue | 1 + 1 file changed, 1 insertion(+) diff --git a/src/components/NewConversationDialog/NewConversationSetupPage.vue b/src/components/NewConversationDialog/NewConversationSetupPage.vue index 404834497df..931173580f4 100644 --- a/src/components/NewConversationDialog/NewConversationSetupPage.vue +++ b/src/components/NewConversationDialog/NewConversationSetupPage.vue @@ -36,6 +36,7 @@ :placeholder="t('spreed', 'Enter a description for this conversation')" :label="t('spreed', 'Description')" :error="!!descriptionErrorLabel" + resize="vertical" label-visible /> {{ descriptionErrorLabel }} From 44614fff67884966d4f08d6e977786fdfc61a561 Mon Sep 17 00:00:00 2001 From: Maksim Sukharev Date: Sat, 20 Jul 2024 23:28:15 +0200 Subject: [PATCH 3/3] style: reduce Conversation component height Signed-off-by: Maksim Sukharev --- .../LeftSidebar/ConversationsList/Conversation.vue | 9 +++++++++ .../ConversationsList/ConversationsListVirtual.vue | 7 ++++++- 2 files changed, 15 insertions(+), 1 deletion(-) diff --git a/src/components/LeftSidebar/ConversationsList/Conversation.vue b/src/components/LeftSidebar/ConversationsList/Conversation.vue index 42196b27f48..b60c86a5261 100644 --- a/src/components/LeftSidebar/ConversationsList/Conversation.vue +++ b/src/components/LeftSidebar/ConversationsList/Conversation.vue @@ -343,6 +343,15 @@ export default { } .conversation { + // Overwrite NcListItem styles to reduce a component height + padding: 0 !important; + margin: var(--default-grid-baseline); + width: calc(100% - var(--default-grid-baseline) * 2); + + :deep(.list-item) { + padding-block: var(--default-grid-baseline); + } + // Overwrite ConversationIcon styles to blend a type icon with NcListItem & :deep(.list-item:hover .conversation-icon__type) { background-color: var(--color-background-hover); diff --git a/src/components/LeftSidebar/ConversationsList/ConversationsListVirtual.vue b/src/components/LeftSidebar/ConversationsList/ConversationsListVirtual.vue index be410141dd7..63aa47e07b5 100644 --- a/src/components/LeftSidebar/ConversationsList/ConversationsListVirtual.vue +++ b/src/components/LeftSidebar/ConversationsList/ConversationsListVirtual.vue @@ -42,7 +42,12 @@ import LoadingPlaceholder from '../../UIShared/LoadingPlaceholder.vue' import 'vue-virtual-scroller/dist/vue-virtual-scroller.css' -const CONVERSATION_ITEM_SIZE = 66 +/* Consider: + * 48 = 2 * var(--default-line-height) - 2 lines of text + * 8 = 2 * var(--default-grid-baseline) - item padding + * 4 = var(--default-grid-baseline) - item margin (collapsed) + */ +const CONVERSATION_ITEM_SIZE = 60 export default { name: 'ConversationsListVirtual',