Skip to content
This repository has been archived by the owner on Nov 6, 2024. It is now read-only.

Remove show-on-large class handling for collapse-button in Sidenav #234

Merged
merged 1 commit into from
Oct 31, 2017
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
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
2 changes: 1 addition & 1 deletion demo-app/src/app/sidenav/sidenav.component.html
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@ <h5 class="light">Fixed navigation</h5>
<h5 class="light">Hidden navigation</h5>

<p>
The side navigation will be hidden on all screen resolution if <code class="language-markup">fixed</code> property is either omitted or false on the <code class="language-markup">mz-sidenav</code> component. To be able to toggle the side navigation visibility add a <code class="language-markup">mz-button</code> component and supply the button <code class="language-markup">id</code> trought the <code class="language-markup">collapseButtonId</code> property of the <code class="language-markup">mz-sidenav</code> component. The class <code class="language-markup">show-on-large</code> will automatically be applied on the button to make it visible on all screen resolutions when <code class="language-markup">fixed</code> property is not provided or false.
The side navigation will be hidden on all screen resolution if <code class="language-markup">fixed</code> property is either omitted or false on the <code class="language-markup">mz-sidenav</code> component. To be able to toggle the side navigation visibility add a <code class="language-markup">mz-button</code> component and supply the button <code class="language-markup">id</code> trought the <code class="language-markup">collapseButtonId</code> property of the <code class="language-markup">mz-sidenav</code> component.
</p>
</div>

Expand Down
5 changes: 0 additions & 5 deletions src/app/sidenav/sidenav.component.ts
Original file line number Diff line number Diff line change
Expand Up @@ -46,11 +46,6 @@ export class MzSidenavComponent implements AfterViewInit, OnDestroy {
? $(`#${this.collapseButtonId}`)
: $(document.createElement('template'));

// make collapse button visible on all resolution if side navigation is not fixed
if (!this.fixed) {
this.collapseButton.addClass('show-on-large');
}

// add data-activates to collapse button
this.collapseButton.attr('data-activates', this.id);

Expand Down
24 changes: 0 additions & 24 deletions src/app/sidenav/sidenav.component.unit.spec.ts
Original file line number Diff line number Diff line change
Expand Up @@ -86,14 +86,6 @@ describe('MzSidenavComponent:unit', () => {
createCollapseButton(collapseButtonId);
});

it('should not add show-on-large css class on collapsable button when fixed', () => {

component.fixed = true;
component.initCollapseButton();

expect(queryById(collapseButtonId)[0].classList).not.toContain('show-on-large');
});

it('should not add data-activates attribute on collapse button', () => {

component.id = 'sidenav-id';
Expand Down Expand Up @@ -132,22 +124,6 @@ describe('MzSidenavComponent:unit', () => {
component.collapseButtonId = collapseButtonId;
});

it('should not add show-on-large css class on collapsable button when fixed', () => {

component.fixed = true;
component.initCollapseButton();

expect(queryById(collapseButtonId)[0].classList).not.toContain('show-on-large');
});

it('should add show-on-large css class on collapsable button when not fixed', () => {

component.initCollapseButton();

expect(component.fixed).toBeFalsy();
expect(queryById(collapseButtonId)[0].classList).toContain('show-on-large');
});

it('should add data-activates attribute on collapse button', () => {

const sidenavId = 'sidenav-id';
Expand Down