Add lock button for repos

Dev

Author: benhatsor

filebrowser.js

@@ -1719,6 +1719,7 @@ function createNewRepoInHTML() {
       `+ repoIcon +`
       <a class="name" contenteditable="plaintext-only" spellcheck="false" autocorrect="off" autocomplete="off" aria-autocomplete="list" autocapitalize="off" dir="auto"></a>
     </div>
+    `+ lockIcon +`
     <div class="push-wrapper">
       `+ pushIcon +`
     </div>
@@ -1732,6 +1733,21 @@ function createNewRepoInHTML() {
     repoEl.scrollIntoViewIfNeeded();
 
 
+    // add lock button event listener
+    const lockButton = repoEl.querySelector('.lock');
+    let repoPrivate = false;
+    
+    lockButton.addEventListener('click', () => {
+      
+      // toggle lock
+      repoPrivate = lockButton.classList.toggle('locked');
+      
+      // focus repo name
+      repoEl.querySelector('.name').focus();
+      
+    });
+    
+
     // add push button event listener
     const pushWrapper = repoEl.querySelector('.push-wrapper');
 
@@ -1747,7 +1763,7 @@ function createNewRepoInHTML() {
 
     });
 
-    let pushListener = pushWrapper.addEventListener('click', pushNewRepoInHTML);
+    pushWrapper.addEventListener('click', pushNewRepoInHTML);
 
 
     // on next frame
@@ -1774,6 +1790,9 @@ function createNewRepoInHTML() {
         repoEl.querySelector('.name').blur();
         repoEl.querySelector('.name').scrollTo(0, 0);
 
+        // disable lock button
+        lockButton.style.pointerEvents = 'none';
+        
 
         // validate repo name
 
@@ -1811,7 +1830,7 @@ function createNewRepoInHTML() {
 
         // create new repo obj
         const repoObj = createRepoObj((loggedUser + '/' + repoName), 'main', 'main',
-                                      true, null, true, false, true);
+                                      true, null, repoPrivate, false, true);
 
         // add repo obj to modified repos
         addRepoToModRepos(repoObj);
@@ -1833,7 +1852,7 @@ function createNewRepoInHTML() {
 
 
         // push repo asynchronously
-        const newSha = git.createRepo(repoName, true);
+        const newSha = git.createRepo(repoName, repoPrivate);
 
       }
 

full.css

@@ -271,7 +271,7 @@ body.notransition .bottom-wrapper {
 
 .bottom-float .push-wrapper .push-svg {
   position: absolute;
-  left: 11.5px;
+  left: 12.5px;
   transition: .4s var(--cubic-function) left;
 }
 
@@ -1272,10 +1272,51 @@ body:not(.mobile) .sidebar .header .title .branch-icon:active {
   display: none;
 }
 
+.sidebar .repo .lock {
+  margin-right: calc(38px - var(--spacing-1));
+}
+
+.sidebar .repo .lock path {
+  opacity: 1 !important;
+  transition: .18s var(--ease-function) !important;
+}
+
+.sidebar .repo .lock:active #wrapper {
+  opacity: .5;
+}
+
+.sidebar .repo .lock #shackle {
+  stroke: currentColor;
+  stroke-width: 1.58px;
+  stroke-dasharray: 20px;
+  stroke-dashoffset: -3.4px;
+  stroke-linecap: round;
+  will-change: transform;
+}
+
+.sidebar .repo .lock.locked #shackle {
+  stroke-dashoffset: -1.1px;
+  animation: lock-click .14s .124s var(--ease-function);
+}
+
+.sidebar .repo .lock.locked #housing-fill {
+  fill: currentColor;
+}
+
+.sidebar .repo .lock.locked #plug {
+  fill: transparent;
+}
+
+@keyframes lock-click {
+  50% {
+    transform: translateY(0.5px);
+  }
+}
+
 .sidebar .item .push-wrapper {
-  width: 53.5px;
+  width: 53px;
   position: absolute;
-  right: -1.5px;
+  right: -2px;
   display: none;
 }
 
@@ -1895,8 +1936,8 @@ body.mobile.expanded .cube-loader::after {
 
 .push-svg {
   overflow: visible;
-  width: 39.5px;
-  height: 39.5px;
+  width: 38px;
+  height: 38px;
   pointer-events: none;
 }
 .push-svg #push, .push-svg #check {

utils.js

@@ -648,6 +648,20 @@ const plusIcon = '<svg xmlns="http://www.w3.org/2000/svg" height="16" viewBox="0
 
 const arrowIcon = '<svg xmlns="http://www.w3.org/2000/svg" class="arrow" height="24" viewBox="0 0 24 24" width="24"> <path d="M0 0h24v24H0z" fill="none"></path> <path d="M9.29 6.71c-.39.39-.39 1.02 0 1.41L13.17 12l-3.88 3.88c-.39.39-.39 1.02 0 1.41.39.39 1.02.39 1.41 0l4.59-4.59c.39-.39.39-1.02 0-1.41L10.7 6.7c-.38-.38-1.02-.38-1.41.01z" fill="currentColor"></path> </svg>';
 
+const lockIcon = `
+<svg class="lock roundbutton" fill="currentColor" width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+  <g id="wrapper">
+    <g id="shackle-wrapper" transform="matrix(1.33362,0,0,1.20093,-4.00339,-1.60746)">
+      <path id="shackle" d="M9,8.834L9,6C9,4.34 10.34,3 12,3C13.66,3 15,4.34 15,6L15,8.834L9,8.834Z" fill="none"></path>
+    </g>
+    <path id="housing" d="M18.026 8H6c-1.1 0-2 .9-2 2v10c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V10a2.006 2.006 0 0 0-1.974-2ZM18 19c0 .55-.45 1-1 1H7c-.55 0-1-.45-1-1v-8c0-.55.45-1 1-1h10c.55 0 1 .45 1 1v8Z"></path>
+    <path id="housing-fill" d="M18 19c0 .55-.45 1-1 1H7c-.55 0-1-.45-1-1v-8c0-.55.45-1 1-1h10c.55 0 1 .45 1 1v8Zm-6-6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2Z" fill="transparent"></path>
+    <path id="plug" d="M12 13c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2Z"></path>
+    <path id="bounding-box" fill="none" d="M0 0h24v24H0z"></path>
+  </g>
+</svg>
+`;
+
 const pushIcon = `
 <svg class="push-svg" fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 40.92 40.21">
   <g id="Group" transform="translate(-9.08 -8.23)">

worker/client-channel.js

@@ -4,7 +4,7 @@
 
 
 // update worker name when updating worker
-const WORKER_NAME = 'codeit-worker-v518';
+const WORKER_NAME = 'codeit-worker-v521';
 
 
 // internal paths