Minor Shares UX Improvements (#11015)

* Add notification when copying shares' links

* add danger styling for shares delete option
This commit is contained in:
Azri Kahar
2022-01-13 22:48:18 +08:00
committed by GitHub
parent 1c2848aadc
commit b86d8fd11b
3 changed files with 22 additions and 2 deletions

View File

@@ -1170,6 +1170,8 @@ share_access_not_found: This shared page either does not exist or has already ex
share_access_not_found_desc: Please contact an authorized user of this project to request access.
share_access_not_found_title: Unknown Share Page
share_copy_link: Copy Link
share_copy_link_success: Link Copied
share_copy_link_error: Unable to Copy Link
share_send_link: Send Link
relational_triggers: Relational Triggers
referential_action_field_label_m2o: On Delete of {collection}...

View File

@@ -26,7 +26,7 @@
<v-list-item-icon><v-icon name="edit" /></v-list-item-icon>
<v-list-item-content>{{ t('edit') }}</v-list-item-content>
</v-list-item>
<v-list-item v-if="deleteAllowed" clickable @click="$emit('delete')">
<v-list-item v-if="deleteAllowed" clickable class="danger" @click="$emit('delete')">
<v-list-item-icon><v-icon name="delete" /></v-list-item-icon>
<v-list-item-content>{{ t('delete_label') }}</v-list-item-content>
</v-list-item>
@@ -121,6 +121,12 @@ export default defineComponent({
margin-bottom: 0;
}
.v-list-item.danger {
--v-list-item-color: var(--danger);
--v-list-item-color-hover: var(--danger);
--v-list-item-icon-color: var(--danger);
}
.share-item-info {
display: flex;
align-items: center;

View File

@@ -80,6 +80,7 @@ import { defineComponent, ref, computed } from 'vue';
import DrawerItem from '@/views/private/components/drawer-item';
import { getRootPath } from '@/utils/get-root-path';
import { unexpectedError } from '@/utils/unexpected-error';
import { notify } from '@/utils/notify';
import { Share } from '@directus/shared/types';
import api from '@/api';
@@ -167,7 +168,18 @@ export default defineComponent({
async function copy(id: string) {
const url = window.location.origin + getRootPath() + 'admin/shared/' + id;
await navigator?.clipboard?.writeText(url);
try {
await navigator?.clipboard?.writeText(url);
notify({
type: 'success',
title: t('share_copy_link_success'),
});
} catch (err: any) {
notify({
type: 'error',
title: t('share_copy_link_error'),
});
}
}
function select(id: string) {