File

src/app/mail/mail.component.ts

Implements

OnInit

Metadata

selector	`app-mail`
styleUrls	`./mail.component.scss`
templateUrl	`./mail.component.html`

Index

Properties

allMails
Public composeDialog
shownMailDetail
shownMails

Methods

getMails
ngOnInit
onForward
openComposeDialog
openMailDetial

Constructor

constructor(composeDialog: MatDialog, snackBar: MatSnackBar, service)

Defined in src/app/mail/mail.component.ts:14

Parameters :

Name	Type	Optional
composeDialog	`MatDialog`	No
snackBar	`MatSnackBar`	No
service		No

Methods

getMails

getMails()

Defined in src/app/mail/mail.component.ts:26

Returns : void

ngOnInit

ngOnInit()

Defined in src/app/mail/mail.component.ts:22

Returns : void

onForward

onForward(status)

Defined in src/app/mail/mail.component.ts:35

Parameters :

Name	Optional
status	No

Returns : void

openComposeDialog

openComposeDialog()

Defined in src/app/mail/mail.component.ts:39

Returns : void

openMailDetial

openMailDetial(mail)

Defined in src/app/mail/mail.component.ts:31

Parameters :

Name	Optional
mail	No

Returns : void

Properties

allMails

Defined in src/app/mail/mail.component.ts:12

Public composeDialog

Type : MatDialog

Defined in src/app/mail/mail.component.ts:17

shownMailDetail

Defined in src/app/mail/mail.component.ts:14

shownMails

Type : any[]

Default value : []

Defined in src/app/mail/mail.component.ts:13

import { Component, Inject, OnInit } from '@angular/core';
import { MatDialog, MatSnackBar } from '@angular/material';

import { ComposeComponent } from './compose/compose.component';

@Component({
  selector: 'app-mail',
  templateUrl: './mail.component.html',
  styleUrls: ['./mail.component.scss']
})
export class MailComponent implements OnInit {
  allMails;
  shownMails: any[] = [];
  shownMailDetail;

  constructor(
    public composeDialog: MatDialog,
    private snackBar: MatSnackBar,
    @Inject('mailService') private service
  ) {}

  ngOnInit() {
    this.getMails();
  }

  getMails() {
    this.service.getMails();
    this.shownMails = this.service.mails;
  }

  openMailDetial(mail) {
    this.shownMailDetail = mail;
  }

  onForward(status) {
    this.shownMailDetail = null;
  }

  openComposeDialog() {
    const dialogRef = this.composeDialog.open(ComposeComponent);
    dialogRef.afterClosed().subscribe(result => {
      console.log(result);

      this.snackBar.open('邮件已发送', '', { duration: 3000 });
    });
  }
}

<mat-toolbar class="mat-elevation-z1 stbui-background-white">
  <mat-toolbar-row>
    <stbui-brand class="stbui-background-blue" style="margin-left:-16px;" brand="Mail"></stbui-brand>

    <div fxFlex="auto"><stbui-search placeholder="搜索..."></stbui-search></div>
    <span fxFlex></span>
    <button mat-icon-button><mat-icon>apps</mat-icon></button>
    <stbui-toolbar-notification></stbui-toolbar-notification>
    <stbui-toolbar-user></stbui-toolbar-user>
    </mat-toolbar-row>
</mat-toolbar>

<div fxLayout="row" fxLayoutAlign="start start">
  <div class="sidenav" fxFlex="250px">
    <div class="compose-container">
      <div class="compose" matRipple (click)="openComposeDialog()">写邮件</div>
    </div>

    <div class="nav-list">
      <mat-nav-list>
        <mat-list-item class="active">
          <mat-icon matListIcon>mail</mat-icon>
           <span matLine>收件箱</span>
           <span>14</span>
          </mat-list-item>
        <mat-list-item>
          <mat-icon matListIcon>start</mat-icon>
          <span matLine>已加星标</span>
        </mat-list-item>

        <mat-list-item>
          <mat-icon matListIcon>query_builder</mat-icon>
          <span matLine>已延后</span>
        </mat-list-item>
        <mat-list-item>
          <mat-icon matListIcon>label_important</mat-icon>
          <span matLine>重要邮件</span>
        </mat-list-item>
        <mat-list-item>
          <mat-icon matListIcon>send</mat-icon>
          <span matLine>已发邮件</span>
        </mat-list-item>

        <mat-list-item>
          <mat-icon matListIcon>insert_drive_file</mat-icon>
          <span matLine>草稿</span>
        </mat-list-item>
      </mat-nav-list>

      <mat-nav-list>
        <mat-list-item>
          <mat-icon matListIcon>mail</mat-icon>
          <span matLine>所有邮件</span>
        </mat-list-item>

        <mat-list-item>
          <mat-icon matListIcon>error</mat-icon>
          <span matLine>垃圾邮件</span>
        </mat-list-item>
        <mat-list-item>
          <mat-icon matListIcon>delete</mat-icon>
          <span matLine>已删除邮件</span>
        </mat-list-item>
        <mat-list-item>
          <mat-icon matListIcon>start</mat-icon>
          <span matLine>Receipts</span>
        </mat-list-item>
        <mat-list-item>
          <mat-icon matListIcon>label</mat-icon>
          <span matLine>Work</span>
        </mat-list-item>
        <mat-list-item>
          <mat-icon matListIcon>label</mat-icon>
          <span matLine>管理标签</span>
        </mat-list-item>
        <mat-list-item>
          <mat-icon matListIcon>settings</mat-icon>
          <span matLine>创建新标签</span>
        </mat-list-item>
      </mat-nav-list>
    </div>
  </div>

  <div class="mail-list" fxFlex>
    <app-mail-toolbar
      [mail]="shownMailDetail"
      [itemCount]="shownMails.length"
      (onForward)="onForward($event)"
    ></app-mail-toolbar>

    <app-mail-list
      *ngIf="!shownMailDetail"
      [mails]="shownMails | async"
      (onOpenMailDetial)="openMailDetial($event)"
    ></app-mail-list>

    <app-mail-detail
      *ngIf="shownMailDetail"
      [mail]="shownMailDetail"
    ></app-mail-detail>
  </div>
</div>

./mail.component.scss

.mail-list {
  overflow: hidden;
}

.compose-container {
  align-items: center;
  display: flex;
  height: 48px;
  margin: 16px 0;
  padding: 0 0 0 16px;
}

.compose {
  display: inline-flex;
  align-items: center;
  height: 48px;
  min-width: 56px;
  padding: 0 24px 0 0;
  border-radius: 24px;
  font-size: 14px;
  letter-spacing: 0.25px;
  background-color: #fff;
  background-image: none;
  color: #3c4043;
  font-weight: 500;
  cursor: pointer;
  box-shadow: 0 1px 2px 0 rgba(60, 64, 67, 0.302),
    0 1px 3px 1px rgba(60, 64, 67, 0.149);

  user-select: none;

  &::before {
    background-image: url(https://www.gstatic.com/images/icons/material/colored_icons/1x/create_32dp.png);
    background-position: center;
    background-repeat: no-repeat;
    background-size: 32px;
    content: '';
    display: block;
    height: 48px;
    min-width: 56px;
  }
}

@media (min-resolution: 144dpi), (-webkit-min-device-pixel-ratio: 1.5) {
  .compose {
    &::before {
      background-position: center;
      background-repeat: no-repeat;
      background-size: 32px;
      background-image: url(https://www.gstatic.com/images/icons/material/colored_icons/2x/create_32dp.png);
    }
  }
}

mat-nav-list {
  mat-list-item {
    border-radius: 0 48px 48px 0;
  }
  .active {
    background-color: #fce8e6;
    color: #d93025;
    font-weight: 700;
  }
}

Legend

Html element

Component

Html element with directive

File

Implements

Metadata

Index

Properties

Methods

Constructor

Methods

Properties

result-matching ""

No results matching ""