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

Jump to bottom

fix(NewGroupConversation) - fix styles for proper scrolling (again) #9838

Merged
merged 2 commits into from
Jun 22, 2023
Merged

fix(NewGroupConversation) - fix styles for proper scrolling (again) #9838

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
9f90954
replace NcButton with trailing button, cache full search results
Antreesy Jun 22, 2023
e0a7220
rewrite styles for dialog and inner components
Antreesy Jun 22, 2023
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
3 changes: 0 additions & 3 deletions src/components/LeftSidebar/NewGroupConversation/Confirmation/Confirmation.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -99,9 +99,6 @@ export default {

<style lang="scss" scoped>
.confirmation {
display: flex;
flex-direction: column;

&__icon {
padding-top: 80px;
}
Expand Down
96 changes: 48 additions & 48 deletions src/components/LeftSidebar/NewGroupConversation/NewGroupConversation.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -35,10 +35,12 @@
:container="container"
size="normal"
@close="closeModal">
<!-- Wrapper for content & navigation -->
<div class="new-group-conversation talk-modal">
<h2>{{ t('spreed', 'Create a new group conversation') }}</h2>
<!-- Content -->
<h2 class="new-group-conversation__header">
{{ t('spreed', 'Create a new group conversation') }}
</h2>

<div class="new-group-conversation__main">
<!-- First page -->
<div v-show="page === 0" class="new-group-conversation__content">
<NcTextField ref="conversationName"
v-model="conversationName"
Expand Down Expand Up @@ -87,23 +89,24 @@
</div>

<!-- Second page -->
<div v-if="page === 1" class="new-group-conversation__content">
<SetContacts :conversation-name="conversationNameTrimmed" />
</div>
<SetContacts v-if="page === 1"
class="new-group-conversation__content"
:conversation-name="conversationNameTrimmed" />

<!-- Third page -->
<div v-else-if="page === 2" class="new-group-conversation__content">
<Confirmation :token="newConversation.token"
:conversation-name="conversationNameTrimmed"
:error="error"
:is-loading="isLoading"
:success="success"
:is-public="isPublic" />
</div>
<Confirmation v-else-if="page === 2"
class="new-group-conversation__content"
:token="newConversation.token"
:conversation-name="conversationNameTrimmed"
:error="error"
:is-loading="isLoading"
:success="success"
:is-public="isPublic" />
</div>

<!-- Navigation: different buttons with different actions and
placement are rendered depending on the current page -->
<div class="navigation">
<div class="new-group-conversation__footer">
<!-- First page -->
<NcButton v-if="page===0 && isPublic"
:disabled="disabled"
Expand All @@ -114,7 +117,7 @@
<NcButton v-if="page===0"
type="primary"
:disabled="disabled"
class="navigation__button-right"
class="new-group-conversation__button"
@click="handleSetConversationName">
{{ t('spreed', 'Add participants') }}
</NcButton>
Expand All @@ -126,14 +129,14 @@
</NcButton>
<NcButton v-if="page===1"
type="primary"
class="navigation__button-right"
class="new-group-conversation__button"
@click="handleCreateConversation">
{{ t('spreed', 'Create conversation') }}
</NcButton>
<!-- Third page -->
<NcButton v-if="page===2 && (error || isPublic)"
type="primary"
class="navigation__button-right"
class="new-group-conversation__button"
@click="closeModal">
{{ t('spreed', 'Close') }}
</NcButton>
Expand Down Expand Up @@ -452,17 +455,22 @@ export default {
}

.new-group-conversation {
height: auto;
padding: 20px;
display: flex;
flex-direction: column;
justify-content: space-between;
position: relative;
&__header {
flex-shrink: 0;
margin: 0;
padding: 10px 20px;
}

&__main {
flex-grow: 1;
overflow: auto;
}

&__content {
display: flex;
flex-direction: column;
gap: 0.5rem;
padding: 10px 20px;
}

&__wrapper {
Expand All @@ -477,35 +485,27 @@ export default {
margin-top: 10px;
padding: 4px 0;
}
}

/** Size full in the modal component doesn't have border radius, this adds
it back */
:deep(.modal-container) {
border-radius: var(--border-radius-large) !important;
height: 900px;
}

:deep(.modal-wrapper .modal-container) {
height: max-content;
}
&__footer {
flex-shrink: 0;
display: flex;
justify-content: space-between;
padding: 10px 20px;
box-shadow: 0 -10px 5px var(--color-main-background);
}

.navigation {
position: sticky;
bottom: -1px;
display: flex;
justify-content: space-between;
flex: 0 0 40px;
background-color: var(--color-main-background);
box-shadow: 0 -10px 5px var(--color-main-background);
z-index: 1;
padding: 0 20px 20px;

&__button-right {
&__button {
margin-left: auto;
}
}

:deep(.modal-wrapper .modal-container) {
display: flex !important;
flex-direction: column;
height: 90%;
overflow: hidden !important;
}

:deep(.app-settings-section__hint) {
color: var(--color-text-lighter);
padding: 8px 0;
Expand Down
37 changes: 13 additions & 24 deletions src/components/LeftSidebar/NewGroupConversation/SetContacts/SetContacts.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -27,18 +27,15 @@
:value.sync="searchText"
type="text"
:label="t('spreed', 'Search participants')"
:show-trailing-button="isSearching"
:trailing-button-label="cancelSearchLabel"
@trailing-button-click="abortSearch"
@input="handleInput">
<Magnify :size="16" />
</NcTextField>
<NcButton v-if="isSearching"
class="abort-search"
type="tertiary-no-background"
:aria-label="cancelSearchLabel"
@click="abortSearch">
<template #icon>
<template #trailing-button-icon>
<Close :size="20" />
</template>
</NcButton>
</NcTextField>
<transition-group v-if="hasSelectedParticipants"
name="zoom"
tag="div"
Expand Down Expand Up @@ -66,7 +63,6 @@ import Magnify from 'vue-material-design-icons/Magnify.vue'

import { showError } from '@nextcloud/dialogs'

import NcButton from '@nextcloud/vue/dist/Components/NcButton.js'
import NcTextField from '@nextcloud/vue/dist/Components/NcTextField.js'

import ParticipantSearchResults from '../../../RightSidebar/Participants/ParticipantsSearchResults/ParticipantsSearchResults.vue'
Expand All @@ -78,7 +74,6 @@ import CancelableRequest from '../../../../utils/cancelableRequest.js'
export default {
name: 'SetContacts',
components: {
NcButton,
Close,
ParticipantSearchResults,
ContactSelectionBubble,
Expand All @@ -97,6 +92,7 @@ export default {
return {
searchText: '',
searchResults: [],
cachedFullSearchResults: [],
// The loading state is true when the component is initialised as we perform a search for 'contacts'
// with an empty screen as search text.
contactsLoading: true,
Expand Down Expand Up @@ -136,8 +132,6 @@ export default {
this.focusInput()
// Perform a search with an empty string
await this.fetchSearchResults()
// Once the contacts are fetched, remove the spinner.
this.contactsLoading = false
},

beforeDestroy() {
Expand All @@ -156,7 +150,7 @@ export default {
abortSearch() {
this.noResults = false
this.contactsLoading = false
this.searchResults = []
this.searchResults = this.cachedFullSearchResults
this.searchText = ''
this.focusInput()
},
Expand All @@ -166,6 +160,7 @@ export default {
}, 250),

async fetchSearchResults() {
this.contactsLoading = true
try {
this.cancelSearchPossibleConversations('canceled')
const { request, cancel } = CancelableRequest(searchPossibleConversations)
Expand All @@ -174,16 +169,20 @@ export default {
const response = await request({ searchText: this.searchText })

this.searchResults = response?.data?.ocs?.data || []
this.contactsLoading = false
if (this.searchResults.length === 0) {
this.noResults = true
}
if (!this.searchText) {
this.cachedFullSearchResults = this.searchResults
}
} catch (exception) {
if (CancelableRequest.isCancel(exception)) {
return
}
console.error(exception)
showError(t('spreed', 'An error occurred while performing the search'))
} finally {
this.contactsLoading = false
}
},
visibilityChanged(isVisible) {
Expand All @@ -201,24 +200,14 @@ export default {

<style lang="scss" scoped>
.set-contacts {
position: relative;
height: 100%;
display: flex;
flex-direction: column;
overflow: hidden;
&__icon {
margin-top: 40px;
}
&__hint {
margin-top: 20px;
text-align: center;
}
.abort-search {
position: absolute;
right: 0;
top: -2px;
z-index: 2;
}
}

.selected-participants {
Expand Down