diff options
author | Maksim Sukharev <antreesy.web@gmail.com> | 2024-07-09 23:10:39 +0200 |
---|---|---|
committer | Maksim Sukharev <antreesy.web@gmail.com> | 2024-07-16 22:55:30 +0200 |
commit | 731f6701b5e82c60ee02a97c7fdffd8047ae8a1b (patch) | |
tree | a857ae51c4f5bf590728eab36813d74e545002d9 | |
parent | 6223648085ffb77dc74386794710625049cb49d7 (diff) |
style: adjust variables and styles in Talk sidebar plugins, refactor code
Signed-off-by: Maksim Sukharev <antreesy.web@gmail.com>
-rw-r--r-- | src/PublicShareSidebar.vue | 16 | ||||
-rw-r--r-- | src/PublicShareSidebarTrigger.vue | 27 | ||||
-rw-r--r-- | src/assets/missingMaterialDesignIcons/MenuPeople.vue | 44 | ||||
-rw-r--r-- | src/views/FilesSidebarChatView.vue | 39 |
4 files changed, 39 insertions, 87 deletions
diff --git a/src/PublicShareSidebar.vue b/src/PublicShareSidebar.vue index 61e7a3ae3..c7b7b346e 100644 --- a/src/PublicShareSidebar.vue +++ b/src/PublicShareSidebar.vue @@ -14,7 +14,7 @@ :disabled="joiningConversation" @click="joinConversation"> <template #icon> - <span v-if="joiningConversation" class="icon icon-loading-small" /> + <NcLoadingIcon v-if="joiningConversation" /> </template> {{ t('spreed', 'Join conversation') }} </NcButton> @@ -41,6 +41,7 @@ import { loadState } from '@nextcloud/initial-state' import { t } from '@nextcloud/l10n' import NcButton from '@nextcloud/vue/dist/Components/NcButton.js' +import NcLoadingIcon from '@nextcloud/vue/dist/Components/NcLoadingIcon.js' import CallView from './components/CallView/CallView.vue' import ChatView from './components/ChatView.vue' @@ -70,6 +71,7 @@ export default { ChatView, MediaSettings, NcButton, + NcLoadingIcon, PollViewer, TopBar, TransitionWrapper, @@ -272,6 +274,7 @@ export default { display: flex; flex-direction: column; justify-content: center; + padding: var(--default-grid-baseline) 0; } #talk-sidebar > .emptycontent { @@ -293,14 +296,8 @@ export default { right: -5px; } -#talk-sidebar .button-centered, #talk-sidebar .call-button { - /* Center button horizontally. */ - margin-left: auto; - margin-right: auto; - - margin-top: 10px; - margin-bottom: 10px; + margin: 0 auto calc(var(--default-grid-baseline) * 2); } #talk-sidebar .button-centered { @@ -309,7 +306,8 @@ export default { * .emptycontent [class*="icon-"] is matching button-vue--icon-and-text * setting the height to 64px, so we need to reset this. */ - height: 44px; + height: var(--default-clickable-area) !important; + margin: 0 auto; } #talk-sidebar #call-container { diff --git a/src/PublicShareSidebarTrigger.vue b/src/PublicShareSidebarTrigger.vue index 315d937c9..f70e3dee3 100644 --- a/src/PublicShareSidebarTrigger.vue +++ b/src/PublicShareSidebarTrigger.vue @@ -4,31 +4,31 @@ --> <template> - <div class="button-holder"> + <div class="button-wrapper"> <NcButton type="tertiary-on-primary" + :title="ariaLabel" :aria-label="ariaLabel" @click="$emit('click')"> <template #icon> - <MenuPeople :size="20" /> + <MessageText :size="20" /> </template> </NcButton> </div> </template> <script> +import MessageText from 'vue-material-design-icons/MessageText.vue' + import { t } from '@nextcloud/l10n' import NcButton from '@nextcloud/vue/dist/Components/NcButton.js' -import MenuPeople from './assets/missingMaterialDesignIcons/MenuPeople.vue' - export default { - name: 'PublicShareSidebarTrigger', components: { + MessageText, NcButton, - MenuPeople, }, props: { @@ -42,11 +42,9 @@ export default { computed: { ariaLabel() { - if (this.sidebarState.isOpen) { - return t('spreed', 'Close Talk sidebar') - } - - return t('spreed', 'Open Talk sidebar') + return this.sidebarState.isOpen + ? t('spreed', 'Close Talk sidebar') + : t('spreed', 'Open Talk sidebar') }, }, @@ -57,10 +55,11 @@ export default { </script> <style scoped> -.button-holder { - margin: 2px 5px 2px 2px; +.button-wrapper { + height: var(--header-height) !important; + width: var(--default-clickable-area) !important; display: flex; justify-content: center; - height: 44px !important; + align-items: center; } </style> diff --git a/src/assets/missingMaterialDesignIcons/MenuPeople.vue b/src/assets/missingMaterialDesignIcons/MenuPeople.vue deleted file mode 100644 index f84b94a90..000000000 --- a/src/assets/missingMaterialDesignIcons/MenuPeople.vue +++ /dev/null @@ -1,44 +0,0 @@ -<!-- - - SPDX-FileCopyrightText: 2022 Nextcloud GmbH and Nextcloud contributors - - SPDX-License-Identifier: AGPL-3.0-or-later ---> - -<template> - <span :aria-hidden="!title" - :aria-label="title" - class="material-design-icon menu-people-icon" - role="img" - v-bind="$attrs" - @click="$emit('click', $event)"> - <svg :fill="fillColor" - class="material-design-icon__svg" - :width="size" - :height="size" - viewBox="0 0 16 16"> - <path d="m2 2c-0.554 0-1 0.446-1 1s0.446 1 1 1h12c0.554 0 1-0.446 1-1s-0.446-1-1-1h-12zm9.717 4.0059c-1.247 0-2.1428 1.0199-2.1428 1.998 0 0.9995 0.0726 1.7127 0.5718 2.4981 0.16 0.207 0.347 0.251 0.5 0.43 0.097 0.357 0.171 0.713 0.071 1.07-0.311 0.109-0.607 0.237-0.9065 0.357-0.364-0.195-0.7863-0.357-1.1503-0.5-0.05-0.2-0.0129-0.347 0.0371-0.535 0.0856-0.089 0.163-0.129 0.2558-0.215 0.2642-0.321 0.2793-0.864 0.2793-1.2496 0-0.5712-0.5135-0.9981-1.0703-0.9981-0.6211 0-1.0723 0.5126-1.0723 0.9981h-0.0136c0 0.4996 0.0353 0.8576 0.2851 1.2496 0.0714 0.107 0.1729 0.126 0.25 0.215 0.0481 0.179 0.0859 0.357 0.0352 0.535-0.4569 0.16-0.8863 0.357-1.2832 0.571-0.2999 0.214-0.1668 0.131-0.3574 0.822-0.0886 0.357 0.928 0.521 1.6562 0.578-0.0357 0.196-0.0857 0.457-0.2285 0.957-0.2285 0.893 3.1074 1.213 4.2834 1.213 1.735 0 4.507-0.325 4.269-1.213-0.371-1.385-0.15-1.221-0.701-1.642-0.778-0.467-1.749-0.834-2.568-1.143-0.107-0.398-0.03-0.692 0.07-1.07 0.168-0.179 0.357-0.259 0.514-0.43 0.492-0.6312 0.556-1.7299 0.556-2.4981 0-1.1323-1.019-1.998-2.14-1.998zm-9.717 0.9941c-0.554 0-1 0.446-1 1s0.446 1 1 1h4.2852c0.0891-0.1855 0.2-0.3648 0.3515-0.5195 0.3721-0.3801 0.9171-0.5988 1.4883-0.6192h0.0195c0.1729 0.017 0.3042 0.0597 0.4297 0.1426 0-0.3488 0.0747-0.6853 0.1953-1.0039h-6.7695zm0 5c-0.554 0-1 0.446-1 1s0.446 1 1 1h3.25c-0.0375-0.049-0.0777-0.09-0.1113-0.152-0.1221-0.228-0.1706-0.568-0.1035-0.838l0.0019-0.012 0.0039-0.012c0.0822-0.298 0.0556-0.322 0.1445-0.615 0.0313-0.103 0.1114-0.245 0.1993-0.371h-3.3848z" /> - <title v-if="title">{{ title }}</title> - </svg> - </span> -</template> - -<script> -export default { - name: 'MenuPeople', - props: { - title: { - type: String, - default: '', - }, - fillColor: { - type: String, - default: 'currentColor', - }, - size: { - type: Number, - default: 24, - }, - }, - - emits: ['click'], -} -</script> diff --git a/src/views/FilesSidebarChatView.vue b/src/views/FilesSidebarChatView.vue index 8d9ec1db7..2652ab862 100644 --- a/src/views/FilesSidebarChatView.vue +++ b/src/views/FilesSidebarChatView.vue @@ -5,8 +5,8 @@ <template> <div class="talk-tab__wrapper"> - <CallButton class="call-button" /> - <ChatView /> + <CallButton class="talk-tab__call-button" /> + <ChatView class="talk-tab__chat-view" /> <PollViewer /> <MediaSettings :recording-consent-given.sync="recordingConsentGiven" /> </div> @@ -38,23 +38,22 @@ export default { </script> -<style scoped> -.talk-tab__wrapper{ - height: 100%; -} - -.call-button { - /* Center button horizontally. */ - margin-left: auto; - margin-right: auto; - - margin-top: 10px; - margin-bottom: 10px; -} - -.chatView { - overflow: hidden; - /* Considering the call button height (44px + 10px * 2) */ - height: calc(100% - 64px); +<style lang="scss" scoped> +.talk-tab { + &__wrapper { + display: flex; + flex-direction: column; + justify-content: flex-end; + height: 100%; + padding: var(--default-grid-baseline) 0; + } + + &__call-button { + margin: 0 auto calc(var(--default-grid-baseline) * 2); + } + + &__chat-view { + overflow: hidden; + } } </style> |