Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

chore(release): release 16.2.0 #339

Merged
merged 1 commit into from
Nov 20, 2023
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Binary file added CodeArts-logo.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
2 changes: 1 addition & 1 deletion README.md
Original file line number Diff line number Diff line change
Expand Up @@ -105,7 +105,7 @@ Modern browsers and Internet Explorer 11+.

## Who use it

<p><a href="https://devcloud.huaweicloud.com/" target="_blank" rel="noopener noreferrer"><img alt="DevCloud Logo" src="devcloud-logo.png" width="150" style="max-width:100%;"></a></p>
<p><a href="https://www.huaweicloud.com/devcloud/" target="_blank" rel="noopener noreferrer"><img alt="CodeArts Logo" src="CodeArts-logo.png" width="150" style="max-width:100%;"></a></p>

## LICENSE

Expand Down
2 changes: 1 addition & 1 deletion README_zh_CN.md
Original file line number Diff line number Diff line change
Expand Up @@ -107,7 +107,7 @@ ng serve --open

## 谁在使用

<p><a href="https://devcloud.huaweicloud.com/" target="_blank" rel="noopener noreferrer"><img alt="DevCloud Logo" src="devcloud-logo.png" width="150" style="max-width:100%;"></a></p>
<p><a href="https://www.huaweicloud.com/devcloud/" target="_blank" rel="noopener noreferrer"><img alt="CodeArts Logo" src="CodeArts-logo.png" width="150" style="max-width:100%;"></a></p>

## LICENSE

Expand Down
Binary file removed devcloud-logo.png
Binary file not shown.
15 changes: 10 additions & 5 deletions devui-commons/src/sidebar/sidebar.component.html
Original file line number Diff line number Diff line change
@@ -1,6 +1,12 @@
<div class="sidebar-wrapper">
<d-search class="sidebar-search-container" [iconPosition]="'left'" [styleType]="'gray'" [isKeyupSearch]="true"
[placeholder]="searchPlaceholder" (searchFn)="onSearch($event)"></d-search>
<d-search
class="sidebar-search-container"
[iconPosition]="'left'"
[styleType]="'gray'"
[isKeyupSearch]="true"
[placeholder]="searchPlaceholder"
(searchFn)="onSearch($event)"
></d-search>
<ul class="sidebar-menu" [ngClass]="{'sidebar-menu-design': !sideMenuList.length}">
<li *ngFor="let item of sideMenuList" class="sidebar-menu-item" routerLinkActive="sidebar-menu-item-selected">
<a *ngIf="item.linkType === 'routerLink'" [routerLink]="item.path">
Expand All @@ -12,8 +18,7 @@
</li>
</ul>
<nav class="sidebar-nav">
<d-accordion [data]="componentsDataDisplay" [linkType]="linkType" [itemTemplate]="itemtemplate"
(itemClick)="handleResetPage()" [linkDefaultTarget]="linkDefaultTarget"></d-accordion>
<d-accordion [data]="componentsDataDisplay" [linkType]="linkType" [itemTemplate]="itemtemplate" (itemClick)="handleResetPage()" [linkDefaultTarget]="linkDefaultTarget"></d-accordion>
<ng-template #itemtemplate let-item="item">
{{ item.title }}
<d-tag *ngIf="item.newChange" [tag]="text.new" [labelStyle]="'update-custom'"></d-tag>
Expand All @@ -40,4 +45,4 @@
</a>
</div>
</div>
</div>
</div>
4 changes: 4 additions & 0 deletions devui/alert/alert-carousel-item.component.scss
Original file line number Diff line number Diff line change
@@ -0,0 +1,4 @@
:host {
display: block;
width: 100%;
}
9 changes: 9 additions & 0 deletions devui/alert/alert-carousel-item.component.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,9 @@
import { Component } from '@angular/core';

@Component({
selector: 'd-alert-carousel-item',
styleUrls: ['./alert-carousel-item.component.scss'],
template: `<ng-content></ng-content>`,
preserveWhitespaces: false,
})
export class AlertCarouselItemComponent {}
70 changes: 51 additions & 19 deletions devui/alert/alert.component.html
Original file line number Diff line number Diff line change
@@ -1,22 +1,4 @@
<div class="devui-alert devui-alert-{{ type }} {{ cssClass }}" *ngIf="!hide">
<div class="devui-close" (click)="close()" *ngIf="closeable">
<svg
width="10px"
height="10px"
viewBox="0 0 10 10"
version="1.1"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
>
<g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g transform="translate(-3.000000, -3.000000)" fill-rule="nonzero">
<path
d="M11.6426,3.19816936 C11.9239974,2.91574512 12.4131626,2.93784891 12.7352108,3.24751057 C13.0571998,3.5572302 13.0901298,4.03723416 12.8087324,4.31965839 L9.14064666,7.99900183 L12.8087324,11.6803416 C13.0645482,11.9370909 13.0605893,12.3571292 12.8158402,12.6640749 L12.7352108,12.7524894 C12.4131626,13.0621511 11.9239974,13.0842548 11.6426,12.8018306 L8,9.14489021 L4.35740003,12.8018306 C4.10158422,13.05858 3.6740594,13.0636532 3.35648225,12.8298003 L3.26478919,12.7524894 C2.94280021,12.4427698 2.90987023,11.9627658 3.19126762,11.6803416 L6.8583349,7.99900183 L3.19126762,4.31965839 C2.93545181,4.06290908 2.93941068,3.64287076 3.18415975,3.3359251 L3.26478919,3.24751057 C3.58683735,2.93784891 4.07600264,2.91574512 4.35740003,3.19816936 L8,6.85411161 L11.6426,3.19816936 Z"
></path>
</g>
</g>
</svg>
</div>
<span class="devui-alert-icon" *ngIf="showIcon !== false && type !== 'simple'">
<svg
width="16px"
Expand Down Expand Up @@ -76,5 +58,55 @@
</g>
</svg>
</span>
<ng-content></ng-content>
<div class="devui-alert-carousel-container">
<div
#carouselContainer
class="devui-alert-carousel-box"
(mouseenter)="clearScheduledTransition()"
(mouseleave)="autoScheduleTransition()"
>
<ng-content></ng-content>
</div>
</div>
<div class="devui-alert-operation-container">
<div *ngIf="carouselNum > 1" class="devui-alert-carousel-num">
<span>{{ currentIndex }}/{{ carouselNum }}</span>
<span class="devui-alert-carousel-button" (click)="next()">
<svg
width="12px"
height="12px"
viewBox="0 0 16 16"
version="1.1"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
>
<g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<path
d="M2.64644661,5.14644661 C2.82001296,4.97288026 3.08943736,4.95359511 3.2843055,5.08859116 L3.35355339,5.14644661 L7.999,9.793 L12.6464466,5.14644661 C12.820013,4.97288026 13.0894374,4.95359511 13.2843055,5.08859116 L13.3535534,5.14644661 C13.5271197,5.32001296 13.5464049,5.58943736 13.4114088,5.7843055 L13.3535534,5.85355339 L8.35355339,10.8535534 C8.17998704,11.0271197 7.91056264,11.0464049 7.7156945,10.9114088 L7.64644661,10.8535534 L2.64644661,5.85355339 C2.45118446,5.65829124 2.45118446,5.34170876 2.64644661,5.14644661 Z"
fill-rule="nonzero"
></path>
</g>
</svg>
</span>
</div>
<ng-template [ngTemplateOutlet]="operationTemplate" [ngTemplateOutletContext]="{ close: close }"> </ng-template>
<div class="devui-close" (click)="close()" *ngIf="closeable">
<svg
width="10px"
height="10px"
viewBox="0 0 10 10"
version="1.1"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
>
<g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g transform="translate(-3.000000, -3.000000)" fill-rule="nonzero">
<path
d="M11.6426,3.19816936 C11.9239974,2.91574512 12.4131626,2.93784891 12.7352108,3.24751057 C13.0571998,3.5572302 13.0901298,4.03723416 12.8087324,4.31965839 L9.14064666,7.99900183 L12.8087324,11.6803416 C13.0645482,11.9370909 13.0605893,12.3571292 12.8158402,12.6640749 L12.7352108,12.7524894 C12.4131626,13.0621511 11.9239974,13.0842548 11.6426,12.8018306 L8,9.14489021 L4.35740003,12.8018306 C4.10158422,13.05858 3.6740594,13.0636532 3.35648225,12.8298003 L3.26478919,12.7524894 C2.94280021,12.4427698 2.90987023,11.9627658 3.19126762,11.6803416 L6.8583349,7.99900183 L3.19126762,4.31965839 C2.93545181,4.06290908 2.93941068,3.64287076 3.18415975,3.3359251 L3.26478919,3.24751057 C3.58683735,2.93784891 4.07600264,2.91574512 4.35740003,3.19816936 L8,6.85411161 L11.6426,3.19816936 Z"
></path>
</g>
</g>
</svg>
</div>
</div>
</div>
100 changes: 80 additions & 20 deletions devui/alert/alert.component.scss
Original file line number Diff line number Diff line change
Expand Up @@ -16,23 +16,9 @@
border-radius: $devui-border-radius;
word-break: normal;
word-wrap: break-word;

.devui-close {
color: $devui-text;
opacity: 1;
line-height: 26px;
height: 24px;

& > svg path {
fill: $devui-light-text;
}

span {
color: $devui-text;
font-size: $devui-font-size;
font-weight: bold;
}
}
display: flex;
flex-wrap: nowrap;
align-items: center;

&.devui-alert-success {
background-color: $devui-success-bg;
Expand Down Expand Up @@ -93,6 +79,10 @@
}
}

.devui-alert-icon {
padding-right: 8px;
}

svg.devui-icon {
width: 16px;
height: 16px;
Expand Down Expand Up @@ -151,8 +141,78 @@
}
}
}
}

.devui-alert-icon {
margin-right: 4px;
.devui-alert-carousel-container {
flex-grow: 1;
flex-shrink: 0;
height: 24px;
overflow: hidden;

.devui-alert-carousel-box {
position: relative;
left: 0;
top: 0;
}
}

.devui-alert-operation-container {
flex-grow: 0;
flex-shrink: 1;
display: flex;
align-items: center;
justify-content: flex-end;
height: 24px;
min-width: 200px;

.devui-alert-carousel-num {
padding-right: 8px;
}

.devui-alert-carousel-button {
margin-left: 8px;
display: inline-flex;
align-items: center;
justify-content: center;
width: 24px;
height: 16px;
line-height: 16px;
vertical-align: middle;
background-color: transparent;
text-align: center;
border-radius: $devui-border-radius;
cursor: pointer;

svg path {
fill: $devui-text;
}

&:hover {
background-color: $devui-shape-icon-fill-hover;

svg path {
fill: $devui-light-text;
}
}
}
}

.devui-close {
flex-grow: 0;
flex-shrink: 1;
color: $devui-text;
opacity: 1;
line-height: 26px;
height: 24px;
padding-left: 8px;

& > svg path {
fill: $devui-light-text;
}

span {
color: $devui-text;
font-size: $devui-font-size;
font-weight: bold;
}
}
}
97 changes: 85 additions & 12 deletions devui/alert/alert.component.ts
Original file line number Diff line number Diff line change
@@ -1,10 +1,20 @@
import {
AfterViewInit,
Component,

ContentChildren,
ElementRef,
EventEmitter,
Input,
Output
OnChanges,
OnDestroy,
Output,
QueryList,
Renderer2,
SimpleChanges,
TemplateRef,
ViewChild
} from '@angular/core';
import { AlertCarouselItemComponent } from './alert-carousel-item.component';
import { AlertType } from './alert.types';

@Component({
Expand All @@ -13,26 +23,89 @@ import { AlertType } from './alert.types';
styleUrls: ['./alert.component.scss'],
preserveWhitespaces: false,
})
export class AlertComponent {
export class AlertComponent implements OnChanges, OnDestroy, AfterViewInit {
@Input() type: AlertType = 'info';
@Input() cssClass: string;
@Input() closeable = true;
/**
* @deprecated
*/
@Input() content: HTMLElement | string;
@Input() showIcon = true;
@Output() closeEvent = new EventEmitter<AlertComponent>();
@Input() set dismissTime(time) {
@Input() autoplay = false;
@Input() autoplaySpeed = 3000;
@Input() transitionSpeed = 500;
@Input() operationTemplate: TemplateRef<any>;
@Input() set dismissTime(time: number) {
setTimeout(() => {
this.close();
}, time);
}

@Output() closeEvent = new EventEmitter<AlertComponent>();
@ViewChild('carouselContainer') box: ElementRef<any>;
@ContentChildren(AlertCarouselItemComponent) carouselItems: QueryList<AlertCarouselItemComponent>;
hide = false;
carouselNum: number;
currentIndex = 1;
scheduledId: any;

constructor(private renderer: Renderer2) {}

ngOnChanges(changes: SimpleChanges) {
const { autoplay, autoplaySpeed, transitionSpeed } = changes;
if ((autoplay || autoplaySpeed) && (!this.autoplay || !this.autoplaySpeed)) {
this.clearScheduledTransition();
} else {
this.autoScheduleTransition();
}
if (transitionSpeed && this.transitionSpeed) {
this.renderer.setStyle(this.box.nativeElement, 'transition', `top ${this.transitionSpeed}ms ease`);
}
}

ngAfterViewInit(): void {
this.renderCarouselItem();
this.carouselItems.changes.subscribe(() => this.renderCarouselItem());
}

ngOnDestroy() {
this.clearScheduledTransition();
}

close() {
renderCarouselItem() {
this.carouselNum = this.carouselItems.length;
if (this.carouselNum) {
this.renderer.setStyle(this.box.nativeElement, 'transition', `top ${this.transitionSpeed}ms ease`);
this.autoScheduleTransition();
}
}

next = (): void => {
if (this.currentIndex < this.carouselNum) {
this.currentIndex++;
} else {
this.currentIndex = 1;
}
this.translatePosition(this.currentIndex - 1);
this.autoScheduleTransition();
};

autoScheduleTransition() {
this.clearScheduledTransition();
if (this.autoplay && this.autoplaySpeed) {
this.scheduledId = setTimeout(() => this.next(), this.autoplaySpeed);
}
}

clearScheduledTransition() {
if (this.scheduledId) {
clearTimeout(this.scheduledId);
this.scheduledId = undefined;
}
}

translatePosition(size: number) {
this.renderer.setStyle(this.box.nativeElement, 'top', `${-size * 100}%`);
}

close = (): void => {
this.closeEvent.emit(this);
this.hide = true;
}
};
}
Loading