Let's select the preferable option and implement it via this MR to fix users' issue with pasting designs, and I believe we could iterate on this to achieve the desired UI/UX.
We should discuss ways to improve this hover state for the Designs section.
@tomquirk@ntepluhina if I understand this documentation correctly, you could in theory know whether an image file was present in the clipboard while the user was hovering correct?
@lvanc@pedroms@mnichols1 Here's an issue I could use some feedback on. In the old design tab you could copy/paste files to upload designs. Now that the designs are part of the issue, you have to be hovering on the designs app to paste a file for upload. How would you indicate this?
My concern with an outline around the entire designs area is it would highlight every time you hover, and also the highlight in and of itself doesn't convey any meaning other than being active.
There has to be a better way to show that a user can paste a file to upload it.
@mnearents That is a tough one. I generally associate the ability to paste with an input field. Not sure there is room to add in a text field for that purpose or if that is even the right approach. Might be messaging is the only way to convey it 🤔
@mnearents thanks for pulling us in. I agree that it's not an easy challenge.
Pressing CMD+V somewhere in the issue does not communicate the intention to upload a design. We need to capture the users intention somehow. Which UI control could be used by users to say that they want to paste? Examples: text field, checkbox, select empty/ghost design area…
Some unrelated thoughts about design uploads in general:
In the copy, I found it odd to have the “drag” method as the first one. Would it make sense to order the supported upload methods by most accessible to least accessible? For example: [Select] or drop an image to upload
I also found confusing that we're using different verbs upload and attach. Do we need attach?
Finally, would it make sense to communicate somewhere that you can upload multiple images at the same time? Maybe not, just wondering!
@mnearents This is an interesting interaction problem.
I quickly looked around to see if I could find some examples of how other services solved this:
Example - Pasteboard
Example - Filestack
I think a large part can be solved by updating the copy. Also, I think Filestack's interaction works pretty well, I would recommend playing around with it.
@pedroms I agree with the inconsistent verbs and I think as far as control, I think the drop zone could somehow be adapted. @lvanc those examples are really helpful. One constraint we have is that the copy/paste only works if you're hovering the design management area. So I'm wondering, what if the copy/paste text only showed up when hovering?
One constraint we have is that the copy/paste only works if you're hovering the design management area. So I'm wondering, what if the copy/paste text only showed up when hovering?
Hovering is nice because it makes the interaction more effortless, but we should not rely only on that event to allow users to paste. If someone is not using a pointer device, it will be hard for them to do that. What if we allow both hovering and selecting the drop zone somehow?
@jeldergl What flexibility do I have with buttons as far as colors? Like is there a dark UI version of the secondary button I can use? I'm creating hover states on the design thumbnails and this is what I have so far:
That secondary blue button with white background just isn't doing it for me 😆 Curious what you think.
Just wanted to say thanks a lot for thinking about the ability to directly paste images to upload them as designs. I'm currently not using the Design feature of GitLab, but the ability to have an image region in the clipboard and paste this into Comment fields and have it upload the image, is invaluable and a huge time-saver. It would be very cumbersome to have to create an image file (png/jpg) first, only to upload that to GitLab and then delete the image file locally again. What I regularly do is make a screenshot of the desktop ("printscreen"), paste this into Paint.Net, then select the relevant subregion of that screenshot, press CTRL+C, and then CTRL+V this into the GitLab Comments box. That is invaluable! If I had to save this as an image file first, I'd go crazy.
@patrikhuber you can already copy/paste to upload! I do it straight from screenshots. We're also looking at allowing you to convert embedded images to designs.
@cdybenko Yes I know! This was more of a "Thanks a lot for thinking about this, it's invaluable, please make sure this stays and is available wherever the user can upload/paste images" :-) 👍
@ntepluhina can we keep the plus button but simply have it activate the browser file explorer for uploading? I'm afraid without some sort of action it will be really unclear how to upload anything.
Also, I didn't realize that we completely lose the version history.