diff options
author | DorraJaouad <dorra.jaoued7@gmail.com> | 2023-06-14 14:23:08 +0200 |
---|---|---|
committer | backportbot-nextcloud[bot] <backportbot-nextcloud[bot]@users.noreply.github.com> | 2023-06-16 07:34:47 +0000 |
commit | 217c540f50c7a5a8a3bbea0efb0e5b79d1e47c08 (patch) | |
tree | ae822793dc3f37014879c00ce6a6298cbe657372 | |
parent | 3a1b02998138519a6f3dfc3071a2786cc9703a82 (diff) |
Made the nav. sticky and the wrapper adjustable
Signed-off-by: DorraJaouad <dorra.jaoued7@gmail.com>
-rw-r--r-- | src/components/LeftSidebar/NewGroupConversation/NewGroupConversation.vue | 90 |
1 files changed, 51 insertions, 39 deletions
diff --git a/src/components/LeftSidebar/NewGroupConversation/NewGroupConversation.vue b/src/components/LeftSidebar/NewGroupConversation/NewGroupConversation.vue index 15df405c9..38d8db2c8 100644 --- a/src/components/LeftSidebar/NewGroupConversation/NewGroupConversation.vue +++ b/src/components/LeftSidebar/NewGroupConversation/NewGroupConversation.vue @@ -100,43 +100,43 @@ :success="success" :is-public="isPublic" /> </div> - <!-- Navigation: different buttons with different actions and + </div> + <!-- Navigation: different buttons with different actions and placement are rendered depending on the current page --> - <div class="navigation"> - <!-- First page --> - <NcButton v-if="page===0 && isPublic" - :disabled="disabled" - type="tertiary" - @click="handleCreateConversation"> - {{ t('spreed', 'Create conversation') }} - </NcButton> - <NcButton v-if="page===0" - type="primary" - :disabled="disabled" - class="navigation__button-right" - @click="handleSetConversationName"> - {{ t('spreed', 'Add participants') }} - </NcButton> - <!-- Second page --> - <NcButton v-if="page===1" - type="tertiary" - @click="handleClickBack"> - {{ t('spreed', 'Back') }} - </NcButton> - <NcButton v-if="page===1" - type="primary" - class="navigation__button-right" - @click="handleCreateConversation"> - {{ t('spreed', 'Create conversation') }} - </NcButton> - <!-- Third page --> - <NcButton v-if="page===2 && (error || isPublic)" - type="primary" - class="navigation__button-right" - @click="closeModal"> - {{ t('spreed', 'Close') }} - </NcButton> - </div> + <div class="navigation"> + <!-- First page --> + <NcButton v-if="page===0 && isPublic" + :disabled="disabled" + type="tertiary" + @click="handleCreateConversation"> + {{ t('spreed', 'Create conversation') }} + </NcButton> + <NcButton v-if="page===0" + type="primary" + :disabled="disabled" + class="navigation__button-right" + @click="handleSetConversationName"> + {{ t('spreed', 'Add participants') }} + </NcButton> + <!-- Second page --> + <NcButton v-if="page===1" + type="tertiary" + @click="handleClickBack"> + {{ t('spreed', 'Back') }} + </NcButton> + <NcButton v-if="page===1" + type="primary" + class="navigation__button-right" + @click="handleCreateConversation"> + {{ t('spreed', 'Create conversation') }} + </NcButton> + <!-- Third page --> + <NcButton v-if="page===2 && (error || isPublic)" + type="primary" + class="navigation__button-right" + @click="closeModal"> + {{ t('spreed', 'Close') }} + </NcButton> </div> </NcModal> </div> @@ -456,6 +456,7 @@ export default { the margin applied to the content is added to the total modal width, so here we subtract it to the width and height of the content. */ + height: auto; padding: 20px; display: flex; flex-direction: column; @@ -496,15 +497,26 @@ it back */ height: 900px; } +:deep(){ + .modal-wrapper--normal{ + .modal-container { + height: max-content; + } + } +} + .navigation { + position: sticky; + bottom: 0; display: flex; justify-content: space-between; flex: 0 0 40px; - height: 50px; background-color: var(--color-main-background); - box-shadow: 0 -10px 5px var(--color-main-background); + box-shadow:0 -2px 5px var(--color-background-darker); z-index: 1; - width: 100%; + width: 600px; + padding: 10px; + height: auto; &__button-right { margin-left: auto; |