erri120
commented
5 months ago In browsers, or at least Firefox, middle click will open a new tab, but it won't be selected, while shift+middle-click will open a new tab and select it.
Open Al12rs opened 5 months ago
erri120
commented
5 months ago In browsers, or at least Firefox, middle click will open a new tab, but it won't be selected, while shift+middle-click will open a new tab and select it.
erri120
commented
3 months ago When there are multiple panels opened will will have a new concept of "Active panel". This will be indicated in the UI with a change to the border style of that panel.
@captainsandypants is the border style in figma?
captainsandypants
commented
3 months ago It's likely that the border style will go from the current Neutral/Translucent/Weak to Neutral/Translucent/Strong when it is active. This style already exists in Figma and should exist for the app.
I haven't worked on the design for this yet though so the above idea isn't final.
Summary:
We have a custom workspace/panels system, now we need to define the ways the user should be able to open/create Pages inside it. Example: the user presses an item in the left menu, what should happen?
We can have multiple interaction types (Left Click, Middle Click, Control + Left click etc). We should decide how many we want to support of these and what their default behavior should be.
Some pages may want to overrule the default behavior, things like a Settings page, or ModInfo page. Should users be able to have custom behaviors per page?
Users may want to change the default behaviors, we should decide what they should be able to change and what options they should have available.
If we are opening a new page from an existing page, we have a starting Panel and Tab, so we have data that is not available from e.g. the left menu. So the behaviors there can differ.
Questions:
Answers:
List of inputs to support:
List of Behaviors we may want to support:
What to do if Page already exists?
Page exists and is exactly the same
Page exists but has a different content, e.g. ModInfo or Texture preview
What do we want the user to be able to customize?
What should the default behaviors be?
Do we need Page specific behaviors?
Design
Single panel in workspace When there is only 1 panel in a workspace, any time a new page is opened in the same workspace, it will always replace the current page, in the current tab, in that panel. This is whether it's opened through the left hand menu (unless that page is already in another panel, this behaviour is described in the Interactions section), or through a button/link in the current opened page, or any other method. As there is only 1 panel, there is no need for any UI changes to show that it is the "selected" panel.
Multiple panels in workspace When there are multiple panels opened will will have a new concept of a "Selected panel". There can only be 1 selected panel per workspace. This will be indicated in the UI with a change to the border style of that panel, as well as the border style of the left menu item (if applicable). The active panel behaviour will be the same as the single panel behaviour described above.
When there are multiple panels open in the workspace, these will be shown as "Active" items in the left menu, with the selected one being shown as "Selected" (UI component states for these are documented in Figma). When selecting any of these active panels from the left hand menu you will be changing them to "Selected".
Interactions that change which panel is selected Clicking anywhere inside a panel will make that panel selected. When a new panel is created, that panel is automatically set as selected. Changing to an open panel through the left hand menu. Keyboard shortcuts, described below.
Back and froward buttons for the selected tab/panel Global "Back" and "Forward" buttons in the Top bar which will allow the user to reload previous pages in the selected panel/tab. Both buttons are always visible but each can be in a disabled state if there is no page to go back to or forward to respectively.
Keyboard Shortcuts
CTRL+T - Opens a new tab and makes it active CTRL+W - Closes the active tab CTRL+TAB - Switch to the next open tab in the tab row (If last tab then go back to the first tab) CTRL+SHIFT+TAB - Switch to the previous open tab in the tab row (If it's the first tab then go back to the last tab) ALT+Q - Switch back to last active tab in the currently active panel CTRL+1 through CTRL+8 - Jump to a specific tab CTRL+9 - Go to the last tab at the end of the tab row CTRL+ALT+T - Open a new panel CTRL+ALT+W - Closes the open panel CTRL+ALT+Q - Switch to previous active panel CTRL+ALT+LEFT ARROW - Switch to the previous panel CTRL+ALT_RIGHT AROOW - Switch to the next panel CTRL+ALT+1 through CTRL+ALT+4 - Jump to a specific panel (Numbered in same order as they are added by default i.e. clockwise) ALT+LEFT ARROW - Go back a page in the current active tab ALT+RIGHT ARROW - Go forward a page in the current active tab ALT+HOME - Go to the "Home" workspace ALT+1 through ALT+8 - Jump to a specific game in the sidebar menu ALT+SHIFT+1 through to ALT+SHIFT+8 - Jump to a specific loadout for the game your currently viewing ALT+UP ARROW - Go to the workspace that's above the currently active workspace in the sidebar. ALT+DOWN ARROW - Go to the workspace that's below the currently active workspace in the sidebar.
Mouse shortcuts
MIDDLE CLICK - Open new background tab SHIFT+MIDDLE CLICK - Open new tab and make it active CTRL+CLICK - Open in background tab CTRL+SHIFT+CLICK - Open in tab and make it active CTRL+ALT+CLICK - Open in new panel and make it active