Skip to content

Commit

Permalink
fix(files_sharing): improve file request info messages
Browse files Browse the repository at this point in the history
Signed-off-by: skjnldsv <skjnldsv@protonmail.com>
  • Loading branch information
skjnldsv committed Jul 18, 2024
1 parent c334eec commit 6051047
Show file tree
Hide file tree
Showing 6 changed files with 54 additions and 19 deletions.
2 changes: 1 addition & 1 deletion apps/files_sharing/src/actions/openInFilesAction.ts
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@ import { sharesViewId, sharedWithYouViewId, sharedWithOthersViewId, sharingByLin

export const action = new FileAction({
id: 'open-in-files',
displayName: () => t('files', 'Open in Files'),
displayName: () => t('files_sharing', 'Open in Files'),
iconSvgInline: () => '',

enabled: (nodes, view) => [
Expand Down
22 changes: 17 additions & 5 deletions apps/files_sharing/src/components/NewFileRequestDialog.vue
Original file line number Diff line number Diff line change
Expand Up @@ -398,7 +398,7 @@ export default defineComponent({
})
</script>

<style scoped lang="scss">
<style lang="scss">
.file-request-dialog {
--margin: 18px;

Expand All @@ -414,28 +414,40 @@ export default defineComponent({
margin-top: calc(-1 * var(--margin));
}

:deep(fieldset) {
fieldset {
display: flex;
flex-direction: column;
width: 100%;
margin-top: var(--margin);

:deep(legend) {
legend {
display: flex;
align-items: center;
width: 100%;
}
}

:deep(.dialog__actions) {
// Using a NcNoteCard was a bit much sometimes.
// Using a simple paragraph instead does it.
&__info {
color: var(--color-text-maxcontrast);
padding-block: 4px;
display: flex;
align-items: center;
.file-request-dialog__info-icon {
margin-inline-end: 8px;
}
}

.dialog__actions {
width: auto;
margin-inline: 12px;
span.dialog__actions-separator {
margin-left: auto;
}
}

:deep(.input-field__helper-text-message) {
.input-field__helper-text-message {
// reduce helper text standing out
color: var(--color-text-maxcontrast);
}
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -12,10 +12,6 @@

<!-- Expiration date -->
<fieldset class="file-request-dialog__expiration" data-cy-file-request-dialog-fieldset="expiration">
<NcNoteCard v-if="defaultExpireDateEnforced" type="info">
{{ t('files_sharing', 'Your administrator has enforced a default expiration date with a maximum of {days} days.', { days: defaultExpireDate }) }}
</NcNoteCard>

<!-- Enable expiration -->
<legend>{{ t('files_sharing', 'When should the request expire?') }}</legend>
<NcCheckboxRadioSwitch v-show="!defaultExpireDateEnforced"
Expand All @@ -39,14 +35,15 @@
name="expirationDate"
type="date"
@update:value="$emit('update:expirationDate', $event)" />

<p v-if="defaultExpireDateEnforced" class="file-request-dialog__info">
<IconInfo :size="18" class="file-request-dialog__info-icon" />
{{ t('files_sharing', 'Your administrator has enforced a {count} days expiration policy.', { count: defaultExpireDate }) }}
</p>
</fieldset>

<!-- Password -->
<fieldset class="file-request-dialog__password" data-cy-file-request-dialog-fieldset="password">
<NcNoteCard v-if="enforcePasswordForPublicLink" type="info">
{{ t('files_sharing', 'Your administrator has enforced a password protection.') }}
</NcNoteCard>

<!-- Enable password -->
<legend>{{ t('files_sharing', 'What password should be used for the request?') }}</legend>
<NcCheckboxRadioSwitch v-show="!enforcePasswordForPublicLink"
Expand Down Expand Up @@ -75,6 +72,11 @@
</template>
</NcButton>
</div>

<p v-if="enforcePasswordForPublicLink" class="file-request-dialog__info">
<IconInfo :size="18" class="file-request-dialog__info-icon" />
{{ t('files_sharing', 'Your administrator has enforced a password protection.') }}
</p>
</fieldset>
</div>
</template>
Expand All @@ -89,6 +91,7 @@ import NcDateTimePickerNative from '@nextcloud/vue/dist/Components/NcDateTimePic
import NcNoteCard from '@nextcloud/vue/dist/Components/NcNoteCard.js'
import NcPasswordField from '@nextcloud/vue/dist/Components/NcPasswordField.js'

import IconInfo from 'vue-material-design-icons/Information.vue'
import IconPasswordGen from 'vue-material-design-icons/AutoFix.vue'

import Config from '../../services/ConfigService'
Expand All @@ -100,6 +103,7 @@ export default defineComponent({
name: 'NewFileRequestDialogDatePassword',

components: {
IconInfo,
IconPasswordGen,
NcButton,
NcCheckboxRadioSwitch,
Expand Down Expand Up @@ -232,5 +236,11 @@ export default defineComponent({
display: flex;
align-items: flex-start;
gap: 8px;
// Compensate label gab with legend
margin-top: 12px;
> div {
// Force margin to 0 as we handle it above
margin: 0;
}
}
</style>
Original file line number Diff line number Diff line change
Expand Up @@ -26,7 +26,6 @@
</legend>
<NcTextField :value="destination"
:disabled="disabled"
:helper-text="t('files_sharing', 'The uploaded files are visible only to you unless you choose to share them.')"
:label="t('files_sharing', 'Upload destination')"
:minlength="2/* cannot share root */"
:placeholder="t('files_sharing', 'Select a destination')"
Expand All @@ -42,6 +41,11 @@
@trailing-button-click="$emit('update:destination', '')">
<IconFolder :size="18" />
</NcTextField>

<p class="file-request-dialog__info">
<IconLock :size="18" class="file-request-dialog__info-icon" />
{{ t('files_sharing', 'The uploaded files are visible only to you unless you choose to share them.') }}
</p>
</fieldset>

<!-- Request note -->
Expand All @@ -56,6 +60,11 @@
:required="false"
name="note"
@update:value="$emit('update:note', $event)" />

<p class="file-request-dialog__info">
<IconInfo :size="18" class="file-request-dialog__info-icon" />
{{ t('files_sharing', 'You can add links, date or any other information that will help the recipient understand what you are requesting.') }}
</p>
</fieldset>
</div>
</template>
Expand All @@ -69,6 +78,8 @@ import { getFilePickerBuilder } from '@nextcloud/dialogs'
import { t } from '@nextcloud/l10n'

import IconFolder from 'vue-material-design-icons/Folder.vue'
import IconInfo from 'vue-material-design-icons/Information.vue'
import IconLock from 'vue-material-design-icons/Lock.vue'
import NcTextArea from '@nextcloud/vue/dist/Components/NcTextArea.js'
import NcTextField from '@nextcloud/vue/dist/Components/NcTextField.js'

Expand All @@ -77,6 +88,8 @@ export default defineComponent({

components: {
IconFolder,
IconInfo,
IconLock,
NcTextArea,
NcTextField,
},
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -57,7 +57,7 @@ export default {
async pickFolder() {

// Setup file picker
const picker = getFilePickerBuilder(t('files', 'Choose a default folder for accepted shares'))
const picker = getFilePickerBuilder(t('files_sharing', 'Choose a default folder for accepted shares'))
.startAt(this.readableDirectory)
.setMultiSelect(false)
.setType(1)
Expand All @@ -69,7 +69,7 @@ export default {
// Init user folder picking
const dir = await picker.pick() || '/'
if (!dir.startsWith('/')) {
throw new Error(t('files', 'Invalid path selected'))
throw new Error(t('files_sharing', 'Invalid path selected'))
}

// Fix potential path issues and save results
Expand All @@ -78,7 +78,7 @@ export default {
shareFolder: this.directory,
})
} catch (error) {
showError(error.message || t('files', 'Unknown error'))
showError(error.message || t('files_sharing', 'Unknown error'))
}
},

Expand Down
2 changes: 1 addition & 1 deletion apps/files_sharing/src/new/newFileRequest.ts
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,7 @@ const sharingConfig = new Config()

export const entry = {
id: 'file-request',
displayName: t('files', 'Create new file request'),
displayName: t('files_sharing', 'Create file request'),
iconSvgInline: FileUploadSvg,
order: 30,
enabled(context: Folder): boolean {
Expand Down

0 comments on commit 6051047

Please sign in to comment.