github-mirrors/kibana
1
0
Fork 0
mirror of https://github.com/elastic/kibana.git synced 2025-04-23 17:28:26 -04:00
Code Issues Projects Releases Packages Wiki Activity

Spaces selector screen graphics and other cleanups (#24442) (#24501)

Browse source
This commit is contained in:
Caroline Horn 2018-10-24 13:22:49 -04:00 • committed by GitHub
parent 6e2d48be82
commit b3addf681c
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
44 changed files with 338 additions and 203 deletions
Download patch file Download diff file Expand all files Collapse all files

6
src/ui/public/chrome/directives/global_nav/global_nav_link/global_nav_link.less
View file

@ -85,13 +85,17 @@
.global-nav-link__title {
display: none;
width: calc(@global-nav-open-width - @global-nav-closed-width);
width: calc(@global-nav-open-width - @global-nav-closed-width - 3px);
float: right;
font-size: 0.9em;
text-align: left;
padding-left: 3px;
padding-right: 3px;
line-height: @app-icon-height;
white-space: nowrap;
max-width: 100%;
text-overflow: ellipsis;
overflow: hidden;
.is-global-nav-open & {
display: inline-block;

5
src/ui/public/chrome/directives/header_global_nav/components/header_nav_controls.tsx
View file

@ -43,7 +43,10 @@ export class HeaderNavControls extends Component<Props> {
}
private renderNavControl = (navControl: NavControl) => (
<EuiHeaderSectionItem key={navControl.name}>
<EuiHeaderSectionItem
key={navControl.name}
border={navControl.side === 'left' ? 'right' : 'left'}
>
<HeaderNavControl navControl={navControl} />
</EuiHeaderSectionItem>
);

66
x-pack/plugins/spaces/assets/bg_bottom_branded.svg Normal file
View file

@ -0,0 +1,66 @@
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="1169" height="880" viewBox="0 0 1169 880">
<defs>
<radialGradient id="bg_bottom_branded-b" cx="44.645%" cy="43.259%" r="93.821%" fx="44.645%" fy="43.259%" gradientTransform="matrix(.54075 .76504 -.6424 .64398 .483 -.188)">
<stop offset="0%" stop-color="#D9D9D9"/>
<stop offset="100%"/>
</radialGradient>
<polygon id="bg_bottom_branded-a" points="0 0 1048 880 0 880"/>
<linearGradient id="bg_bottom_branded-c" x1="98.924%" x2="7.157%" y1="48.924%" y2="48.924%">
<stop offset="0%" stop-color="#DFDDDD" stop-opacity=".25"/>
<stop offset="100%" stop-color="#FFF" stop-opacity=".2"/>
</linearGradient>
<linearGradient id="bg_bottom_branded-e" x1="0%" y1="47.421%" y2="47.421%">
<stop offset="0%" stop-color="#FFF" stop-opacity=".6"/>
<stop offset="100%" stop-opacity=".25"/>
</linearGradient>
<polygon id="bg_bottom_branded-d" points="560 364 1169 880 560 880"/>
<linearGradient id="bg_bottom_branded-g" x1="0%" y1="0%" y2="100%">
<stop offset="0%" stop-color="#FFF" stop-opacity=".2"/>
<stop offset="100%" stop-opacity="0"/>
</linearGradient>
<radialGradient id="bg_bottom_branded-h" cx="0%" cy="0%" r="127.62%" fx="0%" fy="0%" gradientTransform="scale(.9322 1) rotate(42.99)">
<stop offset="0%" stop-color="#BBB" stop-opacity=".1"/>
<stop offset="100%" stop-opacity=".5"/>
</radialGradient>
<polygon id="bg_bottom_branded-f" points="-12 538 342 868 -12 868"/>
<linearGradient id="bg_bottom_branded-j" x1="0%" y1="0%" y2="100%">
<stop offset="0%" stop-color="#FFF" stop-opacity=".4"/>
<stop offset="100%" stop-opacity="0"/>
</linearGradient>
<radialGradient id="bg_bottom_branded-k" cx="0%" cy="0%" r="148.368%" fx="0%" fy="0%" gradientTransform="matrix(.674 .674 -.73874 .61493 0 0)">
<stop offset="0%" stop-color="#FFF" stop-opacity=".101"/>
<stop offset="100%" stop-opacity=".15"/>
</radialGradient>
<path id="bg_bottom_branded-i" d="M197,880 L374,880 C365.385564,795.927984 296.005151,723.868711 197,686 L197,880 Z"/>
<radialGradient id="bg_bottom_branded-m" cx="0%" cy="0%" r="127.62%" fx="0%" fy="0%" gradientTransform="scale(1 .9322) rotate(47.01)">
<stop offset="0%" stop-color="#BBB" stop-opacity=".1"/>
<stop offset="100%" stop-opacity=".5"/>
</radialGradient>
<polygon id="bg_bottom_branded-l" points="165 703 330 880 165 880"/>
</defs>
<g fill="none" fill-rule="evenodd">
<g opacity=".1">
<use fill="#E4E4E4" xlink:href="#bg_bottom_branded-a"/>
<use fill="url(#bg_bottom_branded-b)" xlink:href="#bg_bottom_branded-a" style="mix-blend-mode:overlay"/>
</g>
<g opacity=".05">
<use fill="url(#bg_bottom_branded-c)" xlink:href="#bg_bottom_branded-d"/>
<use fill="url(#bg_bottom_branded-e)" xlink:href="#bg_bottom_branded-d" style="mix-blend-mode:overlay"/>
</g>
<g opacity=".65" transform="matrix(0 -1 -1 0 868 868)">
<use fill="#DD0A73" xlink:href="#bg_bottom_branded-f"/>
<use fill="url(#bg_bottom_branded-g)" xlink:href="#bg_bottom_branded-f" style="mix-blend-mode:overlay"/>
<use fill="url(#bg_bottom_branded-h)" xlink:href="#bg_bottom_branded-f" style="mix-blend-mode:overlay"/>
</g>
<g opacity=".65">
<use fill="#017F75" xlink:href="#bg_bottom_branded-i"/>
<use fill="url(#bg_bottom_branded-j)" xlink:href="#bg_bottom_branded-i" style="mix-blend-mode:overlay"/>
<use fill="url(#bg_bottom_branded-k)" xlink:href="#bg_bottom_branded-i" style="mix-blend-mode:overlay"/>
</g>
<g opacity=".15">
<use fill="#353535" xlink:href="#bg_bottom_branded-l"/>
<use fill="url(#bg_bottom_branded-g)" xlink:href="#bg_bottom_branded-l" style="mix-blend-mode:overlay"/>
<use fill="url(#bg_bottom_branded-m)" xlink:href="#bg_bottom_branded-l" style="mix-blend-mode:overlay"/>
</g>
</g>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 3.9 KiB

33
x-pack/plugins/spaces/assets/bg_top_branded.svg Normal file
View file

@ -0,0 +1,33 @@
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="400" height="373" viewBox="0 0 400 373">
<defs>
<linearGradient id="bg_top_branded-a" x1="10.793%" y1="50%" y2="50%">
<stop offset="0%" stop-color="#FFF" stop-opacity=".5"/>
<stop offset="100%" stop-color="#E2E2E2" stop-opacity="0"/>
</linearGradient>
<radialGradient id="bg_top_branded-c" cx="0%" cy="0%" r="146.629%" fx="0%" fy="0%" gradientTransform="matrix(.68199 .682 -.63596 .73135 0 0)">
<stop offset="0%" stop-color="#FFF" stop-opacity=".5"/>
<stop offset="100%" stop-opacity=".2"/>
</radialGradient>
<polygon id="bg_top_branded-b" points="400 373 0 0 400 0"/>
<linearGradient id="bg_top_branded-e" x1="0%" y1="35.11%" y2="0%">
<stop offset="0%" stop-color="#FFF" stop-opacity=".6"/>
<stop offset="100%" stop-opacity="0"/>
</linearGradient>
<radialGradient id="bg_top_branded-f" cy="0%" r="146.096%" fx="50%" fy="0%" gradientTransform="matrix(-.68448 .68448 -.64265 -.72903 .842 -.342)">
<stop offset="0%" stop-color="#FFF" stop-opacity=".7"/>
<stop offset="100%"/>
</radialGradient>
<polygon id="bg_top_branded-d" points="400 169 220 0 400 0"/>
</defs>
<g fill="none" fill-rule="evenodd">
<g opacity=".1">
<use fill="url(#bg_top_branded-a)" xlink:href="#bg_top_branded-b"/>
<use fill="url(#bg_top_branded-c)" xlink:href="#bg_top_branded-b" style="mix-blend-mode:overlay"/>
</g>
<g opacity=".05">
<use fill="#F5F5F5" xlink:href="#bg_top_branded-d"/>
<use fill="url(#bg_top_branded-e)" xlink:href="#bg_top_branded-d" style="mix-blend-mode:overlay"/>
<use fill="url(#bg_top_branded-f)" xlink:href="#bg_top_branded-d" style="mix-blend-mode:darken"/>
</g>
</g>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 1.8 KiB

1
x-pack/plugins/spaces/index.ts
View file

@ -42,6 +42,7 @@ export const spaces = (kibana: any) =>
uiExports: {
chromeNavControls: ['plugins/spaces/views/nav_control'],
styleSheetPaths: `${__dirname}/public/index.scss`,
managementSections: ['plugins/spaces/views/management'],
apps: [
{

13
x-pack/plugins/spaces/public/index.scss Normal file
View file

@ -0,0 +1,13 @@
// Import the EUI global scope so we can use EUI constants
@import 'ui/public/styles/_styling_constants';
/* Graph plugin styles */
// Prefix all styles with "spc" to avoid conflicts.
// Examples
// spcChart
// spcChart__legend
// spcChart__legend--small
// spcChart__legend-isLoading
@import './views/index';

4
x-pack/plugins/spaces/public/views/_index.scss Normal file
View file

@ -0,0 +1,4 @@
@import './components/index';
@import './management/index';
@import './nav_control/index';
@import './space_selector/index'

2
x-pack/plugins/spaces/public/views/components/_index.scss Normal file
View file

@ -0,0 +1,2 @@
@import './space_card';
@import './space_cards';

2
x-pack/plugins/spaces/public/views/components/space_card.less → x-pack/plugins/spaces/public/views/components/_space_card.scss
View file

@ -1,5 +1,5 @@
.euiCard.euiCard--isClickable.spaceCard {
width: 240px;
width: $euiSizeL * 10;
min-height: 200px;
}

2
x-pack/plugins/spaces/public/views/components/space_cards.less → x-pack/plugins/spaces/public/views/components/_space_cards.scss
View file

@ -1,4 +1,4 @@
.spaceCards {
max-width: 1200px;
margin: auto;
}
}

1
x-pack/plugins/spaces/public/views/components/space_card.tsx
View file

@ -13,7 +13,6 @@ import {
import React from 'react';
import { Space } from '../../../common/model/space';
import { SpaceAvatar } from '../../components';
import './space_card.less';
interface Props {
space: Space;

1
x-pack/plugins/spaces/public/views/components/space_cards.tsx
View file

@ -8,7 +8,6 @@ import { EuiFlexGroup, EuiFlexItem } from '@elastic/eui';
import React, { Component } from 'react';
import { Space } from '../../../common/model/space';
import { SpaceCard } from './space_card';
import './space_cards.less';
interface Props {
spaces: Space[];

2
x-pack/plugins/spaces/public/views/management/_index.scss Normal file
View file

@ -0,0 +1,2 @@
@import './manage_spaces';
@import './components/confirm_delete_modal';

16
x-pack/plugins/spaces/public/views/management/_manage_spaces.scss Normal file
View file

@ -0,0 +1,16 @@
#manageSpacesReactRoot {
background: $euiColorLightestShade;
flex-grow: 1;
}
.spcManagePage,
.spcGridPage {
min-height: calc(100vh - 70px);
}
.spcManagePage__content {
max-width: 640px;
margin-left: auto;
margin-right: auto;
flex-grow: 0;
}

2
x-pack/plugins/spaces/public/views/management/components/__snapshots__/confirm_delete_modal.test.tsx.snap
View file

@ -3,7 +3,7 @@
exports[`ConfirmDeleteModal renders as expected 1`] = `
<EuiOverlayMask>
<EuiModal
className="euiModal--confirmation"
className="spcConfirmDeleteModal"
maxWidth={true}
onClose={[MockFunction]}
>

5
x-pack/plugins/spaces/public/views/management/components/_confirm_delete_modal.scss Normal file
View file

@ -0,0 +1,5 @@
@import '@elastic/eui/src/components/form/variables';
.spcConfirmDeleteModal {
max-width: $euiFormMaxWidth + ($euiSizeL*2);
}

2
x-pack/plugins/spaces/public/views/management/components/confirm_delete_modal.tsx
View file

@ -71,7 +71,7 @@ export class ConfirmDeleteModal extends Component<Props, State> {
return (
<EuiOverlayMask>
<EuiModal onClose={onCancel} className={'euiModal--confirmation'}>
<EuiModal onClose={onCancel} className={'spcConfirmDeleteModal'}>
<EuiModalHeader>
<EuiModalHeaderTitle data-test-subj="confirmModalTitleText">
Delete space {`'${space.name}'`}

4
x-pack/plugins/spaces/public/views/management/edit_space/__snapshots__/space_identifier.test.tsx.snap
View file

@ -4,7 +4,7 @@ exports[`renders without crashing 1`] = `
<React.Fragment>
<EuiFormRow
describedByIds={Array []}
fullWidth={false}
fullWidth={true}
hasEmptyLabelSpace={false}
helpText={
<p>
@ -37,7 +37,7 @@ exports[`renders without crashing 1`] = `
>
<EuiFieldText
compressed={false}
fullWidth={false}
fullWidth={true}
inputRef={[Function]}
isLoading={false}
onChange={[Function]}

2
x-pack/plugins/spaces/public/views/management/edit_space/customize_space_avatar.tsx
View file

@ -55,7 +55,7 @@ export class CustomizeSpaceAvatar extends Component<Props, State> {
/>
</EuiFormRow>
</EuiFlexItem>
<EuiFlexItem grow={false}>
<EuiFlexItem grow={true}>
<EuiFormRow label={'Color'}>
<EuiColorPicker color={getSpaceColor(space)} onChange={this.onColorChange} />
</EuiFormRow>

53
x-pack/plugins/spaces/public/views/management/edit_space/manage_space_page.tsx
View file

@ -97,9 +97,9 @@ export class ManageSpacePage extends Component<Props, State> {
const content = this.state.isLoading ? this.getLoadingIndicator() : this.getForm();
return (
<EuiPage className="manageSpacePage">
<EuiPage className="spcManagePage">
<EuiPageBody>
<EuiPageContent className="manageSpacePage__content">
<EuiPageContent className="spcManagePage__content">
<EuiPageContentBody>{content}</EuiPageContentBody>
</EuiPageContent>
{this.maybeGetSecureSpacesMessage()}
@ -134,32 +134,29 @@ export class ManageSpacePage extends Component<Props, State> {
<EuiSpacer />
<EuiFlexGroup>
<EuiFlexItem style={{ maxWidth: '400px' }}>
<EuiFormRow label="Name" {...this.validator.validateSpaceName(this.state.space)}>
<EuiFieldText
name="name"
placeholder={'Awesome space'}
value={name}
onChange={this.onNameChange}
/>
</EuiFormRow>
</EuiFlexItem>
{name && (
<EuiFlexItem grow={false}>
<EuiFlexGroup responsive={false}>
<EuiFlexItem grow={false}>
<EuiFormRow hasEmptyLabelSpace={true}>
<SpaceAvatar space={this.state.space} />
</EuiFormRow>
</EuiFlexItem>
<CustomizeSpaceAvatar space={this.state.space} onChange={this.onAvatarChange} />
</EuiFlexGroup>
</EuiFlexItem>
)}
</EuiFlexGroup>
<EuiFormRow label="Name" {...this.validator.validateSpaceName(this.state.space)} fullWidth>
<EuiFieldText
name="name"
placeholder={'Awesome space'}
value={name}
onChange={this.onNameChange}
fullWidth
/>
</EuiFormRow>
<EuiSpacer />
{name && (
<Fragment>
<EuiFlexGroup responsive={false}>
<EuiFlexItem grow={false}>
<EuiFormRow label="Avatar">
<SpaceAvatar space={this.state.space} size="l" />
</EuiFormRow>
</EuiFlexItem>
<CustomizeSpaceAvatar space={this.state.space} onChange={this.onAvatarChange} />
</EuiFlexGroup>
<EuiSpacer />
</Fragment>
)}
{this.state.space && isReservedSpace(this.state.space) ? null : (
<Fragment>
@ -175,12 +172,14 @@ export class ManageSpacePage extends Component<Props, State> {
<EuiFormRow
label="Description (optional)"
{...this.validator.validateSpaceDescription(this.state.space)}
fullWidth
>
<EuiFieldText
name="description"
placeholder={'This is where the magic happens'}
value={description}
onChange={this.onDescriptionChange}
fullWidth
/>
</EuiFormRow>

2
x-pack/plugins/spaces/public/views/management/edit_space/space_identifier.tsx
View file

@ -46,6 +46,7 @@ export class SpaceIdentifier extends Component<Props, State> {
label={this.getLabel()}
helpText={this.getHelpText()}
{...this.props.validator.validateURLIdentifier(this.props.space)}
fullWidth
>
<EuiFieldText
readOnly={!this.state.editing}
@ -57,6 +58,7 @@ export class SpaceIdentifier extends Component<Props, State> {
value={id}
onChange={this.onChange}
inputRef={(ref) => this.textFieldRef = ref}
fullWidth
/>
</EuiFormRow>
</Fragment>

22
x-pack/plugins/spaces/public/views/management/manage_spaces.less
View file

@ -1,22 +0,0 @@
.manageSpaces__application, .manageSpaces__.euiPanel, #manageSpacesReactRoot {
background: #f5f5f5;
}
#manageSpacesReactRoot{
flex-grow: 1;
}
.manageSpace__euiPage {
padding: 0;
}
.manageSpacePage, .spacesGridPage {
min-height: ~"calc(100vh - 70px)";
}
.manageSpacePage__content {
max-width: 760px;
margin-left: auto;
margin-right: auto;
flex-grow: 0;
}

1
x-pack/plugins/spaces/public/views/management/page_routes.tsx
View file

@ -4,7 +4,6 @@
* you may not use this file except in compliance with the Elastic License.
*/
import 'plugins/spaces/views/management/manage_spaces.less';
// @ts-ignore
import template from 'plugins/spaces/views/management/template.html';
// @ts-ignore

2
x-pack/plugins/spaces/public/views/management/spaces_grid/__snapshots__/spaces_grid_pages.test.tsx.snap
View file

@ -2,7 +2,7 @@
exports[`SpacesGridPage renders as expected 1`] = `
<EuiPage
className="spacesGridPage"
className="spcGridPage"
restrictWidth={true}
>
<EuiPageBody

2
x-pack/plugins/spaces/public/views/management/spaces_grid/spaces_grid_page.tsx
View file

@ -64,7 +64,7 @@ export class SpacesGridPage extends Component<Props, State> {
public render() {
return (
<EuiPage restrictWidth className="spacesGridPage">
<EuiPage restrictWidth className="spcGridPage">
<EuiPageBody>
<EuiPageContent horizontalPosition="center">{this.getPageContent()}</EuiPageContent>
<SecureSpaceMessage userProfile={this.props.userProfile} />

2
x-pack/plugins/spaces/public/views/nav_control/__snapshots__/nav_control_popover.test.tsx.snap
View file

@ -25,7 +25,7 @@ exports[`NavControlPopover renders without crashing 1`] = `
closePopover={[Function]}
data-test-subj="spacesNavSelector"
hasArrow={true}
id="spacesMenuPopover"
id="spcMenuPopover"
isOpen={false}
ownFocus={true}
panelPaddingSize="none"

2
x-pack/plugins/spaces/public/views/nav_control/_index.scss Normal file
View file

@ -0,0 +1,2 @@
@import './nav_control';
@import './components/index';

0
x-pack/plugins/spaces/public/views/nav_control/nav_control.less → x-pack/plugins/spaces/public/views/nav_control/_nav_control.scss
View file

6
x-pack/plugins/spaces/public/views/nav_control/components/__snapshots__/spaces_description.test.tsx.snap
View file

@ -2,13 +2,13 @@
exports[`SpacesDescription renders without crashing 1`] = `
<EuiContextMenuPanel
className="spacesDescription"
className="spcDescription"
hasFocus={true}
items={Array []}
title="Spaces"
>
<EuiText
className="spacesDescription__text"
className="spcDescription__text"
grow={true}
>
<p>
@ -16,7 +16,7 @@ exports[`SpacesDescription renders without crashing 1`] = `
</p>
</EuiText>
<div
className="spacesDescription__manageButtonWrapper"
className="spcDescription__manageButtonWrapper"
key="manageSpacesButton"
>
<ManageSpacesButton

2
x-pack/plugins/spaces/public/views/nav_control/components/_index.scss Normal file
View file

@ -0,0 +1,2 @@
@import './spaces_description';
@import './spaces_menu';

8
x-pack/plugins/spaces/public/views/nav_control/components/_spaces_description.scss Normal file
View file

@ -0,0 +1,8 @@
.spcDescription {
max-width: $euiSizeL * 10;
}
.spcDescription__text,
.spcDescription__manageButtonWrapper {
padding: $euiSizeM;
}

13
x-pack/plugins/spaces/public/views/nav_control/components/_spaces_menu.scss Normal file
View file

@ -0,0 +1,13 @@
.spcMenu {
max-width: $euiSizeL * 10;
}
.spcMenu__spacesList {
max-height: $euiSizeXL * 10;
overflow-y: auto;
}
.spcMenu__searchFieldWrapper,
.spcMenu__manageButtonWrapper {
padding: $euiSizeM;
}

8
x-pack/plugins/spaces/public/views/nav_control/components/spaces_description.less
View file

@ -1,8 +0,0 @@
.spacesDescription {
max-width: 300px;
}
.spacesDescription__text,
.spacesDescription__manageButtonWrapper {
padding: 12px;
}

7
x-pack/plugins/spaces/public/views/nav_control/components/spaces_description.tsx
View file

@ -9,7 +9,6 @@ import React, { SFC } from 'react';
import { UserProfile } from '../../../../../xpack_main/public/services/user_profile';
import { ManageSpacesButton } from '../../../components';
import { SPACES_FEATURE_DESCRIPTION } from '../../../lib/constants';
import './spaces_description.less';
interface Props {
userProfile: UserProfile;
@ -18,16 +17,16 @@ interface Props {
export const SpacesDescription: SFC<Props> = (props: Props) => {
const panelProps = {
className: 'spacesDescription',
className: 'spcDescription',
title: 'Spaces',
};
return (
<EuiContextMenuPanel {...panelProps}>
<EuiText className="spacesDescription__text">
<EuiText className="spcDescription__text">
<p>{SPACES_FEATURE_DESCRIPTION}</p>
</EuiText>
<div key="manageSpacesButton" className="spacesDescription__manageButtonWrapper">
<div key="manageSpacesButton" className="spcDescription__manageButtonWrapper">
<ManageSpacesButton
size="s"
style={{ width: `100%` }}

9
x-pack/plugins/spaces/public/views/nav_control/components/spaces_menu.less
View file

@ -1,9 +0,0 @@
.spacesMenu__spacesList {
max-height: 320px;
overflow-y: auto;
}
.spacesMenu__searchFieldWrapper,
.spacesMenu__manageButtonWrapper {
padding: 12px;
}

11
x-pack/plugins/spaces/public/views/nav_control/components/spaces_menu.tsx
View file

@ -10,7 +10,6 @@ import { UserProfile } from '../../../../../xpack_main/public/services/user_prof
import { SPACE_SEARCH_COUNT_THRESHOLD } from '../../../../common/constants';
import { Space } from '../../../../common/model/space';
import { ManageSpacesButton, SpaceAvatar } from '../../../components';
import './spaces_menu.less';
interface Props {
spaces: Space[];
@ -36,7 +35,7 @@ export class SpacesMenu extends Component<Props, State> {
const items = this.getVisibleSpaces(searchTerm).map(this.renderSpaceMenuItem);
const panelProps = {
className: 'spacesMenu',
className: 'spcMenu',
title: 'Change current space',
watchedItemProps: ['data-search-term'],
};
@ -85,9 +84,9 @@ export class SpacesMenu extends Component<Props, State> {
return (
<EuiContextMenuPanel
key={`spacesMenuList`}
key={`spcMenuList`}
data-search-term={searchTerm}
className="spacesMenu__spacesList"
className="spcMenu__spacesList"
hasFocus={this.state.allowSpacesListFocus}
initialFocusedItemIndex={this.state.allowSpacesListFocus ? 0 : undefined}
items={items}
@ -97,7 +96,7 @@ export class SpacesMenu extends Component<Props, State> {
private renderSearchField = () => {
return (
<div key="manageSpacesSearchField" className="spacesMenu__searchFieldWrapper">
<div key="manageSpacesSearchField" className="spcMenu__searchFieldWrapper">
<EuiFieldSearch
placeholder="Find a space"
incremental={true}
@ -135,7 +134,7 @@ export class SpacesMenu extends Component<Props, State> {
private renderManageButton = () => {
return (
<div key="manageSpacesButton" className="spacesMenu__manageButtonWrapper">
<div key="manageSpacesButton" className="spcMenu__manageButtonWrapper">
<ManageSpacesButton
size="s"
style={{ width: `100%` }}

1
x-pack/plugins/spaces/public/views/nav_control/nav_control.tsx
View file

@ -8,7 +8,6 @@ import { constant } from 'lodash';
import { SpacesManager } from 'plugins/spaces/lib/spaces_manager';
// @ts-ignore
import template from 'plugins/spaces/views/nav_control/nav_control.html';
import 'plugins/spaces/views/nav_control/nav_control.less';
import { NavControlPopover } from 'plugins/spaces/views/nav_control/nav_control_popover';
import { UserProfileProvider } from 'plugins/xpack_main/services/user_profile';
import React from 'react';

4
x-pack/plugins/spaces/public/views/nav_control/nav_control_popover.tsx
View file

@ -81,7 +81,7 @@ export class NavControlPopover extends Component<Props, State> {
return (
<EuiPopover
id={'spacesMenuPopover'}
id={'spcMenuPopover'}
data-test-subj={`spacesNavSelector`}
button={button}
isOpen={this.state.showSpaceSelector}
@ -90,7 +90,7 @@ export class NavControlPopover extends Component<Props, State> {
panelPaddingSize="none"
// @ts-ignore
repositionOnScroll={true}
withTitle
withTitle={this.props.anchorPosition.includes('down')}
ownFocus
>
{element}

68
x-pack/plugins/spaces/public/views/space_selector/__snapshots__/space_selector.test.tsx.snap
View file

@ -2,7 +2,7 @@
exports[`it renders without crashing 1`] = `
<EuiPage
className="spaceSelector__page"
className="spcSpaceSelector"
data-test-subj="kibanaSpaceSelector"
restrictWidth={false}
>
@ -10,35 +10,39 @@ exports[`it renders without crashing 1`] = `
restrictWidth={false}
>
<EuiPageHeader
className="spaceSelector__heading"
className="spcSpaceSelector__heading"
responsive={true}
>
<EuiPageHeaderSection
className="spaceSelector__logoHeader"
<EuiSpacer
size="xxl"
/>
<span
className="spcSpaceSelector__logo"
>
<div
className="spaceSelector__logoCircle"
>
<EuiIcon
size="xxl"
type="logoKibana"
/>
</div>
<EuiSpacer
size="l"
<EuiIcon
size="xxl"
type="logoKibana"
/>
<EuiTitle
className="euiTextColor--ghost"
size="l"
>
<p>
Select your space
</p>
</EuiTitle>
</EuiPageHeaderSection>
</span>
<EuiTitle
size="l"
>
<h1>
Select your space
</h1>
</EuiTitle>
<EuiText
color="subdued"
grow={true}
size="s"
>
<p>
You can change your space at anytime
</p>
</EuiText>
</EuiPageHeader>
<EuiPageContent
className="spaceSelector__pageContent"
className="spcSpaceSelector__pageContent"
panelPaddingSize="l"
>
<EuiFlexGroup
@ -49,21 +53,7 @@ exports[`it renders without crashing 1`] = `
justifyContent="flexStart"
responsive={false}
wrap={false}
>
<EuiFlexItem
component="div"
grow={true}
>
<EuiText
grow={true}
size="xs"
>
<p>
You can change your space at anytime.
</p>
</EuiText>
</EuiFlexItem>
</EuiFlexGroup>
/>
<EuiSpacer
size="xl"
/>

1
x-pack/plugins/spaces/public/views/space_selector/_index.scss Normal file
View file

@ -0,0 +1 @@
@import './space_selector';

61
x-pack/plugins/spaces/public/views/space_selector/_space_selector.scss Normal file
View file

@ -0,0 +1,61 @@
@import '@elastic/eui/src/components/form/variables';
.spcSpaceSelector {
padding: 0;
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: $euiZLevel9 + 1000;
background: inherit;
background-image: linear-gradient(0deg, $euiColorLightestShade 0%, $euiColorEmptyShade 100%);
overflow: auto;
}
.spcSpaceSelector::before {
// SASSTODO: webpack pipeline isn't setup to handle image urls in SASS yet
// content: url(../../assets/bg_top_branded.svg);
position: absolute;
top: 0;
right: 0;
z-index: 1;
}
.spcSpaceSelector::after {
// SASSTODO: webpack pipeline isn't setup to handle image urls in SASS yet
// content: url(../../assets/bg_bottom_branded.svg);
position: fixed;
bottom: -2px; // Hides an odd space at the bottom of the svg
left: 0;
z-index: 1;
}
.spcSpaceSelector__pageContent {
background-color: transparent;
box-shadow: none;
border: none;
text-align: center;
position: relative;
z-index: 10;
}
.spcSpaceSelector__heading {
flex-direction: column;
flex-shrink: 0;
position: relative;
padding: $euiSizeXL;
z-index: 10;
}
.spcSpaceSelector__logo {
margin-bottom: $euiSizeXL;
@include kibanaCircleLogo;
@include euiBottomShadowMedium;
}
.spcSpaceSelector__searchHolder {
width: $euiFormMaxWidth; // make sure it's as wide as our default form element width
max-width: 100%;
}

2
x-pack/plugins/spaces/public/views/space_selector/index.tsx
View file

@ -7,12 +7,12 @@
import { SpacesManager } from 'plugins/spaces/lib/spaces_manager';
// @ts-ignore
import template from 'plugins/spaces/views/space_selector/space_selector.html';
import 'plugins/spaces/views/space_selector/space_selector.less';
import 'ui/autoload/styles';
import chrome from 'ui/chrome';
// @ts-ignore
import { uiModules } from 'ui/modules';
import 'plugins/spaces/views/space_selector/space_selector.less';
import React from 'react';
import { render, unmountComponentAtNode } from 'react-dom';
import { Space } from '../../../common/model/space';

47
x-pack/plugins/spaces/public/views/space_selector/space_selector.less
View file

@ -1,46 +1,7 @@
@import "~ui/styles/variables";
#spaceSelectorRootWrap, #spaceSelectorRoot {
background-color: @globalColorLightestGray;
.spcSpaceSelector::before {
content: url(../../../assets/bg_top_branded.svg);
}
#spaceSelectorRootWrap {
flex-grow: 1;
}
.spaceSelector__page {
padding: 0;
}
.spaceSelector__pageContent {
background-color: transparent;
box-shadow: none;
border: none;
text-align: center;
}
.spaceSelector__heading {
padding: 40px 16px;
background-image: linear-gradient(-194deg, #027AA5 0%, #24A1AB 75%, #3BBBAF 100%, #3EBEB0 100%);
justify-content: center;
text-align: center;
}
.spaceSelector__logoCircle {
margin: 0 auto;
width: 80px;
height: 80px;
line-height: 80px;
text-align: center;
background-color: @globalColorWhite;
border-radius: 50%;
box-shadow:
0 6px 12px -1px fadeout(darken(@globalColorBlue, 10%), 80%),
0 4px 4px -1px fadeout(darken(@globalColorBlue, 10%), 80%),
0 2px 2px 0 fadeout(darken(@globalColorBlue, 10%), 80%);
}
.spaceSelector__searchHolder {
width: 400px; // make sure it's as wide as our default form element width
max-width: 100%;
.spcSpaceSelector::after {
content: url(../../../assets/bg_bottom_branded.svg);
}

38
x-pack/plugins/spaces/public/views/space_selector/space_selector.tsx
View file

@ -13,7 +13,6 @@ import {
EuiPageBody,
EuiPageContent,
EuiPageHeader,
EuiPageHeaderSection,
EuiSpacer,
EuiText,
EuiTitle,
@ -83,22 +82,21 @@ export class SpaceSelector extends Component<Props, State> {
}
return (
<EuiPage className="spaceSelector__page" data-test-subj="kibanaSpaceSelector">
<EuiPage className="spcSpaceSelector" data-test-subj="kibanaSpaceSelector">
<EuiPageBody>
<EuiPageHeader className="spaceSelector__heading">
<EuiPageHeaderSection className="spaceSelector__logoHeader">
<div className="spaceSelector__logoCircle">
<EuiIcon size="xxl" type={`logoKibana`} />
</div>
<EuiSpacer />
<EuiTitle size="l" className="euiTextColor--ghost">
<p>Select your space</p>
</EuiTitle>
</EuiPageHeaderSection>
<EuiPageHeader className="spcSpaceSelector__heading">
<EuiSpacer size="xxl" />
<span className="spcSpaceSelector__logo">
<EuiIcon size="xxl" type={`logoKibana`} />
</span>
<EuiTitle size="l">
<h1>Select your space</h1>
</EuiTitle>
<EuiText size="s" color="subdued">
<p>You can change your space at anytime</p>
</EuiText>
</EuiPageHeader>
<EuiPageContent className="spaceSelector__pageContent">
<EuiPageContent className="spcSpaceSelector__pageContent">
<EuiFlexGroup
// @ts-ignore
direction="column"
@ -106,12 +104,6 @@ export class SpaceSelector extends Component<Props, State> {
responsive={false}
>
{this.getSearchField()}
<EuiFlexItem>
<EuiText size="xs">
<p>You can change your space at anytime.</p>
</EuiText>
</EuiFlexItem>
</EuiFlexGroup>
<EuiSpacer size="xl" />
@ -141,9 +133,9 @@ export class SpaceSelector extends Component<Props, State> {
return null;
}
return (
<EuiFlexItem className="spaceSelector__searchHolder">
<EuiFlexItem className="spcSpaceSelector__searchHolder">
<EuiFieldSearch
className="spaceSelector__searchField"
className="spcSpaceSelector__searchField"
placeholder="Find a space"
incremental={true}
// @ts-ignore