Implement view source icon functionality

rakeshAlgo · rakeshAlgo · commit d301a9854807 · 2020-06-26T00:38:02.000+05:30
diff --git a/src/css/clipboard.css b/src/css/clipboard.css
@@ -1,60 +1,89 @@
 .view-source-button {
-  position: absolute;
-  right: 1rem;
-  top: 12px;
-  display: none;
   color: var(--color-brand-gray4);
+  font-family: "Source Code Pro", sans-serif;
+  background: url(../img/awesome-github.svg) no-repeat center center;
+  background-size: cover;
+  display: inline-block;
+  width: 16px;
+  height: 15.5px;
+  font-size: 0;
+  margin-left: 0.5rem;
+}
+
+.view-source-button:hover::after {
+  content: attr(data-title);
+  color: var(--color-brand-gray4);
+  font-size: var(--font-base);
+  font-weight: var(--weight-light);
+  line-height: 1;
+  text-transform: capitalize;
+  position: absolute;
+  bottom: -53px;
+  right: -30%;
+  left: auto;
+  margin: 0;
+  padding: 5px;
+  text-align: center;
+  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.06);
+  background: var(--color-brand-white);
+  border: 1px solid var(--color-brand-gray7);
+  box-sizing: border-box;
+  border-radius: 3px;
+  min-width: 90px;
   font-family: "Source Sans Pro", sans-serif;
-  z-index: 1;
 }
 
-.doc .listingblock:hover .view-source-button {
-  display: block;
+.view-source-button:hover::before {
+  width: 0;
+  height: 0;
+  border-left: 7px solid transparent;
+  border-right: 7px solid transparent;
+  border-bottom: 10px solid var(--color-brand-white);
+  position: absolute;
+  content: "";
+  box-shadow: inset 0 0 1px #bec0c1;
+  bottom: -27px;
+  right: auto;
+  left: auto;
 }
 
 .copy-code-button {
-  position: absolute;
   background: url(../img/copy.png) no-repeat center right/contain;
-  width: 24px;
-  height: 14px;
-  right: 3.2rem;
-  top: 12px;
-  display: none;
+  width: 13px;
+  height: 16px;
   cursor: pointer;
   font-family: "Source Sans Pro", sans-serif;
   color: var(--color-brand-gray4);
-  z-index: 1;
+  margin-left: 0.5rem;
+  margin-right: 0.5rem;
 }
 
 a.copy-code-button:focus,
 a.copy-code-button:hover {
   color: var(--color-brand-gray4);
 }
 
-.doc .listingblock:hover .copy-code-button {
-  display: block;
-}
 
 .copy-code-button:hover::after {
   content: attr(data-title);
   color: var("--color-brand-gray4");
-  font-size: 14px;
+  font-size: var(--font-base);
   font-weight: var(--weight-light);
   line-height: 1;
   text-transform: capitalize;
   position: absolute;
   bottom: -53px;
-  right: -100%;
-  left: -100%;
-  margin: auto;
+  right: -30%;
+  left: auto;
+  margin: 0;
   padding: 5px;
   text-align: center;
   box-shadow: 0 3px 6px rgba(0, 0, 0, 0.06);
   background: var(--color-brand-white);
   border: 1px solid var(--color-brand-gray7);
   box-sizing: border-box;
   border-radius: 3px;
-  /* min-width: 90px; */
+  min-width: 80px;
   font-family: "Source Sans Pro", sans-serif;
 }
 
@@ -68,5 +97,63 @@ a.copy-code-button:hover {
   content: "";
   box-shadow: inset 0 0 1px #bec0c1;
   bottom: -27px;
+  right: auto;
+  left: auto;
+}
+
+
+.doc .listingblock code[data-lang] + .source-type-box {
+  position: absolute;
+  top: 0;
+  right: 0;
+  display: none;
+  align-items: center;
+  z-index: 1;
+  padding-top: 12px;
+}
+
+.doc .listingblock code[data-lang] + .source-type-box .data-source {
+  content: attr(data-lang);
+  color: var("--color-brand-gray1");
+  font-size: 0.75rem;
+  font-weight: var(--weight-normal);
+  letter-spacing: 1px;
+  line-height: 18px;
+  text-transform: uppercase;
+  font-family: "Source Code Pro", sans-serif;
+  padding-right: 0.5rem;
+  border-right: 1px solid var(--color-brand-gray9);
+}
+
+/* .doc .listingblock:hover code[data-lang] + .source-type-box .data-source {
+  display: block;
+} */
+
+.doc .listingblock:hover code[data-lang] + .source-type-box {
+  display: flex;
+}
+
+.doc .listingblock pre .fade-shadow {
+  content: "";
+  display: inline-block;
+  background:
+    transparent
+    linear-gradient(
+      180deg,
+      #f1f7fe0d 0%,
+      #f1f7fe40 18%,
+      #f1f7fe 68%,
+      #f1f7fe 100%
+    )
+    0% 0% no-repeat padding-box;
+  width: 65px;
+  height: 80%;
+  position: absolute;
   right: 0;
+  top: 0;
 }
+
+code.language-console.hljs.shell {
+  white-space: nowrap;
+  overflow-x: auto;
+}
diff --git a/src/css/doc.css b/src/css/doc.css
@@ -575,51 +575,7 @@
 
 */
 
-.doc .listingblock code[data-lang] + .data-source {
-  content: attr(data-lang);
-  color: var("--color-brand-gray1");
-  display: none;
-  font-size: 0.75rem;
-  font-weight: var(--weight-normal);
-  letter-spacing: 1px;
-  line-height: 18px;
-  text-transform: uppercase;
-  position: absolute;
-  top: 12px;
-  right: 4.5rem;
-  font-family: "Source Sans Pro", sans-serif;
-  padding-right: 0.5rem;
-  border-right: 1px solid var(--color-brand-gray9);
-}
-
-.doc .listingblock:hover code[data-lang] + .data-source {
-  display: block;
-}
 
-.doc .listingblock pre .fade-shadow {
-  content: "";
-  display: inline-block;
-  background:
-    transparent
-    linear-gradient(
-      180deg,
-      #f1f7fe0d 0%,
-      #f1f7fe40 18%,
-      #f1f7fe 68%,
-      #f1f7fe 100%
-    )
-    0% 0% no-repeat padding-box;
-  width: 65px;
-  height: 80%;
-  position: absolute;
-  right: 0;
-  top: 0;
-}
-
-code.language-console.hljs.shell {
-  white-space: nowrap;
-  overflow-x: auto;
-}
 
 .doc .dlist {
   margin: 1.5rem 0;
diff --git a/src/img/awesome-github.svg b/src/img/awesome-github.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="15.601" viewBox="0 0 16 15.601"><path d="M5.352,13.124c0,.065-.074.116-.168.116S5,13.2,5,13.124s.074-.116.168-.116S5.352,13.05,5.352,13.124Zm-1-.145c-.023.065.042.139.139.158a.151.151,0,0,0,.2-.065c.019-.065-.042-.139-.139-.168A.166.166,0,0,0,4.348,12.979Zm1.426-.055c-.094.023-.158.084-.148.158s.094.106.19.084.158-.084.148-.148S5.868,12.914,5.774,12.924ZM7.9.563A7.735,7.735,0,0,0,0,8.433,8.087,8.087,0,0,0,5.468,16.15c.413.074.558-.181.558-.39s-.01-1.3-.01-1.981c0,0-2.258.484-2.732-.961,0,0-.368-.939-.9-1.181,0,0-.739-.506.052-.5a1.7,1.7,0,0,1,1.245.832,1.705,1.705,0,0,0,2.352.674,1.793,1.793,0,0,1,.516-1.087c-1.8-.2-3.623-.461-3.623-3.565a2.445,2.445,0,0,1,.761-1.9A3.048,3.048,0,0,1,3.774,3.9C4.448,3.695,6,4.775,6,4.775a7.621,7.621,0,0,1,4.052,0S11.6,3.692,12.277,3.9a3.046,3.046,0,0,1,.084,2.19,2.507,2.507,0,0,1,.832,1.9c0,3.113-1.9,3.361-3.7,3.565a1.908,1.908,0,0,1,.548,1.5c0,1.087-.01,2.432-.01,2.7,0,.21.148.465.558.39A8.013,8.013,0,0,0,16,8.433,7.91,7.91,0,0,0,7.9.563ZM3.135,11.688c-.042.032-.032.106.023.168s.126.074.168.032.032-.106-.023-.168S3.177,11.646,3.135,11.688Zm-.348-.261c-.023.042.01.094.074.126A.1.1,0,0,0,3,11.53c.023-.042-.01-.094-.074-.126S2.81,11.395,2.787,11.427Zm1.045,1.148c-.052.042-.032.139.042.2s.168.084.21.032.023-.139-.042-.2S3.874,12.524,3.832,12.575ZM3.465,12.1c-.052.032-.052.116,0,.19s.139.106.181.074a.147.147,0,0,0,0-.2C3.6,12.092,3.516,12.059,3.465,12.1Z" transform="translate(0 -0.563)" fill="#73768a"/></svg>
diff --git a/src/js/07-copy-to-clipboard.js b/src/js/07-copy-to-clipboard.js
@@ -8,10 +8,12 @@
       viewSourceLink.href = codeBlock.dataset.sourceUrl
       viewSourceLink.className = 'view-source-button'
       viewSourceLink.target = '_blank'
-      viewSourceLink.dataset.title = 'View Source'
+      viewSourceLink.dataset.title = 'View On Github'
       viewSourceLink.appendChild(document.createTextNode('View'))
     }
-
+    // console.log(codeBlock)
+    var sourceTypeBox = document.createElement('div')
+    sourceTypeBox.className = 'source-type-box'
     var copyButton = document.createElement('a')
     copyButton.className = 'copy-code-button'
     //copyButton.type = 'button'
@@ -45,9 +47,10 @@
       }
     })
     var pre = codeBlock.parentNode
-    pre.appendChild(dataSource)
-    if (viewSourceLink) pre.appendChild(viewSourceLink)
-    pre.appendChild(copyButton)
+    pre.appendChild(sourceTypeBox)
+    sourceTypeBox.appendChild(dataSource)
+    if (viewSourceLink) sourceTypeBox.appendChild(viewSourceLink)
+    sourceTypeBox.appendChild(copyButton)
     pre.appendChild(fadeShadow)
   })
 })()
