diff --git a/lang/en/components.php b/lang/en/components.php index 426a427d2..cd5dca251 100644 --- a/lang/en/components.php +++ b/lang/en/components.php @@ -25,7 +25,6 @@ return [ 'images_deleted' => 'Images Deleted', 'image_preview' => 'Image Preview', 'image_upload_success' => 'Image uploaded successfully', - 'image_upload_failure' => 'Image failed to upload', 'image_update_success' => 'Image details successfully updated', 'image_delete_success' => 'Image successfully deleted', diff --git a/lang/en/entities.php b/lang/en/entities.php index 9b02f3111..9614f92fe 100644 --- a/lang/en/entities.php +++ b/lang/en/entities.php @@ -311,12 +311,12 @@ return [ 'attachments' => 'Attachments', 'attachments_explain' => 'Upload some files or attach some links to display on your page. These are visible in the page sidebar.', 'attachments_explain_instant_save' => 'Changes here are saved instantly.', - 'attachments_items' => 'Attached Items', 'attachments_upload' => 'Upload File', 'attachments_link' => 'Attach Link', + 'attachments_upload_drop' => 'Alternatively you can drag and drop a file here to upload it as an attachment.', 'attachments_set_link' => 'Set Link', 'attachments_delete' => 'Are you sure you want to delete this attachment?', - 'attachments_dropzone' => 'Drop files or click here to attach a file', + 'attachments_dropzone' => 'Drop files here to upload', 'attachments_no_files' => 'No files have been uploaded', 'attachments_explain_link' => 'You can attach a link if you\'d prefer not to upload a file. This can be a link to another page or a link to a file in the cloud.', 'attachments_link_name' => 'Link Name', diff --git a/lang/en/errors.php b/lang/en/errors.php index eca39c946..6991f96e4 100644 --- a/lang/en/errors.php +++ b/lang/en/errors.php @@ -53,6 +53,7 @@ return [ // Attachments 'attachment_not_found' => 'Attachment not found', + 'attachment_upload_error' => 'An error occurred uploading the attachment file', // Pages 'page_draft_autosave_fail' => 'Failed to save draft. Ensure you have internet connection before saving this page', diff --git a/resources/js/components/attachments.js b/resources/js/components/attachments.js index 9555a59e8..e185b3c5c 100644 --- a/resources/js/components/attachments.js +++ b/resources/js/components/attachments.js @@ -1,4 +1,4 @@ -import {showLoading} from '../services/dom'; +import {onSelect, showLoading} from '../services/dom'; import {Component} from './component'; export class Attachments extends Component { @@ -8,15 +8,16 @@ export class Attachments extends Component { this.pageId = this.$opts.pageId; this.editContainer = this.$refs.editContainer; this.listContainer = this.$refs.listContainer; - this.mainTabs = this.$refs.mainTabs; - this.list = this.$refs.list; + this.linksContainer = this.$refs.linksContainer; + this.listPanel = this.$refs.listPanel; + this.attachLinkButton = this.$refs.attachLinkButton; this.setupListeners(); } setupListeners() { const reloadListBound = this.reloadList.bind(this); - this.container.addEventListener('dropzone-success', reloadListBound); + this.container.addEventListener('dropzone-upload-success', reloadListBound); this.container.addEventListener('ajax-form-success', reloadListBound); this.container.addEventListener('sortable-list-sort', event => { @@ -39,16 +40,29 @@ export class Attachments extends Component { markdown: contentTypes['text/plain'], }); }); + + this.attachLinkButton.addEventListener('click', () => { + this.showSection('links'); + }); + } + + showSection(section) { + const sectionMap = { + links: this.linksContainer, + edit: this.editContainer, + list: this.listContainer, + }; + + for (const [name, elem] of Object.entries(sectionMap)) { + elem.toggleAttribute('hidden', name !== section); + } } reloadList() { this.stopEdit(); - /** @var {Tabs} */ - const tabs = window.$components.firstOnElement(this.mainTabs, 'tabs'); - tabs.show('attachment-panel-items'); window.$http.get(`/attachments/get/page/${this.pageId}`).then(resp => { - this.list.innerHTML = resp.data; - window.$components.init(this.list); + this.listPanel.innerHTML = resp.data; + window.$components.init(this.listPanel); }); } @@ -59,8 +73,7 @@ export class Attachments extends Component { } async startEdit(id) { - this.editContainer.classList.remove('hidden'); - this.listContainer.classList.add('hidden'); + this.showSection('edit'); showLoading(this.editContainer); const resp = await window.$http.get(`/attachments/edit/${id}`); @@ -69,8 +82,7 @@ export class Attachments extends Component { } stopEdit() { - this.editContainer.classList.add('hidden'); - this.listContainer.classList.remove('hidden'); + this.showSection('list'); } } diff --git a/resources/js/components/editor-toolbox.js b/resources/js/components/editor-toolbox.js index 4d3c0ae75..1f1fce9dc 100644 --- a/resources/js/components/editor-toolbox.js +++ b/resources/js/components/editor-toolbox.js @@ -13,6 +13,10 @@ export class EditorToolbox extends Component { // Set the first tab as active on load this.setActiveTab(this.contentElements[0].dataset.tabContent); + + setTimeout(() => { + this.setActiveTab('files', true); + }, 500); } setupListeners() { diff --git a/resources/sass/_components.scss b/resources/sass/_components.scss index d1a11a964..e28ec2836 100644 --- a/resources/sass/_components.scss +++ b/resources/sass/_components.scss @@ -228,6 +228,15 @@ body.flexbox-support #entity-selector-wrap .popup-body .form-group { animation: dzAnimIn 240ms ease-in-out; } +.dropzone-landing-area { + background-color: var(--color-primary-light); + padding: $-m $-l; + width: 100%; + border: 1px dashed var(--color-primary); + color: var(--color-primary); + border-radius: 4px; +} + @keyframes dzAnimIn { 0% { opacity: 0; @@ -319,7 +328,7 @@ body.flexbox-support #entity-selector-wrap .popup-body .form-group { .dropzone-file-item-label, .dropzone-file-item-status { align-items: center; - font-size: .9rem; + font-size: .8rem; font-weight: 700; } .dropzone-file-item-status[data-status] { diff --git a/resources/sass/_layout.scss b/resources/sass/_layout.scss index 19333faf7..541978a65 100644 --- a/resources/sass/_layout.scss +++ b/resources/sass/_layout.scss @@ -253,6 +253,15 @@ body.flexbox { position: relative; } +.fixed { + position: fixed; + z-index: 20; + &.top-right { + top: 0; + right: 0; + } +} + .hidden { display: none !important; } diff --git a/resources/views/attachments/manager-edit-form.blade.php b/resources/views/attachments/manager-edit-form.blade.php index 15837448a..9422a0752 100644 --- a/resources/views/attachments/manager-edit-form.blade.php +++ b/resources/views/attachments/manager-edit-form.blade.php @@ -17,18 +17,35 @@
-
- - +
+ +
-
- @include('form.dropzone', [ +
external) hidden @endif + tabindex="0" + role="tabpanel" + aria-labelledby="attachment-edit-file-tab" + class="mb-m"> + @include('form.simple-dropzone', [ 'placeholder' => trans('entities.attachments_edit_drop_upload'), 'url' => url('/attachments/upload/' . $attachment->id), 'successMessage' => trans('entities.attachments_file_updated'), ])
-
+ + diff --git a/resources/views/attachments/manager.blade.php b/resources/views/attachments/manager.blade.php index 7d14d00e7..4eeee24bb 100644 --- a/resources/views/attachments/manager.blade.php +++ b/resources/views/attachments/manager.blade.php @@ -6,66 +6,44 @@ class="toolbox-tab-content">

{{ trans('entities.attachments') }}

-
+
-
+

{{ trans('entities.attachments_explain') }} {{ trans('entities.attachments_explain_instant_save') }}

-
-
- - - -
-
- @include('attachments.manager-list', ['attachments' => $page->attachments->all()]) -
- - +
+ +
+ + +
+
+

{{ trans('entities.attachments_upload_drop') }}

+
+
+ +
+ +
+ @include('attachments.manager-list', ['attachments' => $page->attachments->all()])
-
\ No newline at end of file diff --git a/resources/views/form/dropzone.blade.php b/resources/views/form/dropzone.blade.php deleted file mode 100644 index 2eeec7505..000000000 --- a/resources/views/form/dropzone.blade.php +++ /dev/null @@ -1,8 +0,0 @@ -{{-- -@url - URL to upload to. -@placeholder - Placeholder text -@successMessage ---}} -
- -
\ No newline at end of file diff --git a/resources/views/form/simple-dropzone.blade.php b/resources/views/form/simple-dropzone.blade.php new file mode 100644 index 000000000..e274949ea --- /dev/null +++ b/resources/views/form/simple-dropzone.blade.php @@ -0,0 +1,21 @@ +{{-- +@url - URL to upload to. +@placeholder - Placeholder text +@successMessage +--}} +
+
+ +
\ No newline at end of file diff --git a/resources/views/pages/parts/image-manager.blade.php b/resources/views/pages/parts/image-manager.blade.php index cab5daa64..0594c67e8 100644 --- a/resources/views/pages/parts/image-manager.blade.php +++ b/resources/views/pages/parts/image-manager.blade.php @@ -1,7 +1,7 @@