[improve] continuously supplement and improve the goals set in #2140 (#…

…2142)
apache · Jun 26, 2024 · 8c0b39f · 8c0b39f
1 parent a54d8cd
commit 8c0b39f
Show file tree

Hide file tree

Showing 10 changed files with 50 additions and 32 deletions.
diff --git a/web-app/src/app/routes/dashboard/dashboard.component.html b/web-app/src/app/routes/dashboard/dashboard.component.html
@@ -291,7 +291,7 @@
 <div nz-row nzGutter="16" style="margin-top: 25px; height: 400px">
   <div nz-col [nzXs]="{ span: 24 }" [nzSm]="{ span: 24 }" [nzMd]="{ span: 6 }" style="height: 100%">
     <angular-tag-cloud
-      style="border-radius: 4px"
+      class="br-4"
       (clicked)="onTagCloudClick($event)"
       [font]="'italic bold 6px monospace'"
       [data]="wordCloudData"

diff --git a/web-app/src/app/routes/passport/lock/lock.component.html b/web-app/src/app/routes/passport/lock/lock.component.html
@@ -17,7 +17,7 @@
   ~ under the License.
 -->
 
-<div class="ant-card width-lg" style="margin: 0 auto; border-radius: 8px">
+<div class="ant-card width-lg br-8" style="margin: 0 auto">
   <div class="ant-card-body">
     <div class="avatar">
       <nz-avatar [nzSrc]="user.avatar" nzIcon="user" nzSize="large"></nz-avatar>

diff --git a/web-app/src/app/routes/passport/login/login.component.html b/web-app/src/app/routes/passport/login/login.component.html
@@ -17,7 +17,7 @@
   ~ under the License.
 -->
 
-<div style="background-color: snow; padding: 20px; border-radius: 8px; box-shadow: 7px 5px #b421cc">
+<div class="br-8" style="background-color: snow; padding: 20px; box-shadow: 7px 5px #b421cc">
   <form nz-form [formGroup]="form" (ngSubmit)="submit()" role="form">
     <nz-tabset [nzAnimated]="false" class="tabs" (nzSelectChange)="switch($event)">
       <nz-tab [nzTitle]="'app.login.tab-login-credentials' | i18n">
@@ -70,7 +70,7 @@
       <!--      <nz-tab [nzTitle]="'app.login.explore.cloud' | i18n">-->
       <!--        <div style="margin-top: 20%; margin-bottom: 20%; text-align: center">-->
       <!--          <a href="https://console.tancloud.cn/" target="_blank">-->
-      <!--            <div class="hoverClass" style="border-radius: 4px; background-color: #3f51b5; padding: 6px; color: white">-->
+      <!--            <div class="hoverClass br-4" style="background-color: #3f51b5; padding: 6px; color: white">-->
       <!--              {{ 'app.login.explore.cloud.detail' | i18n }}-->
       <!--              <span nz-icon nzType="global" nzTheme="outline"></span>-->
       <!--            </div>-->

diff --git a/web-app/src/app/routes/setting/collector/collector.component.html b/web-app/src/app/routes/setting/collector/collector.component.html
@@ -242,7 +242,7 @@
       </div>
       <nz-divider></nz-divider>
       <nz-badge nzStatus="processing" style="font-weight: bold" [nzText]="'collector.deploy.docker' | i18n"></nz-badge>
-      <div style="margin: 4px 10px 4px 4px; height: 240px; width: 100%; border-radius: 8px">
+      <div class="br-8" style="margin: 4px 10px 4px 4px; height: 240px; width: 100%">
         <nz-code-editor
           [ngModel]="dockerShell"
           [nzEditorMode]="'normal'"
@@ -254,7 +254,7 @@
       <a style="margin-left: 20px" href="https://github.com/apache/hertzbeat/releases" target="_blank">
         <span>{{ 'collector.deploy.package.github' | i18n }}</span>
       </a>
-      <div style="margin: 4px 10px 4px 4px; height: 260px; width: 100%; border-radius: 8px">
+      <div class="br-8" style="margin: 4px 10px 4px 4px; height: 260px; width: 100%">
         <nz-code-editor
           [ngModel]="packageShell"
           [nzEditorMode]="'normal'"

diff --git a/web-app/src/app/routes/setting/tags/tags.component.html b/web-app/src/app/routes/setting/tags/tags.component.html
@@ -141,7 +141,8 @@
             cpOutputFormat="hex"
             [style.background]="tag.color"
             required
-            style="width: 100%; border-radius: 4px"
+            style="width: 100%"
+            class="br-4"
             name="color"
             id="color"
           />

diff --git a/web-app/src/app/routes/status-public/status-public.component.html b/web-app/src/app/routes/status-public/status-public.component.html
@@ -18,7 +18,7 @@
 -->
 
 <nz-spin [nzSpinning]="loading" [nzTip]="'Loading...'" nzSize="large">
-  <div class="status-header" [style]="'border-radius: 8px;margin-top: 10px;background:' + (statusOrg.color || '#e9f3d3')">
+  <div class="status-header br-8" [style]="'margin-top: 10px;background:' + (statusOrg.color || '#e9f3d3')">
     <header-i18n showLangText="false" class="langs"></header-i18n>
     <div>
       <a [href]="statusOrg.home" target="_blank">
@@ -41,7 +41,11 @@
         </a>
       </div>
     </div>
-    <div *ngIf="statusOrg.state == 0" class="org-status" style="background-color: green; display: flex; justify-content: space-between">
+    <div
+      *ngIf="statusOrg.state == 0"
+      class="org-status br-8"
+      style="background-color: green; display: flex; justify-content: space-between"
+    >
       <div>
         <span nz-icon style="color: #f0f0f0" nzType="check-circle" nzTheme="outline"></span>
         <span style="color: #f0f0f0; margin-left: 4px"> {{ 'status.public.org.state.0' | i18n }} </span>
@@ -50,7 +54,11 @@
         <span style="color: #f0f0f0; margin-right: 4px; font-size: medium"> Updated {{ statusOrg.gmtUpdate | elapsedTime }} </span>
       </div>
     </div>
-    <div *ngIf="statusOrg.state == 1" class="org-status" style="background-color: orange; display: flex; justify-content: space-between">
+    <div
+      *ngIf="statusOrg.state == 1"
+      class="org-status br-8"
+      style="background-color: orange; display: flex; justify-content: space-between"
+    >
       <div>
         <span nz-icon style="color: #f0f0f0" nzType="exclamation-circle" nzTheme="outline"></span>
         <span style="color: #f0f0f0; margin-left: 4px"> {{ 'status.public.org.state.1' | i18n }} </span>
@@ -59,7 +67,7 @@
         <span style="color: #f0f0f0; margin-right: 4px; font-size: medium"> Updated {{ statusOrg.gmtUpdate | elapsedTime }} </span>
       </div>
     </div>
-    <div *ngIf="statusOrg.state == 2" class="org-status" style="background-color: red; display: flex; justify-content: space-between">
+    <div *ngIf="statusOrg.state == 2" class="org-status br-8" style="background-color: red; display: flex; justify-content: space-between">
       <div>
         <span nz-icon style="color: #f0f0f0" nzType="close-circle" nzTheme="outline"></span>
         <span style="color: #f0f0f0; margin-left: 4px"> {{ 'status.public.org.state.2' | i18n }} </span>
@@ -69,7 +77,7 @@
       </div>
     </div>
     <div style="margin-top: 50px">
-      <div *ngFor="let component of componentStatus" class="component-status">
+      <div *ngFor="let component of componentStatus" class="component-status br-8">
         <div style="margin: 10px; display: flex; justify-content: space-between">
           <div style="font-weight: bold; font-size: large">
             <span>{{ component.info.name }}</span>
@@ -99,8 +107,8 @@
         <div style="margin-left: 10px; margin-top: 10px; margin-bottom: 10px; display: flex">
           <div
             *ngFor="let historyItem of component.history"
-            class="history_block"
-            [style]="'border-radius: 8px;background:' + calculateHistoryBlockRgb(historyItem)"
+            class="history_block br-8"
+            [style]="'background:' + calculateHistoryBlockRgb(historyItem)"
             nz-popover
             [nzPopoverContent]="contentTemplate"
             nzPopoverPlacement="bottom"
@@ -138,7 +146,11 @@
         </a>
       </div>
     </div>
-    <div *ngIf="statusOrg.state == 0" class="org-status" style="background-color: green; display: flex; justify-content: space-between">
+    <div
+      *ngIf="statusOrg.state == 0"
+      class="org-status br-8"
+      style="background-color: green; display: flex; justify-content: space-between"
+    >
       <div>
         <span nz-icon style="color: #f0f0f0" nzType="check-circle" nzTheme="outline"></span>
         <span style="color: #f0f0f0; margin-left: 4px"> {{ 'status.public.org.state.0' | i18n }} </span>
@@ -147,7 +159,11 @@
         <span style="color: #f0f0f0; margin-right: 4px; font-size: medium"> Updated {{ statusOrg.gmtUpdate | elapsedTime }} </span>
       </div>
     </div>
-    <div *ngIf="statusOrg.state == 1" class="org-status" style="background-color: orange; display: flex; justify-content: space-between">
+    <div
+      *ngIf="statusOrg.state == 1"
+      class="org-status br-8"
+      style="background-color: orange; display: flex; justify-content: space-between"
+    >
       <div>
         <span nz-icon style="color: #f0f0f0" nzType="exclamation-circle" nzTheme="outline"></span>
         <span style="color: #f0f0f0; margin-left: 4px"> {{ 'status.public.org.state.1' | i18n }} </span>
@@ -156,7 +172,7 @@
         <span style="color: #f0f0f0; margin-right: 4px; font-size: medium"> Updated {{ statusOrg.gmtUpdate | elapsedTime }} </span>
       </div>
     </div>
-    <div *ngIf="statusOrg.state == 2" class="org-status" style="background-color: red; display: flex; justify-content: space-between">
+    <div *ngIf="statusOrg.state == 2" class="org-status br-8" style="background-color: red; display: flex; justify-content: space-between">
       <div>
         <span nz-icon style="color: #f0f0f0" nzType="close-circle" nzTheme="outline"></span>
         <span style="color: #f0f0f0; margin-left: 4px"> {{ 'status.public.org.state.2' | i18n }} </span>
@@ -170,7 +186,8 @@
         <nz-collapse-panel *ngFor="let incident of incidentStatus" [nzHeader]="incidentHeader" nzShowArrow="false">
           <div
             *ngFor="let content of incident.contents"
-            style="border: 1px dotted green; border-radius: 8px; margin-bottom: 4px; background: #f8f6f3"
+            class="br-8"
+            style="border: 1px dotted green; margin-bottom: 4px; background: #f8f6f3"
           >
             <nz-list nzSize="small" nzSplit="false">
               <nz-list-item style="font-size: medium">
@@ -194,10 +211,7 @@
             </nz-list>
           </div>
           <ng-template #incidentHeader>
-            <div
-              style="width: 100%; border: 1px solid gray; border-radius: 8px"
-              [ngStyle]="{ borderColor: getStatusBorderColor(incident.state) }"
-            >
+            <div class="br-8" style="width: 100%; border: 1px solid gray" [ngStyle]="{ borderColor: getStatusBorderColor(incident.state) }">
               <div style="margin: 10px; display: flex; justify-content: space-between">
                 <div style="font-weight: bold; font-size: large">
                   <span>{{ incident.name }}</span>

diff --git a/web-app/src/app/routes/status-public/status-public.component.less b/web-app/src/app/routes/status-public/status-public.component.less
@@ -29,7 +29,6 @@
   font-size: 1.5rem;
   line-height: 2.0rem;
   border: 4px;
-  border-radius: 8px;
   padding: 0.75rem 1.25rem;
   margin: 0 auto;
 }
@@ -38,7 +37,6 @@
   width: 60%;
   margin: 10px auto;
   border: 1px dotted gray;
-  border-radius: 8px;
 }
 
 .history_block {

diff --git a/web-app/src/app/shared/components/help-massage-show/help-massage-show.component.html b/web-app/src/app/shared/components/help-massage-show/help-massage-show.component.html
@@ -17,7 +17,7 @@
   ~ under the License.
 -->
 
-<div #collapsed_content class="help_massage_div" id="collapsed">
+<div #collapsed_content class="help_massage_div br-8" id="collapsed">
   <div class="level1_breadcrumb" [ngClass]="{ collapsed: isCollapsed }">
     <div>
       <div class="flex help_massage_nav">

diff --git a/web-app/src/app/shared/components/help-massage-show/help-massage-show.component.less b/web-app/src/app/shared/components/help-massage-show/help-massage-show.component.less
@@ -4,7 +4,6 @@
   height: 140px;
   overflow-y: hidden;
   box-shadow: inset 1px 4px 6px 1px rgb(0 0 0 / 0.05);
-  border-radius: 8px;
 }
 .collapsed_content{
   overflow-y: hidden;

diff --git a/web-app/src/styles/theme.less b/web-app/src/styles/theme.less
@@ -24,8 +24,18 @@
     background-color: #ff4081;
 }
 
-.ant-btn, .ant-tag, .ant-card, .ant-input, .ant-input-affix-wrapper {
-    border-radius: 4px;
+.br-4, .ant-btn, .ant-tag, .ant-card, .ant-collapse, .ant-select-selector, .ant-input, .ant-input-affix-wrapper {
+    border-radius: 4px!important;
+}
+.ant-radio-button-wrapper:first-child {
+    border-radius: 4px 0 0 4px!important;
+}
+.ant-radio-button-wrapper:last-child {
+    border-radius: 0 4px 4px 0!important;
+}
+
+.br-8, .ant-modal-header, .ant-modal-content {
+  border-radius: 8px;
 }
 
 .ant-radio-group-solid .ant-radio-button-wrapper-checked:not(.ant-radio-button-wrapper-disabled) {
@@ -51,10 +61,6 @@
   border-color: #ff4081;
 }
 
-.ant-modal-header, .ant-modal-content {
-  border-radius: 8px;
-}
-
 .ant-modal-footer {
   text-align: center;
 }