Skip to content

Commit

Permalink
new UI
Browse files Browse the repository at this point in the history
  • Loading branch information
Gabriele Panico committed Oct 24, 2023
1 parent 049ee45 commit 8d7ed19
Show file tree
Hide file tree
Showing 17 changed files with 132 additions and 144 deletions.
8 changes: 4 additions & 4 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,7 +17,7 @@
(change) = "onChangeActionButton($event)">

<ng-template ng-label-tmp let-item="item">
<div class="select-itme-wrp">
<div class="select-item-wrp">
<span class="material-icons" *ngIf="item['icon']"
[class.intent-start]="item[bindLabelSelect] === 'start'"
[class.intent-defaultFallback]="item[bindLabelSelect] === 'defaultFallback'">{{item['icon']}}</span>
Expand All @@ -27,16 +27,16 @@
</ng-template>

<ng-template ng-option-tmp let-item="item" let-index="index">
<div class="select-itme-wrp" style="justify-content: space-between;">
<div class="select-item-wrp" style="justify-content: space-between;">
<div style="width: 100%; display: flex; flex-direction: column;">
<div class="select-itme-wrp">
<div class="select-item-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 class="select-itme-wrp">
<div class="select-item-wrp">
<span *ngIf="optionalBindDescription" class="label-select-option description">{{item[optionalBindDescription]}}</span>
</div>
</div>
Expand Down
3 changes: 2 additions & 1 deletion 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,10 +1,11 @@
@import "./src/assets/sass/cds/_variables.scss";

.select-itme-wrp{
.select-item-wrp{
width: 100%;
display: flex;
flex-direction: row;
align-items: center;
font-size: 14px;
}

::ng-deep{
Expand Down
6 changes: 3 additions & 3 deletions ...-canvas/actions/list/cds-action-whatsapp-static/cds-action-whatsapp-static.component.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -34,10 +34,10 @@

<div *ngIf="!previewMode" id="scrollMe" class="content-panel-intent-detail no-footer">

<div *ngIf="templates_list.length > 0 && !showLoader" id="select-template-box" class="select-template-box">
<div *ngIf="templates_list.length > 0 && !showLoader" id="select-template-box">

<!-- // Phone number id -->
<div class="phone-number-id-container">
<div class="field-box">
<label class="title-label">Phone number id</label>
<input id="phone-number-id"
type="text"
Expand Down Expand Up @@ -82,7 +82,7 @@
</div>
</div>

<div *ngIf="templates_list.length == 0 && !showLoader" id="select-template-box" class="select-template-box">
<div *ngIf="templates_list.length == 0 && !showLoader" id="select-template-box">
<p>Oops, looks like there is no template. <a
href="https://www.facebook.com/business/help/2055875911147364?id=2129163877102343"
target="_blank">Create one now!</a></p>
Expand Down
26 changes: 13 additions & 13 deletions ...-canvas/actions/list/cds-action-whatsapp-static/cds-action-whatsapp-static.component.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -29,21 +29,23 @@
input {
width: 100%;
height: 36px;
border-radius: 4px;
border: solid 1px #eee;
padding: 8px;
font-size: 14px;
letter-spacing: 1.5px;

border-radius: 8px;
background: $color-withe-hex;
border: 1px solid $blu-light-02 !important;
overflow-x: hidden;
overflow-y: auto;
color: $gray;
}

input::placeholder {
color: rgb(198, 198, 198);
opacity: 1; /* Firefox */
}

.phone-number-id-container {
margin-bottom: 10px;
}

.highlighted {
box-shadow: 0px 0px 4px 1px red;
Expand Down Expand Up @@ -74,7 +76,7 @@ input::placeholder {
padding: 4px;
border-radius: 50%;
box-shadow: unset;
background-color: white;
background-color: $color-withe-hex;
cursor: pointer;
}

Expand Down Expand Up @@ -108,8 +110,7 @@ input::placeholder {
//margin-top: -20px;
//padding: 0 20px;
display: none;
margin: 0 30px;
background-color: #354552;
background-color: $blu;
border-radius: 4px;
// animation: fadein 1s;
// animation-delay: 1s;
Expand All @@ -133,7 +134,7 @@ input::placeholder {
padding: 4px 10px 0px 10px;

span.title {
color: white;
color: $color-withe-hex;
font-size: 14px;
}
}
Expand All @@ -153,15 +154,14 @@ input::placeholder {
}

.icon-only:hover {
color: white;
color: $color-withe-hex;
}


::ng-deep pre {
background: #354552;
color: #d6e5db;
color: $color-withe-hex;
line-height: 16px;
margin-bottom: 30px;
margin-bottom: 0px;
padding: 10px;
overflow-x: auto;
border-radius: 4px;
Expand Down
34 changes: 6 additions & 28 deletions ...actions/shared/cds-action-controls/cds-action-controls/cds-action-controls.component.html
View file
Original file line number Diff line number Diff line change
@@ -1,32 +1,10 @@
<div class="action-controls">
<div class="action-control-btns-wpr">
<span class="action-control-btn" (click)="onClickAction('delete', $event)">
<svg xmlns="http://www.w3.org/2000/svg" height="16px" viewBox="0 0 24 24" width="16px" fill="#8E98A8">
<path d="M0 0h24v24H0V0z" fill="none" />
<path
d="M16 9v10H8V9h8m-1.5-6h-5l-1 1H5v2h14V4h-3.5l-1-1zM18 7H6v12c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7z" />
</svg>
</span>
<span class="action-control-btn" (click)="onClickAction('edit', $event)">
<svg xmlns="http://www.w3.org/2000/svg" enable-background="new 0 0 24 24" height="16px"
viewBox="0 0 24 24" width="16px" fill="#8E98A8">
<g>
<rect fill="none" height="24" width="24" />
</g>
<g>
<g>
<g>
<path
d="M3,21l3.75,0L17.81,9.94l-3.75-3.75L3,17.25L3,21z M5,18.08l9.06-9.06l0.92,0.92L5.92,19L5,19L5,18.08z" />
</g>
<g>
<path
d="M18.37,3.29c-0.39-0.39-1.02-0.39-1.41,0l-1.83,1.83l3.75,3.75l1.83-1.83c0.39-0.39,0.39-1.02,0-1.41L18.37,3.29z" />
</g>
</g>
</g>
</svg>
</span>

<div class="action-control-btn icon" (click)="onClickAction('delete', $event)">
<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">
</div>
</div>
</div>
49 changes: 49 additions & 0 deletions ...actions/shared/cds-action-controls/cds-action-controls/cds-action-controls.component.scss
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,49 @@
@import "./src/assets/sass/cds/_variables.scss";

// .action-controls {
// opacity: 0;
// pointer-events: none;
// position: absolute;
// right: calc(100% - 10px);
// // top: -5px;
// top: -4px;
// transition: opacity 0.2s, -webkit-transform 0.2s;
// transition: opacity 0.2s, transform 0.2s;
// transition: opacity 0.2s, transform 0.2s, -webkit-transform 0.2s;
// z-index: 1;
// }

.action-control-btns-wpr {
z-index: 10;
// background-color: #ebe2c6;
background-color: rgb(255, 255, 255);
box-shadow: rgba(0, 27, 71, 0.08) 0px 3px 8px;
display: flex;
align-items: center;
justify-content: center;
padding: 3px 0px;
border-radius: 14px;
height: 25px;
// gap: 8px;
}

.action-control-btn:first-child {
border-left: unset;
}
.action-control-btn {
cursor: pointer;
border-left: solid 1px $border-light;
padding: 2px 8px;
display: flex;
height: 20px

}

.icon img {
filter: brightness(0) saturate(100%) invert(46%) sepia(0%) saturate(0%) hue-rotate(216deg) brightness(94%) contrast(91%);
}
.icon:hover {
img {
filter: brightness(0) saturate(100%) invert(39%) sepia(19%) saturate(1139%) hue-rotate(184deg) brightness(91%) contrast(85%);
}
}
2 changes: 2 additions & 0 deletions src/app/chatbot-design-studio/cds-dashboard/cds-canvas/cds-intent/cds-intent.component.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1022,6 +1022,8 @@ cds-panel-intent-header.isStart ::ng-deep{

.option {
display: flex;
cursor: pointer;

&:hover {
opacity: 0.85;
}
Expand Down
38 changes: 6 additions & 32 deletions ...ashboard/cds-canvas/cds-intent/panel-intent-controls/panel-intent-controls.component.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,28 +6,22 @@
<!-- Delete intent -->
<!-- ---------------------------------- -->
<div *ngIf="!isInternalIntent"
class="intent-header-action-btn svg-icon--delete-intent"
class="intent-header-action-btn icon"
(click)="$event.stopPropagation();onDeleteIntent()"
matTooltipClass="cds-mat-tooltip"
matTooltip="Delete block"
#tooltip="matTooltip"
matTooltipPosition='above'
matTooltipHideDelay="100">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"
height="18px"
width="18px"
fill="#6c6859">
<path d="M0 0h24v24H0z" fill="none" />
<path d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z" />
</svg>
<img src="/assets/images/icons/bin.svg">
</div>

<!-- ---------------------------------- -->
<!-- Enable / disable intent webhook -->
<!-- ---------------------------------- -->
<!-- -->
<div *ngIf="deleteOptionEnabled"
class="intent-header-action-btn svg-icon--wh"
class="intent-header-action-btn icon"
[ngClass]="{'webhook-enabled': webhookEnabled }"
(mouseover)="onMouseOverWebhookBtn()"
(click)="toggleIntentWebhook()"
Expand Down Expand Up @@ -58,40 +52,20 @@
</g>
</svg> -->

<svg xmlns="http://www.w3.org/2000/svg" enable-background="new 0 0 24 24"
height="18px"
viewBox="0 0 24 24"
width="18px"
fill="#6c6859">
<g>
<rect fill="none" height="24" width="24" />
</g>
<g>
<path
d="M10,15l5.88,0c0.27-0.31,0.67-0.5,1.12-0.5c0.83,0,1.5,0.67,1.5,1.5c0,0.83-0.67,1.5-1.5,1.5c-0.44,0-0.84-0.19-1.12-0.5 l-3.98,0c-0.46,2.28-2.48,4-4.9,4c-2.76,0-5-2.24-5-5c0-2.42,1.72-4.44,4-4.9l0,2.07C4.84,13.58,4,14.7,4,16c0,1.65,1.35,3,3,3 s3-1.35,3-3V15z M12.5,4c1.65,0,3,1.35,3,3h2c0-2.76-2.24-5-5-5l0,0c-2.76,0-5,2.24-5,5c0,1.43,0.6,2.71,1.55,3.62l-2.35,3.9 C6.02,14.66,5.5,15.27,5.5,16c0,0.83,0.67,1.5,1.5,1.5s1.5-0.67,1.5-1.5c0-0.16-0.02-0.31-0.07-0.45l3.38-5.63 C10.49,9.61,9.5,8.42,9.5,7C9.5,5.35,10.85,4,12.5,4z M17,13c-0.64,0-1.23,0.2-1.72,0.54l-3.05-5.07C11.53,8.35,11,7.74,11,7 c0-0.83,0.67-1.5,1.5-1.5S14,6.17,14,7c0,0.15-0.02,0.29-0.06,0.43l2.19,3.65C16.41,11.03,16.7,11,17,11l0,0c2.76,0,5,2.24,5,5 c0,2.76-2.24,5-5,5c-1.85,0-3.47-1.01-4.33-2.5l2.67,0C15.82,18.82,16.39,19,17,19c1.65,0,3-1.35,3-3S18.65,13,17,13z" />
</g>
</svg>
<img src="/assets/images/icons/webhook.svg">
</div>

<!-- ---------------------------------- -->
<!-- Test intent play btn -->
<!-- ---------------------------------- -->
<div *ngIf="deleteOptionEnabled" class="intent-header-action-btn svg-icon--play"
<div *ngIf="deleteOptionEnabled" class="intent-header-action-btn icon"
(click)="openTestSiteInPopupWindow()"
matTooltipClass="cds-mat-tooltip"
matTooltip="Start test from here"
#tooltip="matTooltip"
matTooltipPosition='above'
matTooltipHideDelay="100">

<svg version="1.1" id="Livello_1" xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 24 24"
style="enable-background:new 0 0 24 24;" xml:space="preserve"
height="18px" width="18px" fill="#6c6859">
<path fill="none" d="M0,0h24v24H0V0z" />
<path d="M4.5,2.5v19l15-9.5L4.5,2.5z" />
</svg>

<img src="/assets/images/icons/play.svg">
</div>
</div>
</div>
19 changes: 11 additions & 8 deletions ...ashboard/cds-canvas/cds-intent/panel-intent-controls/panel-intent-controls.component.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -37,21 +37,24 @@
.intent-header-action-btn {
cursor: pointer;
border-left: solid 1px $border-light;
padding: 0 8px;
padding: 2px 8px;
display: flex;

}

.intent-header-action-btn:first-child {
border-left: unset;
}


.svg-icon--wh.webhook-enabled svg {
fill: #17B366;
.icon.webhook-enabled img {
filter: brightness(0) saturate(100%) invert(41%) sepia(79%) saturate(1263%) hue-rotate(121deg) brightness(101%) contrast(82%);
}

.svg-icon--wh:hover svg,
.svg-icon--delete-intent:hover svg,
.svg-icon--play:hover svg {
fill: #3ea9f5;
.icon img {
filter: brightness(0) saturate(100%) invert(46%) sepia(0%) saturate(0%) hue-rotate(216deg) brightness(94%) contrast(91%);
}
.icon:hover {
img {
filter: brightness(0) saturate(100%) invert(39%) sepia(19%) saturate(1139%) hue-rotate(184deg) brightness(91%) contrast(85%);
}
}
5 changes: 3 additions & 2 deletions src/app/chatbot-design-studio/cds-dashboard/cds-header/cds-header.component.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -86,9 +86,10 @@
matTooltip="Test it" #tooltip="matTooltip" matTooltipPosition='below'
matTooltipHideDelay="100">
<button id="cds-test-it-out-btn" class="btn btn-primary pull-right cds-blue-button" type="button" (click)="openTestSiteInPopupWindow()">
<span class="material-icons">
<!-- <span class="material-icons">
play_arrow
</span>
</span> -->
<img class="active-icon" width="18px" height="18px" src="assets/images/icons/play.svg">
</button>
</div>
<!-- <div class="cds-close-btn-wpr">
Expand Down
8 changes: 7 additions & 1 deletion src/app/chatbot-design-studio/cds-dashboard/cds-header/cds-header.component.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -115,10 +115,16 @@

#cds-test-it-out-btn{
background-color: transparent;
outline: 1px solid $blu-02;
outline: 2px solid $blu-02;
outline-offset: -1px;
color: $blu-02;
border-radius: 50%;

display: flex;
align-items: center;
justify-content: center;
padding: 6px 4px 6px 6px;

}

#cds-publish-btn:hover,
Expand Down
4 changes: 4 additions & 0 deletions src/assets/images/icons/bin.svg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
4 changes: 3 additions & 1 deletion src/assets/images/icons/edit.svg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
6 changes: 6 additions & 0 deletions src/assets/images/icons/play.svg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading

0 comments on commit 8d7ed19

Please sign in to comment.