Skip to content

Commit

Permalink
A lot of ui tweaking toward having the editor not hurt
Browse files Browse the repository at this point in the history
  • Loading branch information
obra committed Feb 7, 2024
1 parent cd85290 commit a6e4503
Show file tree
Hide file tree
Showing 15 changed files with 249 additions and 101 deletions.
4 changes: 3 additions & 1 deletion package.json
Original file line number Diff line number Diff line change
Expand Up @@ -86,7 +86,7 @@
"@emotion/styled": "^11.8.1",
"@gatsbyjs/reach-router": "^1.3.6",
"@mui/base": "^5.0.0-beta.9",
"@mui/icons-material": "^5.14.3",
"@mui/icons-material": "^5.15.8",
"@mui/lab": "^5.0.0-alpha.124",
"@mui/material": "^5.14.3",
"@mui/system": "^5.14.3",
Expand All @@ -111,11 +111,13 @@
"path-browserify": "^1.0.1",
"postcss-loader": "^7.3.3",
"raw-loader": "^4.0.2",
"re-resizable": "^6.9.11",
"react": "^18.2.0",
"react-color": "^2.14.1",
"react-dnd": "^16.0.1",
"react-dnd-html5-backend": "^16.0.1",
"react-dom": "^18.2.0",
"react-draggable": "^4.4.6",
"react-i18next": "^11.8.5",
"react-markdown": "^7.1.0",
"react-rnd": "^10.3.7",
Expand Down
18 changes: 9 additions & 9 deletions src/api/focus/keymap/db/constants.js
Original file line number Diff line number Diff line change
Expand Up @@ -93,15 +93,15 @@ export const constants = {
MOUSE_WHEEL_LEFT: keycode_ranges.mouse.start | 0x14,
MOUSE_WHEEL_RIGHT: keycode_ranges.mouse.start | 0x18,

CONSUMER_MEDIA_PREV_TRACK: keycode_ranges.consumer.start | 0x82,
CONSUMER_MEDIA_NEXT_TRACK: keycode_ranges.consumer.start | 0x81,
CONSUMER_MEDIA_STOP: keycode_ranges.consumer.start | 0x83,
CONSUMER_MEDIA_PLAY_PAUSE: keycode_ranges.consumer.start | 0xa5,
CONSUMER_MEDIA_MUTE: keycode_ranges.consumer.start | 0xda,
CONSUMER_MEDIA_VOLUME_UP: keycode_ranges.consumer.start | 0xe1,
CONSUMER_MEDIA_VOLUME_DOWN: keycode_ranges.consumer.start | 0xe2,
CONSUMER_BRIGHTNESS_UP: keycode_ranges.consumer.start | 0x4b,
CONSUMER_BRIGHTNESS_DOWN: keycode_ranges.consumer.start | 0x4c,
CONSUMER_MEDIA_PREV_TRACK: keycode_ranges.consumer.start | 0xb6,
CONSUMER_MEDIA_NEXT_TRACK: keycode_ranges.consumer.start | 0xb5,
CONSUMER_MEDIA_STOP: keycode_ranges.consumer.start | 0xb7,
CONSUMER_MEDIA_PLAY_PAUSE: keycode_ranges.consumer.start | 0xcd,
CONSUMER_MEDIA_MUTE: keycode_ranges.consumer.start | 0xe2,
CONSUMER_MEDIA_VOLUME_UP: keycode_ranges.consumer.start | 0xe9,
CONSUMER_MEDIA_VOLUME_DOWN: keycode_ranges.consumer.start | 0xea,
CONSUMER_BRIGHTNESS_UP: keycode_ranges.consumer.start | 0x6f,
CONSUMER_BRIGHTNESS_DOWN: keycode_ranges.consumer.start | 0x70,

ONESHOT_META_STICKY: 53628,
ONESHOT_ACTIVE_STICKY: 53629,
Expand Down
1 change: 1 addition & 0 deletions src/renderer/App.js
Original file line number Diff line number Diff line change
Expand Up @@ -232,6 +232,7 @@ const App = (props) => {
display: "flex",
flexDirection: "column",
height: "100%",
userSelect: "none",
}}
>
<LocationProvider history={history}>
Expand Down
8 changes: 3 additions & 5 deletions src/renderer/components/SaveChangesButton.js
Original file line number Diff line number Diff line change
Expand Up @@ -30,21 +30,19 @@ const SaveChangesButton = (props) => {

const { successMessage } = props;

const bottom = props.bottom || "1rem";
const handleButtonClick = async (event) => {
setInProgress(true);
try {
await props.onClick(event);
} catch (e) {
return props.onError(e);
}
console.debug("Got back from click", { label: "save-changes" });

setSuccess(true);
setInProgress(false);
setTimeout(() => {
console.debug("running the timeout callback", { label: "save-changes" });
setSuccess(false);
console.debug("finishied timeout callback", { label: "save-changes" });
}, 2000);
};

Expand All @@ -66,8 +64,8 @@ const SaveChangesButton = (props) => {
alignItems: "center",
justifyContent: "flex-end",
position: "fixed",
bottom: 32,
right: 32,
bottom: bottom,
right: "1rem",
zIndex: (theme) => theme.zIndex.drawer + 1,
}}
>
Expand Down
51 changes: 31 additions & 20 deletions src/renderer/screens/Editor.js
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,6 @@ import KeymapDB from "@api/focus/keymap/db";
import Macros, { Step as MacroStep } from "@api/focus/macros";
import LayerNames from "@api/focus/layernames";
import Button from "@mui/material/Button";
import Paper from "@mui/material/Paper";
import Box from "@mui/material/Box";
import { hideContextBar, showContextBar } from "@renderer/components/ContextBar";
import { GlobalContext } from "@renderer/components/GlobalContext";
Expand All @@ -39,14 +38,15 @@ import MacroEditor from "./Editor/Macros/MacroEditor";
import Overview from "./Editor/Sidebar/Overview";
import Drawer from "@mui/material/Drawer";
import LayoutSharing from "./Editor/Sidebar/LayoutSharing";
import { LayerCopyPaste } from "./Editor/Sidebar/LayerCopyPaste";
import useTheme from "@mui/material/styles/useTheme";

const db = new KeymapDB();

const Editor = (props) => {
const globalContext = React.useContext(GlobalContext);
const [activeDevice, _] = globalContext.state.activeDevice;

const theme = useTheme();
const [colormap, setColormap] = useState({ palette: [], colorMap: [] });

const [keymap, setKeymap] = useState({ custom: [], default: [], onlyCustom: false });
Expand All @@ -68,6 +68,7 @@ const Editor = (props) => {

const [dialogOpen, setDialogOpen] = useState(false);

const drawerHeightInRem = 20;
const { t } = useTranslation();

const maybeOpenMacroEditor = (state) => {
Expand Down Expand Up @@ -348,14 +349,14 @@ const Editor = (props) => {
});
};

const pasteLayer = () => {
const pasteLayer = (targetLayer) => {
if (!hasCopiedLayer()) return;

const newKeymap = { ...keymap };
newKeymap.custom[currentLayer] = copiedLayer.keymap;
newKeymap.custom[targetLayer] = copiedLayer.keymap;

const newColormap = { ...colormap };
newColormap.colorMap[currentLayer] = copiedLayer.colorMap;
newColormap.colorMap[targetLayer] = copiedLayer.colorMap;

setKeymap(newKeymap);
setColormap(newColormap);
Expand Down Expand Up @@ -387,6 +388,7 @@ const Editor = (props) => {
} else {
title = t("app.menu.colormapEditor");
}
console.log(theme);

const currentKey = selectorKey || keymap.custom[currentLayer][currentKeyIndex];

Expand Down Expand Up @@ -454,17 +456,19 @@ const Editor = (props) => {
{mainWidget}
</Box>
<Box
sx={{
position: "fixed",
top: 60, // Adjust for title bar or safe area
right: 5,
width: 250,
height: "auto",
zIndex: 1300, // Adjust the zIndex if necessary to bring the component above other elements
}}
sx={
/* set the z index to be above all drawers */

{
zIndex: theme.zIndex.drawer + 1,
position: "fixed",
top: "4rem",
right: "1rem",
}
}
>
{openMacroEditor || (
<Paper>
<>
<Overview
keymap={keymap}
colormap={colormap}
Expand All @@ -474,17 +478,25 @@ const Editor = (props) => {
setLayer={onLayerChange}
layerNames={layerNames}
setLayerName={setLayerName}
/>
<LayerCopyPaste
layer={currentLayer}
copyLayer={copyLayer}
pasteLayer={pasteLayer}
hasCopiedLayer={hasCopiedLayer}
/>
</Paper>
</>
)}
</Box>
<Drawer variant="permanent" anchor="bottom" sx={{ "& .MuiDrawer-paper": { height: "20rem" } }}>
<SaveChangesButton
onClick={onApply}
onError={onApplyError}
disabled={saveChangesDisabled}
bottom={`${drawerHeightInRem + 1}rem`}
/>

<Drawer
variant="permanent"
anchor="bottom"
sx={{ "& .MuiDrawer-paper": { height: `${drawerHeightInRem}rem`, overflow: "hidden" } }}
>
<KeyPicker
macroEditorOpen={openMacroEditor}
macros={macros}
Expand All @@ -509,7 +521,6 @@ const Editor = (props) => {
currentKey={currentKey}
/>
</Drawer>
<SaveChangesButton onClick={onApply} onError={onApplyError} disabled={saveChangesDisabled} />
</React.Fragment>
);
};
Expand Down
4 changes: 2 additions & 2 deletions src/renderer/screens/Editor/Keyboard104.js
Original file line number Diff line number Diff line change
Expand Up @@ -106,11 +106,11 @@ const KeySelector = (props) => {
viewBox={"0 0 " + Math.round(23 * keycapunit).toString() + " " + Math.round(6.5 * keycapunit).toString()}
xmlns="http://www.w3.org/2000/svg"
preserveAspectRatio="xMidYMin meet"
height="16rem"
height="15rem"
className={props.className}
style={{
display: "block",
fontWeight: 700,
fontWeight: 400,
fontSize: Math.round(keycapunit / 4),
}}
>
Expand Down
18 changes: 0 additions & 18 deletions src/renderer/screens/Editor/Sidebar/LayerCopyPaste.js

This file was deleted.

17 changes: 16 additions & 1 deletion src/renderer/screens/Editor/Sidebar/LayerNameInput.js
Original file line number Diff line number Diff line change
Expand Up @@ -13,5 +13,20 @@ export const LayerNameInput = (props) => {
return `${props.value}`;
}

return <InputBase sx={{ flex: 1 }} value={props.value} onChange={onChange} />;
return (
<InputBase
sx={{
flex: 1,
fontSize: "0.8rem",
"& input": {
padding: "0", // Minimizes padding to adjust for baseline alignment
margin: "0",
marginBottom: "0.1rem",
},
}}
value={props.value}
size="small"
onChange={onChange}
/>
);
};
Loading

0 comments on commit a6e4503

Please sign in to comment.