Merge pull request #109 from codeitcodes/dev

Dev

Author: benhatsor

bottomfloat.js

@@ -98,6 +98,12 @@ floatDownload.addEventListener('click', downloadSelFile);
 if (isMobile) {
 
   cd.on('scroll', checkBottomFloat, false);
+  
+  cd.on('blur', () => {
+    
+    bottomWrapper.classList.remove('hidden');
+    
+  });
 
 }
 

dark-theme.css

@@ -19,6 +19,8 @@ body:not(.mobile) ::-webkit-scrollbar-track:horizontal {
 
 body:not(.mobile) ::-webkit-scrollbar-corner {
   background-color: #2B303B;
+  box-shadow: inset -15px -15px 0 0 #2B303B,
+              inset 1px 1px 0 0 rgba(0,0,0,0.2);
 }
 
 body:not(.mobile) ::-webkit-scrollbar-thumb {

filebrowser.js

@@ -102,6 +102,50 @@ async function renderSidebarHTML() {
     renderBranchMenuHTML();
 
   }
+  
+  
+  // if sidebar title is empty
+  if (sidebarLogo.innerText === '') {
+    
+    if (contents != '') {
+
+      // if repo is owned by logged user
+      if (user === loggedUser) {
+
+        // show repo name and path
+        sidebarLogo.innerText = repoName + contents;
+
+      } else {
+
+        // show username, repo name and path
+        sidebarLogo.innerText = user + '/' + repoName + contents;
+
+      }
+
+    } else if (repo != '') {
+
+      // if repo is owned by logged user
+      if (user === loggedUser) {
+
+        // show repo name
+        sidebarLogo.innerText = repoName;
+
+      } else {
+
+        // show username and repo name
+        sidebarLogo.innerText = user + '/' + repoName;
+
+      }
+
+    } else {
+
+      // show title
+      sidebarLogo.innerText = 'Repositories';
+
+    }
+    
+  }
+
 
   // get items in current tree from git
   resp = await git.getItems(treeLoc);
@@ -424,7 +468,7 @@ async function renderSidebarHTML() {
             if (fileType === 'video') fileIconHTML = videoIcon;
             if (fileType === 'audio') fileIconHTML = audioIcon;
 
-            out += `
+            out = `
             <div class="item file`+ modified +`" sha="`+ file.sha +`">
               <div class="label">
                 `+ fileIconHTML +`
@@ -434,7 +478,7 @@ async function renderSidebarHTML() {
                 `+ pushIcon +`
               </div>
             </div>
-            `;
+            ` + out;
 
           }
 
@@ -535,15 +579,15 @@ async function renderSidebarHTML() {
 
             // render repo
 
-            out += `
+            out = `
             <div class="item repo" ` + ('fullName="' + modRepoName + '"') + `>
               <div class="label">
                 `+ repoIcon +`
                 <a class="name">`+ modRepoName.split('/')[1] +`</a>
               </div>
               `+ arrowIcon +`
             </div>
-            `;
+            ` + out;
 
           }
 
@@ -1542,12 +1586,13 @@ function createNewRepoInHTML() {
         // play push animation
         playPushAnimation(repoEl.querySelector('.push-wrapper'));
 
-        // disable pushing file from HTML
+        // disable pushing repo from HTML
         repoEl.classList.remove('focused');
 
-        // make file name uneditable
+        // make repo name uneditable
         repoEl.querySelector('.name').setAttribute('contenteditable', 'false');
         repoEl.querySelector('.name').blur();
+        repoEl.querySelector('.name').scrollTo(0, 0);
 
 
         // validate repo name
@@ -1703,6 +1748,7 @@ function createNewFileInHTML() {
         // make file name uneditable
         fileEl.querySelector('.name').setAttribute('contenteditable', 'false');
         fileEl.querySelector('.name').blur();
+        fileEl.querySelector('.name').scrollTo(0, 0);
 
 
         // pad file content with random number of invisible chars
@@ -1746,15 +1792,37 @@ function createNewFileInHTML() {
         });
 
         fileEl.querySelector('.name').textContent = fileName;
-
-
-        // change selected file
-        changeSelectedFile(treeLoc.join(), fileContent, fileName, encodeUnicode('\r\n'), getFileLang(fileName),
-                           [0, 0], [0, 0], true);
+        
+        
+        // generate temporary SHA
+        const tempSHA = generateSHA();
+        setAttr(fileEl, 'sha', tempSHA);
 
 
         // open file
 
+        // if previous file selection exists
+        if (selectedFile.sha) {
+      
+          // get previous selection in modifiedFiles array
+          let selectedItem = modifiedFiles[selectedFile.sha];
+      
+          // if previous selection was modified
+          if (selectedItem) {
+      
+            // save previous selection in localStorage
+            updateModFileContent(selectedFile.sha, selectedFile.content);
+            updateModFileCaretPos(selectedFile.sha, selectedFile.caretPos);
+            updateModFileScrollPos(selectedFile.sha, selectedFile.scrollPos);
+      
+          }
+      
+        }
+        
+        // change selected file
+        changeSelectedFile(treeLoc.join(), tempSHA, fileName, encodeUnicode('\r\n'), getFileLang(fileName),
+                           [0, 0], [0, 0], true);
+            
         // if on mobile device
         if (isMobile) {
 
@@ -1826,27 +1894,28 @@ function createNewFileInHTML() {
           message: commitMessage,
           file: commitFile
         };
+        
 
         // push file asynchronously
-        const newSha = await git.push(commit);
+        const newSHA = await git.push(commit);
 
 
-        // update file sha in HTML with new sha from Git
-        setAttr(fileEl, 'sha', newSha);
+        // update file sha in HTML with new sha from git
+        setAttr(fileEl, 'sha', newSHA);
 
         // change selected file
-        changeSelectedFile(treeLoc.join(), newSha, fileName, encodeUnicode('\r\n'), getFileLang(fileName),
+        changeSelectedFile(treeLoc.join(), newSHA, fileName, encodeUnicode('\r\n'), getFileLang(fileName),
                            [0, 0], [0, 0], true);
-
+        
         // Git file is eclipsed (not updated) in browser private cache,
         // so store the updated file in modifiedFiles object for 1 minute after commit
-        if (modifiedFiles[fileContent]) {
+        if (modifiedFiles[tempSHA]) {
 
-          onFileEclipsedInCache(fileContent, newSha, selectedFile);
+          onFileEclipsedInCache(tempSHA, newSHA, selectedFile);
 
         } else {
 
-          onFileEclipsedInCache(false, newSha, selectedFile);
+          onFileEclipsedInCache(false, newSHA, selectedFile);
 
         }
 

full.css

@@ -379,45 +379,41 @@ body.loaded:not(.mobile) .live-view {
   transition: none !important;
 }
 
-.live-view::before {
-  content: '';
-  top: 0;
-  right: 0;
-  bottom: 0;
-  left: 1px;
-  position: fixed;
-  background: #1a1c24;
-  background: #0e0e0e;
-  transition: .18s var(--ease-function) opacity;
-  z-index: 1;
-}
-
-.live-view::after {
+.live-view.visible:not(.loaded)::before,
+.bottom-wrapper.expanded + .live-view:not(.loaded)::before {
   content: '';
   position: fixed;
-  left: 50%;
-  top: 50%;
+  top: 0;
+  left: 0;
+  height: 2px;
+  width: 120px;
+  border-radius: 6px;
+  pointer-events: none;
+  background: var(--rosemary-lighter);
+  transform: translateX(calc(-100% - env(safe-area-inset-left, 0px)));
+  will-change: transform;
   opacity: 0;
-  transform: translate(-50%, -50%);
-  width: var(--spacing-7);
-  height: var(--spacing-7);
-  border-radius: 50%;
-  background: #e06c75;
-  background: hsl(240deg 87% 55%);
-  animation: live-pulse 1s var(--cubic-function) infinite;
-  box-shadow: 0 0 0 15px hsl(240deg 87% 55% / 0%);
-  transition: .18s var(--ease-function) opacity;
+  animation: live-loader .72s .4s var(--cubic-function) infinite,
+             live-visible .4s linear forwards;
   z-index: 1;
 }
 
-.live-view:not(.loaded).loading::after {
-  opacity: 1;
+@keyframes live-loader {
+  from {
+    transform: translateX(calc(-100% - env(safe-area-inset-left, 0px)));
+  }
+  to {
+    transform: translateX(100vw);
+  }
 }
 
-.live-view.loaded::before,
-.live-view.loaded::after {
-  opacity: 0;
-  pointer-events: none;
+@keyframes live-visible {
+  99.99% {
+    opacity: 0;
+  }
+  100% {
+    opacity: 1;
+  }
 }
 
 .live-view.file-open {
@@ -448,18 +444,8 @@ body.notransition .live-view.file-open {
   transition: none;
 }
 
-.live-view.file-open::before,
-.live-view.file-open::after {
-  display: none;
-}
-
-@keyframes live-pulse {
-  from {
-    box-shadow: 0 0 0 0 hsl(240deg 87% 55%);
-  }
-  to {
-    box-shadow: 0 0 0 15px hsl(240deg 87% 55% / 0%);
-  }
+.live-view.file-open::before {
+  content: unset;
 }
 
 .live-view img {
@@ -1225,6 +1211,7 @@ body:not(.mobile) .sidebar .header .title .branch-icon:active {
   outline: none;
   user-select: text;
   -webkit-user-select: text;
+  text-overflow: clip;
   background: hsl(220deg 86% 64% / 9%);
   box-shadow: 0 0 0 2px hsl(223deg 85% 66% / 70%);
   transition: .18s .04s var(--ease-function);
@@ -1553,7 +1540,7 @@ body .sidebar .button:active:not(:hover) {
   font-weight: 500;
 }
 
-body:not(.mobile) .menu .icon:hover {
+body:not(.mobile) .menu .icon:not(:active):hover {
   background: rgba(255,255,255,0.05);
 }