Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Dashboard design updates #29896

Merged
merged 17 commits into from
Feb 5, 2019
+712 −688
Merged

Dashboard design updates #29896

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
17 commits
Select commit Hold shift + click to select a range
2a97c0d
Dashboard visual pass (initial)
cchaos Jan 31, 2019
f5e67b7
Adjusted panel header
cchaos Jan 31, 2019
0800528
better positioning of legend toggle
cchaos Feb 1, 2019
0d33192
Fixed legend toggle position
cchaos Feb 1, 2019
4fbe473
Fixed some visualize sidebar font sizes
cchaos Feb 1, 2019
b97dfce
better position for resize handle
cchaos Feb 1, 2019
ad1560f
Consolidated error and warning messages
cchaos Feb 1, 2019
63a82b4
Last edits and removing old testing things
cchaos Feb 2, 2019
454cfdf
snaps
cchaos Feb 2, 2019
3923d11
Fix tag cloud
cchaos Feb 2, 2019
f38c57c
Comment out markdown-it for now, since it’s not working
cchaos Feb 3, 2019
6a51d9d
update area chart snapshot
cchaos Feb 3, 2019
b79d4be
Styled empty dashboard state
cchaos Feb 3, 2019
6cb8b2d
PR feedback
cchaos Feb 4, 2019
1e373bc
Fix reporting
cchaos Feb 4, 2019
78473de
More PR comments
cchaos Feb 5, 2019
0840302
Revert “hide edit button”
cchaos Feb 5, 2019
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
408 changes: 164 additions & 244 deletions ...gins/input_control_vis/public/components/vis/__snapshots__/input_control_vis.test.js.snap
View file
Open in desktop

Large diffs are not rendered by default.

1 change: 1 addition & 0 deletions src/legacy/core_plugins/input_control_vis/public/components/vis/_vis.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
.icvContainer {
width: 100%;
margin: 0 $euiSizeXS;
padding: $euiSizeS;

// Removes the browser's number stepper
input[type=number]::-webkit-inner-spin-button,
Expand Down
60 changes: 30 additions & 30 deletions src/legacy/core_plugins/input_control_vis/public/components/vis/input_control_vis.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,9 +23,9 @@ import { RangeControl } from './range_control';
import { ListControl } from './list_control';
import {
EuiButton,
EuiButtonEmpty,
EuiFlexGroup,
EuiFlexItem,
EuiFormRow,
} from '@elastic/eui';

import { FormattedMessage } from '@kbn/i18n/react';
Expand Down Expand Up @@ -99,40 +99,40 @@ export class InputControlVis extends Component {

renderStagingButtons() {
return (
<EuiFlexGroup>
<EuiFlexGroup wrap={true}>
<EuiFlexItem grow={false}>
<EuiFormRow>
<EuiButton
onClick={this.handleClearAll}
disabled={!this.props.hasValues()}
data-test-subj="inputControlClearBtn"
>
<FormattedMessage id="inputControl.vis.inputControlVis.clearFormButtonLabel" defaultMessage="Clear form"/>
</EuiButton>
</EuiFormRow>

<EuiButton
fill
onClick={this.handleSubmit}
disabled={!this.props.hasChanges()}
data-test-subj="inputControlSubmitBtn"
>
<FormattedMessage id="inputControl.vis.inputControlVis.applyChangesButtonLabel" defaultMessage="Apply changes"/>
</EuiButton>

</EuiFlexItem>
<EuiFlexItem grow={false}>
<EuiFormRow>
<EuiButton
onClick={this.handleReset}
disabled={!this.props.hasChanges()}
data-test-subj="inputControlCancelBtn"
>
<FormattedMessage id="inputControl.vis.inputControlVis.cancelChangesButtonLabel" defaultMessage="Cancel changes"/>
</EuiButton>
</EuiFormRow>

<EuiButtonEmpty
onClick={this.handleReset}
disabled={!this.props.hasChanges()}
data-test-subj="inputControlCancelBtn"
>
<FormattedMessage id="inputControl.vis.inputControlVis.cancelChangesButtonLabel" defaultMessage="Cancel changes"/>
</EuiButtonEmpty>

</EuiFlexItem>
<EuiFlexItem grow={false}>
<EuiFormRow>
<EuiButton
fill
onClick={this.handleSubmit}
disabled={!this.props.hasChanges()}
data-test-subj="inputControlSubmitBtn"
>
<FormattedMessage id="inputControl.vis.inputControlVis.applyChangesButtonLabel" defaultMessage="Apply changes"/>
</EuiButton>
</EuiFormRow>

<EuiButtonEmpty
onClick={this.handleClearAll}
disabled={!this.props.hasValues()}
data-test-subj="inputControlClearBtn"
>
<FormattedMessage id="inputControl.vis.inputControlVis.clearFormButtonLabel" defaultMessage="Clear form"/>
</EuiButtonEmpty>

</EuiFlexItem>
</EuiFlexGroup>
);
Expand Down
29 changes: 15 additions & 14 deletions src/legacy/core_plugins/kbn_vislib_vis_types/public/controls/point_series/category_axis.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -40,25 +40,26 @@
<!-- Advanced options -->
<div class="visEditorSidebar__collapsible--margin">
<a
class="small"
class="visEditorSidebar__collapsibleTitle"
ng-click="isCategoryAxisAdvancedOptionsOpen = !isCategoryAxisAdvancedOptionsOpen"
kbn-accessible-click
>
<span>
<icon class="visEditorSidebar__advancedLinkIcon" color="'primary'" aria-hidden="true" ng-if="isCategoryAxisAdvancedOptionsOpen" type="'arrowDown'" size="'s'"></icon>
<icon class="visEditorSidebar__advancedLinkIcon" color="'primary'" aria-hidden="true" ng-if="!isCategoryAxisAdvancedOptionsOpen" type="'arrowRight'" size="'s'"></icon>

<icon class="visEditorSidebar__advancedLinkIcon" color="'primary'" aria-hidden="true" ng-if="isCategoryAxisAdvancedOptionsOpen" type="'arrowDown'" size="'s'"></icon>
<icon class="visEditorSidebar__advancedLinkIcon" color="'primary'" aria-hidden="true" ng-if="!isCategoryAxisAdvancedOptionsOpen" type="'arrowRight'" size="'s'"></icon>


<span
ng-show="!isCategoryAxisAdvancedOptionsOpen"
i18n-id="kbnVislibVisTypes.controls.pointSeries.categoryAxis.showAdvancedOptionsLabel"
i18n-default-message="Show Advanced Options"
></span>
<span
ng-show="isCategoryAxisAdvancedOptionsOpen"
i18n-id="kbnVislibVisTypes.controls.pointSeries.categoryAxis.hideAdvancedOptionsLabel"
i18n-default-message="Hide Advanced Options"
></span>
<span
ng-show="!isCategoryAxisAdvancedOptionsOpen"
i18n-id="kbnVislibVisTypes.controls.pointSeries.categoryAxis.showAdvancedOptionsLabel"
i18n-default-message="Show Advanced Options"
></span>
<span
ng-show="isCategoryAxisAdvancedOptionsOpen"
i18n-id="kbnVislibVisTypes.controls.pointSeries.categoryAxis.hideAdvancedOptionsLabel"
i18n-default-message="Hide Advanced Options"
></span>
</span>
</a>

<div ng-show="isCategoryAxisAdvancedOptionsOpen">
Expand Down
32 changes: 17 additions & 15 deletions src/legacy/core_plugins/kbn_vislib_vis_types/public/controls/point_series/value_axes.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -143,25 +143,27 @@
<div class="visEditorSidebar__collapsible--margin">
<a
data-test-subj="toggleYAxisAdvancedOptions-{{axis.id}}"
class="small"
class="visEditorSidebar__collapsibleTitle"
ng-click="isValueAxisAdvancedOptionsOpen = !isValueAxisAdvancedOptionsOpen"
kbn-accessible-click
>
<icon class="visEditorSidebar__advancedLinkIcon" color="'primary'" aria-hidden="true" ng-if="isValueAxisAdvancedOptionsOpen" type="'arrowDown'" size="'s'"></icon>
<icon class="visEditorSidebar__advancedLinkIcon" color="'primary'" aria-hidden="true" ng-if="!isValueAxisAdvancedOptionsOpen" type="'arrowRight'" size="'s'"></icon>
<span>
<icon class="visEditorSidebar__advancedLinkIcon" color="'primary'" aria-hidden="true" ng-if="isValueAxisAdvancedOptionsOpen" type="'arrowDown'" size="'s'"></icon>
<icon class="visEditorSidebar__advancedLinkIcon" color="'primary'" aria-hidden="true" ng-if="!isValueAxisAdvancedOptionsOpen" type="'arrowRight'" size="'s'"></icon>

<span
class="kuiSideBarOptionsLink__text"
ng-show="!isValueAxisAdvancedOptionsOpen"
i18n-id="kbnVislibVisTypes.controls.pointSeries.valueAxes.showAdvancedOptionsLabel"
i18n-default-message="Show Advanced Options"
></span>
<span
class="kuiSideBarOptionsLink__text"
ng-show="isValueAxisAdvancedOptionsOpen"
i18n-id="kbnVislibVisTypes.controls.pointSeries.valueAxes.hideAdvancedOptionsLabel"
i18n-default-message="Hide Advanced Options"
></span>
<span
class="kuiSideBarOptionsLink__text"
ng-show="!isValueAxisAdvancedOptionsOpen"
i18n-id="kbnVislibVisTypes.controls.pointSeries.valueAxes.showAdvancedOptionsLabel"
i18n-default-message="Show Advanced Options"
></span>
<span
class="kuiSideBarOptionsLink__text"
ng-show="isValueAxisAdvancedOptionsOpen"
i18n-id="kbnVislibVisTypes.controls.pointSeries.valueAxes.hideAdvancedOptionsLabel"
i18n-default-message="Hide Advanced Options"
></span>
</span>
</a>

<div ng-show="isValueAxisAdvancedOptionsOpen">
Expand Down
13 changes: 7 additions & 6 deletions src/legacy/core_plugins/kibana/public/dashboard/_dashboard_app.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,12 +11,13 @@

.dshStartScreen {
text-align: center;
margin: $euiSize auto;
max-width: 800px;
width: 100%;
background: $euiColorEmptyShade;
padding: $euiSizeXXL;
border-radius: $euiBorderRadius;
padding: $euiSize;
background-color: $euiColorLightestShade;
color: $euiColorDarkShade;

> * {
max-width: 36em !important;
}
}

.dshSaveModal,
Expand Down
12 changes: 7 additions & 5 deletions src/legacy/core_plugins/kibana/public/dashboard/_index.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,8 +3,10 @@
// 'react-resizable/css/styles.css';
// ... are being imported via JS in grid/dashboard_grid.js

@import './variables';

// Temporary hacks
@import 'hacks';
@import './hacks';

// Prefix all styles with "dsh" to avoid conflicts.
// Examples
Expand All @@ -13,7 +15,7 @@
// dshChart__legend--small
// dshChart__legend-isLoading

@import 'dashboard_app';
@import 'grid/index';
@import 'panel/index';
@import 'viewport/index';
@import './dashboard_app';
@import './grid/index';
@import './panel/index';
@import './viewport/index';
1 change: 1 addition & 0 deletions src/legacy/core_plugins/kibana/public/dashboard/_variables.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
$dshEditingModeHoverColor: transparentize($euiColorWarning, lightOrDarkTheme(.9, .7));
127 changes: 67 additions & 60 deletions src/legacy/core_plugins/kibana/public/dashboard/dashboard_app.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -50,69 +50,76 @@
on-submit="onApplyFilters"
></apply-filters-popover>

<div
ng-show="getShouldShowEditHelp()"
class="dshStartScreen"
>
<h2
class="kuiTitle kuiVerticalRhythm"
i18n-id="kbn.dashboard.fillDashboardTitle"
i18n-default-message="This dashboard is empty. Let&rsquo;s fill it up!"
>
</h2>
<div ng-show="getShouldShowEditHelp() || getShouldShowViewHelp()" class="dshStartScreen">
<div class="euiPanel euiPanel--paddingLarge euiPageContent euiPageContent--horizontalCenter">
<icon type="'dashboardApp'" size="'xxl'" color="'subdued'"></icon>

<p>
<span
i18n-id="kbn.dashboard.addVisualizationDescription1"
i18n-default-message="Click the "
i18n-context="Part of composite label kbn.dashboard.addVisualizationDescription1 + kbn.dashboard.addVisualizationLinkText + kbn.dashboard.addVisualizationDescription2"
></span>
<a
kbn-accessible-click
class="kuiButton kuiButton--primary kuiButton--small"
ng-click="showAddPanel()"
aria-label="{{::'kbn.dashboard.addVisualizationLinkAriaLabel' | i18n: { defaultMessage: 'Add visualization' } }}"
data-test-subj="emptyDashboardAddPanelButton"
i18n-id="kbn.dashboard.addVisualizationLinkText"
i18n-default-message="Add"
></a>
<span
i18n-id="kbn.dashboard.addVisualizationDescription2"
i18n-default-message=" button in the menu bar above to add a visualization to the dashboard. {br}If you haven't set up any visualizations yet, {visitVisualizeAppLink} to create your first visualization."
i18n-values="{
html_br: '<br/>',
html_visitVisualizeAppLink: '<a class=\'kuiLink\' href=\'#/visualize\'>' + visitVisualizeAppLinkText + '</a>'
}"
></span>
</p>
</div>
<br><br>

<div ng-show="getShouldShowEditHelp()" class="euiText">
<h2
i18n-id="kbn.dashboard.fillDashboardTitle"
i18n-default-message="This dashboard is empty. Let&rsquo;s fill it up!"
>
</h2>

<p>
<span
i18n-id="kbn.dashboard.addVisualizationDescription1"
i18n-default-message="Click the "
i18n-context="Part of composite label kbn.dashboard.addVisualizationDescription1 + kbn.dashboard.addVisualizationLinkText + kbn.dashboard.addVisualizationDescription2"
></span>
<a
kbn-accessible-click
class="euiLink"
ng-click="showAddPanel()"
aria-label="{{::'kbn.dashboard.addVisualizationLinkAriaLabel' | i18n: { defaultMessage: 'Add visualization' } }}"
data-test-subj="emptyDashboardAddPanelButton"
i18n-id="kbn.dashboard.addVisualizationLinkText"
i18n-default-message="Add"
></a>
<span
i18n-id="kbn.dashboard.addVisualizationDescription2"
i18n-default-message=" button in the menu bar above to add a visualization to the dashboard."
></span>
</p>
<p
i18n-id="kbn.dashboard.addVisualizationDescription3"
i18n-default-message="If you haven't set up any visualizations yet, {visitVisualizeAppLink} to create your first visualization."
i18n-values="{
html_visitVisualizeAppLink: '<a class=\'euiLink\' href=\'#/visualize\'>' + visitVisualizeAppLinkText + '</a>'
}"
></p>
</div>

<div ng-show="getShouldShowViewHelp()" class="euiText">
<h2
i18n-id="kbn.dashboard.fillDashboardTitle"
i18n-default-message="This dashboard is empty. Let&rsquo;s fill it up!"
>
</h2>

<div ng-show="getShouldShowViewHelp()" class="dshStartScreen">
<h2
class="kuiTitle kuiVerticalRhythm"
i18n-id="kbn.dashboard.fillDashboardTitle"
i18n-default-message="This dashboard is empty. Let&rsquo;s fill it up!"
>
</h2>
<p>
<span
i18n-id="kbn.dashboard.howToStartWorkingOnNewDashboardDescription1"
i18n-default-message="Click the "
i18n-context="Part of composite label kbn.dashboard.howToStartWorkingOnNewDashboardDescription1 + kbn.dashboard.howToStartWorkingOnNewDashboardEditLinkText + kbn.dashboard.howToStartWorkingOnNewDashboardDescription2"
></span>
<a
kbn-accessible-click
class="euiLink"
ng-click="enterEditMode()"
i18n-id="kbn.dashboard.howToStartWorkingOnNewDashboardEditLinkText"
i18n-default-message="Edit"
></a>
<span
i18n-id="kbn.dashboard.howToStartWorkingOnNewDashboardDescription2"
i18n-default-message=" button in the menu bar above to start working on your new dashboard."
></span>
</p>
</div>

<p class="kuiText kuiVerticalRhythm">
<span
i18n-id="kbn.dashboard.howToStartWorkingOnNewDashboardDescription1"
i18n-default-message="Click the "
i18n-context="Part of composite label kbn.dashboard.howToStartWorkingOnNewDashboardDescription1 + kbn.dashboard.howToStartWorkingOnNewDashboardEditLinkText + kbn.dashboard.howToStartWorkingOnNewDashboardDescription2"
></span>
<a
kbn-accessible-click
class="kuiButton kuiButton--primary kuiButton--small"
ng-click="enterEditMode()"
i18n-id="kbn.dashboard.howToStartWorkingOnNewDashboardEditLinkText"
i18n-default-message="Edit"
></a>
<span
i18n-id="kbn.dashboard.howToStartWorkingOnNewDashboardDescription2"
i18n-default-message=" button in the menu bar above to start working on your new dashboard."
></span>
</p>
</div>
</div>

<dashboard-viewport-provider
Expand Down
Loading