Stubbing in interactions popover. Adding popover overlay.

2025-09-18 21:50:56 +00:00 · 2013-01-29 16:47:44 -08:00 · 2013-01-29 16:47:44 -08:00 · 27b5478e99
commit 27b5478e99
parent 5423976771
9 changed files with 136 additions and 53 deletions
--- a/media/css/controls.css
+++ b/media/css/controls.css
@ -61,8 +61,29 @@ ul.segmented-control {
    border-right: none;
 }

-.segmented-control li:active,
-.segmented-control li.NB-active {
+.segmented-control li:active {
+    background-image:
+        -webkit-gradient(linear, left top, left bottom, from(rgba(255, 255, 255, .2)), to(rgba(255, 255, 255, .25))),
+        url(/media/img/reader/background-control.png);
+    
+    background-image:
+        -moz-linear-gradient(0% 0% -90deg, rgba(255, 255, 255, .2), rgba(255, 255, 255, .25)),
+        url(/media/img/reader/background-control.png);
+    
+    -webkit-box-shadow: inset 0 1px 4px rgba(0, 0, 0, .15),
+                        inset 0 0 5px rgba(0, 0, 0, .1);
+    -moz-box-shadow: inset 0 1px 4px rgba(0, 0, 0, .15),
+                     inset 0 0 5px rgba(0, 0, 0, .1);
+    box-shadow: inset 0 1px 4px rgba(0, 0, 0, .15),
+                inset 0 0 5px rgba(0, 0, 0, .1);
+
+    text-shadow: 0 1px 0 rgba(255, 255, 255, .3);
+
+    color: #303030;
+}
+
+.segmented-control li.NB-active,
+.segmented-control li.NB-active:active {
    background-image:
        -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0)), to(rgba(0, 0, 0, .05))),
        url(/media/img/reader/background-control-light.png);
@ -82,42 +103,3 @@ ul.segmented-control {

    color: #303030;
 }
-
-.segmented-control li:active {
-    background-image:
-        -webkit-gradient(linear, left top, left bottom, from(rgba(255, 255, 255, .2)), to(rgba(255, 255, 255, .25))),
-        url(/media/img/reader/background-control.png);
-    
-    background-image:
-        -moz-linear-gradient(0% 0% -90deg, rgba(255, 255, 255, .2), rgba(255, 255, 255, .25)),
-        url(/media/img/reader/background-control.png);
-    
-    -webkit-box-shadow: inset 0 1px 4px rgba(0, 0, 0, .15),
-                        inset 0 0 5px rgba(0, 0, 0, .1);
-    -moz-box-shadow: inset 0 1px 4px rgba(0, 0, 0, .15),
-                     inset 0 0 5px rgba(0, 0, 0, .1);
-    box-shadow: inset 0 1px 4px rgba(0, 0, 0, .15),
-                inset 0 0 5px rgba(0, 0, 0, .1);
-
-    text-shadow: 0 1px 0 rgba(255, 255, 255, .3);
-}
-
-
-.segmented-control li.NB-active a {color: #fff; text-shadow: 0 1px 0 #000;}
-
-.segmented-control li.NB-active:active {
-    background-image:
-        -webkit-gradient(linear, left top, left bottom, from(rgba(255, 255, 255, 0)), to(rgba(255, 255, 255, .05))),
-        url(/media/img/reader/background-control.png);
-        
-    background-image:
-        -moz-linear-gradient(0% 0% -90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, .05)),
-        url(/media/img/reader/background-control.png);
-    
-    -webkit-box-shadow: inset 0 1px 3px rgba(0, 0, 0, .15),
-                        inset 0 0 5px rgba(0, 0, 0, .15);
-    -moz-box-shadow: inset 0 1px 3px rgba(0, 0, 0, .15),
-                     inset 0 0 5px rgba(0, 0, 0, .15);
-    box-shadow: inset 0 1px 3px rgba(0, 0, 0, .15),
-                inset 0 0 5px rgba(0, 0, 0, .15);
-}
--- a/media/css/reader.css
+++ b/media/css/reader.css
@ -1104,6 +1104,9 @@ background: transparent;
    display: inline-block;
    cursor: pointer;
 }
+#story_titles .NB-feedbar .NB-feedbar-options.NB-active {
+    background-color: rgba(0, 0, 0, .1);
+}
 #story_titles .NB-feedbar .NB-feedbar-options .NB-icon {
    float: right;
    width: 16px;
@ -3083,14 +3086,14 @@ background: transparent;
    height: 28px;
    border-radius: 2px;
 }
-.NB-feeds-header-user-notifications,
+.NB-feeds-header-user-interactions,
 .NB-feeds-header-user-dashboard {
    cursor: pointer;
    padding: 10px 8px 8px;
    float: right;
    line-height: 0;
 }
-.NB-feeds-header-user-notifications img,
+.NB-feeds-header-user-interactions img,
 .NB-feeds-header-user-dashboard img {
    width: 17px;
    height: 17px;
@ -9368,3 +9371,30 @@ form.opml_import_form input {
 .fade.in {
  opacity: 1;
 }
+
+.NB-overlay {
+    background: rgba(16, 16, 48, 0);
+    background: -webkit-linear-gradient(rgba(16, 16, 48, 0.3),rgba(16, 16, 48, 0.3) 60%,rgba(16, 16, 48, 0.01));
+    background: -moz-linear-gradient(rgba(16, 16, 48, 0.3),rgba(16, 16, 48, 0.3) 60%,rgba(16, 16, 48, 0.01));
+    background: -ms-linear-gradient(rgba(16, 16, 48, 0.3),rgba(16, 16, 48, 0.3) 60%,rgba(16, 16, 48, 0.01));
+    background: -o-linear-gradient(rgba(16, 16, 48, 0.3),rgba(16, 16, 48, 0.3) 60%,rgba(16, 16, 48, 0.01));
+    background: linear-gradient(rgba(16, 16, 48, 0.3),rgba(16, 16, 48, 0.3) 60%,rgba(16, 16, 48, 0.01));
+    position: fixed;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    z-index: 100;
+    opacity: 0.0;
+    -webkit-transition: opacity 400ms ease,-webkit-transform 0s ease;
+    -moz-transition: opacity 400ms ease,-moz-transform 0s ease;
+    -o-transition: opacity 400ms ease,-o-transform 0s ease;
+    transition: opacity 400ms ease,transform 0s ease;
+}
+.NB-overlay.NB-top {
+    background: -webkit-linear-gradient(rgba(16, 16, 48, 0.01),rgba(16, 16, 48, 0.3) 40%,rgba(16, 16, 48, 0.3));
+    background: -moz-linear-gradient(rgba(16, 16, 48, 0.01),rgba(16, 16, 48, 0.3) 40%,rgba(16, 16, 48, 0.3));
+    background: -ms-linear-gradient(rgba(16, 16, 48, 0.01),rgba(16, 16, 48, 0.3) 40%,rgba(16, 16, 48, 0.3));
+    background: -o-linear-gradient(rgba(16, 16, 48, 0.01),rgba(16, 16, 48, 0.3) 40%,rgba(16, 16, 48, 0.3));
+    background: linear-gradient(rgba(16, 16, 48, 0.01),rgba(16, 16, 48, 0.3) 40%,rgba(16, 16, 48, 0.3));
+}
--- a/media/js/newsblur/reader/reader.js
+++ b/media/js/newsblur/reader/reader.js
@ -3045,7 +3045,7 @@
                        }
                    }
                    
-                    $manage_menu_container.align($align, 'bottom -left', {
+                    $manage_menu_container.align($align, 'top -left', {
                        'top': -1 * top, 
                        'left': left
                    });
--- a/media/js/newsblur/reader/reader_popover.js
+++ b/media/js/newsblur/reader/reader_popover.js
@ -32,6 +32,9 @@ NEWSBLUR.ReaderPopover = Backbone.View.extend({
        ]);
        this.setElement($popover);
        
+        this.$overlay = $.make('div', { className: 'NB-overlay fade ' + (this.options.overlay_top && "NB-top") });
+        $('body').append(this.$overlay);
+        
        this.$el.width(this.options.width);
        
        $('body').append(this.$el);
@ -45,6 +48,7 @@ NEWSBLUR.ReaderPopover = Backbone.View.extend({
        
        if (this.options.animate) {
            this.$el.addClass("in");
+            this.$overlay.addClass("in");
        }
        
        return this;
@ -56,6 +60,7 @@ NEWSBLUR.ReaderPopover = Backbone.View.extend({
        if (_.isFunction(e)) hide_callback = e;
        hide_callback = hide_callback || $.noop;
        this.$el.removeClass('in');
+        this.$overlay.removeClass('in');
        this.options.on_hide && this.options.on_hide();

        function removeWithAnimation() {
@ -63,6 +68,7 @@ NEWSBLUR.ReaderPopover = Backbone.View.extend({
                $el.off($.support.transition.end);
                self._open = false;
                self.remove();
+                self.$overlay.remove();
                hide_callback();
            }, 500);

@ -70,6 +76,7 @@ NEWSBLUR.ReaderPopover = Backbone.View.extend({
                clearTimeout(timeout);
                self._open = false;
                self.remove();
+                self.$overlay.remove();
                hide_callback();
            });
        }
@ -79,6 +86,7 @@ NEWSBLUR.ReaderPopover = Backbone.View.extend({
        } else {
            this._open = false;
            this.remove();
+            this.$overlay.remove();
            hide_callback();
        }
        
--- a/media/js/newsblur/views/feed_options_popover.js
+++ b/media/js/newsblur/views/feed_options_popover.js
@ -25,6 +25,11 @@ NEWSBLUR.FeedOptionsPopover = NEWSBLUR.ReaderPopover.extend({
        
        this.show_correct_feed_view_options_in_menu();
    },
+    
+    close: function() {
+        NEWSBLUR.app.story_titles_header.$(".NB-feedbar-options").removeClass('NB-active');
+        NEWSBLUR.ReaderPopover.prototype.close.apply(this);
+    },

    make_modal: function() {
        var self = this;
@ -57,6 +62,8 @@ NEWSBLUR.FeedOptionsPopover = NEWSBLUR.ReaderPopover.extend({
        $newest.text('Newest' + (order != 'oldest' ? ' first' : ''));
        $unread.toggleClass('NB-active', read_filter == 'unread');
        $all.toggleClass('NB-active', read_filter != 'unread');
+
+        NEWSBLUR.app.story_titles_header.$(".NB-feedbar-options").addClass('NB-active');
    },

    
@ -77,7 +84,7 @@ NEWSBLUR.FeedOptionsPopover = NEWSBLUR.ReaderPopover.extend({
            this.update_feed({read_filter: 'unread'});
        }
        
-        this.close();
+        this.show_correct_feed_view_options_in_menu();
    },
    
    update_feed: function(setting) {
--- a/media/js/newsblur/views/interactions_popover.js
+++ b/media/js/newsblur/views/interactions_popover.js
@ -0,0 +1,49 @@
+NEWSBLUR.InteractionsPopover = NEWSBLUR.ReaderPopover.extend({
+    
+    className: "NB-interactions-popover",
+    
+    options: {
+        'width': 336,
+        'anchor': '.NB-feeds-header-user-interactions',
+        'placement': 'bottom',
+        'overlay_top': true,
+        offset: {
+            top: -8,
+            left: -1
+        }
+    },
+    
+    events: {
+    },
+    
+    initialize: function(options) {
+        this.options = _.extend({}, this.options, options);
+        this.model = NEWSBLUR.assets;
+        this.make_modal();
+        
+        NEWSBLUR.ReaderPopover.prototype.initialize.apply(this);
+        
+        $(".NB-feeds-header-user-notifications").addClass('NB-active');
+    },
+    
+    close: function() {
+        $(".NB-feeds-header-user-notifications").removeClass('NB-active');
+        NEWSBLUR.ReaderPopover.prototype.close.apply(this);
+    },
+
+    make_modal: function() {
+        var self = this;
+        
+        this.$el.html($.make('div', [
+            'Interactions!'
+        ]));
+        
+        return this;
+    }
+    
+    // ==========
+    // = Events =
+    // ==========
+    
+    
+});
--- a/media/js/newsblur/views/sidebar_header_view.js
+++ b/media/js/newsblur/views/sidebar_header_view.js
@ -5,7 +5,8 @@ NEWSBLUR.Views.SidebarHeader = Backbone.View.extend({
    },
    
    events: {
-        'click .NB-feeds-header-user-dashboard' : 'show_splash_page'
+        'click .NB-feeds-header-user-dashboard'    : 'show_splash_page',
+        'click .NB-feeds-header-user-interactions' : 'show_interactions_popover'
    },
    
    initialize: function() {
@ -108,6 +109,10 @@ NEWSBLUR.Views.SidebarHeader = Backbone.View.extend({
    
    show_splash_page: function() {
        NEWSBLUR.reader.show_splash_page();
+    },
+    
+    show_interactions_popover: function() {
+        NEWSBLUR.InteractionsPopover.create({});
    }

 });
--- a/media/js/vendor/jquery.newsblur.js
+++ b/media/js/vendor/jquery.newsblur.js
@ -134,7 +134,7 @@ NEWSBLUR.log = function(msg) {
          } else if (pos.indexOf('-bottom') >= 0) {
            top = b.top;
          } else if (pos.indexOf('bottom') >= 0) {
-            top = b.top - elb.height;
+            top = b.top + elb.height;
          } else { // Centered.
            top = b.top + (b.height - elb.height) / 2;
          }
@ -149,8 +149,8 @@ NEWSBLUR.log = function(msg) {
          if (constrain) {
            left = Math.max(scrollLeft, Math.min(left, scrollLeft + clientWidth - elb.width));
            top = Math.max(scrollTop, Math.min(top, scrollTop + clientHeight - elb.height));
-            // bottom = Math.max(scrollTop, Math.min(bottom, scrollTop + clientHeight - elb.height));
-            // right = Math.max(scrollTop, Math.min(right, scrollLeft + clientWidth - elb.height));
+            bottom = Math.max(scrollTop, Math.min(bottom, scrollTop + clientHeight - elb.height));
+            right = Math.max(scrollTop, Math.min(right, scrollLeft + clientWidth - elb.height));
          }

          // var offParent;
@ -207,10 +207,12 @@ NEWSBLUR.log = function(msg) {
                    me._autohider(e);
                }
            };
-            $(document).bind('click', this._autohider);
-            $(document).bind('keypress', this._autohider);
-            $(document).bind('keyup', this._checkesc);
+            $(document).on('click', this._autohider);
+            $(document).on('keypress', this._autohider);
+            $(document).on('keyup', this._checkesc);
          }
+          
+          return this;
        }
        
    });
--- a/templates/reader/feeds_skeleton.xhtml
+++ b/templates/reader/feeds_skeleton.xhtml
@ -20,7 +20,7 @@
                <div class="NB-feeds-header-user-dashboard">
                    <img src="{{ MEDIA_URL }}/img/circular/header/circular_avatar.png">
                </div>
-                <div class="NB-feeds-header-user-notifications">
+                <div class="NB-feeds-header-user-interactions">
                    <img src="{{ MEDIA_URL }}/img/circular/header/icon_activity.png">
                </div>
            </div>