Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

[stable26] Remove empty space from Call Recording button #8979

Merged
merged 2 commits into from Mar 7, 2023
Merged

[stable26] Remove empty space from Call Recording button #8979

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
8e29849
Fix classes, imports, typos
Antreesy Mar 6, 2023
992fbda
refactor CallTime.vue, remove redundant styles
Antreesy Mar 6, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
57 changes: 28 additions & 29 deletions src/components/TopBar/CallTime.vue
View file
Open in desktop
Expand Up @@ -19,30 +19,28 @@
-->

<template>
<NcPopover class="top-bar__button call-time"
<NcPopover class="call-time"
close-after-click="true"
:menu-title="callTime"
:shown.sync="showPopover"
:class="{ 'call-time--wide': isWide }"
:triggers="[]"
:container="container">
<template #trigger>
<NcButton :disabled="(!isStartingRecording && !isRecording) || !isModerator"
<NcButton :disabled="!isShowRecordingStatus || !isModerator"
:wide="true"
:class="{ 'call-time__not-recording': !isStartingRecording && !isRecording }"
:title="isStartingRecording ? t('spreed', 'Starting the recording') : t('spreed', 'Recording')"
:title="recordingButtonTitle"
type="tertiary"
@click="showPopover = true">
<template v-if="isStartingRecording" #icon>
<RecordCircle :size="20"
fill-color="var(--color-loading-light)" />
</template>
<template v-else-if="isRecording" #icon>
<RecordCircle :size="20"
<template v-if="isShowRecordingStatus" #icon>
<RecordCircle v-if="isRecording"
:size="20"
fill-color="#e9322d" />
<RecordCircle v-else
:size="20"
fill-color="var(--color-loading-light)" />
</template>
{{ formattedTime }}
</ncbutton>
</NcButton>
</template>
<NcButton v-if="isStartingRecording"
type="tertiary-no-background"
Expand All @@ -66,7 +64,6 @@
</template>

<script>

import RecordCircle from 'vue-material-design-icons/RecordCircle.vue'
import StopIcon from 'vue-material-design-icons/Stop.vue'

Expand All @@ -81,11 +78,11 @@ export default {
name: 'CallTime',

components: {
RecordCircle,
StopIcon,
NcButton,
NcLoadingIcon,
NcPopover,
NcButton,
RecordCircle,
StopIcon,
},

mixins: [isInLobby],
Expand Down Expand Up @@ -146,10 +143,6 @@ export default {
return hours + ' : ' + minutes + ' : ' + seconds
},

isWide() {
return this.formattedTime.length > 7
},

token() {
return this.$store.getters.getToken()
},
Expand All @@ -167,6 +160,20 @@ export default {
return this.conversation.callRecording === CALL.RECORDING.VIDEO
|| this.conversation.callRecording === CALL.RECORDING.AUDIO
},

isShowRecordingStatus() {
return this.isStartingRecording || this.isRecording
},

recordingButtonTitle() {
if (this.isStartingRecording) {
return t('spreed', 'Starting the recording')
} else if (this.isRecording) {
return t('spreed', 'Recording')
}

return ''
},
},

mounted() {
Expand Down Expand Up @@ -204,15 +211,6 @@ export default {
align-items: center;
height: var(--default-clickable-area);
font-weight: bold;
width: 116px;

&__not-recording {
padding-left: var(--default-clickable-area) !important
}

&--wide {
width: 148px;
}
}

::v-deep .button-vue {
Expand All @@ -221,6 +219,7 @@ export default {

&:disabled {
opacity: 1 !important;
pointer-events: none;
}
}

Expand Down
21 changes: 11 additions & 10 deletions src/components/TopBar/TopBar.vue
View file
Open in desktop
Expand Up @@ -57,7 +57,7 @@
<!-- Call time -->
<CallTime v-if="isInCall"
:start="conversation.callStartTime"
class="dark-hover" />
class="top-bar__button dark-hover" />

<!-- Participants counter -->
<NcButton v-if="isInCall && !isOneToOneConversation && isModeratorOrUser"
Expand Down Expand Up @@ -163,17 +163,19 @@ export default {
},

components: {
// Components
BreakoutRoomsEditor,
NcCounterBubble,
CallButton,
AccountMultiple,
MessageText,
CallTime,
ConversationIcon,
LocalMediaControls,
TopBarMenu,
NcButton,
CallTime,
NcCounterBubble,
TopBarMenu,
// Icons
AccountMultiple,
MenuIcon,
MessageText,
},

mixins: [
Expand Down Expand Up @@ -265,7 +267,7 @@ export default {
* Online status of the peer in one to one conversation.
*/
isPeerOffline() {
// Only compute this in on to one conversations
// Only compute this in one-to-one conversations
if (!this.isOneToOneConversation) {
return undefined
}
Expand Down Expand Up @@ -301,7 +303,7 @@ export default {
}
},

hasUnreadMentions(newValue, oldValue) {
hasUnreadMentions(newValue) {
if (!this.isInCall || !this.showOpenSidebarButton) {
return
}
Expand Down Expand Up @@ -375,14 +377,13 @@ export default {

// TODO: implement real method
stopRecording() {
console.debug('stop recordiiing')
console.debug('stop recording')
},
},
}
</script>

<style lang="scss" scoped>

@import '../../assets/variables';

.top-bar {
Expand Down