diff options
Diffstat (limited to 'src/components')
72 files changed, 832 insertions, 832 deletions
diff --git a/src/components/AdminSettings/AllowedGroups.vue b/src/components/AdminSettings/AllowedGroups.vue index cb6c6219f..6091dec37 100644 --- a/src/components/AdminSettings/AllowedGroups.vue +++ b/src/components/AdminSettings/AllowedGroups.vue @@ -34,7 +34,7 @@ </p> <div class="allowed-groups-settings-content"> - <Multiselect v-model="allowedGroups" + <NcMultiselect v-model="allowedGroups" name="allow_groups_use_talk" class="allowed-groups-select" :options="groups" @@ -50,16 +50,16 @@ label="displayname" @search-change="searchGroup" /> - <ButtonVue type="primary" + <NcButton type="primary" :disabled="loading" @click="saveAllowedGroups"> {{ saveLabelAllowedGroups }} - </ButtonVue> + </NcButton> </div> <h3>{{ t('spreed', 'Limit creating a public and group conversation') }}</h3> <div class="allowed-groups-settings-content"> - <Multiselect v-model="canStartConversations" + <NcMultiselect v-model="canStartConversations" name="allow_groups_start_conversation" class="allowed-groups-select" :options="groups" @@ -75,16 +75,16 @@ label="displayname" @search-change="searchGroup" /> - <ButtonVue type="primary" + <NcButton type="primary" :disabled="loading" @click="saveStartConversationsGroups"> {{ saveLabelStartConversations }} - </ButtonVue> + </NcButton> </div> <h3>{{ t('spreed', 'Limit starting a call') }}</h3> <div class="allowed-groups-settings-content"> - <Multiselect id="start_calls" + <NcMultiselect id="start_calls" v-model="startCalls" name="allow_groups_start_calls" :options="startCallOptions" @@ -101,12 +101,12 @@ </template> <script> -import Multiselect from '@nextcloud/vue/dist/Components/Multiselect.js' +import NcMultiselect from '@nextcloud/vue/dist/Components/NcMultiselect.js' import axios from '@nextcloud/axios' import debounce from 'debounce' import { generateOcsUrl } from '@nextcloud/router' import { loadState } from '@nextcloud/initial-state' -import ButtonVue from '@nextcloud/vue/dist/Components/ButtonVue.js' +import NcButton from '@nextcloud/vue/dist/Components/NcButton.js' const startCallOptions = [ { value: 0, label: t('spreed', 'Everyone') }, @@ -119,8 +119,8 @@ export default { name: 'AllowedGroups', components: { - Multiselect, - ButtonVue, + NcMultiselect, + NcButton, }, data() { diff --git a/src/components/AdminSettings/GeneralSettings.vue b/src/components/AdminSettings/GeneralSettings.vue index a58950cf8..28269aec8 100644 --- a/src/components/AdminSettings/GeneralSettings.vue +++ b/src/components/AdminSettings/GeneralSettings.vue @@ -28,7 +28,7 @@ <div class="paragraph"> <label for="default_group_notification">{{ t('spreed', 'Default group notification') }}</label> - <Multiselect id="default_group_notification" + <NcMultiselect id="default_group_notification" v-model="defaultGroupNotification" name="default_group_notification" :options="defaultGroupNotificationOptions" @@ -41,25 +41,25 @@ <h3>{{ t('spreed', 'Integration into other apps') }}</h3> - <CheckboxRadioSwitch :checked.sync="conversationsFiles" + <NcCheckboxRadioSwitch :checked.sync="conversationsFiles" name="conversations_files" :disabled="loading || loadingConversationsFiles" @change="saveConversationsFiles"> {{ t('spreed', 'Allow conversations on files') }} - </CheckboxRadioSwitch> + </NcCheckboxRadioSwitch> - <CheckboxRadioSwitch :checked.sync="conversationsFilesPublicShares" + <NcCheckboxRadioSwitch :checked.sync="conversationsFilesPublicShares" name="conversations_files_public_shares" :disabled="loading || loadingConversationsFiles || !conversationsFiles" @change="saveConversationsFilesPublicShares"> {{ t('spreed', 'Allow conversations on public shares for files') }} - </CheckboxRadioSwitch> + </NcCheckboxRadioSwitch> </div> </template> <script> -import CheckboxRadioSwitch from '@nextcloud/vue/dist/Components/CheckboxRadioSwitch.js' -import Multiselect from '@nextcloud/vue/dist/Components/Multiselect.js' +import NcCheckboxRadioSwitch from '@nextcloud/vue/dist/Components/NcCheckboxRadioSwitch.js' +import NcMultiselect from '@nextcloud/vue/dist/Components/NcMultiselect.js' import { loadState } from '@nextcloud/initial-state' const defaultGroupNotificationOptions = [ @@ -71,8 +71,8 @@ export default { name: 'GeneralSettings', components: { - CheckboxRadioSwitch, - Multiselect, + NcCheckboxRadioSwitch, + NcMultiselect, }, data() { diff --git a/src/components/AdminSettings/HostedSignalingServer.vue b/src/components/AdminSettings/HostedSignalingServer.vue index 537d7afe8..7005cf0b5 100644 --- a/src/components/AdminSettings/HostedSignalingServer.vue +++ b/src/components/AdminSettings/HostedSignalingServer.vue @@ -81,11 +81,11 @@ </option> </select> - <ButtonVue type="primary" + <NcButton type="primary" :disabled="!hostedHPBFilled || loading" @click="requestHPBTrial"> {{ t('spreed', 'Request signaling server trial') }} - </ButtonVue> + </NcButton> <p v-if="requestError !== ''" class="warning"> @@ -122,17 +122,17 @@ {{ requestError }} </p> - <ButtonVue type="error" + <NcButton type="error" :disabled="loading" @click="deleteAccount"> {{ t('spreed', 'Delete the signaling server account') }} - </ButtonVue> + </NcButton> </div> </div> </template> <script> -import ButtonVue from '@nextcloud/vue/dist/Components/ButtonVue.js' +import NcButton from '@nextcloud/vue/dist/Components/NcButton.js' import { loadState } from '@nextcloud/initial-state' import axios from '@nextcloud/axios' import { generateOcsUrl } from '@nextcloud/router' @@ -142,7 +142,7 @@ export default { name: 'HostedSignalingServer', components: { - ButtonVue, + NcButton, }, data() { diff --git a/src/components/AdminSettings/MatterbridgeIntegration.vue b/src/components/AdminSettings/MatterbridgeIntegration.vue index 9074cd718..f06bbf01d 100644 --- a/src/components/AdminSettings/MatterbridgeIntegration.vue +++ b/src/components/AdminSettings/MatterbridgeIntegration.vue @@ -57,23 +57,23 @@ </p> <p> - <ButtonVue v-if="isInstalling"> + <NcButton v-if="isInstalling"> <template #icon> <span class="icon icon-loading-small" /> </template> {{ t('spreed', 'Downloading …') }} - </ButtonVue> - <ButtonVue v-else + </NcButton> + <NcButton v-else @click="enableMatterbridgeApp"> {{ t('spreed', 'Install Talk Matterbridge') }} - </ButtonVue> + </NcButton> </p> </template> </div> </template> <script> -import ButtonVue from '@nextcloud/vue/dist/Components/ButtonVue.js' +import NcButton from '@nextcloud/vue/dist/Components/NcButton.js' import { loadState } from '@nextcloud/initial-state' import { showError } from '@nextcloud/dialogs' import { @@ -86,7 +86,7 @@ export default { name: 'MatterbridgeIntegration', components: { - ButtonVue, + NcButton, }, data() { diff --git a/src/components/AdminSettings/SIPBridge.vue b/src/components/AdminSettings/SIPBridge.vue index c642dda43..a47bc5ce7 100644 --- a/src/components/AdminSettings/SIPBridge.vue +++ b/src/components/AdminSettings/SIPBridge.vue @@ -35,7 +35,7 @@ {{ t('spreed', 'Only users of the following groups can enable SIP in conversations they moderate') }} </p> - <Multiselect v-model="sipGroups" + <NcMultiselect v-model="sipGroups" class="sip-bridge__sip-groups-select" :options="groups" :placeholder="t('spreed', 'Enable SIP configuration')" @@ -73,18 +73,18 @@ :disabled="loading" :placeholder="t('spreed', 'Phone number (Country)')" /> - <ButtonVue type="primary" + <NcButton type="primary" :disabled="loading" @click="saveSIPSettings"> {{ t('spreed', 'Save changes') }} - </ButtonVue> + </NcButton> </template> </div> </template> <script> -import ButtonVue from '@nextcloud/vue/dist/Components/ButtonVue.js' -import Multiselect from '@nextcloud/vue/dist/Components/Multiselect.js' +import NcButton from '@nextcloud/vue/dist/Components/NcButton.js' +import NcMultiselect from '@nextcloud/vue/dist/Components/NcMultiselect.js' import axios from '@nextcloud/axios' import debounce from 'debounce' import { generateOcsUrl } from '@nextcloud/router' @@ -96,8 +96,8 @@ export default { name: 'SIPBridge', components: { - ButtonVue, - Multiselect, + NcButton, + NcMultiselect, }, data() { diff --git a/src/components/AdminSettings/SignalingServer.vue b/src/components/AdminSettings/SignalingServer.vue index 2aa4d0f1f..feeee24c3 100644 --- a/src/components/AdminSettings/SignalingServer.vue +++ b/src/components/AdminSettings/SignalingServer.vue @@ -38,21 +38,21 @@ @change="updateVerify"> <label :for="'verify' + index">{{ t('spreed', 'Validate SSL certificate') }}</label> - <ButtonVue v-show="!loading" + <NcButton v-show="!loading" type="tertiary-no-background" :aria-label="t('spreed', 'Delete this server')" @click="removeServer"> <template #icon> <Delete :size="20" /> </template> - </ButtonVue> + </NcButton> <span v-if="server">{{ connectionState }}</span> </div> </template> <script> -import ButtonVue from '@nextcloud/vue/dist/Components/ButtonVue.js' +import NcButton from '@nextcloud/vue/dist/Components/NcButton.js' import Delete from 'vue-material-design-icons/Delete.vue' import { getWelcomeMessage } from '../../services/signalingService.js' @@ -60,7 +60,7 @@ export default { name: 'SignalingServer', components: { - ButtonVue, + NcButton, Delete, }, diff --git a/src/components/AdminSettings/SignalingServers.vue b/src/components/AdminSettings/SignalingServers.vue index 8298e6325..79fa5470a 100644 --- a/src/components/AdminSettings/SignalingServers.vue +++ b/src/components/AdminSettings/SignalingServers.vue @@ -25,7 +25,7 @@ <h2> {{ t('spreed', 'High-performance backend') }} - <ButtonVue v-if="!loading && showAddServerButton" + <NcButton v-if="!loading && showAddServerButton" class="signaling-server__add-icon" type="tertiary-no-background" :aria-label="t('spreed', 'Add a new high-performance backend server')" @@ -33,7 +33,7 @@ <template #icon> <Plus :size="20" /> </template> - </ButtonVue> + </NcButton> </h2> <p class="settings-hint"> @@ -86,7 +86,7 @@ <script> import SignalingServer from '../../components/AdminSettings/SignalingServer.vue' -import ButtonVue from '@nextcloud/vue/dist/Components/ButtonVue.js' +import NcButton from '@nextcloud/vue/dist/Components/NcButton.js' import Plus from 'vue-material-design-icons/Plus.vue' import { showSuccess } from '@nextcloud/dialogs' import { loadState } from '@nextcloud/initial-state' @@ -97,7 +97,7 @@ export default { name: 'SignalingServers', components: { - ButtonVue, + NcButton, SignalingServer, Plus, }, diff --git a/src/components/AdminSettings/StunServer.vue b/src/components/AdminSettings/StunServer.vue index e54dce8ce..3f1bd39b9 100644 --- a/src/components/AdminSettings/StunServer.vue +++ b/src/components/AdminSettings/StunServer.vue @@ -32,26 +32,26 @@ :disabled="loading" :aria-label="t('spreed', 'STUN server URL')" @input="update"> - <ButtonVue v-show="!isValidServer" + <NcButton v-show="!isValidServer" type="tertiary-no-background" :aria-label="t('spreed', 'The server address is invalid')"> <template #icon> <AlertCircle /> </template> - </ButtonVue> - <ButtonVue v-show="!loading" + </NcButton> + <NcButton v-show="!loading" type="tertiary-no-background" :aria-label="t('spreed', 'Delete this server')" @click="removeServer"> <template #icon> <Delete :size="20" /> </template> - </ButtonVue> + </NcButton> </div> </template> <script> -import ButtonVue from '@nextcloud/vue/dist/Components/ButtonVue.js' +import NcButton from '@nextcloud/vue/dist/Components/NcButton.js' import AlertCircle from 'vue-material-design-icons/AlertCircle.vue' import Delete from 'vue-material-design-icons/Delete.vue' @@ -59,7 +59,7 @@ export default { name: 'StunServer', components: { - ButtonVue, + NcButton, AlertCircle, Delete, }, diff --git a/src/components/AdminSettings/StunServers.vue b/src/components/AdminSettings/StunServers.vue index dc2dcb6ae..820ad0319 100644 --- a/src/components/AdminSettings/StunServers.vue +++ b/src/components/AdminSettings/StunServers.vue @@ -25,7 +25,7 @@ <h2> {{ t('spreed', 'STUN servers') }} - <ButtonVue v-if="!loading" + <NcButton v-if="!loading" class="stun-server__add-icon" type="tertiary-no-background" :aria-label="t('spreed', 'Add a new STUN server')" @@ -33,7 +33,7 @@ <template #icon> <Plus :size="20" /> </template> - </ButtonVue> + </NcButton> </h2> <p class="settings-hint"> @@ -56,7 +56,7 @@ <script> import StunServer from '../../components/AdminSettings/StunServer.vue' -import ButtonVue from '@nextcloud/vue/dist/Components/ButtonVue.js' +import NcButton from '@nextcloud/vue/dist/Components/NcButton.js' import Plus from 'vue-material-design-icons/Plus.vue' import debounce from 'debounce' import { loadState } from '@nextcloud/initial-state' @@ -66,7 +66,7 @@ export default { name: 'StunServers', components: { - ButtonVue, + NcButton, StunServer, Plus, }, diff --git a/src/components/AdminSettings/TurnServer.vue b/src/components/AdminSettings/TurnServer.vue index 9b2ec182c..7bb3a05ae 100644 --- a/src/components/AdminSettings/TurnServer.vue +++ b/src/components/AdminSettings/TurnServer.vue @@ -73,7 +73,7 @@ </option> </select> - <ButtonVue v-show="!loading" + <NcButton v-show="!loading" type="tertiary-no-background" :aria-label="testResult" @click="testServer"> @@ -83,20 +83,20 @@ <Check v-else-if="testingSuccess" /> <CategoryMonitoring v-else /> </template> - </ButtonVue> - <ButtonVue v-show="!loading" + </NcButton> + <NcButton v-show="!loading" type="tertiary-no-background" :aria-label="t('spreed', 'Delete this server')" @click="removeServer"> <template #icon> <Delete :size="20" /> </template> - </ButtonVue> + </NcButton> </div> </template> <script> -import ButtonVue from '@nextcloud/vue/dist/Components/ButtonVue.js' +import NcButton from '@nextcloud/vue/dist/Components/NcButton.js' import Tooltip from '@nextcloud/vue/dist/Directives/Tooltip.js' import AlertCircle from 'vue-material-design-icons/AlertCircle.vue' import Check from 'vue-material-design-icons/Check.vue' @@ -114,7 +114,7 @@ export default { }, components: { - ButtonVue, + NcButton, AlertCircle, CategoryMonitoring, Check, diff --git a/src/components/AdminSettings/TurnServers.vue b/src/components/AdminSettings/TurnServers.vue index 7331db37a..7d49ba849 100644 --- a/src/components/AdminSettings/TurnServers.vue +++ b/src/components/AdminSettings/TurnServers.vue @@ -25,7 +25,7 @@ <h2> {{ t('spreed', 'TURN servers') }} - <ButtonVue v-if="!loading" + <NcButton v-if="!loading" class="turn-server__add-icon" type="tertiary-no-background" :aria-label="t('spreed', 'Add a new TURN server')" @@ -33,7 +33,7 @@ <template #icon> <Plus :size="20" /> </template> - </ButtonVue> + </NcButton> </h2> <!-- eslint-disable-next-line vue/no-v-html --> @@ -60,7 +60,7 @@ </template> <script> -import ButtonVue from '@nextcloud/vue/dist/Components/ButtonVue.js' +import NcButton from '@nextcloud/vue/dist/Components/NcButton.js' import TurnServer from '../../components/AdminSettings/TurnServer.vue' import { loadState } from '@nextcloud/initial-state' import Plus from 'vue-material-design-icons/Plus.vue' @@ -71,7 +71,7 @@ export default { name: 'TurnServers', components: { - ButtonVue, + NcButton, TurnServer, Plus, }, diff --git a/src/components/AdminSettings/WebServerSetupChecks.vue b/src/components/AdminSettings/WebServerSetupChecks.vue index 47263ca29..79f860c46 100644 --- a/src/components/AdminSettings/WebServerSetupChecks.vue +++ b/src/components/AdminSettings/WebServerSetupChecks.vue @@ -32,7 +32,7 @@ <ul class="web-server-setup-checks"> <li class="background-blur"> {{ t('spreed', 'Files required for background blur can be loaded') }} - <ButtonVue v-tooltip="backgroundBlurAvailableToolTip" + <NcButton v-tooltip="backgroundBlurAvailableToolTip" type="tertiary" class="vue-button-inline" :class="{'success-button': backgroundBlurAvailable === true, 'error-button': backgroundBlurAvailable === false}" @@ -43,7 +43,7 @@ <Check v-else-if="backgroundBlurAvailable === true" :size="20" /> <span v-else class="icon icon-loading-small" /> </template> - </ButtonVue> + </NcButton> </li> </ul> </div> @@ -51,7 +51,7 @@ <script> import AlertCircle from 'vue-material-design-icons/AlertCircle.vue' -import ButtonVue from '@nextcloud/vue/dist/Components/ButtonVue.js' +import NcButton from '@nextcloud/vue/dist/Components/NcButton.js' import Check from 'vue-material-design-icons/Check.vue' import Tooltip from '@nextcloud/vue/dist/Directives/Tooltip.js' import JitsiStreamBackgroundEffect from '../../utils/media/effects/virtual-background/JitsiStreamBackgroundEffect.js' @@ -70,7 +70,7 @@ export default { components: { AlertCircle, - ButtonVue, + NcButton, Check, }, diff --git a/src/components/AvatarWrapper/AvatarWrapper.vue b/src/components/AvatarWrapper/AvatarWrapper.vue index 410614463..08b2db1c3 100644 --- a/src/components/AvatarWrapper/AvatarWrapper.vue +++ b/src/components/AvatarWrapper/AvatarWrapper.vue @@ -25,7 +25,7 @@ <div v-if="iconClass" class="icon" :class="[`avatar-${sizeToString}px`, iconClass]" /> - <Avatar v-else-if="!isGuest" + <NcAvatar v-else-if="!isGuest" :user="id" :display-name="name" :menu-container="menuContainerWithFallback" @@ -45,14 +45,14 @@ </template> <script> -import Avatar from '@nextcloud/vue/dist/Components/Avatar.js' +import NcAvatar from '@nextcloud/vue/dist/Components/NcAvatar.js' export default { name: 'AvatarWrapper', components: { - Avatar, + NcAvatar, }, props: { diff --git a/src/components/AvatarWrapper/AvatarWrapperSmall.vue b/src/components/AvatarWrapper/AvatarWrapperSmall.vue index 2fff264d0..56839070c 100644 --- a/src/components/AvatarWrapper/AvatarWrapperSmall.vue +++ b/src/components/AvatarWrapper/AvatarWrapperSmall.vue @@ -25,7 +25,7 @@ <div v-if="iconClass" class="icon" :class="[`avatar-${sizeToString}px`, iconClass]" /> - <Avatar v-else-if="!isGuest" + <NcAvatar v-else-if="!isGuest" :user="id" :display-name="name" :menu-container="menuContainer" @@ -43,14 +43,14 @@ </template> <script> -import Avatar from '@nextcloud/vue/dist/Components/Avatar.js' +import NcAvatar from '@nextcloud/vue/dist/Components/NcAvatar.js' export default { name: 'AvatarWrapperSmall', components: { - Avatar, + NcAvatar, }, props: { diff --git a/src/components/CallView/shared/EmptyCallView.vue b/src/components/CallView/shared/EmptyCallView.vue index f1e731b3e..69a1ea216 100644 --- a/src/components/CallView/shared/EmptyCallView.vue +++ b/src/components/CallView/shared/EmptyCallView.vue @@ -27,16 +27,16 @@ <p v-if="message" class="emptycontent-additional"> {{ message }} </p> - <ButtonVue v-if="showLink" + <NcButton v-if="showLink" type="primary" @click.stop.prevent="copyLinkToConversation"> {{ t('spreed', 'Copy link') }} - </ButtonVue> + </NcButton> </div> </template> <script> -import ButtonVue from '@nextcloud/vue/dist/Components/ButtonVue.js' +import NcButton from '@nextcloud/vue/dist/Components/NcButton.js' import { showError, showSuccess } from '@nextcloud/dialogs' import { generateUrl } from '@nextcloud/router' import { CONVERSATION, PARTICIPANT } from '../../../constants.js' @@ -46,7 +46,7 @@ export default { name: 'EmptyCallView', components: { - ButtonVue, + NcButton, }, props: { diff --git a/src/components/CallView/shared/LocalMediaControls.vue b/src/components/CallView/shared/LocalMediaControls.vue index 937412f90..7c7dec35a 100644 --- a/src/components/CallView/shared/LocalMediaControls.vue +++ b/src/components/CallView/shared/LocalMediaControls.vue @@ -22,14 +22,14 @@ @shortkey="handleShortkey"> <div class="buttons-bar"> <div class="network-connection-state"> - <Popover v-if="qualityWarningTooltip" + <NcPopover v-if="qualityWarningTooltip" :boundary="boundaryElement" :aria-label="qualityWarningAriaLabel" trigger="hover" :auto-hide="false" :shown="showQualityWarningTooltip"> <template #trigger> - <ButtonVue id="quality_warning_button" + <NcButton id="quality_warning_button" type="tertiary-no-background" class="trigger" @click="mouseover = !mouseover"> @@ -37,29 +37,29 @@ <NetworkStrength2Alert fill-color="#e9322d" :size="20" /> </template> - </ButtonVue> + </NcButton> </template> <div class="hint"> <span>{{ qualityWarningTooltip.content }}</span> <div class="hint__actions"> - <ButtonVue v-if="qualityWarningTooltip.action" + <NcButton v-if="qualityWarningTooltip.action" type="primary" class="hint__button" @click="executeQualityWarningTooltipAction"> {{ qualityWarningTooltip.actionLabel }} - </ButtonVue> - <ButtonVue v-if="!isQualityWarningTooltipDismissed" + </NcButton> + <NcButton v-if="!isQualityWarningTooltipDismissed" type="tertiary" class="hint__button" @click="dismissQualityWarningTooltip"> {{ t('spreed', 'Dismiss') }} - </ButtonVue> + </NcButton> </div> </div> - </Popover> + </NcPopover> </div> <div id="muteWrapper"> - <ButtonVue v-shortkey.once="['m']" + <NcButton v-shortkey.once="['m']" v-tooltip="audioButtonTooltip" type="tertiary-no-background" :aria-label="audioButtonAriaLabel" @@ -74,13 +74,13 @@ :size="20" fill-color="#ffffff" /> </template> - </ButtonVue> + </NcButton> <span v-show="model.attributes.audioAvailable" ref="volumeIndicator" class="volume-indicator" :class="{'microphone-off': !showMicrophoneOn}" /> </div> - <ButtonVue v-shortkey.once="['v']" + <NcButton v-shortkey.once="['v']" v-tooltip="videoButtonTooltip" type="tertiary-no-background" :aria-label="videoButtonAriaLabel" @@ -95,8 +95,8 @@ :size="20" fill-color="#ffffff" /> </template> - </ButtonVue> - <ButtonVue v-if="isVirtualBackgroundAvailable && !showActions" + </NcButton> + <NcButton v-if="isVirtualBackgroundAvailable && !showActions" v-tooltip="toggleVirtualBackgroundButtonLabel" type="tertiary-no-background" :aria-label="toggleVirtualBackgroundButtonLabel" @@ -110,8 +110,8 @@ :size="20" fill-color="#ffffff" /> </template> - </ButtonVue> - <Actions v-if="!screenSharingButtonHidden" + </NcButton> + <NcActions v-if="!screenSharingButtonHidden" id="screensharing-button" v-tooltip="screenSharingButtonTooltip" :aria-label="screenSharingButtonAriaLabel" @@ -133,30 +133,30 @@ </template> <!-- /Actions button icon --> <!-- Actions --> - <ActionButton v-if="!screenSharingMenuOpen" + <NcActionButton v-if="!screenSharingMenuOpen" @click.stop="toggleScreenSharingMenu"> <template #icon> <PresentToAll :size="20" fill-color="#ffffff" /> </template> {{ screenSharingButtonTooltip }} - </ActionButton> - <ActionButton v-if="model.attributes.localScreen" + </NcActionButton> + <NcActionButton v-if="model.attributes.localScreen" @click="showScreen"> <template #icon> <Monitor :size="20" /> </template> {{ t('spreed', 'Show your screen') }} - </ActionButton> - <ActionButton v-if="model.attributes.localScreen" + </NcActionButton> + <NcActionButton v-if="model.attributes.localScreen" @click="stopScreen"> <template #icon> <CancelPresentation :size="20" /> </template> {{ t('spreed', 'Stop screensharing') }} - </ActionButton> - </Actions> - <ButtonVue v-shortkey.once="['r']" + </NcActionButton> + </NcActions> + <NcButton v-shortkey.once="['r']" v-tooltip="t('spreed', 'Lower hand (R)')" type="tertiary-no-background" class="lower-hand" @@ -171,8 +171,8 @@ <HandBackLeft :size="18" fill-color="#ffffff" /> </template> - </ButtonVue> - <Actions v-if="showActions" + </NcButton> + <NcActions v-if="showActions" v-tooltip="t('spreed', 'More actions')" :container="container" :aria-label="t('spreed', 'More actions')"> @@ -181,7 +181,7 @@ fill-color="#ffffff" /> </template> - <ActionButton :close-after-click="true" + <NcActionButton :close-after-click="true" @click="toggleHandRaised"> <!-- The following icon is much bigger than all the others so we reduce its size --> @@ -189,8 +189,8 @@ <HandBackLeft :size="18" /> </template> {{ raiseHandButtonLabel }} - </ActionButton> - <ActionButton v-if="isVirtualBackgroundAvailable" + </NcActionButton> + <NcActionButton v-if="isVirtualBackgroundAvailable" :close-after-click="true" @click="toggleVirtualBackground"> <template #icon> @@ -200,9 +200,9 @@ :size="20" /> </template> {{ toggleVirtualBackgroundButtonLabel }} - </ActionButton> + </NcActionButton> <!-- Call layout switcher --> - <ActionButton v-if="isInCall" + <NcActionButton v-if="isInCall" :close-after-click="true" @click="changeView"> <template #icon> @@ -212,16 +212,16 @@ :size="20" /> </template> {{ changeViewText }} - </ActionButton> - <ActionSeparator /> - <ActionButton :close-after-click="true" + </NcActionButton> + <NcActionSeparator /> + <NcActionButton :close-after-click="true" @click="showSettings"> <template #icon> <Cog :size="20" /> </template> {{ t('spreed', 'Devices settings') }} - </ActionButton> - </Actions> + </NcActionButton> + </NcActions> </div> </div> </template> @@ -244,15 +244,15 @@ import VideoIcon from 'vue-material-design-icons/Video.vue' import VideoOff from 'vue-material-design-icons/VideoOff.vue' import Blur from 'vue-material-design-icons/Blur.vue' import BlurOff from 'vue-material-design-icons/BlurOff.vue' -import Popover from '@nextcloud/vue/dist/Components/Popover.js' -import ButtonVue from '@nextcloud/vue/dist/Components/ButtonVue.js' +import NcPopover from '@nextcloud/vue/dist/Components/NcPopover.js' +import NcButton from '@nextcloud/vue/dist/Components/NcButton.js' import Tooltip from '@nextcloud/vue/dist/Directives/Tooltip.js' import { PARTICIPANT } from '../../../constants.js' import SpeakingWhileMutedWarner from '../../../utils/webrtc/SpeakingWhileMutedWarner.js' import NetworkStrength2Alert from 'vue-material-design-icons/NetworkStrength2Alert.vue' -import Actions from '@nextcloud/vue/dist/Components/Actions.js' -import ActionSeparator from '@nextcloud/vue/dist/Components/ActionSeparator.js' -import ActionButton from '@nextcloud/vue/dist/Components/ActionButton.js' +import NcActions from '@nextcloud/vue/dist/Components/NcActions.js' +import NcActionSeparator from '@nextcloud/vue/dist/Components/NcActionSeparator.js' +import NcActionButton from '@nextcloud/vue/dist/Components/NcActionButton.js' import { callAnalyzer } from '../../../utils/webrtc/index.js' import { CONNECTION_QUALITY } from '../../../utils/webrtc/analyzers/PeerConnectionAnalyzer.js' import isInCall from '../../../mixins/isInCall.js' @@ -266,11 +266,11 @@ export default { }, components: { NetworkStrength2Alert, - Popover, - Actions, - ActionSeparator, - ActionButton, - ButtonVue, + NcPopover, + NcActions, + NcActionSeparator, + NcActionButton, + NcButton, CancelPresentation, Cog, DotsHorizontal, diff --git a/src/components/CallView/shared/LocalVideo.vue b/src/components/CallView/shared/LocalVideo.vue index 770612c06..bf3f01705 100644 --- a/src/components/CallView/shared/LocalVideo.vue +++ b/src/components/CallView/shared/LocalVideo.vue @@ -38,7 +38,7 @@ <VideoBackground v-if="isGrid || isStripe" :display-name="displayName" :user="userId" /> - <Avatar v-if="userId" + <NcAvatar v-if="userId" :size="avatarSize" :disable-menu="true" :disable-tooltip="true" @@ -66,7 +66,7 @@ <script> import attachMediaStream from 'attachmediastream' -import Avatar from '@nextcloud/vue/dist/Components/Avatar.js' +import NcAvatar from '@nextcloud/vue/dist/Components/NcAvatar.js' import Hex from 'crypto-js/enc-hex.js' import SHA1 from 'crypto-js/sha1.js' import { @@ -83,7 +83,7 @@ export default { name: 'LocalVideo', components: { - Avatar, + NcAvatar, VideoBackground, }, diff --git a/src/components/CallView/shared/VideoVue.vue b/src/components/CallView/shared/VideoVue.vue index 04e6de1ca..e7c9b54c0 100644 --- a/src/components/CallView/shared/VideoVue.vue +++ b/src/components/CallView/shared/VideoVue.vue @@ -50,7 +50,7 @@ <template v-if="participantUserId"> <VideoBackground :display-name="participantName" :user="participantUserId" /> - <Avatar :size="avatarSize" + <NcAvatar :size="avatarSize" :disable-menu="true" :disable-tooltip="true" :user="participantUserId" @@ -89,7 +89,7 @@ <script> import attachMediaStream from 'attachmediastream' -import Avatar from '@nextcloud/vue/dist/Components/Avatar.js' +import NcAvatar from '@nextcloud/vue/dist/Components/NcAvatar.js' import { ConnectionState } from '../../../utils/webrtc/models/CallParticipantModel.js' import SHA1 from 'crypto-js/sha1.js' import Hex from 'crypto-js/enc-hex.js' @@ -106,7 +106,7 @@ export default { name: 'VideoVue', components: { - Avatar, + NcAvatar, VideoBackground, AccountCircle, Screen, diff --git a/src/components/ConversationIcon.vue b/src/components/ConversationIcon.vue index dd9d18352..fea001b7d 100644 --- a/src/components/ConversationIcon.vue +++ b/src/components/ConversationIcon.vue @@ -25,7 +25,7 @@ <div v-if="iconClass" class="avatar icon" :class="iconClass" /> - <Avatar v-else + <NcAvatar v-else :size="44" :user="item.name" :disable-menu="disableMenu" @@ -51,7 +51,7 @@ </template> <script> -import Avatar from '@nextcloud/vue/dist/Components/Avatar.js' +import NcAvatar from '@nextcloud/vue/dist/Components/NcAvatar.js' import Star from 'vue-material-design-icons/Star.vue' import VideoIcon from 'vue-material-design-icons/Video.vue' import { CONVERSATION } from '../constants.js' @@ -59,7 +59,7 @@ import { CONVERSATION } from '../constants.js' export default { name: 'ConversationIcon', components: { - Avatar, + NcAvatar, Star, VideoIcon, }, diff --git a/src/components/ConversationSettings/ConversationPermissionsSettings.vue b/src/components/ConversationSettings/ConversationPermissionsSettings.vue index d9372d0a5..d724f2cba 100644 --- a/src/components/ConversationSettings/ConversationPermissionsSettings.vue +++ b/src/components/ConversationSettings/ConversationPermissionsSettings.vue @@ -28,52 +28,52 @@ <!-- All permissions --> <div class="conversation-permissions-editor__setting"> - <CheckboxRadioSwitch :checked.sync="radioValue" + <NcCheckboxRadioSwitch :checked.sync="radioValue" :disabled="loading" value="all" name="permission_radio" type="radio" @update:checked="handleSubmitPermissions"> {{ t('spreed', 'All permissions') }} - </CheckboxRadioSwitch> + </NcCheckboxRadioSwitch> <span v-show="loading && radioValue === 'all'" class="icon-loading-small" /> </div> <p>{{ t('spreed', 'Participants have permissions to start a call, join a call, enable audio and video, and share screen.') }}</p> <!-- No permissions --> <div class="conversation-permissions-editor__setting"> - <CheckboxRadioSwitch :checked.sync="radioValue" + <NcCheckboxRadioSwitch :checked.sync="radioValue" value="restricted" :disabled="loading" name="permission_radio" type="radio" @update:checked="handleSubmitPermissions"> {{ t('spreed', 'Restricted') }} - </CheckboxRadioSwitch> + </NcCheckboxRadioSwitch> <span v-show="loading && radioValue === 'restricted'" class="icon-loading-small" /> </div> <p>{{ t('spreed', 'Participants can join calls, but cannot enable audio nor video nor share screen until a moderator manually grants them permissions.') }}</p> <!-- Advanced permissions --> <div class="conversation-permissions-editor__setting--advanced"> - <CheckboxRadioSwitch :checked.sync="radioValue" + <NcCheckboxRadioSwitch :checked.sync="radioValue" value="advanced" :disabled="loading" name="permission_radio" type="radio" @update:checked="showPermissionsEditor = true"> {{ t('spreed', 'Advanced permissions') }} - </CheckboxRadioSwitch> + </NcCheckboxRadioSwitch> <!-- Edit advanced permissions --> - <ButtonVue v-show="showEditButton" + <NcButton v-show="showEditButton" type="tertiary" :aria-label="t('spreed', 'Edit permissions')" @click="showPermissionsEditor = true"> <template #icon> <Pencil :size="20" /> </template> - </ButtonVue> + </NcButton> </div> <PermissionEditor v-if="showPermissionsEditor" :conversation-name="conversationName" @@ -86,8 +86,8 @@ <script> import PermissionEditor from '../PermissionsEditor/PermissionsEditor.vue' -import ButtonVue from '@nextcloud/vue/dist/Components/ButtonVue.js' -import CheckboxRadioSwitch from '@nextcloud/vue/dist/Components/CheckboxRadioSwitch.js' +import NcButton from '@nextcloud/vue/dist/Components/NcButton.js' +import NcCheckboxRadioSwitch from '@nextcloud/vue/dist/Components/NcCheckboxRadioSwitch.js' import Pencil from 'vue-material-design-icons/Pencil.vue' import { PARTICIPANT } from '../../constants.js' import { showError, showSuccess } from '@nextcloud/dialogs' @@ -99,8 +99,8 @@ export default { components: { PermissionEditor, - ButtonVue, - CheckboxRadioSwitch, + NcButton, + NcCheckboxRadioSwitch, Pencil, }, diff --git a/src/components/ConversationSettings/ConversationSettingsDialog.vue b/src/components/ConversationSettings/ConversationSettingsDialog.vue index 835d52170..c52067d92 100644 --- a/src/components/ConversationSettings/ConversationSettingsDialog.vue +++ b/src/components/ConversationSettings/ConversationSettingsDialog.vue @@ -20,13 +20,13 @@ --> <template> - <AppSettingsDialog role="dialog" + <NcAppSettingsDialog role="dialog" :aria-label="t('spreed', 'Conversation settings')" :open.sync="showSettings" :show-navigation="true" :container="container"> <!-- description --> - <AppSettingsSection v-if="showDescription" + <NcAppSettingsSection v-if="showDescription" id="description" :title="t('spreed', 'Description')"> <Description :editable="canFullModerate" @@ -36,77 +36,77 @@ :placeholder="t('spreed', 'Enter a description for this conversation')" @submit-description="handleUpdateDescription" @update:editing="handleEditDescription" /> - </AppSettingsSection> + </NcAppSettingsSection> <!-- Notifications settings --> - <AppSettingsSection id="notifications" + <NcAppSettingsSection id="notifications" :title="t('spreed', 'Notifications')"> <NotificationsSettings :conversation="conversation" /> - </AppSettingsSection> + </NcAppSettingsSection> <!-- Devices preview sceren --> - <AppSettingsSection id="device-checker" + <NcAppSettingsSection id="device-checker" :title="t('spreed', 'Device check')"> - <CheckboxRadioSwitch :checked.sync="showDeviceChecker"> + <NcCheckboxRadioSwitch :checked.sync="showDeviceChecker"> {{ t('spreed', 'Always show the device preview screen before joining a call in this conversation.') }} - </CheckboxRadioSwitch> - </AppSettingsSection> + </NcCheckboxRadioSwitch> + </NcAppSettingsSection> <!-- Guest access --> - <AppSettingsSection v-if="canFullModerate" + <NcAppSettingsSection v-if="canFullModerate" id="guests" :title="t('spreed', 'Guests access')"> <LinkShareSettings ref="linkShareSettings" /> - </AppSettingsSection> + </NcAppSettingsSection> <!-- TODO sepatate these 2 settings and rename the settings sections all the settings in this component are conversation settings. Proposal: move lock conversation in destructive actions and create a separate section for listablesettings --> - <AppSettingsSection v-if="canFullModerate" + <NcAppSettingsSection v-if="canFullModerate" id="conversation-settings" :title="t('spreed', 'Conversation settings')"> <ExpirationSettings :token="token" /> <ListableSettings :token="token" /> <LockingSettings :token="token" /> - </AppSettingsSection> + </NcAppSettingsSection> <!-- Conversation permissions --> - <AppSettingsSection v-if="canFullModerate" + <NcAppSettingsSection v-if="canFullModerate" id="permissions" :title="t('spreed', 'Participants permissions')"> <ConversationPermissionsSettings :token="token" /> - </AppSettingsSection> + </NcAppSettingsSection> <!-- Meeting settings --> - <AppSettingsSection v-if="canFullModerate" + <NcAppSettingsSection v-if="canFullModerate" id="meeting" :title="t('spreed', 'Meeting settings')"> <LobbySettings :token="token" /> <SipSettings v-if="canUserEnableSIP" /> - </AppSettingsSection> - <AppSettingsSection v-if="canFullModerate && matterbridgeEnabled" + </NcAppSettingsSection> + <NcAppSettingsSection v-if="canFullModerate && matterbridgeEnabled" id="matterbridge" :title="t('spreed', 'Matterbridge')"> <MatterbridgeSettings /> - </AppSettingsSection> + </NcAppSettingsSection> <!-- Destructive actions --> - <AppSettingsSection v-if="canLeaveConversation || canDeleteConversation" + <NcAppSettingsSection v-if="canLeaveConversation || canDeleteConversation" id="dangerzone" :title="t('spreed', 'Danger zone')"> <DangerZone :conversation="conversation" :can-leave-conversation="canLeaveConversation" :can-delete-conversation="canDeleteConversation" /> - </AppSettingsSection> - </AppSettingsDialog> + </NcAppSettingsSection> + </NcAppSettingsDialog> </template> <script> import { subscribe, unsubscribe } from '@nextcloud/event-bus' import { PARTICIPANT, CONVERSATION } from '../../constants.js' -import AppSettingsDialog from '@nextcloud/vue/dist/Components/AppSettingsDialog.js' -import AppSettingsSection from '@nextcloud/vue/dist/Components/AppSettingsSection.js' +import NcAppSettingsDialog from '@nextcloud/vue/dist/Components/NcAppSettingsDialog.js' +import NcAppSettingsSection from '@nextcloud/vue/dist/Components/NcAppSettingsSection.js' import ExpirationSettings from './ExpirationSettings.vue' import LinkShareSettings from './LinkShareSettings.vue' import ListableSettings from './ListableSettings.vue' @@ -119,7 +119,7 @@ import DangerZone from './DangerZone.vue' import NotificationsSettings from './NotificationsSettings.vue' import { showError } from '@nextcloud/dialogs' import Description from '../Description/Description.vue' -import CheckboxRadioSwitch from '@nextcloud/vue/dist/Components/CheckboxRadioSwitch.js' +import NcCheckboxRadioSwitch from '@nextcloud/vue/dist/Components/NcCheckboxRadioSwitch.js' import BrowserStorage from '../../services/BrowserStorage.js' import ConversationPermissionsSettings from './ConversationPermissionsSettings.vue' @@ -127,8 +127,8 @@ export default { name: 'ConversationSettingsDialog', components: { - AppSettingsDialog, - AppSettingsSection, + NcAppSettingsDialog, + NcAppSettingsSection, ExpirationSettings, LinkShareSettings, LobbySettings, @@ -139,7 +139,7 @@ export default { DangerZone, NotificationsSettings, Description, - CheckboxRadioSwitch, + NcCheckboxRadioSwitch, ConversationPermissionsSettings, }, diff --git a/src/components/ConversationSettings/DangerZone.vue b/src/components/ConversationSettings/DangerZone.vue index 78c7c13c3..37defac96 100644 --- a/src/components/ConversationSettings/DangerZone.vue +++ b/src/components/ConversationSettings/DangerZone.vue @@ -30,9 +30,9 @@ <p class="danger-zone__hint"> {{ t('spreed', 'Once a conversation is left, to rejoin a closed conversation, an invite is needed. An open conversation can be rejoined at any time.') }} </p> - <ButtonVue type="warning" @click.prevent.exact="leaveConversation"> + <NcButton type="warning" @click.prevent.exact="leaveConversation"> {{ t('spreed', 'Leave conversation') }} - </ButtonVue> + </NcButton> </template> <template v-if="canDeleteConversation"> <br> @@ -40,10 +40,10 @@ <p class="danger-zone__hint"> {{ t('spreed', 'Permanently delete this conversation.') }} </p> - <ButtonVue type="error" + <NcButton type="error" @click.prevent.exact="deleteConversation"> {{ t('spreed', 'Delete conversation') }} - </ButtonVue> + </NcButton> </template> <template v-if="canDeleteConversation"> <br> @@ -51,10 +51,10 @@ <p class="danger-zone__hint"> {{ t('spreed', 'Permanently delete all the messages in this conversation.') }} </p> - <ButtonVue type="error" + <NcButton type="error" @click.prevent.exact="clearChatHistory"> {{ t('spreed', 'Delete chat messages') }} - </ButtonVue> + </NcButton> </template> <div /> </div> @@ -64,12 +64,12 @@ <script> import { showError } from '@nextcloud/dialogs' import { emit } from '@nextcloud/event-bus' -import ButtonVue from '@nextcloud/vue/dist/Components/ButtonVue.js' +import NcButton from '@nextcloud/vue/dist/Components/NcButton.js' export default { name: 'DangerZone', components: { - ButtonVue, + NcButton, }, props: { conversation: { diff --git a/src/components/ConversationSettings/ExpirationSettings.vue b/src/components/ConversationSettings/ExpirationSettings.vue index bcfb5c347..f260abb4a 100644 --- a/src/components/ConversationSettings/ExpirationSettings.vue +++ b/src/components/ConversationSettings/ExpirationSettings.vue @@ -24,7 +24,7 @@ <div class="app-settings-section__hint"> {{ t('spreed', 'Expire chat messages after a certain time. Note files shared into the chat will only be unshared from the conversation but are not deleted for the owner.') }} </div> - <Multiselect :value="selectedOption" + <NcMultiselect :value="selectedOption" :options="expirationOptions" :allow-empty="false" track-by="id" @@ -35,14 +35,14 @@ </template> <script> -import Multiselect from '@nextcloud/vue/dist/Components/Multiselect.js' +import NcMultiselect from '@nextcloud/vue/dist/Components/NcMultiselect.js' import { showError, showSuccess } from '@nextcloud/dialogs' export default { name: 'ExpirationSettings', components: { - Multiselect, + NcMultiselect, }, props: { diff --git a/src/components/ConversationSettings/LinkShareSettings.vue b/src/components/ConversationSettings/LinkShareSettings.vue index 7b427024e..dc3a6d296 100644 --- a/src/components/ConversationSettings/LinkShareSettings.vue +++ b/src/components/ConversationSettings/LinkShareSettings.vue @@ -70,43 +70,43 @@ name="link_share_settings_link_password" :placeholder="t('spreed', 'Enter a password')" :disabled="isSaving"> - <ButtonVue id="link_share_settings_link_password_submit" + <NcButton id="link_share_settings_link_password_submit" :aria-label="t('spreed', 'Save password')" :disabled="isSaving" native-type="submit"> <template #icon> <ArrowRight /> </template> - </ButtonVue> + </NcButton> </form> </div> </div> <div class="app-settings-subsection"> - <ButtonVue ref="copyLinkButton" + <NcButton ref="copyLinkButton" @click.prevent="handleCopyLink" @keydown.enter="handleCopyLink"> <template #icon> <ClipboardTextOutline /> </template> {{ t('spreed', 'Copy conversation link') }} - </ButtonVue> + </NcButton> </div> <div v-if="isSharedPublicly" class="app-settings-subsection"> - <ButtonVue :disabled="isSendingInvitations" + <NcButton :disabled="isSendingInvitations" @click.prevent="handleResendInvitations" @keydown.enter="handleResendInvitations"> <template #icon> <Email /> </template> {{ t('spreed', 'Resend invitations') }} - </ButtonVue> + </NcButton> <span v-if="isSendingInvitations" class="icon-loading-small spinner" /> </div> </div> </template> <script> -import ButtonVue from '@nextcloud/vue/dist/Components/ButtonVue.js' +import NcButton from '@nextcloud/vue/dist/Components/NcButton.js' import { showError, showSuccess } from '@nextcloud/dialogs' import { CONVERSATION } from '../../constants.js' import { @@ -121,7 +121,7 @@ export default { name: 'LinkShareSettings', components: { - ButtonVue, + NcButton, ArrowRight, ClipboardTextOutline, Email, diff --git a/src/components/ConversationSettings/LobbySettings.vue b/src/components/ConversationSettings/LobbySettings.vue index a808c7e95..12e29240c 100644 --- a/src/components/ConversationSettings/LobbySettings.vue +++ b/src/components/ConversationSettings/LobbySettings.vue @@ -51,7 +51,7 @@ <div> <label for="moderation_settings_lobby_timer_field">{{ t('spreed', 'Meeting start time') }}</label> </div> - <DatetimePicker id="moderation_settings_lobby_timer_field" + <NcDatetimePicker id="moderation_settings_lobby_timer_field" aria-describedby="moderation_settings_lobby_timer_hint" :value="lobbyTimer" :default-value="defaultLobbyTimer" @@ -70,13 +70,13 @@ <script> import { showError, showSuccess } from '@nextcloud/dialogs' import { WEBINAR } from '../../constants.js' -import DatetimePicker from '@nextcloud/vue/dist/Components/DatetimePicker.js' +import NcDatetimePicker from '@nextcloud/vue/dist/Components/NcDatetimePicker.js' export default { name: 'LobbySettings', components: { - DatetimePicker, + NcDatetimePicker, }, props: { diff --git a/src/components/ConversationSettings/Matterbridge/BridgePart.vue b/src/components/ConversationSettings/Matterbridge/BridgePart.vue index f912673ee..ee3d66ee3 100644 --- a/src/components/ConversationSettings/Matterbridge/BridgePart.vue +++ b/src/components/ConversationSettings/Matterbridge/BridgePart.vue @@ -28,28 +28,28 @@ <span> {{ type.name }} </span> - <Actions :force-menu="false"> - <ActionButton v-if="editable" + <NcActions :force-menu="false"> + <NcActionButton v-if="editable" :icon="editing ? 'icon-checkmark' : 'icon-rename'" @click="onEditClick"> {{ editing ? t('spreed', 'Save'): t('spreed', 'Edit') }} - </ActionButton> - </Actions> - <Actions class="actions" + </NcActionButton> + </NcActions> + <NcActions class="actions" :force-menu="true" placement="bottom"> - <ActionLink icon="icon-info" + <NcActionLink icon="icon-info" target="_blank" :title="t('spreed', 'More information')" :href="type.infoTarget" :close-after-click="true" /> - <ActionButton v-if="editable" + <NcActionButton v-if="editable" icon="icon-delete" :close-after-click="true" @click="$emit('delete-part')"> {{ t('spreed', 'Delete') }} - </ActionButton> - </Actions> + </NcActionButton> + </NcActions> </h3> <div v-for="(field, key) in displayedFields" :key="key" @@ -88,16 +88,16 @@ </template> <script> -import Actions from '@nextcloud/vue/dist/Components/Actions.js' -import ActionButton from '@nextcloud/vue/dist/Components/ActionButton.js' -import ActionLink from '@nextcloud/vue/dist/Components/ActionLink.js' +import NcActions from '@nextcloud/vue/dist/Components/NcActions.js' +import NcActionButton from '@nextcloud/vue/dist/Components/NcActionButton.js' +import NcActionLink from '@nextcloud/vue/dist/Components/NcActionLink.js' export default { name: 'BridgePart', components: { - Actions, - ActionButton, - ActionLink, + NcActions, + NcActionButton, + NcActionLink, }, mixins: [ diff --git a/src/components/ConversationSettings/Matterbridge/MatterbridgeSettings.vue b/src/components/ConversationSettings/Matterbridge/MatterbridgeSettings.vue index 86f922fb2..c0b8e34e4 100644 --- a/src/components/ConversationSettings/Matterbridge/MatterbridgeSettings.vue +++ b/src/components/ConversationSettings/Matterbridge/MatterbridgeSettings.vue @@ -36,7 +36,7 @@ <div v-show="!enabled" class="add-part-wrapper"> <Plus class="icon" :size="20" /> - <Multiselect ref="partMultiselect" + <NcMultiselect ref="partNcMultiselect" v-model="selectedType" label="displayName" track-by="type" @@ -51,7 +51,7 @@ alt=""> {{ option.displayName }} </template> - </Multiselect> + </NcMultiselect> </div> <div v-show="parts.length > 0" class="enable-switch-line"> @@ -65,7 +65,7 @@ {{ t('spreed', 'Enable bridge') }} ({{ processStateText }}) </label> - <ButtonVue v-if="enabled" + <NcButton v-if="enabled" v-tooltip.top="{ content: t('spreed', 'Show Matterbridge log') }" type="tertiary" :aria-label="t('spreed', 'Show Matterbridge log')" @@ -73,14 +73,14 @@ <template #icon> <Message :size="20" /> </template> - </ButtonVue> - <Modal v-if="logModal" + </NcButton> + <NcModal v-if="logModal" :container="container" @close="closeLogModal"> <div class="modal__content"> <textarea v-model="processLog" class="log-content" /> </div> - </Modal> + </NcModal> </div> </div> <ul> @@ -106,10 +106,10 @@ import { } from '../../../services/matterbridgeService.js' import { showSuccess } from '@nextcloud/dialogs' import { imagePath } from '@nextcloud/router' -import ButtonVue from '@nextcloud/vue/dist/Components/ButtonVue.js' -import Multiselect from '@nextcloud/vue/dist/Components/Multiselect.js' +import NcButton from '@nextcloud/vue/dist/Components/NcButton.js' +import NcMultiselect from '@nextcloud/vue/dist/Components/NcMultiselect.js' import Message from 'vue-material-design-icons/Message.vue' -import Modal from '@nextcloud/vue/dist/Components/Modal.js' +import NcModal from '@nextcloud/vue/dist/Components/NcModal.js' import Plus from 'vue-material-design-icons/Plus.vue' import BridgePart from './BridgePart.vue' @@ -120,11 +120,11 @@ Vue.directive('tooltip', Tooltip) export default { name: 'MatterbridgeSettings', components: { - Multiselect, + NcMultiselect, BridgePart, - ButtonVue, + NcButton, Message, - Modal, + NcModal, Plus, }, diff --git a/src/components/ConversationSettings/NotificationsSettings.vue b/src/components/ConversationSettings/NotificationsSettings.vue index 93f64651f..55a2bbf74 100644 --- a/src/components/ConversationSettings/NotificationsSettings.vue +++ b/src/components/ConversationSettings/NotificationsSettings.vue @@ -63,17 +63,17 @@ </a> <h4>{{ t('spreed', 'Calls') }}</h4> - <CheckboxRadioSwitch id="notification_calls" + <NcCheckboxRadioSwitch id="notification_calls" :checked.sync="notifyCalls" @update:checked="setNotificationCalls"> {{ t('spreed', 'Notify about calls in this conversation') }} - </CheckboxRadioSwitch> + </NcCheckboxRadioSwitch> </div> </template> <script> import { PARTICIPANT } from '../../constants.js' -import CheckboxRadioSwitch from '@nextcloud/vue/dist/Components/CheckboxRadioSwitch.js' +import NcCheckboxRadioSwitch from '@nextcloud/vue/dist/Components/NcCheckboxRadioSwitch.js' import VolumeHigh from 'vue-material-design-icons/VolumeHigh.vue' import Account from 'vue-material-design-icons/Account.vue' import VolumeOff from 'vue-material-design-icons/VolumeOff.vue' @@ -83,7 +83,7 @@ export default { name: 'NotificationsSettings', components: { - CheckboxRadioSwitch, + NcCheckboxRadioSwitch, VolumeHigh, Account, VolumeOff, diff --git a/src/components/ConversationsOptionsList.vue b/src/components/ConversationsOptionsList.vue index ea8f617c8..d5ef03ebf 100644 --- a/src/components/ConversationsOptionsList.vue +++ b/src/components/ConversationsOptionsList.vue @@ -21,7 +21,7 @@ <template> <ul class="contacts-list"> - <ListItem v-for="item of items" + <NcListItem v-for="item of items" :key="item.id" :title="item.label" @click="onClick(item)"> @@ -29,20 +29,20 @@ <ConversationIcon :item="iconData(item)" :disable-menu="true" /> </template> - </ListItem> + </NcListItem> </ul> </template> <script> import ConversationIcon from './ConversationIcon.vue' -import ListItem from '@nextcloud/vue/dist/Components/ListItem.js' +import NcListItem from '@nextcloud/vue/dist/Components/NcListItem.js' import { CONVERSATION } from '../constants.js' export default { name: 'ConversationsOptionsList', components: { ConversationIcon, - ListItem, + NcListItem, }, props: { items: { diff --git a/src/components/Description/Description.vue b/src/components/Description/Description.vue index c30481715..0b43c62f7 100644 --- a/src/components/Description/Description.vue +++ b/src/components/Description/Description.vue @@ -35,21 +35,21 @@ @keydown.esc="handleCancelEditing" /> <template v-if="!loading"> <template v-if="editing"> - <ButtonVue type="tertiary" + <NcButton type="tertiary" :aria-label="t('spreed', 'Cancel editing description')" @click="handleCancelEditing"> <template #icon> <Close :size="20" /> </template> - </ButtonVue> - <ButtonVue type="primary" + </NcButton> + <NcButton type="primary" :aria-label="t('spreed', 'Submit conversation description')" :disabled="!canSubmit" @click="handleSubmitDescription"> <template #icon> <Check :size="20" /> </template> - </ButtonVue> + </NcButton> <div v-if="showCountDown" v-tooltip.auto="countDownWarningText" class="counter" @@ -58,14 +58,14 @@ <span>{{ charactersCountDown }}</span> </div> </template> - <ButtonVue v-if="!editing && editable" + <NcButton v-if="!editing && editable" type="tertiary" :aria-label="t('spreed', 'Edit conversation description')" @click="handleEditDescription"> <template #icon> <Pencil :size="20" /> </template> - </ButtonVue> + </NcButton> </template> <div v-if="loading" class="icon-loading-small spinner" /> </div> @@ -75,9 +75,9 @@ import Pencil from 'vue-material-design-icons/Pencil.vue' import Check from 'vue-material-design-icons/Check.vue' import Close from 'vue-material-design-icons/Close.vue' -import RichContentEditable from '@nextcloud/vue/dist/Components/RichContenteditable.js' +import RichContentEditable from '@nextcloud/vue/dist/Components/NcRichContenteditable.js' import Tooltip from '@nextcloud/vue/dist/Directives/Tooltip.js' -import ButtonVue from '@nextcloud/vue/dist/Components/ButtonVue.js' +import NcButton from '@nextcloud/vue/dist/Components/NcButton.js' export default { name: 'Description', @@ -86,7 +86,7 @@ export default { Check, Close, RichContentEditable, - ButtonVue, + NcButton, }, directives: { diff --git a/src/components/DeviceChecker/DeviceChecker.vue b/src/components/DeviceChecker/DeviceChecker.vue index edf500aeb..566581e49 100644 --- a/src/components/DeviceChecker/DeviceChecker.vue +++ b/src/components/DeviceChecker/DeviceChecker.vue @@ -20,7 +20,7 @@ --> <template> - <Modal v-if="modal" + <NcModal v-if="modal" class="talk-modal" size="small" @close="closeModal"> @@ -40,7 +40,7 @@ class="preview__novideo"> <VideoBackground :display-name="displayName" :user="userId" /> - <Avatar v-if="userId" + <NcAvatar v-if="userId" :size="128" :disable-menu="true" :disable-tooltip="true" @@ -60,7 +60,7 @@ --> <div class="device-checker__call-preferences"> <!-- Audio toggle --> - <ButtonVue v-tooltip="audioButtonTooltip" + <NcButton v-tooltip="audioButtonTooltip" type="tertiary" :aria-label="audioButtonTooltip" :disabled="!audioPreviewAvailable" @@ -71,7 +71,7 @@ <MicrophoneOff v-else :size="20" /> </template> - </ButtonVue> + </NcButton> <VolumeIndicator class="indicator" :audio-preview-available="audioPreviewAvailable" :current-volume="currentVolume" @@ -79,7 +79,7 @@ :disabled="!audioOn" /> <!-- Video toggle --> - <ButtonVue v-tooltip="videoButtonTooltip" + <NcButton v-tooltip="videoButtonTooltip" type="tertiary" :aria-label="videoButtonTooltip" :disabled="!videoPreviewAvailable" @@ -90,10 +90,10 @@ <VideoOff v-else :size="20" /> </template> - </ButtonVue> + </NcButton> <!-- Blur toggle --> - <ButtonVue v-if="videoPreviewAvailable && blurPreviewAvailable" + <NcButton v-if="videoPreviewAvailable && blurPreviewAvailable" v-tooltip="blurButtonTooltip" type="tertiary" :aria-label="blurButtonTooltip" @@ -105,12 +105,12 @@ <BlurOff v-else :size="20" /> </template> - </ButtonVue> + </NcButton> </div> <!-- Device selection --> <div class="device-checker__device-selection"> - <ButtonVue v-if="!showDeviceSelection" + <NcButton v-if="!showDeviceSelection" type="tertiary" class="select-devices" @click="showDeviceSelection = true"> @@ -118,7 +118,7 @@ <Cog :size="20" /> </template> {{ t('spreed', 'Choose devices') }} - </ButtonVue> + </NcButton> <template v-if="showDeviceSelection"> <MediaDevicesSelector kind="audioinput" :devices="devices" @@ -130,51 +130,51 @@ @update:deviceId="videoInputId = $event" /> </template> </div> - <CheckboxRadioSwitch :checked.sync="showDeviceChecker" + <NcCheckboxRadioSwitch :checked.sync="showDeviceChecker" class="checkbox"> {{ t('spreed', 'Always show this dialog before joining a call in this conversation.') }} - </CheckboxRadioSwitch> + </NcCheckboxRadioSwitch> <div class="device-checker__call-buttons"> <!-- Silent call --> - <Actions v-if="showSilentCallOption" :force-menu="true"> + <NcActions v-if="showSilentCallOption" :force-menu="true"> <template v-if="!silentCall"> - <ActionButton :close-after-click="true" + <NcActionButton :close-after-click="true" icon="icon-upload" :title="t('spreed', 'Call without notification')" @click="silentCall= true"> {{ t('spreed', 'The conversation participants will not be notified about this call') }} <BellOff slot="icon" :size="16" /> - </ActionButton> + </NcActionButton> </template> <template v-else> - <ActionButton :close-after-click="true" + <NcActionButton :close-after-click="true" icon="icon-upload" :title="t('spreed', 'Normal call')" @click="silentCall= false"> {{ t('spreed', 'The conversation participants will be notified about this call') }} <Bell slot="icon" :size="16" /> - </ActionButton> + </NcActionButton> </template> - </Actions> + </NcActions> <!-- Join call --> <CallButton class="call-button" :force-join-call="true" :silent-call="silentCall" /> </div> </div> - </Modal> + </NcModal> </template> <script> -import Modal from '@nextcloud/vue/dist/Components/Modal.js' +import NcModal from '@nextcloud/vue/dist/Components/NcModal.js' import Tooltip from '@nextcloud/vue/dist/Directives/Tooltip.js' import { devices } from '../../mixins/devices.js' import MediaDevicesSelector from '../MediaDevicesSelector.vue' import VideoBackground from '../CallView/shared/VideoBackground.vue' -import Avatar from '@nextcloud/vue/dist/Components/Avatar.js' +import NcAvatar from '@nextcloud/vue/dist/Components/NcAvatar.js' import Cog from 'vue-material-design-icons/Cog.vue' import Microphone from 'vue-material-design-icons/Microphone.vue' import MicrophoneOff from 'vue-material-design-icons/MicrophoneOff.vue' @@ -187,12 +187,12 @@ import Bell from 'vue-material-design-icons/Bell.vue' import { localMediaModel } from '../../utils/webrtc/index.js' import CallButton from '../TopBar/CallButton.vue' import { subscribe, unsubscribe } from '@nextcloud/event-bus' -import CheckboxRadioSwitch from '@nextcloud/vue/dist/Components/CheckboxRadioSwitch.js' +import NcCheckboxRadioSwitch from '@nextcloud/vue/dist/Components/NcCheckboxRadioSwitch.js' import BrowserStorage from '../../services/BrowserStorage.js' import VolumeIndicator from '../VolumeIndicator/VolumeIndicator.vue' -import ButtonVue from '@nextcloud/vue/dist/Components/ButtonVue.js' -import Actions from '@nextcloud/vue/dist/Components/Actions.js' -import ActionButton from '@nextcloud/vue/dist/Components/ActionButton.js' +import NcButton from '@nextcloud/vue/dist/Components/NcButton.js' +import NcActions from '@nextcloud/vue/dist/Components/NcActions.js' +import NcActionButton from '@nextcloud/vue/dist/Components/NcActionButton.js' import isInLobby from '../../mixins/isInLobby.js' export default { @@ -203,10 +203,10 @@ export default { }, components: { - Modal, + NcModal, MediaDevicesSelector, VideoBackground, - Avatar, + NcAvatar, Cog, Microphone, MicrophoneOff, @@ -215,11 +215,11 @@ export default { Blur, BlurOff, CallButton, - CheckboxRadioSwitch, + NcCheckboxRadioSwitch, VolumeIndicator, - ButtonVue, - ActionButton, - Actions, + NcButton, + NcActionButton, + NcActions, BellOff, Bell, }, diff --git a/src/components/LeftSidebar/ConversationsList/Conversation.spec.js b/src/components/LeftSidebar/ConversationsList/Conversation.spec.js index 8a8f7fc17..9579923fe 100644 --- a/src/components/LeftSidebar/ConversationsList/Conversation.spec.js +++ b/src/components/LeftSidebar/ConversationsList/Conversation.spec.js @@ -4,7 +4,7 @@ import { createLocalVue, shallowMount, mount, RouterLinkStub } from '@vue/test-u import { cloneDeep } from 'lodash' import storeConfig from '../../../store/storeConfig.js' import { CONVERSATION, PARTICIPANT, ATTENDEE } from '../../../constants.js' -import ActionButton from '@nextcloud/vue/dist/Components/ActionButton.js' +import NcActionButton from '@nextcloud/vue/dist/Components/NcActionButton.js' import { showSuccess, showError } from '@nextcloud/dialogs' import Conversation from './Conversation.vue' @@ -85,7 +85,7 @@ describe('Conversation.vue', () => { }, }) - const el = wrapper.findComponent({ name: 'ListItem' }) + const el = wrapper.findComponent({ name: 'NcListItem' }) expect(el.exists()).toBe(true) expect(el.props('title')).toBe('conversation one') @@ -114,7 +114,7 @@ describe('Conversation.vue', () => { }, }) - const el = wrapper.findComponent({ name: 'ListItem' }) + const el = wrapper.findComponent({ name: 'NcListItem' }) expect(el.vm.$slots.subtitle[0].text.trim()).toBe(expectedText) } @@ -210,7 +210,7 @@ describe('Conversation.vue', () => { }, }) - const el = wrapper.findComponent({ name: 'ListItem' }) + const el = wrapper.findComponent({ name: 'NcListItem' }) expect(el.exists()).toBe(true) expect(el.props('counterNumber')).toBe(expectedCounterText) @@ -261,7 +261,7 @@ describe('Conversation.vue', () => { }, }) - const el = wrapper.findComponent({ name: 'ListItem' }) + const el = wrapper.findComponent({ name: 'NcListItem' }) expect(el.exists()).toBe(true) expect(el.vm.$slots.counter).not.toBeDefined() @@ -279,8 +279,8 @@ describe('Conversation.vue', () => { * @param {object} wrapper Parent element to search the text in * @param {string} text Text to find within the wrapper */ - function findActionButton(wrapper, text) { - const actionButtons = wrapper.findAllComponents(ActionButton) + function findNcActionButton(wrapper, text) { + const actionButtons = wrapper.findAllComponents(NcActionButton) const items = actionButtons.filter(actionButton => { return actionButton.text() === text }) @@ -301,7 +301,7 @@ describe('Conversation.vue', () => { $router, }, stubs: { - ActionButton, + NcActionButton, }, propsData: { isSearchResult: false, @@ -309,10 +309,10 @@ describe('Conversation.vue', () => { }, }) - const el = wrapper.findComponent({ name: 'ListItem' }) + const el = wrapper.findComponent({ name: 'NcListItem' }) expect(el.exists()).toBe(true) - return findActionButton(el, actionName) + return findNcActionButton(el, actionName) } test('forwards click event on list item', async () => { @@ -328,7 +328,7 @@ describe('Conversation.vue', () => { }, }) - const el = wrapper.findComponent({ name: 'ListItem' }) + const el = wrapper.findComponent({ name: 'NcListItem' }) expect(el.exists()).toBe(true) await el.find('a').trigger('click') @@ -440,7 +440,7 @@ describe('Conversation.vue', () => { $copyText: copyTextMock, }, stubs: { - ActionButton, + NcActionButton, }, propsData: { isSearchResult: false, @@ -448,10 +448,10 @@ describe('Conversation.vue', () => { }, }) - const el = wrapper.findComponent({ name: 'ListItem' }) + const el = wrapper.findComponent({ name: 'NcListItem' }) expect(el.exists()).toBe(true) - const action = findActionButton(el, 'Copy link') + const action = findNcActionButton(el, 'Copy link') expect(action.exists()).toBe(true) await action.find('button').trigger('click') @@ -469,7 +469,7 @@ describe('Conversation.vue', () => { localVue, store: new Vuex.Store(testStoreConfig), stubs: { - ActionButton, + NcActionButton, }, propsData: { isSearchResult: false, @@ -477,13 +477,13 @@ describe('Conversation.vue', () => { }, }) - const el = wrapper.findComponent({ name: 'ListItem' }) + const el = wrapper.findComponent({ name: 'NcListItem' }) expect(el.exists()).toBe(true) - const action = findActionButton(el, 'Add to favorites') + const action = findNcActionButton(el, 'Add to favorites') expect(action.exists()).toBe(true) - expect(findActionButton(el, 'Remove from favorites').exists()).toBe(false) + expect(findNcActionButton(el, 'Remove from favorites').exists()).toBe(false) await action.find('button').trigger('click') @@ -500,7 +500,7 @@ describe('Conversation.vue', () => { localVue, store: new Vuex.Store(testStoreConfig), stubs: { - ActionButton, + NcActionButton, }, propsData: { isSearchResult: false, @@ -508,13 +508,13 @@ describe('Conversation.vue', () => { }, }) - const el = wrapper.findComponent({ name: 'ListItem' }) + const el = wrapper.findComponent({ name: 'NcListItem' }) expect(el.exists()).toBe(true) - const action = findActionButton(el, 'Remove from favorites') + const action = findNcActionButton(el, 'Remove from favorites') expect(action.exists()).toBe(true) - expect(findActionButton(el, 'Add to favorites').exists()).toBe(false) + expect(findNcActionButton(el, 'Add to favorites').exists()).toBe(false) await action.find('button').trigger('click') @@ -536,7 +536,7 @@ describe('Conversation.vue', () => { localVue, store: new Vuex.Store(testStoreConfig), stubs: { - ActionButton, + NcActionButton, }, propsData: { isSearchResult: true, @@ -544,10 +544,10 @@ describe('Conversation.vue', () => { }, }) - const el = wrapper.findComponent({ name: 'ListItem' }) + const el = wrapper.findComponent({ name: 'NcListItem' }) expect(el.exists()).toBe(true) - const actionButtons = wrapper.findAllComponents(ActionButton) + const actionButtons = wrapper.findAllComponents(NcActionButton) expect(actionButtons.exists()).toBe(false) }) }) diff --git a/src/components/LeftSidebar/ConversationsList/Conversation.vue b/src/components/LeftSidebar/ConversationsList/Conversation.vue index 31f71d7be..e4c54e0b6 100644 --- a/src/components/LeftSidebar/ConversationsList/Conversation.vue +++ b/src/components/LeftSidebar/ConversationsList/Conversation.vue @@ -20,7 +20,7 @@ --> <template> - <ListItem :title="item.displayName" + <NcListItem :title="item.displayName" :class="{'unread-mention-conversation': item.unreadMention}" :anchor-id="`conversation_${item.token}`" :actions-aria-label="t('spreed', 'Conversation actions')" @@ -45,7 +45,7 @@ </template> </template> <template v-if="!isSearchResult" slot="actions"> - <ActionButton v-if="canFavorite" + <NcActionButton v-if="canFavorite" @click.prevent.exact="toggleFavoriteConversation"> <Star v-if="item.isFavorite" slot="icon" @@ -55,31 +55,31 @@ :size="20" :fill-color="'#FFCC00'" /> {{ labelFavorite }} - </ActionButton> - <ActionButton icon="icon-clippy" + </NcActionButton> + <NcActionButton icon="icon-clippy" @click.stop.prevent="copyLinkToConversation"> {{ t('spreed', 'Copy link') }} - </ActionButton> - <ActionButton :close-after-click="true" + </NcActionButton> + <NcActionButton :close-after-click="true" @click.prevent.exact="markConversationAsRead"> <template #icon> <EyeOutline :size="16" /> </template> {{ t('spreed', 'Mark as read') }} - </ActionButton> - <ActionButton :close-after-click="true" + </NcActionButton> + <NcActionButton :close-after-click="true" @click.prevent.exact="showConversationSettings"> <Cog slot="icon" :size="20" /> {{ t('spreed', 'Conversation settings') }} - </ActionButton> - <ActionButton v-if="canLeaveConversation" + </NcActionButton> + <NcActionButton v-if="canLeaveConversation" :close-after-click="true" :icon="iconLeaveConversation" @click.prevent.exact="leaveConversation"> {{ t('spreed', 'Leave conversation') }} - </ActionButton> - <ActionButton v-if="canDeleteConversation" + </NcActionButton> + <NcActionButton v-if="canDeleteConversation" :close-after-click="true" class="critical" @click.prevent.exact="deleteConversation"> @@ -87,14 +87,14 @@ <Delete :size="16" /> </template> {{ t('spreed', 'Delete conversation') }} - </ActionButton> + </NcActionButton> </template> - </ListItem> + </NcListItem> </template> <script> import { showError, showSuccess } from '@nextcloud/dialogs' -import ActionButton from '@nextcloud/vue/dist/Components/ActionButton.js' +import NcActionButton from '@nextcloud/vue/dist/Components/NcActionButton.js' import Cog from 'vue-material-design-icons/Cog.vue' import Delete from 'vue-material-design-icons/Delete.vue' import EyeOutline from 'vue-material-design-icons/EyeOutline.vue' @@ -103,13 +103,13 @@ import ConversationIcon from './../../ConversationIcon.vue' import { generateUrl } from '@nextcloud/router' import { emit } from '@nextcloud/event-bus' import { CONVERSATION, PARTICIPANT, ATTENDEE } from '../../../constants.js' -import ListItem from '@nextcloud/vue/dist/Components/ListItem.js' +import NcListItem from '@nextcloud/vue/dist/Components/NcListItem.js' export default { name: 'Conversation', components: { - ActionButton, - ListItem, + NcActionButton, + NcListItem, ConversationIcon, Cog, Delete, diff --git a/src/components/LeftSidebar/LeftSidebar.spec.js b/src/components/LeftSidebar/LeftSidebar.spec.js index 5e813e222..deb2047d6 100644 --- a/src/components/LeftSidebar/LeftSidebar.spec.js +++ b/src/components/LeftSidebar/LeftSidebar.spec.js @@ -46,7 +46,7 @@ describe('LeftSidebar.vue', () => { store, stubs: { // to prevent user status fetching - Avatar: true, + NcAvatar: true, // to prevent complex dialog logic NewGroupConversation: true, }, @@ -134,7 +134,7 @@ describe('LeftSidebar.vue', () => { expect(fetchConversationsAction).toHaveBeenCalledWith(expect.anything(), undefined) expect(conversationsListMock).toHaveBeenCalled() - const appNavEl = wrapper.findComponent({ name: 'AppNavigation' }) + const appNavEl = wrapper.findComponent({ name: 'NcAppNavigation' }) const listEl = appNavEl.findComponent({ name: 'ConversationsList' }) expect(listEl.exists()).toBe(true) @@ -316,7 +316,7 @@ describe('LeftSidebar.vue', () => { expect(fetchConversationsAction).toHaveBeenCalledWith(expect.anything(), undefined) expect(conversationsListMock).toHaveBeenCalled() - const appNavEl = wrapper.findComponent({ name: 'AppNavigation' }) + const appNavEl = wrapper.findComponent({ name: 'NcAppNavigation' }) const searchBoxEl = appNavEl.findComponent({ name: 'SearchBox' }) expect(searchBoxEl.exists()).toBe(true) @@ -345,9 +345,9 @@ describe('LeftSidebar.vue', () => { } ) - const appNavEl = wrapper.findComponent({ name: 'AppNavigation' }) + const appNavEl = wrapper.findComponent({ name: 'NcAppNavigation' }) - const captionListEl = appNavEl.findAllComponents({ name: 'AppNavigationCaption' }) + const captionListEl = appNavEl.findAllComponents({ name: 'NcAppNavigationCaption' }) expect(captionListEl.exists()).toBe(true) expect(captionListEl.length).toBe(5) @@ -391,9 +391,9 @@ describe('LeftSidebar.vue', () => { } ) - const appNavEl = wrapper.findComponent({ name: 'AppNavigation' }) + const appNavEl = wrapper.findComponent({ name: 'NcAppNavigation' }) - const captionListEl = appNavEl.findAllComponents({ name: 'AppNavigationCaption' }) + const captionListEl = appNavEl.findAllComponents({ name: 'NcAppNavigationCaption' }) expect(captionListEl.exists()).toBe(true) expect(captionListEl.length).toBe(3) @@ -433,9 +433,9 @@ describe('LeftSidebar.vue', () => { } ) - const appNavEl = wrapper.findComponent({ name: 'AppNavigation' }) + const appNavEl = wrapper.findComponent({ name: 'NcAppNavigation' }) - const captionListEl = appNavEl.findAllComponents({ name: 'AppNavigationCaption' }) + const captionListEl = appNavEl.findAllComponents({ name: 'NcAppNavigationCaption' }) expect(captionListEl.exists()).toBe(true) expect(captionListEl.length).toBe(4) @@ -479,7 +479,7 @@ describe('LeftSidebar.vue', () => { async function testSearchNotFound(searchTerm, possibleResults, listedResults, loadStateSettingsOverride, expectedCaption) { const wrapper = await testSearch(searchTerm, possibleResults, listedResults, loadStateSettingsOverride) - const appNavEl = wrapper.findComponent({ name: 'AppNavigation' }) + const appNavEl = wrapper.findComponent({ name: 'NcAppNavigation' }) const listEl = appNavEl.findComponent({ name: 'ConversationsList' }) expect(listEl.exists()).toBe(true) const listedEls = appNavEl.findAllComponents({ name: 'Conversation' }) @@ -489,7 +489,7 @@ describe('LeftSidebar.vue', () => { expect(listedEls.at(0).props('item')).toStrictEqual(conversationsList[0]) expect(listedEls.at(1).props('item')).toStrictEqual(conversationsList[1]) - const captionsEls = appNavEl.findAllComponents({ name: 'AppNavigationCaption' }) + const captionsEls = appNavEl.findAllComponents({ name: 'NcAppNavigationCaption' }) expect(captionsEls.exists()).toBe(true) if (listedResults.length > 0) { expect(captionsEls.length).toBeGreaterThan(2) @@ -610,7 +610,7 @@ describe('LeftSidebar.vue', () => { test('joins listed conversation from search result', async () => { const wrapper = await testSearch('search', [], listedResults) - const appNavEl = wrapper.findComponent({ name: 'AppNavigation' }) + const appNavEl = wrapper.findComponent({ name: 'NcAppNavigation' }) const listedEls = appNavEl.findAllComponents({ name: 'Conversation' }) expect(listedEls.exists()).toBe(true) expect(listedEls.length).toBe(4) @@ -628,7 +628,7 @@ describe('LeftSidebar.vue', () => { const wrapper = await testSearch('search', [...usersResults], []) - const appNavEl = wrapper.findComponent({ name: 'AppNavigation' }) + const appNavEl = wrapper.findComponent({ name: 'NcAppNavigation' }) const optionsEls = appNavEl.findAllComponents({ name: 'ConversationsOptionsList' }) expect(optionsEls.exists()).toBe(true) await optionsEls.at(0).findAll('a').at(1).trigger('click') @@ -643,7 +643,7 @@ describe('LeftSidebar.vue', () => { const wrapper = await testSearch('search', [...groupsResults], []) - const appNavEl = wrapper.findComponent({ name: 'AppNavigation' }) + const appNavEl = wrapper.findComponent({ name: 'NcAppNavigation' }) const optionsEls = appNavEl.findAllComponents({ name: 'ConversationsOptionsList' }) expect(optionsEls.exists()).toBe(true) await optionsEls.at(0).findAll('a').at(1).trigger('click') @@ -660,7 +660,7 @@ describe('LeftSidebar.vue', () => { const wrapper = await testSearch('search', [...circlesResults], []) - const appNavEl = wrapper.findComponent({ name: 'AppNavigation' }) + const appNavEl = wrapper.findComponent({ name: 'NcAppNavigation' }) const optionsEls = appNavEl.findAllComponents({ name: 'ConversationsOptionsList' }) expect(optionsEls.exists()).toBe(true) await optionsEls.at(0).findAll('a').at(1).trigger('click') @@ -678,7 +678,7 @@ describe('LeftSidebar.vue', () => { const wrapper = await testSearch('search', [...usersResults], []) - const appNavEl = wrapper.findComponent({ name: 'AppNavigation' }) + const appNavEl = wrapper.findComponent({ name: 'NcAppNavigation' }) const searchBoxEl = appNavEl.findComponent({ name: 'SearchBox' }) const input = searchBoxEl.find('input[type="text"]') expect(input.element.value).toBe('search') @@ -695,7 +695,7 @@ describe('LeftSidebar.vue', () => { test('does not clear search results when clicking group chat', async () => { const wrapper = await testSearch('search', [...groupsResults], []) - const appNavEl = wrapper.findComponent({ name: 'AppNavigation' }) + const appNavEl = wrapper.findComponent({ name: 'NcAppNavigation' }) const searchBoxEl = appNavEl.findComponent({ name: 'SearchBox' }) const input = searchBoxEl.find('input[type="text"]') expect(input.element.value).toBe('search') @@ -739,7 +739,7 @@ describe('LeftSidebar.vue', () => { subscribe('show-settings', eventHandler) const wrapper = mountComponent() - const appNavEl = wrapper.findComponent({ name: 'AppNavigation' }) + const appNavEl = wrapper.findComponent({ name: 'NcAppNavigation' }) const button = appNavEl.find('.settings-button') expect(button.exists()).toBe(true) diff --git a/src/components/LeftSidebar/LeftSidebar.vue b/src/components/LeftSidebar/LeftSidebar.vue index 34ceddfc0..7298e616f 100644 --- a/src/components/LeftSidebar/LeftSidebar.vue +++ b/src/components/LeftSidebar/LeftSidebar.vue @@ -20,7 +20,7 @@ --> <template> - <AppNavigation :aria-label="t('spreed', 'Conversation list')"> + <NcAppNavigation :aria-label="t('spreed', 'Conversation list')"> <div class="new-conversation" :class="{ 'new-conversation--scrolled-down': !isScrolledToTop }"> <SearchBox v-model="searchText" @@ -37,7 +37,7 @@ <ul ref="scroller" class="scroller" @scroll="debounceHandleScroll"> - <AppNavigationCaption :class="{'hidden-visually': !isSearching}" + <NcAppNavigationCaption :class="{'hidden-visually': !isSearching}" :title="t('spreed', 'Conversations')" /> <li role="presentation"> <ConversationsList ref="conversationsList" @@ -49,7 +49,7 @@ </li> <template v-if="isSearching"> <template v-if="!listedConversationsLoading && searchResultsListedConversations.length > 0"> - <AppNavigationCaption :title="t('spreed', 'Open conversations')" /> + <NcAppNavigationCaption :title="t('spreed', 'Open conversations')" /> <Conversation v-for="item of searchResultsListedConversations" :key="item.id" :item="item" @@ -57,14 +57,14 @@ @click="joinListedConversation(item)" /> </template> <template v-if="searchResultsUsers.length !== 0"> - <AppNavigationCaption :title="t('spreed', 'Users')" /> + <NcAppNavigationCaption :title="t('spreed', 'Users')" /> <li v-if="searchResultsUsers.length !== 0" role="presentation"> <ConversationsOptionsList :items="searchResultsUsers" @click="createAndJoinConversation" /> </li> </template> <template v-if="!showStartConversationsOptions"> - <AppNavigationCaption v-if="searchResultsUsers.length === 0" + <NcAppNavigationCaption v-if="searchResultsUsers.length === 0" :title="t('spreed', 'Users')" /> <Hint v-if="contactsLoading" :hint="t('spreed', 'Loading')" /> <Hint v-else :hint="t('spreed', 'No search results')" /> @@ -72,7 +72,7 @@ </template> <template v-if="showStartConversationsOptions"> <template v-if="searchResultsGroups.length !== 0"> - <AppNavigationCaption :title="t('spreed', 'Groups')" /> + <NcAppNavigationCaption :title="t('spreed', 'Groups')" /> <li v-if="searchResultsGroups.length !== 0" role="presentation"> <ConversationsOptionsList :items="searchResultsGroups" @click="createAndJoinConversation" /> @@ -80,49 +80,49 @@ </template> <template v-if="searchResultsCircles.length !== 0"> - <AppNavigationCaption :title="t('spreed', 'Circles')" /> + <NcAppNavigationCaption :title="t('spreed', 'Circles')" /> <li v-if="searchResultsCircles.length !== 0" role="presentation"> <ConversationsOptionsList :items="searchResultsCircles" @click="createAndJoinConversation" /> </li> </template> - <AppNavigationCaption v-if="sourcesWithoutResults" + <NcAppNavigationCaption v-if="sourcesWithoutResults" :title="sourcesWithoutResultsList" /> <Hint v-if="contactsLoading" :hint="t('spreed', 'Loading')" /> <Hint v-else :hint="t('spreed', 'No search results')" /> </template> </ul> </li> - <ButtonVue v-if="!preventFindingUnread && unreadNum > 0" + <NcButton v-if="!preventFindingUnread && unreadNum > 0" class="unread-mention-button" type="primary" @click="scrollBottomUnread"> {{ t('spreed', 'Unread mentions') }} - </ButtonVue> + </NcButton> </template> <template #footer> <div id="app-settings"> <div id="app-settings-header"> - <ButtonVue class="settings-button" @click="showSettings"> + <NcButton class="settings-button" @click="showSettings"> {{ t('spreed', 'Talk settings') }} - </ButtonVue> + </NcButton> </div> </div> </template> - </AppNavigation> + </NcAppNavigation> </template> <script> import CancelableRequest from '../../utils/cancelableRequest.js' -import AppNavigation from '@nextcloud/vue/dist/Components/AppNavigation.js' -import AppNavigationCaption from '@nextcloud/vue/dist/Components/AppNavigationCaption.js' +import NcAppNavigation from '@nextcloud/vue/dist/Components/NcAppNavigation.js' +import NcAppNavigationCaption from '@nextcloud/vue/dist/Components/NcAppNavigationCaption.js' import ConversationsList from './ConversationsList/ConversationsList.vue' import Conversation from './ConversationsList/Conversation.vue' import ConversationsOptionsList from '../ConversationsOptionsList.vue' import Hint from '../Hint.vue' -import ButtonVue from '@nextcloud/vue/dist/Components/ButtonVue.js' +import NcButton from '@nextcloud/vue/dist/Components/NcButton.js' import SearchBox from './SearchBox/SearchBox.vue' import debounce from 'debounce' import { EventBus } from '../../services/EventBus.js' @@ -142,10 +142,10 @@ export default { name: 'LeftSidebar', components: { - AppNavigation, - AppNavigationCaption, + NcAppNavigation, + NcAppNavigationCaption, ConversationsList, - ButtonVue, + NcButton, ConversationsOptionsList, Hint, SearchBox, diff --git a/src/components/LeftSidebar/NewGroupConversation/Confirmation/Confirmation.vue b/src/components/LeftSidebar/NewGroupConversation/Confirmation/Confirmation.vue index 09e33e4dd..d95809e4b 100644 --- a/src/components/LeftSidebar/NewGroupConversation/Confirmation/Confirmation.vue +++ b/src/components/LeftSidebar/NewGroupConversation/Confirmation/Confirmation.vue @@ -33,7 +33,7 @@ <p class="confirmation__warning"> {{ t('spreed', 'All set') }} </p> - <ButtonVue id="copy-link" + <NcButton id="copy-link" slot="trigger" v-clipboard:copy="linkToConversation" v-clipboard:success="onCopy" @@ -41,7 +41,7 @@ type="secondary" class="confirmation__copy-link"> {{ t('spreed', 'Copy conversation link') }} - </ButtonVue> + </NcButton> <p class="confirmation__warning"> {{ confirmationText }} </p> @@ -57,12 +57,12 @@ </template> <script> -import ButtonVue from '@nextcloud/vue/dist/Components/ButtonVue.js' +import NcButton from '@nextcloud/vue/dist/Components/NcButton.js' export default { name: 'Confirmation', components: { - ButtonVue, + NcButton, }, props: { conversationName: { diff --git a/src/components/LeftSidebar/NewGroupConversation/NewGroupConversation.vue b/src/components/LeftSidebar/NewGroupConversation/NewGroupConversation.vue index 80ca7be25..1521f29e0 100644 --- a/src/components/LeftSidebar/NewGroupConversation/NewGroupConversation.vue +++ b/src/components/LeftSidebar/NewGroupConversation/NewGroupConversation.vue @@ -21,7 +21,7 @@ <template> <div class="wrapper"> - <ButtonVue slot="trigger" + <NcButton slot="trigger" v-tooltip.bottom="t('spreed', 'Create a new group conversation')" type="tertiary" class="toggle" @@ -30,9 +30,9 @@ <template #icon> <Plus :size="20" /> </template> - </ButtonVue> + </NcButton> <!-- New group form --> - <Modal v-if="modal" + <NcModal v-if="modal" :container="container" size="normal" @close="closeModal"> @@ -77,54 +77,54 @@ placement are rendered depending on the current page --> <div class="navigation"> <!-- First page --> - <ButtonVue v-if="page===0 && isPublic" + <NcButton v-if="page===0 && isPublic" :disabled="disabled" type="tertiary" @click="handleCreateConversation"> {{ t('spreed', 'Create conversation') }} - </ButtonVue> - <ButtonVue v-if="page===0" + </NcButton> + <NcButton v-if="page===0" type="primary" :disabled="disabled" class="navigation__button-right" @click="handleSetConversationName"> {{ t('spreed', 'Add participants') }} - </ButtonVue> + </NcButton> <!-- Second page --> - <ButtonVue v-if="page===1" + <NcButton v-if="page===1" type="tertiary" @click="handleClickBack"> {{ t('spreed', 'Back') }} - </ButtonVue> - <ButtonVue v-if="page===1" + </NcButton> + <NcButton v-if="page===1" type="primary" class="navigation__button-right" @click="handleCreateConversation"> {{ t('spreed', 'Create conversation') }} - </ButtonVue> + </NcButton> <!-- Third page --> - <ButtonVue v-if="page===2 && (error || isPublic)" + <NcButton v-if="page===2 && (error || isPublic)" type="primary" class="navigation__button-right" @click="closeModal"> {{ t('spreed', 'Close') }} - </ButtonVue> + </NcButton> </div> </div> - </modal> + </NcModal> </div> </template> <script> import { CONVERSATION } from '../../../constants.js' -import Modal from '@nextcloud/vue/dist/Components/Modal.js' +import NcModal from '@nextcloud/vue/dist/Components/NcModal.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 ButtonVue from '@nextcloud/vue/dist/Components/ButtonVue.js' +import NcButton from '@nextcloud/vue/dist/Components/NcButton.js' import { addParticipant } from '../../../services/participantsService.js' import { createPublicConversation, @@ -148,11 +148,11 @@ export default { }, components: { - Modal, + NcModal, SetContacts, SetConversationName, SetConversationType, - ButtonVue, + NcButton, Confirmation, PasswordProtect, ListableSettings, diff --git a/src/components/LeftSidebar/NewGroupConversation/SetContacts/ContactSelectionBubble/ContactSelectionBubble.vue b/src/components/LeftSidebar/NewGroupConversation/SetContacts/ContactSelectionBubble/ContactSelectionBubble.vue index 7923781d0..338f9d0eb 100644 --- a/src/components/LeftSidebar/NewGroupConversation/SetContacts/ContactSelectionBubble/ContactSelectionBubble.vue +++ b/src/components/LeftSidebar/NewGroupConversation/SetContacts/ContactSelectionBubble/ContactSelectionBubble.vue @@ -31,18 +31,18 @@ <span class="contact-selection-bubble__username"> {{ displayName }} </span> - <ButtonVue type="tertiary-no-background" + <NcButton type="tertiary-no-background" :aria-label="removeLabel" @click="removeParticipantFromSelection(participant)"> <template #icon> <Close :size="16" /> </template> - </ButtonVue> + </NcButton> </div> </template> <script> -import ButtonVue from '@nextcloud/vue/dist/Components/ButtonVue.js' +import NcButton from '@nextcloud/vue/dist/Components/NcButton.js' import Close from 'vue-material-design-icons/Close.vue' import AvatarWrapperSmall from '../../../../AvatarWrapper/AvatarWrapperSmall.vue' export default { @@ -50,7 +50,7 @@ export default { components: { AvatarWrapperSmall, - ButtonVue, + NcButton, Close, }, diff --git a/src/components/LeftSidebar/NewGroupConversation/SetContacts/SetContacts.vue b/src/components/LeftSidebar/NewGroupConversation/SetContacts/SetContacts.vue index 973b898fe..7d922b742 100644 --- a/src/components/LeftSidebar/NewGroupConversation/SetContacts/SetContacts.vue +++ b/src/components/LeftSidebar/NewGroupConversation/SetContacts/SetContacts.vue @@ -30,7 +30,7 @@ type="text" :placeholder="t('spreed', 'Search participants')" @input="handleInput"> - <ButtonVue v-if="isSearching" + <NcButton v-if="isSearching" class="abort-search" type="tertiary-no-background" :aria-label="cancelSearchLabel" @@ -38,7 +38,7 @@ <template #icon> <Close :size="20" /> </template> - </ButtonVue> + </NcButton> <transition-group v-if="hasSelectedParticipants" name="zoom" tag="div" @@ -59,7 +59,7 @@ </template> <script> -import ButtonVue from '@nextcloud/vue/dist/Components/ButtonVue.js' +import NcButton from '@nextcloud/vue/dist/Components/NcButton.js' import Close from 'vue-material-design-icons/Close.vue' import CancelableRequest from '../../../../utils/cancelableRequest.js' import debounce from 'debounce' @@ -71,7 +71,7 @@ import ContactSelectionBubble from './ContactSelectionBubble/ContactSelectionBub export default { name: 'SetContacts', components: { - ButtonVue, + NcButton, Close, ParticipantSearchResults, ContactSelectionBubble, diff --git a/src/components/LeftSidebar/SearchBox/SearchBox.vue b/src/components/LeftSidebar/SearchBox/SearchBox.vue index f8169e141..de133f4af 100644 --- a/src/components/LeftSidebar/SearchBox/SearchBox.vue +++ b/src/components/LeftSidebar/SearchBox/SearchBox.vue @@ -28,7 +28,7 @@ type="text" :placeHolder="placeholderText" @keypress.enter.prevent="handleSubmit"> - <ButtonVue v-if="isSearching" + <NcButton v-if="isSearching" class="abort-search" type="tertiary-no-background" :aria-label="cancelSearchLabel" @@ -36,19 +36,19 @@ <template #icon> <Close :size="20" /> </template> - </ButtonVue> + </NcButton> </form> </template> <script> -import ButtonVue from '@nextcloud/vue/dist/Components/ButtonVue.js' +import NcButton from '@nextcloud/vue/dist/Components/NcButton.js' import Close from 'vue-material-design-icons/Close.vue' import { EventBus } from '../../../services/EventBus.js' export default { name: 'SearchBox', components: { - ButtonVue, + NcButton, Close, }, props: { diff --git a/src/components/MediaDevicesSelector.vue b/src/components/MediaDevicesSelector.vue index f4b23c138..6a63b070f 100644 --- a/src/components/MediaDevicesSelector.vue +++ b/src/components/MediaDevicesSelector.vue @@ -29,7 +29,7 @@ :size="16" /> </div> - <Multiselect :id="deviceSelectorId" + <NcMultiselect :id="deviceSelectorId" v-model="deviceSelectedOption" :options="deviceOptions" track-by="id" @@ -41,7 +41,7 @@ </template> <script> -import Multiselect from '@nextcloud/vue/dist/Components/Multiselect.js' +import NcMultiselect from '@nextcloud/vue/dist/Components/NcMultiselect.js' import Microphone from 'vue-material-design-icons/Microphone.vue' import VideoIcon from 'vue-material-design-icons/Video.vue' @@ -50,7 +50,7 @@ export default { name: 'MediaDevicesSelector', components: { - Multiselect, + NcMultiselect, Microphone, VideoIcon, }, diff --git a/src/components/MessagesList/MessagesGroup/AuthorAvatar.vue b/src/components/MessagesList/MessagesGroup/AuthorAvatar.vue index 59a9d7e75..a7a17878b 100644 --- a/src/components/MessagesList/MessagesGroup/AuthorAvatar.vue +++ b/src/components/MessagesList/MessagesGroup/AuthorAvatar.vue @@ -20,7 +20,7 @@ --> <template> - <Avatar v-if="isUser" + <NcAvatar v-if="isUser" :disable-tooltip="true" class="messages__avatar__icon" :user="authorId" @@ -46,13 +46,13 @@ </template> <script> -import Avatar from '@nextcloud/vue/dist/Components/Avatar.js' +import NcAvatar from '@nextcloud/vue/dist/Components/NcAvatar.js' import { ATTENDEE } from '../../../constants.js' export default { name: 'AuthorAvatar', components: { - Avatar, + NcAvatar, }, props: { authorType: { diff --git a/src/components/MessagesList/MessagesGroup/Message/Message.spec.js b/src/components/MessagesList/MessagesGroup/Message/Message.spec.js index d46f99f01..11b7e835e 100644 --- a/src/components/MessagesList/MessagesGroup/Message/Message.spec.js +++ b/src/components/MessagesList/MessagesGroup/Message/Message.spec.js @@ -5,7 +5,7 @@ import { cloneDeep } from 'lodash' import { EventBus } from '../../../../services/EventBus.js' import storeConfig from '../../../../store/storeConfig.js' import { CONVERSATION, ATTENDEE, PARTICIPANT } from '../../../../constants.js' -import ButtonVue from '@nextcloud/vue/dist/Components/ButtonVue.js' +import NcButton from '@nextcloud/vue/dist/Components/NcButton.js' // Components import Check from 'vue-material-design-icons/Check.vue' @@ -18,8 +18,8 @@ import Location from './MessagePart/Location.vue' import DefaultParameter from './MessagePart/DefaultParameter.vue' import MessageButtonsBar from './MessageButtonsBar/MessageButtonsBar.vue' import Message from './Message.vue' -import ActionButton from '@nextcloud/vue/dist/Components/ActionButton.js' -import EmojiPicker from '@nextcloud/vue/dist/Components/EmojiPicker.js' +import NcActionButton from '@nextcloud/vue/dist/Components/NcActionButton.js' +import NcEmojiPicker from '@nextcloud/vue/dist/Components/NcEmojiPicker.js' // needed because of https://github.com/vuejs/vue-test-utils/issues/1507 const RichTextStub = { @@ -585,7 +585,7 @@ describe('Message.vue', () => { expect(wrapper.findComponent(MessageButtonsBar).exists()).toBe(true) // actions are present and rendered when the buttonsBar is renderend - const actions = wrapper.findAllComponents({ name: 'Actions' }) + const actions = wrapper.findAllComponents({ name: 'NcActions' }) expect(actions.length).toBe(2) // Mouseleave @@ -611,7 +611,7 @@ describe('Message.vue', () => { localVue, store, stubs: { - ActionButton, + NcActionButton, MessageButtonsBar, }, propsData: messageProps, @@ -666,13 +666,13 @@ describe('Message.vue', () => { expect(wrapper.vm.showReloadButton).toBe(true) - const reloadButtonVue = wrapper.findComponent(ButtonVue) - expect(reloadButtonVue.exists()).toBe(true) + const reloadNcButton = wrapper.findComponent(NcButton) + expect(reloadNcButton.exists()).toBe(true) const retryEvent = jest.fn() EventBus.$on('retry-message', retryEvent) - await reloadButtonVue.vm.$emit('click') + await reloadNcButton.vm.$emit('click') expect(retryEvent).toHaveBeenCalledWith(123) }) @@ -850,11 +850,11 @@ describe('Message.vue', () => { store, propsData: messageProps, stubs: { - EmojiPicker, + NcEmojiPicker, }, }) - const emojiPicker = wrapper.findComponent(EmojiPicker) + const emojiPicker = wrapper.findComponent(NcEmojiPicker) expect(emojiPicker.vm).toBeUndefined() }) @@ -878,7 +878,7 @@ describe('Message.vue', () => { store, propsData: messagePropsWithReactions, stubs: { - EmojiPicker, + NcEmojiPicker, }, mixins: [{ computed: { @@ -889,7 +889,7 @@ describe('Message.vue', () => { }], }) - const emojiPicker = wrapper.findComponent(EmojiPicker) + const emojiPicker = wrapper.findComponent(NcEmojiPicker) emojiPicker.vm.$emit('select', '❤️') @@ -923,7 +923,7 @@ describe('Message.vue', () => { }) // Click reaction button upon having already reacted - await wrapper.find('.reaction-button').getComponent(ButtonVue).vm.$emit('click') + await wrapper.find('.reaction-button').getComponent(NcButton).vm.$emit('click') await wrapper.vm.$nextTick() await wrapper.vm.$nextTick() diff --git a/src/components/MessagesList/MessagesGroup/Message/Message.vue b/src/components/MessagesList/MessagesGroup/Message/Message.vue index cff768157..5e55dac43 100644 --- a/src/components/MessagesList/MessagesGroup/Message/Message.vue +++ b/src/components/MessagesList/MessagesGroup/Message/Message.vue @@ -79,13 +79,13 @@ the main body of the message as well as a quote. @focus="showReloadButton = true" @mouseleave="showReloadButton = true" @blur="showReloadButton = true"> - <ButtonVue v-if="sendingErrorCanRetry && showReloadButton" + <NcButton v-if="sendingErrorCanRetry && showReloadButton" :aria-label="sendingErrorIconTooltip" @click="handleRetry"> <template #icon> <Reload :size="16" /> </template> - </ButtonVue> + </NcButton> <AlertCircle v-else :size="16" /> </div> @@ -112,39 +112,39 @@ the main body of the message as well as a quote. <div v-if="hasReactions" class="message-body__reactions" @mouseover="handleReactionsMouseOver"> - <Popover v-for="reaction in Object.keys(simpleReactions)" + <NcPopover v-for="reaction in Object.keys(simpleReactions)" :key="reaction" :delay="200" trigger="hover"> - <ButtonVue v-if="simpleReactions[reaction]!== 0" + <NcButton v-if="simpleReactions[reaction]!== 0" slot="trigger" class="reaction-button" :class="{'reaction-button__has-reacted': userHasReacted(reaction)}" @click="handleReactionClick(reaction)"> {{ reaction }} {{ simpleReactions[reaction] }} - </ButtonVue> + </NcButton> <div v-if="detailedReactions" class="reaction-details"> <span>{{ getReactionSummary(reaction) }}</span> </div> - </Popover> + </NcPopover> <!-- More reactions picker --> - <EmojiPicker v-if="canReact && showMessageButtonsBar" + <NcEmojiPicker v-if="canReact && showMessageButtonsBar" :per-line="5" :container="`#message_${id}`" @select="handleReactionClick"> - <ButtonVue class="reaction-button"> + <NcButton class="reaction-button"> <template #icon> <EmoticonOutline :size="15" /> </template> - </ButtonVue> - </EmojiPicker> - <ButtonVue v-else-if="canReact" + </NcButton> + </NcEmojiPicker> + <NcButton v-else-if="canReact" class="reaction-button"> <template #icon> <EmoticonOutline :size="15" /> </template> - </ButtonVue> + </NcButton> </div> </div> @@ -172,7 +172,7 @@ the main body of the message as well as a quote. </template> <script> -import ButtonVue from '@nextcloud/vue/dist/Components/ButtonVue.js' +import NcButton from '@nextcloud/vue/dist/Components/NcButton.js' import Tooltip from '@nextcloud/vue/dist/Directives/Tooltip.js' import CallButton from '../../../TopBar/CallButton.vue' import DeckCard from './MessagePart/DeckCard.vue' @@ -193,9 +193,9 @@ import moment from '@nextcloud/moment' import Location from './MessagePart/Location.vue' import Contact from './MessagePart/Contact.vue' import MessageButtonsBar from './MessageButtonsBar/MessageButtonsBar.vue' -import EmojiPicker from '@nextcloud/vue/dist/Components/EmojiPicker.js' +import NcEmojiPicker from '@nextcloud/vue/dist/Components/NcEmojiPicker.js' import EmoticonOutline from 'vue-material-design-icons/EmoticonOutline.vue' -import Popover from '@nextcloud/vue/dist/Components/Popover.js' +import NcPopover from '@nextcloud/vue/dist/Components/NcPopover.js' import { showError, showSuccess, showWarning, TOAST_DEFAULT_TIMEOUT } from '@nextcloud/dialogs' import { ATTENDEE, CONVERSATION, PARTICIPANT } from '../../../../constants.js' import Poll from './MessagePart/Poll.vue' @@ -208,7 +208,7 @@ export default { }, components: { - ButtonVue, + NcButton, CallButton, Quote, RichText, @@ -217,9 +217,9 @@ export default { CheckAll, Reload, MessageButtonsBar, - EmojiPicker, + NcEmojiPicker, EmoticonOutline, - Popover, + NcPopover, }, mixins: [ diff --git a/src/components/MessagesList/MessagesGroup/Message/MessageButtonsBar/Forwarder.vue b/src/components/MessagesList/MessagesGroup/Message/MessageButtonsBar/Forwarder.vue index 9f649abb1..55c0be86c 100644 --- a/src/components/MessagesList/MessagesGroup/Message/MessageButtonsBar/Forwarder.vue +++ b/src/components/MessagesList/MessagesGroup/Message/MessageButtonsBar/Forwarder.vue @@ -34,43 +34,43 @@ <!-- Second step of the flow: confirmation modal that gives the user the possibility to direclty route to the conversation to which the message has been forwarded --> - <Modal v-else + <NcModal v-else @close="handleClose"> <div class="forwarder"> - <EmptyContent icon="icon-checkmark" class="forwarded-confirmation__emptycontent"> + <NcEmptyContent icon="icon-checkmark" class="forwarded-confirmation__emptycontent"> <template #desc> {{ t('spreed', 'The message has been forwarded to {selectedConversationName}', { selectedConversationName }) }} </template> - </EmptyContent> + </NcEmptyContent> <div class="forwarded-confirmation__navigation"> - <ButtonVue type="tertiary" @click="handleClose"> + <NcButton type="tertiary" @click="handleClose"> {{ t('spreed', 'Dismiss') }} - </ButtonVue> - <ButtonVue type="primary" @click="openConversation"> + </NcButton> + <NcButton type="primary" @click="openConversation"> {{ t('spreed', 'Go to conversation') }} - </ButtonVue> + </NcButton> </div> </div> - </Modal> + </NcModal> </div> </template> <script> import RoomSelector from '../../../../../views/RoomSelector.vue' -import EmptyContent from '@nextcloud/vue/dist/Components/EmptyContent.js' -import Modal from '@nextcloud/vue/dist/Components/Modal.js' +import NcEmptyContent from '@nextcloud/vue/dist/Components/NcEmptyContent.js' +import NcModal from '@nextcloud/vue/dist/Components/NcModal.js' import { showError } from '@nextcloud/dialogs' import cloneDeep from 'lodash/cloneDeep.js' -import ButtonVue from '@nextcloud/vue/dist/Components/ButtonVue.js' +import NcButton from '@nextcloud/vue/dist/Components/NcButton.js' export default { name: 'Forwarder', components: { RoomSelector, - EmptyContent, - Modal, - ButtonVue, + NcEmptyContent, + NcModal, + NcButton, }, props: { diff --git a/src/components/MessagesList/MessagesGroup/Message/MessageButtonsBar/MessageButtonsBar.spec.js b/src/components/MessagesList/MessagesGroup/Message/MessageButtonsBar/MessageButtonsBar.spec.js index e56524f85..30137b2c2 100644 --- a/src/components/MessagesList/MessagesGroup/Message/MessageButtonsBar/MessageButtonsBar.spec.js +++ b/src/components/MessagesList/MessagesGroup/Message/MessageButtonsBar/MessageButtonsBar.spec.js @@ -4,8 +4,8 @@ import { createLocalVue, shallowMount } from '@vue/test-utils' import { cloneDeep } from 'lodash' import storeConfig from '../../../../../store/storeConfig.js' import { CONVERSATION, PARTICIPANT, ATTENDEE } from '../../../../../constants.js' -import ActionButton from '@nextcloud/vue/dist/Components/ActionButton.js' -import { findActionButton } from '../../../../../test-helpers.js' +import NcActionButton from '@nextcloud/vue/dist/Components/NcActionButton.js' +import { findNcActionButton } from '../../../../../test-helpers.js' import MessageButtonsBar from './../MessageButtonsBar/MessageButtonsBar.vue' describe('MessageButtonsBar.vue', () => { @@ -89,12 +89,12 @@ describe('MessageButtonsBar.vue', () => { localVue, store, stubs: { - ActionButton, + NcActionButton, }, propsData: messageProps, }) - const actionButton = findActionButton(wrapper, 'Reply') + const actionButton = findNcActionButton(wrapper, 'Reply') expect(actionButton.exists()).toBe(true) expect(actionButton.isVisible()).toBe(true) await actionButton.find('button').trigger('click') @@ -122,12 +122,12 @@ describe('MessageButtonsBar.vue', () => { localVue, store, stubs: { - ActionButton, + NcActionButton, }, propsData: messageProps, }) - const actionButton = findActionButton(wrapper, 'Reply') + const actionButton = findNcActionButton(wrapper, 'Reply') expect(actionButton.isVisible()).toBe(false) }) }) @@ -150,12 +150,12 @@ describe('MessageButtonsBar.vue', () => { }, }, stubs: { - ActionButton, + NcActionButton, }, propsData: messageProps, }) - const actionButton = findActionButton(wrapper, 'Reply privately') + const actionButton = findNcActionButton(wrapper, 'Reply privately') expect(actionButton.exists()).toBe(true) createOneToOneConversation.mockResolvedValueOnce({ @@ -184,12 +184,12 @@ describe('MessageButtonsBar.vue', () => { localVue, store, stubs: { - ActionButton, + NcActionButton, }, propsData: messageProps, }) - const actionButton = findActionButton(wrapper, 'Reply privately') + const actionButton = findNcActionButton(wrapper, 'Reply privately') expect(actionButton.exists()).toBe(visible) } @@ -228,12 +228,12 @@ describe('MessageButtonsBar.vue', () => { localVue, store, stubs: { - ActionButton, + NcActionButton, }, propsData: messageProps, }) - const actionButton = findActionButton(wrapper, 'Delete') + const actionButton = findNcActionButton(wrapper, 'Delete') expect(actionButton.exists()).toBe(true) await actionButton.find('button').trigger('click') @@ -263,12 +263,12 @@ describe('MessageButtonsBar.vue', () => { localVue, store, stubs: { - ActionButton, + NcActionButton, }, propsData: messageProps, }) - const actionButton = findActionButton(wrapper, 'Delete') + const actionButton = findNcActionButton(wrapper, 'Delete') expect(actionButton.exists()).toBe(visible) } @@ -340,13 +340,13 @@ describe('MessageButtonsBar.vue', () => { localVue, store, stubs: { - ActionButton, + NcActionButton, }, propsData: messageProps, }) - const actionButton = findActionButton(wrapper, 'Mark as unread') + const actionButton = findNcActionButton(wrapper, 'Mark as unread') expect(actionButton.exists()).toBe(true) await actionButton.find('button').trigger('click') @@ -384,13 +384,13 @@ describe('MessageButtonsBar.vue', () => { $copyText: copyTextMock, }, stubs: { - ActionButton, + NcActionButton, }, propsData: messageProps, }) - const actionButton = findActionButton(wrapper, 'Copy message link') + const actionButton = findNcActionButton(wrapper, 'Copy message link') expect(actionButton.exists()).toBe(true) await actionButton.find('button').trigger('click') @@ -417,12 +417,12 @@ describe('MessageButtonsBar.vue', () => { localVue, store, stubs: { - ActionButton, + NcActionButton, }, propsData: messageProps, }) - const actionButton = findActionButton(wrapper, 'first action') + const actionButton = findNcActionButton(wrapper, 'first action') expect(actionButton.exists()).toBe(true) await actionButton.find('button').trigger('click') @@ -430,7 +430,7 @@ describe('MessageButtonsBar.vue', () => { apiDummyData: 1, },) - const actionButton2 = findActionButton(wrapper, 'second action') + const actionButton2 = findNcActionButton(wrapper, 'second action') expect(actionButton2.exists()).toBe(true) await actionButton2.find('button').trigger('click') diff --git a/src/components/MessagesList/MessagesGroup/Message/MessageButtonsBar/MessageButtonsBar.vue b/src/components/MessagesList/MessagesGroup/Message/MessageButtonsBar/MessageButtonsBar.vue index 68948079e..81bdd8ea9 100644 --- a/src/components/MessagesList/MessagesGroup/Message/MessageButtonsBar/MessageButtonsBar.vue +++ b/src/components/MessagesList/MessagesGroup/Message/MessageButtonsBar/MessageButtonsBar.vue @@ -25,111 +25,111 @@ class="message-buttons-bar" :class="{ 'message-buttons-bar--last-read' : isLastRead }"> <template v-if="!isReactionsMenuOpen"> - <ButtonVue v-if="canReact" + <NcButton v-if="canReact" type="tertiary" :aria-label="t('spreed', 'Add a reaction to this message')" @click="openReactionsMenu"> <template #icon> <EmoticonOutline :size="20" /> </template> - </ButtonVue> - <Actions v-show="isReplyable"> - <ActionButton @click.stop="handleReply"> + </NcButton> + <NcActions v-show="isReplyable"> + <NcActionButton @click.stop="handleReply"> <template #icon> <Reply :size="16" /> </template> {{ t('spreed', 'Reply') }} - </ActionButton> - </Actions> - <Actions :force-menu="true" + </NcActionButton> + </NcActions> + <NcActions :force-menu="true" :container="`#message_${id}`" :boundaries-element="containerElement" @open="onMenuOpen" @close="onMenuClose"> - <ActionButton v-if="isPrivateReplyable" + <NcActionButton v-if="isPrivateReplyable" icon="icon-user" :close-after-click="true" @click.stop="handlePrivateReply"> {{ t('spreed', 'Reply privately') }} - </ActionButton> - <ActionButton icon="icon-external" + </NcActionButton> + <NcActionButton icon="icon-external" :close-after-click="true" @click.stop.prevent="handleCopyMessageLink"> {{ t('spreed', 'Copy message link') }} - </ActionButton> - <ActionButton :close-after-click="true" + </NcActionButton> + <NcActionButton :close-after-click="true" @click.stop="handleMarkAsUnread"> <template #icon> <EyeOffOutline :size="16" /> </template> {{ t('spreed', 'Mark as unread') }} - </ActionButton> - <ActionLink v-if="linkToFile" + </NcActionButton> + <NcActionLink v-if="linkToFile" :href="linkToFile"> <File slot="icon" :size="20" /> {{ t('spreed', 'Go to file') }} - </ActionLink> - <ActionButton v-if="!isCurrentGuest && !isFileShare && !isDeletedMessage" + </NcActionLink> + <NcActionButton v-if="!isCurrentGuest && !isFileShare && !isDeletedMessage" :close-after-click="true" @click.stop="showForwarder = true"> <Share slot="icon" :size="16" /> {{ t('spreed', 'Forward message') }} - </ActionButton> - <ActionSeparator v-if="messageActions.length > 0" /> + </NcActionButton> + <NcActionSeparator v-if="messageActions.length > 0" /> <template v-for="action in messageActions"> - <ActionButton :key="action.label" + <NcActionButton :key="action.label" :icon="action.icon" :close-after-click="true" @click="action.callback(messageApiData)"> {{ action.label }} - </ActionButton> + </NcActionButton> </template> <template v-if="isDeleteable"> - <ActionSeparator /> - <ActionButton icon="icon-delete" + <NcActionSeparator /> + <NcActionButton icon="icon-delete" :close-after-click="true" @click.stop="handleDelete"> {{ t('spreed', 'Delete') }} - </ActionButton> + </NcActionButton> </template> - </Actions> + </NcActions> </template> <template v-if="isReactionsMenuOpen"> - <ButtonVue type="tertiary" + <NcButton type="tertiary" :aria-label="t('spreed', 'Close reactions menu')" @click="closeReactionsMenu"> <template #icon> <ArrowLeft :size="20" /> </template> - </ButtonVue> - <ButtonVue type="tertiary" + </NcButton> + <NcButton type="tertiary" :aria-label="t('spreed', 'React with {emoji}', { emoji: '👍' })" @click="handleReactionClick('👍')"> <template #icon> <span>👍</span> </template> - </ButtonVue> - <ButtonVue type="tertiary" + </NcButton> + <NcButton type="tertiary" :aria-label="t('spreed', 'React with {emoji}', { emoji: '❤' })" @click="handleReactionClick('❤️')"> <template #icon> <span>❤️</span> </template> - </ButtonVue> - <EmojiPicker :container="`#message_${id} .message-buttons-bar`" + </NcButton> + <NcEmojiPicker :container="`#message_${id} .message-buttons-bar`" @select="handleReactionClick" @after-show="onEmojiPickerOpen" @after-hide="onEmojiPickerClose"> - <ButtonVue type="tertiary" + <NcButton type="tertiary" :aria-label="t('spreed', 'React with another emoji')"> <template #icon> <Plus :size="20" /> </template> - </ButtonVue> - </EmojiPicker> + </NcButton> + </NcEmojiPicker> </template> <Forwarder v-if="showForwarder" :message-object="messageObject" @@ -139,10 +139,10 @@ <script> import { PARTICIPANT, CONVERSATION, ATTENDEE } from '../../../../../constants.js' -import ActionButton from '@nextcloud/vue/dist/Components/ActionButton.js' -import ActionLink from '@nextcloud/vue/dist/Components/ActionLink.js' -import Actions from '@nextcloud/vue/dist/Components/Actions.js' -import ActionSeparator from '@nextcloud/vue/dist/Components/ActionSeparator.js' +import NcActionButton from '@nextcloud/vue/dist/Components/NcActionButton.js' +import NcActionLink from '@nextcloud/vue/dist/Components/NcActionLink.js' +import NcActions from '@nextcloud/vue/dist/Components/NcActions.js' +import NcActionSeparator from '@nextcloud/vue/dist/Components/NcActionSeparator.js' import EyeOffOutline from 'vue-material-design-icons/EyeOffOutline.vue' import EmoticonOutline from 'vue-material-design-icons/EmoticonOutline.vue' import File from 'vue-material-design-icons/File.vue' @@ -158,27 +158,27 @@ import { showSuccess, } from '@nextcloud/dialogs' import Forwarder from './Forwarder.vue' -import ButtonVue from '@nextcloud/vue/dist/Components/ButtonVue.js' -import EmojiPicker from '@nextcloud/vue/dist/Components/EmojiPicker.js' +import NcButton from '@nextcloud/vue/dist/Components/NcButton.js' +import NcEmojiPicker from '@nextcloud/vue/dist/Components/NcEmojiPicker.js' export default { name: 'MessageButtonsBar', components: { - Actions, - ActionButton, - ActionLink, + NcActions, + NcActionButton, + NcActionLink, EyeOffOutline, File, Share, - ActionSeparator, + NcActionSeparator, Forwarder, - ButtonVue, + NcButton, EmoticonOutline, ArrowLeft, Plus, Reply, - EmojiPicker, + NcEmojiPicker, }, props: { diff --git a/src/components/MessagesList/MessagesGroup/Message/MessagePart/FilePreview.spec.js b/src/components/MessagesList/MessagesGroup/Message/MessagePart/FilePreview.spec.js index 5161febdd..9e800d70c 100644 --- a/src/components/MessagesList/MessagesGroup/Message/MessagePart/FilePreview.spec.js +++ b/src/components/MessagesList/MessagesGroup/Message/MessagePart/FilePreview.spec.js @@ -6,7 +6,7 @@ import storeConfig from '../../../../../store/storeConfig.js' import { imagePath, generateRemoteUrl } from '@nextcloud/router' import { loadState } from '@nextcloud/initial-state' import PlayCircleOutline from 'vue-material-design-icons/PlayCircleOutline.vue' -import ButtonVue from '@nextcloud/vue/dist/Components/ButtonVue.js' +import NcButton from '@nextcloud/vue/dist/Components/NcButton.js' import FilePreview from './FilePreview.vue' jest.mock('@nextcloud/initial-state', () => ({ @@ -169,7 +169,7 @@ describe('FilePreview.vue', () => { expect(wrapper.element.tagName).toBe('DIV') expect(wrapper.find('img').attributes('src')).toBe('blob:XYZ') - const progressEl = wrapper.findComponent({ name: 'ProgressBar' }) + const progressEl = wrapper.findComponent({ name: 'NcProgressBar' }) expect(progressEl.exists()).toBe(true) expect(progressEl.props('value')).toBe(85) @@ -518,7 +518,7 @@ describe('FilePreview.vue', () => { await imageMock.onload() expect(wrapper.element.tagName).toBe('DIV') - await wrapper.findComponent(ButtonVue).trigger('click') + await wrapper.findComponent(NcButton).trigger('click') expect(wrapper.emitted()['remove-file']).toStrictEqual([['123']]) }) }) diff --git a/src/components/MessagesList/MessagesGroup/Message/MessagePart/FilePreview.vue b/src/components/MessagesList/MessagesGroup/Message/MessagePart/FilePreview.vue index b0c0e09fa..8b884a4fa 100644 --- a/src/components/MessagesList/MessagesGroup/Message/MessagePart/FilePreview.vue +++ b/src/components/MessagesList/MessagesGroup/Message/MessagePart/FilePreview.vue @@ -52,7 +52,7 @@ <span v-if="isLoading" v-tooltip="previewTooltip" class="preview loading" /> - <ButtonVue v-if="isUploadEditor" + <NcButton v-if="isUploadEditor" class="remove-file" tabindex="1" type="primary" @@ -61,8 +61,8 @@ <template #icon> <Close /> </template> - </ButtonVue> - <ProgressBar v-if="isTemporaryUpload && !isUploadEditor" :value="uploadProgress" /> + </NcButton> + <NcProgressBar v-if="isTemporaryUpload && !isUploadEditor" :value="uploadProgress" /> <div v-if="shouldShowFileDetail" class="name-container"> {{ fileDetail }} </div> @@ -71,14 +71,14 @@ <script> import { generateUrl, imagePath, generateRemoteUrl } from '@nextcloud/router' -import ProgressBar from '@nextcloud/vue/dist/Components/ProgressBar.js' +import NcProgressBar from '@nextcloud/vue/dist/Components/NcProgressBar.js' import Tooltip from '@nextcloud/vue/dist/Directives/Tooltip.js' import Close from 'vue-material-design-icons/Close.vue' import PlayCircleOutline from 'vue-material-design-icons/PlayCircleOutline.vue' import { getCapabilities } from '@nextcloud/capabilities' import { encodePath } from '@nextcloud/paths' import AudioPlayer from './AudioPlayer.vue' -import ButtonVue from '@nextcloud/vue/dist/Components/ButtonVue.js' +import NcButton from '@nextcloud/vue/dist/Components/NcButton.js' const PREVIEW_TYPE = { TEMPORARY: 0, @@ -91,10 +91,10 @@ export default { name: 'FilePreview', components: { - ProgressBar, + NcProgressBar, Close, PlayCircleOutline, - ButtonVue, + NcButton, }, directives: { diff --git a/src/components/MessagesList/MessagesGroup/Message/MessagePart/Mention.vue b/src/components/MessagesList/MessagesGroup/Message/MessagePart/Mention.vue index 3a79cb353..a133bd629 100644 --- a/src/components/MessagesList/MessagesGroup/Message/MessagePart/Mention.vue +++ b/src/components/MessagesList/MessagesGroup/Message/MessagePart/Mention.vue @@ -21,15 +21,15 @@ <template> <div class="mention"> - <UserBubble v-if="isMentionToAll" + <NcUserBubble v-if="isMentionToAll" :display-name="name" :avatar-image="'icon-group-forced-white'" :primary="true" /> - <UserBubble v-else-if="isMentionToGuest" + <NcUserBubble v-else-if="isMentionToGuest" :display-name="name" :avatar-image="'icon-user-forced-white'" :primary="isCurrentGuest" /> - <UserBubble v-else + <NcUserBubble v-else :display-name="name" :user="id" :primary="isCurrentUser" /> @@ -38,13 +38,13 @@ <script> -import UserBubble from '@nextcloud/vue/dist/Components/UserBubble.js' +import NcUserBubble from '@nextcloud/vue/dist/Components/NcUserBubble.js' export default { name: 'Mention', components: { - UserBubble, + NcUserBubble, }, props: { diff --git a/src/components/MessagesList/MessagesGroup/Message/MessagePart/Poll.vue b/src/components/MessagesList/MessagesGroup/Message/MessagePart/Poll.vue index 15583dc37..e7092aa2b 100644 --- a/src/components/MessagesList/MessagesGroup/Message/MessagePart/Poll.vue +++ b/src/components/MessagesList/MessagesGroup/Message/MessagePart/Poll.vue @@ -38,7 +38,7 @@ </a> <!-- voting and results dialog --> - <Modal v-if="vote !== undefined && showModal" + <NcModal v-if="vote !== undefined && showModal" size="small" @close="showModal = false"> <div class="poll__modal"> @@ -55,7 +55,7 @@ <!-- options --> <div class="poll__modal-options"> <template v-if="checkboxRadioSwitchType === 'radio'"> - <CheckboxRadioSwitch v-for="(option, index) in options" + <NcCheckboxRadioSwitch v-for="(option, index) in options" :key="'radio' + index" :checked.sync="vote" class="poll__option" @@ -63,28 +63,28 @@ :type="checkboxRadioSwitchType" name="answerType"> {{ option }} - </CheckboxRadioSwitch> + </NcCheckboxRadioSwitch> </template> <template v-else> - <CheckboxRadioSwitch v-for="(option, index) in options" + <NcCheckboxRadioSwitch v-for="(option, index) in options" :key="'checkbox' + index" :checked.sync="vote" :value="index.toString()" :type="checkboxRadioSwitchType" name="answerType"> {{ option }} - </CheckboxRadioSwitch> + </NcCheckboxRadioSwitch> </template> </div> <div class="poll__modal-actions"> - <ButtonVue type="tertiary" @click="dismissModal"> + <NcButton type="tertiary" @click="dismissModal"> {{ t('spreed', 'Dismiss') }} - </ButtonVue> + </NcButton> <!-- create poll button--> - <ButtonVue type="primary" :disabled="!canSubmitVote" @click="submitVote"> + <NcButton type="primary" :disabled="!canSubmitVote" @click="submitVote"> {{ t('spreed', 'Submit') }} - </ButtonVue> + </NcButton> </div> </template> @@ -112,35 +112,35 @@ {{ getVotePercentage(index) + '%' }} </p> </div> - <ProgressBar :value="getVotePercentage(index)" size="medium" /> + <NcProgressBar :value="getVotePercentage(index)" size="medium" /> </div> </div> <div v-if="pollIsOpen" class="poll__modal-actions"> - <ButtonVue type="tertiary" + <NcButton type="tertiary" @click="modalPage = 'voting'"> {{ t('spreed', 'Back') }} - </ButtonVue> + </NcButton> <!-- create poll button--> - <ButtonVue v-if="canClosePoll" + <NcButton v-if="canClosePoll" type="error" @click="closePoll"> {{ t('spreed', 'Close poll') }} - </ButtonVue> + </NcButton> </div> </template> </div> - </modal> + </NcModal> </div> </template> <script> -import CheckboxRadioSwitch from '@nextcloud/vue/dist/Components/CheckboxRadioSwitch.js' -import Modal from '@nextcloud/vue/dist/Components/Modal.js' -import ButtonVue from '@nextcloud/vue/dist/Components/ButtonVue.js' +import NcCheckboxRadioSwitch from '@nextcloud/vue/dist/Components/NcCheckboxRadioSwitch.js' +import NcModal from '@nextcloud/vue/dist/Components/NcModal.js' +import NcButton from '@nextcloud/vue/dist/Components/NcButton.js' import PollIcon from 'vue-material-design-icons/Poll.vue' -import ProgressBar from '@nextcloud/vue/dist/Components/ProgressBar.js' +import NcProgressBar from '@nextcloud/vue/dist/Components/NcProgressBar.js' import { PARTICIPANT } from '../../../../../constants.js' export default { @@ -148,11 +148,11 @@ export default { name: 'Poll', components: { - CheckboxRadioSwitch, - Modal, - ButtonVue, + NcCheckboxRadioSwitch, + NcModal, + NcButton, PollIcon, - ProgressBar, + NcProgressBar, }, props: { diff --git a/src/components/MessagesList/MessagesList.vue b/src/components/MessagesList/MessagesList.vue index bb21e8e47..c81c407ed 100644 --- a/src/components/MessagesList/MessagesList.vue +++ b/src/components/MessagesList/MessagesList.vue @@ -49,7 +49,7 @@ get the messagesList array and loop through the list to generate the messages. :count="15" /> </template> <transition name="fade"> - <ButtonVue v-show="!isChatScrolledToBottom" + <NcButton v-show="!isChatScrolledToBottom" type="secondary" :aria-label="scrollToBottomAriaLabel" class="scroll-to-bottom" @@ -57,7 +57,7 @@ get the messagesList array and loop through the list to generate the messages. <template #icon> <ChevronDown :size="20" /> </template> - </ButtonVue> + </NcButton> </transition> </div> </template> @@ -74,7 +74,7 @@ import { EventBus } from '../../services/EventBus.js' import LoadingPlaceholder from '../LoadingPlaceholder.vue' import ChevronDown from 'vue-material-design-icons/ChevronDown.vue' import uniqueId from 'lodash/uniqueId.js' -import ButtonVue from '@nextcloud/vue/dist/Components/ButtonVue.js' +import NcButton from '@nextcloud/vue/dist/Components/NcButton.js' export default { name: 'MessagesList', @@ -82,7 +82,7 @@ export default { LoadingPlaceholder, MessagesGroup, ChevronDown, - ButtonVue, + NcButton, }, mixins: [ diff --git a/src/components/NewMessageForm/AdvancedInput/AdvancedInput.vue b/src/components/NewMessageForm/AdvancedInput/AdvancedInput.vue index 9d2e3d5c1..b81aacf6d 100644 --- a/src/components/NewMessageForm/AdvancedInput/AdvancedInput.vue +++ b/src/components/NewMessageForm/AdvancedInput/AdvancedInput.vue @@ -30,7 +30,7 @@ :allow-spaces="false" @at="handleAtEvent"> <template #item="scope"> - <Avatar v-if="isMentionToAll(scope.item.id)" + <NcAvatar v-if="isMentionToAll(scope.item.id)" :size="44" :icon-class="'icon-group-forced-white'" :disable-tooltip="true" @@ -41,7 +41,7 @@ :style="getGuestAvatarStyle()"> {{ getFirstLetterOfGuestName(scope.item.label) }} </div> - <Avatar v-else + <NcAvatar v-else :key="scope.item.source + '#' + scope.item.id" :size="44" :user="atRemoveQuotesFromUserIdForAvatars(scope.item.id)" @@ -98,7 +98,7 @@ import VueAtReparenter from '../../../mixins/vueAtReparenter.js' import { EventBus } from '../../../services/EventBus.js' import { searchPossibleMentions } from '../../../services/mentionsService.js' import { fetchClipboardContent } from '../../../utils/clipboard.js' -import Avatar from '@nextcloud/vue/dist/Components/Avatar.js' +import NcAvatar from '@nextcloud/vue/dist/Components/NcAvatar.js' import Mention from '../../MessagesList/MessagesGroup/Message/MessagePart/Mention.vue' import escapeHtml from 'escape-html' import debounce from 'debounce' @@ -166,7 +166,7 @@ export default { name: 'AdvancedInput', components: { At, - Avatar, + NcAvatar, Mention, }, mixins: [ diff --git a/src/components/NewMessageForm/AudioRecorder/AudioRecorder.vue b/src/components/NewMessageForm/AudioRecorder/AudioRecorder.vue index 9444b892d..584d5d03a 100644 --- a/src/components/NewMessageForm/AudioRecorder/AudioRecorder.vue +++ b/src/components/NewMessageForm/AudioRecorder/AudioRecorder.vue @@ -21,7 +21,7 @@ <template> <div class="audio-recorder"> - <ButtonVue v-if="!isRecording" + <NcButton v-if="!isRecording" v-tooltip.auto="{ content: startRecordingTooltip, delay: tooltipDelay, @@ -33,9 +33,9 @@ <template #icon> <Microphone :size="16" /> </template> - </ButtonVue> + </NcButton> <div v-else class="wrapper"> - <ButtonVue v-tooltip.auto="{ + <NcButton v-tooltip.auto="{ content: abortRecordingTooltip, delay: tooltipDelay, }" @@ -45,13 +45,13 @@ <template #icon> <Close :size="16" /> </template> - </ButtonVue> + </NcButton> <div class="audio-recorder__info"> <div class="recording-indicator fadeOutIn" /> <span class="time"> {{ parsedRecordTime }}</span> </div> - <ButtonVue v-tooltip.auto="{ + <NcButton v-tooltip.auto="{ content: stopRecordingTooltip, delay: tooltipDelay, }" @@ -62,7 +62,7 @@ <template #icon> <Check :size="16" /> </template> - </ButtonVue> + </NcButton> </div> </div> </template> @@ -75,7 +75,7 @@ import Tooltip from '@nextcloud/vue/dist/Directives/Tooltip.js' import { mediaDevicesManager } from '../../../utils/webrtc/index.js' import { showError } from '@nextcloud/dialogs' import { MediaRecorder } from 'extendable-media-recorder' -import ButtonVue from '@nextcloud/vue/dist/Components/ButtonVue.js' +import NcButton from '@nextcloud/vue/dist/Components/NcButton.js' export default { name: 'AudioRecorder', @@ -84,7 +84,7 @@ export default { Microphone, Close, Check, - ButtonVue, + NcButton, }, directives: { diff --git a/src/components/NewMessageForm/NewMessageForm.vue b/src/components/NewMessageForm/NewMessageForm.vue index 40f63249d..28937d529 100644 --- a/src/components/NewMessageForm/NewMessageForm.vue +++ b/src/components/NewMessageForm/NewMessageForm.vue @@ -37,7 +37,7 @@ <!-- Attachments menu --> <div v-if="canUploadFiles || canShareFiles" class="new-message-form__upload-menu"> - <Actions ref="attachmentsMenu" + <NcActions ref="attachmentsMenu" :container="container" :boundaries-element="containerElement" :disabled="disabled" @@ -45,19 +45,19 @@ :aria-haspopup="true"> <Paperclip slot="icon" :size="16" /> - <ActionButton v-if="canUploadFiles" + <NcActionButton v-if="canUploadFiles" :close-after-click="true" icon="icon-upload" @click.prevent="clickImportInput"> {{ t('spreed', 'Upload new files') }} - </ActionButton> - <ActionButton v-if="canShareFiles" + </NcActionButton> + <NcActionButton v-if="canShareFiles" :close-after-click="true" icon="icon-folder" @click.prevent="handleFileShare"> {{ t('spreed', 'Share from Files') }} - </ActionButton> - <ActionButton v-if="canCreatePoll" + </NcActionButton> + <NcActionButton v-if="canCreatePoll" :close-after-click="true" @click.prevent="toggleSimplePollsEditor(true)"> <Poll slot="icon" @@ -65,34 +65,34 @@ decorative title="" /> {{ t('spreed', 'Create new poll') }} - </ActionButton> - </Actions> + </NcActionButton> + </NcActions> </div> <!-- Input area --> <div class="new-message-form__input"> <div class="new-message-form__emoji-picker"> - <EmojiPicker v-if="!disabled" + <NcEmojiPicker v-if="!disabled" :container="container" :close-on-select="false" @select="addEmoji"> - <ButtonVue :disabled="disabled" + <NcButton :disabled="disabled" :aria-label="t('spreed', 'Add emoji')" type="tertiary-no-background" :aria-haspopup="true"> <template #icon> <EmoticonOutline :size="16" /> </template> - </ButtonVue> - </EmojiPicker> + </NcButton> + </NcEmojiPicker> <!-- Disabled emoji picker placeholder button --> - <ButtonVue v-else + <NcButton v-else type="tertiary" :aria-label="t('spreed', 'Add emoji')" :disabled="true"> <template #icon> <EmoticonOutline :size="16" /> </template> - </ButtonVue> + </NcButton> </div> <div v-if="messageToBeReplied" class="new-message-form__quote"> <Quote :is-new-message-form-quote="true" @@ -116,19 +116,19 @@ @audio-file="handleAudioFile" /> <!-- Send buttons --> <template v-else> - <Actions :force-menu="true"> + <NcActions :force-menu="true"> <!-- Silent send --> - <ActionButton :close-after-click="true" + <NcActionButton :close-after-click="true" icon="icon-upload" :title="t('spreed', 'Send without notification')" @click.prevent="handleSubmit({ silent: true })"> {{ silentSendInfo }} <BellOff slot="icon" :size="16" /> - </ActionButton> - </Actions> + </NcActionButton> + </NcActions> <!-- Send --> - <ButtonVue :disabled="disabled" + <NcButton :disabled="disabled" type="tertiary" native-type="submit" :title="t('spreed', 'Send message')" @@ -137,7 +137,7 @@ <template #icon> <Send :size="16" /> </template> - </ButtonVue> + </NcButton> </template> </form> </div> @@ -152,10 +152,10 @@ import AdvancedInput from './AdvancedInput/AdvancedInput.vue' import { getFilePickerBuilder } from '@nextcloud/dialogs' import { getCapabilities } from '@nextcloud/capabilities' import Quote from '../Quote.vue' -import ButtonVue from '@nextcloud/vue/dist/Components/ButtonVue.js' -import Actions from '@nextcloud/vue/dist/Components/Actions.js' -import ActionButton from '@nextcloud/vue/dist/Components/ActionButton.js' -import EmojiPicker from '@nextcloud/vue/dist/Components/EmojiPicker.js' +import NcButton from '@nextcloud/vue/dist/Components/NcButton.js' +import NcActions from '@nextcloud/vue/dist/Components/NcActions.js' +import NcActionButton from '@nextcloud/vue/dist/Components/NcActionButton.js' +import NcEmojiPicker from '@nextcloud/vue/dist/Components/NcEmojiPicker.js' import { EventBus } from '../../services/EventBus.js' import { shareFile } from '../../services/filesSharingServices.js' import { CONVERSATION, PARTICIPANT } from '../../constants.js' @@ -179,11 +179,11 @@ export default { components: { AdvancedInput, Quote, - Actions, - ActionButton, - ButtonVue, + NcActions, + NcActionButton, + NcButton, Paperclip, - EmojiPicker, + NcEmojiPicker, EmoticonOutline, Send, AudioRecorder, @@ -476,7 +476,7 @@ export default { }, /** - * Clicks the hidden file input when clicking the correspondent ActionButton, + * Clicks the hidden file input when clicking the correspondent NcActionButton, * thus opening the file-picker */ clickImportInput() { diff --git a/src/components/NewMessageForm/SimplePollsEditor/PollOption.vue b/src/components/NewMessageForm/SimplePollsEditor/PollOption.vue index 1c7ea5f8e..2dedfb6ee 100644 --- a/src/components/NewMessageForm/SimplePollsEditor/PollOption.vue +++ b/src/components/NewMessageForm/SimplePollsEditor/PollOption.vue @@ -22,29 +22,29 @@ <template> <form class="poll-option"> - <TextField class="poll-option__input" v-bind="$attrs" v-on="$listeners" /> - <ButtonVue v-if="canDelete" + <NcTextField class="poll-option__input" v-bind="$attrs" v-on="$listeners" /> + <NcButton v-if="canDelete" type="tertiary-no-background" @click="deleteOption"> <Close slot="icon" decorative title="" :size="20" /> - </ButtonVue> + </NcButton> </form> </template> <script> -import TextField from '@nextcloud/vue/dist/Components/TextField.js' -import ButtonVue from '@nextcloud/vue/dist/Components/ButtonVue.js' +import NcTextField from '@nextcloud/vue/dist/Components/NcTextField.js' +import NcButton from '@nextcloud/vue/dist/Components/NcButton.js' import Close from 'vue-material-design-icons/Close.vue' export default { name: 'PollOption', components: { - TextField, - ButtonVue, + NcTextField, + NcButton, Close, }, diff --git a/src/components/NewMessageForm/SimplePollsEditor/SimplePollsEditor.vue b/src/components/NewMessageForm/SimplePollsEditor/SimplePollsEditor.vue index 72a45ade4..a54ebdecf 100644 --- a/src/components/NewMessageForm/SimplePollsEditor/SimplePollsEditor.vue +++ b/src/components/NewMessageForm/SimplePollsEditor/SimplePollsEditor.vue @@ -21,7 +21,7 @@ --> <template> - <Modal size="small" v-on="$listeners"> + <NcModal size="small" v-on="$listeners"> <div class="simple-polls-editor"> <h2>{{ t('spreed', 'Create new poll') }}</h2> @@ -29,7 +29,7 @@ <p class="simple-polls-editor__caption"> {{ t('spreed', 'Question') }} </p> - <TextField :value.sync="pollQuestion" :placeholder="t('spreed', 'Ask a question ')" v-on="$listeners" /> + <NcTextField :value.sync="pollQuestion" :placeholder="t('spreed', 'Ask a question ')" v-on="$listeners" /> <!-- Poll options --> <p class="simple-polls-editor__caption"> @@ -44,10 +44,10 @@ @delete-option="deleteOption(index)" /> <!-- Add options --> - <ButtonVue class="simple-polls-editor__add-more" type="tertiary-no-background" @click="addOption"> + <NcButton class="simple-polls-editor__add-more" type="tertiary-no-background" @click="addOption"> <Plus slot="icon" /> {{ t('spreed', 'Add answer') }} - </ButtonVue> + </NcButton> <!-- Poll settings --> <p class="simple-polls-editor__caption"> @@ -61,38 +61,38 @@ {{ t('spreed', 'Multiple answers') }} </CheckBoxRadioSwitch> <div class="simple-polls-editor__actions"> - <ButtonVue type="tertiary" @click="dismissEditor"> + <NcButton type="tertiary" @click="dismissEditor"> {{ t('spreed', 'Dismiss') }} - </ButtonVue> + </NcButton> <!-- create poll button--> - <ButtonVue type="primary" @click="createPoll"> + <NcButton type="primary" @click="createPoll"> {{ t('spreed', 'Create poll') }} - </ButtonVue> + </NcButton> </div> </div> </div> - </Modal> + </NcModal> </template> <script> -import Modal from '@nextcloud/vue/dist/Components/Modal.js' -import CheckBoxRadioSwitch from '@nextcloud/vue/dist/Components/CheckboxRadioSwitch.js' -import ButtonVue from '@nextcloud/vue/dist/Components/ButtonVue.js' +import NcModal from '@nextcloud/vue/dist/Components/NcModal.js' +import CheckBoxRadioSwitch from '@nextcloud/vue/dist/Components/NcCheckboxRadioSwitch.js' +import NcButton from '@nextcloud/vue/dist/Components/NcButton.js' import PollOption from './PollOption.vue' import Plus from 'vue-material-design-icons/Plus.vue' -import TextField from '@nextcloud/vue/dist/Components/TextField.js' +import NcTextField from '@nextcloud/vue/dist/Components/NcTextField.js' import pollService from '../../../services/pollService.js' export default { name: 'SimplePollsEditor', components: { - Modal, + NcModal, CheckBoxRadioSwitch, - ButtonVue, + NcButton, PollOption, Plus, - TextField, + NcTextField, }, props: { diff --git a/src/components/PermissionsEditor/PermissionsEditor.vue b/src/components/PermissionsEditor/PermissionsEditor.vue index 266488f2b..090789cce 100644 --- a/src/components/PermissionsEditor/PermissionsEditor.vue +++ b/src/components/PermissionsEditor/PermissionsEditor.vue @@ -20,50 +20,50 @@ --> <template> - <Modal size="small" + <NcModal size="small" v-on="$listeners"> <div class="wrapper"> <template v-if="!loading"> <!-- eslint-disable-next-line vue/no-v-html --> <p class="title" v-html="modalTitle" /> <form @submit.prevent="handleSubmitPermissions"> - <CheckboxRadioSwitch ref="callStart" + <NcCheckboxRadioSwitch ref="callStart" :checked.sync="callStart" class="checkbox"> {{ t('spreed', 'Start a call') }} - </CheckboxRadioSwitch> - <CheckboxRadioSwitch ref="lobbyIgnore" + </NcCheckboxRadioSwitch> + <NcCheckboxRadioSwitch ref="lobbyIgnore" :checked.sync="lobbyIgnore" class="checkbox"> {{ t('spreed', 'Skip the lobby') }} - </CheckboxRadioSwitch> - <CheckboxRadioSwitch ref="chatMessagesAndReactions" + </NcCheckboxRadioSwitch> + <NcCheckboxRadioSwitch ref="chatMessagesAndReactions" :checked.sync="chatMessagesAndReactions" class="checkbox"> {{ t('spreed', 'Can post messages and reactions') }} - </CheckboxRadioSwitch> - <CheckboxRadioSwitch ref="publishAudio" + </NcCheckboxRadioSwitch> + <NcCheckboxRadioSwitch ref="publishAudio" :checked.sync="publishAudio" class="checkbox"> {{ t('spreed', 'Enable the microphone') }} - </CheckboxRadioSwitch> - <CheckboxRadioSwitch ref="publishVideo" + </NcCheckboxRadioSwitch> + <NcCheckboxRadioSwitch ref="publishVideo" :checked.sync="publishVideo" class="checkbox"> {{ t('spreed', 'Enable the camera') }} - </CheckboxRadioSwitch> - <CheckboxRadioSwitch ref="publishScreen" + </NcCheckboxRadioSwitch> + <NcCheckboxRadioSwitch ref="publishScreen" :checked.sync="publishScreen" class="checkbox"> {{ t('spreed', 'Share the screen') }} - </CheckboxRadioSwitch> - <ButtonVue ref="submit" + </NcCheckboxRadioSwitch> + <NcButton ref="submit" native-type="submit" class="button-update-permission" type="primary" :disabled="submitButtonDisabled"> {{ t('spreed', 'Update permissions') }} - </ButtonVue> + </NcButton> </form> </template> <div v-if="loading" class="loading-screen"> @@ -71,14 +71,14 @@ <p>{{ t('spreed', 'Updating permissions') }}</p> </div> </div> - </Modal> + </NcModal> </template> <script> -import CheckboxRadioSwitch from '@nextcloud/vue/dist/Components/CheckboxRadioSwitch.js' +import NcCheckboxRadioSwitch from '@nextcloud/vue/dist/Components/NcCheckboxRadioSwitch.js' import { PARTICIPANT } from '../../constants.js' -import Modal from '@nextcloud/vue/dist/Components/Modal.js' -import ButtonVue from '@nextcloud/vue/dist/Components/ButtonVue.js' +import NcModal from '@nextcloud/vue/dist/Components/NcModal.js' +import NcButton from '@nextcloud/vue/dist/Components/NcButton.js' const PERMISSIONS = PARTICIPANT.PERMISSIONS @@ -86,9 +86,9 @@ export default { name: 'PermissionsEditor', components: { - CheckboxRadioSwitch, - Modal, - ButtonVue, + NcCheckboxRadioSwitch, + NcModal, + NcButton, }, props: { diff --git a/src/components/Quote.vue b/src/components/Quote.vue index 8704dd56a..eb868f1a6 100644 --- a/src/components/Quote.vue +++ b/src/components/Quote.vue @@ -45,19 +45,19 @@ components. </blockquote> </div> <div v-if="isNewMessageFormQuote" class="quote__main__right"> - <ButtonVue type="tertiary" + <NcButton type="tertiary" :aria-label="cancelQuoteLabel" @click="handleAbortReply"> <template #icon> <Close :size="20" /> </template> - </ButtonVue> + </NcButton> </div> </a> </template> <script> -import ButtonVue from '@nextcloud/vue/dist/Components/ButtonVue.js' +import NcButton from '@nextcloud/vue/dist/Components/NcButton.js' import Close from 'vue-material-design-icons/Close.vue' import RichText from '@juliushaertl/vue-richtext' import FilePreview from './MessagesList/MessagesGroup/Message/MessagePart/FilePreview.vue' @@ -67,7 +67,7 @@ import { EventBus } from '../services/EventBus.js' export default { name: 'Quote', components: { - ButtonVue, + NcButton, Close, RichText, }, diff --git a/src/components/RightSidebar/LobbyStatus.vue b/src/components/RightSidebar/LobbyStatus.vue index b409538c5..60c6f476e 100644 --- a/src/components/RightSidebar/LobbyStatus.vue +++ b/src/components/RightSidebar/LobbyStatus.vue @@ -20,19 +20,19 @@ --> <template> - <ButtonVue type="primary" @click="disableLobby"> + <NcButton type="primary" @click="disableLobby"> {{ t('spreed', 'Disable lobby' ) }} - </ButtonVue> + </NcButton> </template> <script> import { showError, showSuccess } from '@nextcloud/dialogs' -import ButtonVue from '@nextcloud/vue/dist/Components/ButtonVue.js' +import NcButton from '@nextcloud/vue/dist/Components/NcButton.js' export default { name: 'LobbyStatus', components: { - ButtonVue, + NcButton, }, props: { token: { diff --git a/src/components/RightSidebar/Participants/ParticipantsList/Participant/Participant.spec.js b/src/components/RightSidebar/Participants/ParticipantsList/Participant/Participant.spec.js index 71c7ce844..71ee2fdda 100644 --- a/src/components/RightSidebar/Participants/ParticipantsList/Participant/Participant.spec.js +++ b/src/components/RightSidebar/Participants/ParticipantsList/Participant/Participant.spec.js @@ -9,9 +9,9 @@ import Microphone from 'vue-material-design-icons/Microphone.vue' import Phone from 'vue-material-design-icons/Phone.vue' import VideoIcon from 'vue-material-design-icons/Video.vue' import HandBackLeft from 'vue-material-design-icons/HandBackLeft.vue' -import ActionButton from '@nextcloud/vue/dist/Components/ActionButton.js' -import ActionText from '@nextcloud/vue/dist/Components/ActionText.js' -import { findActionButton } from '../../../../../test-helpers.js' +import NcActionButton from '@nextcloud/vue/dist/Components/NcActionButton.js' +import NcActionText from '@nextcloud/vue/dist/Components/NcActionText.js' +import { findNcActionButton } from '../../../../../test-helpers.js' import Participant from './Participant.vue' @@ -97,7 +97,7 @@ describe('Participant.vue', () => { showUserStatus, }, stubs: { - ActionButton, + NcActionButton, }, directives: { tooltip: tooltipMock, @@ -391,7 +391,7 @@ describe('Participant.vue', () => { */ async function testCanDemote() { const wrapper = mountParticipant(participant) - const actionButton = findActionButton(wrapper, 'Demote from moderator') + const actionButton = findNcActionButton(wrapper, 'Demote from moderator') expect(actionButton.exists()).toBe(true) await actionButton.find('button').trigger('click') @@ -407,7 +407,7 @@ describe('Participant.vue', () => { */ async function testCannotDemote() { const wrapper = mountParticipant(participant) - const actionButton = findActionButton(wrapper, 'Demote to moderator') + const actionButton = findNcActionButton(wrapper, 'Demote to moderator') expect(actionButton.exists()).toBe(false) } @@ -483,7 +483,7 @@ describe('Participant.vue', () => { */ async function testCanPromote() { const wrapper = mountParticipant(participant) - const actionButton = findActionButton(wrapper, 'Promote to moderator') + const actionButton = findNcActionButton(wrapper, 'Promote to moderator') expect(actionButton.exists()).toBe(true) await actionButton.find('button').trigger('click') @@ -499,7 +499,7 @@ describe('Participant.vue', () => { */ async function testCannotPromote() { const wrapper = mountParticipant(participant) - const actionButton = findActionButton(wrapper, 'Promote to moderator') + const actionButton = findNcActionButton(wrapper, 'Promote to moderator') expect(actionButton.exists()).toBe(false) } @@ -575,7 +575,7 @@ describe('Participant.vue', () => { conversation.participantType = PARTICIPANT.TYPE.MODERATOR participant.actorType = ATTENDEE.ACTOR_TYPE.EMAILS const wrapper = mountParticipant(participant) - const actionButton = findActionButton(wrapper, 'Resend invitation') + const actionButton = findNcActionButton(wrapper, 'Resend invitation') expect(actionButton.exists()).toBe(true) await actionButton.find('button').trigger('click') @@ -589,14 +589,14 @@ describe('Participant.vue', () => { test('does not allow non-moderators to resend invitations', async () => { participant.actorType = ATTENDEE.ACTOR_TYPE.EMAILS const wrapper = mountParticipant(participant) - const actionButton = findActionButton(wrapper, 'Resend invitation') + const actionButton = findNcActionButton(wrapper, 'Resend invitation') expect(actionButton.exists()).toBe(false) }) test('does not display resend invitations action when not an email actor', async () => { participant.actorType = ATTENDEE.ACTOR_TYPE.USERS const wrapper = mountParticipant(participant) - const actionButton = findActionButton(wrapper, 'Resend invitation') + const actionButton = findNcActionButton(wrapper, 'Resend invitation') expect(actionButton.exists()).toBe(false) }) }) @@ -615,7 +615,7 @@ describe('Participant.vue', () => { */ async function testCanRemove(buttonText = 'Remove participant') { const wrapper = mountParticipant(participant) - const actionButton = findActionButton(wrapper, buttonText) + const actionButton = findNcActionButton(wrapper, buttonText) expect(actionButton.exists()).toBe(true) await actionButton.find('button').trigger('click') @@ -631,7 +631,7 @@ describe('Participant.vue', () => { */ async function testCannotRemove() { const wrapper = mountParticipant(participant) - const actionButton = findActionButton(wrapper, 'Remove participant') + const actionButton = findNcActionButton(wrapper, 'Remove participant') expect(actionButton.exists()).toBe(false) } @@ -698,7 +698,7 @@ describe('Participant.vue', () => { */ function testPinVisible() { const wrapper = mountParticipant(participant) - let actionTexts = wrapper.findAllComponents(ActionText) + let actionTexts = wrapper.findAllComponents(NcActionText) actionTexts = actionTexts.filter((actionText) => { return actionText.props('title').indexOf('PIN') >= 0 }) @@ -723,7 +723,7 @@ describe('Participant.vue', () => { conversation.participantType = PARTICIPANT.TYPE.USER participant.attendeePin = '12345678' const wrapper = mountParticipant(participant) - let actionTexts = wrapper.findAllComponents(ActionText) + let actionTexts = wrapper.findAllComponents(NcActionText) actionTexts = actionTexts.filter((actionText) => { return actionText.props('title').indexOf('PIN') >= 0 }) @@ -735,7 +735,7 @@ describe('Participant.vue', () => { conversation.participantType = PARTICIPANT.TYPE.MODERATOR participant.attendeePin = '' const wrapper = mountParticipant(participant) - let actionTexts = wrapper.findAllComponents(ActionText) + let actionTexts = wrapper.findAllComponents(NcActionText) actionTexts = actionTexts.filter((actionText) => { return actionText.props('title').indexOf('PIN') >= 0 }) @@ -755,7 +755,7 @@ describe('Participant.vue', () => { const wrapper = mountParticipant(participant) // no actions - expect(wrapper.findAllComponents(ActionButton).exists()).toBe(false) + expect(wrapper.findAllComponents(NcActionButton).exists()).toBe(false) }) test('triggers event when clicking', async () => { diff --git a/src/components/RightSidebar/Participants/ParticipantsList/Participant/Participant.vue b/src/components/RightSidebar/Participants/ParticipantsList/Participant/Participant.vue index e1b5024c7..c44ca0371 100644 --- a/src/components/RightSidebar/Participants/ParticipantsList/Participant/Participant.vue +++ b/src/components/RightSidebar/Participants/ParticipantsList/Participant/Participant.vue @@ -89,7 +89,7 @@ </div> <!-- Participant's actions menu --> - <Actions v-if="canBeModerated && !isSearched" + <NcActions v-if="canBeModerated && !isSearched" :container="container" :aria-label="participantSettingsAriaLabel" :force-menu="true" @@ -104,77 +104,77 @@ <DotsHorizontal v-else :size="20" /> </template> - <ActionText v-if="attendeePin" + <NcActionText v-if="attendeePin" :title="t('spreed', 'Dial-in PIN')" icon="icon-password"> {{ attendeePin }} - </ActionText> - <ActionButton v-if="canBeDemoted" + </NcActionText> + <NcActionButton v-if="canBeDemoted" :close-after-click="true" @click="demoteFromModerator"> <template #icon> <Account :size="20" /> {{ t('spreed', 'Demote from moderator') }} </template> - </ActionButton> - <ActionButton v-if="canBePromoted" + </NcActionButton> + <NcActionButton v-if="canBePromoted" :close-after-click="true" @click="promoteToModerator"> <template #icon> <Crown :size="20" /> </template> {{ t('spreed', 'Promote to moderator') }} - </ActionButton> + </NcActionButton> <!-- Permissions --> <template v-if="showPermissionsOptions"> - <ActionSeparator /> - <ActionButton v-if="hasNonDefaultPermissions" + <NcActionSeparator /> + <NcActionButton v-if="hasNonDefaultPermissions" :close-after-click="true" @click="applyDefaultPermissions"> <template #icon> <LockReset :size="20" /> </template> {{ t('spreed', 'Reset custom permissions') }} - </ActionButton> - <ActionButton :close-after-click="true" + </NcActionButton> + <NcActionButton :close-after-click="true" @click="grantAllPermissions"> <template #icon> <LockOpenVariant :size="20" /> </template> {{ t('spreed', 'Grant all permissions') }} - </ActionButton> - <ActionButton :close-after-click="true" + </NcActionButton> + <NcActionButton :close-after-click="true" @click="removeAllPermissions"> <template #icon> <Lock :size="20" /> </template> {{ t('spreed', 'Remove all permissions') }} - </ActionButton> - <ActionButton :close-after-click="true" + </NcActionButton> + <NcActionButton :close-after-click="true" @click="showPermissionsEditor"> <template #icon> <Pencil :size="20" /> </template> {{ t('spreed', 'Edit permissions') }} - </ActionButton> + </NcActionButton> </template> - <ActionButton v-if="isEmailActor" + <NcActionButton v-if="isEmailActor" icon="icon-mail" :close-after-click="true" @click="resendInvitation"> {{ t('spreed', 'Resend invitation') }} - </ActionButton> - <ActionButton v-if="canSendCallNotification" + </NcActionButton> + <NcActionButton v-if="canSendCallNotification" :close-after-click="true" @click="sendCallNotification"> <template #icon> <Bell :size="20" /> </template> {{ t('spreed', 'Send call notification') }} - </ActionButton> - <ActionSeparator v-if="attendeePin || canBePromoted || canBeDemoted || isEmailActor" /> - <ActionButton icon="icon-delete" + </NcActionButton> + <NcActionSeparator v-if="attendeePin || canBePromoted || canBeDemoted || isEmailActor" /> + <NcActionButton icon="icon-delete" :close-after-click="true" @click="removeParticipant"> <template v-if="isGroup"> @@ -183,8 +183,8 @@ <template v-else> {{ t('spreed', 'Remove participant') }} </template> - </ActionButton> - </Actions> + </NcActionButton> + </NcActions> <ParticipantPermissionsEditor v-if="permissionsEditor" :actor-id="participant.actorId" :close-after-click="true" @@ -199,11 +199,11 @@ <script> import { showError, showSuccess } from '@nextcloud/dialogs' -import ActionButton from '@nextcloud/vue/dist/Components/ActionButton.js' -import ActionText from '@nextcloud/vue/dist/Components/ActionText.js' -import ActionSeparator from '@nextcloud/vue/dist/Components/ActionSeparator.js' +import NcActionButton from '@nextcloud/vue/dist/Components/NcActionButton.js' +import NcActionText from '@nextcloud/vue/dist/Components/NcActionText.js' +import NcActionSeparator from '@nextcloud/vue/dist/Components/NcActionSeparator.js' import Tooltip from '@nextcloud/vue/dist/Directives/Tooltip.js' -import Actions from '@nextcloud/vue/dist/Components/Actions.js' +import NcActions from '@nextcloud/vue/dist/Components/NcActions.js' import { CONVERSATION, PARTICIPANT, ATTENDEE } from '../../../../../constants.js' import UserStatus from '../../../../../mixins/userStatus.js' import readableNumber from '../../../../../mixins/readableNumber.js' @@ -230,10 +230,10 @@ export default { name: 'Participant', components: { - Actions, - ActionButton, - ActionText, - ActionSeparator, + NcActions, + NcActionButton, + NcActionText, + NcActionSeparator, AvatarWrapper, ParticipantPermissionsEditor, diff --git a/src/components/RightSidebar/Participants/ParticipantsSearchResults/ParticipantsSearchResults.vue b/src/components/RightSidebar/Participants/ParticipantsSearchResults/ParticipantsSearchResults.vue index ba94c2fed..392dcb4be 100644 --- a/src/components/RightSidebar/Participants/ParticipantsSearchResults/ParticipantsSearchResults.vue +++ b/src/components/RightSidebar/Participants/ParticipantsSearchResults/ParticipantsSearchResults.vue @@ -23,34 +23,34 @@ <div class="participants-search-results" :class="{'scrollable': scrollable }"> <template v-if="addableUsers.length !== 0"> - <AppNavigationCaption :title="t('spreed', 'Add users')" /> + <NcAppNavigationCaption :title="t('spreed', 'Add users')" /> <ParticipantsList :items="addableUsers" @click="handleClickParticipant" /> </template> <template v-if="addableGroups.length !== 0"> - <AppNavigationCaption :title="t('spreed', 'Add groups')" /> + <NcAppNavigationCaption :title="t('spreed', 'Add groups')" /> <ParticipantsList :items="addableGroups" @click="handleClickParticipant" /> </template> <template v-if="addableEmails.length !== 0"> - <AppNavigationCaption :title="t('spreed', 'Add emails')" /> + <NcAppNavigationCaption :title="t('spreed', 'Add emails')" /> <ParticipantsList :items="addableEmails" @click="handleClickParticipant" /> </template> <template v-if="addableCircles.length !== 0"> - <AppNavigationCaption :title="t('spreed', 'Add circles')" /> + <NcAppNavigationCaption :title="t('spreed', 'Add circles')" /> <ParticipantsList :items="addableCircles" @click="handleClickParticipant" /> </template> <!-- integrations --> <template v-if="integrations.length !== 0"> - <AppNavigationCaption :title="t('spreed', 'Integrations')" /> + <NcAppNavigationCaption :title="t('spreed', 'Integrations')" /> <ul> - <ButtonVue v-for="(integration, index) in integrations" + <NcButton v-for="(integration, index) in integrations" :key="'integration' + index" type="tertiary-no-background" @click="runIntegration(integration)"> @@ -59,16 +59,16 @@ <AccountPlus :size="20" /> </template> {{ integration.label }} - </ButtonVue> + </NcButton> </ul> </template> <template v-if="addableRemotes.length !== 0"> - <AppNavigationCaption :title="t('spreed', 'Add federated users')" /> + <NcAppNavigationCaption :title="t('spreed', 'Add federated users')" /> <ParticipantsList :items="addableRemotes" @click="handleClickParticipant" /> </template> - <AppNavigationCaption v-if="sourcesWithoutResults" + <NcAppNavigationCaption v-if="sourcesWithoutResults" :title="sourcesWithoutResultsList" /> <Hint v-if="contactsLoading" :hint="t('spreed', 'Searching …')" /> <Hint v-if="!contactsLoading && sourcesWithoutResults" :hint="t('spreed', 'No search results')" /> @@ -98,20 +98,20 @@ <script> import ParticipantsList from '../ParticipantsList/ParticipantsList.vue' -import AppNavigationCaption from '@nextcloud/vue/dist/Components/AppNavigationCaption.js' +import NcAppNavigationCaption from '@nextcloud/vue/dist/Components/NcAppNavigationCaption.js' import Hint from '../../../Hint.vue' import AccountPlus from 'vue-material-design-icons/AccountPlus.vue' -import ButtonVue from '@nextcloud/vue/dist/Components/ButtonVue.js' +import NcButton from '@nextcloud/vue/dist/Components/NcButton.js' export default { name: 'ParticipantsSearchResults', components: { ParticipantsList, - AppNavigationCaption, + NcAppNavigationCaption, Hint, AccountPlus, - ButtonVue, + NcButton, }, props: { diff --git a/src/components/RightSidebar/Participants/ParticipantsTab.vue b/src/components/RightSidebar/Participants/ParticipantsTab.vue index a8f56b0fa..d45c32462 100644 --- a/src/components/RightSidebar/Participants/ParticipantsTab.vue +++ b/src/components/RightSidebar/Participants/ParticipantsTab.vue @@ -27,7 +27,7 @@ :is-searching="isSearching" @input="handleInput" @abort-search="abortSearch" /> - <AppNavigationCaption v-if="isSearching && canAdd" + <NcAppNavigationCaption v-if="isSearching && canAdd" :title="t('spreed', 'Participants')" /> <CurrentParticipants :search-text="searchText" :participants-initialised="participantsInitialised" /> @@ -50,14 +50,14 @@ import { addParticipant } from '../../../services/participantsService.js' import { loadState } from '@nextcloud/initial-state' import CancelableRequest from '../../../utils/cancelableRequest.js' import { showError } from '@nextcloud/dialogs' -import AppNavigationCaption from '@nextcloud/vue/dist/Components/AppNavigationCaption.js' +import NcAppNavigationCaption from '@nextcloud/vue/dist/Components/NcAppNavigationCaption.js' import ParticipantsSearchResults from './ParticipantsSearchResults/ParticipantsSearchResults.vue' import getParticipants from '../../../mixins/getParticipants.js' export default { name: 'ParticipantsTab', components: { - AppNavigationCaption, + NcAppNavigationCaption, CurrentParticipants, SearchBox, ParticipantsSearchResults, diff --git a/src/components/RightSidebar/RightSidebar.vue b/src/components/RightSidebar/RightSidebar.vue index 798fe3c3e..250c3823d 100644 --- a/src/components/RightSidebar/RightSidebar.vue +++ b/src/components/RightSidebar/RightSidebar.vue @@ -21,7 +21,7 @@ --> <template> - <AppSidebar v-show="opened" + <NcAppSidebar v-show="opened" id="app-sidebar" :title="title" :title-tooltip="title" @@ -39,7 +39,7 @@ <template slot="description"> <LobbyStatus v-if="canFullModerate && hasLobbyEnabled" :token="token" /> </template> - <AppSidebarTab v-if="showChatInSidebar" + <NcAppSidebarTab v-if="showChatInSidebar" id="chat" :order="1" :name="t('spreed', 'Chat')"> @@ -47,8 +47,8 @@ <Message :size="20" /> </template> <ChatView :is-visible="opened" /> - </AppSidebarTab> - <AppSidebarTab v-if="getUserId && !isOneToOne" + </NcAppSidebarTab> + <NcAppSidebarTab v-if="getUserId && !isOneToOne" id="participants" ref="participantsTab" :order="2" @@ -59,8 +59,8 @@ <ParticipantsTab :is-active="activeTab === 'participants'" :can-search="canSearchParticipants" :can-add="canAddParticipants" /> - </AppSidebarTab> - <AppSidebarTab v-if="!getUserId || showSIPSettings" + </NcAppSidebarTab> + <NcAppSidebarTab v-if="!getUserId || showSIPSettings" id="details-tab" :order="3" :name="t('spreed', 'Details')"> @@ -73,16 +73,16 @@ :attendee-pin="conversation.attendeePin" /> <div v-if="!getUserId" id="app-settings"> <div id="app-settings-header"> - <ButtonVue type="tertiary" @click="showSettings"> + <NcButton type="tertiary" @click="showSettings"> <template #icon> <CogIcon :size="20" /> </template> {{ t('spreed', 'Settings') }} - </ButtonVue> + </NcButton> </div> </div> - </AppSidebarTab> - <AppSidebarTab v-if="getUserId" + </NcAppSidebarTab> + <NcAppSidebarTab v-if="getUserId" id="shared-items" ref="sharedItemsTab" :order="4" @@ -91,14 +91,14 @@ <FolderMultipleImage :size="20" /> </template> <SharedItemsTab :active="activeTab === 'shared-items'" /> - </AppSidebarTab> - </AppSidebar> + </NcAppSidebarTab> + </NcAppSidebar> </template> <script> import { emit } from '@nextcloud/event-bus' -import AppSidebar from '@nextcloud/vue/dist/Components/AppSidebar.js' -import AppSidebarTab from '@nextcloud/vue/dist/Components/AppSidebarTab.js' +import NcAppSidebar from '@nextcloud/vue/dist/Components/NcAppSidebar.js' +import NcAppSidebarTab from '@nextcloud/vue/dist/Components/NcAppSidebarTab.js' import SharedItemsTab from './SharedItems/SharedItemsTab.vue' import ChatView from '../ChatView.vue' import BrowserStorage from '../../services/BrowserStorage.js' @@ -108,7 +108,7 @@ import isInLobby from '../../mixins/isInLobby.js' import SetGuestUsername from '../SetGuestUsername.vue' import SipSettings from './SipSettings.vue' import LobbyStatus from './LobbyStatus.vue' -import ButtonVue from '@nextcloud/vue/dist/Components/ButtonVue.js' +import NcButton from '@nextcloud/vue/dist/Components/NcButton.js' import AccountMultiple from 'vue-material-design-icons/AccountMultiple.vue' import CogIcon from 'vue-material-design-icons/Cog.vue' import FolderMultipleImage from 'vue-material-design-icons/FolderMultipleImage.vue' @@ -118,15 +118,15 @@ import Message from 'vue-material-design-icons/Message.vue' export default { name: 'RightSidebar', components: { - AppSidebar, - AppSidebarTab, + NcAppSidebar, + NcAppSidebarTab, SharedItemsTab, ChatView, ParticipantsTab, SetGuestUsername, SipSettings, LobbyStatus, - ButtonVue, + NcButton, AccountMultiple, CogIcon, FolderMultipleImage, @@ -205,7 +205,7 @@ export default { }, /** - * The conversation title value passed into the AppSidebar component. + * The conversation title value passed into the NcAppSidebar component. * * @return {string} The conversation's title. */ diff --git a/src/components/RightSidebar/SharedItems/SharedItemsBrowser/SharedItemsBrowser.vue b/src/components/RightSidebar/SharedItems/SharedItemsBrowser/SharedItemsBrowser.vue index 51dc47f6c..de6d31776 100644 --- a/src/components/RightSidebar/SharedItems/SharedItemsBrowser/SharedItemsBrowser.vue +++ b/src/components/RightSidebar/SharedItems/SharedItemsBrowser/SharedItemsBrowser.vue @@ -20,17 +20,17 @@ --> <template> - <Modal size="large" :container="container" v-on="$listeners"> + <NcModal size="large" :container="container" v-on="$listeners"> <div class="shared-items-browser"> <div class="shared-items-browser__navigation"> <template v-for="type in sharedItemsOrder"> - <ButtonVue v-if="sharedItems[type]" + <NcButton v-if="sharedItems[type]" :key="type" :class="{'active' : activeTab === type}" type="tertiary" @click="handleTabClick(type)"> {{ getTitle(type) }} - </ButtonVue> + </NcButton> </template> </div> <div ref="scroller" class="shared-items-browser__content" @scroll="debounceHandleScroll"> @@ -38,12 +38,12 @@ :items="sharedItems[activeTab]" /> </div> </div> - </Modal> + </NcModal> </template> <script> -import Modal from '@nextcloud/vue/dist/Components/Modal.js' -import ButtonVue from '@nextcloud/vue/dist/Components/ButtonVue.js' +import NcModal from '@nextcloud/vue/dist/Components/NcModal.js' +import NcButton from '@nextcloud/vue/dist/Components/NcButton.js' import SharedItems from '../SharedItems.vue' import sharedItems from '../../../../mixins/sharedItems.js' import debounce from 'debounce' @@ -52,8 +52,8 @@ export default { name: 'SharedItemsBrowser', components: { - ButtonVue, - Modal, + NcButton, + NcModal, SharedItems, }, diff --git a/src/components/RightSidebar/SharedItems/SharedItemsTab.vue b/src/components/RightSidebar/SharedItems/SharedItemsTab.vue index e004467b1..967f122d3 100644 --- a/src/components/RightSidebar/SharedItems/SharedItemsTab.vue +++ b/src/components/RightSidebar/SharedItems/SharedItemsTab.vue @@ -23,11 +23,11 @@ <div v-if="!loading && active"> <template v-for="type in sharedItemsOrder"> <div v-if="sharedItems[type]" :key="type"> - <AppNavigationCaption :title="getTitle(type)" /> + <NcAppNavigationCaption :title="getTitle(type)" /> <SharedItems :type="type" :limit="limit(type)" :items="sharedItems[type]" /> - <ButtonVue v-if="hasMore(sharedItems[type])" + <NcButton v-if="hasMore(sharedItems[type])" type="tertiary-no-background" class="more" :wide="true" @@ -36,10 +36,10 @@ <DotsHorizontal :size="20" /> </template> {{ getButtonTitle(type) }} - </ButtonVue> + </NcButton> </div> </template> - <AppNavigationCaption :title="t('spreed', 'Projects')" /> + <NcAppNavigationCaption :title="t('spreed', 'Projects')" /> <CollectionList v-if="getUserId && token" :id="token" type="room" @@ -56,10 +56,10 @@ import { CollectionList } from 'nextcloud-vue-collections' import SharedItems from './SharedItems.vue' import { SHARED_ITEM } from '../../../constants.js' -import AppNavigationCaption from '@nextcloud/vue/dist/Components/AppNavigationCaption.js' +import NcAppNavigationCaption from '@nextcloud/vue/dist/Components/NcAppNavigationCaption.js' import SharedItemsBrowser from './SharedItemsBrowser/SharedItemsBrowser.vue' import DotsHorizontal from 'vue-material-design-icons/DotsHorizontal.vue' -import ButtonVue from '@nextcloud/vue/dist/Components/ButtonVue.js' +import NcButton from '@nextcloud/vue/dist/Components/NcButton.js' import sharedItems from '../../../mixins/sharedItems.js' export default { @@ -69,10 +69,10 @@ export default { components: { SharedItems, CollectionList, - AppNavigationCaption, + NcAppNavigationCaption, SharedItemsBrowser, DotsHorizontal, - ButtonVue, + NcButton, }, mixins: [sharedItems], diff --git a/src/components/SetGuestUsername.vue b/src/components/SetGuestUsername.vue index 763542ba0..b02324b9e 100644 --- a/src/components/SetGuestUsername.vue +++ b/src/components/SetGuestUsername.vue @@ -25,12 +25,12 @@ @submit.prevent="handleChooseUserName"> <!-- eslint-disable-next-line vue/no-v-html --> <h3 v-html="displayNameLabel" /> - <ButtonVue @click.prevent="handleEditUsername"> + <NcButton @click.prevent="handleEditUsername"> {{ t('spreed', 'Edit') }} <template #icon> <Pencil :size="20" /> </template> - </ButtonVue> + </NcButton> <div v-if="isEditingUsername" class="username-form__wrapper"> <input ref="usernameInput" @@ -40,21 +40,21 @@ type="text" @keydown.enter="handleChooseUserName" @keydown.esc="isEditingUsername = !isEditingUsername"> - <ButtonVue class="username-form__button" + <NcButton class="username-form__button" native-type="submit" :aria-label="t('spreed', 'Save name')" type="tertiary"> <template #icon> <ArrowRight :size="20" /> </template> - </ButtonVue> + </NcButton> </div> </form> </template> <script> import { setGuestUserName } from '../services/participantsService.js' -import ButtonVue from '@nextcloud/vue/dist/Components/ButtonVue.js' +import NcButton from '@nextcloud/vue/dist/Components/NcButton.js' import Pencil from 'vue-material-design-icons/Pencil.vue' import ArrowRight from 'vue-material-design-icons/ArrowRight.vue' @@ -62,7 +62,7 @@ export default { name: 'SetGuestUsername', components: { - ButtonVue, + NcButton, Pencil, ArrowRight, }, diff --git a/src/components/SettingsDialog/SettingsDialog.vue b/src/components/SettingsDialog/SettingsDialog.vue index e2b11b962..d2e905505 100644 --- a/src/components/SettingsDialog/SettingsDialog.vue +++ b/src/components/SettingsDialog/SettingsDialog.vue @@ -20,16 +20,16 @@ --> <template> - <AppSettingsDialog :open.sync="showSettings" + <NcAppSettingsDialog :open.sync="showSettings" :show-navigation="true" first-selected-section="keyboard shortcuts" :container="container"> - <AppSettingsSection id="devices" + <NcAppSettingsSection id="devices" :title="t('spreed', 'Choose devices')" class="app-settings-section"> <MediaDevicesPreview /> - </AppSettingsSection> - <AppSettingsSection v-if="!isGuest" + </NcAppSettingsSection> + <NcAppSettingsSection v-if="!isGuest" id="attachments" :title="t('spreed', 'Attachments folder')" class="app-settings-section"> @@ -41,31 +41,31 @@ :value="attachmentFolder" :disabled="attachmentFolderLoading" @click="selectAttachmentFolder"> - </AppSettingsSection> - <AppSettingsSection v-if="!isGuest" + </NcAppSettingsSection> + <NcAppSettingsSection v-if="!isGuest" id="privacy" :title="t('spreed', 'Privacy')" class="app-settings-section"> - <CheckboxRadioSwitch id="read_status_privacy" + <NcCheckboxRadioSwitch id="read_status_privacy" :checked="readStatusPrivacyIsPublic" :disabled="privacyLoading" type="switch" class="checkbox" @update:checked="toggleReadStatusPrivacy"> {{ t('spreed', 'Share my read-status and show the read-status of others') }} - </CheckboxRadioSwitch> - </AppSettingsSection> - <AppSettingsSection id="sounds" + </NcCheckboxRadioSwitch> + </NcAppSettingsSection> + <NcAppSettingsSection id="sounds" :title="t('spreed', 'Sounds')" class="app-settings-section"> - <CheckboxRadioSwitch id="play_sounds" + <NcCheckboxRadioSwitch id="play_sounds" :checked="playSounds" :disabled="playSoundsLoading" type="switch" class="checkbox" @update:checked="togglePlaySounds"> {{ t('spreed', 'Play sounds when participants join or leave a call') }} - </CheckboxRadioSwitch> + </NcCheckboxRadioSwitch> <em>{{ t('spreed', 'Sounds can currently not be played in Safari browser and iPad and iPhone devices due to technical restrictions by the manufacturer.') }}</em> <a :href="settingsUrl" @@ -74,8 +74,8 @@ class="external"> {{ t('spreed', 'Sounds for chat and call notifications can be adjusted in the personal settings.') }} ↗ </a> - </AppSettingsSection> - <AppSettingsSection id="shortcuts" + </NcAppSettingsSection> + <NcAppSettingsSection id="shortcuts" :title="t('spreed', 'Keyboard shortcuts')"> <em>{{ t('spreed', 'Speed up your Talk experience with these quick shortcuts.') }}</em> @@ -133,8 +133,8 @@ </dd> </div> </dl> - </AppSettingsSection> - </AppSettingsDialog> + </NcAppSettingsSection> + </NcAppSettingsDialog> </template> <script> @@ -143,18 +143,18 @@ import { getFilePickerBuilder, showError, showSuccess } from '@nextcloud/dialogs import { PRIVACY } from '../../constants.js' import { subscribe, unsubscribe } from '@nextcloud/event-bus' import MediaDevicesPreview from '../MediaDevicesPreview.vue' -import AppSettingsDialog from '@nextcloud/vue/dist/Components/AppSettingsDialog.js' -import AppSettingsSection from '@nextcloud/vue/dist/Components/AppSettingsSection.js' -import CheckboxRadioSwitch from '@nextcloud/vue/dist/Components/CheckboxRadioSwitch.js' +import NcAppSettingsDialog from '@nextcloud/vue/dist/Components/NcAppSettingsDialog.js' +import NcAppSettingsSection from '@nextcloud/vue/dist/Components/NcAppSettingsSection.js' +import NcCheckboxRadioSwitch from '@nextcloud/vue/dist/Components/NcCheckboxRadioSwitch.js' export default { name: 'SettingsDialog', components: { MediaDevicesPreview, - AppSettingsDialog, - AppSettingsSection, - CheckboxRadioSwitch, + NcAppSettingsDialog, + NcAppSettingsSection, + NcCheckboxRadioSwitch, }, data() { diff --git a/src/components/TopBar/CallButton.vue b/src/components/TopBar/CallButton.vue index 2945bff1f..03f33f4e5 100644 --- a/src/components/TopBar/CallButton.vue +++ b/src/components/TopBar/CallButton.vue @@ -21,7 +21,7 @@ <template> <div> - <ButtonVue v-if="showStartCallButton" + <NcButton v-if="showStartCallButton" id="call_button" v-tooltip="{ placement: 'auto', @@ -37,8 +37,8 @@ <VideoIcon :size="20" /> </template> {{ startCallLabel }} - </ButtonVue> - <ButtonVue v-else-if="showLeaveCallButton && !canEndForAll" + </NcButton> + <NcButton v-else-if="showLeaveCallButton && !canEndForAll" id="call_button" type="error" :disabled="loading" @@ -47,27 +47,27 @@ <VideoOff :size="20" /> </template> {{ leaveCallLabel }} - </ButtonVue> - <Actions v-else-if="showLeaveCallButton && canEndForAll" + </NcButton> + <NcActions v-else-if="showLeaveCallButton && canEndForAll" :disabled="loading"> <template #icon> <VideoOff :size="16" /> <span class="label">{{ leaveCallLabel }}</span> <MenuDown :size="16" /> </template> - <ActionButton @click="leaveCall(false)"> + <NcActionButton @click="leaveCall(false)"> <template #icon> <VideoOff :size="20" /> </template> {{ leaveCallLabel }} - </ActionButton> - <ActionButton @click="leaveCall(true)"> + </NcActionButton> + <NcActionButton @click="leaveCall(true)"> <template #icon> <VideoOff :size="20" /> </template> {{ t('spreed', 'End meeting for all') }} - </ActionButton> - </Actions> + </NcActionButton> + </NcActions> </div> </template> @@ -81,12 +81,12 @@ import Tooltip from '@nextcloud/vue/dist/Directives/Tooltip.js' import { emit } from '@nextcloud/event-bus' import { loadState } from '@nextcloud/initial-state' import BrowserStorage from '../../services/BrowserStorage.js' -import Actions from '@nextcloud/vue/dist/Components/Actions.js' -import ActionButton from '@nextcloud/vue/dist/Components/ActionButton.js' +import NcActions from '@nextcloud/vue/dist/Components/NcActions.js' +import NcActionButton from '@nextcloud/vue/dist/Components/NcActionButton.js' import VideoIcon from 'vue-material-design-icons/Video.vue' import VideoOff from 'vue-material-design-icons/VideoOff.vue' import MenuDown from 'vue-material-design-icons/MenuDown.vue' -import ButtonVue from '@nextcloud/vue/dist/Components/ButtonVue.js' +import NcButton from '@nextcloud/vue/dist/Components/NcButton.js' export default { name: 'CallButton', @@ -96,12 +96,12 @@ export default { }, components: { - Actions, - ActionButton, + NcActions, + NcActionButton, VideoIcon, VideoOff, MenuDown, - ButtonVue, + NcButton, }, mixins: [ diff --git a/src/components/TopBar/TopBar.vue b/src/components/TopBar/TopBar.vue index 38e45ef25..28987937c 100644 --- a/src/components/TopBar/TopBar.vue +++ b/src/components/TopBar/TopBar.vue @@ -69,7 +69,7 @@ class="top-bar__separator" /> <!-- sidebar toggle --> - <Actions v-if="!isSidebar" + <NcActions v-if="!isSidebar" v-shortkey.once="['f']" class="top-bar__button" :aria-label="t('spreed', 'Conversation actions')" @@ -79,86 +79,86 @@ :class="{'top-bar__button__force-white': isInCall}"> <Cog :size="20" /> </span> - <ActionButton :icon="iconFullscreen" + <NcActionButton :icon="iconFullscreen" :aria-label="t('spreed', 'Toggle fullscreen')" :close-after-click="true" @click="toggleFullscreen"> {{ labelFullscreen }} - </ActionButton> - <ActionSeparator v-if="showModerationOptions" /> - <ActionLink v-if="isFileConversation" + </NcActionButton> + <NcActionSeparator v-if="showModerationOptions" /> + <NcActionLink v-if="isFileConversation" :href="linkToFile"> <File slot="icon" :size="20" /> {{ t('spreed', 'Go to file') }} - </ActionLink> + </NcActionLink> <template v-if="showModerationOptions"> - <ActionButton :close-after-click="true" + <NcActionButton :close-after-click="true" icon="icon-rename" @click="handleRenameConversation"> {{ t('spreed', 'Rename conversation') }} - </ActionButton> + </NcActionButton> </template> - <ActionButton v-if="!isOneToOneConversation" + <NcActionButton v-if="!isOneToOneConversation" icon="icon-clippy" :close-after-click="true" @click="handleCopyLink"> {{ t('spreed', 'Copy link') }} - </ActionButton> + </NcActionButton> <template v-if="showModerationOptions && canFullModerate && isInCall"> - <ActionSeparator /> - <ActionButton :close-after-click="true" + <NcActionSeparator /> + <NcActionButton :close-after-click="true" @click="forceMuteOthers"> <MicrophoneOff slot="icon" :size="20" /> {{ t('spreed', 'Mute others') }} - </ActionButton> + </NcActionButton> </template> - <ActionSeparator v-if="showModerationOptions" /> - <ActionButton :close-after-click="true" + <NcActionSeparator v-if="showModerationOptions" /> + <NcActionButton :close-after-click="true" @click="openConversationSettings"> <template #icon> <Cog :size="20" /> </template> {{ t('spreed', 'Conversation settings') }} - </ActionButton> - </Actions> - <Actions v-if="showOpenSidebarButton" + </NcActionButton> + </NcActions> + <NcActions v-if="showOpenSidebarButton" class="top-bar__button" close-after-click="true" :container="container"> - <ActionButton v-if="isInCall" + <NcActionButton v-if="isInCall" key="openSideBarButtonMessageText" @click="openSidebar"> <MessageText slot="icon" :size="20" fill-color="#ffffff" /> - </ActionButton> - <ActionButton v-else + </NcActionButton> + <NcActionButton v-else key="openSideBarButtonMenuPeople" @click="openSidebar"> <MenuPeople slot="icon" :size="20" /> - </ActionButton> - </Actions> + </NcActionButton> + </NcActions> </div> - <CounterBubble v-if="!isSidebar && showOpenSidebarButton && isInCall && unreadMessagesCounter > 0" + <NcCounterBubble v-if="!isSidebar && showOpenSidebarButton && isInCall && unreadMessagesCounter > 0" class="unread-messages-counter" :highlighted="hasUnreadMentions"> {{ unreadMessagesCounter }} - </CounterBubble> + </NcCounterBubble> </div> </template> <script> import { showError, showSuccess, showMessage } from '@nextcloud/dialogs' -import ActionButton from '@nextcloud/vue/dist/Components/ActionButton.js' -import Actions from '@nextcloud/vue/dist/Components/Actions.js' -import CounterBubble from '@nextcloud/vue/dist/Components/CounterBubble.js' +import NcActionButton from '@nextcloud/vue/dist/Components/NcActionButton.js' +import NcActions from '@nextcloud/vue/dist/Components/NcActions.js' +import NcCounterBubble from '@nextcloud/vue/dist/Components/NcCounterBubble.js' import CallButton from './CallButton.vue' import BrowserStorage from '../../services/BrowserStorage.js' -import ActionLink from '@nextcloud/vue/dist/Components/ActionLink.js' -import ActionSeparator from '@nextcloud/vue/dist/Components/ActionSeparator.js' +import NcActionLink from '@nextcloud/vue/dist/Components/NcActionLink.js' +import NcActionSeparator from '@nextcloud/vue/dist/Components/NcActionSeparator.js' import File from 'vue-material-design-icons/File.vue' import MenuPeople from '../missingMaterialDesignIcons/MenuPeople.vue' import MessageText from 'vue-material-design-icons/MessageText.vue' @@ -183,12 +183,12 @@ export default { }, components: { - ActionButton, - Actions, - ActionLink, - CounterBubble, + NcActionButton, + NcActions, + NcActionLink, + NcCounterBubble, CallButton, - ActionSeparator, + NcActionSeparator, File, MenuPeople, MessageText, diff --git a/src/components/UploadEditor.vue b/src/components/UploadEditor.vue index 6e0341c46..a17e6d9ac 100644 --- a/src/components/UploadEditor.vue +++ b/src/components/UploadEditor.vue @@ -20,7 +20,7 @@ --> <template> - <Modal v-if="showModal" + <NcModal v-if="showModal" :size="isVoiceMessage ? 'small' : 'normal'" class="upload-editor" :container="container" @@ -45,14 +45,14 @@ </template> <div :key="'addMore'" class="add-more"> - <ButtonVue :aria-label="addMoreAriaLabel" + <NcButton :aria-label="addMoreAriaLabel" type="primary" class="add-more__button" @click="clickImportInput"> <template #icon> <Plus :size="48" /> </template> - </ButtonVue> + </NcButton> </div> </transition-group> </template> @@ -61,34 +61,34 @@ :local-url="voiceMessageLocalURL" /> </template> <div class="upload-editor__actions"> - <ButtonVue type="tertiary" @click="handleDismiss"> + <NcButton type="tertiary" @click="handleDismiss"> {{ t('spreed', 'Dismiss') }} - </ButtonVue> - <ButtonVue ref="submitButton" type="primary" @click="handleUpload"> + </NcButton> + <NcButton ref="submitButton" type="primary" @click="handleUpload"> {{ t('spreed', 'Send') }} - </ButtonVue> + </NcButton> </div> </div> - </Modal> + </NcModal> </template> <script> -import Modal from '@nextcloud/vue/dist/Components/Modal.js' +import NcModal from '@nextcloud/vue/dist/Components/NcModal.js' import FilePreview from './MessagesList/MessagesGroup/Message/MessagePart/FilePreview.vue' import Plus from 'vue-material-design-icons/Plus.vue' import AudioPlayer from './MessagesList/MessagesGroup/Message/MessagePart/AudioPlayer.vue' -import ButtonVue from '@nextcloud/vue/dist/Components/ButtonVue.js' +import NcButton from '@nextcloud/vue/dist/Components/NcButton.js' export default { name: 'UploadEditor', components: { - Modal, + NcModal, FilePreview, Plus, AudioPlayer, - ButtonVue, + NcButton, }, computed: { @@ -170,7 +170,7 @@ export default { this.$store.dispatch('uploadFiles', this.currentUploadId) }, /** - * Clicks the hidden file input when clicking the correspondent ActionButton, + * Clicks the hidden file input when clicking the correspondent NcActionButton, * thus opening the file-picker */ clickImportInput() { |