Skip to content

Commit

Permalink
[EPM] update to layout and and spacing (#49413)
Browse files Browse the repository at this point in the history 
* fix height and color issues

* make container full height

* remove panels per design update and make white bg color

* adjust spacing

* check for empty response

* fix eslint issue

* fix layout in safari

* remove unused component
  • Loading branch information
@neptunian
neptunian authored Oct 29, 2019
1 parent 3c58273 commit 15faaa7
Show file tree
Hide file tree
Showing 6 changed files with 64 additions and 88 deletions.
103 changes: 50 additions & 53 deletions x-pack/legacy/plugins/integrations_manager/public/components/asset_accordion.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,6 @@ import {
EuiHorizontalRule,
EuiIcon,
EuiNotificationBadge,
EuiPanel,
EuiText,
EuiTitle,
EuiSpacer,
Expand All @@ -35,61 +34,59 @@ export function AssetAccordion({ assets }: { assets: AssetsGroupedByServiceByTyp
{entries(assets).map(([service, typeToParts], assetIndex) => {
return (
<Fragment key={service}>
<EuiPanel grow={false} paddingSize="none">
<FlexGroup gutterSize="s" alignItems="center">
<EuiFlexItem grow={false}>
<EuiIcon type={ServiceIcons[service]} />
</EuiFlexItem>
<FlexGroup gutterSize="s" alignItems="center">
<EuiFlexItem grow={false}>
<EuiIcon type={ServiceIcons[service]} />
</EuiFlexItem>

<EuiFlexItem>
<EuiTitle key={service}>
<EuiText>
<h4>{ServiceTitleMap[service]} Assets</h4>
</EuiText>
</EuiTitle>
</EuiFlexItem>
</FlexGroup>
<EuiHorizontalRule margin="none" />
<EuiFlexItem>
<EuiTitle key={service}>
<EuiText>
<h4>{ServiceTitleMap[service]} Assets</h4>
</EuiText>
</EuiTitle>
</EuiFlexItem>
</FlexGroup>
<EuiHorizontalRule margin="none" />

{entries(typeToParts).map(([type, parts], typeIndex, typeEntries) => {
const iconType = AssetIcons[type];
// @types/styled-components@3 does yet support `defaultProps`, which EuiAccordion uses
// Ref: https://github.com/DefinitelyTyped/DefinitelyTyped/pull/31903
// we're a major version behind; nearly 2
return (
<Fragment key={type}>
<EuiAccordion
style={{ margin: theme.eui.euiFormControlPadding }}
id={type}
buttonContent={
<EuiFlexGroup gutterSize="s" alignItems="center">
<EuiFlexItem grow={false}>
{iconType ? <EuiIcon type={iconType} size="s" /> : ''}
</EuiFlexItem>
{entries(typeToParts).map(([type, parts], typeIndex, typeEntries) => {
const iconType = AssetIcons[type];
// @types/styled-components@3 does yet support `defaultProps`, which EuiAccordion uses
// Ref: https://github.com/DefinitelyTyped/DefinitelyTyped/pull/31903
// we're a major version behind; nearly 2
return (
<Fragment key={type}>
<EuiAccordion
style={{ margin: theme.eui.euiFormControlPadding }}
id={type}
buttonContent={
<EuiFlexGroup gutterSize="s" alignItems="center">
<EuiFlexItem grow={false}>
{iconType ? <EuiIcon type={iconType} size="s" /> : ''}
</EuiFlexItem>

<EuiFlexItem>
<EuiText color="secondary">{AssetTitleMap[type]}</EuiText>
</EuiFlexItem>
</EuiFlexGroup>
}
paddingSize="m"
extraAction={
<EuiNotificationBadge color="subdued" size="m">
{parts.length}
</EuiNotificationBadge>
}
>
<EuiText>
<span role="img" aria-label="woman shrugging">
🤷
</span>
</EuiText>
</EuiAccordion>
{typeIndex < typeEntries.length - 1 ? <EuiHorizontalRule margin="none" /> : ''}
</Fragment>
);
})}
</EuiPanel>
<EuiFlexItem>
<EuiText color="secondary">{AssetTitleMap[type]}</EuiText>
</EuiFlexItem>
</EuiFlexGroup>
}
paddingSize="m"
extraAction={
<EuiNotificationBadge color="subdued" size="m">
{parts.length}
</EuiNotificationBadge>
}
>
<EuiText>
<span role="img" aria-label="woman shrugging">
🤷
</span>
</EuiText>
</EuiAccordion>
{typeIndex < typeEntries.length - 1 ? <EuiHorizontalRule margin="none" /> : ''}
</Fragment>
);
})}
<EuiSpacer size="l" />
</Fragment>
);
Expand Down
2 changes: 1 addition & 1 deletion x-pack/legacy/plugins/integrations_manager/public/index.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@ import { routes } from './routes';
export type DetailViewPanelName = 'overview' | 'assets' | 'data-sources';

const REACT_APP_ROOT_ID = 'epm__root';
const template = `<div id="${REACT_APP_ROOT_ID}"></div>`;
const template = `<div id="${REACT_APP_ROOT_ID}" style="flex-grow: 1; display: flex; flex-direction: column"></div>`;
const getRootEl = () => document.getElementById(REACT_APP_ROOT_ID);

main();
Expand Down
21 changes: 5 additions & 16 deletions x-pack/legacy/plugins/integrations_manager/public/screens/detail/content.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,33 +6,24 @@

import React from 'react';
import styled from 'styled-components';
import {
EuiFlexGroup,
EuiFlexItem,
EuiHorizontalRule,
EuiPanel,
EuiSpacer,
EuiTitle,
} from '@elastic/eui';
import { EuiFlexGroup, EuiFlexItem, EuiHorizontalRule, EuiSpacer, EuiTitle } from '@elastic/eui';
import { SideNavLinks } from './side_nav_links';
import { PackageInfo } from '../../../common/types';
import { AssetAccordion } from '../../components/asset_accordion';
import { AssetsFacetGroup } from '../../components/assets_facet_group';
import { Requirements } from '../../components/requirements';
import { CenterColumn, LeftColumn, RightColumn } from './layout';
import { OverviewPanel } from './overview_panel';
import { useCore } from '../../hooks/use_core';
import { DEFAULT_PANEL, DetailProps } from '.';

type ContentProps = PackageInfo & Pick<DetailProps, 'panel'> & { hasIconPanel: boolean };
export function Content(props: ContentProps) {
const { hasIconPanel, name, panel, version } = props;
const { theme } = useCore();
const SideNavColumn = hasIconPanel
? styled(LeftColumn)`
/* 🤢🤷 https://www.styled-components.com/docs/faqs#how-can-i-override-styles-with-higher-specificity */
&&& {
margin-top: ${theme.eui.euiKeyPadMenuSize};
margin-top: 77px;
}
`
: LeftColumn;
Expand Down Expand Up @@ -64,11 +55,9 @@ export function ContentPanel(props: ContentPanelProps) {
return <AssetAccordion assets={assets} />;
case 'data-sources':
return (
<EuiPanel>
<EuiTitle size="xs">
<span>Data Sources</span>
</EuiTitle>
</EuiPanel>
<EuiTitle size="xs">
<span>Data Sources</span>
</EuiTitle>
);
case 'overview':
default:
Expand Down
1 change: 0 additions & 1 deletion x-pack/legacy/plugins/integrations_manager/public/screens/detail/header.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -34,7 +34,6 @@ export function Header(props: HeaderProps) {
const FullWidthNavRow = styled(EuiPage)`
/* no left padding so link is against column left edge */
padding-left: 0;
background-color: ${p => p.theme.eui.euiColorLightestShade};
`;

const Text = styled.span`
Expand Down
22 changes: 6 additions & 16 deletions x-pack/legacy/plugins/integrations_manager/public/screens/detail/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -37,7 +37,7 @@ export function Detail({ pkgkey, panel = DEFAULT_PANEL }: DetailProps) {

type LayoutProps = PackageInfo & Pick<DetailProps, 'panel'> & EuiPageWidthProps;
export function DetailLayout(props: LayoutProps) {
const { name, restrictWidth, panel } = props;
const { name, restrictWidth } = props;
const { theme } = useCore();
const iconType = ICON_TYPES.find(key => key.toLowerCase() === `logo${name}`);

Expand All @@ -46,13 +46,14 @@ export function DetailLayout(props: LayoutProps) {
padding-bottom: ${theme.eui.paddingSizes.xl};
`;

const FullWidthRemainingHeight = styled(EuiPage)`
const paddingSizeTop: number = parseInt(theme.eui.paddingSizes.xl, 10) * 1.25;
const FullWidthContent = styled(EuiPage)`
background-color: ${theme.eui.euiColorEmptyShade};
height: calc(100vh - ${topBarsHeight()}px);
height: 100%;
padding-top: ${paddingSizeTop}px;
flex-grow: 1;
`;

const FullWidthContent = panel === 'overview' ? FullWidthRemainingHeight : EuiPage;

return (
<Fragment>
<FullWidthHeader>
Expand All @@ -68,14 +69,3 @@ export function DetailLayout(props: LayoutProps) {
</Fragment>
);
}

function topBarsHeight() {
const { theme } = useCore();
const globalNav = parseInt(theme.eui.euiHeaderChildSize, 10);
const pageTopNav = /* line-height */ 24 + /* padding-top */ 16 + /* padding-bottom */ 16;
const title = /* line-height */ 48;
const header = /* padding-top */ 16 + pageTopNav + title + /* padding-bottom */ 16;
const topBarsTotal = globalNav + header;

return topBarsTotal;
}
3 changes: 2 additions & 1 deletion x-pack/legacy/plugins/integrations_manager/public/screens/detail/readme.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,8 @@ export function Readme({ readmePath }: { readmePath: string }) {

return (
<Fragment>
{markdown ? (
{// checking against undefined because currently some readme paths exist with empty response
markdown !== undefined ? (
<ReactMarkdown renderers={markdownRenderers} source={markdown} />
) : (
<EuiText>
Expand Down

0 comments on commit 15faaa7

Please sign in to comment.