Extract styles from updateBar; use in notificationBar

EdikKing · Sep 11, 2016 · c63165f · c63165f
1 parent f6f9ac5
commit c63165f
Show file tree

Hide file tree

Showing 8 changed files with 137 additions and 127 deletions.
diff --git a/app/ledger.js b/app/ledger.js
@@ -1222,21 +1222,23 @@ const showNotifications = () => {
         balance + unconfirmed < 0.9 * Number(ledgerInfo.btc)) {
       addFundsMessage = addFundsMessage || locale.translation('addFundsNotification')
       appActions.showMessageBox({
+        greeting: locale.translation('updateHello'),
         message: addFundsMessage,
         buttons: [locale.translation('updateLater'),
           locale.translation('addFunds')],
         options: {
-          updateStyle: true, // TODO: Show this in the style of updateBar.less
+          style: 'greetingStyle',
           persist: false
         }
       })
     } else if (!reconciliationNotificationShown) {
       reconciliationMessage = reconciliationMessage || locale.translation('reconciliationNotification')
       appActions.showMessageBox({
+        greeting: locale.translation('updateHello'),
         message: reconciliationMessage,
         buttons: [locale.translation('reviewSites')],
         options: {
-          updateStyle: true,
+          style: 'greetingStyle',
           persist: false
         }
       })

diff --git a/docs/state.md b/docs/state.md
@@ -127,9 +127,10 @@ AppStore
     buttons: Array<string>,
     frameOrigin: (string|undefined), // origin that the notification is from, or undefined if not applicable.
     options: {
-      persist: boolean, // whether to show a 'Remember this decision' checkbox
       advancedText: string, // more info text
       advancedLink: string, // more info link URL
+      persist: boolean, // whether to show a 'Remember this decision' checkbox
+      style: string // css class for notification bar. See notificationBar.less
     }
   }], // the notifications for the frame. not preserved across restart.
   settings: [{

diff --git a/js/components/notificationBar.js b/js/components/notificationBar.js
@@ -33,16 +33,22 @@ class NotificationItem extends ImmutableComponent {
   render () {
     let i = 0
     const options = this.props.detail.get('options')
+    const greeting = this.props.detail.get('greeting')
     return <div className='notificationItem'>
-      <span className='notificationMessage'>{this.props.detail.get('message')}</span>
+      {
+        greeting
+          ? <span className='greeting'>{greeting}</span>
+          : null
+      }
+      <span className='message'>{this.props.detail.get('message')}</span>
       <span className='notificationAdvanced'>
         {
           options.get('advancedText') && options.get('advancedLink')
             ? <span onClick={this.openAdvanced.bind(this)}>{options.get('advancedText')}</span>
             : null
         }
       </span>
-      <span className='notificationOptions'>
+      <span className='options'>
         {
           options.get('persist')
             ? <span id='rememberOption'>
@@ -55,7 +61,7 @@ class NotificationItem extends ImmutableComponent {
           this.props.detail.get('buttons').map((button) =>
             <button
               type='button'
-              className='notificationButton'
+              className='button'
               onClick={this.clickHandler.bind(this, i++)}>{button}</button>
           )
         }
@@ -77,7 +83,8 @@ class NotificationBar extends ImmutableComponent {
       return null
     }
 
-    return <div className='notificationBar'>
+    const style = 'notificationBar ' + (activeNotifications.get(0).get('options').get('style') || '')
+    return <div className={style}>
     {
       activeNotifications.takeLast(3).map((notificationDetail) =>
         <NotificationItem detail={notificationDetail} />

diff --git a/js/components/updateBar.js b/js/components/updateBar.js
@@ -45,7 +45,7 @@ class UpdateHello extends ImmutableComponent {
   }
 
   render () {
-    return <span className='updateHello'>
+    return <span className='greeting'>
       <span onClick={this.onSpinnerClick.bind(this)}
         className={cx({
           fa: this.loading,
@@ -59,7 +59,7 @@ class UpdateHello extends ImmutableComponent {
 
 class UpdateHide extends ImmutableComponent {
   render () {
-    return <Button className='updateButton updateSecondaryButton'
+    return <Button className='button secondary'
       l10nId='updateHide'
       onClick={appActions.setUpdateStatus.bind(null, this.props.reset ? UpdateStatus.UPDATE_NONE : undefined, false, undefined)} />
   }
@@ -70,7 +70,7 @@ class UpdateLog extends ImmutableComponent {
     remote.shell.openItem(path.join(remote.app.getPath('userData'), 'updateLog.log'))
   }
   render () {
-    return <Button className='updateButton updateViewLogButton updateSecondaryButton'
+    return <Button className='button updateViewLogButton secondary'
       l10nId='updateViewLog'
       onClick={this.onViewLog.bind(this)} />
   }
@@ -80,22 +80,24 @@ class UpdateAvailable extends ImmutableComponent {
   render () {
     return <div>
       <UpdateHello updateStatus={this.props.updateStatus} l10nId='updateHello' />
-      <span className='updateMessage' data-l10n-id='updateAvail' />
-      <span className='updateRequiresRelaunch' data-l10n-id='updateRequiresRelaunch' />
-      <span className='updateSpacer' />
-      {
-        this.props.metadata && this.props.metadata.get('notes')
-        ? <Button className='updateButton updateDetails updateSecondaryButton'
-          l10nId='updateDetails'
-          onClick={windowActions.setReleaseNotesVisible.bind(null, true)} />
-        : null
-      }
-      <Button className='updateButton updateLaterButton updateSecondaryButton'
-        l10nId='updateLater'
-        onClick={appActions.setUpdateStatus.bind(null, UpdateStatus.UPDATE_AVAILABLE_DEFERRED, false, undefined)} />
-      <Button className='updateButton updateNowButton'
-        l10nId='updateNow'
-        onClick={appActions.setUpdateStatus.bind(null, UpdateStatus.UPDATE_APPLYING_RESTART, false, undefined)} />
+      <span className='message' data-l10n-id='updateAvail' />
+      <span className='message secondary' data-l10n-id='updateRequiresRelaunch' />
+      <span className='spacer' />
+      <span className='options'>
+        {
+          this.props.metadata && this.props.metadata.get('notes')
+          ? <Button className='button updateDetails secondary'
+            l10nId='updateDetails'
+            onClick={windowActions.setReleaseNotesVisible.bind(null, true)} />
+          : null
+        }
+        <Button className='button updateLaterButton secondary'
+          l10nId='updateLater'
+          onClick={appActions.setUpdateStatus.bind(null, UpdateStatus.UPDATE_AVAILABLE_DEFERRED, false, undefined)} />
+        <Button className='button primary'
+          l10nId='updateNow'
+          onClick={appActions.setUpdateStatus.bind(null, UpdateStatus.UPDATE_APPLYING_RESTART, false, undefined)} />
+      </span>
     </div>
   }
 }
@@ -104,10 +106,12 @@ class UpdateChecking extends ImmutableComponent {
   render () {
     return <div>
       <UpdateHello updateStatus={this.props.updateStatus} />
-      <span className='updateMessage' data-l10n-id='updateChecking' />
-      <span className='updateSpacer' />
-      <UpdateLog />
-      <UpdateHide />
+      <span className='message' data-l10n-id='updateChecking' />
+      <span className='spacer' />
+      <span className='options'>
+        <UpdateLog />
+        <UpdateHide />
+      </span>
     </div>
   }
 }
@@ -116,10 +120,12 @@ class UpdateDownloading extends ImmutableComponent {
   render () {
     return <div>
       <UpdateHello updateStatus={this.props.updateStatus} />
-      <span className='updateMessage' data-l10n-id='updateDownloading' />
-      <span className='updateSpacer' />
-      <UpdateLog />
-      <UpdateHide />
+      <span className='message' data-l10n-id='updateDownloading' />
+      <span className='spacer' />
+      <span className='options'>
+        <UpdateLog />
+        <UpdateHide />
+      </span>
     </div>
   }
 }
@@ -128,10 +134,12 @@ class UpdateError extends ImmutableComponent {
   render () {
     return <div>
       <UpdateHello updateStatus={this.props.updateStatus} l10nId='updateOops' />
-      <span className='updateMessage' data-l10n-id='updateError' />
-      <span className='updateSpacer' />
-      <UpdateLog />
-      <UpdateHide reset />
+      <span className='message' data-l10n-id='updateError' />
+      <span className='spacer' />
+      <span className='options'>
+        <UpdateLog />
+        <UpdateHide reset />
+      </span>
     </div>
   }
 }
@@ -140,9 +148,11 @@ class UpdateNotAvailable extends ImmutableComponent {
   render () {
     return <div>
       <UpdateHello updateStatus={this.props.updateStatus} l10nId='updateNotYet' />
-      <span className='updateMessage' data-l10n-id='updateNotAvail' />
-      <span className='updateSpacer' />
-      <UpdateHide reset />
+      <span className='message' data-l10n-id='updateNotAvail' />
+      <span className='spacer' />
+      <span className='options'>
+        <UpdateHide reset />
+      </span>
     </div>
   }
 }

diff --git a/less/button.less b/less/button.less
@@ -13,7 +13,7 @@
   padding: 0px 20px;
 }
 
-span.browserButton {
+.browserButton {
   cursor: default;
   display: inline-block;
   line-height: 30px;

diff --git a/less/notificationBar.less b/less/notificationBar.less
@@ -3,6 +3,7 @@
  * You can obtain one at http://mozilla.org/MPL/2.0/. */
 
 @import "variables.less";
+@import (reference) "button.less";
 
 .notificationBar {
   background-color: #ffefc0;
@@ -11,33 +12,49 @@
   width: 100%;
   padding: 6px 0;
 
-  .notificationItem {
-    padding: 0 12px;
-    line-height: 24px;
+  // e.g. Update available bar
+  &.greetingStyle {
+    background-color: #fff;
+    border-bottom: 1px solid #888;
+    padding: 6px 8px;
 
-    .notificationMessage {
-      color: #000;
-      font-size: 15px;
-      margin: auto 0;
-    }
+    .notificationItem {
+      padding: 2px 24px 2px 12px;
 
-    .notificationSecondaryButton {
-      background-color: #eee;
-    }
+      .button {
+        .browserButton();
 
-    .notificationButton {
-      padding: 2px 15px;
-      width: auto;
-      margin-right: 10px;
-    }
+        background-color: #eee;
+        border-style: none;
+        float: right;
+        font-size: 14px;
+        height: 25px;
+        line-height: 27px;
+        margin: auto 4px;
+        padding: 0px 25px;
+        width: auto;
 
-    .notificationOptions {
-      float: right;
-    }
+        &.primary {
+          background-color: @braveOrange;
+          color: #fff;
+          margin-right: 0px;
 
-    .notificationSpacer {
-      flex-grow: 1;
+          &:hover {
+            background-color: lighten(@braveOrange, 10%);
+            color: #fff !important;
+          }
+          &:active {
+            background-color: darken(@braveOrange, 10%);
+            color: #fff !important;
+          }
+        }
+      }
     }
+  }
+
+  .notificationItem {
+    padding: 0 12px 0 20px;
+    line-height: 24px;
 
     label {
       font-size: 15px;
@@ -50,8 +67,38 @@
       margin: 0 3px;
     }
 
-    button {
+    .button {
       font-size: 13px;
+      margin-right: 10px;
+      padding: 2px 15px;
+      width: auto;
+    }
+
+    .greeting {
+      color: @braveOrange;
+      font-size: 16px;
+      margin: auto 10px auto 0;
+    }
+
+    .message {
+      color: #000;
+      font-size: 15px;
+      margin: auto 0;
+
+      &.secondary {
+        color: #888;
+        font-size: 14px;
+        padding: 0;
+        margin: auto 0 auto 10px;
+      }
+    }
+
+    .options {
+      float: right;
+    }
+
+    .spacer {
+      flex-grow: 1;
     }
 
     .notificationAdvanced {