Commit c36e9dae authored by FangyuanCheng's avatar FangyuanCheng
Browse files

Move inline css style to scss


Signed-off-by: default avatarFangyuanCheng <fangyuanc@vmware.com>
parent 06eec7b3
......@@ -4,4 +4,18 @@
.info-tips-icon:hover {
color: #007CBB;
}
.replication-config {
margin-top: 0;
margin-bottom: 0;
}
.replication-text {
font-size: 14px;
font-weight: 600;
}
.replication-tooltip {
top: -8px;
}
\ No newline at end of file
<form #replicationConfigFrom="ngForm" class="compact">
<section class="form-block" style="margin-top:0px;margin-bottom:0px;">
<label style="font-size:14px;font-weight:600;" *ngIf="showSubTitle">{{'CONFIG.REPLICATION' | translate}}</label>
<section class="form-block replication-config">
<label class="replication-text" *ngIf="showSubTitle">{{'CONFIG.REPLICATION' | translate}}</label>
<div class="form-group">
<label for="verifyRemoteCert">{{'CONFIG.VERIFY_REMOTE_CERT' | translate }}</label>
<clr-checkbox name="verifyRemoteCert" id="verifyRemoteCert" [(ngModel)]="replicationConfig.verify_remote_cert.value" [disabled]="!editable">
<a href="javascript:void(0)" role="tooltip" aria-haspopup="true" class="tooltip tooltip-lg tooltip-top-right" style="top:-8px;">
<a href="javascript:void(0)" role="tooltip" aria-haspopup="true" class="tooltip tooltip-lg tooltip-top-right replication-tooltip">
<clr-icon shape="info-circle" class="info-tips-icon" size="24"></clr-icon>
<span class="tooltip-content">{{'CONFIG.TOOLTIP.VERIFY_REMOTE_CERT' | translate }}</span>
</a>
......
<form #systemConfigFrom="ngForm" class="compact">
<section class="form-block" style="margin-top:0px;margin-bottom:0px;">
<label style="font-size:14px;font-weight:600;" *ngIf="showSubTitle">{{'CONFIG.SYSTEM' | translate}}</label>
<section class="form-block">
<label class="subtitle" *ngIf="showSubTitle">{{'CONFIG.SYSTEM' | translate}}</label>
<div class="form-group">
<label for="proCreation">{{'CONFIG.PRO_CREATION_RESTRICTION' | translate}}</label>
<div class="select">
......@@ -9,7 +9,7 @@
<option value="adminonly">{{'CONFIG.PRO_CREATION_ADMIN' | translate }}</option>
</select>
</div>
<a href="javascript:void(0)" role="tooltip" aria-haspopup="true" class="tooltip tooltip-lg tooltip-top-right" style="top: -1px;">
<a href="javascript:void(0)" role="tooltip" aria-haspopup="true" class="tooltip tooltip-lg tooltip-top-right create-tooltip">
<clr-icon shape="info-circle" class="info-tips-icon" size="24"></clr-icon>
<span class="tooltip-content">{{'CONFIG.TOOLTIP.PRO_CREATION_RESTRICTION' | translate}}</span>
</a>
......@@ -40,7 +40,7 @@
<div *ngIf="!withAdmiral" class="form-group">
<label for="repoReadOnly">{{'CONFIG.REPO_READ_ONLY' | translate}}</label>
<clr-checkbox name="repoReadOnly" id="repoReadOnly" [clrChecked]="systemSettings.read_only.value" (clrCheckedChange)="setRepoReadOnlyValue($event)">
<a href="javascript:void(0)" role="tooltip" aria-haspopup="true" class="tooltip tooltip-top-right" style="top:-7px;">
<a href="javascript:void(0)" role="tooltip" aria-haspopup="true" class="tooltip tooltip-top-right read-tooltip">
<clr-icon shape="info-circle" class="info-tips-icon" size="24"></clr-icon>
<span class="tooltip-content">{{'CONFIG.TOOLTIP.REPO_TOOLTIP' | translate}}</span>
</a>
......
.subtitle {
font-size: 14px;
font-weight: 600;
}
.create-tooltip {
top: -1;
}
.read-tooltip {
top: -7px;
}
\ No newline at end of file
<form #systemConfigFrom="ngForm" class="compact">
<section class="form-block" style="margin-top:0px;margin-bottom:0px;">
<section class="form-block">
<label class="section-title" *ngIf="showSubTitle">{{ 'CONFIG.SCANNING.TITLE' | translate }}</label>
<div class="form-group">
<label>{{ 'CONFIG.SCANNING.DB_REFRESH_TIME' | translate }}</label>
......@@ -9,12 +9,12 @@
<span>{{'CONFIG.SCANNING.DB_NOT_READY' | translate }}</span>
</clr-tooltip-content>
</clr-tooltip>
<clr-dropdown *ngIf="isClairDBFullyReady && showScanningNamespaces" style="margin-top:-8px;" class="clr-dropdown-override">
<clr-dropdown *ngIf="isClairDBFullyReady && showScanningNamespaces" class="clr-dropdown-override">
<button class="btn btn-link btn-font" clrDropdownToggle>
{{ updatedTimestamp | date:'MM/dd/y HH:mm:ss' }} AM
<clr-icon shape="caret down"></clr-icon>
</button>
<clr-dropdown-menu [clrPosition]="'bottom-right'" style="min-width:300px;">
<clr-dropdown-menu [clrPosition]="'bottom-right'" class="dropdown-namespace">
<div *ngFor="let nt of namespaceTimestamps" class="namespace">
<span class="label label-info">{{nt.namespace}}</span>
<span>{{ convertToLocalTime(nt.last_update) | date:'MM/dd/y HH:mm:ss'}} AM</span>
......
......@@ -22,12 +22,14 @@
font-size: 12px !important;
}
.namespace {
margin-left: 24px;
}
.clr-dropdown-override {
margin-top: -8px;
.dropdown-namespace {
min-width: 300px;
.namespace {
margin-left: 24px;
}
}
}
.btn-scan-right button{
......
<clr-modal [(clrModalOpen)]="opened" [clrModalClosable]="false" [clrModalStaticBackdrop]="true">
<h3 class="modal-title" class="confirmation-title" style="margin-top: 0px;">{{dialogTitle}}</h3>
<h3 class="modal-title" class="confirmation-title">{{dialogTitle}}</h3>
<div class="modal-body">
<div class="confirmation-icon-inline">
<clr-icon shape="warning" class="is-warning" size="64"></clr-icon>
......
......@@ -6,6 +6,7 @@
line-height: 24px;
color: #000000;
font-size: 22px;
margin-top: 0;
}
.confirmation-content {
......
......@@ -48,7 +48,7 @@
</clr-tooltip-content>
</clr-tooltip>
</div>
<div class="form-group" style="height:30px;">
<div class="form-group" class="form-height">
<label for="spin" class="col-md-4"></label>
<span class="col-md-8 spinner spinner-inline" [hidden]="!inProgress"></span>
</div>
......
......@@ -6,4 +6,8 @@
clr-tooltip {
top: 3px;
position: relative;
}
.form-height {
height: 30px;
}
\ No newline at end of file
<clr-modal [(clrModalOpen)]="createEditRuleOpened" [clrModalStaticBackdrop]="true" [clrModalClosable]="false">
<h3 class="modal-title">{{headerTitle | translate}}</h3>
<hbr-inline-alert class="modal-title" (confirmEvt)="confirmCancel($event)"></hbr-inline-alert>
<div class="modal-body" style="max-height: 85vh;">
<div class="modal-body modal-body-height">
<clr-alert [hidden]='!deletedLabelCount' [clrAlertType]="'alert-warning'" [clrAlertSizeSmall]="true" [clrAlertClosable]="false"
[(clrAlertClosed)]="alertClosed">
<div class="alert-item">
......@@ -65,7 +65,7 @@
<div class="arrowSet" [hidden]="!(filterListData[i]?.name=='label')" (click)="openLabelList(selectedValue.value, i, $event)">
<clr-icon shape="angle"></clr-icon>
</div>
<clr-icon shape="warning-standard" class="is-solid is-warning" size="14" style="margin-left: -15px;" [hidden]="!deletedLabelCount || !(filterListData[i]?.name=='label')"></clr-icon>
<clr-icon shape="warning-standard" class="is-solid is-warning warning-icon" size="14" [hidden]="!deletedLabelCount || !(filterListData[i]?.name=='label')"></clr-icon>
<clr-icon shape="times-circle" class="is-solid" (click)="deleteFilter(i)"></clr-icon>
<div *ngIf="!withAdmiral">
<hbr-filter-label [projectId]="projectId" [selectedLabelInfo]="filterLabelInfo"
......@@ -75,7 +75,7 @@
</div>
</div>
<clr-icon shape="plus-circle" class="is-solid" [hidden]="isFilterHide" (click)="addNewFilter()" style="margin-top: 11px;"></clr-icon>
<clr-icon shape="plus-circle" class="is-solid plus-position" [hidden]="isFilterHide" (click)="addNewFilter()"></clr-icon>
</div>
<!--Targets-->
......@@ -114,7 +114,7 @@
</div>
<!--weekly-->
<span [hidden]="!weeklySchedule || !isScheduleOpt">on &nbsp;</span>
<div [hidden]="!weeklySchedule || !isScheduleOpt" class="select floatSet" style="width:104px">
<div [hidden]="!weeklySchedule || !isScheduleOpt" class="select floatSet weekday-width">
<select name="scheduleDay" formControlName="weekday">
<option value="1">{{'WEEKLY.MONDAY' | translate}}</option>
<option value="2">{{'WEEKLY.TUESDAY' | translate}}</option>
......@@ -130,18 +130,18 @@
<input [hidden]="!isScheduleOpt" type="time" formControlName="offtime" required value="08:00" />
</div>
</div>
<div style="width: 100%;" [hidden]="!isImmediate">
<div class="rule-width" [hidden]="!isImmediate">
<clr-checkbox [clrChecked]="false" id="ruleDeletion" formControlName="replicate_deletion">
{{'REPLICATION.DELETE_REMOTE_IMAGES' | translate}}
</clr-checkbox>
</div>
<div style="width: 100%;">
<div class="rule-width">
<clr-checkbox [clrChecked]="true" id="ruleExit" formControlName="replicate_existing_image_now">
{{'REPLICATION.REPLICATE_IMMEDIATE' | translate}}
</clr-checkbox>
</div>
</div>
<div style="display:block;text-align:center">
<div class="loading-center">
<span class="spinner spinner-inline" [hidden]="inProgress === false"></span>
</div>
</section>
......
......@@ -191,3 +191,27 @@ clr-modal {
color: blue;
}
.modal-body-height {
max-height: 85vh;
}
.filterSelect .warning-icon {
margin-left: -15px;
}
.plus-position {
margin-top: 11px;
}
.weekday-width {
width: 104px;
}
.rule-width {
width: 100%;
}
.loading-center {
display: block;
text-align: center;
}
\ No newline at end of file
......@@ -2,9 +2,9 @@
<a class="filterClose" (click)="closeFilter()">&times;</a>
<label class="filterLabelHeader">{{'REPOSITORY.FILTER_BY_LABEL' | translate}}</label>
<div><input class="filterInput" type="text" placeholder="Filter labels" [(ngModel)]= "filterLabelName" (keyup)="handleInputFilter()"></div>
<div [hidden]='labelLists.length' style="padding-left:10px;">{{'LABEL.NO_LABELS' | translate }}</div>
<div [hidden]='labelLists.length' class="no-labels">{{'LABEL.NO_LABELS' | translate }}</div>
<div [hidden]='!labelLists.length' style='max-height:300px;overflow-y: auto;'>
<div [hidden]='!labelLists.length' class="label-list">
<button type="button" class="labelBtn" *ngFor='let label of labelLists' [hidden]='!label.show' (click)="selectLabel(label)">
<clr-icon shape="check" class='pull-left' [hidden]='!label.iconsShow'></clr-icon>
<div class='labelDiv'><hbr-label-piece [label]="label.label" [labelWidth]="118"></hbr-label-piece></div>
......
......@@ -12,34 +12,39 @@
max-width: 15rem;
border-radius: .125rem;
z-index: 100;
.filterClose {
position: absolute;
right: 8px;
top: 5px;
cursor: pointer;
font-size: 20px;
}
.filterLabelHeader {
font-size: .5rem;
font-weight: 600;
letter-spacing: normal;
padding: 0 .5rem;
line-height: .75rem;
margin: 0;
color: #313131;
}
.no-labels {
padding-left: 10px;
}
.label-list {
max-height: 300px;
overflow-y: auto;
}
}
.filterLabelPanel .filterInput{margin-left: .5rem; margin-right: .5rem;}
.filterLabelHeader {
font-size: .5rem;
font-weight: 600;
letter-spacing: normal;
padding: 0 .5rem;
line-height: .75rem;
margin: 0;
color: #313131;
}
.filterLabelPanel .form-group input {
position: relative;
margin-left: .5rem;
margin-right: .5rem;
}
.filterClose {
position: absolute;
right: 8px;
top: 5px;
cursor: pointer;
font-size: 20px;
}
.pull-left {
display: inline-block;
float: left;
......
<div>
<div class="row" style="position:relative;">
<div class="row" class="endpoint-view">
<div>
<div class="row flex-items-xs-between rightPos">
<div class="flex-items-xs-middle option-right">
......
......@@ -21,4 +21,8 @@
right: 35px;
margin-top: 4px;
height: 24px;
}
.endpoint-view {
position: relative;
}
\ No newline at end of file
<span>
<clr-icon shape="search" size="20" class="search-btn" [class.filter-icon]="isShowSearchBox" (click)="onClick()"></clr-icon>
<input [hidden]="!isShowSearchBox" type="text" style="padding-left: 15px;" (keyup)="valueChange()" (focus)="inputFocus()"
<input [hidden]="!isShowSearchBox" type="text" class="filter-input" (keyup)="valueChange()" (focus)="inputFocus()"
placeholder="{{placeHolder}}" [(ngModel)]="currentValue" />
<span class="filter-divider" *ngIf="withDivider"></span>
</span>
\ No newline at end of file
......@@ -22,4 +22,8 @@
.search-btn:hover {
color: #007CBB;
}
.filter-input {
padding-left: 15px;
}
\ No newline at end of file
<div>
<div class="row" style="position:relative;">
<div class="row" class="label-config">
<div>
<div class="row flex-items-xs-between rightPos">
<div class="flex-items-xs-middle option-right">
......
.option-left {
padding-left: 16px;
margin-top: -6px;
.label-config {
position: relative;
div.content-mt {
margin-top: -12px;
}
.rightPos {
position: absolute;
z-index: 100;
right: 35px;
margin-top: 4px;
height: 24px;
.option-right {
padding-right: 16px;
.refresh-btn {
cursor: pointer;
:hover {
color: #007CBB;
}
}
}
}
}
.option-right {
padding-right: 16px;
}
.refresh-btn {
cursor: pointer;
}
.refresh-btn:hover {
color: #007CBB;
}
.rightPos {
position: absolute;
z-index: 100;
right: 35px;
margin-top: 4px;
height: 24px;
}
.content-mt {
margin-top: -12px;
}
\ No newline at end of file
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment