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