Skip to content

Commit 1835af5

Browse files
MinThaMieMinThaMie
authored
Merge pull request #874 from ember-learn/sidemenu-styling
Sidemenu styling
2 parents 1541bf9 + b735ee3 commit 1835af5

File tree

8 files changed

+114
-57
lines changed

8 files changed

+114
-57
lines changed

‎app/components/table-of-contents.hbs

Lines changed: 14 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,43 +1,43 @@
1-
<ol class='toc-level-0'>
2-
<li class='toc-level-0'>
1+
<ul class='table-of-contents '>
2+
<li class='toc-item toc-group'>
33
<a {{on 'click' (fn this.toggle 'modules')}} href='#' data-test-toc-title='packages'>Packages</a>
4-
<ol class='toc-level-1 modules selected'>
4+
<ul class='sub-table-of-contents modules selected'>
55
{{#each @moduleIDs as |moduleID|}}
66

77
{{#if (not-eq moduleID '@ember/object/computed')}}
8-
<li class='toc-level-1' data-test-module={{moduleID}}>
8+
<li class='toc-item toc-link' data-test-module={{moduleID}}>
99
<LinkTo @route='project-version.modules.module' @models={{array @version moduleID}}>{{moduleID}}</LinkTo>
1010
</li>
1111
{{/if}}
1212

1313
{{/each}}
14-
</ol>
14+
</ul>
1515
</li>
1616

1717
{{#if @isShowingNamespaces}}
18-
<li class='toc-level-0'>
18+
<li class='table-of-contents'>
1919
<a {{on 'click' (fn this.toggle 'namespaces')}} href='#' data-test-toc-title='namespaces'>Namespaces</a>
20-
<ol class='toc-level-1 namespaces selected'>
20+
<ul class='sub-table-of-contents namespaces selected'>
2121
{{#each @namespaceIDs as |namespaceID|}}
22-
<li class='toc-level-1' data-test-namespace={{namespaceID}}>
22+
<li class='toc-item toc-link' data-test-namespace={{namespaceID}}>
2323
<LinkTo @route='project-version.namespaces.namespace' @models={{array @version namespaceID}}>{{namespaceID}}</LinkTo>
2424
</li>
2525
{{/each}}
26-
</ol>
26+
</ul>
2727
</li>
2828
{{/if}}
2929

30-
<li class='toc-level-0'>
30+
<li class='table-of-contents '>
3131
<a {{on 'click' (fn this.toggle 'classes')}} href='#' data-test-toc-title='classes'>Classes</a>
32-
<ol class='toc-level-1 classes selected'>
32+
<ul class='sub-table-of-contents classes selected'>
3333
{{#each @classesIDs as |classID|}}
34-
<li class='toc-level-1' data-test-class={{classID}}>
34+
<li class='toc-item toc-link' data-test-class={{classID}}>
3535
<LinkTo @route='project-version.classes.class' @models={{array @version classID}}>{{classID}}</LinkTo>
3636
</li>
3737
{{/each}}
38-
</ol>
38+
</ul>
3939
</li>
40-
</ol>
40+
</ul>
4141
<label class='toc-private-toggle'>
4242
<input type='checkbox' checked={{@showPrivateClasses}} onchange={{@togglePrivateClasses}} class='private-deprecated-toggle' />
4343
Show Private / Deprecated

‎app/components/table-of-contents.js

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,9 @@ import Component from '@glimmer/component';
44
export default class TableOfContents extends Component {
55
@action
66
toggle(type) {
7-
const tableElement = document.querySelector(`ol.toc-level-1.${type}`);
7+
const tableElement = document.querySelector(
8+
`ul.sub-table-of-contents.${type}`
9+
);
810
tableElement.classList.toggle('selected');
911
}
1012
}

‎app/components/table-of-projects.hbs

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
<ul class="table-of-contents ">
2+
<li class="toc-item" data-test-home>
3+
<LinkTo @route="project" @model="ember">Home</LinkTo>
4+
</li>
5+
<li class="toc-heading">Projects</li>
6+
<ul class="sub-table-of-contents">
7+
<li class="toc-item"><LinkTo @route="project" @model="ember" @current-when={{eq @activeProject "ember"}} class="spec-ember">Ember</LinkTo></li>
8+
<li class="toc-item"><LinkTo @route="project" @model="ember-data" @current-when={{eq @activeProject "ember-data"}} class="spec-ember-data">EmberData</LinkTo></li>
9+
<li class="toc-item"><LinkTo @route="project" @model="ember-cli" @current-when={{eq @activeProject "ember-cli"}} class="spec-ember">Ember CLI</LinkTo></li>
10+
</ul>
11+
</ul>

‎app/styles/app.css

Lines changed: 57 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -25,3 +25,60 @@ main a.edit-icon {
2525
display: inline-block;
2626
background: none;
2727
}
28+
29+
.table-of-contents {
30+
list-style-type: none;
31+
padding-left: 0;
32+
font-size: var(--font-size-lg);
33+
font-weight: var(--font-weight-3);
34+
}
35+
36+
.sub-table-of-contents {
37+
padding-left: var(--spacing-1);
38+
font-size: var(--font-size-md);
39+
font-weight: var(--font-weight-2);
40+
}
41+
42+
.sub-table-of-contents .sub-table-of-contents {
43+
padding-left: var(--spacing-3);
44+
margin-bottom: 0;
45+
}
46+
47+
.table-of-contents a:link {
48+
background: none;
49+
}
50+
51+
.sub-table-of-contents .toc-item a {
52+
display: block;
53+
padding: var(--spacing-1);
54+
border-radius: var(--radius);
55+
line-height: var(--line-height-xs);
56+
color: var(--color-gray-700);
57+
border-left: 0 solid transparent;
58+
transition: border-width .3s;
59+
}
60+
61+
.sub-table-of-contents .toc-item a:hover {
62+
border-left: 4px solid var(--color-gray-400);
63+
border-radius: 0;
64+
}
65+
66+
.sub-table-of-contents .toc-item.selected > a, .sub-table-of-contents .toc-item > a.active {
67+
border-left: 4px solid var(--color-brand-hc-dark);
68+
border-radius: 0;
69+
}
70+
71+
.table-of-contents li {
72+
margin: 3px 0;
73+
list-style-type: none;
74+
}
75+
76+
li.toc-heading {
77+
margin-top: var(--spacing-4);
78+
color: var(--color-gray-600);
79+
}
80+
81+
li.toc-heading:first-child {
82+
margin-top: 0;
83+
}
84+

‎app/templates/ember-cli.hbs

Lines changed: 10 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -1,24 +1,10 @@
1-
{{! template-lint-disable no-inline-styles }}
2-
{{!-- Template is copied from project-version.hbs --}}
3-
<aside class="sidebar">
4-
<ol class="toc-level-0">
5-
<li class="toc-level-0" data-test-home>
6-
<LinkTo @route="project" @model="ember">Home</LinkTo>
7-
</li>
8-
<li class="toc-level-0">
9-
Projects
10-
<ol class="toc-level-1 selected" style="display: block;">
11-
<li class="toc-level-1"><LinkTo @route="project" @model="ember" @current-when={{eq this.activeProject "ember"}} class="spec-ember">Ember</LinkTo></li>
12-
<li class="toc-level-1"><LinkTo @route="project" @model="ember-data" @current-when={{eq this.activeProject "ember-data"}} class="spec-ember-data">Ember Data</LinkTo></li>
13-
<li class="toc-level-1"><LinkTo @route="project" @model="ember-cli" @current-when={{eq this.activeProject "ember-cli"}} class="spec-ember">Ember CLI</LinkTo></li>
14-
</ol>
15-
</li>
16-
</ol>
17-
</aside>
18-
<section class="content">
19-
<article class="chapter">
20-
<h1>Ember CLI API Documentation</h1>
21-
<hr>
22-
<p>Ember CLI API documentation is available on <a href="https://ember-cli.com/api">ember-cli.com/api</a>.</p>
23-
</article>
24-
</section>
1+
<div class="sidebar-container">
2+
<EsSidebar><TableOfProjects @activeProject='ember-cli' /></EsSidebar>
3+
<section class="content">
4+
<article class="chapter">
5+
<h1>Ember CLI API Documentation</h1>
6+
<hr>
7+
<p>Ember CLI API documentation is available on <a href="https://ember-cli.com/api">ember-cli.com/api</a>.</p>
8+
</article>
9+
</section>
10+
</div>

‎app/templates/project-version.hbs

Lines changed: 1 addition & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,6 @@
1-
{{! template-lint-disable no-inline-styles }}
21
<div class="sidebar-container">
32
<EsSidebar>
4-
<ol class="toc-level-0">
5-
<li class="toc-level-0" data-test-home>
6-
<LinkTo @route="project" @model="ember">Home</LinkTo>
7-
</li>
8-
<li class="toc-level-0">
9-
Projects
10-
<ol class="toc-level-1 selected" style="display: block;">
11-
<li class="toc-level-1"><LinkTo @route="project" @model="ember" @current-when={{eq this.activeProject "ember"}} class="spec-ember">Ember</LinkTo></li>
12-
<li class="toc-level-1"><LinkTo @route="project" @model="ember-data" @current-when={{eq this.activeProject "ember-data"}} class="spec-ember-data">Ember Data</LinkTo></li>
13-
<li class="toc-level-1"><LinkTo @route="project" @model="ember-cli" @current-when={{eq this.activeProject "ember-cli"}} class="spec-ember">Ember CLI</LinkTo></li>
14-
</ol>
15-
</li>
16-
</ol>
3+
<TableOfProjects @activeProject={{this.activeProject}} />
174

185
<div class="select-container">
196
<PowerSelect

‎tests/integration/components/table-of-contents-test.js

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -27,7 +27,7 @@ module('Integration | Component | table of contents', function (hooks) {
2727
const contentTitle = document.querySelector(
2828
'[data-test-toc-title="classes"]'
2929
);
30-
const contentReference = '.toc-level-1';
30+
const contentReference = '.sub-table-of-contents';
3131

3232
assert.dom(contentTitle).hasText('Classes');
3333
assert
@@ -51,7 +51,7 @@ module('Integration | Component | table of contents', function (hooks) {
5151
/>
5252
`);
5353

54-
const contentReference = '.toc-level-1';
54+
const contentReference = '.sub-table-of-contents';
5555
const content = document.querySelector(contentReference);
5656
const contentTitle = document.querySelector(
5757
'[data-test-toc-title="classes"]'
@@ -84,7 +84,7 @@ module('Integration | Component | table of contents', function (hooks) {
8484
const contentTitle = document.querySelector(
8585
'[data-test-toc-title="packages"]'
8686
);
87-
const contentReference = '.toc-level-1';
87+
const contentReference = '.sub-table-of-content';
8888
const content = document.querySelector(contentReference);
8989

9090
assert.dom(contentTitle).hasText('Packages');
@@ -118,7 +118,7 @@ module('Integration | Component | table of contents', function (hooks) {
118118
const titleButton = document.querySelector(
119119
'[data-test-toc-title="packages"]'
120120
);
121-
const contentReference = '.toc-level-1';
121+
const contentReference = '.sub-table-of-contents';
122122
const content = document.querySelector(contentReference);
123123

124124
assert.dom(titleButton).hasText('Packages');

‎tests/integration/components/table-of-projects-test.js

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
import { module, test } from 'qunit';
2+
import { setupRenderingTest } from 'ember-qunit';
3+
import { render } from '@ember/test-helpers';
4+
import { hbs } from 'ember-cli-htmlbars';
5+
6+
module('Integration | Component | table-of-projects', function (hooks) {
7+
setupRenderingTest(hooks);
8+
9+
test('it renders', async function (assert) {
10+
await render(hbs`<TableOfProjects />`);
11+
assert.dom(this.element).hasText('Home Projects Ember EmberData Ember CLI');
12+
// The functional test for this is in acceptance/switch-project-test.js
13+
});
14+
});

0 commit comments

Comments
 (0)