File
Methods
getTag
|
getTag()
|
|
Returns : "controller" | "instance" | "resource" | "workflow" | "cluster"
|
isSecondary
|
isSecondary()
|
|
|
import { Component, Input } from '@angular/core';
@Component({
selector: 'hi-detail-header',
templateUrl: './detail-header.component.html',
styleUrls: ['./detail-header.component.scss'],
})
export class DetailHeaderComponent {
@Input() cluster;
@Input() resource;
@Input() instance;
@Input() controller;
@Input() workflow;
constructor() {}
isSecondary() {
return this.controller || this.instance || this.resource || this.workflow;
}
getTag() {
if (this.controller) {
return 'controller';
}
if (this.instance) {
return 'instance';
}
if (this.resource) {
return 'resource';
}
if (this.workflow) {
return 'workflow';
}
return 'cluster';
}
}
<!--
~ Licensed to the Apache Software Foundation (ASF) under one
~ or more contributor license agreements. See the NOTICE file
~ distributed with this work for additional information
~ regarding copyright ownership. The ASF licenses this file
~ to you under the Apache License, Version 2.0 (the
~ "License"); you may not use this file except in compliance
~ with the License. You may obtain a copy of the License at
~
~ http://www.apache.org/licenses/LICENSE-2.0
~
~ Unless required by applicable law or agreed to in writing,
~ software distributed under the License is distributed on an
~ "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
~ KIND, either express or implied. See the License for the
~ specific language governing permissions and limitations
~ under the License.
-->
<h4 fxLayout="row" fxLayoutAlign="center center">
<span [ngClass]="{ secondary: isSecondary() }">{{ cluster }}</span>
<mat-icon *ngIf="isSecondary()" class="secondary">navigate_next</mat-icon>
<span *ngIf="controller">{{ controller }}</span>
<span *ngIf="instance">{{ instance }}</span>
<span *ngIf="resource">{{ resource }}</span>
<span *ngIf="workflow">{{ workflow }}</span>
<span class="tag" fxLayout="row" fxLayoutAlign="center center">
<span [ngClass]="getTag()">{{ getTag() }}</span>
<!-- for testing purpose only
<span class="cluster">Cluster</span>
<span class="resource">Resource</span>
<span class="instance">Instance</span>
<span class="controller">Controller</span>
<span class="workflow">Workflow</span> -->
</span>
</h4>
@use '@angular/material' as mat;
.secondary {
color: rgba(0, 0, 0, 0.54);
}
.tag {
padding-left: 10px;
span {
color: #fff;
font-size: 12px;
line-height: 12px;
text-transform: uppercase;
font-weight: normal;
border-radius: 24px;
padding: 6px 8px;
}
.cluster {
background-color: mat.get-color-from-palette(
mat.define-palette(mat.$indigo-palette)
);
}
.controller {
background-color: mat.get-color-from-palette(
mat.define-palette(mat.$purple-palette)
);
}
.resource {
background-color: mat.get-color-from-palette(
mat.define-palette(mat.$teal-palette)
);
}
.instance {
background-color: mat.get-color-from-palette(
mat.define-palette(mat.$blue-palette)
);
}
.workflow {
background-color: mat.get-color-from-palette(
mat.define-palette(mat.$deep-orange-palette)
);
}
}
Legend
Html element with directive