DnD inline images frontend.
Review Request #8147 — Created May 6, 2016 and submitted
This change implements the frontend for letting users drag-and-drop images into
their markdown editors. This will upload the image as a user file attachment
and insert the relevant markdown syntax into the editor.This is based on work by David Kus at https://reviews.reviewboard.org/r/6510/
Compared to that change, I've reworked the UI a bit to avoid the overlapping
drop targets (the review request file attachments drop target is now isolated
to the "Files" section, which appears momentarily if it wasn't already
visible). I've also done a bunch of refactoring of the code to modernize and
clean it up.At the moment, this adds overlays over the entire text field, and will insert
the markdown text as a new line wherever the cursor is. I'd like to improve
this in the future to make it more obvious where the new entry will end up
(basically moving the cursor during the dragover with inline feedback) but
that's a larger change.
- Dragged images into a variety of text fields.
- Dragged files to create new file attachments.
- Ran unit tests.
- Ran js-tests.
Description | From | Last Updated |
---|---|---|
Since RB.BaseResource.prototype.defaults is a method that returns an object fo extra data, we'll want to make this a function. |
brennie | |
Can we do: const url = `${SITE_ROOT}api/users/${this.get('username')}/file-attachments/`; or similar? |
brennie | |
you can use { $target } here as shorthand for { $target: $target } |
brennie | |
You can do: const target = new DnDDropTarget({ $target, dropText, callback }); |
brennie | |
Why do we need the !important? Can we rework things to not need it? |
chipx86 | |
What does the 64px relate to? Can we add a constant? |
chipx86 | |
Can we add constants for these colors and border size? |
chipx86 | |
Can we use a relative font size (percentage)? |
chipx86 | |
Same here. |
chipx86 | |
Should use the standard multi-line comment format. |
chipx86 | |
Are we limiting this exclusively to images? I can think of other file formats that would be useful in discussions. |
chipx86 | |
"append" |
chipx86 | |
This is too long. |
chipx86 | |
While the new shorthand in ES6 probably has some good uses, I think it's not very future-proof. If anyone ever … |
chipx86 | |
One too many "anys," probably. |
chipx86 | |
You can do this.el.value += `\n${text}`; here |
brennie | |
Same here. |
brennie | |
(Almost) the same here. |
brennie | |
And here. |
brennie | |
Should these be .jpeg etc? Because I couldn't I upload foojpeg and it would allow it? Or do something like: … |
brennie | |
You can do callback() {} in the object literal. |
brennie | |
Can we put the comparison in parens, to help visually distinguish it better from the => ? |
chipx86 |
-
-
reviewboard/static/rb/js/resources/models/userFileAttachmentModel.es6.js (Diff revision 1) Since
RB.BaseResource.prototype.defaults
is a method that returns an object fo extra data, we'll want to make this a function. -
reviewboard/static/rb/js/resources/models/userFileAttachmentModel.es6.js (Diff revision 1) Can we do:
const url = `${SITE_ROOT}api/users/${this.get('username')}/file-attachments/`;
or similar?
-
reviewboard/static/rb/js/views/dndUploaderView.es6.js (Diff revision 1) you can use
{ $target }
here as shorthand for{ $target: $target }
-
reviewboard/static/rb/js/views/dndUploaderView.es6.js (Diff revision 1) You can do:
const target = new DnDDropTarget({ $target, dropText, callback });
Commit: |
|
||||
---|---|---|---|---|---|
Diff: |
Revision 2 (+663 -110) |
-
Tool: Pyflakes Processed Files: reviewboard/staticbundles.py Ignored Files: reviewboard/static/rb/js/resources/models/tests/userFileAttachmentModelTests.js reviewboard/static/rb/css/ui/dnd-uploader.less reviewboard/static/rb/js/resources/models/userFileAttachmentModel.es6.js reviewboard/static/rb/js/ui/views/textEditorView.es6.js reviewboard/static/rb/js/views/dndUploaderView.es6.js reviewboard/static/rb/js/pages/views/tests/reviewablePageViewTests.js reviewboard/static/rb/js/views/reviewReplyEditorView.js reviewboard/templates/reviews/review_request_box.html reviewboard/static/rb/css/pages/reviews.less reviewboard/static/rb/js/ui/views/tests/textEditorViewTests.js reviewboard/static/rb/css/common.less reviewboard/static/rb/css/defs.less reviewboard/static/rb/js/views/reviewRequestEditorView.js reviewboard/static/rb/js/pages/views/reviewablePageView.js Tool: PEP8 Style Checker Processed Files: reviewboard/staticbundles.py Ignored Files: reviewboard/static/rb/js/resources/models/tests/userFileAttachmentModelTests.js reviewboard/static/rb/css/ui/dnd-uploader.less reviewboard/static/rb/js/resources/models/userFileAttachmentModel.es6.js reviewboard/static/rb/js/ui/views/textEditorView.es6.js reviewboard/static/rb/js/views/dndUploaderView.es6.js reviewboard/static/rb/js/pages/views/tests/reviewablePageViewTests.js reviewboard/static/rb/js/views/reviewReplyEditorView.js reviewboard/templates/reviews/review_request_box.html reviewboard/static/rb/css/pages/reviews.less reviewboard/static/rb/js/ui/views/tests/textEditorViewTests.js reviewboard/static/rb/css/common.less reviewboard/static/rb/css/defs.less reviewboard/static/rb/js/views/reviewRequestEditorView.js reviewboard/static/rb/js/pages/views/reviewablePageView.js
Change Summary:
Fix defaults.
Commit: |
|
||||
---|---|---|---|---|---|
Diff: |
Revision 3 (+665 -110) |
-
Tool: PEP8 Style Checker Processed Files: reviewboard/staticbundles.py Ignored Files: reviewboard/static/rb/js/resources/models/tests/userFileAttachmentModelTests.js reviewboard/static/rb/css/ui/dnd-uploader.less reviewboard/static/rb/js/resources/models/userFileAttachmentModel.es6.js reviewboard/static/rb/js/ui/views/textEditorView.es6.js reviewboard/static/rb/js/views/dndUploaderView.es6.js reviewboard/static/rb/js/pages/views/tests/reviewablePageViewTests.js reviewboard/static/rb/js/views/reviewReplyEditorView.js reviewboard/templates/reviews/review_request_box.html reviewboard/static/rb/css/pages/reviews.less reviewboard/static/rb/js/ui/views/tests/textEditorViewTests.js reviewboard/static/rb/css/common.less reviewboard/static/rb/css/defs.less reviewboard/static/rb/js/views/reviewRequestEditorView.js reviewboard/static/rb/js/pages/views/reviewablePageView.js Tool: Pyflakes Processed Files: reviewboard/staticbundles.py Ignored Files: reviewboard/static/rb/js/resources/models/tests/userFileAttachmentModelTests.js reviewboard/static/rb/css/ui/dnd-uploader.less reviewboard/static/rb/js/resources/models/userFileAttachmentModel.es6.js reviewboard/static/rb/js/ui/views/textEditorView.es6.js reviewboard/static/rb/js/views/dndUploaderView.es6.js reviewboard/static/rb/js/pages/views/tests/reviewablePageViewTests.js reviewboard/static/rb/js/views/reviewReplyEditorView.js reviewboard/templates/reviews/review_request_box.html reviewboard/static/rb/css/pages/reviews.less reviewboard/static/rb/js/ui/views/tests/textEditorViewTests.js reviewboard/static/rb/css/common.less reviewboard/static/rb/css/defs.less reviewboard/static/rb/js/views/reviewRequestEditorView.js reviewboard/static/rb/js/pages/views/reviewablePageView.js
-
-
reviewboard/static/rb/css/pages/reviews.less (Diff revision 3) Why do we need the
!important
? Can we rework things to not need it? -
reviewboard/static/rb/css/pages/reviews.less (Diff revision 3) What does the 64px relate to? Can we add a constant?
-
reviewboard/static/rb/css/ui/dnd-uploader.less (Diff revision 3) Can we add constants for these colors and border size?
-
reviewboard/static/rb/css/ui/dnd-uploader.less (Diff revision 3) Can we use a relative font size (percentage)?
-
-
reviewboard/static/rb/js/ui/views/textEditorView.es6.js (Diff revision 3) Should use the standard multi-line comment format.
-
reviewboard/static/rb/js/ui/views/textEditorView.es6.js (Diff revision 3) Are we limiting this exclusively to images? I can think of other file formats that would be useful in discussions.
-
-
-
reviewboard/static/rb/js/views/dndUploaderView.es6.js (Diff revision 3) While the new shorthand in ES6 probably has some good uses, I think it's not very future-proof. If anyone ever changes one of these variable names down the road for any reason (or in some other case where we use this syntax), we will break.
I don't mind using it for the case where you're defining an object inline and want to give it those properties with those values, but when we're calling into another function (here or in
findWhere
above, for example), we should be explicit. -
reviewboard/static/rb/js/views/dndUploaderView.es6.js (Diff revision 3) One too many "anys," probably.
Commit: |
|
||||
---|---|---|---|---|---|
Diff: |
Revision 4 (+682 -111) |
-
Tool: PEP8 Style Checker Processed Files: reviewboard/staticbundles.py Ignored Files: reviewboard/static/rb/js/resources/models/tests/userFileAttachmentModelTests.js reviewboard/static/rb/css/ui/dnd-uploader.less reviewboard/static/rb/js/resources/models/userFileAttachmentModel.es6.js reviewboard/static/rb/js/ui/views/textEditorView.es6.js reviewboard/static/rb/js/views/dndUploaderView.es6.js reviewboard/static/rb/js/pages/views/tests/reviewablePageViewTests.js reviewboard/static/rb/js/views/reviewReplyEditorView.js reviewboard/templates/reviews/review_request_box.html reviewboard/static/rb/css/pages/reviews.less reviewboard/static/rb/js/ui/views/tests/textEditorViewTests.js reviewboard/static/rb/css/common.less reviewboard/static/rb/css/defs.less reviewboard/static/rb/js/views/reviewRequestEditorView.js reviewboard/static/rb/js/pages/views/reviewablePageView.js Tool: Pyflakes Processed Files: reviewboard/staticbundles.py Ignored Files: reviewboard/static/rb/js/resources/models/tests/userFileAttachmentModelTests.js reviewboard/static/rb/css/ui/dnd-uploader.less reviewboard/static/rb/js/resources/models/userFileAttachmentModel.es6.js reviewboard/static/rb/js/ui/views/textEditorView.es6.js reviewboard/static/rb/js/views/dndUploaderView.es6.js reviewboard/static/rb/js/pages/views/tests/reviewablePageViewTests.js reviewboard/static/rb/js/views/reviewReplyEditorView.js reviewboard/templates/reviews/review_request_box.html reviewboard/static/rb/css/pages/reviews.less reviewboard/static/rb/js/ui/views/tests/textEditorViewTests.js reviewboard/static/rb/css/common.less reviewboard/static/rb/css/defs.less reviewboard/static/rb/js/views/reviewRequestEditorView.js reviewboard/static/rb/js/pages/views/reviewablePageView.js
-
-
reviewboard/static/rb/js/ui/views/textEditorView.es6.js (Diff revision 4) You can do
this.el.value += `\n${text}`;
here
-
-
-
-
reviewboard/static/rb/js/ui/views/textEditorView.es6.js (Diff revision 4) Should these be
.jpeg
etc? Because I couldn't I uploadfoojpeg
and it would allow it?Or do something like:
return [/*...*/].some(extension => filename.endsWith(`.${extension}`));
-
reviewboard/static/rb/js/views/dndUploaderView.es6.js (Diff revision 4) You can do
callback() {}
in the object literal.
-
Looks good. Only one comment, beyond Barret's that were fixed.
-
reviewboard/static/rb/js/views/dndUploaderView.es6.js (Diff revision 4) Can we put the comparison in parens, to help visually distinguish it better from the
=>
?
Commit: |
|
||||
---|---|---|---|---|---|
Diff: |
Revision 5 (+682 -111) |
-
Tool: PEP8 Style Checker Processed Files: reviewboard/staticbundles.py Ignored Files: reviewboard/static/rb/js/resources/models/tests/userFileAttachmentModelTests.js reviewboard/static/rb/css/ui/dnd-uploader.less reviewboard/static/rb/js/resources/models/userFileAttachmentModel.es6.js reviewboard/static/rb/js/ui/views/textEditorView.es6.js reviewboard/static/rb/js/views/dndUploaderView.es6.js reviewboard/static/rb/js/pages/views/tests/reviewablePageViewTests.js reviewboard/static/rb/js/views/reviewReplyEditorView.js reviewboard/templates/reviews/review_request_box.html reviewboard/static/rb/css/pages/reviews.less reviewboard/static/rb/js/ui/views/tests/textEditorViewTests.js reviewboard/static/rb/css/common.less reviewboard/static/rb/css/defs.less reviewboard/static/rb/js/views/reviewRequestEditorView.js reviewboard/static/rb/js/pages/views/reviewablePageView.js Tool: Pyflakes Processed Files: reviewboard/staticbundles.py Ignored Files: reviewboard/static/rb/js/resources/models/tests/userFileAttachmentModelTests.js reviewboard/static/rb/css/ui/dnd-uploader.less reviewboard/static/rb/js/resources/models/userFileAttachmentModel.es6.js reviewboard/static/rb/js/ui/views/textEditorView.es6.js reviewboard/static/rb/js/views/dndUploaderView.es6.js reviewboard/static/rb/js/pages/views/tests/reviewablePageViewTests.js reviewboard/static/rb/js/views/reviewReplyEditorView.js reviewboard/templates/reviews/review_request_box.html reviewboard/static/rb/css/pages/reviews.less reviewboard/static/rb/js/ui/views/tests/textEditorViewTests.js reviewboard/static/rb/css/common.less reviewboard/static/rb/css/defs.less reviewboard/static/rb/js/views/reviewRequestEditorView.js reviewboard/static/rb/js/pages/views/reviewablePageView.js