Skip to content

Commit

Permalink
Merge pull request #852 from omesh-omg/fixissue#541
Browse files Browse the repository at this point in the history 
Adding highlight for the base color
  • Loading branch information
@aaronreed708
aaronreed708 authored May 8, 2024
2 parents 79104fc + edbc2a1 commit 5142fd9
Show file tree
Hide file tree
Showing 8 changed files with 63 additions and 17 deletions.
6 changes: 5 additions & 1 deletion code/src/ui/src/components/ColorSelect.css
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,8 @@
div.MuiPopover-paper > ul.MuiMenu-list > div.shade-row {
display: flex;
overflow: hidden;
}
}
.baseLabel{
font-size: var(--caption-boldFontSize);
font-weight: var(--caption-boldFontWeight);
}
20 changes: 17 additions & 3 deletions code/src/ui/src/components/ColorSelect.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,8 +8,12 @@ import { Event, EventType, PropertyColorShade, Shade } from '@finos/a11y-theme-b
import { ColorShade } from '../components/ColorShade';
import './ColorSelect.css';

// baseColorHex is an optional property that allows the caller to specify a set of hex color values
// which this component will label as "base" if they appear in the selectable shades list. A "base" color is
// one of the actual colors that the user manually added to the color palette and not a calculated shade.
interface Props {
value: PropertyColorShade;
baseColorHex?: Set<string>;
label?: string;
defaultValue?: string;
}
Expand All @@ -26,13 +30,14 @@ class GridShade {
}
}

export const ColorSelect: React.FC<Props> = ({value, label, defaultValue}) => {
export const ColorSelect: React.FC<Props> = ({value,baseColorHex, label, defaultValue}) => {

const [_selectedValue, _setSelectedValue] = useState<string>(defaultValue || "");
const [_selectableValues, _setSelectableValues] = useState<GridShade[]>([]);
const [_selectableValuesGrid, _setSelectableValuesGrid] = useState<Shade[][]>();
const [_longestRow, _setLongestRow] = useState<number>(0);
const [_disabled, _setDisabled] = useState<boolean>(false);
const [_shadeLabel, _setShadeLabel] = useState<string>("");

useEffect(() => {
if (value) {
Expand Down Expand Up @@ -120,6 +125,7 @@ export const ColorSelect: React.FC<Props> = ({value, label, defaultValue}) => {
const newSelectedValue = _selectableValues[indexOfSelectedItem].shade;
value.setValue(newSelectedValue);
_setSelectedValue(selectedValue);
_setShadeLabel(_getShadeLabel(newSelectedValue));
console.log(`Color changed by UI to ${value}`);
}
};
Expand All @@ -140,6 +146,10 @@ export const ColorSelect: React.FC<Props> = ({value, label, defaultValue}) => {
return _selectableValues[parseInt(index)].shade;
}

const _getShadeLabel = (shade: Shade): string => {
const label = `${shade.getLabel()}`;
return label;
}
// this code will turn the unordered list (<ul />) internally used by
// Mui Select into a grid. Each menu item in the list will be positioned
// in the grid based on where that shade was in the selectableValuesGrid
Expand Down Expand Up @@ -179,7 +189,11 @@ export const ColorSelect: React.FC<Props> = ({value, label, defaultValue}) => {
{_selectableValues && _selectableValues.map((gridShade, i) => {
return(
<MenuItem key={`shade${i}`} value={`${gridShade.shade.hex};${i}`} sx={{gridArea: `${gridShade.row+1}/${gridShade.column+1}`}}>
<ColorShade shade={gridShade.shade} />
<div>
<ColorShade label={_getShadeLabel(gridShade.shade)} shade={gridShade.shade} />
{baseColorHex?.has(gridShade.shade.hex.toLowerCase())&&<div className=" text-center baseLabel " id="color-id" style={{}}>Base</div>}
{!baseColorHex?.has(gridShade.shade.hex.toLowerCase())&& <div style={{height:"25px"}}></div>}
</div>
</MenuItem>
);
})}
Expand All @@ -194,4 +208,4 @@ export const ColorSelect: React.FC<Props> = ({value, label, defaultValue}) => {
);

}
}
}
2 changes: 1 addition & 1 deletion code/src/ui/src/components/ColorShade.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,7 @@
margin: 8px auto;
}
li .Hex {
margin-right: 8px;
margin: 2px;
}
.color-block .Hex {
margin: 8px auto !important;
Expand Down
8 changes: 6 additions & 2 deletions code/src/ui/src/components/ColorShadeCss.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -59,10 +59,11 @@ interface Props {
label?: string;
showId?: boolean;
showDetails?: boolean;
isBaseColor?:boolean;

}

export const ColorShadeCss: React.FC<Props> = ({className, name, id, lm, label, showId, showDetails}) => {
export const ColorShadeCss: React.FC<Props> = ({className, name, id, lm, label, showId, showDetails,isBaseColor}) => {

const [_shade, _setShade] = useState<Shade>();
let base = name+"-"+id;
Expand Down Expand Up @@ -102,10 +103,13 @@ export const ColorShadeCss: React.FC<Props> = ({className, name, id, lm, label,
}, []);

return (
<div className={className ?? ""}>
<div className={className ?? ""} style={isBaseColor ? {paddingTop:"2px",paddingLeft:"4px",borderRadius:"8px",backgroundColor:"var(--primary-quarter"} : {}}>
{label && <div className="caption text-center">{label}</div>}
{showId && <div className="subtitle1 text-center">{id}</div>}
<div className="Hex" style={style}>Aa</div>
{isBaseColor&&<div className="inserted-item text-center " id="color-id" style={{fontSize:"var(--caption-boldFontSize)",fontWeight:"var(--caption-boldFontWeight)"}}>Base</div>}
{/* just to fix uppermargin */}
{!isBaseColor&&<div style={{height:"25px"}}></div>}
{showDetails && <div className="swatch-details active">
Color: <span>{backgroundValue}</span>
</div>}
Expand Down
24 changes: 18 additions & 6 deletions code/src/ui/src/components/CreateColorTheme.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@
*/
import React, { useEffect, useRef, useState } from 'react';
import { Button, Grid } from '@mui/material';
import { ColorTheme, ColorThemes, Event, EventType, Shade } from '@finos/a11y-theme-builder-sdk';
import { ColorPalette, ColorTheme, ColorThemes, Event, EventType, Shade } from '@finos/a11y-theme-builder-sdk';
import { ColorSelect } from './ColorSelect';
import { ColorPairSelect } from './ColorPairSelect';
import { ColorGradient } from './ColorGradient';
Expand All @@ -18,17 +18,19 @@ import { GeneratedCodeSection } from '../pages/content/GeneratedCodeSection'

interface Props {
atom: ColorThemes;
colorPalette: ColorPalette;
handleDefaultThemeInitialized: (newDefaultThemeName: string) => void;
}

export const CreateColorTheme: React.FC<Props> = ({atom, handleDefaultThemeInitialized}) => {
export const CreateColorTheme: React.FC<Props> = ({atom,colorPalette, handleDefaultThemeInitialized}) => {

const defaultIconShade = Shade.fromHex("#ffffff");

const [_colorTheme, _setColorTheme] = useState<ColorTheme>();
const [_themeInitialized, _setThemeInitialized] = useState<boolean>(false);
const [_iconColor, _setIconColor] = useState<Shade>(defaultIconShade);
const [_openConfirmation, _setOpenConfirmation] = useState<boolean>(false);
const [_baseColorsHex, _setBaseColorsHex] = useState<Set<string>>();

const colorIconRef = useRef<HTMLDivElement>(null);

Expand Down Expand Up @@ -99,7 +101,17 @@ export const CreateColorTheme: React.FC<Props> = ({atom, handleDefaultThemeIniti
handleDefaultThemeInitialized(_colorTheme?.name || "");
}
}

useEffect(() => {
const baseColorsHex= new Set<string>;
colorPalette.getColors().map((color)=>{
const hexValue = color.hex?.getValue();
if (hexValue) {
baseColorsHex.add(hexValue);
}
});
_setBaseColorsHex(baseColorsHex);
}, [colorPalette])

if (_colorTheme) {
return (
<div className="content theme-page active" id="buildThemes">
Expand All @@ -120,9 +132,9 @@ export const CreateColorTheme: React.FC<Props> = ({atom, handleDefaultThemeIniti
<div className="formRow">
<div className="subtitle1">Theme Colors</div>
<div className="form-columns top16">
<ColorSelect value={_colorTheme.primary} label="Primary"></ColorSelect>
<ColorSelect value={_colorTheme.secondary} label="Secondary"></ColorSelect>
<ColorSelect value={_colorTheme.tertiary} label="Tertiary"></ColorSelect>
<ColorSelect value={_colorTheme.primary} baseColorHex={_baseColorsHex} label="Primary"></ColorSelect>
<ColorSelect value={_colorTheme.secondary} baseColorHex={_baseColorsHex} label="Secondary"></ColorSelect>
<ColorSelect value={_colorTheme.tertiary} baseColorHex={_baseColorsHex} label="Tertiary"></ColorSelect>
</div>
</div>
<div className="formRow">
Expand Down
11 changes: 11 additions & 0 deletions code/src/ui/src/components/DisplayColorPalette.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -41,6 +41,12 @@ export const DisplayColorPalette: React.FC<Props> = ({ colorPalette, colors, lig
<div className="subtitle1">{color.name}</div>
<div className="colorRow">
{color.light.shades.map((shade, i) => {
if(shade.hex.toLowerCase()==color.hex.getValue()){
console.log("found base color",color.name);
return(
<ColorShadeCss className="color-block" key={"ColorShade" + i} name={color.name} id={shade.id} lm={true} showDetails={_showDetails} showId isBaseColor={true}/>
)
}
return (
<ColorShadeCss className="color-block" key={"ColorShade" + i} name={color.name} id={shade.id} lm={true} showDetails={_showDetails} showId/>
);
Expand All @@ -58,6 +64,11 @@ export const DisplayColorPalette: React.FC<Props> = ({ colorPalette, colors, lig
<div className="subtitle1">{color.name}</div>
<div className="colorRow">
{color.dark.shades.map((shade, i) => {
if(shade.hex.toLowerCase()==color.hex.getValue()){
console.log("found base color");
return(
<ColorShadeCss className="color-block" key={"ColorShade" + i} name={color.name} id={shade.id} lm={true} showDetails={_showDetails} showId isBaseColor={true}/>
)}
return (
<ColorShadeCss className="color-block" key={"ColorShade" + i} name={color.name} id={shade.id} lm={false} showDetails={_showDetails} showId/>
);
Expand Down
7 changes: 4 additions & 3 deletions code/src/ui/src/pages/atoms/ColorThemeAtom.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,16 +3,17 @@
* Licensed under Apache-2.0 License. See License.txt in the project root for license information
*/
import React, { useEffect, useState } from 'react';
import { ColorThemes } from '@finos/a11y-theme-builder-sdk';
import { ColorThemes, ColorPalette} from '@finos/a11y-theme-builder-sdk';
import { CreateColorTheme } from '../../components/CreateColorTheme';
import { DisplayColorTheme } from '../../components/DisplayColorTheme';

interface Props {
atom: ColorThemes;
colorPalette:ColorPalette;
defaultColor?: string;
}

export const ColorThemeAtom: React.FC<Props> = ({ atom }) => {
export const ColorThemeAtom: React.FC<Props> = ({ atom, colorPalette}) => {

const [_themeInitialized, _setThemeInitialized] = useState<boolean>(false);

Expand All @@ -30,7 +31,7 @@ export const ColorThemeAtom: React.FC<Props> = ({ atom }) => {
);
}
return (
<CreateColorTheme atom={atom} handleDefaultThemeInitialized={handleDefaultThemeInitialized} />
<CreateColorTheme atom={atom} colorPalette={colorPalette} handleDefaultThemeInitialized={handleDefaultThemeInitialized} />
);
}

2 changes: 1 addition & 1 deletion code/src/ui/src/pages/content/atoms/AtomContent.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -239,7 +239,7 @@ export const AtomContent: React.FC<Props> = ({ user, designSystem }) => {
)}
{showAtom === atoms.colorThemes.value && (
<ErrorHandler>
<ColorThemeAtom atom={designSystem.atoms.colorThemes}></ColorThemeAtom>
<ColorThemeAtom atom={designSystem.atoms.colorThemes} colorPalette={designSystem.atoms.colorPalette}></ColorThemeAtom>
</ErrorHandler>
)}
{showAtom === atoms.subcolorThemes.value && (
Expand Down

0 comments on commit 5142fd9

Please sign in to comment.