Skip to content

Commit 33f99d4

Browse files
author
Fulin
committed
dashboard update
1 parent 93d9b60 commit 33f99d4

6 files changed

Lines changed: 220 additions & 79 deletions

File tree

‎angular.json‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -33,11 +33,13 @@
3333
"input": "src/styles.css"
3434
},
3535
"node_modules/@clr/icons/clr-icons.min.css",
36-
"node_modules/@clr/ui/clr-ui.min.css"
36+
"node_modules/@clr/ui/clr-ui.min.css",
37+
"src/dell-clarity/dell-clarity-ui.min.css"
3738
],
3839
"scripts": [
3940
"node_modules/@webcomponents/custom-elements/custom-elements.min.js",
40-
"node_modules/@clr/icons/clr-icons.min.js"
41+
"node_modules/@clr/icons/clr-icons.min.js",
42+
"src/dell-clarity/dell-clarity-icons.min.js"
4143
]
4244
},
4345
"configurations": {

‎src/app/layout/dashboard/dashboard.component.1.html‎

Lines changed: 79 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,79 @@
1+
<button class="btn btn-primary" (click)="opened = true;">Primary</button>
2+
3+
<!-- <clr-modal [(clrModalOpen)]="opened" [clrModalSize]="'xl'" [clrModalClosable]="false">
4+
<div class="modal-body">
5+
<emc-page-wrapper title="wrapper" [allowFullScreen]="true">
6+
<clr-wizard #wizard [(clrWizardOpen)]="opened" [clrWizardSize]="'xl'" [clrWizardForceForwardNavigation]="true" class="clr-wizard--inline clr-wizard--no-shadow clr-wizard--no-title"
7+
[clrWizardPreventModalAnimation]="true">
8+
<clr-wizard-title>Jump-To Wizard</clr-wizard-title>
9+
10+
<clr-wizard-button [type]="'cancel'">Cancel</clr-wizard-button>
11+
<clr-wizard-button [type]="'previous'">Back</clr-wizard-button>
12+
<clr-wizard-button [type]="'next'">Next</clr-wizard-button>
13+
<clr-wizard-button [type]="'finish'">Done</clr-wizard-button>
14+
15+
<clr-wizard-page>
16+
<ng-template clrPageTitle></ng-template>
17+
...1
18+
</clr-wizard-page>
19+
20+
<clr-wizard-page>
21+
<ng-template clrPageTitle>Page 2</ng-template>
22+
...2
23+
</clr-wizard-page>
24+
25+
<clr-wizard-page #pageThree>
26+
<ng-template clrPageTitle>Page 3</ng-template>
27+
...3
28+
</clr-wizard-page>
29+
30+
<clr-wizard-page>
31+
<ng-template clrPageTitle>Page 4</ng-template>
32+
...4
33+
</clr-wizard-page>
34+
35+
<clr-wizard-page #pageFive>
36+
<ng-template clrPageTitle>Page 5</ng-template>
37+
...5
38+
</clr-wizard-page>
39+
</clr-wizard>
40+
</emc-page-wrapper>
41+
</div>
42+
</clr-modal> -->
43+
44+
<full-screen-modal [(opened)]="opened">
45+
<clr-wizard #wizard [(clrWizardOpen)]="opened" style="height: 100%;" [clrWizardSize]="'xl'" [clrWizardForceForwardNavigation]="true" class="clr-wizard--inline clr-wizard--no-shadow clr-wizard--no-title"
46+
[clrWizardPreventModalAnimation]="true">
47+
<clr-wizard-title>Jump-To Wizard</clr-wizard-title>
48+
49+
<clr-wizard-button [type]="'cancel'">Cancel</clr-wizard-button>
50+
<clr-wizard-button [type]="'previous'">Back</clr-wizard-button>
51+
<clr-wizard-button [type]="'next'">Next</clr-wizard-button>
52+
<clr-wizard-button [type]="'finish'">Done</clr-wizard-button>
53+
54+
<clr-wizard-page>
55+
<ng-template clrPageTitle></ng-template>
56+
...1
57+
</clr-wizard-page>
58+
59+
<clr-wizard-page>
60+
<ng-template clrPageTitle>Page 2</ng-template>
61+
...2
62+
</clr-wizard-page>
63+
64+
<clr-wizard-page #pageThree>
65+
<ng-template clrPageTitle>Page 3</ng-template>
66+
...3
67+
</clr-wizard-page>
68+
69+
<clr-wizard-page>
70+
<ng-template clrPageTitle>Page 4</ng-template>
71+
...4
72+
</clr-wizard-page>
73+
74+
<clr-wizard-page #pageFive>
75+
<ng-template clrPageTitle>Page 5</ng-template>
76+
...5
77+
</clr-wizard-page>
78+
</clr-wizard>
79+
</full-screen-modal>

‎src/app/layout/dashboard/dashboard.component.html‎

Lines changed: 122 additions & 77 deletions
Original file line numberDiff line numberDiff line change
@@ -1,79 +1,124 @@
1-
<button class="btn btn-primary" (click)="opened = true;">Primary</button>
2-
3-
<!-- <clr-modal [(clrModalOpen)]="opened" [clrModalSize]="'xl'" [clrModalClosable]="false">
4-
<div class="modal-body">
5-
<emc-page-wrapper title="wrapper" [allowFullScreen]="true">
6-
<clr-wizard #wizard [(clrWizardOpen)]="opened" [clrWizardSize]="'xl'" [clrWizardForceForwardNavigation]="true" class="clr-wizard--inline clr-wizard--no-shadow clr-wizard--no-title"
7-
[clrWizardPreventModalAnimation]="true">
8-
<clr-wizard-title>Jump-To Wizard</clr-wizard-title>
9-
10-
<clr-wizard-button [type]="'cancel'">Cancel</clr-wizard-button>
11-
<clr-wizard-button [type]="'previous'">Back</clr-wizard-button>
12-
<clr-wizard-button [type]="'next'">Next</clr-wizard-button>
13-
<clr-wizard-button [type]="'finish'">Done</clr-wizard-button>
14-
15-
<clr-wizard-page>
16-
<ng-template clrPageTitle></ng-template>
17-
...1
18-
</clr-wizard-page>
19-
20-
<clr-wizard-page>
21-
<ng-template clrPageTitle>Page 2</ng-template>
22-
...2
23-
</clr-wizard-page>
24-
25-
<clr-wizard-page #pageThree>
26-
<ng-template clrPageTitle>Page 3</ng-template>
27-
...3
28-
</clr-wizard-page>
29-
30-
<clr-wizard-page>
31-
<ng-template clrPageTitle>Page 4</ng-template>
32-
...4
33-
</clr-wizard-page>
34-
35-
<clr-wizard-page #pageFive>
36-
<ng-template clrPageTitle>Page 5</ng-template>
37-
...5
38-
</clr-wizard-page>
39-
</clr-wizard>
40-
</emc-page-wrapper>
1+
<section>
2+
<div class="row">
3+
<div class="col-sm-12 col-md-8">
4+
<div class="card">
5+
<div class="card-header">
6+
Assets | Overview
7+
</div>
8+
<div class="card-block">
9+
<div class="row">
10+
<div class="col-sm-12 col-md-4">
11+
Assets
12+
</div>
13+
<div class="col-sm-12 col-md-4" style="border-left: 1px solid #cccccc;border-right: 1px solid #cccccc">
14+
Unprotected
15+
</div>
16+
<div class="col-sm-12 col-md-4">
17+
Errors
18+
</div>
19+
</div>
20+
</div>
21+
</div>
22+
</div>
23+
<div class="col-sm-12 col-md-4">
24+
<div class="card">
25+
<div class="card-header">
26+
Alerts | All
27+
</div>
28+
<div class="card-block">
29+
<div class="card-text">
30+
<table class="table">
31+
<thead>
32+
<tr>
33+
<th class="left">Name</th>
34+
<th class="left">Weakness</th>
35+
</tr>
36+
</thead>
37+
<tbody>
38+
<tr>
39+
<td class="left">Frankenstein</td>
40+
<td class="left">Fire</td>
41+
</tr>
42+
<tr>
43+
<td class="left">Dracula</td>
44+
<td class="left">Garlic</td>
45+
</tr>
46+
<tr>
47+
<td class="left">Wolfman</td>
48+
<td class="left">Squirrels</td>
49+
</tr>
50+
</tbody>
51+
</table>
52+
</div>
53+
</div>
54+
</div>
55+
</div>
4156
</div>
42-
</clr-modal> -->
4357

44-
<full-screen-modal [(opened)]="opened">
45-
<clr-wizard #wizard [(clrWizardOpen)]="opened" style="height: 100%;" [clrWizardSize]="'xl'" [clrWizardForceForwardNavigation]="true" class="clr-wizard--inline clr-wizard--no-shadow clr-wizard--no-title"
46-
[clrWizardPreventModalAnimation]="true">
47-
<clr-wizard-title>Jump-To Wizard</clr-wizard-title>
48-
49-
<clr-wizard-button [type]="'cancel'">Cancel</clr-wizard-button>
50-
<clr-wizard-button [type]="'previous'">Back</clr-wizard-button>
51-
<clr-wizard-button [type]="'next'">Next</clr-wizard-button>
52-
<clr-wizard-button [type]="'finish'">Done</clr-wizard-button>
53-
54-
<clr-wizard-page>
55-
<ng-template clrPageTitle></ng-template>
56-
...1
57-
</clr-wizard-page>
58-
59-
<clr-wizard-page>
60-
<ng-template clrPageTitle>Page 2</ng-template>
61-
...2
62-
</clr-wizard-page>
63-
64-
<clr-wizard-page #pageThree>
65-
<ng-template clrPageTitle>Page 3</ng-template>
66-
...3
67-
</clr-wizard-page>
68-
69-
<clr-wizard-page>
70-
<ng-template clrPageTitle>Page 4</ng-template>
71-
...4
72-
</clr-wizard-page>
73-
74-
<clr-wizard-page #pageFive>
75-
<ng-template clrPageTitle>Page 5</ng-template>
76-
...5
77-
</clr-wizard-page>
78-
</clr-wizard>
79-
</full-screen-modal>
58+
<div class="row">
59+
<div class="col-sm-12 col-md-8">
60+
<div class="card">
61+
<div class="card-header">
62+
Capacity | Overview
63+
</div>
64+
<div class="card-block">
65+
<div class="row">
66+
<div class="col-sm-12 col-md-4">
67+
Used
68+
</div>
69+
<div class="col-sm-12 col-md-8" style="border-left: 1px solid #cccccc;">
70+
<table class="table">
71+
<thead>
72+
<tr>
73+
<th>Decimal</th>
74+
<th>Hexadecimal</th>
75+
<th>Binary</th>
76+
<th>Roman Numeral</th>
77+
</tr>
78+
</thead>
79+
<tbody>
80+
<tr>
81+
<td>1</td>
82+
<td>1</td>
83+
<td>1</td>
84+
<td>I</td>
85+
</tr>
86+
<tr>
87+
<td>5</td>
88+
<td>5</td>
89+
<td>101</td>
90+
<td>V</td>
91+
</tr>
92+
<tr>
93+
<td>10</td>
94+
<td>A</td>
95+
<td>1010</td>
96+
<td>X</td>
97+
</tr>
98+
<tr>
99+
<td>15</td>
100+
<td>F</td>
101+
<td>1111</td>
102+
<td>XV</td>
103+
</tr>
104+
</tbody>
105+
</table>
106+
</div>
107+
</div>
108+
</div>
109+
</div>
110+
</div>
111+
<div class="col-sm-12 col-md-4">
112+
<div class="card">
113+
<div class="card-header">
114+
Jobs | Backup
115+
</div>
116+
<div class="card-block">
117+
<div class="card-text">
118+
...
119+
</div>
120+
</div>
121+
</div>
122+
</div>
123+
</div>
124+
</section>

‎src/app/layout/dashboard/dashboard.component.scss‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
section {
2+
padding: 12px 24px;
3+
}

‎src/dell-clarity/dell-clarity-icons.min.js‎

Lines changed: 2 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎src/dell-clarity/dell-clarity-ui.min.css‎

Lines changed: 10 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

0 commit comments

Comments
 (0)