Skip to content

Commit

Permalink
fix: remove redundant styles and wrappers from LeftSidebar
Browse files Browse the repository at this point in the history 
Signed-off-by: Maksim Sukharev <antreesy.web@gmail.com>
  • Loading branch information
@Antreesy
Antreesy committed Jul 20, 2024
1 parent 860be5b commit 99ab528
Showing 1 changed file with 128 additions and 151 deletions.
279 changes: 128 additions & 151 deletions src/components/LeftSidebar/LeftSidebar.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -129,154 +129,151 @@
</NcAppNavigationItem>

<template #list>
<li ref="container" class="left-sidebar__list">
<!-- Conversations List -->
<ul v-if="!isSearching" class="h-100">
<NcEmptyContent v-if="initialisedConversations && filteredConversationsList.length === 0"
:name="emptyContentLabel"
:description="emptyContentDescription">
<template #icon>
<AtIcon v-if="isFiltered === 'mentions'" :size="64" />
<MessageBadge v-else-if="isFiltered === 'unread'" :size="64" />
<MessageOutline v-else :size="64" />
</template>
<template #action>
<NcButton v-if="isFiltered" @click="handleFilter(null)">
<template #icon>
<FilterRemoveIcon :size="20" />
</template>
{{ t('spreed', 'Clear filter') }}
</NcButton>
</template>
</NcEmptyContent>
<li v-show="filteredConversationsList.length > 0" ref="list" class="h-100">
<ConversationsListVirtual ref="scroller"
:conversations="filteredConversationsList"
:loading="!initialisedConversations"
class="scroller h-100"
@scroll.native="debounceHandleScroll" />
</li>
<NcButton v-if="!preventFindingUnread && lastUnreadMentionBelowViewportIndex !== null"
class="unread-mention-button"
type="primary"
@click="scrollBottomUnread">
{{ t('spreed', 'Unread mentions') }}
</NcButton>
</ul>

<!-- Search results -->
<ul v-else class="h-100 scroller">
<!-- Search results: user's conversations -->
<NcAppNavigationCaption :name="t('spreed', 'Conversations')" />
<Conversation v-for="item of searchResultsConversationList"
:key="`conversation_${item.id}`"
:ref="`conversation-${item.token}`"
<!-- Conversations List -->
<template v-if="!isSearching">
<NcEmptyContent v-if="initialisedConversations && filteredConversationsList.length === 0"
:name="emptyContentLabel"
:description="emptyContentDescription">
<template #icon>
<AtIcon v-if="isFiltered === 'mentions'" :size="64" />
<MessageBadge v-else-if="isFiltered === 'unread'" :size="64" />
<MessageOutline v-else :size="64" />
</template>
<template #action>
<NcButton v-if="isFiltered" @click="handleFilter(null)">
<template #icon>
<FilterRemoveIcon :size="20" />
</template>
{{ t('spreed', 'Clear filter') }}
</NcButton>
</template>
</NcEmptyContent>
<ConversationsListVirtual v-show="filteredConversationsList.length > 0"
ref="scroller"
:conversations="filteredConversationsList"
:loading="!initialisedConversations"
class="scroller"
@scroll.native="debounceHandleScroll" />
<NcButton v-if="!preventFindingUnread && lastUnreadMentionBelowViewportIndex !== null"
class="unread-mention-button"
type="primary"
@click="scrollBottomUnread">
{{ t('spreed', 'Unread mentions') }}
</NcButton>
</template>

<!-- Search results -->
<ul v-else class="scroller">
<!-- Search results: user's conversations -->
<NcAppNavigationCaption :name="t('spreed', 'Conversations')" />
<Conversation v-for="item of searchResultsConversationList"
:key="`conversation_${item.id}`"
:ref="`conversation-${item.token}`"
:item="item"
@click="abortSearch" />
<Hint v-if="searchResultsConversationList.length === 0" :hint="t('spreed', 'No matches found')" />

<!-- Create a new conversation -->
<NcListItem v-if="canStartConversations"
:name="searchText"
data-nav-id="conversation_create_new"
@click="createConversation(searchText)">
<template #icon>
<ChatPlus :size="44" />
</template>
<template #subname>
{{ t('spreed', 'New group conversation') }}
</template>
</NcListItem>

<!-- Search results: listed (open) conversations -->
<template v-if="!listedConversationsLoading && searchResultsListedConversations.length !== 0">
<NcAppNavigationCaption :name="t('spreed', 'Open conversations')" />
<Conversation v-for="item of searchResultsListedConversations"
:key="`open-conversation_${item.id}`"
:item="item"
is-search-result
@click="abortSearch" />
<Hint v-if="searchResultsConversationList.length === 0" :hint="t('spreed', 'No matches found')" />

<!-- Create a new conversation -->
<NcListItem v-if="canStartConversations"
:name="searchText"
data-nav-id="conversation_create_new"
@click="createConversation(searchText)">
</template>

<!-- Search results: users -->
<template v-if="searchResultsUsers.length !== 0">
<NcAppNavigationCaption :name="t('spreed', 'Users')" />
<NcListItem v-for="item of searchResultsUsers"
:key="`user_${item.id}`"
:data-nav-id="`user_${item.id}`"
:name="item.label"
@click="createAndJoinConversation(item)">
<template #icon>
<ChatPlus :size="44" />
<AvatarWrapper v-bind="iconData(item)" />
</template>
<template #subname>
{{ t('spreed', 'New group conversation') }}
{{ t('spreed', 'New private conversation') }}
</template>
</NcListItem>

<!-- Search results: listed (open) conversations -->
<template v-if="!listedConversationsLoading && searchResultsListedConversations.length !== 0">
<NcAppNavigationCaption :name="t('spreed', 'Open conversations')" />
<Conversation v-for="item of searchResultsListedConversations"
:key="`open-conversation_${item.id}`"
:item="item"
is-search-result
@click="abortSearch" />
</template>

<!-- Search results: users -->
<template v-if="searchResultsUsers.length !== 0">
<NcAppNavigationCaption :name="t('spreed', 'Users')" />
<NcListItem v-for="item of searchResultsUsers"
:key="`user_${item.id}`"
:data-nav-id="`user_${item.id}`"
</template>

<!-- Search results: new conversations -->
<template v-if="canStartConversations">
<!-- New conversations: Groups -->
<template v-if="searchResultsGroups.length !== 0">
<NcAppNavigationCaption :name="t('spreed', 'Groups')" />
<NcListItem v-for="item of searchResultsGroups"
:key="`group_${item.id}`"
:data-nav-id="`group_${item.id}`"
:name="item.label"
@click="createAndJoinConversation(item)">
<template #icon>
<AvatarWrapper v-bind="iconData(item)" />
<ConversationIcon :item="iconData(item)" />
</template>
<template #subname>
{{ t('spreed', 'New private conversation') }}
{{ t('spreed', 'New group conversation') }}
</template>
</NcListItem>
</template>

<!-- Search results: new conversations -->
<template v-if="canStartConversations">
<!-- New conversations: Groups -->
<template v-if="searchResultsGroups.length !== 0">
<NcAppNavigationCaption :name="t('spreed', 'Groups')" />
<NcListItem v-for="item of searchResultsGroups"
:key="`group_${item.id}`"
:data-nav-id="`group_${item.id}`"
:name="item.label"
@click="createAndJoinConversation(item)">
<template #icon>
<ConversationIcon :item="iconData(item)" />
</template>
<template #subname>
{{ t('spreed', 'New group conversation') }}
</template>
</NcListItem>
</template>

<!-- New conversations: Circles -->
<template v-if="searchResultsCircles.length !== 0">
<NcAppNavigationCaption :name="t('spreed', 'Teams')" />
<NcListItem v-for="item of searchResultsCircles"
:key="`circle_${item.id}`"
:data-nav-id="`circle_${item.id}`"
:name="item.label"
@click="createAndJoinConversation(item)">
<template #icon>
<ConversationIcon :item="iconData(item)" />
</template>
<template #subname>
{{ t('spreed', 'New group conversation') }}
</template>
</NcListItem>
</template>

<!-- New conversations: Federated users -->
<template v-if="searchResultsFederated.length !== 0">
<NcAppNavigationCaption :name="t('spreed', 'Federated users')" />
<NcListItem v-for="item of searchResultsFederated"
:key="`federated_${item.id}`"
:data-nav-id="`federated_${item.id}`"
:name="item.label"
@click="createAndJoinConversation(item)">
<template #icon>
<AvatarWrapper v-bind="iconData(item)" />
</template>
<template #subname>
{{ t('spreed', 'New group conversation') }}
</template>
</NcListItem>
</template>
<!-- New conversations: Circles -->
<template v-if="searchResultsCircles.length !== 0">
<NcAppNavigationCaption :name="t('spreed', 'Teams')" />
<NcListItem v-for="item of searchResultsCircles"
:key="`circle_${item.id}`"
:data-nav-id="`circle_${item.id}`"
:name="item.label"
@click="createAndJoinConversation(item)">
<template #icon>
<ConversationIcon :item="iconData(item)" />
</template>
<template #subname>
{{ t('spreed', 'New group conversation') }}
</template>
</NcListItem>
</template>

<!-- Search results: no results (yet) -->
<template v-if="sourcesWithoutResults">
<NcAppNavigationCaption :name="sourcesWithoutResultsList" />
<Hint :hint="t('spreed', 'No search results')" />
<!-- New conversations: Federated users -->
<template v-if="searchResultsFederated.length !== 0">
<NcAppNavigationCaption :name="t('spreed', 'Federated users')" />
<NcListItem v-for="item of searchResultsFederated"
:key="`federated_${item.id}`"
:data-nav-id="`federated_${item.id}`"
:name="item.label"
@click="createAndJoinConversation(item)">
<template #icon>
<AvatarWrapper v-bind="iconData(item)" />
</template>
<template #subname>
{{ t('spreed', 'New group conversation') }}
</template>
</NcListItem>
</template>
<Hint v-else-if="contactsLoading" :hint="t('spreed', 'Loading')" />
</ul>
</li>
</template>

<!-- Search results: no results (yet) -->
<template v-if="sourcesWithoutResults">
<NcAppNavigationCaption :name="sourcesWithoutResultsList" />
<Hint :hint="t('spreed', 'No search results')" />
</template>
<Hint v-else-if="contactsLoading" :hint="t('spreed', 'Loading')" />
</ul>
</template>

<template #footer>
Expand Down Expand Up @@ -1006,12 +1003,9 @@ export default {
<style lang="scss" scoped>
.scroller {
padding: 0 4px;
overflow-y: scroll !important; // reserve a place for scrollbar
}
.h-100 {
height: 100%;
padding-left: calc(var(--default-grid-baseline) * 2);
overflow-y: scroll !important; // reserve a place for scrollbar
}
.new-conversation {
Expand Down Expand Up @@ -1053,15 +1047,6 @@ export default {
}
}
// Override vue overflow rules for <ul> elements within app-navigation
.left-sidebar__list {
height: 100% !important;
width: 100% !important;
overflow-y: auto !important;
overflow-x: hidden !important;
padding: 0;
}
.unread-mention-button {
position: absolute !important;
left: 50%;
Expand Down Expand Up @@ -1100,14 +1085,6 @@ export default {
padding: 0 !important;
}
:deep(.app-navigation-caption):not(:first-child) {
margin-top: 12px !important;
}
:deep(.app-navigation-caption__name) {
margin: 0 !important;
}
:deep(.list-item) {
overflow: hidden;
outline-offset: -2px;
Expand Down

0 comments on commit 99ab528

Please sign in to comment.