Merge pull request #1391 from mohitsuman/gh-1390

Css update for version update on welcome page

Author: mohitsuman

browser/app.css

@@ -288,36 +288,13 @@ footer {
     margin-right: 13px;
   }
 
-  /* .spinner {
-    display: inline-block;
-    opacity: 0;
-    width: 0;
-
-    -webkit-transition: opacity 0.25s, width 0.25s;
-    -moz-transition: opacity 0.25s, width 0.25s;
-    -o-transition: opacity 0.25s, width 0.25s;
-    transition: opacity 0.25s, width 0.25s;
-  } */
-
   .spinner.spinner-bgcolour {
-    /* animation: rotation 600ms infinite linear;
-    border-bottom: 4px solid rgba(3, 3, 3, 0.25);
-    border-left: 4px solid rgba(3, 3, 3, 0.25);
-    border-right: 4px solid rgba(3, 3, 3, 0.25);
-    border-radius: 100%; */
     border-top: 4px solid #00a8e1;
     border-width: 5px;
     height: 29px;
     width: 29px;
-    /* margin: 0 auto;
-    position: relative; */
-  }
 
-  /* .spinner.spinner-lg {
-    border-width: 15px;
-    height: 120px;
-    width: 120px;
-  } */
+  }
 
   .has-spinner.active {
     cursor:progress;
@@ -409,17 +386,30 @@ footer {
 
   .footer-version {
     position: absolute;
-    bottom: 16px;
+    /* bottom: 16px; */
     left: 16px;
-    font-size: 15px;
+    margin-left: 65px;
+    font-weight: 600;
+    padding-top: 2px;
   }
 
   .footer-version-new {
     color: #c00;
+    font-weight: 400;
+  }
+
+  .footer-version-check {
+    margin-right: 4px;
+    top: 2px;
   }
 
   .footer-version-current {
-    color: green;
+    color: #1b96d5;
+  }
+
+  .footer-version-field {
+    font-weight: 700;
+    font-size: 13px;
   }
 
   .footer-border{
@@ -1056,4 +1046,34 @@ footer {
     border-radius: 1px;
     text-transform: uppercase;
   }
+
+  .effect-icon {
+    transition: all 0.2s linear 0s;
+  }
+
+  .effect-icon:before {
+    content: "\f019";
+    font-family: FontAwesome;
+    font-size: 15px;
+    position: absolute;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    right: -30px;
+    top: 10px;
+    opacity: 0;
+    height: 100%;
+    width: 40px;
+    transition: all 0.2s linear 0s;
+  }
+    
+  .effect-icon:hover {
+      text-indent: -20px;
+  }
+
+  .effect-icon:hover::before {
+    opacity: 1;
+    text-indent: 0px;
+  }
+
 }

browser/pages/welcome/controller.js

@@ -15,7 +15,6 @@ class WelcomeController {
 
     this.URL_DM_DEVSUITE_INFO = 'https://developers.redhat.com/download-manager/rest/available/devsuite/?nv=1';
     this.URL_DEVSUITE_DOWNLOAD_PAGE = 'https://developers.redhat.com/products/devsuite/download/';
-    this.URL_DEVELOPER_PROGRAM_SITE = 'https://developers.redhat.com';
   }
 
   next() {
@@ -30,9 +29,9 @@ class WelcomeController {
     };
 
     return this.http(req).then((data)=>{
-      let version = this.scope.version;
+      let appVersion = this.scope.version;
       let devsuiteVersion = data.data[0].featuredArtifact.versionName;
-      let numericVersion = version.split('-')[0];
+      let numericVersion = appVersion.split('-')[0];
       if (Version.GT(devsuiteVersion, numericVersion)) {
         this.scope.newVersion = devsuiteVersion;
         this.scope.status = 'New';
@@ -54,9 +53,6 @@ class WelcomeController {
     this.electron.remote.getCurrentWindow().close();
   }
 
-  openDevSuiteOverview() {
-    this.electron.shell.openExternal(this.URL_DEVELOPER_PROGRAM_SITE);
-  }
 }
 
 WelcomeController.$inject = ['$state', '$scope', 'electron', 'request'];

browser/pages/welcome/welcome.html

@@ -48,21 +48,19 @@
 </main>
 
 <footer id="footer-navigation" class="no-background-color">
-
   <div class="form-group pull-right form-buttons">
-    <div ng-show="status=='New'">
-      <button type="button" class="btn btn-primary btn-lg version-check" ng-click="welcomeCtrl.downloadLatestVersion()">
-        <span>Download latest version</span>
-      </button>
-    </div>
-      <button id="welcomeNextButton" type="button" class="go-btn footer-btns btn btn-primary btn-lg" form="welcomeForm"
-        ng-click="welcomeCtrl.next()" autofocus>
+    <button id="welcomeNextButton" type="button" class="go-btn footer-btns btn btn-primary btn-lg" form="welcomeForm" ng-click="welcomeCtrl.next()" autofocus>
       <span id="welcome-form-btn-text">Next</span>
     </button>
   </div>
-  <span class="footer-version">Version: {{version}}
-    <span ng-show="status=='Checking'">(Checking for Development Suite Installer updates)</span>
-    <span class="footer-version-new" ng-show="status=='New'">(New Development Suite Installer {{newVersion}} is available)</span>
-    <span class="footer-version-current" ng-show="status=='Current' || status=='Error'">(Development Suite Installer is up to date)</span>
+  <span class="footer-version">
+    <span class="footer-version-field">Version: {{version}}</span>
+    <div ng-if="status=='Checking'">
+      <div class="spinner spinner-xs inline footer-version-check"></div><span>Checking for new version</span>
+    </div>
+    <div class="footer-version-new" ng-if="status=='New'">Update Available: {{newVersion}}&nbsp;
+      <span class="effect-icon pointer" ng-click="welcomeCtrl.downloadLatestVersion()">| Download</span>
+    </div>
+    <div class="footer-version-current" ng-if="status=='Current' || status=='Error'">Installer is up to date.</div>
   </span>
 </footer>

package-lock.json

@@ -41,12 +41,6 @@ describe('WelcomeController', function() {
     sandbox.restore();
   });
 
-  it('openDevSuiteOverview opens external browser with devsuite page', function() {
-    sandbox.stub(electron.shell, 'openExternal');
-    welcomeController.openDevSuiteOverview();
-    expect(electron.shell.openExternal).calledOnce;
-  });
-
   describe('next', function() {
     beforeEach(function() {
       sandbox.stub(welcomeController.router, 'go');