Skip to content

Commit

Permalink
new UI -> action-reply END
Browse files Browse the repository at this point in the history
  • Loading branch information
Gabriele Panico committed Oct 17, 2023
1 parent 68cc334 commit d452707
Show file tree
Hide file tree
Showing 86 changed files with 1,378 additions and 1,714 deletions.
2 changes: 1 addition & 1 deletion package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,7 @@
"@angular/platform-browser-dynamic": "^14.2.0",
"@angular/router": "^14.2.0",
"@ctrl/ngx-emoji-mart": "^7.1.0",
"@ncstate/sat-popover": "^10.3.2",
"@ncstate/sat-popover": "^10.0.0",
"@ng-select/ng-select": "^9.0.2",
"@ngx-translate/core": "^14.0.0",
"@ngx-translate/http-loader": "^7.0.0",
Expand Down
6 changes: 3 additions & 3 deletions src/app/chatbot-design-studio/cds-base-element/filter/filter.component.html
View file
Original file line number Diff line number Diff line change
@@ -1,10 +1,10 @@
<div class="content element" [class.previewMode]="previewMode" >
<div class="content element" [class.previewMode]="previewMode" style="width: 100%;">

<div class="filter-row" *ngIf="expression?.conditions.length === 0">
<div class="add-filter-btn"
[satPopoverAnchor]="addConditionFilter"
(click)="addConditionFilter.toggle()">
<span class="material-icons">filter_alt</span>
<span class="material-icons-outlined">filter_alt</span>
Filter
</div>
</div>
Expand All @@ -18,7 +18,7 @@
(click)="onOpenConditionDetail(i); addConditionFilter.toggle();">
<div class="remove"
(click)="$event.stopPropagation(); onDeleteCondition(i, last)">
<span class="material-icons">delete</span>
<span class="material-icons-outlined">delete</span>
</div>
<div class="filter-icon">
<span class="material-icons">data_object</span>
Expand Down
114 changes: 72 additions & 42 deletions src/app/chatbot-design-studio/cds-base-element/filter/filter.component.scss
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,12 @@
@import "./src/assets/sass/cds/_variables.scss";

:host{
--textColor: #{$blu};
--backGroundColor: #{$blu-light-04};
--hoverBackgroundColor: #{$blu-light-03};

--border-radius-base: 8px
}

.previewMode{
.filter-row{
Expand All @@ -26,15 +33,10 @@
}
}
}
.content{
// background: $action-item-background;
// margin: 0 30px;
// padding: 20px;
border-radius: 4px;
}

.filter-row{
display: grid;
width: 100%;
// grid-template-columns: minmax(0px, 1fr) 100px;
grid-column-gap: 10px;
grid-row-gap: 10px;
Expand Down Expand Up @@ -64,20 +66,20 @@
cursor: pointer;
display: flex;
justify-content: center;
background: rgb(255, 255, 255);
background: var(--textColor);
border-radius: 100%;
transition: background-color 0.3s ease 0s;
font-size: 12px;

span.material-icons{
font-size: 20px;
color: $icon-color;
color: var(--backGroundColor);
}

&:hover{
background-color: $icon-color;
background-color: var(--textColor);
span.material-icons{
color: white;
color: var(--backGroundColor);
}
}
}
Expand All @@ -89,22 +91,40 @@
align-items: center;
justify-content: center;
gap: 5px;
padding: 0px 9px;
height: 26px;
font-size: .9em;
font-weight: 400;
border-radius: 13px;
// padding: 0px 9px;
// font-size: .9em;
// font-weight: 400;
// border-radius: 13px;
transition: all 0.3s ease 0s;
background: rgb(104, 106, 211);
color: white;
// background: $background-color;
// color: $text-color;

span.material-icons{
user-select: none;
box-sizing: border-box;
outline: none;
border: 1px dashed $blu-light-02;
border-radius: $button-border-radius-base;
color: $blu-light-02;
cursor: pointer;
font-size: 0.7em;
font-weight: 400;
line-height: $button-height-base;
// margin: 0px 5px 0;
order: 1;
padding: 0 10px;
transition: all .3s;
min-width: 100px;
text-align: center;
width: fit-content;

span.material-icons-outlined{
font-size: 20px;
color: white;
}

&:hover{
opacity: 0.8;
border-color: var(--textColor);
color: var(--textColor);
cursor: pointer;
}
}
Expand All @@ -123,18 +143,29 @@
align-items: center;
justify-content: center;
width: 100%;
font-weight: 600;
// padding: 8px 15px;
// margin: 5px;
// border: 1px solid #c6cdd4;
border-radius: 4px;
color: #c6cdd4;

user-select: none;
box-sizing: border-box;
outline: none;
border: 1px dashed $blu-light-02;
border-radius: $button-border-radius-base;
color: $blu-light-02;
cursor: pointer;
font-size: 0.7em;
font-weight: 400;
line-height: $button-height-base;
// margin: 0px 5px 0;
order: 1;
padding: 0 10px;
transition: all .3s;
min-width: 100px;
text-align: center;
width: fit-content;


&:hover{
// border-color: white;
color: white;
border-color: var(--textColor);
color: var(--textColor);
}
}

Expand Down Expand Up @@ -187,18 +218,19 @@
align-items: center;
display: flex;
position: relative;
border-radius: 4px;
padding: 8px 15px;
border-radius: var(--border-radius-base);
padding: 6px 15px;
transition: background-color 0.3s ease 0s, border 0.3s ease 0s, opacity 0.3s ease 0s;
cursor: pointer;
background: rgb(245, 245, 245);
background: var(--backGroundColor);
border-width: 1px;
border-style: solid;
border-color: rgb(245, 245, 245);
border-color: var(--backGroundColor);
border-image: initial;
font-size: 12px;
&:hover{
background: #c6cdd4;
border-color: #c6cdd4;
background: var(--hoverBackgroundColor);
border-color: var(--textColor);
div.remove{
opacity: 1;
}
Expand All @@ -219,29 +251,27 @@
cursor: pointer;
display: flex;
justify-content: center;
background: rgb(255, 255, 255);
background: white;
border-radius: 100%;
transition: background-color 0.3s ease 0s;
font-size: 12px;
span.material-icons {
span.material-icons,
span.material-icons-outlined {
font-size: 20px;
color: $icon-color;
color: var(--textColor);
}
&:hover {
background-color: $icon-color;
span.material-icons{
color: white;
}
background-color: var(--hoverBackgroundColor);
}
}

div.filter-icon {
-webkit-box-align: center;
-webkit-box-pack: center;
align-items: center;
color: $icon-color;
color: var(--textColor);
display: flex;
font-size: 15px;
// font-size: 12px;
justify-content: center;
margin-right: 10px;
width: 15px;
Expand Down
22 changes: 9 additions & 13 deletions src/app/chatbot-design-studio/cds-base-element/select/select.component.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,30 +17,26 @@
(change) = "onChangeActionButton($event)">

<ng-template ng-label-tmp let-item="item">
<div style="display: flex; flex-direction: row; width: 100%; justify-content: space-between; align-items: center;">
<div style="width: 100%; display: flex; flex-direction: column;">
<div style="width: 100%; display: flex; flex-direction: row;">
<span class="material-icons" *ngIf="item['icon']"
[class.intent-start]="item[bindLabelSelect] === 'start'"
[class.intent-defaultFallback]="item[bindLabelSelect] === 'defaultFallback'">{{item['icon']}}</span>
<span class="label-select">{{item[bindLabelSelect]}}</span>
<span *ngIf="optionalBindAdditionalText" class="label-select-option">{{item[optionalBindAdditionalText]}}</span>
</div>
</div>
<div class="select-itme-wrp">
<span class="material-icons" *ngIf="item['icon']"
[class.intent-start]="item[bindLabelSelect] === 'start'"
[class.intent-defaultFallback]="item[bindLabelSelect] === 'defaultFallback'">{{item['icon']}}</span>
<span class="label-select">{{item[bindLabelSelect]}}</span>
<span *ngIf="optionalBindAdditionalText" class="label-select-option">{{item[optionalBindAdditionalText]}}</span>
</div>
</ng-template>

<ng-template ng-option-tmp let-item="item" let-index="index">
<div style="display: flex; flex-direction: row; width: 100%; justify-content: space-between; align-items: center;">
<div class="select-itme-wrp" style="justify-content: space-between;">
<div style="width: 100%; display: flex; flex-direction: column;">
<div style="width: 100%; display: flex; flex-direction: row;">
<div class="select-itme-wrp">
<span class="material-icons" *ngIf="item['icon']"
[class.intent-start]="item[bindLabelSelect] === 'start'"
[class.intent-defaultFallback]="item[bindLabelSelect] === 'defaultFallback'">{{item['icon']}}</span>
<span class="label-select">{{item[bindLabelSelect]}}</span>
<span *ngIf="optionalBindAdditionalText" class="label-select-option">{{item[optionalBindAdditionalText]}}</span>
</div>
<div style="width: 100%; display: flex; flex-direction: row;">
<div class="select-itme-wrp">
<span *ngIf="optionalBindDescription" class="label-select-option description">{{item[optionalBindDescription]}}</span>
</div>
</div>
Expand Down
53 changes: 33 additions & 20 deletions src/app/chatbot-design-studio/cds-base-element/select/select.component.scss
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,12 @@
@import "./src/assets/sass/cds/_variables.scss";

.select-itme-wrp{
width: 100%;
display: flex;
flex-direction: row;
align-items: center;
}

::ng-deep{


Expand All @@ -12,7 +19,7 @@
span.material-icons{
font-size: 20px;
padding: 0px 4px;
color: $icon-color;
color: $blu-light-02;

&.intent-start{
color: #0aae10;
Expand All @@ -24,6 +31,8 @@

span.label-select {
margin-right: 4px;
color: $blu;
line-height: 17px;
}

span.label-select-option {
Expand All @@ -39,21 +48,21 @@
text-overflow: ellipsis;
}

&.ng-option-marked {
background-color: rgba(#545454, .23) !important;
}
// &.ng-option-marked {
// // background-color: rgba($blu-light-02, .23) !important;
// }

&.ng-option-selected{
background-color: rgba(#545454, .43) !important;
// &.ng-option-selected{
// // background-color: rgba($blu-light-02, .43) !important;

span.label-select-option {
color: #848484;
}
// // span.label-select-option {
// // color: #848484;
// // }

span.description {
color: #848484;
}
}
// // span.description {
// // color: #848484;
// // }
// }

&:hover {
.icon-container {
Expand All @@ -75,7 +84,7 @@
span.material-icons{
font-size: 20px;
padding: 0px 4px;
color: $icon-color;
color: $blu-light-03;

&.intent-start{
color: #0aae10;
Expand All @@ -88,6 +97,7 @@

span.label-select {
margin-right: 4px;
color: $blu
}

span.label-select-option {
Expand All @@ -97,21 +107,24 @@
}

.ng-clear-wrapper{
height: 17px;
width: 17px;
height: 14px;
width: 14px;
display: flex;
}

}

.ng-value-container .ng-input{
display: flex;
top: 0px !important;
height: 43px;
// top: 0px !important;
// height: 43px;
}

.ng-clear-wrapper{
height: 17px;
width: 17px;
height: 14px;
width: 14px;
display: flex;

}

.ng-dropdown-panel .ng-dropdown-footer {
Expand Down
Loading

0 comments on commit d452707

Please sign in to comment.