maxmustermann/kibana
1
0
Fork 0
Code Issues Pull requests Projects Releases Wiki Activity

Branding fixes for dashboard, loader and space selector (#60073)

Browse source
This commit is contained in:
Dave Snider 2020-03-18 10:15:47 -07:00 committed by GitHub
parent 696b19e67a
commit 52dd5e0f7a
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
12 changed files with 203 additions and 115 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

53
src/core/public/chrome/ui/_loading_indicator.scss
View file

@ -22,29 +22,34 @@ $kbnLoadingIndicatorColor2: tint($euiColorAccent, 60%);
}
}
.kbnLoadingIndicator__bar {
top: 0;
left: 0;
right: 0;
bottom: 0;
position: absolute;
z-index: $euiZLevel1 + 1;
visibility: visible;
display: block;
animation: kbn-animate-loading-indicator 2s linear infinite;
background-color: $kbnLoadingIndicatorColor2;
background-image: linear-gradient(to right,
$kbnLoadingIndicatorColor1 0%,
$kbnLoadingIndicatorColor1 50%,
$kbnLoadingIndicatorColor2 50%,
$kbnLoadingIndicatorColor2 100%
);
background-repeat: repeat-x;
background-size: $kbnLoadingIndicatorBackgroundSize $kbnLoadingIndicatorBackgroundSize;
width: 200%;
}
.kbnLoadingIndicator__bar {
top: 0;
left: 0;
right: 0;
bottom: 0;
position: absolute;
z-index: $euiZLevel1 + 1;
visibility: visible;
display: block;
animation: kbn-animate-loading-indicator 2s linear infinite;
background-color: $kbnLoadingIndicatorColor2;
background-image: linear-gradient(
to right,
$kbnLoadingIndicatorColor1 0%,
$kbnLoadingIndicatorColor1 50%,
$kbnLoadingIndicatorColor2 50%,
$kbnLoadingIndicatorColor2 100%
);
background-repeat: repeat-x;
background-size: $kbnLoadingIndicatorBackgroundSize $kbnLoadingIndicatorBackgroundSize;
width: 200%;
}
@keyframes kbn-animate-loading-indicator {
from { transform: translateX(0); }
to { transform: translateX(-$kbnLoadingIndicatorBackgroundSize); }
@keyframes kbn-animate-loading-indicator {
from {
transform: translateX(0);
}
to {
transform: translateX(-$kbnLoadingIndicatorBackgroundSize);
}
}

7
src/core/server/rendering/views/styles.tsx
View file

@ -53,7 +53,7 @@ export const Styles: FunctionComponent<Props> = ({ darkMode }) => {
.kbnWelcomeView {
line-height: 1.5;
background-color: #FFF;
background-color: ${darkMode ? '#1D1E24' : '#FFF'};
height: 100%;
display: -webkit-box;
display: -webkit-flex;
@ -97,6 +97,7 @@ export const Styles: FunctionComponent<Props> = ({ darkMode }) => {
line-height: 40px !important;
height: 40px !important;
color: #98a2b3;
color: ${darkMode ? '#98A2B3' : '#69707D'};
}
.kbnLoaderWrap {
@ -128,7 +129,7 @@ export const Styles: FunctionComponent<Props> = ({ darkMode }) => {
width: 32px;
height: 4px;
overflow: hidden;
background-color: #D3DAE6;
background-color: ${darkMode ? '#25262E' : '#F5F7FA'};
line-height: 1;
}
@ -142,7 +143,7 @@ export const Styles: FunctionComponent<Props> = ({ darkMode }) => {
left: 0;
transform: scaleX(0) translateX(0%);
animation: kbnProgress 1s cubic-bezier(.694, .0482, .335, 1) infinite;
background-color: #006DE4;
background-color: ${darkMode ? '#1BA9F5' : '#006DE4'};
}
@keyframes kbnProgress {

44
src/legacy/ui/public/exit_full_screen/__snapshots__/exit_full_screen_button.test.js.snap generated
View file

@ -12,19 +12,45 @@ exports[`is rendered 1`] = `
<button
aria-label="Exit full screen mode"
class="dshExitFullScreenButton"
data-test-subj="exitFullScreenModeLogo"
>
<span
class="dshExitFullScreenButton__logo"
data-test-subj="exitFullScreenModeLogo"
/>
<span
class="dshExitFullScreenButton__text"
data-test-subj="exitFullScreenModeText"
class="euiFlexGroup euiFlexGroup--gutterSmall euiFlexGroup--alignItemsCenter euiFlexGroup--directionRow"
>
Exit full screen
<div
data-euiicon-type="arrowLeft"
/>
class="euiFlexItem euiFlexItem--flexGrowZero"
>
<div
data-euiicon-type="logoElastic"
/>
</div>
<div
class="euiFlexItem euiFlexItem--flexGrowZero"
data-test-subj="exitFullScreenModeText"
>
<div>
<p
class="euiTitle euiTitle--xxxsmall dshExitFullScreenButton__title"
>
Elastic Kibana
</p>
<div
class="euiText euiText--extraSmall dshExitFullScreenButton__text"
>
<p>
Exit full screen
</p>
</div>
</div>
</div>
<div
class="euiFlexItem euiFlexItem--flexGrowZero"
>
<div
class="dshExitFullScreenButton__icon"
data-euiicon-type="fullScreen"
/>
</div>
</span>
</button>
</div>

95
src/plugins/kibana_react/public/exit_full_screen_button/__snapshots__/exit_full_screen_button.test.tsx.snap generated
View file

@ -17,27 +17,88 @@ exports[`is rendered 1`] = `
<button
aria-label="Exit full screen mode"
className="dshExitFullScreenButton"
data-test-subj="exitFullScreenModeLogo"
onClick={[Function]}
>
<span
className="dshExitFullScreenButton__logo"
data-test-subj="exitFullScreenModeLogo"
/>
<span
className="dshExitFullScreenButton__text"
data-test-subj="exitFullScreenModeText"
<EuiFlexGroup
alignItems="center"
component="span"
gutterSize="s"
responsive={false}
>
Exit full screen
<EuiIcon
size="s"
type="arrowLeft"
<span
className="euiFlexGroup euiFlexGroup--gutterSmall euiFlexGroup--alignItemsCenter euiFlexGroup--directionRow"
>
<div
data-euiicon-type="arrowLeft"
size="s"
/>
</EuiIcon>
</span>
<EuiFlexItem
grow={false}
>
<div
className="euiFlexItem euiFlexItem--flexGrowZero"
>
<EuiIcon
size="l"
type="logoElastic"
>
<div
data-euiicon-type="logoElastic"
size="l"
/>
</EuiIcon>
</div>
</EuiFlexItem>
<EuiFlexItem
data-test-subj="exitFullScreenModeText"
grow={false}
>
<div
className="euiFlexItem euiFlexItem--flexGrowZero"
data-test-subj="exitFullScreenModeText"
>
<div>
<EuiTitle
className="dshExitFullScreenButton__title"
size="xxxs"
>
<p
className="euiTitle euiTitle--xxxsmall dshExitFullScreenButton__title"
>
Elastic Kibana
</p>
</EuiTitle>
<EuiText
className="dshExitFullScreenButton__text"
size="xs"
>
<div
className="euiText euiText--extraSmall dshExitFullScreenButton__text"
>
<p>
Exit full screen
</p>
</div>
</EuiText>
</div>
</div>
</EuiFlexItem>
<EuiFlexItem
grow={false}
>
<div
className="euiFlexItem euiFlexItem--flexGrowZero"
>
<EuiIcon
className="dshExitFullScreenButton__icon"
type="fullScreen"
>
<div
className="dshExitFullScreenButton__icon"
data-euiicon-type="fullScreen"
/>
</EuiIcon>
</div>
</EuiFlexItem>
</span>
</EuiFlexGroup>
</button>
</div>
</div>

68
src/plugins/kibana_react/public/exit_full_screen_button/_exit_full_screen_button.scss
View file

@ -4,66 +4,40 @@
*/
.dshExitFullScreenButton {
height: $euiSizeXXL;
left: 0;
bottom: 0;
@include euiBottomShadow;
left: $euiSizeS;
bottom: $euiSizeS;
position: fixed;
display: block;
padding: 0;
border: none;
background: none;
z-index: 5;
background: $euiColorFullShade;
padding: $euiSizeXS;
border-radius: $euiBorderRadius;
text-align: left;
&:hover,
&:focus {
transition: all $euiAnimSpeedExtraSlow $euiAnimSlightResistance;
z-index: 10 !important; /* 1 */
&:hover {
background: $euiColorFullShade;
.dshExitFullScreenButton__text {
transition: all $euiAnimSpeedNormal $euiAnimSlightResistance;
transform: translateX(-$euiSize);
.dshExitFullScreenButton__icon {
color: $euiColorEmptyShade;
}
}
}
.dshExitFullScreenButton__logo {
display: block;
// Just darken the background for all themes because the logo is always white
background-color: shade($euiColorPrimary, 25%);
height: $euiSizeXXL;
// These numbers are very specific to the Kibana logo size
width: 92px;
background-image: url('ui/assets/images/kibana.svg');
background-position: 8px 5px;
background-size: 72px 30px;
background-repeat: no-repeat;
z-index: $euiZLevel1;
.dshExitFullScreenButton__title {
line-height: 1.2;
color: $euiColorEmptyShade;
}
/**
* 1. Calc made to allow caret in text to peek out / animate.
*/
.dshExitFullScreenButton__text {
background: $euiColorPrimary;
color: $euiColorEmptyShade;
line-height: $euiSizeXXL;
display: inline-block;
font-size: $euiFontSizeS;
height: $euiSizeXXL;
position: absolute;
left: calc(100% + #{$euiSize}); /* 1 */
top: 0px;
bottom: 0px;
white-space: nowrap;
padding: 0px $euiSizeXS 0px $euiSizeM;
transition: all .2s ease;
transform: translateX(-100%);
z-index: -1;
.euiIcon {
margin-left: $euiSizeXS;
}
line-height: 1.2;
color: makeHighContrastColor($euiColorMediumShade, $euiColorFullShade);
}
.dshExitFullScreenButton__icon {
color: makeHighContrastColor($euiColorMediumShade, $euiColorFullShade);
}

45
src/plugins/kibana_react/public/exit_full_screen_button/exit_full_screen_button.tsx
View file

@ -20,7 +20,7 @@
import { i18n } from '@kbn/i18n';
import React, { PureComponent } from 'react';
import { EuiScreenReaderOnly, keyCodes } from '@elastic/eui';
import { EuiIcon } from '@elastic/eui';
import { EuiIcon, EuiTitle, EuiFlexGroup, EuiFlexItem, EuiText } from '@elastic/eui';
export interface ExitFullScreenButtonProps {
onExitFullScreenMode: () => void;
@ -61,17 +61,40 @@ class ExitFullScreenButtonUi extends PureComponent<ExitFullScreenButtonProps> {
)}
className="dshExitFullScreenButton"
onClick={this.props.onExitFullScreenMode}
data-test-subj="exitFullScreenModeLogo"
>
<span
className="dshExitFullScreenButton__logo"
data-test-subj="exitFullScreenModeLogo"
/>
<span className="dshExitFullScreenButton__text" data-test-subj="exitFullScreenModeText">
{i18n.translate('kibana-react.exitFullScreenButton.exitFullScreenModeButtonLabel', {
defaultMessage: 'Exit full screen',
})}
<EuiIcon type="arrowLeft" size="s" />
</span>
<EuiFlexGroup component="span" responsive={false} alignItems="center" gutterSize="s">
<EuiFlexItem grow={false}>
<EuiIcon type="logoElastic" size="l" />
</EuiFlexItem>
<EuiFlexItem grow={false} data-test-subj="exitFullScreenModeText">
<div>
<EuiTitle size="xxxs" className="dshExitFullScreenButton__title">
<p>
{i18n.translate(
'kibana-react.exitFullScreenButton.exitFullScreenModeButtonTitle',
{
defaultMessage: 'Elastic Kibana',
}
)}
</p>
</EuiTitle>
<EuiText size="xs" className="dshExitFullScreenButton__text">
<p>
{i18n.translate(
'kibana-react.exitFullScreenButton.exitFullScreenModeButtonText',
{
defaultMessage: 'Exit full screen',
}
)}
</p>
</EuiText>
</div>
</EuiFlexItem>
<EuiFlexItem grow={false}>
<EuiIcon type="fullScreen" className="dshExitFullScreenButton__icon" />
</EuiFlexItem>
</EuiFlexGroup>
</button>
</div>
</div>

BIN
test/functional/screenshots/baseline/area_chart.png
View file

Binary file not shown.
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 44 KiB

After

Width:  |  Height:  |  Size: 55 KiB

BIN
test/functional/screenshots/baseline/tsvb_dashboard.png
View file

Binary file not shown.
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 41 KiB

After

Width:  |  Height:  |  Size: 52 KiB

2
x-pack/plugins/spaces/public/space_selector/__snapshots__/space_selector.test.tsx.snap generated
View file

@ -17,7 +17,7 @@ exports[`it renders without crashing 1`] = `
>
<EuiIcon
size="xxl"
type="logoKibana"
type="logoElastic"
/>
</span>
<EuiTitle

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

@ -95,7 +95,7 @@ export class SpaceSelector extends Component<Props, State> {
<EuiPageHeader className="spcSpaceSelector__heading">
<EuiSpacer size="xxl" />
<span className="spcSpaceSelector__logo">
<EuiIcon size="xxl" type={`logoKibana`} />
<EuiIcon size="xxl" type={`logoElastic`} />
</span>
<EuiTitle size="l">

1
x-pack/plugins/translations/translations/ja-JP.json
View file

@ -2380,7 +2380,6 @@
"visTypeVislib.vislib.legend.toggleLegendButtonAriaLabel": "凡例を切り替える",
"visTypeVislib.vislib.legend.toggleLegendButtonTitle": "凡例を切り替える",
"visTypeVislib.vislib.legend.toggleOptionsButtonAriaLabel": "{legendDataLabel}、トグルオプション",
"kibana-react.exitFullScreenButton.exitFullScreenModeButtonLabel": "全画面を終了",
"kibana-react.exitFullScreenButton.fullScreenModeDescription": "ESC キーで全画面モードを終了します。",
"newsfeed.emptyPrompt.noNewsText": "Kibanaインスタンスがインターネットにアクセスできない場合、管理者にこの機能を無効にするように依頼してください。そうでない場合は、ニュースを取り込み続けます。",
"newsfeed.emptyPrompt.noNewsTitle": "ニュースがない場合",

1
x-pack/plugins/translations/translations/zh-CN.json
View file

@ -2381,7 +2381,6 @@
"visTypeVislib.vislib.legend.toggleLegendButtonAriaLabel": "切换图例",
"visTypeVislib.vislib.legend.toggleLegendButtonTitle": "切换图例",
"visTypeVislib.vislib.legend.toggleOptionsButtonAriaLabel": "{legendDataLabel}切换选项",
"kibana-react.exitFullScreenButton.exitFullScreenModeButtonLabel": "退出全屏",
"kibana-react.exitFullScreenButton.fullScreenModeDescription": "在全屏模式下，按 ESC 键可退出。",
"newsfeed.emptyPrompt.noNewsText": "如果您的 Kibana 实例没有 Internet 连接，请让您的管理员禁用此功能。否则，我们将不断尝试获取新闻。",
"newsfeed.emptyPrompt.noNewsTitle": "无新闻？",