Merge pull request #36044 from nextcloud/backport/35655/stable25

[stable25] Replace custom tooltips with native one in vue components and views
This commit is contained in:
Julia Kirschenheuter 2023-01-20 11:13:36 +01:00 committed by GitHub
commit 3ed44aa345
11 changed files with 39 additions and 95 deletions

View file

@ -25,12 +25,13 @@
<NcAvatar class="sharing-entry__avatar"
:is-no-user="share.type !== SHARE_TYPES.SHARE_TYPE_USER"
:user="share.shareWith"
:display-name="share.shareWithDisplayName"
:tooltip-message="share.type === SHARE_TYPES.SHARE_TYPE_USER ? share.shareWith : ''"
:title="share.type === SHARE_TYPES.SHARE_TYPE_USER ? share.shareWithDisplayName : ''"
:menu-position="'left'"
:url="share.shareWithAvatar" />
<component :is="share.shareWithLink ? 'a' : 'div'"
v-tooltip.auto="tooltip"
:title="tooltip"
:aria-label="tooltip"
:href="share.shareWithLink"
class="sharing-entry__desc">
<span>{{ title }}<span v-if="!isUnique" class="sharing-entry__desc-unique"> ({{ share.shareWithDisplayNameUnique }})</span></span>
@ -116,11 +117,6 @@
</NcActionCheckbox>
<NcActionTextEditable v-if="hasNote"
ref="note"
v-tooltip.auto="{
content: errors.note,
show: errors.note,
trigger: 'manual'
}"
:class="{ error: errors.note}"
:disabled="saving"
:value="share.newNote || share.note"
@ -147,7 +143,6 @@ import NcActionButton from '@nextcloud/vue/dist/Components/NcActionButton'
import NcActionCheckbox from '@nextcloud/vue/dist/Components/NcActionCheckbox'
import NcActionInput from '@nextcloud/vue/dist/Components/NcActionInput'
import NcActionTextEditable from '@nextcloud/vue/dist/Components/NcActionTextEditable'
import Tooltip from '@nextcloud/vue/dist/Directives/Tooltip'
import SharesMixin from '../mixins/SharesMixin.js'
@ -163,10 +158,6 @@ export default {
NcAvatar,
},
directives: {
Tooltip,
},
mixins: [SharesMixin],
data() {
@ -204,7 +195,6 @@ export default {
user: this.share.shareWithDisplayName,
owner: this.share.ownerDisplayName,
}
if (this.share.type === this.SHARE_TYPES.SHARE_TYPE_GROUP) {
return t('files_sharing', 'Shared with the group {user} by {owner}', data)
} else if (this.share.type === this.SHARE_TYPES.SHARE_TYPE_ROOM) {

View file

@ -26,9 +26,9 @@
:title="share.shareWithDisplayName">
<template #avatar>
<NcAvatar :user="share.shareWith"
:display-name="share.shareWithDisplayName"
class="sharing-entry__avatar"
tooltip-message="" />
:aria-label="share.shareWithDisplayName"
:title="share.shareWithDisplayName"
class="sharing-entry__avatar" />
</template>
<NcActionText icon="icon-user">
{{ t('files_sharing', 'Added by {initiator}', { initiator: share.ownerDisplayName }) }}

View file

@ -10,12 +10,11 @@
</template>
<NcActionLink :href="internalLink"
:aria-label="t('files_sharing', 'Copy internal link to clipboard')"
:aria-label="copyLinkTooltip"
:title="copyLinkTooltip"
target="_blank"
:icon="copied && copySuccess ? 'icon-checkmark-color' : 'icon-clippy'"
@click.prevent="copyLink">
{{ clipboardTooltip }}
</NcActionLink>
@click.prevent="copyLink" />
</SharingEntrySimple>
</ul>
</template>
@ -60,18 +59,18 @@ export default {
},
/**
* Clipboard v-tooltip message
* Tooltip message
*
* @return {string}
*/
clipboardTooltip() {
copyLinkTooltip() {
if (this.copied) {
if (this.copySuccess) {
return ''
}
return t('files_sharing', 'Cannot copy, please copy the link manually')
}
return t('files_sharing', 'Copy to clipboard')
return t('files_sharing', 'Copy internal link to clipboard')
},
internalLinkSubtitle() {

View file

@ -40,11 +40,10 @@
class="sharing-entry__copy">
<NcActionLink :href="shareLink"
target="_blank"
:aria-label="clipboardTooltip"
:title="copyLinkTooltip"
:aria-label="copyLinkTooltip"
:icon="copied && copySuccess ? 'icon-checkmark-color' : 'icon-clippy'"
@click.stop.prevent="copyLink">
{{ clipboardTooltip }}
</NcActionLink>
@click.stop.prevent="copyLink" />
</NcActions>
<!-- pending actions -->
@ -75,13 +74,8 @@
@uncheck="onPasswordDisable">
{{ t('files_sharing', 'Password protection') }}
</NcActionCheckbox>
<NcActionInput v-if="pendingPassword || share.password"
v-tooltip.auto="{
content: errors.password,
show: errors.password,
trigger: 'manual',
defaultContainer: '#app-sidebar'
}"
class="share-link-password"
:value.sync="share.password"
:disabled="saving"
@ -131,12 +125,6 @@
<template v-if="share.canEdit && canReshare">
<!-- Custom Label -->
<NcActionInput ref="label"
v-tooltip.auto="{
content: errors.label,
show: errors.label,
trigger: 'manual',
defaultContainer: '.app-sidebar'
}"
:class="{ error: errors.label }"
:disabled="saving"
:label="t('files_sharing', 'Share label')"
@ -167,14 +155,9 @@
? t('files_sharing', 'Password protection (enforced)')
: t('files_sharing', 'Password protect') }}
</NcActionCheckbox>
<NcActionInput v-if="isPasswordProtected"
ref="password"
v-tooltip.auto="{
content: errors.password,
show: errors.password,
trigger: 'manual',
defaultContainer: '#app-sidebar'
}"
class="share-link-password"
:class="{ error: errors.password}"
:disabled="saving"
@ -233,14 +216,9 @@
@uncheck="queueUpdate('note')">
{{ t('files_sharing', 'Note to recipient') }}
</NcActionCheckbox>
<NcActionTextEditable v-if="hasNote"
ref="note"
v-tooltip.auto="{
content: errors.note,
show: errors.note,
trigger: 'manual',
defaultContainer: '#app-sidebar'
}"
:class="{ error: errors.note}"
:disabled="saving"
:placeholder="t('files_sharing', 'Enter a note for the share recipient')"
@ -286,10 +264,10 @@
<!-- Create new share -->
<NcActionButton v-else-if="canReshare"
class="new-share-link"
:title="t('files_sharing', 'Create a new share link')"
:aria-label="t('files_sharing', 'Create a new share link')"
:icon="loading ? 'icon-loading-small' : 'icon-add'"
@click.prevent.stop="onNewLinkShare">
{{ t('files_sharing', 'Create a new share link') }}
</NcActionButton>
@click.prevent.stop="onNewLinkShare" />
</NcActions>
<!-- loading indicator to replace the menu -->
@ -312,7 +290,6 @@ import NcActionSeparator from '@nextcloud/vue/dist/Components/NcActionSeparator'
import NcActionTextEditable from '@nextcloud/vue/dist/Components/NcActionTextEditable'
import NcActions from '@nextcloud/vue/dist/Components/NcActions'
import NcAvatar from '@nextcloud/vue/dist/Components/NcAvatar'
import Tooltip from '@nextcloud/vue/dist/Directives/Tooltip'
import ExternalShareAction from './ExternalShareAction.vue'
import SharePermissionsEditor from './SharePermissionsEditor.vue'
@ -337,10 +314,6 @@ export default {
SharePermissionsEditor,
},
directives: {
Tooltip,
},
mixins: [SharesMixin],
props: {
@ -564,21 +537,12 @@ export default {
return window.location.protocol + '//' + window.location.host + generateUrl('/s/') + this.share.token
},
/**
* Tooltip message for actions button
*
* @return {string}
*/
actionsTooltip() {
return t('files_sharing', 'Actions for "{title}"', { title: this.title })
},
/**
* Tooltip message for copy button
*
* @return {string}
*/
clipboardTooltip() {
copyLinkTooltip() {
if (this.copied) {
if (this.copySuccess) {
return ''
@ -752,6 +716,7 @@ export default {
// otherwise the user needs to copy/paste the password before finishing the share.
component.copyLink()
}
showSuccess(t('sharing', 'Link share created'))
} catch (data) {
const message = data?.response?.data?.ocs?.meta?.message
@ -790,7 +755,6 @@ export default {
if (typeof this.share.newLabel === 'string') {
this.share.label = this.share.newLabel
this.$delete(this.share, 'newLabel')
showSuccess(t('files_sharing', 'Share label saved'))
this.queueUpdate('label')
}
},
@ -858,7 +822,6 @@ export default {
onPasswordSubmit() {
if (this.hasUnsavedPassword) {
this.share.password = this.share.newPassword.trim()
showSuccess(t('files_sharing', 'Share password saved'))
this.queueUpdate('password')
}
},

View file

@ -23,7 +23,7 @@
<template>
<li class="sharing-entry">
<slot name="avatar" />
<div v-tooltip="tooltip" class="sharing-entry__desc">
<div class="sharing-entry__desc">
<span class="sharing-entry__title">{{ title }}</span>
<p v-if="subtitle">
{{ subtitle }}
@ -41,7 +41,6 @@
<script>
import NcActions from '@nextcloud/vue/dist/Components/NcActions'
import Tooltip from '@nextcloud/vue/dist/Directives/Tooltip'
export default {
name: 'SharingEntrySimple',
@ -50,20 +49,12 @@ export default {
NcActions,
},
directives: {
Tooltip,
},
props: {
title: {
type: String,
default: '',
required: true,
},
tooltip: {
type: String,
default: '',
},
subtitle: {
type: String,
default: '',

View file

@ -25,7 +25,7 @@
*
*/
import { showSuccess } from '@nextcloud/dialogs'
import { showError, showSuccess } from '@nextcloud/dialogs'
import { getCurrentUser } from '@nextcloud/auth'
// eslint-disable-next-line import/no-unresolved, node/no-missing-import
import PQueue from 'p-queue'
@ -212,7 +212,6 @@ export default {
if (this.share.newNote) {
this.share.note = this.share.newNote
this.$delete(this.share, 'newNote')
showSuccess(t('files_sharing', 'Share note saved'))
this.queueUpdate('note')
}
},
@ -278,10 +277,11 @@ export default {
// clear any previous errors
this.$delete(this.errors, propertyNames[0])
showSuccess(t('files_sharing', 'Share {propertyName} saved', { propertyName: propertyNames[0] }))
} catch ({ message }) {
if (message && message !== '') {
this.onSyncError(propertyNames[0], message)
showError(t('files_sharing', message))
}
} finally {
this.saving = false

View file

@ -22,6 +22,7 @@
import axios from '@nextcloud/axios'
import Config from '../services/ConfigService'
import { showError, showSuccess } from '@nextcloud/dialogs'
const config = new Config()
// note: some chars removed on purpose to make them human friendly when read out
@ -40,10 +41,12 @@ export default async function() {
try {
const request = await axios.get(config.passwordPolicy.api.generate)
if (request.data.ocs.data.password) {
showSuccess(t('files_sharing', 'Password created successfully'))
return request.data.ocs.data.password
}
} catch (error) {
console.info('Error generating password from password_policy', error)
showError(t('files_sharing', 'Error generating password from password_policy'))
}
}

View file

@ -31,10 +31,9 @@
<div class="avatar-shared icon-more-white" />
</template>
<NcActionButton :icon="showInheritedSharesIcon"
:aria-label="mainTitle"
@click.prevent.stop="toggleInheritedShares">
{{ toggleTooltip }}
</NcActionButton>
:aria-label="toggleTooltip"
:title="toggleTooltip"
@click.prevent.stop="toggleInheritedShares" />
</SharingEntrySimple>
<!-- Inherited shares list -->

View file

@ -34,9 +34,8 @@
<SharingEntrySimple v-if="isSharedWithMe" v-bind="sharedWithMe" class="sharing-entry__reshare">
<template #avatar>
<NcAvatar :user="sharedWithMe.user"
:display-name="sharedWithMe.displayName"
class="sharing-entry__avatar"
tooltip-message="" />
:title="sharedWithMe.displayName"
class="sharing-entry__avatar" />
</template>
</SharingEntrySimple>

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long