diff --git a/angular.json b/angular.json index 037c3317..abe23751 100644 --- a/angular.json +++ b/angular.json @@ -34,20 +34,20 @@ "src/assets" ], "styles": [ - "src/styles.scss", "node_modules/bootstrap/dist/css/bootstrap.css", - "src/assets/sass/material-dashboard.scss", - "src/assets/sass/cds/styles.scss", "node_modules/@ng-select/ng-select/themes/default.theme.css", "node_modules/material-icons/iconfont/material-icons.css", "node_modules/roboto-fontface/css/roboto/roboto-fontface.css", "node_modules/@angular/material/prebuilt-themes/deeppurple-amber.css", - "node_modules/@ctrl/ngx-emoji-mart/picker.css" + "node_modules/@ctrl/ngx-emoji-mart/picker.css", + "src/styles.scss", + "src/assets/sass/material-dashboard.scss", + "src/assets/sass/cds/styles.scss" ], "scripts": [ + "node_modules/bootstrap/dist/js/bootstrap.js", "src/assets/js/mqtt/4.1.0/mqtt.min.js", - "node_modules/moment/moment.js", - "node_modules/bootstrap/dist/js/bootstrap.js" + "node_modules/moment/moment.js" ] }, "configurations": { diff --git a/src/app/chatbot-design-studio/cds-chatbot-details/detail/detail.component.html b/src/app/chatbot-design-studio/cds-chatbot-details/detail/detail.component.html index eab07d0a..fe73d296 100644 --- a/src/app/chatbot-design-studio/cds-chatbot-details/detail/detail.component.html +++ b/src/app/chatbot-design-studio/cds-chatbot-details/detail/detail.component.html @@ -110,7 +110,7 @@

Language
-
+
diff --git a/src/app/chatbot-design-studio/cds-chatbot-details/detail/detail.component.scss b/src/app/chatbot-design-studio/cds-chatbot-details/detail/detail.component.scss index 90b8b77a..1be5f307 100644 --- a/src/app/chatbot-design-studio/cds-chatbot-details/detail/detail.component.scss +++ b/src/app/chatbot-design-studio/cds-chatbot-details/detail/detail.component.scss @@ -6,7 +6,7 @@ input[type="text"] { height: 36px; font-size: 14px; width: 100%; - margin-bottom: 10px; + // margin-bottom: 10px; appearance: none; -webkit-appearance: none; background: #fff; @@ -25,7 +25,7 @@ textarea[type="text"] { // height: 36px; font-size: 14px; width: 100%; - margin-bottom: 10px; + // margin-bottom: 10px; appearance: none; -webkit-appearance: none; background: #fff; diff --git a/src/app/chatbot-design-studio/cds-dashboard/cds-canvas/actions/list/question/question.component.scss b/src/app/chatbot-design-studio/cds-dashboard/cds-canvas/actions/list/question/question.component.scss index d01fbb73..bd973572 100644 --- a/src/app/chatbot-design-studio/cds-dashboard/cds-canvas/actions/list/question/question.component.scss +++ b/src/app/chatbot-design-studio/cds-dashboard/cds-canvas/actions/list/question/question.component.scss @@ -226,9 +226,11 @@ mat-form-field.box-textarea ::ng-deep { border-radius: 0; padding-left: 6px; padding-right: 6px; - padding-top: 4px; + padding-top: 0px; border-top-left-radius: 4px; border-bottom-left-radius: 4px; + display: flex; + align-items: center; } .cds-group-addon-question-right { @@ -237,11 +239,13 @@ mat-form-field.box-textarea ::ng-deep { border-radius: 0; // padding-left: 6px; // padding-right: 6px; - padding-top: 4px; + padding-top: 0px; border-top-right-radius: 4px; border-bottom-right-radius: 4px; cursor: pointer; max-width: 47px; + display: flex; + align-items: center; } .cds-group-addon-question-right:hover { @@ -267,10 +271,12 @@ mat-form-field.box-textarea ::ng-deep { border-radius: 0; padding-left: 6px; padding-right: 6px; - padding-top: 4px; + padding-top: 0px; border-top-right-radius: 4px; border-bottom-right-radius: 4px; cursor: pointer; + display: flex; + align-items: center; } // .cds-group-addon-right-icon:hover { 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 index 412f30a8..d1a18e34 100644 --- 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 @@ -5,8 +5,6 @@ $width-card-tools: 160px; $margin-left-card: 30px; $margin-top-card: 30px; -$mdb-font-family: 'Roboto', 'Helvetica', 'Arial', sans-serif !default; -$mdb-font-family-poppins: 'Poppins', 'Roboto', Arial, sans-serif !default; $box-left-width: 250px; $box-left-width-closed: 0px; @@ -88,58 +86,10 @@ $box-left-width-closed: 0px; - - -.cds-header { - height: 60px; - font-family: $mdb-font-family-poppins; - line-height: 60px; - font-size: 21px; - color: #fff; - background: #1e293b; - display: flex; -} - -.chatboat-dashboard { - background-color: rgb($bg-color-dark-rgb); - position: relative; - display: flex; - margin-top: 0px; - padding: 0px; - width: 100%; - height: calc(100vh - 60px); - overflow-x: hidden; - overflow-y: hidden; - font-family: $mdb-font-family-poppins; - color: #394f5a; - font-size: 16px; -} - -.cds-sidebar { - border-right: 2px solid #394f5a; - width: 60px; - transition: 0.3s; - display: flex; -} - -.cds-content { - display: flex; - width: calc(100% - 60px); - // overflow-y: auto; - overflow: hidden; - cds-rules, - cds-chatbot-details, - cds-fulfillment { - width: 100%; - } -} - -.chatboat-dashboard { - &.is_opened_sidebar { - .cds-sidebar { - width: 175px; - } - } +cds-rules, +cds-chatbot-details, +cds-fulfillment { + width: 100%; } .cds-toggle-setting-sidebar-icon-right-wpr { @@ -167,7 +117,7 @@ $box-left-width-closed: 0px; width: $box-left-width; max-width: $box-left-width; min-width: $box-left-width; - background-color: #394f5a; + background-color: $blu-light-01; z-index: 10; position: relative; .panel-intent-list { @@ -176,23 +126,27 @@ $box-left-width-closed: 0px; width: 100%; height: 100vh; max-height: 100%; - background-color: rgb($bg-color-bck-rgb); border-radius: 0em; overflow: hidden; margin: 0px; padding: 0px 2px 10px 2px; align-items: flex-start; overflow-y: scroll; - } - .panel-intent-list::-webkit-scrollbar { - width: 3px; - } - .panel-intent-list::-webkit-scrollbar-track { - background-color: #1c2b45; - } - .panel-intent-list::-webkit-scrollbar-thumb { - background-color: #3c485b; - border-radius: 3px; + + &::-webkit-scrollbar { + width: 3px; + } + + &:hover{ + &::-webkit-scrollbar-track { + background-color: $blu-light-01; + } + &::-webkit-scrollbar-thumb { + background-color: $blu; + border-radius: 3px; + } + } + } &.is_closed{ diff --git a/src/app/chatbot-design-studio/cds-dashboard/cds-canvas/cds-panel-intent-list/cds-panel-intent-list.component.html b/src/app/chatbot-design-studio/cds-dashboard/cds-canvas/cds-panel-intent-list/cds-panel-intent-list.component.html index 44e5ce4f..7bfa5931 100644 --- a/src/app/chatbot-design-studio/cds-dashboard/cds-canvas/cds-panel-intent-list/cds-panel-intent-list.component.html +++ b/src/app/chatbot-design-studio/cds-dashboard/cds-canvas/cds-panel-intent-list/cds-panel-intent-list.component.html @@ -1,23 +1,10 @@
-
-
-
- - - - -
-
- -
-
+
+ Blocks
-
@@ -25,7 +12,7 @@ [ngClass]="{'active': idSelectedIntent === intent.intent_id}" [value]="intent.intent_id" (click)="onSelectIntent(intent)"> -
+
{{onGetIconForName(intent.intent_display_name)}}
@@ -54,9 +41,26 @@
+
+
+
+
+ + + + +
+
+ +
+
+
+
diff --git a/src/app/chatbot-design-studio/cds-dashboard/cds-canvas/cds-panel-intent-list/cds-panel-intent-list.component.scss b/src/app/chatbot-design-studio/cds-dashboard/cds-canvas/cds-panel-intent-list/cds-panel-intent-list.component.scss index 5a6c07db..54b1b359 100644 --- a/src/app/chatbot-design-studio/cds-dashboard/cds-canvas/cds-panel-intent-list/cds-panel-intent-list.component.scss +++ b/src/app/chatbot-design-studio/cds-dashboard/cds-canvas/cds-panel-intent-list/cds-panel-intent-list.component.scss @@ -1,13 +1,13 @@ @import "./src/assets/sass/cds/_variables.scss"; -$text-color: white; +$text-color: $blu-light-02; $background-color: transparent; -$text-color-hover: $icon-color; -$background-color-hover: $icon-color-background; -$text-color-active: $icon-active-color; +$text-color-hover: white; +$background-color-hover: $blu; +$text-color-active: $blu; $background-color-active: $icon-active-background; -$icon-color-active: $accent-blue; +$icon-color-active: $blu; .content { width: 100%; @@ -15,7 +15,11 @@ $icon-color-active: $accent-blue; flex-direction: column; justify-content: center; color: #728087; - padding: 4px; + padding: 6px; +} + +.list-title{ + font-size: 13px; } .search-box { @@ -71,7 +75,6 @@ $icon-color-active: $accent-blue; } .rocket_launch { - color: #0aae10; font-size: 20px; font-weight: 600; span { @@ -83,7 +86,6 @@ $icon-color-active: $accent-blue; } .undo { - color: #ff4000; font-size: 20px; font-weight: 600; } @@ -145,7 +147,9 @@ $icon-color-active: $accent-blue; .icon-container { width: 38px; display: flex; - justify-content: flex-start; + height: 100%; + align-items: center; + color: $blu-light-02; } .icon-list { @@ -172,7 +176,7 @@ $icon-color-active: $accent-blue; transition: all 0.3s; align-items: flex-start; height: 20px; - padding-left: 10px; + // padding-left: 10px; .item-box { display: flex; @@ -194,10 +198,9 @@ $icon-color-active: $accent-blue; } - .intent-display-name { color: $text-color; - font-weight: 500; + font-weight: 400; margin-bottom: 0px; font-size: 14px; overflow: hidden; @@ -209,10 +212,6 @@ $icon-color-active: $accent-blue; display: flex; flex-direction: row; - .icon { - color: #8c989e; - } - .ai-icon { margin-bottom: 0px; font-size: 12px; @@ -251,7 +250,7 @@ $icon-color-active: $accent-blue; .intent:hover { // background-color: #d2d2d2; - background-color: $background-color-hover; + background-color: $blu; .delete-box { display: block; @@ -270,55 +269,34 @@ $icon-color-active: $accent-blue; } } + .icon-container{ + color: $text-color-hover; + } + .intent-display-name { // color: #333; color: #fff; - font-weight: 500; + font-weight: 400; margin-bottom: 0px; font-size: 14px; // max-width: 150px; } - .icon-list { - .icon { - // color: #333; - color: #8c989e; - } - } -} - -.intent:active { - background-color: $background-color-active; - border-right: solid 5px $icon-color-active; - border-radius: 6px 10px 10px 6px; - - .intent-display-name { - // color: #333; - color: $text-color-active; - font-weight: 500; - margin-bottom: 0px; - } - - .icon-container, - .icon-list .icon{ - color: $icon-color-active !important; - } } .active { - background-color: $background-color-active !important; - border-right: solid 5px $icon-color-active; - border-radius: 6px 10px 10px 6px; + // background-color: $background-color-active !important; + // border-right: solid 5px $icon-color-active; + // border-radius: 6px 10px 10px 6px; .intent-display-name { // color: #333; color: $text-color-active; - font-weight: 500; + font-weight: 600; margin-bottom: 0px; } - .icon-container, - .icon-list .icon{ + .icon-container{ color: $icon-color-active !important; } diff --git a/src/app/chatbot-design-studio/cds-dashboard/cds-dashboard.component.scss b/src/app/chatbot-design-studio/cds-dashboard/cds-dashboard.component.scss index 0e436b5d..e152238e 100644 --- a/src/app/chatbot-design-studio/cds-dashboard/cds-dashboard.component.scss +++ b/src/app/chatbot-design-studio/cds-dashboard/cds-dashboard.component.scss @@ -1,26 +1,24 @@ @import "./src/assets/sass/cds/_variables.scss"; @import "./src/assets/sass/cds/styles.scss"; -$mdb-font-family-poppins: 'Poppins', 'Roboto', Arial, sans-serif !default; -.cds-header { - height: 60px; +cds-header { + height: $header-height; font-family: $mdb-font-family-poppins; - line-height: 60px; + line-height: $header-height; font-size: 21px; - color: #fff; - background: #1e293b; + color: $blu; + background: white; display: flex; } .chatboat-dashboard { - background-color: rgb($bg-color-dark-rgb); position: relative; display: flex; margin-top: 0px; padding: 0px; width: 100%; - height: calc(100vh - 60px); + height: calc(100vh - $header-height); overflow-x: hidden; overflow-y: hidden; font-family: $mdb-font-family-poppins; @@ -40,17 +38,18 @@ cds-fulfillment { } } -.cds-sidebar { - border-right: 2px solid #394f5a; - width: 60px; +cds-sidebar { + background-color: $blu-light-01; + border-right: 2px solid $blu-light-02; + width: $sidebar-base-width; transition: 0.3s; display: flex; - min-width: 60px; + min-width: $sidebar-base-width; } .cds-content { display: flex; - width: calc(100% - 60px); + width: calc(100% - $sidebar-base-width); overflow: hidden; } 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 index beba9d59..efdad736 100644 --- 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 @@ -21,26 +21,19 @@ matTooltipHideDelay="100" matTooltipPosition='below' #tooltip="matTooltip"> - + + + Design Studio
{{ selectedChatbot?.name }}
-
- -
-
-
-
-
-