diff --git a/docs/04-editing-colors.md b/docs/04-editing-colors.md new file mode 100644 index 00000000..560a4120 --- /dev/null +++ b/docs/04-editing-colors.md @@ -0,0 +1,71 @@ +--- +title: Editing Colors +--- + +import React from 'react'; +import VideoPlayer from '@site/src/components/Video/player'; + +This section provides an overview of the core color editing features in **Phoenix Code**. + +--- + +## Inline Color Editor +**Inline Color Editor** lets you edit colors directly inside **Phoenix Code** using a color picker. + +### Accessing the Inline Color Editor +To open the **Inline Color Editor** just hover over the color you want to edit. +![Inline Color Editor](./images/editingColors/inlineColorEditor.png "Inline Color Editor") + +The **Inline Color Editor** provides you an `Edit` button, click on it to open the color picker. +![Color Picker](./images/editingColors/colorPicker.png "Color Picker") + + +### Understanding the Color Picker Dialog +The **Color Picker** dialog lets you edit the colors visually. Here are the key components: + +* **Color Spectrum**: The square on the left adjusts the brightness and intensity of the color. Drag the circle to select a specific shade. + +* **Hue Slider**: The vertical slider adjusts the main color (hue). Move it up or down to switch between colors like red, green, or blue. + +* **Transparency Slider**: The checkered slider adjusts the Alpha(transparency) of the color. Move it to set the color between fully solid and fully transparent. + +* **Color Preview**: On the top right, you’ll see a Color Preview. The preview is divided into two parts: + * *Right Side: Displays the new color being selected. It dynamically updates as you adjust the controls.* + * *Left Side: Displays the original color before editing.* + +* **Color Suggestions**: On the right, a list of already used colors in the file are displayed. Hovering over a color shows how many times it has been used in the file. This helps you pick consistent colors without needing to remember their codes. + +* **Code Format Selection**: Below the Color Spectrum we have the option to switch between different formats: + * *RGBA: Red, Green, Blue, and Alpha(transparency).* + * *Hex: Standard hexadecimal color code.* + * *HSLa: Hue, Saturation, Lightness, and Alpha.* + * *Hex 0x: Hexadecimal format with a 0x prefix, such as 0xFF5733.* + +* **Input Field**: At the bottom of the dialog, you can type in specific color values directly (e.g., #FF5733, rgb(255, 87, 51, 1), orange). + +### Visual Reference + + + +___ + +## Color Preview +The **Color Preview** feature displays the color(s) used in the current line in the gutter area. +![Color Preview](./images/editingColors/colorPreview.png "Color Preview") + +> A maximum of four colors can be displayed for a single line. + +### Hover Interaction +* Hovering over a color box highlights the corresponding color text in the editor with a background of the same color. +* If a container has multiple colors, the hovered color box enlarges for easier accessibility, and its color text gets highlighted with the same color. +![Color Preview Hover](./images/editingColors/colorPreviewHover.png "Color Preview Hover") + + +### Click Behavior +Clicking a color in the gutter moves the cursor to its position in the editor and opens the Color Picker for editing. + +### Enabling/Disabling Color Preview + +You can enable/disable the feature by updating the `colorPreview` property in the preferences file. [Click Here](./03-editing-text.md#editing-preferences) to read on how to edit the preferences. \ No newline at end of file diff --git a/docs/04-quick-start-project.md b/docs/05-quick-start-project.md similarity index 100% rename from docs/04-quick-start-project.md rename to docs/05-quick-start-project.md diff --git a/docs/05-popular-extensions.md b/docs/06-popular-extensions.md similarity index 100% rename from docs/05-popular-extensions.md rename to docs/06-popular-extensions.md diff --git a/docs/06-Features/01-live-preview.md b/docs/07-Features/01-live-preview.md similarity index 100% rename from docs/06-Features/01-live-preview.md rename to docs/07-Features/01-live-preview.md diff --git a/docs/06-Features/02-live-preview-settings.md b/docs/07-Features/02-live-preview-settings.md similarity index 100% rename from docs/06-Features/02-live-preview-settings.md rename to docs/07-Features/02-live-preview-settings.md diff --git a/docs/06-Features/03-php-live-preview.md b/docs/07-Features/03-php-live-preview.md similarity index 100% rename from docs/06-Features/03-php-live-preview.md rename to docs/07-Features/03-php-live-preview.md diff --git a/docs/06-Features/04-find-in-files.md b/docs/07-Features/04-find-in-files.md similarity index 100% rename from docs/06-Features/04-find-in-files.md rename to docs/07-Features/04-find-in-files.md diff --git a/docs/06-Features/05-keyboard-shortcuts.md b/docs/07-Features/05-keyboard-shortcuts.md similarity index 100% rename from docs/06-Features/05-keyboard-shortcuts.md rename to docs/07-Features/05-keyboard-shortcuts.md diff --git a/docs/06-Features/06-beautify-code.md b/docs/07-Features/06-beautify-code.md similarity index 100% rename from docs/06-Features/06-beautify-code.md rename to docs/07-Features/06-beautify-code.md diff --git a/docs/06-Features/07-editor-rulers.md b/docs/07-Features/07-editor-rulers.md similarity index 100% rename from docs/06-Features/07-editor-rulers.md rename to docs/07-Features/07-editor-rulers.md diff --git a/docs/06-Features/08-quick-edit.md b/docs/07-Features/08-quick-edit.md similarity index 100% rename from docs/06-Features/08-quick-edit.md rename to docs/07-Features/08-quick-edit.md diff --git a/docs/06-Features/09-themes.md b/docs/07-Features/09-themes.md similarity index 100% rename from docs/06-Features/09-themes.md rename to docs/07-Features/09-themes.md diff --git a/docs/06-Features/10-syntax-highlighting.md b/docs/07-Features/10-syntax-highlighting.md similarity index 100% rename from docs/06-Features/10-syntax-highlighting.md rename to docs/07-Features/10-syntax-highlighting.md diff --git a/docs/06-Features/11-recent-files.md b/docs/07-Features/11-recent-files.md similarity index 100% rename from docs/06-Features/11-recent-files.md rename to docs/07-Features/11-recent-files.md diff --git a/docs/06-Features/12-Problems Panel/01-html-lint.md b/docs/07-Features/12-Problems Panel/01-html-lint.md similarity index 100% rename from docs/06-Features/12-Problems Panel/01-html-lint.md rename to docs/07-Features/12-Problems Panel/01-html-lint.md diff --git a/docs/06-Features/12-Problems Panel/02-ESLint.md b/docs/07-Features/12-Problems Panel/02-ESLint.md similarity index 100% rename from docs/06-Features/12-Problems Panel/02-ESLint.md rename to docs/07-Features/12-Problems Panel/02-ESLint.md diff --git a/docs/06-Features/_category_.json b/docs/07-Features/_category_.json similarity index 100% rename from docs/06-Features/_category_.json rename to docs/07-Features/_category_.json diff --git a/docs/06-Features/images/QuickEdit/example.mp4 b/docs/07-Features/images/QuickEdit/example.mp4 similarity index 100% rename from docs/06-Features/images/QuickEdit/example.mp4 rename to docs/07-Features/images/QuickEdit/example.mp4 diff --git a/docs/06-Features/images/QuickEdit/quickedit.png b/docs/07-Features/images/QuickEdit/quickedit.png similarity index 100% rename from docs/06-Features/images/QuickEdit/quickedit.png rename to docs/07-Features/images/QuickEdit/quickedit.png diff --git a/docs/06-Features/images/QuickEdit/quickeditPanel.png b/docs/07-Features/images/QuickEdit/quickeditPanel.png similarity index 100% rename from docs/06-Features/images/QuickEdit/quickeditPanel.png rename to docs/07-Features/images/QuickEdit/quickeditPanel.png diff --git a/docs/06-Features/images/QuickEdit/quickeditcontext.png b/docs/07-Features/images/QuickEdit/quickeditcontext.png similarity index 100% rename from docs/06-Features/images/QuickEdit/quickeditcontext.png rename to docs/07-Features/images/QuickEdit/quickeditcontext.png diff --git a/docs/06-Features/images/QuickEdit/quickeditmenu.png b/docs/07-Features/images/QuickEdit/quickeditmenu.png similarity index 100% rename from docs/06-Features/images/QuickEdit/quickeditmenu.png rename to docs/07-Features/images/QuickEdit/quickeditmenu.png diff --git a/docs/06-Features/images/RecentFiles/recent-files.png b/docs/07-Features/images/RecentFiles/recent-files.png similarity index 100% rename from docs/06-Features/images/RecentFiles/recent-files.png rename to docs/07-Features/images/RecentFiles/recent-files.png diff --git a/docs/06-Features/images/Themes/create-theme.png b/docs/07-Features/images/Themes/create-theme.png similarity index 100% rename from docs/06-Features/images/Themes/create-theme.png rename to docs/07-Features/images/Themes/create-theme.png diff --git a/docs/06-Features/images/Themes/installation-successful.png b/docs/07-Features/images/Themes/installation-successful.png similarity index 100% rename from docs/06-Features/images/Themes/installation-successful.png rename to docs/07-Features/images/Themes/installation-successful.png diff --git a/docs/06-Features/images/Themes/installed-tab.png b/docs/07-Features/images/Themes/installed-tab.png similarity index 100% rename from docs/06-Features/images/Themes/installed-tab.png rename to docs/07-Features/images/Themes/installed-tab.png diff --git a/docs/06-Features/images/Themes/main-interface.png b/docs/07-Features/images/Themes/main-interface.png similarity index 100% rename from docs/06-Features/images/Themes/main-interface.png rename to docs/07-Features/images/Themes/main-interface.png diff --git a/docs/06-Features/images/Themes/remove-extension.png b/docs/07-Features/images/Themes/remove-extension.png similarity index 100% rename from docs/06-Features/images/Themes/remove-extension.png rename to docs/07-Features/images/Themes/remove-extension.png diff --git a/docs/06-Features/images/Themes/theme-template-github.png b/docs/07-Features/images/Themes/theme-template-github.png similarity index 100% rename from docs/06-Features/images/Themes/theme-template-github.png rename to docs/07-Features/images/Themes/theme-template-github.png diff --git a/docs/06-Features/images/Themes/themes-tab.png b/docs/07-Features/images/Themes/themes-tab.png similarity index 100% rename from docs/06-Features/images/Themes/themes-tab.png rename to docs/07-Features/images/Themes/themes-tab.png diff --git a/docs/06-Features/images/beautifyCode/Beautify-Code-after-save.png b/docs/07-Features/images/beautifyCode/Beautify-Code-after-save.png similarity index 100% rename from docs/06-Features/images/beautifyCode/Beautify-Code-after-save.png rename to docs/07-Features/images/beautifyCode/Beautify-Code-after-save.png diff --git a/docs/06-Features/images/beautifyCode/Context-Menu.png b/docs/07-Features/images/beautifyCode/Context-Menu.png similarity index 100% rename from docs/06-Features/images/beautifyCode/Context-Menu.png rename to docs/07-Features/images/beautifyCode/Context-Menu.png diff --git a/docs/06-Features/images/beautifyCode/bracketSameLine-false.png b/docs/07-Features/images/beautifyCode/bracketSameLine-false.png similarity index 100% rename from docs/06-Features/images/beautifyCode/bracketSameLine-false.png rename to docs/07-Features/images/beautifyCode/bracketSameLine-false.png diff --git a/docs/06-Features/images/beautifyCode/bracketSameLine-true.png b/docs/07-Features/images/beautifyCode/bracketSameLine-true.png similarity index 100% rename from docs/06-Features/images/beautifyCode/bracketSameLine-true.png rename to docs/07-Features/images/beautifyCode/bracketSameLine-true.png diff --git a/docs/06-Features/images/beautifyCode/singleAttributePerLine-false.png b/docs/07-Features/images/beautifyCode/singleAttributePerLine-false.png similarity index 100% rename from docs/06-Features/images/beautifyCode/singleAttributePerLine-false.png rename to docs/07-Features/images/beautifyCode/singleAttributePerLine-false.png diff --git a/docs/06-Features/images/beautifyCode/singleAttributePerLine-true.png b/docs/07-Features/images/beautifyCode/singleAttributePerLine-true.png similarity index 100% rename from docs/06-Features/images/beautifyCode/singleAttributePerLine-true.png rename to docs/07-Features/images/beautifyCode/singleAttributePerLine-true.png diff --git a/docs/06-Features/images/beautifyCode/singleQuotes-false.png b/docs/07-Features/images/beautifyCode/singleQuotes-false.png similarity index 100% rename from docs/06-Features/images/beautifyCode/singleQuotes-false.png rename to docs/07-Features/images/beautifyCode/singleQuotes-false.png diff --git a/docs/06-Features/images/beautifyCode/singleQuotes-true.png b/docs/07-Features/images/beautifyCode/singleQuotes-true.png similarity index 100% rename from docs/06-Features/images/beautifyCode/singleQuotes-true.png rename to docs/07-Features/images/beautifyCode/singleQuotes-true.png diff --git a/docs/06-Features/images/beautifyCode/trailingComma-all.png b/docs/07-Features/images/beautifyCode/trailingComma-all.png similarity index 100% rename from docs/06-Features/images/beautifyCode/trailingComma-all.png rename to docs/07-Features/images/beautifyCode/trailingComma-all.png diff --git a/docs/06-Features/images/beautifyCode/trailingComma-es5.png b/docs/07-Features/images/beautifyCode/trailingComma-es5.png similarity index 100% rename from docs/06-Features/images/beautifyCode/trailingComma-es5.png rename to docs/07-Features/images/beautifyCode/trailingComma-es5.png diff --git a/docs/06-Features/images/beautifyCode/trailingComma-none.png b/docs/07-Features/images/beautifyCode/trailingComma-none.png similarity index 100% rename from docs/06-Features/images/beautifyCode/trailingComma-none.png rename to docs/07-Features/images/beautifyCode/trailingComma-none.png diff --git a/docs/06-Features/images/find/dialog.png b/docs/07-Features/images/find/dialog.png similarity index 100% rename from docs/06-Features/images/find/dialog.png rename to docs/07-Features/images/find/dialog.png diff --git a/docs/06-Features/images/find/dropdown.png b/docs/07-Features/images/find/dropdown.png similarity index 100% rename from docs/06-Features/images/find/dropdown.png rename to docs/07-Features/images/find/dropdown.png diff --git a/docs/06-Features/images/find/fif.png b/docs/07-Features/images/find/fif.png similarity index 100% rename from docs/06-Features/images/find/fif.png rename to docs/07-Features/images/find/fif.png diff --git a/docs/06-Features/images/find/folder.png b/docs/07-Features/images/find/folder.png similarity index 100% rename from docs/06-Features/images/find/folder.png rename to docs/07-Features/images/find/folder.png diff --git a/docs/06-Features/images/find/inFolder.png b/docs/07-Features/images/find/inFolder.png similarity index 100% rename from docs/06-Features/images/find/inFolder.png rename to docs/07-Features/images/find/inFolder.png diff --git a/docs/06-Features/images/find/new-exclusion.png b/docs/07-Features/images/find/new-exclusion.png similarity index 100% rename from docs/06-Features/images/find/new-exclusion.png rename to docs/07-Features/images/find/new-exclusion.png diff --git a/docs/06-Features/images/find/search_in_files.png b/docs/07-Features/images/find/search_in_files.png similarity index 100% rename from docs/06-Features/images/find/search_in_files.png rename to docs/07-Features/images/find/search_in_files.png diff --git a/docs/06-Features/images/keyboard/assign.png b/docs/07-Features/images/keyboard/assign.png similarity index 100% rename from docs/06-Features/images/keyboard/assign.png rename to docs/07-Features/images/keyboard/assign.png diff --git a/docs/06-Features/images/keyboard/menu.png b/docs/07-Features/images/keyboard/menu.png similarity index 100% rename from docs/06-Features/images/keyboard/menu.png rename to docs/07-Features/images/keyboard/menu.png diff --git a/docs/06-Features/images/keyboard/panel.png b/docs/07-Features/images/keyboard/panel.png similarity index 100% rename from docs/06-Features/images/keyboard/panel.png rename to docs/07-Features/images/keyboard/panel.png diff --git a/docs/06-Features/images/keyboard/reset.png b/docs/07-Features/images/keyboard/reset.png similarity index 100% rename from docs/06-Features/images/keyboard/reset.png rename to docs/07-Features/images/keyboard/reset.png diff --git a/docs/06-Features/images/livePreview/browser-choice.png b/docs/07-Features/images/livePreview/browser-choice.png similarity index 100% rename from docs/06-Features/images/livePreview/browser-choice.png rename to docs/07-Features/images/livePreview/browser-choice.png diff --git a/docs/06-Features/images/livePreview/live-preview-settings-menu.png b/docs/07-Features/images/livePreview/live-preview-settings-menu.png similarity index 100% rename from docs/06-Features/images/livePreview/live-preview-settings-menu.png rename to docs/07-Features/images/livePreview/live-preview-settings-menu.png diff --git a/docs/06-Features/images/livePreview/livepreviewon.png b/docs/07-Features/images/livePreview/livepreviewon.png similarity index 100% rename from docs/06-Features/images/livePreview/livepreviewon.png rename to docs/07-Features/images/livePreview/livepreviewon.png diff --git a/docs/06-Features/images/livePreview/off.png b/docs/07-Features/images/livePreview/off.png similarity index 100% rename from docs/06-Features/images/livePreview/off.png rename to docs/07-Features/images/livePreview/off.png diff --git a/docs/06-Features/images/livePreview/on.png b/docs/07-Features/images/livePreview/on.png similarity index 100% rename from docs/06-Features/images/livePreview/on.png rename to docs/07-Features/images/livePreview/on.png diff --git a/docs/06-Features/images/livePreview/open.png b/docs/07-Features/images/livePreview/open.png similarity index 100% rename from docs/06-Features/images/livePreview/open.png rename to docs/07-Features/images/livePreview/open.png diff --git a/docs/06-Features/images/livePreview/popout.png b/docs/07-Features/images/livePreview/popout.png similarity index 100% rename from docs/06-Features/images/livePreview/popout.png rename to docs/07-Features/images/livePreview/popout.png diff --git a/docs/06-Features/images/livePreview/reload.png b/docs/07-Features/images/livePreview/reload.png similarity index 100% rename from docs/06-Features/images/livePreview/reload.png rename to docs/07-Features/images/livePreview/reload.png diff --git a/docs/06-Features/images/livePreview/settings-dialog.png b/docs/07-Features/images/livePreview/settings-dialog.png similarity index 100% rename from docs/06-Features/images/livePreview/settings-dialog.png rename to docs/07-Features/images/livePreview/settings-dialog.png diff --git a/docs/06-Features/images/livePreview/settings-gear.png b/docs/07-Features/images/livePreview/settings-gear.png similarity index 100% rename from docs/06-Features/images/livePreview/settings-gear.png rename to docs/07-Features/images/livePreview/settings-gear.png diff --git a/docs/06-Features/images/livePreview/settings-menu.png b/docs/07-Features/images/livePreview/settings-menu.png similarity index 100% rename from docs/06-Features/images/livePreview/settings-menu.png rename to docs/07-Features/images/livePreview/settings-menu.png diff --git a/docs/06-Features/images/phpLivePreview/phpCustomServer.png b/docs/07-Features/images/phpLivePreview/phpCustomServer.png similarity index 100% rename from docs/06-Features/images/phpLivePreview/phpCustomServer.png rename to docs/07-Features/images/phpLivePreview/phpCustomServer.png diff --git a/docs/06-Features/images/phpLivePreview/phpLivePreviewInAction.gif b/docs/07-Features/images/phpLivePreview/phpLivePreviewInAction.gif similarity index 100% rename from docs/06-Features/images/phpLivePreview/phpLivePreviewInAction.gif rename to docs/07-Features/images/phpLivePreview/phpLivePreviewInAction.gif diff --git a/docs/06-Features/images/phpLivePreview/xampp.png b/docs/07-Features/images/phpLivePreview/xampp.png similarity index 100% rename from docs/06-Features/images/phpLivePreview/xampp.png rename to docs/07-Features/images/phpLivePreview/xampp.png diff --git a/docs/06-Features/images/syntaxHighlighting/syntax-highlighting-add.png b/docs/07-Features/images/syntaxHighlighting/syntax-highlighting-add.png similarity index 100% rename from docs/06-Features/images/syntaxHighlighting/syntax-highlighting-add.png rename to docs/07-Features/images/syntaxHighlighting/syntax-highlighting-add.png diff --git a/docs/06-Features/images/syntaxHighlighting/syntax-highlighting-material-color-light-theme.png b/docs/07-Features/images/syntaxHighlighting/syntax-highlighting-material-color-light-theme.png similarity index 100% rename from docs/06-Features/images/syntaxHighlighting/syntax-highlighting-material-color-light-theme.png rename to docs/07-Features/images/syntaxHighlighting/syntax-highlighting-material-color-light-theme.png diff --git a/docs/06-Features/images/syntaxHighlighting/syntax-highlighting-monokai-dark-soda-theme.png b/docs/07-Features/images/syntaxHighlighting/syntax-highlighting-monokai-dark-soda-theme.png similarity index 100% rename from docs/06-Features/images/syntaxHighlighting/syntax-highlighting-monokai-dark-soda-theme.png rename to docs/07-Features/images/syntaxHighlighting/syntax-highlighting-monokai-dark-soda-theme.png diff --git a/docs/06-Features/images/syntaxHighlighting/syntax-highlighting.png b/docs/07-Features/images/syntaxHighlighting/syntax-highlighting.png similarity index 100% rename from docs/06-Features/images/syntaxHighlighting/syntax-highlighting.png rename to docs/07-Features/images/syntaxHighlighting/syntax-highlighting.png diff --git a/docs/images/editingColors/colorPicker.png b/docs/images/editingColors/colorPicker.png new file mode 100644 index 00000000..9b32f73d Binary files /dev/null and b/docs/images/editingColors/colorPicker.png differ diff --git a/docs/images/editingColors/colorPreview.png b/docs/images/editingColors/colorPreview.png new file mode 100644 index 00000000..d211c239 Binary files /dev/null and b/docs/images/editingColors/colorPreview.png differ diff --git a/docs/images/editingColors/colorPreviewHover.png b/docs/images/editingColors/colorPreviewHover.png new file mode 100644 index 00000000..4e652331 Binary files /dev/null and b/docs/images/editingColors/colorPreviewHover.png differ diff --git a/docs/images/editingColors/inlineColorEditor.png b/docs/images/editingColors/inlineColorEditor.png new file mode 100644 index 00000000..136c07fc Binary files /dev/null and b/docs/images/editingColors/inlineColorEditor.png differ