updated to match ui design (#369)
* updated to match ui design fixes: #323 * fixed test * Update src/components/help-enabler/HelpHeader.tsx Co-authored-by: Eugenia <32821331+jenny-s51@users.noreply.github.com> * Update src/components/help-enabler/help-header.css Co-authored-by: Eugenia <32821331+jenny-s51@users.noreply.github.com> * fixed merge error * changed to use "t" function Co-authored-by: Eugenia <32821331+jenny-s51@users.noreply.github.com>
This commit is contained in:
Erik Jan de Wit
GitHub
parent
93d5d21894
commit
e4c2259563
4 changed files with 106 additions and 108 deletions
|
|
@ -1,4 +1,5 @@
|
|||
{
|
||||
"common-help": {
|
||||
"helpToggleInfo": "This toggle will enable / disable part of the help info in the console. Includes any help text, links and popovers."
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,15 +1,19 @@
|
|||
import React, { useState, useContext, ReactNode, createContext } from "react";
|
||||
import {
|
||||
Divider,
|
||||
Dropdown,
|
||||
DropdownItem,
|
||||
DropdownToggle,
|
||||
Split,
|
||||
SplitItem,
|
||||
Switch,
|
||||
TextContent,
|
||||
} from "@patternfly/react-core";
|
||||
import { Trans, useTranslation } from "react-i18next";
|
||||
import { HelpIcon, ExternalLinkAltIcon } from "@patternfly/react-icons";
|
||||
|
||||
import "./help-header.css";
|
||||
|
||||
type HelpProps = {
|
||||
children: ReactNode;
|
||||
};
|
||||
|
|
@ -51,16 +55,8 @@ export const HelpHeader = () => {
|
|||
</SplitItem>
|
||||
</Split>
|
||||
</DropdownItem>,
|
||||
<DropdownItem
|
||||
key="enable"
|
||||
id="enable"
|
||||
description={
|
||||
<Trans>
|
||||
This toggle will enable / disable part of the help info in the
|
||||
console. Includes any help text, links and popovers.
|
||||
</Trans>
|
||||
}
|
||||
>
|
||||
<Divider key="divide" />,
|
||||
<DropdownItem key="enable" id="enable">
|
||||
<Split>
|
||||
<SplitItem isFilled>{t("enableHelpMode")}</SplitItem>
|
||||
<SplitItem>
|
||||
|
|
@ -68,10 +64,15 @@ export const HelpHeader = () => {
|
|||
id="enableHelp"
|
||||
aria-label="Help is enabled"
|
||||
isChecked={help.enabled}
|
||||
label=""
|
||||
className="keycloak_help-header-switch"
|
||||
onChange={() => help.toggleHelp()}
|
||||
/>
|
||||
</SplitItem>
|
||||
</Split>
|
||||
<TextContent className="keycloak_help-header-description">
|
||||
{t("common-help:helpToggleInfo")}
|
||||
</TextContent>
|
||||
</DropdownItem>,
|
||||
];
|
||||
return (
|
||||
|
|
|
|||
|
|
@ -80,75 +80,65 @@ exports[`<HelpHeader /> enable help 1`] = `
|
|||
</div>
|
||||
</a>
|
||||
</li>
|
||||
<hr
|
||||
class="pf-c-divider"
|
||||
index="1"
|
||||
/>
|
||||
<li
|
||||
id="enable"
|
||||
role="menuitem"
|
||||
>
|
||||
<a
|
||||
aria-disabled="false"
|
||||
class="pf-c-dropdown__menu-item pf-m-description"
|
||||
class="pf-c-dropdown__menu-item"
|
||||
data-ouia-component-id="OUIA-Generated-DropdownItem-4"
|
||||
data-ouia-component-type="PF4/DropdownItem"
|
||||
data-ouia-safe="true"
|
||||
tabindex="-1"
|
||||
>
|
||||
<div
|
||||
class="pf-c-dropdown__menu-item-main"
|
||||
class="pf-l-split"
|
||||
>
|
||||
<div
|
||||
class="pf-l-split"
|
||||
class="pf-l-split__item pf-m-fill"
|
||||
>
|
||||
<div
|
||||
class="pf-l-split__item pf-m-fill"
|
||||
enableHelpMode
|
||||
</div>
|
||||
<div
|
||||
class="pf-l-split__item"
|
||||
>
|
||||
<label
|
||||
class="pf-c-switch keycloak_help-header-switch"
|
||||
data-ouia-component-id="OUIA-Generated-Switch-2"
|
||||
data-ouia-component-type="PF4/Switch"
|
||||
data-ouia-safe="true"
|
||||
for="enableHelp"
|
||||
>
|
||||
enableHelpMode
|
||||
</div>
|
||||
<div
|
||||
class="pf-l-split__item"
|
||||
>
|
||||
<label
|
||||
class="pf-c-switch"
|
||||
data-ouia-component-id="OUIA-Generated-Switch-2"
|
||||
data-ouia-component-type="PF4/Switch"
|
||||
data-ouia-safe="true"
|
||||
for="enableHelp"
|
||||
>
|
||||
<input
|
||||
aria-label="Help is enabled"
|
||||
checked=""
|
||||
class="pf-c-switch__input"
|
||||
id="enableHelp"
|
||||
type="checkbox"
|
||||
/>
|
||||
<span
|
||||
class="pf-c-switch__toggle"
|
||||
>
|
||||
<div
|
||||
aria-hidden="true"
|
||||
class="pf-c-switch__toggle-icon"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
fill="currentColor"
|
||||
height="1em"
|
||||
role="img"
|
||||
viewBox="0 0 512 512"
|
||||
width="1em"
|
||||
>
|
||||
<path
|
||||
d="M173.898 439.404l-166.4-166.4c-9.997-9.997-9.997-26.206 0-36.204l36.203-36.204c9.997-9.998 26.207-9.998 36.204 0L192 312.69 432.095 72.596c9.997-9.997 26.207-9.997 36.204 0l36.203 36.204c9.997 9.997 9.997 26.206 0 36.204l-294.4 294.401c-9.998 9.997-26.207 9.997-36.204-.001z"
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
</span>
|
||||
</label>
|
||||
</div>
|
||||
<input
|
||||
aria-label="Help is enabled"
|
||||
checked=""
|
||||
class="pf-c-switch__input"
|
||||
id="enableHelp"
|
||||
type="checkbox"
|
||||
/>
|
||||
<span
|
||||
class="pf-c-switch__toggle"
|
||||
/>
|
||||
<span
|
||||
aria-hidden="true"
|
||||
class="pf-c-switch__label pf-m-on"
|
||||
/>
|
||||
<span
|
||||
aria-hidden="true"
|
||||
class="pf-c-switch__label pf-m-off"
|
||||
/>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="pf-c-dropdown__menu-item-description"
|
||||
class="pf-c-content keycloak_help-header-description"
|
||||
>
|
||||
This toggle will enable / disable part of the help info in the console. Includes any help text, links and popovers.
|
||||
helpToggleInfo
|
||||
</div>
|
||||
</a>
|
||||
</li>
|
||||
|
|
@ -242,75 +232,65 @@ exports[`<HelpHeader /> open dropdown 1`] = `
|
|||
</div>
|
||||
</a>
|
||||
</li>
|
||||
<hr
|
||||
class="pf-c-divider"
|
||||
index="1"
|
||||
/>
|
||||
<li
|
||||
id="enable"
|
||||
role="menuitem"
|
||||
>
|
||||
<a
|
||||
aria-disabled="false"
|
||||
class="pf-c-dropdown__menu-item pf-m-description"
|
||||
class="pf-c-dropdown__menu-item"
|
||||
data-ouia-component-id="OUIA-Generated-DropdownItem-2"
|
||||
data-ouia-component-type="PF4/DropdownItem"
|
||||
data-ouia-safe="true"
|
||||
tabindex="-1"
|
||||
>
|
||||
<div
|
||||
class="pf-c-dropdown__menu-item-main"
|
||||
class="pf-l-split"
|
||||
>
|
||||
<div
|
||||
class="pf-l-split"
|
||||
class="pf-l-split__item pf-m-fill"
|
||||
>
|
||||
<div
|
||||
class="pf-l-split__item pf-m-fill"
|
||||
enableHelpMode
|
||||
</div>
|
||||
<div
|
||||
class="pf-l-split__item"
|
||||
>
|
||||
<label
|
||||
class="pf-c-switch keycloak_help-header-switch"
|
||||
data-ouia-component-id="OUIA-Generated-Switch-1"
|
||||
data-ouia-component-type="PF4/Switch"
|
||||
data-ouia-safe="true"
|
||||
for="enableHelp"
|
||||
>
|
||||
enableHelpMode
|
||||
</div>
|
||||
<div
|
||||
class="pf-l-split__item"
|
||||
>
|
||||
<label
|
||||
class="pf-c-switch"
|
||||
data-ouia-component-id="OUIA-Generated-Switch-1"
|
||||
data-ouia-component-type="PF4/Switch"
|
||||
data-ouia-safe="true"
|
||||
for="enableHelp"
|
||||
>
|
||||
<input
|
||||
aria-label="Help is enabled"
|
||||
checked=""
|
||||
class="pf-c-switch__input"
|
||||
id="enableHelp"
|
||||
type="checkbox"
|
||||
/>
|
||||
<span
|
||||
class="pf-c-switch__toggle"
|
||||
>
|
||||
<div
|
||||
aria-hidden="true"
|
||||
class="pf-c-switch__toggle-icon"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
fill="currentColor"
|
||||
height="1em"
|
||||
role="img"
|
||||
viewBox="0 0 512 512"
|
||||
width="1em"
|
||||
>
|
||||
<path
|
||||
d="M173.898 439.404l-166.4-166.4c-9.997-9.997-9.997-26.206 0-36.204l36.203-36.204c9.997-9.998 26.207-9.998 36.204 0L192 312.69 432.095 72.596c9.997-9.997 26.207-9.997 36.204 0l36.203 36.204c9.997 9.997 9.997 26.206 0 36.204l-294.4 294.401c-9.998 9.997-26.207 9.997-36.204-.001z"
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
</span>
|
||||
</label>
|
||||
</div>
|
||||
<input
|
||||
aria-label="Help is enabled"
|
||||
checked=""
|
||||
class="pf-c-switch__input"
|
||||
id="enableHelp"
|
||||
type="checkbox"
|
||||
/>
|
||||
<span
|
||||
class="pf-c-switch__toggle"
|
||||
/>
|
||||
<span
|
||||
aria-hidden="true"
|
||||
class="pf-c-switch__label pf-m-on"
|
||||
/>
|
||||
<span
|
||||
aria-hidden="true"
|
||||
class="pf-c-switch__label pf-m-off"
|
||||
/>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="pf-c-dropdown__menu-item-description"
|
||||
class="pf-c-content keycloak_help-header-description"
|
||||
>
|
||||
This toggle will enable / disable part of the help info in the console. Includes any help text, links and popovers.
|
||||
helpToggleInfo
|
||||
</div>
|
||||
</a>
|
||||
</li>
|
||||
|
|
|
|||
16
src/components/help-enabler/help-header.css
Normal file
16
src/components/help-enabler/help-header.css
Normal file
|
|
@ -0,0 +1,16 @@
|
|||
|
||||
|
||||
.keycloak_help-header-description {
|
||||
padding-top: var(--pf-global--spacer--lg);
|
||||
overflow-wrap: break-word;
|
||||
white-space: normal;
|
||||
color: var(--pf-c-dropdown__menu-item--Color);
|
||||
}
|
||||
|
||||
.keycloak_help-header-switch {
|
||||
margin-left: var(--pf-global--spacer--xl);
|
||||
}
|
||||
|
||||
.keycloak_help-header-switch .pf-c-switch__toggle::before {
|
||||
background-color: var(--pf-c-switch__toggle-icon--Color);
|
||||
}
|
||||
Loading…
Reference in a new issue