diff options
Diffstat (limited to 'src/components')
7 files changed, 58 insertions, 146 deletions
diff --git a/src/components/ConversationSettings/ListableSettings.vue b/src/components/ConversationSettings/ListableSettings.vue index 758957fe4..9e665b8e9 100644 --- a/src/components/ConversationSettings/ListableSettings.vue +++ b/src/components/ConversationSettings/ListableSettings.vue @@ -22,29 +22,22 @@ <template> <div class="app-settings-subsection"> <div> - <input id="listable_settings_registered_users_checkbox" - aria-describedby="listable_settings_listable_conversation_hint" - type="checkbox" - class="checkbox" - name="listable_settings_registered_users_checkbox" - :checked="listable !== LISTABLE.NONE" + <NcCheckboxRadioSwitch :checked="listable !== LISTABLE.NONE" :disabled="isListableLoading" - @change="toggleListableUsers"> - <label for="listable_settings_registered_users_checkbox">{{ t('spreed', 'Open conversation to registered users') }}</label> + @update:checked="toggleListableUsers"> + {{ t('spreed', 'Open conversation to registered users') }} + </NcCheckboxRadioSwitch> </div> <div v-if="listable !== LISTABLE.NONE" class="indent"> <div id="moderation_settings_listable_conversation_hint" class="app-settings-section__hint"> {{ t('spreed', 'This conversation will be shown in search results') }} </div> <div v-if="listable !== LISTABLE.NONE && isGuestsAccountsEnabled"> - <input id="listable_settings_guestapp_users_checkbox" - type="checkbox" - class="checkbox" - name="listable_settings_guestapp_users_checkbox" - :checked="listable === LISTABLE.ALL" + <NcCheckboxRadioSwitch :checked="listable === LISTABLE.ALL" :disabled="isListableLoading" - @change="toggleListableGuests"> - <label for="listable_settings_guestapp_users_checkbox">{{ t('spreed', 'Also open to guest app users') }}</label> + @update:checked="toggleListableGuests"> + {{ t('spreed', 'Also open to guest app users') }} + </NcCheckboxRadioSwitch> </div> </div> </div> @@ -54,10 +47,15 @@ import { showError, showSuccess } from '@nextcloud/dialogs' import { CONVERSATION } from '../../constants.js' import { loadState } from '@nextcloud/initial-state' +import NcCheckboxRadioSwitch from '@nextcloud/vue/dist/Components/NcCheckboxRadioSwitch' export default { name: 'ListableSettings', + components: { + NcCheckboxRadioSwitch, + }, + props: { token: { type: String, @@ -108,12 +106,12 @@ export default { }, methods: { - async toggleListableUsers(event) { - await this.saveListable(event.target.checked ? this.LISTABLE.USERS : this.LISTABLE.NONE) + async toggleListableUsers(checked) { + await this.saveListable(checked ? this.LISTABLE.USERS : this.LISTABLE.NONE) }, - async toggleListableGuests(input) { - await this.saveListable(event.target.checked ? this.LISTABLE.ALL : this.LISTABLE.USERS) + async toggleListableGuests(checked) { + await this.saveListable(checked ? this.LISTABLE.ALL : this.LISTABLE.USERS) }, async saveListable(listable) { diff --git a/src/components/LeftSidebar/LeftSidebar.vue b/src/components/LeftSidebar/LeftSidebar.vue index 7298e616f..64b0d5b77 100644 --- a/src/components/LeftSidebar/LeftSidebar.vue +++ b/src/components/LeftSidebar/LeftSidebar.vue @@ -514,7 +514,8 @@ export default { .new-conversation { display: flex; - padding: 8px 8px 8px 4px; + padding: 4px; + align-items: center; &--scrolled-down { border-bottom: 1px solid var(--color-border); } diff --git a/src/components/LeftSidebar/NewGroupConversation/NewGroupConversation.vue b/src/components/LeftSidebar/NewGroupConversation/NewGroupConversation.vue index 1521f29e0..a163707a8 100644 --- a/src/components/LeftSidebar/NewGroupConversation/NewGroupConversation.vue +++ b/src/components/LeftSidebar/NewGroupConversation/NewGroupConversation.vue @@ -38,22 +38,22 @@ @close="closeModal"> <!-- Wrapper for content & navigation --> <div class="new-group-conversation talk-modal"> + <h2>{{ t('spreed', 'Create a new group conversation') }}</h2> <!-- Content --> <div class="new-group-conversation__content"> <!-- First page --> <template v-if="page === 0"> <SetConversationName v-model="conversationNameInput" @click-enter="handleEnter" /> - <SetConversationType v-model="isPublic" - :conversation-name="conversationName" /> + <NcCheckboxRadioSwitch :checked.sync="isPublic"> + {{ t('spreed', 'Allow guests to join via link') }} + </NcCheckboxRadioSwitch> <!-- Password protection --> <template v-if="isPublic"> - <input id="password-checkbox" - type="checkbox" - class="checkbox" - :checked="passwordProtect" - @input="handleCheckboxInput"> - <label for="password-checkbox">{{ t('spreed', 'Password protect') }}</label> + <NcCheckboxRadioSwitch :checked.sync="passwordProtect" + @checked="handleCheckboxInput"> + {{ t('spreed', 'Password protect') }} + </NcCheckboxRadioSwitch> <PasswordProtect v-if="passwordProtect" v-model="password" /> </template> @@ -118,13 +118,13 @@ <script> import { CONVERSATION } from '../../../constants.js' +import NcButton from '@nextcloud/vue/dist/Components/NcButton.js' import NcModal from '@nextcloud/vue/dist/Components/NcModal.js' +import NcCheckboxRadioSwitch from '@nextcloud/vue/dist/Components/NcCheckboxRadioSwitch.js' import Plus from 'vue-material-design-icons/Plus.vue' import SetContacts from './SetContacts/SetContacts.vue' import SetConversationName from './SetConversationName/SetConversationName.vue' -import SetConversationType from './SetConversationType/SetConversationType.vue' import Confirmation from './Confirmation/Confirmation.vue' -import NcButton from '@nextcloud/vue/dist/Components/NcButton.js' import { addParticipant } from '../../../services/participantsService.js' import { createPublicConversation, @@ -151,8 +151,8 @@ export default { NcModal, SetContacts, SetConversationName, - SetConversationType, NcButton, + NcCheckboxRadioSwitch, Confirmation, PasswordProtect, ListableSettings, @@ -391,6 +391,9 @@ export default { position: relative; &__content { height: calc(100% - 50px); + display: flex; + flex-direction: column; + gap: 0.5rem; } } @@ -415,18 +418,12 @@ it back */ } } -.wrapper { - margin: auto; -} - ::v-deep .app-settings-section__hint { color: var(--color-text-lighter); padding: 8px 0; } ::v-deep .app-settings-subsection { - margin-top: 25px; - &:first-child { margin-top: 0; } diff --git a/src/components/LeftSidebar/NewGroupConversation/SetContacts/SetContacts.vue b/src/components/LeftSidebar/NewGroupConversation/SetContacts/SetContacts.vue index 7d922b742..9b8f40197 100644 --- a/src/components/LeftSidebar/NewGroupConversation/SetContacts/SetContacts.vue +++ b/src/components/LeftSidebar/NewGroupConversation/SetContacts/SetContacts.vue @@ -22,14 +22,14 @@ <template> <div class="set-contacts"> <!-- Search --> - <div class="icon-search" /> - <input ref="setContacts" + <NcTextField ref="setContacts" v-model="searchText" v-observe-visibility="visibilityChanged" - class="set-contacts__input" type="text" :placeholder="t('spreed', 'Search participants')" @input="handleInput"> + <Magnify :size="16" /> + </NcTextField> <NcButton v-if="isSearching" class="abort-search" type="tertiary-no-background" @@ -60,7 +60,9 @@ <script> import NcButton from '@nextcloud/vue/dist/Components/NcButton.js' +import NcTextField from '@nextcloud/vue/dist/Components/NcTextField.js' import Close from 'vue-material-design-icons/Close.vue' +import Magnify from 'vue-material-design-icons/Magnify.vue' import CancelableRequest from '../../../../utils/cancelableRequest.js' import debounce from 'debounce' import { showError } from '@nextcloud/dialogs' @@ -75,6 +77,8 @@ export default { Close, ParticipantSearchResults, ContactSelectionBubble, + NcTextField, + Magnify, }, props: { @@ -184,7 +188,7 @@ export default { } }, focusInput() { - this.$refs.setContacts.focus() + this.$refs.setContacts.$el.focus() }, }, } @@ -197,14 +201,6 @@ export default { display: flex; flex-direction: column; overflow: hidden; - &__input { - width: 100%; - font-size: 16px; - padding-left: 28px; - line-height: 34px; - box-shadow: 0 10px 5px var(--color-main-background); - z-index: 1; - } &__icon { margin-top: 40px; } @@ -232,13 +228,6 @@ export default { align-content: flex-start; } -.icon-search { - position: absolute; - top: 12px; - left: 8px; - z-index: 2; -} - .zoom-enter-active { animation: zoom-in var(--animation-quick); } diff --git a/src/components/LeftSidebar/NewGroupConversation/SetConversationName/SetConversationName.vue b/src/components/LeftSidebar/NewGroupConversation/SetConversationName/SetConversationName.vue index 5d0aa619b..8609423c9 100644 --- a/src/components/LeftSidebar/NewGroupConversation/SetConversationName/SetConversationName.vue +++ b/src/components/LeftSidebar/NewGroupConversation/SetConversationName/SetConversationName.vue @@ -21,21 +21,25 @@ <template> <div class="set-conversation-name"> - <input ref="conversationName" + <NcTextField ref="conversationName" v-observe-visibility="visibilityChanged" type="text" :value="value" - class="conversation-name" :placeholder="t('spreed', 'Conversation name')" @input="handleInput" @keydown.enter="handleKeydown"> + </NcTextField> </div> </template> <script> +import NcTextField from '@nextcloud/vue/dist/Components/NcTextField.js' export default { name: 'SetConversationName', + components: { + NcTextField, + }, props: { value: { type: String, diff --git a/src/components/LeftSidebar/NewGroupConversation/SetConversationType/SetConversationType.vue b/src/components/LeftSidebar/NewGroupConversation/SetConversationType/SetConversationType.vue deleted file mode 100644 index 9ae49a283..000000000 --- a/src/components/LeftSidebar/NewGroupConversation/SetConversationType/SetConversationType.vue +++ /dev/null @@ -1,68 +0,0 @@ -<!-- - - @copyright Copyright (c) 2019 Marco Ambrosini <marcoambrosini@icloud.com> - - - - @author Marco Ambrosini <marcoambrosini@icloud.com> - - - - @license GNU AGPL version 3 or any later version - - - - This program is free software: you can redistribute it and/or modify - - it under the terms of the GNU Affero General Public License as - - published by the Free Software Foundation, either version 3 of the - - License, or (at your option) any later version. - - - - This program is distributed in the hope that it will be useful, - - but WITHOUT ANY WARRANTY; without even the implied warranty of - - MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the - - GNU Affero General Public License for more details. - - - - You should have received a copy of the GNU Affero General Public License - - along with this program. If not, see <http://www.gnu.org/licenses/>. ---> - -<template> - <div class="conversation-type"> - <input id="checkbox" - type="checkbox" - class="checkbox" - :checked="value" - @change="handleInput"> - <label for="checkbox" class="conversation-type__label">{{ t('spreed', 'Allow guests to join via link') }}</label> - </div> -</template> - -<script> - -export default { - name: 'SetConversationType', - // The value of the checkbox - props: { - value: { - type: Boolean, - required: true, - }, - }, - methods: { - /** - * Emits the input event with the checked bulean as a value - * - * @param {object} event The checkbox click event object. - */ - handleInput(event) { - this.$emit('input', event.target.checked) - }, - }, - -} - -</script> - -<style lang="scss" scoped> - -.conversation-type { - margin: 20px 0; - &__hint { - padding: 10px 0; - color: var(--color-text-light) - } -} -</style> diff --git a/src/components/LeftSidebar/SearchBox/SearchBox.vue b/src/components/LeftSidebar/SearchBox/SearchBox.vue index de133f4af..4e10e2209 100644 --- a/src/components/LeftSidebar/SearchBox/SearchBox.vue +++ b/src/components/LeftSidebar/SearchBox/SearchBox.vue @@ -22,26 +22,22 @@ <template> <form class="app-navigation-search" @submit.prevent="handleSubmit"> - <input ref="searchConversations" - v-model="localValue" - class="app-navigation-search__input" - type="text" + <NcTextField ref="searchConversations" + :value.sync="localValue" :placeHolder="placeholderText" + :showTrailingButton="isSearching" + trailingButtonIcon="close" + @trailing-button-click="abortSearch" @keypress.enter.prevent="handleSubmit"> - <NcButton v-if="isSearching" - class="abort-search" - type="tertiary-no-background" - :aria-label="cancelSearchLabel" - @click="abortSearch"> - <template #icon> - <Close :size="20" /> - </template> - </NcButton> + <Magnify :size="16" /> + </NcTextField> </form> </template> <script> import NcButton from '@nextcloud/vue/dist/Components/NcButton.js' +import NcTextField from '@nextcloud/vue/dist/Components/NcTextField.js' +import Magnify from 'vue-material-design-icons/Magnify.vue' import Close from 'vue-material-design-icons/Close.vue' import { EventBus } from '../../../services/EventBus.js' @@ -49,7 +45,9 @@ export default { name: 'SearchBox', components: { NcButton, + NcTextField, Close, + Magnify, }, props: { /** @@ -137,19 +135,12 @@ export default { @import '../../../assets/variables'; .app-navigation-search { - flex: 1 0 auto; position: sticky; top: 0; background-color: var(--color-main-background); z-index: 1; display: flex; justify-content: center; - &__input { - align-self: center; - width: 100%; - margin: 4px; - padding-left: 8px; - } } .abort-search { |