From 41064fcb36ca74f8a88cba85dc65da00153a273a Mon Sep 17 00:00:00 2001
From: Pete Bacon Darwin <pete@bacondarwin.com>
Date: Fri, 2 Mar 2018 23:32:12 +0000
Subject: [PATCH] fix(aio): reposition and simplify github links (#22565)

Closes #22379

PR Close #22565
---
 aio/src/styles/1-layouts/_content-layout.scss       | 13 ++++++++-----
 aio/tests/e2e/api.e2e-spec.ts                       | 10 ++++++++++
 aio/tests/e2e/app.po.ts                             |  5 ++---
 .../transforms/templates/api/base.template.html     | 10 +++++-----
 .../transforms/templates/api/lib/githubLinks.html   |  9 +++++----
 .../templates/overview-dump.template.html           |  6 +++---
 6 files changed, 33 insertions(+), 20 deletions(-)

diff --git a/aio/src/styles/1-layouts/_content-layout.scss b/aio/src/styles/1-layouts/_content-layout.scss
index 6933ca7ba8..7870fa3fec 100644
--- a/aio/src/styles/1-layouts/_content-layout.scss
+++ b/aio/src/styles/1-layouts/_content-layout.scss
@@ -39,9 +39,12 @@ aio-shell.page-docs {
 }
 
 .page-actions {
-  display: flex;
-  flex-direction: column;
-  position: absolute;
-  top: 80px;
-  right: 24px;
+  float: right;
+  .material-icons {
+    border-radius: 4px;
+    padding: 4px;
+    font-size: 20px;
+    background-color: $mist;
+    color: $mediumgray;
+  }
 }
\ No newline at end of file
diff --git a/aio/tests/e2e/api.e2e-spec.ts b/aio/tests/e2e/api.e2e-spec.ts
index d85010d1c8..b09ab70e44 100644
--- a/aio/tests/e2e/api.e2e-spec.ts
+++ b/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 */
+  });
 });
diff --git a/aio/tests/e2e/app.po.ts b/aio/tests/e2e/app.po.ts
index 61690131a4..1194620da2 100644
--- a/aio/tests/e2e/app.po.ts
+++ b/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)))
-    .first();
+    .filter((a: ElementFinder) => a.getAttribute('href').then(href => githubRegex.test(href)));
 
   static setWindowWidth(newWidth: number) {
     const win = browser.driver.manage().window();
diff --git a/aio/tools/transforms/templates/api/base.template.html b/aio/tools/transforms/templates/api/base.template.html
index 14f2edfaf7..a5cdb7bb75 100644
--- a/aio/tools/transforms/templates/api/base.template.html
+++ b/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 %}
diff --git a/aio/tools/transforms/templates/api/lib/githubLinks.html b/aio/tools/transforms/templates/api/lib/githubLinks.html
index a281712098..f35324b132 100644
--- a/aio/tools/transforms/templates/api/lib/githubLinks.html
+++ b/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>
-{%- endmacro %}
+
+{% 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 %}
\ No newline at end of file
diff --git a/aio/tools/transforms/templates/overview-dump.template.html b/aio/tools/transforms/templates/overview-dump.template.html
index 2bd79834fa..63d552eb56 100644
--- a/aio/tools/transforms/templates/overview-dump.template.html
+++ b/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>