From 5070f098036a07c14059b959e92c82ff15c41c89 Mon Sep 17 00:00:00 2001 From: SP12893678 <36910625+SP12893678@users.noreply.github.com> Date: Sun, 20 Oct 2024 14:05:55 +0800 Subject: [PATCH 1/2] [YUNIKORN-2609] Improve visual style of the Web UI --- angular.json | 1 + src/app/app.component.html | 32 +++--- src/app/app.component.scss | 98 +++++++++++-------- .../app-node-utilizations.component.html | 27 ++--- .../app-node-utilizations.component.scss | 13 ++- .../app-status/app-status.component.html | 2 +- .../app-status/app-status.component.scss | 3 +- .../apps-view/apps-view.component.scss | 8 +- .../container-status.component.html | 2 +- .../container-status.component.scss | 5 +- .../dashboard/dashboard.component.html | 16 +-- .../dashboard/dashboard.component.scss | 9 +- .../nodes-view/nodes-view.component.html | 3 +- .../nodes-view/nodes-view.component.scss | 14 +-- .../queues-view/queues-view.component.scss | 2 +- src/assets/images/config.svg | 3 + src/styles.scss | 18 +++- 17 files changed, 148 insertions(+), 108 deletions(-) create mode 100644 src/assets/images/config.svg diff --git a/angular.json b/angular.json index fd4c97b7..da0bfdf7 100644 --- a/angular.json +++ b/angular.json @@ -42,6 +42,7 @@ "styles": [ "src/styles.scss", "node_modules/@fontsource/roboto/index.css", + "node_modules/@fontsource/roboto/500.css", "node_modules/@fortawesome/fontawesome-free/css/all.css" ], "scripts": [], diff --git a/src/app/app.component.html b/src/app/app.component.html index 6b4c29ac..41f25610 100644 --- a/src/app/app.component.html +++ b/src/app/app.component.html @@ -26,24 +26,21 @@ @@ -93,7 +87,7 @@ matTooltipShowDelay="500" [matMenuTriggerFor]="helpMenu" > - + diff --git a/src/app/app.component.scss b/src/app/app.component.scss index d70ffde9..eea16b57 100644 --- a/src/app/app.component.scss +++ b/src/app/app.component.scss @@ -25,20 +25,20 @@ color: #b8bec4; font-size: 16px; z-index: 1; - -webkit-transition: width 0.8s ease; - -moz-transition: width 0.8s ease; - -o-transition: width 0.8s ease; - transition: width 0.8s ease; + -webkit-transition: width 0.4s ease; + -moz-transition: width 0.4s ease; + -o-transition: width 0.4s ease; + transition: width 0.4s ease; -webkit-font-smoothing: antialiased; } .navigation.open { width: 250px; font-size: 16px; - -webkit-transition: width 0.8s ease; - -moz-transition: width 0.8s ease; - -o-transition: width 0.8s ease; - transition: width 0.8s ease; + -webkit-transition: width 0.4s ease; + -moz-transition: width 0.4s ease; + -o-transition: width 0.4s ease; + transition: width 0.4s ease; } .navigation.open a > .fa { @@ -47,19 +47,19 @@ .navigation + .wrapper { margin-left: 50px; - -webkit-transition: margin-left 0.8s ease; - -moz-transition: margin-left 0.8s ease; - -o-transition: margin-left 0.8s ease; - transition: margin-left 0.8s ease; + -webkit-transition: margin-left 0.4s ease; + -moz-transition: margin-left 0.4s ease; + -o-transition: margin-left 0.4s ease; + transition: margin-left 0.4s ease; -webkit-font-smoothing: antialiased; } .navigation.open + .wrapper { margin-left: 250px; - -webkit-transition: margin-left 0.8s ease; - -moz-transition: margin-left 0.8s ease; - -o-transition: margin-left 0.8s ease; - transition: margin-left 0.8s ease; + -webkit-transition: margin-left 0.4s ease; + -moz-transition: margin-left 0.4s ease; + -o-transition: margin-left 0.4s ease; + transition: margin-left 0.4s ease; -webkit-font-smoothing: antialiased; } @@ -70,10 +70,10 @@ background: #313d54; height: 60px; overflow: hidden; - -webkit-transition: padding-left 0.8s ease, padding-top 0.8s ease; - -moz-transition: padding-left 0.8s ease, padding-top 0.8s ease; - -o-transition: padding-left 0.8s ease, padding-top 0.8s ease; - transition: padding-left 0.8s ease, padding-top 0.8s ease; + -webkit-transition: padding-left 0.4s ease, padding-top 0.4s ease; + -moz-transition: padding-left 0.4s ease, padding-top 0.4s ease; + -o-transition: padding-left 0.4s ease, padding-top 0.4s ease; + transition: padding-left 0.4s ease, padding-top 0.4s ease; -webkit-font-smoothing: antialiased; } @@ -89,10 +89,10 @@ .logo img { float: left; width: 38px; - -webkit-transition: width 0.8s ease; - -moz-transition: width 0.8s ease; - -o-transition: width 0.8s ease; - transition: width 0.8s ease; + -webkit-transition: width 0.4s ease; + -moz-transition: width 0.4s ease; + -o-transition: width 0.4s ease; + transition: width 0.4s ease; -webkit-font-smoothing: antialiased; } @@ -131,7 +131,7 @@ } .navigation .fa + span { - margin-left: 20px; + margin-left: 16px; flex: 1; } @@ -148,12 +148,22 @@ ul.navigation-primary { } .navigation > ul { + padding: 12px 5px; margin-top: 10px; + &:first-of-type { margin-top: 0; } } +.navigation.open > ul { + padding: 12px; +} + +.navigation li { + margin-bottom: 8px; +} + .navigation li:hover > a { color: #fff; background: #4d5258; @@ -161,26 +171,29 @@ ul.navigation-primary { .navigation li a { display: flex; - padding: 15px; + padding: 12px; white-space: nowrap; color: inherit; text-decoration: none; color: #fff; - -webkit-transition: padding 0.8s ease; - -moz-transition: padding 0.8s ease; - -o-transition: padding 0.8s ease; - transition: padding 0.8s ease; + -webkit-transition: 0.4s ease; + -moz-transition: 0.4s ease; + -o-transition: 0.4s ease; + transition: 0.4s ease; -webkit-font-smoothing: antialiased; + border-radius: 50%; + justify-content: center; } .navigation.open li a { padding-left: 25px; + border-radius: 24px; } .navigation li.active > a, .navigation li.active:hover > a { color: #fff; - background: #4d5258; + background: #4E5258; } .navigation li.active > a > .fa-caret-right { @@ -216,7 +229,7 @@ ul.navigation-primary { } .container-fluid { - padding-top: 61px; + padding-top: 58px; } // remove the beta tag when the feature is ready for production @@ -227,7 +240,7 @@ ul.navigation-primary { } .header { - height: 61px; + height: 58px; background: #fff; padding: 0 20px; border-bottom: 1px solid #e3e3e3; @@ -236,10 +249,10 @@ ul.navigation-primary { right: 0; top: 0; z-index: 100; - -webkit-transition: left 0.8s ease; - -moz-transition: left 0.8s ease; - -o-transition: left 0.8s ease; - transition: left 0.8s ease; + -webkit-transition: left 0.4s ease; + -moz-transition: left 0.4s ease; + -o-transition: left 0.4s ease; + transition: left 0.4s ease; } .navigation.open + * .header { @@ -255,19 +268,18 @@ ul.navigation-primary { .help-menu > .menu-trigger { background: transparent; font-size: 14px; - color: #666; - border: 1px solid #666; + background: #ddd; outline: none; cursor: pointer; &:hover { - background: #666; - color: #fff; + background: #ccc; } } ul.breadcrumb { font-size: 20px; + line-height: 26px; display: flex; list-style: none; margin: 0; @@ -276,8 +288,8 @@ ul.breadcrumb { ul.breadcrumb > li { margin-right: 5px; - margin-top: 18px; - margin-bottom: 20px; + margin-top: 16px; + margin-bottom: 16px; } ul.breadcrumb a { diff --git a/src/app/components/app-node-utilizations/app-node-utilizations.component.html b/src/app/components/app-node-utilizations/app-node-utilizations.component.html index 69f1f65d..78022bda 100644 --- a/src/app/components/app-node-utilizations/app-node-utilizations.component.html +++ b/src/app/components/app-node-utilizations/app-node-utilizations.component.html @@ -15,16 +15,17 @@ * See the License for the specific language governing permissions and * limitations under the License. --> - - - - Node Resource Utilization - - -
-
- -
-
- - \ No newline at end of file +
+ Node Resource Utilization +
+ + +
+
+ +
+
+ + +
+
\ No newline at end of file diff --git a/src/app/components/app-node-utilizations/app-node-utilizations.component.scss b/src/app/components/app-node-utilizations/app-node-utilizations.component.scss index a3f036cf..c802ee47 100644 --- a/src/app/components/app-node-utilizations/app-node-utilizations.component.scss +++ b/src/app/components/app-node-utilizations/app-node-utilizations.component.scss @@ -14,4 +14,15 @@ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. * See the License for the specific language governing permissions and * limitations under the License. - */ \ No newline at end of file + */ + + .app-node-utilizations { + + .title { + margin-bottom: 28px; + } + + .mat-mdc-card-content { + padding: 30px 30px; + } + } \ No newline at end of file diff --git a/src/app/components/app-status/app-status.component.html b/src/app/components/app-status/app-status.component.html index efe9e380..032eff30 100644 --- a/src/app/components/app-status/app-status.component.html +++ b/src/app/components/app-status/app-status.component.html @@ -20,7 +20,7 @@ Application Status - +
diff --git a/src/app/components/app-status/app-status.component.scss b/src/app/components/app-status/app-status.component.scss index 5f24275f..e2229c67 100644 --- a/src/app/components/app-status/app-status.component.scss +++ b/src/app/components/app-status/app-status.component.scss @@ -18,6 +18,7 @@ .status-wrapper { align-items: center; + gap: 8px; height: 220px; } .chart-wrapper { @@ -30,7 +31,7 @@ overflow: auto; margin: 0 auto; font-size: 0.8em; - font-weight: bold; + font-weight: 500; color: #666; > div { margin: 12px 0; diff --git a/src/app/components/apps-view/apps-view.component.scss b/src/app/components/apps-view/apps-view.component.scss index 6482dad5..67cd8e32 100644 --- a/src/app/components/apps-view/apps-view.component.scss +++ b/src/app/components/apps-view/apps-view.component.scss @@ -32,7 +32,7 @@ padding-right: 40px; .dropdown-label { color: #333; - font-size: 1.2em; + font-size: 14px; margin-right: 10px; } } @@ -52,7 +52,7 @@ .btn{ display: block; border: none; - padding: 13px 24px; + padding: 5px 16px; border-radius: 5px; font-size: 24px; transform: translateY(-13px); @@ -125,7 +125,7 @@ .mat-mdc-header-cell { font-size: 15px; - font-weight: bold; + font-weight: 500; color: #666; } .mat-mdc-cell { @@ -186,7 +186,7 @@ } .no-record { font-size: 14px; - font-weight: bold; + font-weight: 500; color: #666; width: 100%; text-align: center; diff --git a/src/app/components/container-status/container-status.component.html b/src/app/components/container-status/container-status.component.html index abc9a607..f49723db 100644 --- a/src/app/components/container-status/container-status.component.html +++ b/src/app/components/container-status/container-status.component.html @@ -20,7 +20,7 @@ Container Status - +
diff --git a/src/app/components/container-status/container-status.component.scss b/src/app/components/container-status/container-status.component.scss index c7a21c8a..07ca78da 100644 --- a/src/app/components/container-status/container-status.component.scss +++ b/src/app/components/container-status/container-status.component.scss @@ -18,6 +18,7 @@ .status-wrapper { align-items: center; + gap: 8px; height: 220px; } .chart-wrapper { @@ -27,7 +28,7 @@ max-width: 200px; margin: 0 auto; font-size: 0.8em; - font-weight: bold; + font-weight: 500; color: #666; > div { margin: 12px 0; @@ -39,4 +40,4 @@ float: right; padding-right: 20px; } -} +} \ No newline at end of file diff --git a/src/app/components/dashboard/dashboard.component.html b/src/app/components/dashboard/dashboard.component.html index 7cc895fd..2ea37922 100644 --- a/src/app/components/dashboard/dashboard.component.html +++ b/src/app/components/dashboard/dashboard.component.html @@ -17,33 +17,33 @@ --> -
+
-
Name
+
Name
{{ clusterInfo.clusterName }}
-
Status
+
Status
{{ clusterInfo.clusterStatus }}
-
Nodes
+
Nodes
{{ totalNodes | titlecase }}
-
NodeSort Policy
+
NodeSort Policy
{{ nodeSortPolicy | titlecase }}
-
Applications
+
Applications
{{ totalApplications | titlecase }}
-
Containers
+
Containers
{{ totalContainers | titlecase }}
-
Partition
+
Partition
{{ partitionName | titlecase }}
diff --git a/src/app/components/dashboard/dashboard.component.scss b/src/app/components/dashboard/dashboard.component.scss index eb4f1cfb..2f10123c 100644 --- a/src/app/components/dashboard/dashboard.component.scss +++ b/src/app/components/dashboard/dashboard.component.scss @@ -21,9 +21,14 @@ margin-bottom: 20px; } +.info-label { + font-size: 14px; + line-height: 19px; +} + .info-value { - margin-top: 6px; - font-size: 1.4em; + font-size: 18px; + line-height: 24px; } .cluster-info { diff --git a/src/app/components/nodes-view/nodes-view.component.html b/src/app/components/nodes-view/nodes-view.component.html index 013104ed..552c29be 100644 --- a/src/app/components/nodes-view/nodes-view.component.html +++ b/src/app/components/nodes-view/nodes-view.component.html @@ -34,8 +34,7 @@
- Filter - +
diff --git a/src/app/components/nodes-view/nodes-view.component.scss b/src/app/components/nodes-view/nodes-view.component.scss index dea1fcea..85b7f620 100644 --- a/src/app/components/nodes-view/nodes-view.component.scss +++ b/src/app/components/nodes-view/nodes-view.component.scss @@ -25,7 +25,7 @@ padding-right: 40px; .part-label { color: #333; - font-size: 1.2em; + font-size: 14px; margin-right: 10px; } } @@ -53,7 +53,7 @@ .btn{ display: block; border: none; - padding: 13px 24px; + padding: 5px 16px; border-radius: 5px; font-size: 24px; transform: translateY(-13px); @@ -71,7 +71,7 @@ height: 100%; .mat-mdc-header-cell { font-size: 15px; - font-weight: bold; + font-weight: 500; color: #666; } .mat-mdc-cell { @@ -124,7 +124,9 @@ .mat-mdc-cell.indicator-icon { max-width: 40px; font-size: 18px; - margin-left: 10px; + display: flex; + justify-content: center; + align-items: center; } .node-allocations { margin-top: 20px; @@ -134,7 +136,7 @@ } .no-record { font-size: 14px; - font-weight: bold; + font-weight: 500; color: #666; width: 100%; text-align: center; @@ -142,5 +144,5 @@ } .node-utilizations-view { - margin-top: 20px + margin-top: 80px } diff --git a/src/app/components/queues-view/queues-view.component.scss b/src/app/components/queues-view/queues-view.component.scss index a2941e5a..9e982b69 100644 --- a/src/app/components/queues-view/queues-view.component.scss +++ b/src/app/components/queues-view/queues-view.component.scss @@ -18,7 +18,7 @@ .part-label { color: #333; - font-size: 1.2em; + font-size: 14px; margin-right: 10px; } .queues-view { diff --git a/src/assets/images/config.svg b/src/assets/images/config.svg new file mode 100644 index 00000000..ead8285a --- /dev/null +++ b/src/assets/images/config.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/styles.scss b/src/styles.scss index 1e5bcea0..8dfc8b18 100644 --- a/src/styles.scss +++ b/src/styles.scss @@ -15,6 +15,8 @@ * See the License for the specific language governing permissions and * limitations under the License. */ +@use '@angular/material' as mat; + @import '~@angular/material/prebuilt-themes/indigo-pink.css'; * { @@ -26,6 +28,7 @@ } body { + @include mat.form-field-density(-4); font-family: 'Roboto', sans-serif; font-size: 14px; color: #666; @@ -102,6 +105,10 @@ p { display: flex; } +.align-center { + align-items: center; +} + .flex-primary { flex-grow: 1; } @@ -113,15 +120,18 @@ p { color: #666; background-color: #f7f7f7; border-bottom: 1px solid #d5d5d5; - padding: 15px 10px; + padding: 20px; } .mat-mdc-card-title { - margin-left: -5px; - font-weight: bold; + font-size: 18px; + line-height: 24px; margin-bottom: 0 !important; } .mat-mdc-card-content { - padding: 10px; + padding: 60px 50px; + } + .thin-card-content { + padding: 60px 16px; } } From 67922a62fb03bf9d3fe3622221b69b59b4f6bc5f Mon Sep 17 00:00:00 2001 From: SP12893678 <36910625+SP12893678@users.noreply.github.com> Date: Mon, 28 Oct 2024 20:44:49 +0800 Subject: [PATCH 2/2] Remove meaningless input placeholder --- src/app/components/nodes-view/nodes-view.component.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/app/components/nodes-view/nodes-view.component.html b/src/app/components/nodes-view/nodes-view.component.html index 552c29be..b4b1b897 100644 --- a/src/app/components/nodes-view/nodes-view.component.html +++ b/src/app/components/nodes-view/nodes-view.component.html @@ -34,7 +34,7 @@
- +