Skip to content

Commit c93502a

Browse files
devvaannshdevvaannsh
committed
feat: move appearance related sections out of editing text
1 parent 1ee053c commit c93502a

4 files changed

Lines changed: 119 additions & 171 deletions

File tree

‎app-links.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -106,7 +106,7 @@ export const appLinks = [
106106
},
107107
{
108108
from: '/app-links/editor-rulers',
109-
to: '/docs/Features/editor-rulers',
109+
to: '/docs/customizing-editor#editor-rulers',
110110
},
111111
{
112112
from: '/app-links/find-in-files',

‎docs/03-customizing-editor.md‎

Lines changed: 118 additions & 36 deletions
Original file line numberDiff line numberDiff line change
@@ -3,14 +3,17 @@ title: Customizing the Editor
33
draft: true
44
---
55

6-
> **DRAFT — outline only.** Bullet points below capture what each subsection will cover. Convert to prose + screenshots/videos in a later pass. Remove this banner and the `draft: true` frontmatter when ready to publish.
6+
import React from 'react';
7+
import VideoPlayer from '@site/src/components/Video/player';
8+
9+
> **DRAFT — partial.** Themes, Sidebar Collapse Toggle, and Tabbed Sidebar are still outlined as bullet points and need to be written. Moved sections (Zoom, Line Height, Indent Guides, Editor Rulers, No-Distractions) still need a style cleanup pass per the no-weasel-words rule. Remove this banner and the `draft: true` frontmatter when ready to publish.
710
811
This section covers everything that lets you make **Phoenix Code** look and feel the way you want — from full themes down to individual visual toggles.
912

1013
---
1114

1215
## Themes
13-
*(Move existing content from `08-Features/13-themes.md`. Update with new themes shipped this release.)*
16+
*(To be written. Move existing content from `08-Features/13-themes.md`. Update with new themes shipped this release.)*
1417

1518
- What themes are and how they affect the editor
1619
- Built-in themes — list with screenshots
@@ -19,60 +22,136 @@ This section covers everything that lets you make **Phoenix Code** look and feel
1922
- **Dark Phoenix** (NEW this release)
2023
- All other built-in themes — list and short description
2124
- Switching themes
22-
- Via Extension Manager → Themes tab → Apply
23-
- Via `View` menu (if applicable)
2425
- Installing a new theme from the marketplace
2526
- Removing an installed theme
2627
- Creating your own theme — link to Theme Template repo
2728
- Preference key reference (where applicable)
2829

2930
---
3031

31-
## Zoom UI and Font Size
32-
*(Move existing content from `03-editing-text.md` → "Zoom and Font Size Adjustments".)*
32+
## Zoom and Font Size Adjustments
33+
The **Zoom UI and Fonts** options allow you to adjust the overall interface scale and font size.
34+
35+
### Zoom UI
36+
**Zoom In** :- Enlarges the overall UI, making all elements larger.
37+
38+
**Zoom Out** :- Reduces the overall UI, making all elements smaller.
39+
40+
### Font Size Adjustment
41+
**Increase Font Size** :- Enlarges the text in the editor without affecting other UI elements.
42+
43+
**Decrease Font Size** :- Reduces the text size in the editor without affecting other UI elements.
44+
45+
**Restore Font Size** :- Resets the editor text to its default size.
46+
47+
48+
### Using Zoom UI and Fonts Options
49+
#### Using Menu
50+
![Zoom Image](images/editingText/zoom.png "Click on View & hover over Zoom UI and Fonts")
51+
52+
1. Click on "View" in the menu bar.
53+
2. Hover over "Zoom UI and Fonts".
54+
3. Select the desired option from the submenu.
3355

34-
- What zoom does vs. font size adjustment (UI scale vs. editor text only)
35-
- Zoom UI: In / Out / current level shown in menu
36-
- Font Size: Increase / Decrease / Restore
37-
- **HUD zoom percentage overlay** (NEW) — appears briefly on zoom in/out
38-
- Using the menu (`View > Zoom UI and Fonts`)
39-
- Keyboard shortcuts table
56+
#### Using Keyboard Shortcuts
57+
* **Zoom In**: `Ctrl + +` (`Cmd + +` on MacOs)
58+
* **Zoom Out**: `Ctrl + -` (`Cmd + -` on MacOs)
59+
* **Increase Font Size**: `Ctrl + Shift + +` (`Cmd + Shift + +` on MacOs)
60+
* **Decrease Font Size**: `Ctrl + Shift + -` (`Cmd + Shift + -` on MacOs)
61+
* **Restore Font Size**: `Ctrl + Shift + (` (`Cmd + Shift + (` on MacOs)
62+
63+
*Note :- The current zoom level is displayed next to the **Zoom In** option.*
4064

4165
---
4266

4367
## Line Height
44-
*(Move existing content from `03-editing-text.md`.)*
4568

46-
- What it does — vertical spacing between lines
47-
- Adjusting via `View > Themes...` → Line Height slider (1 to 3, default 1.5)
48-
- Modifying via preferences — `themes.editorLineHeight`
49-
- Cross-link to new Preferences page
69+
The **Line Height** feature lets you customize the vertical spacing between lines of text in the editor.
70+
71+
### Adjusting Line Height
72+
73+
To adjust line height:
74+
1. Click on `View` in the menu bar.
75+
2. Navigate to the `Themes...` option.
76+
3. Use the Line Height slider to set a value between 1 and 3. The default is 1.5.
77+
![Line Height](./images/editingText/line-height.png "Go to View > Themes... to adjust line height")
78+
79+
Adjustments apply instantly, updating the editor dynamically.
80+
81+
### Modifying Line Height via Preferences
82+
83+
You can also modify the line height by updating the `themes.editorLineHeight` property in the preferences file. [Click Here](./editing-text#editing-preferences) to read on how to edit the preferences.
5084

5185
---
5286

5387
## Indent Guide Lines
54-
*(Move existing content from `03-editing-text.md`.)*
5588

56-
- What they are — vertical lines showing indentation levels
57-
- Enabling / disabling via `View > Indent Guide Lines`
58-
- Preference keys
59-
- `editor.indentGuides` — on/off
60-
- `editor.indentHideFirst` — hide the first guide line
61-
- Cross-link to new Preferences page
89+
![Indent Guide Lines Image](images/editingText/indent-display.png "The vertical lines are Indent Guide Lines")
90+
**Indent Guide Lines** are vertical lines that help visually align code blocks and indicate indentation levels. They assist in understanding code hierarchy and nested structures, improving overall readability.
91+
92+
### Enabling/Disabling Indent Guide Lines
93+
![Indent Guide Lines Enable Image](images/editingText/indent-lines.png "Click on View menu and toggle Indent Guide Lines option")
94+
95+
To enable or disable Indent Guide Lines, go to `View > Indent Guide Lines`.
96+
97+
### Editor Preferences for Indent Guides
98+
You can customize indent guide behavior in the editor preferences with the following options:
99+
100+
[Click here](./editing-text#editing-preferences) to read on how to edit the preferences.
101+
102+
**editor.indentGuides**: Set to `true` to display indent guide lines; set to `false` to hide them.
103+
**editor.indentHideFirst**: Set to `true` to hide the first indent guide line; set to `false` to display it.
62104

63105
---
64106

65107
## Editor Rulers
66-
*(Move existing content from `08-Features/03-editor-rulers.md`.)*
67108

68-
- What rulers are — vertical guides at column positions
69-
- How to configure (preferences / settings)
70-
- Common use cases (80-col / 120-col line length guidance)
109+
Add vertical column rulers to the editor to keep track of line lengths. By
110+
default, a single ruler is set at the 120-character position.
111+
112+
### Enabling and Disabling Rulers
113+
114+
Toggle the visibility of rulers through the `View > Rulers` menu option.
115+
116+
![Screenshot from 2024-04-27 12-42-50](https://github.com/phcode-dev/phoenix/assets/5336369/bb68fafa-395c-4da6-8aa2-a617918286ce)
117+
118+
### Adding Multiple Rulers
119+
120+
To add multiple rulers, edit the preferences file:
121+
122+
1. Navigate to `File > Open Preferences File`.
123+
1. Add the following entries to the JSON configuration:
124+
125+
```js
126+
{
127+
// existing json items
128+
"editor.rulers": [40, 80],
129+
"editor.rulerColors": ["green", "#f34d5a"],
130+
}
131+
```
132+
133+
These settings introduce two rulers at the 40th and 80th character positions,
134+
colored green and red respectively.
135+
136+
![image](https://github.com/phcode-dev/phoenix/assets/5336369/71b8b04c-d2ca-47b8-84bb-53cd0fb4593c)
137+
138+
#### Configuration Options
139+
140+
1. `editor.rulers` : Specifies an array of column numbers where vertical rulers
141+
will appear.
142+
1. `editor.rulerColors` : An optional array to set colors for each ruler,
143+
corresponding to the positions listed in `editor.rulers`.
144+
145+
#### Q: How do I add different rulers for each project?
146+
147+
To set up different rulers for individual projects, create a `.phcode.json` file
148+
in the root directory of each project. Include the same ruler configurations as
149+
shown in the example above.
71150

72151
---
73152

74153
## Sidebar Collapse Toggle (NEW)
75-
*(NEW feature — titlebar control shipped this release.)*
154+
*(To be written. NEW feature — titlebar control shipped this release.)*
76155

77156
- What it does — collapses/expands the main sidebar from the titlebar
78157
- Where the toggle button lives (titlebar, near app menu)
@@ -82,7 +161,7 @@ This section covers everything that lets you make **Phoenix Code** look and feel
82161
---
83162

84163
## Tabbed Sidebar (NEW)
85-
*(NEW feature shipped this release — main sidebar now supports tabs.)*
164+
*(To be written. NEW feature shipped this release — main sidebar now supports tabs.)*
86165

87166
- What it is — multiple panels accessible as tabs in the main sidebar
88167
- What tabs ship by default (Files, Git, Extensions, etc.)
@@ -92,13 +171,16 @@ This section covers everything that lets you make **Phoenix Code** look and feel
92171
---
93172

94173
## No-Distractions Mode
95-
*(Move existing content from `03-editing-text.md`.)*
174+
**No-Distractions Mode** helps you focus by minimizing visual clutter and hiding non-essential interface elements, creating a clean, minimalist editing environment.
175+
176+
### Activating No-Distractions Mode
177+
#### **Using Editor Interface** :
178+
Toggle between `No-Distractions` Mode and `Normal` Mode through `View > Menu` option.
179+
180+
![No Distractions Mode Image](images/editingText/no-distractions.png "Click on View tab in menu bar and select No Distractions")
96181

97-
- What it does — hides non-essential UI for focused editing
98-
- Toggle via `View > No-Distractions Mode`
99-
- Keyboard: `Shift + F11`
100-
- What gets hidden vs. what stays
101-
- (Note: Design Mode also affects UI visibility — link out to Design Mode docs once they exist)
182+
#### **Using Keyboard** :
183+
Press `Shift + F11` to toggle between `No-Distractions` Mode and `Normal` Mode.
102184

103185
---
104186

‎docs/03-editing-text.md‎

Lines changed: 0 additions & 89 deletions
Original file line numberDiff line numberDiff line change
@@ -100,81 +100,6 @@ With **Emmet**, you can write HTML and CSS faster using shorthand abbreviations.
100100

101101
---
102102

103-
## Zoom and Font Size Adjustments
104-
The **Zoom UI and Fonts** options allow you to adjust the overall interface scale and font size.
105-
106-
### Zoom UI
107-
**Zoom In** :- Enlarges the overall UI, making all elements larger.
108-
109-
**Zoom Out** :- Reduces the overall UI, making all elements smaller.
110-
111-
### Font Size Adjustment
112-
**Increase Font Size** :- Enlarges the text in the editor without affecting other UI elements.
113-
114-
**Decrease Font Size** :- Reduces the text size in the editor without affecting other UI elements.
115-
116-
**Restore Font Size** :- Resets the editor text to its default size.
117-
118-
119-
### Using Zoom UI and Fonts Options
120-
#### Using Menu
121-
![Zoom Image](images/editingText/zoom.png "Click on View & hover over Zoom UI and Fonts")
122-
123-
1. Click on "View" in the menu bar.
124-
2. Hover over "Zoom UI and Fonts".
125-
3. Select the desired option from the submenu.
126-
127-
#### Using Keyboard Shortcuts
128-
* **Zoom In**: `Ctrl + +` (`Cmd + +` on MacOs)
129-
* **Zoom Out**: `Ctrl + -` (`Cmd + -` on MacOs)
130-
* **Increase Font Size**: `Ctrl + Shift + +` (`Cmd + Shift + +` on MacOs)
131-
* **Decrease Font Size**: `Ctrl + Shift + -` (`Cmd + Shift + -` on MacOs)
132-
* **Restore Font Size**: `Ctrl + Shift + (` (`Cmd + Shift + (` on MacOs)
133-
134-
*Note :- The current zoom level is displayed next to the **Zoom In** option.*
135-
136-
---
137-
138-
## Line Height
139-
140-
The **Line Height** feature lets you customize the vertical spacing between lines of text in the editor.
141-
142-
### Adjusting Line Height
143-
144-
To adjust line height:
145-
1. Click on `View` in the menu bar.
146-
2. Navigate to the `Themes...` option.
147-
3. Use the Line Height slider to set a value between 1 and 3. The default is 1.5.
148-
![Line Height](./images/editingText/line-height.png "Go to View > Themes... to adjust line height")
149-
150-
Adjustments apply instantly, updating the editor dynamically.
151-
152-
### Modifying Line Height via Preferences
153-
154-
You can also modify the line height by updating the `themes.editorLineHeight` property in the preferences file. [Click Here](#editing-preferences) to read on how to edit the preferences.
155-
156-
---
157-
158-
## Indent Guide Lines
159-
160-
![Indent Guide Lines Image](images/editingText/indent-display.png "The vertical lines are Indent Guide Lines")
161-
**Indent Guide Lines** are vertical lines that help visually align code blocks and indicate indentation levels. They assist in understanding code hierarchy and nested structures, improving overall readability.
162-
163-
### Enabling/Disabling Indent Guide Lines
164-
![Indent Guide Lines Enable Image](images/editingText/indent-lines.png "Click on View menu and toggle Indent Guide Lines option")
165-
166-
To enable or disable Indent Guide Lines, go to `View > Indent Guide Lines`.
167-
168-
### Editor Preferences for Indent Guides
169-
You can customize indent guide behavior in the editor preferences with the following options:
170-
171-
[Click here](#editing-preferences) to read on how to edit the preferences.
172-
173-
**editor.indentGuides**: Set to `true` to display indent guide lines; set to `false` to hide them.
174-
**editor.indentHideFirst**: Set to `true` to hide the first indent guide line; set to `false` to display it.
175-
176-
---
177-
178103
## File Encoding
179104
**File encoding** is the method used to represent text in a file by converting characters into bytes. We need it to ensure that text is displayed correctly across different platforms and to handle special characters or symbols. Phoenix Code Editor supports multiple file encoding formats.
180105

@@ -282,20 +207,6 @@ You can adjust the tab size width or number of spaces by clicking the value in t
282207

283208
---
284209

285-
## No-Distractions Mode
286-
**No-Distractions Mode** helps you focus by minimizing visual clutter and hiding non-essential interface elements, creating a clean, minimalist editing environment.
287-
288-
### Activating No-Distractions Mode
289-
#### **Using Editor Interface** :
290-
Toggle between `No-Distractions` Mode and `Normal` Mode through `View > Menu` option.
291-
292-
![No Distractions Mode Image](images/editingText/no-distractions.png "Click on View tab in menu bar and select No Distractions")
293-
294-
#### **Using Keyboard** :
295-
Press `Shift + F11` to toggle between `No-Distractions` Mode and `Normal` Mode.
296-
297-
---
298-
299210
## Editing Preferences
300211
You can personalize Phoenix to suit your workflow by adjusting the preferences.
301212

‎docs/08-Features/03-editor-rulers.md‎

Lines changed: 0 additions & 45 deletions
This file was deleted.

0 commit comments

Comments
 (0)