@processmaker/modeler 1.39.29 → 1.39.30

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@processmaker/modeler",
-  "version": "1.39.29",
+  "version": "1.39.30",
   "scripts": {
     "serve": "vue-cli-service serve --mode development",
     "test:unit": "vue-cli-service test:unit",

package/src/assets/spinner.svg

@@ -1,5 +1,5 @@
 <?xml version="1.0" encoding="utf-8"?>
-<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="margin: auto; background: rgb(245, 245, 245); display: block; shape-rendering: auto;" width="50px" height="50px" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid">
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="margin: auto; background: rgb(255, 255, 255); display: block; shape-rendering: auto;" width="50px" height="50px" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid">
     <circle cx="50" cy="50" fill="none" stroke="#1572c2" stroke-width="10" r="35" stroke-dasharray="164.93361431346415 56.97787143782138">
         <animateTransform attributeName="transform" type="rotate" repeatCount="indefinite" dur="1s" values="0 50 50;360 50 50" keyTimes="0;1"/>
     </circle>

package/src/components/inspectors/LoadingPreview.vue

@@ -1,6 +1,6 @@
 <template>
-  <div class="no-preview">
-    <img id="preview-asset" :src="previewAsset" alt="Preview Asset">
+  <div class="preview-placeholder">
+    <img id="preview-image" :src="previewAsset" alt="Preview Asset">
     <h1>The preview is loading</h1>
     <h2>Some assets can take some time to load</h2>
 
@@ -20,29 +20,12 @@ export default {
 };
 </script>
 
-<style scoped>
-.no-preview {
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  align-items: center;
-  padding: 5px;
-}
-#preview-asset {
-  width: 200px;
-  padding-bottom: 150px;
-}
-
-.no-preview h1 {
-  text-align: center;
-  font-weight: bold;
-  font-size: xx-large;
-  margin-bottom: 50px;
-}
+<style lang="scss" src="./preview_panel.scss" scoped />
 
-.no-preview h2 {
-  text-align: center;
-  font-size: x-large;
-  margin-bottom: 50px;
-}
+<style scoped>
+  #preview-image {
+    width: 130px;
+    margin-top: 50px;
+    margin-bottom: 50px;
+  }
 </style>

package/src/components/inspectors/NoPreviewAvailable.vue

@@ -1,8 +1,8 @@
 <template>
-  <div class="no-preview">
-    <img :src="noPreviewImg" alt="no preview">
+  <div class="preview-placeholder">
+    <img id="preview-image" :src="noPreviewImg" alt="no preview">
     <h1>No Resource Assigned</h1>
-    <h2>This is a placeholder. Please, assign a resource to this task.</h2>
+    <h2>This is a placeholder screen. Please, assign a resource to this task.</h2>
   </div>
 </template>
 
@@ -17,31 +17,13 @@ export default {
 };
 </script>
 
-<style scoped>
-.no-preview {
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  align-items: center;
-  color: #44494E;
-  padding: 5px;
-}
-
-.no-preview img {
-  max-width: 50%;
-  width: auto;
-  padding-bottom: 150px;
-}
 
-.no-preview h1 {
-  text-align: center;
-  font-weight: bold;
-  font-size: xx-large;
-  margin-bottom: 50px;
-}
+<style lang="scss" src="./preview_panel.scss" scoped />
 
-.no-preview h2 {
-  text-align: center;
-  font-size: x-large;
-}
+<style scoped>
+  #preview-image {
+    width: 200px;
+    margin-top:50px;
+    margin-bottom: 50px;
+  }
 </style>

package/src/components/inspectors/preview_panel.scss

@@ -15,7 +15,7 @@ $inspector-column-min-width: 200px;
   min-width: $inspector-column-min-width;
   resize: both;
   overflow:auto;
-  background-color: #F5F5F5;
+  background-color: #fff;
   border-left: 8px solid #EBEEF2;
   z-index: 2;
 }
@@ -63,3 +63,31 @@ $inspector-column-min-width: 200px;
   text-align: center;
   color: #6c757d;
 }
+
+.preview-placeholder {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  padding: 5px;
+}
+
+.preview-placeholder h1 {
+  text-align: center;
+  margin-bottom: 30px;
+  font-family: "Open Sans", sans-serif;
+  font-size: 32px;
+  font-weight: 600;
+  line-height: 38px;
+  letter-spacing: -0.04em;
+}
+
+.preview-placeholder h2 {
+  text-align: center;
+  margin-bottom: 50px;
+  font-family: "Open Sans", sans-serif;
+  font-size: 18px;
+  font-weight: 400;
+  line-height: 27px;
+  letter-spacing: -0.02em;
+}

package/src/components/railBottom/RailBottom.vue

@@ -22,6 +22,7 @@
       :style="[overlap ? { width: 'auto'} : { width: '100%'}]"
     >
       <UndoRedoControl
+        v-if="!isMultiplayer"
         v-show="showComponent"
         :is-rendering="isRendering"
         @load-xml="$emit('load-xml')"
@@ -117,6 +118,7 @@ export default {
     showComponent() {
       return store.getters.showComponent;
     },
+    isMultiplayer: () => store.getters.isMultiplayer,
   },
   async mounted() {
     await nextTick();

package/src/components/topRail/multiplayerViewUsers/MultiplayerViewUsers.vue

@@ -1,5 +1,5 @@
 <template>
-  <b-avatar-group class="container">
+  <b-avatar-group class="container" v-if="!isMultiplayer">
     <template v-for="item in filteredPlayers" >
       <Avatar :badgeBackgroundColor="item.color" :imgSrc="item.avatar" :userName="item.name" :key="item.key"/>
     </template>
@@ -9,6 +9,8 @@
 <script>
 import { uniqBy } from 'lodash';
 import Avatar from '@/components/topRail/multiplayerViewUsers/avatar/Avatar';
+import store from '@/store';
+
 export default {
   components:{
     Avatar,
@@ -26,6 +28,7 @@ export default {
         return player.name.toLowerCase() !== window.ProcessMaker.user?.fullName.toLowerCase();
       });
     },
+    isMultiplayer: () => store.getters.isMultiplayer,
   },
 };
 </script>