Format launchpad process list for mobile

nolanpro · Jun 6, 2024 · May 23, 2024 · May 23, 2024 · May 27, 2024 · May 28, 2024
commit a1d950672ae266120e52f543452450aaeef7906e
diff --git a/ProcessMaker/Helpers/MobileHelper.php b/ProcessMaker/Helpers/MobileHelper.php
@@ -13,4 +13,9 @@ public static function isMobile($userAgent)
 
         return false;
     }
+
+    public static function detectMobile()
+    {
+        return isset($_SERVER['HTTP_USER_AGENT']) && self::isMobile($_SERVER['HTTP_USER_AGENT']);
+    }
 }
diff --git a/ProcessMaker/Http/Controllers/ProcessesCatalogueController.php b/ProcessMaker/Http/Controllers/ProcessesCatalogueController.php
@@ -5,12 +5,13 @@
 use Illuminate\Http\Request;
 use Illuminate\Support\Facades\Auth;
 use ProcessMaker\Events\ScreenBuilderStarting;
+use ProcessMaker\Helpers\MobileHelper;
 use ProcessMaker\Http\Controllers\Controller;
 use ProcessMaker\Managers\ScreenBuilderManager;
-use ProcessMaker\Models\Process;
 use ProcessMaker\Models\Bookmark;
-use ProcessMaker\Models\ProcessLaunchpad;
+use ProcessMaker\Models\Process;
 use ProcessMaker\Models\ProcessCategory;
+use ProcessMaker\Models\ProcessLaunchpad;
 use ProcessMaker\Traits\HasControllerAddons;
 
 /**
@@ -22,7 +23,7 @@
 class ProcessesCatalogueController extends Controller
 {
     use HasControllerAddons;
-    
+
     public function index(Request $request, Process $process = null)
     {
         $manager = app(ScreenBuilderManager::class);
@@ -33,6 +34,13 @@ public function index(Request $request, Process $process = null)
             $process->launchpad = ProcessLaunchpad::getLaunchpad(true, $process->id);
             $process->bookmark_id = Bookmark::getBookmarked(true, $process->id, $currentUser['id']);
         }
+
+        if (MobileHelper::detectMobile()) {
+            $title = __('Process Browser');
+
+            return view('processes-catalogue.mobile', compact('title', 'process', 'currentUser', 'manager'));
+        }
+
         return view('processes-catalogue.index', compact('process', 'currentUser', 'manager'));
     }
 }
diff --git a/resources/js/processes-catalogue/components/CardProcess.vue b/resources/js/processes-catalogue/components/CardProcess.vue
@@ -154,10 +154,16 @@ export default {
 };
 </script>
 
-<style>
+<style scoped lang="scss">
+
+@import '~styles/variables';
 .processList {
   display: flex;
   flex-wrap: wrap;
+
+  @media (max-width: $lp-breakpoint) {
+    display: block;
+  }
 }
 .text-custom {
   color: #1572C2;

diff --git a/resources/js/processes-catalogue/components/ProcessesCatalogue.vue b/resources/js/processes-catalogue/components/ProcessesCatalogue.vue
@@ -6,24 +6,37 @@
       :process="selectedProcess ? selectedProcess.name : ''"
       :template="guidedTemplates ? 'Guided Templates' : ''"
     />
-    <div class="d-flex">
-      <div class="menu">
-        <span class="pl-3 menu-title"> {{ $t('Process Browser') }} </span>
-        <MenuCatologue
-          ref="categoryList"
-          title="Available Processes"
-          preicon="fas fa-play-circle"
-          class="mt-3"
-          show-bookmark="true"
-          :category-count="categoryCount"
-          :data="listCategories"
-          :from-process-list="fromProcessList"
-          :select="selectCategorie"
-          :filter-categories="filterCategories"
-          :permission="permission"
-          @wizardLinkSelect="wizardTemplatesSelected"
-          @addCategories="addCategories"
-        />
+    <div class="main">
+      <div class="menu" :class="{ 'menu-open' : showMenu }">
+        <div class="container-1">
+          <div class="container-2">
+            <span class="pl-3 menu-title"> {{ $t('Process Browser') }} </span>
+            <MenuCatologue
+              ref="categoryList"
+              title="Available Processes"
+              preicon="fas fa-play-circle"
+              class="mt-3"
+              show-bookmark="true"
+              :category-count="categoryCount"
+              :data="listCategories"
+              :from-process-list="fromProcessList"
+              :select="selectCategorie"
+              :filter-categories="filterCategories"
+              :permission="permission"
+              @wizardLinkSelect="wizardTemplatesSelected"
+              @addCategories="addCategories"
+              @selectedCategoryName="selectedCategoryName = $event"
+            />
+          </div>
+          <div class="mobile-slide-close" v-if="showMenu">
+            <b-button variant="secondary" @click="showMenu = false">
+              <i class="fa fa-times"></i>
+            </b-button>
+          </div>
+        </div>
+      </div>
+      <div class="slide-control">
+        <a href="#" @click="showMenu = !showMenu">M</a>
       </div>
       <div class="processes-info">
         <div
@@ -33,6 +46,13 @@
           <CatalogueEmpty />
         </div>
         <div v-else>
+          <div class="mobile-menu-control">
+            <span @click="showMenu = !showMenu">
+              <i class="fa fa-bars"></i>
+              {{ selectedCategoryName }}
+            </span>
+          </div>
+
           <CardProcess
             v-if="showCardProcesses && !showWizardTemplates && !showProcess"
             :key="key"
@@ -83,6 +103,9 @@ export default {
   props: ["permission", "isDocumenterInstalled", "currentUserId", "process", "currentUser"],
   data() {
     return {
+      showMenu: false,
+      selectedCategoryName: '',
+      isMobile: window.screen.width < 650,
       listCategories: [],
       defaultOptions: [
         {
@@ -126,6 +149,19 @@ export default {
         this.$refs.categoryList.selectTemplateItem();
       }
     }, 500);
+
+    // Show the menu by default when not on mobile
+    if (!this.isMobile) {
+      this.showMenu = true;
+    }
+  },
+  watch: {
+    selectedCategoryName() {
+      // Only hide the menu automatically if we are on mobile
+      if (this.isMobile) {
+        this.showMenu = false;
+      }
+    }
   },
   methods: {
     /**
@@ -295,12 +331,90 @@ export default {
 };
 </script>
 
-<style scoped>
+<style scoped lang="scss">
+@import '~styles/variables';
+
+
+@media (max-width: $lp-breakpoint) {
+  .breadcrum-main {
+    display: none;
+  }
+}
+
+.main {
+  display: flex;
+
+  @media (max-width: $lp-breakpoint) {
+      display: block;
+  }
+}
+
 .menu {
-  min-width: 304px;
+  width: 0px;
+  flex: 0 0 0px;
   height: calc(100vh - 145px);
-  overflow-y: auto;
+  overflow: hidden;
   margin-top: 15px;
+  transition: width 0.2s, flex 0.2s;
+
+  @media (max-width: $lp-breakpoint) {
+    position: absolute;
+    z-index: 4; // above pagination
+    display: flex;
+    margin-top: 0;
+  }
+
+  .container-1 {
+    // width: 315px;
+    display: flex;
+    .container-2 {
+      background-color: #F7F9FB;
+      border-right: 2px solid rgba(0, 0, 0, 0.1);
+      flex: 0 0 315px;
+    }
+
+    .mobile-slide-close {
+      display: none;
+      padding-left: 10px;
+      padding-top: 10px;
+      @media (max-width: $lp-breakpoint) {
+        display: block;
+      }
+    }
+
+  }
+}
+.slide-control {
+  flex: 0 0 10px;
+  border-right: 1px solid rgba(0, 0, 0, 0.1);
+  background-color: pink;
+
+  @media (max-width: $lp-breakpoint) {
+    display: none;
+  }
+}
+
+.mobile-menu-control {
+  display: none;
+  color: #6A7887;
+  font-size: 1.3em;
+  margin-top: 10px;
+  i {
+    margin-right: 3px;
+  }
+  @media (max-width: $lp-breakpoint) {
+    display: block;
+  }
+}
+
+.menu-open {
+  width: 315px;
+  flex: 0 0 315px;
+
+  @media (max-width: $lp-breakpoint) {
+    width: 365px;
+    flex: 0 0 365px;
+  }
 }
 .menu-title {
   color: #556271;
@@ -309,11 +423,19 @@ export default {
   font-weight: 600;
   line-height: 46.08px;
   letter-spacing: -0.44px;
+
+  @media (max-width: $lp-breakpoint) {
+    display: none;
+  }
 }
 .processes-info {
   width: 100%;
   margin-right: 16px;
   height: calc(100vh - 145px);
   padding-left: 32px;
+
+  @media (max-width: $lp-breakpoint) {
+    padding-left: 0;
+  }
 }
 </style>
diff --git a/resources/js/processes-catalogue/components/menuCatologue.vue b/resources/js/processes-catalogue/components/menuCatologue.vue
@@ -3,6 +3,7 @@
     <SearchCategories
       ref="searchCategory"
       :filter-pmql="onFilter"
+      class="hide-on-mobile"
     />
     <div
       v-b-toggle.category-menu
@@ -48,6 +49,7 @@
         </p>
       </b-list-group>
     </b-collapse>
+    <div class="hide-on-mobile">
     <hr class="my-12">
     <div
       v-b-toggle.collapse-3
@@ -74,6 +76,7 @@
     <b-collapse
       id="collapse-3"
       visible
+      class="hide-on-mobile"
     >
       <b-list-group>
         <b-list-group-item
@@ -88,6 +91,7 @@
         </b-list-group-item>
       </b-list-group>
     </b-collapse>
+    </div>
 
     <select-template-modal
       ref="addProcessModal"
@@ -168,6 +172,14 @@ export default {
       this.selectDefault();
     }
   },
+  watch: {
+    selectedProcessItem: {
+      deep: true,
+      handler: function () {
+        this.$emit('selectedCategoryName', this.selectedProcessItem?.name);
+      },
+    }
+  },
   methods: {
     /**
      * Adding categories
@@ -256,6 +268,7 @@ export default {
 
 <style lang="scss" scoped>
 @import url("../../../sass/_scrollbar.scss");
+@import "~styles/variables";
 i {
   font-size: 20px;
   color: #6a7888;
@@ -313,4 +326,10 @@ i {
   padding: 12px 18px;
   gap: 16px;
 }
+
+.hide-on-mobile {
+  @media (max-width: $lp-breakpoint) {
+    display: none;
+  }
+}
 </style>