This commit is contained in:
35
DESIGN.md
35
DESIGN.md
@@ -64,19 +64,20 @@ Two stacked sections, each with its own header and count:
|
||||
|
||||
Each row, identical in both sections:
|
||||
|
||||
- A status letter on the far left: `A` added, `M` modified, `D` deleted, each in its own color (added green, modified amber, deleted red).
|
||||
- A status letter on the far left: `A` added, `M` modified, `D` deleted, each in its own color (added teal, modified amber, deleted amber-deep).
|
||||
- A file-type icon, then the file name.
|
||||
- The dimmed relative path, aligned to the right of the name.
|
||||
- Change counts at the far right: additions in green (`+N`) and deletions in red (`-N`).
|
||||
- Change counts at the far right: additions in teal (`+N`) and deletions in amber-deep (`-N`).
|
||||
- Deleted files are shown with the file name struck through and dimmed.
|
||||
- Rows have default, hover, and selected states. The selected row is the file currently open in the editor.
|
||||
|
||||
### Interactions
|
||||
|
||||
- **Left-click** a row opens that file in the editor.
|
||||
- **Left-click** a row opens that file in the editor, in **Actual**. It does not open the full-screen Diff.
|
||||
- **Right-click** a row opens a context menu, designed to grow over time:
|
||||
- In CHANGES (unstaged): **Stage file**, and **Discard changes**.
|
||||
- In STAGED: **Unstage file**.
|
||||
- In CHANGES (unstaged): **Open diff**, **Stage file**, and **Discard changes**.
|
||||
- In STAGED: **Open diff**, and **Unstage file**.
|
||||
- **Open diff** is the explicit way into the full-screen Diff (section 5).
|
||||
- **Hover quick action**: on hover, an unstaged row shows a `+` to stage it in one click, and a staged row shows a `-` to unstage it.
|
||||
- Optional section actions: **Stage all** on the CHANGES header and **Unstage all** on the STAGED header.
|
||||
- **Discard** is a destructive action. It asks for confirmation first (controlled by `git.confirmDiscard`, default on). Discarding reverts a modified file to its committed state and restores a deleted file.
|
||||
@@ -124,24 +125,26 @@ The third and widest column. Tabs on top, a view toolbar under them, and the cod
|
||||
A row under the tabs:
|
||||
|
||||
- On the left, a status summary for the active file, for example `Modified +6 -2`.
|
||||
- On the right, a four-segment control: **Original | Updated | Diff | Split**. The active segment is highlighted. This control appears only for files that have changes relative to their committed state. Its starting mode follows `git.defaultDiffMode` (default `Diff`).
|
||||
- On the right, a segmented control: **Actual | Original | Diff**, with a fourth segment, **Preview**, on markdown files only. The active segment is highlighted. This control appears only for files that have changes relative to their committed state. Its starting mode follows `git.defaultDiffMode` (default `Actual`).
|
||||
|
||||
### View modes
|
||||
|
||||
All four are presentations of the same change set for the file:
|
||||
All are presentations of the same change set for the file:
|
||||
|
||||
1. **Original**: the file as it was before the change, read-only. Changed and removed lines get a red bar in the left gutter. No inline plus or minus markers.
|
||||
2. **Updated**: the current, editable version of the file. Added and changed lines get a green bar in the left gutter.
|
||||
3. **Diff**: a single pane, unified inline diff. Removed lines are red with a `-`, added lines are green with a `+`, shown in sequence.
|
||||
4. **Split**: the editor expands to full screen, covering the other columns. The original file is on the left and the updated file is on the right, lines aligned. Removals are marked red on the left, additions green on the right. `Esc`, or a collapse control in the corner, returns to the normal layout and the previously active mode.
|
||||
1. **Actual**: the current, editable version of the file. It marks the changed lines in place, with a teal tint, a 2px teal left rule, and a teal line number. There is no sign column, no `+` or `-` pair, and no removed line inline. A pure deletion has no current line to mark, so the neighbouring current line carries a 2px amber-deep rule on its top edge, or on its bottom edge at the end of the file.
|
||||
2. **Original**: the file as it was before the change, read-only. Changed and removed lines get an amber-deep bar in the left gutter. No inline plus or minus markers.
|
||||
3. **Diff**: the editor expands to full screen, covering the other columns. The original file is on the left and the updated file is on the right, lines aligned. `Esc`, or a collapse control in the corner, returns to the normal layout and the previously active mode.
|
||||
4. **Preview**: markdown files only. It shows the rendered document instead of the source.
|
||||
|
||||
Shared rules: red always means removed or changed-from, green always means added or changed-to. Syntax highlighting stays on in all four modes. Line numbers follow `editor.lineNumbers` (default absolute).
|
||||
**In Actual, the removed lines appear on hover.** The pointer enters a marked line, and a panel opens over the agent and terminal column: 496px wide, with a 2px amber-deep left border. The panel holds the whole original file, and it scrolls so that the previous version of the hovered line sits level with the hovered line. The pointer leaves the line, and the panel closes. There is no click, no pin, and no animation.
|
||||
|
||||
Shared rules: teal is what the file holds now, amber-deep is what it held before. There is no green and no red anywhere. Syntax highlighting stays on in all modes. Line numbers follow `editor.lineNumbers` (default absolute).
|
||||
|
||||
### Editing behavior
|
||||
|
||||
- A file with no changes opens directly in a normal editable view with no view-mode control, since there is nothing to diff.
|
||||
- Editing follows the editor settings: indentation, indent width, trim trailing whitespace, insert final newline, word wrap, indent guides, whitespace rendering, and active-line highlight, all read from configuration (section 10).
|
||||
- **Word wrap** follows `editor.wordWrap`: `markdown` (default), `on`, or `off`. When it is on, a line too wide for the pane folds onto the next row instead of scrolling sideways. Only the first row of a folded line carries a line number; the rows below it stay blank. Split view never wraps, because its two panes align row by row.
|
||||
- **Word wrap** follows `editor.wordWrap`: `markdown` (default), `on`, or `off`. When it is on, a line too wide for the pane folds onto the next row instead of scrolling sideways. Only the first row of a folded line carries a line number; the rows below it stay blank. The hover panel folds at the same points as the editor, so each old line stays level with its current line. Diff never wraps, because its two panes align row by row.
|
||||
|
||||
### Right-click in code
|
||||
|
||||
@@ -152,8 +155,8 @@ Right-clicking inside the code area, with or without a selection, shows a contex
|
||||
|
||||
### File-state behavior in the view modes
|
||||
|
||||
- **Added file**: only the Updated content exists. Original is empty, Diff shows everything as added (green), Split shows an empty left and the file on the right.
|
||||
- **Deleted file**: only the Original content exists. Updated is empty, Diff shows everything as removed (red), Split shows the file on the left and an empty right.
|
||||
- **Added file**: only the Actual content exists. Actual marks every line as added, Original is empty, and Diff shows an empty left pane with the file on the right.
|
||||
- **Deleted file**: only the Original content exists. Actual is empty and has no line to mark, and Diff shows the file on the left with an empty right pane.
|
||||
- **Binary or unsupported file**: cannot be shown as editable text. The editor shows a short placeholder stating the file cannot be displayed, and the view-mode control is not shown.
|
||||
|
||||
---
|
||||
@@ -186,7 +189,7 @@ The bottom pane of the fourth column.
|
||||
A bar across the bottom of the window. All items are **display only** for now; none are clickable.
|
||||
|
||||
- On the left: the current branch and the working-tree line totals, for example `feat/payments-balance +50 -38`.
|
||||
- On the right: cursor position (`Ln, Col`), indentation (`Spaces: 4`), encoding (`UTF-8`), language (`PHP`), and the active view mode (`Diff`).
|
||||
- On the right: cursor position (`Ln, Col`), indentation (`Spaces: 4`), encoding (`UTF-8`), language (`PHP`), and the active view mode (`Actual`).
|
||||
|
||||
---
|
||||
|
||||
|
||||
Reference in New Issue
Block a user