diff options
author | Maksim Sukharev <antreesy.web@gmail.com> | 2023-06-22 11:09:56 +0200 |
---|---|---|
committer | backportbot-nextcloud[bot] <backportbot-nextcloud[bot]@users.noreply.github.com> | 2023-06-22 12:58:40 +0000 |
commit | d86337949975a48089dd7faaaf5ec9d251a38d49 (patch) | |
tree | c8016eaebf6e5edf29ded5e690616721d9dc8f02 | |
parent | be7f35fa2cf6f29eb36d18cea52a7ba7f40af541 (diff) |
rewrite styles for dialog and inner components
Signed-off-by: Maksim Sukharev <antreesy.web@gmail.com>
3 files changed, 48 insertions, 54 deletions
diff --git a/src/components/LeftSidebar/NewGroupConversation/Confirmation/Confirmation.vue b/src/components/LeftSidebar/NewGroupConversation/Confirmation/Confirmation.vue index c4a0626bd..7ae37981e 100644 --- a/src/components/LeftSidebar/NewGroupConversation/Confirmation/Confirmation.vue +++ b/src/components/LeftSidebar/NewGroupConversation/Confirmation/Confirmation.vue @@ -99,9 +99,6 @@ export default { <style lang="scss" scoped> .confirmation { - display: flex; - flex-direction: column; - &__icon { padding-top: 80px; } diff --git a/src/components/LeftSidebar/NewGroupConversation/NewGroupConversation.vue b/src/components/LeftSidebar/NewGroupConversation/NewGroupConversation.vue index 6592b7cff..aaaa04945 100644 --- a/src/components/LeftSidebar/NewGroupConversation/NewGroupConversation.vue +++ b/src/components/LeftSidebar/NewGroupConversation/NewGroupConversation.vue @@ -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" @@ -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" @@ -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> @@ -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> @@ -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 { @@ -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; diff --git a/src/components/LeftSidebar/NewGroupConversation/SetContacts/SetContacts.vue b/src/components/LeftSidebar/NewGroupConversation/SetContacts/SetContacts.vue index 09983e690..ce3577b61 100644 --- a/src/components/LeftSidebar/NewGroupConversation/SetContacts/SetContacts.vue +++ b/src/components/LeftSidebar/NewGroupConversation/SetContacts/SetContacts.vue @@ -201,9 +201,6 @@ export default { <style lang="scss" scoped> .set-contacts { height: 100%; - display: flex; - flex-direction: column; - overflow: hidden; &__icon { margin-top: 40px; } |