3.0.2

Author: benhatsor

full.css

@@ -522,25 +522,10 @@ body.notransition .live-view.file-open {
   z-index: 999;
 }
 
-.bookmark::after {
-  content: '';
-  position: absolute;
-  left: 45px;
-  bottom: 0;
-  height: 100vh;
-  width: 10px;
-  cursor: default;
-  z-index: -1;
-}
-
 .bookmark.visible {
   box-shadow: 1px 2px 6px 0px rgb(0 0 0 / 5%);
 }
 
-.bookmark.visible::after {
-  pointer-events: none;
-}
-
 .bookmark:active {
   background: hsl(228deg 16% 10%);
 }
@@ -572,10 +557,25 @@ body.scroll-enabled .bookmark {
               .4s var(--cubic-function) padding;
 }
 
+.sidebar-toggle::after {
+  content: '';
+  position: absolute;
+  left: 45px;
+  bottom: 0;
+  height: 100vh;
+  width: 10px;
+  cursor: text;
+  z-index: -1;
+}
+
 .sidebar-toggle.visible {
   left: -1px;
 }
 
+.sidebar-toggle.visible::after {
+  pointer-events: none;
+}
+
 .live-toggle.file-open + .sidebar-toggle,
 body.embed .sidebar-toggle {
   display: none;
@@ -628,9 +628,12 @@ body.expanded .sidebar-toggle svg .left {
   box-shadow: 2px 5px 6px 0px rgb(0 0 0 / 9%);
 }
 
-.live-view.visible ~ .live-toggle:hover,
-.live-view.file-open ~ .live-toggle:hover {
+.live-view.visible ~ .live-toggle:hover {
   width: 136px;
+  transition-delay: .22s;
+}
+
+.live-view.file-open ~ .live-toggle:hover {
   width: 97px;
   transition-delay: .22s;
 }
@@ -1123,14 +1126,18 @@ body:not(.mobile) .sidebar .header .title .branch-icon:active {
 .sidebar .header .search-screen .clear {
   opacity: 0;
   pointer-events: none;
-  transition: none;
+  transition: .18s var(--ease-function) transform;
 }
 
 .sidebar .header .search-screen .clear.visible {
   opacity: 1;
   pointer-events: auto;
 }
 
+.sidebar .header:not(.searching) .search-screen .clear.visible {
+  transform: rotate(-45deg);
+}
+
 
 .sidebar .header.searching .roundbutton.add,
 .sidebar .header.searching .title-screen {

full.html

@@ -92,6 +92,10 @@
 
   <div class="bookmark live-toggle">
     <div class="buttons">
+      <svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24" class="popout">
+        <path d="M0 0h24v24H0z" fill="none"></path>
+        <path d="M18 19H6c-.55 0-1-.45-1-1V6c0-.55.45-1 1-1h5c.55 0 1-.45 1-1s-.45-1-1-1H5c-1.11 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2v-6c0-.55-.45-1-1-1s-1 .45-1 1v5c0 .55-.45 1-1 1zM14 4c0 .55.45 1 1 1h2.59l-9.13 9.13c-.39.39-.39 1.02 0 1.41.39.39 1.02.39 1.41 0L19 6.41V9c0 .55.45 1 1 1s1-.45 1-1V4c0-.55-.45-1-1-1h-5c-.55 0-1 .45-1 1z" fill="currentColor"></path>
+      </svg>
       <svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24" class="share">
         <path d="M0 0h24v24H0z" fill="none"></path>
         <path d="M18 16.08c-.76 0-1.44.3-1.96.77L8.91 12.7c.05-.23.09-.46.09-.7s-.04-.47-.09-.7l7.05-4.11c.54.5 1.25.81 2.04.81 1.66 0 3-1.34 3-3s-1.34-3-3-3-3 1.34-3 3c0 .24.04.47.09.7L8.04 9.81C7.5 9.31 6.79 9 6 9c-1.66 0-3 1.34-3 3s1.34 3 3 3c.79 0 1.5-.31 2.04-.81l7.12 4.16c-.05.21-.08.43-.08.65 0 1.61 1.31 2.92 2.92 2.92s2.92-1.31 2.92-2.92-1.31-2.92-2.92-2.92z" fill="currentColor"></path>
@@ -100,10 +104,6 @@
         <path d="M0 0h24v24H0z" fill="none"></path>
         <path d="M16.59,9H15V4c0-0.55-0.45-1-1-1h-4C9.45,3,9,3.45,9,4v5H7.41c-0.89,0-1.34,1.08-0.71,1.71l4.59,4.59 c0.39,0.39,1.02,0.39,1.41,0l4.59-4.59C17.92,10.08,17.48,9,16.59,9z M5,19c0,0.55,0.45,1,1,1h12c0.55,0,1-0.45,1-1s-0.45-1-1-1H6 C5.45,18,5,18.45,5,19z" fill="currentColor" class="left"></path>
       </svg>
-      <svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24" class="expand" style="display: none">
-        <path d="M0 0h24v24H0z" fill="none"></path>
-        <path d="M21,8.59V4c0-0.55-0.45-1-1-1h-4.59c-0.89,0-1.34,1.08-0.71,1.71l1.59,1.59l-10,10l-1.59-1.59C4.08,14.08,3,14.52,3,15.41 V20c0,0.55,0.45,1,1,1h4.59c0.89,0,1.34-1.08,0.71-1.71l-1.59-1.59l10-10l1.59,1.59C19.92,9.92,21,9.48,21,8.59z" fill="currentColor"></path>
-      </svg>
       <svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24" class="arrow">
         <path d="M0 0h24v24H0z" fill="none"></path>
         <path d="M8.7 15.9L4.8 12l3.9-3.9c.39-.39.39-1.01 0-1.4-.39-.39-1.01-.39-1.4 0l-4.59 4.59c-.39.39-.39 1.02 0 1.41l4.59 4.6c.39.39 1.01.39 1.4 0 .39-.39.39-1.01 0-1.4zm6.6 0l3.9-3.9-3.9-3.9c-.39-.39-.39-1.01 0-1.4.39-.39 1.01-.39 1.4 0l4.59 4.59c.39.39.39 1.02 0 1.41l-4.59 4.6c-.39.39-1.01.39-1.4 0-.39-.39-.39-1.01 0-1.4z" fill="currentColor" class="right"></path>

live-view/live-view.js

@@ -605,6 +605,42 @@ if (isMobile) {
     });
 
   });
+  
+  liveToggle.querySelector('.popout').addEventListener('click', () => {
+    
+    // pop out live view to new window
+    
+    
+    // get live view URL
+    const liveViewURL = livePath +'?'+ workerClientId +'/';
+    
+    // open a new window with live view URL
+    window.open(liveViewURL, '_blank');
+    
+    
+    // close inline live view
+    
+    liveViewToggle = !liveViewToggle;
+
+    // clear live view
+    liveView.innerHTML = '';
+    
+    // show loader
+    liveView.classList.remove('loaded');
+    
+    
+    // don't transition live view
+    liveView.classList.add('notransition');
+
+    // hide live view
+    liveView.classList.remove('visible');
+
+    // restore transition on next frame
+    onNextFrame(() => {
+      liveView.classList.remove('notransition');
+    });
+    
+  });
 
 
   document.addEventListener('keydown', handleMetaP);

worker/client-channel.js

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