diff --git a/src/lib/PreviewUI.js b/src/lib/PreviewUI.js
index a3dc9f169..4d882de89 100644
--- a/src/lib/PreviewUI.js
+++ b/src/lib/PreviewUI.js
@@ -3,24 +3,25 @@ import shellTemplate from './shell.html';
import Notification from './Notification';
import { insertTemplate } from './util';
import {
- CLASS_HIDDEN,
- CLASS_INVISIBLE,
CLASS_BOX_PREVIEW_BASE_HEADER,
CLASS_BOX_PREVIEW_HAS_HEADER,
CLASS_BOX_PREVIEW_HAS_NAVIGATION,
CLASS_BOX_PREVIEW_HEADER,
CLASS_BOX_PREVIEW_THEME_DARK,
+ CLASS_HIDDEN,
+ CLASS_INVISIBLE,
CLASS_PREVIEW_LOADED,
- SELECTOR_BOX_PREVIEW_CONTAINER,
- SELECTOR_BOX_PREVIEW,
- SELECTOR_BOX_PREVIEW_BTN_PRINT,
SELECTOR_BOX_PREVIEW_BTN_DOWNLOAD,
SELECTOR_BOX_PREVIEW_BTN_LOADING_DOWNLOAD,
+ SELECTOR_BOX_PREVIEW_BTN_PRINT,
+ SELECTOR_BOX_PREVIEW_CONTAINER,
SELECTOR_BOX_PREVIEW_CRAWLER_WRAPPER,
+ SELECTOR_BOX_PREVIEW_HEADER_CONTAINER,
SELECTOR_BOX_PREVIEW_LOADING_TEXT,
SELECTOR_BOX_PREVIEW_LOADING_WRAPPER,
SELECTOR_BOX_PREVIEW_LOGO_CUSTOM,
SELECTOR_BOX_PREVIEW_LOGO_DEFAULT,
+ SELECTOR_BOX_PREVIEW,
SELECTOR_NAVIGATION_LEFT,
SELECTOR_NAVIGATION_RIGHT
} from './constants';
@@ -368,7 +369,10 @@ class PreviewUI {
* @return {void}
*/
setupHeader(headerTheme, logoUrl) {
- const headerEl = this.container.firstElementChild;
+ const headerContainerEl = this.container.querySelector(SELECTOR_BOX_PREVIEW_HEADER_CONTAINER);
+ headerContainerEl.classList.remove(CLASS_HIDDEN);
+
+ const headerEl = headerContainerEl.firstElementChild;
headerEl.className = `${CLASS_BOX_PREVIEW_HEADER} ${CLASS_BOX_PREVIEW_BASE_HEADER}`;
this.contentContainer.classList.add(CLASS_BOX_PREVIEW_HAS_HEADER);
diff --git a/src/lib/__tests__/PreviewUI-test.html b/src/lib/__tests__/PreviewUI-test.html
index 294d64230..ff06f11c4 100644
--- a/src/lib/__tests__/PreviewUI-test.html
+++ b/src/lib/__tests__/PreviewUI-test.html
@@ -1 +1,8 @@
-
+
+
+
diff --git a/src/lib/__tests__/PreviewUI-test.js b/src/lib/__tests__/PreviewUI-test.js
index 519535ea1..dcbcb1a8e 100644
--- a/src/lib/__tests__/PreviewUI-test.js
+++ b/src/lib/__tests__/PreviewUI-test.js
@@ -318,16 +318,64 @@ describe('lib/PreviewUI', () => {
ui.replaceHeader('.bp-invalid-header');
const baseHeader = containerEl.querySelector('.bp-base-header');
- expect(newHeader).to.have.class('bp-is-hidden');
- expect(baseHeader).to.not.have.class('bp-is-hidden');
+ expect(newHeader).to.have.class(constants.CLASS_HIDDEN);
+ expect(baseHeader).to.not.have.class(constants.CLASS_HIDDEN);
});
it('should hide all headers and then show the specified header', () => {
ui.replaceHeader('.bp-draw-header');
const baseHeader = containerEl.querySelector('.bp-base-header');
- expect(newHeader).to.not.have.class('bp-is-hidden');
- expect(baseHeader).to.have.class('bp-is-hidden');
+ expect(newHeader).to.not.have.class(constants.CLASS_HIDDEN);
+ expect(baseHeader).to.have.class(constants.CLASS_HIDDEN);
+ });
+ });
+
+ describe('setupHeader()', () => {
+ beforeEach(() => {
+ containerEl = ui.setup(options);
+ });
+
+ afterEach(() => {
+ ui.cleanup();
+ });
+
+ it('should show the header container and default header', () => {
+ const headerContainerEl = containerEl.querySelector(constants.SELECTOR_BOX_PREVIEW_HEADER_CONTAINER);
+ headerContainerEl.classList.add(constants.CLASS_HIDDEN);
+
+ ui.setupHeader();
+
+ const uiHeaderContainerEl = ui.container.querySelector(constants.SELECTOR_BOX_PREVIEW_HEADER_CONTAINER);
+ expect(uiHeaderContainerEl).to.not.have.class(constants.CLASS_HIDDEN);
+ const baseHeaderEl = uiHeaderContainerEl.firstElementChild;
+ expect(baseHeaderEl).to.have.class(constants.CLASS_BOX_PREVIEW_HEADER);
+ expect(baseHeaderEl).to.have.class(constants.CLASS_BOX_PREVIEW_BASE_HEADER);
+ });
+
+ it('should set the header theme to dark', () => {
+ expect(containerEl).to.not.have.class(constants.CLASS_BOX_PREVIEW_THEME_DARK);
+
+ ui.setupHeader('dark');
+
+ expect(containerEl).to.have.class(constants.CLASS_BOX_PREVIEW_THEME_DARK);
+ });
+
+ it('should override the logo url if specified', () => {
+ const url = 'http://test/foo';
+
+ expect(containerEl.querySelector(constants.SELECTOR_BOX_PREVIEW_LOGO_DEFAULT)).to.not.have.class(
+ constants.CLASS_HIDDEN
+ );
+
+ ui.setupHeader('', url);
+
+ const customLogoEl = containerEl.querySelector(constants.SELECTOR_BOX_PREVIEW_LOGO_CUSTOM);
+ expect(containerEl.querySelector(constants.SELECTOR_BOX_PREVIEW_LOGO_DEFAULT)).to.have.class(
+ constants.CLASS_HIDDEN
+ );
+ expect(customLogoEl).to.not.have.class(constants.CLASS_HIDDEN);
+ expect(customLogoEl.src).to.equal(url);
});
});
});
diff --git a/src/lib/_common.scss b/src/lib/_common.scss
index 72755a9a6..3a44cee96 100644
--- a/src/lib/_common.scss
+++ b/src/lib/_common.scss
@@ -33,6 +33,12 @@ $header-height: 48px;
}
}
+.bp-header-container:not(.bp-is-hidden) {
+ + .bp:not(.bp-is-fullscreen) {
+ top: $header-height;
+ }
+}
+
.bp-header {
align-items: center;
background-color: $white;
@@ -42,10 +48,6 @@ $header-height: 48px;
justify-content: space-between;
padding: 0 20px;
- + .bp:not(.bp-is-fullscreen) {
- top: $header-height;
- }
-
.bp-custom-logo {
max-height: 30px;
}
diff --git a/src/lib/constants.js b/src/lib/constants.js
index c5edfe3ce..cad3d5710 100644
--- a/src/lib/constants.js
+++ b/src/lib/constants.js
@@ -9,6 +9,7 @@ export const CLASS_BOX_PREVIEW_FIND_BAR = 'bp-find-bar';
export const CLASS_BOX_PREVIEW_HAS_HEADER = 'bp-has-header';
export const CLASS_BOX_PREVIEW_HAS_NAVIGATION = 'bp-has-navigation';
export const CLASS_BOX_PREVIEW_HEADER = 'bp-header';
+export const CLASS_BOX_PREVIEW_HEADER_CONTAINER = 'bp-header-container';
export const CLASS_BOX_PREVIEW_BASE_HEADER = 'bp-base-header';
export const CLASS_BOX_PREVIEW_HEADER_BTNS = 'bp-header-btns';
export const CLASS_BOX_PREVIEW_ICON = 'bp-icon';
@@ -57,6 +58,7 @@ export const SELECTOR_BOX_PREVIEW_BTN_PRINT = '.bp-btn-print';
export const SELECTOR_BOX_PREVIEW_BTN_DOWNLOAD = '.bp-btn-download';
export const SELECTOR_BOX_PREVIEW_BTN_LOADING_DOWNLOAD = '.bp-btn-loading-download';
export const SELECTOR_BOX_PREVIEW_HEADER = `.${CLASS_BOX_PREVIEW_HEADER}`;
+export const SELECTOR_BOX_PREVIEW_HEADER_CONTAINER = `.${CLASS_BOX_PREVIEW_HEADER_CONTAINER}`;
export const SELECTOR_BOX_PREVIEW_ICON = `.${CLASS_BOX_PREVIEW_ICON}`;
export const SELECTOR_BOX_PREVIEW_LOADING_TEXT = `.${CLASS_BOX_PREVIEW_LOADING_TEXT}`;
export const SELECTOR_BOX_PREVIEW_LOADING_WRAPPER = `.${CLASS_BOX_PREVIEW_LOADING_WRAPPER}`;
diff --git a/src/lib/shell.html b/src/lib/shell.html
index 38c6c046a..6f8d6229d 100644
--- a/src/lib/shell.html
+++ b/src/lib/shell.html
@@ -1,34 +1,36 @@
-
-
-
-
-
![]()
-