diff --git a/src/components/AvatarWrapper/AvatarWrapper.spec.js b/src/components/AvatarWrapper/AvatarWrapper.spec.js
index b7090f25ea4..cf4f6c5702b 100644
--- a/src/components/AvatarWrapper/AvatarWrapper.spec.js
+++ b/src/components/AvatarWrapper/AvatarWrapper.spec.js
@@ -12,6 +12,7 @@ import NcAvatar from '@nextcloud/vue/dist/Components/NcAvatar.js'
import AvatarWrapper from './AvatarWrapper.vue'
+import { AVATAR } from '../../constants.js'
import storeConfig from '../../store/storeConfig.js'
describe('AvatarWrapper.vue', () => {
@@ -39,7 +40,7 @@ describe('AvatarWrapper.vue', () => {
const avatar = wrapper.findComponent(NcAvatar)
expect(avatar.exists()).toBeTruthy()
- expect(avatar.props('size')).toBe(44)
+ expect(avatar.props('size')).toBe(AVATAR.SIZE.DEFAULT)
})
test('component does not render NcAvatar for non-users', () => {
@@ -89,7 +90,7 @@ describe('AvatarWrapper.vue', () => {
expect(avatar.props('showUserStatus')).toBe(true)
expect(avatar.props('showUserStatusCompact')).toBe(false)
expect(avatar.props('preloadedUserStatus')).toBe(PRELOADED_USER_STATUS)
- expect(avatar.props('size')).toBe(44)
+ expect(avatar.props('size')).toBe(AVATAR.SIZE.DEFAULT)
})
})
diff --git a/src/components/ConversationIcon.vue b/src/components/ConversationIcon.vue
index 5ea3f3cf708..82372abbc28 100644
--- a/src/components/ConversationIcon.vue
+++ b/src/components/ConversationIcon.vue
@@ -24,7 +24,7 @@
role="img"
aria-hidden="false"
:aria-label="conversationType.label">
-
+
@@ -265,11 +265,14 @@ export default {
&__type {
position: absolute;
- right: -4px;
- bottom: -4px;
- height: 18px;
- width: 18px;
- border: 2px solid var(--color-main-background);
+ right: -2px;
+ bottom: -2px;
+ display: flex;
+ align-content: center;
+ justify-content: center;
+ height: clamp(14px, 40%, 18px);
+ width: clamp(14px, 40%, 18px);
+ border: 1px solid var(--color-main-background);
background-color: var(--color-main-background);
color: var(--color-main-text);
border-radius: 50%;
diff --git a/src/components/LeftSidebar/ConversationsList/ConversationsListVirtual.vue b/src/components/LeftSidebar/ConversationsList/ConversationsListVirtual.vue
index 024c8ed06b3..5bb9e2e01fe 100644
--- a/src/components/LeftSidebar/ConversationsList/ConversationsListVirtual.vue
+++ b/src/components/LeftSidebar/ConversationsList/ConversationsListVirtual.vue
@@ -27,11 +27,11 @@ import LoadingPlaceholder from '../../UIShared/LoadingPlaceholder.vue'
import 'vue-virtual-scroller/dist/vue-virtual-scroller.css'
/* Consider:
- * 45 = 2lh - 2 lines of text
+ * 36 = 2 * 1.2 * var(--default-font-size) - two lines of text
* 8 = 2 * var(--default-grid-baseline) - item padding
* 4 = var(--default-grid-baseline) - item outline (collapsed)
*/
-const CONVERSATION_ITEM_SIZE = 61
+const CONVERSATION_ITEM_SIZE = 48
export default {
name: 'ConversationsListVirtual',
diff --git a/src/components/LeftSidebar/InvitationHandler.vue b/src/components/LeftSidebar/InvitationHandler.vue
index f0438d24574..07950cd040e 100644
--- a/src/components/LeftSidebar/InvitationHandler.vue
+++ b/src/components/LeftSidebar/InvitationHandler.vue
@@ -226,11 +226,14 @@ export default {
padding-left: 4px;
&__name {
+ line-height: 1.2;
font-weight: bold;
color: var(--color-main-text);
}
&__subname {
+ // Overwrite NcRichText styles
+ line-height: 1.2 !important;
color: var(--color-text-maxcontrast);
}
}
diff --git a/src/components/LeftSidebar/LeftSidebar.vue b/src/components/LeftSidebar/LeftSidebar.vue
index 99c2a1ac315..bec6a2a500d 100644
--- a/src/components/LeftSidebar/LeftSidebar.vue
+++ b/src/components/LeftSidebar/LeftSidebar.vue
@@ -180,7 +180,7 @@
data-nav-id="conversation_create_new"
@click="createConversation(searchText)">
-
+
{{ t('spreed', 'New group conversation') }}
@@ -336,7 +336,7 @@ import SearchBox from '../UIShared/SearchBox.vue'
import TransitionWrapper from '../UIShared/TransitionWrapper.vue'
import { useArrowNavigation } from '../../composables/useArrowNavigation.js'
-import { ATTENDEE, CONVERSATION } from '../../constants.js'
+import { ATTENDEE, AVATAR, CONVERSATION } from '../../constants.js'
import BrowserStorage from '../../services/BrowserStorage.js'
import { getTalkConfig, hasTalkFeature } from '../../services/CapabilitiesManager.ts'
import {
@@ -410,6 +410,7 @@ export default {
const isMobile = useIsMobile()
return {
+ AVATAR,
initializeNavigation,
resetNavigation,
leftSidebar,
@@ -1088,8 +1089,20 @@ export default {
padding: 0 !important;
}
+// Overwrite NcListItem styles
:deep(.list-item) {
+ line-height: 1.2;
overflow: hidden;
outline-offset: -2px;
+
+ // FIXME clean up after nextcloud/vue release
+ .avatardiv .avatardiv__user-status {
+ right: -2px !important;
+ bottom: -2px !important;
+ min-height: 14px !important;
+ min-width: 14px !important;
+ line-height: 1 !important;
+ font-size: clamp(var(--font-size-small), 85%, var(--default-font-size)) !important;
+ }
}
diff --git a/src/components/RightSidebar/Participants/Participant.vue b/src/components/RightSidebar/Participants/Participant.vue
index 56d2c0070e2..b998b9ac592 100644
--- a/src/components/RightSidebar/Participants/Participant.vue
+++ b/src/components/RightSidebar/Participants/Participant.vue
@@ -1135,6 +1135,7 @@ export default {
.participant {
// Overwrite NcListItem styles
:deep(.list-item) {
+ line-height: 1.2;
overflow: hidden;
outline-offset: -2px;
cursor: default;
@@ -1146,6 +1147,16 @@ export default {
button, button * {
cursor: pointer;
}
+
+ // FIXME clean up after nextcloud/vue release
+ .avatardiv .avatardiv__user-status {
+ right: -2px !important;
+ bottom: -2px !important;
+ min-height: 14px !important;
+ min-width: 14px !important;
+ line-height: 1 !important;
+ font-size: clamp(var(--font-size-small), 85%, var(--default-font-size)) !important;
+ }
}
&--offline &__user-name {
diff --git a/src/components/RightSidebar/Participants/ParticipantsListVirtual.vue b/src/components/RightSidebar/Participants/ParticipantsListVirtual.vue
index 128a6cf7cf0..a2eea066ccd 100644
--- a/src/components/RightSidebar/Participants/ParticipantsListVirtual.vue
+++ b/src/components/RightSidebar/Participants/ParticipantsListVirtual.vue
@@ -26,7 +26,12 @@ import LoadingPlaceholder from '../../UIShared/LoadingPlaceholder.vue'
import 'vue-virtual-scroller/dist/vue-virtual-scroller.css'
-const PARTICIPANT_ITEM_SIZE = 64
+/* Consider:
+ * 36 = 2 * 1.2 * var(--default-font-size) - two lines of text
+ * 8 = 2 * var(--default-grid-baseline) - item padding
+ * 4 = var(--default-grid-baseline) - item outline (collapsed)
+ */
+const PARTICIPANT_ITEM_SIZE = 48
export default {
name: 'ParticipantsListVirtual',
diff --git a/src/components/TopBar/TopBar.vue b/src/components/TopBar/TopBar.vue
index 256f0833ba2..4cab49eeb24 100644
--- a/src/components/TopBar/TopBar.vue
+++ b/src/components/TopBar/TopBar.vue
@@ -12,7 +12,7 @@
class="conversation-icon"
:offline="isPeerInactive"
:item="conversation"
- :size="iconSize"
+ :size="AVATAR.SIZE.DEFAULT"
:disable-menu="false"
show-user-online-status
:hide-favorite="false"
@@ -129,7 +129,7 @@ import BreakoutRoomsEditor from '../BreakoutRoomsEditor/BreakoutRoomsEditor.vue'
import ConversationIcon from '../ConversationIcon.vue'
import { useGetParticipants } from '../../composables/useGetParticipants.js'
-import { CONVERSATION } from '../../constants.js'
+import { AVATAR, CONVERSATION } from '../../constants.js'
import BrowserStorage from '../../services/BrowserStorage.js'
import { getTalkConfig } from '../../services/CapabilitiesManager.ts'
import { useChatExtrasStore } from '../../stores/chatExtras.js'
@@ -177,12 +177,11 @@ export default {
setup() {
useGetParticipants()
- const iconSize = parseFloat(getComputedStyle(document.documentElement)
- .getPropertyValue('--default-clickable-area'))
+
return {
+ AVATAR,
localCallParticipantModel,
localMediaModel,
- iconSize,
chatExtrasStore: useChatExtrasStore(),
isMobile: useIsMobile(),
}
diff --git a/src/components/UIShared/LoadingPlaceholder.vue b/src/components/UIShared/LoadingPlaceholder.vue
index 23b4c672e49..a7ebe391681 100644
--- a/src/components/UIShared/LoadingPlaceholder.vue
+++ b/src/components/UIShared/LoadingPlaceholder.vue
@@ -79,9 +79,9 @@ export default {
&__avatar {
flex-shrink: 0;
&-circle {
- height: 44px; // AVATAR.SIZE.DEFAULT
- width: 44px;
- border-radius: 44px;
+ height: 36px; // AVATAR.SIZE.DEFAULT
+ width: 36px;
+ border-radius: 36px;
}
}
diff --git a/src/constants.js b/src/constants.js
index 992c77bc3bb..0028e7f9b6e 100644
--- a/src/constants.js
+++ b/src/constants.js
@@ -273,7 +273,7 @@ export const AVATAR = {
SIZE: {
EXTRA_SMALL: 22,
SMALL: 32,
- DEFAULT: 44,
+ DEFAULT: 36,
MEDIUM: 64,
LARGE: 128,
EXTRA_LARGE: 180,