diff options
author | Maksim Sukharev <antreesy.web@gmail.com> | 2023-02-24 10:57:19 +0100 |
---|---|---|
committer | Maksim Sukharev <antreesy.web@gmail.com> | 2023-02-24 10:57:19 +0100 |
commit | 30d30493f83de6e6e0415d2837e67569e3eb0b23 (patch) | |
tree | a3938e7642dc40120d2201001e892a2a24509785 /src/components/CallView/Grid/Grid.vue | |
parent | fc423d01ff27c0110e88d081e31fee00a45c85b0 (diff) |
change native buttons to NcButton components
Signed-off-by: Maksim Sukharev <antreesy.web@gmail.com>
Diffstat (limited to 'src/components/CallView/Grid/Grid.vue')
-rw-r--r-- | src/components/CallView/Grid/Grid.vue | 108 |
1 files changed, 51 insertions, 57 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; |