Upstream/waveterm
1
0
Fork 0
mirror of https://github.com/wavetermdev/waveterm.git synced 2024-12-22 16:48:23 +01:00
Code Issues Packages Projects Releases Wiki Activity

new keybindings format for widgets page (#1228)

Browse Source
This commit is contained in:
Mike Sawka 2024-11-07 14:31:43 -08:00 committed by GitHub
parent cf71380072
commit 9491b0ab81
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
1 changed files with 52 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

69
docs/docs/widgets.mdx
View File

@ -3,96 +3,131 @@ sidebar_position: 5
id: "widgets" id: "widgets"
title: "Widgets" title: "Widgets"
--- ---
import { Kbd } from "@site/src/components/kbd.tsx";
import { PlatformProvider, PlatformToggleButton } from "@site/src/components/platformcontext.tsx";
<PlatformProvider>
# Widgets # Widgets
Every individual Component is contained in its own widget. These can be added, removed, moved and resized. Each widget has its own header which can be right clicked to reveal more operations you can do with that widget. Every individual Component is contained in its own widget. These can be added, removed, moved and resized. Each widget has its own header which can be right clicked to reveal more operations you can do with that widget.
<PlatformToggleButton />
### How to Add a Widget ### How to Add a Widget
Adding a widget can be done using the widget bar on the right hand side of the window. This will add a widget of the selected type to the current tab. Adding a widget can be done using the widget bar on the right hand side of the window. This will add a widget of the selected type to the current tab.
### How to Close a Widget ### How to Close a Widget
Widgets can be closed by clicking the **<code><i className="fa-solid fa-sharp fa-xmark"/></code>** button on the right side of the header. Alternatively, the currently focused widget can be closed by pressing **`Cmd + w`**.
Widgets can be closed by clicking the **<code><i className="fa-solid fa-sharp fa-xmark"/></code>** button on the right side of the header. Alternatively, the currently focused widget can be closed by pressing <Kbd k="Cmd:w"/>
### How to Navigate Widgets ### How to Navigate Widgets
At most, it is possible to have one widget be focused. Depending on the type of widget, this allows you to directly interact with the content in that widget. A focused widget is always outlined with a distinct border. A widget may be focused by clicking on it. Alternatively, you can change the focused widget by pressing **<code>Ctrl + Shift + <i className="fa-regular fa-sharp fa-arrow-up"/></code>**, **<code>Ctrl + Shift + <i className="fa-regular fa-sharp fa-arrow-down"/></code>**, **<code>Ctrl + Shift + <i className="fa-regular fa-sharp fa-arrow-left"/></code>**, or **<code>Ctrl + Shift + <i className="fa-regular fa-sharp fa-arrow-right"/></code>** to navigate relative to the currently selected widget.
At most, it is possible to have one widget be focused. Depending on the type of widget, this allows you to directly interact with the content in that widget. A focused widget is always outlined with a distinct border. A widget may be focused by clicking on it. Alternatively, you can change the focused widget by pressing <Kbd k="Ctrl:Shift:Arrows"/> (Ctrl + Shift + Arrow Keys) to navigate relative to the currently selected widget.
### How to Magnify Widgets ### How to Magnify Widgets
Magnifying a widget will pop the widget out in front of everything else. You can magnify using the header icon, or with **`Cmd + m`**.
Magnifying a widget will pop the widget out in front of everything else. You can magnify using the header icon, or with <Kbd k="Cmd:m"/>.
### How to Reorganize Widgets ### How to Reorganize Widgets
By dragging and dropping their headers, widgets can be moved to different locations in the layout. This effectively allows you to reorganize your screen however you see fit. When dragging, you will see a preview of the widget that is being dragged. When the widget is over a valid drop point, the area where it would be moved to will turn green. Releasing the click will place the widget there and reflow the other widgets around it. If you see a green box cover half of two different widgets, the drop will place the widget between the two. If you see the green box cover half of one widget at the edge of the screen, the widget will be placed between that widget and the edge of the screen. If you see the green box cover one widget entirely, the two widgets will swap locations. By dragging and dropping their headers, widgets can be moved to different locations in the layout. This effectively allows you to reorganize your screen however you see fit. When dragging, you will see a preview of the widget that is being dragged. When the widget is over a valid drop point, the area where it would be moved to will turn green. Releasing the click will place the widget there and reflow the other widgets around it. If you see a green box cover half of two different widgets, the drop will place the widget between the two. If you see the green box cover half of one widget at the edge of the screen, the widget will be placed between that widget and the edge of the screen. If you see the green box cover one widget entirely, the two widgets will swap locations.
### How to Resize Widgets ### How to Resize Widgets
Hovering the mouse between two widgets changes your cursor to <i className="fa-sharp fa-arrows-left-right"/> or <i className="fa-sharp fa-arrows-up-down"/>; and reveals a green line dividing the widgets. By dragging and dropping this green line, you are able to resize the widgets adjacent to it. Hovering the mouse between two widgets changes your cursor to <i className="fa-sharp fa-arrows-left-right"/> or <i className="fa-sharp fa-arrows-up-down"/>; and reveals a green line dividing the widgets. By dragging and dropping this green line, you are able to resize the widgets adjacent to it.
## Types of Widgets ## Types of Widgets
### Term ### Term
The usual terminal you know and love. We add a few plugins via the `wsh` command that you can read more about further below. The usual terminal you know and love. We add a few plugins via the `wsh` command that you can read more about further below.
### Preview ### Preview
Preview is the generic type of widget used for viewing files. This can take many different forms based on the type of file being viewed. Preview is the generic type of widget used for viewing files. This can take many different forms based on the type of file being viewed.
You can use \`wsh view [path]\` from any Wave terminal window to open a preview widget with the contents of the specified path (e.g. `wsh view .` or `wsh view ~/myimage.jpg`). You can use \`wsh view [path]\` from any Wave terminal window to open a preview widget with the contents of the specified path (e.g. `wsh view .` or `wsh view ~/myimage.jpg`).
#### Directory #### Directory
When looking at a directory, preview will show a file viewer much like MacOS' *Finder* application or Windows' *File Explorer* application. This variant is slightly more geared toward software development with the focus on seeing what is shown by the `ls -alh` command.
When looking at a directory, preview will show a file viewer much like MacOS' _Finder_ application or Windows' _File Explorer_ application. This variant is slightly more geared toward software development with the focus on seeing what is shown by the `ls -alh` command.
##### View a New File ##### View a New File
The simplest way to view a new file is to double click its row in the file viewer. Alternatively, while the widget is focused, you can use the **<code><i className="fa-regular fa-sharp fa-arrow-up"/></code>** and **<code><i className="fa-regular fa-sharp fa-arrow-down"/></code>** arrow keys to select a row and press enter to preview the associated file.
The simplest way to view a new file is to double click its row in the file viewer. Alternatively, while the widget is focused, you can use the <Kbd k="ArrowUp" /> and <Kbd k="ArrowDown" /> arrow keys to select a row and press enter to preview the associated file.
##### View the Parent Directory ##### View the Parent Directory
In the directory view, this is as simple as opening the `..` file as if it were a regular file. This can be done with the method above. You can also use the keyboard shortcut **<code>Cmd + <i className="fa-regular fa-sharp fa-arrow-up"/></code>**.
In the directory view, this is as simple as opening the `..` file as if it were a regular file. This can be done with the method above. You can also use the keyboard shortcut <Kbd k="Cmd:ArrowUp"/>.
##### Navigate Back and Forward ##### Navigate Back and Forward
When looking at a file, you can navigate back by clicking the back button in the widget header or the keyboard shortcut **<code>Cmd + <i className="fa-regular fa-sharp fa-arrow-left"/></code>**. You can always navigate back and forward using **<code>Cmd + <i className="fa-regular fa-sharp fa-arrow-left"/></code>** and **<code>Cmd + <i className="fa-regular fa-sharp fa-arrow-right"/></code>**.
When looking at a file, you can navigate back by clicking the back button in the widget header or the keyboard shortcut <Kbd k="Cmd:ArrowLeft" />. You can always navigate back and forward using <Kbd k="Cmd:ArrowLeft" /> and <Kbd k="Cmd:ArrowRight" />.
##### Filter the List of Files ##### Filter the List of Files
While the widget is focused, you can filter by filename by typing a substring of the filename you're working for. To clear the filter, you can click the **<code><i className="fa-solid fa-sharp fa-xmark"/></code>** on the filter dropdown or press **`Esc`**.
While the widget is focused, you can filter by filename by typing a substring of the filename you're looking for. To clear the filter, you can click the **<code><i className="fa-solid fa-sharp fa-xmark"/></code>** on the filter dropdown or press <Kbd k="Escape" />.
##### Sort by a File Column ##### Sort by a File Column
To sort a file by a specific column, click on the header for that column. If you click the header again, it will reverse the sort order. To sort a file by a specific column, click on the header for that column. If you click the header again, it will reverse the sort order.
##### Hide and Show Hidden Files ##### Hide and Show Hidden Files
At the right of the widget header, there is an **<code><i className="fa fa-sharp fa-solid fa-eye"/></code>** button. Clicking this button hides and shows hidden files. At the right of the widget header, there is an **<code><i className="fa fa-sharp fa-solid fa-eye"/></code>** button. Clicking this button hides and shows hidden files.
##### Refresh the Directory ##### Refresh the Directory
At the right of the widget header, there is a refresh button **<code><i className="fa fa-sharp fa-solid fa-arrows-rotate" /></code>**. Clicking this button refreshes the directory contents. At the right of the widget header, there is a refresh button **<code><i className="fa fa-sharp fa-solid fa-arrows-rotate" /></code>**. Clicking this button refreshes the directory contents.
##### Navigate to Common Directories ##### Navigate to Common Directories
At the left of the widget header, there is a file icon **<code><i className="fa fa-sharp fa-solid fa-folder-open"/></code>**. Clicking and holding on this icon opens a menu where you can select a common folder to navigate to. The available options are *Home*, *Desktop*, *Downloads*, and *Root*.
At the left of the widget header, there is a file icon **<code><i className="fa fa-sharp fa-solid fa-folder-open"/></code>**. Clicking and holding on this icon opens a menu where you can select a common folder to navigate to. The available options are _Home_, _Desktop_, _Downloads_, and _Root_.
##### Open a New Terminal in the Current Directory ##### Open a New Terminal in the Current Directory
If you right click the header of the widget (alternatively, click the gear icon **<code><i className="fa fa-sharp fa-solid fa-cog"/></code>**), one of the menu items listed is **Open Terminal in New Widget**. This will create a new terminal widget at your current directory. If you right click the header of the widget (alternatively, click the gear icon **<code><i className="fa fa-sharp fa-solid fa-cog"/></code>**), one of the menu items listed is **Open Terminal in New Widget**. This will create a new terminal widget at your current directory.
##### Open a New Terminal in a Child Directory ##### Open a New Terminal in a Child Directory
If you want to open a terminal for a child directory instead, you can right click on that file's row to get the **Open Terminal in New Widget** option. Clicking this will open a terminal at that directory. Note that this option is only available for children that are directories. If you want to open a terminal for a child directory instead, you can right click on that file's row to get the **Open Terminal in New Widget** option. Clicking this will open a terminal at that directory. Note that this option is only available for children that are directories.
##### Open a New Preview for a Child ##### Open a New Preview for a Child
To open a new Preview Widget for a Child, you can right click on that file's row and select the **Open Preview in New Widget** option. To open a new Preview Widget for a Child, you can right click on that file's row and select the **Open Preview in New Widget** option.
##### Quick Look (MacOS only) ##### Quick Look (MacOS only)
On a MacOS host, it is possible to use the Quick Look feature from the directory preview. To do this, select the file you wish to view and press **`Space`**. This will open a preview of your file in a separate window. This preview can then be closed by pressing **`Space`** again. This currently supports the filetypes that can be accessed by the `qlmanage` command.
On a MacOS host, it is possible to use the Quick Look feature from the directory preview. To do this, select the file you wish to view and press <Kbd k="Space" />. This will open a preview of your file in a separate window. This preview can then be closed by pressing <Kbd k="Space" /> again. This currently supports the filetypes that can be accessed by the `qlmanage` command.
#### Markdown #### Markdown
Opening a markdown file will bring up a view of the rendered markdown. These files cannot be edited in the preview at this time. Opening a markdown file will bring up a view of the rendered markdown. These files cannot be edited in the preview at this time.
#### Images/Media #### Images/Media
Opening a picture will bring up the image of that picture. Opening a video will bring up a player that lets you watch the video. Opening a picture will bring up the image of that picture. Opening a video will bring up a player that lets you watch the video.
### Codeedit ### Codeedit
Opening most text files will open Codeedit to either view or edit the file. It is technically part of the Preview widget, but it is important enough to be singled out. Opening most text files will open Codeedit to either view or edit the file. It is technically part of the Preview widget, but it is important enough to be singled out.
After opening a codeedit widget, it is often useful to magnify it (**`Cmd + m`**) to get a larger view. You can then After opening a Codeedit widget, it is often useful to magnify it (<Kbd k="Cmd:m" />) to get a larger view. You can then use the hotkeys below to switch to edit mode, make your edits, save, and then use <Kbd k="Cmd:w" /> to close the widget (all without using the mouse!).
use the hotkeys below to switch to edit mode, make your edits, save, and then use **`Cmd + w`** to close the widget (all without using the mouse!).
#### Switch to Edit Mode #### Switch to Edit Mode
To switch to edit mode, click the edit button to the right of the header. This lets you edit the file contents with a regular monaco editor.
You can also switch to edit mode by pressing **`Cmd + e`**. To switch to edit mode, click the edit button to the right of the header. This lets you edit the file contents with a regular Monaco editor.
You can also switch to edit mode by pressing <Kbd k="Cmd:e" />.
#### Save an Edit #### Save an Edit
Once an edit has been made in **edit mode**, click the save button to the right of the header to save the contents. Once an edit has been made in **edit mode**, click the save button to the right of the header to save the contents.
You can also save by pressing **`Cmd + s`**. You can also save by pressing <Kbd k="Cmd:s" />.
#### Exit Edit Mode Without Saving #### Exit Edit Mode Without Saving
To exit **edit mode** without saving, click the cancel button to the right of the header. To exit **edit mode** without saving, click the cancel button to the right of the header.
You can also exit without saving by pressing **`Cmd + r`**. You can also exit without saving by pressing <Kbd k="Cmd:r" />.
</PlatformProvider>