QOL changes
This commit is contained in:
parent
56c7c163a2
commit
22e0852ae7
5 changed files with 23 additions and 4 deletions
|
|
@ -2,8 +2,9 @@ import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
|
||||||
import { formatShortcut } from "../../../features/utils/string.js";
|
import { formatShortcut } from "../../../features/utils/string.js";
|
||||||
import styles from "../Actions.module.css";
|
import styles from "../Actions.module.css";
|
||||||
import { ImagePreview } from "../../applications/file-explorer/directory-list/ImagePreview.jsx";
|
import { ImagePreview } from "../../applications/file-explorer/directory-list/ImagePreview.jsx";
|
||||||
|
import { memo } from "react";
|
||||||
|
|
||||||
export function ClickAction({ actionId, label, shortcut, onTrigger, icon }) {
|
export const ClickAction = memo(({ actionId, label, shortcut, onTrigger, icon }) => {
|
||||||
return (<button key={actionId} className={styles.Button} tabIndex={0} onClick={onTrigger}>
|
return (<button key={actionId} className={styles.Button} tabIndex={0} onClick={onTrigger}>
|
||||||
<span className={styles.Label}>
|
<span className={styles.Label}>
|
||||||
{icon && <div className={styles.Icon}>
|
{icon && <div className={styles.Icon}>
|
||||||
|
|
@ -16,4 +17,4 @@ export function ClickAction({ actionId, label, shortcut, onTrigger, icon }) {
|
||||||
</span>
|
</span>
|
||||||
{shortcut && <p className={styles.Shortcut}>{formatShortcut(shortcut)}</p>}
|
{shortcut && <p className={styles.Shortcut}>{formatShortcut(shortcut)}</p>}
|
||||||
</button>);
|
</button>);
|
||||||
}
|
});
|
||||||
|
|
@ -10,6 +10,7 @@ import { ClickAction } from "../../actions/actions/ClickAction.jsx";
|
||||||
import { faThumbTack, faTimes } from "@fortawesome/free-solid-svg-icons";
|
import { faThumbTack, faTimes } from "@fortawesome/free-solid-svg-icons";
|
||||||
import { SettingsManager } from "../../../features/settings/settingsManager.js";
|
import { SettingsManager } from "../../../features/settings/settingsManager.js";
|
||||||
import { removeFromArray } from "../../../features/utils/array.js";
|
import { removeFromArray } from "../../../features/utils/array.js";
|
||||||
|
import AppsManager from "../../../features/applications/applications.js";
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* @param {object} props
|
* @param {object} props
|
||||||
|
|
@ -24,6 +25,9 @@ export const AppButton = memo(({ app, windowsManager, modalsManager, pins, activ
|
||||||
const settingsManager = useSettingsManager();
|
const settingsManager = useSettingsManager();
|
||||||
const { onContextMenu } = useContextMenu({ modalsManager, Actions: (props) =>
|
const { onContextMenu } = useContextMenu({ modalsManager, Actions: (props) =>
|
||||||
<Actions avoidTaskbar={false} {...props}>
|
<Actions avoidTaskbar={false} {...props}>
|
||||||
|
<ClickAction label={app.name} icon={AppsManager.getAppIconUrl(app.id)} onTrigger={() => {
|
||||||
|
windowsManager.open(app.id);
|
||||||
|
}}/>
|
||||||
<ClickAction label={isPinned ? "Unpin from taskbar" : "Pin to taskbar"} icon={faThumbTack} onTrigger={() => {
|
<ClickAction label={isPinned ? "Unpin from taskbar" : "Pin to taskbar"} icon={faThumbTack} onTrigger={() => {
|
||||||
const newPins = [...pins];
|
const newPins = [...pins];
|
||||||
if (isPinned) {
|
if (isPinned) {
|
||||||
|
|
|
||||||
|
|
@ -47,9 +47,16 @@ export function SearchMenu({ active, setActive, searchQuery, setSearchQuery, inp
|
||||||
classNames.push(styles.Active);
|
classNames.push(styles.Active);
|
||||||
|
|
||||||
const onKeyDown = (event) => {
|
const onKeyDown = (event) => {
|
||||||
if (event.key === "f" && event.ctrlKey) {
|
if ((event.key === "f" || event.key === "g") && event.ctrlKey && !active) {
|
||||||
event.preventDefault();
|
event.preventDefault();
|
||||||
setActive(true);
|
setActive(true);
|
||||||
|
} else if (event.key === "Escape" && active) {
|
||||||
|
event.preventDefault();
|
||||||
|
setActive(false);
|
||||||
|
} else if (event.key === "Enter" && active) {
|
||||||
|
event.preventDefault();
|
||||||
|
windowsManager.open(apps[0].id);
|
||||||
|
setActive(false);
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -51,4 +51,8 @@
|
||||||
outline: none;
|
outline: none;
|
||||||
font-family: inherit;
|
font-family: inherit;
|
||||||
font-size: inherit;
|
font-size: inherit;
|
||||||
|
}
|
||||||
|
|
||||||
|
.Container-inner > div > button:first-child {
|
||||||
|
background-color: var(--taskbar-button-hover-color);
|
||||||
}
|
}
|
||||||
|
|
@ -139,7 +139,10 @@ export const WindowView = memo(({ id, app, size, position, onInteract, options,
|
||||||
height: maximized ? null : startSize.y,
|
height: maximized ? null : startSize.y,
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
<div className={`${styles.Header} Window-handle`} onContextMenu={onContextMenu}>
|
<div className={`${styles.Header} Window-handle`} onContextMenu={onContextMenu} onDoubleClick={(event) => {
|
||||||
|
setMaximized(!maximized);
|
||||||
|
focus(event, true);
|
||||||
|
}}>
|
||||||
<ReactSVG
|
<ReactSVG
|
||||||
className={styles["Window-icon"]}
|
className={styles["Window-icon"]}
|
||||||
src={iconUrl}
|
src={iconUrl}
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue