minor UI improvements

Tiledesk · Oct 30, 2023 · 6201c59 · 6201c59
1 parent 5bd163e
commit 6201c59
Show file tree

Hide file tree

Showing 15 changed files with 60 additions and 21 deletions.
diff --git a/src/app/chatbot-design-studio/cds-chatbot-details/developer/developer.component.scss b/src/app/chatbot-design-studio/cds-chatbot-details/developer/developer.component.scss
@@ -48,6 +48,8 @@ input[type="text"] {
     right: 0px;
     display: flex;
     align-items: center;
+    font-size: 18px;
+    padding: 5px;
 
     &:hover{
         cursor: pointer;

diff --git a/...oard/cds-canvas/actions/list/cds-action-description/cds-action-description.component.scss b/...oard/cds-canvas/actions/list/cds-action-description/cds-action-description.component.scss
@@ -15,7 +15,8 @@
     border-bottom: 0 !important;
 
     .label-action {
-        color: #6c6859 !important;
+        font-size: 12px !important;
+        color: $blu !important;
     }
 
     .icon-action {

diff --git a/...anvas/actions/shared/cds-action-controls/cds-action-arrow/cds-action-arrow.component.scss b/...anvas/actions/shared/cds-action-controls/cds-action-arrow/cds-action-arrow.component.scss
@@ -1,4 +1,6 @@
- /** ---- V1 ---- **/
+@import "./src/assets/sass/cds/_variables.scss";
+
+/** ---- V1 ---- **/
 .cds-action-arrow-down-icon-wpr {
     transition: width 0.15s ease 0s, color 0.15s ease 0s;
     width: 9px;
@@ -11,7 +13,7 @@
     height: 6px;
     position: relative;
     overflow: hidden;
-    color: #6c6859; 
+    color: $blu; 
     transform: rotate(90deg);
     top: 15px;
 }
@@ -49,5 +51,5 @@
 
 .cds-action-arrow-icon{
     font-size: 25px;
-    color: #6c6859;
+    color: $blu;
 }
diff --git a/...actions/shared/cds-action-controls/cds-action-controls/cds-action-controls.component.html b/...actions/shared/cds-action-controls/cds-action-controls/cds-action-controls.component.html
@@ -1,10 +1,10 @@
 <div class="action-controls">
     <div class="action-control-btns-wpr">
         <div class="action-control-btn icon" (click)="onClickAction('delete', $event)">
-            <img src="/assets/images/icons/bin.svg">
+            <img src="assets/images/icons/bin.svg">
         </div>
         <div class="action-control-btn icon" (click)="onClickAction('edit', $event)">
-            <img src="/assets/images/icons/edit.svg">
+            <img src="assets/images/icons/edit.svg">
         </div>
     </div>
 </div>
diff --git a/...bot-design-studio/cds-dashboard/cds-canvas/base-elements/textarea/textarea.component.scss b/...bot-design-studio/cds-dashboard/cds-canvas/base-elements/textarea/textarea.component.scss
@@ -205,7 +205,7 @@ mat-form-field.box-textarea ::ng-deep {
         align-items: center;
         justify-content: center;
         border-radius: 7px;
-        margin: 5px;
+        margin: 3px;
         height: fit-content;
         padding: 2px;
         max-width: calc(100% - 25px);

diff --git a/src/app/chatbot-design-studio/cds-dashboard/cds-canvas/cds-canvas.component.scss b/src/app/chatbot-design-studio/cds-dashboard/cds-canvas/cds-canvas.component.scss
@@ -278,7 +278,7 @@ cds-fulfillment {
   position: relative;
   display: block;
   background-size: 16px 16px;
-  background-image: radial-gradient(rgb(214 226 226 / 60%) 1.14286px, rgb(255 255 255) 1.14286px);
+  background-image: radial-gradient(rgb(152 153 153 / 40%) 1.14286px, rgb(240 233 233 / 25%) 1.14286px);
   // background-image: radial-gradient(rgb(218, 226, 226) 1.14286px, rgb(244, 246, 246) 1.14286px);
   background-position: 593.4px -230.4px;
 }

diff --git a/src/app/chatbot-design-studio/cds-dashboard/cds-canvas/cds-intent/cds-intent.component.scss b/src/app/chatbot-design-studio/cds-dashboard/cds-canvas/cds-intent/cds-intent.component.scss
@@ -6,6 +6,7 @@
   --action-background: #{$action-item-background};
   --action-no-featured-backgroud: #{$action-no-featured-item-background};
   --intent-background: #{$intent-preview-background};
+  --intent-border-color: #{$intent-preview-borderColor};
   --intent-header-background: transparent; //#{$deep-brown};
   --base-border-radius-preview: #{$border-radius-base-preview};
   --base-padding-preview: #{$padding-base-preview};
@@ -25,6 +26,7 @@
   background-color: var(--intent-background);
   padding: var(--base-padding-preview);
   border-radius: var(--base-border-radius-preview);
+  outline: 1px solid var(--intent-border-color);
   &::before {
     display: block;
     border-radius: 10px;
@@ -51,6 +53,7 @@
     background-color: unset;
     padding: 0;
     border-radius: unset;
+    border: unset;
     max-width: var(--startIntentMaxWith);
     outline: unset;
   }
@@ -361,7 +364,7 @@
   position: relative;
   min-height: 54px;
   /* padding: 0px 10px; */
-  padding: 5px 0px;
+  padding: 0px 0px;
   width: 100%;
   position: relative;
   display: flex;
@@ -1030,7 +1033,7 @@ cds-panel-intent-header.isStart ::ng-deep{
 
     &[active=true] {
       img {
-        filter: brightness(0) saturate(100%) invert(68%) sepia(36%) saturate(6687%) hue-rotate(182deg) brightness(104%) contrast(92%);
+        filter: brightness(0) saturate(100%) invert(39%) sepia(19%) saturate(1139%) hue-rotate(184deg) brightness(91%) contrast(85%);
       }
     }
   }

diff --git a/...ashboard/cds-canvas/cds-intent/panel-intent-controls/panel-intent-controls.component.html b/...ashboard/cds-canvas/cds-intent/panel-intent-controls/panel-intent-controls.component.html
@@ -13,7 +13,7 @@
             #tooltip="matTooltip" 
             matTooltipPosition='above' 
             matTooltipHideDelay="100">
-            <img src="/assets/images/icons/bin.svg">
+            <img src="assets/images/icons/bin.svg">
         </div>
 
         <!-- ---------------------------------- -->
@@ -52,7 +52,7 @@
                 </g>
             </svg> -->
 
-            <img src="/assets/images/icons/webhook.svg">
+            <img src="assets/images/icons/webhook.svg">
         </div>
 
         <!-- ---------------------------------- -->
@@ -65,7 +65,7 @@
             #tooltip="matTooltip" 
             matTooltipPosition='above'
             matTooltipHideDelay="100">
-            <img src="/assets/images/icons/play.svg">
+            <img src="assets/images/icons/play.svg">
         </div>
     </div>
 </div>
diff --git a/...t-design-studio/cds-dashboard/cds-canvas/cds-panel-widget/cds-panel-widget.component.html b/...t-design-studio/cds-dashboard/cds-canvas/cds-panel-widget/cds-panel-widget.component.html
@@ -10,7 +10,7 @@
         <div class="content">
 
             <div class="btn-wrp" [style.display]="iframeVisibility? 'none':'flex'">
-                <img src="assets/cds/images/chatbot.png" width="80">
+                <img src="assets/images/chatbot.png" width="80">
                 <div id="text" class="title"> Test your Chatbot</div>
                 <div id="text" class="description"> Start trying your chatbot and interact with it</div>
                 <!-- style="margin-left: 14px;" -->

diff --git a/src/app/chatbot-design-studio/cds-dashboard/cds-header/cds-header.component.html b/src/app/chatbot-design-studio/cds-dashboard/cds-header/cds-header.component.html
@@ -32,7 +32,7 @@
     <div class="header-title">{{ selectedChatbot?.name }}</div>
     <div class="right-opts">
 
-        <div class="btn-group"  [ngStyle]="{'z-index':popup_visibility === 'block' ? '1051' : '1' }">
+        <div class="btn-group" id="cds-publish-btn-wrp" [ngStyle]="{'z-index':popup_visibility === 'block' ? '1051' : '1' }">
             <button id="cds-publish-btn" class="btn btn-primary cds-blue-button" type="button" (click)="publish()">
                 <span class="material-icons">
                     cached

diff --git a/src/app/chatbot-design-studio/cds-dashboard/utils/cds-popup/cds-popup.component.html b/src/app/chatbot-design-studio/cds-dashboard/utils/cds-popup/cds-popup.component.html
@@ -1,6 +1,7 @@
 
 <div class="cds-dialog-popup-wpr" role="alertdialog" aria-describedby="popup-academy"
-    style="right: 264px; top: 66px; opacity: 1;" [ngStyle]="{'display': popup_visibility }">
+    [style.right]="position?.right+ 'px'" [style.top]="position.top+ 'px'"
+    [ngStyle]="{'display': popup_visibility }">
     <div>
         <div class="cds-dialog-popup-img" role="img">
             <!-- <div class="cds-dialog-popup-img-wpr">

diff --git a/src/app/chatbot-design-studio/cds-dashboard/utils/cds-popup/cds-popup.component.ts b/src/app/chatbot-design-studio/cds-dashboard/utils/cds-popup/cds-popup.component.ts
@@ -11,6 +11,12 @@ import { LoggerInstance } from 'src/chat21-core/providers/logger/loggerInstance'
 export class CdsPopupComponent implements OnInit {
 
   popup_visibility = 'none';
+  position: { left: number, right: number, top: number, bottom: number;} = {
+      left: 0,
+      right: 0,
+      top: 0,
+      bottom: 0
+  }
 
   private logger: LoggerService = LoggerInstance.getInstance();
 
@@ -19,6 +25,7 @@ export class CdsPopupComponent implements OnInit {
   ) { }
 
   ngOnInit(): void {
+
     this.diplayPopup();
   }
 
@@ -28,6 +35,7 @@ export class CdsPopupComponent implements OnInit {
     const hasClosedPopup = this.appStorageService.getItem('hasclosedcdspopup')
     this.logger.log('[CDS DSBRD] hasClosedPopup', hasClosedPopup)
     if (hasClosedPopup === null) {
+      this.setPosition()
       this.popup_visibility = 'block'
       this.logger.log('[CDS DSBRD] popup_visibility', this.popup_visibility)
     }
@@ -43,4 +51,19 @@ export class CdsPopupComponent implements OnInit {
     this.popup_visibility = 'none'
   }
 
+  setPosition(){
+    let publishBtnEl = document.getElementById('cds-publish-btn-wrp')
+    if(publishBtnEl){
+      let btnPosition = publishBtnEl.getBoundingClientRect()
+      this.position = {
+        top: btnPosition.top + btnPosition.height,
+        bottom: btnPosition.bottom,
+        left: btnPosition.left + Math.floor(btnPosition.width / 2) - 160,
+        right: 110
+        // right: btnPosition.right - Math.floor(btnPosition.width / 2) - 160
+      }
+      // console.log('positionnnnnnnn -->', btnPosition,  Math.floor(btnPosition.width / 2))
+    }
+  }
+
 }
diff --git a/src/assets/sass/cds/_variables.scss b/src/assets/sass/cds/_variables.scss
@@ -169,9 +169,10 @@ $action-item-background:rgba(255,255,255, 0.7); //rgba(66,85,117,1);
 $action-no-featured-item-background:rgba(255,255,255, 1); //rgba(66,85,117,1);
 $action-color-selected: $blu; // rgba(179,141,38,1);
 $intent-preview-background: $blu-light-03; //rgb(235, 226, 198);
+$intent-preview-borderColor: $gray-light-02;
 $empty-element-property:rgb(191, 35, 35);
 
 
-$padding-base-preview: 0 10px 10px;
+$padding-base-preview: 0 0 10px;
 $base-element-gap: 5px;
 $border-radius-base-preview: 8px;
diff --git a/src/assets/sass/cds/styles.scss b/src/assets/sass/cds/styles.scss
@@ -310,20 +310,20 @@ cds-connector.connector-false {
 
 cds-connector.connector {
     position: absolute;
-    right: -25px;
+    right: -22px;
     top: calc(50% - 10px);
 }
 
 cds-connector.button-connector {
     position: absolute;
-    right: -15px;
+    right: -13px;
     top: calc(50% - 10px);
 }
 
 cds-connector.connector-true,
 cds-connector.connector-false {
     position: absolute;
-    right: -25px;
+    right: -22px;
     top: calc(50% - 10px);
 }
 

diff --git a/src/index.html b/src/index.html
@@ -5,7 +5,7 @@
   <title>Chatbot Design Studio</title>
   <base href="/">
   <meta name="viewport" content="width=device-width, initial-scale=1">
-  <link rel="icon" type="image/png" href="/assets/logos/logo-short.png">
+  <link rel="icon" type="image/png" href="assets/logos/logo-short.png">
 
   <!--     Fonts and icons     -->
   <link href="https://maxcdn.bootstrapcdn.com/font-awesome/latest/css/font-awesome.min.css" rel="stylesheet">
@@ -16,6 +16,12 @@
   <link rel="preconnect" href="https://fonts.googleapis.com">
   <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
   <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@100;200;300;400;500;600&display=swap" rel="stylesheet">
+
+  <meta property="og:title" content="Try Tiledesk now!" />
+  <meta property="og:description" content="Qualify your leads to increase your sales faster. It's really easy to do it with the Tiledesk conversational form builder" />
+  <meta property="og:image" content="https://tiledesk.com/wp-content/uploads/2022/12/6029654-02-min.png" />
+  <meta property="og:locale" content="en">
+
 </head>
 <body>
   <app-root></app-root>