From b970bb519d5c68899df1bb0e488bde46fbc9a49b Mon Sep 17 00:00:00 2001 From: chorn Date: Wed, 20 Jun 2018 15:23:27 -0400 Subject: [PATCH 1/4] Mainly fixing some spacing and width in main layout --- .../views/space_selector/space_selector.js | 18 ++++---- .../views/space_selector/space_selector.less | 44 +++++++++++-------- 2 files changed, 34 insertions(+), 28 deletions(-) diff --git a/x-pack/plugins/spaces/public/views/space_selector/space_selector.js b/x-pack/plugins/spaces/public/views/space_selector/space_selector.js index 9ba63da2f15bc..d0dbc65d4566a 100644 --- a/x-pack/plugins/spaces/public/views/space_selector/space_selector.js +++ b/x-pack/plugins/spaces/public/views/space_selector/space_selector.js @@ -72,32 +72,30 @@ export class SpaceSelector extends Component { return ( - -
+ +
- +

Select your space

 - - - + - + {this.getSearchField()} -

You can change your space at anytime from within Kibana.

 +

You can change your space at anytime from within Kibana.

 - + @@ -120,7 +118,7 @@ export class SpaceSelector extends Component { return null; } return ( - + Date: Wed, 20 Jun 2018 15:56:42 -0400 Subject: [PATCH 2/4] Ensuring you can pass other props (mainly classes) to the space avatar --- .../spaces/public/views/components/space_avatar.js | 11 ++++++----- 1 file changed, 6 insertions(+), 5 deletions(-) diff --git a/x-pack/plugins/spaces/public/views/components/space_avatar.js b/x-pack/plugins/spaces/public/views/components/space_avatar.js index 96ed4b59dd5ff..b7908d00f2dde 100644 --- a/x-pack/plugins/spaces/public/views/components/space_avatar.js +++ b/x-pack/plugins/spaces/public/views/components/space_avatar.js @@ -11,15 +11,16 @@ import { } from '@elastic/eui'; import { MAX_SPACE_INITIALS, getSpaceInitials, getSpaceColor } from '../../../common'; -export const SpaceAvatar = (props) => { +export const SpaceAvatar = ({ space, size, ...rest }) => { return ( ); }; From 95a558fa17c3a6dc257ec45f6e489b0f08cc9737 Mon Sep 17 00:00:00 2001 From: chorn Date: Wed, 20 Jun 2018 16:09:00 -0400 Subject: [PATCH 3/4] Card adjustments MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - Putting avatar as the card’s `icon` - Only min-heighting the cards, but also truncating the description if it’s too long. This will make it look better if the description is really long or else you’ll just get half cut off text. - Remove extra elements around Card title since it’s already applied within the `EuiCard` itselft. Just needs a string. --- .../public/views/components/space_card.js | 24 +++++++++---------- .../public/views/components/space_card.less | 7 +++--- .../public/views/components/space_cards.js | 2 +- 3 files changed, 16 insertions(+), 17 deletions(-) diff --git a/x-pack/plugins/spaces/public/views/components/space_card.js b/x-pack/plugins/spaces/public/views/components/space_card.js index d6ab56660ef15..7441366d9206e 100644 --- a/x-pack/plugins/spaces/public/views/components/space_card.js +++ b/x-pack/plugins/spaces/public/views/components/space_card.js @@ -7,9 +7,7 @@ import React from 'react'; import { EuiCard, - EuiText, EuiTextColor, - EuiSpacer, } from '@elastic/eui'; import './space_card.less'; import { @@ -25,23 +23,25 @@ export const SpaceCard = (props) => { return ( ); }; -function renderSpaceTitle(space) { - return ( -
- - -

{space.name}

 -
- ); +function renderSpaceAvatar(space) { + return ; } function renderSpaceDescription(space) { - return {space.description}; + let description = space.description; + const needsTruncation = space.description.length > 120; + if (needsTruncation) { + description = ( + {space.description.substr(0, 120) + '…'} + ); + } + return {description}; } diff --git a/x-pack/plugins/spaces/public/views/components/space_card.less b/x-pack/plugins/spaces/public/views/components/space_card.less index 99d75e1f39132..8245a16b9f43c 100644 --- a/x-pack/plugins/spaces/public/views/components/space_card.less +++ b/x-pack/plugins/spaces/public/views/components/space_card.less @@ -1,7 +1,6 @@ -.spaceCard, .euiCard.euiCard--isClickable.spaceCard { - width: 280px; - height: 200px; - min-height: 180px; +.euiCard.euiCard--isClickable.spaceCard { + width: 240px; + min-height: 200px; } .spaceCard .euiCard__content{ diff --git a/x-pack/plugins/spaces/public/views/components/space_cards.js b/x-pack/plugins/spaces/public/views/components/space_cards.js index 329ba37f9926e..5e96bc50cc4e2 100644 --- a/x-pack/plugins/spaces/public/views/components/space_cards.js +++ b/x-pack/plugins/spaces/public/views/components/space_cards.js @@ -19,7 +19,7 @@ export class SpaceCards extends Component { render() { return (
- + {this.props.spaces.map(this.renderSpace)}
From 6617b80b3ec4e96ca0b9405d4ed4b5f77f09f95a Mon Sep 17 00:00:00 2001 From: chorn Date: Wed, 20 Jun 2018 16:18:13 -0400 Subject: [PATCH 4/4] Better drop-shadow Uses a darkened color of the blue so it stands out and not washes out --- .../spaces/public/views/space_selector/space_selector.less | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) diff --git a/x-pack/plugins/spaces/public/views/space_selector/space_selector.less b/x-pack/plugins/spaces/public/views/space_selector/space_selector.less index 89491e6c42b5e..33191ad976b44 100644 --- a/x-pack/plugins/spaces/public/views/space_selector/space_selector.less +++ b/x-pack/plugins/spaces/public/views/space_selector/space_selector.less @@ -15,6 +15,7 @@ background-color: transparent; box-shadow: none; border: none; + text-align: center; } .spaceSelector__heading { @@ -33,9 +34,9 @@ background-color: @globalColorWhite; border-radius: 50%; box-shadow: - 0 6px 12px -1px fadeout(@globalColorMediumGray, 80%), - 0 4px 4px -1px fadeout(@globalColorMediumGray, 80%), - 0 2px 2px 0 fadeout(@globalColorMediumGray, 80%); + 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%); }