INTRODUCING IMPROVED CODE PREVIEW

pytgcalls · Oct 29, 2023 · 40a4bc8 · 40a4bc8
1 parent aba9071
commit 40a4bc8
Show file tree

Hide file tree

Showing 4 changed files with 105 additions and 24 deletions.
diff --git a/src/app/main.parser.js b/src/app/main.parser.js
@@ -218,6 +218,8 @@ class SourceParser {
       newElement.appendChild(hashtagRef);
     } else if (element.tagName.toUpperCase() == 'REF-SHI') {
       newElement.addEventListener('click', () => {
+        const src = 'https://github.com/pytgcalls/pytgcalls/tree/master/' + element.getAttribute('url');
+
         const closeButton = document.createElement('div');
         closeButton.classList.add('close-button');
         closeButton.addEventListener('click', () => {
@@ -229,13 +231,38 @@ class SourceParser {
         closeButton.appendChild(document.createElement('div'));
         closeButton.appendChild(document.createElement('div'));
 
+        const urlBarGithub = document.createElement('img');
+        urlBarGithub.classList.add('icon');
+        urlBarGithub.src = '/src/assets/github.svg';
+        const urlBarText = document.createElement('div');
+        urlBarText.classList.add('url');
+        urlBarText.textContent = src;
+        const urlBarOpenImage = document.createElement('img');
+        urlBarOpenImage.classList.add('icon', 'open');
+        urlBarOpenImage.src = '/src/assets/uprightfromsquare.svg';
+        const urlBarOpen = document.createElement('a');
+        urlBarOpen.classList.add('link');
+        urlBarOpen.target = '_blank';
+        urlBarOpen.href = src;
+        urlBarOpen.appendChild(urlBarOpenImage);
+        const urlBar = document.createElement('div');
+        urlBar.classList.add('url-bar');
+        urlBar.appendChild(urlBarGithub);
+        urlBar.appendChild(urlBarText);
+        urlBar.appendChild(urlBarOpen);
+
+        const topBar = document.createElement('div');
+        topBar.classList.add('top-bar');
+        topBar.appendChild(closeButton);
+        topBar.appendChild(urlBar);
+
         const codePreview = document.createElement('div');
         codePreview.classList.add('code-preview', 'is-loading');
         codePreview.appendChild(utils.createLoadingItem());
 
         const fullscreenCodePreview = document.createElement('div');
         fullscreenCodePreview.classList.add('fs-code-preview');
-        fullscreenCodePreview.appendChild(closeButton);
+        fullscreenCodePreview.appendChild(topBar);
         fullscreenCodePreview.appendChild(codePreview);
         document.body.appendChild(fullscreenCodePreview);
 

diff --git a/src/assets/github.svg b/src/assets/github.svg
diff --git a/src/assets/uprightfromsquare.svg b/src/assets/uprightfromsquare.svg
diff --git a/src/style/main.css b/src/style/main.css
@@ -196,6 +196,12 @@ body .fs-code-preview {
   box-sizing: border-box;
 }
 
+@media screen and (max-width: 600px) {
+  body .fs-code-preview {
+    padding: 15px;
+  }
+}
+
 body .fs-code-preview:not(.disappear) {
   animation: 0.4s appearFsCodePreview cubic-bezier(1, 0.05, 0, 0.93);
 }
@@ -216,62 +222,111 @@ body .fs-code-preview.disappear {
   }
 }
 
-body .fs-code-preview .close-button {
-  height: 47px;
-  width: 45px;
-  position: relative;
-  cursor: pointer;
+body .fs-code-preview .top-bar {
+  display: flex;
+  align-items: center;
+  gap: 20px;
 }
 
-body .fs-code-preview:not(.disappear) .close-button {
-  animation: 0.4s appearCloseButton cubic-bezier(1, 0.05, 0, 0.93);
+body .fs-code-preview:not(.disappear) .top-bar {
+  animation: 0.4s appearTopBar cubic-bezier(1, 0.05, 0, 0.93);
 }
 
-@keyframes appearCloseButton {
+@keyframes appearTopBar {
   from {
     transform: translateY(-100%);
     opacity: 0;
   }
 }
 
-body .fs-code-preview.disappear .close-button {
-  animation: 0.4s disappearCloseButton forwards;
+body .fs-code-preview.disappear .top-bar {
+  animation: 0.4s disappearTopBar forwards;
 }
 
-@keyframes disappearCloseButton {
+@keyframes disappearTopBar {
   to {
     transform: translateY(-100%);
     opacity: 0;
   }
 }
 
-body .fs-code-preview .close-button div {
+body .fs-code-preview .top-bar .close-button {
+  height: 43px;
+  width: 45px;
+  position: relative;
+  cursor: pointer;
+}
+
+body .fs-code-preview .top-bar .close-button div {
   height: 5px;
   width: 50px;
   background: white;
   border-radius: 10px;
 }
 
-body .fs-code-preview .close-button div:first-child {
+body .fs-code-preview .top-bar .close-button div:first-child {
   transform: rotate(45deg) translateY(16px) translateX(12px);
 }
 
-body .fs-code-preview .close-button div:nth-child(2) {
+body .fs-code-preview .top-bar .close-button div:nth-child(2) {
   transform: rotate(-45deg) translateY(8px) translateX(-12px);
 }
 
+body .fs-code-preview .top-bar .url-bar {
+  background: #1e1e1e;
+  flex: 1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 100%;
+  border-radius: 10px;
+  border: 1px solid rgba(255, 255, 255, 0.16);
+  gap: 15px;
+  overflow: hidden;
+  padding-inline: 12px;
+}
+
+body:not(.disable-blur) .fs-code-preview .top-bar .url-bar {
+  background: rgba(30, 30, 30, 0.22);
+  backdrop-filter: blur(20px);
+}
+
+body .fs-code-preview .top-bar .url-bar .icon {
+  height: 24px;
+  width: 24px;
+  filter: invert(0.8);
+}
+
+body .fs-code-preview .top-bar .url-bar a {
+  display: flex;
+}
+
+body .fs-code-preview .top-bar .url-bar .url {
+  flex: 1;
+  color: #FFFFFF;
+  font-size: 18px;
+  user-select: text;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
 body .fs-code-preview .code-preview {
   border: 1px solid rgba(255, 255, 255, 0.16);
-  box-shadow: 0px 0px 16px 7px #000000;
   flex: 1;
   background: #1e1e1e;
   border-radius: 10px;
   padding: 10px;
   box-sizing: border-box;
   overflow-y: auto;
+  user-select: text;
   color: #FFFFFF;
 }
 
+body:not(.disable-blur) .fs-code-preview .code-preview {
+  background: rgba(30, 30, 30, 0.22);
+  backdrop-filter: blur(20px);
+}
+
 @supports (overflow-y: overlay) {
   body .fs-code-preview .code-preview {
     overflow-y: overlay;
@@ -302,14 +357,7 @@ body .fs-code-preview.disappear .code-preview {
 
 body .fs-code-preview .code-preview:not(.is-loading) .spacer {
   display: inline-block;
-  width: 0px;
-  animation: 0.4s updateSpacer 0.1s forwards;
-}
-
-@keyframes updateSpacer {
-  to {
-    width: calc(10px * var(--id));
-  }
+  width: calc(10px * var(--id));
 }
 
 body .fs-code-preview .code-preview.is-loading {