Skip to content

Commit

Permalink
Chore: Moving header into container (#849)
Browse files Browse the repository at this point in the history
* Chore: Moving header into container

* Chore: removing extra bp-is-hidden class
  • Loading branch information
Conrad Chan authored Oct 8, 2018
1 parent 70eae04 commit 9528761
Show file tree
Hide file tree
Showing 6 changed files with 109 additions and 44 deletions.
16 changes: 10 additions & 6 deletions src/lib/PreviewUI.js
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand Down Expand Up @@ -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);

Expand Down
9 changes: 8 additions & 1 deletion src/lib/__tests__/PreviewUI-test.html
Original file line number Diff line number Diff line change
@@ -1 +1,8 @@
<div class="ui"></div>
<div class="ui">
<div class="bp-header-container">
<div>
<span class="bp-default-logo"></span>
<img class="bp-is-hidden bp-custom-logo"></img>
</div>
</div>
</div>
56 changes: 52 additions & 4 deletions src/lib/__tests__/PreviewUI-test.js
Original file line number Diff line number Diff line change
Expand Up @@ -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);
});
});
});
10 changes: 6 additions & 4 deletions src/lib/_common.scss
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand All @@ -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;
}
Expand Down
2 changes: 2 additions & 0 deletions src/lib/constants.js
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand Down Expand Up @@ -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}`;
Expand Down
60 changes: 31 additions & 29 deletions src/lib/shell.html
Original file line number Diff line number Diff line change
@@ -1,34 +1,36 @@
<div class="bp-container">
<div class="bp-is-hidden">
<span class="bp-default-logo">
<svg height="25" width="45" viewBox="0 0 98 52" focusable="false">
<path d="M95.34 44.7c1.1 1.53.8 3.66-.75 4.8-1.56 1.13-3.74.84-4.93-.64l-7.8-10.23-7.82 10.23c-1.2 1.48-3.36 1.77-4.9.63-1.55-1.15-1.87-3.28-.75-4.8l9.06-11.86L68.4 21c-1.1-1.54-.8-3.67.75-4.8 1.55-1.14 3.72-.85 4.9.63l7.82 10.23 7.8-10.23c1.2-1.48 3.38-1.77 4.92-.63 1.52 1.13 1.84 3.26.73 4.8L86.3 32.84l9.04 11.85zM53.9 43.22c-5.86 0-10.6-4.65-10.6-10.4 0-5.72 4.74-10.37 10.6-10.37 5.85 0 10.6 4.65 10.6 10.38 0 5.74-4.75 10.4-10.6 10.4zm-31.23 0c-5.85 0-10.6-4.65-10.6-10.4 0-5.72 4.75-10.37 10.6-10.37 5.86 0 10.6 4.65 10.6 10.38 0 5.74-4.74 10.4-10.6 10.4zm31.22-27.7c-6.78 0-12.66 3.73-15.63 9.2-2.97-5.47-8.84-9.2-15.6-9.2-4 0-7.66 1.3-10.6 3.46V4.38C12.02 2.52 10.45 1 8.53 1 6.6 1 5.03 2.5 5 4.4v28.7c.16 9.43 8 17.03 17.67 17.03 6.77 0 12.64-3.73 15.6-9.2 2.98 5.47 8.86 9.2 15.62 9.2 9.74 0 17.66-7.75 17.66-17.32 0-9.55-7.92-17.3-17.68-17.3z"></path>
</svg>
</span>
<img class="bp-is-hidden bp-custom-logo"></img>
<div class="bp-header-btns">
<button class="bp-btn-plain bp-btn-annotate-draw bp-is-hidden">
<svg class="bp-btn-annotate-draw-enter" width="22" height="21" viewBox="0 0 14.88 14.88" focusable="false">
<path d="M11.65,6.64,5.11,13.17.06,14.94,1.83,9.89,8.37,3.35Zm1.41-1.41L9.78,1.94,11.37.35a1,1,0,0,1,1.41,0l1.87,1.87a1,1,0,0,1,0,1.41Z" transform="translate(-0.06 -0.06)" fill-rule="evenodd"/>
<div class="bp-header-container bp-is-hidden">
<div>
<span class="bp-default-logo">
<svg height="25" width="45" viewBox="0 0 98 52" focusable="false">
<path d="M95.34 44.7c1.1 1.53.8 3.66-.75 4.8-1.56 1.13-3.74.84-4.93-.64l-7.8-10.23-7.82 10.23c-1.2 1.48-3.36 1.77-4.9.63-1.55-1.15-1.87-3.28-.75-4.8l9.06-11.86L68.4 21c-1.1-1.54-.8-3.67.75-4.8 1.55-1.14 3.72-.85 4.9.63l7.82 10.23 7.8-10.23c1.2-1.48 3.38-1.77 4.92-.63 1.52 1.13 1.84 3.26.73 4.8L86.3 32.84l9.04 11.85zM53.9 43.22c-5.86 0-10.6-4.65-10.6-10.4 0-5.72 4.74-10.37 10.6-10.37 5.85 0 10.6 4.65 10.6 10.38 0 5.74-4.75 10.4-10.6 10.4zm-31.23 0c-5.85 0-10.6-4.65-10.6-10.4 0-5.72 4.75-10.37 10.6-10.37 5.86 0 10.6 4.65 10.6 10.38 0 5.74-4.74 10.4-10.6 10.4zm31.22-27.7c-6.78 0-12.66 3.73-15.63 9.2-2.97-5.47-8.84-9.2-15.6-9.2-4 0-7.66 1.3-10.6 3.46V4.38C12.02 2.52 10.45 1 8.53 1 6.6 1 5.03 2.5 5 4.4v28.7c.16 9.43 8 17.03 17.67 17.03 6.77 0 12.64-3.73 15.6-9.2 2.98 5.47 8.86 9.2 15.62 9.2 9.74 0 17.66-7.75 17.66-17.32 0-9.55-7.92-17.3-17.68-17.3z"></path>
</svg>
</button>
<button class="bp-btn-plain bp-btn-annotate-point bp-is-hidden">
<svg width="22" height="21" viewBox="0 0 22 21" focusable="false">
<path d="M11 21l-4-4H1.99C.89 17 0 16.11 0 15V2C0 .895.89 0 1.99 0h18.02C21.11 0 22 .89 22 2v13c0 1.105-.89 2-1.99 2H15l-4 4zm-7-9.5c0-.276.228-.5.51-.5h8.98c.282 0 .51.232.51.5 0 .276-.228.5-.51.5H4.51c-.282 0-.51-.232-.51-.5zm0-3c0-.276.23-.5.5-.5h11c.276 0 .5.232.5.5 0 .276-.23.5-.5.5h-11c-.276 0-.5-.232-.5-.5zm0-3c0-.276.22-.5.498-.5h13.004c.275 0 .498.232.498.5 0 .276-.22.5-.498.5H4.498C4.223 6 4 5.768 4 5.5z" fill-rule="evenodd"/>
</svg>
</button>
<button class="bp-btn-plain bp-btn-print bp-is-hidden">
<svg height="24" viewBox="0 0 24 24" width="24" focusable="false">
<path d="M19 8H5c-1.66 0-3 1.34-3 3v6h4v4h12v-4h4v-6c0-1.66-1.34-3-3-3zm-3 11H8v-5h8v5zm3-7c-.55 0-1-.45-1-1s.45-1 1-1 1 .45 1 1-.45 1-1 1zm-1-9H6v4h12V3z"/>
<path d="M0 0h24v24H0z" fill="none"/>
</svg>
</button>
<button class="bp-btn-plain bp-btn-download bp-is-hidden">
<svg height="24" viewBox="0 0 24 24" width="24" focusable="false">
<path d="M19 9h-4V3H9v6H5l7 7 7-7zM5 18v2h14v-2H5z"/>
<path d="M0 0h24v24H0z" fill="none"/>
</svg>
</button>
</span>
<img class="bp-is-hidden bp-custom-logo"></img>
<div class="bp-header-btns">
<button class="bp-btn-plain bp-btn-annotate-draw bp-is-hidden">
<svg class="bp-btn-annotate-draw-enter" width="22" height="21" viewBox="0 0 14.88 14.88" focusable="false">
<path d="M11.65,6.64,5.11,13.17.06,14.94,1.83,9.89,8.37,3.35Zm1.41-1.41L9.78,1.94,11.37.35a1,1,0,0,1,1.41,0l1.87,1.87a1,1,0,0,1,0,1.41Z" transform="translate(-0.06 -0.06)" fill-rule="evenodd"/>
</svg>
</button>
<button class="bp-btn-plain bp-btn-annotate-point bp-is-hidden">
<svg width="22" height="21" viewBox="0 0 22 21" focusable="false">
<path d="M11 21l-4-4H1.99C.89 17 0 16.11 0 15V2C0 .895.89 0 1.99 0h18.02C21.11 0 22 .89 22 2v13c0 1.105-.89 2-1.99 2H15l-4 4zm-7-9.5c0-.276.228-.5.51-.5h8.98c.282 0 .51.232.51.5 0 .276-.228.5-.51.5H4.51c-.282 0-.51-.232-.51-.5zm0-3c0-.276.23-.5.5-.5h11c.276 0 .5.232.5.5 0 .276-.23.5-.5.5h-11c-.276 0-.5-.232-.5-.5zm0-3c0-.276.22-.5.498-.5h13.004c.275 0 .498.232.498.5 0 .276-.22.5-.498.5H4.498C4.223 6 4 5.768 4 5.5z" fill-rule="evenodd"/>
</svg>
</button>
<button class="bp-btn-plain bp-btn-print bp-is-hidden">
<svg height="24" viewBox="0 0 24 24" width="24" focusable="false">
<path d="M19 8H5c-1.66 0-3 1.34-3 3v6h4v4h12v-4h4v-6c0-1.66-1.34-3-3-3zm-3 11H8v-5h8v5zm3-7c-.55 0-1-.45-1-1s.45-1 1-1 1 .45 1 1-.45 1-1 1zm-1-9H6v4h12V3z"/>
<path d="M0 0h24v24H0z" fill="none"/>
</svg>
</button>
<button class="bp-btn-plain bp-btn-download bp-is-hidden">
<svg height="24" viewBox="0 0 24 24" width="24" focusable="false">
<path d="M19 9h-4V3H9v6H5l7 7 7-7zM5 18v2h14v-2H5z"/>
<path d="M0 0h24v24H0z" fill="none"/>
</svg>
</button>
</div>
</div>
</div>
<div class="bp">
Expand Down

0 comments on commit 9528761

Please sign in to comment.