New icons for feedchooser/premium. Adding premium menu option. Moving from radio payment amount controls to single checkbox, graciously inspired by @pbones.

media/css/reader.css

@@ -5927,7 +5927,11 @@ form.opml_import_form input {
     background-size: 18px;
 }
 .NB-menu-manage .NB-menu-manage-feedchooser .NB-menu-manage-image {
-    background: transparent url('/media/embed/icons/silk/color_swatch.png') no-repeat  0 2px;
+    background: transparent url('/media/embed/icons/silk/color_swatch.png') no-repeat  1px 2px;
+}
+.NB-menu-manage .NB-menu-manage-premium .NB-menu-manage-image {
+    background: transparent url('/media/embed/icons/circular/g_icn_greensun.png') no-repeat  0 0px;
+    background-size: 18px;
 }
 .NB-menu-manage .NB-menu-manage-story-thirdparty .NB-menu-manage-image {
     background: transparent url('/media/embed/icons/circular/menu_icn_mail.png') no-repeat 0 1px;
@@ -7262,6 +7266,7 @@ form.opml_import_form input {
 
 .NB-modal-feedchooser {
     overflow: hidden;
+    position: relative;
 }
 
 .NB-modal-feedchooser .NB-modal-subtitle {
@@ -7281,16 +7286,18 @@ form.opml_import_form input {
 }
 
 .NB-modal-feedchooser .NB-feedchooser-type {
-    float: left;
     width: 345px;
     margin: 0 52px 0 26px;
     padding: 0;
 }
 
-.NB-modal-feedchooser .NB-feedchooser-type.NB-last {
+.NB-modal-feedchooser .NB-feedchooser-type.NB-right {
     margin: 0 0 0 0;
+    width: 375px;
     padding: 0 0 0 52px;
-    margin-right: 0;
+    margin-right: 24px;
+    float: right;
+    position: relative;
     border-left: 1px solid #B0B0B0;
 }
 
@@ -7448,16 +7455,18 @@ form.opml_import_form input {
     padding: 4px 0 4px 36px;
     text-shadow: 1px 1px 0 #FFF8B1;
     clear: both;
-    cursor: pointer;
     position: relative;
-    color: #9BA6CC;    
+    color: #9BA6CC;
+    display: none;
     
     -webkit-transition: all .24s ease-out;
     -moz-transition: all .24s ease-out;
     -o-transition: all .24s ease-out;
     -ms-transition: all .24s ease-out;
 }
-
+.NB-modal-feedchooser .NB-feedchooser-dollar-value.NB-selected {
+    display: block;
+}
 .NB-modal-feedchooser .NB-feedchooser-dollar-value:hover,
 .NB-modal-feedchooser .NB-feedchooser-dollar-value.NB-selected {
     color: #727BA0;
@@ -7513,6 +7522,16 @@ form.opml_import_form input {
 .NB-modal-feedchooser .NB-selected .NB-feedchooser-dollar-year {
     color: #455596;
 }
+.NB-modal-feedchooser .NB-feedchooser-payextra {
+    margin: 6px 0;
+}
+.NB-modal-feedchooser #NB-feedchooser-payextra-checkbox {
+    margin: 0 6px;
+    cursor: pointer;
+}
+.NB-modal-feedchooser .NB-feedchooser-payextra label {
+    cursor: pointer;
+}
 
 .NB-modal-feedchooser .NB-feedchooser .feed_counts {
     display: block;
@@ -7607,14 +7626,14 @@ form.opml_import_form input {
     padding: 0;
     font-size: 13px;
     color: #505050;
-    text-shadow: 1px 1px 0 #F0F0F0;
+    text-shadow: 0px 1px 0 rgba(255, 255, 255, .6);
     font-weight: bold;
 }
 
 .NB-modal-feedchooser .NB-feedchooser-premium-bullets li {
     margin: 0 0 8px 20px;
     padding: 3px 8px 4px;
-    background-color: #F6F6F6;
+    background-color: #F7F7F5;
     position: relative;
 }
 
@@ -7627,29 +7646,29 @@ form.opml_import_form input {
 }
     
 .NB-modal-feedchooser .NB-feedchooser-premium-bullets li.NB-1 .NB-feedchooser-premium-bullet-image {
-    background: transparent url('/media/embed/icons/silk/pictures.png') no-repeat 0 0;
+    background: transparent url('/media/embed/icons/circular/g_icn_buffer.png') no-repeat 0 0;
+    background-size: 16px;
 }
 .NB-modal-feedchooser .NB-feedchooser-premium-bullets li.NB-2 .NB-feedchooser-premium-bullet-image {
-    background: transparent url('/media/embed/icons/silk/lightning.png') no-repeat 0 0;
+    background: transparent url('/media/embed/icons/circular/g_icn_lightning.png') no-repeat 0 0;
+    background-size: 16px;
 }
 .NB-modal-feedchooser .NB-feedchooser-premium-bullets li.NB-3 .NB-feedchooser-premium-bullet-image {
-    background: transparent url('/media/embed/icons/silk/images.png') no-repeat 0 0;
+    background: transparent url('/media/embed/icons/circular/g_icn_folder_black.png') no-repeat 0 0;
+    background-size: 16px;
 }
 .NB-modal-feedchooser .NB-feedchooser-premium-bullets li.NB-4 .NB-feedchooser-premium-bullet-image {
-    background: transparent url('/media/embed/icons/circular/g_icn_lock.png') no-repeat 0 0;
+    background: transparent url('/media/embed/icons/circular/g_icn_privacy.png') no-repeat 0 0;
     background-size: 16px;
 }
 .NB-modal-feedchooser .NB-feedchooser-premium-bullets li.NB-5 .NB-feedchooser-premium-bullet-image {
-    background: transparent url('/media/embed/icons/circular/g_icn_fav_active.png') no-repeat 0 0;
+    background: transparent url('/media/embed/icons/circular/g_icn_textview.png') no-repeat 0 0;
     background-size: 16px;
 }
 .NB-modal-feedchooser .NB-feedchooser-premium-bullets li.NB-6 .NB-feedchooser-premium-bullet-image {
-    background: transparent url('/media/embed/icons/silk/lorry.png') no-repeat 0 0;
+    background: transparent url('/media/embed/icons/circular/g_icn_eating.png') no-repeat 0 0;
+    background-size: 16px;
 }
-.NB-modal-feedchooser .NB-feedchooser-premium-bullets li.NB-7 .NB-feedchooser-premium-bullet-image {
-    background: transparent url('/media/embed/icons/silk/lightbulb.png') no-repeat 0 0;
-}
-
 .NB-modal-feedchooser .NB-feedchooser-premium-bullets .NB-feedchooser-premium-poor-hungry-dog {
     display: block;
     margin: 12px auto 4px;
@@ -10139,4 +10158,5 @@ form.opml_import_form input {
 }
 .NB-static-feedchooser .NB-feedchooser-premium-bullets li {
     background-color: rgba(255, 255, 255, .4);
+    list-style: none;
 }

media/js/newsblur/reader/reader.js

@@ -2529,8 +2529,8 @@
             NEWSBLUR.account = new NEWSBLUR.ReaderAccount(options);
         },
         
-        open_feedchooser_modal: function() {
-            NEWSBLUR.feedchooser = new NEWSBLUR.ReaderFeedchooser();
+        open_feedchooser_modal: function(options) {
+            NEWSBLUR.feedchooser = new NEWSBLUR.ReaderFeedchooser(options);
         },
         
         open_feed_exception_modal: function(feed_id) {
@@ -2645,6 +2645,10 @@
                         $.make('div', { className: 'NB-menu-manage-title' }, 'Choose Your 64 sites'),
                         $.make('div', { className: 'NB-menu-manage-subtitle' }, 'Enable the sites you want.')
                     ])),
+                    (show_chooser && $.make('li', { className: 'NB-menu-item NB-menu-manage-premium' }, [
+                        $.make('div', { className: 'NB-menu-manage-image' }),
+                        $.make('div', { className: 'NB-menu-manage-title' }, 'Upgrade to premium')
+                    ])),
                     $.make('li', { className: 'NB-menu-separator' }), 
                     $.make('li', { className: 'NB-menu-item NB-menu-manage-keyboard' }, [
                         $.make('div', { className: 'NB-menu-manage-image' }),
@@ -5018,6 +5022,14 @@
                     });
                 }
             });  
+            $.targetIs(e, { tagSelector: '.NB-menu-manage-premium' }, function($t, $p){
+                e.preventDefault();
+                if (!$t.hasClass('NB-disabled')) {
+                    $.modal.close(function() {
+                        self.open_feedchooser_modal({'premium_only': true});
+                    });
+                }
+            });  
             $.targetIs(e, { tagSelector: '.NB-module-account-upgrade' }, function($t, $p){
                 e.preventDefault();
                 if (!$t.hasClass('NB-disabled')) {

media/js/newsblur/reader/reader_feedchooser.js

@@ -1,5 +1,7 @@
 NEWSBLUR.ReaderFeedchooser = function(options) {
-    var defaults = {};
+    var defaults = {
+        'premium_only': NEWSBLUR.Globals.is_premium
+    };
 
     this.options = $.extend({}, defaults, options);
     this.model = NEWSBLUR.assets;
@@ -15,7 +17,7 @@ NEWSBLUR.ReaderFeedchooser.prototype = {
         this.make_modal();
         this.make_paypal_button();
         _.defer(_.bind(function() { this.open_modal(); }, this));
-        if (!NEWSBLUR.Globals.is_premium) {
+        if (!this.options.premium_only) {
             this.find_feeds_in_feed_list();
             this.initial_load_feeds(true);
         }
@@ -25,45 +27,17 @@ NEWSBLUR.ReaderFeedchooser.prototype = {
             'has_saved': false
         };
         
-        this.$modal.bind('mousedown', $.rescope(this.handle_click, this));
+        this.$modal.bind('mousedown', $.rescope(this.handle_mousedown, this));
+        this.$modal.bind('change', $.rescope(this.handle_change, this));
     },
     
     make_modal: function() {
         var self = this;
         
-        this.$modal = $.make('div', { className: 'NB-modal-feedchooser NB-modal ' + (NEWSBLUR.Globals.is_premium ? "NB-feedchooser-premium" : "NB-feedchooser-standard") }, [
+        this.$modal = $.make('div', { className: 'NB-modal-feedchooser NB-modal ' + (this.options.premium_only ? "NB-feedchooser-premium" : "NB-feedchooser-standard") }, [
             // $.make('h2', { className: 'NB-modal-title' }, 'Choose Your '+this.MAX_FEEDS),
-            (!NEWSBLUR.Globals.is_premium && $.make('div', { className: 'NB-feedchooser-type NB-feedchooser-left'}, [
-              $.make('div', { className: 'NB-feedchooser-info'}, [
-                  $.make('div', { className: 'NB-feedchooser-info-type' }, [
-                        $.make('span', { className: 'NB-feedchooser-subtitle-type-prefix' }, 'Free'),
-                        ' Standard Account'
-                  ]),
-                    $.make('h2', { className: 'NB-modal-subtitle' }, [
-                        $.make('b', [
-                            'You can follow up to '+this.MAX_FEEDS+' sites.'
-                        ]),
-                        $.make('br'),
-                        'You can always change these.'
-                    ]),
-                  $.make('div', { className: 'NB-feedchooser-info-counts'}),
-                  $.make('div', { className: 'NB-feedchooser-info-sort'}, 'Auto-Selected By Popularity'),
-                  $.make('div', { className: 'NB-feedchooser-info-reset NB-splash-link'}, 'Reset to popular sites')
-              ]),
-              this.make_feeds(),
-              $.make('form', { className: 'NB-feedchooser-form' }, [
-                  $.make('div', { className: 'NB-modal-submit' }, [
-                      // $.make('div', { className: 'NB-modal-submit-or' }, 'or'),
-                      $.make('input', { type: 'submit', disabled: 'true', className: 'NB-disabled NB-modal-submit-button NB-modal-submit-save NB-modal-submit-green', value: 'Check what you like above...' }),
-                      $.make('input', { type: 'submit', className: 'NB-modal-submit-add NB-modal-submit-button NB-modal-submit-green', value: 'First, add sites' })
-                  ])
-              ]).bind('submit', function(e) {
-                  e.preventDefault();
-                  return false;
-              })
-            ])),
-            $.make('div', { className: 'NB-feedchooser-type NB-last', style: 'position: relative'}, [
-              (!NEWSBLUR.Globals.is_premium && $.make('div', { className: 'NB-feedchooser-porpoise' }, 'OR')),
+                        $.make('div', { className: 'NB-feedchooser-type NB-right' }, [
+              (!this.options.premium_only && $.make('div', { className: 'NB-feedchooser-porpoise' }, 'OR')),
               (NEWSBLUR.Globals.is_premium && $.make('div', { className: 'NB-feedchooser-info'}, [
                   $.make('div', { className: 'NB-feedchooser-info-type' }, [
                         $.make('span', { className: 'NB-feedchooser-subtitle-type-prefix' }, 'Thank you'),
@@ -109,33 +83,23 @@ NEWSBLUR.ReaderFeedchooser.prototype = {
                 ]),
                 $.make('li', { className: 'NB-6' }, [
                   $.make('div', { className: 'NB-feedchooser-premium-bullet-image' }),
-                  'You feed my poor, hungry dog for ',
+                  'You feed Shiloh, my poor, hungry dog, for ',
                   $.make('span', { className: 'NB-feedchooser-hungry-dog' }, '6 days'),
                   $.make('img', { className: 'NB-feedchooser-premium-poor-hungry-dog', src: NEWSBLUR.Globals.MEDIA_URL + '/img/reader/shiloh.jpg' })
-                ]),
-                $.make('li', { className: 'NB-7' }, [
-                  $.make('div', { className: 'NB-feedchooser-premium-bullet-image' }),
-                  'Choose how much you would like to pay',
-                  $.make('div', { style: 'color: #490567' }, 'The only difference is happiness')
                 ])
               ]),
               $.make('div', { className: 'NB-modal-submit NB-modal-submit-paypal' }, [
-                  // this.make_google_checkout()
+                  $.make('div', { className: 'NB-feedchooser-payextra' }, [
+                    $.make('input', { type: 'checkbox', name: 'payextra', id: 'NB-feedchooser-payextra-checkbox' }),
+                    $.make('label', { 'for': 'NB-feedchooser-payextra-checkbox' }, 'I\'m feeling generous')
+                  ]),
                   $.make('div', { className: 'NB-feedchooser-dollar' }, [
-                      // $.make('div', { className: 'NB-feedchooser-dollar-value NB-1' }, [
-                      //     $.make('div', { className: 'NB-feedchooser-dollar-month' }, [
-                      //       $.make('div', { className: 'NB-feedchooser-dollar-image' }, [
-                      //           $.make('img', { src: NEWSBLUR.Globals.MEDIA_URL + '/img/reader/hamburger_s.png', style: "position: absolute; left: 8px;top: 9px"  })
-                      //       ]),
-                      //       '$12/year'
-                      //     ]),
-                      //     $.make('div', { className: 'NB-feedchooser-dollar-year' }, '($1/month)')
-                      // ]),
                       $.make('div', { className: 'NB-feedchooser-dollar-value NB-2' }, [
                           $.make('div', { className: 'NB-feedchooser-dollar-month' }, [
                             $.make('div', { className: 'NB-feedchooser-dollar-image' }, [
-                                $.make('img', { src: NEWSBLUR.Globals.MEDIA_URL + '/img/reader/hamburger_s.png', style: "position: absolute; left: -24px;top: 9px" }),
-                                $.make('img', { src: NEWSBLUR.Globals.MEDIA_URL + '/img/reader/hamburger_m.png', style: "position: absolute; left: 4px;top: 6px"  })
+                                $.make('img', { src: NEWSBLUR.Globals.MEDIA_URL + '/img/icons/circular/g_icn_coffeecup_gold16.png', style: "position: absolute; left: -56px;top: 15px;width: 16px;" }),
+                                $.make('img', { src: NEWSBLUR.Globals.MEDIA_URL + '/img/icons/circular/g_icn_coffeecup_gold24.png', style: "position: absolute; left: -31px;top: 10px; width: 24px;" }),
+                                $.make('img', { src: NEWSBLUR.Globals.MEDIA_URL + '/img/icons/circular/g_icn_coffeecup_gold32.png', style: "position: absolute; left: 0; top: 6px; width: 32px" })
                             ]),
                             '$24/year'
                           ]),
@@ -144,9 +108,9 @@ NEWSBLUR.ReaderFeedchooser.prototype = {
                       $.make('div', { className: 'NB-feedchooser-dollar-value NB-3' }, [
                           $.make('div', { className: 'NB-feedchooser-dollar-month' }, [
                             $.make('div', { className: 'NB-feedchooser-dollar-image' }, [
-                                $.make('img', { src: NEWSBLUR.Globals.MEDIA_URL + '/img/reader/hamburger_s.png', style: "position: absolute; left: -58px;top: 10px" }),
-                                $.make('img', { src: NEWSBLUR.Globals.MEDIA_URL + '/img/reader/hamburger_m.png', style: "position: absolute; left: -31px;top: 8px" }),
-                                $.make('img', { src: NEWSBLUR.Globals.MEDIA_URL + '/img/reader/hamburger_l.png', style: "position: absolute; left: 0; top: 6px" })
+                                $.make('img', { src: NEWSBLUR.Globals.MEDIA_URL + '/img/icons/circular/g_icn_coffeecup_gold24.png', style: "position: absolute; left: -68px;top: 11px;width: 24px;" }),
+                                $.make('img', { src: NEWSBLUR.Globals.MEDIA_URL + '/img/icons/circular/g_icn_coffeecup_gold32.png', style: "position: absolute; left: -42px;top: 7px; width: 32px;" }),
+                                $.make('img', { src: NEWSBLUR.Globals.MEDIA_URL + '/img/icons/circular/g_icn_coffeecup_gold40.png', style: "position: absolute; left: -8px; top: 4px; width: 40px" })
                             ]),
                             '$36/year'
                           ]),
@@ -175,7 +139,36 @@ NEWSBLUR.ReaderFeedchooser.prototype = {
                       ])
                   ])
               ])
-            ])
+            ]),
+            (!this.options.premium_only && $.make('div', { className: 'NB-feedchooser-type NB-feedchooser-left'}, [
+              $.make('div', { className: 'NB-feedchooser-info'}, [
+                  $.make('div', { className: 'NB-feedchooser-info-type' }, [
+                        $.make('span', { className: 'NB-feedchooser-subtitle-type-prefix' }, 'Free'),
+                        ' Standard Account'
+                  ]),
+                    $.make('h2', { className: 'NB-modal-subtitle' }, [
+                        $.make('b', [
+                            'You can follow up to '+this.MAX_FEEDS+' sites.'
+                        ]),
+                        $.make('br'),
+                        'You can always change these.'
+                    ]),
+                  $.make('div', { className: 'NB-feedchooser-info-counts'}),
+                  $.make('div', { className: 'NB-feedchooser-info-sort'}, 'Auto-Selected By Popularity'),
+                  $.make('div', { className: 'NB-feedchooser-info-reset NB-splash-link'}, 'Reset to popular sites')
+              ]),
+              this.make_feeds(),
+              $.make('form', { className: 'NB-feedchooser-form' }, [
+                  $.make('div', { className: 'NB-modal-submit' }, [
+                      // $.make('div', { className: 'NB-modal-submit-or' }, 'or'),
+                      $.make('input', { type: 'submit', disabled: 'true', className: 'NB-disabled NB-modal-submit-button NB-modal-submit-save NB-modal-submit-green', value: 'Check what you like above...' }),
+                      $.make('input', { type: 'submit', className: 'NB-modal-submit-add NB-modal-submit-button NB-modal-submit-green', value: 'First, add sites' })
+                  ])
+              ]).bind('submit', function(e) {
+                  e.preventDefault();
+                  return false;
+              })
+            ]))
         ]);
     },
     
@@ -233,8 +226,8 @@ NEWSBLUR.ReaderFeedchooser.prototype = {
     open_modal: function() {
         var self = this;
         this.$modal.modal({
-            'minWidth': NEWSBLUR.Globals.is_premium ? 460 : 860,
-            'maxWidth': NEWSBLUR.Globals.is_premium ? 460 : 860,
+            'minWidth': this.options.premium_only ? 460 : 900,
+            'maxWidth': this.options.premium_only ? 460 : 900,
             'overlayClose': true,
             'onOpen': function (dialog) {
                 dialog.overlay.fadeIn(200, function () {
@@ -478,11 +471,22 @@ NEWSBLUR.ReaderFeedchooser.prototype = {
         }
     },
     
+    switch_payextra: function() {
+        var $payextra = $("input[name=payextra]", this.$modal);
+        var selected = $payextra.is(':checked');
+        
+        if (selected) {
+            this.choose_dollar_amount(3);
+        } else {
+            this.choose_dollar_amount(2);
+        }
+    },
+    
     // ===========
     // = Actions =
     // ===========
 
-    handle_click: function(elem, e) {
+    handle_mousedown: function(elem, e) {
         var self = this;
         
         $.targetIs(e, { tagSelector: '.feed' }, _.bind(function($t, $p) {
@@ -529,6 +533,15 @@ NEWSBLUR.ReaderFeedchooser.prototype = {
             this.choose_dollar_amount(step);
         }, this));
     },
+    
+    handle_change: function(elem, e) {
+                
+        $.targetIs(e, { tagSelector: 'input[name=payextra]' }, _.bind(function($t, $p) {
+            e.preventDefault();
+            this.switch_payextra();
+        }, this));
+        
+    },
 
     handle_cancel: function() {
         var $cancel = $('.NB-modal-cancel', this.$modal);

templates/profile/stripe_form.xhtml

@@ -23,7 +23,7 @@
 
 <div class="NB-static-form-wrapper" style="overflow:hidden">
    <div class="NB-modal-feedchooser NB-static-feedchooser NB-feedchooser-type" style="    margin: 0 10% 0 0;
-    width: 360px;
+    width: 376px;
 float: right;">
     <div class="NB-feedchooser-info">
         <div class="NB-feedchooser-info-type">
@@ -47,13 +47,7 @@ float: right;">
             <div class="NB-feedchooser-premium-bullet-image"></div>Text view conveniently extracts the story
         </li>
         <li class="NB-6">
-            <div class="NB-feedchooser-premium-bullet-image"></div>You feed my poor, hungry dog for <span class="NB-feedchooser-hungry-dog">12 days</span><img src="/media//img/reader/shiloh.jpg" class="NB-feedchooser-premium-poor-hungry-dog">
-        </li>
-        <li class="NB-7">
-            <div class="NB-feedchooser-premium-bullet-image"></div>Choose how much you would like to pay
-            <div style="color: #490567">
-                The only difference is happiness
-            </div>
+            <div class="NB-feedchooser-premium-bullet-image"></div>You feed Shiloh, my poor, hungry dog, for <span class="NB-feedchooser-hungry-dog">12 days</span><img src="/media//img/reader/shiloh.jpg" class="NB-feedchooser-premium-poor-hungry-dog">
         </li>
     </ul>
 </div>