From 7b60d18333a05af47106f782eace07b8ce0ca6ac Mon Sep 17 00:00:00 2001 From: stbui Date: Mon, 21 May 2018 02:24:52 +0800 Subject: [PATCH] =?UTF-8?q?feat(layout):=20=E6=96=B0=E5=A2=9E=E9=A1=B5?= =?UTF-8?q?=E9=9D=A2=E5=B8=83=E5=B1=80=E7=A4=BA=E4=BE=8B?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../carded/fullwidth/fullwidth.component.html | 51 +------ .../carded/fullwidth/fullwidth.component.scss | 24 +++- .../fullwidth2/fullwidth2.component.html | 13 ++ .../fullwidth2/fullwidth2.component.scss | 69 ++++++++++ .../fullwidth2/fullwidth2.component.spec.ts | 25 ++++ .../carded/fullwidth2/fullwidth2.component.ts | 15 +++ .../left-sidenav/left-sidenav.component.html | 126 ++++++++++++++++++ .../left-sidenav/left-sidenav.component.scss | 83 ++++++++++++ .../left-sidenav.component.spec.ts | 25 ++++ .../left-sidenav/left-sidenav.component.ts | 15 +++ .../demo-content/demo-content.component.html | 32 +++++ .../demo-content/demo-content.component.scss | 0 .../demo-content.component.spec.ts | 25 ++++ .../demo-content/demo-content.component.ts | 15 +++ src/app/page-layouts/page-layouts.module.ts | 5 +- src/app/page-layouts/pages.routing.ts | 10 ++ 16 files changed, 478 insertions(+), 55 deletions(-) create mode 100644 src/app/page-layouts/carded/fullwidth2/fullwidth2.component.html create mode 100644 src/app/page-layouts/carded/fullwidth2/fullwidth2.component.scss create mode 100644 src/app/page-layouts/carded/fullwidth2/fullwidth2.component.spec.ts create mode 100644 src/app/page-layouts/carded/fullwidth2/fullwidth2.component.ts create mode 100644 src/app/page-layouts/carded/left-sidenav/left-sidenav.component.html create mode 100644 src/app/page-layouts/carded/left-sidenav/left-sidenav.component.scss create mode 100644 src/app/page-layouts/carded/left-sidenav/left-sidenav.component.spec.ts create mode 100644 src/app/page-layouts/carded/left-sidenav/left-sidenav.component.ts create mode 100644 src/app/page-layouts/demo-content/demo-content.component.html create mode 100644 src/app/page-layouts/demo-content/demo-content.component.scss create mode 100644 src/app/page-layouts/demo-content/demo-content.component.spec.ts create mode 100644 src/app/page-layouts/demo-content/demo-content.component.ts diff --git a/src/app/page-layouts/carded/fullwidth/fullwidth.component.html b/src/app/page-layouts/carded/fullwidth/fullwidth.component.html index 09001ba..ca1e674 100644 --- a/src/app/page-layouts/carded/fullwidth/fullwidth.component.html +++ b/src/app/page-layouts/carded/fullwidth/fullwidth.component.html @@ -2,57 +2,12 @@
-
header
+
+
-

技术周刊

- 业界动态
-

Angular 5.1 & More Now Available

-

Angular发布5.1版本，同时发布了Angular CLI 1.6版本以及首个稳定版本的Angular Material。CLI支持了Service Worker，以及带来对AppShell更好的支持 -

-

Ant Design 3.0 驾到 -

-

Ant Design 是一个致力于提升「用户」和「设计者」使用体验，提高「研发者」开发效率的企业中后台设计体系。 -

-

前端开发 -

-

A Pinterest Progressive Web App Performance Case Study -

-

Pinterest 新的移动站点做成一个 PWA。这篇文章分享了通过减少 JavaScript 打包大小，以及运用 Service Worker 等方式，提升性能，在移动设备上获取更好的体验。 -

-

JavaScript 性能优化的小知识总结 -

-

文章总结 JavaScript 性能优化的 code 写法，包含变量的声明、 定时器的使用 、DOM 操作、 循环优化等方面 优化的代码写法。如果重构一个项目代码，这些代码的优化是不可忽视的， 而是是个持续的过程。 -

React Performance Fixes on Airbnb Listing Pages - Airbnb在Listing Page对React性能调优实践，文件详细列举了几个修复例子，如在客户端渲染前，服务端渲染多余内容导致的性能问题;通过火焰图提高组件渲染效率，以及避免不必要的组件渲染等 - 如何从性能方面选择for，map和forEach？ - 这是非常好的问题，在编程中我们经常使用循环，可是循环的方式却有很多种，我们应该基于什么样的理由去选择适合的呢？本问题上的一问一答可以给我们一些思路。 - 看过这篇文章以后不要再提this - 本文讲解了 this 在各个场景下表示什么值，讲解了 call、apply、bind、箭头函数对 this 的影响 - JavaScript 的机器学习指南 - 听说你用 JavaScript 写代码？本文是你的机器学习指南，来自德国的 Robin Wieruch 发布的一系列使用 JavaScript 构建机器学习的教程。 - PWA之Workbox缓存策略分析 - 本文主要分析通过workbox(基于1.x和2.x版本，未来3.x版本会有新的结构)生成Service-Worker的缓存策略，workbox是GoogleChrome团队对原来sw-precache和sw-toolbox的封装，并且提供了Webpack和Gulp插件方便开发者快速生成sw.js文件。 - React Fiber初探 - React 16版本版本中处了包含Portal，异常边界等新特性外， 最重要的是重写了调和算法--Fiber， 推出了新的调和器--Fiber Reconciler， - 来负责管理组件实例的更新，渲染任务及与其他fiber实例的联系。 本文博主通过自己的学习简单的讲述了对Fiber架构实现和源码， 可以帮助我们很好的理解它。 - [译]JavaScript 的时间消耗 - 译文中图文并茂的阐述了执行 JavaScript 代码的时间消耗地方， 了解到 消耗的地方，才能更好的优化项目，提高页面交互响应的速度。 - How to Organize React Files Before It’s Messed Up - 随着项目扩大，如何组织好项目中的React文件，文章提供了一些方案以及最佳实践 - 技术纵横 - The Best Request Is No Request, Revisited - 当HTTP/2.0的支持越来越普及，"the best request is no request"是否还在今天适用? - API 是如何工作的 - 用一个诙谐的比喻深入浅出讲解 API 是什么。 - 实用推荐 - Lint the Web Forward With Sonarwhal - Sonarwhal Microsoft Edge 团队开发的一款开源网站检查工具，包含在线站点和命令行工具。可以对可访问性，操作性，安全性，性能以及 PWA 等方面进行检查，看是否符合最佳实践。 - 程序人生 - 如何用人类的方式进行Code Review（二) - 关于如何在 Code review 中进行良好的沟通，避免陷入一些潜在的陷阱。这里，我会着重于介绍一些技巧，让你的 Code review - 能够顺利完成，避免磕磕碰碰。那么这里用一句话概括一些：一个好的代码评审者，不仅需要找出代码中的 bug，还需要提供认真负责的反馈来让团队伙伴得到能力上的提升。 +
diff --git a/src/app/page-layouts/carded/fullwidth/fullwidth.component.scss b/src/app/page-layouts/carded/fullwidth/fullwidth.component.scss index 3989702..518c75a 100644 --- a/src/app/page-layouts/carded/fullwidth/fullwidth.component.scss +++ b/src/app/page-layouts/carded/fullwidth/fullwidth.component.scss @@ -1,5 +1,17 @@ -.page-layout { +:host { + display: flex; + flex: 1; + width: 100%; + min-width: 100%; +} +.page-layout { + display: flex; + flex-direction: column; + flex: 1 0 auto; + width: 100%; + min-width: 100%; + position: relative; } .top-bg { @@ -25,19 +37,16 @@ max-width: 100%; max-height: 100%; box-sizing: border-box; - - > .header { + >.header { height: 136px; min-height: 136px; max-height: 136px; } - - > .card { + >.card { display: flex; flex-direction: column; flex: 1; overflow: hidden; - background: #fff; box-shadow: 0 4px 5px -2px rgba(0, 0, 0, .2), 0 7px 10px 1px rgba(0, 0, 0, .14), 0 2px 16px 1px rgba(0, 0, 0, .12); } @@ -52,5 +61,8 @@ } .content { + display: flex; + flex: 1; padding: 24px; + overflow: auto } diff --git a/src/app/page-layouts/carded/fullwidth2/fullwidth2.component.html b/src/app/page-layouts/carded/fullwidth2/fullwidth2.component.html new file mode 100644 index 0000000..8179841 --- /dev/null +++ b/src/app/page-layouts/carded/fullwidth2/fullwidth2.component.html @@ -0,0 +1,13 @@ +
+
+ +
+
+
+
+
+ +
+
+
+
diff --git a/src/app/page-layouts/carded/fullwidth2/fullwidth2.component.scss b/src/app/page-layouts/carded/fullwidth2/fullwidth2.component.scss new file mode 100644 index 0000000..c16d876 --- /dev/null +++ b/src/app/page-layouts/carded/fullwidth2/fullwidth2.component.scss @@ -0,0 +1,69 @@ +:host { + display: flex; + flex: 1; + width: 100%; + min-width: 100%; + height: 100%; +} + +.page-layout { + display: flex; + flex-direction: column; + flex: 1 0 auto; + width: 100%; + min-width: 100%; + position: relative; +} + +.top-bg { + position: absolute; + z-index: 1; + top: 0; + right: 0; + left: 0; + height: 200px; + background: #c471f3; + background-size: cover; +} + +.wrapper { + display: flex; + flex-direction: column; + flex: 1; + position: relative; + z-index: 2; + padding: 0 32px; + width: 100%; + min-width: 100%; + max-width: 100%; + max-height: 100%; + box-sizing: border-box; + >.header { + height: 136px; + min-height: 136px; + max-height: 136px; + } + >.card { + display: flex; + flex-direction: column; + flex: 1; + overflow: hidden; + background: #fff; + box-shadow: 0 4px 5px -2px rgba(0, 0, 0, .2), 0 7px 10px 1px rgba(0, 0, 0, .14), 0 2px 16px 1px rgba(0, 0, 0, .12); + } +} + +.toolbar { + border-bottom: 1px solid rgba(0, 0, 0, .12); + height: 64px; + min-height: 64px; + max-height: 64px; + padding: 0 24px; +} + +.content { + display: flex; + flex: 1; + padding: 24px; + overflow: auto +} diff --git a/src/app/page-layouts/carded/fullwidth2/fullwidth2.component.spec.ts b/src/app/page-layouts/carded/fullwidth2/fullwidth2.component.spec.ts new file mode 100644 index 0000000..4228986 --- /dev/null +++ b/src/app/page-layouts/carded/fullwidth2/fullwidth2.component.spec.ts @@ -0,0 +1,25 @@ +import { async, ComponentFixture, TestBed } from '@angular/core/testing'; + +import { Fullwidth2Component } from './fullwidth2.component'; + +describe('Fullwidth2Component', () => { + let component: Fullwidth2Component; + let fixture: ComponentFixture; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + declarations: [ Fullwidth2Component ] + }) + .compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(Fullwidth2Component); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/page-layouts/carded/fullwidth2/fullwidth2.component.ts b/src/app/page-layouts/carded/fullwidth2/fullwidth2.component.ts new file mode 100644 index 0000000..ea9e24b --- /dev/null +++ b/src/app/page-layouts/carded/fullwidth2/fullwidth2.component.ts @@ -0,0 +1,15 @@ +import { Component, OnInit } from '@angular/core'; + +@Component({ + selector: 'app-fullwidth2', + templateUrl: './fullwidth2.component.html', + styleUrls: ['./fullwidth2.component.scss'] +}) +export class Fullwidth2Component implements OnInit { + + constructor() { } + + ngOnInit() { + } + +} diff --git a/src/app/page-layouts/carded/left-sidenav/left-sidenav.component.html b/src/app/page-layouts/carded/left-sidenav/left-sidenav.component.html new file mode 100644 index 0000000..d5c614e --- /dev/null +++ b/src/app/page-layouts/carded/left-sidenav/left-sidenav.component.html @@ -0,0 +1,126 @@ +
+
+ + + +
+ +

Sidenav Demo

+ + + Sidenav Item 1 + + + + + + Sidenav Item 2 + + + + + + Sidenav Item 3 + + + + + + Sidenav Item 4 + + + + + + Sidenav Item 5 + + + + + + Sidenav Item 6 + + + + + + Sidenav Item 7 + + + + + + Sidenav Item 8 + + + + + + Sidenav Item 9 + + + + + + Sidenav Item 10 + + + + + + Sidenav Item 11 + + + + + + Sidenav Item 12 + + + + + + Sidenav Item 13 + + + + + + Sidenav Item 14 + + + + + + Sidenav Item 15 + + + + + + Sidenav Item 16 + + + +
+ + + +
+
+
+
+ +
+
+ +
+
+
+ + + + +
diff --git a/src/app/page-layouts/carded/left-sidenav/left-sidenav.component.scss b/src/app/page-layouts/carded/left-sidenav/left-sidenav.component.scss new file mode 100644 index 0000000..e449596 --- /dev/null +++ b/src/app/page-layouts/carded/left-sidenav/left-sidenav.component.scss @@ -0,0 +1,83 @@ +:host { + display: flex; + flex: 1; + width: 100%; + min-width: 100%; + height: 100%; +} + +.page-layout { + display: flex; + flex-direction: column; + flex: 1 0 auto; + width: 100%; + min-width: 100%; + position: relative; +} + +.top-bg { + position: absolute; + z-index: 1; + top: 0; + right: 0; + left: 0; + height: 200px; + background: #c471f3; + background-size: cover; +} + +.wrapper { + display: flex; + flex-direction: column; + flex: 1; + position: relative; + z-index: 2; + padding: 0 32px; + width: 100%; + min-width: 100%; + max-width: 100%; + max-height: 100%; + box-sizing: border-box; + + >.header { + height: 136px; + min-height: 136px; + max-height: 136px; + } + >.card { + display: flex; + flex-direction: column; + flex: 1; + overflow: hidden; + background: #fff; + box-shadow: 0 4px 5px -2px rgba(0, 0, 0, .2), 0 7px 10px 1px rgba(0, 0, 0, .14), 0 2px 16px 1px rgba(0, 0, 0, .12); + } +} + +.toolbar { + border-bottom: 1px solid rgba(0, 0, 0, .12); + height: 64px; + min-height: 64px; + max-height: 64px; + padding: 0 24px; +} + +.content { + display: flex; + flex: 1; + padding: 24px; + overflow: auto +} +// left-sidnav +.sidenav { + display: flex; + flex-direction: column; + flex: 1; + width: 240px; + min-width: 240px; + max-width: 240px; + height: auto; + z-index: 4; + overflow-y: hidden; + box-shadow: 0px 4px 5px -2px rgba(0, 0, 0, 0.2), 0px 7px 10px 1px rgba(0, 0, 0, 0.14), 0px 2px 16px 1px rgba(0, 0, 0, 0.12); +} diff --git a/src/app/page-layouts/carded/left-sidenav/left-sidenav.component.spec.ts b/src/app/page-layouts/carded/left-sidenav/left-sidenav.component.spec.ts new file mode 100644 index 0000000..8bfba9d --- /dev/null +++ b/src/app/page-layouts/carded/left-sidenav/left-sidenav.component.spec.ts @@ -0,0 +1,25 @@ +import { async, ComponentFixture, TestBed } from '@angular/core/testing'; + +import { LeftSidenavComponent } from './left-sidenav.component'; + +describe('LeftSidenavComponent', () => { + let component: LeftSidenavComponent; + let fixture: ComponentFixture; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + declarations: [ LeftSidenavComponent ] + }) + .compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(LeftSidenavComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/page-layouts/carded/left-sidenav/left-sidenav.component.ts b/src/app/page-layouts/carded/left-sidenav/left-sidenav.component.ts new file mode 100644 index 0000000..9c80cc3 --- /dev/null +++ b/src/app/page-layouts/carded/left-sidenav/left-sidenav.component.ts @@ -0,0 +1,15 @@ +import { Component, OnInit } from '@angular/core'; + +@Component({ + selector: 'app-left-sidenav', + templateUrl: './left-sidenav.component.html', + styleUrls: ['./left-sidenav.component.scss'] +}) +export class LeftSidenavComponent implements OnInit { + + constructor() { } + + ngOnInit() { + } + +} diff --git a/src/app/page-layouts/demo-content/demo-content.component.html b/src/app/page-layouts/demo-content/demo-content.component.html new file mode 100644 index 0000000..1c00b5f --- /dev/null +++ b/src/app/page-layouts/demo-content/demo-content.component.html @@ -0,0 +1,32 @@ +

Building Custom Elements / Web Components with Angular 6

+ +

With the newest Angular CLI (version 6, released 2018–04–03) and the new addition to Angular family — the Angular Elements + package it’s extremely easy to create native custom elements.

+

If you don’t know what custom elements are or what is the connection to Angular, there are several great talks that introduce + to these concepts, I highly encourage you to watch one of these.

+

So now, without further ado, let’s see some code!

+

1. Install Angular CLI 6 and initialize the project

+

+ npm i -g @angular/cli ng +
new elements-demo --prefix custom +

+ +

We’re not doing anything special yet, so all the normal ng new parameters apply, you could add sass or anything to the mix, + but here we’ll stop at setting a custom prefix to, well, “custom”. +

+ +

2. Add elements & polyfill

+

In order to have elements functionality available we need the Angular library and a polyfill — with the new CLI it’s just + a matter of one(!) simple command: +

+

ng add @angular/elements

+ +

3. Create a component +

+

Let’s create one with Input and Output to see how they translate to custom elements that are understood by browsers:

+

ng g component button --inline-style --inline-template -v Native

+

We use ViewEncapsulation.Native so that the styles are bundled with the template and the component’s class into one file.

+

After adding some style & template our button.component.ts looks like this:

+

4. Registering component in NgModule

+

This is the vital part: we use the Angular’s createCustomElement function to create a class that can be used with browsers’ + native customElements.define functionality.

diff --git a/src/app/page-layouts/demo-content/demo-content.component.scss b/src/app/page-layouts/demo-content/demo-content.component.scss new file mode 100644 index 0000000..e69de29 diff --git a/src/app/page-layouts/demo-content/demo-content.component.spec.ts b/src/app/page-layouts/demo-content/demo-content.component.spec.ts new file mode 100644 index 0000000..e7a181f --- /dev/null +++ b/src/app/page-layouts/demo-content/demo-content.component.spec.ts @@ -0,0 +1,25 @@ +import { async, ComponentFixture, TestBed } from '@angular/core/testing'; + +import { DemoContentComponent } from './demo-content.component'; + +describe('DemoContentComponent', () => { + let component: DemoContentComponent; + let fixture: ComponentFixture; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + declarations: [ DemoContentComponent ] + }) + .compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(DemoContentComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/page-layouts/demo-content/demo-content.component.ts b/src/app/page-layouts/demo-content/demo-content.component.ts new file mode 100644 index 0000000..656d2ef --- /dev/null +++ b/src/app/page-layouts/demo-content/demo-content.component.ts @@ -0,0 +1,15 @@ +import { Component, OnInit } from '@angular/core'; + +@Component({ + selector: 'app-demo-content', + templateUrl: './demo-content.component.html', + styleUrls: ['./demo-content.component.scss'] +}) +export class DemoContentComponent implements OnInit { + + constructor() { } + + ngOnInit() { + } + +} diff --git a/src/app/page-layouts/page-layouts.module.ts b/src/app/page-layouts/page-layouts.module.ts index 8027a0c..e9866c6 100644 --- a/src/app/page-layouts/page-layouts.module.ts +++ b/src/app/page-layouts/page-layouts.module.ts @@ -6,6 +6,9 @@ import { FullwidthComponent } from './carded/fullwidth/fullwidth.component'; import { PerfectScrollbarModule } from 'ngx-perfect-scrollbar'; import { PERFECT_SCROLLBAR_CONFIG } from 'ngx-perfect-scrollbar'; import { PerfectScrollbarConfigInterface } from 'ngx-perfect-scrollbar'; +import { Fullwidth2Component } from './carded/fullwidth2/fullwidth2.component'; +import { DemoContentComponent } from './demo-content/demo-content.component'; +import { LeftSidenavComponent } from './carded/left-sidenav/left-sidenav.component'; const DEFAULT_PERFECT_SCROLLBAR_CONFIG: PerfectScrollbarConfigInterface = { suppressScrollX: true @@ -13,7 +16,7 @@ const DEFAULT_PERFECT_SCROLLBAR_CONFIG: PerfectScrollbarConfigInterface = { @NgModule({ imports: [SharedModule, PageLayoutsRoutingModule, PerfectScrollbarModule], - declarations: [FullwidthComponent], + declarations: [FullwidthComponent, Fullwidth2Component, DemoContentComponent, LeftSidenavComponent], providers: [ { provide: PERFECT_SCROLLBAR_CONFIG, diff --git a/src/app/page-layouts/pages.routing.ts b/src/app/page-layouts/pages.routing.ts index 6ecfee5..fbb1a74 100644 --- a/src/app/page-layouts/pages.routing.ts +++ b/src/app/page-layouts/pages.routing.ts @@ -2,6 +2,8 @@ import { NgModule } from '@angular/core'; import { Routes, RouterModule } from '@angular/router'; import { FullwidthComponent } from './carded/fullwidth/fullwidth.component'; +import { Fullwidth2Component } from './carded/fullwidth2/fullwidth2.component'; +import { LeftSidenavComponent } from './carded/left-sidenav/left-sidenav.component'; const routes: Routes = [ { @@ -12,6 +14,14 @@ const routes: Routes = [ path: 'carded/full-width', component: FullwidthComponent }, + { + path: 'carded/full-width-2', + component: Fullwidth2Component + }, + { + path: 'carded/left-sidenav', + component: LeftSidenavComponent + }, ]; @NgModule({