mgr/dashboard: Proposed About Modal box

This commit implements proposed about modal box
Fixes : https://tracker.ceph.com/issues/35693
Signed-off-by: Ngwa Sedrick Meh <nsedrick101@gmail.com>

diff --git a/src/pybind/mgr/dashboard/frontend/src/app/core/navigation/about/about.component.html b/src/pybind/mgr/dashboard/frontend/src/app/core/navigation/about/about.component.html
index 1a4fcd915ee6b826832a14453c792c05cd0c9f71..8727b8dcc3ad25b6e1d1a4799cf88591d4ce743a 100644 (file)
--- a/src/pybind/mgr/dashboard/frontend/src/app/core/navigation/about/about.component.html
+++ b/src/pybind/mgr/dashboard/frontend/src/app/core/navigation/about/about.component.html
@@ -1,60 +1,47 @@
-<div class="modal-header">
-  <button type="button"
-          class="close float-right"
-          aria-label="Close"
-          (click)="modalRef.hide()">
-    <span aria-hidden="true">&times;</span>
-  </button>
-</div>
-<div class="modal-body">
-  <h2>
-    <img src="assets/Ceph_Logo_Stacked_RGB_120411_fa_348x348.png"
+<div class="about-container">
+  <div class="modal-header">
+    <button type="button"
+            class="close float-right"
+            aria-label="Close"
+            (click)="modalRef.hide()">
+      <span aria-hidden="true">&times;</span>
+    </button>
+  </div>
+  <div class="modal-body">
+    <img src="assets/Ceph_Logo_Standard_RGB_Reversed_120411_fa.png"
          class="ceph-logo"
          alt="{{ projectConstants.organization }}">
-    {{ projectConstants.organization }}
-  </h2>
-  <h3>
-    <strong>{{ projectConstants.projectName }}</strong>
-  </h3>
-  <div class="product-versions">
-    <strong>Version</strong>
+    <h3>
+      <strong>{{ projectConstants.projectName }}</strong>
+    </h3>
+    <div class="product-versions">
+      <strong>Version</strong>
+      <br>
+      {{ versionNumber }}
+      {{ versionHash }}
+      <br>
+      {{ versionName }}
+    </div>
     <br>
-    {{ versionNumber }}
-    {{ versionHash }}
-    <br>
-    {{ versionName }}
+    <dl>
+      <dt>Ceph Manager</dt>
+      <dd>{{ hostAddr }}</dd>
+      <dt>User</dt>
+      <dd>{{ modalVariables.user }}</dd>
+      <dt>User Role</dt>
+      <dd>{{ modalVariables.role }}</dd>
+      <dt>Browser</dt>
+      <dd>{{ modalVariables.browserName }}</dd>
+      <dt>Browser Version</dt>
+      <dd>{{ modalVariables.browserVersion }}</dd>
+      <dt>Browser OS</dt>
+      <dd>{{ modalVariables.browserOS }}</dd>
+    </dl>
   </div>
-  <br>
-  <ul class="list-unstyled">
-    <li class="row">
-      <strong class="col-6 col-sm-4">Ceph Manager</strong>
-      <span class="col-4 col-sm-4">{{ hostAddr }}</span>
-    </li>
-    <li class="row">
-      <strong class="col-6 col-sm-4">User</strong>
-      <span class="col-4 col-sm-4">{{ modalVariables.user }}</span>
-    </li>
-    <li class="row">
-      <strong class="col-6 col-sm-4">User Role</strong>
-      <span class="col-4 col-sm-4">{{ modalVariables.role }}</span>
-    </li>
-    <li class="row">
-      <strong class="col-6 col-sm-4">Browser</strong>
-      <span class="col-4 col-sm-4">{{ modalVariables.browserName }}</span>
-    </li>
-    <li class="row">
-      <strong class="col-6 col-sm-4">Browser Version</strong>
-      <span class="col-4 col-sm-4">{{ modalVariables.browserVersion }}</span>
-    </li>
-    <li class="row">
-      <strong class="col-6 col-sm-4">Browser OS</strong>
-      <span class="col-4 col-sm-4">{{ modalVariables.browserOS }}</span>
-    </li>
-  </ul>
-</div>
-<div class="modal-footer">
-  <div class="text-left">
-    {{ copyright }}
-    {{ projectConstants.license }}
+  <div class="modal-footer">
+    <div class="text-left">
+      {{ copyright }}
+      {{ projectConstants.license }}
+    </div>
   </div>
 </div>

diff --git a/src/pybind/mgr/dashboard/frontend/src/app/core/navigation/about/about.component.scss b/src/pybind/mgr/dashboard/frontend/src/app/core/navigation/about/about.component.scss
index 86f72b557bbc7b09e0dddf1c9677badf3695b860..55ba41ecab08fd72b3d8ddda067e19c7a958e49e 100644 (file)
--- a/src/pybind/mgr/dashboard/frontend/src/app/core/navigation/about/about.component.scss
+++ b/src/pybind/mgr/dashboard/frontend/src/app/core/navigation/about/about.component.scss
@@ -1,3 +1,11 @@
+.about-container {
+  background-color: #374249;
+  background-image: url('assets/ceph_login_bgimage_fix.png');
+  background-position: right bottom;
+  background-repeat: no-repeat;
+  color: #fff;
+  text-shadow: 1px 1px #374249;
+}
 .product-versions {
   margin-top: 30px;
 }
@@ -7,30 +15,21 @@
 .modal-header {
   border-bottom: none;
 }
+.modal-header .close {
+  color: #fff;
+  font-size: 2em;
+}
 .modal-body {
   padding-left: 80px;
   padding-right: 80px;
 }
-.modal-footer {
-  border-top: none;
-}
-h2 {
-  font-size: 3em;
-}
 .ceph-logo {
-  width: 10%;
-}
-.list-unstyled li {
-  margin-top: 5px;
+  width: 25%;
+  margin-bottom: 30px;
+  object-position: -20px 0;
 }
 .modal-footer {
+  display: block;
+  border-top: none;
   padding: 15px 80px 35px 80px;
 }
-.modal-body {
-  margin-top: 0;
-  padding-top: 0;
-
-  h2 {
-    margin-top: 0;
-  }
-}

diff --git a/src/pybind/mgr/dashboard/frontend/src/assets/Ceph_Logo_Standard_RGB_Reversed_120411_fa.png b/src/pybind/mgr/dashboard/frontend/src/assets/Ceph_Logo_Standard_RGB_Reversed_120411_fa.png
new file mode 100644 (file)
index 0000000..93f2be1
Binary files /dev/null and b/src/pybind/mgr/dashboard/frontend/src/assets/Ceph_Logo_Standard_RGB_Reversed_120411_fa.png differ

diff --git a/src/pybind/mgr/dashboard/frontend/src/assets/ceph_login_bgimage_fix.png b/src/pybind/mgr/dashboard/frontend/src/assets/ceph_login_bgimage_fix.png
new file mode 100644 (file)
index 0000000..c9b281d
Binary files /dev/null and b/src/pybind/mgr/dashboard/frontend/src/assets/ceph_login_bgimage_fix.png differ

diff --git a/src/pybind/mgr/dashboard/frontend/src/styles/bootstrap-extends.scss b/src/pybind/mgr/dashboard/frontend/src/styles/bootstrap-extends.scss
index b04131dff9ba7af07c042f31deeff3a011e3c3a6..83ea59c76009bda8a4c141fe79954ac9ec6c0954 100644 (file)
--- a/src/pybind/mgr/dashboard/frontend/src/styles/bootstrap-extends.scss
+++ b/src/pybind/mgr/dashboard/frontend/src/styles/bootstrap-extends.scss
@@ -74,3 +74,16 @@ cd-logs {
     @extend .mb-3;
   }
 }
+
+cd-about {
+  dl {
+    @extend .row;
+  }
+  dt {
+    @extend .col-4;
+    @extend .font-weight-bold;
+  }
+  dd {
+    @extend .col-8;
+  }
+}