Skip to content

Commit

Permalink
new UI upgrades
Browse files Browse the repository at this point in the history
  • Loading branch information
Gabriele Panico committed Oct 27, 2023
1 parent ca96464 commit 68ec5b8
Show file tree
Hide file tree
Showing 19 changed files with 292 additions and 351 deletions.
52 changes: 28 additions & 24 deletions src/app/chatbot-design-studio/cds-base-element/attributes/attributes.component.scss
View file
Original file line number Diff line number Diff line change
@@ -1,3 +1,15 @@
@import "./src/assets/sass/cds/_variables.scss";


:host {
--background-color: #{$blu-light-01};
--column-color: #{$blu-02};
--text-color: #{$blu};

--content-background: rgb(244, 246, 251, 0.4);
--base-radius: 8px
}

.cds-attributes {
// max-width: 400px;
.header__center {
Expand All @@ -8,7 +20,7 @@
align-items: center;
padding-left: 12px;
padding-right: 12px;
color:#f2f2f2;
color: var(--text-color);
max-width: 400px;
width: 100%;
}
Expand All @@ -24,7 +36,7 @@
.key-value-form-column {
font-size: 1em;
width: 50%;
color:#f2f2f2;
color: var(--column-color);
text-align: center;
}

Expand All @@ -37,12 +49,12 @@

/**** PANEL *****/
::ng-deep .mat-expansion-indicator:after {
color: #f2f2f2;
color: var(--text-color);
}
mat-expansion-panel {
box-shadow: none;
background: rgb(48 63 92);
border: 1px solid #5f6368;
background-color: var(--content-background);
border: 1px solid $gray-light-02;
overflow: visible;
&.open-block {
pointer-events: none;
Expand Down Expand Up @@ -71,7 +83,7 @@
position: relative;
width: 150px;
height: 26px;
border-radius: 4px 0 0 4px;
border-radius: var(--base-radius) 0 0 var(--base-radius);
background: #f2f2f2;
font-weight: 500;
font-size: 14px;
Expand All @@ -91,19 +103,21 @@
background: #fff;
margin: 3px 0;
font-size: 14px;
height: 26px;
height: 28px;
width: 50%;
padding: 0 10px;
border-radius: 0 4px 4px 0;
color: #1e293b;
border-radius: 0 var(--base-radius) var(--base-radius) 0;
color: $gray;
border: 1px solid $blu-light-02;
width: calc(50% - 2px);
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;

}

.dx-input:focus, .sx-input:focus {
outline: 2px solid rgba(236,182,6,1);
border-color: $blu
}


Expand All @@ -117,9 +131,7 @@
width: calc(50% - 2px);
textarea {
padding: 0 0 0 10px !important;
border: 0!important;
outline: 0!important;
border-radius: 0 4px 4px 0;
border-radius: 0 var(--base-radius) var(--base-radius) 0;
}
}

Expand All @@ -128,8 +140,6 @@
textarea {
background: transparent;
padding: 0!important;
border: 0!important;
outline: 0!important;
}
}

Expand All @@ -151,28 +161,22 @@
cursor: default;
display: flex;
position: relative;
border-radius: 4px 0 0 4px;
background: rgb(242,242,242);
border-radius: var(--base-radius) 0 0 var(--base-radius);
font-weight: 500;
font-size: 14px;
margin: 3px 0px 3px 0;
color: #1e293b;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
padding: 0!important;
width: calc(100% - 2px);
border: 0px!important;
outline: 0px!important;
height: 26px!important;
resize: none!important;
}

.text-editor-wrapper {
position: relative;
.tag {
inset: 0 2px 0 0;
border-radius: 4px 0 0 4px;
inset: 0 1px 0 0;
border-radius: var(--base-radius) 0 0 var(--base-radius);
margin: 3px 0;
padding: 3px 0;
justify-content: initial;
Expand Down
105 changes: 51 additions & 54 deletions src/app/chatbot-design-studio/cds-chatbot-details/community/community.component.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,14 +2,7 @@

<div class="row">
<div class="col-sm-10 col-md-10 title-buttons">
<!-- <h3 class="card_title__underlined" style="color: #e8eaed;">
<span class="card_title__underline buttons-inside">
Setup Community info
</span>
</h3> -->
<!-- displayBtnLabelSeeYourRequets
displayBtnLabelSeeYourRequets
displayBtnLabelSeeYourRequets -->

<div class="cds-bottom-nav">
<div (click)="displayUserCommunityInfo(seeUserCmntyInfo = !seeUserCmntyInfo)" class="btn-with-border--effect" [ngClass]="
{ 'disabled-li' : seeUserCmntyInfo === false,
Expand Down Expand Up @@ -58,7 +51,9 @@
<!-- ------------------------------------------------------------------------------------------- -->

<div class="row">
<div *ngIf="!userCmntyInfo" class="col-xs-6">

<!-- CHATBOT INFO tab -->
<div *ngIf="!userCmntyInfo" class="col-sm-10 col-md-10">
<!-- style="margin-bottom: 16px;" -->
<div class="row">

Expand All @@ -73,45 +68,53 @@
</label>
</div>

<div class="row" style="margin-bottom: 16px;">
<label class="col-xs-12 cds--custom-label">
<!-- {{ 'Description' | translate }} -->
Main Category <span>*</span>
</label>
<div class="col-xs-12">
<ng-select class="csd-chatbot-dtls-input" id="select-tag" #ngSelectTags [items]="certifiedTags"
bindLabel="name" [clearable]="true" placeholder="Select a category and press enter"
[(ngModel)]="certifiedTag" (change)="addMainCategory($event)"
(keyup.enter)="ngSelectTags.close()">

<ng-template ng-label-tmp let-item="item">
{{item.name}}
</ng-template>
<ng-template ng-option-tmp let-item="item" let-index="index">
{{item.name}}
</ng-template>
</ng-select>
<span *ngIf="certifiedTagNotSelected" class="csd-community-required-field">Required</span>
<div class="row flex-div" style="margin-bottom: 16px;">
<div class="col-xs-6 cds--custom-label">
<!-- ------------------------------------------------------------------------------------------- -->
<!-- Main Category -->
<!-- ------------------------------------------------------------------------------------------- -->
<label class="col-xs-12 cds--custom-label">
<!-- {{ 'Description' | translate }} -->
Main Category <span>*</span>
</label>
<div class="col-xs-12">
<ng-select class="csd-chatbot-dtls-input" id="select-tag" #ngSelectTags [items]="certifiedTags"
bindLabel="name" [clearable]="true" placeholder="Select a category and press enter"
[(ngModel)]="certifiedTag" (change)="addMainCategory($event)"
(keyup.enter)="ngSelectTags.close()">

<ng-template ng-label-tmp let-item="item">
{{item.name}}
</ng-template>
<ng-template ng-option-tmp let-item="item" let-index="index">
{{item.name}}
</ng-template>
</ng-select>
<span *ngIf="certifiedTagNotSelected" class="csd-community-required-field">Required</span>
</div>
</div>
</div>

<!-- ------------------------------------------------------------------------------------------- -->
<!-- Bot title -->
<!-- ------------------------------------------------------------------------------------------- -->
<div class="row" style="margin-bottom: 16px;">
<label class="col-xs-12 cds--custom-label">
<!-- {{ "BotsAddEditPage.Type" | translate }} -->
<!-- {{ 'Title' | translate }} -->
Title <span>*</span>
</label>
<div class="col-xs-12">
<input id="bot_type" name="bot_type" [(ngModel)]="selectedChatbot.title"
(ngModelChange)="onChangeTitle($event)" class="input csd-chatbot-dtls-input" type="text"
style="margin-bottom: 0px; color:#808080" placeholder="Title">
<span *ngIf="titleIsEmpty" class="csd-community-required-field">Required</span>
<div class="col-xs-6 cds--custom-label">
<!-- ------------------------------------------------------------------------------------------- -->
<!-- Bot title -->
<!-- ------------------------------------------------------------------------------------------- -->
<label class="col-xs-12 cds--custom-label">
<!-- {{ "BotsAddEditPage.Type" | translate }} -->
<!-- {{ 'Title' | translate }} -->
Title <span>*</span>
</label>
<div class="col-xs-12">
<input id="bot_type" name="bot_type" [(ngModel)]="selectedChatbot.title"
(ngModelChange)="onChangeTitle($event)" class="input csd-chatbot-dtls-input" type="text"
style="margin-bottom: 0px; color:#808080" placeholder="Title">
<span *ngIf="titleIsEmpty" class="csd-community-required-field">Required</span>
</div>

</div>
</div>



<!-- ------------------------------------------------------------------------------------------- -->
<!-- Short Description -->
<!-- ------------------------------------------------------------------------------------------- -->
Expand Down Expand Up @@ -183,16 +186,6 @@

<div class="cds-chatbot-tag-delete-icon-wpr" (click)="removeTag(tag)">
<i class="material-icons" style="font-size: 12px;"> close </i>
<!-- <svg style="width: 13px; height: auto;position:absolute;margin-top: 6px;"
aria-hidden="true" focusable="false" data-prefix="fas" data-icon="tag"
class="svg-inline--fa-tag-icon fa-tag fa-w-16" role="img"
xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
<path class="tag_icon_in_ws_msgs"
d="M0 252.118V48C0 21.49 21.49 0 48 0h204.118a48 48 0 0 1 33.941 14.059l211.882 211.882c18.745 18.745 18.745 49.137 0 67.882L293.823 497.941c-18.745 18.745-49.137 18.745-67.882 0L14.059 286.059A48 48 0 0 1 0 252.118zM112 64c-26.51 0-48 21.49-48 48s21.49 48 48 48 48-21.49 48-48-21.49-48-48-48z">
</path>
</svg> -->

</div>
</div>
</div>
Expand All @@ -213,7 +206,11 @@
</div>
</div>
</div>
<div *ngIf="userCmntyInfo" class="col-xs-6">



<!-- PERSONAL INFO tab -->
<div *ngIf="userCmntyInfo" class="col-sm-10 col-md-10">
<div class="row">

<label class="col-xs-12 cds--custom-label" style="font-size: 18px;">
Expand Down
17 changes: 14 additions & 3 deletions src/app/chatbot-design-studio/cds-chatbot-details/community/community.component.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@
position: relative;
display: block;
height: 53px;
border-bottom: 3px solid $blu-light-02;
border-bottom: 2px solid $blu-light-02;
cursor: pointer;
}

Expand All @@ -25,7 +25,7 @@
}

.li-active {
border-bottom: 3px solid $blu !important;
border-bottom: 2px solid $blu !important;
pointer-events: none;
}
.li-active a {
Expand Down Expand Up @@ -59,7 +59,7 @@

.csd-chatbot-dtls-input {
// max-width: 400px;
max-width: 50%;
// max-width: 50%;
}

input[type="text"] {
Expand Down Expand Up @@ -133,6 +133,14 @@ input[type="text"]:disabled::placeholder {
font-weight: 300 !important;
}

.flex-div{
display: flex;
& div.cds--custom-label{
width: 50%;
height: unset;
}
}

ng-select {
font-size: 14px;
width: 100%;
Expand Down Expand Up @@ -242,6 +250,9 @@ ng-select {

.cds-chatbot-tag-delete-icon-wpr {
height: 16px;
display: flex;
align-items: center;
justify-items: center;
}

.bot-description-note {
Expand Down
10 changes: 5 additions & 5 deletions ...-dashboard/cds-canvas/actions/list/cds-action-gpt-task/cds-action-gpt-task.component.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -152,7 +152,7 @@ div {
mat-expansion-panel ::ng-deep {
background-color: transparent;
box-shadow: none;
color: $blu;
color: var(--text-color);

.mat-expansion-panel-header {
padding: 0;
Expand All @@ -163,22 +163,22 @@ mat-expansion-panel ::ng-deep {
}

.mat-expansion-panel-header-title {
color: $blu;
color: var(--text-color);
}

.mat-expansion-indicator::after {
color: $blu !important;
color: var(--text-color) !important;
}

.mat-expansion-panel-header-description,
.mat-expansion-indicator:after {
color: $blu;
color: var(--text-color);
margin: 5px;
}

::ng-deep .mat-expansion-indicator,
.mat-expansion-indicator:after {
color: $blu;
color: var(--text-color);
}

.mat-expansion-panel-header.mat-expanded {
Expand Down
7 changes: 6 additions & 1 deletion ...st/cds-action-reply/elements/cds-action-reply-frame/cds-action-reply-frame.component.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -62,6 +62,11 @@ $max-height: 230px;
}
}

appdashboard-delay-slider,
appdashboard-filter{
display: flex;
}

.previewMode{
&.extensions-response{
margin: 0;
Expand Down Expand Up @@ -368,7 +373,7 @@ cds-textarea.text-editable-div ::ng-deep{
// width: calc(100% - 66px);
textarea {
line-height: 20px !important;
// width: calc(100% - 20px) !important;
width: calc(100% - 20px) !important;
font-size: 0.9em !important;
}
}
Expand Down
Loading

0 comments on commit 68ec5b8

Please sign in to comment.