marcusolsson/obsidian-projects

Epic: Table editing experience

Acylation opened this issue · 3 comments

Acylation commented

Table displays the items in a plain way, through which we can edit items efficiently. I have some ideas on how to enhance editability of the table view. Generally, an 'Excel/Google sheets like' table view is expected. The projects tab in GitHub is also a good reference

Major improvement: Accept keyboard input directly and cover the exist value

  • For text variables, directly edit and cover cells' contents by simply typing under 'view mode'
  • For date variables, recon keyboard inputs in several standard formats or YAML-supported format only, then parse and display it
    • For example, when I type in "2022-11-23" and press enter, the YAML front-matter is modified and the cell get a date value
    • In case of a non-date input, a criterion should be add right before exit the editing mode to abandon incorrect inputs.
  • For Boolean variables, press the spacebar to switch. (Only a suggestion, there may be a better design)
  • For list/array cells, retype all members separated by comma might be disturbing. I'll mention it below, together with Multi-select cells
  • Clear a cell's content by pressing 'delete' button
  • Backspace should clear the content and activate the cell

Major improvement: Better keyboard shortcuts

  • Apply Ctrl+C/V/X to date, Boolean, list cells by directly copy YAML string to clipboard and another file
  • Apply Ctrl+F/H to search and replace. It may help batch change a key-value. For example, now I use "unplanned" to describe a some-day item, and if I want to change it into "backlog", Ctrl+H may help. (Less important)
  • Set Ctrl+Z and Ctrl+Y as undo and redo, respectively. (It might require an undo stack across files/notes. I wonder if obsidian provides the API)
  • Set Ctrl+Space as "create new note". If there's a preference on default filename and template, notes can be added without modals. It would be quite appreciated if the filenames are also editable

Idea

  • Issue: Refactor Parser, to get the exact YAML string and then parse

Major improvement: Adjust the key 'Enter', 'Escape' and introduce 'F2' (as in Excel)

  • When pressing 'enter' under view mode, the cursor moves down rather than switch to the 'edit mode'. (In GitHub projects tab, press enter under view mode will switch to edit mode though, cause there are more types of variables to deal with than excel. I don't prefer this design actually.)
  • When pressing 'enter' under edit mode, changes are checked and accepted/abandoned, then the cursor moves down rather than stay on the origin cell. (Excel and GitHub projects tab both apply this)
  • "Shift + Enter" only reverse the moving direction, but not the function. Just like "Tab" and "Shift + Tab"
  • When pressing 'escape' under edit mode, changes are abandoned rather than accepted, and the cursor keeps focusing on the origin cell
  • Pressing 'F2' leads to a stronger edit mode. The insert cursor will be placed at the end of the exist string for appending, and the arrow keys are set to navigate between characters in the cell only, rather than exit and move. Tab keeps its original function to exit edit mode and move next/prev, and enter is always a standart way to confirm a edit.
    • In addition, it might be very useful to surf between tags by shift + arrowkeys, while using only arrowkey to surf by character.

Minor: Single-select/Multi-select fields support and corresponding keyborad events

  • "Priority" or "Status" are common single-select fields. The available key-value list for the whole project can be aquired during loading by traversing through all items. Each item only have one value among them. Once single-select fields be supported, there should be a better input way. A combobox-like component is expected, here's how it works
    • Activate the cell and show the list
      • Activate the cell by a single click on the triangle button
      • Activate the cell by double click (click after setting cursor focus on) on the blank area of the cell
      • Activate the cell by any character typed by keyboard, and input it to filter the options
    • The text in combobox is used to filter the values, and always provide an option called 'create [new option name]'
    • Float mouse to navigate the cursor, or switch between options by '↑/up' or '↓/down'. Single click on the option or press 'Enter' to confirm and exit edit mode
  • "Tags" or "Assignees" are common multi-select fields. Also, the full available key value list is aquired by traversing through items. However, each file will have multiple options.
    • Activating, typing and navigating act the same as single-select
    • Scheme1: list with a checkbox
      • Single click on the option or press 'Enter' to add/remove an value
      • Single click outside, or click on a confirm button to accept input and exit edit mode
    • Scheme2: one-by-one insert tags (A combination of the "list" cells and zotero's quick add combo-box)
      • Insert item to the textbox by single click or press 'Enter' on the item, and in textbox they shows like a "tag". List would be closed and the textbox remains. Press enter or click outside/button to confirm
      • To add another value, directly type in a new one, or click the "add" mark next to the tag, which will call out the list again
      • Delete item by backspace or click the cross mark on the tag

note: hover delete is better than trigger editing -> delete

Related Issues/PRs:

Minor improvement: Rows and Columns operations

  • Select rows(files) to batch delete/archive/exclude files
  • Select cols(fields) to batch delete/hide/freeze the view/protect from edit or other operations
  • Add a row to add a file as default (this already exist)
  • Add a column to add a field
  • Column settings
    • Declear a type casting
    • Add a new available value outside the files, and store it in project-level
      • For example, for a status column, I may temporarily don't have anything done, but a "done" value is definetly needed.
    • Drag to sort capable values in the column drop-down

Related Issues/PRs:

Acylation commented

Please let me know if there is any practicable design. I will submit a feature request to track it.

In addition, I've just set up the environment and ready to do some coding lol. I'd like to add some features mentioned above. As I'm new to web development and only have basic cpp knowledge, it may take some time for me to keep up with the rapid iteration _(:зゝ∠)_.

marcusolsson commented

Wow! This is amazing feedback! 😍

My vision for the Table view is to offer a simple but enjoyable experience for everyone, and not just power users. I love that most, if not all, of your suggestions are subtle improvements that will tighten up the experience without bloating the interface with configuration options.

There's a lot of good stuff in here that needs to broken out into separate issues. Let's turn this into an Epic issue where we can discuss the editing experience in the table view, and collect related issues!

Heads-up, I'll have limited availability for the rest of the year, so I don't know when I'll be able to give you more detailed feedback.

(The single/multi select fields sounds related to #76)

Acylation commented

Yeah, there are a lot of issues included. I will split them into individual feature requests and find out ways to implement. New issues are added only to describe the feature design more detailed and inspire discussions. Hope that won't bother😉. Some demo versions can be expected if I go through web developments and exist codes smoothly.

The single/multi select fields sounds related to #76

The enhancement of type system is a vital precondition of these fields, certainly they are in related. Presently ”list“ field can be used as a model to test the corresponding UI components, only a expedient method.

Thanks for your kindly reply and great efforts on the wonderful plugin, it helps me set up a more effecient workflow. Take cares and enjoy the precious holiday time!💕 Also I will "enjoy" the finals🤣