add modal in similar case page
This commit is contained in:
Tykayn
tykayn
parent
a2afad0545
commit
8ef68379de
15 changed files with 371 additions and 185 deletions
|
|
@ -9,4 +9,20 @@
|
|||
float: right;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.alert {
|
||||
border-radius: 8px;
|
||||
|
||||
&.is-warning {
|
||||
color: #A7582B;
|
||||
font-family: Barlow;
|
||||
font-size: 14px;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
line-height: 120%;
|
||||
padding: 18px;
|
||||
|
||||
background: #FDF3EE;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -7,6 +7,7 @@
|
|||
}
|
||||
<span class="label">
|
||||
{{ label }}
|
||||
<ng-content></ng-content>
|
||||
</span>
|
||||
@if (divider) {
|
||||
<span class="pipe">|</span>
|
||||
|
|
|
|||
|
|
@ -5,4 +5,161 @@
|
|||
|
||||
|
||||
:host {
|
||||
display: inline-block;
|
||||
font-family: Barlow;
|
||||
|
||||
|
||||
.pipe {
|
||||
margin-left: 10px;
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
button {
|
||||
|
||||
background: transparent;
|
||||
color: shadows.$neutral-white;
|
||||
border-radius: shadows.$radius-main;
|
||||
padding: 17px 24px;
|
||||
cursor: pointer;
|
||||
transition: all 0.25s ease;
|
||||
border: 0;
|
||||
width: 100%;
|
||||
margin-top: 8px;
|
||||
font-size: 18px;
|
||||
|
||||
i {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
}
|
||||
|
||||
//&:hover, &:active, &:focus {
|
||||
// transition: all 0.25s ease;
|
||||
//}
|
||||
|
||||
&:hover {
|
||||
background: var(--Gradient, linear-gradient(77deg, #073A7C -4.23%, #1767AD 51.8%, #255B8E 87.72%));
|
||||
}
|
||||
|
||||
&.is-size {
|
||||
&-large {
|
||||
padding: 17px 24px;
|
||||
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
line-height: 26px;
|
||||
}
|
||||
|
||||
&-medium {
|
||||
padding: 14px 18px;
|
||||
border-radius: var(--radius-2, 8px);
|
||||
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
line-height: 20px;
|
||||
}
|
||||
|
||||
&-small {
|
||||
padding: 14px 10px;
|
||||
border-radius: var(--radius-2, 8px);
|
||||
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
line-height: 20px;
|
||||
|
||||
}
|
||||
|
||||
&-extrasm {
|
||||
padding: 10px 10px;
|
||||
border-radius: var(--radius-2, 4px);
|
||||
color: var(--Colors-Blanc, #FFF);
|
||||
|
||||
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
line-height: 18px;
|
||||
}
|
||||
}
|
||||
|
||||
&.is-disabled {
|
||||
background-color: #BED7EE;
|
||||
color: white;
|
||||
}
|
||||
|
||||
&.is-primary {
|
||||
background: var(--Gradient, linear-gradient(77deg, #073A7C -4.23%, #1767AD 51.8%, #255B8E 87.72%));
|
||||
color: variables.$neutral-white;
|
||||
border-color: color.adjust(variables.$primary-color, $lightness: - 10%);
|
||||
|
||||
&:hover {
|
||||
background: var(--Hover, linear-gradient(70deg, #073A7C 43.99%, #1767AD 94.38%, #255B8E 126.68%));
|
||||
}
|
||||
|
||||
&:focus {
|
||||
border: 3px solid var(--Colors-Principal-100, #96BEE4);
|
||||
background: var(--Gradient, linear-gradient(77deg, #073A7C -4.23%, #1767AD 51.8%, #255B8E 87.72%));
|
||||
}
|
||||
|
||||
&.is-disabled {
|
||||
background-color: #BED7EE !important;
|
||||
color: white;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
&.is-secondary {
|
||||
//background: variables.$neutral-white;
|
||||
background: white;
|
||||
border: solid 1px #255B8E;
|
||||
color: variables.$neutral-white;
|
||||
color: #255B8E;
|
||||
|
||||
&.is-disabled {
|
||||
background-color: #BED7EE;
|
||||
color: white;
|
||||
}
|
||||
}
|
||||
|
||||
&.is-ghost {
|
||||
background: variables.$neutral-white;
|
||||
color: #255B8E;
|
||||
border: 0;
|
||||
|
||||
&:focus {
|
||||
background: variables.$neutral-white;
|
||||
}
|
||||
|
||||
&.is-disabled {
|
||||
background-color: #BED7EE;
|
||||
color: #BED7EE;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background: #dedede;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
&.is-link {
|
||||
background: variables.$neutral-white;
|
||||
color: #255B8E;
|
||||
border: 0;
|
||||
|
||||
&:hover {
|
||||
background: #dedede;
|
||||
}
|
||||
|
||||
|
||||
.label {
|
||||
text-decoration: underline;
|
||||
text-decoration-color: variables.$primary-color;
|
||||
}
|
||||
|
||||
&.is-disabled {
|
||||
background-color: #BED7EE;
|
||||
color: #BED7EE;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -4,6 +4,7 @@
|
|||
|
||||
.input-box {
|
||||
width: 218px;
|
||||
color: #1b1d27;
|
||||
|
||||
.d-none {
|
||||
display: none;
|
||||
|
|
@ -36,7 +37,8 @@
|
|||
}
|
||||
|
||||
.selector-button {
|
||||
top: -60px;
|
||||
|
||||
top: -52px;
|
||||
left: 188px;
|
||||
width: 20px;
|
||||
}
|
||||
|
|
@ -47,14 +49,17 @@
|
|||
background: variables.$csc-chips-bg-color;
|
||||
color: white;
|
||||
border-radius: 200px;
|
||||
padding: 10px;
|
||||
|
||||
display: inline-block;
|
||||
line-height: 10px;
|
||||
position: relative;
|
||||
z-index: 11;
|
||||
height: 30px;
|
||||
top: 0;
|
||||
right:-153px;
|
||||
|
||||
top: -32px;
|
||||
right: -163px;
|
||||
font-size: 14px;
|
||||
padding: 5px 7px;
|
||||
min-width: 2.5ch;
|
||||
|
||||
|
||||
&.is-visible {
|
||||
|
|
@ -84,7 +89,8 @@
|
|||
border-color: #8D91A4;
|
||||
background: #fff;
|
||||
color: #8D91A4;
|
||||
i{
|
||||
|
||||
i {
|
||||
color: #525668;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
34
my-workspace/projects/sae-lib/modal/confirm/confirm.html
Normal file
34
my-workspace/projects/sae-lib/modal/confirm/confirm.html
Normal file
|
|
@ -0,0 +1,34 @@
|
|||
<div class="confirm-modal-background">
|
||||
<div class="confirm-modal">
|
||||
<div class="title">
|
||||
|
||||
<ng-content select="modal-title">Search for new question</ng-content>
|
||||
</div>
|
||||
<div class="body">
|
||||
<ng-content select="modal-main"></ng-content>
|
||||
<ng-content>
|
||||
<p>Do you need a search for new client’s question ?</p>
|
||||
<p>
|
||||
Once you click the bouton YES, you will leave this page and start a search for new client’s question.
|
||||
</p>
|
||||
|
||||
<sae-alert-box [alertKind]="'warning'"
|
||||
[message]="'Current search results will disappear. Please copy important contents before leaving.'"></sae-alert-box>
|
||||
</ng-content>
|
||||
</div>
|
||||
<div class="footer">
|
||||
<div class="footer-text">
|
||||
<ng-content select="modal-footer"></ng-content>
|
||||
</div>
|
||||
<div class="actions">
|
||||
|
||||
<ng-content (click)="confirm()" select="modal-confirm">
|
||||
<sae-m-button [kind]="'ghost'">Yes</sae-m-button>
|
||||
</ng-content>
|
||||
<ng-content (click)="reject()" select="modal-reject">
|
||||
<sae-m-button [kind]="'primary'">No, i stay</sae-m-button>
|
||||
</ng-content>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
54
my-workspace/projects/sae-lib/modal/confirm/confirm.scss
Normal file
54
my-workspace/projects/sae-lib/modal/confirm/confirm.scss
Normal file
|
|
@ -0,0 +1,54 @@
|
|||
:host {
|
||||
position: fixed;
|
||||
z-index: 1000;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
background: rgba(0, 0, 0, 0.2);
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
.confirm-modal {
|
||||
width: 500px;
|
||||
border-radius: 8px;
|
||||
background: #FFF;
|
||||
box-shadow: 0 19px 29px 0 rgba(30, 31, 34, 0.05);
|
||||
padding: 24px 29px;
|
||||
|
||||
}
|
||||
|
||||
.body {
|
||||
color: #000;
|
||||
font-family: Barlow;
|
||||
font-size: 14px;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
line-height: 120%; /* 16.8px */
|
||||
}
|
||||
|
||||
.title {
|
||||
color: #000;
|
||||
leading-trim: both;
|
||||
text-edge: cap;
|
||||
font-family: Barlow;
|
||||
font-size: 20px;
|
||||
font-style: normal;
|
||||
font-weight: 600;
|
||||
line-height: 20px; /* 100% */
|
||||
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.actions {
|
||||
padding-top: 24px;
|
||||
display: flex;
|
||||
align-content: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
p {
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
}
|
||||
23
my-workspace/projects/sae-lib/modal/confirm/confirm.spec.ts
Normal file
23
my-workspace/projects/sae-lib/modal/confirm/confirm.spec.ts
Normal file
|
|
@ -0,0 +1,23 @@
|
|||
import { ComponentFixture, TestBed } from '@angular/core/testing';
|
||||
|
||||
import { Confirm } from './confirm';
|
||||
|
||||
describe('Confirm', () => {
|
||||
let component: Confirm;
|
||||
let fixture: ComponentFixture<Confirm>;
|
||||
|
||||
beforeEach(async () => {
|
||||
await TestBed.configureTestingModule({
|
||||
imports: [Confirm]
|
||||
})
|
||||
.compileComponents();
|
||||
|
||||
fixture = TestBed.createComponent(Confirm);
|
||||
component = fixture.componentInstance;
|
||||
fixture.detectChanges();
|
||||
});
|
||||
|
||||
it('should create', () => {
|
||||
expect(component).toBeTruthy();
|
||||
});
|
||||
});
|
||||
25
my-workspace/projects/sae-lib/modal/confirm/confirm.ts
Normal file
25
my-workspace/projects/sae-lib/modal/confirm/confirm.ts
Normal file
|
|
@ -0,0 +1,25 @@
|
|||
import {Component, Input} from '@angular/core';
|
||||
import {MainButton} from '../../buttons/main-button/main-button';
|
||||
import {AlertBox} from '../../alert-box/alert-box';
|
||||
|
||||
@Component({
|
||||
selector: 'sae-confirm',
|
||||
imports: [
|
||||
MainButton,
|
||||
AlertBox
|
||||
],
|
||||
templateUrl: './confirm.html',
|
||||
styleUrl: './confirm.scss'
|
||||
})
|
||||
export class Confirm {
|
||||
|
||||
@Input() showWhen: any = false;
|
||||
|
||||
confirm() {
|
||||
|
||||
}
|
||||
|
||||
reject() {
|
||||
|
||||
}
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue