Skip to content

Commit 43d7329

Browse files
samselikoffsamselikoff
authored
Merge pull request #42 from ember-learn/add-edit-this-page-link
[#9] Adds Edit this page link to docs viewer
2 parents 664f3e0 + 2adaf0e commit 43d7329

File tree

29 files changed

+342
-126
lines changed

29 files changed

+342
-126
lines changed

‎addon/components/docs-logo/styles.scss

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,6 @@
44
max-width: 100%;
55

66
path, text {
7-
fill: white;
7+
fill: currentColor;
88
}
99
}

‎addon/components/docs-navbar/component.js

Lines changed: 0 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,3 @@
1-
import { equal, match } from '@ember/object/computed';
2-
import { inject as service } from '@ember/service';
31
import Component from '@ember/component';
42
import layout from './template';
53
import config from 'dummy/config/environment';
@@ -15,14 +13,10 @@ const packageJson = config['ember-cli-addon-docs'].packageJson;
1513
*/
1614
export default Component.extend({
1715
layout,
18-
router: service('-routing'),
1916

2017
tagName: 'nav',
2118
classNames: 'docs-navbar',
2219

23-
isHome: equal('router.currentPath', 'index'),
24-
isViewingDocs: match('router.currentPath', /docs/),
25-
2620
githubUrl: packageJson.repository
2721

2822
});

‎addon/components/docs-navbar/styles.scss

Lines changed: 0 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,4 @@
11
.docs-navbar {
2-
// background-color: #f0f0f0;
3-
// background-color: #222;
4-
// color: white;
5-
// position: fixed;
6-
// top: 0;
7-
// left: 0;
8-
// right: 0;
9-
//
10-
// & + * {
11-
// margin-top: 47px;
12-
// }
13-
// border-bottom: 1px solid #eee;
142
border-bottom: 1px solid #f0f0f0;
153

164
&__inner {
@@ -19,11 +7,6 @@
197
display: flex;
208
align-items: center;
219
}
22-
.docs-logo {
23-
path, text {
24-
fill: #1D1D1D;
25-
}
26-
}
2710
&__link {
2811
color: #1D1D1D;
2912
text-decoration: none;
@@ -43,13 +26,4 @@
4326
margin-right: 0;
4427
}
4528
}
46-
47-
&__logo {
48-
// letter-spacing: -0.5px;
49-
line-height: 0;
50-
}
51-
&__logo-trademark {
52-
display: inline-block;
53-
height: 16px;
54-
}
5529
}

‎addon/components/docs-navbar/template.hbs

Lines changed: 4 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -1,24 +1,7 @@
1-
<div class='docs-navbar__inner docs-container {{if isViewingDocs 'docs-container--fluid'}}'>
2-
{{#if isHome}}
3-
{{#link-to 'docs' class='docs-navbar__link'}}
4-
Documentation
5-
{{/link-to}}
6-
{{else}}
7-
{{#link-to 'index' class='docs-navbar__link'}}
8-
<span class='docs-navbar__logo'>
9-
{{#if hasBlock}}
10-
{{yield}}
11-
{{else if logo}}
12-
<span class='docs-navbar__logo-trademark'>
13-
{{docs-logo logo=logo}}
14-
</span>
15-
{{/if}}
16-
<span>
17-
{{name}}
18-
</span>
19-
</span>
20-
{{/link-to}}
21-
{{/if}}
1+
<div class='docs-navbar__inner docs-container'>
2+
{{#link-to 'docs' class='docs-navbar__link'}}
3+
Documentation
4+
{{/link-to}}
225

236
<a href={{githubUrl}} class='docs-navbar__link docs-navbar__link--right'>GitHub</a>
247
</div>

‎addon/components/docs-svg-icon/component.js

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
import Component from '@ember/component';
2+
import layout from './template';
3+
4+
export default Component.extend({
5+
layout,
6+
7+
classNames: 'docs-svg-icon'
8+
9+
}).reopenClass({
10+
11+
positionalParams: [ 'icon' ]
12+
13+
});

‎addon/components/docs-svg-icon/styles.scss

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
.docs-svg-icon {
2+
display: inline-flex;
3+
align-self: center;
4+
position: relative;
5+
height: 1em;
6+
width: 1em;
7+
8+
svg {
9+
height: 100%;
10+
width: 100%;
11+
12+
// align with the baseline
13+
bottom: -0.125em;
14+
position: absolute;
15+
16+
&, * {
17+
fill: currentColor;
18+
}
19+
}
20+
}

‎addon/components/docs-svg-icon/template.hbs

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
{{svg-jar icon}}

‎addon/components/docs-viewer/x-main/component.js

Lines changed: 27 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,41 @@
11
import { inject as service } from '@ember/service';
22
import Component from '@ember/component';
33
import layout from './template';
4+
import { computed } from '@ember/object';
5+
import appFiles from 'ember-cli-addon-docs/app-files';
6+
import { dasherize } from '@ember/string';
47

58
export default Component.extend({
69
layout,
710

811
docsRoutes: service(),
12+
router: service(),
913

1014
tagName: 'main',
1115

1216
elementId: 'docs-viewer__scroll-body',
13-
classNames: 'docs-viewer__main'
17+
classNames: 'docs-viewer__main',
18+
19+
editCurrentPageUrl: computed('router.currentRouteName', function() {
20+
let path = this.get('router.currentRouteName');
21+
if (!path) {
22+
// `routing` doesn't exist for old ember versions via ember-try
23+
return;
24+
}
25+
path = path.replace(/\./g, '/');
26+
27+
if (path === 'docs/api/class') {
28+
let params = this.get('router._router._routerMicrolib.state').params['docs.api.class'];
29+
let klass = dasherize(params.class_id.replace(/-.+$/g, ''));
30+
let path = `pods/${path}`;
31+
32+
return `https://github.com/ember-learn/ember-cli-addon-docs/edit/master/addon/components/${klass}/component.js`;
33+
} else {
34+
let templatePath = `pods/${path}`;
35+
let file = appFiles.find(file => file.match(`${templatePath}/template.(hbs|md)`));
36+
37+
return `https://github.com/ember-learn/ember-cli-addon-docs/edit/master/tests/dummy/app/${file}`;
38+
}
39+
})
1440

1541
});

‎addon/components/docs-viewer/x-main/styles.scss

Lines changed: 60 additions & 37 deletions
Original file line numberDiff line numberDiff line change
@@ -1,52 +1,75 @@
11
$bp: 1000px;
22

3-
.docs-viewer__main {
4-
flex: 1;
5-
overflow: scroll;
3+
.docs-viewer {
4+
&__main {
5+
flex: 1;
6+
overflow: scroll;
67

7-
@media (min-width: $bp) {
8-
padding-left: 90px;
9-
padding-right: 90px;
8+
@media (min-width: $bp) {
9+
padding-left: 90px;
10+
padding-right: 90px;
11+
}
1012
}
11-
}
1213

13-
.docs-viewer__page-nav {
14-
@media (max-width: $bp - 1) {
15-
display: none;
14+
&__page-header {
15+
padding-top: 20px;
16+
padding-bottom: 20px;
17+
font-size: 14px;
18+
// text-align: right;
1619
}
17-
text-decoration: none;
18-
position: absolute;
19-
top: 0px;
20-
bottom: 0;
21-
margin: 0;
22-
width: 90px;
23-
display: flex;
24-
justify-content: center;
25-
align-items: center;
26-
flex-direction: column;
27-
font-size: 40px;
28-
color: #ccc;
29-
text-align: center;
30-
transition: all 0.15s;
31-
margin-left: -90px;
32-
33-
svg * {
34-
transition: all 0.15s;
35-
fill: #ccc;
20+
&__page-header-link {
21+
text-decoration: none;
22+
text-transform: uppercase;
23+
color: #444;
24+
opacity: 0.4;
25+
transition: opacity 0.15s;
26+
font-size: 13px;
27+
28+
&:hover {
29+
opacity: 1;
30+
}
31+
}
32+
&__page-header-link-icon {
33+
margin-right: 3px;
34+
font-size: 85%;
3635
}
3736

38-
&:hover {
37+
&__page-nav {
38+
@media (max-width: $bp - 1) {
39+
display: none;
40+
}
3941
text-decoration: none;
40-
color: #444;
42+
position: absolute;
43+
top: 0px;
44+
bottom: 0;
45+
margin: 0;
46+
width: 90px;
47+
display: flex;
48+
justify-content: center;
49+
align-items: center;
50+
flex-direction: column;
51+
font-size: 40px;
52+
color: #ccc;
53+
text-align: center;
54+
transition: all 0.15s;
55+
margin-left: -90px;
4156

4257
svg * {
43-
fill: #444;
58+
transition: all 0.15s;
59+
fill: #ccc;
4460
}
45-
}
4661

47-
&--next {
48-
right: 0;
62+
&:hover {
63+
text-decoration: none;
64+
color: #444;
65+
66+
svg * {
67+
fill: #444;
68+
}
69+
}
70+
71+
&--next {
72+
right: 0;
73+
}
4974
}
5075
}
51-
.docs-viewer__prev-page {
52-
}

‎addon/components/docs-viewer/x-main/template.hbs

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,12 @@
1+
<div class="docs-viewer__page-header docs-container">
2+
<a class='docs-viewer__page-header-link' href={{editCurrentPageUrl}}>
3+
<span class="docs-viewer__page-header-link-icon">
4+
{{docs-svg-icon 'pencil'}}
5+
</span>
6+
Edit this page
7+
</a>
8+
</div>
9+
110
{{yield}}
211

312
{{#if docsRoutes.previousRoute}}

‎addon/components/docs-viewer/x-nav-item/styles.scss

Lines changed: 23 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -98,17 +98,35 @@
9898
// }
9999

100100
// Dim link implementation
101+
// .docs-viewer__nav-link {
102+
// display: block;
103+
// padding: 7px 20px;
104+
// text-decoration: none;
105+
// transition: all 0.15s;
106+
// color: #364149;
107+
//
108+
// &:hover,
109+
// &--active {
110+
// opacity: 0.5;
111+
// // color: #2196F3;
112+
// // color: #0070c9;
113+
// }
114+
// }
115+
101116
.docs-viewer__nav-link {
102117
display: block;
103118
padding: 7px 20px;
104119
text-decoration: none;
105-
transition: all 0.15s;
120+
transition: opacity 0.15s;
106121
color: #364149;
107122

108-
&:hover,
109-
&--active {
123+
&:hover {
110124
opacity: 0.5;
111-
// color: #2196F3;
112-
// color: #0070c9;
125+
}
126+
127+
&--active,
128+
&--active:hover {
129+
opacity: 1;
130+
font-weight: 900;
113131
}
114132
}

‎addon/components/docs-viewer/x-nav/component.js

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,13 +2,40 @@ import { computed } from '@ember/object';
22
import { inject as service } from '@ember/service';
33
import Component from '@ember/component';
44
import layout from './template';
5+
import config from 'dummy/config/environment';
6+
import { classify } from '@ember/string';
7+
8+
const packageJson = config['ember-cli-addon-docs'].packageJson;
59

610
export default Component.extend({
711
layout,
812
tagName: 'nav',
913
classNames: 'docs-viewer__nav',
1014

1115
store: service(),
16+
packageJson,
17+
18+
addonLogo: computed(function() {
19+
let name = packageJson.name;
20+
let logo;
21+
if (name.match(/^ember-cli/)) {
22+
logo = 'ember-cli';
23+
} else if (name.match(/^ember-data/)) {
24+
logo = 'ember-data';
25+
} else if (name.match(/^ember/)) {
26+
logo = 'ember';
27+
}
28+
29+
return logo;
30+
}),
31+
32+
addonTitle: computed('addonLogo', function() {
33+
let logo = this.get('addonLogo');
34+
35+
return classify(packageJson.name.replace(`${logo}-`, ''));
36+
}),
37+
38+
releasesUrl: `${packageJson.repository}/releases`,
1239

1340
projectVersion: computed(function() {
1441
return this.get('store').peekAll('project-version').get('firstObject');

0 commit comments

Comments
 (0)