Skip to content

Commit

Permalink
Improve sharing flow
Browse files Browse the repository at this point in the history 
Resolves: #26691

Signed-off-by: fenn-cs <[email protected]>
  • Loading branch information
@Fenn-CS
Fenn-CS committed Aug 16, 2023
1 parent 6d0dabe commit f651ec0
Show file tree
Hide file tree
Showing 11 changed files with 1,710 additions and 138 deletions.
169 changes: 54 additions & 115 deletions apps/files_sharing/src/components/SharingEntry.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -29,139 +29,59 @@
:menu-position="'left'"
:url="share.shareWithAvatar" />

<component :is="share.shareWithLink ? 'a' : 'div'"
: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>
<p v-if="hasStatus">
<span>{{ share.status.icon || '' }}</span>
<span>{{ share.status.message || '' }}</span>
</p>
</component>
<NcActions menu-align="right"
class="sharing-entry__actions"
@close="onMenuClose">
<template v-if="share.canEdit">
<!-- edit permission -->
<NcActionCheckbox ref="canEdit"
:checked.sync="canEdit"
:value="permissionsEdit"
:disabled="saving || !canSetEdit">
{{ t('files_sharing', 'Allow editing') }}
</NcActionCheckbox>

<!-- create permission -->
<NcActionCheckbox v-if="isFolder"
ref="canCreate"
:checked.sync="canCreate"
:value="permissionsCreate"
:disabled="saving || !canSetCreate">
{{ t('files_sharing', 'Allow creating') }}
</NcActionCheckbox>

<!-- delete permission -->
<NcActionCheckbox v-if="isFolder"
ref="canDelete"
:checked.sync="canDelete"
:value="permissionsDelete"
:disabled="saving || !canSetDelete">
{{ t('files_sharing', 'Allow deleting') }}
</NcActionCheckbox>

<!-- reshare permission -->
<NcActionCheckbox v-if="config.isResharingAllowed"
ref="canReshare"
:checked.sync="canReshare"
:value="permissionsShare"
:disabled="saving || !canSetReshare">
{{ t('files_sharing', 'Allow resharing') }}
</NcActionCheckbox>

<NcActionCheckbox v-if="isSetDownloadButtonVisible"
ref="canDownload"
:checked.sync="canDownload"
:disabled="saving || !canSetDownload">
{{ allowDownloadText }}
</NcActionCheckbox>

<!-- expiration date -->
<NcActionCheckbox :checked.sync="hasExpirationDate"
:disabled="config.isDefaultInternalExpireDateEnforced || saving"
@uncheck="onExpirationDisable">
{{ config.isDefaultInternalExpireDateEnforced
? t('files_sharing', 'Expiration date enforced')
: t('files_sharing', 'Set expiration date') }}
</NcActionCheckbox>
<NcActionInput v-if="hasExpirationDate"
ref="expireDate"
:is-native-picker="true"
:hide-label="true"
:class="{ error: errors.expireDate}"
:disabled="saving"
:value="new Date(share.expireDate)"
type="date"
:min="dateTomorrow"
:max="dateMaxEnforced"
@input="onExpirationChange">
{{ t('files_sharing', 'Enter a date') }}
</NcActionInput>

<!-- note -->
<template v-if="canHaveNote">
<NcActionCheckbox :checked.sync="hasNote"
:disabled="saving"
@uncheck="queueUpdate('note')">
{{ t('files_sharing', 'Note to recipient') }}
</NcActionCheckbox>
<NcActionTextEditable v-if="hasNote"
ref="note"
:class="{ error: errors.note}"
:disabled="saving"
:value="share.newNote || share.note"
icon="icon-edit"
@update:value="onNoteChange"
@submit="onNoteSubmit" />
</template>
<div class="sharing-entry__summary" @click.prevent="toggleQuickShareSelect">
<component :is="share.shareWithLink ? 'a' : 'div'"
: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>
<p v-if="hasStatus">
<span>{{ share.status.icon || '' }}</span>
<span>{{ share.status.message || '' }}</span>
</p>
</component>
<QuickShareSelect :options="options" :value.sync="selectedOption" :toggle="showDropdown" />
</div>
<NcButton class="sharing-entry__action"
:aria-label="t('files_sharing', 'Open Sharing Details')"
type="tertiary-no-background"
@click="openSharingDetails">
<template #icon>
<DotsHorizontalIcon :size="20" />
</template>

<NcActionButton v-if="share.canDelete"
icon="icon-close"
:disabled="saving"
@click.prevent="onDelete">
{{ t('files_sharing', 'Unshare') }}
</NcActionButton>
</NcActions>
</NcButton>
</li>
</template>

<script>
import NcButton from '@nextcloud/vue/dist/Components/NcButton.js'
import NcSelect from '@nextcloud/vue/dist/Components/NcSelect.js'
import NcAvatar from '@nextcloud/vue/dist/Components/NcAvatar.js'
import NcActions from '@nextcloud/vue/dist/Components/NcActions.js'
import NcActionButton from '@nextcloud/vue/dist/Components/NcActionButton.js'
import NcActionCheckbox from '@nextcloud/vue/dist/Components/NcActionCheckbox.js'
import NcActionInput from '@nextcloud/vue/dist/Components/NcActionInput.js'
import NcActionTextEditable from '@nextcloud/vue/dist/Components/NcActionTextEditable.js'
import DotsHorizontalIcon from 'vue-material-design-icons/DotsHorizontal.vue'
import QuickShareSelect from './SharingEntryQuickShareSelect.vue'
import SharesMixin from '../mixins/SharesMixin.js'
import ShareDropDown from '../mixins/ShareDropdown.js'

Check failure on line 67 in apps/files_sharing/src/components/SharingEntry.vue

View workflow job for this annotation

GitHub Actions / eslint 

Unable to resolve path to module '../mixins/ShareDropdown.js'

Check failure on line 67 in apps/files_sharing/src/components/SharingEntry.vue

View workflow job for this annotation

GitHub Actions / eslint 

"../mixins/ShareDropdown.js" is not found
export default {
name: 'SharingEntry',
components: {
NcActions,
NcActionButton,
NcActionCheckbox,
NcActionInput,
NcActionTextEditable,
NcButton,
NcAvatar,
DotsHorizontalIcon,
NcSelect,
QuickShareSelect,
},
mixins: [SharesMixin],
mixins: [SharesMixin, ShareDropDown],
data() {
return {
showDropdown: false,
permissionsEdit: OC.PERMISSION_UPDATE,
permissionsCreate: OC.PERMISSION_CREATE,
permissionsDelete: OC.PERMISSION_DELETE,
Expand Down Expand Up @@ -456,6 +376,12 @@ export default {
onMenuClose() {
this.onNoteSubmit()
},
openSharingDetails() {
this.$emit('open-sharing-details')
},
toggleQuickShareSelect() {
this.showDropdown = !this.showDropdown
},
},
}
</script>
Expand All @@ -465,21 +391,34 @@ export default {
display: flex;
align-items: center;
height: 44px;
&__desc {
display: flex;
flex-direction: column;
justify-content: space-between;
padding: 8px;
padding-bottom: 0;
line-height: 1.2em;
p {
color: var(--color-text-maxcontrast);
}
&-unique {
color: var(--color-text-maxcontrast);
}
}
&__actions {
margin-left: auto;
}
&__summary {
padding: 8px;
display: flex;
flex-direction: column;
justify-content: center;
width: 100%;
}
}
</style>
20 changes: 17 additions & 3 deletions apps/files_sharing/src/components/SharingEntryLink.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -25,13 +25,17 @@
<NcAvatar :is-no-user="true"
:icon-class="isEmailShareType ? 'avatar-link-share icon-mail-white' : 'avatar-link-share icon-public-white'"
class="sharing-entry__avatar" />
<div class="sharing-entry__desc">
<div class="sharing-entry__desc" @click.prevent="toggleQuickShareSelect">
<span class="sharing-entry__title" :title="title">
{{ title }}
</span>
<p v-if="subtitle">
{{ subtitle }}
</p>
<QuickShareSelect v-if="share"
:options="options"
:value.sync="selectedOption"
:toggle="showDropdown" />
</div>

<!-- clipboard -->
Expand Down Expand Up @@ -292,11 +296,14 @@ import NcActionTextEditable from '@nextcloud/vue/dist/Components/NcActionTextEdi
import NcActions from '@nextcloud/vue/dist/Components/NcActions.js'
import NcAvatar from '@nextcloud/vue/dist/Components/NcAvatar.js'
import QuickShareSelect from './SharingEntryQuickShareSelect.vue'
import ExternalShareAction from './ExternalShareAction.vue'
import SharePermissionsEditor from './SharePermissionsEditor.vue'
import GeneratePassword from '../utils/GeneratePassword.js'
import Share from '../models/Share.js'
import SharesMixin from '../mixins/SharesMixin.js'
import ShareDropDown from '../mixins/ShareDropdown.js'

Check failure on line 306 in apps/files_sharing/src/components/SharingEntryLink.vue

View workflow job for this annotation

GitHub Actions / eslint 

Unable to resolve path to module '../mixins/ShareDropdown.js'

Check failure on line 306 in apps/files_sharing/src/components/SharingEntryLink.vue

View workflow job for this annotation

GitHub Actions / eslint 

"../mixins/ShareDropdown.js" is not found
export default {
name: 'SharingEntryLink',
Expand All @@ -313,9 +320,10 @@ export default {
NcAvatar,
ExternalShareAction,
SharePermissionsEditor,
QuickShareSelect,
},
mixins: [SharesMixin],
mixins: [SharesMixin, ShareDropDown],
props: {
canReshare: {
Expand All @@ -330,6 +338,7 @@ export default {
data() {
return {
showDropdown: false,
copySuccess: true,
copied: false,
Expand Down Expand Up @@ -671,7 +680,7 @@ export default {
* accordingly
*
* @param {Share} share the new share
* @param {boolean} [update=false] do we update the current share ?
* @param {boolean} [update] do we update the current share ?
*/
async pushNewLinkShare(share, update) {
try {
Expand Down Expand Up @@ -870,6 +879,10 @@ export default {
// YET. We can safely delete the share :)
this.$emit('remove:share', this.share)
},
toggleQuickShareSelect() {
this.showDropdown = !this.showDropdown
},
},
}
</script>
Expand All @@ -879,6 +892,7 @@ export default {
display: flex;
align-items: center;
min-height: 44px;
&__desc {
display: flex;
flex-direction: column;
Expand Down
Loading

0 comments on commit f651ec0

Please sign in to comment.