Merge pull request #7020 from ProcessMaker/task/FOUR-16897

Implement New Guided Template Slide Design for the First Slide
ProcessMaker · Jul 24, 2024 · d108b35 · d108b35
2 parents 057ba8d + 1f7f099
commit d108b35
Show file tree

Hide file tree

Showing 6 changed files with 80 additions and 30 deletions.
diff --git a/ProcessMaker/Jobs/SyncGuidedTemplates.php b/ProcessMaker/Jobs/SyncGuidedTemplates.php
@@ -151,6 +151,10 @@ private function importTemplate($template, $config, $guidedTemplateCategoryId)
     private function buildTemplateUrl($config, $templatePath)
     {
         // Build the URL for a template based on the configuration and template path
+        if (empty($templatePath)) {
+            return null;
+        }
+
         return $config['base_url'] .
             $config['template_repo'] . '/' .
             $config['template_branch'] . '/' .
@@ -273,9 +277,11 @@ private function importTemplateAssets($template, $config, $mediaCollectionName,
         // Build asset urls
         $templateIconUrl = $this->buildTemplateUrl($config, $template['assets']['icon']);
         $templateCardBackgroundUrl = $this->buildTemplateUrl($config, $template['assets']['card-background']);
+        $templateListIconUrl = $this->buildTemplateUrl($config, $template['assets']['list-icon']);
         // Import template assets and associate with the media collection
         $this->importMedia($templateIconUrl, 'icon', $mediaCollectionName, $guidedTemplate);
         $this->importMedia($templateCardBackgroundUrl, 'cardBackground', $mediaCollectionName, $guidedTemplate);
+        $this->importMedia($templateListIconUrl, 'listIcon', $mediaCollectionName, $guidedTemplate);
 
         if (!empty($template['assets']['launchpad']['process-card-background'])) {
             $templateProcessCardBackgroundUrl =
@@ -300,7 +306,12 @@ private function importTemplateAssets($template, $config, $mediaCollectionName,
     private function importMedia($assetUrl, $customProperty, $mediaCollectionName, $guidedTemplate)
     {
         // Import a media asset and associate it with the media collection
-        $guidedTemplate->addMediaFromUrl($assetUrl)->withCustomProperties(['media_type' => $customProperty])->toMediaCollection($mediaCollectionName);
+        if (!is_null($assetUrl)) {
+            $guidedTemplate
+                ->addMediaFromUrl($assetUrl)
+                ->withCustomProperties(['media_type' => $customProperty])
+                ->toMediaCollection($mediaCollectionName);
+        }
     }
 
     private function checkForTemplateChanges($template)

diff --git a/ProcessMaker/Models/WizardTemplate.php b/ProcessMaker/Models/WizardTemplate.php
@@ -76,10 +76,12 @@ public function getTemplateMediaAttribute()
         });
         $iconMedia = $this->getMedia($mediaCollectionName, ['media_type' => 'icon'])->first();
         $cardBackgroundMedia = $this->getMedia($mediaCollectionName, ['media_type' => 'cardBackground'])->first();
+        $listIconMedia = $this->getMedia($mediaCollectionName, ['media_type' => 'listIcon'])->first();
 
         return [
             'icon' => !is_null($iconMedia) ? $iconMedia->getFullUrl() : '',
             'cardBackground' => !is_null($cardBackgroundMedia) ? $cardBackgroundMedia->getFullUrl() : '',
+            'listIcon' => !is_null($listIconMedia) ? $listIconMedia->getFullUrl() : '',
             'slides' => $slideUrls,
         ];
     }

diff --git a/resources/js/components/shared/Modal.vue b/resources/js/components/shared/Modal.vue
@@ -13,6 +13,7 @@
     :hide-header="hideHeader"
     :header-class="headerClass"
     :footer-class="footerClass"
+    :content-class="contentClass"
     :size="size"
     :ok-only="okOnly"
     no-close-on-backdrop
@@ -132,7 +133,8 @@
       "requiredInFooter",
       "titleIcon",
       "headerClass",
-      "footerClass"
+      "footerClass",
+      "contentClass"
     ],
     methods: {
       onEvent(name, event) {

diff --git a/resources/js/components/templates/WizardHelperProcessModal.vue b/resources/js/components/templates/WizardHelperProcessModal.vue
@@ -48,7 +48,7 @@ export default {
   font-weight: 400;
 }
 .wizard-details-description {
-  font-size: 16px;
+  font-size: 20px;
 }
 
 .wizard-details-headline {

diff --git a/resources/js/components/templates/WizardTemplateDetails.vue b/resources/js/components/templates/WizardTemplateDetails.vue
@@ -2,40 +2,40 @@
   <div>
     <modal
       id="wizardTemplateDetails"
-      class="wizard-template-modal"
+      :content-class="!showHelperProcess ? 'first_slide' : ''"
       size="huge"
       :hide-footer="true"
       @close="close"
     >
-      <b-row v-if="!showHelperProcess">
+      <b-row v-if="!showHelperProcess" align-v="center">
+        <b-col class="wizard-template-carousel col-5">
+          <b-carousel fade :interval="slideInterval">
+            <b-carousel-slide v-for="(image, index) in templateSlides" :key="index" :img-src="image"/>
+          </b-carousel>
+        </b-col>
         <b-col>
           <div class="wizard-details-container text-left mb-3">
-            <span>
-              <img
-                :src="templateIcon"
-                :alt="template.name + ' icon'"
-                width="45px"
-                class="mb-3 d-block"
-              >
-            </span>
-            <span>
-              <h5 class="text-uppercase mb-1 d-inline-block font-weight-bold template-name">{{ template.name | str_limit(30) }}</h5>
-            </span>
-            <div class="wizard-details-text">
-              <h2 class="wizard-details-headline">{{ templateDetails['modal-excerpt'] | str_limit(150) }}</h2>
-              <p class="wizard-details-description">{{ templateDetails['modal-description'] | str_limit(150) }}</p>
+            <div class="wizard-details-text pl-3">
+              <h1 class="mb-3 d-inline-block font-weight-bold template-name">{{ templateDetails['modal-title']| str_limit(30) }}</h1>
+              <h3 class="wizard-details-headline text-white">{{ templateDetails['modal-excerpt'] | str_limit(150) }}</h3>
+              <div v-for="item in templateModalDescriptionItems" class="mb-3 wizard-details-description text-white d-flex align-items-center">
+                <span v-if="templateListIcon" class="mr-3">
+                  <img
+                    :src="templateListIcon"
+                    :alt="template.name + ' icon'"
+                    width="30px"
+                  >
+                </span>
+                <span class="template-list-item">{{ item | str_limit(150) }}</span>
+              </div>
+              <hr class="template-divider mx-2"/>
               <button class="wizard-details-button text-uppercase"  @click.prevent="getHelperProcessStartEvent('wizard-details-modal')">
                 <i class="fas fa-play-circle mr-1" />
                 {{ $t('Get Started') }}
               </button>
             </div>
           </div>
         </b-col>
-        <b-col>
-          <b-carousel fade :interval="slideInterval">
-            <b-carousel-slide v-for="(image, index) in templateSlides" :key="index" :img-src="image"/>
-          </b-carousel>
-        </b-col>
       </b-row>
       <task
           v-if="showHelperProcess"
@@ -78,12 +78,15 @@ export default {
     templateDetails() {
       return JSON.parse(this.template?.template_details);
     },
-    templateIcon() {
-      return this.template?.template_media?.icon;
+    templateListIcon() {
+      return this.template?.template_media?.listIcon;
     },
     templateSlides() {
       return this.template?.template_media?.slides;
     },
+    templateModalDescriptionItems() {
+      return this.templateDetails['modal-description'].split(';');
+    },
     slideInterval() {
       return Object.keys(this.template?.template_media?.slides).length > 1 ? 3000 : 0;
     }
@@ -116,20 +119,39 @@ export default {
   font-weight: 400;
 }
 .wizard-details-description {
-  font-size: 16px;
+  font-size: 18px;
+  line-height: 3px;
+  font-weight: lighter;
+}
+
+.wizard-details-description .template-list-item{
+  line-height:1.5rem;
 }
 
 .wizard-details-headline {
-  font-size: 26px;
+  font-size: 20px;
+  margin-bottom: 22px;
+  font-weight:lighter;
 }
 
-.wizard-details-button{
+.wizard-details-button {
   border-radius: 11px;
-  border: none;
+  border: none!important;
   background-color: #1572C2;
   color: #FFFFFF;
   display: inline-flex;
   padding: 7px 16px;
   align-items: center;
 }
+
+.wizard-details-button:focus {
+  border:none;
+  outline: none;
+}
+
+.template-divider {
+  background-color: #0081D8;
+  margin-top: 2rem;
+  margin-bottom: 2rem;
+}
 </style>
diff --git a/resources/sass/app.scss b/resources/sass/app.scss
@@ -981,6 +981,19 @@ nav {
 
 
 //Guided templates modal styling
+#wizardTemplateDetails___BV_modal_content_.first_slide {
+  background: linear-gradient(180deg, #3270BC 0%, #00B5DA 100%), linear-gradient(0deg, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.2));
+  padding-left: 0;
+}
+
+#wizardTemplateDetails___BV_modal_content_.first_slide .wizard-template-carousel {
+  margin-left:-17px;
+}
+
+#wizardTemplateDetails___BV_modal_content_.first_slide .template-name {
+  color: #00345B;
+}
+
 #wizardTemplateDetails___BV_modal_content_,
 #processWizard___BV_modal_content_{
   border-radius: 8px;