Skip to content

Commit

Permalink
feat(Header): make logo optional, expand css api
Browse files Browse the repository at this point in the history
  • Loading branch information
@Lunory
Lunory committed Jul 31, 2024
1 parent 5bcaf1f commit a5c4e9c
Show file tree
Hide file tree
Showing 6 changed files with 50 additions and 29 deletions.
2 changes: 2 additions & 0 deletions src/components/AsideHeader/AsideHeader.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -69,6 +69,8 @@ $block: '.#{variables.$ns}aside-header';
z-index: 2;
user-select: none;

padding-top: var(--gn-aside-header-padding-top);

& > #{$class}-logo {
margin: 8px 0;
}
Expand Down
49 changes: 26 additions & 23 deletions src/components/AsideHeader/README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -124,26 +124,29 @@ export const Aside: FC = () => {

## CSS API

| Name | Description | Default |
| :-------------------------------------------------------- | :------------------------------------------------------------ | :----------------------------: |
| `--gn-aside-header-decoration-collapsed-background-color` | Decoration color for collapsed navigation | `--g-color-base-warning-light` |
| `--gn-aside-header-decoration-expanded-background-color` | Decoration color for expanded navigation | `--g-color-base-warning-light` |
| `--gn-aside-header-background-color` | Navigation background color | `--g-color-base-background` |
| `--gn-aside-header-divider-horizontal-color` | All horizontal divider line color | `--g-color-line-generic` |
| `--gn-aside-header-divider-vertical-color` | Vertical divider line color between `AsideHeader` and content | `--g-color-line-generic` |
| `--gn-aside-top-panel-height` | **Read only**.`AsideHeader` top alert height | 0px |
| Item | | |
| `--gn-aside-header-general-item-icon-color` | Icon color for Subheader and Footer items | `--g-color-text-primary` |
| `--gn-aside-header-item-icon-color` | Icon color for CompositeBar items | `--g-color-text-misc` |
| `--gn-aside-header-item-text-color` | | `--g-color-text-primary` |
| `--gn-aside-header-item-background-color-hover` | | `--g-color-base-simple-hover` |
| Current Item | | |
| `--gn-aside-header-item-current-background-color` | | `--g-color-base-selection` |
| `--gn-aside-header-item-current-icon-color` | | |
| `--gn-aside-header-item-current-text-color` | | `--g-color-text-primary` |
| `--gn-aside-header-item-current-background-color-hover` | | |
| z-indexes | | |
| `--gn-aside-header-z-index` | Aside header z-index | 100 |
| `--gn-aside-header-panel-z-index` | Aside header panel (Drawer component) z-index | 98 |
| `--gn-aside-header-pane-top-z-index` | Top pane z-index | 98 |
| `--gn-aside-header-content-z-index` | Content (right part) z-index | 95 |
| Name | Description | Default |
| :-------------------------------------------------------- | :------------------------------------------------------------------------ | :----------------------------: |
| `--gn-aside-header-decoration-collapsed-background-color` | Decoration color for collapsed navigation | `--g-color-base-warning-light` |
| `--gn-aside-header-decoration-expanded-background-color` | Decoration color for expanded navigation | `--g-color-base-warning-light` |
| `--gn-aside-header-background-color` | Navigation background color | `--g-color-base-background` |
| `--gn-aside-header-divider-horizontal-color` | All horizontal divider line color | `--g-color-line-generic` |
| `--gn-aside-header-divider-vertical-color` | Vertical divider line color between `AsideHeader` and content | `--g-color-line-generic` |
| `--gn-aside-top-panel-height` | **Read only**.`AsideHeader` top alert height | 0px |
| `--gn-aside-header-padding-top` | Navigation top padding. May be helpful when logo and subheader items hide | |
| Item | | |
| `--gn-aside-header-general-item-icon-color` | Icon color for Subheader and Footer items | `--g-color-text-primary` |
| `--gn-aside-header-item-icon-color` | Icon color for CompositeBar items | `--g-color-text-misc` |
| `--gn-aside-header-item-text-color` | | `--g-color-text-primary` |
| `--gn-aside-header-item-background-color-hover` | | `--g-color-base-simple-hover` |
| Current Item | | |
| `--gn-aside-header-item-current-background-color` | | `--g-color-base-selection` |
| `--gn-aside-header-item-current-icon-color` | | |
| `--gn-aside-header-item-current-text-color` | | `--g-color-text-primary` |
| `--gn-aside-header-item-current-background-color-hover` | | |
| `--gn-aside-header-item-collapsed-radius` | Item border radius for collapsed navigation | 7px |
| `--gn-aside-header-item-expanded-radius` | Item border radius for expanded navigation | |
| z-indexes | | |
| `--gn-aside-header-z-index` | Aside header z-index | 100 |
| `--gn-aside-header-panel-z-index` | Aside header panel (Drawer component) z-index | 98 |
| `--gn-aside-header-pane-top-z-index` | Top pane z-index | 98 |
| `--gn-aside-header-content-z-index` | Content (right part) z-index | 95 |
3 changes: 2 additions & 1 deletion src/components/AsideHeader/components/FirstPanel.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -25,6 +25,7 @@ export const FirstPanel = React.forwardRef<HTMLDivElement>((_props, ref) => {
customBackgroundClassName,
className,
hideCollapseButton,
logo,
qa,
} = useAsideHeaderInnerContext();
const visibleMenuItems = useVisibleMenuItems();
Expand All @@ -46,7 +47,7 @@ export const FirstPanel = React.forwardRef<HTMLDivElement>((_props, ref) => {
{customBackground}
</div>
)}
<Header />
{logo && <Header />}
{visibleMenuItems?.length ? (
<CompositeBar
type="menu"
Expand Down
10 changes: 7 additions & 3 deletions src/components/AsideHeader/components/Header.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,15 +17,19 @@ export const Header = () => {
const {logo, onItemClick, onClosePanel, headerDecoration, subheaderItems} =
useAsideHeaderInnerContext();
const {compact} = useAsideHeaderContext();
const {onClick: onLogoClickProp} = logo;

const onLogoClick = useCallback(
(event: React.MouseEvent<HTMLElement, MouseEvent>) => {
onClosePanel?.();
onLogoClickProp?.(event);
logo?.onClick?.(event);
},
[onClosePanel, onLogoClickProp],
[onClosePanel, logo],
);

if (!logo) {
return null;
}

return (
<div className={b('header', {['with-decoration']: headerDecoration})}>
<Logo
Expand Down
2 changes: 1 addition & 1 deletion src/components/AsideHeader/types.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,7 @@ export interface LayoutProps {
}

export interface AsideHeaderGeneralProps extends QAProps {
logo: LogoProps;
logo?: LogoProps;
multipleTooltip?: boolean;
className?: string;
collapseTitle?: string;
Expand Down
13 changes: 12 additions & 1 deletion src/components/CompositeBar/Item/Item.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,13 +5,15 @@ $block: '.#{variables.$ns}composite-bar-item';
#{$block} {
$class: &;
--gn-composite-bar-item-action-size: 36px;

--_--horizontal-divider-line-color: var(--g-color-line-generic);

--_--item-background-color-hover: var(--g-color-base-simple-hover);

--_--item-general-icon-color: var(--g-color-text-primary);
--_--item-icon-color: var(--g-color-text-misc);
--_--item-text-color: var(--g-color-text-primary);
--_--item-collapsed-radius: 7px;

// selected item
--_--item-selected-text-color: var(--g-color-text-primary);
Expand Down Expand Up @@ -188,6 +190,8 @@ $block: '.#{variables.$ns}composite-bar-item';
--gn-aside-header-item-current-background-color,
var(--_--item-selected-background-color-active)
);

border-radius: var(--gn-aside-header-item-expanded-radius);
}
}

Expand All @@ -200,6 +204,8 @@ $block: '.#{variables.$ns}composite-bar-item';
var(--_--item-selected-background-color-active)
)
);

border-radius: var(--gn-aside-header-item-expanded-radius);
}
}

Expand All @@ -209,6 +215,8 @@ $block: '.#{variables.$ns}composite-bar-item';
--gn-aside-header-item-background-color-hover,
var(--_--item-background-color-hover)
);

border-radius: var(--gn-aside-header-item-expanded-radius);
}
}
}
Expand All @@ -234,7 +242,10 @@ $block: '.#{variables.$ns}composite-bar-item';
);
margin-top: -19px;
margin-left: -19px;
border-radius: 7px;
border-radius: var(
--gn-aside-header-item-collapsed-radius,
var(--_--item-collapsed-radius)
);
}
}

Expand Down

0 comments on commit a5c4e9c

Please sign in to comment.