libre.sh/keycloak-scim
4
0
Fork 0
Code Issues 15 Pull requests Releases 1 Activity Actions

fixed issue related to dark mode (#30510)

Browse source 
Signed-off-by: Agnieszka Gancarczyk <agancarc@redhat.com>
Co-authored-by: Agnieszka Gancarczyk <agancarc@redhat.com>
This commit is contained in:
agagancarczyk 2024-06-18 08:06:21 +01:00 committed by GitHub
parent 83af3bc455
commit bb4d2ecf92
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
7 changed files with 57 additions and 27 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

11
js/apps/admin-ui/src/components/dropdown-panel/DropdownPanel.tsx
View file

@ -1,6 +1,7 @@
import { useEffect, useRef } from "react";
import { Icon } from "@patternfly/react-core";
import { CaretDownIcon } from "@patternfly/react-icons";
import { mediaQuery } from "../../util";
import "./dropdown-panel.css";
type DropdownPanelProps = {
@ -63,7 +64,15 @@ const DropdownPanel: React.FC<DropdownPanelProps> = ({
</Icon>
</button>
{searchDropdownOpen && (
<div className="kc-dropdown-panel-content">{children}</div>
<div
className={
mediaQuery?.matches
? "kc-dropdown-panel-content dark-mode"
: "kc-dropdown-panel-content light-mode"
}
>
{children}
</div>
)}
</span>
);

15
js/apps/admin-ui/src/components/dropdown-panel/dropdown-panel.css
View file

@ -1,9 +1,8 @@
.kc-dropdown-panel {
background-color: transparent;
padding: var(--pf-v5-global--spacer--form-element) var(--pf-v5-global--spacer--sm)
var(--pf-v5-global--spacer--form-element) var(--pf-v5-global--spacer--sm);
border-color: var(--pf-v5-global--BorderColor--300)
var(--pf-v5-global--BorderColor--300) var(--pf-v5-global--BorderColor--200)
padding: var(--pf-v5-global--spacer--form-element) var(--pf-v5-global--spacer--sm) var(--pf-v5-global--spacer--form-element)
var(--pf-v5-global--spacer--sm);
border-color: var(--pf-v5-global--BorderColor--300) var(--pf-v5-global--BorderColor--300) var(--pf-v5-global--BorderColor--200)
var(--pf-v5-global--BorderColor--300);
border-width: var(--pf-v5-global--BorderWidth--sm);
border-style: solid;
@ -36,3 +35,11 @@
padding: 0.75rem;
z-index: 1;
}
.light-mode {
background-color: var(--pf-v5-global--Color--light-100);
}
.dark-mode {
background-color: var(--pf-v5-global--BackgroundColor--300);
}

4
js/apps/admin-ui/src/components/users/UserDataTableAttributeSearchForm.tsx
View file

@ -162,7 +162,9 @@ export function UserDataTableAttributeSearchForm({
setSelectAttributeKeyOpen(false);
setValue("name", option.name!);
}}
/>
>
{label(t, option.displayName!, option.name)}
</SelectOption>
))}
</KeycloakSelect>
);

8
js/apps/admin-ui/src/events/AdminEvents.tsx
View file

@ -333,7 +333,9 @@ export const AdminEvents = () => {
}
>
{resourceTypes?.map((option) => (
<SelectOption key={option} value={option} />
<SelectOption key={option} value={option}>
{option}
</SelectOption>
))}
</KeycloakSelect>
)}
@ -399,7 +401,9 @@ export const AdminEvents = () => {
<SelectOption
key={option.toString()}
value={option}
/>
>
{option}
</SelectOption>
))}
</KeycloakSelect>
)}

2
js/apps/admin-ui/src/realm-settings/ThemesTab.tsx
View file

@ -163,7 +163,7 @@ export const RealmSettingsThemesTab = ({
isOpen={adminUIThemeOpen}
placeholderText={t("selectATheme")}
data-testid="select-admin-theme"
aria-label="selectAdminTheme"
aria-label={t("selectAdminTheme")}
>
{themeTypes.admin
.filter((theme) => theme.name !== "base")

35
js/apps/admin-ui/src/realm-settings/localization/EffectiveMessageBundles.tsx
View file

@ -229,6 +229,7 @@ export const EffectiveMessageBundles = ({
<Controller
name="theme"
control={control}
defaultValue=""
rules={{
validate: (value) => (value || "").length > 0,
}}
@ -252,7 +253,7 @@ export const EffectiveMessageBundles = ({
field.onChange("");
}}
isOpen={selectThemesOpen}
aria-labelledby={t("theme")}
aria-label={t("selectTheme")}
chipGroupComponent={
<ChipGroup>
<Chip
@ -270,14 +271,16 @@ export const EffectiveMessageBundles = ({
{[
<SelectOption
key="theme_placeholder"
value="Select theme"
label={t("selectTheme")}
className="kc__effective_message_bundles_search_theme__placeholder"
isDisabled
/>,
>
{t("selectTheme")}
</SelectOption>,
].concat(
themeNames.map((option) => (
<SelectOption key={option} value={option} />
<SelectOption key={option} value={option}>
{option}
</SelectOption>
)),
)}
</KeycloakSelect>
@ -292,6 +295,7 @@ export const EffectiveMessageBundles = ({
<Controller
name="themeType"
control={control}
defaultValue=""
rules={{
validate: (value) => (value || "").length > 0,
}}
@ -315,7 +319,7 @@ export const EffectiveMessageBundles = ({
field.onChange("");
}}
isOpen={selectThemeTypeOpen}
aria-labelledby={t("themeType")}
aria-label={t("selectThemeType")}
chipGroupComponent={
<ChipGroup>
<Chip
@ -333,14 +337,16 @@ export const EffectiveMessageBundles = ({
{[
<SelectOption
key="themeType_placeholder"
value="Select theme type"
label={t("selectThemeType")}
className="pf-m-plain"
isDisabled
/>,
>
{t("selectThemeType")}
</SelectOption>,
].concat(
themeTypes.map((option) => (
<SelectOption key={option} value={option} />
<SelectOption key={option} value={option}>
{option}
</SelectOption>
)),
)}
</KeycloakSelect>
@ -351,6 +357,7 @@ export const EffectiveMessageBundles = ({
<Controller
name="locale"
control={control}
defaultValue=""
rules={{
validate: (value) => (value || "").length > 0,
}}
@ -374,7 +381,7 @@ export const EffectiveMessageBundles = ({
field.onChange("");
}}
isOpen={selectLanguageOpen}
aria-labelledby="language"
aria-label={t("selectLanguage")}
chipGroupComponent={
<ChipGroup>
{field.value ? (
@ -397,11 +404,11 @@ export const EffectiveMessageBundles = ({
{[
<SelectOption
key="language_placeholder"
value="Select language"
label={t("selectLanguage")}
className="pf-m-plain"
isDisabled
/>,
>
{t("selectLanguage")}
</SelectOption>,
].concat(
combinedLocales.map((option) => (
<SelectOption key={option} value={option}>

9
js/apps/admin-ui/src/util.ts
View file

@ -83,9 +83,10 @@ export function convertAttributeNameToForm<T>(
name: string,
): PathValue<T, Path<T>> {
const index = name.indexOf(".");
return `${name.substring(0, index)}.${beerify(
name.substring(index + 1),
)}` as PathValue<T, Path<T>>;
return `${name.substring(0, index)}.${beerify(name.substring(index + 1))}` as PathValue<
T,
Path<T>
>;
}
export const beerify = <T extends string>(name: T) =>
@ -182,7 +183,7 @@ export const localeToDisplayName = (locale: string, displayLocale: string) => {
};
const DARK_MODE_CLASS = "pf-v5-theme-dark";
const mediaQuery =
export const mediaQuery =
window.matchMedia && window.matchMedia("(prefers-color-scheme: dark)");
updateDarkMode(mediaQuery?.matches);