feat: add hide icon to topbar and rename rpb to rf

baumrock · Mar 1, 2023 · 7f56583 · 7f56583
1 parent b47f065
commit 7f56583
Show file tree

Hide file tree

Showing 4 changed files with 47 additions and 35 deletions.
diff --git a/RockFrontend.module.php b/RockFrontend.module.php
@@ -106,7 +106,7 @@ public static function getModuleInfo()
   {
     return [
       'title' => 'RockFrontend',
-      'version' => '2.26.0',
+      'version' => '2.27.0',
       'summary' => 'Module for easy frontend development',
       'autoload' => true,
       'singular' => true,

diff --git a/bar/bar.less b/bar/bar.less
@@ -1,7 +1,7 @@
 body.overflow-hidden {
   overflow: hidden;
 }
-#rpb-topbar {
+#rf-topbar {
   position: fixed;
   top: 0;
   left: 0;
@@ -12,7 +12,7 @@ body.overflow-hidden {
   border-radius: 0 0 5px 0;
   display: flex;
 
-  #rpb-logo {
+  #rf-logo {
     height: 20px;
     margin-right: 10px;
   }
@@ -35,13 +35,13 @@ body.overflow-hidden {
     margin: 0 5px;
   }
 }
-body.rpb-preview {
-  #rpb-topbar {
+body.rf-preview {
+  #rf-topbar {
     display: none;
   }
 }
 
-#rpb-device-preview {
+#rf-device-preview {
   position: fixed;
   top: 0;
   left: 0;
@@ -66,7 +66,7 @@ body.rpb-preview {
   align-items: center;
 
   // device toggles
-  .rpb-devices {
+  .rf-devices {
     a {
       padding: 5px 10px;
       border-radius: 5px;

diff --git a/bar/bar.less.css b/bar/bar.less.css
@@ -1,7 +1,7 @@
 body.overflow-hidden {
   overflow: hidden;
 }
-#rpb-topbar {
+#rf-topbar {
   position: fixed;
   top: 0;
   left: 0;
@@ -12,30 +12,30 @@ body.overflow-hidden {
   border-radius: 0 0 5px 0;
   display: flex;
 }
-#rpb-topbar #rpb-logo {
+#rf-topbar #rf-logo {
   height: 20px;
   margin-right: 10px;
 }
-#rpb-topbar a {
+#rf-topbar a {
   color: inherit;
   text-decoration: none;
   border: 0;
 }
-#rpb-topbar a svg {
+#rf-topbar a svg {
   transition: all 0.3s ease;
 }
-#rpb-topbar a:hover svg {
+#rf-topbar a:hover svg {
   transform: scale(1.2);
 }
-#rpb-topbar svg {
+#rf-topbar svg {
   height: 20px;
   width: 20px;
   margin: 0 5px;
 }
-body.rpb-preview #rpb-topbar {
+body.rf-preview #rf-topbar {
   display: none;
 }
-#rpb-device-preview {
+#rf-device-preview {
   position: fixed;
   top: 0;
   left: 0;
@@ -49,13 +49,13 @@ body.rpb-preview #rpb-topbar {
   align-items: center;
   background-image: radial-gradient(circle at center center, transparent, #ffffff), linear-gradient(309deg, rgba(90, 90, 90, 0.05) 0%, rgba(90, 90, 90, 0.05) 50%, rgba(206, 206, 206, 0.05) 50%, rgba(206, 206, 206, 0.05) 100%), linear-gradient(39deg, rgba(13, 13, 13, 0.05) 0%, rgba(13, 13, 13, 0.05) 50%, rgba(189, 189, 189, 0.05) 50%, rgba(189, 189, 189, 0.05) 100%), linear-gradient(144deg, rgba(249, 249, 249, 0.05) 0%, rgba(249, 249, 249, 0.05) 50%, rgba(111, 111, 111, 0.05) 50%, rgba(111, 111, 111, 0.05) 100%), linear-gradient(166deg, rgba(231, 231, 231, 0.05) 0%, rgba(231, 231, 231, 0.05) 50%, rgba(220, 220, 220, 0.05) 50%, rgba(220, 220, 220, 0.05) 100%), linear-gradient(212deg, rgba(80, 80, 80, 0.05) 0%, rgba(80, 80, 80, 0.05) 50%, rgba(243, 243, 243, 0.05) 50%, rgba(243, 243, 243, 0.05) 100%), radial-gradient(circle at center center, #ffffff, #ffffff);
 }
-#rpb-device-preview.show {
+#rf-device-preview.show {
   height: 100%;
 }
-#rpb-device-preview.show iframe {
+#rf-device-preview.show iframe {
   opacity: 1 !important;
 }
-#rpb-device-preview .rpb-devices a {
+#rf-device-preview .rf-devices a {
   padding: 5px 10px;
   border-radius: 5px;
   background-color: white;
@@ -64,21 +64,21 @@ body.rpb-preview #rpb-topbar {
   box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.1);
   transition: all 0.3s ease;
 }
-#rpb-device-preview .rpb-devices a:hover {
+#rf-device-preview .rf-devices a:hover {
   transform: translateY(-2px);
 }
-#rpb-device-preview .iframe-wrapper {
+#rf-device-preview .iframe-wrapper {
   transition: width 1s ease;
   width: 375px;
   height: 100vh;
   display: grid;
   grid-template-rows: 20px auto 1fr 20px;
   gap: 10px;
 }
-#rpb-device-preview .iframe-wrapper > div {
+#rf-device-preview .iframe-wrapper > div {
   text-align: center;
 }
-#rpb-device-preview .iframe-wrapper iframe {
+#rf-device-preview .iframe-wrapper iframe {
   background-color: white;
   box-shadow: 0px 0px 50px 0px rgba(0, 0, 0, 0.1);
   border-radius: 10px;

diff --git a/bar/topbar.php b/bar/topbar.php
@@ -1,6 +1,6 @@
-<div id="rpb-topbar" style="z-index: <?= $z ?>">
+<div id="rf-topbar" style="z-index: <?= $z ?>">
   <a href="https://www.baumrock.com" target=_blank>
-    <img id="rpb-logo" src="<?= $logourl ?>">
+    <img id="rf-logo" src="<?= $logourl ?>">
   </a>
 
   <a href="<?= $pages->get(2)->url ?>">
@@ -22,6 +22,14 @@
       </g>
     </svg>
   </a>
+  <a href="#" class="rf-topbar-hide">
+    <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24">
+      <g fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
+        <path d="m3 3l18 18M10.584 10.587a2 2 0 0 0 2.828 2.83" />
+        <path d="M9.363 5.365A9.466 9.466 0 0 1 12 5c4 0 7.333 2.333 10 7c-.778 1.361-1.612 2.524-2.503 3.488m-2.14 1.861C15.726 18.449 13.942 19 12 19c-4 0-7.333-2.333-10-7c1.369-2.395 2.913-4.175 4.632-5.341" />
+      </g>
+    </svg>
+  </a>
 
   <?php if ($user->isSuperuser()) : ?>
     <a href="<?= $pages->get(2)->url . "setup/template/edit?id=" . $page->template->id ?>">
@@ -35,7 +43,7 @@
     </a>
   <?php endif; ?>
 
-  <a href=/ class="rpb-device-preview">
+  <a href=/ class="rf-device-preview">
     <svg width="100%" height="100%" viewBox="0 0 32 32" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linecap:round;stroke-linejoin:round;">
       <g>
         <g transform="matrix(1,0,0,1,-1,0)">
@@ -57,49 +65,53 @@
   </a>
 
 </div>
-<div id="rpb-device-preview">
+<div id="rf-device-preview">
   <div class="iframe-wrapper">
     <div></div>
-    <div class="rpb-devices">
-      <a href=/ class="rpb-close">
+    <div class="rf-devices">
+      <a href=/ class="rf-close">
         <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24">
           <path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M18 6L6 18M6 6l12 12" />
         </svg>
       </a>
     </div>
     <div>
-      <iframe name="rpb-preview" data-src="<?= $this->wire->input->url ?>">
+      <iframe name="rf-preview" data-src="<?= $this->wire->input->url ?>">
       </iframe>
     </div>
     <div></div>
   </div>
 </div>
 <script>
   (function() {
-    let $bar = document.querySelector("#rpb-topbar");
-    let $preview = document.querySelector("#rpb-device-preview");
+    let $bar = document.querySelector("#rf-topbar");
+    let $preview = document.querySelector("#rf-device-preview");
 
     // we are in the rockfrontend preview iframe
-    if (window.name === 'rpb-preview') {
-      document.querySelector('body').classList.add('rpb-preview');
+    if (window.name === 'rf-preview') {
+      document.querySelector('body').classList.add('rf-preview');
     }
 
     // listen to clicks
     document.addEventListener('click', function(event) {
       let $a = event.target.closest('a');
       if (!$a) return;
-      if ($a.matches('.rpb-device-preview')) {
+      if ($a.matches('.rf-device-preview')) {
         // click on devices icon in bar
         event.preventDefault();
         $preview.classList.toggle('show');
         document.querySelector('body').classList.toggle('overflow-hidden');
         let $iframe = $preview.querySelector('iframe');
         $iframe.setAttribute('src', $iframe.dataset.src);
-      } else if ($a.matches('.rpb-close')) {
+      } else if ($a.matches('.rf-close')) {
         // close preview modal
         event.preventDefault();
         $preview.classList.remove('show');
         document.querySelector('body').classList.remove('overflow-hidden');
+      } else if ($a.matches('.rf-topbar-hide')) {
+        // close preview modal
+        event.preventDefault();
+        $a.closest('#rf-topbar').remove();
       }
     }, false);
   })()