Merge pull request #35 from rhcs-dashboard/branding-4.0-about

Adds branding to about modal
rhcs-dashboard · Jan 28, 2019 · c8ffb9d · c8ffb9d
2 parents 7de63e1 + 860ec70
commit c8ffb9d
Show file tree

Hide file tree

Showing 7 changed files with 85 additions and 82 deletions.
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
@@ -1,60 +1,61 @@
-<div class="modal-header">
-  <button type="button"
-          class="close pull-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"
-         class="ceph-logo"
-         alt="{{ projectConstants.organization }}">
-    {{ projectConstants.organization }}
-  </h2>
-  <h3>
-    <strong>{{ projectConstants.projectName }}</strong>
-  </h3>
-  <div class="product-versions">
-    <strong>Version</strong>
-    <br>
-    {{ versionNumber }}
-    {{ versionHash }}
+<div class="about-modal-pf">
+  <div class="modal-header">
+    <button type="button"
+            class="close pull-right"
+            aria-label="Close"
+            (click)="modalRef.hide()">
+      <span aria-hidden="true">&times;</span>
+    </button>
+  </div>
+  <div class="modal-body">
+    <h2>
+      <img src="branding/assets/RHCSD-Login-Logo.svg"
+           class="ceph-logo"
+           alt="{{ projectConstants.projectName }}">
+    </h2>
     <br>
-    {{ versionName }}
+    <ul class="list-unstyled">
+      <li class="row">
+        <strong class="col-xs-6 col-sm-4">Version</strong>
+        <span class="col-xs-4 col-sm-4">{{ projectConstants.version }}</span>
+      </li>
+      <li class="row">
+        <strong class="col-xs-6 col-sm-4">Ceph Manager</strong>
+        <span class="col-xs-4 col-sm-4">{{ hostAddr }}</span>
+      </li>
+      <li class="row">
+        <strong class="col-xs-6 col-sm-4">User</strong>
+        <span class="col-xs-4 col-sm-4">{{ modalVariables.user }}</span>
+      </li>
+      <li class="row">
+        <strong class="col-xs-6 col-sm-4">User Role</strong>
+        <span class="col-xs-4 col-sm-4">{{ modalVariables.role }}</span>
+      </li>
+      <li class="row">
+        <strong class="col-xs-6 col-sm-4">Browser</strong>
+        <span class="col-xs-4 col-sm-4">{{ modalVariables.browserName }}</span>
+      </li>
+      <li class="row">
+        <strong class="col-xs-6 col-sm-4">Browser Version</strong>
+        <span class="col-xs-4 col-sm-4">{{ modalVariables.browserVersion }}</span>
+      </li>
+      <li class="row">
+        <strong class="col-xs-6 col-sm-4">Browser OS</strong>
+        <span class="col-xs-4 col-sm-4">{{ modalVariables.browserOS }}</span>
+      </li>
+    </ul>
+    <div class="trademark-pf">
+      <div class="text-left">
+        {{ copyright }}
+        <br>
+        {{ projectConstants.license }}
+        <br>
+        {{ projectConstants.licenseNumber }}
+      </div>
+    </div>
   </div>
-  <br>
-  <ul class="list-unstyled">
-    <li class="row">
-      <strong class="col-xs-6 col-sm-4">Ceph Manager</strong>
-      <span class="col-xs-4 col-sm-4">{{ hostAddr }}</span>
-    </li>
-    <li class="row">
-      <strong class="col-xs-6 col-sm-4">User</strong>
-      <span class="col-xs-4 col-sm-4">{{ modalVariables.user }}</span>
-    </li>
-    <li class="row">
-      <strong class="col-xs-6 col-sm-4">User Role</strong>
-      <span class="col-xs-4 col-sm-4">{{ modalVariables.role }}</span>
-    </li>
-    <li class="row">
-      <strong class="col-xs-6 col-sm-4">Browser</strong>
-      <span class="col-xs-4 col-sm-4">{{ modalVariables.browserName }}</span>
-    </li>
-    <li class="row">
-      <strong class="col-xs-6 col-sm-4">Browser Version</strong>
-      <span class="col-xs-4 col-sm-4">{{ modalVariables.browserVersion }}</span>
-    </li>
-    <li class="row">
-      <strong class="col-xs-6 col-sm-4">Browser OS</strong>
-      <span class="col-xs-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">
+    <img class="redhat_logo" src="branding/assets/Logo_RH_RGB_Reverse.png" alt="{{ projectConstants.organization }}">
+    <img src="branding/assets/RHCSD-About-Corner.png" alt="{{ projectConstants.organization }}">
   </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
@@ -1,3 +1,8 @@
+@import '../../../../branding/branding';
+
+.close {
+  color: $color-about-close;
+}
 .product-versions {
   margin-top: 30px;
 }
@@ -7,24 +12,31 @@
 .modal-header {
   border-bottom: none;
 }
-.modal-body {
-  padding-left: 80px;
-  padding-right: 80px;
-}
 .modal-footer {
   border-top: none;
 }
 h2 {
   font-size: 3em;
 }
 .ceph-logo {
-  width: 10%;
+  width: 80%;
+  margin-left: -10px;
 }
 .list-unstyled li {
   margin-top: 5px;
 }
 .modal-footer {
-  padding: 15px 80px 35px 80px;
+  padding: 0;
+  margin-top: -180px;
+  .redhat_logo {
+    width: 125px;
+    position: absolute;
+    bottom: 10px;
+    right: 20px;
+  }
+}
+.about-modal-pf {
+  background-image: none;
 }
 .modal-body {
   margin-top: 0;

diff --git a/src/pybind/mgr/dashboard/frontend/src/app/core/navigation/about/about.component.spec.ts b/src/pybind/mgr/dashboard/frontend/src/app/core/navigation/about/about.component.spec.ts
@@ -11,9 +11,6 @@ import { AboutComponent } from './about.component';
 
 export class SummaryServiceMock {
   summaryDataSource = new BehaviorSubject({
-    version:
-      'ceph version 14.0.0-855-gb8193bb4cd ' +
-      '(b8193bb4cda16ccc5b028c3e1df62bc72350a15d) nautilus (dev)',
     mgr_host: 'http://localhost:11000/'
   });
   summaryData$ = this.summaryDataSource.asObservable();
@@ -43,12 +40,6 @@ describe('AboutComponent', () => {
     expect(component).toBeTruthy();
   });
 
-  it('should parse version', () => {
-    expect(component.versionNumber).toBe('14.0.0-855-gb8193bb4cd');
-    expect(component.versionHash).toBe('(b8193bb4cda16ccc5b028c3e1df62bc72350a15d)');
-    expect(component.versionName).toBe('nautilus (dev)');
-  });
-
   it('should get host', () => {
     expect(component.hostAddr).toBe('localhost:11000');
   });

diff --git a/src/pybind/mgr/dashboard/frontend/src/app/core/navigation/about/about.component.ts b/src/pybind/mgr/dashboard/frontend/src/app/core/navigation/about/about.component.ts
@@ -17,9 +17,6 @@ import { SummaryService } from '../../../shared/services/summary.service';
 })
 export class AboutComponent implements OnInit, OnDestroy {
   modalVariables: any;
-  versionNumber: string;
-  versionHash: string;
-  versionName: string;
   subs: Subscription;
   userPermission: Permission;
   projectConstants: typeof AppConstants;
@@ -36,19 +33,15 @@ export class AboutComponent implements OnInit, OnDestroy {
   }
 
   ngOnInit() {
-    this.copyright = 'Copyright(c) ' + environment.year + ' Ceph contributors.';
     this.projectConstants = AppConstants;
+    this.copyright = 'Copyright(c) ' + environment.year + this.projectConstants.contributors;
     this.hostAddr = window.location.hostname;
     this.modalVariables = this.setVariables();
     this.subs = this.summaryService.subscribe((summary: any) => {
       if (!summary) {
         return;
       }
-      const version = summary.version.replace('ceph version ', '').split(' ');
       this.hostAddr = summary.mgr_host.replace(/(^\w+:|^)\/\//, '').replace(/\/$/, '');
-      this.versionNumber = version[0];
-      this.versionHash = version[1];
-      this.versionName = version.slice(2, version.length).join(' ');
     });
   }
 

diff --git a/src/pybind/mgr/dashboard/frontend/src/app/shared/constants/app.constants.ts b/src/pybind/mgr/dashboard/frontend/src/app/shared/constants/app.constants.ts
@@ -1,5 +1,8 @@
 export class AppConstants {
-  public static readonly organization = 'ceph';
-  public static readonly projectName = 'Ceph Manager Dashboard';
-  public static readonly license = 'Free software (LGPL 2.1).';
+  public static readonly version = '4.0';
+  public static readonly organization = 'Redhat';
+  public static readonly projectName = 'Red Hat Ceph Storage Dashboard';
+  public static readonly contributors = ' Red Hat Inc. and contributors';
+  public static readonly license = 'Licensed under Creative Commons Attribution Share Alike';
+  public static readonly licenseNumber = '3.0 (CC-BY-SA-3.0)';
 }
diff --git a/src/pybind/mgr/dashboard/frontend/src/branding/assets/RHCSD-About-Corner.png b/src/pybind/mgr/dashboard/frontend/src/branding/assets/RHCSD-About-Corner.png
diff --git a/src/pybind/mgr/dashboard/frontend/src/branding/branding.scss b/src/pybind/mgr/dashboard/frontend/src/branding/branding.scss
@@ -21,3 +21,6 @@ $color-disabled-button: $color-white-gray;
 $color-patternfly-progressbar: $color-grad-gray;
 $shadow-patternfly-progressbar: inset 0 0 1px rgba(3, 3, 3, 0.25);
 $color-patternfly-progressinfo: $color-patternfly-blue;
+
+/* About Modal */
+$color-about-close: $color-solid-white;