Upstream/harbor
1
0
Fork 0
mirror of https://github.com/goharbor/harbor.git synced 2025-01-20 14:41:28 +01:00
Code Issues Projects Releases Wiki Activity

Fix the cron tooltip in replication is not fully displayed in Firefox.

Browse Source 
Signed-off-by: FangyuanCheng <fangyuanc@vmware.com>
This commit is contained in:
FangyuanCheng 2019-05-07 16:08:44 +08:00
parent 09c5f9cfc8
commit 92315395ea
13 changed files with 108 additions and 142 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
src/portal/lib/src/config/gc/gc.component.spec.ts
View File

@ -7,6 +7,7 @@ import { SharedModule } from "../../shared/shared.module";
import { ErrorHandler } from '../../error-handler/error-handler'; import { ErrorHandler } from '../../error-handler/error-handler';
import { GcViewModelFactory } from './gc.viewmodel.factory'; import { GcViewModelFactory } from './gc.viewmodel.factory';
import { CronScheduleComponent } from '../../cron-schedule/cron-schedule.component'; import { CronScheduleComponent } from '../../cron-schedule/cron-schedule.component';
import { CronTooltipComponent } from "../../cron-schedule/cron-tooltip/cron-tooltip.component";
import { of } from 'rxjs'; import { of } from 'rxjs';
describe('GcComponent', () => { describe('GcComponent', () => {
@ -33,7 +34,7 @@ describe('GcComponent', () => {
imports: [ imports: [
SharedModule SharedModule
], ],
declarations: [ GcComponent, CronScheduleComponent], declarations: [ GcComponent, CronScheduleComponent, CronTooltipComponent],
providers: [ providers: [
{ provide: GcApiRepository, useClass: GcApiDefaultRepository }, { provide: GcApiRepository, useClass: GcApiDefaultRepository },
{ provide: SERVICE_CONFIG, useValue: config }, { provide: SERVICE_CONFIG, useValue: config },

5
src/portal/lib/src/config/registry-config.component.spec.ts
View File

@ -11,7 +11,7 @@ import { ConfirmationDialogComponent } from '../confirmation-dialog/confirmation
import { GcComponent } from './gc/gc.component'; import { GcComponent } from './gc/gc.component';
import { GcHistoryComponent } from './gc/gc-history/gc-history.component'; import { GcHistoryComponent } from './gc/gc-history/gc-history.component';
import { CronScheduleComponent } from '../cron-schedule/cron-schedule.component'; import { CronScheduleComponent } from '../cron-schedule/cron-schedule.component';
import { CronTooltipComponent } from "../cron-schedule/cron-tooltip/cron-tooltip.component";
import { import {
ConfigurationService, ConfigurationService,
ConfigurationDefaultService, ConfigurationDefaultService,
@ -69,7 +69,8 @@ describe('RegistryConfigComponent (inline template)', () => {
ConfirmationDialogComponent, ConfirmationDialogComponent,
GcComponent, GcComponent,
GcHistoryComponent, GcHistoryComponent,
CronScheduleComponent CronScheduleComponent,
CronTooltipComponent
], ],
providers: [ providers: [
ErrorHandler, ErrorHandler,

56
src/portal/lib/src/create-edit-rule/create-edit-rule.component.html
View File

@ -147,59 +147,9 @@
</label> </label>
<a href="javascript:void(0)" role="tooltip" aria-haspopup="true" class="tooltip tooltip-lg tooltip-top-left top-7 cron-tooltip"> <a href="javascript:void(0)" role="tooltip" aria-haspopup="true" class="tooltip tooltip-lg tooltip-top-left top-7 cron-tooltip">
<clr-icon shape="info-circle" class="info-tips-icon" size="24"></clr-icon> <clr-icon shape="info-circle" class="info-tips-icon" size="24"></clr-icon>
<table class="table table-noborder tooltip-content table-style"> <div class="tooltip-content table-box">
<caption class="table-title"> <cron-tooltip></cron-tooltip>
<span> </div>
{{ 'REPLICATION.CRON-TITLE' | translate }}
</span>
</caption>
<thead>
<tr>
<th>{{ 'REPLICATION.FIELD_NAME' | translate }}</th>
<th>{{ 'REPLICATION.MANDATORY' | translate }}</th>
<th>{{ 'REPLICATION.ALLOWED_VALUES' | translate }}</th>
<th>{{ 'REPLICATION.ALLOWED_CHARACTERS' | translate }}</th>
</tr>
</thead>
<tbody>
<tr>
<td>{{'REPLICATION.SECONDS' | translate}}</td>
<td>{{'REPLICATION.YES' | translate}}</td>
<td>0-59</td>
<td>* / , -</td>
</tr>
<tr>
<td>{{'REPLICATION.MINUTES' | translate}}</td>
<td>{{'REPLICATION.YES' | translate}}</td>
<td>0-59</td>
<td>* / , -</td>
</tr>
<tr>
<td>{{'REPLICATION.HOURS' | translate}}</td>
<td>{{'REPLICATION.YES' | translate}}</td>
<td>0-23</td>
<td>* / , -</td>
</tr>
<tr>
<td>{{'REPLICATION.DAY_MONTH' | translate}}</td>
<td>{{'REPLICATION.YES' | translate}}</td>
<td>1-31</td>
<td>* / , - ?</td>
</tr>
<tr>
<td>{{'REPLICATION.MONTH' | translate}}</td>
<td>{{'REPLICATION.YES' | translate}}</td>
<td>1-12 or JAN-DEC</td>
<td>* / , -</td>
</tr>
<tr>
<td>{{'REPLICATION.DAY_WEEK' | translate}}</td>
<td>{{'REPLICATION.YES' | translate}}</td>
<td>0-6 or SUN-SAT</td>
<td>* / , - ?</td>
</tr>
</tbody>
</table>
</a> </a>
</div> </div>
</div> </div>

14
src/portal/lib/src/create-edit-rule/create-edit-rule.component.scss
View File

@ -261,19 +261,7 @@ clr-modal {
.cron-tooltip { .cron-tooltip {
color: gray; color: gray;
cursor: default; cursor: default;
.table-style { .table-box {
margin-right: 462px;
width: 20rem; width: 20rem;
border-top-left-radius: 0;
border-top-right-radius: 0;
.table-title {
border-top-left-radius: 0.125rem;
border-top-right-radius: 0.125rem;
background: #000;
color: #fff;
span {
font-size: 16px;
}
}
} }
} }

3
src/portal/lib/src/create-edit-rule/create-edit-rule.component.spec.ts
View File

@ -8,7 +8,7 @@ import { ConfirmationDialogComponent } from "../confirmation-dialog/confirmation
import { ReplicationComponent } from "../replication/replication.component"; import { ReplicationComponent } from "../replication/replication.component";
import { ListReplicationRuleComponent } from "../list-replication-rule/list-replication-rule.component"; import { ListReplicationRuleComponent } from "../list-replication-rule/list-replication-rule.component";
import { CronTooltipComponent } from "../cron-schedule/cron-tooltip/cron-tooltip.component";
import { CreateEditRuleComponent } from "./create-edit-rule.component"; import { CreateEditRuleComponent } from "./create-edit-rule.component";
import { DatePickerComponent } from "../datetime-picker/datetime-picker.component"; import { DatePickerComponent } from "../datetime-picker/datetime-picker.component";
import { FilterComponent } from "../filter/filter.component"; import { FilterComponent } from "../filter/filter.component";
@ -232,6 +232,7 @@ describe("CreateEditRuleComponent (inline template)", () => {
ReplicationComponent, ReplicationComponent,
ListReplicationRuleComponent, ListReplicationRuleComponent,
CreateEditRuleComponent, CreateEditRuleComponent,
CronTooltipComponent,
ConfirmationDialogComponent, ConfirmationDialogComponent,
DatePickerComponent, DatePickerComponent,
FilterComponent, FilterComponent,

56
src/portal/lib/src/cron-schedule/cron-schedule.component.html
View File

@ -43,59 +43,9 @@
</label> </label>
<a href="javascript:void(0)" role="tooltip" aria-haspopup="true" class="tooltip tooltip-lg tooltip-right top-7 cron-tooltip"> <a href="javascript:void(0)" role="tooltip" aria-haspopup="true" class="tooltip tooltip-lg tooltip-right top-7 cron-tooltip">
<clr-icon shape="info-circle" class="info-tips-icon" size="24"></clr-icon> <clr-icon shape="info-circle" class="info-tips-icon" size="24"></clr-icon>
<table class="table table-noborder tooltip-content table-style"> <div class="tooltip-content table-box">
<caption class="table-title"> <cron-tooltip></cron-tooltip>
<span> </div>
{{ 'REPLICATION.CRON-TITLE' | translate }}
</span>
</caption>
<thead>
<tr>
<th>{{ 'REPLICATION.FIELD_NAME' | translate }}</th>
<th>{{ 'REPLICATION.MANDATORY' | translate }}</th>
<th>{{ 'REPLICATION.ALLOWED_VALUES' | translate }}</th>
<th>{{ 'REPLICATION.ALLOWED_CHARACTERS' | translate }}</th>
</tr>
</thead>
<tbody>
<tr>
<td>{{'REPLICATION.SECONDS' | translate}}</td>
<td>{{'REPLICATION.YES' | translate}}</td>
<td>0-59</td>
<td>* / , -</td>
</tr>
<tr>
<td>{{'REPLICATION.MINUTES' | translate}}</td>
<td>{{'REPLICATION.YES' | translate}}</td>
<td>0-59</td>
<td>* / , -</td>
</tr>
<tr>
<td>{{'REPLICATION.HOURS' | translate}}</td>
<td>{{'REPLICATION.YES' | translate}}</td>
<td>0-23</td>
<td>* / , -</td>
</tr>
<tr>
<td>{{'REPLICATION.DAY_MONTH' | translate}}</td>
<td>{{'REPLICATION.YES' | translate}}</td>
<td>1-31</td>
<td>* / , - ?</td>
</tr>
<tr>
<td>{{'REPLICATION.MONTH' | translate}}</td>
<td>{{'REPLICATION.YES' | translate}}</td>
<td>1-12 or JAN-DEC</td>
<td>* / , -</td>
</tr>
<tr>
<td>{{'REPLICATION.DAY_WEEK' | translate}}</td>
<td>{{'REPLICATION.YES' | translate}}</td>
<td>0-6 or SUN-SAT</td>
<td>* / , - ?</td>
</tr>
</tbody>
</table>
</a> </a>
</div> </div>
<div class="confirm-button"> <div class="confirm-button">

18
src/portal/lib/src/cron-schedule/cron-schedule.component.scss
View File

@ -55,22 +55,8 @@
.cron-tooltip { .cron-tooltip {
color: gray; color: gray;
cursor: default; cursor: default;
.table-style { .table-box {
margin-right: 462px; width: 20rem;
width: 20rem;
border-top-left-radius: 0;
border-top-right-radius: 0;
.table-title {
border-top-left-radius: 0.125rem;
border-top-right-radius: 0.125rem;
height: 40px;
line-height: 40px;
background: #000;
color: #fff;
span {
font-size: 16px;
}
}
} }
} }
} }

53
src/portal/lib/src/cron-schedule/cron-tooltip/cron-tooltip.component.html Normal file
View File

@ -0,0 +1,53 @@
<table class="table table-noborder table-style">
<caption class="table-title">
<span>
{{ 'REPLICATION.CRON-TITLE' | translate }}
</span>
</caption>
<thead>
<tr>
<th>{{ 'REPLICATION.FIELD_NAME' | translate }}</th>
<th>{{ 'REPLICATION.MANDATORY' | translate }}</th>
<th>{{ 'REPLICATION.ALLOWED_VALUES' | translate }}</th>
<th>{{ 'REPLICATION.ALLOWED_CHARACTERS' | translate }}</th>
</tr>
</thead>
<tbody>
<tr>
<td>{{'REPLICATION.SECONDS' | translate}}</td>
<td>{{'REPLICATION.YES' | translate}}</td>
<td>0-59</td>
<td>* / , -</td>
</tr>
<tr>
<td>{{'REPLICATION.MINUTES' | translate}}</td>
<td>{{'REPLICATION.YES' | translate}}</td>
<td>0-59</td>
<td>* / , -</td>
</tr>
<tr>
<td>{{'REPLICATION.HOURS' | translate}}</td>
<td>{{'REPLICATION.YES' | translate}}</td>
<td>0-23</td>
<td>* / , -</td>
</tr>
<tr>
<td>{{'REPLICATION.DAY_MONTH' | translate}}</td>
<td>{{'REPLICATION.YES' | translate}}</td>
<td>1-31</td>
<td>* / , - ?</td>
</tr>
<tr>
<td>{{'REPLICATION.MONTH' | translate}}</td>
<td>{{'REPLICATION.YES' | translate}}</td>
<td>1-12 or JAN-DEC</td>
<td>* / , -</td>
</tr>
<tr>
<td>{{'REPLICATION.DAY_WEEK' | translate}}</td>
<td>{{'REPLICATION.YES' | translate}}</td>
<td>0-6 or SUN-SAT</td>
<td>* / , - ?</td>
</tr>
</tbody>
</table>

14
src/portal/lib/src/cron-schedule/cron-tooltip/cron-tooltip.component.scss Normal file
View File

@ -0,0 +1,14 @@
.table-style {
margin-top: 0;
border-top-left-radius: 0;
border-top-right-radius: 0;
color: #fff;
.table-title {
border-top-left-radius: 0.125rem;
border-top-right-radius: 0.125rem;
background: #000;
span {
font-size: 16px;
}
}
}

15
src/portal/lib/src/cron-schedule/cron-tooltip/cron-tooltip.component.ts Normal file
View File

@ -0,0 +1,15 @@
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'cron-tooltip',
templateUrl: './cron-tooltip.component.html',
styleUrls: ['./cron-tooltip.component.scss']
})
export class CronTooltipComponent implements OnInit {
constructor() { }
ngOnInit() {
}
}

5
src/portal/lib/src/cron-schedule/index.ts
View File

@ -1,6 +1,9 @@
import { Type } from "@angular/core"; import { Type } from "@angular/core";
import { CronScheduleComponent } from "./cron-schedule.component"; import { CronScheduleComponent } from "./cron-schedule.component";
import { CronTooltipComponent } from "./cron-tooltip/cron-tooltip.component";
export const CRON_SCHEDULE_DIRECTIVES: Type<any>[] = [ export const CRON_SCHEDULE_DIRECTIVES: Type<any>[] = [
CronScheduleComponent CronScheduleComponent,
CronTooltipComponent
]; ];

4
src/portal/lib/src/replication/replication.component.html
View File

@ -2,7 +2,7 @@
<div> <div>
<div class="row flex-items-xs-between rightPos"> <div class="row flex-items-xs-between rightPos">
<div class="flex-xs-middle option-right"> <div class="flex-xs-middle option-right">
<hbr-filter [withDivider]="true" filterPlaceholder='{{"REPLICATION.FILTER_POLICIES_PLACEHOLDER" | translate}}' (filterEvt)="doSearchRules($event)" <hbr-filter id="filter-rules" [withDivider]="true" filterPlaceholder='{{"REPLICATION.FILTER_POLICIES_PLACEHOLDER" | translate}}' (filterEvt)="doSearchRules($event)"
[currentValue]="search.ruleName"></hbr-filter> [currentValue]="search.ruleName"></hbr-filter>
<span class="refresh-btn" (click)="refreshRules()"> <span class="refresh-btn" (click)="refreshRules()">
<clr-icon shape="refresh"></clr-icon> <clr-icon shape="refresh"></clr-icon>
@ -32,7 +32,7 @@
<option value="status">{{'REPLICATION.STATUS' | translate}}</option> <option value="status">{{'REPLICATION.STATUS' | translate}}</option>
</select> </select>
</div> </div>
<hbr-filter [withDivider]="true" (openFlag)="openFilter($event)" <hbr-filter id="filter-executions" [withDivider]="true" (openFlag)="openFilter($event)"
filterPlaceholder='{{"REPLICATION.FILTER_EXECUTIONS_PLACEHOLDER" | translate}}' filterPlaceholder='{{"REPLICATION.FILTER_EXECUTIONS_PLACEHOLDER" | translate}}'
(filterEvt)="doSearchExecutions($event)" [currentValue]="currentTerm"></hbr-filter> (filterEvt)="doSearchExecutions($event)" [currentValue]="currentTerm"></hbr-filter>
<span class="refresh-btn"> <span class="refresh-btn">

4
src/portal/lib/src/replication/replication.component.spec.ts
View File

@ -8,10 +8,12 @@ import { ConfirmationDialogComponent } from '../confirmation-dialog/confirmation
import { ReplicationComponent } from './replication.component'; import { ReplicationComponent } from './replication.component';
import { ListReplicationRuleComponent } from '../list-replication-rule/list-replication-rule.component'; import { ListReplicationRuleComponent } from '../list-replication-rule/list-replication-rule.component';
import { CreateEditRuleComponent } from '../create-edit-rule/create-edit-rule.component'; import { CreateEditRuleComponent } from '../create-edit-rule/create-edit-rule.component';
import { CronScheduleComponent } from '../cron-schedule/cron-schedule.component';
import { DatePickerComponent } from '../datetime-picker/datetime-picker.component'; import { DatePickerComponent } from '../datetime-picker/datetime-picker.component';
import { FilterComponent } from '../filter/filter.component'; import { FilterComponent } from '../filter/filter.component';
import { InlineAlertComponent } from '../inline-alert/inline-alert.component'; import { InlineAlertComponent } from '../inline-alert/inline-alert.component';
import {ReplicationRule, ReplicationJob, Endpoint} from '../service/interface'; import {ReplicationRule, ReplicationJob, Endpoint} from '../service/interface';
import { CronTooltipComponent } from "../cron-schedule/cron-tooltip/cron-tooltip.component";
import { ErrorHandler } from '../error-handler/error-handler'; import { ErrorHandler } from '../error-handler/error-handler';
import { SERVICE_CONFIG, IServiceConfig } from '../service.config'; import { SERVICE_CONFIG, IServiceConfig } from '../service.config';
@ -161,6 +163,8 @@ describe('Replication Component (inline template)', () => {
ReplicationComponent, ReplicationComponent,
ListReplicationRuleComponent, ListReplicationRuleComponent,
CreateEditRuleComponent, CreateEditRuleComponent,
CronTooltipComponent,
CronScheduleComponent,
ConfirmationDialogComponent, ConfirmationDialogComponent,
DatePickerComponent, DatePickerComponent,
FilterComponent, FilterComponent,