-
Notifications
You must be signed in to change notification settings - Fork 468
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.
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
fixes#706condensed-header #760
Changes from 1 commit
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
There are no files selected for viewing
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -35,6 +35,8 @@ loadingLogo | Loading logo used when OpenSearch Dashboards is starting. See #3 i | |
faviconUrl | Website icon. Loads next to the application title. See #4 in the image. | ||
applicationTitle | The application's title. See #5 in the image. | ||
|
||
**Note** --- To consolidate navigation controls and reduce the space the header takes up on the page, see [Condensed header](#condensed-header). | ||
|
||
To start using your own branding elements in OpenSearch Dashboards, first uncomment this section of `opensearch_dashboards.yml`: | ||
|
||
```yml | ||
|
@@ -90,6 +92,56 @@ mark: | |
applicationTitle: "My custom application" | ||
``` | ||
|
||
### Condensed header | ||
|
||
The condensed header view reduces the footprint of the header and frees up space on the page by combining navigational elements into a single header bar. | ||
|
||
The current default view remains close in appearance to the two-bar header offered in the previous version of Dashboards, with minor differences. To specify the condensed header, add the configuration property `useExpandedHeader` to the `opensearch_dashboards.yml` file and set the value to `false`, as the following example illustrates. | ||
|
||
```yml | ||
# opensearchDashboards.branding: | ||
# logo: | ||
defaultUrl: "https://example.com/sample.svg" | ||
darkModeUrl: "https://example.com/dark-mode-sample.svg" | ||
# mark: | ||
# defaultUrl: "" | ||
# darkModeUrl: "" | ||
# loadingLogo: | ||
# defaultUrl: "" | ||
# darkModeUrl: "" | ||
# faviconUrl: "" | ||
applicationTitle: "my custom application" | ||
useExpandedHeader: false | ||
``` | ||
|
||
**Note:** --- In a future release, default behavior will become `useExpandedHeader: false`. If you want to retain the default view in subsequent releases, you can explicitly set the property to `true` in advance. You can also wait to do this when upgrading. | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. See @kolchfa-aws comment on notes. |
||
|
||
The condensed view header appears as in the example here. | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Instead of "here", can we use "below"? |
||
|
||
![Condensed header]({{site.url}}{{site.baseurl}}/images/DBs-Condensed.jpeg) | ||
|
||
Header element | Description | ||
:--- | :--- | ||
OpenSearch logo | See #1. Performs as the home button. | ||
Header bar | See #2. A single header bar used for all navigation controls. | ||
|
||
The default view remains close to the traditional view with minor changes. | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Insert a comma after the second instance of "view". |
||
|
||
![Default header]({{site.url}}{{site.baseurl}}/images/DBs-Traditional.jpeg) | ||
|
||
Header element | Description | ||
:--- | :--- | ||
Home button | See #1. Returns to home page and provides an indication when a page is loading. | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Insert "the" before "home page". |
||
Header label | See #2. The label also functions as a home button. | ||
Navigation controls | See #3. Additional navigation controls on right-side insertion points. | ||
|
||
#### Preserving nagivation elements in default view | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Should we consistently use "the default view" as opposed to using just "default view" here? |
||
|
||
You can continue using the top header bar in the default view for custom navigation links (such as menu items and plugins). Follow the steps below to keep these elements in the top header in default view. | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Second sentence: same comment re: "the default view". |
||
1. Replace the property `coreStart.chrome.navControls.registerRight(...)` with `coreStart.chrome.navControls.registerExpandedRight(...)` and then replace the property `coreStart.chrome.navControls.registerCenter(...)` with `coreStart.chrome.navControls.registerExpandedCenter(...)` | ||
|
||
2. Make sure the configuration property `useExpandedHeader` is explicitly set to `true`. | ||
|
||
## Sample configuration | ||
|
||
The following configuration enables the security plugin and SSL within OpenSearch Dashboards and uses custom branding elements to replace the OpenSearch logo and application title. | ||
|
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
For notes, you can use the Markdown {: .note } marker. Example:
This is a note.
{: .note }