Added the sample into the repository
This commit is contained in:
ROOT\soundarapandianr
Коммит
87c1cb66a8
|
|
@ -0,0 +1,60 @@
|
|||
{
|
||||
"$schema": "./node_modules/@angular/cli/lib/config/schema.json",
|
||||
"project": {
|
||||
"name": "ej2-ng-outlook"
|
||||
},
|
||||
"apps": [
|
||||
{
|
||||
"root": "src",
|
||||
"outDir": "dist",
|
||||
"assets": [
|
||||
"assets",
|
||||
"favicon.ico"
|
||||
],
|
||||
"index": "index.html",
|
||||
"main": "main.ts",
|
||||
"polyfills": "polyfills.ts",
|
||||
"test": "test.ts",
|
||||
"tsconfig": "tsconfig.app.json",
|
||||
"testTsconfig": "tsconfig.spec.json",
|
||||
"prefix": "app",
|
||||
"styles": [
|
||||
"styles.css"
|
||||
],
|
||||
"scripts": [],
|
||||
"environmentSource": "environments/environment.ts",
|
||||
"environments": {
|
||||
"dev": "environments/environment.ts",
|
||||
"prod": "environments/environment.prod.ts"
|
||||
}
|
||||
}
|
||||
],
|
||||
"e2e": {
|
||||
"protractor": {
|
||||
"config": "./protractor.conf.js"
|
||||
}
|
||||
},
|
||||
"lint": [
|
||||
{
|
||||
"project": "src/tsconfig.app.json",
|
||||
"exclude": "**/node_modules/**"
|
||||
},
|
||||
{
|
||||
"project": "src/tsconfig.spec.json",
|
||||
"exclude": "**/node_modules/**"
|
||||
},
|
||||
{
|
||||
"project": "e2e/tsconfig.e2e.json",
|
||||
"exclude": "**/node_modules/**"
|
||||
}
|
||||
],
|
||||
"test": {
|
||||
"karma": {
|
||||
"config": "./karma.conf.js"
|
||||
}
|
||||
},
|
||||
"defaults": {
|
||||
"styleExt": "css",
|
||||
"component": {}
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,15 @@
|
|||
dist/
|
||||
*d.ts
|
||||
*.map
|
||||
.vscode/
|
||||
src/**/*.js
|
||||
*.ngstyle.ts
|
||||
src/**/*.map
|
||||
node_modules/
|
||||
npm-debug.log
|
||||
*ngfactory.ts
|
||||
*metadata.json
|
||||
*ngsummary.json
|
||||
src/assets/index.css
|
||||
src/assets/*.css
|
||||
*.css
|
||||
|
|
@ -0,0 +1,21 @@
|
|||
# Essential JS 2 for Angular - Webmail
|
||||
|
||||
This Webmail demo application showcases the usage of several Essential JS 2 components in a real world application scenario. This demo explores a mailbox user interface which was inspired by the Outlook Office 365 application.
|
||||
|
||||
## Deployment
|
||||
|
||||
### Install
|
||||
|
||||
To install all dependent packages, use the below command
|
||||
|
||||
```
|
||||
npm install
|
||||
```
|
||||
|
||||
### Run
|
||||
|
||||
To run the sample, use the below command
|
||||
|
||||
```
|
||||
ng serve
|
||||
```
|
||||
|
|
@ -0,0 +1,10 @@
|
|||
Essential JS 2 library is available under the Syncfusion Essential Studio program, and can be licensed either under the Syncfusion Community License Program or the Syncfusion commercial license.
|
||||
|
||||
To be qualified for the Syncfusion Community License Program you must have a gross revenue of less than one (1) million U.S. dollars ($1,000,000.00 USD) per year and have less than five (5) developers in your organization, and agree to be bound by Syncfusion’s terms and conditions.
|
||||
|
||||
Customers who do not qualify for the community license can contact sales@syncfusion.com for commercial licensing options.
|
||||
|
||||
Under no circumstances can you use this product without (1) either a Community License or a commercial license and (2) without agreeing and abiding by Syncfusion’s license containing all terms and conditions.
|
||||
|
||||
The Syncfusion license that contains the terms and conditions can be found at
|
||||
https://www.syncfusion.com/content/downloads/syncfusion_license.pdf
|
||||
|
|
@ -0,0 +1,74 @@
|
|||
{
|
||||
"name": "@syncfusion/ej2-ng-outlook",
|
||||
"version": "0.0.1",
|
||||
"description": "Essential JS 2 for Angular - Webmail application",
|
||||
"author": "Syncfusion Inc.",
|
||||
"license": "SEE LICENSE IN license",
|
||||
"dependencies": {
|
||||
"rxjs": "^5.0.1",
|
||||
"tslint": "4.0.2",
|
||||
"zone.js": "^0.8.4",
|
||||
"core-js": "^2.4.1",
|
||||
"systemjs": "^0.19.40",
|
||||
"gulp-print": "^2.0.1",
|
||||
"gulp-tslint": "^7.0.1",
|
||||
"browser-sync": "2.11.2",
|
||||
"gulp-sass-lint": "^1.1.1",
|
||||
"reflect-metadata": "^0.1.9",
|
||||
"tslint-microsoft-contrib": "^4.0.0",
|
||||
"@angular/core": "~5.0.0",
|
||||
"@angular/http": "~5.0.0",
|
||||
"@angular/forms": "~5.0.0",
|
||||
"@angular/router": "^5.0.0",
|
||||
"@angular/common": "~5.0.0",
|
||||
"@angular/upgrade": "^5.0.0",
|
||||
"@angular/compiler": "~5.0.0",
|
||||
"@angular-devkit/core": "~0.0.19",
|
||||
"@angular/platform-browser": "~5.0.0",
|
||||
"@angular/platform-browser-dynamic": "~5.0.0",
|
||||
"@syncfusion/ej2-ng-base": "*",
|
||||
"@syncfusion/ej2-ng-navigations": "*",
|
||||
"@syncfusion/ej2-ng-lists": "*",
|
||||
"@syncfusion/ej2-ng-buttons": "*",
|
||||
"@syncfusion/ej2-ng-dropdowns": "*",
|
||||
"@syncfusion/ej2-ng-inputs": "*",
|
||||
"@syncfusion/ej2-ng-popups": "*"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@angular/cli": "1.6.3",
|
||||
"@angular/compiler-cli": "5.0.0",
|
||||
"@angular/platform-server": "5.0.0",
|
||||
"@types/jasmine": "^2.2.29",
|
||||
"@types/requirejs": "^2.1.26",
|
||||
"@types/node": "^6.0.46",
|
||||
"gulp": "^3.9.0",
|
||||
"webpack": "2.5.1",
|
||||
"shelljs": "^0.7.0",
|
||||
"typescript": "~2.4.2",
|
||||
"gulp-sass": "^3.1.0",
|
||||
"gulp-clean": "^0.3.2",
|
||||
"run-sequence": "2.2.0",
|
||||
"webpack-stream": "^3.2.0",
|
||||
"karma-systemjs": "^0.16.0",
|
||||
"gulp-typescript": "^2.13.0",
|
||||
"es6-module-loader": "^0.17.11",
|
||||
"systemjs-plugin-babel": "0.0.17"
|
||||
},
|
||||
"keywords": [
|
||||
"ej2",
|
||||
"samples",
|
||||
"outlook",
|
||||
"syncfusion",
|
||||
"ej2-samples",
|
||||
"ej2-outlook",
|
||||
"ej2-showcase-samples",
|
||||
"syncfusion-samples",
|
||||
"syncfusion-webmail"
|
||||
],
|
||||
"scripts": {
|
||||
"build": "npm run scripts && gulp styles && gulp bundle",
|
||||
"scripts": "ngc -p tsconfig-aot.json",
|
||||
"bundle": "gulp bundle",
|
||||
"ci-publish": "gulp publish-samples"
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,4 @@
|
|||
<div class='outlook-container'>
|
||||
<header-section></header-section>
|
||||
<content-area-section></content-area-section>
|
||||
</div>
|
||||
|
|
@ -0,0 +1,11 @@
|
|||
import { Component, HostListener } from '@angular/core';
|
||||
|
||||
@Component({
|
||||
selector: 'app-root',
|
||||
templateUrl: './app.component.html',
|
||||
styleUrls: ['./app.component.css'],
|
||||
})
|
||||
export class AppComponent {
|
||||
constructor() {
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,60 @@
|
|||
import { BrowserModule } from '@angular/platform-browser';
|
||||
import { NgModule } from '@angular/core';
|
||||
|
||||
import { TreeViewModule, ToolbarModule, AccordionModule, ContextMenuModule } from '@syncfusion/ej2-ng-navigations';
|
||||
import { ListViewModule } from '@syncfusion/ej2-ng-lists';
|
||||
import { ButtonModule } from '@syncfusion/ej2-ng-buttons';
|
||||
import { AutoCompleteModule, DropDownListModule, MultiSelectModule } from '@syncfusion/ej2-ng-dropdowns';
|
||||
import { DialogModule, PopupModule, TooltipModule } from '@syncfusion/ej2-ng-popups';
|
||||
|
||||
import { AppComponent } from './app.component';
|
||||
import { HeaderComponent } from './header/header.component';
|
||||
import { ContentAreaComponent } from './content-area/content-area.component';
|
||||
import { ReadingPaneComponent } from './content-area/readingpane/readingpane.component';
|
||||
import { SidebarComponent } from './content-area/sidebar/sidebar.component';
|
||||
import { SearchComponent } from './content-area/sidebar/search/search.component';
|
||||
import { NavigationComponent } from './content-area/sidebar/navigation/navigation.component';
|
||||
import { PopupComponent } from './content-area/popup/popup.component';
|
||||
import { ContentComponent } from './content-area/content/content.component';
|
||||
import { ToolsComponent } from './content-area/content/tools/tools.component';
|
||||
import { MessagePaneComponent } from './content-area/content/message-pane/message-pane.component';
|
||||
import { ContentPaneComponent } from './content-area/content/content-pane/content-pane.component';
|
||||
import { NewMailComponent } from './content-area/content/content-pane/newmail/newmail.component';
|
||||
|
||||
import { DataService } from './data-service';
|
||||
|
||||
@NgModule({
|
||||
declarations: [
|
||||
AppComponent,
|
||||
HeaderComponent,
|
||||
ContentAreaComponent,
|
||||
ReadingPaneComponent,
|
||||
SidebarComponent,
|
||||
SearchComponent,
|
||||
NavigationComponent,
|
||||
PopupComponent,
|
||||
ContentComponent,
|
||||
ToolsComponent,
|
||||
MessagePaneComponent,
|
||||
ContentPaneComponent,
|
||||
NewMailComponent
|
||||
],
|
||||
imports: [
|
||||
BrowserModule,
|
||||
TreeViewModule,
|
||||
ToolbarModule,
|
||||
AccordionModule,
|
||||
ContextMenuModule,
|
||||
ListViewModule,
|
||||
ButtonModule,
|
||||
AutoCompleteModule,
|
||||
DropDownListModule,
|
||||
MultiSelectModule,
|
||||
DialogModule,
|
||||
PopupModule,
|
||||
TooltipModule,
|
||||
],
|
||||
providers: [DataService],
|
||||
bootstrap: [AppComponent]
|
||||
})
|
||||
export class AppModule { }
|
||||
|
|
@ -0,0 +1,111 @@
|
|||
<div id="content-area" style="height: 100%">
|
||||
<div class='row content'>
|
||||
<sidebar-section #sidebarSection></sidebar-section>
|
||||
<popup-section #popupSection></popup-section>
|
||||
<content-section #contentSection></content-section>
|
||||
<div id='accodianContent'>
|
||||
<div style='height: 100px'>
|
||||
<div class='logo logo-style2' style='float:left'></div>
|
||||
<div class='messageHeader' style='float:left'>
|
||||
<div id='sub' style="font-size: 17px">
|
||||
</div>
|
||||
<div id='date' style="font-size: 11px; color: #666;" ></div>
|
||||
<div id='to' style="font-size: 12px;"></div>
|
||||
</div>
|
||||
<div style="right:0;position: absolute;">
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<div id='accContent'>
|
||||
</div>
|
||||
</div>
|
||||
<div id='reading-pane-popup'>
|
||||
<readingpane-section #readingPaneElement></readingpane-section>
|
||||
</div>
|
||||
</div>
|
||||
<div class="overlay-element" (click)="hideSideBar()">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<ejs-contextmenu id='treeContextMenu' #treeContextMenu [items]='treeMenuItems' target='#tree' (beforeOpen)='treeMenuBeforeOpen($event)'
|
||||
(select)='treeMenuSelect($event)' >
|
||||
</ejs-contextmenu>
|
||||
|
||||
<ejs-contextmenu id='filterContextMenu' #filterContextMenu [items]='filterMenuItems' (select)='filterMenuSelect($event)' >
|
||||
</ejs-contextmenu>
|
||||
|
||||
<ejs-dialog id="favoriteDialog" #favoriteDialog width='335px' header='Remove from Favorites' content='<div class="dlg-content-style"><span>Do you want to remove from favorites?</span></div>'
|
||||
[target]='dlgTarget' [isModal]='modalDialog' [animationSettings]='dlgAnimationSettings' closeOnEscape='true'
|
||||
[buttons]='favoritesDlgButtons' [visible]='dialogVisibility'>
|
||||
</ejs-dialog>
|
||||
|
||||
<ejs-dialog id="deleteDialog" #deleteDialog width='335px' header='Delete Folder Items' content='<div class="dlg-content-style"><span>Are you sure you want to move all its content to Deleted items?</span></div>'
|
||||
[target]='dlgTarget' [isModal]='modalDialog' [animationSettings]='dlgAnimationSettings' closeOnEscape='true'
|
||||
[buttons]='deleteDlgButtons' [visible]='dialogVisibility'>
|
||||
</ejs-dialog>
|
||||
|
||||
<ejs-dialog id="sentMailDialog" #sentMailDialog width="335px" header="Mail Sent" content='<div class="dlg-content-style"><span>Your mail has been sent successfully.</span></div>'
|
||||
[target] ='dlgTarget' [isModal]='modalDialog' [animationSettings]='dlgAnimationSettings' closeOnEscape='true'
|
||||
[buttons] ='sentDlgButtons' [visible]='dialogVisibility'>
|
||||
</ejs-dialog>
|
||||
<ejs-dialog id="discardDialog" #discardDialog width="335px" header="Discard Message" [content]='discardDlgContent' closeOnEscape='true'
|
||||
[target]='dlgTarget' [isModal]='modalDialog' [animationSettings]='dlgAnimationSettings' [visible]='dialogVisibility' >
|
||||
</ejs-dialog>
|
||||
<ejs-dialog id="newMailSeparateDialog" #newMailSeparateDialog width="80%" height="93%" [target]='dlgTarget' [animationSettings]='dlgAnimationSettings'
|
||||
closeOnEscape='true' [isModal]='nonModalDialog' [visible]='dialogVisibility' allowDragging='true'>
|
||||
</ejs-dialog>
|
||||
<ejs-dialog id="replyAllSeparateDialog" #replyAllSeparateDialog width="80%" height="93%" [target]='dlgTarget' [animationSettings]='dlgAnimationSettings'
|
||||
closeOnEscape='true' [isModal]='nonModalDialog' [visible]='dialogVisibility'>
|
||||
</ejs-dialog>
|
||||
<ejs-dialog id="sentMailNewWindow" #sentMailNewWindow width="335px" header="Mail Sent" content='<div class="dlg-content-style"><span>Your mail has been sent successfully.</span></div>'
|
||||
[target]='dlgTarget' [isModal]='nonModalDialog' [animationSettings]='dlgAnimationSettings' closeOnEscape='true'
|
||||
[buttons] = 'sentNewDlgButtons' [visible]='dialogVisibility'>
|
||||
</ejs-dialog>
|
||||
<ejs-dialog id="discardNewWindow" #discardNewWindow width="335px" header="Discard Message" [content]='discardDlgContent'
|
||||
[target]='dlgTarget' [isModal]='nonModalDialog' [animationSettings]='dlgAnimationSettings' closeOnEscape='true'
|
||||
[visible]='dialogVisibility'>
|
||||
</ejs-dialog>
|
||||
|
||||
<ejs-popup id="popupMailId" [position]='popupPosition' [relateTo]='popupRelativeElement' [offsetX]='popupOffsetX' [offsetY]='popupOffsetY' style="position:absolute;width:320px" #popupMail>
|
||||
<div id='popupContent' style="padding:10px 10px; width: 320px; height: 85px; background-color:#F2F2F2; color:#252525">
|
||||
<div style="float:left;pointer-events: none;">
|
||||
<div>
|
||||
<div id='popup-image' class='logo logo-style1 popup-logo-style'></div>
|
||||
</div>
|
||||
</div>
|
||||
<div style="left: 65px; top:5px; position: absolute;pointer-events: none;">
|
||||
<div style="margin-top: 2px">
|
||||
<span id='popup-contact' class="popup-subjectstyle-text" style="font-size:16px;font-weight:bold"> Richelle Mead </span>
|
||||
</div>
|
||||
<div class="popup-subjectstyle">
|
||||
<span id='popup-subject' class="popup-subjectstyle-text"> Networking Referral </span>
|
||||
</div>
|
||||
<div class="popup-subjectstyle">
|
||||
<span id='popup-message-content' class="popup-subjectstyle-text"> Dear Kelly, I was being referred to you by George Peterson from ROYALES Company in New York. He was ...</span>
|
||||
</div>
|
||||
</div>
|
||||
<div style="left:300px;position:absolute;font-size: 12px;">
|
||||
<span class="e-btn-icon ej-icon-Close"></span>
|
||||
</div>
|
||||
</div>
|
||||
</ejs-popup>
|
||||
|
||||
<div id='persontooltip' style="display: none;">
|
||||
<div id="persontooltipcontent" style="width: 304px;height: 91px;">
|
||||
<div style="float:left;width: 75px;height: 70px;">
|
||||
<div style="width: 65px;height: 65px;">
|
||||
<img id='persontooltipimage' style="width: 100%;height: 100%;border-radius: 33px;">
|
||||
</div>
|
||||
</div>
|
||||
<div style="width: 213px;height: 70px;float:left;">
|
||||
<div style="margin-top: 17px;font-size:medium;">
|
||||
<span id='persontooltipname'>Roman R</span>
|
||||
</div>
|
||||
<div style="font-size:small;margin-top: 5px;">
|
||||
<span id='persontooltipemail'>Roman@syncfusion.com</span>
|
||||
</div>
|
||||
<button ejs-button id="sentemail" iconCss='ej-icon-Mail' cssClass='btn-sentMail' style="margin-top: 18px;margin-left: -74px;">Sent Email</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -0,0 +1,560 @@
|
|||
import { Component, HostListener, ViewChild, AfterContentInit } from '@angular/core';
|
||||
import { ContextMenuComponent, MenuItemModel, MenuEventArgs, BeforeOpenCloseMenuEventArgs } from '@syncfusion/ej2-ng-navigations';
|
||||
import { SortOrder } from '@syncfusion/ej2-ng-lists';
|
||||
import { DialogComponent, PopupComponent } from '@syncfusion/ej2-ng-popups';
|
||||
import { ReadingPaneComponent } from './readingpane/readingpane.component';
|
||||
import { DataService } from '../data-service';
|
||||
|
||||
@Component({
|
||||
selector: 'content-area-section',
|
||||
templateUrl: 'content-area.component.html',
|
||||
})
|
||||
|
||||
export class ContentAreaComponent implements AfterContentInit {
|
||||
|
||||
constructor(private data: DataService) {
|
||||
}
|
||||
|
||||
@ViewChild('treeContextMenu')
|
||||
private treeContextMenu: ContextMenuComponent;
|
||||
@ViewChild('filterContextMenu')
|
||||
private filterContextMenu: ContextMenuComponent;
|
||||
@ViewChild('sentMailDialog')
|
||||
public dlgSentMail: DialogComponent;
|
||||
@ViewChild('sentMailNewWindow')
|
||||
public dlgSentMailNew: DialogComponent;
|
||||
@ViewChild('discardDialog')
|
||||
public dlgDiscard: DialogComponent;
|
||||
@ViewChild('discardNewWindow')
|
||||
public dlgDiscardNew: DialogComponent;
|
||||
@ViewChild('newMailSeparateDialog')
|
||||
public dlgReplyAllWindow: DialogComponent;
|
||||
@ViewChild('replyAllSeparateDialog')
|
||||
public dlgNewWindow: DialogComponent;
|
||||
@ViewChild('favoriteDialog')
|
||||
public dlgFavorite: DialogComponent;
|
||||
@ViewChild('deleteDialog')
|
||||
public dlgDelete: DialogComponent;
|
||||
@ViewChild('popupMail')
|
||||
public popupMail: PopupComponent;
|
||||
@ViewChild('readingPaneElement')
|
||||
public readingPaneComponent: ReadingPaneComponent;
|
||||
|
||||
// Tree ContextMenu binding properties
|
||||
public treeMenuItems: MenuItemModel[] = [
|
||||
{ text: 'Create new subfolder' }, { text: 'Rename' }, { text: 'Delete' },
|
||||
{ text: 'Add to Favorites' }, { text: 'Mark all as read' }
|
||||
];
|
||||
|
||||
// Filter ContextMenu binding properties
|
||||
public filterMenuItems: MenuItemModel[] = [
|
||||
{ text: 'All', iconCss: 'ej-icon-Right' }, { text: 'Unread' },
|
||||
{ text: 'Flagged' }, { separator: true }, { text: 'Sort by', items: [{ text: 'None' },
|
||||
{ text: 'Ascending', iconCss: 'ej-icon-Right' }, { text: 'Descending' }] }
|
||||
];
|
||||
|
||||
// Dialog binding properties
|
||||
public dialogVisibility: boolean = false;
|
||||
public dlgTarget: HTMLElement = document.body;
|
||||
public dlgAnimationSettings: Object = { effect: 'None' };
|
||||
public sentDlgButtons: Object[] = [{
|
||||
click: this.sendExitClick.bind(this),
|
||||
buttonModel: { content: 'OK', cssClass: 'e-flat', isPrimary: true }
|
||||
}];
|
||||
public sentNewDlgButtons: Object[] = [{
|
||||
click: this.sendExitClick.bind(this),
|
||||
buttonModel: { content: 'OK', cssClass: 'e-flat', isPrimary: true }
|
||||
}];
|
||||
public discardDlgContent: string = '<div class="discardOkDiv dlg-content-style1" style="cursor:pointer">' +
|
||||
'<span style="color:white" class="dlg-discard-text-style">Discard</span> <br/>' +
|
||||
'<span style="color:white; font-weight:normal" class="dlg-discard-child-text-style">This message will be deleted</span>' +
|
||||
'</div> <br/>' +
|
||||
'<div class="discardCancelDiv dlg-content-style" style="cursor:pointer">' +
|
||||
'<span class="dlg-discard-text-style">Don'+"'"+'t Discard</span> <br/>' +
|
||||
'<span style="font-weight:normal" class="dlg-discard-child-text-style">Return to the message for further editing</span>' +
|
||||
'</div>';
|
||||
public favoritesDlgButtons: Object[] = [
|
||||
{
|
||||
click: this.btnFavoriteOKClick.bind(this),
|
||||
buttonModel: { content: 'Yes', cssClass: 'e-flat', isPrimary: true }
|
||||
},
|
||||
{
|
||||
click: this.btnFavoriteCancelClick.bind(this),
|
||||
buttonModel: { content: 'No', cssClass: 'e-flat' }
|
||||
}
|
||||
];
|
||||
|
||||
public deleteDlgButtons: Object[] = [
|
||||
{
|
||||
click: this.btnDeleteOKClick.bind(this), buttonModel: { content: 'Yes', cssClass: 'e-flat', isPrimary: true }
|
||||
},
|
||||
{
|
||||
click: this.btnDeleteCancelClick.bind(this), buttonModel: { content: 'No', cssClass: 'e-flat' }
|
||||
}
|
||||
];
|
||||
|
||||
// Popup binding properties
|
||||
public popupPosition: { [key: string]: Object } = { X: 'right', Y: 'top' };
|
||||
public popupRelativeElement: string = '#content-area';
|
||||
public popupOffsetX: number = -5;
|
||||
public popupOffsetY: number = 5;
|
||||
|
||||
//Class Members
|
||||
public modalDialog: boolean = true;
|
||||
public nonModalDialog: boolean = false;
|
||||
private registerDiscardEvents: boolean = false;
|
||||
private lastIndex: number = 31;
|
||||
|
||||
public ngAfterContentInit(): void {
|
||||
document.getElementById('btnDiscard').addEventListener('click', this.discardButtonClick.bind(this));
|
||||
document.getElementById('btnFilter').addEventListener('click', this.btnFilterClick.bind(this));
|
||||
document.getElementById('btnCloseButton').addEventListener('click', this.btnCloseClick.bind(this));
|
||||
document.onclick = this.documentClick.bind(this);
|
||||
document.ondblclick = this.documentDoubleClick.bind(this);
|
||||
let popupContent: HTMLElement = document.getElementById('popupContent');
|
||||
popupContent.onclick = this.popupContentClick.bind(this);
|
||||
}
|
||||
|
||||
public treeMenuBeforeOpen(args: BeforeOpenCloseMenuEventArgs): void {
|
||||
let key: string = 'PID';
|
||||
let parentNode: string = this.data.treeviewSelectedData[key].toString();
|
||||
key = 'Favorite';
|
||||
let favorite: string = this.data.treeviewSelectedData[key].toString();
|
||||
if (favorite === 'Favorite-Composite') {
|
||||
favorite = 'Remove from Favorites';
|
||||
} else {
|
||||
favorite = 'Add to Favorites';
|
||||
}
|
||||
this.treeContextMenu.items[3].text = favorite;
|
||||
this.treeContextMenu.dataBind();
|
||||
if (parentNode === '1') {
|
||||
this.treeContextMenu.hideItems(['Create new subfolder', 'Rename']);
|
||||
} else {
|
||||
this.treeContextMenu.showItems(['Create new subfolder', 'Rename']);
|
||||
}
|
||||
}
|
||||
|
||||
public treeMenuSelect(args: MenuEventArgs): void {
|
||||
if (args.item) {
|
||||
let target: HTMLElement = this.data.treeSelectedElement.getElementsByClassName('e-btn-icon')[0] as HTMLElement;
|
||||
if (args.item.text === 'Create new subfolder') {
|
||||
this.lastIndex += 1;
|
||||
let key: string = 'ID';
|
||||
let item: {[key: string]: Object} = {
|
||||
'ID': this.lastIndex, 'PID': this.data.treeviewSelectedData[key].toString(), 'Name': 'New Folder' + this.lastIndex,
|
||||
'HasChild': false, 'Expanded': false, 'Count': '',
|
||||
'Favorite': 'Favorite', 'FavoriteMessage': 'Add to Favorites'
|
||||
};
|
||||
this.data.treeObj.addNodes([item], null, null);
|
||||
this.data.treeDataSource.push(item);
|
||||
} else if (args.item.text === 'Rename') {
|
||||
this.data.treeObj.beginEdit(this.data.treeviewSelectedData['ID'].toString());
|
||||
} else if (args.item.text === 'Delete') {
|
||||
if (this.data.selectedFolderName === 'Deleted Items') {
|
||||
this.dlgDelete.content = '<div class="dlg-content-style"><span>Are you sure you want to permanently' +
|
||||
' delete all the items in Deleted items?</span></div>';
|
||||
this.dlgDelete.header = 'Delete All';
|
||||
} else {
|
||||
this.dlgDelete.content = '<div class="dlg-content-style"><span>Are you sure you want to move all ' +
|
||||
'its content to Deleted items?</span></div>';
|
||||
this.dlgDelete.header = 'Delete Folder Items';
|
||||
}
|
||||
this.dlgDelete.show();
|
||||
} else if (args.item.text === 'Mark all as read') {
|
||||
this.data.markAllRead();
|
||||
} else if (args.item.text === 'Add to Favorites') {
|
||||
this.favoriteAction('add', target);
|
||||
} else if (args.item.text === 'Remove from Favorites') {
|
||||
this.favoriteAction('Remove', target);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
public filterMenuSelect(args: MenuEventArgs): void {
|
||||
if (args.item) {
|
||||
if (args.item.text === 'Ascending' || args.item.text === 'Descending' || args.item.text === 'None') {
|
||||
this.data.grpListObj.sortOrder = args.item.text as SortOrder;
|
||||
for (let i: number = 0; i < this.filterContextMenu.items[4].items.length; i++) {
|
||||
this.filterContextMenu.items[4].items[i].iconCss = '';
|
||||
}
|
||||
args.item.iconCss = 'ej-icon-Right';
|
||||
} else if (args.item.text !== 'Sort by') {
|
||||
this.data.clearFilterMenu();
|
||||
let dataSource: { [key: string]: Object }[] =
|
||||
this.data.getFilteredDataSource(this.data.messageDataSource, 'Folder', this.data.selectedFolderName);
|
||||
if (args.item.text === 'All') {
|
||||
this.data.grpListObj.dataSource = dataSource;
|
||||
} else if (args.item.text === 'Flagged') {
|
||||
this.data.grpListObj.dataSource = this.data.getFilteredDataSource(dataSource, 'Flagged', 'Flagged');
|
||||
} else if (args.item.text === 'Unread') {
|
||||
this.data.grpListObj.dataSource = this.data.getFilteredDataSource(dataSource, 'ReadStyle', 'Unread');
|
||||
}
|
||||
args.item.iconCss = 'ej-icon-Right';
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
private btnFilterClick(): void {
|
||||
let clientRect: ClientRect = document.getElementById('btnFilter').getBoundingClientRect();
|
||||
this.filterContextMenu.open(clientRect.top + 25, clientRect.left);
|
||||
}
|
||||
|
||||
private btnCloseClick(): void {
|
||||
let contentWrapper: Element = document.getElementsByClassName('row content')[0];
|
||||
contentWrapper.className = contentWrapper.className.replace(' show-header-content', '');
|
||||
let headerRP: Element = document.getElementsByClassName('header-right-pane selected')[0];
|
||||
headerRP.className = 'header-right-pane';
|
||||
}
|
||||
|
||||
private discardButtonClick(): void {
|
||||
if (!this.registerDiscardEvents) {
|
||||
let discardContent: HTMLCollectionOf<HTMLElement> =
|
||||
document.getElementsByClassName('discardOkDiv') as HTMLCollectionOf<HTMLElement>;
|
||||
for (let i: number = 0; i < discardContent.length; i++) {
|
||||
discardContent[i].addEventListener('click', this.discardOkClick.bind(this));
|
||||
}
|
||||
discardContent = document.getElementsByClassName('discardCancelDiv') as HTMLCollectionOf<HTMLElement>;
|
||||
for (let i: number = 0; i < discardContent.length; i++) {
|
||||
discardContent[i].addEventListener('click', this.discardCancelClick.bind(this));
|
||||
}
|
||||
this.registerDiscardEvents = true;
|
||||
}
|
||||
if (this.dlgNewWindow.visible || this.dlgReplyAllWindow.visible) {
|
||||
this.dlgDiscardNew.show();
|
||||
} else {
|
||||
this.dlgDiscard.show();
|
||||
}
|
||||
}
|
||||
|
||||
private discardOkClick(): void {
|
||||
this.discardClick();
|
||||
}
|
||||
|
||||
private discardCancelClick(): void {
|
||||
if (this.dlgNewWindow.visible || this.dlgReplyAllWindow.visible) {
|
||||
this.dlgDiscardNew.hide();
|
||||
} else {
|
||||
this.dlgDiscard.hide();
|
||||
}
|
||||
}
|
||||
|
||||
private sendExitClick(): void {
|
||||
if (this.dlgNewWindow.visible || this.dlgReplyAllWindow.visible) {
|
||||
this.dlgSentMailNew.hide();
|
||||
} else {
|
||||
this.dlgSentMail.hide();
|
||||
}
|
||||
this.discardClick();
|
||||
}
|
||||
|
||||
private btnFavoriteOKClick(): void {
|
||||
let key: string = 'PID';
|
||||
let parentID: string = this.data.treeviewSelectedData[key].toString();
|
||||
if (parentID === '1') {
|
||||
key = 'ID';
|
||||
this.removeTreeItem(this.data.treeviewSelectedData[key].toString());
|
||||
this.data.treeDataSource.splice(this.data.treeDataSource.indexOf(this.data.treeviewSelectedData), 1);
|
||||
} else {
|
||||
for (let i: number = 0; i < this.data.treeDataSource.length; i++) {
|
||||
let key: string = 'PID';
|
||||
let treeData: { [key: string]: Object } = this.data.treeDataSource[i];
|
||||
if (treeData[key] && treeData[key].toString() === '1') {
|
||||
key = 'Name';
|
||||
if (treeData[key].toString() === this.data.selectedFolderName) {
|
||||
key = 'ID';
|
||||
this.removeTreeItem(treeData[key].toString());
|
||||
this.data.treeDataSource.splice(i, 1);
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
this.dlgFavorite.hide();
|
||||
}
|
||||
|
||||
private btnFavoriteCancelClick(): void {
|
||||
this.dlgFavorite.hide();
|
||||
}
|
||||
|
||||
private btnDeleteOKClick(): void {
|
||||
let folderMessages: { [key: string]: Object }[] =
|
||||
this.data.getFilteredDataSource(this.data.messageDataSource, 'Folder', this.data.selectedFolderName);
|
||||
if (this.data.selectedFolderName === 'Deleted Items') {
|
||||
for (let i: number = 0; i < folderMessages.length; i++) {
|
||||
this.data.messageDataSource.splice(this.data.messageDataSource.indexOf(folderMessages[i]), 1);
|
||||
}
|
||||
} else {
|
||||
for (let i: number = 0; i < folderMessages.length; i++) {
|
||||
let key: string = 'Folder';
|
||||
folderMessages[i][key] = 'Deleted Items';
|
||||
}
|
||||
}
|
||||
this.data.grpListObj.dataSource = [];
|
||||
this.data.showEmptyMessage();
|
||||
this.dlgDelete.hide();
|
||||
}
|
||||
|
||||
private btnDeleteCancelClick(): void {
|
||||
this.dlgDelete.hide();
|
||||
}
|
||||
|
||||
private removeTreeItem(id: string): void {
|
||||
this.data.treeObj.removeNodes([id]);
|
||||
let element: Element = document.getElementsByClassName('ej-icon-Favorite-Composite ' + this.data.selectedFolderName)[0];
|
||||
element.className = 'e-btn-icon ej-icon-Favorite ' + this.data.selectedFolderName;
|
||||
let parent: HTMLElement = element.parentNode as HTMLElement;
|
||||
parent.title = 'Add to Favorites';
|
||||
let key: string = 'FavoriteMessage';
|
||||
this.data.treeviewSelectedData[key] = 'Add to Favorites';
|
||||
key = 'Favorite';
|
||||
this.data.treeviewSelectedData[key] = 'Favorite';
|
||||
}
|
||||
|
||||
public discardClick(): void {
|
||||
if (this.data.grpListObj.getSelectedItems()) {
|
||||
this.data.showSelectedMessage();
|
||||
} else {
|
||||
this.data.showEmptyMessage();
|
||||
}
|
||||
if (this.dlgNewWindow.visible || this.dlgReplyAllWindow.visible) {
|
||||
this.dlgDiscardNew.hide();
|
||||
if (this.dlgNewWindow.visible) {
|
||||
this.dlgNewWindow.hide();
|
||||
} else if (this.dlgReplyAllWindow.visible) {
|
||||
this.dlgReplyAllWindow.hide();
|
||||
}
|
||||
} else {
|
||||
this.dlgDiscard.hide();
|
||||
}
|
||||
let contentWrapper: Element = document.getElementsByClassName('content-wrapper')[0];
|
||||
contentWrapper.className = 'content-wrapper';
|
||||
}
|
||||
|
||||
private favoriteAction(type: string, target: HTMLElement): void {
|
||||
if (type === 'add') {
|
||||
target.className = 'e-btn-icon ej-icon-Favorite-Composite ' + this.data.selectedFolderName;
|
||||
(target.parentNode as HTMLElement).title = 'Remove from Favorites';
|
||||
let treeData: { [key: string]: Object } = this.data.cloneObject(this.data.treeviewSelectedData);
|
||||
let key: string = 'PID';
|
||||
treeData[key] = '1';
|
||||
key = 'ID';
|
||||
treeData[key] = Number(treeData[key]) + 111;
|
||||
key = 'Favorite';
|
||||
this.data.treeviewSelectedData[key] = treeData[key] = 'Favorite-Composite';
|
||||
key = 'Count';
|
||||
treeData[key] = (target.parentNode.parentNode.childNodes[1].childNodes[0] as HTMLElement).innerHTML;
|
||||
key = 'FavoriteMessage';
|
||||
this.data.treeviewSelectedData[key] = treeData[key] = 'Remove from Favorites';
|
||||
this.data.treeDataSource.push(treeData);
|
||||
this.data.treeObj.addNodes([treeData], null, null);
|
||||
} else {
|
||||
let ss: HTMLElement = document.getElementsByClassName('sidebar')[0] as HTMLElement;
|
||||
this.dlgFavorite.show();
|
||||
}
|
||||
}
|
||||
|
||||
private headerContent(headerElement: HTMLElement): void {
|
||||
let headerRP: Element = document.getElementsByClassName('header-right-pane selected')[0];
|
||||
if (headerRP) {
|
||||
headerRP.className = 'header-right-pane';
|
||||
}
|
||||
let contentWrapper: Element = document.getElementsByClassName('row content')[0];
|
||||
contentWrapper.className = contentWrapper.className.replace(' show-header-content', '') + ' show-header-content';
|
||||
let notificationElement: HTMLElement = document.getElementsByClassName('notification-content')[0] as HTMLElement;
|
||||
let settingsElement: HTMLElement = document.getElementsByClassName('settings-content')[0] as HTMLElement;
|
||||
let aboutElement: HTMLElement = document.getElementsByClassName('about-content')[0] as HTMLElement;
|
||||
let userElement: HTMLElement = document.getElementsByClassName('profile-content')[0] as HTMLElement;
|
||||
let txtHeaderContent: HTMLElement = document.getElementById('txtHeaderContent');
|
||||
notificationElement.style.display = 'none';
|
||||
settingsElement.style.display = 'none';
|
||||
aboutElement.style.display = 'none';
|
||||
userElement.style.display = 'none';
|
||||
headerElement.className = headerElement.className + ' ' + 'selected';
|
||||
switch (headerElement.id) {
|
||||
case 'notification-div':
|
||||
notificationElement.style.display = 'block';
|
||||
txtHeaderContent.innerHTML = 'Notification';
|
||||
break;
|
||||
case 'settings-div':
|
||||
settingsElement.style.display = 'block';
|
||||
txtHeaderContent.innerHTML = 'Settings';
|
||||
break;
|
||||
case 'profile-div':
|
||||
userElement.style.display = 'block';
|
||||
txtHeaderContent.innerHTML = 'My accounts';
|
||||
break;
|
||||
case 'about-div':
|
||||
aboutElement.style.display = 'block';
|
||||
txtHeaderContent.innerHTML = 'Help';
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
@HostListener('window:resize', ['$event'])
|
||||
@HostListener('window:load', ['$event'])
|
||||
private onWindowResize(evt: Event): void {
|
||||
let headerNode: Element = document.getElementsByClassName('header navbar')[0];
|
||||
let contentArea: Element = document.getElementsByClassName('row content')[0];
|
||||
let isReadingPane: boolean = (contentArea.className.indexOf('show-reading-pane') === -1);
|
||||
if (!isReadingPane && window.innerWidth < 605) {
|
||||
return;
|
||||
}
|
||||
if (window.innerWidth < 1200) {
|
||||
headerNode.className = 'header navbar head-pane-hide';
|
||||
let headerRP: Element = document.getElementsByClassName('header-right-pane selected')[0];
|
||||
if (headerRP) {
|
||||
headerRP.className = 'header-right-pane';
|
||||
}
|
||||
contentArea.className = 'row content';
|
||||
} else {
|
||||
headerNode.className = 'header navbar';
|
||||
if (contentArea.className.indexOf('show-header-content') === -1) {
|
||||
contentArea.className = 'row content';
|
||||
} else {
|
||||
contentArea.className = 'row content show-header-content';
|
||||
}
|
||||
}
|
||||
if (window.innerWidth < 1090) {
|
||||
contentArea.className = 'row content sidebar-hide';
|
||||
} else {
|
||||
this.hideSideBar();
|
||||
}
|
||||
if (window.innerWidth < 605) {
|
||||
if (isReadingPane) {
|
||||
contentArea.className = contentArea.className + ' ' + 'show-message-pane';
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
public hideSideBar(): void {
|
||||
this.data.hideSideBar();
|
||||
}
|
||||
|
||||
public documentDoubleClick(evt: MouseEvent): void {
|
||||
if (evt.target instanceof HTMLElement) {
|
||||
let target: HTMLElement = evt.target as HTMLElement;
|
||||
if (target.className.indexOf('template-container') !== -1) {
|
||||
if (!this.dlgReplyAllWindow.content) {
|
||||
this.dlgReplyAllWindow.content = document.getElementById('reading-pane-popup');
|
||||
this.dlgReplyAllWindow.refresh();
|
||||
}
|
||||
this.dlgReplyAllWindow.show();
|
||||
this.readingPaneComponent.bindReadingPaneData(this.data.getSelectedMessage());
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
public documentClick(evt: MouseEvent): void {
|
||||
let key: string = 'parentID';
|
||||
if (evt.target instanceof HTMLElement) {
|
||||
let target: HTMLElement = evt.target as HTMLElement;
|
||||
if (target.className.indexOf('header-right-pane') !== -1) {
|
||||
this.headerContent(evt.target as HTMLElement);
|
||||
} else if (!this.readingPaneComponent.dropdownSelectRP && this.dlgReplyAllWindow.visible &&
|
||||
target.innerText === this.readingPaneComponent.ddlLastRplyValueRP ) {
|
||||
this.readingPaneComponent.showMailDialogRP(this.readingPaneComponent.ddlLastRplyValueRP);
|
||||
} else if (!this.data.dropdownSelect && !this.dlgReplyAllWindow.visible && target.innerText === this.data.ddlReplyAllValue) {
|
||||
this.data.showNewMailPopup(this.data.ddlReplyAllValue);
|
||||
} else {
|
||||
if (target.tagName === 'SPAN' || (target.children && target.children.length > 0)) {
|
||||
target = target.tagName === 'SPAN' ? target : target.children[0] as HTMLElement;
|
||||
if (target.className === 'e-btn-icon ej-icon-Favorite ' + this.data.selectedFolderName) {
|
||||
this.favoriteAction('add', target);
|
||||
} else if (target.className === 'e-btn-icon ej-icon-Favorite-Composite ' + this.data.selectedFolderName) {
|
||||
this.favoriteAction('remove', target);
|
||||
} else if ((target.parentNode as HTMLElement).className === 'listview-btn') {
|
||||
let selectedMessage: { [key: string]: Object } = this.data.getSelectedMessage();
|
||||
if (target.className.indexOf('ej-icon-Delete') !== -1) {
|
||||
this.data.messageDataSource.splice(this.data.messageDataSource.indexOf(selectedMessage), 1);
|
||||
key = 'ContactID';
|
||||
this.data.grpListObj.removeItem({ id: selectedMessage[key].toString() });
|
||||
} else if (target.className.indexOf('ej-icon-Flag_1') !== -1) {
|
||||
this.data.flagListItem(target, selectedMessage);
|
||||
} else if (target.className.indexOf('ej-icon-Mark-as-read') !== -1 && !this.data.isItemClick) {
|
||||
let parentNode: HTMLElement = target.parentNode as HTMLElement;
|
||||
if (parentNode.title === 'Mark as read') {
|
||||
parentNode.title = 'Mark as unread';
|
||||
key = 'ContactID';
|
||||
this.data.setReadStyleMessage(selectedMessage[key].toString(), 'Read');
|
||||
} else if (parentNode.title === 'Mark as unread') {
|
||||
parentNode.title = 'Mark as read';
|
||||
key = 'ContactID';
|
||||
this.data.setReadStyleMessage(selectedMessage[key].toString(), 'Unread');
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
this.newMailWindowItemClick();
|
||||
this.readingPaneItemClick();
|
||||
this.data.isItemClick = false;
|
||||
this.data.dropdownSelect = false;
|
||||
}
|
||||
|
||||
public newMailWindowItemClick(): void {
|
||||
if (this.data.newMailComponent.selectedToolbarItem) {
|
||||
if (this.data.newMailComponent.selectedToolbarItem === 'tb-item-window-mail') {
|
||||
this.discardClick();
|
||||
this.dlgNewWindow.content = document.getElementById('newmailContent');
|
||||
this.dlgNewWindow.refresh();
|
||||
this.dlgNewWindow.show();
|
||||
} else if (this.data.newMailComponent.selectedToolbarItem === 'tb-item-back-mail') {
|
||||
this.dlgNewWindow.hide();
|
||||
} else if (this.data.newMailComponent.selectedToolbarItem === 'Send') {
|
||||
this.data.sendClick();
|
||||
} else if (this.data.newMailComponent.selectedToolbarItem === 'Discard') {
|
||||
this.discardButtonClick();
|
||||
}
|
||||
}
|
||||
this.data.newMailComponent.resetSelectedToolbarItem('');
|
||||
}
|
||||
|
||||
public readingPaneItemClick(): void {
|
||||
if (this.readingPaneComponent.selectedRPToolbarItem) {
|
||||
if (this.readingPaneComponent.selectedRPToolbarItem === 'SendClick') {
|
||||
this.data.sendClick();
|
||||
} else if (this.readingPaneComponent.selectedRPToolbarItem === 'DiscardClick') {
|
||||
this.discardButtonClick();
|
||||
} else if (this.readingPaneComponent.selectedRPToolbarItem === 'DeleteClick' ||
|
||||
this.readingPaneComponent.selectedRPToolbarItem === 'JunkClick') {
|
||||
let selectedMessage: { [key: string]: Object } = this.data.getSelectedMessage();
|
||||
this.data.messageDataSource.splice(this.data.messageDataSource.indexOf(selectedMessage), 1);
|
||||
let key: string = 'ContactID';
|
||||
this.data.grpListObj.removeItem({ id: selectedMessage[key].toString() });
|
||||
this.data.showEmptyMessage();
|
||||
this.dlgReplyAllWindow.hide();
|
||||
} else if (this.readingPaneComponent.selectedRPToolbarItem === 'ClosePopup') {
|
||||
this.dlgReplyAllWindow.hide();
|
||||
}
|
||||
}
|
||||
this.readingPaneComponent.resetRPSelectedItem('');
|
||||
}
|
||||
|
||||
public popupContentClick(evt: MouseEvent): void {
|
||||
if (evt.target instanceof HTMLElement) {
|
||||
let target: HTMLElement = evt.target as HTMLElement;
|
||||
if (target.className !== 'e-btn-icon ej-icon-Close' && window.innerWidth >= 1090) {
|
||||
let key: string = 'ContactID';
|
||||
this.data.grpListObj.selectItem({ id: this.data.messageDataSource[0][key].toString() });
|
||||
if (!this.dlgReplyAllWindow.content) {
|
||||
this.dlgReplyAllWindow.content = document.getElementById('reading-pane-popup');
|
||||
this.dlgReplyAllWindow.refresh();
|
||||
}
|
||||
this.dlgReplyAllWindow.show();
|
||||
this.readingPaneComponent.bindReadingPaneData(this.data.messageDataSource[0]);
|
||||
}
|
||||
this.popupMail.hide();
|
||||
}
|
||||
}
|
||||
|
||||
public ngAfterViewInit(): void {
|
||||
this.data.filterContextMenu = this.filterContextMenu;
|
||||
this.data.popupMail = this.popupMail;
|
||||
this.data.dlgNewWindow = this.dlgNewWindow;
|
||||
this.data.dlgReplyAllWindow = this.dlgReplyAllWindow;
|
||||
this.data.dlgSentMailNew = this.dlgSentMailNew;
|
||||
this.data.dlgSentMail = this.dlgSentMail;
|
||||
this.data.readingPaneComponent = this.readingPaneComponent;
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,15 @@
|
|||
<div id='reading-pane-div' class='reading-pane customScrollBar'>
|
||||
<div id='emptyMessageDiv' style='width: 100%;text-align: center; vertical-align: middle; padding: 15px;height:100%; background-color:#fff;'>
|
||||
<div style="top:35%; left: 40%; position: absolute; display: block">
|
||||
<div class="emptyImageDiv"></div> <br/>
|
||||
<span class="emptyDivText">Choose a message to read it.</span>
|
||||
</div>
|
||||
</div>
|
||||
<ejs-accordion id='accordian' #accordian style='display: none;'></ejs-accordion>
|
||||
|
||||
<div id='mailarea' style='display: none; height:100%; background-color:#fff;'>
|
||||
</div>
|
||||
<div id="newmailContent">
|
||||
<newmail-section #newmailPane></newmail-section>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -0,0 +1,31 @@
|
|||
import { Component, ViewEncapsulation, OnInit, ViewChild } from '@angular/core';
|
||||
import { NewMailComponent } from './newmail/newmail.component';
|
||||
import { TooltipComponent, TooltipEventArgs } from '@syncfusion/ej2-ng-popups';
|
||||
import { AccordionComponent } from '@syncfusion/ej2-ng-navigations';
|
||||
import { DataService } from '../../../data-service';
|
||||
|
||||
@Component({
|
||||
selector: 'content-pane-section',
|
||||
templateUrl: './content-pane.component.html',
|
||||
encapsulation: ViewEncapsulation.None,
|
||||
})
|
||||
|
||||
export class ContentPaneComponent implements OnInit {
|
||||
|
||||
/** Configurations for the Content pane page */
|
||||
constructor(private _data: DataService) {
|
||||
}
|
||||
|
||||
@ViewChild('newmailPane')
|
||||
public newMailComponent: NewMailComponent;
|
||||
@ViewChild('accordian')
|
||||
public acrdnObj: AccordionComponent;
|
||||
|
||||
public ngOnInit(): void {
|
||||
}
|
||||
|
||||
public ngAfterViewInit(): void {
|
||||
this._data.newMailComponent = this.newMailComponent;
|
||||
this._data.acrdnObj = this.acrdnObj;
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,104 @@
|
|||
<div class="toolbar-parent-newmail">
|
||||
<div style='width:100%;height:40px;'>
|
||||
<ejs-toolbar id='toolbar_newmail' #toolbarHeader height='100%' overflowMode='Popup' (clicked)="toolbarNewMailClick($event)">
|
||||
<e-items>
|
||||
<e-item prefixIcon ='ej-icon-Send tb-icons' text='Send' tooltipText='Send' ></e-item>
|
||||
<e-item prefixIcon ='ej-icon-Attach tb-icons' text='Attach' tooltipText='Attach' ></e-item>
|
||||
<e-item text ='Discard' ></e-item>
|
||||
<e-item cssClass='tb-item-more tb-item-more-mail' tooltipText='More actions'>
|
||||
<ng-template #template>
|
||||
<ejs-dropdownlist id='moreList2' #moreItemList2 [dataSource]='moreMailList'
|
||||
value="Show From" [fields]='dropdownField' popupHeight="150px" popupWidth="150px">
|
||||
<ng-template #valueTemplate let-data>
|
||||
<div class="tb-dropdowns" style ="font-size: 16px;margin-top: -2px;"><span class="e-btn-icon e-icons ej-icon-More"></span></div>
|
||||
</ng-template>
|
||||
</ejs-dropdownlist>
|
||||
</ng-template>
|
||||
</e-item>
|
||||
<e-item prefixIcon='ej-icon-Copy tb-icons' tooltipText='Edit in a separate window'
|
||||
cssClass='tb-item-window-mail' align='right'>
|
||||
</e-item>
|
||||
<e-item prefixIcon='ej-icon-Close tb-icons' tooltipText='Close' align='right'
|
||||
cssClass='tb-item-back-mail' >
|
||||
</e-item>
|
||||
</e-items>
|
||||
</ejs-toolbar>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mail-content-div customScrollBar">
|
||||
<div class="mail-id" style="color: white">
|
||||
<button ejs-button id='btnTo' style='width:50px; float:left'>To</button>
|
||||
<ejs-multiselect id='autoTo' #autoTo [dataSource]='contactsList' [fields]='multiSelectFields'
|
||||
mode='Box' placeholder= '' [width]='multiSelectWidth' cssClass ='ac-new-mail' delimiterChar=';'
|
||||
popupWidth='300px' allowFiltering='true' (filtering)='onFiltering($event)'>
|
||||
<ng-template #itemTemplate let-data>
|
||||
<div class="multiselect-template parent-div">
|
||||
<img class="contacts-item-image-style" src={{data.Image}} alt="employee"/>
|
||||
<div class="contacts-item-text-style">
|
||||
<div>{{data.ContactName}}</div>
|
||||
</div>
|
||||
<div class="contacts-item-subtext-style">{{data.MailId}}</div>
|
||||
</div>
|
||||
</ng-template>
|
||||
<ng-template #valueTemplate let-data>
|
||||
<div>
|
||||
<img class="contacts-value-img-style" src="{{data.Image}}" alt="employee"/>
|
||||
<div class="contacts-value-text-style">{{data.MailId}}</div>
|
||||
</div>
|
||||
</ng-template>
|
||||
</ejs-multiselect>
|
||||
</div>
|
||||
<div class="mail-id" style="color: white">
|
||||
<button ejs-button id='btnCc' style='width:50px; float:left'>Cc</button>
|
||||
<ejs-multiselect id='autoCc' #autoCc [dataSource]='contactsList' [fields]='multiSelectFields'
|
||||
mode='Box' placeholder= '' [width]='multiSelectWidth' cssClass ='ac-new-mail' delimiterChar=';'
|
||||
popupWidth='300px' allowFiltering='true' (filtering)='onFiltering($event)'>
|
||||
<ng-template #itemTemplate let-data>
|
||||
<div class="multiselect-template parent-div">
|
||||
<img class="contacts-item-image-style" src="{{data.Image}}" alt="employee"/>
|
||||
<div class="contacts-item-text-style">
|
||||
<div>{{data.ContactName}}</div>
|
||||
</div>
|
||||
<div class="contacts-item-subtext-style">{{data.MailId}}</div>
|
||||
</div>
|
||||
</ng-template>
|
||||
<ng-template #valueTemplate let-data>
|
||||
<div>
|
||||
<img class="contacts-value-img-style" src="{{data.Image}}" alt="employee"/>
|
||||
<div class="contacts-value-text-style">{{data.MailId}}</div>
|
||||
</div>
|
||||
</ng-template>
|
||||
</ejs-multiselect>
|
||||
</div>
|
||||
<div class="mail-subject e-input-group">
|
||||
<input type='text' id='txtSubject' style="width: 100%" placeholder="Enter Subject Here" class="e-input" (focus) = "onFocus()" (blur) = "onBlur()" />
|
||||
</div>
|
||||
<div>
|
||||
<div id='mailContentMessage' class="customScrollBar" contenteditable="true"></div>
|
||||
</div>
|
||||
<div class='mail-text-edit-tb-parent'>
|
||||
<ejs-toolbar id='new_email_toolbar' #toolbarMailOption height='100%' overflowMode='Popup'>
|
||||
<e-items>
|
||||
<e-item prefixIcon= 'ej-icon-Font tb-icons' tooltipText= 'Font' ></e-item>
|
||||
<e-item prefixIcon= 'ej-icon-Font-Size path2 tb-icons' tooltipText= 'Font Size' ></e-item>
|
||||
<e-item prefixIcon= 'ej-icon-Bold tb-icons' tooltipText= 'Bold' ></e-item>
|
||||
<e-item prefixIcon= 'ej-icon-Italic tb-icons' tooltipText= 'Italic' ></e-item>
|
||||
<e-item prefixIcon= 'ej-icon-Underlined tb-icons' tooltipText= 'Underline' ></e-item>
|
||||
<e-item prefixIcon= 'ej-icon-Highlight tb-icons' tooltipText= 'Highlight' ></e-item>
|
||||
<e-item prefixIcon= 'ej-icon-Font-Color-Icon tb-icons' tooltipText= 'Font color' ></e-item>
|
||||
<e-item prefixIcon= 'ej-icon-Bullets tb-icons' tooltipText= 'Bullets' ></e-item>
|
||||
<e-item prefixIcon= 'ej-icon-Numbering tb-icons' tooltipText= 'Numbering' ></e-item>
|
||||
<e-item prefixIcon= 'ej-icon-Decr-Indent tb-icons' tooltipText= 'Decrease Indent' ></e-item>
|
||||
<e-item prefixIcon= 'ej-icon-Incr-Indent tb-icons' tooltipText= 'Increase Indent' ></e-item>
|
||||
<e-item prefixIcon= 'ej-icon-Left-aligned tb-icons' tooltipText= 'Decrease Indent' ></e-item>
|
||||
<e-item prefixIcon= 'ej-icon-Centre-aligned tb-icons' tooltipText= 'Increase Indent' ></e-item>
|
||||
<e-item prefixIcon= 'ej-icon-Right-aligned tb-icons' tooltipText= 'Decrease Indent' ></e-item>
|
||||
<e-item prefixIcon= 'ej-icon-Hyperlink tb-icons' tooltipText= 'Hyperlink' ></e-item>
|
||||
</e-items>
|
||||
</ejs-toolbar>
|
||||
</div>
|
||||
<div>
|
||||
<button ejs-button id='btnSend' style='margin: 8px 0px; background-color: #0078D7; color: #fff' (click)="sendClick()">Send</button>
|
||||
<button ejs-button id='btnDiscard' style='margin: 8px 0px;'>Discard</button>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -0,0 +1,121 @@
|
|||
import { Component, ViewChild } from '@angular/core';
|
||||
import { ToolbarComponent, ClickEventArgs } from '@syncfusion/ej2-ng-navigations';
|
||||
import { MultiSelectComponent, FilteringEventArgs } from '@syncfusion/ej2-ng-dropdowns';
|
||||
import { Query } from '@syncfusion/ej2-data';
|
||||
import { getContacts } from '../../../../data/datasource';
|
||||
import { DataService } from '../../../../data-service';
|
||||
|
||||
@Component({
|
||||
selector: 'newmail-section',
|
||||
templateUrl: 'newmail.component.html'
|
||||
})
|
||||
|
||||
export class NewMailComponent {
|
||||
|
||||
/** Configurations for the new mail page */
|
||||
constructor(private data: DataService) {
|
||||
}
|
||||
|
||||
@ViewChild('autoTo')
|
||||
public autoToList: MultiSelectComponent;
|
||||
@ViewChild('autoCc')
|
||||
public autoCCList: MultiSelectComponent;
|
||||
@ViewChild('toolbarHeader')
|
||||
public toolbarHeader1: ToolbarComponent;
|
||||
@ViewChild('toolbarMailOption')
|
||||
public toolbarMail: ToolbarComponent;
|
||||
|
||||
public contactsList: {[key: string]: Object}[] = getContacts();
|
||||
public moreMailList: { [key: string]: Object }[] = [
|
||||
{ text: 'Save draft' }, { text: 'Show From' }, { text: 'Check Names' }, { text: 'Show message options' }
|
||||
];
|
||||
public dropdownField: Object = { text: 'text', value: 'text' };
|
||||
public multiSelectFields: Object = { text: 'MailId', value: 'MailId' };
|
||||
public multiSelectWidth: string = 'calc(100% - 60px)';
|
||||
public isNewWindow: boolean = true;
|
||||
public selectedToolbarItem: string = '';
|
||||
|
||||
public toolbarNewMailClick(args: ClickEventArgs): void {
|
||||
if (args.item) {
|
||||
if (args.item.cssClass === 'tb-item-window-mail' || args.item.cssClass === 'tb-item-back-mail') {
|
||||
this.selectedToolbarItem = args.item.cssClass;
|
||||
} else if (args.item.text === 'Send' || args.item.text === 'Discard') {
|
||||
this.selectedToolbarItem = args.item.text;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
public resetSelectedToolbarItem(text: string): void {
|
||||
this.selectedToolbarItem = text;
|
||||
}
|
||||
|
||||
public clearMailForm(): void {
|
||||
if (this.autoCCList.value) {
|
||||
this.autoCCList.value = [] as [string];
|
||||
}
|
||||
if (this.autoToList.value) {
|
||||
this.autoToList.value = [] as [string];
|
||||
}
|
||||
(document.getElementById('txtSubject') as HTMLInputElement).value = '';
|
||||
document.getElementById('mailContentMessage').innerHTML = '';
|
||||
}
|
||||
|
||||
public sendClick(): void {
|
||||
this.data.sendClick();
|
||||
}
|
||||
|
||||
public onFiltering(e: FilteringEventArgs): void {
|
||||
let query: Query = new Query();
|
||||
query = (e.text !== '') ? query.where('ContactName', 'startswith', e.text, true) : query;
|
||||
e.updateData(this.contactsList, query);
|
||||
}
|
||||
|
||||
public onFocus(): void {
|
||||
document.getElementsByClassName('mail-subject e-input-group')[0].classList.add('e-input-focus');
|
||||
}
|
||||
|
||||
public onBlur(): void {
|
||||
document.getElementsByClassName('mail-subject e-input-group')[0].classList.remove('e-input-focus');
|
||||
}
|
||||
|
||||
public showMailDialog(option: string, selectedMessage: {[key: string]: Object}): void {
|
||||
this.clearMailForm();
|
||||
let key: string = '';
|
||||
this.toolbarHeader1.refreshOverflow();
|
||||
this.toolbarMail.refreshOverflow();
|
||||
if (selectedMessage) {
|
||||
if (option === 'Reply Tooltip') {
|
||||
key = 'Email';
|
||||
this.autoToList.value = [selectedMessage[key].toString()];
|
||||
} else if (option !== 'New') {
|
||||
if (option !== 'Forward') {
|
||||
if (option !== 'Reply') {
|
||||
key = 'CCMail';
|
||||
this.autoCCList.value = selectedMessage[key] as [string];
|
||||
}
|
||||
key = 'Email';
|
||||
this.autoToList.value = [selectedMessage[key].toString()];
|
||||
}
|
||||
key = 'ContactTitle';
|
||||
(document.getElementById('txtSubject') as HTMLInputElement).value = selectedMessage[key].toString();
|
||||
key = 'Message';
|
||||
if (selectedMessage[key]) {
|
||||
document.getElementById('mailContentMessage').innerHTML = selectedMessage[key].toString();
|
||||
} else {
|
||||
document.getElementById('mailContentMessage').innerHTML =
|
||||
decodeURI('%3Cdiv%20id=%22box%22%20style=%22padding:10px;%20border:%20none;%20height:%20auto;' +
|
||||
'%22%20contenteditable=%22true%22%20data-gramm_id=%223898c552-c710-10db-69ec-08371185eb3f%22%20' +
|
||||
'data-gramm=%22true%22%20spellcheck=%22false%22%20data-gramm_editor=%22true%22%3E%3Cp%20class=%22' +
|
||||
'MsoNormal%22%3EDear%20Name, %3C/p%3E%0A%0A%3Cp%20class=%22MsoNormal%22%3EI%20really%20' +
|
||||
'appreciate%20your%20understanding%20and%20support%20regarding%0Athe%20changes%20we\'re%20' +
|
||||
'making%20to%20the%20project%20plan. %3C/p%3E%0A%0A%3Cp%20class=%22' +
|
||||
'MsoNormal%22%3EThank%20you%20for%20your%20confidence%20in%20me.%20I\'m%20sure%20' +
|
||||
'you\'re%20going%0Ato%20be%20pleased%20with%20the%20results. %3C/p%3E%0A%0A%3Cp%20class=%22' +
|
||||
'MsoNormal%22%3EBest%20Regards,%3Cbr%3E%0AYour%20Name%3Co:p%3E%3C/o:p%3E%3C/p%3E%0A%0A%20%20%20%20%3C/div%3E');
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
|
@ -0,0 +1,9 @@
|
|||
<div class='content-wrapper' role='main' (click)="hideSideBar()">
|
||||
<div class='content' style='height:100%'>
|
||||
<tools-section #toolsSection></tools-section>
|
||||
<div class='maincontent_pane' style='background-color:#fff; width:100%;height:calc(100% - 40px);color:white'>
|
||||
<message-pane-section #messagePaneSection></message-pane-section>
|
||||
<content-pane-section #contentPaneSection></content-pane-section>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -0,0 +1,21 @@
|
|||
import { Component, ViewEncapsulation, OnInit } from '@angular/core';
|
||||
import { DataService } from '../../data-service';
|
||||
@Component({
|
||||
selector: 'content-section',
|
||||
templateUrl: './content.component.html',
|
||||
encapsulation: ViewEncapsulation.None,
|
||||
})
|
||||
|
||||
export class ContentComponent implements OnInit {
|
||||
|
||||
/** Configurations for the Content page */
|
||||
constructor(private data: DataService) {
|
||||
}
|
||||
|
||||
public hideSideBar(): void {
|
||||
this.data.hideSideBar();
|
||||
}
|
||||
|
||||
public ngOnInit(): void {
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,14 @@
|
|||
<div class='message-pane customScrollBar' style='overflow: auto'>
|
||||
<div class="filter-section">
|
||||
<div style='float: left; margin-top: 5px;'>
|
||||
<span id="spanFilterText" style='font-size: 22px;color:#333333'>Inbox</span>
|
||||
</div>
|
||||
<div style='right:25px; position: absolute; top:10px'>
|
||||
<span style='font-size: 16px; color: #0078D7'>Filter</span>
|
||||
<button ejs-button id='btnFilter' style='color: #0078D7' iconCss='ej-icon-Dropdown-arrow' cssClass='btn-shadow-hide'></button>
|
||||
</div>
|
||||
</div>
|
||||
<ejs-listview id='listview-grp' #listview1 [dataSource]='messageDataSource' [template]='listTemplate'
|
||||
tabindex='1' [fields]='listviewFields' sortOrder='None' (select)='listViewSelect($event)' >
|
||||
</ejs-listview>
|
||||
</div>
|
||||
|
|
@ -0,0 +1,112 @@
|
|||
import { Component, ViewEncapsulation, OnInit, ViewChild } from '@angular/core';
|
||||
import { ListViewComponent, SelectEventArgs } from '@syncfusion/ej2-ng-lists';
|
||||
import { DataService } from '../../../data-service';
|
||||
|
||||
@Component({
|
||||
selector: 'message-pane-section',
|
||||
templateUrl: './message-pane.component.html',
|
||||
encapsulation: ViewEncapsulation.None,
|
||||
})
|
||||
|
||||
export class MessagePaneComponent implements OnInit {
|
||||
|
||||
/** Configurations for the Message pane page */
|
||||
constructor(private _data: DataService) {
|
||||
this.messageDataSource = this._data.messageDataSource;
|
||||
}
|
||||
|
||||
@ViewChild('listview1')
|
||||
public grpListObj: ListViewComponent;
|
||||
|
||||
// List View binding properties
|
||||
public messageDataSource: { [key: string]: Object }[] = null;
|
||||
public listTemplate: string = this.getListTemplate();
|
||||
public listviewFields: {[key: string]: Object} = { id: 'ContactID' };
|
||||
|
||||
private getListTemplate(): string {
|
||||
return '<div class="template-container ${ReadStyle}-parent">' +
|
||||
'<div style="height:30px; pointer-events:none;">' +
|
||||
'<div class="sender-style" style="float:left; margin-top: 2px">${ContactName}</div>' +
|
||||
'<div style="right:25px; position: absolute; margin-top: 2px; pointer-events:all;">' +
|
||||
'<button id="btnListDelete" title="Delete" class="listview-btn">' +
|
||||
'<span class="e-btn-icon ej-icon-Delete"></span>' +
|
||||
'</button>' +
|
||||
'<button id="btnListFlag" title="${FlagTitle}" class="listview-btn">' +
|
||||
'<span class="e-btn-icon ej-icon-Flag_1 ${Flagged}"></span>' +
|
||||
'</button>' +
|
||||
'<button id="btnListRead" title="${ReadTitle}" class="listview-btn">' +
|
||||
'<span class="e-btn-icon ej-icon-Mark-as-read"></span>' +
|
||||
'</button>' +
|
||||
'</div>' +
|
||||
'</div>' +
|
||||
'<div class="subjectstyle ${ReadStyle}" style="height:25px">' +
|
||||
'<div style="float:left; margin-top: 2px">${ContactTitle}</div>' +
|
||||
'<div style="right:25px; position: absolute; margin-top: 2px">' +
|
||||
'<span>${Time}</span>' +
|
||||
'</div>' +
|
||||
'</div>' +
|
||||
'<div class="descriptionstyle">${Message}</div>' +
|
||||
'</div>';
|
||||
}
|
||||
|
||||
|
||||
public listViewSelect(args: SelectEventArgs): void {
|
||||
this._data.selectedListElement = args.item as HTMLElement;
|
||||
let data: { [key: string]: Object } = args.data as { [key: string]: Object };
|
||||
let key: string = 'ReadStyle';
|
||||
if (data[key].toString() !== 'Read') {
|
||||
key = 'ContactID';
|
||||
this._data.setReadStyleMessage(data[key].toString(), 'Read');
|
||||
this._data.isItemClick = true;
|
||||
}
|
||||
let contentElement: Element = document.getElementsByClassName('row content')[0];
|
||||
if (window.innerWidth < 605) {
|
||||
contentElement.className = 'row content sidebar-hide show-reading-pane';
|
||||
}
|
||||
let contentWrapper: Element = document.getElementsByClassName('content-wrapper')[0];
|
||||
contentWrapper.className = 'content-wrapper';
|
||||
this._data.showSelectedMessage();
|
||||
key = 'ContactTitle';
|
||||
if (this._data.acrdnObj.items.length === 0) {
|
||||
this._data.acrdnObj.addItem({
|
||||
content: '#accodianContent', expanded: true, header: data[key].toString()
|
||||
});
|
||||
}
|
||||
let headerTitle: HTMLElement = document.getElementById('accordian');
|
||||
key = 'ContactTitle';
|
||||
headerTitle.getElementsByClassName('e-acrdn-header-content')[0].innerHTML = data[key].toString();
|
||||
key = 'Image';
|
||||
(headerTitle.getElementsByClassName('logo logo-style2')[0] as HTMLElement).style.background =
|
||||
'url(' + data[key].toString().replace('assets/images/images/', 'assets/images/large/') + ') no-repeat 50% 50%';
|
||||
key = 'ContactName';
|
||||
document.getElementById('sub').innerHTML = data[key].toString();
|
||||
key = 'Date';
|
||||
let dateString: string = data[key].toString();
|
||||
key = 'Time';
|
||||
document.getElementById('date').innerHTML = dateString + ' ' + data[key].toString();
|
||||
key = 'CC';
|
||||
document.getElementById('to').innerHTML = (data[key].toString()).replace(/,/g, ' ; ');
|
||||
key = 'Message';
|
||||
if (data[key]) {
|
||||
document.getElementById('accContent').innerHTML = data[key].toString();
|
||||
} else {
|
||||
document.getElementById('accContent').innerHTML =
|
||||
decodeURI('%3Cdiv%20id=%22box%22%20style=%22padding:10px;%20border:%20none;%20height:%20auto;' +
|
||||
'%22%20contenteditable=%22true%22%20data-gramm_id=%223898c552-c710-10db-69ec-08371185eb3f%22%20' +
|
||||
'data-gramm=%22true%22%20spellcheck=%22false%22%20data-gramm_editor=%22true%22%3E%3Cp%20class=%22' +
|
||||
'MsoNormal%22%3EDear%20Name, %3C/p%3E%0A%0A%3Cp%20class=%22MsoNormal%22%3EI%20really%20' +
|
||||
'appreciate%20your%20understanding%20and%20support%20regarding%0Athe%20changes%20we\'re%20' +
|
||||
'making%20to%20the%20project%20plan. %3C/p%3E%0A%0A%3Cp%20class=%22' +
|
||||
'MsoNormal%22%3EThank%20you%20for%20your%20confidence%20in%20me.%20I\'m%20sure%20' +
|
||||
'you\'re%20going%0Ato%20be%20pleased%20with%20the%20results. %3C/p%3E%0A%0A%3Cp%20class=%22' +
|
||||
'MsoNormal%22%3EBest%20Regards,%3Cbr%3E%0AYour%20Name%3Co:p%3E%3C/o:p%3E%3C/p%3E%0A%0A%20%20%20%20%3C/div%3E');
|
||||
}
|
||||
}
|
||||
|
||||
public ngOnInit(): void {
|
||||
}
|
||||
|
||||
public ngAfterViewInit(): void {
|
||||
this._data.grpListObj = this.grpListObj;
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,122 @@
|
|||
<div class="e-roottools" style='background-color:#fff; width:100%;color:white'>
|
||||
<ejs-toolbar id='toolbar_align' #toolbarDevice width="100%" height="100%" overflowMode='Popup'
|
||||
(clicked)="toolbarClick($event)">
|
||||
<e-items>
|
||||
<e-item prefixIcon="ej-icon-New tb-icons" text="New" tooltipText="Write a new message"
|
||||
cssClass="tb-item-new-mail">
|
||||
</e-item>
|
||||
<e-item prefixIcon='ej-icon-Mark-as-read tb-icons' text='Mark all as read'
|
||||
tooltipText='Mark all as read' cssClass='tb-item-mark-read'>
|
||||
</e-item>
|
||||
<e-item prefixIcon='ej-icon-Reply-All tb-icons' cssClass='tb-item-Selected tb-item-replyAll'
|
||||
tooltipText='Reply All'>
|
||||
<ng-template #template>
|
||||
<ejs-dropdownlist id='replyAllList' #replyAllList [dataSource]='replyList' (change)='replyAllSelect($event)' value="Reply All"
|
||||
[fields]='dropdownField' popupHeight="150px" popupWidth="150px" width="115px">
|
||||
<ng-template #valueTemplate let-data="">
|
||||
<div>
|
||||
<div style="float:left;margin-top: 1px;">
|
||||
<span style="font-weight: bold" class="e-btn-icon ej-icon-Reply-All tb-icons e-icons tb-icon-rply-all">
|
||||
|
||||
</span>
|
||||
</div>
|
||||
<div class="tb-dropdowns" style="float:left"> Reply All </div>
|
||||
</div>
|
||||
</ng-template>
|
||||
</ejs-dropdownlist>
|
||||
</ng-template>
|
||||
</e-item>
|
||||
<e-item prefixIcon='ej-icon-Delete tb-icons' text='Delete' cssClass='tb-item-Selected'
|
||||
tooltipText= 'Delete'>
|
||||
</e-item>
|
||||
<e-item text='Junk' cssClass='tb-item-Selected' tooltipText='Mark the sender as unsafe and delete the message'>
|
||||
</e-item>
|
||||
<e-item cssClass='tb-item-Selected' tooltipText='Move To' >
|
||||
<ng-template #template>
|
||||
<ejs-dropdownlist id='moveToList' #moveList [dataSource]='moveToList' (change)='moveToSelect($event)'
|
||||
value="Inbox" [fields]='dropdownField' popupHeight="310px" popupWidth="150px"
|
||||
width="80px" allowFiltering=true >
|
||||
<ng-template #valueTemplate let-data="">
|
||||
<div class="tb-dropdowns"> Move to </div>
|
||||
</ng-template>
|
||||
</ejs-dropdownlist>
|
||||
</ng-template>
|
||||
</e-item>
|
||||
<e-item cssClass='tb-item-Selected' tooltipText='Add Categories to message' >
|
||||
<ng-template #template>
|
||||
<ejs-dropdownlist id='categoryList' #categoriesList [dataSource]='categoryList'
|
||||
value="Blue category" [fields]='dropdownField' popupHeight="250px" popupWidth="230px"
|
||||
width="100px">
|
||||
<ng-template #itemTemplate let-data="">
|
||||
<div class="e-list" style="padding:0px 15px">
|
||||
<div style="width: 20px;float:left;top: 8px;position: absolute;">
|
||||
<div class="{{data.categoryStyle}}" style="width: 10px; height:15px;"></div>
|
||||
</div>
|
||||
<div style="width: 170px;float:left;margin-left: 15px;font-size:12px;"><span>{{data.text}}</span></div>
|
||||
</div>
|
||||
</ng-template>
|
||||
<ng-template #valueTemplate let-data>
|
||||
<div class="tb-dropdowns"> Categories </div>
|
||||
</ng-template>
|
||||
</ejs-dropdownlist>
|
||||
</ng-template>
|
||||
</e-item>
|
||||
<e-item cssClass='tb-item-more tb-item-Selected' tooltipText='More actions' >
|
||||
<ng-template #template>
|
||||
<ejs-dropdownlist id='moreList' #moreItemList [dataSource]='moreList' (change)='moreItemSelect($event)'
|
||||
value="Mark as read" [fields]='dropdownField' popupHeight="150px" popupWidth="150px">
|
||||
<ng-template #valueTemplate let-data>
|
||||
<div class="tb-dropdowns" style ="font-size: 16px;margin-top: -2px;"><span class="e-btn-icon e-icons ej-icon-More"></span></div>
|
||||
</ng-template>
|
||||
</ejs-dropdownlist>
|
||||
</ng-template>
|
||||
</e-item>
|
||||
<e-item prefixIcon='ej-icon-Copy tb-icons' align='right' cssClass='tb-item-Selected'
|
||||
tooltipText= 'Open in a separate window'>
|
||||
</e-item>
|
||||
</e-items>
|
||||
</ejs-toolbar>
|
||||
<ejs-toolbar id='toolbar_mobile' #toolbarMobile width='100%' height='100%' overflowMode='Popup' (clicked)="toolbarClick($event)">
|
||||
<e-items>
|
||||
<e-item prefixIcon ='ej-icon-Menu tb-icons' cssClass='tb-item-menu tb-item-front' ></e-item>
|
||||
<e-item prefixIcon ='ej-icon-Back' cssClass='tb-item-back-icon tb-item-back' ></e-item>
|
||||
<e-item text ='Inbox' cssClass='tb-item-inbox tb-item-front' ></e-item>
|
||||
<e-item text ='Compose' cssClass='tb-item-inbox tb-item-back tb-item-newmail-option' ></e-item>
|
||||
<e-item cssClass= 'tb-item-search-option' align='center' >
|
||||
<ng-template #template>
|
||||
<div class="search-div1" style= "width:90%" >
|
||||
<div>
|
||||
<ejs-autocomplete id='txtSearch1' cssClass='search-text-box' #txtSearch1 [dataSource]='contactsList'
|
||||
placeholder='Search Mail and People' [fields]='searchFields' [showClearButton]='acClearButton'
|
||||
(change)='autoSearchSelect($event)' (focus)="autoSearchFocus($event)" (blur)="autoSearchBlur($event)" style="height: 40px;display: block;"></ejs-autocomplete>
|
||||
</div>
|
||||
</div>
|
||||
</ng-template>
|
||||
</e-item>
|
||||
<e-item prefixIcon='ej-icon-Close' tooltipText='Clear' align='right' cssClass='tb-item-search-option'></e-item>
|
||||
<e-item prefixIcon='ej-icon-Search' tooltipText='Search Mail' align='right' cssClass='tb-item-front' ></e-item>
|
||||
<e-item prefixIcon='ej-icon-Create-New' tooltipText='Write a new message' align='right' cssClass='tb-item-front'>
|
||||
</e-item>
|
||||
<e-item prefixIcon='ej-icon-Send' tooltipText='Send' align='right' cssClass='tb-item-back tb-item-newmail-option'>
|
||||
</e-item>
|
||||
<e-item prefixIcon='ej-icon-Attach' tooltipText='Attach' align='right' cssClass='tb-item-back tb-item-newmail-option'>
|
||||
</e-item>
|
||||
<e-item prefixIcon ='ej-icon-Delete' tooltipText='Delete' align='right'
|
||||
cssClass='tb-item-back' >
|
||||
</e-item>
|
||||
<e-item prefixIcon ='ej-icon-Reply-All' tooltipText='Reply All' align='right'
|
||||
cssClass='tb-item-back' >
|
||||
</e-item>
|
||||
<e-item cssClass='tb-item-more tb-item-back' tooltipText='More actions' align='right'>
|
||||
<ng-template #template>
|
||||
<ejs-dropdownlist id='moreList1' #moreItemList1 [dataSource]='moreList' (change)='moreItemSelect($event)'
|
||||
value="Mark as read" [fields]='dropdownField' popupHeight="150px" popupWidth="150px">
|
||||
<ng-template #valueTemplate let-data>
|
||||
<div class="tb-dropdowns" style ="font-size: 16px;margin-top: -2px;"><span class="e-btn-icon e-icons ej-icon-More"></span></div>
|
||||
</ng-template>
|
||||
</ejs-dropdownlist>
|
||||
</ng-template>
|
||||
</e-item>
|
||||
</e-items>
|
||||
</ejs-toolbar>
|
||||
</div>
|
||||
|
|
@ -0,0 +1,112 @@
|
|||
import { Component, ViewEncapsulation, OnInit, ViewChild } from '@angular/core';
|
||||
import { ToolbarComponent, ClickEventArgs } from '@syncfusion/ej2-ng-navigations';
|
||||
import { AutoCompleteComponent, ChangeEventArgs, SelectEventArgs as DropDownSelectEventArgs } from '@syncfusion/ej2-ng-dropdowns';
|
||||
import { getContacts } from '../../../data/datasource';
|
||||
import { DataService } from '../../../data-service';
|
||||
|
||||
@Component({
|
||||
selector: 'tools-section',
|
||||
templateUrl: './tools.component.html',
|
||||
encapsulation: ViewEncapsulation.None,
|
||||
})
|
||||
|
||||
export class ToolsComponent implements OnInit {
|
||||
|
||||
/** Configurations for the Tools page */
|
||||
constructor(private _data: DataService) {
|
||||
this.contactsList = getContacts();
|
||||
}
|
||||
|
||||
@ViewChild('toolbarMobile')
|
||||
public toolbarMobile: ToolbarComponent;
|
||||
@ViewChild('txtSearch1')
|
||||
public acSearchMobile: AutoCompleteComponent;
|
||||
|
||||
// ToolbarDevice Dropdown control binding properties
|
||||
private isMenuClick: boolean = false;
|
||||
public replyList: { [key: string]: Object }[] = [
|
||||
{ text: 'Reply' }, { text: 'Reply All' }, { text: 'Forward' }
|
||||
];
|
||||
public moveToList: { [key: string]: Object }[] = [
|
||||
{ text: 'Inbox' }, { text: 'Sent Items' }, { text: 'Clutter' }, { text: 'Drafts' },
|
||||
{ text: 'Deleted Items' }, { text: 'Archive' }, { text: 'Junk Mail' }, { text: 'Outbox' },
|
||||
{ text: 'Personnel' }, { text: 'Sales Reports' }, { text: 'Marketing Reports' },
|
||||
{ text: 'Richelle Mead' }, { text: 'krystine hobson' }
|
||||
];
|
||||
public categoryList: { [key: string]: Object }[] = [
|
||||
{ text: 'Blue category', color: 'blue', categoryStyle: 'blue-background' },
|
||||
{ text: 'Red category' , color: 'red' , categoryStyle: 'red-background' },
|
||||
{ text: 'Orange category', color: 'orange', categoryStyle: 'orange-background' },
|
||||
{ text: 'Purple category', color: 'purple', categoryStyle: 'purple-background' },
|
||||
{ text: 'Green category', color: 'green', categoryStyle: 'green-background' },
|
||||
{ text: 'Yellow category', color: 'yellow', categoryStyle: 'yellow-background' },
|
||||
{ text: 'Clear categories', color: 'transparent', categoryStyle: 'transparent-background' }
|
||||
];
|
||||
public moreList: { [key: string]: Object }[] = [
|
||||
{ text: 'Mark as unread' }, { text: 'Mark as read' }, { text: 'Flag' }, { text: 'Clear Flag' }
|
||||
];
|
||||
private dropdownField: Object = { text: 'text', value: 'text' };
|
||||
|
||||
// AutoComplete binding properties
|
||||
public contactsList: {[key: string]: Object}[] = this._data.contactsList;
|
||||
public searchFields: Object = this._data.searchFields;
|
||||
public acClearButton: boolean = false;
|
||||
|
||||
public toolbarClick(args: ClickEventArgs): void {
|
||||
this._data.toolbarClick(args);
|
||||
}
|
||||
|
||||
public replyAllSelect(args: DropDownSelectEventArgs): void {
|
||||
if (args.itemData.text) {
|
||||
this._data.showNewMailPopup(args.itemData.text);
|
||||
this._data.ddlReplyAllValue = args.itemData.text;
|
||||
}
|
||||
this._data.dropdownSelect = true;
|
||||
}
|
||||
|
||||
public moveToSelect(args: DropDownSelectEventArgs): void {
|
||||
if (args.itemData.text) {
|
||||
let selectedMessage: { [key: string]: Object } = this._data.getSelectedMessage();
|
||||
let key: string = 'Folder';
|
||||
selectedMessage[key] = args.itemData.text;
|
||||
this._data.grpListObj.dataSource =
|
||||
this._data.getFilteredDataSource(this._data.messageDataSource, 'Folder', this._data.selectedFolderName);
|
||||
this._data.showEmptyMessage();
|
||||
}
|
||||
}
|
||||
|
||||
public moreItemSelect(args: DropDownSelectEventArgs): void {
|
||||
let selectedMessage: { [key: string]: Object } = this._data.getSelectedMessage();
|
||||
let key: string = '';
|
||||
if (args.itemData.text === 'Mark as read') {
|
||||
key = 'ContactID';
|
||||
this._data.setReadStyleMessage(selectedMessage[key].toString(), 'Read');
|
||||
} else if (args.itemData.text === 'Mark as unread') {
|
||||
key = 'ContactID';
|
||||
this._data.setReadStyleMessage(selectedMessage[key].toString(), 'Unread');
|
||||
} else {
|
||||
let target: HTMLElement = this._data.selectedListElement.getElementsByClassName('e-btn-icon ej-icon-Flag_1')[0] as HTMLElement;
|
||||
this._data.flagListItem(target, selectedMessage);
|
||||
}
|
||||
}
|
||||
|
||||
public autoSearchSelect(args: ChangeEventArgs): void {
|
||||
this._data.autoSearchSelect(args);
|
||||
}
|
||||
|
||||
public autoSearchFocus(args: Object): void {
|
||||
document.getElementsByClassName('search-div1')[0].classList.add('search-focus');
|
||||
}
|
||||
|
||||
public autoSearchBlur(args: Object): void {
|
||||
document.getElementsByClassName('search-div1')[0].classList.remove('search-focus');
|
||||
}
|
||||
|
||||
public ngOnInit(): void {
|
||||
}
|
||||
|
||||
public ngAfterViewInit(): void {
|
||||
this._data.toolbarMobile = this.toolbarMobile;
|
||||
this._data.acSearchMobile = this.acSearchMobile;
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,86 @@
|
|||
<div class="headerContent" style="z-index: 112; height: 100%; background-color: #f4f4f4; width: 330px;right:0; position: absolute">
|
||||
<div style="right:20px;position: absolute; top: 35px">
|
||||
<button ejs-button id='btnCloseButton' iconCss='ej-icon-Close' cssClass='btn-shadow-hide'>
|
||||
</button>
|
||||
</div>
|
||||
<div style="margin: 25px 20px 30px 30px;">
|
||||
<div class="text-content">
|
||||
<span id='txtHeaderContent'>Notification</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="notification-content">
|
||||
<span>Nothing new right now</span>
|
||||
</div>
|
||||
<div class="settings-content">
|
||||
<span class="settings-sub-header">Your app settings</span>
|
||||
<div class="anchor-div">
|
||||
<a class="about-anchor">
|
||||
<span>Automatic replies</span>
|
||||
</a>
|
||||
</div>
|
||||
<div class="anchor-div">
|
||||
<a class="about-anchor">
|
||||
<span>Display settings</span>
|
||||
</a>
|
||||
</div>
|
||||
<div class="anchor-div">
|
||||
<a class="about-anchor">
|
||||
<span>Offline settings</span>
|
||||
</a>
|
||||
</div>
|
||||
<div class="anchor-div">
|
||||
<a class="about-anchor">
|
||||
<span>Manage add-ins</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="about-content">
|
||||
<div class="anchor-div">
|
||||
<a class="about-anchor">
|
||||
<span>Help</span>
|
||||
</a>
|
||||
</div>
|
||||
<div class="anchor-div">
|
||||
<a class="about-anchor">
|
||||
<span>Feedback</span>
|
||||
</a>
|
||||
</div>
|
||||
<div class="anchor-div">
|
||||
<a class="about-anchor">
|
||||
<span>Community</span>
|
||||
</a>
|
||||
</div>
|
||||
<div class="anchor-div">
|
||||
<a class="about-anchor">
|
||||
<span>Legal</span>
|
||||
</a>
|
||||
</div>
|
||||
<div class="anchor-div">
|
||||
<a class="about-anchor">
|
||||
<span>Privacy & cookies</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="profile-content">
|
||||
<div class='logo logo-style2' style='float:left'></div>
|
||||
<div class='messageHeader' style='float:left; height: 70px; margin-bottom: 13px;'>
|
||||
<div style="font-size: 17px">{{userName}}</div>
|
||||
<div style="font-size: 12px; color: #666">{{userMail}}</div>
|
||||
</div>
|
||||
<div class="anchor-div">
|
||||
<a class="about-anchor">
|
||||
<span style="font-size: 14px">My profile</span>
|
||||
</a>
|
||||
</div>
|
||||
<div class="anchor-div">
|
||||
<a class="about-anchor">
|
||||
<span style="font-size: 14px">My account</span>
|
||||
</a>
|
||||
</div>
|
||||
<div class="anchor-div">
|
||||
<a class="about-anchor">
|
||||
<span style="font-size: 14px">Sign Out</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -0,0 +1,22 @@
|
|||
import { Component, ViewEncapsulation, OnInit } from '@angular/core';
|
||||
import { userName, userMail } from '../../data/datasource';
|
||||
|
||||
@Component({
|
||||
selector: 'popup-section',
|
||||
templateUrl: './popup.component.html',
|
||||
encapsulation: ViewEncapsulation.None,
|
||||
})
|
||||
|
||||
export class PopupComponent implements OnInit {
|
||||
|
||||
/** Configurations for the popup page */
|
||||
constructor() {
|
||||
}
|
||||
|
||||
// Right Sidebar dropdown binding properties
|
||||
public userName: string = userName;
|
||||
public userMail: string = userMail;
|
||||
|
||||
public ngOnInit(): void {
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,162 @@
|
|||
<div class='rp-separate-content'>
|
||||
<div class='rp-separate-tool'>
|
||||
<ejs-toolbar id='rp-toolbar_align' #rpReplyToolbar width="100%" height="100%" overflowMode='Popup'
|
||||
(clicked)="toolbarClick($event)">
|
||||
<e-items>
|
||||
<e-item prefixIcon='ej-icon-Reply-All tb-icons' cssClass='tb-item-replyAll' tooltipText='Reply All'>
|
||||
<ng-template #template>
|
||||
<ejs-dropdownlist id='rp-replyAllList' #rpReplyAllList [dataSource]='replyList' (change)='replyAllSelect($event)' value="Reply All"
|
||||
[fields]='dropdownField' popupHeight="150px" popupWidth="150px" width="115px">
|
||||
<ng-template #valueTemplate let-data="">
|
||||
<div>
|
||||
<div class="float-left" style="margin-top: 1px;">
|
||||
<span style="font-weight: bold" class="e-btn-icon ej-icon-Reply-All tb-icons e-icons tb-icon-rply-all">
|
||||
</span>
|
||||
</div>
|
||||
<div class="tb-dropdowns float-left"> Reply All </div>
|
||||
</div>
|
||||
</ng-template>
|
||||
</ejs-dropdownlist>
|
||||
</ng-template>
|
||||
</e-item>
|
||||
<e-item prefixIcon='ej-icon-Delete tb-icons' text='Delete' tooltipText= 'Delete'>
|
||||
</e-item>
|
||||
<e-item text='Junk' cssClass='tb-item-Selected' tooltipText='Mark the sender as unsafe and delete the message'>
|
||||
</e-item>
|
||||
<e-item cssClass='tb-item-more' tooltipText='More actions' >
|
||||
<ng-template #template>
|
||||
<ejs-dropdownlist id='rp-moreList' #rpMoreItemList [dataSource]='moreList' (change)='moreItemSelect($event)'
|
||||
value="Mark as read" [fields]='dropdownField' popupHeight="150px" popupWidth="150px">
|
||||
<ng-template #valueTemplate let-data>
|
||||
<div class="tb-dropdowns" style ="font-size: 16px;margin-top: -2px;"><span class="e-btn-icon e-icons ej-icon-More"></span></div>
|
||||
</ng-template>
|
||||
</ejs-dropdownlist>
|
||||
</ng-template>
|
||||
</e-item>
|
||||
<e-item prefixIcon='ej-icon-Close tb-icons' align='right' tooltipText= 'Close' cssClass='rp-tp-item-Close'>
|
||||
</e-item>
|
||||
</e-items>
|
||||
</ejs-toolbar>
|
||||
<ejs-toolbar id='rp-toolbar_newmail' #rpNewmailToolbar height='100%' overflowMode='Popup' style="display: none"
|
||||
(clicked)="toolbarNewMailClick($event)">
|
||||
<e-items>
|
||||
<e-item prefixIcon ='ej-icon-Send tb-icons' text='Send' tooltipText='Send' ></e-item>
|
||||
<e-item prefixIcon ='ej-icon-Attach tb-icons' text='Attach' tooltipText='Attach' ></e-item>
|
||||
<e-item text ='Discard' ></e-item>
|
||||
<e-item cssClass='tb-item-more tb-item-more-mail' tooltipText='More actions'>
|
||||
<ng-template #template>
|
||||
<ejs-dropdownlist id='rp-moreList2' #rpMoreItemList2 [dataSource]='moreMailList'
|
||||
value="Show From" [fields]='dropdownField' popupHeight="150px" popupWidth="150px">
|
||||
<ng-template #valueTemplate let-data>
|
||||
<div class="tb-dropdowns" style ="font-size: 16px;margin-top: -2px;"><span class="e-btn-icon e-icons ej-icon-More"></span></div>
|
||||
</ng-template>
|
||||
</ejs-dropdownlist>
|
||||
</ng-template>
|
||||
</e-item>
|
||||
<e-item prefixIcon='ej-icon-Close tb-icons' tooltipText='Close' align='right'
|
||||
cssClass='rp-tb-item-Close' >
|
||||
</e-item>
|
||||
</e-items>
|
||||
</ejs-toolbar>
|
||||
</div>
|
||||
<div class='rp-maincontent_pane'>
|
||||
<div id='rp-reading-pane-div' class='rp-reading-pane customScrollBar'>
|
||||
<ejs-accordion id='rp-accordian' #rpAccordian style='display: none;'></ejs-accordion>
|
||||
<div id='rp-mailarea'>
|
||||
<div id="rp-newmailContent">
|
||||
<div class="mail-content-div customScrollBar">
|
||||
<div class="mail-id">
|
||||
<button ejs-button id='rp-btnTo' class="float-left" style='width:50px;'>To</button>
|
||||
<ejs-multiselect id='rp-autoTo' #rpAutoTo [dataSource]='contactsList' [fields]='multiSelectFields'
|
||||
mode='Box' placeholder= '...' [width]='multiSelectWidth' cssClass ='ac-new-mail' delimiterChar=';'
|
||||
popupWidth='300px' hideSelectedItem='true' allowFiltering='true' (filtering)='onFiltering($event)'>
|
||||
<ng-template #itemTemplate let-data>
|
||||
<div class="multiselect-template parent-div">
|
||||
<img class="contacts-item-image-style" src="{{data.Image}}" alt="employee"/>
|
||||
<div class="contacts-item-text-style">
|
||||
<div>{{data.ContactName}}</div>
|
||||
</div>
|
||||
<div class="contacts-item-subtext-style">{{data.MailId}}</div>
|
||||
</div>
|
||||
</ng-template>
|
||||
<ng-template #valueTemplate let-data>
|
||||
<div>
|
||||
<img class="contacts-value-img-style" src="{{data.Image}}" alt="employee"/>
|
||||
<div class="contacts-value-text-style">{{data.MailId}}</div>
|
||||
</div>
|
||||
</ng-template>
|
||||
</ejs-multiselect>
|
||||
</div>
|
||||
<div class="mail-id">
|
||||
<button ejs-button id='rp-btnCc' class="float-left" style='width:50px;'>Cc</button>
|
||||
<ejs-multiselect id='rp-autoCc' #rpAutoCc [dataSource]='contactsList' [fields]='multiSelectFields'
|
||||
mode='Box' placeholder= '...' [width]='multiSelectWidth' cssClass ='ac-new-mail' delimiterChar=';'
|
||||
popupWidth='300px' hideSelectedItem='true' allowFiltering='true' (filtering)='onFiltering($event)'>
|
||||
<ng-template #itemTemplate let-data>
|
||||
<div class="multiselect-template parent-div">
|
||||
<img class="contacts-item-image-style" src="{{data.Image}}" alt="employee"/>
|
||||
<div class="contacts-item-text-style">
|
||||
<div>{{data.ContactName}}</div>
|
||||
</div>
|
||||
<div class="contacts-item-subtext-style">{{data.MailId}}</div>
|
||||
</div>
|
||||
</ng-template>
|
||||
<ng-template #valueTemplate let-data>
|
||||
<div>
|
||||
<img class="contacts-value-img-style" src="{{data.Image}}" alt="employee"/>
|
||||
<div class="contacts-value-text-style">{{data.MailId}}</div>
|
||||
</div>
|
||||
</ng-template>
|
||||
</ejs-multiselect>
|
||||
</div>
|
||||
<div class="mail-subject e-input-group">
|
||||
<input type='text' id='rp-txtSubject' placeholder="Enter Subject Here" />
|
||||
</div>
|
||||
<div>
|
||||
<div id='rp-mailContentMessage' class="customScrollBar" contenteditable="true"></div>
|
||||
</div>
|
||||
<div class='mail-text-edit-tb-parent'>
|
||||
<ejs-toolbar id='rp-new_email_toolbar' #rpRTEToolbar height='100%'>
|
||||
<e-items>
|
||||
<e-item prefixIcon= 'ej-icon-Font tb-icons' tooltipText= 'Font' ></e-item>
|
||||
<e-item prefixIcon= 'ej-icon-Font-Size path2 tb-icons' tooltipText= 'Font Size' ></e-item>
|
||||
<e-item prefixIcon= 'ej-icon-Bold tb-icons' tooltipText= 'Bold' ></e-item>
|
||||
<e-item prefixIcon= 'ej-icon-Italic tb-icons' tooltipText= 'Italic' ></e-item>
|
||||
<e-item prefixIcon= 'ej-icon-Underlined tb-icons' tooltipText= 'Underline' ></e-item>
|
||||
<e-item prefixIcon= 'ej-icon-Highlight tb-icons' tooltipText= 'Highlight' ></e-item>
|
||||
<e-item prefixIcon= 'ej-icon-Font-Color-Icon tb-icons' tooltipText= 'Font color' ></e-item>
|
||||
<e-item prefixIcon= 'ej-icon-Bullets tb-icons' tooltipText= 'Bullets' ></e-item>
|
||||
<e-item prefixIcon= 'ej-icon-Numbering tb-icons' tooltipText= 'Numbering' ></e-item>
|
||||
<e-item prefixIcon= 'ej-icon-Decr-Indent tb-icons' tooltipText= 'Decrease Indent' ></e-item>
|
||||
<e-item prefixIcon= 'ej-icon-Incr-Indent tb-icons' tooltipText= 'Increase Indent' ></e-item>
|
||||
<e-item prefixIcon= 'ej-icon-Left-aligned tb-icons' tooltipText= 'Decrease Indent' ></e-item>
|
||||
<e-item prefixIcon= 'ej-icon-Centre-aligned tb-icons' tooltipText= 'Increase Indent' ></e-item>
|
||||
<e-item prefixIcon= 'ej-icon-Right-aligned tb-icons' tooltipText= 'Decrease Indent' ></e-item>
|
||||
<e-item prefixIcon= 'ej-icon-Hyperlink tb-icons' tooltipText= 'Hyperlink' ></e-item>
|
||||
</e-items>
|
||||
</ejs-toolbar>
|
||||
</div>
|
||||
<div>
|
||||
<button ejs-button id='rp-btnSend' isPrimary='true' (click)="btnRPSendClick()">Send</button>
|
||||
<button ejs-button id='rp-btnDiscard' (click)="btnRPDiscardClick()">Discard</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div id='rpAccodianContent' style='display: none'>
|
||||
<div style='height: 100px'>
|
||||
<div class='logo logo-style2 float-left'></div>
|
||||
<div class='messageHeader float-left'>
|
||||
<div id='rp-sub'></div>
|
||||
<div id='rp-date' ></div>
|
||||
<div id='rp-to'></div>
|
||||
</div>
|
||||
<div style="right:0;position: absolute;">
|
||||
</div>
|
||||
</div>
|
||||
<div id='rp-accContent'>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -0,0 +1,192 @@
|
|||
import { Component, ViewChild, AfterViewInit } from '@angular/core';
|
||||
import { ToolbarComponent, AccordionComponent, ClickEventArgs } from '@syncfusion/ej2-ng-navigations';
|
||||
import { MultiSelectComponent, SelectEventArgs as DropDownSelectEventArgs, FilteringEventArgs } from '@syncfusion/ej2-ng-dropdowns';
|
||||
import { Query } from '@syncfusion/ej2-data';
|
||||
import { getContacts } from '../../data/datasource';
|
||||
|
||||
@Component({
|
||||
selector: 'readingpane-section',
|
||||
templateUrl: 'readingpane.component.html'
|
||||
})
|
||||
|
||||
export class ReadingPaneComponent implements AfterViewInit {
|
||||
|
||||
/** Configurations for the Reading pane page */
|
||||
constructor() {
|
||||
}
|
||||
|
||||
@ViewChild('rpReplyToolbar')
|
||||
public rplyToolbar: ToolbarComponent;
|
||||
@ViewChild('rpNewmailToolbar')
|
||||
public toolbarHeader1: ToolbarComponent;
|
||||
@ViewChild('rpAutoTo')
|
||||
public autoToList: MultiSelectComponent;
|
||||
@ViewChild('rpAutoCc')
|
||||
public autoCCList: MultiSelectComponent;
|
||||
@ViewChild('rpRTEToolbar')
|
||||
public toolbarMail: ToolbarComponent;
|
||||
@ViewChild('rpAccordian')
|
||||
public acrdnObj: AccordionComponent;
|
||||
|
||||
public selectedRPToolbarItem: string = '';
|
||||
public ddlLastRplyValueRP: string = 'Reply All';
|
||||
public dropdownSelectRP: boolean = false;
|
||||
private selectedMessage: {[key: string]: Object} = null;
|
||||
|
||||
public contactsList: {[key: string]: Object}[] = getContacts();
|
||||
public multiSelectFields: Object = { text: 'MailId', value: 'MailId' };
|
||||
public multiSelectWidth: string = 'calc(100% - 60px)';
|
||||
|
||||
public replyList: { [key: string]: Object }[] = [
|
||||
{ text: 'Reply' }, { text: 'Reply All' }, { text: 'Forward' }
|
||||
];
|
||||
|
||||
public moreList: { [key: string]: Object }[] = [
|
||||
{ text: 'Mark as unread' }, { text: 'Mark as read' }, { text: 'Flag' }, { text: 'Clear Flag' }
|
||||
];
|
||||
|
||||
public moreMailList: { [key: string]: Object }[] = [
|
||||
{ text: 'Save draft' }, { text: 'Show From' }, { text: 'Check Names' }, { text: 'Show message options' }
|
||||
];
|
||||
|
||||
public onFiltering(e: FilteringEventArgs): void {
|
||||
let query: Query = new Query();
|
||||
query = (e.text !== '') ? query.where('ContactName', 'startswith', e.text, true) : query;
|
||||
e.updateData(this.contactsList, query);
|
||||
}
|
||||
|
||||
public ngAfterViewInit(): void {
|
||||
}
|
||||
|
||||
public toolbarClick(args: ClickEventArgs): void {
|
||||
if (args.item) {
|
||||
if (args.item.prefixIcon === 'ej-icon-Close tb-icons') {
|
||||
this.selectedRPToolbarItem = 'ClosePopup';
|
||||
} else if (args.item.text === 'Delete' || args.item.text === 'Junk') {
|
||||
this.selectedRPToolbarItem = args.item.text + 'Click';
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
public replyAllSelect(args: DropDownSelectEventArgs): void {
|
||||
if (args.itemData.text) {
|
||||
this.showMailDialogRP(args.itemData.text);
|
||||
this.ddlLastRplyValueRP = args.itemData.text;
|
||||
this.dropdownSelectRP = true;
|
||||
}
|
||||
}
|
||||
|
||||
public btnRPSendClick(): void {
|
||||
this.selectedRPToolbarItem = 'SendClick';
|
||||
}
|
||||
|
||||
public btnRPDiscardClick(): void {
|
||||
this.selectedRPToolbarItem = 'DiscardClick';
|
||||
}
|
||||
|
||||
public toolbarNewMailClick(args: ClickEventArgs): void {
|
||||
if (args.item) {
|
||||
if (args.item.prefixIcon === 'ej-icon-Close tb-icons') {
|
||||
this.selectedRPToolbarItem = 'ClosePopup';
|
||||
} else if (args.item.text === 'Send' || args.item.text === 'Discard') {
|
||||
this.selectedRPToolbarItem = args.item.text + 'Click';
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
public resetRPSelectedItem(text: string): void {
|
||||
this.selectedRPToolbarItem = text;
|
||||
this.dropdownSelectRP = false;
|
||||
}
|
||||
|
||||
public clearMailForm(): void {
|
||||
if (this.autoCCList.value) {
|
||||
this.autoCCList.value = [] as [string];
|
||||
}
|
||||
if (this.autoToList.value) {
|
||||
this.autoToList.value = [] as [string];
|
||||
}
|
||||
(document.getElementById('rp-txtSubject') as HTMLInputElement).value = '';
|
||||
document.getElementById('rp-mailContentMessage').innerHTML = '';
|
||||
}
|
||||
|
||||
public bindReadingPaneData(selectedMessage1: {[key: string]: Object}): void {
|
||||
this.selectedMessage = selectedMessage1;
|
||||
document.getElementById('rp-accordian').style.display = '';
|
||||
document.getElementById('rp-mailarea').style.display = 'none';
|
||||
document.getElementById('rp-toolbar_newmail').style.display = 'none';
|
||||
document.getElementById('rp-toolbar_align').style.display = '';
|
||||
this.rplyToolbar.refreshOverflow();
|
||||
let key: string = 'ContactTitle';
|
||||
if (this.acrdnObj.items.length === 0) {
|
||||
this.acrdnObj.addItem({
|
||||
content: '#rpAccodianContent', expanded: true, header: this.selectedMessage[key].toString()
|
||||
});
|
||||
}
|
||||
let headerTitle: HTMLElement = document.getElementById('rp-accordian');
|
||||
key = 'ContactTitle';
|
||||
headerTitle.getElementsByClassName('e-acrdn-header-content')[0].innerHTML = this.selectedMessage[key].toString();
|
||||
key = 'Image';
|
||||
(headerTitle.getElementsByClassName('logo logo-style2')[0] as HTMLElement).style.background =
|
||||
'url(' + this.selectedMessage[key].toString().replace('assets/images/images/', 'assets/images/large/') + ') no-repeat 50% 50%';
|
||||
key = 'ContactName';
|
||||
document.getElementById('rp-sub').innerHTML = this.selectedMessage[key].toString();
|
||||
key = 'Date';
|
||||
let dateString: string = this.selectedMessage[key].toString();
|
||||
key = 'Time';
|
||||
document.getElementById('rp-date').innerHTML = dateString + ' ' + this.selectedMessage[key].toString();
|
||||
key = 'CC';
|
||||
document.getElementById('rp-to').innerHTML = (this.selectedMessage[key].toString()).replace(/,/g, ' ; ');
|
||||
key = 'Message';
|
||||
if (this.selectedMessage[key]) {
|
||||
document.getElementById('rp-accContent').innerHTML = this.selectedMessage[key].toString();
|
||||
} else {
|
||||
document.getElementById('rp-accContent').innerHTML =
|
||||
decodeURI('%3Cdiv%20id=%22box%22%20style=%22padding:10px;%20border:%20none;%20height:%20auto;' +
|
||||
'%22%20contenteditable=%22true%22%20data-gramm_id=%223898c552-c710-10db-69ec-08371185eb3f%22%20' +
|
||||
'data-gramm=%22true%22%20spellcheck=%22false%22%20data-gramm_editor=%22true%22%3E%3Cp%20class=%22' +
|
||||
'MsoNormal%22%3EDear%20Name, %3C/p%3E%0A%0A%3Cp%20class=%22MsoNormal%22%3EI%20really%20' +
|
||||
'appreciate%20your%20understanding%20and%20support%20regarding%0Athe%20changes%20we\'re%20' +
|
||||
'making%20to%20the%20project%20plan. %3C/p%3E%0A%0A%3Cp%20class=%22' +
|
||||
'MsoNormal%22%3EThank%20you%20for%20your%20confidence%20in%20me.%20I\'m%20sure%20' +
|
||||
'you\'re%20going%0Ato%20be%20pleased%20with%20the%20results. %3C/p%3E%0A%0A%3Cp%20class=%22' +
|
||||
'MsoNormal%22%3EBest%20Regards,%3Cbr%3E%0AYour%20Name%3Co:p%3E%3C/o:p%3E%3C/p%3E%0A%0A%20%20%20%20%3C/div%3E');
|
||||
}
|
||||
}
|
||||
|
||||
public showMailDialogRP(option: string): void {
|
||||
document.getElementById('rp-accordian').style.display = 'none';
|
||||
document.getElementById('rp-mailarea').style.display = '';
|
||||
document.getElementById('rp-toolbar_newmail').style.display = '';
|
||||
document.getElementById('rp-toolbar_align').style.display = 'none';
|
||||
this.clearMailForm();
|
||||
let key: string = '';
|
||||
this.toolbarHeader1.refreshOverflow();
|
||||
this.toolbarMail.refreshOverflow();
|
||||
if (option !== 'Forward') {
|
||||
if (option !== 'Reply') {
|
||||
key = 'CCMail';
|
||||
this.autoCCList.value = this.selectedMessage[key] as [string];
|
||||
}
|
||||
key = 'Email';
|
||||
this.autoToList.value = [this.selectedMessage[key].toString()];
|
||||
}
|
||||
key = 'ContactTitle';
|
||||
(document.getElementById('rp-txtSubject') as HTMLInputElement).value = this.selectedMessage[key].toString();
|
||||
key = 'Message';
|
||||
if (this.selectedMessage[key]) {
|
||||
document.getElementById('rp-mailContentMessage').innerHTML = this.selectedMessage[key].toString();
|
||||
} else {
|
||||
document.getElementById('rp-mailContentMessage').innerHTML =
|
||||
decodeURI('%3Cdiv%20id=%22box%22%20style=%22padding:10px;%20border:%20none;%20height:%20auto;' +
|
||||
'%22%20contenteditable=%22true%22%20data-gramm_id=%223898c552-c710-10db-69ec-08371185eb3f%22%20' +
|
||||
'data-gramm=%22true%22%20spellcheck=%22false%22%20data-gramm_editor=%22true%22%3E%3Cp%20class=%22' +
|
||||
'MsoNormal%22%3EDear%20Name, %3C/p%3E%0A%0A%3Cp%20class=%22MsoNormal%22%3EI%20really%20' +
|
||||
'appreciate%20your%20understanding%20and%20support%20regarding%0Athe%20changes%20we\'re%20' +
|
||||
'making%20to%20the%20project%20plan. %3C/p%3E%0A%0A%3Cp%20class=%22' +
|
||||
'MsoNormal%22%3EThank%20you%20for%20your%20confidence%20in%20me.%20I\'m%20sure%20' +
|
||||
'you\'re%20going%0Ato%20be%20pleased%20with%20the%20results. %3C/p%3E%0A%0A%3Cp%20class=%22' +
|
||||
'MsoNormal%22%3EBest%20Regards,%3Cbr%3E%0AYour%20Name%3Co:p%3E%3C/o:p%3E%3C/p%3E%0A%0A%20%20%20%20%3C/div%3E');
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,17 @@
|
|||
<div class="folder-pane customScrollBar">
|
||||
<ejs-treeview id="tree" #tree [fields]="treeviewFields" (nodeSelected)='nodeSelected($event)'>
|
||||
<ng-template #nodeTemplate let-data>
|
||||
<div class="treeviewdiv">
|
||||
<div style="float:left">
|
||||
<span class="treeName">{{data.Name}}</span>
|
||||
</div>
|
||||
<div class="count" style="margin-left: 5px; float:right">
|
||||
<span class="treeCount {{data.Name}}" >{{data.Count}}</span>
|
||||
</div>
|
||||
<button title="{{data.FavoriteMessage}}" class="treeview-btn-temp">
|
||||
<span class="e-btn-icon ej-icon-{{data.Favorite}} {{data.Name}}"></span>
|
||||
</button>
|
||||
</div>
|
||||
</ng-template>
|
||||
</ejs-treeview>
|
||||
</div>
|
||||
|
|
@ -0,0 +1,75 @@
|
|||
import { Component, ViewEncapsulation, OnInit, ViewChild } from '@angular/core';
|
||||
import { TreeViewComponent, NodeSelectEventArgs } from '@syncfusion/ej2-ng-navigations';
|
||||
import { DataService } from '../../../data-service';
|
||||
|
||||
@Component({
|
||||
selector: 'navigation-section',
|
||||
templateUrl: './navigation.component.html',
|
||||
encapsulation: ViewEncapsulation.None,
|
||||
})
|
||||
|
||||
export class NavigationComponent implements OnInit {
|
||||
|
||||
/** Configurations for the navigation page */
|
||||
constructor(private _data: DataService) {
|
||||
}
|
||||
|
||||
@ViewChild('tree')
|
||||
public treeObj: TreeViewComponent;
|
||||
|
||||
// Tree View binding properties
|
||||
public treeDataSource: { [key: string]: Object }[] = this._data.treeDataSource;
|
||||
public treeviewFields: Object = { dataSource: this._data.treeDataSource, id: 'ID', text: 'Name', parentID: 'PID',
|
||||
hasChildren: 'HasChild', expanded: 'Expanded' };
|
||||
public showPopupOnInit: boolean = false;
|
||||
|
||||
public nodeSelected(args: NodeSelectEventArgs): void {
|
||||
let key: string = 'id';
|
||||
this._data.treeSelectedElement = <HTMLElement>args.node;
|
||||
this._data.treeviewSelectedData = this.getTreeData1(args.nodeData[key].toString());
|
||||
this._data.selectedFolderName = (args.node.getElementsByClassName('treeName')[0] as HTMLElement).innerHTML;
|
||||
this._data.grpListObj.dataSource =
|
||||
this._data.sortList(this._data.getFilteredDataSource(this._data.messageDataSource, 'Folder', this._data.selectedFolderName));
|
||||
this._data.showEmptyMessage();
|
||||
document.getElementById('spanFilterText').innerHTML = this._data.selectedFolderName;
|
||||
if (!this.showPopupOnInit) {
|
||||
this._data.showPopup1();
|
||||
this.showPopupOnInit = true;
|
||||
}
|
||||
let element1: Element = document.getElementsByClassName('tb-item-inbox')[0];
|
||||
if (element1) {
|
||||
element1 = element1.getElementsByClassName('e-tbar-btn-text')[0];
|
||||
element1.innerHTML = this._data.selectedFolderName;
|
||||
}
|
||||
this._data.hideSideBar();
|
||||
}
|
||||
|
||||
private getTreeData1(id: string): { [key: string]: Object } {
|
||||
for (let i: number = 0; i < this._data.treeDataSource.length; i++) {
|
||||
let key: string = 'ID';
|
||||
if (this._data.treeDataSource[i][key].toString() === id) {
|
||||
return this._data.treeDataSource[i];
|
||||
}
|
||||
}
|
||||
return null;
|
||||
}
|
||||
|
||||
public showPopup(): void {
|
||||
setTimeout(this.openPopup.bind(this), 3000);
|
||||
}
|
||||
|
||||
public openPopup(): void {
|
||||
this.treeObj.selectedNodes = ['8'];
|
||||
}
|
||||
|
||||
public ngOnInit(): void {
|
||||
}
|
||||
|
||||
public ngAfterContentInit(): void {
|
||||
this.showPopup();
|
||||
}
|
||||
|
||||
public ngAfterViewInit(): void {
|
||||
this._data.treeObj = this.treeObj;
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,23 @@
|
|||
<div class="search-div">
|
||||
<div class="search-device-section">
|
||||
<div style="width: 84%; float: left; height: 40px;">
|
||||
<ejs-autocomplete id='txtSearch' #txtSearch [dataSource]='contactsList' [showClearButton]='acClearButton'
|
||||
placeholder='Search Mail and People' [fields]='searchFields' cssClass='search-text-box'
|
||||
(change)='autoSearchSelect($event)' (focus)="autoSearchFocus($event)" (blur)="autoSearchBlur($event)" style="height: 40px; display: block;" >
|
||||
</ejs-autocomplete>
|
||||
</div>
|
||||
<div style="float: right; margin: 4px 0px;">
|
||||
<button ejs-button id='btnSearch' iconCss='ej-icon-Search' cssClass='btn-shadow-hide'></button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="search-mobile-section" >
|
||||
<div class='logo logo-style3 profile-pic' style='float:left'></div>
|
||||
<div class='messageHeader' style='float:left; height: 50px;'>
|
||||
<div style="font-size: 17px;color:#333">{{userName}}</div>
|
||||
<div style="font-size: 12px; color: #666">{{userMail}}</div>
|
||||
</div>
|
||||
<div style="right:20px;position: absolute;">
|
||||
<button ejs-button id='btnCloseButton1' iconCss='ej-icon-Close' cssClass='btn-shadow-hide' (click)="hideSideBar()"></button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -0,0 +1,44 @@
|
|||
import { Component, ViewEncapsulation, OnInit } from '@angular/core';
|
||||
import { ChangeEventArgs } from '@syncfusion/ej2-ng-dropdowns';
|
||||
import { getContacts, userName, userMail } from '../../../data/datasource';
|
||||
import { DataService } from '../../../data-service';
|
||||
|
||||
@Component({
|
||||
selector: 'search-section',
|
||||
templateUrl: './search.component.html',
|
||||
encapsulation: ViewEncapsulation.None,
|
||||
})
|
||||
|
||||
export class SearchComponent implements OnInit {
|
||||
|
||||
/** Configurations for the search page */
|
||||
constructor(private _data: DataService) {
|
||||
this.contactsList = getContacts();
|
||||
}
|
||||
|
||||
// AutoComplete binding properties
|
||||
public contactsList: {[key: string]: Object}[] = this._data.contactsList;
|
||||
public searchFields: Object = this._data.searchFields;
|
||||
public acClearButton: boolean = false;
|
||||
public userName: string = userName;
|
||||
public userMail: string = userMail;
|
||||
|
||||
public autoSearchSelect(args: ChangeEventArgs): void {
|
||||
this._data.autoSearchSelect(args);
|
||||
}
|
||||
|
||||
public autoSearchFocus(args: Object): void {
|
||||
document.getElementsByClassName('search-div')[0].classList.add('search-focus');
|
||||
}
|
||||
|
||||
public autoSearchBlur(args: Object): void {
|
||||
document.getElementsByClassName('search-div')[0].classList.remove('search-focus');
|
||||
}
|
||||
|
||||
public hideSideBar(): void {
|
||||
this._data.hideSideBar();
|
||||
}
|
||||
|
||||
public ngOnInit(): void {
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,6 @@
|
|||
<div class='sidebar' style='height:100%' role='complementary'>
|
||||
<div style='background-color:#fff; width:100%;height:100%'>
|
||||
<search-section #search></search-section>
|
||||
<navigation-section #navigation></navigation-section>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -0,0 +1,17 @@
|
|||
import { Component, ViewEncapsulation, OnInit } from '@angular/core';
|
||||
|
||||
@Component({
|
||||
selector: 'sidebar-section',
|
||||
templateUrl: './sidebar.component.html',
|
||||
encapsulation: ViewEncapsulation.None,
|
||||
})
|
||||
|
||||
export class SidebarComponent implements OnInit {
|
||||
|
||||
/** Configurations for the Sidebar page */
|
||||
constructor() {
|
||||
}
|
||||
|
||||
public ngOnInit(): void {
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,406 @@
|
|||
import { Injectable } from '@angular/core';
|
||||
import { TreeViewComponent, ToolbarComponent, AccordionComponent, ContextMenuComponent,
|
||||
ClickEventArgs } from '@syncfusion/ej2-ng-navigations';
|
||||
import { ListViewComponent } from '@syncfusion/ej2-ng-lists';
|
||||
import { AutoCompleteComponent, ChangeEventArgs } from '@syncfusion/ej2-ng-dropdowns';
|
||||
import { DialogComponent, PopupComponent } from '@syncfusion/ej2-ng-popups';
|
||||
import { NewMailComponent } from './content-area/content/content-pane/newmail/newmail.component';
|
||||
import { ReadingPaneComponent } from './content-area/readingpane/readingpane.component';
|
||||
import { folderData, messageDataSourceNew } from './data/datasource';
|
||||
|
||||
@Injectable()
|
||||
|
||||
export class DataService {
|
||||
|
||||
// Class Members
|
||||
public treeDataSource: { [key: string]: Object }[] = folderData;
|
||||
public treeviewSelectedData: { [key: string]: Object } = null;
|
||||
public treeSelectedElement: HTMLElement = null;
|
||||
public selectedFolderName: string = '';
|
||||
public selectedListElement: HTMLElement = null;
|
||||
public isItemClick: boolean = false;
|
||||
public isMenuClick: boolean = false;
|
||||
private hoverOnPopup: boolean = false;
|
||||
public ddlReplyAllValue: string = 'Reply All';
|
||||
public dropdownSelect: boolean = false;
|
||||
|
||||
// AutoComplete binding properties
|
||||
public contactsList: {[key: string]: Object}[] = [];
|
||||
public searchFields: Object = { text: 'MailId', value: 'MailId' };
|
||||
|
||||
public grpListObj: ListViewComponent;
|
||||
public filterContextMenu: ContextMenuComponent;
|
||||
public popupMail: PopupComponent;
|
||||
public newMailComponent: NewMailComponent;
|
||||
public acrdnObj: AccordionComponent;
|
||||
public dlgNewWindow: DialogComponent;
|
||||
public dlgSentMail: DialogComponent;
|
||||
public dlgSentMailNew: DialogComponent;
|
||||
public dlgReplyAllWindow: DialogComponent;
|
||||
public toolbarMobile: ToolbarComponent;
|
||||
public acSearchMobile: AutoCompleteComponent;
|
||||
public readingPaneComponent: ReadingPaneComponent;
|
||||
public treeObj: TreeViewComponent;
|
||||
|
||||
// List View binding properties
|
||||
public messageDataSource: { [key: string]: Object }[] = messageDataSourceNew;
|
||||
|
||||
public autoSearchSelect(args: ChangeEventArgs): void {
|
||||
if (args.value) {
|
||||
let dataSource: { [key: string]: Object }[] = this.messageDataSource;
|
||||
this.grpListObj.dataSource = this.getFilteredDataSource(dataSource, 'Email', args.value.toString());
|
||||
document.getElementById('spanFilterText').innerHTML = 'All Search';
|
||||
} else {
|
||||
this.resetSelectedFolderData();
|
||||
}
|
||||
}
|
||||
|
||||
public markAllRead(): void {
|
||||
let dataSource: {[key: string]: Object}[] = this.getFilteredDataSource(this.messageDataSource, 'Folder', this.selectedFolderName);
|
||||
for (let i: number = 0; i < dataSource.length; i++) {
|
||||
let key: string = 'ReadStyle';
|
||||
dataSource[i][key] = 'Read';
|
||||
key = 'ReadTitle';
|
||||
dataSource[i][key] = 'Mark as unread';
|
||||
this.setReadCount('Unread');
|
||||
}
|
||||
this.grpListObj.dataSource = dataSource;
|
||||
}
|
||||
|
||||
public showNewMailPopup(option: string): void {
|
||||
let selectedMessage: { [key: string]: Object } = this.getSelectedMessage();
|
||||
this.showToolbarItems('none');
|
||||
document.getElementById('reading-pane-div').className += ' new-mail';
|
||||
document.getElementById('accordian').style.display = 'none';
|
||||
document.getElementById('emptyMessageDiv').style.display = 'none';
|
||||
document.getElementById('mailarea').style.display = '';
|
||||
document.getElementById('mailarea').appendChild(document.getElementById('newmailContent'));
|
||||
(document.getElementsByClassName('tb-item-new-mail')[0] as HTMLElement).style.display = 'none';
|
||||
(document.getElementsByClassName('tb-item-mark-read')[0] as HTMLElement).style.display = 'none';
|
||||
this.newMailComponent.showMailDialog(option, selectedMessage);
|
||||
}
|
||||
|
||||
public showSelectedMessage(): void {
|
||||
document.getElementById('emptyMessageDiv').style.display = 'none';
|
||||
document.getElementById('mailarea').style.display = 'none';
|
||||
document.getElementById('accordian').style.display = '';
|
||||
this.showToolbarItems('inline-flex');
|
||||
let readingPane: HTMLElement = document.getElementById('reading-pane-div');
|
||||
readingPane.className = readingPane.className.replace(' new-mail', '');
|
||||
(document.getElementsByClassName('tb-item-new-mail')[0] as HTMLElement).style.display = 'inline-flex';
|
||||
(document.getElementsByClassName('tb-item-mark-read')[0] as HTMLElement).style.display = 'none';
|
||||
}
|
||||
|
||||
public getSelectedMessage(): { [key: string]: Object } {
|
||||
if (this.grpListObj.getSelectedItems()) {
|
||||
let selectedData: { [key: string]: Object } = this.grpListObj.getSelectedItems().data as {};
|
||||
let key: string = 'ContactID';
|
||||
for (let i: number = 0; i < this.messageDataSource.length; i++) {
|
||||
if (this.messageDataSource[i][key].toString() === selectedData[key].toString()) {
|
||||
return this.messageDataSource[i];
|
||||
}
|
||||
}
|
||||
}
|
||||
return null;
|
||||
}
|
||||
|
||||
public getFilteredDataSource(dataSource: { [key: string]: Object }[], columnName: string, columnValue: string):
|
||||
{ [key: string]: Object }[] {
|
||||
let folderData: { [key: string]: Object }[] = [];
|
||||
for (let i: number = 0; i < dataSource.length; i++) {
|
||||
let data: { [key: string]: Object } = dataSource[i];
|
||||
if (data[columnName] && data[columnName].toString() === columnValue) {
|
||||
folderData.push(data);
|
||||
}
|
||||
}
|
||||
return folderData;
|
||||
}
|
||||
|
||||
public sortList(listItems: { [key: string]: Object }[]): { [key: string]: Object }[] {
|
||||
for (let i: number = 0; i < listItems.length; i++) {
|
||||
listItems[i] = this.setCategory1(listItems[i]);
|
||||
}
|
||||
return listItems;
|
||||
}
|
||||
|
||||
public setCategory1(listItem: { [key: string]: Object }): {} {
|
||||
let key: string = 'Date';
|
||||
let date: Date = new Date(listItem[key] as string);
|
||||
let currentData: Date = new Date();
|
||||
let oldDate: number = date.getDate();
|
||||
let oldMonth: number = date.getMonth();
|
||||
let oldYear: number = date.getFullYear();
|
||||
|
||||
let currentDate: number = currentData.getDate();
|
||||
let currentMonth: number = currentData.getMonth();
|
||||
let currentYear: number = currentData.getFullYear();
|
||||
|
||||
key = 'category';
|
||||
if ( oldYear === currentYear) {
|
||||
if (oldMonth === currentMonth) {
|
||||
if (oldDate === currentDate) {
|
||||
listItem[key] = 'Today';
|
||||
} else if (oldDate === currentDate - 1) {
|
||||
listItem[key] = 'Yesterday';
|
||||
} else if ( oldDate + 8 >= currentDate ) {
|
||||
listItem[key] = 'Last Week';
|
||||
} else if ( oldDate + 15 >= currentDate ) {
|
||||
listItem[key] = 'Two Weeks Ago';
|
||||
} else if ( oldDate + 22 >= currentDate ) {
|
||||
listItem[key] = 'Three Weeks Ago';
|
||||
} else {
|
||||
listItem[key] = 'Earlier this Month';
|
||||
}
|
||||
} else {
|
||||
listItem[key] = 'Last Month';
|
||||
}
|
||||
} else {
|
||||
listItem[key] = 'Older';
|
||||
}
|
||||
return listItem;
|
||||
}
|
||||
|
||||
public showEmptyMessage(): void {
|
||||
document.getElementById('emptyMessageDiv').style.display = '';
|
||||
document.getElementById('mailarea').style.display = 'none';
|
||||
document.getElementById('accordian').style.display = 'none';
|
||||
this.showToolbarItems('none');
|
||||
let readingPane: HTMLElement = document.getElementById('reading-pane-div');
|
||||
readingPane.className = readingPane.className.replace(' new-mail', '');
|
||||
(document.getElementsByClassName('tb-item-new-mail')[0] as HTMLElement).style.display = 'inline-flex';
|
||||
(document.getElementsByClassName('tb-item-mark-read')[0] as HTMLElement).style.display = 'inline-flex';
|
||||
}
|
||||
|
||||
public showToolbarItems(displayType: string): void {
|
||||
let selectedFolder: HTMLCollectionOf<HTMLElement> =
|
||||
document.getElementsByClassName('tb-item-Selected') as HTMLCollectionOf<HTMLElement>;
|
||||
for (let i: number = 0; i < selectedFolder.length; i++) {
|
||||
selectedFolder[i].style.display = displayType;
|
||||
}
|
||||
}
|
||||
|
||||
public setReadStyleMessage(contactID: string, readStyle: string): void {
|
||||
let data: { [key: string]: Object } = this.getSelectedMessage();
|
||||
this.selectedFolderName = data.Folder as string;
|
||||
if (data !== null) {
|
||||
let key: string = 'ReadStyle';
|
||||
data[key] = readStyle;
|
||||
key = 'ReadTitle';
|
||||
let readNode: HTMLElement =
|
||||
this.selectedListElement.getElementsByClassName('e-btn-icon ej-icon-Mark-as-read')[0].parentNode as HTMLElement;
|
||||
if (readStyle === 'Read') {
|
||||
data[key] = 'Mark as unread';
|
||||
(this.selectedListElement.getElementsByClassName('subjectstyle')[0] as HTMLElement).className = 'subjectstyle';
|
||||
(this.selectedListElement.getElementsByClassName('template-container')[0] as HTMLElement).className =
|
||||
'template-container';
|
||||
readNode.title = 'Mark as unread';
|
||||
this.setReadCount('Unread');
|
||||
} else {
|
||||
data[key] = 'Mark as read';
|
||||
readNode.title = 'Mark as read';
|
||||
(this.selectedListElement.getElementsByClassName('subjectstyle')[0] as HTMLElement).className =
|
||||
'subjectstyle Unread';
|
||||
(this.selectedListElement.getElementsByClassName('template-container')[0] as HTMLElement).className =
|
||||
'template-container Unread-parent';
|
||||
this.setReadCount('Read');
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
public setReadCount(readType: string): void {
|
||||
let selectedFolder: HTMLCollectionOf<HTMLElement> =
|
||||
document.getElementsByClassName('treeCount ' + this.selectedFolderName) as HTMLCollectionOf<HTMLElement>;
|
||||
for (let i: number = 0; i < selectedFolder.length; i++) {
|
||||
let count: number = selectedFolder[i].innerHTML === '' ? 0 : Number(selectedFolder[i].innerHTML);
|
||||
if (readType === 'Unread') {
|
||||
if (count > 0) {
|
||||
count -= 1;
|
||||
}
|
||||
} else {
|
||||
count += 1;
|
||||
}
|
||||
selectedFolder[i].innerHTML = count === 0 ? '' : count.toString();
|
||||
}
|
||||
}
|
||||
|
||||
public toolbarClick(args: ClickEventArgs): void {
|
||||
if (args.item) {
|
||||
if (args.item.prefixIcon === 'ej-icon-Menu tb-icons') {
|
||||
let sidebarElement: Element = document.getElementsByClassName('sidebar')[0];
|
||||
sidebarElement.className = 'sidebar show';
|
||||
let overlayElement: Element = document.getElementsByClassName('overlay-element')[0];
|
||||
overlayElement.className = 'overlay-element show1';
|
||||
this.isMenuClick = true;
|
||||
} else if (args.item.prefixIcon === 'ej-icon-Back') {
|
||||
let contentElement: Element = document.getElementsByClassName('row content')[0];
|
||||
contentElement.className = contentElement.className.replace('show-reading-pane', 'show-message-pane');
|
||||
let contentWrapper: Element = document.getElementsByClassName('content-wrapper')[0];
|
||||
if (contentWrapper.className.indexOf('show-search-option') !== -1) {
|
||||
this.resetSelectedFolderData();
|
||||
}
|
||||
contentWrapper.className = 'content-wrapper';
|
||||
} else if (args.item.prefixIcon === 'ej-icon-Mark-as-read tb-icons') {
|
||||
this.markAllRead();
|
||||
} else if (args.item.text === 'Delete' || args.item.prefixIcon === 'ej-icon-Delete' ||
|
||||
args.item.text === 'Junk' ) {
|
||||
let selectedMessage: { [key: string]: Object } = this.getSelectedMessage();
|
||||
this.messageDataSource.splice(this.messageDataSource.indexOf(selectedMessage), 1);
|
||||
let key: string = 'ContactID';
|
||||
this.grpListObj.removeItem({ id: selectedMessage[key].toString() });
|
||||
if (args.item.prefixIcon === 'ej-icon-Delete' && window.innerWidth < 605) {
|
||||
let contentElement: Element = document.getElementsByClassName('row content')[0];
|
||||
contentElement.className = contentElement.className.replace('show-reading-pane', 'show-message-pane');
|
||||
} else {
|
||||
this.showEmptyMessage();
|
||||
}
|
||||
} else if ((args.item.text === 'New' || args.item.prefixIcon === 'ej-icon-Create-New') ||
|
||||
(args.item.prefixIcon === 'ej-icon-Reply-All')) {
|
||||
if (args.item.prefixIcon === 'ej-icon-Create-New') {
|
||||
let contentWrapper: Element = document.getElementsByClassName('content-wrapper')[0];
|
||||
contentWrapper.className = 'content-wrapper hide-message-option';
|
||||
}
|
||||
let option: string = 'New';
|
||||
if (args.item.prefixIcon === 'ej-icon-Reply-All') {
|
||||
option = 'Reply All';
|
||||
}
|
||||
if (window.innerWidth < 605) {
|
||||
let contentElement: Element = document.getElementsByClassName('row content')[0];
|
||||
contentElement.className = contentElement.className.replace('show-message-pane', 'show-reading-pane');
|
||||
}
|
||||
this.showNewMailPopup(option);
|
||||
} else if (args.item.prefixIcon === 'ej-icon-Send') {
|
||||
this.sendClick();
|
||||
} else if (args.item.prefixIcon === 'ej-icon-Search') {
|
||||
let contentWrapper: Element = document.getElementsByClassName('content-wrapper')[0];
|
||||
contentWrapper.className = 'content-wrapper show-search-option';
|
||||
this.toolbarMobile.refreshOverflow();
|
||||
} else if (args.item.prefixIcon === 'ej-icon-Close') {
|
||||
this.acSearchMobile.value = '';
|
||||
} else if (args.item.prefixIcon === 'ej-icon-Copy tb-icons') {
|
||||
if (!this.dlgReplyAllWindow.content) {
|
||||
this.dlgReplyAllWindow.content = document.getElementById('reading-pane-popup');
|
||||
this.dlgReplyAllWindow.refresh();
|
||||
}
|
||||
this.dlgReplyAllWindow.show();
|
||||
this.readingPaneComponent.bindReadingPaneData(this.getSelectedMessage());
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
public sendClick(): void {
|
||||
if (this.dlgNewWindow.visible || this.dlgReplyAllWindow.visible) {
|
||||
this.dlgSentMailNew.show();
|
||||
} else {
|
||||
this.dlgSentMail.show();
|
||||
}
|
||||
}
|
||||
|
||||
public resetSelectedFolderData(): void {
|
||||
document.getElementById('spanFilterText').innerHTML = this.selectedFolderName;
|
||||
let dataSource: { [key: string]: Object }[] =
|
||||
this.getFilteredDataSource(this.messageDataSource, 'Folder', this.selectedFolderName);
|
||||
this.grpListObj.dataSource = dataSource;
|
||||
this.clearFilterMenu();
|
||||
this.filterContextMenu.items[0].iconCss = 'ej-icon-Right';
|
||||
this.filterContextMenu.dataBind();
|
||||
}
|
||||
|
||||
public clearFilterMenu(): void {
|
||||
for (let i: number = 0; i < this.filterContextMenu.items.length; i++) {
|
||||
if (this.filterContextMenu.items[i].items.length === 0) {
|
||||
this.filterContextMenu.items[i].iconCss = '';
|
||||
}
|
||||
}
|
||||
}
|
||||
public cloneObject(obj: { [key: string]: Object }): { [key: string]: Object } {
|
||||
let keys: string[] = Object.keys(obj);
|
||||
let cloneObject: { [key: string]: Object } = {};
|
||||
for (let i: number = 0; i < keys.length; i++) {
|
||||
cloneObject[keys[i]] = obj[keys[i]];
|
||||
}
|
||||
return cloneObject;
|
||||
}
|
||||
public popupMouseEnter(): void {
|
||||
this.hoverOnPopup = true;
|
||||
}
|
||||
public popupMouseLeave(): void {
|
||||
this.hoverOnPopup = false;
|
||||
this.hidePopup();
|
||||
}
|
||||
public hidePopup(): void {
|
||||
setTimeout(() => { if (!this.hoverOnPopup) { this.popupMail.hide(); } }, 2000);
|
||||
}
|
||||
|
||||
public showPopup1(): void {
|
||||
let newMessageData: { [key: string]: Object } = this.cloneObject(this.messageDataSource[Math.floor(Math.random() * (50 - 3) + 2)]);
|
||||
let key: string = 'ContactName';
|
||||
document.getElementById('popup-contact').innerHTML = newMessageData[key].toString();
|
||||
key = 'ContactTitle';
|
||||
document.getElementById('popup-subject').innerHTML = newMessageData[key].toString();
|
||||
key = 'Message';
|
||||
document.getElementById('popup-message-content').innerHTML = newMessageData[key].toString();
|
||||
key = 'Image';
|
||||
document.getElementById('popup-image').style.background = 'url(' +
|
||||
newMessageData[key].toString().replace('assets/images/images/', 'assets/images/large/') + ') no-repeat 50% 50%';
|
||||
key = 'Folder';
|
||||
newMessageData[key] = 'Inbox';
|
||||
key = 'ReadStyle';
|
||||
newMessageData[key] = 'Unread';
|
||||
key = 'ReadTitle';
|
||||
newMessageData[key] = 'Mark as read';
|
||||
key = 'Flagged';
|
||||
newMessageData[key] = 'None';
|
||||
key = 'FlagTitle';
|
||||
newMessageData[key] = 'Flag this message';
|
||||
key = 'ContactID';
|
||||
newMessageData[key] = 'SF20032';
|
||||
let element: HTMLElement = <HTMLElement>document.querySelector('#popupMailId');
|
||||
element.onmouseenter = this.popupMouseEnter.bind(this);
|
||||
element.onmouseleave = this.popupMouseLeave.bind(this);
|
||||
if (window.innerWidth > 605) {
|
||||
this.popupMail.show();
|
||||
} else {
|
||||
this.popupMail.hide();
|
||||
}
|
||||
let dataSource: { [key: string]: Object }[] = this.getFilteredDataSource(this.messageDataSource, 'Folder', this.selectedFolderName);
|
||||
dataSource.splice(0, 0, newMessageData);
|
||||
this.messageDataSource.splice(0, 0, newMessageData);
|
||||
this.grpListObj.dataSource = dataSource;
|
||||
this.setReadCount('Read');
|
||||
setTimeout(() => { this.hidePopup(); }, 2000);
|
||||
}
|
||||
|
||||
public flagListItem (target: HTMLElement, selectedMessage: {[key: string]: Object}): void {
|
||||
let key: string = 'Flagged';
|
||||
let parentNode: HTMLElement = target.parentNode as HTMLElement;
|
||||
if (target.className.indexOf('Flagged') !== -1) {
|
||||
parentNode.title = 'Flag this Message';
|
||||
target.className = 'e-btn-icon ej-icon-Flag_1';
|
||||
selectedMessage[key] = 'None';
|
||||
key = 'FlagTitle';
|
||||
selectedMessage[key] = 'Flag this Message';
|
||||
} else {
|
||||
parentNode.title = 'Remove the flag from this message';
|
||||
target.className = 'e-btn-icon ej-icon-Flag_1 Flagged';
|
||||
selectedMessage[key] = 'Flagged';
|
||||
key = 'FlagTitle';
|
||||
selectedMessage[key] = 'Remove the flag from this message';
|
||||
}
|
||||
}
|
||||
|
||||
public hideSideBar(): void {
|
||||
if (!this.isMenuClick) {
|
||||
let sidebar: Element = document.getElementsByClassName('sidebar')[0];
|
||||
if (sidebar.className.indexOf('sidebar show') !== -1) {
|
||||
sidebar.className = 'sidebar';
|
||||
let overlayElement: Element = document.getElementsByClassName('overlay-element')[0];
|
||||
overlayElement.className = 'overlay-element';
|
||||
}
|
||||
}
|
||||
this.isMenuClick = false;
|
||||
}
|
||||
|
||||
constructor() {
|
||||
this.messageDataSource = this.sortList(this.messageDataSource);
|
||||
}
|
||||
}
|
||||
Разница между файлами не показана из-за своего большого размера
Загрузить разницу
|
|
@ -0,0 +1,41 @@
|
|||
<div class='header navbar'>
|
||||
<div class='container-fluid' style="font-size: 0; white-space: nowrap; line-height: normal">
|
||||
<div style="display: table-cell">
|
||||
<div class='home-btn'>
|
||||
<span class='ej-icon-Bento' style='font-size: 18px;'></span>
|
||||
</div>
|
||||
<div style='margin-left: 15px;display: inline-block'>
|
||||
<span class='home-btn-text'>Webmail</span>
|
||||
</div>
|
||||
</div>
|
||||
<div style="display: table-cell; width: 100%; text-align: center">
|
||||
</div>
|
||||
<div id="notification-div" class="header-right-pane">
|
||||
<div style="pointer-events: none;">
|
||||
<button ejs-button id='btnNotification' iconCss='ej-icon-Notify' cssClass='btn-shadow-hide'
|
||||
style="min-width: 52px"></button>
|
||||
</div>
|
||||
</div>
|
||||
<div id="settings-div" class="header-right-pane">
|
||||
<div style="pointer-events: none;">
|
||||
<button ejs-button id='btnSettings' iconCss='ej-icon-Settings' cssClass='btn-shadow-hide'
|
||||
style="min-width: 52px"></button>
|
||||
</div>
|
||||
</div>
|
||||
<div id="about-div" class="header-right-pane">
|
||||
<div style="pointer-events: none;">
|
||||
<button ejs-button id='btnAbout' iconCss='ej-icon-Help-white' cssClass='btn-shadow-hide'
|
||||
style="min-width: 52px"></button>
|
||||
</div>
|
||||
</div>
|
||||
<div id="profile-div" class="header-right-pane">
|
||||
<div style="right: 0px;position: absolute;top: 3px;pointer-events: none;margin-right: 5px;">
|
||||
<div class='logo logo-style1 profile-pic'></div>
|
||||
</div>
|
||||
<div style="margin-right: 44px; pointer-events: none;">
|
||||
<button ejs-button id='btnLoginName' [content]='username' cssClass='btn-shadow-hide'
|
||||
class="btn-profile" style="min-width: 88px;font-weight: normal"></button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -0,0 +1,20 @@
|
|||
import { Component, ViewEncapsulation, OnInit } from '@angular/core';
|
||||
import { userName } from './../data/datasource';
|
||||
|
||||
@Component({
|
||||
selector: 'header-section',
|
||||
templateUrl: './header.component.html',
|
||||
encapsulation: ViewEncapsulation.None,
|
||||
})
|
||||
|
||||
export class HeaderComponent implements OnInit {
|
||||
|
||||
/** Configurations for the Header page */
|
||||
constructor() {
|
||||
}
|
||||
|
||||
public username: string = userName;
|
||||
|
||||
public ngOnInit(): void {
|
||||
}
|
||||
}
|
||||
Двоичный файл не отображается.
|
|
@ -0,0 +1,76 @@
|
|||
<?xml version="1.0" standalone="no"?>
|
||||
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd" >
|
||||
<svg xmlns="http://www.w3.org/2000/svg">
|
||||
<metadata>Generated by IcoMoon</metadata>
|
||||
<defs>
|
||||
<font id="icomoon" horiz-adv-x="1024">
|
||||
<font-face units-per-em="1024" ascent="960" descent="-64" />
|
||||
<missing-glyph horiz-adv-x="1024" />
|
||||
<glyph unicode=" " horiz-adv-x="512" d="" />
|
||||
<glyph unicode="" glyph-name="Add" d="M449.5 510.5h-218.7v-125h218.8v-218.7h125v218.8h218.8v125h-218.9v218.8h-125v-218.9zM953.2 448l-0.575-22.672-1.707-22.378-2.81-22.056-3.886-21.706-4.934-21.328-5.954-20.923-6.946-20.489-7.91-20.028-8.846-19.538-9.755-19.021-10.635-18.476-11.487-17.903-12.312-17.301-13.108-16.672-13.877-16.016-14.618-15.331-15.331-14.618-16.016-13.877-16.672-13.109-17.301-12.312-17.903-11.487-18.476-10.635-19.021-9.755-19.538-8.846-20.028-7.91-20.489-6.946-20.923-5.954-21.328-4.934-21.706-3.886-22.056-2.811-22.378-1.707-22.672-0.575-22.672 0.575-22.378 1.707-22.056 2.811-21.706 3.886-21.328 4.934-20.923 5.954-20.489 6.946-20.028 7.91-19.538 8.846-19.021 9.755-18.476 10.635-17.903 11.487-17.301 12.312-16.672 13.109-16.016 13.877-15.331 14.618-14.618 15.331-13.877 16.016-13.109 16.672-12.312 17.301-11.487 17.903-10.635 18.476-9.755 19.021-8.846 19.538-7.91 20.028-6.946 20.489-5.954 20.923-4.934 21.328-3.886 21.706-2.811 22.056-1.707 22.378-0.575 22.672 0.575 22.672 1.707 22.378 2.811 22.056 3.886 21.706 4.934 21.328 5.954 20.923 6.946 20.489 7.91 20.028 8.846 19.538 9.755 19.021 10.635 18.476 11.487 17.903 12.312 17.301 13.109 16.672 13.877 16.016 14.618 15.331 15.331 14.618 16.016 13.877 16.672 13.108 17.301 12.312 17.903 11.487 18.476 10.635 19.021 9.755 19.538 8.846 20.028 7.91 20.489 6.946 20.923 5.954 21.328 4.934 21.706 3.886 22.056 2.81 22.378 1.707 22.672 0.575 22.672-0.575 22.378-1.707 22.056-2.81 21.706-3.886 21.328-4.934 20.923-5.954 20.489-6.946 20.028-7.91 19.538-8.846 19.021-9.755 18.476-10.635 17.903-11.487 17.301-12.312 16.672-13.108 16.016-13.877 15.331-14.618 14.618-15.331 13.877-16.016 13.108-16.672 12.312-17.301 11.487-17.903 10.635-18.476 9.755-19.021 8.846-19.538 7.91-20.028 6.946-20.489 5.954-20.923 4.934-21.328 3.886-21.706 2.81-22.056 1.707-22.378 0.575-22.672zM12 448l0.652-25.691 1.934-25.358 3.185-24.994 4.405-24.598 5.592-24.17 6.748-23.71 7.873-23.219 8.965-22.696 10.026-22.142 11.056-21.556 12.053-20.938 13.019-20.289 13.954-19.608 14.856-18.895 15.727-18.15 16.567-17.374 17.374-16.567 18.15-15.727 18.895-14.856 19.608-13.954 20.289-13.019 20.938-12.053 21.556-11.056 22.142-10.026 22.696-8.965 23.219-7.873 23.71-6.748 24.17-5.592 24.598-4.405 24.994-3.185 25.358-1.934 25.691-0.652 25.691 0.652 25.358 1.934 24.994 3.185 24.598 4.405 24.17 5.592 23.71 6.748 23.219 7.873 22.696 8.965 22.142 10.026 21.556 11.056 20.938 12.053 20.289 13.019 19.608 13.954 18.895 14.856 18.15 15.727 17.374 16.567 16.567 17.374 15.727 18.15 14.856 18.895 13.954 19.608 13.019 20.289 12.053 20.938 11.056 21.556 10.026 22.142 8.965 22.696 7.873 23.219 6.748 23.71 5.592 24.17 4.405 24.598 3.185 24.994 1.934 25.358 0.652 25.691-0.652 25.691-1.934 25.358-3.185 24.994-4.405 24.598-5.592 24.17-6.748 23.71-7.873 23.219-8.965 22.696-10.026 22.142-11.056 21.556-12.053 20.938-13.019 20.289-13.954 19.608-14.856 18.895-15.727 18.15-16.567 17.374-17.374 16.567-18.15 15.727-18.895 14.856-19.608 13.954-20.289 13.019-20.938 12.053-21.556 11.056-22.142 10.026-22.696 8.965-23.219 7.873-23.71 6.748-24.17 5.592-24.598 4.405-24.994 3.185-25.358 1.934-25.691 0.652-25.691-0.652-25.358-1.934-24.994-3.185-24.598-4.405-24.17-5.592-23.71-6.748-23.219-7.873-22.696-8.965-22.142-10.026-21.556-11.056-20.938-12.053-20.289-13.019-19.608-13.954-18.895-14.856-18.15-15.727-17.374-16.567-16.567-17.374-15.727-18.15-14.856-18.895-13.954-19.608-13.019-20.289-12.053-20.938-11.056-21.556-10.026-22.142-8.965-22.696-7.873-23.219-6.748-23.71-5.592-24.17-4.405-24.598-3.185-24.994-1.934-25.358-0.652-25.691z" />
|
||||
<glyph unicode="" glyph-name="More" d="M762 448l0.646-12.775 1.895-12.407 3.082-11.976 4.205-11.483 5.266-10.926 6.263-10.306 7.198-9.624 8.070-8.878 8.878-8.070 9.624-7.198 10.306-6.263 10.926-5.266 11.483-4.205 11.976-3.082 12.407-1.895 12.775-0.646 12.775 0.646 12.407 1.895 11.976 3.082 11.483 4.205 10.926 5.266 10.306 6.263 9.624 7.198 8.878 8.070 8.070 8.878 7.198 9.624 6.263 10.306 5.266 10.926 4.205 11.483 3.082 11.976 1.895 12.407 0.646 12.775-0.646 12.775-1.895 12.407-3.082 11.976-4.205 11.483-5.266 10.926-6.263 10.306-7.198 9.624-8.070 8.878-8.878 8.070-9.624 7.198-10.306 6.263-10.926 5.266-11.483 4.205-11.976 3.082-12.407 1.895-12.775 0.646-12.775-0.646-12.407-1.895-11.976-3.082-11.483-4.205-10.926-5.266-10.306-6.263-9.624-7.198-8.878-8.070-8.070-8.878-7.198-9.624-6.263-10.306-5.266-10.926-4.205-11.483-3.082-11.976-1.895-12.407-0.646-12.775zM387 448l0.646-12.775 1.895-12.407 3.082-11.976 4.205-11.483 5.266-10.926 6.263-10.306 7.198-9.624 8.070-8.878 8.878-8.070 9.624-7.198 10.306-6.263 10.926-5.266 11.483-4.205 11.976-3.082 12.407-1.895 12.775-0.646 12.775 0.646 12.407 1.895 11.976 3.082 11.483 4.205 10.926 5.266 10.306 6.263 9.624 7.198 8.878 8.070 8.070 8.878 7.198 9.624 6.263 10.306 5.266 10.926 4.205 11.483 3.082 11.976 1.895 12.407 0.646 12.775-0.646 12.775-1.895 12.407-3.082 11.976-4.205 11.483-5.266 10.926-6.263 10.306-7.198 9.624-8.070 8.878-8.878 8.070-9.624 7.198-10.306 6.263-10.926 5.266-11.483 4.205-11.976 3.082-12.407 1.895-12.775 0.646-12.775-0.646-12.407-1.895-11.976-3.082-11.483-4.205-10.926-5.266-10.306-6.263-9.624-7.198-8.878-8.070-8.070-8.878-7.198-9.624-6.263-10.306-5.266-10.926-4.205-11.483-3.082-11.976-1.895-12.407-0.646-12.775zM12 448l0.646-12.775 1.895-12.407 3.082-11.976 4.205-11.483 5.266-10.926 6.263-10.306 7.198-9.624 8.070-8.878 8.878-8.070 9.624-7.198 10.306-6.263 10.926-5.266 11.483-4.205 11.976-3.082 12.407-1.895 12.775-0.646 12.775 0.646 12.407 1.895 11.976 3.082 11.483 4.205 10.926 5.266 10.306 6.263 9.624 7.198 8.878 8.070 8.070 8.878 7.198 9.624 6.263 10.306 5.266 10.926 4.205 11.483 3.082 11.976 1.895 12.407 0.646 12.775-0.646 12.775-1.895 12.407-3.082 11.976-4.205 11.483-5.266 10.926-6.263 10.306-7.198 9.624-8.070 8.878-8.878 8.070-9.624 7.198-10.306 6.263-10.926 5.266-11.483 4.205-11.976 3.082-12.407 1.895-12.775 0.646-12.775-0.646-12.407-1.895-11.976-3.082-11.483-4.205-10.926-5.266-10.306-6.263-9.624-7.198-8.878-8.070-8.070-8.878-7.198-9.624-6.263-10.306-5.266-10.926-4.205-11.483-3.082-11.976-1.895-12.407-0.646-12.775z" />
|
||||
<glyph unicode="" glyph-name="Search" d="M906.713 594.6l-0.323-12.748-0.96-12.583-1.581-12.402-2.186-12.205-2.775-11.993-3.349-11.765-3.906-11.521-4.449-11.262-4.975-10.987-5.486-10.696-5.981-10.389-6.46-10.067-6.924-9.729-7.372-9.376-7.804-9.006-8.22-8.621-8.621-8.22-9.006-7.804-9.376-7.372-9.729-6.924-10.067-6.46-10.389-5.981-10.696-5.486-10.987-4.975-11.262-4.449-11.521-3.906-11.765-3.349-11.993-2.775-12.205-2.186-12.402-1.581-12.583-0.96-12.748-0.323-12.748 0.323-12.583 0.96-12.402 1.581-12.205 2.186-11.993 2.775-11.765 3.349-11.521 3.906-11.262 4.449-10.987 4.975-10.696 5.486-10.389 5.981-10.067 6.46-9.729 6.924-9.376 7.372-9.006 7.804-8.621 8.22-8.22 8.621-7.804 9.006-7.372 9.376-6.924 9.729-6.46 10.067-5.981 10.389-5.486 10.696-4.975 10.987-4.449 11.262-3.906 11.521-3.349 11.765-2.775 11.993-2.186 12.205-1.581 12.402-0.96 12.583-0.323 12.748 0.323 12.748 0.96 12.583 1.581 12.403 2.186 12.207 2.775 11.995 3.349 11.768 3.906 11.524 4.449 11.265 4.975 10.99 5.486 10.7 5.981 10.394 6.46 10.072 6.924 9.734 7.372 9.38 7.804 9.011 8.22 8.626 8.621 8.225 9.006 7.809 9.376 7.376 9.729 6.928 10.067 6.465 10.389 5.985 10.696 5.49 10.987 4.979 11.262 4.452 11.521 3.909 11.765 3.351 11.993 2.777 12.205 2.187 12.402 1.582 12.583 0.961 12.748 0.324 12.748-0.324 12.583-0.961 12.402-1.582 12.205-2.187 11.993-2.777 11.765-3.351 11.521-3.909 11.262-4.452 10.987-4.979 10.696-5.49 10.389-5.985 10.067-6.465 9.729-6.928 9.376-7.376 9.006-7.809 8.621-8.225 8.22-8.626 7.804-9.011 7.372-9.38 6.924-9.734 6.46-10.072 5.981-10.394 5.486-10.7 4.975-10.99 4.449-11.265 3.906-11.524 3.349-11.768 2.775-11.995 2.186-12.207 1.581-12.403 0.96-12.583 0.323-12.748zM305.213 594.6l0.197-11.802 0.586-11.703 0.969-11.598 1.345-11.488 3.79-22.625 5.213-22.12 6.582-21.572 7.896-20.98 9.157-20.345 10.364-19.666-10.837-4.323-10.387-5.514-9.825-6.77-9.15-8.092-268.3-268.3-7.225-7.994-6.261-8.519-5.298-8.969-4.335-9.344-3.371-9.644-2.408-9.869-1.445-10.019-0.482-10.094 0.482-10.094 1.445-10.019 2.408-9.869 3.371-9.644 4.335-9.344 5.298-8.969 6.261-8.519 7.225-7.994 8.008-7.209 8.526-6.252 8.971-5.293 9.344-4.333 9.644-3.372 9.871-2.41 10.026-1.447 10.108-0.483 10.079 0.483 10.011 1.447 9.866 2.41 9.643 3.372 9.343 4.333 8.966 5.293 8.511 6.252 7.979 7.209 268.3 268.4 8.092 9.15 6.77 9.825 5.514 10.388 4.323 10.837 19.637-10.364 20.331-9.157 20.978-7.896 21.578-6.582 22.131-5.213 22.638-3.79 11.494-1.345 11.603-0.969 11.706-0.586 11.803-0.197 18.161 0.461 17.926 1.367 17.668 2.251 17.388 3.112 17.085 3.952 16.76 4.769 16.412 5.563 16.043 6.335 15.65 7.085 15.236 7.812 14.799 8.517 14.34 9.2 13.858 9.86 13.354 10.498 12.828 11.113 12.279 11.706 11.708 12.277 11.115 12.825 10.499 13.351 9.861 13.855 9.201 14.336 8.518 14.795 7.813 15.231 7.086 15.645 6.336 16.037 5.563 16.406 4.769 16.753 3.952 17.078 3.113 17.38 2.251 17.66 1.367 17.917 0.461 18.152-0.461 18.161-1.367 17.926-2.251 17.668-3.113 17.388-3.952 17.085-4.769 16.76-5.563 16.412-6.336 16.043-7.086 15.65-7.813 15.236-8.518 14.799-9.201 14.34-9.861 13.858-10.499 13.354-11.115 12.828-11.708 12.279-12.279 11.708-12.828 11.115-13.354 10.499-13.858 9.861-14.34 9.201-14.799 8.518-15.236 7.813-15.65 7.086-16.043 6.336-16.412 5.563-16.76 4.769-17.085 3.952-17.388 3.113-17.668 2.251-17.926 1.367-18.161 0.461-18.153-0.461-17.918-1.367-17.661-2.251-17.382-3.113-17.080-3.952-16.756-4.769-16.409-5.563-16.040-6.336-15.649-7.086-15.235-7.813-14.799-8.518-14.34-9.201-13.859-9.861-13.356-10.499-12.83-11.115-12.282-11.708-11.711-12.279-11.118-12.828-10.502-13.354-9.864-13.858-9.204-14.34-8.521-14.799-7.816-15.236-7.088-15.65-6.338-16.043-5.566-16.412-4.771-16.76-3.954-17.085-3.114-17.388-2.252-17.668-1.368-17.926-0.461-18.161z" />
|
||||
<glyph unicode="" glyph-name="Information" d="M480.8-51.951h62.5v62.5h-62.5v-62.5zM437.5 938.049l-17.642-5.533-17.070-6.555-16.489-7.586-15.898-8.627-15.278-9.62-14.622-10.567-13.947-11.523-13.253-12.489-12.489-13.295-11.523-13.942-10.567-14.598-9.62-15.264-8.641-15.898-7.609-16.489-6.559-17.070-5.491-17.642-4.389-18.109-3.123-18.466-1.867-18.803-0.62-19.122h62.5l0.272 11.273 0.814 11.095 1.356 10.917 1.896 10.739 2.435 10.561 2.973 10.383 3.51 10.205 4.045 10.027 4.509 9.778 4.9 9.459 5.289 9.141 5.676 8.822 6.061 8.503 6.443 8.184 6.822 7.866 7.2 7.547 7.547 7.195 7.866 6.812 8.184 6.43 8.503 6.049 8.822 5.67 9.141 5.291 9.459 4.914 9.778 4.538 10.027 4.074 10.205 3.523 10.383 2.975 10.561 2.429 10.739 1.885 10.917 1.343 11.095 0.804 11.273 0.268 11.273-0.272 11.095-0.814 10.917-1.356 10.739-1.896 10.561-2.435 10.383-2.973 10.205-3.51 10.027-4.045 9.778-4.538 9.459-4.914 9.141-5.291 8.822-5.67 8.503-6.049 8.184-6.43 7.866-6.812 7.547-7.195 7.195-7.547 6.812-7.866 6.43-8.184 6.049-8.503 5.67-8.822 5.291-9.141 4.914-9.459 4.538-9.778 4.045-10.055 3.51-10.218 2.973-10.385 2.435-10.555 1.896-10.728 1.356-10.905 0.814-11.085 0.272-11.269-0.673-17.136-2.014-16.302-3.345-15.458-4.667-14.605-5.814-13.931-6.648-13.444-7.492-12.956-8.345-12.469-9.091-12.059-9.709-11.741-10.309-11.441-10.891-11.159-22.725-21.987-23.175-21.912-23.175-22.3-22.725-22.9-10.933-11.889-10.305-12.423-9.686-12.967-9.077-13.52-8.359-14.155-7.516-14.858-6.653-15.552-5.772-16.236-4.709-17.078-3.341-18.072-1.991-19.047-0.659-20.003v-93.8h62.5v93.8l0.673 17.136 2.014 16.302 3.345 15.458 4.667 14.605 5.772 13.931 6.653 13.444 7.516 12.956 8.359 12.469 9.091 12.041 9.709 11.684 10.309 11.347 10.891 11.028 22.725 21.813 23.175 21.887 23.175 22.325 22.725 23.075 10.891 11.962 10.309 12.488 9.709 13.012 9.091 13.538 8.359 14.155 7.516 14.858 6.653 15.552 5.772 16.236 4.709 17.078 3.341 18.072 1.991 19.047 0.659 20.003-0.62 19.108-1.867 18.78-3.123 18.461-4.389 18.152-5.533 17.642-6.555 17.070-7.586 16.489-8.627 15.898-9.62 15.278-10.567 14.622-11.523 13.947-12.489 13.253-13.253 12.489-13.947 11.523-14.622 10.567-15.278 9.62-15.898 8.641-16.489 7.609-17.070 6.559-17.642 5.491-18.109 4.389-18.466 3.123-18.803 1.867-19.122 0.62-19.108-0.563-18.78-1.838-18.461-3.112-18.152-4.388z" />
|
||||
<glyph unicode="" glyph-name="Notification" d="M583.4 90.85l-0.341-7.369-1.034-7.106-1.747-6.844-2.478-6.581-3.037-6.245-3.563-5.842-4.088-5.448-4.612-5.064-5.078-4.627-5.472-4.111-5.847-3.567-6.203-2.995-6.581-2.436-6.844-1.752-7.106-1.058-7.369-0.355-7.369 0.341-7.106 1.034-6.844 1.747-6.581 2.478-6.203 3.038-5.847 3.563-5.472 4.087-5.078 4.613-4.612 5.064-4.088 5.448-3.563 5.842-3.037 6.245-2.436 6.581-1.752 6.844-1.058 7.106-0.355 7.369h142.8zM623.1 853.95l12.769-5.911 12.358-6.411 11.947-6.912 11.539-7.416 11.131-7.922 10.724-8.431 10.319-8.942 9.914-9.455 9.455-9.886 8.942-10.305 8.431-10.722 7.922-11.137 7.416-11.55 6.912-11.96 6.411-12.368 5.911-12.773 5.278-13.088 4.582-13.313 3.883-13.537 3.182-13.763 2.479-13.987 1.774-14.213 1.066-14.438 0.356-14.662v-428.6h-571.5v428.6l0.356 14.662 1.066 14.438 1.774 14.213 2.479 13.987 3.182 13.763 3.883 13.537 4.582 13.313 5.278 13.088 5.911 12.769 6.411 12.358 6.912 11.948 7.416 11.538 7.922 11.131 8.431 10.724 8.942 10.319 9.455 9.914 9.886 9.426 10.305 8.928 10.722 8.429 11.137 7.929 11.55 7.427 11.96 6.924 12.368 6.421 12.773 5.915 13.088 5.306 13.314 4.595 13.541 3.885 13.77 3.176 13.999 2.468 14.23 1.761 14.462 1.056 14.695 0.352 14.63-0.356 14.414-1.066 14.198-1.774 13.983-2.479 13.767-3.182 13.552-3.883 13.336-4.582 13.12-5.278zM417.2 935.15l-22.498-7.088-21.739-8.362-20.97-9.638-20.192-10.912-19.369-12.15-18.506-13.35-17.644-14.55-16.781-15.75-15.708-16.767-14.555-17.62-13.373-18.502-12.164-19.411-10.969-20.192-9.656-20.97-8.344-21.739-7.031-22.498-3.019-11.493-2.609-11.604-2.201-11.711-1.796-11.817-1.393-11.92-0.992-12.021-0.593-12.119-0.197-12.215v-428.5h-71.5v-71.4h285.7l0.695-14.564 2.092-14.123 3.498-13.655 4.914-13.158 6.091-12.58 7.159-11.783 8.209-10.977 9.241-10.161 10.161-9.241 10.977-8.209 11.783-7.159 12.58-6.091 13.2-4.914 13.65-3.498 14.1-2.092 14.55-0.695 14.55 0.695 14.1 2.092 13.65 3.498 13.2 4.914 12.58 6.091 11.783 7.159 10.977 8.209 10.161 9.241 9.227 10.161 8.186 10.977 7.155 11.783 6.133 12.58 4.872 13.2 3.503 13.65 2.116 14.1 0.709 14.55h285.7v71.4h-71.4v428.6l-0.201 12.211-0.603 12.109-1.004 12.008-1.404 11.909-1.802 11.81-2.199 11.713-2.596 11.617-2.99 11.522-7.088 22.484-8.362 21.716-9.638 20.966-10.912 20.234-12.15 19.369-13.35 18.506-14.55 17.644-15.75 16.781-16.739 15.75-17.648 14.55-18.53 13.35-19.383 12.15-20.192 10.913-20.97 9.637-21.739 8.363-22.498 7.087-11.489 3.019-11.592 2.609-11.695 2.201-11.798 1.796-11.902 1.393-12.005 0.992-12.108 0.593-12.211 0.197-12.219-0.202-12.129-0.605-12.033-1.008-11.931-1.411-11.823-1.814-11.71-2.217-11.59-2.62-11.465-3.023z" />
|
||||
<glyph unicode="" glyph-name="Setting" d="M562.6 567.6l11.416-5.509 10.684-6.466 9.934-7.403 9.166-8.322 8.38-9.223 7.433-9.964 6.477-10.695 5.511-11.417 4.405-11.998 3.158-12.439 1.902-12.87 0.636-13.292-0.622-13.278-1.878-12.847-3.153-12.434-4.447-12.041-5.553-11.459-6.472-10.691-7.409-9.941-8.366-9.209-9.166-8.364-9.934-7.398-10.684-6.442-11.416-5.495-11.998-4.405-12.439-3.158-12.87-1.902-13.292-0.636-13.292 0.622-12.87 1.878-12.439 3.153-11.998 4.447-11.459 5.509-10.691 6.466-9.941 7.403-9.209 8.322-8.38 9.223-7.433 9.964-6.477 10.695-5.511 11.417-4.389 11.998-3.123 12.439-1.867 12.87-0.62 13.292 0.622 13.292 1.878 12.87 3.153 12.439 4.447 11.998 5.511 11.417 6.477 10.695 7.433 9.964 8.38 9.223 9.167 8.364 9.945 7.398 10.714 6.442 11.473 5.495 11.984 4.405 12.416 3.158 12.866 1.902 13.334 0.636 13.234-0.636 12.841-1.902 12.428-3.158 11.997-4.405zM440.1 618.2l-16.316-7.931-15.209-9.244-14.122-10.556-13.053-11.869-11.867-13.067-10.545-14.145-9.214-15.214-7.873-16.273-3.408-8.475-2.95-8.625-2.493-8.775-2.037-8.925-1.582-9.075-1.129-9.225-0.676-9.375-0.225-9.525 0.225-9.492 0.676-9.35 1.129-9.207 1.582-9.063 2.037-8.918 2.493-8.771 2.95-8.624 3.408-8.475 7.873-16.273 9.214-15.214 10.545-14.145 11.867-13.067 13.067-11.869 14.145-10.556 15.214-9.244 16.273-7.931 8.475-3.379 8.624-2.936 8.771-2.491 8.918-2.043 9.063-1.593 9.207-1.141 9.35-0.686 9.492-0.229 9.492 0.225 9.35 0.676 9.207 1.129 9.063 1.582 8.918 2.037 8.771 2.493 8.624 2.95 8.475 3.408 16.316 7.931 15.209 9.244 14.122 10.556 13.053 11.869 11.867 13.053 10.545 14.122 9.214 15.209 7.873 16.316 3.408 8.475 2.95 8.624 2.493 8.771 2.037 8.918 1.582 9.063 1.129 9.207 0.676 9.35 0.225 9.492-0.225 9.521-0.676 9.365-1.129 9.213-1.582 9.064-2.037 8.919-2.493 8.777-2.95 8.638-3.408 8.504-7.873 16.273-9.214 15.214-10.545 14.145-11.867 13.067-13.067 11.869-14.145 10.556-15.214 9.244-16.273 7.931-8.475 3.379-8.624 2.936-8.771 2.491-8.918 2.043-9.063 1.593-9.207 1.141-9.35 0.686-9.492 0.229-9.492-0.229-9.35-0.686-9.207-1.141-9.063-1.593-8.918-2.043-8.771-2.491-8.624-2.936-8.475-3.379zM465.3 763.3l23.3 2 11.612 0.763 11.688 0.237 11.4-0.237 11.7-0.763 23.1-2 72.7 115.9 102.2-42.2-30.9-133.1 17.975-15.737 16.625-15.663 15.787-16.487 15.413-17.913 133.1 30.9 42.3-102.2-115.9-72.2 1.9-23.1 0.763-11.7 0.237-11.4-0.275-11.688-0.725-11.612-1.9-23.3 115.9-72.7-42.3-102.1-133.1 30.9-15.663-18.025-15.737-16.675-16.487-15.75-17.913-15.45 30.9-133-102.2-42.2-72.2 115.9-23.3-2-11.612-0.762-11.688-0.238-11.4 0.238-11.7 0.762-23.1 2-72.6-115.9-102.2 42.2 30.9 133.1-17.975 15.737-16.625 15.663-15.825 16.45-7.744 8.778-7.631 9.172-133.1-30.9-42.2 102.2 115.9 72.2-1.9 23.1-0.762 11.663-0.238 11.438 0.238 11.687 0.762 11.613 1.9 23.3-115.9 72.7 42.2 102.1 133.1-30.9 15.663 17.975 15.737 16.625 16.487 15.788 17.913 15.412-30.9 133.1 102.2 42.2 72.1-115.9zM227.2 869.9l33.4-145.8-12.525-12.075-12.075-12.525-145.9 33.4-78.1-188.1 127.2-79.1-0.4-17.6 0.2-8.8 0.2-8.9-127.2-79.2 78.1-188.1 145.9 33.4 12.038-12.525 12.563-12.075-33.4-145.8 188-78.1 79.1 127.2 8.8-0.2 8.8-0.3 8.8 0.3 8.8 0.2 79.3-127.2 188.1 78.1-33.4 145.9 12.513 12.075 11.987 12.525 145.9-33.4 78.1 188.1-127.2 79.1 0.2 8.9 0.3 8.8-0.3 8.8-0.2 8.8 127.2 79.1-78.1 188.1-145.9-33.4-12.025 12.525-12.475 12.075 33.4 145.8-188.1 78.1-79.1-127.2-17.6 0.6-17.6-0.6-79.3 127.2-188-78.1z" />
|
||||
<glyph unicode="" glyph-name="Agenda .path1" horiz-adv-x="1017" d="M963.001 839.696h-108.443v-56.481c-3.165-32.573-30.404-57.826-63.541-57.826s-60.376 25.253-63.521 57.565l-0.021 0.261v56.481h-437.728v-56.481c-3.165-32.573-30.404-57.826-63.541-57.826s-60.376 25.253-63.521 57.565l-0.021 0.261v56.481h-109.008c-28.843-1.437-51.909-24.306-53.649-52.934l-0.008-0.158v-798.641c0-28.386 23.012-51.398 51.398-51.398h913.862c28.386 0 51.398 23.012 51.398 51.398v0 798.641c-1.748 28.786-24.814 51.655-53.524 53.087l-0.133 0.005zM960.177-7.519h-903.696v621.291h903.696z" />
|
||||
<glyph unicode="" glyph-name="Agenda .path2" horiz-adv-x="1017" d="M176.785 783.215c2.763-25.079 23.834-44.412 49.421-44.412s46.657 19.334 49.401 44.189l0.020 0.223v112.962c-2.763 25.079-23.834 44.412-49.421 44.412s-46.657-19.334-49.401-44.189l-0.020-0.223z" />
|
||||
<glyph unicode="" glyph-name="Agenda .path3" horiz-adv-x="1017" d="M225.924 719.956c0.001 0 0.002 0 0.002 0 35.050 0 63.501 28.254 63.821 63.228v112.992c-3.165 32.573-30.404 57.826-63.541 57.826s-60.376-25.253-63.521-57.565l-0.021-0.261v-112.962c0.316-34.809 28.45-62.942 63.229-63.258h0.030zM225.924 945.88c27.45 0 49.703-22.253 49.703-49.703v0-112.962c-2.763-25.079-23.834-44.412-49.421-44.412s-46.657 19.334-49.401 44.189l-0.020 0.223v112.962c0 0.001 0 0.002 0 0.003 0 27.252 21.932 49.381 49.108 49.7h0.030z" />
|
||||
<glyph unicode="" glyph-name="Agenda .path4" horiz-adv-x="1017" d="M741.595 783.215c2.763-25.079 23.834-44.412 49.421-44.412s46.657 19.334 49.401 44.189l0.020 0.223v112.962c-2.763 25.079-23.834 44.412-49.421 44.412s-46.657-19.334-49.401-44.189l-0.020-0.223z" />
|
||||
<glyph unicode="" glyph-name="Agenda .path5" horiz-adv-x="1017" d="M790.734 719.956c0.001 0 0.002 0 0.002 0 35.050 0 63.501 28.254 63.821 63.228v112.992c-3.165 32.573-30.404 57.826-63.541 57.826s-60.376-25.253-63.521-57.565l-0.021-0.261v-112.962c0.316-34.809 28.45-62.942 63.229-63.258h0.030zM790.734 945.88c27.45 0 49.703-22.253 49.703-49.703v0-112.962c-2.763-25.079-23.834-44.412-49.421-44.412s-46.657 19.334-49.401 44.189l-0.020 0.223v112.962c0 0.001 0 0.002 0 0.003 0 27.252 21.932 49.381 49.108 49.7h0.030z" />
|
||||
<glyph unicode="" glyph-name="Archive" d="M0 832h1024v-170.667h-1024v170.667zM42.667 64h938.667v554.667h-938.667zM298.667 533.333h426.667v-85.333h-426.667z" />
|
||||
<glyph unicode="" glyph-name="Attach" horiz-adv-x="459" d="M459.476 767.84v-607.653c-0.103-30.951-6.855-60.298-18.901-86.725l0.539 1.32c-12.328-27.564-28.863-51.072-49.067-70.846l-0.040-0.039c-20.518-19.802-44.732-35.937-71.482-47.249l-1.538-0.578c-26.057-11.341-56.412-17.939-88.307-17.939-0.481 0-0.961 0.001-1.441 0.004h0.074c-0.381-0.002-0.831-0.004-1.282-0.004-31.925 0-62.309 6.598-89.863 18.504l1.47-0.565c-28.292 11.879-52.508 28.016-73.089 47.892l0.068-0.065c-19.765 19.396-35.989 42.317-47.669 67.758l-0.584 1.42c-11.507 25.106-18.259 54.454-18.362 85.367v640.571c-0.007 0.527-0.011 1.149-0.011 1.772 0 22.261 4.881 43.382 13.631 62.352l-0.382-0.925c8.966 19.746 20.889 36.59 35.412 50.785l0.031 0.031c14.561 14.036 31.677 25.542 50.565 33.735l1.105 0.427c18.514 8.1 40.089 12.813 62.765 12.813 0.303 0 0.606-0.001 0.908-0.003h-0.047c0.282 0.002 0.615 0.003 0.948 0.003 22.647 0 44.192-4.714 63.709-13.213l-1.031 0.4c20.173-8.702 37.436-20.354 52.139-34.629l-0.042 0.040c14.588-14.204 26.516-31.054 35.025-49.787l0.418-1.029c8.361-18.039 13.239-39.153 13.239-61.406 0-0.18 0-0.36-0.001-0.541v0.028-640.534c0.002-0.237 0.003-0.516 0.003-0.797 0-13.306-2.831-25.95-7.922-37.365l0.232 0.583c-5.24-11.79-12.288-21.846-20.909-30.304l-0.015-0.015c-18.039-17.489-42.67-28.27-69.818-28.27s-51.779 10.781-69.844 28.295l0.026-0.025c-8.645 8.467-15.694 18.525-20.68 29.705l-0.244 0.613c-4.859 10.831-7.69 23.476-7.69 36.781 0 0.28 0.001 0.56 0.004 0.839v-0.043 544.454h65.334v-543.6c-0.001-0.086-0.001-0.188-0.001-0.291 0-8.831 3.776-16.781 9.801-22.322l0.022-0.020c5.931-5.837 14.074-9.441 23.059-9.441s17.129 3.604 23.064 9.445l-0.004-0.004c6.050 5.631 9.822 13.638 9.822 22.527 0 0.037 0 0.074 0 0.11v-0.006 640.534c0.028 0.846 0.044 1.842 0.044 2.84 0 12.199-2.368 23.845-6.67 34.503l0.221-0.619c-5.219 11.798-12.27 21.857-20.906 30.301l-0.018 0.017c-17.905 17.444-42.397 28.202-69.402 28.202-0.672 0-1.342-0.007-2.011-0.020l0.1 0.002c-0.066 0-0.144 0-0.221 0-26.995 0-51.48-10.751-69.405-28.205l0.022 0.021c-8.654-8.462-15.705-18.521-20.681-29.707l-0.243-0.612c-4.859-10.859-7.689-23.533-7.689-36.869 0-0.249 0.001-0.498 0.003-0.747v0.038-640.534c-0.001-0.152-0.001-0.332-0.001-0.513 0-22.253 4.877-43.367 13.621-62.33l-0.382 0.925c8.957-19.75 20.881-36.595 35.411-50.784l0.032-0.031c14.661-14.234 31.924-25.887 50.992-34.162l1.104-0.427c18.459-8.1 39.975-12.814 62.593-12.814 0.364 0 0.727 0.001 1.090 0.004h-0.056c0.282-0.002 0.615-0.003 0.948-0.003 22.647 0 44.192 4.714 63.709 13.213l-1.031-0.4c20.173 8.702 37.436 20.354 52.139 34.629l-0.042-0.040c14.553 14.226 26.476 31.069 35.019 49.78l0.424 1.036c8.361 18.039 13.239 39.153 13.239 61.406 0 0.18 0 0.36-0.001 0.541v-0.028 608.507z" />
|
||||
<glyph unicode="" glyph-name="Back" d="M512 960c-282.77 0-512-229.23-512-512s229.23-512 512-512c282.77 0 512 229.23 512 512v0c0 282.77-229.23 512-512 512v0zM512-10.105c-253.005 0-458.105 205.101-458.105 458.105s205.101 458.105 458.105 458.105c253.005 0 458.105-205.101 458.105-458.105v0c-0.307-252.881-205.224-457.799-458.076-458.105h-0.030zM503.916 617.768l-37.726 37.726-201.566-201.027h0.539l-6.467-7.006 207.495-206.956 37.726 37.726-142.282 142.821h392.893v53.895h-392.893l142.282 142.821z" />
|
||||
<glyph unicode="" glyph-name="Bento" d="M0 550.4h204.8v-204.8h-204.8v204.8zM819.2 140.8h204.8v-204.8h-204.8v204.8zM819.2 550.4h204.8v-204.8h-204.8v204.8zM409.6 960h204.8v-204.8h-204.8v204.8zM819.2 960h204.8v-204.8h-204.8v204.8zM409.6 140.8h204.8v-204.8h-204.8v204.8zM0 960h204.8v-204.8h-204.8v204.8zM0 140.8h204.8v-204.8h-204.8v204.8zM409.6 550.4h204.8v-204.8h-204.8v204.8z" />
|
||||
<glyph unicode="" glyph-name="Blue" d="M118.154 960h787.692v-1024h-787.692v1024z" />
|
||||
<glyph unicode="" glyph-name="Bold" d="M137.216 109.056v676.864h-26.624c-3.83-0.424-8.271-0.665-12.769-0.665-27.591 0-53.058 9.093-73.568 24.447l0.32-0.23c-15.249 15.049-24.695 35.946-24.695 59.049 0 1.562 0.043 3.113 0.128 4.653l-0.009-0.214c-0.047 1.041-0.073 2.262-0.073 3.49 0 23.583 9.842 44.866 25.642 59.968l0.031 0.030c20.166 15.068 45.587 24.126 73.125 24.126 4.179 0 8.309-0.209 12.381-0.616l-0.514 0.042h417.792c4.64 0.231 10.076 0.362 15.542 0.362 86.37 0 165.079-32.801 224.349-86.625l-0.276 0.247c56.050-50.453 91.137-123.251 91.137-204.244 0-0.195 0-0.391-0.001-0.586v0.030c-0.468-37.088-8.332-72.217-22.179-104.149l0.675 1.749c-15.944-35.972-37.7-66.582-64.4-92.054l-0.112-0.106c49.075-30.085 89.078-70.416 117.908-118.242l0.876-1.566c24.487-40.895 38.967-90.219 38.967-142.925 0-1.953-0.020-3.902-0.059-5.845l0.005 0.291c0.004-0.578 0.007-1.263 0.007-1.947 0-44.096-10.598-85.717-29.386-122.454l0.706 1.521c-12.878-27.071-30.48-49.914-51.954-68.381l-0.27-0.227c-29.075-24.431-63.050-44.226-100.083-57.635l-2.317-0.733c-39.593-13.174-85.175-20.774-132.532-20.774-5.608 0-11.192 0.107-16.749 0.318l0.801-0.024h-488.448c-3.467-0.347-7.494-0.546-11.566-0.546-28.12 0-54.034 9.445-74.742 25.337l0.292-0.215c-15.221 15.044-24.648 35.923-24.648 59.003 0 1.217 0.026 2.429 0.078 3.633l-0.006-0.172c-0.044 1-0.069 2.173-0.069 3.352 0 23.305 9.855 44.308 25.624 59.070l0.045 0.042c20.396 15.625 46.269 25.039 74.341 25.039 3.75 0 7.46-0.168 11.124-0.497l-0.473 0.034zM307.2 535.040h178.176c2.88-0.117 6.261-0.184 9.657-0.184 57.804 0 111.097 19.312 153.779 51.837l-0.62-0.453c26.764 18.735 44.049 49.423 44.049 84.148 0 0.657-0.006 1.312-0.018 1.966l0.001-0.098c0.003 0.303 0.005 0.662 0.005 1.020 0 33.388-15.979 63.044-40.707 81.737l-0.258 0.187c-31.061 19.973-68.981 31.841-109.673 31.841-7.537 0-14.98-0.407-22.306-1.201l0.907 0.080h-212.992zM307.2 109.056h286.72c5.27-0.404 11.412-0.634 17.609-0.634 44.765 0 86.724 12.019 122.824 33.006l-1.169-0.627c19.422 14.527 31.86 37.47 31.86 63.317 0 1.501-0.042 2.992-0.125 4.472l0.009-0.205c-4.398 43.062-27.977 79.841-61.937 102.076l-0.527 0.324c-44.809 32.368-100.843 51.771-161.409 51.771-6.259 0-12.47-0.207-18.626-0.615l0.836 0.044h-216.064z" />
|
||||
<glyph unicode="" glyph-name="Bullets" d="M341.333 917.333h853.333v-85.333h-853.333v85.333zM341.333 490.667h853.333v-85.333h-853.333v85.333zM341.333 64h853.333v-85.333h-853.333v85.333zM170.667 874.667c0-47.128-38.205-85.333-85.333-85.333s-85.333 38.205-85.333 85.333c0 47.128 38.205 85.333 85.333 85.333s85.333-38.205 85.333-85.333zM170.667 448c0-47.128-38.205-85.333-85.333-85.333s-85.333 38.205-85.333 85.333c0 47.128 38.205 85.333 85.333 85.333s85.333-38.205 85.333-85.333zM170.667 21.333c0-47.128-38.205-85.333-85.333-85.333s-85.333 38.205-85.333 85.333c0 47.128 38.205 85.333 85.333 85.333s85.333-38.205 85.333-85.333z" />
|
||||
<glyph unicode="" glyph-name="Calendar" d="M837.818 890.182v46.545h-46.545v-46.545h-558.545v46.545h-46.545v-46.545h-186.182v-930.909h1024v930.909zM977.455 5.818h-930.909v651.636h930.909zM46.545 704v139.636h139.636v-46.545h46.545v46.545h558.545v-46.545h46.545v46.545h139.636v-139.636zM744.727 564.364h93.091v-93.091h-93.091v93.091zM558.545 564.364h93.091v-93.091h-93.091v93.091zM372.364 564.364h93.091v-93.091h-93.091v93.091zM744.727 378.182h93.091v-93.091h-93.091v93.091zM558.545 378.182h93.091v-93.091h-93.091v93.091zM372.364 378.182h93.091v-93.091h-93.091v93.091zM186.182 378.182h93.091v-93.091h-93.091v93.091zM558.545 192h93.091v-93.091h-93.091v93.091zM372.364 192h93.091v-93.091h-93.091v93.091zM186.182 192h93.091v-93.091h-93.091v93.091z" />
|
||||
<glyph unicode="" glyph-name="Centre-aligned" d="M1102.769 960v-78.769h-1102.769v78.769zM157.538 723.692v-78.769h787.692v78.769zM0 408.615h1102.769v78.769h-1102.769zM157.538 251.077v-78.769h787.692v78.769zM0-64h1102.769v78.769h-1102.769z" />
|
||||
<glyph unicode="" glyph-name="Checkbox-Composite" d="M889.6 625.067l-29.867 29.867-454.4-453.973-198.4 197.973-29.867-29.867 228.267-228.693 484.267 484.693zM0 960v-1024h1024v1024zM981.333-21.333h-938.667v938.667h938.667z" />
|
||||
<glyph unicode="" glyph-name="Checkbox" d="M0 960v-1024h1024v1024zM981.333-21.333h-938.667v938.667h938.667z" />
|
||||
<glyph unicode="" glyph-name="Copy" d="M219.429 960v-804.571h804.571v804.571zM950.857 228.571h-658.286v512h658.286zM731.429 82.286v-73.143h-658.286v512h73.143v219.429h-146.286v-804.571h804.571v146.286h-73.143z" />
|
||||
<glyph unicode="" glyph-name="Create-New" d="M1024 490.667h-469.333v469.333h-85.333v-469.333h-469.333v-85.333h469.333v-469.333h85.333v469.333h469.333v85.333z" />
|
||||
<glyph unicode="" glyph-name="Decr-Indent" d="M0 960h1102.769v-78.769h-1102.769v78.769zM0 644.923h551.385v-78.769h-551.385v78.769zM0 329.846h551.385v-78.769h-551.385v78.769zM0 14.769h1102.769v-78.769h-1102.769v78.769zM946.018 644.135l-44.111 44.111-240.246-240.246 240.246-240.246 44.111 44.111-157.538 156.751h314.289v78.769h-314.289l157.538 156.751z" />
|
||||
<glyph unicode="" glyph-name="Delete" d="M180.706-3.765c0-33.267 26.968-60.235 60.235-60.235v0h542.118c33.267 0 60.235 26.968 60.235 60.235v0 783.059h-662.588zM662.588 628.706c0 16.634 13.484 30.118 30.118 30.118s30.118-13.484 30.118-30.118v0-542.118c0-16.634-13.484-30.118-30.118-30.118s-30.118 13.484-30.118 30.118v0zM481.882 628.706c0 16.634 13.484 30.118 30.118 30.118s30.118-13.484 30.118-30.118v0-542.118c0-16.634-13.484-30.118-30.118-30.118s-30.118 13.484-30.118 30.118v0zM301.176 628.706c0 16.634 13.484 30.118 30.118 30.118s30.118-13.484 30.118-30.118v0-542.118c0-16.634-13.484-30.118-30.118-30.118s-30.118 13.484-30.118 30.118v0zM875.219 899.765h-272.866v17.468c0 23.62-19.147 42.767-42.767 42.767h-95.172c-23.62 0-42.767-19.147-42.767-42.767v0-17.468h-272.866c-15.636 0-28.311-12.675-28.311-28.311v-4.216c0.338-15.374 12.88-27.708 28.304-27.708 0.002 0 0.004 0 0.007 0h726.437c15.636 0 28.311 12.675 28.311 28.311v0 3.614c0 15.636-12.675 28.311-28.311 28.311v0z" />
|
||||
<glyph unicode="" glyph-name="Dropdown-arrow" d="M1016.32 647.68l-508.16-508.16-508.16 508.16 120.96 120.32 384-384 384 384z" />
|
||||
<glyph unicode="" glyph-name="Favorite-Composite" d="M1024 576.107h-392.007l-119.993 383.893-119.993-383.893h-392.007l315.997-242.976-123.837-397.131 319.84 245.965 319.84-245.965-123.837 397.131 315.997 242.976z" />
|
||||
<glyph unicode="" glyph-name="Favorite" d="M512.427 816.947l79.426-253.651 9.394-29.892h298.916l-216.927-166.539-23.486-18.362 8.967-28.611 85.405-268.17-213.511 163.55-28.183 18.789-26.048-20.070-213.511-163.55 85.405 268.17 8.967 28.611-25.621 19.643-216.073 166.112h298.916l9.394 29.892 78.572 254.078zM512.427 960l-120.42-384.32h-392.007l315.997-242.976-123.837-397.558 320.267 246.819 319.413-246.819-123.837 397.131 316.851 243.403h-392.861l-119.566 384.32z" />
|
||||
<glyph unicode="" glyph-name="Flag_1" d="M150.588 960h60.235v-1024h-60.235v1024zM271.059 960v-542.118l602.353 271.059-602.353 271.059z" />
|
||||
<glyph unicode="" glyph-name="Font-Color-Icon" horiz-adv-x="1048" d="M0 40.811h1048.106v-104.811h-1048.106v104.811zM398.28 443.284h257.834l70.223-192.852h112.147l-264.123 709.568h-92.233l-266.219-709.568h112.147zM524.053 831.083l104.811-304.999h-209.621z" />
|
||||
<glyph unicode="" glyph-name="Font-Size" d="M374.784 893.44l-374.784-957.44h157.696l102.4 260.096h360.448l96.256-260.096h160.768l-371.712 957.44zM283.648 307.712l156.672 409.6 151.552-409.6zM944.128 960h-362.496l181.248-147.456 181.248 147.456z" />
|
||||
<glyph unicode="" glyph-name="Font" d="M1101.576-10.294c-31.485 33.127-56.299 72.925-72.076 117.023l-0.726 2.325-332.979 731.599h-25.063l-336.559-728.019c-19.338-49.445-46.409-91.852-80.168-127.923l0.205 0.221c-22.105-13.977-48.6-23.040-77.045-25.033l-0.531-0.030v-23.869h300.755v23.869c-0.963-0.017-2.098-0.027-3.236-0.027-31.443 0-61.132 7.506-87.375 20.823l1.101-0.507c-11.919 7.734-19.812 20.798-20.287 35.735l-0.002 0.069c3.054 28.845 11.535 55.13 24.415 78.664l-0.546-1.089 64.448 139.636h371.17l57.287-127.702c14.48-26.235 24.616-56.913 28.526-89.505l0.117-1.199c-0.056-15.463-8.050-29.046-20.118-36.893l-0.171-0.104c-20.643-11.351-45.239-18.029-71.395-18.029-2.174 0-4.336 0.046-6.487 0.137l0.307-0.010v-23.869h378.331v23.869c-0.24-0.001-0.523-0.002-0.807-0.002-34.271 0-65.927 11.198-91.508 30.134l0.417-0.295zM477.389 280.914l167.086 358.042 162.312-358.042zM447.552 416.97v0l51.319 106.219-184.988 436.811h-75.189l-238.695-543.030h97.865l60.867 147.991h226.76zM175.441 628.214l97.865 238.695 94.284-238.695z" />
|
||||
<glyph unicode="" glyph-name="Green" d="M118.154 960h787.692v-1024h-787.692v1024z" />
|
||||
<glyph unicode="" glyph-name="Help" d="M483.556 0.853h64.284v-63.716h-64.284v63.716zM793.6 748.373c-27.869 98.127-103.72 173.789-199.92 200.897l-2.036 0.49c-22.857 6.499-49.108 10.235-76.231 10.235s-53.374-3.737-78.266-10.723l2.035 0.488c-98.059-27.665-173.722-103.328-200.895-199.354l-0.491-2.032c-6.503-22.488-10.243-48.32-10.243-75.025 0-0.424 0.001-0.848 0.003-1.272v0.065h64.284c-0.004 0.516-0.007 1.127-0.007 1.738 0 30.84 6.492 60.164 18.184 86.679l-0.542-1.377c23.483 53.547 65.35 95.414 117.439 118.325l1.459 0.572c25.212 11.15 54.614 17.641 85.533 17.641 0.53 0 1.059-0.002 1.588-0.006h-0.081c0.414 0.003 0.902 0.004 1.392 0.004 30.958 0 60.4-6.49 87.040-18.185l-1.392 0.545c53.777-23.371 95.853-65.262 118.893-117.442l0.573-1.455c11.15-25.248 17.64-54.69 17.64-85.648 0-0.489-0.002-0.978-0.005-1.467v0.075c0.016-0.89 0.025-1.939 0.025-2.991 0-22.193-3.971-43.458-11.242-63.123l0.408 1.261c-7.902-20.633-17.673-38.465-29.481-54.72l0.468 0.676c-12.796-17.977-26.247-33.775-40.933-48.329l-0.027-0.026-47.218-44.942q-23.893-22.756-47.218-46.080c-14.956-15.37-28.457-32.306-40.188-50.491l-0.772-1.277c-11.482-17.834-21.318-38.357-28.469-60.099l-0.544-1.91c-6.873-21.585-10.834-46.412-10.834-72.164 0-1.23 0.009-2.458 0.027-3.684l-0.002 0.185v-96.142h64.284v96.711c-0.016 0.89-0.025 1.939-0.025 2.991 0 22.193 3.971 43.458 11.242 63.123l-0.408-1.261c7.909 20.634 17.68 38.464 29.483 54.724l-0.47-0.679c11.96 17.641 24.494 33.065 38.223 47.33l-0.107-0.112 47.218 44.942q23.893 22.756 47.218 46.649c14.882 15.547 28.383 32.664 40.155 50.998l0.805 1.34c11.495 17.835 21.333 38.36 28.473 60.107l0.541 1.902c6.873 21.585 10.834 46.412 10.834 72.164 0 1.23-0.009 2.458-0.027 3.684l0.002-0.185c0.121 3.104 0.19 6.748 0.19 10.408 0 23.149-2.765 45.653-7.984 67.198l0.398-1.944z" />
|
||||
<glyph unicode="" glyph-name="Highlight" d="M0 38.4h1024v-102.4h-1024v102.4zM512 154.112l126.976 33.792 263.168 280.576c6.106 6.59 10.976 14.426 14.18 23.070l0.156 0.482c0.798 4.156 1.254 8.937 1.254 13.824s-0.456 9.668-1.329 14.301l0.075-0.477c1.029 4.617 1.618 9.92 1.618 15.36s-0.589 10.743-1.707 15.848l0.090-0.488c-3.528 8.717-8.372 16.19-14.37 22.565l0.034-0.037c-5.94 6.394-13.087 11.574-21.091 15.193l-0.413 0.167c-7.475 3.708-16.253 5.955-25.537 6.143l-0.063 0.001c-0.183 0.002-0.399 0.003-0.615 0.003-9.029 0-17.617-1.885-25.394-5.282l0.409 0.159c-8.417-3.786-15.564-8.966-21.466-15.319l-0.038-0.041-264.192-284.672zM819.2 550.4h11.264l10.24 6.144h13.312c2.462 0.57 5.289 0.896 8.192 0.896s5.73-0.327 8.446-0.945l-0.254 0.049c5.067-1.378 9.502-3.484 13.452-6.237l-0.14 0.093c3.821-4.035 6.932-8.789 9.104-14.030l0.112-0.306c0.54-2.617 0.849-5.624 0.849-8.704s-0.309-6.087-0.898-8.993l0.049 0.289c0.374-2.155 0.587-4.637 0.587-7.168s-0.214-5.013-0.624-7.428l0.036 0.26c-1.654-4.301-3.723-8.019-6.233-11.389l0.089 0.125-8.192-10.24-9.216-10.24-58.368 62.464zM791.552 520.704l58.368-62.464-214.016-234.496c-4.515 15.071-11.905 28.089-21.597 39.019l0.093-0.107c-9.96 10.466-22.329 18.546-36.224 23.359l-0.64 0.193zM563.2 261.632l17.408-7.168c5.88-3.148 10.934-6.896 15.367-11.271l-0.007 0.007c4.319-4.451 8.061-9.499 11.082-14.999l0.182-0.361c2.998-5.305 5.458-11.446 7.062-17.925l0.106-0.507-65.536-17.408zM286.72 437.76h251.904l38.912-109.568 77.824 84.992-196.608 546.816h-90.112l-260.096-716.8h109.568zM409.6 829.952l102.4-307.2h-204.8z" />
|
||||
<glyph unicode="" glyph-name="Hyperlink" d="M832 544h-128c0 106.039-85.961 192-192 192v0h-320c-106.039 0-192-85.961-192-192s85.961-192 192-192v0h128c0-106.039 85.961-192 192-192v0h320c106.039 0 192 85.961 192 192s-85.961 192-192 192v0zM192 416c-70.692 0-128 57.308-128 128s57.308 128 128 128v0h320c70.692 0 128-57.308 128-128v0h-128c-82.624-0.524-152.82-53.157-179.417-126.663l-0.423-1.337zM622.080 480c-22.415-38.313-63.249-63.708-110.038-64h-110.122c22.415 38.313 63.249 63.708 110.038 64h0.042zM832 224h-320c-70.692 0-128 57.308-128 128v0h128c82.624 0.524 152.82 53.157 179.417 126.663l0.423 1.337h140.16c70.692 0 128-57.308 128-128s-57.308-128-128-128v0z" />
|
||||
<glyph unicode="" glyph-name="Incr-Indent" d="M0 960h1102.769v-78.769h-1102.769v78.769zM551.385 644.923h551.385v-78.769h-551.385v78.769zM551.385 329.846h551.385v-78.769h-551.385v78.769zM0 14.769h1102.769v-78.769h-1102.769v78.769zM156.751 251.865l44.111-44.111 240.246 240.246-240.246 240.246-44.111-44.111 157.538-156.751h-314.289v-78.769h314.289l-157.538-156.751z" />
|
||||
<glyph unicode="" glyph-name="Italic" d="M673.978 57.949c4.572 0.557 9.866 0.875 15.234 0.875 21.585 0 41.97-5.137 60-14.256l-0.761 0.349c9.309-8.378 12.102-24.204 8.378-46.545-2.336-19.533-11.926-36.471-25.955-48.316l-0.111-0.091c-19.135-9.206-41.603-14.585-65.328-14.585-4.858 0-9.664 0.226-14.407 0.667l0.608-0.046h-510.138c-1.336-0.133-2.887-0.21-4.456-0.21-14.138 0-26.833 6.18-35.53 15.986l-0.043 0.049c-5.165 8.39-8.225 18.555-8.225 29.435 0 6.111 0.965 11.996 2.752 17.512l-0.113-0.402c1.872 19.093 11.617 35.596 25.901 46.426l0.165 0.12c19.31 8.591 41.839 13.594 65.537 13.594 4.784 0 9.52-0.204 14.201-0.603l-0.61 0.042h171.287l153.6 777.309h-175.942c-3.503-0.342-7.572-0.537-11.687-0.537-21.591 0-41.928 5.365-59.752 14.835l0.69-0.335c-10.24 9.309-13.033 25.135-9.309 48.407 1.687 18.534 9.532 34.972 21.443 47.51l-0.032-0.034c11.989 9.347 27.266 14.986 43.861 14.986 1.272 0 2.536-0.033 3.791-0.099l-0.176 0.007h545.513c1.311 0.134 2.834 0.21 4.374 0.21 13.877 0 26.306-6.196 34.672-15.973l0.052-0.062c5.815-9.039 9.271-20.075 9.271-31.918 0-5.196-0.665-10.237-1.915-15.042l0.091 0.414c-1.811-19.675-11.539-36.776-25.927-48.3l-0.138-0.107c-18.899-8.676-41.002-13.734-64.287-13.734-5.226 0-10.392 0.255-15.487 0.753l0.646-0.051h-174.080l-154.531-778.24z" />
|
||||
<glyph unicode="" glyph-name="Left-aligned" d="M1024 923.429v-73.143h-1024v73.143zM731.429 704h-731.429v-73.143h731.429zM0 411.429h1024v73.143h-1024zM731.429 265.143h-731.429v-73.143h731.429zM0-27.429h1024v73.143h-1024z" />
|
||||
<glyph unicode="" glyph-name="Like" d="M475.352 1.213c60.912 0.139 118.874 12.609 171.573 35.044l-2.882-1.090c58.106 24.879 125.722 39.343 196.716 39.343 0.189 0 0.378 0 0.568 0h182.674v365.945h-164.918c-0.447-0.003-0.975-0.005-1.503-0.005-34.681 0-67.696 7.137-97.655 20.022l1.608-0.615c-17.008 7.035-31.54 14.801-45.193 23.793l1-0.618c-14.77 9.701-27.642 20.175-39.357 31.811l0.014-0.014-354.627 356.783-6.467 7.545c-0.878 0.356-1.897 0.563-2.964 0.563s-2.086-0.207-3.019-0.582l0.054 0.019c-0.163 0.005-0.355 0.008-0.547 0.008-9.823 0-17.785-7.963-17.785-17.785 0-0.192 0.003-0.384 0.009-0.575l-0.001 0.028c-0.003-0.508-0.005-1.109-0.005-1.711 0-24.82 2.949-48.95 8.514-72.062l-0.425 2.092c5.719-25.854 13.508-48.529 23.499-69.971l-0.863 2.063c7.138-14.639 14.265-32.484 20.179-50.873l0.84-3.021c4.663-13.467 8.959-29.954 12.063-46.858l0.333-2.186c2.714-14.405 4.826-31.8 5.873-49.482l0.056-1.179q0-25.869 0-53.895h-326.063c-10.296-0.122-19.506-4.667-25.837-11.82l-0.032-0.037c-6.651-6.386-10.784-15.352-10.784-25.284 0-0.206 0.002-0.412 0.005-0.617v0.031c1.648-8.589 3.698-16.004 6.264-23.173l-0.336 1.076q5.928-19.402 15.629-49.044l21.558-64.674 25.331-77.069 26.408-78.147 24.253-70.602 18.324-53.895 10.779-30.72c2.541-7.557 7.243-13.826 13.366-18.25l0.108-0.074c5.81-4.308 13.101-6.925 21-7.006h0.019z" />
|
||||
<glyph unicode="" glyph-name="Mail" d="M981.333 768h-981.333v-640h1024v640zM938.667 725.333l-426.667-231.68-426.667 231.68zM42.667 170.667v530.347l469.333-256 469.333 256v-530.347z" />
|
||||
<glyph unicode="" glyph-name="Mark-as-read" d="M754.526 582.737v53.895l-377.263 215.579-377.263-215.579v-538.947h269.474v-53.895h754.526v538.947zM921.6 528.842l-274.863-183.242-274.863 183.242zM269.474 465.785l-215.579 136.893v2.695l323.368 184.859 323.368-184.859v-2.695l-30.72-19.941h-400.438zM970.105 97.684h-646.737v398.821l323.368-215.579 323.368 215.579z" />
|
||||
<glyph unicode="" glyph-name="Menu" d="M1024 736v-64h-1024v64zM0 416h1024v64h-1024zM0 160h1024v64h-1024z" />
|
||||
<glyph unicode="" glyph-name="More2" d="M113.778 448c0-31.419-25.47-56.889-56.889-56.889s-56.889 25.47-56.889 56.889c0 31.419 25.47 56.889 56.889 56.889s56.889-25.47 56.889-56.889zM568.889 448c0-31.419-25.47-56.889-56.889-56.889s-56.889 25.47-56.889 56.889c0 31.419 25.47 56.889 56.889 56.889s56.889-25.47 56.889-56.889zM1024 448c0-31.419-25.47-56.889-56.889-56.889s-56.889 25.47-56.889 56.889c0 31.419 25.47 56.889 56.889 56.889s56.889-25.47 56.889-56.889z" />
|
||||
<glyph unicode="" glyph-name="New" d="M512 960c-282.77 0-512-229.23-512-512s229.23-512 512-512c282.77 0 512 229.23 512 512v0c0 282.77-229.23 512-512 512v0zM512-10.105c-253.005 0-458.105 205.101-458.105 458.105s205.101 458.105 458.105 458.105c253.005 0 458.105-205.101 458.105-458.105v0c-0.307-252.881-205.224-457.799-458.076-458.105h-0.030zM538.947 636.632h-53.895v-161.684h-161.684v-53.895h161.684v-161.684h53.895v161.684h161.684v53.895h-161.684v161.684z" />
|
||||
<glyph unicode="" glyph-name="Notification2" d="M903.529 176.941v-60.235h-783.059v60.235l60.235 60.235v331.294c0.811 166.618 124.049 304.208 284.326 327.467l1.792 0.213v18.673c0 24.95 20.226 45.176 45.176 45.176s45.176-20.226 45.176-45.176v0-18.673c162.069-23.473 285.307-161.063 286.117-327.596v-331.378zM421.647 26.353c0-49.901 40.452-90.353 90.353-90.353s90.353 40.452 90.353 90.353v0 30.118h-180.706z" />
|
||||
<glyph unicode="" glyph-name="Numbering" d="M315.077 881.231h787.692v-78.769h-787.692v78.769zM315.077 487.385h787.692v-78.769h-787.692v78.769zM315.077 93.538h787.692v-78.769h-787.692v78.769zM78.769 960h78.769v-236.308h-78.769v236.308zM39.385 172.308v-59.077h78.769v-32.295h-39.385v-43.323h39.385v-42.535h-78.769v-59.077h157.538v236.308h-157.538zM157.538 507.077v59.077h-157.538v-59.077h78.769v-177.231h157.538v59.077h-78.769v118.154z" />
|
||||
<glyph unicode="" glyph-name="Orange" d="M118.154 960h787.692v-1024h-787.692v1024z" />
|
||||
<glyph unicode="" glyph-name="People" d="M845.265 582.516c24.558-13.074 45.685-28.559 64.304-46.614l-0.071 0.069c17.674-17.083 33.079-36.339 45.833-57.381l0.713-1.266c12.728-20.085 23.352-43.253 30.68-67.842l0.506-1.977c7.588-22.334 12.447-48.12 13.482-74.887l0.016-0.516h-69.818c0.001 0.186 0.001 0.406 0.001 0.626 0 29.067-6.168 56.694-17.266 81.643l0.509-1.28c-21.874 50.165-61.079 89.37-109.881 110.712l-1.363 0.531c-23.953 10.512-51.873 16.63-81.222 16.63s-57.269-6.118-82.554-17.148l1.332 0.518c-50.165-21.874-89.37-61.079-110.712-109.881l-0.531-1.363c-10.59-23.669-16.757-51.296-16.757-80.363 0-0.22 0-0.44 0.001-0.66v0.034c-0.663-68.779-34.156-129.599-85.537-167.625l-0.572-0.404c69.351-35.524 121.198-96.932 143.315-171.153l0.51-1.996c7.192-23.084 11.431-49.641 11.636-77.159l0.001-0.107h-69.818c0.001 0.214 0.001 0.468 0.001 0.723 0 29.034-6.168 56.628-17.265 81.542l0.508-1.276c-21.874 50.165-61.079 89.37-109.881 110.712l-1.363 0.531c-23.957 10.487-51.877 16.589-81.222 16.589s-57.265-6.102-82.559-17.108l1.337 0.518c-50.165-21.874-89.37-61.079-110.712-109.881l-0.531-1.363c-10.59-23.638-16.758-51.232-16.758-80.267 0-0.254 0-0.508 0.001-0.762v0.039h-70.284c-0.002 0.432-0.004 0.943-0.004 1.454 0 27.008 3.912 53.102 11.2 77.747l-0.491-1.936c22.89 76.211 74.857 137.585 142.696 172.405l1.595 0.744c-51.65 38.552-84.827 99.38-85.178 167.973v0.056c-0.001 0.186-0.001 0.406-0.001 0.626 0 29.067 6.168 56.694 17.266 81.643l-0.509-1.28c21.781 50.352 61.006 89.728 109.883 111.177l1.36 0.532c23.383 10.304 50.647 16.302 79.311 16.302 0.754 0 1.506-0.004 2.258-0.012l-0.115 0.001c68.807-0.274 129.805-33.463 168.101-84.628l0.394-0.55c27.974 54.45 71.223 97.699 124.074 124.924l1.599 0.749c-51.892 38.734-85.14 99.96-85.178 168.954v0.006c-0.001 0.186-0.001 0.406-0.001 0.626 0 29.067 6.168 56.694 17.266 81.643l-0.509-1.28c21.781 50.352 61.006 89.728 109.883 111.177l1.36 0.532c23.953 10.512 51.873 16.63 81.222 16.63s57.269-6.118 82.554-17.148l-1.332 0.518c50.165-21.874 89.37-61.079 110.712-109.881l0.531-1.363c10.59-23.669 16.757-51.296 16.757-80.363 0-0.22 0-0.44-0.001-0.66v0.034c-0.274-68.807-33.463-129.805-84.628-168.101l-0.55-0.394zM302.545 192.931c0.124 0 0.271-0.001 0.417-0.001 19.378 0 37.796 4.112 54.429 11.511l-0.853-0.339c18.060 7.201 33.522 17.283 46.594 29.835l-0.048-0.046c12.259 12.421 22.292 27.075 29.426 43.293l0.363 0.925c7.017 15.918 11.102 34.478 11.102 53.993s-4.085 38.074-11.446 54.872l0.344-0.88c-14.453 33.708-40.765 60.020-73.565 74.126l-0.908 0.347c-15.914 7.043-34.475 11.143-53.993 11.143s-38.079-4.1-54.867-11.486l0.874 0.343c-33.52-14.547-59.66-40.839-73.661-73.562l-0.346-0.91c-7.043-15.914-11.143-34.475-11.143-53.993s4.1-38.079 11.486-54.867l-0.343 0.874c14.685-33.286 40.721-59.323 73.097-73.648l0.91-0.359c15.34-6.893 33.234-10.986 52.063-11.17l0.068-0.001zM581.818 751.476c-0.003-0.346-0.005-0.755-0.005-1.165 0-19.282 4.114-37.604 11.512-54.134l-0.336 0.841c14.685-33.286 40.721-59.323 73.097-73.648l0.91-0.359c15.914-7.043 34.475-11.143 53.993-11.143s38.079 4.1 54.867 11.486l-0.874-0.343c33.634 14.347 59.925 40.488 74.123 73.106l0.349 0.901c7.017 15.918 11.102 34.478 11.102 53.993s-4.085 38.074-11.446 54.872l0.344-0.88c-14.453 33.708-40.765 60.020-73.565 74.126l-0.908 0.347c-15.914 7.043-34.475 11.143-53.993 11.143s-38.079-4.1-54.867-11.486l0.874 0.343c-33.52-14.547-59.66-40.839-73.661-73.562l-0.346-0.91c-7.062-15.72-11.175-34.074-11.175-53.389 0-0.376 0.002-0.751 0.005-1.126v0.057z" />
|
||||
<glyph unicode="" glyph-name="Pin" d="M975.787 682.667c-1.406 0.047-3.059 0.074-4.718 0.074-59.323 0-110.589-34.492-134.839-84.516l-0.39-0.892h-247.467c-14.507 96.853-85.333 170.667-167.68 170.667h-42.667v-298.667h-341.333l-36.693-21.333 37.12-21.333h341.333v-298.667h42.667c85.333 0 153.173 73.813 167.68 170.667h247.467c24.639-50.915 75.906-85.408 135.229-85.408 1.659 0 3.312 0.027 4.958 0.081l-0.24-0.006h42.667v469.333z" />
|
||||
<glyph unicode="" glyph-name="Purple" d="M118.154 960h787.692v-1024h-787.692v1024z" />
|
||||
<glyph unicode="" glyph-name="Red" d="M118.154 960h787.692v-1024h-787.692v1024z" />
|
||||
<glyph unicode="" glyph-name="Reply-All" d="M904.237 451.117c-0.253 165.872-134.65 300.269-300.497 300.522h-362.431l161.169 161.169-47.193 47.193-243.979-243.979 243.979-245.76 47.193 48.974-165.621 165.621h366.859c128.736-0.469 232.915-104.937 232.915-233.738 0-99.353-61.988-184.229-149.399-218.060l-1.596-0.543c-40.939 63.066-111.018 104.195-190.703 104.195-0.886 0-1.772-0.005-2.656-0.015l0.135 0.001h-280.042l117.983 117.983-31.61 31.61-171.854-173.19 171.409-171.409 31.61 31.61-117.537 118.873h280.042c3.060 0.198 6.634 0.311 10.234 0.311 88.668 0 161.32-68.572 167.819-155.578l0.034-0.56c-6.533-87.566-79.185-156.138-167.853-156.138-3.601 0-7.175 0.113-10.719 0.336l0.485-0.024v-44.522c3.029-0.154 6.577-0.242 10.146-0.242 113.234 0 205.812 88.435 212.435 200.006l0.028 0.584c-0.114 12.835-1.568 25.268-4.228 37.247l0.221-1.184c113.335 44.191 192.35 152.111 193.224 278.598l0.001 0.109z" />
|
||||
<glyph unicode="" glyph-name="Reply" horiz-adv-x="1035" d="M625.152 755.2h-528.384l156.672 166.4-36.352 38.4-180.736-192-36.352-38.4 217.088-230.4 36.352 38.4-156.672 166.4h528.384c197.939 0 358.4-160.461 358.4-358.4s-160.461-358.4-358.4-358.4v0h-614.4v-51.2h614.4c226.216 0 409.6 183.384 409.6 409.6s-183.384 409.6-409.6 409.6v0z" />
|
||||
<glyph unicode="" glyph-name="Right-aligned" d="M1024 923.429v-73.143h-1024v73.143zM292.571 630.857h731.429v73.143h-731.429zM0 411.429h1024v73.143h-1024zM292.571 192h731.429v73.143h-731.429zM0-27.429h1024v73.143h-1024z" />
|
||||
<glyph unicode="" glyph-name="Right" d="M1035.171 762.647l-680.495-680.495-354.676 354.676 57.716 57.716 296.96-296.96 622.778 622.778z" />
|
||||
<glyph unicode="" glyph-name="Search2" d="M708.482 960c-173.698-0.737-314.222-141.716-314.222-315.516 0-76.521 27.241-146.68 72.554-201.309l-0.42 0.522-466.393-467.541 40.731-40.731 465.82 466.393c54.249-45.331 124.74-72.856 201.66-72.856 174.256 0 315.518 141.262 315.518 315.518 0 174.16-141.108 315.363-315.232 315.518h-0.015zM708.482 386.331c-142.573 0-258.151 115.578-258.151 258.151s115.578 258.151 258.151 258.151c142.573 0 258.151-115.578 258.151-258.151v0c-0.326-142.442-115.709-257.826-258.12-258.151h-0.031z" />
|
||||
<glyph unicode="" glyph-name="Send" d="M341.333 686.933v-477.867h682.667v477.867zM976.213 639.147l-293.547-164.523-293.547 164.523zM980.992 256.853h-596.651v331.776l298.325-167.253 299.008 167.253zM238.933 618.667h-204.8c-18.851 0-34.133-15.282-34.133-34.133s15.282-34.133 34.133-34.133v0h204.8c18.851 0 34.133 15.282 34.133 34.133s-15.282 34.133-34.133 34.133v0zM238.933 482.133h-136.533c-18.851 0-34.133-15.282-34.133-34.133s15.282-34.133 34.133-34.133v0h136.533c18.851 0 34.133 15.282 34.133 34.133s-15.282 34.133-34.133 34.133v0zM238.933 345.6h-68.267c-18.851 0-34.133-15.282-34.133-34.133s15.282-34.133 34.133-34.133v0h68.267c18.851 0 34.133 15.282 34.133 34.133s-15.282 34.133-34.133 34.133v0z" />
|
||||
<glyph unicode="" glyph-name="Settings" d="M893.852 438.98q0 4.725 0 9.020t0 9.020c0 3.007 0 6.013 0 9.020l128.859 80.752-77.745 192.859-149.477-34.362q-12.027 12.886-24.913 25.342l34.362 149.477-194.148 79.893-80.752-128.859h-36.081l-81.181 128.859-192.43-79.893 34.362-149.477q-12.886-12.027-24.913-25.342l-149.477 34.362-80.322-192.43 128.859-81.181c0-3.007 0-6.013 0-9.020s0-6.013 0-9.020 0-6.013 0-9.020 0-6.013 0-9.020l-128.859-80.752 79.893-192.43 149.477 34.362q12.027-12.886 24.913-25.342l-33.933-150.765 192.43-79.893 80.752 128.859h36.081l80.752-128.859 193.289 79.893-34.362 149.477q12.886 12.027 24.913 25.342l149.477-34.362 79.893 192.43-128.859 81.181c-1.289 3.866-0.859 6.872-0.859 9.879zM512 190.282c-142.334 0-257.718 115.384-257.718 257.718s115.384 257.718 257.718 257.718c142.334 0 257.718-115.384 257.718-257.718v0c0-142.334-115.384-257.718-257.718-257.718v0zM619.383 448c0-59.306-48.077-107.383-107.383-107.383s-107.383 48.077-107.383 107.383c0 59.306 48.077 107.383 107.383 107.383s107.383-48.077 107.383-107.383z" />
|
||||
<glyph unicode="" glyph-name="Underlined" d="M173.149 858.531h13.033v-442.182c-0.13-3.329-0.204-7.237-0.204-11.163 0-86.221 35.737-164.095 93.207-219.618l0.088-0.084c58.486-53.377 136.645-86.071 222.441-86.071 5.91 0 11.784 0.155 17.618 0.462l-0.816-0.034c7.576-0.621 16.398-0.976 25.304-0.976 85.851 0 164.012 32.922 222.548 86.829l-0.231-0.21c52.146 61.83 83.837 142.394 83.837 230.36 0 9.351-0.358 18.618-1.061 27.788l0.075-1.217v416.116h10.24c3.255-0.331 7.033-0.52 10.856-0.52 15.912 0 31.059 3.272 44.806 9.181l-0.739-0.282c10.539 8.253 17.25 20.978 17.25 35.27 0 2.336-0.179 4.631-0.525 6.87l0.032-0.25c0.105 1.194 0.165 2.584 0.165 3.988 0 13.342-5.398 25.424-14.129 34.18l0.001-0.001c-10.119 8.187-23.144 13.144-37.328 13.144-1.278 0-2.546-0.040-3.804-0.119l0.172 0.009h-203.869c-3.566 0.344-7.709 0.54-11.898 0.54-19.643 0-38.278-4.315-55.009-12.048l0.813 0.337c-9.915-8.255-16.18-20.602-16.18-34.412 0-1.98 0.129-3.93 0.379-5.843l-0.024 0.225c-0.345-1.998-0.543-4.299-0.543-6.645 0-14.923 7.98-27.982 19.906-35.142l0.185-0.103c19.308-7.414 41.644-11.709 64.984-11.709 4.978 0 9.91 0.195 14.789 0.579l-0.645-0.041h40.029v-400.291c0.61-7.293 0.958-15.784 0.958-24.356 0-62.959-18.769-121.534-51.017-170.435l0.72 1.162c-35.272-37.756-85.358-61.289-140.94-61.289-6.096 0-12.126 0.283-18.077 0.837l0.762-0.057c-0.801-0.010-1.746-0.016-2.693-0.016-37.365 0-72.64 8.949-103.798 24.82l1.299-0.601c-30.66 15.412-55.608 38.27-73.099 66.265l-0.443 0.76c-11.63 18.738-20.639 40.528-25.804 63.764l-0.261 1.4c-5.454 29.653-8.574 63.776-8.574 98.628 0 5.255 0.071 10.493 0.212 15.713l-0.016-0.77v387.258h32.582c5.843-0.714 12.607-1.122 19.467-1.122 20.043 0 39.273 3.48 57.119 9.87l-1.183-0.37c12.081 7.492 20.006 20.68 20.006 35.72 0 2.178-0.166 4.316-0.486 6.404l0.029-0.233c0.209 1.604 0.328 3.46 0.328 5.344 0 14.081-6.651 26.608-16.984 34.611l-0.1 0.075c-18.659 7.496-40.292 11.844-62.94 11.844-5.371 0-10.685-0.245-15.932-0.723l0.675 0.050h-186.182c-2.651 0.382-5.711 0.6-8.823 0.6-14.548 0-27.983-4.768-38.828-12.826l0.174 0.124c-8.777-8.763-14.206-20.876-14.206-34.257 0-1.705 0.088-3.389 0.26-5.049l-0.017 0.208c-0.361-2.111-0.567-4.543-0.567-7.023 0-14.187 6.752-26.796 17.218-34.791l0.106-0.078c13.949-5.966 30.179-9.435 47.22-9.435 5.671 0 11.251 0.384 16.718 1.128l-0.636-0.071zM93.091 29.091h837.818v-93.091h-837.818v93.091z" />
|
||||
<glyph unicode="" glyph-name="Undo" d="M790.528 851.968c-66.951 66.763-159.343 108.045-261.376 108.045s-194.426-41.281-261.385-108.053l-114.167-114.167v219.648h-51.2v-307.2h307.2v51.2h-219.648l114.176 114.176c56.632 52.581 132.763 84.846 216.43 84.846 175.883 0 318.464-142.581 318.464-318.464 0-83.667-32.264-159.798-85.030-216.63l0.184 0.201-468.48-395.776 36.352-36.352 468.48 395.776c66.641 67.007 107.834 159.381 107.834 261.376s-41.193 194.369-107.85 261.392l0.016-0.016z" />
|
||||
<glyph unicode="" glyph-name="Yellow" d="M118.154 960h787.692v-1024h-787.692v1024z" />
|
||||
<glyph unicode="" glyph-name="Close" d="M571.577 448.448l447.944-453.319-59.129-59.129-453.319 447.944-453.319-447.944-53.753 59.129 447.944 453.319-447.944 452.423 59.129 59.129 452.423-447.944 453.319 447.944 59.129-59.129z" />
|
||||
<glyph unicode="" glyph-name="Notify" horiz-adv-x="861" d="M593.031 27.787h-325.557c-207.238 0-317.669 48.045-245.244 111.148s132.661 263.171 132.661 445.311c-0.385 5.839-0.604 12.659-0.604 19.53 0 148.4 102.219 272.925 240.089 307.007l2.173 0.454c7.888 29.401 20.078 48.762 33.703 48.762s25.815-19.361 33.703-48.762c140.043-34.536 242.262-159.062 242.262-307.462 0-6.871-0.219-13.691-0.651-20.453l0.047 0.923c0-182.14 59.518-382.924 131.944-445.311s-37.289-111.148-244.527-111.148zM430.252-64c36.522 0.405 65.972 30.106 65.972 66.685 0 0.001 0 0.003 0 0.004v0h-131.944c0-0.001 0-0.003 0-0.004 0-36.579 29.45-66.28 65.934-66.685h0.038z" />
|
||||
<glyph unicode="" glyph-name="Help-white" horiz-adv-x="734" d="M464.896 148.309h-191.829c-6.409 0-11.605-5.196-11.605-11.605v0-189.781c0.371-6.109 5.416-10.923 11.585-10.923 0.007 0 0.014 0 0.021 0h191.828c0.41-0.051 0.884-0.081 1.366-0.081 6.409 0 11.605 5.196 11.605 11.605 0 0.028 0 0.057 0 0.085v-0.004 189.781c-0.328 6.146-5.391 11.005-11.59 11.005-0.487 0-0.966-0.030-1.437-0.088l0.056 0.006zM633.515 871.936c-66.906 55.131-153.486 88.562-247.875 88.562-6.94 0-13.838-0.181-20.689-0.538l0.959 0.040c-4.928 0.23-10.706 0.361-16.514 0.361-92.427 0-177.11-33.156-242.805-88.222l0.588 0.48c-61.539-51.913-101.875-127.274-107.136-212.133l-0.043-0.859c-0.001-0.054-0.001-0.118-0.001-0.182 0-5.686 4.089-10.417 9.487-11.413l0.071-0.011 174.763-22.528c5.294 0.169 9.68 3.858 10.906 8.795l0.017 0.080c7.928 48.14 31.276 89.8 64.713 120.704l0.141 0.128c29.263 24.271 67.204 38.998 108.584 38.998 1.906 0 3.805-0.031 5.697-0.093l-0.276 0.007c1.687 0.063 3.669 0.099 5.659 0.099 40.424 0 77.4-14.763 105.831-39.191l-0.216 0.181c24.685-20.557 40.282-51.3 40.282-85.686 0-0.356-0.002-0.712-0.005-1.067v0.054c0.022-0.81 0.035-1.762 0.035-2.718 0-24.826-8.495-47.668-22.736-65.777l0.174 0.229c-29.57-30.033-61.453-57.585-95.433-82.441l-2.189-1.527c-45.51-34.008-83.314-75.511-112.24-123.014l-1.083-1.914c-18.243-38.594-28.893-83.84-28.893-131.574 0-4.145 0.080-8.271 0.239-12.377l-0.018 0.591c0-5.461 0-20.48 0-45.739 0.371-6.109 5.416-10.923 11.585-10.923 0.007 0 0.014 0 0.021 0h172.031c6.409 0 11.605 5.196 11.605 11.605v0c-0.566 6.467-0.888 13.991-0.888 21.591 0 29.385 4.822 57.643 13.719 84.027l-0.542-1.853c19.303 30.392 43.156 55.984 70.922 76.603l0.758 0.538c58.896 44.972 109.728 96.237 152.836 153.635l1.447 2.013c23.278 35.245 37.247 78.425 37.546 124.85v0.078c-1.442 83.685-40.312 158.009-100.541 207.14l-0.493 0.39z" />
|
||||
</font></defs></svg>
|
||||
|
После Ширина: | Высота: | Размер: 55 KiB |
Двоичный файл не отображается.
Двоичный файл не отображается.
Двоичный файл не отображается.
|
После Ширина: | Высота: | Размер: 3.9 KiB |
Двоичный файл не отображается.
|
После Ширина: | Высота: | Размер: 6.3 KiB |
Двоичный файл не отображается.
|
После Ширина: | Высота: | Размер: 14 KiB |
Двоичный файл не отображается.
|
После Ширина: | Высота: | Размер: 662 B |
Двоичный файл не отображается.
|
После Ширина: | Высота: | Размер: 633 B |
Двоичный файл не отображается.
|
После Ширина: | Высота: | Размер: 2.9 KiB |
Двоичный файл не отображается.
|
После Ширина: | Высота: | Размер: 2.8 KiB |
Двоичный файл не отображается.
|
После Ширина: | Высота: | Размер: 2.8 KiB |
Двоичный файл не отображается.
|
После Ширина: | Высота: | Размер: 2.7 KiB |
Двоичный файл не отображается.
|
После Ширина: | Высота: | Размер: 2.8 KiB |
Двоичный файл не отображается.
|
После Ширина: | Высота: | Размер: 2.8 KiB |
Двоичный файл не отображается.
|
После Ширина: | Высота: | Размер: 2.8 KiB |
Двоичный файл не отображается.
|
После Ширина: | Высота: | Размер: 2.9 KiB |
Двоичный файл не отображается.
|
После Ширина: | Высота: | Размер: 2.8 KiB |
Двоичный файл не отображается.
|
После Ширина: | Высота: | Размер: 2.8 KiB |
Двоичный файл не отображается.
|
После Ширина: | Высота: | Размер: 2.5 KiB |
Двоичный файл не отображается.
|
После Ширина: | Высота: | Размер: 2.7 KiB |
Двоичный файл не отображается.
|
После Ширина: | Высота: | Размер: 2.9 KiB |
Двоичный файл не отображается.
|
После Ширина: | Высота: | Размер: 2.9 KiB |
Двоичный файл не отображается.
|
После Ширина: | Высота: | Размер: 2.8 KiB |
Двоичный файл не отображается.
|
После Ширина: | Высота: | Размер: 2.8 KiB |
Двоичный файл не отображается.
|
После Ширина: | Высота: | Размер: 2.9 KiB |
Двоичный файл не отображается.
|
После Ширина: | Высота: | Размер: 2.9 KiB |
Двоичный файл не отображается.
|
После Ширина: | Высота: | Размер: 2.9 KiB |
Двоичный файл не отображается.
|
После Ширина: | Высота: | Размер: 2.3 KiB |
Двоичный файл не отображается.
|
После Ширина: | Высота: | Размер: 2.2 KiB |
Двоичный файл не отображается.
|
После Ширина: | Высота: | Размер: 2.7 KiB |
Двоичный файл не отображается.
|
После Ширина: | Высота: | Размер: 2.8 KiB |
Двоичный файл не отображается.
|
После Ширина: | Высота: | Размер: 2.3 KiB |
Двоичный файл не отображается.
|
После Ширина: | Высота: | Размер: 2.5 KiB |
Двоичный файл не отображается.
|
После Ширина: | Высота: | Размер: 2.3 KiB |
Двоичный файл не отображается.
|
После Ширина: | Высота: | Размер: 2.5 KiB |
Двоичный файл не отображается.
|
После Ширина: | Высота: | Размер: 2.4 KiB |
Двоичный файл не отображается.
|
После Ширина: | Высота: | Размер: 2.3 KiB |
Двоичный файл не отображается.
|
После Ширина: | Высота: | Размер: 2.5 KiB |
Двоичный файл не отображается.
|
После Ширина: | Высота: | Размер: 2.4 KiB |
Двоичный файл не отображается.
|
После Ширина: | Высота: | Размер: 2.6 KiB |
Двоичный файл не отображается.
|
После Ширина: | Высота: | Размер: 2.6 KiB |
Двоичный файл не отображается.
|
После Ширина: | Высота: | Размер: 2.8 KiB |
Двоичный файл не отображается.
|
После Ширина: | Высота: | Размер: 2.7 KiB |
Двоичный файл не отображается.
|
После Ширина: | Высота: | Размер: 2.7 KiB |
Двоичный файл не отображается.
|
После Ширина: | Высота: | Размер: 2.7 KiB |
Двоичный файл не отображается.
|
После Ширина: | Высота: | Размер: 2.6 KiB |
Двоичный файл не отображается.
|
После Ширина: | Высота: | Размер: 2.6 KiB |
Двоичный файл не отображается.
|
После Ширина: | Высота: | Размер: 2.5 KiB |
Двоичный файл не отображается.
|
После Ширина: | Высота: | Размер: 2.6 KiB |
Двоичный файл не отображается.
|
После Ширина: | Высота: | Размер: 2.7 KiB |
Двоичный файл не отображается.
|
После Ширина: | Высота: | Размер: 2.6 KiB |
Двоичный файл не отображается.
|
После Ширина: | Высота: | Размер: 2.8 KiB |
Двоичный файл не отображается.
|
После Ширина: | Высота: | Размер: 2.8 KiB |
Двоичный файл не отображается.
|
После Ширина: | Высота: | Размер: 2.8 KiB |
Двоичный файл не отображается.
|
После Ширина: | Высота: | Размер: 2.5 KiB |
Двоичный файл не отображается.
|
После Ширина: | Высота: | Размер: 2.8 KiB |
Двоичный файл не отображается.
|
После Ширина: | Высота: | Размер: 2.3 KiB |
Двоичный файл не отображается.
|
После Ширина: | Высота: | Размер: 2.7 KiB |
Двоичный файл не отображается.
|
После Ширина: | Высота: | Размер: 2.4 KiB |
Двоичный файл не отображается.
|
После Ширина: | Высота: | Размер: 2.8 KiB |
Двоичный файл не отображается.
|
После Ширина: | Высота: | Размер: 2.9 KiB |
Двоичный файл не отображается.
|
После Ширина: | Высота: | Размер: 2.8 KiB |
Двоичный файл не отображается.
|
После Ширина: | Высота: | Размер: 2.8 KiB |
Двоичный файл не отображается.
|
После Ширина: | Высота: | Размер: 7.1 KiB |
Некоторые файлы не были показаны из-за слишком большого количества измененных файлов Показать больше
Загрузка…
Ссылка в новой задаче