fix(aio): reposition and simplify github links (#22565)

Closes #22379

PR Close #22565

aio/src/styles/1-layouts/_content-layout.scss

@@ -39,9 +39,12 @@ aio-shell.page-docs {
 }
 
 .page-actions {
-  display: flex;
+  float: right;
-  flex-direction: column;
+  .material-icons {
-  position: absolute;
+    border-radius: 4px;
-  top: 80px;
+    padding: 4px;
-  right: 24px;
+    font-size: 20px;
+    background-color: $mist;
+    color: $mediumgray;
+  }
 }

aio/tests/e2e/api.e2e-spec.ts

@@ -50,4 +50,14 @@ describe('Api pages', function() {
     const page = new ApiPage('api/forms/FormControl');
     expect(page.getSection('instance-properties').isPresent()).toBe(false);
   });
+
+  it('should show links to github', () => {
+    const page = new ApiPage('api/core/EventEmitter');
+    /* tslint:disable:max-line-length */
+    expect(page.ghLinks.get(0).getAttribute('href'))
+      .toMatch(/https:\/\/github\.com\/angular\/angular\/edit\/master\/packages\/core\/src\/event_emitter\.ts\?message=docs\(core\)%3A%20describe%20your%20change\.\.\.#L\d+-L\d+/);
+    expect(page.ghLinks.get(1).getAttribute('href'))
+      .toMatch(/https:\/\/github\.com\/angular\/angular\/tree\/[^/]+\/packages\/core\/src\/event_emitter\.ts#L\d+-L\d+/);
+    /* tslint:enable:max-line-length */
+  });
 });

aio/tests/e2e/app.po.ts

@@ -10,10 +10,9 @@ export class SitePage {
   sidenav = element(by.css('mat-sidenav'));
   docViewer = element(by.css('aio-doc-viewer'));
   codeExample = element.all(by.css('aio-doc-viewer pre > code'));
-  ghLink = this.docViewer
+  ghLinks = this.docViewer
     .all(by.css('a'))
-    .filter((a: ElementFinder) => a.getAttribute('href').then(href => githubRegex.test(href)))
+    .filter((a: ElementFinder) => a.getAttribute('href').then(href => githubRegex.test(href)));
-    .first();
 
   static setWindowWidth(newWidth: number) {
     const win = browser.driver.manage().window();

aio/tools/transforms/templates/api/base.template.html

@@ -2,7 +2,11 @@
 {% set comma = joiner(',') %}
 {% set slash = joiner('/') %}
 <article>
-  <div class="breadcrumb">
+    <div class="page-actions">
+      <a href="{$ github.githubEditHref(doc, versionInfo) $}" aria-label="Suggest Edits" title="Suggest Edits"><i class="material-icons" aria-hidden="true" role="img">mode_edit</i></a>
+      <a href="{$ github.githubViewHref(doc, versionInfo) $}" aria-label="View Source" title="View Source"><i class="material-icons" aria-hidden="true" role="img">code</i></a>
+    </div>
+    <div class="breadcrumb">
     <script type="application/ld+json">
       {
         "@context": "http://schema.org",
@@ -33,10 +37,6 @@
     <h1>{$ doc.name $}</h1>
     <span class="version">{$ version $}</span>
   </header>
-  <div class="page-actions">
-      <a href="#"><label class="raised page-label"><i class="material-icons">mode_edit</i>suggest edits</label></a>
-      <a href="{$ github.githubHref(doc, versionInfo) $}"><label class="raised page-label"><i class="material-icons">code</i>view source</label></a>
-  </div>
 
   <div class="api-body">
     {% block body %}{% endblock %}

aio/tools/transforms/templates/api/lib/githubLinks.html

@@ -1,7 +1,8 @@
-{% macro githubHref(doc, versionInfo) -%}
+{% macro githubViewHref(doc, versionInfo) -%}
 https://github.com/{$ versionInfo.gitRepoInfo.owner $}/{$ versionInfo.gitRepoInfo.repo $}/tree/{$ versionInfo.currentVersion.isSnapshot and versionInfo.currentVersion.SHA or versionInfo.currentVersion.raw $}/packages/{$ doc.fileInfo.realProjectRelativePath $}#L{$ doc.startingLine + 1 $}-L{$ doc.endingLine + 1 $}
 {%- endmacro %}
 
-{% macro githubViewLink(doc, versionInfo) -%}
+
-  <a href="{$ githubHref(doc, versionInfo) $}">{$ doc.fileInfo.realProjectRelativePath $}</a>
+{% macro githubEditHref(doc, versionInfo) -%}
+https://github.com/{$ versionInfo.gitRepoInfo.owner $}/{$ versionInfo.gitRepoInfo.repo $}/edit/master/packages/{$ doc.fileInfo.realProjectRelativePath $}?message=docs({$ doc.moduleDoc.id | escape $})%3A%20describe%20your%20change...#L{$ doc.startingLine + 1 $}-L{$ doc.endingLine + 1 $}
 {%- endmacro %}

aio/tools/transforms/templates/overview-dump.template.html

@@ -47,20 +47,20 @@
 
   {% for export in module.exports %}
   <h3 {% if export.notYetDocumented %}class="not-documented"{% endif %}>
-    <a href="{$ github.githubHref(export, versionInfo) $}">
+    <a href="{$ github.githubViewHref(export, versionInfo) $}">
     <code>{$ export.docType $} {$ export.name $}</code>
     </a>
   </h3>
       {%- if export.constructorDoc %}
       <h4  {% if export.constructorDoc.notYetDocumented %}class="not-documented"{% endif %}>
-        <a href="{$ github.githubHref(export.constructorDoc, versionInfo) $}">
+        <a href="{$ github.githubViewHref(export.constructorDoc, versionInfo) $}">
         <code>{$ export.constructorDoc.name $}{$ params.paramList(export.constructorDoc.params) $}</code>
         </a>
       </h4>
     {% endif -%}
     {%- for member in export.members %}
       <h4 {% if member.notYetDocumented %}class="not-documented"{% endif %}>
-        <a href="{$ github.githubHref(member, versionInfo) $}">
+        <a href="{$ github.githubViewHref(member, versionInfo) $}">
         <code>{$ member.name $}{$ params.paramList(member.params) $}</code>
         </a>
       </h4>