Branding fixes for dashboard, loader and space selector (#60073)
This commit is contained in:
parent
696b19e67a
commit
52dd5e0f7a
|
@ -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);
|
||||
}
|
||||
}
|
||||
|
|
|
@ -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 {
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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);
|
||||
}
|
||||
|
|
|
@ -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>
|
||||
|
|
Binary file not shown.
Before Width: | Height: | Size: 44 KiB After Width: | Height: | Size: 55 KiB |
Binary file not shown.
Before Width: | Height: | Size: 41 KiB After Width: | Height: | Size: 52 KiB |
|
@ -17,7 +17,7 @@ exports[`it renders without crashing 1`] = `
|
|||
>
|
||||
<EuiIcon
|
||||
size="xxl"
|
||||
type="logoKibana"
|
||||
type="logoElastic"
|
||||
/>
|
||||
</span>
|
||||
<EuiTitle
|
||||
|
|
|
@ -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">
|
||||
|
|
|
@ -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": "ニュースがない場合",
|
||||
|
|
|
@ -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": "无新闻?",
|
||||
|
|
Loading…
Reference in a new issue