Skip to content

Commit 3ef5654

Browse files
rkrejcirkrejci
authored
Merge pull request #16 from jakubman1/devel
frontend yang CHANGE design and layout
2 parents f12477a + 02d4cb9 commit 3ef5654

File tree

11 files changed

+224
-107
lines changed

11 files changed

+224
-107
lines changed

‎frontend/yang/schemas.service.ts‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -213,4 +213,16 @@ export class SchemasService {
213213
//console.log(result)
214214
return result;
215215
}
216+
217+
static newlineToBr(message: string) {
218+
let entityMap = {
219+
"&": "&",
220+
"<": "&lt;",
221+
">": "&gt;",
222+
'"': '&quot;',
223+
"'": '&#39;',
224+
"/": '&#x2F;'
225+
};
226+
return message.replace(/[&<>"'\/]/g, s => entityMap[s]).replace(/\n/g, "<br>");
227+
}
216228
}

‎frontend/yang/yang.component.html‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,8 @@
11
<nav #subnav id="subnav">
2+
<!-- Mouseup event is used instead of click event to enable middle-click detection.
3+
Click event only fires when user clicks left mouse button -->
24
<a *ngFor="let schema of schemasService.schemas" [class.active]="schema.key == schemasService.activeSchema"
3-
(click)="changeView(schema.key)">{{schema.key}}
5+
(mouseup)="$event.which == 2 ? schemasService.close(schema.key) : changeView(schema.key)">{{schema.key}}
46
<img class="tab-icon tab-close tab-action-last" src="assets/netopeer/icons/close.svg" alt="x" title="close"
57
onmouseover="this.src='assets/netopeer/icons/close_active.svg'"
68
onmouseout="this.src='assets/netopeer/icons/close.svg'" (click)="schemasService.close(schema.key);refreshActiveSchema()"/>

‎frontend/yang/yang.component.scss‎

Lines changed: 19 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -28,7 +28,9 @@ $colorLineSelected: #999999;
2828
.yang-info-section-label,
2929
.yang-info-subsection-label,
3030
.yang-info-label {
31-
color: $colorMain;
31+
color: black;
32+
font-weight: 100;
33+
text-transform: uppercase;
3234
}
3335

3436
.yang-info-section {
@@ -40,25 +42,32 @@ $colorLineSelected: #999999;
4042
}
4143

4244
.yang-info-subsection {
43-
padding-left: 2em;
45+
.yang-info {
46+
padding-left: 2em;
47+
}
4448
}
4549

4650
.yang-info,
4751
.yang-info-label,
4852
.yang-info-value {
49-
border: 0px solid black;
53+
border: none;
5054
a {
5155
font-weight: normal;
5256
}
5357
}
5458

5559
.yang-info {
5660
display: flex;
61+
padding: 5px;
5762
}
5863
.yang-info:hover {
5964
background-color: $colorLineHover;
6065
}
6166

67+
.yang-info:nth-of-type(even), .yang-info-subsection:nth-of-type(even) {
68+
background: lighten($colorLineHover, 5%);
69+
}
70+
6271
.yang-info-value {
6372
display: inline-block;
6473
}
@@ -71,6 +80,13 @@ $colorLineSelected: #999999;
7180
text-overflow: ellipsis;
7281
display: inline-block;
7382
}
83+
.yang-revision-label {
84+
font-style: italic;
85+
}
86+
87+
.yang-subsection-container {
88+
margin-left: 2em;
89+
}
7490

7591
.pattern {
7692
.selectedGroup {

‎frontend/yang/yang.component.ts‎

Lines changed: 11 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -68,6 +68,7 @@ export class YANGModule implements OnInit, OnChanges {
6868
ngOnInit(): void {
6969
this.data = this.schema.data[Object.keys(this.schema.data)[0]];
7070
}
71+
newlineToBr = SchemasService.newlineToBr;
7172
}
7273

7374
@Component( {
@@ -109,6 +110,8 @@ export class YANGIdentity implements OnInit, OnChanges {
109110
this.name = Object.keys(this.schema.data)[0]
110111
this.data = this.schema.data[this.name];
111112
}
113+
114+
newlineToBr = SchemasService.newlineToBr;
112115
}
113116

114117
@Component( {
@@ -137,6 +140,7 @@ export class YANGFeature implements OnInit, OnChanges {
137140
this.name = Object.keys(this.schema.data)[0]
138141
this.data = this.schema.data[this.name];
139142
}
143+
newlineToBr = SchemasService.newlineToBr;
140144
}
141145

142146
@Component( {
@@ -163,6 +167,8 @@ export class YANGTypedef implements OnInit, OnChanges {
163167
ngOnInit(): void {
164168
this.name = Object.keys(this.schema.data)[0]
165169
}
170+
171+
newlineToBr = SchemasService.newlineToBr;
166172
}
167173

168174
@Component( {
@@ -178,6 +184,8 @@ export class YANGType {
178184

179185
constructor(public schemasService: SchemasService) {}
180186

187+
newlineToBr = SchemasService.newlineToBr;
188+
181189
derivedFrom(id: string) {
182190
let i = id.indexOf(':');
183191
let key = id.slice(0, i) + '.yang';
@@ -218,26 +226,7 @@ export class YANGType {
218226

219227
@Component( {
220228
selector: 'yang-restriction',
221-
template: `
222-
<div class="yang-info" *ngIf="name=='pattern'"><span class="yang-info-subsection-label">{{name}}</span><span class="yang-info-value pattern" [innerHTML]="data.value | patternHighlight"></span></div>
223-
<div class="yang-info" *ngIf="name!='pattern'"><span class="yang-info-subsection-label">{{name}}</span><span class="yang-info-value">{{data.value}}</span></div>
224-
<div class="yang-info-subsection">
225-
<div class="yang-info" *ngIf="data.modifier">
226-
<span class="yang-info-label">modifier</span><span class="yang-info-value">{{data.modifier.value}}</span>
227-
</div>
228-
<div class="yang-info" *ngIf="data['error-message']">
229-
<span class="yang-info-label">error-message</span><span class="yang-info-value">{{data['error-message'].value}}</span>
230-
</div>
231-
<div class="yang-info" *ngIf="data['error-app-tag']">
232-
<span class="yang-info-label">error-app-tag</span><span class="yang-info-value">{{data['error-app-tag'].value}}</span>
233-
</div>
234-
<div class="yang-info" *ngIf="data.description">
235-
<span class="yang-info-label">description</span><pre class="yang-info-value">{{data.description.text}}</pre>
236-
</div>
237-
<div class="yang-info" *ngIf="data.reference">
238-
<span class="yang-info-label">reference</span><pre class="yang-info-value">{{data.reference.text}}</pre>
239-
</div>
240-
</div>`,
229+
templateUrl: './yang.restriction.html',
241230
styleUrls: ['./yang.component.scss'],
242231
encapsulation: ViewEncapsulation.None,
243232
} )
@@ -304,6 +293,8 @@ export class YANGNode implements OnInit, OnChanges {
304293
ngOnInit(): void {
305294
this.name = Object.keys(this.schema.data)[0]
306295
}
296+
297+
newlineToBr = SchemasService.newlineToBr;
307298
}
308299

309300
@Component( {

‎frontend/yang/yang.feature.html‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
<div class="yang-infobox">
2-
<div class="yang-info-label">Feature {{name}}</div>
2+
<div class="yang-info-label"><h2>Feature <b>{{name}}</b></h2></div>
33
<div class="yang-info-section" *ngIf="data['if-features']">
44
<div class="yang-info" *ngFor="let value of data['if-features']">
55
<yang-iffeature (refresh)="onRefresh()" [schema]="schema" [data]="value"></yang-iffeature>
@@ -11,10 +11,10 @@
1111
<span class="yang-info-label">status</span><span class="yang-info-value">{{data.status.value}}</span>
1212
</div>
1313
<div class="yang-info" *ngIf="data.description">
14-
<span class="yang-info-label">description</span><pre class="yang-info-value">{{data.description.text}}</pre>
14+
<span class="yang-info-label">description</span><span class="yang-info-value" [innerHTML]="newlineToBr(data.description.text)"></span>
1515
</div>
1616
<div class="yang-info" *ngIf="data.reference">
17-
<span class="yang-info-label">reference</span><pre class="yang-info-value">{{data.reference.text}}</pre>
17+
<span class="yang-info-label">reference</span><span class="yang-info-value" [innerHTML]="newlineToBr(data.reference.text)"></span>
1818
</div>
1919
</div>
2020

‎frontend/yang/yang.identity.html‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11

22
<div class="yang-infobox">
3-
<div class="yang-info-label">Identity {{name}}</div>
3+
<div class="yang-info-label"><h2>Identity <b>{{name}}</b></h2></div>
44
<div class="yang-info-section" *ngIf="data['if-features']">
55
<div class="yang-info" *ngFor="let value of data['if-features']">
66
<yang-iffeature (refresh)="onRefresh()" [schema]="schema" [data]="value"></yang-iffeature>
@@ -18,10 +18,10 @@
1818
<span class="yang-info-label">status</span><span class="yang-info-value">{{data.status.value}}</span>
1919
</div>
2020
<div class="yang-info" *ngIf="data.description">
21-
<span class="yang-info-label">description</span><pre class="yang-info-value">{{data.description.text}}</pre>
21+
<span class="yang-info-label">description</span><span class="yang-info-value" [innerHTML]="newlineToBr(data.description.text)"></span>
2222
</div>
2323
<div class="yang-info" *ngIf="data.reference">
24-
<span class="yang-info-label">reference</span><pre class="yang-info-value">{{data.reference.text}}</pre>
24+
<span class="yang-info-label">reference</span><span class="yang-info-value" [innerHTML]="newlineToBr(data.reference.text)"></span>
2525
</div>
2626
</div>
2727

0 commit comments

Comments
 (0)