@policystudio/policy-studio-ui-vue 1.1.68 → 1.1.70

package/dist/css/psui_styles.css

@@ -24520,6 +24520,25 @@ html {
   transition-duration: 150ms;
 }
 
+.tooltip.layout-blue .tooltip-inner {
+    background: #00465F;
+    font-weight: 700;
+    color: #ffffff;
+    padding: 10px 16px 12px 16px;
+    border-radius: 6px;
+    font-size: 12px;
+    line-height: 130%;
+  }
+
+.tooltip.layout-gray-50 .tooltip-inner {
+    background: #798490;
+    padding: 4px 8px;
+    border-radius: 4px;
+    font-size: 12px;
+    line-height: 130%;
+    letter-spacing: 1px;
+  }
+
 @media (min-width: 640px){
   .sm\:psui-container{
     width: 100%;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@policystudio/policy-studio-ui-vue",
-  "version": "1.1.68",
+  "version": "1.1.70",
   "description": "Policy Studio UI",
   "main": "src/index.js",
   "author": "Policy Studio Team",

package/src/assets/scss/base.scss

@@ -98,4 +98,28 @@ html {
 
 .psui-transition {
   @apply psui-transition-all psui-ease-in-out psui-duration-150;
+}
+
+
+.tooltip.layout-blue {
+  .tooltip-inner {
+    background: #00465F;
+    font-weight: 700;
+    color: #ffffff;
+    padding: 10px 16px 12px 16px;
+    border-radius: 6px;
+    font-size: 12px;
+    line-height: 130%;
+  }
+} 
+
+.tooltip.layout-gray-50 {
+  .tooltip-inner {
+    background: #798490;
+    padding: 4px 8px;
+    border-radius: 4px;
+    font-size: 12px;
+    line-height: 130%;
+    letter-spacing: 1px;
+  }
 }

package/src/assets/scss/components/PsTableResults.scss

@@ -462,7 +462,7 @@
           &.removed-class {
             td {
               @apply psui-bg-gray-10 psui-text-gray-40 !important;
-              
+
               div:first-child {
                 margin-left: 4px;
               }
@@ -480,10 +480,10 @@
                   width: 16px;
                   height: calc(100% + 1px);
                 }
-  
-              }
 
-            }         
+              }
+            }
+          
           }
   
           td {

package/src/components/table-results/PsTableResults.vue

@@ -41,12 +41,13 @@
           >
 
             <div class="psui-flex psui-relative">
-              <PsTooltip
-                :ignore-dialog="!item.is_excluded"
-                position="top"
+              <div
+                v-tooltip="{
+                  classes:'layout-gray-50',
+                  content: item.remove_add_tooltip
+                }"
               >
-                <template v-slot:trigger>
-                  <PsIcon
+                <PsIcon
                     v-if="item.remove_add_button"
                     :icon="item.remove_add_button_icon"
                     class="psui-flex psui-text-gray-40 pl-8 psui-cursor-pointer leading-none hover:psui-text-blue-60 transition-all"
@@ -54,11 +55,7 @@
                     display="flex"
                     @click.native="$emit('removeOrAddButtonChange',item)" 
                   />
-                </template>
-                <template v-slot:content>
-                  Restore this measure
-                </template>
-              </PsTooltip>
+              </div> 
               <div
                 class="psui-flex psui-items-center actions psui-space-x-3"
                 :style="{paddingLeft: `${item.deep * 16}px`}"
@@ -80,10 +77,7 @@
                   v-if="item.is_disabled || item.tooltip_text"
                   class="psui-inline-flex psui-cursor-default sticky"
                   :class="{ 'is-last-deep' : item.last_deep }"
-                  v-tooltip="{
-                    content: getTooltipContent(item),
-                    classes : 'layout-gray'
-                  }"
+                  v-tooltip="getTooltipContent(item)"
                 >
                   <div class="flex psui-items-center psui-relative ">
                     <PsIcon v-if="item.has_blocked_icon" icon="do_disturb_alt" size="14" icon-classes="psui-absolute psui--left-1 psui-text-gray-50"/>
@@ -263,20 +257,20 @@
                 <PsProgressBar
                   v-if="column.isChart && formatFunction && item.data[column.key] != null"
                   :value="formatFunction(column.key, item.data[column.key], item.data) == '--' ? 0 : item.data[column.key]"
-                  :force-break-even="item.is_disabled || formatFunction(column.key, item.data[column.key], item.data) === '--' ? true : false"
+                  :force-break-even="formatFunction(column.key, item.data[column.key], item.data) === '--' ? true : false"
                 />
 
                 <PsProgressBar
                   v-else-if="column.isChart && item.data[column.key] != null"
                   :value="item.data[column.key] == '--' ? 0 : item.data[column.key]"
-                  :force-break-even="item.is_disabled || item.data[column.key] === '--' ? true : false"
+                  :force-break-even="item.data[column.key] === '--' ? true : false"
                 />
                 
                 <div
                   v-if="column.isSwitch && item.data[column.key] != null"
                   class="psui-inline-flex" 
                   v-tooltip="{
-                    content: !item.data.is_disabled || item.is_excluded ? false : `<p class='psui-text-white psui-text-xsmall'>${item.tooltip_text}</p>`,
+                    content: !item.data.is_disabled || item.is_excluded ? false : `<p class='psui-text-white psui-text-xsmall psui-font-bold'>${item.tooltip_text}</p>`,
                     classes: 'layout-blue'
                   }"
                 >
@@ -642,11 +636,19 @@ export default {
       return value || '#ffffff' 
     },
     getTooltipContent(item) {
-      let content = ''
-      if (item.tooltip_text) {
-        content = `<p class="psui-font-bold psui-text-gray-80 psui-text-xsmall">${item.tooltip_text}</p>`
+      let content = {
+        classes:'layout-gray',
+        content:''
+      }
+
+      if(item.tooltip_text && this.layout == 'flexible') {
+        content.classes = 'layout-blue'
+        content.content = item.tooltip_text
+      }
+      else if (item.tooltip_text) {
+        content.content = `<p class="psui-font-bold psui-text-gray-80 psui-text-xsmall">${item.tooltip_text}</p>`
       } else if (item.is_disabled) {
-        content = `<p class="psui-font-bold psui-text-gray-80 psui-text-xsmall">${item.title} buildings are <br>not allowed.</p>`
+        content.content = `<p class="psui-font-bold psui-text-gray-80 psui-text-xsmall">${item.title} buildings are <br>not allowed.</p>`
       }
       return content
     },