diff --git a/frontend/src/common/components/IAIButton.tsx b/frontend/src/common/components/IAIButton.tsx
index 53db1cd8f9..92af017d01 100644
--- a/frontend/src/common/components/IAIButton.tsx
+++ b/frontend/src/common/components/IAIButton.tsx
@@ -3,16 +3,19 @@ import { Button, ButtonProps, Tooltip } from '@chakra-ui/react';
export interface IAIButtonProps extends ButtonProps {
label: string;
tooltip?: string;
+ styleClass?: string;
}
/**
* Reusable customized button component.
*/
const IAIButton = (props: IAIButtonProps) => {
- const { label, tooltip = '', ...rest } = props;
+ const { label, tooltip = '', styleClass, ...rest } = props;
return (
-
+
);
};
diff --git a/frontend/src/features/gallery/ImageGallery.scss b/frontend/src/features/gallery/ImageGallery.scss
index a36685228a..c53296471e 100644
--- a/frontend/src/features/gallery/ImageGallery.scss
+++ b/frontend/src/features/gallery/ImageGallery.scss
@@ -19,8 +19,8 @@
}
.image-gallery-wrapper {
- z-index: 10;
-
+ z-index: 100;
+
&[data-pinned='false'] {
position: fixed;
height: 100vh;
diff --git a/frontend/src/features/gallery/ImageGallery.tsx b/frontend/src/features/gallery/ImageGallery.tsx
index 1d828d7726..bb4f6d43d2 100644
--- a/frontend/src/features/gallery/ImageGallery.tsx
+++ b/frontend/src/features/gallery/ImageGallery.tsx
@@ -156,7 +156,7 @@ export default function ImageGallery() {
});
useHotkeys(
- 'shift+p',
+ 'shift+g',
() => {
handleSetShouldPinGallery();
},
@@ -443,7 +443,7 @@ export default function ImageGallery() {
size={'sm'}
className={'image-gallery-icon-btn'}
aria-label={'Pin Gallery'}
- tooltip={'Pin Gallery (Shift+P)'}
+ tooltip={'Pin Gallery (Shift+G)'}
onClick={handleSetShouldPinGallery}
icon={shouldPinGallery ? : }
/>
diff --git a/frontend/src/features/options/AdvancedOptions/Inpainting/InpaintingSettings.tsx b/frontend/src/features/options/AdvancedOptions/Inpainting/InpaintingSettings.tsx
index 1b9b125317..7624c655f8 100644
--- a/frontend/src/features/options/AdvancedOptions/Inpainting/InpaintingSettings.tsx
+++ b/frontend/src/features/options/AdvancedOptions/Inpainting/InpaintingSettings.tsx
@@ -89,6 +89,7 @@ export default function InpaintingSettings() {
onClick={handleClearBrushHistory}
tooltip="Clears brush stroke history"
disabled={futureLines.length > 0 || pastLines.length > 0 ? false : true}
+ styleClass="inpainting-options-btn"
/>
>
);
diff --git a/frontend/src/features/system/HotkeysModal/HotkeysModal.tsx b/frontend/src/features/system/HotkeysModal/HotkeysModal.tsx
index fea7a566db..d16899dbbd 100644
--- a/frontend/src/features/system/HotkeysModal/HotkeysModal.tsx
+++ b/frontend/src/features/system/HotkeysModal/HotkeysModal.tsx
@@ -39,6 +39,16 @@ export default function HotkeysModal({ children }: HotkeysModalProps) {
desc: 'Focus the prompt input area',
hotkey: 'Alt+A',
},
+ {
+ title: 'Toggle Options',
+ desc: 'Open and close the options panel',
+ hotkey: 'O',
+ },
+ {
+ title: 'Pin Options',
+ desc: 'Pin the options panel',
+ hotkey: 'Shift+O',
+ },
{
title: 'Toggle Gallery',
desc: 'Open and close the gallery drawer',
@@ -101,7 +111,7 @@ export default function HotkeysModal({ children }: HotkeysModalProps) {
{
title: 'Toggle Gallery Pin',
desc: 'Pins and unpins the gallery to the UI',
- hotkey: 'Shift+P',
+ hotkey: 'Shift+G',
},
{
title: 'Increase Gallery Image Size',
diff --git a/frontend/src/features/tabs/FloatingShowHideButton.scss b/frontend/src/features/tabs/FloatingShowHideButton.scss
index e200990d20..d823079eba 100644
--- a/frontend/src/features/tabs/FloatingShowHideButton.scss
+++ b/frontend/src/features/tabs/FloatingShowHideButton.scss
@@ -7,17 +7,16 @@
z-index: 20;
padding: 0;
- filter: var(--floating-button-drop-shadow);
-
- svg {
- fill: var(--tab-list-text);
- }
-
&.left {
left: 0;
border-radius: 0 0.5rem 0.5rem 0 !important;
}
+ &.btn-options {
+ left: 73px;
+ border-radius: 0 0.5rem 0.5rem 0 !important;
+ }
+
&.right {
right: 0;
border-radius: 0.5rem 0 0 0.5rem !important;
diff --git a/frontend/src/features/tabs/Inpainting/Inpainting.scss b/frontend/src/features/tabs/Inpainting/Inpainting.scss
index 3cfdfa5ed5..c2e01e97d2 100644
--- a/frontend/src/features/tabs/Inpainting/Inpainting.scss
+++ b/frontend/src/features/tabs/Inpainting/Inpainting.scss
@@ -83,6 +83,10 @@
}
}
+.inpainting-options-btn {
+ min-height: 2rem;
+}
+
// Overrides
.inpainting-workarea-overrides {
.image-gallery-wrapper {
diff --git a/frontend/src/features/tabs/InvokeOptionsPanel.scss b/frontend/src/features/tabs/InvokeOptionsPanel.scss
index d3f12f33a9..7abbf381fb 100644
--- a/frontend/src/features/tabs/InvokeOptionsPanel.scss
+++ b/frontend/src/features/tabs/InvokeOptionsPanel.scss
@@ -19,14 +19,13 @@
}
.options-panel-wrapper {
- background-color: var(--background-color);
+ grid-auto-rows: max-content;
height: $app-content-height;
width: $options-bar-max-width;
max-width: $options-bar-max-width;
flex-shrink: 0;
position: relative;
- overflow-y: scroll;
- @include HideScrollbar;
+ z-index: 20;
.options-panel {
display: flex;
@@ -34,6 +33,8 @@
row-gap: 1rem;
height: 100%;
@include HideScrollbar;
+ background-color: var(--background-color) !important;
+ border-right: 1px solid var(--border-color);
}
&[data-pinned='false'] {
@@ -58,7 +59,7 @@
padding: 0.5rem;
top: 1rem;
right: 1rem;
- z-index: 25;
+ z-index: 20;
&[data-selected='true'] {
top: 0;
diff --git a/frontend/src/features/tabs/InvokeOptionsPanel.tsx b/frontend/src/features/tabs/InvokeOptionsPanel.tsx
index 6a387e57d9..57433b59a8 100644
--- a/frontend/src/features/tabs/InvokeOptionsPanel.tsx
+++ b/frontend/src/features/tabs/InvokeOptionsPanel.tsx
@@ -1,16 +1,11 @@
import { Tooltip } from '@chakra-ui/react';
import { createSelector } from '@reduxjs/toolkit';
-import {
- FocusEvent,
- MouseEvent,
- ReactNode,
- useCallback,
- useEffect,
- useRef,
-} from 'react';
+import { MouseEvent, ReactNode, useCallback, useRef } from 'react';
+import { useHotkeys } from 'react-hotkeys-hook';
import { BsPinAngle, BsPinAngleFill } from 'react-icons/bs';
import { CSSTransition } from 'react-transition-group';
import { RootState, useAppDispatch, useAppSelector } from '../../app/store';
+
import useClickOutsideWatcher from '../../common/hooks/useClickOutsideWatcher';
import {
OptionsState,
@@ -48,7 +43,6 @@ const InvokeOptionsPanel = (props: Props) => {
shouldShowOptionsPanel,
shouldHoldOptionsPanelOpen,
shouldPinOptionsPanel,
- optionsPanelScrollPosition,
} = useAppSelector(optionsPanelSelector);
const optionsPanelRef = useRef(null);
@@ -58,6 +52,24 @@ const InvokeOptionsPanel = (props: Props) => {
const { children } = props;
+ // Hotkeys
+ useHotkeys(
+ 'o',
+ () => {
+ dispatch(setShouldShowOptionsPanel(!shouldShowOptionsPanel));
+ },
+ [shouldShowOptionsPanel]
+ );
+
+ useHotkeys(
+ 'shift+o',
+ () => {
+ handleClickPinOptionsPanel();
+ },
+ [shouldPinOptionsPanel]
+ );
+ //
+
const handleCloseOptionsPanel = useCallback(() => {
if (shouldPinOptionsPanel) return;
dispatch(
diff --git a/frontend/src/features/tabs/ShowHideOptionsPanelButton.tsx b/frontend/src/features/tabs/ShowHideOptionsPanelButton.tsx
index 202ce5f99b..7e3d20dc11 100644
--- a/frontend/src/features/tabs/ShowHideOptionsPanelButton.tsx
+++ b/frontend/src/features/tabs/ShowHideOptionsPanelButton.tsx
@@ -15,7 +15,7 @@ const ShowHideOptionsPanelButton = () => {
tooltip="Show Options Panel (G)"
tooltipPlacement="top"
aria-label="Show Options Panel"
- styleClass="floating-show-hide-button left"
+ styleClass="floating-show-hide-button btn-options"
onMouseOver={handleShowOptionsPanel}
>
diff --git a/frontend/src/styles/Mixins/_Variables.scss b/frontend/src/styles/Mixins/_Variables.scss
index 1bac52affa..dde87fbe24 100644
--- a/frontend/src/styles/Mixins/_Variables.scss
+++ b/frontend/src/styles/Mixins/_Variables.scss
@@ -1,6 +1,6 @@
// Calc Values
$app-cutoff: 0px;
-$app-content-height-cutoff: calc(70px + 1rem); // default: 7rem
+$app-content-height-cutoff: 5rem; // default: 7rem
// Usage Variables
// app