Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat(compact): follow-up #14118

Merged
merged 4 commits into from
Jan 14, 2025
Merged

feat(compact): follow-up #14118

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
de478a1
fix: reduce the use of compact prop, rely more on passing the boolean…
DorraJaouad Jan 11, 2025
30b2436
fix(ConversationsListVirtual): rename CONVERSATION_ITEM_SIZE to itemSize
DorraJaouad Jan 11, 2025
71dd896
fix(Conversation): make the text ellipsized again
DorraJaouad Jan 12, 2025
09e62e1
fix: make the list more compact and increase icon/avatar size of the …
DorraJaouad Jan 14, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
7 changes: 1 addition & 6 deletions src/components/AvatarWrapper/AvatarWrapper.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -31,7 +31,7 @@
:preloaded-user-status="preloadedUserStatus"
:size="size" />
<!-- Override user status for federated users -->
<span v-if="showUserStatus && isFederatedUser && !compact"
<span v-if="showUserStatus && isFederatedUser"
class="avatar-wrapper__user-status"
role="img"
aria-hidden="false"
Expand Down Expand Up @@ -132,11 +132,6 @@ export default {
type: Boolean,
default: false,
},

compact: {
type: Boolean,
default: false,
},
},

setup() {
Expand Down
11 changes: 3 additions & 8 deletions src/components/ConversationIcon.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,7 @@
:height="size"
:alt="item.displayName"
class="avatar icon">
<span v-if="!hideUserStatus && conversationType && !compact"
<span v-if="!hideUserStatus && conversationType"
class="conversation-icon__type"
role="img"
aria-hidden="false"
Expand Down Expand Up @@ -131,11 +131,6 @@ export default {
type: Number,
default: AVATAR.SIZE.DEFAULT,
},

compact: {
type: Boolean,
default: false,
}
},

setup() {
Expand All @@ -148,11 +143,11 @@ export default {

computed: {
showCall() {
return !this.hideCall && this.item.hasCall && !this.compact
return !this.hideCall && this.item.hasCall
},

showFavorite() {
return !this.hideFavorite && this.item.isFavorite && !this.compact
return !this.hideFavorite && this.item.isFavorite
},

preloadedUserStatus() {
Expand Down
27 changes: 17 additions & 10 deletions src/components/LeftSidebar/ConversationsList/Conversation.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,20 +23,20 @@
force-menu
:compact="compact"
@click="onClick">
<template #icon>
<ConversationIcon :item="item"
:hide-favorite="compact"
:hide-call="compact"
:hide-user-status="item.type !== CONVERSATION.TYPE.ONE_TO_ONE && compact"
:show-user-online-status="compact"
:size="compact? AVATAR.SIZE.COMPACT : AVATAR.SIZE.DEFAULT" />
</template>
<template #name>
<template v-if="compact && iconType">
<component :is="iconType.component" :size="15" :fill-color="iconType.color" />
<span class="hidden-visually">{{ iconType.text }}</span>
</template>
<span>{{ item.displayName }}</span>
</template>
<template #icon>
<ConversationIcon :item="item"
:hide-favorite="false"
:hide-call="false"
:compact="compact"
:show-user-online-status="compact"
:size="compact? AVATAR.SIZE.COMPACT : AVATAR.SIZE.DEFAULT" />
<span class="text"> {{ item.displayName }} </span>
</template>
<template v-if="!compact" #subname>
<!-- eslint-disable-next-line vue/no-v-html -->
Expand Down Expand Up @@ -245,7 +245,7 @@ import NcListItem from '@nextcloud/vue/dist/Components/NcListItem.js'
import ConversationIcon from './../../ConversationIcon.vue'

import { useConversationInfo } from '../../../composables/useConversationInfo.js'
import { PARTICIPANT, AVATAR } from '../../../constants.js'
import { PARTICIPANT, AVATAR, CONVERSATION } from '../../../constants.js'
import { hasTalkFeature } from '../../../services/CapabilitiesManager.ts'
import { copyConversationLinkToClipboard } from '../../../utils/handleUrl.ts'

Expand Down Expand Up @@ -337,6 +337,7 @@ export default {
counterType,
conversationInformation,
notificationLevels,
CONVERSATION,
}
},

Expand Down Expand Up @@ -570,6 +571,12 @@ export default {
}
}

.text {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}

:deep(.dialog) {
padding-block: 0 8px;
padding-inline: 12px 8px;
Expand Down
18 changes: 9 additions & 9 deletions src/components/LeftSidebar/ConversationsList/ConversationsListVirtual.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@
<RecycleScroller ref="scroller"
item-tag="ul"
:items="conversations"
:item-size="CONVERSATION_ITEM_SIZE"
:item-size="itemSize"
key-field="token">
<template #default="{ item }">
<Conversation :item="item" :compact="compact" />
Expand Down Expand Up @@ -57,13 +57,13 @@ export default {

setup(props) {
/* Consider:
* avatar size (and two lines of text) or compact mode (34px)
* avatar size (and two lines of text) or compact mode (28px)
* list-item padding
* list-item__wrapper padding
*/
const CONVERSATION_ITEM_SIZE = computed(() => props.compact ? 34 + 2 * 2 + 0 * 2 : AVATAR.SIZE.DEFAULT + 2 * 4 + 2 * 2)
const itemSize = computed(() => props.compact ? 28 + 2 * 2 + 0 * 2 : AVATAR.SIZE.DEFAULT + 2 * 4 + 2 * 2)
return {
CONVERSATION_ITEM_SIZE,
itemSize,
}
},

Expand All @@ -76,7 +76,7 @@ export default {
*/
getFirstItemInViewportIndex() {
// (ceil to include partially) of (absolute number of items above viewport) + 1 (next item is in viewport) - 1 (index starts from 0)
return Math.ceil(this.$refs.scroller.$el.scrollTop / this.CONVERSATION_ITEM_SIZE)
return Math.ceil(this.$refs.scroller.$el.scrollTop / this.itemSize)
},

/**
Expand All @@ -87,7 +87,7 @@ export default {
*/
getLastItemInViewportIndex() {
// (floor to include only fully visible) of (absolute number of items below and in viewport) - 1 (index starts from 0)
return Math.floor((this.$refs.scroller.$el.scrollTop + this.$refs.scroller.$el.clientHeight) / this.CONVERSATION_ITEM_SIZE) - 1
return Math.floor((this.$refs.scroller.$el.scrollTop + this.$refs.scroller.$el.clientHeight) / this.itemSize) - 1
},

/**
Expand All @@ -111,7 +111,7 @@ export default {
*/
const doScroll = (to) => {
const ITEMS_TO_BORDER_AFTER_SCROLL = 1
const padding = ITEMS_TO_BORDER_AFTER_SCROLL * this.CONVERSATION_ITEM_SIZE
const padding = ITEMS_TO_BORDER_AFTER_SCROLL * this.itemSize
const from = this.$refs.scroller.$el.scrollTop
const direction = from < to ? 1 : -1

Expand All @@ -128,10 +128,10 @@ export default {
}

if (index < firstItemIndex) { // Item is above
await doScroll(index * this.CONVERSATION_ITEM_SIZE)
await doScroll(index * this.itemSize)
} else if (index > lastItemIndex) { // Item is below
// Position of item + item's height and move to bottom
await doScroll((index + 1) * this.CONVERSATION_ITEM_SIZE - viewportHeight)
await doScroll((index + 1) * this.itemSize - viewportHeight)
}
},

Expand Down
27 changes: 19 additions & 8 deletions src/components/LeftSidebar/LeftSidebar.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -182,7 +182,7 @@
data-nav-id="conversation_create_new"
@click="createConversation(searchText)">
<template #icon>
<ChatPlus :size="isCompact? AVATAR.SIZE.COMPACT: AVATAR.SIZE.DEFAULT" />
<ChatPlus :size="isCompact ? AVATAR.SIZE.COMPACT: AVATAR.SIZE.DEFAULT" />
</template>
<template v-if="!isCompact" #subname>
{{ t('spreed', 'New group conversation') }}
Expand Down Expand Up @@ -230,7 +230,7 @@
:compact="isCompact"
@click="createAndJoinConversation(item)">
<template #icon>
<ConversationIcon :item="iconData(item)" :size="isCompact ? AVATAR.SIZE.COMPACT : AVATAR.SIZE.DEFAULT" />
<ConversationIcon :item="iconData(item)" />
</template>
<template v-if="!isCompact" #subname>
{{ t('spreed', 'New group conversation') }}
Expand All @@ -248,7 +248,7 @@
:compact="isCompact"
@click="createAndJoinConversation(item)">
<template #icon>
<ConversationIcon :item="iconData(item)" :size="isCompact ? AVATAR.SIZE.COMPACT : AVATAR.SIZE.DEFAULT" />
<ConversationIcon :item="iconData(item)" />
</template>
<template v-if="!isCompact" #subname>
{{ t('spreed', 'New group conversation') }}
Expand Down Expand Up @@ -1046,13 +1046,12 @@ export default {
token: 'new',
showUserStatus: true,
size: this.isCompact ? AVATAR.SIZE.COMPACT : AVATAR.SIZE.DEFAULT,
compact: this.isCompact,
}
}
return {
type: CONVERSATION.TYPE.GROUP,
objectType: item.source,
compact: this.isCompact,
size: this.isCompact ? AVATAR.SIZE.COMPACT : AVATAR.SIZE.DEFAULT,
}
},
},
Expand Down Expand Up @@ -1166,13 +1165,25 @@ export default {
bottom: -2px !important;
min-height: 11px !important;
min-width: 11px !important;
line-height: 1 !important;
font-size: clamp(var(--font-size-small), 85%, var(--default-font-size)) !important;
}
}

// Overwrite NcListItem styles: remove padding in compact view
/* Overwrite NcListItem styles for compact view */
:deep(.list-item--compact) {
padding-block: 0 !important;
}

:deep(.list-item--compact:not(:has(.list-item-content__subname))) {
--list-item-height: calc(var(--clickable-area-small, 24px) + 4px) !important;
}

:deep(.list-item--compact .button-vue--size-normal) {
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Maybe also remove box-shadow from the button?
image

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think it's problematic even in normal view?

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

well, yeah.. that out of scope of this PR

--button-size: var(--clickable-area-small, 24px);
--button-radius: var(--border-radius);
}

:deep(.list-item--compact .list-item-content__actions) {
height: var(--clickable-area-small, 24px);
}

</style>
2 changes: 1 addition & 1 deletion src/constants.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -300,8 +300,8 @@ export const BOT = {

export const AVATAR = {
SIZE: {
COMPACT: 20,
EXTRA_SMALL: 22,
COMPACT: 24,
SMALL: 32,
DEFAULT: 40,
MEDIUM: 64,
Expand Down
Loading