Improve immutable ui style

Signed-off-by: Yogi_Wang <yawang@vmware.com>
This commit is contained in:
Yogi_Wang 2019-10-28 16:00:40 +08:00
parent 5c4c04a122
commit a9adc50550
8 changed files with 74 additions and 30 deletions

View File

@ -49,10 +49,10 @@
</ul> </ul>
<div class="v-center clr-row" [ngClass]="{'pt-1':rules?.length > 0}"> <div class="v-center clr-row" [ngClass]="{'pt-1':rules?.length > 0}">
<div class="clr-col-2 flex-150"></div> <div class="clr-col-2 flex-150"></div>
<div class="clr-col-2"> <div class="add-rule-btn">
<button [disabled]="rules?.length >= 15" id="add-rule" class="btn btn-primary btn-sm" (click)="openAddRule()">{{'IMMUTABLE_TAG.ADD_RULE' | translate}}</button> <button [disabled]="rules?.length >= 15" id="add-rule" class="btn btn-primary btn-sm" (click)="openAddRule()">{{'IMMUTABLE_TAG.ADD_RULE' | translate}}</button>
</div> </div>
<div class="clr-col-8 color-97 font-size-54"> <div class="clr-col-6 color-97 font-size-54">
{{'IMMUTABLE_TAG.ADD_RULE_HELP_1' | translate}} {{'IMMUTABLE_TAG.ADD_RULE_HELP_1' | translate}}
</div> </div>
</div> </div>

View File

@ -3,7 +3,9 @@
} }
.dropdown-toggle { .dropdown-toggle {
outline: none; outline: none;
padding-left: 0;
} }
.backdrop-transparent { .backdrop-transparent {
position: fixed; position: fixed;
top: 0; top: 0;
@ -13,3 +15,45 @@
opacity: 0; opacity: 0;
z-index: 999; z-index: 999;
} }
.label-left {
color: #000;
}
.v-center {
height: 48px;
line-height: 48px;
}
.font-size-54 {
font-size: 0.541667rem;
}
::ng-deep {
.normal-wrapper-box {
.normal-wrapper {
.font-style {
width: 150px !important;
}
}
.btn {
margin-left: 150px !important;
}
}
}
.flex-150 {
flex: 0 0 150px;
}
.rule-name {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
font-size: 0.541667rem;
}
.ml-5 {
margin-left: 5px;
}
.color-97 {
color: #979797;
}
.add-rule-btn {
min-width: 120px;
padding-left: 12px;
}

View File

@ -248,7 +248,7 @@
"HELMCHART": "Helm Charts", "HELMCHART": "Helm Charts",
"ROBOT_ACCOUNTS": "Robot Accounts", "ROBOT_ACCOUNTS": "Robot Accounts",
"WEBHOOKS": "Webhooks", "WEBHOOKS": "Webhooks",
"IMMUTABLE_TAG": "Immutable Tag" "IMMUTABLE_TAG": "Tag Immutability"
}, },
"PROJECT_CONFIG": { "PROJECT_CONFIG": {
"REGISTRY": "Project registry", "REGISTRY": "Project registry",
@ -1234,20 +1234,20 @@
"ACTION": "ACTION" "ACTION": "ACTION"
}, },
"IMMUTABLE_TAG": { "IMMUTABLE_TAG": {
"IMMUTABLE_RULES": "Immutable rules", "IMMUTABLE_RULES": "Immutability rules",
"ADD_RULE": "ADD RULE", "ADD_RULE": "ADD RULE",
"ADD_RULE_HELP_1": "Click the ADD RULE button to add a rule.", "ADD_RULE_HELP_1": "Click the ADD RULE button to add a rule.",
"EDIT": "Edit", "EDIT": "Edit",
"DISABLE": "Disable", "DISABLE": "Disable",
"ENABLE": "Enable", "ENABLE": "Enable",
"DELETE": "Delete", "DELETE": "Delete",
"ADD_TITLE": "Add Immutable Rule", "ADD_TITLE": "Add Tag Immutability Rule",
"ADD_SUBTITLE": "Specify a immutable rule for this project. All immutable rules are independently calculated and each rule can be applied to a selected list of repositories.", "ADD_SUBTITLE": "Specify a tag immutability rule for this project. Note: all tag immutability rules are first independently calculated and then unioned to capture the final set of immutable tags.",
"IN_REPOSITORIES": "For the repositories", "IN_REPOSITORIES": "For the repositories",
"REP_SEPARATOR": "Enter multiple comma separated repos,repo*,or **", "REP_SEPARATOR": "Enter multiple comma separated repos,repo*,or **",
"TAGS": "Tags", "TAGS": "Tags",
"TAG_SEPARATOR": "Enter multiple comma separated tags,tag*,or **", "TAG_SEPARATOR": "Enter multiple comma separated tags,tag*,or **",
"EDIT_TITLE": "Edit Immutable Rule", "EDIT_TITLE": "Edit Tag Immutability Rule",
"EXC": " excluding ", "EXC": " excluding ",
"MAT": " matching ", "MAT": " matching ",
"AND": " and", "AND": " and",

View File

@ -249,7 +249,7 @@
"HELMCHART": "Helm Charts", "HELMCHART": "Helm Charts",
"ROBOT_ACCOUNTS": "Robot Accounts", "ROBOT_ACCOUNTS": "Robot Accounts",
"WEBHOOKS": "Webhooks", "WEBHOOKS": "Webhooks",
"IMMUTABLE_TAG": "Immutable Tag" "IMMUTABLE_TAG": "Tag Immutability"
}, },
"PROJECT_CONFIG": { "PROJECT_CONFIG": {
"REGISTRY": "Registro de proyectos", "REGISTRY": "Registro de proyectos",
@ -1231,20 +1231,20 @@
"ACTION": "ACTION" "ACTION": "ACTION"
}, },
"IMMUTABLE_TAG": { "IMMUTABLE_TAG": {
"IMMUTABLE_RULES": "Immutable rules", "IMMUTABLE_RULES": "Immutability rules",
"ADD_RULE": "ADD RULE", "ADD_RULE": "ADD RULE",
"ADD_RULE_HELP_1": "Click the ADD RULE button to add a rule.", "ADD_RULE_HELP_1": "Click the ADD RULE button to add a rule.",
"EDIT": "Edit", "EDIT": "Edit",
"DISABLE": "Disable", "DISABLE": "Disable",
"ENABLE": "Enable", "ENABLE": "Enable",
"DELETE": "Delete", "DELETE": "Delete",
"ADD_TITLE": "Add Immutable Rule", "ADD_TITLE": "Add Tag Immutability Rule",
"ADD_SUBTITLE": "Specify a immutable rule for this project. All immutable rules are independently calculated and each rule can be applied to a selected list of repositories.", "ADD_SUBTITLE": "Specify a tag immutability rule for this project. Note: all tag immutability rules are first independently calculated and then unioned to capture the final set of immutable tags.",
"IN_REPOSITORIES": "For the repositories", "IN_REPOSITORIES": "For the repositories",
"REP_SEPARATOR": "Enter multiple comma separated repos,repo*,or **", "REP_SEPARATOR": "Enter multiple comma separated repos,repo*,or **",
"TAGS": "Tags", "TAGS": "Tags",
"TAG_SEPARATOR": "Enter multiple comma separated tags,tag*,or **", "TAG_SEPARATOR": "Enter multiple comma separated tags,tag*,or **",
"EDIT_TITLE": "Edit Immutable Rule", "EDIT_TITLE": "Edit Tag Immutability Rule",
"EXC": " excluding ", "EXC": " excluding ",
"MAT": " matching ", "MAT": " matching ",
"AND": " and", "AND": " and",

View File

@ -242,7 +242,7 @@
"HELMCHART": "Helm Charts", "HELMCHART": "Helm Charts",
"ROBOT_ACCOUNTS": "Robot Accounts", "ROBOT_ACCOUNTS": "Robot Accounts",
"WEBHOOKS": "Webhooks", "WEBHOOKS": "Webhooks",
"IMMUTABLE_TAG": "Immutable Tag" "IMMUTABLE_TAG": "Tag Immutability"
}, },
"PROJECT_CONFIG": { "PROJECT_CONFIG": {
"REGISTRY": "Dépôt du Projet", "REGISTRY": "Dépôt du Projet",
@ -1203,20 +1203,20 @@
"ACTION": "ACTION" "ACTION": "ACTION"
}, },
"IMMUTABLE_TAG": { "IMMUTABLE_TAG": {
"IMMUTABLE_RULES": "Immutable rules", "IMMUTABLE_RULES": "Immutability rules",
"ADD_RULE": "ADD RULE", "ADD_RULE": "ADD RULE",
"ADD_RULE_HELP_1": "Click the ADD RULE button to add a rule.", "ADD_RULE_HELP_1": "Click the ADD RULE button to add a rule.",
"EDIT": "Edit", "EDIT": "Edit",
"DISABLE": "Disable", "DISABLE": "Disable",
"ENABLE": "Enable", "ENABLE": "Enable",
"DELETE": "Delete", "DELETE": "Delete",
"ADD_TITLE": "Add Immutable Rule", "ADD_TITLE": "Add Tag Immutability Rule",
"ADD_SUBTITLE": "Specify a immutable rule for this project. All immutable rules are independently calculated and each rule can be applied to a selected list of repositories.", "ADD_SUBTITLE": "Specify a tag immutability rule for this project. Note: all tag immutability rules are first independently calculated and then unioned to capture the final set of immutable tags.",
"IN_REPOSITORIES": "For the repositories", "IN_REPOSITORIES": "For the repositories",
"REP_SEPARATOR": "Enter multiple comma separated repos,repo*,or **", "REP_SEPARATOR": "Enter multiple comma separated repos,repo*,or **",
"TAGS": "Tags", "TAGS": "Tags",
"TAG_SEPARATOR": "Enter multiple comma separated tags,tag*,or **", "TAG_SEPARATOR": "Enter multiple comma separated tags,tag*,or **",
"EDIT_TITLE": "Edit Immutable Rule", "EDIT_TITLE": "Edit Tag Immutability Rule",
"EXC": " excluding ", "EXC": " excluding ",
"MAT": " matching ", "MAT": " matching ",
"AND": " and", "AND": " and",

View File

@ -246,7 +246,7 @@
"HELMCHART": "Helm Charts", "HELMCHART": "Helm Charts",
"ROBOT_ACCOUNTS": "Robot Accounts", "ROBOT_ACCOUNTS": "Robot Accounts",
"WEBHOOKS": "Webhooks", "WEBHOOKS": "Webhooks",
"IMMUTABLE_TAG": "Immutable Tag" "IMMUTABLE_TAG": "Tag Immutability"
}, },
"PROJECT_CONFIG": { "PROJECT_CONFIG": {
"REGISTRY": "Registro do Projeto", "REGISTRY": "Registro do Projeto",
@ -1228,20 +1228,20 @@
"ACTION": "ACTION" "ACTION": "ACTION"
}, },
"IMMUTABLE_TAG": { "IMMUTABLE_TAG": {
"IMMUTABLE_RULES": "Immutable rules", "IMMUTABLE_RULES": "Immutability rules",
"ADD_RULE": "ADD RULE", "ADD_RULE": "ADD RULE",
"ADD_RULE_HELP_1": "Click the ADD RULE button to add a rule.", "ADD_RULE_HELP_1": "Click the ADD RULE button to add a rule.",
"EDIT": "Edit", "EDIT": "Edit",
"DISABLE": "Disable", "DISABLE": "Disable",
"ENABLE": "Enable", "ENABLE": "Enable",
"DELETE": "Delete", "DELETE": "Delete",
"ADD_TITLE": "Add Immutable Rule", "ADD_TITLE": "Add Tag Immutability Rule",
"ADD_SUBTITLE": "Specify a immutable rule for this project. All immutable rules are independently calculated and each rule can be applied to a selected list of repositories.", "ADD_SUBTITLE": "Specify a tag immutability rule for this project. Note: all tag immutability rules are first independently calculated and then unioned to capture the final set of immutable tags.",
"IN_REPOSITORIES": "For the repositories", "IN_REPOSITORIES": "For the repositories",
"REP_SEPARATOR": "Enter multiple comma separated repos,repo*,or **", "REP_SEPARATOR": "Enter multiple comma separated repos,repo*,or **",
"TAGS": "Tags", "TAGS": "Tags",
"TAG_SEPARATOR": "Enter multiple comma separated tags,tag*,or **", "TAG_SEPARATOR": "Enter multiple comma separated tags,tag*,or **",
"EDIT_TITLE": "Edit Immutable Rule", "EDIT_TITLE": "Edit Tag Immutability Rule",
"EXC": " excluding ", "EXC": " excluding ",
"MAT": " matching ", "MAT": " matching ",
"AND": " and", "AND": " and",

View File

@ -248,7 +248,7 @@
"HELMCHART": "Helm Tabloları", "HELMCHART": "Helm Tabloları",
"ROBOT_ACCOUNTS": "Robot Hesapları", "ROBOT_ACCOUNTS": "Robot Hesapları",
"WEBHOOKS": "Ağ Kancaları", "WEBHOOKS": "Ağ Kancaları",
"IMMUTABLE_TAG": "Immutable Tag" "IMMUTABLE_TAG": "Tag Immutability"
}, },
"PROJECT_CONFIG": { "PROJECT_CONFIG": {
"REGISTRY": "Proje kaydı", "REGISTRY": "Proje kaydı",
@ -1233,20 +1233,20 @@
"ACTION": "ACTION" "ACTION": "ACTION"
}, },
"IMMUTABLE_TAG": { "IMMUTABLE_TAG": {
"IMMUTABLE_RULES": "Immutable rules", "IMMUTABLE_RULES": "Immutability rules",
"ADD_RULE": "ADD RULE", "ADD_RULE": "ADD RULE",
"ADD_RULE_HELP_1": "Click the ADD RULE button to add a rule.", "ADD_RULE_HELP_1": "Click the ADD RULE button to add a rule.",
"EDIT": "Edit", "EDIT": "Edit",
"DISABLE": "Disable", "DISABLE": "Disable",
"ENABLE": "Enable", "ENABLE": "Enable",
"DELETE": "Delete", "DELETE": "Delete",
"ADD_TITLE": "Add Immutable Rule", "ADD_TITLE": "Add Tag Immutability Rule",
"ADD_SUBTITLE": "Specify a immutable rule for this project. All immutable rules are independently calculated and each rule can be applied to a selected list of repositories.", "ADD_SUBTITLE": "Specify a tag immutability rule for this project. Note: all tag immutability rules are first independently calculated and then unioned to capture the final set of immutable tags.",
"IN_REPOSITORIES": "For the repositories", "IN_REPOSITORIES": "For the repositories",
"REP_SEPARATOR": "Enter multiple comma separated repos,repo*,or **", "REP_SEPARATOR": "Enter multiple comma separated repos,repo*,or **",
"TAGS": "Tags", "TAGS": "Tags",
"TAG_SEPARATOR": "Enter multiple comma separated tags,tag*,or **", "TAG_SEPARATOR": "Enter multiple comma separated tags,tag*,or **",
"EDIT_TITLE": "Edit Immutable Rule", "EDIT_TITLE": "Edit Tag Immutability Rule",
"EXC": " excluding ", "EXC": " excluding ",
"MAT": " matching ", "MAT": " matching ",
"AND": " and", "AND": " and",

View File

@ -1230,15 +1230,15 @@
"ACTION": "操作" "ACTION": "操作"
}, },
"IMMUTABLE_TAG": { "IMMUTABLE_TAG": {
"IMMUTABLE_RULES": "不变的规则", "IMMUTABLE_RULES": "不变的Tag规则",
"ADD_RULE": "添加新规则", "ADD_RULE": "添加新规则",
"ADD_RULE_HELP_1": "点击添加按钮可添加规则。", "ADD_RULE_HELP_1": "点击添加按钮可添加规则。",
"EDIT": "修改", "EDIT": "修改",
"DISABLE": "禁用", "DISABLE": "禁用",
"ENABLE": "启用", "ENABLE": "启用",
"DELETE": "删除", "DELETE": "删除",
"ADD_TITLE": "添加不变的规则", "ADD_TITLE": "添加不变的Tag规则",
"ADD_SUBTITLE": "为当前项目指定不改变规则。所有不改变的规则独立计算并且适用于所有符合条件的仓库。", "ADD_SUBTITLE": "为此项目指定不可变的Tag规则。注意所有不可变的Tag规则都将首先被独立计算合并后最终获得不可变规则的集合。",
"IN_REPOSITORIES": "应用到仓库", "IN_REPOSITORIES": "应用到仓库",
"REP_SEPARATOR": "使用逗号分隔repos,repo*和**。", "REP_SEPARATOR": "使用逗号分隔repos,repo*和**。",
"TAGS": "Tags", "TAGS": "Tags",