FOUR-14390 New design of Process Info (UI Design) Part 1

resources/js/processes-catalogue/components/CardProcess.vue

@@ -92,9 +92,7 @@ export default {
       renderKey: 0,
       showMoreVisible: false,
       cardMessage: "show-more",
-      switchMenu: null,
-      flagMenu: true,
-
+      sumHeight: 0,
     };
   },
   watch: {
@@ -111,7 +109,6 @@ export default {
     },
   },
   mounted() {
-    this.switchMenu = this.categoryId;
     this.loadCard(()=>{
       this.$nextTick(()=>{
           const listCard = document.querySelector(".processes-info");
@@ -142,7 +139,13 @@ export default {
           this.renderKey = this.renderKey + 1;
           callback?.();
           const container =  document.querySelector(".processes-info");
-          container.scrollTop = container.scrollTop - 60;
+          if(!callback) {
+            this.$nextTick(() => {
+                if((container.scrollTop+container.clientHeight)>=container.scrollHeight-5){
+                  container.scrollTop = container.scrollTop - 1050;
+                } 
+            });
+          } 
         });
     },
     /**

resources/js/processes-catalogue/components/MiniPieChart.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="chart">
     <div class="pie" :style="style"></div>
-    <div>{{ count.toLocaleString() }} {{ name }}</div>
+    <div>{{ percent.toLocaleString() }}% {{ name }}</div>
   </div>
 </template>
 

resources/js/processes-catalogue/components/ProcessCollapseInfo.vue

@@ -1,14 +1,19 @@
 <template>
   <div id="processCollapseInfo">
     <div id="processData">
+      <process-header-start
+        :process="process"
+        @goBack="goBack()"
+      />
       <process-header
         :process="process"
+        :hide-header-options="true"
         @goBack="goBack()"
         @onProcessNavigate="onProcessNavigate"
       />
       <div
         id="collapseProcessInfo"
-        class="collapse show"
+        class="collapse show custom-class"
       >
         <div class="info-collapse">
           <div class="row">
@@ -97,6 +102,7 @@ import ellipsisMenuMixin from "../../components/shared/ellipsisMenuActions";
 import processNavigationMixin from "../../components/shared/processNavigation";
 import ProcessesMixin from "./mixins/ProcessesMixin";
 import ProcessHeader from "./ProcessHeader.vue";
+import ProcessHeaderStart from "./ProcessHeaderStart.vue";
 
 export default {
   components: {
@@ -108,6 +114,7 @@ export default {
     ProcessesCarousel,
     WizardHelperProcessModal,
     ProcessHeader,
+    ProcessHeaderStart,
   },
   mixins: [ProcessesMixin, ellipsisMenuMixin, processNavigationMixin],
   props: ["process", "currentUserId"],
@@ -160,7 +167,9 @@ export default {
     display: none;
   }
 }
-
+.custom-class {
+ margin-top: -13px;
+}
 .wizard-link {
   text-transform: none;
 }

resources/js/processes-catalogue/components/ProcessHeader.vue

@@ -1,76 +1,85 @@
 <template>
   <div>
     <div class="header-mobile">
-        <div class="title">
-          {{ process.name }}
+      <div class="title">
+        {{ process.name }}
+      </div>
+      <div class="start-button">
+        <buttons-start
+          :process="process"
+          :title="$t('Start')"
+          :startEvent="singleStartEvent"
+          :processEvents="processEvents"
+        />
+      </div>
+    </div>
+    <div
+      class="header card-body card-process-info clickable"
+      :style="{
+        borderRadius: infoCollapsed ? '8px 8px 0px 0px' : '8px',
+        borderTopLeftRadius: '8px',
+        borderTopRightRadius: '8px',
+      }"
+      data-toggle="collapse"
+      data-target="#collapseProcessInfo"
+      aria-controls="collapseProcessInfo"
+      :aria-expanded="infoCollapsed"
+      @click="toggleInfoCollapsed()"
+    >
+      <div class="d-flex justify-content-between">
+        <div class="d-flex align-items-center">
+          <template v-if="infoCollapsed">
+            <i class="fas fa-caret-down pl-2 mr-2 custom-color" />
+            <span class="custom-text">
+              {{ $t("Process Info") }}
+            </span>
+          </template>
+          <template v-else>
+            <i class="fas fa-caret-right pl-2 mr-2 custom-color" />
+            <span class="custom-text">
+              {{ $t("Process Info") }}
+            </span>
+          </template>
         </div>
-        <div class="start-button">
+        <div
+          v-if="!hideHeaderOptions"
+          class="d-flex align-items-center"
+        >
+          <div class="card-bookmark mx-2">
+            <bookmark :process="process" />
+          </div>
+          <span class="ellipsis-border">
+            <ellipsis-menu
+              v-if="showEllipsis"
+              :actions="processLaunchpadActions"
+              :data="process"
+              :divider="false"
+              :lauchpad="true"
+              variant="none"
+              @navigate="$emit('onProcessNavigate')"
+              :isDocumenterInstalled="$root.isDocumenterInstalled"
+              :permission="$root.permission"
+            />
+          </span>
           <buttons-start
             :process="process"
-            :title="$t('Start')"
             :startEvent="singleStartEvent"
             :processEvents="processEvents"
           />
         </div>
-      </div>
-      <div
-        class="header card card-body"
-      >
-        <div class="d-flex justify-content-between">
-          <div class="d-flex align-items-center">
-            <i
-              class="fas fa-arrow-left text-secondary mr-2 iconTitle"
-              @click="$emit('goBack')"
-            />
-            <button
-              v-if="enableCollapse"
-              class="btn border-0 header-process title-process-button"
-              type="button"
-              data-toggle="collapse"
-              data-target="#collapseProcessInfo"
-              aria-controls="collapseProcessInfo"
-              :aria-expanded="infoCollapsed"
-              @click="toggleInfoCollapsed()"
-            >
-              <template v-if="infoCollapsed">
-                {{ $t('Process Info') }}
-                <i class="fas fa-angle-up pl-2" />
-              </template>
-              <template v-else>
-                {{ getNameEllipsis() }}
-                <i class="fas fa-angle-down pl-2" />
-              </template>
-            </button>
-            <template v-else>
-              {{ getNameEllipsis() }}
-            </template>
-
-          </div>
-          <div class="d-flex align-items-center">
-            <div class="card-bookmark mx-2">
-              <bookmark :process="process" />
-            </div>
-            <span class="ellipsis-border">
-              <ellipsis-menu
-                v-if="showEllipsis"
-                :actions="processLaunchpadActions"
-                :data="process"
-                :divider="false"
-                :lauchpad="true"
-                variant="none"
-                @navigate="ellipsisNavigate"
-                :isDocumenterInstalled="$root.isDocumenterInstalled"
-                :permission="$root.permission"
-              />
-            </span>
-            <buttons-start
+        <div
+          v-else
+          class="d-flex align-items-center"
+        >
+          <template v-if="!infoCollapsed">
+            <process-counter
               :process="process"
-              :startEvent="singleStartEvent"
-              :processEvents="processEvents"
+              :enable-collapse="enableCollapse"
             />
-          </div>
+          </template>
         </div>
       </div>
+    </div>
   </div>
 </template>
 
@@ -80,33 +89,36 @@ import ProcessesMixin from "./mixins/ProcessesMixin";
 import EllipsisMenu from "../../components/shared/EllipsisMenu.vue";
 import ellipsisMenuMixin from "../../components/shared/ellipsisMenuActions";
 import Bookmark from "./Bookmark.vue";
+import ProcessCounter from "./optionsMenu/ProcessCounter.vue";
 
 export default {
   components: {
     ButtonsStart,
     EllipsisMenu,
     Bookmark,
+    ProcessCounter,
   },
-  mixins: [
-    ProcessesMixin,
-    ellipsisMenuMixin
-  ],
+  mixins: [ProcessesMixin, ellipsisMenuMixin],
   props: {
     process: {
       type: Object,
-      required: true
+      required: true,
     },
     enableCollapse: {
       type: Boolean,
-      default: true
-    }
+      default: true,
+    },
+    hideHeaderOptions: {
+      type: Boolean,
+      default: false,
+    },
   },
   data() {
     return {
       infoCollapsed: true,
       processEvents: [],
       singleStartEvent: null,
-    }
+    };
   },
   mounted() {
     this.getStartEvents();
@@ -127,7 +139,9 @@ export default {
         .get(`process_bookmarks/processes/${this.process.id}/start_events`)
         .then((response) => {
           this.processEvents = response.data.data;
-          const nonWebEntryStartEvents = this.processEvents.filter(e => !("webEntry" in e) || !e.webEntry);
+          const nonWebEntryStartEvents = this.processEvents.filter(
+            (e) => !("webEntry" in e) || !e.webEntry
+          );
           if (nonWebEntryStartEvents.length === 1) {
             this.singleStartEvent = nonWebEntryStartEvents[0].id;
           }
@@ -136,13 +150,13 @@ export default {
           ProcessMaker.alert(err, "danger");
         });
     },
-  }
-}
+  },
+};
 </script>
 
 <style lang="scss" scoped>
 @import url("./scss/processes.css");
-@import '~styles/variables';
+@import "~styles/variables";
 .header {
   @media (max-width: $lp-breakpoint) {
     display: none;
@@ -158,7 +172,10 @@ export default {
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
-    font-size: 1.5em;
+    font-size: 22px;
+    letter-spacing: -0.2;
+    color: #4c545c;
+    font-weight: 400;
   }
 
   @media (max-width: $lp-breakpoint) {
@@ -175,4 +192,30 @@ export default {
 .card-bookmark:hover {
   cursor: pointer;
 }
-</style>
+
+.card-process-info {
+  border-color: #cdddee;
+  border-radius: 8px;
+  background-color: #fff;
+  margin-bottom: 12px;
+  border: 1px solid rgb(205, 221, 238);
+  padding-top: 13px;
+  height: 53px;
+  margin-right: 20px;
+}
+
+.custom-text {
+  font-size: 16px;
+  font-weight: 400;
+  color: #556271;
+  letter-spacing: -0.2;
+}
+
+.custom-color {
+  color: #4c545c;
+}
+
+.clickable {
+  cursor: pointer;
+}
+</style>