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

Jump to bottom

Chore: Moving header into container #849

Merged
merged 2 commits into from
Oct 8, 2018
Merged

Chore: Moving header into container #849

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
a44e7d3
Chore: Moving header into container
Oct 5, 2018
5da4dd5
Chore: removing extra bp-is-hidden class
Oct 8, 2018
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
16 changes: 10 additions & 6 deletions src/lib/PreviewUI.js
View file
Open in desktop
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
View file
Open in desktop
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
View file
Open in desktop
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
View file
Open in desktop
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
View file
Open in desktop
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
View file
Open in desktop
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 class="bp-is-hidden">
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

do we need to hide this if the container 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>
</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