Skip to content

Commit

Permalink
Re-style and re-order top menu buttons (#79206) (#79320)
Browse files Browse the repository at this point in the history 
* Re-style and re-order top menu buttons

* Update snapshot due to removed fill prop

* Fix link order for Maps
  • Loading branch information
@ryankeairns
ryankeairns authored Oct 2, 2020
1 parent 2f9f0ba commit a39449f
Show file tree
Hide file tree
Showing 7 changed files with 187 additions and 178 deletions.
12 changes: 7 additions & 5 deletions src/plugins/dashboard/public/application/top_nav/get_top_nav_config.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -48,12 +48,12 @@ export function getTopNavConfig(
];
case ViewMode.EDIT:
return [
getCreateNewConfig(actions[TopNavIds.VISUALIZE]),
getSaveConfig(actions[TopNavIds.SAVE]),
getViewConfig(actions[TopNavIds.EXIT_EDIT_MODE]),
getAddConfig(actions[TopNavIds.ADD_EXISTING]),
getOptionsConfig(actions[TopNavIds.OPTIONS]),
getShareConfig(actions[TopNavIds.SHARE]),
getAddConfig(actions[TopNavIds.ADD_EXISTING]),
getViewConfig(actions[TopNavIds.EXIT_EDIT_MODE]),
getSaveConfig(actions[TopNavIds.SAVE]),
getCreateNewConfig(actions[TopNavIds.VISUALIZE]),
];
default:
return [];
Expand All @@ -79,7 +79,9 @@ function getFullScreenConfig(action: NavAction) {
*/
function getEditConfig(action: NavAction) {
return {
emphasize: true,
id: 'edit',
iconType: 'pencil',
label: i18n.translate('dashboard.topNave.editButtonAriaLabel', {
defaultMessage: 'edit',
}),
Expand Down Expand Up @@ -168,7 +170,7 @@ function getAddConfig(action: NavAction) {
function getCreateNewConfig(action: NavAction) {
return {
emphasize: true,
iconType: 'plusInCircle',
iconType: 'plusInCircleFilled',
id: 'addNew',
label: i18n.translate('dashboard.topNave.addNewButtonAriaLabel', {
defaultMessage: 'Create new',
Expand Down
1 change: 0 additions & 1 deletion src/plugins/navigation/public/top_nav_menu/__snapshots__/top_nav_menu_item.test.tsx.snap
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

4 changes: 4 additions & 0 deletions src/plugins/navigation/public/top_nav_menu/_index.scss
View file
Original file line number Diff line number Diff line change
@@ -1,3 +1,7 @@
.kbnTopNavMenu {
margin-right: $euiSizeXS;
}

.kbnTopNavMenu > * > * {
// TEMP fix to adjust spacing between EuiHeaderList__list items
margin: 0 $euiSizeXS;
Expand Down
2 changes: 1 addition & 1 deletion src/plugins/navigation/public/top_nav_menu/top_nav_menu_item.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -48,7 +48,7 @@ export function TopNavMenuItem(props: TopNavMenuData) {
};

const btn = props.emphasize ? (
<EuiButton size="s" fill {...commonButtonProps}>
<EuiButton size="s" {...commonButtonProps}>
{upperFirst(props.label || props.id!)}
</EuiButton>
) : (
Expand Down
185 changes: 93 additions & 92 deletions src/plugins/visualize/public/application/utils/get_top_nav_config.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -175,54 +175,61 @@ export const getTopNavConfig = (
};

const topNavMenu: TopNavMenuData[] = [
...(originatingApp && ((savedVis && savedVis.id) || embeddableId)
? [
{
id: 'saveAndReturn',
label: i18n.translate('visualize.topNavMenu.saveAndReturnVisualizationButtonLabel', {
defaultMessage: 'Save and return',
}),
emphasize: true,
iconType: 'check',
description: i18n.translate(
'visualize.topNavMenu.saveAndReturnVisualizationButtonAriaLabel',
{
defaultMessage: 'Finish editing visualization and return to the last app',
}
),
testId: 'visualizesaveAndReturnButton',
disableButton: hasUnappliedChanges,
tooltip() {
if (hasUnappliedChanges) {
return i18n.translate(
'visualize.topNavMenu.saveAndReturnVisualizationDisabledButtonTooltip',
{
defaultMessage: 'Apply or Discard your changes before finishing',
}
);
}
},
run: async () => {
const saveOptions = {
confirmOverwrite: false,
returnToOrigin: true,
};
if (
originatingApp === 'dashboards' &&
dashboard.dashboardFeatureFlagConfig.allowByValueEmbeddables &&
!savedVis
) {
return createVisReference();
}
return doSave(saveOptions);
{
id: 'inspector',
label: i18n.translate('visualize.topNavMenu.openInspectorButtonLabel', {
defaultMessage: 'inspect',
}),
description: i18n.translate('visualize.topNavMenu.openInspectorButtonAriaLabel', {
defaultMessage: 'Open Inspector for visualization',
}),
testId: 'openInspectorButton',
disableButton() {
return !embeddableHandler.hasInspector || !embeddableHandler.hasInspector();
},
run: openInspector,
tooltip() {
if (!embeddableHandler.hasInspector || !embeddableHandler.hasInspector()) {
return i18n.translate('visualize.topNavMenu.openInspectorDisabledButtonTooltip', {
defaultMessage: `This visualization doesn't support any inspectors.`,
});
}
},
},
{
id: 'share',
label: i18n.translate('visualize.topNavMenu.shareVisualizationButtonLabel', {
defaultMessage: 'share',
}),
description: i18n.translate('visualize.topNavMenu.shareVisualizationButtonAriaLabel', {
defaultMessage: 'Share Visualization',
}),
testId: 'shareTopNavButton',
run: (anchorElement) => {
if (share && !embeddableId) {
// TODO: support sharing in by-value mode
share.toggleShareContextMenu({
anchorElement,
allowEmbed: true,
allowShortUrl: visualizeCapabilities.createShortUrl,
shareableUrl: unhashUrl(window.location.href),
objectId: savedVis?.id,
objectType: 'visualization',
sharingData: {
title: savedVis?.title,
},
},
]
: []),
isDirty: hasUnappliedChanges || hasUnsavedChanges,
});
}
},
// disable the Share button if no action specified
disableButton: !share || !!embeddableId,
},
...(visualizeCapabilities.save && !embeddableId
? [
{
id: 'save',
iconType: savedVis?.id && originatingApp ? undefined : 'save',
label:
savedVis?.id && originatingApp
? i18n.translate('visualize.topNavMenu.saveVisualizationAsButtonLabel', {
Expand Down Expand Up @@ -303,56 +310,50 @@ export const getTopNavConfig = (
},
]
: []),
{
id: 'share',
label: i18n.translate('visualize.topNavMenu.shareVisualizationButtonLabel', {
defaultMessage: 'share',
}),
description: i18n.translate('visualize.topNavMenu.shareVisualizationButtonAriaLabel', {
defaultMessage: 'Share Visualization',
}),
testId: 'shareTopNavButton',
run: (anchorElement) => {
if (share && !embeddableId) {
// TODO: support sharing in by-value mode
share.toggleShareContextMenu({
anchorElement,
allowEmbed: true,
allowShortUrl: visualizeCapabilities.createShortUrl,
shareableUrl: unhashUrl(window.location.href),
objectId: savedVis?.id,
objectType: 'visualization',
sharingData: {
title: savedVis?.title,
...(originatingApp && ((savedVis && savedVis.id) || embeddableId)
? [
{
id: 'saveAndReturn',
label: i18n.translate('visualize.topNavMenu.saveAndReturnVisualizationButtonLabel', {
defaultMessage: 'Save and return',
}),
emphasize: true,
iconType: 'checkInCircleFilled',
description: i18n.translate(
'visualize.topNavMenu.saveAndReturnVisualizationButtonAriaLabel',
{
defaultMessage: 'Finish editing visualization and return to the last app',
}
),
testId: 'visualizesaveAndReturnButton',
disableButton: hasUnappliedChanges,
tooltip() {
if (hasUnappliedChanges) {
return i18n.translate(
'visualize.topNavMenu.saveAndReturnVisualizationDisabledButtonTooltip',
{
defaultMessage: 'Apply or Discard your changes before finishing',
}
);
}
},
isDirty: hasUnappliedChanges || hasUnsavedChanges,
});
}
},
// disable the Share button if no action specified
disableButton: !share || !!embeddableId,
},
{
id: 'inspector',
label: i18n.translate('visualize.topNavMenu.openInspectorButtonLabel', {
defaultMessage: 'inspect',
}),
description: i18n.translate('visualize.topNavMenu.openInspectorButtonAriaLabel', {
defaultMessage: 'Open Inspector for visualization',
}),
testId: 'openInspectorButton',
disableButton() {
return !embeddableHandler.hasInspector || !embeddableHandler.hasInspector();
},
run: openInspector,
tooltip() {
if (!embeddableHandler.hasInspector || !embeddableHandler.hasInspector()) {
return i18n.translate('visualize.topNavMenu.openInspectorDisabledButtonTooltip', {
defaultMessage: `This visualization doesn't support any inspectors.`,
});
}
},
},
run: async () => {
const saveOptions = {
confirmOverwrite: false,
returnToOrigin: true,
};
if (
originatingApp === 'dashboards' &&
dashboard.dashboardFeatureFlagConfig.allowByValueEmbeddables &&
!savedVis
) {
return createVisReference();
}
return doSave(saveOptions);
},
},
]
: []),
];

return topNavMenu;
Expand Down
36 changes: 19 additions & 17 deletions x-pack/plugins/lens/public/app_plugin/lens_top_nav.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -30,24 +30,22 @@ export function getLensTopNavConfig(options: {
defaultMessage: 'Save',
});

if (showSaveAndReturn) {
if (showCancel) {
topNavMenu.push({
label: i18n.translate('xpack.lens.app.saveAndReturn', {
defaultMessage: 'Save and return',
label: i18n.translate('xpack.lens.app.cancel', {
defaultMessage: 'cancel',
}),
emphasize: true,
iconType: 'check',
run: actions.saveAndReturn,
testId: 'lnsApp_saveAndReturnButton',
disableButton: !savingPermitted,
description: i18n.translate('xpack.lens.app.saveAndReturnButtonAriaLabel', {
defaultMessage: 'Save the current lens visualization and return to the last app',
run: actions.cancel,
testId: 'lnsApp_cancelButton',
description: i18n.translate('xpack.lens.app.cancelButtonAriaLabel', {
defaultMessage: 'Return to the last app without saving changes',
}),
});
}

topNavMenu.push({
label: saveButtonLabel,
iconType: !showSaveAndReturn ? 'save' : undefined,
emphasize: !showSaveAndReturn,
run: actions.showSaveModal,
testId: 'lnsApp_saveButton',
Expand All @@ -57,17 +55,21 @@ export function getLensTopNavConfig(options: {
disableButton: !savingPermitted,
});

if (showCancel) {
if (showSaveAndReturn) {
topNavMenu.push({
label: i18n.translate('xpack.lens.app.cancel', {
defaultMessage: 'cancel',
label: i18n.translate('xpack.lens.app.saveAndReturn', {
defaultMessage: 'Save and return',
}),
run: actions.cancel,
testId: 'lnsApp_cancelButton',
description: i18n.translate('xpack.lens.app.cancelButtonAriaLabel', {
defaultMessage: 'Return to the last app without saving changes',
emphasize: true,
iconType: 'checkInCircleFilled',
run: actions.saveAndReturn,
testId: 'lnsApp_saveAndReturnButton',
disableButton: !savingPermitted,
description: i18n.translate('xpack.lens.app.saveAndReturnButtonAriaLabel', {
defaultMessage: 'Save the current lens visualization and return to the last app',
}),
});
}

return topNavMenu;
}
Loading

0 comments on commit a39449f

Please sign in to comment.