Move LeftSidebar components to new vue components

- Use NcTextField for the search
- Use NcCheckBoxRadioSwitch for the NewGroupConversation component

Signed-off-by: Carl Schwan <carl@carlschwan.eu>

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 {