devlev1980
1/22/2019 - 5:53 AM
Dialog in CSS,TS
<div class="dialog" *ngIf="fileName!== ''">
<div class="dialog__container">
<button class="dialog__close" (click)="closeDialog()">
<img src="../../../../assets/icons/BIG X.png" alt="סגירה">
</button>
<h2 class="dialog__title">הודעת מערכת</h2>
<div class="dialog__content">
<p class="dialog__text">
מוגן על פי חוק הגנת הפרטיות. אין להעתיק, להפיץ, להציג או למסור לצד שלישי את המידע או חלקו. המוסר את המידע שלא כדין עובר עבירה.
</p>
<p class="dialog__text-bold">
בלחיצה על “קראתי והסכמתי”, הינך מאשר/ת בזאת כי קראת את המפורט לעיל וכי השימוש במידע יבוצע בהתאם.
</p>
</div>
<div class="buttons">
<a href="{{fileName}}" class="dialog__download" (click)="closeDialog()">קראתי והסכמתי</a>
<button class="dialog__cancel" (click)="closeDialog()">ביטול</button>
</div>
</div>
</div>.dialog {
background-color: rgba(85, 85, 85, 0.4);
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
.dialog__container {
position: absolute;
background-color: #fff;
top: 30%;
right: 30%;
padding: 18px 20px 30px 20px;
box-shadow: 0px 2px 5px 0 rgba(0, 0, 0, 0.1);
}
.dialog__title {
font-size: 32px;
color: #555555;
font-weight: 300;
font-family: Assistant;
margin-bottom: 27px;
}
.dialog__content {
border-top: 1px solid #e2e2e2;
padding: 46px 0 48px 119px;
}
.dialog__text,
.dialog__text-bold {
font-size: 18px;
line-height: 1.33;
color: #555555;
max-width: 650px;
}
.dialog__text-bold {
font-weight: 600;
margin: 0;
}
button.dialog__cancel {
color: #2c7095;
font-size: 15px;
font-weight: 600;
background: transparent;
text-decoration: underline;
cursor: pointer;
}
.dialog__download {
background-color: #2c7095;
border: 0;
color: #ffffff;
min-width: 100px;
padding: 10px 25px;
box-sizing: border-box;
font-size: 15px;
text-decoration: none;
cursor: pointer;
}
button.dialog__close {
background: transparent;
position: absolute;
left: 29px;
top: 26px;
min-width: auto;
width: 18px;
height: 18px;
cursor: pointer;
padding: 0;
}
@media (max-width:768px) {
.dialog__container {
top: 100px;
left: 20px;
right: 20px;
}
.dialog__content {
padding-left: 20px;
}
.dialog__download,
button.dialog__cancel {
display: block;
text-align: center;
width: 100%;
}
}import { Component, OnInit, Input, OnChanges, Output, EventEmitter } from '@angular/core';
@Component({
selector: 'dialog-comp',
templateUrl: './dialog.component.html',
styleUrls: ['./dialog.component.css']
})
export class DialogComp implements OnInit,OnChanges {
constructor() { }
@Input() fileName: string="";
@Output() closeDialogEmitter: EventEmitter<string> = new EventEmitter<string>();
ngOnInit() {
this.fileName = '';
}
ngOnChanges(){
}
closeDialog(){
this.closeDialogEmitter.emit("")
}
}
<div class="wrapper">
<div class="allLinksComponent" *ngFor="let item of linksData">
<all-links-comp [linksData]="item" (openDialog)="openDialog($event)"></all-links-comp>
</div>
</div>
<div class="dialog">
<dialog-comp [fileName]="fileName" (closeDialogEmitter)="openDialog($event)"></dialog-comp>
</div>
import { Component, Input } from "@angular/core";
@Component({
selector: "general-content-comp",
templateUrl: "./general-content.component.html",
styleUrls: ["./general-content.component.css"]
})
export class generalContentComp {
@Input() isLogdIn: boolean = true;
@Input() h2Text: string = "Test";
@Input() breadcrumbs = [
{ aText: "תלמידים", aHref: "#" },
{ aText: "אוכלוסיות", aHref: "#" },
{ aText: "חינוך מיוחד", aHref: "#" },
{ aText: "שעות סיוע תגבור לתלמיד בחינוך מיוחד", aHref: "" }
];
fileName:string;
linksData: ILinksData[] = [
//1
{
isNotLoggedIn:false,
isNotLoggedIn_aText:'להזדהות',
isNotLoggedIn_aHref:'#',
title:'דוחות וניתוח מידע',
linkTitle:[
{
aText:'התפלגות שירותי חמ"נ בבית הספר',
aHref:'#',
isNew:true,
// externalAlertText:'אין לך הרשאות לצפות בניתוח המידע זה',
reportBtn:[
{
reportBtn_text:'דוח סייעות',
reportBtn_fileName:'idan.xls',
reportBtn_iconSrcEnable:'excel icon.png',
reportBtn_iconSrcDisable:'excelIcon.png',
reportBtn_iconAlt:'קובץ להורדה'
},
{
reportBtn_text:'דוח אחר',
reportBtn_fileName:'idan.pdf',
reportBtn_iconSrcEnable:'excel icon.png',
reportBtn_iconSrcDisable:'excelIcon.png',
reportBtn_iconAlt:'קובץ להורדה'
},
],
},
{
aText:'דו”ח סייעות',
aHref:'#',
externalAlertText:'אין לך הרשאות לצפות בניתוח המידע זה',
reportBtn:[
{
reportBtn_text:'דוח סייעות',
reportBtn_fileName:'idan.xls',
reportBtn_iconSrcEnable:'excel icon.png',
reportBtn_iconSrcDisable:'excelIcon.png',
reportBtn_iconAlt:'קובץ להורדה'
}
]
},
{
aText:'דו”ח אחר ',
aHref:'#'
},
],
pText:'שלוש שורות של הסבר לגבי ניתוח המידע ושוב שלוש שורות של הסבר לגבי ניתוח המידע',
inAccLink:[
{
aText:'מעבר לעמוד ניתוח מידע',
aHref:'#',
}
],
allLinks:{
aText:'לעוד דוחות וקישורים',
aHref:'#'
}
},
//2
{
title:'קישורים ',
linkTitle:[
{
aText:'מדב”ס/אופקית',
aHref:'#',
isNew:true,
icon:[
{
iconSrc:'link.png',
iconAlt:'קישור חיצוני'
}
]
},
{
aText:' מע’ תיק עו”ה מקוון ',
aHref:'#',
icon:[
{
iconSrc:'link.png',
iconAlt:'קישור חיצוני'
},
{
iconSrc:'Internet Explorer.png',
iconAlt:'קישור חיצוני'
},
]
},
{
aText:' פורטל עובדי הוראה ',
aHref:'#',
icon:[
{
iconSrc:'link.png',
iconAlt:'קישור חיצוני'
},
]
},
{
aText:' מע’ הערכת עובדי הוראה ',
aHref:'#',
icon:[
{
iconSrc:'link.png',
iconAlt:'קישור חיצוני'
},
]
},
{
aText:' מע’ פרישת עו”ה רשמיים ',
aHref:'#',
icon:[
{
iconSrc:'link.png',
iconAlt:'קישור חיצוני'
},
]
}
],
pText:'שלוש שורות של הסבר לגבי ניתוח המידע ושוב שלוש שורות של הסבר לגבי ניתוח המידע',
inAccLink:[
{
aText:'מעבר לעמוד ניתוח מידע',
aHref:'#'
}
],
allLinks:{
aText:'לעוד דוחות וקישורים',
aHref:'#'
}
},
// 3
{
title:'מסמכים להורדה ',
linkTitle:[
{
aText:'מסמך ראשון להורדה',
aHref:'#',
aDownload:'sample.pdf',
icon:[
{
iconSrc:'attachment.png',
iconAlt:'הורדה'
},
],
},
{
aText:'מסמך שני נוסף להורדה',
aHref:'#',
aDownload:'sample.pdf',
icon:[
{
iconSrc:'attachment.png',
iconAlt:'הורדה'
},
]
},
{
aText:'מסמך שלישי ונוסף להורדה',
aHref:'#',
aDownload:'sample.pdf',
icon:[
{
iconSrc:'attachment.png',
iconAlt:'הורדה'
},
]
}
],
pText:'שלוש שורות של הסבר לגבי ניתוח המידע ושוב שלוש שורות של הסבר לגבי ניתוח המידע',
inAccLink:[
{
aText:'מעבר לעמוד ניתוח מידע',
aHref:'#'
}
]
},
// 4
{
title:'חוזרי מנכ”ל ',
linkTitle:[
{
aText:'מסמך ראשון להורדה',
aHref:'#',
aDownload:'sample.pdf',
icon:[
{
iconSrc:'attachment.png',
iconAlt:'הורדה'
},
]
},
{
aText:'מסמך שני נוסף להורדה',
aHref:'#',
aDownload:'sample.pdf',
icon:[
{
iconSrc:'attachment.png',
iconAlt:'הורדה'
},
]
},
{
aText:'מסמך שלישי ונוסף להורדה ',
aHref:'#',
aDownload:'sample.pdf',
icon:[
{
iconSrc:'attachment.png',
iconAlt:'הורדה'
},
]
},
{
aText:'מסמך רביעי ונוסף להורדה',
aHref:'#',
aDownload:'sample.pdf',
icon:[
{
iconSrc:'attachment.png',
iconAlt:'הורדה'
},
]
},
{
aText:'מסמך חמישי ונוסף להורדה',
aHref:'#',
aDownload:'sample.pdf',
icon:[
{
iconSrc:'attachment.png',
iconAlt:'הורדה'
},
]
}
],
pText:'שלוש שורות של הסבר לגבי ניתוח המידע ושוב שלוש שורות של הסבר לגבי ניתוח המידע',
inAccLink:[
{
aText:'מעבר לעמוד ניתוח מידע',
aHref:'#'
}
]
},
// 5
{
title:'חומרי הדרכה ',
linkTitle:[
{
aText:'סרטון הדרכה ',
aHref:'#',
icon:[
{
iconSrc:'vector-smart-object.png',
iconAlt:'סרטון'
},
]
},
{
aText:'מסמך שני נוסף להורדה',
aHref:'#',
aDownload:'sample.pdf',
icon:[
{
iconSrc:'attachment.png',
iconAlt:'הורדה'
},
]
},
{
aText:'מסמך שלישי ונוסף להורדה ',
aHref:'#',
aDownload:'sample.pdf',
icon:[
{
iconSrc:'attachment.png',
iconAlt:'הורדה'
},
]
},
],
pText:'שלוש שורות של הסבר לגבי ניתוח המידע ושוב שלוש שורות של הסבר לגבי ניתוח המידע',
inAccLink:[
{
aText:'מעבר לעמוד ניתוח מידע',
aHref:'#'
}
]
},
// 6
{
title:'שירותים ',
linkTitle:[
{
aText:'מסמך ראשון להורדה',
aHref:'#',
icon:[
{
iconSrc:'attachment.png',
iconAlt:'הורדה'
},
]
},
{
aText:'מסמך שני נוסף להורדה',
aHref:'#',
aDownload:'sample.pdf',
icon:[
{
iconSrc:'attachment.png',
iconAlt:'הורדה'
},
]
},
{
aText:'מסמך שלישי ונוסף להורדה ',
aHref:'#',
aDownload:'sample.pdf',
icon:[
{
iconSrc:'attachment.png',
iconAlt:'הורדה'
},
]
},
{
aText:'מסמך רביעי ונוסף להורדה ',
aHref:'#',
aDownload:'sample.pdf',
icon:[
{
iconSrc:'attachment.png',
iconAlt:'הורדה'
},
]
},
{
aText:'מסמך חמישי ונוסף להורדה ',
aHref:'#',
aDownload:'sample.pdf',
icon:[
{
iconSrc:'attachment.png',
iconAlt:'הורדה'
},
]
},
],
pText:'שלוש שורות של הסבר לגבי ניתוח המידע ושוב שלוש שורות של הסבר לגבי ניתוח המידע',
inAccLink:[
{
aText:'מעבר לעמוד ניתוח מידע',
aHref:'#'
}
]
}
];
openDialog(event){
this.fileName = event;
}
}
interface ILinksData {
isNotLoggedIn?:boolean;
isNotLoggedIn_aHref?:string;
isNotLoggedIn_aText?:string;
title: string;
linkTitle?: ILinkTitle[];
pText?: string;
btnReportText?:string;
externalAlertText?:string;
inAccLink?: ILinkTitle[];
icon?: IIcon[];
allLinks?: ILinkTitle;
}
interface ILinkTitle {
aText: string;
aHref: string;
icon?:IIcon[];
aDownload?:string;
imgDownloadSrc?: string;
imgDownloadAlt?: string;
isReport?:boolean;
isNew?:boolean;
reportBtn?: IReportButton[];
externalAlertText?:string;
}
interface IIcon {
iconSrc: string;
iconAlt: string;
}
interface IReportButton{
reportBtn_text?:string;
reportBtn_fileName?:string;
reportBtn_iconSrcEnable?:string;
reportBtn_iconSrcDisable?:string;
reportBtn_iconAlt?:string;
}