Skip to content

[FIX] Drag and drop disabled when file upload is disabled #16049

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
ggazzo merged 4 commits into from
Jan 6, 2020
Merged

[FIX] Drag and drop disabled when file upload is disabled #16049

Show file tree
Hide file tree
Changes from 3 commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
900995f
Disabled drag and drop
dudizilla Dec 23, 2019
f59e1b2
Fixing lint errors
dudizilla Dec 23, 2019
431e515
Refactoring the code
dudizilla Dec 24, 2019
21670d3
Refactoring the code
dudizilla Dec 26, 2019
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
15 changes: 12 additions & 3 deletions app/theme/client/imports/general/base_old.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4399,14 +4399,23 @@ rc-old select,

text-align: center;

color: var(--color-blue);

border: 4px dashed var(--color-blue);
background: rgba(255, 255, 255, 0.8);

font-size: 42px;
align-items: center;
justify-content: center;

&--enabled {
color: var(--color-blue);

border: 4px dashed var(--color-blue);
}

&--disabled {
color: var(--color-red);

border: 4px dashed var(--color-red);
}
}

&.over .dropzone-overlay {
Expand Down
4 changes: 2 additions & 2 deletions app/threads/client/flextab/thread.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,8 +11,8 @@ <h2 class="contextual-bar__header-title">
{{> icon block="contextual-bar__header-close-icon" icon="plus"}}
</button>
</header>
<section class="contextual-bar__content flex-tab threads dropzone">
<div class="dropzone-overlay background-transparent-darkest color-content-background-color">{{_ "Drop_to_upload_file"}}</div>
<section class="contextual-bar__content flex-tab threads dropzone {{dragAndDrop}}">
<div class="dropzone-overlay {{isDropzoneDisabled}} background-transparent-darkest color-content-background-color">{{_ dragAndDropLabel}}</div>
<div class="thread-list js-scroll-thread">
<ul class="thread">
{{# with messageContext}}
Expand Down
3 changes: 2 additions & 1 deletion app/threads/client/flextab/thread.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@ import { upsertMessageBulk } from '../../../ui-utils/client/lib/RoomHistoryManag
import { Messages } from '../../../models';
import { lazyloadtick } from '../../../lazy-load';
import { fileUpload } from '../../../ui/client/lib/fileUpload';
import { dropzoneEvents } from '../../../ui/client/views/app/room';
import { dropzoneEvents, dropzoneHelpers } from '../../../ui/client/views/app/room';
import './thread.html';

const sort = { ts: 1 };
Expand Down Expand Up @@ -39,6 +39,7 @@ Template.thread.events({
});

Template.thread.helpers({
...dropzoneHelpers,
threadTitle() {
return normalizeThreadMessage(Template.currentData().mainMessage);
},
Expand Down
4 changes: 2 additions & 2 deletions app/ui/client/views/app/room.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,8 +11,8 @@
{{/headerRoom}}
Comment thread
ggazzo marked this conversation as resolved.
{{/unless}}
<div class="messages-container-wrapper">
<div class="messages-container-main dropzone">
<div class="dropzone-overlay background-transparent-darkest color-content-background-color">{{_ "Drop_to_upload_file"}}</div>
<div class="messages-container-main dropzone {{dragAndDrop}}">
<div class="dropzone-overlay {{isDropzoneDisabled}} background-transparent-darkest color-content-background-color">{{_ dragAndDropLabel}}</div>
{{#unless embeddedVersion}}
{{#if announcement}}
<div class="fixed-title announcement {{getAnnouncementStyle}}" aria-label="{{RocketChatMarkdownInline announcement}}">
Expand Down
26 changes: 26 additions & 0 deletions app/ui/client/views/app/room.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -253,7 +253,28 @@ callbacks.add('enter-room', wipeFailedUploads);

const ignoreReplies = getConfig('ignoreReplies') === 'true';

export const dropzoneHelpers = {
dragAndDrop() {
return settings.get('FileUpload_Enabled') && 'dropzone--disabled';
},

isDropzoneDisabled() {
return settings.get('FileUpload_Enabled') ? 'dropzone-overlay--enabled' : 'dropzone-overlay--disabled';
},

dragAndDropLabel() {
if (!userCanDrop) {

@ggazzo ggazzo Dec 26, 2019

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

should be userCanDrop(this._id)

return 'error-not-allowed';
}
if (!settings.get('FileUpload_Enabled')) {
return 'FileUpload_Disabled';
}
return 'Drop_to_upload_file';
},
};

Template.room.helpers({
...dropzoneHelpers,
useNrr() {
const useNrr = getConfig('useNrr');
return useNrr === 'true' || useNrr !== 'false';
Expand Down Expand Up @@ -585,6 +606,11 @@ export const dropzoneEvents = {
const e = event.originalEvent || event;

e.stopPropagation();
e.preventDefault();

if (!userCanDrop() || !settings.get('FileUpload_Enabled')) {

@MartinSchoeler MartinSchoeler Dec 23, 2019

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think here we can add the !settings.get('FileUpload_Enabled') to the userCanDrop instead of testing both

@MartinSchoeler MartinSchoeler Dec 23, 2019

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Also, this check can be done earlier in the event, maybe right after removing the over class from the element

@dudizilla dudizilla Dec 24, 2019

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Done

@ggazzo ggazzo Dec 26, 2019

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

same here: userCanDrop(this._id)

return false;
}

let files = (e.dataTransfer && e.dataTransfer.files) || [];

Expand Down