Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

FEATURE: Focus on repeat button #2378

Merged
merged 4 commits into from Jan 11, 2024
Merged

FEATURE: Focus on repeat button #2378

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
e1df8c0
Duplicate code removed
JindrichSusen Jan 9, 2024
388f74c
Repeat button is focused after workflow has finished
JindrichSusen Jan 9, 2024
cfa574c
requestFocus function used everywhere
JindrichSusen Jan 9, 2024
d10ad75
Commented code removed
JindrichSusen Jan 9, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
24 changes: 0 additions & 24 deletions frontend-html/src/gui/Components/Button/Button.module.scss
View file
Open in desktop
Expand Up @@ -22,44 +22,20 @@ along with ORIGAM. If not, see <http://www.gnu.org/licenses/>.

.button {
@include dialogButton;

background: var(--background2);
color: var(--background1);
border: 1px solid var(--background5);
box-sizing: border-box;
font-weight: 700;
margin: 0 0.5em;
min-width: 75px;
padding: 0 1.5em;
@include border-radius(3em);

background: var(--background3);
border-color: var(--background5);
color: var(--background7);

&:first-of-type {
margin-left: 0;
}
&:last-of-type {
margin-right: 0;
}
&:hover {
background: var(--background5);
color: var(--background8);
}
}

.focusedButton{
&:focus,&:global(.isPrimary) {
background: var(--foreground1);
border-color: var(--foreground1);
color: var(--background1);

&:hover {
background: var(--background1);
color: var(--foreground1);
}
}
}

.disabledButton {
Expand Down
3 changes: 2 additions & 1 deletion frontend-html/src/gui/Components/Dialogs/ColumnsDialog.tsx
View file
Open in desktop
Expand Up @@ -40,6 +40,7 @@ import { TabbedViewHandleRow } from "../TabbedView/TabbedViewHandleRow";
import { CloseButton } from "gui/Components/Dialogs/Dialog";
import { Icon } from "gui/Components/Icon/Icon";
import { SimpleDropdown } from "gui/Components/Dialogs/SimpleDropdown";
import { requestFocus } from "utils/focus";


// It would be neater to solve by onScrollbarPresenceChange handler of react-virtualized Grid (TODO)
Expand Down Expand Up @@ -67,7 +68,7 @@ export class ColumnsDialog extends React.Component<{
refOrderFocusableContent = (elm: HTMLDivElement | null) => {
if (elm) {
setTimeout(() => {
elm.focus();
requestFocus(elm);
});
}
};
Expand Down
20 changes: 0 additions & 20 deletions frontend-html/src/gui/Components/Dialogs/Dialog.module.scss
View file
Open in desktop
Expand Up @@ -144,40 +144,20 @@ along with ORIGAM. If not, see <http://www.gnu.org/licenses/>.

.footer button {
@include dialogButton;

background: var(--background2);
border: 1px solid var(--background5);
box-sizing: border-box;
font-weight: 700;
margin: 0 0.5em;
min-width: 75px;
padding: 0 1.5em;
@include border-radius(3em);

background: var(--background3);
border-color: var(--background5);
color: var(--background7);

&:first-of-type {
margin-left: 0;
}
&:last-of-type {
margin-right: 0;
}
&:hover {
background: var(--background5);
color: var(--background8);
}
&:focus,&:global(.isPrimary) {
background: var(--foreground1);
border-color: var(--foreground1);
color: var(--background1);

&:hover {
background: var(--background1);
color: var(--foreground1);
}
}
}

.pusher {
Expand Down
9 changes: 5 additions & 4 deletions frontend-html/src/gui/Components/Dialogs/Dialog.tsx
View file
Open in desktop
Expand Up @@ -24,6 +24,7 @@ import { observer, Observer } from "mobx-react";
import { action, observable } from "mobx";
import Measure, { BoundingRect } from "react-measure";
import { Icon } from "../Icon/Icon";
import { requestFocus } from "utils/focus";

@observer
export class ModalWindow extends React.Component<{
Expand Down Expand Up @@ -127,15 +128,15 @@ export class ModalWindow extends React.Component<{
evt.preventDefault();
if (evt.shiftKey) {
if (evt.target.previousSibling) {
evt.target.previousSibling.focus();
requestFocus(evt.target.previousSibling);
} else {
this.elmFooter?.lastChild?.focus();
requestFocus(this.elmFooter?.lastChild);
}
} else {
if (evt.target.nextSibling) {
evt.target.nextSibling.focus();
requestFocus(evt.target.nextSibling);
} else {
this.elmFooter?.firstChild?.focus();
requestFocus(this.elmFooter?.firstChild);
}
}
}
Expand Down
7 changes: 0 additions & 7 deletions frontend-html/src/gui/Components/ScreenHeader/ScreenHeader.module.scss
View file
Open in desktop
Expand Up @@ -49,10 +49,7 @@ along with ORIGAM. If not, see <http://www.gnu.org/licenses/>.

.workflowActionBtn {
@include dialogButton();
background: var(--background3);
border: 1px solid var(--background5);
box-sizing: border-box;
color: var(--background8);
font-size: $font-size;
height: 2em;
margin: 0 0.5em;
Expand All @@ -64,9 +61,5 @@ along with ORIGAM. If not, see <http://www.gnu.org/licenses/>.
&:last-of-type {
margin-right: 0;
}
&:hover {
background: var(--background5);
color: var(--background8);
}
flex-grow: 0;
}
28 changes: 19 additions & 9 deletions frontend-html/src/gui/Components/WorkflowFinishedPanel/WorkflowFinishedPanel.tsx
View file
Open in desktop
Expand Up @@ -17,22 +17,32 @@ You should have received a copy of the GNU General Public License
along with ORIGAM. If not, see <http://www.gnu.org/licenses/>.
*/

import React from "react";
import React, { useEffect, useRef } from "react";
import S from "gui/Components/WorkflowFinishedPanel/WorkflowFinishedPanel.module.scss";
import { T } from "utils/translation";
import cx from "classnames";
import { MultiGrid } from "react-virtualized";
import { requestFocus } from "utils/focus";

export const WorkflowFinishedPanel: React.FC<{
isCloseButton: boolean;
isRepeatButton: boolean;
onCloseClick?(event: any): void;
onRepeatClick?(event: any): void;
message: string;
}> = (props) => (
<div className={S.root}>
{props.isRepeatButton && <button onClick={props.onRepeatClick}>{T("Repeat", "button_repeat")}</button>}
{props.isCloseButton && <button onClick={props.onCloseClick}>{T("Close", "button_close")}</button>}
{/*<iframe className={S.message} srcDoc={} />*/}
<div className={cx(S.message, "workflowMessage")} dangerouslySetInnerHTML={{__html: `${props.message}`}}/>
</div>
);
}> = (props) => {
const repeatButton = useRef<HTMLButtonElement>(null);

useEffect(() => {
if (repeatButton.current) {
requestFocus(repeatButton.current);
}
}, []); // eslint-disable-line react-hooks/exhaustive-deps

return (
<div className={S.root}>
{props.isRepeatButton && <button ref={repeatButton} onClick={props.onRepeatClick}>{T("Repeat", "button_repeat")}</button>}
{props.isCloseButton && <button onClick={props.onCloseClick}>{T("Close", "button_close")}</button>}
<div className={cx(S.message, "workflowMessage")} dangerouslySetInnerHTML={{__html: `${props.message}`}}/>
</div>)
};
23 changes: 8 additions & 15 deletions frontend-html/src/gui/Workbench/ScreenArea/ScreenArea.module.scss
View file
Open in desktop
Expand Up @@ -87,25 +87,18 @@ along with ORIGAM. If not, see <http://www.gnu.org/licenses/>.
}

.workflowActionBtn {
@include dialogButton();
background: var(--background3);
border: 1px solid var(--background5);
@include dialogButton();
box-sizing: border-box;
color: var(--background8);
font-size: $font-size;
height: 2em;
margin: 0 0.5em;
padding: 0 1.5em;
@include border-radius(3em);
&:first-of-type {
margin-left: 0;
}
&:last-of-type {
margin-right: 0;
}
&:hover {
background: var(--background5);
color: var(--background8);
}
@include border-radius(3em);
&:first-of-type {
margin-left: 0;
}
&:last-of-type {
margin-right: 0;
}
}

10 changes: 10 additions & 0 deletions frontend-html/src/gui/commonStyles.scss
View file
Open in desktop
Expand Up @@ -106,4 +106,14 @@ $textColorHover: var(--background8);
background: var(--background5);
color: var(--background8);
}
&:focus,&:global(.isPrimary) {
background: var(--foreground1);
border-color: var(--foreground1);
color: var(--background1);

&:hover {
background: var(--background1);
color: var(--foreground1);
}
}
}