#68163 Make footer messaging sticky to bottom of page (#68327)

Co-authored-by: Elastic Machine <elasticmachine@users.noreply.github.com>
This commit is contained in:
Jen Huang 2020-06-08 15:20:36 -07:00 committed by GitHub
parent e591aa99d3
commit b39234ce80
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 76 additions and 71 deletions

View file

@ -15,6 +15,7 @@ const Message = styled(EuiText).attrs((props) => ({
size: 's', size: 's',
}))` }))`
padding: ${(props) => props.theme.eui.paddingSizes.m}; padding: ${(props) => props.theme.eui.paddingSizes.m};
margin-top: auto;
`; `;
export const AlphaMessaging: React.FC<{}> = () => { export const AlphaMessaging: React.FC<{}> = () => {

View file

@ -20,6 +20,8 @@ interface Props {
const Container = styled.div` const Container = styled.div`
min-height: calc(100vh - ${(props) => props.theme.eui.euiHeaderChildSize}); min-height: calc(100vh - ${(props) => props.theme.eui.euiHeaderChildSize});
background: ${(props) => props.theme.eui.euiColorEmptyShade}; background: ${(props) => props.theme.eui.euiColorEmptyShade};
display: flex;
flex-direction: column;
`; `;
const Nav = styled.nav` const Nav = styled.nav`
@ -52,85 +54,87 @@ export const DefaultLayout: React.FunctionComponent<Props> = ({
/> />
)} )}
<Container> <Container>
<Nav> <div>
<EuiFlexGroup gutterSize="l" alignItems="center"> <Nav>
<EuiFlexItem grow={false}> <EuiFlexGroup gutterSize="l" alignItems="center">
<EuiIcon type="savedObjectsApp" size="l" /> <EuiFlexItem grow={false}>
</EuiFlexItem> <EuiIcon type="savedObjectsApp" size="l" />
<EuiFlexItem> </EuiFlexItem>
<EuiTabs display="condensed"> <EuiFlexItem>
<EuiTab isSelected={section === 'overview'} href={getHref('overview')}> <EuiTabs display="condensed">
<FormattedMessage <EuiTab isSelected={section === 'overview'} href={getHref('overview')}>
id="xpack.ingestManager.appNavigation.overviewLinkText" <FormattedMessage
defaultMessage="Overview" id="xpack.ingestManager.appNavigation.overviewLinkText"
/> defaultMessage="Overview"
</EuiTab> />
<EuiTab </EuiTab>
isSelected={section === 'epm'} <EuiTab
href={getHref('integrations_all')} isSelected={section === 'epm'}
disabled={!epm?.enabled} href={getHref('integrations_all')}
> disabled={!epm?.enabled}
<FormattedMessage
id="xpack.ingestManager.appNavigation.epmLinkText"
defaultMessage="Integrations"
/>
</EuiTab>
<EuiTab
isSelected={section === 'agent_config'}
href={getHref('configurations_list')}
>
<FormattedMessage
id="xpack.ingestManager.appNavigation.configurationsLinkText"
defaultMessage="Configurations"
/>
</EuiTab>
<EuiTab
isSelected={section === 'fleet'}
href={getHref('fleet')}
disabled={!fleet?.enabled}
>
<FormattedMessage
id="xpack.ingestManager.appNavigation.fleetLinkText"
defaultMessage="Fleet"
/>
</EuiTab>
<EuiTab isSelected={section === 'data_stream'} href={getHref('data_streams')}>
<FormattedMessage
id="xpack.ingestManager.appNavigation.dataStreamsLinkText"
defaultMessage="Data streams"
/>
</EuiTab>
</EuiTabs>
</EuiFlexItem>
<EuiFlexItem grow={false}>
<EuiFlexGroup gutterSize="s" direction="row">
<EuiFlexItem>
<EuiButtonEmpty
iconType="popout"
href="https://ela.st/ingest-manager-feedback"
target="_blank"
> >
<FormattedMessage <FormattedMessage
id="xpack.ingestManager.appNavigation.sendFeedbackButton" id="xpack.ingestManager.appNavigation.epmLinkText"
defaultMessage="Send Feedback" defaultMessage="Integrations"
/> />
</EuiButtonEmpty> </EuiTab>
</EuiFlexItem> <EuiTab
{showSettings ? ( isSelected={section === 'agent_config'}
href={getHref('configurations_list')}
>
<FormattedMessage
id="xpack.ingestManager.appNavigation.configurationsLinkText"
defaultMessage="Configurations"
/>
</EuiTab>
<EuiTab
isSelected={section === 'fleet'}
href={getHref('fleet')}
disabled={!fleet?.enabled}
>
<FormattedMessage
id="xpack.ingestManager.appNavigation.fleetLinkText"
defaultMessage="Fleet"
/>
</EuiTab>
<EuiTab isSelected={section === 'data_stream'} href={getHref('data_streams')}>
<FormattedMessage
id="xpack.ingestManager.appNavigation.dataStreamsLinkText"
defaultMessage="Data streams"
/>
</EuiTab>
</EuiTabs>
</EuiFlexItem>
<EuiFlexItem grow={false}>
<EuiFlexGroup gutterSize="s" direction="row">
<EuiFlexItem> <EuiFlexItem>
<EuiButtonEmpty iconType="gear" onClick={() => setIsSettingsFlyoutOpen(true)}> <EuiButtonEmpty
iconType="popout"
href="https://ela.st/ingest-manager-feedback"
target="_blank"
>
<FormattedMessage <FormattedMessage
id="xpack.ingestManager.appNavigation.settingsButton" id="xpack.ingestManager.appNavigation.sendFeedbackButton"
defaultMessage="Settings" defaultMessage="Send Feedback"
/> />
</EuiButtonEmpty> </EuiButtonEmpty>
</EuiFlexItem> </EuiFlexItem>
) : null} {showSettings ? (
</EuiFlexGroup> <EuiFlexItem>
</EuiFlexItem> <EuiButtonEmpty iconType="gear" onClick={() => setIsSettingsFlyoutOpen(true)}>
</EuiFlexGroup> <FormattedMessage
</Nav> id="xpack.ingestManager.appNavigation.settingsButton"
{children} defaultMessage="Settings"
/>
</EuiButtonEmpty>
</EuiFlexItem>
) : null}
</EuiFlexGroup>
</EuiFlexItem>
</EuiFlexGroup>
</Nav>
{children}
</div>
<AlphaMessaging /> <AlphaMessaging />
</Container> </Container>
</> </>