change native buttons to NcButton components

Signed-off-by: Maksim Sukharev <antreesy.web@gmail.com>

4 files changed, 126 insertions, 126 deletions

diff --git a/src/components/CallView/Grid/Grid.vue b/src/components/CallView/Grid/Grid.vue
index e9ec4b638..813ba6f06 100644
--- a/src/components/CallView/Grid/Grid.vue
+++ b/src/components/CallView/Grid/Grid.vue
@@ -21,28 +21,33 @@
 
 <template>
 	<div class="grid-main-wrapper" :class="{'is-grid': !isStripe, 'transparent': isLessThanTwoVideos}">
-		<button v-if="isStripe && !isRecording"
+		<NcButton v-if="isStripe && !isRecording"
 			class="stripe--collapse"
+			type="tertiary-no-background"
 			:aria-label="stripeButtonTooltip"
 			@click="handleClickStripeCollapse">
-			<ChevronDown v-if="stripeOpen"
-				fill-color="#ffffff"
-				:size="20" />
-			<ChevronUp v-else
-				fill-color="#ffffff"
-				:size="20" />
-		</button>
+			<template #icon>
+				<ChevronDown v-if="stripeOpen"
+					fill-color="#ffffff"
+					:size="20" />
+				<ChevronUp v-else
+					fill-color="#ffffff"
+					:size="20" />
+			</template>
+		</NcButton>
 		<transition :name="isStripe ? 'slide-down' : ''">
 			<div v-if="!isStripe || stripeOpen" class="wrapper" :style="wrapperStyle">
 				<div :class="{'stripe-wrapper': isStripe, 'wrapper': !isStripe}">
-					<button v-if="hasPreviousPage && gridWidth > 0"
-						:class="{'stripe': isStripe}"
+					<NcButton v-if="hasPreviousPage && gridWidth > 0"
+						type="tertiary-no-background"
 						class="grid-navigation grid-navigation__previous"
 						:aria-label="t('spreed', 'Previous page of videos')"
 						@click="handleClickPrevious">
-						<ChevronLeft fill-color="#ffffff"
-							:size="20" />
-					</button>
+						<template #icon>
+							<ChevronLeft fill-color="#ffffff"
+								:size="20" />
+						</template>
+					</NcButton>
 					<div ref="grid"
 						class="grid"
 						:class="{stripe: isStripe}"
@@ -99,14 +104,16 @@
 							:local-call-participant-model="localCallParticipantModel"
 							@click-video="handleClickLocalVideo" />
 					</div>
-					<button v-if="hasNextPage && gridWidth > 0"
+					<NcButton v-if="hasNextPage && gridWidth > 0"
+						type="tertiary-no-background"
 						class="grid-navigation grid-navigation__next"
-						:class="{'stripe': isStripe}"
 						:aria-label="t('spreed', 'Next page of videos')"
 						@click="handleClickNext">
-						<ChevronRight fill-color="#ffffff"
-							:size="20" />
-					</button>
+						<template #icon>
+							<ChevronRight fill-color="#ffffff"
+								:size="20" />
+						</template>
+					</NcButton>
 				</div>
 				<LocalVideo v-if="isStripe && !isRecording && !screenshotMode"
 					ref="localVideo"
@@ -155,6 +162,7 @@ import ChevronUp from 'vue-material-design-icons/ChevronUp.vue'
 import { subscribe, unsubscribe } from '@nextcloud/event-bus'
 import { generateFilePath } from '@nextcloud/router'
 
+import NcButton from '@nextcloud/vue/dist/Components/NcButton.js'
 import Tooltip from '@nextcloud/vue/dist/Directives/Tooltip.js'
 
 import EmptyCallView from '../shared/EmptyCallView.vue'
@@ -169,6 +177,7 @@ export default {
 		VideoVue,
 		LocalVideo,
 		EmptyCallView,
+		NcButton,
 		VideoBottomBar,
 		ChevronRight,
 		ChevronLeft,
@@ -353,7 +362,7 @@ export default {
 
 		isLessThanTwoVideos() {
 			// without screen share, we don't want to duplicate videos if we were to show them in the stripe
-			// however, if a screen share is in progress, it means the video of the presenting user is not visible
+			// however, if a screen share is in progress, it means the video of the presenting user is not visible,
 			// so we can show it in the stripe
 			return this.videos.length <= 1 && !this.screens.length
 		},
@@ -690,7 +699,7 @@ export default {
 			// variables. These variables are kept in the data and represent how the
 			// grid looks at any given moment. We do this based on `gridWidth`,
 			// `gridHeight`, `minWidth` and `minHeight`. If the video is used in the
-			// context of the promoted view, we se 1 row directly and we remove 1 column
+			// context of the promoted view, we se 1 row directly, and we remove 1 column
 			// (one of the participants will be in the promoted video slot)
 			this.columns = this.columnsMax
 			this.rows = this.rowsMax
@@ -952,42 +961,33 @@ export default {
 
 .grid-navigation {
 	position: absolute;
-	width: 44px;
-	height: 44px;
-	top: calc(50% - 22px);
 	z-index: 2;
-	padding: 0;
-	margin: 0;
-	border: 0;
-	display: flex;
-	align-items: center;
-	justify-content: center;
-	background-color: rgba(0, 0, 0, 0.5) !important;
+	background-color: rgba(0, 0, 0, 0.5);
 
 	&:hover,
 	&:focus {
-		opacity: 1 !important;
 		background-color: rgba(0, 0, 0, 0.8) !important;
-
 	}
-	&__previous {
-		left: -4px;
-	}
-	&__next {
-		right: -4px;
-	}
-}
-
-.grid-navigation__previous.stripe {
-	left: 8px;
-}
 
-.grid-navigation__next.stripe {
-	right: 16px;
-}
+	.wrapper & {
+		top: calc(50% - var(--default-clickable-area) / 2);
+		&__previous {
+			left: -4px;
+		}
+		&__next {
+			right: -4px;
+		}
+	}
 
-.stripe-wrapper .grid-navigation {
-	top: 16px;
+	.stripe-wrapper & {
+		top: 16px;
+		&__previous {
+			left: 8px;
+		}
+		&__next {
+			right: 16px;
+		}
+	}
 }
 
 .pages-indicator {
@@ -1014,18 +1014,12 @@ export default {
 	}
 }
 
-/** FIXME: replace with nextcloud-vue button */
-button.stripe--collapse {
+.stripe--collapse {
 	position: absolute;
-	top: -50px;
+	top: calc(-1 * var(--default-clickable-area));
 	right: 0;
-	width: 44px;
-	height: 44px;
-	z-index: 10;
-	border: 0;
-	background: none;
+	z-index: 2;
 	opacity: .7;
-	padding: 0;
 
 	.app-content:hover & {
 		background-color: rgba(0, 0, 0, 0.1) !important;
diff --git a/src/components/CallView/shared/LocalVideo.vue b/src/components/CallView/shared/LocalVideo.vue
index 621aeb069..80fb6127c 100644
--- a/src/components/CallView/shared/LocalVideo.vue
+++ b/src/components/CallView/shared/LocalVideo.vue
@@ -58,11 +58,12 @@
 
 		<div v-if="mouseover && isSelectable" class="hover-shadow" />
 		<div class="bottom-bar">
-			<button v-if="isBig"
+			<NcButton v-if="isBig"
+				type="tertiary"
 				class="bottom-bar__button"
 				@click="handleStopFollowing">
 				{{ stopFollowingLabel }}
-			</button>
+			</NcButton>
 		</div>
 	</div>
 </template>
@@ -79,6 +80,7 @@ import {
 } from '@nextcloud/dialogs'
 
 import NcAvatar from '@nextcloud/vue/dist/Components/NcAvatar.js'
+import NcButton from '@nextcloud/vue/dist/Components/NcButton.js'
 
 import VideoBackground from './VideoBackground.vue'
 
@@ -91,6 +93,7 @@ export default {
 
 	components: {
 		NcAvatar,
+		NcButton,
 		VideoBackground,
 	},
 
@@ -442,14 +445,12 @@ export default {
 		justify-content: center;
 		height: 48px;
 	}
-	&__button {
+	& &__button {
 		opacity: 0.8;
-		margin-left: 4px;
-		border: none;
+		background-color: var(--color-background-dark);
 		&:hover,
 		&:focus {
 			opacity: 1;
-			border: none;
 		}
 	}
 }
diff --git a/src/components/CallView/shared/VideoBottomBar.vue b/src/components/CallView/shared/VideoBottomBar.vue
index 11caf1c4f..51c24d6b6 100644
--- a/src/components/CallView/shared/VideoBottomBar.vue
+++ b/src/components/CallView/shared/VideoBottomBar.vue
@@ -44,52 +44,61 @@
 				<div v-if="!isScreen"
 					v-show="showVideoOverlay"
 					class="bottom-bar__mediaIndicator">
-					<button v-show="!connectionStateFailedNoRestart"
+					<NcButton v-show="!connectionStateFailedNoRestart"
 						v-if="showMicrophone || showMicrophoneOff"
 						v-tooltip="audioButtonTooltip"
 						class="muteIndicator"
+						type="tertiary-no-background"
 						:disabled="!model.attributes.audioAvailable || !selfIsModerator"
 						@click.stop="forceMute">
-						<Microphone v-if="showMicrophone"
-							:size="20"
-							fill-color="#ffffff" />
-						<MicrophoneOff v-if="showMicrophoneOff"
-							:size="20"
-							fill-color="#ffffff" />
-					</button>
-					<button v-show="!connectionStateFailedNoRestart && model.attributes.videoAvailable"
+						<template #icon>
+							<Microphone v-if="showMicrophone"
+								:size="20"
+								fill-color="#ffffff" />
+							<MicrophoneOff v-if="showMicrophoneOff"
+								:size="20"
+								fill-color="#ffffff" />
+						</template>
+					</NcButton>
+					<NcButton v-show="!connectionStateFailedNoRestart && model.attributes.videoAvailable"
 						v-tooltip="videoButtonTooltip"
 						class="hideRemoteVideo"
+						type="tertiary-no-background"
 						@click.stop="toggleVideo">
-						<VideoIcon v-if="showVideoButton"
-							:size="20"
-							fill-color="#ffffff" />
-						<VideoOff v-if="!showVideoButton"
-							:size="20"
-							fill-color="#ffffff" />
-					</button>
-					<button v-show="!connectionStateFailedNoRestart"
+						<template #icon>
+							<VideoIcon v-if="showVideoButton"
+								:size="20"
+								fill-color="#ffffff" />
+							<VideoOff v-if="!showVideoButton"
+								:size="20"
+								fill-color="#ffffff" />
+						</template>
+					</NcButton>
+					<NcButton v-show="!connectionStateFailedNoRestart"
 						v-tooltip="t('spreed', 'Show screen')"
 						class="screensharingIndicator"
+						type="tertiary-no-background"
 						:class="screenSharingButtonClass"
 						@click.stop="switchToScreen">
-						<Monitor :size="20"
-							fill-color="#ffffff" />
-					</button>
-					<button v-show="connectionStateFailedNoRestart"
-						class="iceFailedIndicator"
-						:class="{ 'not-failed': !connectionStateFailedNoRestart }"
-						disabled="true">
+						<template #icon>
+							<Monitor :size="20"
+								fill-color="#ffffff" />
+						</template>
+					</NcButton>
+					<div v-show="connectionStateFailedNoRestart"
+						class="iceFailedIndicator bottom-bar__statusIndicator"
+						:class="{ 'not-failed': !connectionStateFailedNoRestart }">
 						<AlertCircle :size="20"
 							fill-color="#ffffff" />
-					</button>
+					</div>
 				</div>
 			</transition>
-			<button v-if="hasSelectedVideo && isBig"
+			<NcButton v-if="hasSelectedVideo && isBig"
 				class="bottom-bar__button"
+				type="tertiary"
 				@click="handleStopFollowing">
 				{{ stopFollowingLabel }}
-			</button>
+			</NcButton>
 		</div>
 	</div>
 </template>
@@ -105,6 +114,7 @@ import VideoOff from 'vue-material-design-icons/VideoOff.vue'
 
 import { emit } from '@nextcloud/event-bus'
 
+import NcButton from '@nextcloud/vue/dist/Components/NcButton.js'
 import Tooltip from '@nextcloud/vue/dist/Directives/Tooltip.js'
 
 import { PARTICIPANT } from '../../../constants.js'
@@ -119,6 +129,7 @@ export default {
 		Microphone,
 		MicrophoneOff,
 		Monitor,
+		NcButton,
 		VideoIcon,
 		VideoOff,
 	},
@@ -319,14 +330,12 @@ export default {
 		display: flex;
 		flex-wrap: nowrap;
 	}
-	&__button {
+	& &__button {
 		opacity: 0.8;
-		margin-left: 4px;
-		border: none;
+		background-color: var(--color-background-dark);
 		&:hover,
 		&:focus {
 			opacity: 1;
-			border: none;
 		}
 	}
 }
@@ -335,18 +344,6 @@ export default {
 	margin-top: 8px;
 }
 
-.handIndicator,
-.muteIndicator,
-.hideRemoteVideo,
-.screensharingIndicator,
-.iceFailedIndicator {
-	position: relative;
-	display: inline-block;
-	background-color: transparent !important;
-	border: none;
-	padding: 0 12px;
-}
-
 .iceFailedIndicator {
 	opacity: .8 !important;
 }
diff --git a/src/components/MessagesList/MessagesGroup/Message/MessagePart/PollVotersDetails.vue b/src/components/MessagesList/MessagesGroup/Message/MessagePart/PollVotersDetails.vue
index 606c0e24c..973a0a758 100644
--- a/src/components/MessagesList/MessagesGroup/Message/MessagePart/PollVotersDetails.vue
+++ b/src/components/MessagesList/MessagesGroup/Message/MessagePart/PollVotersDetails.vue
@@ -21,19 +21,22 @@
 
 <template>
 	<NcPopover trigger="hover">
-		<button slot="trigger"
-			tabindex="0"
-			class="poll-voters-details">
-			<AvatarWrapperSmall v-for="(item, index) in details.slice(0, 8)"
-				:id="item.actorId"
-				:key="index"
-				:source="item.actorType"
-				:disable-menu="true"
-				:disable-tooltip="true"
-				:show-user-status="false"
-				:name="getDisplayName(item)"
-				:condensed="true" />
-		</button>
+		<template #trigger>
+			<NcButton type="tertiary-no-background"
+				class="poll-voters-details">
+				<template #icon>
+					<AvatarWrapperSmall v-for="(item, index) in details.slice(0, 8)"
+						:id="item.actorId"
+						:key="index"
+						:source="item.actorType"
+						:disable-menu="true"
+						:disable-tooltip="true"
+						:show-user-status="false"
+						:name="getDisplayName(item)"
+						:condensed="true" />
+				</template>
+			</NcButton>
+		</template>
 		<div class="poll-voters-details__popover" tabindex="0">
 			<div v-for="(item, index) in details"
 				:key="index"
@@ -54,6 +57,7 @@
 </template>
 
 <script>
+import NcButton from '@nextcloud/vue/dist/Components/NcButton.js'
 import NcPopover from '@nextcloud/vue/dist/Components/NcPopover.js'
 
 import AvatarWrapperSmall from '../../../../AvatarWrapper/AvatarWrapperSmall.vue'
@@ -66,6 +70,7 @@ export default {
 
 	components: {
 		AvatarWrapperSmall,
+		NcButton,
 		NcPopover,
 	},
 
@@ -95,12 +100,16 @@ export default {
 <style lang="scss" scoped>
 
 .poll-voters-details {
-	display: flex;
-	background: none;
-	border: none;
-	padding: 0;
 	margin-right: 8px;
 
+	&,
+	& :deep(.button-vue__icon) {
+		min-height: auto;
+		height: auto;
+		min-width: auto;
+		width: auto !important;
+	}
+
 	&__popover {
 		padding: 8px;
 		max-height: 400px;
@@ -113,12 +122,11 @@ export default {
 
 	&__list-item {
 		display: flex;
+		justify-content: flex-start;
 		align-items: center;
+		min-width: 150px;
 		height: 32px;
 		margin-bottom: var(--margin-small);
-		min-width: 150px;
-		justify-content: flex-start;
-		align-items: center;
 	}
 }