From: nSedrickm <nsedrick101@gmail.com>
Date: Mon, 30 Mar 2020 17:38:22 +0000 (+0100)
Subject: octopus: mgr/dashboard: Proposed About Modal box
X-Git-Tag: v15.2.4~36^2
X-Git-Url: http://git-server-git.apps.pok.os.sepia.ceph.com/?a=commitdiff_plain;h=edbf158b1d87146f178f072fd64366e21a628cbc;p=ceph.git

octopus: 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>

(cherry picked from commit ea607b63f956d850d35911a1173cdc568d21948a)

Conflicts:
	src/pybind/mgr/dashboard/frontend/src/styles/bootstrap-extends.scss
Just additions, no real conflict
---

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 1a4fcd915ee6..8727b8dcc3ad 100644
--- 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 86f72b557bbc..55ba41ecab08 100644
--- 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
index 000000000000..93f2be1f6d2f
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
index 000000000000..c9b281d3ed94
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 b04131dff9ba..83ea59c76009 100644
--- 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;
+  }
+}