Skip to content

Commit b34784d

Browse files
wangyajuhuaweidevcloud
wangyaju
and
huaweidevcloud
authored
chore(release): release 15.1.0 (#306)
Co-authored-by: huaweidevcloud <devcloudmobile@huawei.com>
1 parent 4538d69 commit b34784d

File tree

532 files changed

+6886
-1779
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

532 files changed

+6886
-1779
lines changed

‎devui-commons/src/devui-commons.scss‎

Lines changed: 366 additions & 32 deletions
Large diffs are not rendered by default.

‎devui-commons/src/header/header.component.html‎

Lines changed: 41 additions & 45 deletions
Original file line numberDiff line numberDiff line change
@@ -1,46 +1,42 @@
1-
<div class="fixed-wapper"
2-
[ngClass]="{
3-
'header-fixed': isFixed
4-
}">
5-
<div class="header-wapper"
6-
[ngClass]="{
7-
'header-shadow': showShadow,
8-
'header-maxwidth': hasMaxWidth
9-
}">
10-
<div class="header-left">
11-
<div *ngIf="showSlideButton" class="slide-menu-link" (click)="clickSlideMenu()">
12-
<span>
13-
<svg width="18px" height="14px" viewBox="0 0 18 14" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
14-
<g id="slide-button-outer" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
15-
<g id="slide-button-inner">
16-
<path d="M18,6 L18,8 L0,8 L0,6 L18,6 Z M18,0 L18,2 L0,2 L0,0 L18,0 Z M14,12 L14,14 L0,14 L0,12 L14,12 Z"></path>
17-
</g>
18-
</g>
19-
</svg>
20-
</span>
21-
</div>
22-
<ng-content select="d-header-logo"></ng-content>
23-
<d-search *ngIf="showSearch" [isKeyupSearch]="true" [placeholder]="searchPlaceholder" (searchFn)="onSearch($event)"></d-search>
24-
</div>
25-
<div class="header-right" [ngClass]="{'active': collapseMenuActive}">
26-
<ng-content select="d-header-menu"></ng-content>
27-
<ng-content select="d-ecosystem"></ng-content>
28-
<ng-content select="d-header-version-switch"></ng-content>
29-
<ng-content select="d-header-theme-switch"></ng-content>
30-
<ng-content select="d-header-language-switch"></ng-content>
31-
<div *ngIf="showGitStar">
32-
<iframe class="header-gitStar"
33-
[attr.src]="repoLink"
34-
></iframe>
35-
</div>
36-
<div *ngIf="showAvatar" class="header-avatar">
37-
<d-avatar
38-
[width]="40"
39-
[height]="40"
40-
[imgSrc]="userAvatar"
41-
></d-avatar>
42-
</div>
43-
</div>
44-
<div id="headerCollapseMenu" class="header-collapse-menu" [ngClass]="{'active': collapseMenuActive}" (click)="toggleMenu($event)"><span></span></div>
1+
<div class="header-container">
2+
<div class="header-top-menu">
3+
<ng-content select="d-header-logo"></ng-content>
4+
<ng-content select="d-header-menu"></ng-content>
455
</div>
46-
</div>
6+
<div class="header-bottom-menu">
7+
<div class="menu-item">
8+
<ng-content select="d-header-theme-switch"></ng-content>
9+
</div>
10+
<div class="menu-item">
11+
<ng-content select="d-header-language-switch"></ng-content>
12+
</div>
13+
<div class="menu-item">
14+
<a href="https://github.com/DevCloudFE/ng-devui" rel="noopener noreferrer" target="blank">
15+
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
16+
<path
17+
fill="#71757f"
18+
d="M8 0c4.42 0 8 3.58 8 8a8.013 8.013 0 01-5.45 7.59c-.4.08-.55-.17-.55-.38 0-.27.01-1.13.01-2.2 0-.75-.25-1.23-.54-1.48 1.78-.2 3.65-.88 3.65-3.95 0-.88-.31-1.59-.82-2.15.08-.2.36-1.02-.08-2.12 0 0-.67-.22-2.2.82-.64-.18-1.32-.27-2-.27-.68 0-1.36.09-2 .27-1.53-1.03-2.2-.82-2.2-.82-.44 1.1-.16 1.92-.08 2.12-.51.56-.82 1.28-.82 2.15 0 3.06 1.86 3.75 3.64 3.95-.23.2-.44.55-.51 1.07-.46.21-1.61.55-2.33-.66-.15-.24-.6-.83-1.23-.82-.67.01-.27.38.01.53.34.19.73.9.82 1.13.16.45.68 1.31 2.69.94 0 .67.01 1.3.01 1.49 0 .21-.15.45-.55.38A7.995 7.995 0 010 8c0-4.42 3.58-8 8-8z"
19+
/>
20+
</svg>
21+
</a>
22+
</div>
23+
<div class="expand-sidebar" (click)="clickSlideMenu(true)" *ngIf="showExpandButton">
24+
<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">
25+
<title>收起</title>
26+
<g id="收起" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
27+
<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>
28+
</g>
29+
</svg>
30+
</div>
31+
<div class="expand-sidebar" (click)="clickSlideMenu(false)" *ngIf="showCollapseButton">
32+
<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">
33+
<title>展开</title>
34+
<g id="展开" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
35+
<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>
36+
</g>
37+
</svg>
38+
</div>
39+
</div>
40+
41+
42+
</div>

‎devui-commons/src/header/header.component.scss‎

Lines changed: 61 additions & 169 deletions
Original file line numberDiff line numberDiff line change
@@ -1,190 +1,82 @@
11
@import '~ng-devui/styles-var/devui-var.scss';
22

3-
@mixin menu() {
3+
.header-container {
44
position: fixed;
5-
display: block;
6-
font-size: $devui-font-size;
7-
z-index: 5;
8-
width: 4em;
9-
height: 4em;
10-
padding: 1em;
11-
transition: all 0.2s ease-out;
12-
13-
span {
14-
position: relative;
15-
display: block;
16-
17-
&::before,
18-
&::after {
19-
position: absolute;
20-
top: -0.55em;
21-
content: ' ';
22-
}
23-
24-
&::after {
25-
top: 0.55em;
26-
}
27-
28-
&,
29-
&::before,
30-
&::after {
31-
background-color: $devui-text;
32-
width: 100%;
33-
height: 0.2em;
34-
transition: all 0.4s;
35-
}
36-
}
37-
38-
&.active span {
39-
background: transparent;
40-
41-
&::before {
42-
transform: rotate(45deg) translate(0.5em, 0.4em);
43-
}
44-
45-
&::after {
46-
transform: rotate(-45deg) translate(0.4em, -0.3em);
47-
}
48-
}
49-
}
50-
51-
.fixed-wapper {
52-
width: 100%;
53-
z-index: 1;
54-
position: absolute;
55-
top: 0;
56-
}
57-
58-
.header-wapper {
59-
height: 60px;
60-
margin: 0 auto;
5+
width: 64px;
6+
background-image: linear-gradient(179deg, #E9FBFF 0%, #F3F5FF 100%);
7+
height: 100%;
8+
z-index: 1000;
619
display: flex;
10+
flex-direction: column;
11+
align-items: center;
6212
justify-content: space-between;
63-
background-color: $devui-base-bg;
64-
position: relative;
13+
}
6514

66-
.header-left {
15+
.header-bottom-menu {
16+
display: flex;
17+
align-items: center;
18+
flex-direction: column;
19+
margin-bottom: 16px;
20+
.menu-item {
21+
height: 36px;
22+
width: 36px;
23+
margin-bottom: 8px;
24+
border-radius: $devui-border-radius-card;
25+
transition: all $devui-animation-duration-base $devui-animation-ease-in-out-smooth;
6726
display: flex;
27+
flex-direction: column;
6828
align-items: center;
69-
70-
.slide-menu-link {
71-
border-right: 1px solid $devui-dividing-line;
72-
73-
span {
74-
line-height: 40px;
75-
display: block;
76-
width: 18px;
77-
height: 40px;
78-
margin: 0 10px;
79-
cursor: pointer;
80-
81-
#slide-button-inner {
82-
fill: $devui-text;
83-
}
29+
justify-content: center;
30+
cursor: pointer;
31+
&:hover {
32+
background: $devui-base-bg;
33+
box-shadow: $devui-shadow-length-base $devui-light-shadow;
34+
35+
svg path{
36+
fill: $devui-icon-fill-hover;
37+
stroke: none;
8438
}
8539
}
86-
}
87-
88-
.header-right {
89-
display: flex;
90-
align-items: center;
91-
92-
.header-gitStar {
93-
vertical-align: text-bottom;
94-
border: 0;
95-
height: 20px;
96-
width: 100px;
97-
margin: 0 12px;
98-
}
99-
}
100-
101-
.header-avatar {
102-
margin: 0 12px;
103-
}
104-
105-
.header-collapse-menu {
106-
right: 5px;
107-
@include menu();
108-
109-
display: none;
110-
111-
span {
112-
&,
113-
&::before,
114-
&::after {
115-
background: $devui-text;
116-
}
40+
a {
41+
display: flex;
42+
align-items: center;
11743
}
11844
}
11945
}
12046

121-
.header-fixed {
122-
position: fixed;
123-
z-index: 1000;
124-
}
125-
126-
.header-shadow {
127-
box-shadow: $devui-shadow-length-connected-overlay $devui-light-shadow;
47+
:host ::ng-deep .menu-item:hover .header-language-switch,
48+
:host ::ng-deep .header-top-menu .header-menu-container .header-menu-item .logo:hover,
49+
:host ::ng-deep .header-top-menu .header-menu-container .menu-selected-item .logo{
50+
svg path{
51+
fill: $devui-icon-fill-hover;
52+
stroke: none;
53+
}
12854
}
12955

130-
.header-maxwidth {
131-
max-width: 1256px;
56+
:host ::ng-deep .header-top-menu .header-menu-container .menu-selected-item .text,
57+
:host ::ng-deep .header-top-menu .header-menu-container .header-menu-item .logo:hover + .text{
58+
color: $devui-text !important;
13259
}
13360

134-
@media (max-width: 1360px) {
135-
.header-wapper {
136-
flex-direction: column;
137-
height: 60px;
138-
139-
.header-collapse-menu {
140-
top: 16px;
141-
display: block;
142-
}
143-
144-
.header-left {
145-
height: 60px;
146-
}
147-
148-
.header-right {
149-
display: none;
150-
position: absolute;
151-
top: 60px;
152-
}
153-
154-
.header-right.active {
155-
background-color: $devui-global-bg-normal;
156-
box-shadow: $devui-shadow-length-connected-overlay $devui-light-shadow;
157-
height: 520px;
158-
z-index: 3;
15961

160-
display: flex;
161-
flex-direction: column;
162-
width: 100%;
163-
::ng-deep .header-ecosystem {
164-
margin-bottom: 12px;
165-
}
166-
::ng-deep .header-version-switch {
167-
margin-bottom: 12px;
168-
}
169-
::ng-deep .header-theme-switch {
170-
margin-bottom: 12px;
171-
}
172-
::ng-deep .header-language-switch {
173-
margin-bottom: 12px;
174-
}
175-
.header-gitStar {
176-
margin-bottom: 12px;
177-
}
62+
.expand-sidebar {
63+
width: 32px;
64+
height: 32px;
65+
margin-top: 8px;
66+
display: flex;
67+
justify-content: center;
68+
align-items: center;
69+
border-radius: $devui-border-radius-card;
70+
transition: all $devui-animation-duration-base $devui-animation-ease-in-out-smooth;
71+
cursor: pointer;
72+
73+
&:hover {
74+
background: $devui-base-bg;
75+
box-shadow: $devui-shadow-length-base $devui-light-shadow;
76+
77+
svg path{
78+
fill: $devui-icon-fill-hover;
79+
stroke: none;
17880
}
17981
}
180-
}
181-
182-
@media (max-width: 380px) {
183-
d-search {
184-
width: 180px;
185-
}
186-
}
187-
188-
:host d-search ::ng-deep input {
189-
border-width: 0;
190-
}
82+
}

0 commit comments

Comments
 (0)