Visual clipboard

[amyjko]

What are you trying to do that you can't?

Create a place for drag and drop, cut, and copy to place code so that there's a place to temporarily store code.

What is your idea?

See below for design ideas.

[kelliannr]

KelliAnn Ramirez - kelliannr

[meganht]

Megan Tran (meganht)

[amyjko]

Hi @kelliannr and @meganht,

It's the end of the quarter, so please post an update on this issue. Things to consider:

• Should you still be the assignee? (If you're planning on working on it, yes! Submit a comment explaining your plans. If not, then unassign yourself, so others are eligible to grab it).
• Do you have any work products that are hosted outside of GitHub? Embed them in this issue, so others can build off of them.
• Are there any branches associated with this issue? Please link to them in the issue.

If there's nothing to change above, then at least post a comment indicating that you've seen this. Thanks!

[kelliannr]

Hello, me and Megan are still planning on working on it. I'll copy paste our document with our design outlined when I get home. Additionally, we have a Figma file that we've been working on, so I'll also post the link to it here.

[amyjko]

Thanks for the update!

[kelliannr]

Link to edit: https://www.figma.com/file/Xv2enfCljOL4QZNLu2BycH/Wordplay%3A-Visual-Clipboard?type=design&node-id=0%3A1&mode=design&t=3izdfIAfTbLUaJOw-1

Link to prototype: https://www.figma.com/proto/Xv2enfCljOL4QZNLu2BycH/Wordplay%3A-Visual-Clipboard?page-id=0%3A1&type=design&node-id=236-236&viewport=-614%2C-1265%2C0.25&t=btRW3SXUGCi1ofdP-1&scaling=min-zoom&starting-point-node-id=236%3A236&show-proto-sidebar=1&mode=design

Problem When developing code, it’s easy for workspaces to be cluttered due to trial and error of programming. Commenting code can also make the actual code cluttered and hard to read. Eventually, you may end up with a bunch of unlabeled, commented code and you can’t tell what is the actual code that works and what is dud. Plus, once you have code that works, you probably have a lot of code cleaning up to do, which isn’t fun.

Solution The visual clipboard provides a platform detached from the program itself to store and preserve certain sequences of code. This lets users be able to save code that, while not necessarily fitting into the program yet, they can reference at a later time when needed.

This would be found on the right side of the screen when the user wishes to use the clipboard feature. Having it on the right side will enforce that the user’s action is more deliberate when having their mouse over there (compared to it being on the left side with the rest of the commands)

Visual Clipboard Features Adding code All code blocks will be defaulted to the most recent ones being at the top of the list. There are two ways for the user to save code in the clipboard.

1. Click and Drag code

• Drag and drop a selection of code to the right side of the screen to trigger the clipboard to automatically pop out

• Place in the boxed area to automatically save the code

  

• The clipboard will remain opened until the user manually exits out of the clipboard using the back arrow button at the top right of the clipboard

  

2. Manually Add code

• Click the boxed area to manually add code

  

• Opens a separate window within the clipboard, allowing the user to manually type in or paste code to save

  

• They additionally have the option to title the code they save. No title will automatically default to “Untitled”, “Untitled 2”, “Untitled 3”, etc.

• This new code will be shown at the top of the list underneath pinned code blocks

Saved Section Stores all code that the user inputs. This would be manually sorted by first “Pinned” codes, then it will sort by the most recently added

Code Blocks

• All code that gets saved in this section will appear as a code block. Includes the date created, a pin icon (if applicable), and the ability to expand the block to view the entire code
• The title of what the user saves will be displayed, along with a functional arrow (“^”) on its left side to view the entire code

Options (Gear icon) The following are options the user has for each code block in the “Saved” section:

• Edit Code: Allows the user to rename the title of the saved code, or edit the code directly
• Copy Code: Copies the entire code into the user’s personal clipboard
• Duplicate: Makes a copy of the code block the user has selected
• Pin: Selecting this option will automatically move the code to the top of “Saved”. The code block will have a pin icon next to it
• Unpin: The code will move back down to its original spot before it got pinned
• Delete: Removes the selected code from the clipboard

“Clear All” Button Removes all code in the “Saved” Section”

A pop up window will open, asking the user is sure they want to clear everything

[amyjko]

Thanks @kelliannr! This is a good initial exploration. It seems like the concept you went with was more of a snippet library than a clipboard. A clipboard interacts with the copy and paste commands, storing a single snippet, whereas this design is more of a library of snippets. That's an interesting direction to explore.

I have few points of feedback, to help us iterate.

• As noted in the design workflow in the wiki, design specifications go in the body of the issue, not a comment. Please move everything to the main body of this issue and delete the comment, so it can be easily found by future contributors.
• Is this library of items stored at the project, user, or device level? (And what's the rationale for your choice?)
• Why isn't the clipboard content based on the existing clipboard in the interface (the copy and paste feature, which stores one snippet at a time)? It seems like this is entirely separate from that, which adds extra complexity, and doesn't integrate smoothly with it.
• Can you define "right side"? The project view is composed of a set of tiles that can be positioned in different places depending on the size of the window (sometimes the code is on the bottom, sometimes the left, and in the free layout, tiles can be independent windows). Is this a new tile or is it an area embedded in some existing tile? What is it to the right of in the three different layouts?
• The back arrow button doesn't follow the conventions of the rest of the interface (e.g., having buttons on the left, using the same icon for back). I'm also unclear on why it's framed as a "back" button; isn't it just closing the clipboard view, not navigating "back" anywhere?
• There's an asymmetry between the "Click to add" route and the drag and drop route. The first asks for a name, the second does not. Why the inconsistency?
• What does the "Edit Code" menu option do? Does it show the same dialog as "Click to add", or something else?
• For the settings menu, why a menu, and why words instead of icons? The rest of the interface doesn't use menus for anything (because of their accessibility issues), and doesn't use words, to reduce localization complexity. Is there a reason these needs to break these conventions, or could it be a toolbar, like everything else in the interface?
• What is the rationale for the "duplicate" feature? Why would someone want to duplicate a snippet?

I look forward to the next iteration!

[amyjko]

It's the end of Winter! Please provide an update on this issue, including:

• Whether you plan to continue work on it
• If you do not, 1) provide a detailed update of its status, 2) add any unfinished work, 3) list any any unmerged branches, and 4) unassign yourself, so someone else can take over the task. Please leave the issue in better shape than you found it, helping future contributors to start from where you left off.

If you do plan to continue work on it, carry on. Otherwise, thank you for your contributions!

[amyjko]

No reply :( Unassigning @meganht.

[SathvikCookie]

Hey @amyjko, I'd like to work on this issue, can I be assigned?

[amyjko]

Sure. Looks like the last folks that worked on this didn't finish their design, so pick up from there they stopped?