Add custom CSS classes to notification buttons

brave · Sep 10, 2016 · b8714f1 · b8714f1
1 parent acd6725
commit b8714f1
Show file tree

Hide file tree

Showing 8 changed files with 32 additions and 15 deletions.
diff --git a/app/filtering.js b/app/filtering.js
@@ -352,7 +352,10 @@ function registerPermissionHandler (session, partition) {
     }
 
     appActions.showMessageBox({
-      buttons: [locale.translation('deny'), locale.translation('allow')],
+      buttons: [
+        {text: locale.translation('deny')},
+        {text: locale.translation('allow')}
+      ],
       frameOrigin,
       options: {
         persist: true

diff --git a/app/index.js b/app/index.js
@@ -421,7 +421,10 @@ app.on('ready', () => {
         appActions.hideMessageBox(message)
       } else {
         appActions.showMessageBox({
-          buttons: [locale.translation('yes'), locale.translation('no')],
+          buttons: [
+            {text: locale.translation('yes')},
+            {text: locale.translation('no')}
+          ],
           options: {
             persist: false
           },
@@ -639,9 +642,9 @@ app.on('ready', () => {
         // Notification not shown already
         appActions.showMessageBox({
           buttons: [
-            locale.translation('yes'),
-            locale.translation('no'),
-            locale.translation('neverForThisSite')
+            {text: locale.translation('yes')},
+            {text: locale.translation('no')},
+            {text: locale.translation('neverForThisSite')}
           ],
           options: {
             persist: false,

diff --git a/app/ledger.js b/app/ledger.js
@@ -1224,8 +1224,10 @@ const showNotifications = () => {
       appActions.showMessageBox({
         greeting: locale.translation('updateHello'),
         message: addFundsMessage,
-        buttons: [locale.translation('updateLater'),
-          locale.translation('addFunds')],
+        buttons: [
+          {text: locale.translation('updateLater')},
+          {text: locale.translation('addFunds'), className: 'primary'}
+        ],
         options: {
           style: 'greetingStyle',
           persist: false
@@ -1236,7 +1238,9 @@ const showNotifications = () => {
       appActions.showMessageBox({
         greeting: locale.translation('updateHello'),
         message: reconciliationMessage,
-        buttons: [locale.translation('reviewSites')],
+        buttons: [
+          {text: locale.translation('reviewSites'), className: 'primary'}
+        ],
         options: {
           style: 'greetingStyle',
           persist: false

diff --git a/docs/state.md b/docs/state.md
@@ -124,7 +124,10 @@ AppStore
   },
   notifications: [{
     message: string,
-    buttons: Array<string>,
+    buttons: [{
+      text: string, // button text
+      className: string, // button class e.g. 'primary'. see notificationBar.less
+    }],
     frameOrigin: (string|undefined), // origin that the notification is from, or undefined if not applicable.
     options: {
       advancedText: string, // more info text

diff --git a/js/components/frame.js b/js/components/frame.js
@@ -544,7 +544,10 @@ class Frame extends ImmutableComponent {
       const message = locale.translation('allowFlashPlayer').replace(/{{\s*origin\s*}}/, this.origin)
       // Show Flash notification bar
       appActions.showMessageBox({
-        buttons: [locale.translation('deny'), locale.translation('allow')],
+        buttons: [
+          {text: locale.translation('deny')},
+          {text: locale.translation('allow')}
+        ],
         message,
         frameOrigin: this.origin,
         options: {

diff --git a/js/components/notificationBar.js b/js/components/notificationBar.js
@@ -61,8 +61,8 @@ class NotificationItem extends ImmutableComponent {
           this.props.detail.get('buttons').map((button) =>
             <button
               type='button'
-              className='button'
-              onClick={this.clickHandler.bind(this, i++)}>{button}</button>
+              className={'button ' + (button.get('className') || '')}
+              onClick={this.clickHandler.bind(this, i++)}>{button.get('text')}</button>
           )
         }
       </span>

diff --git a/js/stores/appStore.js b/js/stores/appStore.js
@@ -360,7 +360,9 @@ const handleAppAction = (action) => {
         })
 
         appActions.showMessageBox({
-          buttons: [locale.translation('ok')],
+          buttons: [
+            {text: locale.translation('ok')}
+          ],
           options: {
             persist: false
           },

diff --git a/less/notificationBar.less b/less/notificationBar.less
@@ -19,14 +19,13 @@
     padding: 6px 8px;
 
     .notificationItem {
-      padding: 2px 24px 2px 12px;
+      padding: 2px 28px 2px 12px;
 
       .button {
         .browserButton();
 
         background-color: #eee;
         border-style: none;
-        float: right;
         font-size: 14px;
         height: 25px;
         line-height: 27px;