Skip to content

Commit

Permalink
chore(release): release 16.0.0 (#322)
Browse files Browse the repository at this point in the history
Co-authored-by: huaweidevcloud <devcloudmobile@huawei.com>
  • Loading branch information
wangyaju and huaweidevcloud authored Jul 31, 2023
1 parent 298274c commit e828814
Show file tree
Hide file tree
Showing 278 changed files with 4,646 additions and 1,940 deletions.
2 changes: 1 addition & 1 deletion README.md
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,7 @@ To see more in [devui.design](https://devui.design/home).

## Angular Support

Now supports Angular <font color=red>`^15.0.0`</font>
Now supports Angular <font color=red>`^16.0.0`</font>

## Getting Started

Expand Down
2 changes: 1 addition & 1 deletion README_zh_CN.md
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,7 @@ DevUI Design设计系统包含了DevUI规则、设计语言和最佳实践的资

## Angular版本

当前支持的angular版本<font color=red>`^15.0.0`</font>
当前支持的angular版本<font color=red>`^16.0.0`</font>

## 快速开始

Expand Down
3 changes: 1 addition & 2 deletions angular.json
Original file line number Diff line number Diff line change
Expand Up @@ -207,6 +207,5 @@
}
}
}
},
"defaultProject": "devui"
}
}
12 changes: 12 additions & 0 deletions devui-commons/src/devui-commons.scss
Original file line number Diff line number Diff line change
Expand Up @@ -234,6 +234,12 @@
}
}

@media (max-width: 767px) {
.devui-content-layout {
margin-top: 56px;
}
}

body[ui-lang='en-us'] {
@media (max-width: 1480px) {
d-common-header .devui-search {
Expand All @@ -242,6 +248,12 @@ body[ui-lang='en-us'] {
}
}

body[ui-theme='galaxy-theme'] {
.header-container {
background-image: linear-gradient(179deg, #141721 0%, #1A1E29 100%);
}
}

// 设置引导页MarkDown文档标题
.readme {
h1 {
Expand Down
81 changes: 59 additions & 22 deletions devui-commons/src/header/header.component.html
Original file line number Diff line number Diff line change
@@ -1,8 +1,45 @@
<div class="header-container">
<div class="header-container" *ngIf="!showMobileHeader">
<div class="header-top-menu">
<ng-content select="d-header-logo"></ng-content>
<ng-content select="d-header-menu"></ng-content>
<ng-container [ngTemplateOutlet]="logoTpl"></ng-container>
<ng-container [ngTemplateOutlet]="menuTpl"></ng-container>
</div>
<ng-container [ngTemplateOutlet]="headerBottomTpl"></ng-container>
</div>

<div class="mobile-header-container" *ngIf="showMobileHeader">
<div class="mobile-header-left">
<div class="mobile-hamburger" (click)="toggleHamburger($event)">
<ng-container [ngTemplateOutlet]="hamburgerTpl"></ng-container>
</div>
<ng-container [ngTemplateOutlet]="logoTpl"></ng-container>
</div>
<ng-container [ngTemplateOutlet]="expandTpl" *ngIf="!isHomePage"></ng-container>
<div class="mobile-sider" [class.mobile-sider-show]="showHamburger">
<ng-container [ngTemplateOutlet]="menuTpl"></ng-container>
<div class="mobile-bottom-menu-hidden" [class.mobile-bottom-menu-show]="showHamburger">
<ng-container [ngTemplateOutlet]="headerBottomTpl"></ng-container>
</div>
</div>
</div>

<ng-template #menuTpl>
<ng-content select="d-header-menu"></ng-content>
</ng-template>

<ng-template #logoTpl>
<ng-content select="d-header-logo"></ng-content>
</ng-template>

<ng-template #hamburgerTpl>
<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<title>hamburger</title>
<g id="hamburger" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<path d="M5,17 C6.1045695,17 7,17.8954305 7,19 C7,20.1045695 6.1045695,21 5,21 C3.8954305,21 3,20.1045695 3,19 C3,17.8954305 3.8954305,17 5,17 Z M12,17 C13.1045695,17 14,17.8954305 14,19 C14,20.1045695 13.1045695,21 12,21 C10.8954305,21 10,20.1045695 10,19 C10,17.8954305 10.8954305,17 12,17 Z M19,17 C20.1045695,17 21,17.8954305 21,19 C21,20.1045695 20.1045695,21 19,21 C17.8954305,21 17,20.1045695 17,19 C17,17.8954305 17.8954305,17 19,17 Z M5,10 C6.1045695,10 7,10.8954305 7,12 C7,13.1045695 6.1045695,14 5,14 C3.8954305,14 3,13.1045695 3,12 C3,10.8954305 3.8954305,10 5,10 Z M12,10 C13.1045695,10 14,10.8954305 14,12 C14,13.1045695 13.1045695,14 12,14 C10.8954305,14 10,13.1045695 10,12 C10,10.8954305 10.8954305,10 12,10 Z M19,10 C20.1045695,10 21,10.8954305 21,12 C21,13.1045695 20.1045695,14 19,14 C17.8954305,14 17,13.1045695 17,12 C17,10.8954305 17.8954305,10 19,10 Z M5,3 C6.1045695,3 7,3.8954305 7,5 C7,6.1045695 6.1045695,7 5,7 C3.8954305,7 3,6.1045695 3,5 C3,3.8954305 3.8954305,3 5,3 Z M12,3 C13.1045695,3 14,3.8954305 14,5 C14,6.1045695 13.1045695,7 12,7 C10.8954305,7 10,6.1045695 10,5 C10,3.8954305 10.8954305,3 12,3 Z M19,3 C20.1045695,3 21,3.8954305 21,5 C21,6.1045695 20.1045695,7 19,7 C17.8954305,7 17,6.1045695 17,5 C17,3.8954305 17.8954305,3 19,3 Z" id="形状结合" fill="#71757F"></path>
</g>
</svg>
</ng-template>

<ng-template #headerBottomTpl>
<div class="header-bottom-menu">
<div class="menu-item">
<ng-content select="d-header-theme-switch"></ng-content>
Expand All @@ -11,7 +48,7 @@
<ng-content select="d-header-language-switch"></ng-content>
</div>
<div class="menu-item">
<a href="https://github.com/DevCloudFE/ng-devui" rel="noopener noreferrer" target="blank">
<a [href]="githubLink" rel="noopener noreferrer" target="blank">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
<path
fill="#71757f"
Expand All @@ -20,23 +57,23 @@
</svg>
</a>
</div>
<div class="expand-sidebar" (click)="clickSlideMenu(true)" *ngIf="showExpandButton">
<svg width="16px" height="16px" viewBox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<title>收起</title>
<g id="收起" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<path d="M9.4141965,1.48235598 C9.59170754,1.65979691 9.60784491,1.937463 9.4626086,2.13312669 L9.4141965,2.1891835 L3.71630048,7.88482928 C3.662061,7.93904734 3.65302108,8.02133773 3.68918074,8.08491324 L3.71630048,8.12043846 L9.4141965,13.8160842 C9.60945864,14.0112693 9.60945864,14.3277267 9.4141965,14.5229118 C9.23668545,14.7003527 8.95890967,14.7164837 8.76316867,14.5713047 L8.70708972,14.5229118 L3.0091937,8.82726598 C2.58038271,8.39862434 2.55515854,7.71932504 2.93352117,7.26119426 L3.0091937,7.17800175 L8.70708972,1.48235598 C8.90235186,1.28717094 9.21893435,1.28717094 9.4141965,1.48235598 Z M13.1867116,1.48235598 C13.3642226,1.65979691 13.38036,1.937463 13.2351237,2.13312669 L13.1867116,2.1891835 L7.48881554,7.88482928 C7.43457605,7.93904734 7.42553614,8.02133773 7.46169579,8.08491324 L7.48881554,8.12043846 L13.1867116,13.8160842 C13.3819737,14.0112693 13.3819737,14.3277267 13.1867116,14.5229118 C13.0092005,14.7003527 12.7314247,14.7164837 12.5356837,14.5713047 L12.4796048,14.5229118 L6.78170876,8.82726598 C6.35289777,8.39862434 6.32767359,7.71932504 6.70603623,7.26119426 L6.78170876,7.17800175 L12.4796048,1.48235598 C12.6748669,1.28717094 12.9914494,1.28717094 13.1867116,1.48235598 Z" id="形状结合" fill="#71757F" transform="translate(8.000322, 8.002634) rotate(-180.000000) translate(-8.000322, -8.002634) "></path>
</g>
</svg>
</div>
<div class="expand-sidebar" (click)="clickSlideMenu(false)" *ngIf="showCollapseButton">
<svg width="16px" height="16px" viewBox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<title>展开</title>
<g id="展开" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<path d="M9.41355339,1.47708824 C9.59106443,1.65452918 9.6072018,1.93219527 9.46196549,2.12785896 L9.41355339,2.18391577 L3.71565738,7.87956154 C3.66141789,7.93377961 3.65237798,8.01607 3.68853763,8.0796455 L3.71565738,8.11517072 L9.41355339,13.8108165 C9.60881554,14.0060015 9.60881554,14.322459 9.41355339,14.517644 C9.23604235,14.695085 8.95826656,14.711216 8.76252556,14.566037 L8.70644661,14.517644 L3.0085506,8.82199825 C2.57973961,8.39335661 2.55451543,7.7140573 2.93287807,7.25592653 L3.0085506,7.17273402 L8.70644661,1.47708824 C8.90170876,1.28190321 9.21829124,1.28190321 9.41355339,1.47708824 Z M13.1860684,1.47708824 C13.3635795,1.65452918 13.3797169,1.93219527 13.2344805,2.12785896 L13.1860684,2.18391577 L7.48817243,7.87956154 C7.43393295,7.93377961 7.42489303,8.01607 7.46105269,8.0796455 L7.48817243,8.11517072 L13.1860684,13.8108165 C13.3813306,14.0060015 13.3813306,14.322459 13.1860684,14.517644 C13.0085574,14.695085 12.7307816,14.711216 12.5350406,14.566037 L12.4789617,14.517644 L6.78106565,8.82199825 C6.35225466,8.39335661 6.32703049,7.7140573 6.70539312,7.25592653 L6.78106565,7.17273402 L12.4789617,1.47708824 C12.6742238,1.28190321 12.9908063,1.28190321 13.1860684,1.47708824 Z" id="形状结合" fill="#71757F" transform="translate(7.999678, 7.997366) scale(-1, -1) rotate(-180.000000) translate(-7.999678, -7.997366) "></path>
</g>
</svg>
</div>
<ng-container [ngTemplateOutlet]="expandTpl" *ngIf="!showMobileHeader"></ng-container>
</div>
</ng-template>


</div>
<ng-template #expandTpl>
<div class="expand-sidebar" (click)="clickSlideMenu(true)" *ngIf="showExpandButton">
<svg width="16px" height="16px" viewBox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<g id="收起" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<path d="M9.4141965,1.48235598 C9.59170754,1.65979691 9.60784491,1.937463 9.4626086,2.13312669 L9.4141965,2.1891835 L3.71630048,7.88482928 C3.662061,7.93904734 3.65302108,8.02133773 3.68918074,8.08491324 L3.71630048,8.12043846 L9.4141965,13.8160842 C9.60945864,14.0112693 9.60945864,14.3277267 9.4141965,14.5229118 C9.23668545,14.7003527 8.95890967,14.7164837 8.76316867,14.5713047 L8.70708972,14.5229118 L3.0091937,8.82726598 C2.58038271,8.39862434 2.55515854,7.71932504 2.93352117,7.26119426 L3.0091937,7.17800175 L8.70708972,1.48235598 C8.90235186,1.28717094 9.21893435,1.28717094 9.4141965,1.48235598 Z M13.1867116,1.48235598 C13.3642226,1.65979691 13.38036,1.937463 13.2351237,2.13312669 L13.1867116,2.1891835 L7.48881554,7.88482928 C7.43457605,7.93904734 7.42553614,8.02133773 7.46169579,8.08491324 L7.48881554,8.12043846 L13.1867116,13.8160842 C13.3819737,14.0112693 13.3819737,14.3277267 13.1867116,14.5229118 C13.0092005,14.7003527 12.7314247,14.7164837 12.5356837,14.5713047 L12.4796048,14.5229118 L6.78170876,8.82726598 C6.35289777,8.39862434 6.32767359,7.71932504 6.70603623,7.26119426 L6.78170876,7.17800175 L12.4796048,1.48235598 C12.6748669,1.28717094 12.9914494,1.28717094 13.1867116,1.48235598 Z" id="形状结合" fill="#71757F" transform="translate(8.000322, 8.002634) rotate(-180.000000) translate(-8.000322, -8.002634) "></path>
</g>
</svg>
</div>
<div class="expand-sidebar" (click)="clickSlideMenu(false)" *ngIf="showCollapseButton">
<svg width="16px" height="16px" viewBox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<g id="展开" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<path d="M9.41355339,1.47708824 C9.59106443,1.65452918 9.6072018,1.93219527 9.46196549,2.12785896 L9.41355339,2.18391577 L3.71565738,7.87956154 C3.66141789,7.93377961 3.65237798,8.01607 3.68853763,8.0796455 L3.71565738,8.11517072 L9.41355339,13.8108165 C9.60881554,14.0060015 9.60881554,14.322459 9.41355339,14.517644 C9.23604235,14.695085 8.95826656,14.711216 8.76252556,14.566037 L8.70644661,14.517644 L3.0085506,8.82199825 C2.57973961,8.39335661 2.55451543,7.7140573 2.93287807,7.25592653 L3.0085506,7.17273402 L8.70644661,1.47708824 C8.90170876,1.28190321 9.21829124,1.28190321 9.41355339,1.47708824 Z M13.1860684,1.47708824 C13.3635795,1.65452918 13.3797169,1.93219527 13.2344805,2.12785896 L13.1860684,2.18391577 L7.48817243,7.87956154 C7.43393295,7.93377961 7.42489303,8.01607 7.46105269,8.0796455 L7.48817243,8.11517072 L13.1860684,13.8108165 C13.3813306,14.0060015 13.3813306,14.322459 13.1860684,14.517644 C13.0085574,14.695085 12.7307816,14.711216 12.5350406,14.566037 L12.4789617,14.517644 L6.78106565,8.82199825 C6.35225466,8.39335661 6.32703049,7.7140573 6.70539312,7.25592653 L6.78106565,7.17273402 L12.4789617,1.47708824 C12.6742238,1.28190321 12.9908063,1.28190321 13.1860684,1.47708824 Z" id="形状结合" fill="#71757F" transform="translate(7.999678, 7.997366) scale(-1, -1) rotate(-180.000000) translate(-7.999678, -7.997366) "></path>
</g>
</svg>
</div>
</ng-template>
50 changes: 49 additions & 1 deletion devui-commons/src/header/header.component.scss
Original file line number Diff line number Diff line change
Expand Up @@ -79,4 +79,52 @@
stroke: none;
}
}
}
}

.mobile-header-container {
display: flex;
align-items: center;
position: fixed;
z-index: 1000;
width: 100%;
background-image: linear-gradient(179deg, #E9FBFF 0%, #F3F5FF 100%);
.mobile-header-left {
display: flex;
align-items: center;
}
.mobile-hamburger {
margin-left: 12px;
}

.expand-sidebar {
margin-top: 0 !important;
margin-left: 12px;
}
}

.mobile-sider {
display: flex;
flex-direction: column;
justify-content: space-between;
position: fixed;
top: 56px;
left: 0;

height: calc(100vh - 56px);
width: 0;
background-color: $devui-base-bg;
transition: all 0.3s;
}

.mobile-sider-show {
width: 242px !important;
padding: 12px;
}

.mobile-bottom-menu-hidden {
display: none;
}

.mobile-bottom-menu-show {
display: block !important;
}
42 changes: 29 additions & 13 deletions devui-commons/src/header/header.component.ts
Original file line number Diff line number Diff line change
@@ -1,20 +1,10 @@
import { DOCUMENT } from '@angular/common';
import { Component, ContentChildren, HostListener, Inject, Input, isDevMode, OnInit, QueryList } from '@angular/core';
import { Component, ContentChildren, HostListener, Inject, Input, isDevMode, OnInit, QueryList, ChangeDetectorRef } from '@angular/core';
import { DomSanitizer, SafeResourceUrl } from '@angular/platform-browser';
import { DevuiCommonsService } from '../devui-commons.service';
import { I18nUtil } from '../i18n/i18n.util';
import { LogoComponent } from './logo/logo.component';

export interface UserInfo {
displayNameCn: string;
uid?:string;
employeeNumber: string;
iconUrl:string;
docCount?:number;
questionCount?:number;
draftCount?:number;
};

@Component({
selector: 'd-common-header',
templateUrl: './header.component.html',
Expand All @@ -30,6 +20,7 @@ export class HeaderComponent implements OnInit {
@Input() repoName = 'ng-devui';

repoLink!: SafeResourceUrl;
githubLink;

@ContentChildren(LogoComponent) subLogo: QueryList<LogoComponent> = new QueryList<LogoComponent>();

Expand All @@ -42,6 +33,10 @@ export class HeaderComponent implements OnInit {
MIN_WIDTH = 1279;
showExpandButton = false;
showCollapseButton = false;
showHamburger = false;
showMobileHeader = false;
isHomePage = false;
mediaQuery;


@HostListener('window:resize')
Expand All @@ -55,6 +50,7 @@ export class HeaderComponent implements OnInit {
constructor(
private commonsService: DevuiCommonsService,
private sanitizer: DomSanitizer,
private cdr: ChangeDetectorRef,
@Inject(DOCUMENT) private doc: any,
) {
this.document = this.doc;
Expand All @@ -68,6 +64,20 @@ export class HeaderComponent implements OnInit {
this.showExpandButton = this.document.body.clientWidth < this.MIN_WIDTH ? true : false;
this.setSlideBarStyle();
this.repoLink = this.sanitizer.bypassSecurityTrustResourceUrl(`https://ghbtns.com/github-btn.html?user=DevCloudFE&repo=${this.repoName}&type=star&count=true`);
this.githubLink = `https://github.com/DevCloudFE/${this.repoName}`;
this.isHomePage = window.location.pathname.split('/')[1] === 'home' ? true : false;
this.mediaQuery = window.matchMedia('(max-width: 767px)');
this.mediaQuery.addListener(this.handleScreenChange);
this.handleScreenChange(this.mediaQuery);
}

handleScreenChange = (e) => {
if (e.matches) {
this.showMobileHeader = true;
} else {
this.showMobileHeader = false;
}
this.cdr.detectChanges();
}

onSearch(term): void {
Expand All @@ -90,7 +100,8 @@ export class HeaderComponent implements OnInit {
this.showCollapseButton = false;
this.showExpandButton = true;
}

this.cdr.detectChanges();

this.showSlideMenu = typeof showMenu === 'boolean' ? showMenu : !this.showSlideMenu;
this.setSlideBarStyle(true);
}
Expand All @@ -114,4 +125,9 @@ export class HeaderComponent implements OnInit {
this.curLanguage = lang;
this.searchPlaceholder = this.curLanguage === 'zh-cn' ? '请输入你想查找的组件' : 'Enter the component';
}
}

toggleHamburger(event) {
this.showHamburger = !this.showHamburger;
this.cdr.detectChanges();
}
}
Original file line number Diff line number Diff line change
@@ -1,32 +1,5 @@
<div class="header-language-switch">
<ng-container *ngIf="languageArr.length === 2">
<div (click)="changeLanguage()">
<ng-container *ngIf="currentLang === 'zh-cn'">
<svg width="16px" height="16px" viewBox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="vertical-align: middle">
<title>语言</title>
<g id="DevUI" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="切图" transform="translate(-296.000000, -24.000000)">
<g id="03-Navigation-导航-/-01-导航菜单-/-基础控件-/-图标按钮" transform="translate(296.000000, 24.000000)">
<g id="编组" transform="translate(0.000000, 0.000000)">
<rect id="矩形" fill-rule="nonzero" x="0" y="0" width="16" height="16"></rect>
<path d="M6,3 C6.55228475,3 7,3.44771525 7,4 C7,4.55228475 6.55228475,5 6,5 L2,4.99915713 L2,6.99915713 L6,7 C6.55228475,7 7,7.44771525 7,8 C7,8.55228475 6.55228475,9 6,9 L2,8.99915713 L2,10.9991571 L6,11 C6.55228475,11 7,11.4477153 7,12 C7,12.5522847 6.55228475,13 6,13 L1,13 C0.44771525,13 0,12.5522847 0,12 L0,4 C0,3.44771525 0.44771525,3 1,3 L6,3 Z M15,3 C15.5522847,3 16,3.44771525 16,4 L16,12 C16,12.5522847 15.5522847,13 15,13 C14.6449598,13 14.3331346,12.8149748 14.155688,12.5360882 L14.1055728,12.4472136 L10,6.974 L10,12 C10,12.5522847 9.55228475,13 9,13 C8.44771525,13 8,12.5522847 8,12 L8,4 C8,3.44771525 8.44771525,3 9,3 C9.3550402,3 9.66686545,3.18502518 9.84431203,3.46391182 L9.89442719,3.5527864 L14,9.027 L14,4 C14,3.44771525 14.4477153,3 15,3 Z" id="形状" fill="#71757F"></path>
</g>
</g>
</g>
</g>
</svg>
</ng-container>
<ng-container *ngIf="currentLang === 'en-us'">
<svg width="16px" height="16px" viewBox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="vertical-align: middle">
<title>中文</title>
<g id="DevUI" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="切图" transform="translate(-360.000000, -24.000000)">
<rect id="矩形" fill="#D8D8D8" opacity="0" x="360" y="24" width="16" height="16"></rect>
<path d="M368,25 C368.552285,25 369,25.4477153 369,26 L369,28 L374,28 C374.552285,28 375,28.4477153 375,29 L375,35 C375,35.5522847 374.552285,36 374,36 L369,36 L369,38 C369,38.5522847 368.552285,39 368,39 C367.447715,39 367,38.5522847 367,38 L367,36 L362,36 C361.447715,36 361,35.5522847 361,35 L361,29 C361,28.4477153 361.447715,28 362,28 L367,28 L367,26 C367,25.4477153 367.447715,25 368,25 Z M367,30 L363,30 L363,34 L367,34 L367,30 Z M373,30 L369,30 L369,34 L373,34 L373,30 Z" id="形状" fill="#71757F"></path>
</g>
</g>
</svg>
</ng-container>
</div>
<span (click)="changeLanguage()">{{currentLang === 'zh-cn' ? languageArr[1] : languageArr[0]}}</span>
</ng-container>
</div>
Loading

0 comments on commit e828814

Please sign in to comment.