diff options
author | Marco Ambrosini <marcoambrosini@pm.me> | 2020-08-26 16:03:04 +0300 |
---|---|---|
committer | Marco Ambrosini <marcoambrosini@pm.me> | 2020-08-27 11:50:02 +0300 |
commit | 0bbf4b46d6025b4c7db94df79c2c456493069d95 (patch) | |
tree | eef57601401b3839fbd4fdc9cda5cea16c2d46a8 /src | |
parent | 8bc00eedf7d78f0cf16a8c593216a4f467627aa4 (diff) |
Fix buttons
Signed-off-by: Marco Ambrosini <marcoambrosini@pm.me>
Diffstat (limited to 'src')
-rw-r--r-- | src/components/LeftSidebar/LeftSidebar.vue | 2 | ||||
-rw-r--r-- | src/components/LeftSidebar/NewGroupConversation/NewGroupConversation.vue | 43 | ||||
-rw-r--r-- | src/components/LeftSidebar/SearchBox/SearchBox.vue | 4 | ||||
-rw-r--r-- | src/components/TopBar/CallButton.vue | 15 | ||||
-rw-r--r-- | src/components/TopBar/TopBar.vue | 2 |
5 files changed, 40 insertions, 26 deletions
diff --git a/src/components/LeftSidebar/LeftSidebar.vue b/src/components/LeftSidebar/LeftSidebar.vue index 1eab560c0..5c3045098 100644 --- a/src/components/LeftSidebar/LeftSidebar.vue +++ b/src/components/LeftSidebar/LeftSidebar.vue @@ -274,7 +274,7 @@ export default { .new-conversation { display: flex; - padding: 6px; + padding: 8px; border-bottom: 1px solid var(--color-border-dark); } diff --git a/src/components/LeftSidebar/NewGroupConversation/NewGroupConversation.vue b/src/components/LeftSidebar/NewGroupConversation/NewGroupConversation.vue index feafa5593..d2af36a9b 100644 --- a/src/components/LeftSidebar/NewGroupConversation/NewGroupConversation.vue +++ b/src/components/LeftSidebar/NewGroupConversation/NewGroupConversation.vue @@ -20,16 +20,16 @@ --> <template> - <div> + <div class="wrapper"> <!-- Tooltip --> <Popover trigger="hover" placement="bottom"> - <Actions slot="trigger"> - <ActionButton - class="toggle" - icon="icon-add" - :aria-label="t('spreed','Create a new group conversation')" - @click="showModal" /> - </Actions> + <Button slot="trigger" + class="toggle" + icon="" + :aria-label="t('spreed','Create a new group conversation')" + @click="showModal"> + <Plus size="24" /> + </Button> <p>{{ t('spreed','Create a new group conversation') }}</p> </Popover> <!-- New group form --> @@ -89,7 +89,7 @@ <!-- First page --> <button v-if="page===0" - class="navigation__button-right primary" + class="navigation__button navigation__button-right primary" :disabled="disabled" @click="handleSetConversationName"> {{ t('spreed', 'Add participants') }} @@ -97,20 +97,20 @@ <!-- Second page --> <button v-if="page===1" - class="navigation__button-left" + class="navigation__button navigation__button-left" @click="handleClickBack"> {{ t('spreed', 'Back') }} </button> <button v-if="page===1" - class="navigation__button-right primary" + class="navigation__button navigation__button-right primary" @click="handleCreateConversation"> {{ t('spreed', 'Create conversation') }} </button> <!-- Third page --> <button v-if="page===2 && (error || isPublic)" - class="navigation__button-right primary" + class="navigation__button navigation__button-right primary" @click="closeModal"> {{ t('spreed', 'Close') }} </button> @@ -123,9 +123,8 @@ <script> import Modal from '@nextcloud/vue/dist/Components/Modal' -import Actions from '@nextcloud/vue/dist/Components/Actions' -import ActionButton from '@nextcloud/vue/dist/Components/ActionButton' import Popover from '@nextcloud/vue/dist/Components/Popover' +import Plus from 'vue-material-design-icons/Plus' import SetContacts from './SetContacts/SetContacts' import SetConversationName from './SetConversationName/SetConversationName' import SetConversationType from './SetConversationType/SetConversationType' @@ -146,14 +145,13 @@ export default { components: { Modal, - Actions, - ActionButton, SetContacts, SetConversationName, SetConversationType, Confirmation, Popover, PasswordProtect, + Plus, }, data() { @@ -339,7 +337,10 @@ $dialog-width: 300px; $dialog-height: 480px; .toggle { - margin-left: 5px !important; + height: 44px; + width: 44px; + padding: 0; + margin: 0 0 0 4px; } .new-group-conversation { @@ -373,8 +374,16 @@ it back */ z-index: 1; // Same as above width: $dialog-width - $dialog-margin * 2; + &__button { + height: 44px; + padding: 0 16px; + } &__button-right { margin-left:auto; } } + +.wrapper { + margin: auto; +} </style> diff --git a/src/components/LeftSidebar/SearchBox/SearchBox.vue b/src/components/LeftSidebar/SearchBox/SearchBox.vue index 39af1a0a8..923e7062b 100644 --- a/src/components/LeftSidebar/SearchBox/SearchBox.vue +++ b/src/components/LeftSidebar/SearchBox/SearchBox.vue @@ -129,11 +129,11 @@ export default { z-index: 1; display: flex; justify-content: center; - &__input { align-self: center; width: 100%; - margin: 0; + margin: 4px; + padding-left: 8px; } } diff --git a/src/components/TopBar/CallButton.vue b/src/components/TopBar/CallButton.vue index e25c295a7..b3bc7248a 100644 --- a/src/components/TopBar/CallButton.vue +++ b/src/components/TopBar/CallButton.vue @@ -228,12 +228,17 @@ export default { </script> <style lang="scss" scoped> -.top-bar__button .icon { - opacity: 1; - margin-right: 4px; +.top-bar__button { + height: 44px; + padding: 0 16px; - &.icon-incoming-call { - animation: pulse 2s infinite; + .icon { + opacity: 1; + margin-right: 8px; + + &.icon-incoming-call { + animation: pulse 2s infinite; + } } } diff --git a/src/components/TopBar/TopBar.vue b/src/components/TopBar/TopBar.vue index 89b70a7e3..2bbaa48b4 100644 --- a/src/components/TopBar/TopBar.vue +++ b/src/components/TopBar/TopBar.vue @@ -510,7 +510,7 @@ export default { display: flex; z-index: 10; justify-content: flex-end; - padding: 0 6px; + padding: 8px; &__button { margin: 0 2px; align-self: center; |