Upstream/harbor
1
0
Fork 0
mirror of https://github.com/goharbor/harbor.git synced 2024-12-18 06:38:19 +01:00
Code Issues Projects Releases Wiki Activity

Merge pull request #7697 from pureshine/fix-tooltip

Browse Source 
Fix the cron tooltip in replication is not fully displayed in Firefox.
This commit is contained in:
Fangyuan Cheng 2019-05-08 17:26:20 +08:00 committed by GitHub
commit 7810c05fe3
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
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 { GcViewModelFactory } from './gc.viewmodel.factory';
import { CronScheduleComponent } from '../../cron-schedule/cron-schedule.component';
import { CronTooltipComponent } from "../../cron-schedule/cron-tooltip/cron-tooltip.component";
import { of } from 'rxjs';
describe('GcComponent', () => {
@ -33,7 +34,7 @@ describe('GcComponent', () => {
imports: [
SharedModule
],
declarations: [ GcComponent, CronScheduleComponent],
declarations: [ GcComponent, CronScheduleComponent, CronTooltipComponent],
providers: [
{ provide: GcApiRepository, useClass: GcApiDefaultRepository },
{ 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 { GcHistoryComponent } from './gc/gc-history/gc-history.component';
import { CronScheduleComponent } from '../cron-schedule/cron-schedule.component';
import { CronTooltipComponent } from "../cron-schedule/cron-tooltip/cron-tooltip.component";
import {
ConfigurationService,
ConfigurationDefaultService,
@ -69,7 +69,8 @@ describe('RegistryConfigComponent (inline template)', () => {
ConfirmationDialogComponent,
GcComponent,
GcHistoryComponent,
CronScheduleComponent
CronScheduleComponent,
CronTooltipComponent
],
providers: [
ErrorHandler,

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

@ -147,59 +147,9 @@
</label>
<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>
<table class="table table-noborder tooltip-content 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>
<div class="tooltip-content table-box">
<cron-tooltip></cron-tooltip>
</div>
</a>
</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 {
color: gray;
cursor: default;
.table-style {
margin-right: 462px;
.table-box {
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 { 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 { DatePickerComponent } from "../datetime-picker/datetime-picker.component";
import { FilterComponent } from "../filter/filter.component";
@ -232,6 +232,7 @@ describe("CreateEditRuleComponent (inline template)", () => {
ReplicationComponent,
ListReplicationRuleComponent,
CreateEditRuleComponent,
CronTooltipComponent,
ConfirmationDialogComponent,
DatePickerComponent,
FilterComponent,

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

@ -43,59 +43,9 @@
</label>
<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>
<table class="table table-noborder tooltip-content 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>
<div class="tooltip-content table-box">
<cron-tooltip></cron-tooltip>
</div>
</a>
</div>
<div class="confirm-button">

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

@ -55,22 +55,8 @@
.cron-tooltip {
color: gray;
cursor: default;
.table-style {
margin-right: 462px;
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;
}
}
.table-box {
width: 20rem;
}
}
}

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 { CronScheduleComponent } from "./cron-schedule.component";
import { CronTooltipComponent } from "./cron-tooltip/cron-tooltip.component";
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 class="row flex-items-xs-between rightPos">
<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>
<span class="refresh-btn" (click)="refreshRules()">
<clr-icon shape="refresh"></clr-icon>
@ -32,7 +32,7 @@
<option value="status">{{'REPLICATION.STATUS' | translate}}</option>
</select>
</div>
<hbr-filter [withDivider]="true" (openFlag)="openFilter($event)"
<hbr-filter id="filter-executions" [withDivider]="true" (openFlag)="openFilter($event)"
filterPlaceholder='{{"REPLICATION.FILTER_EXECUTIONS_PLACEHOLDER" | translate}}'
(filterEvt)="doSearchExecutions($event)" [currentValue]="currentTerm"></hbr-filter>
<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 { ListReplicationRuleComponent } from '../list-replication-rule/list-replication-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 { FilterComponent } from '../filter/filter.component';
import { InlineAlertComponent } from '../inline-alert/inline-alert.component';
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 { SERVICE_CONFIG, IServiceConfig } from '../service.config';
@ -161,6 +163,8 @@ describe('Replication Component (inline template)', () => {
ReplicationComponent,
ListReplicationRuleComponent,
CreateEditRuleComponent,
CronTooltipComponent,
CronScheduleComponent,
ConfirmationDialogComponent,
DatePickerComponent,
FilterComponent,