fix(NcListItem): force three-dot-menu (+ minor follow-ups)

src/components/AdminSettings/RecordingServers.vue

@@ -10,14 +10,12 @@
 			{{ t('spreed', 'Recording backend') }}
 		</h2>
 
-		<NcNoteCard v-if="!showForm" type="warning">
-			{{ t('spreed', 'Recording backend configuration is only possible with a high-performance backend.') }}
-		</NcNoteCard>
+		<NcNoteCard v-if="!showForm"
+			type="warning"
+			:text="t('spreed', 'Recording backend configuration is only possible with a high-performance backend.')" />
 
 		<template v-else>
-			<NcNoteCard v-if="showUploadLimitWarning" type="warning">
-				{{ uploadLimitWarning }}
-			</NcNoteCard>
+			<NcNoteCard v-if="showUploadLimitWarning" type="warning" :text="uploadLimitWarning" />
 
 			<TransitionWrapper v-if="servers.length"
 				name="fade"
@@ -48,7 +46,7 @@
 			<NcPasswordField class="form__textfield additional-top-margin"
 				:value="secret"
 				name="recording_secret"
-				autocomplete="new-password"
+				as-text
 				:disabled="loading"
 				:placeholder="t('spreed', 'Shared secret')"
 				:label="t('spreed', 'Shared secret')"

src/components/AdminSettings/SIPBridge.vue

@@ -7,19 +7,19 @@
 	<div id="sip-bridge" class="sip-bridge section">
 		<h2>{{ t('spreed', 'SIP configuration') }}</h2>
 
-		<NcNoteCard v-if="!showForm" type="warning">
-			{{ t('spreed', 'SIP configuration is only possible with a high-performance backend.') }}
-		</NcNoteCard>
+		<NcNoteCard v-if="!showForm"
+			type="warning"
+			:text="t('spreed', 'SIP configuration is only possible with a high-performance backend.')" />
 
 		<template v-else>
 			<NcCheckboxRadioSwitch type="switch"
 				:checked.sync="dialOutEnabled"
 				:disabled="loading || !dialOutSupported">
 				{{ t('spreed', 'Enable SIP Dial-out option') }}
 			</NcCheckboxRadioSwitch>
-			<NcNoteCard v-if="!dialOutSupported" type="warning">
-				{{ t('spreed', 'Signaling server needs to be updated to supported SIP Dial-out feature.') }}
-			</NcNoteCard>
+			<NcNoteCard v-if="!dialOutSupported"
+				type="warning"
+				:text="t('spreed', 'Signaling server needs to be updated to supported SIP Dial-out feature.')" />
 
 			<NcSelect v-model="sipGroups"
 				input-id="sip-group-enabled"
@@ -49,7 +49,7 @@
 				:value.sync="sharedSecret"
 				class="form"
 				name="sip-shared-secret"
-				autocomplete="new-password"
+				as-text
 				:disabled="loading"
 				:placeholder="t('spreed', 'Shared secret')"
 				label-outside />

src/components/AdminSettings/SignalingServers.vue

@@ -13,9 +13,9 @@
 			{{ t('spreed', 'An external signaling server should optionally be used for larger installations. Leave empty to use the internal signaling server.') }}
 		</p>
 
-		<NcNoteCard v-if="!isCacheConfigured" type="warning">
-			{{ t('spreed', 'It is highly recommended to set up a distributed cache when using Nextcloud Talk together with a High Performance Back-end.') }}
-		</NcNoteCard>
+		<NcNoteCard v-if="!isCacheConfigured"
+			type="warning"
+			:text="t('spreed', 'It is highly recommended to set up a distributed cache when using Nextcloud Talk together with a High Performance Back-end.')" />
 
 		<TransitionWrapper v-if="servers.length"
 			name="fade"
@@ -57,7 +57,7 @@
 		<NcPasswordField class="form__textfield additional-top-margin"
 			:value="secret"
 			name="signaling_secret"
-			autocomplete="new-password"
+			as-text
 			:disabled="loading"
 			:placeholder="t('spreed', 'Shared secret')"
 			:label="t('spreed', 'Shared secret')"

src/components/AdminSettings/TurnServer.vue

@@ -31,7 +31,7 @@
 
 		<NcPasswordField ref="turn_secret"
 			name="turn_secret"
-			autocomplete="new-password"
+			as-text
 			placeholder="secret"
 			class="turn-server__textfield"
 			:value="secret"

src/components/AdminSettings/WebServerSetupChecks.vue

@@ -9,10 +9,7 @@
 			{{ t('spreed', 'Web server setup checks') }}
 		</h2>
 
-		<NcNoteCard v-if="apacheWarning"
-			:type="apacheWarningType">
-			{{ apacheWarning }}
-		</NcNoteCard>
+		<NcNoteCard v-if="apacheWarning" :type="apacheWarningType" :text="apacheWarning" />
 
 		<ul class="web-server-setup-checks">
 			<li class="virtual-background">

src/components/ConversationSettings/ConversationPermissionsSettings.vue

@@ -9,11 +9,8 @@
 			{{ t('spreed', 'Edit the default permissions for participants in this conversation. These settings do not affect moderators.') }}
 		</div>
 
-		<NcNoteCard type="warning">
-			<p>
-				{{ t('spreed', 'Every time permissions are modified in this section, custom permissions previously assigned to individual participants will be lost.') }}
-			</p>
-		</NcNoteCard>
+		<NcNoteCard type="warning"
+			:text="t('spreed', 'Every time permissions are modified in this section, custom permissions previously assigned to individual participants will be lost.')" />
 
 		<!-- All permissions -->
 		<div class="conversation-permissions-editor__setting">

src/components/ConversationSettings/DangerZone.vue

@@ -5,9 +5,7 @@
 
 <template>
 	<div>
-		<NcNoteCard type="warning">
-			<p>{{ t('spreed', 'Be careful, these actions cannot be undone.') }}</p>
-		</NcNoteCard>
+		<NcNoteCard type="warning" :text="t('spreed', 'Be careful, these actions cannot be undone.')" />
 		<div class="danger-zone">
 			<div v-if="canLeaveConversation" class="app-settings-subsection">
 				<h4 class="app-settings-section__subtitle">

src/components/ConversationSettings/LobbySettings.vue

@@ -6,9 +6,9 @@
 <template>
 	<div>
 		<div class="app-settings-subsection">
-			<NcNoteCard v-if="hasCall && !hasLobbyEnabled" type="warning">
-				{{ t('spreed', 'Enabling the lobby will remove non-moderators from the ongoing call.') }}
-			</NcNoteCard>
+			<NcNoteCard v-if="hasCall && !hasLobbyEnabled"
+				type="warning"
+				:text="t('spreed', 'Enabling the lobby will remove non-moderators from the ongoing call.')" />
 			<div>
 				<NcCheckboxRadioSwitch :checked="hasLobbyEnabled"
 					type="switch"

src/components/ConversationSettings/LockingSettings.vue

@@ -8,11 +8,9 @@
 		<h4 class="app-settings-section__subtitle">
 			{{ t('spreed', 'Lock conversation') }}
 		</h4>
-		<NcNoteCard v-if="hasCall" type="warning">
-			<p>
-				{{ t('spreed', 'This will also terminate the ongoing call.') }}
-			</p>
-		</NcNoteCard>
+		<NcNoteCard v-if="hasCall"
+			type="warning"
+			:text="t('spreed', 'This will also terminate the ongoing call.')" />
 		<div>
 			<NcCheckboxRadioSwitch :checked="isReadOnly"
 				type="switch"

src/components/LeftSidebar/ConversationsList/Conversation.vue

@@ -15,6 +15,7 @@
 		:bold="!!item.unreadMessages"
 		:counter-number="item.unreadMessages"
 		:counter-type="counterType"
+		force-menu
 		@click="onClick">
 		<template #icon>
 			<ConversationIcon :item="item" :hide-favorite="false" :hide-call="false" />

src/components/LeftSidebar/LeftSidebar.vue

@@ -122,9 +122,7 @@
 					<AccountMultiplePlus :size="20" />
 				</template>
 				<template #counter>
-					<NcCounterBubble type="highlighted">
-						{{ pendingInvitationsCount }}
-					</NcCounterBubble>
+					<NcCounterBubble type="highlighted" :count="pendingInvitationsCount" />
 				</template>
 			</NcAppNavigationItem>
 		</template>

src/components/NewMessage/NewMessage.vue

@@ -70,9 +70,9 @@
 						:edit-message="!!messageToEdit" />
 				</div>
 				<!-- mention editing hint -->
-				<NcNoteCard v-if="showMentionEditHint" type="warning">
-					<p>{{ t('spreed','Adding a mention will only notify users who did not read the message.') }}</p>
-				</NcNoteCard>
+				<NcNoteCard v-if="showMentionEditHint"
+					type="warning"
+					:text="t('spreed','Adding a mention will only notify users who did not read the message.')" />
 				<NcRichContenteditable ref="richContenteditable"
 					v-shortkey.once="$options.disableKeyboardShortcuts ? null : ['c']"
 					:value.sync="text"

src/components/RightSidebar/Participants/Participant.vue

@@ -14,6 +14,7 @@
 		:aria-label="participantAriaLabel"
 		:actions-aria-label="participantSettingsAriaLabel"
 		force-display-actions
+		force-menu
 		@click="handleClick"
 		@keydown.enter="handleClick">
 		<!-- Participant's avatar -->

src/components/RightSidebar/RightSidebar.vue

@@ -19,12 +19,7 @@
 		<!-- Use a custom icon when sidebar is used for chat messages during the call -->
 		<template v-if="isInCall" #toggle-icon>
 			<MessageText :size="20" />
-			<NcCounterBubble v-if="unreadMessagesCounter > 0"
-				class="chat-button-unread-messages-counter"
-				:class="{ 'chat-button-unread-messages-counter--highlighted': hasUnreadMentions }"
-				:type="hasUnreadMentions ? 'highlighted' : 'outlined'">
-				{{ unreadMessagesCounter }}
-			</NcCounterBubble>
+			<span v-if="unreadMessagesCounter > 0" class="chat-button-unread-marker" />
 		</template>
 		<template #description>
 			<LobbyStatus v-if="canFullModerate && hasLobbyEnabled" :token="token" />
@@ -118,7 +113,6 @@ import { t } from '@nextcloud/l10n'
 import NcAppSidebar from '@nextcloud/vue/dist/Components/NcAppSidebar.js'
 import NcAppSidebarTab from '@nextcloud/vue/dist/Components/NcAppSidebarTab.js'
 import NcButton from '@nextcloud/vue/dist/Components/NcButton.js'
-import NcCounterBubble from '@nextcloud/vue/dist/Components/NcCounterBubble.js'
 
 import BreakoutRoomsTab from './BreakoutRooms/BreakoutRoomsTab.vue'
 import LobbyStatus from './LobbyStatus.vue'
@@ -141,7 +135,6 @@ export default {
 		NcAppSidebar,
 		NcAppSidebarTab,
 		NcButton,
-		NcCounterBubble,
 		ParticipantsTab,
 		SetGuestUsername,
 		SharedItemsTab,
@@ -491,15 +484,15 @@ export default {
 	height: 100%;
 }
 
-.chat-button-unread-messages-counter {
+.chat-button-unread-marker {
 	position: absolute;
-	bottom: 2px;
-	right: 2px;
+	top: 4px;
+	right: 4px;
+	width: 8px;
+	height: 8px;
+	border-radius: 8px;
+	background-color: var(--color-primary-element);
 	pointer-events: none;
-
-	&.chat-button-unread-messages-counter--highlighted {
-		color: var(--color-primary-text);
-	}
 }
 </style>