add CSS and refactor to new file

config/application.yml

@@ -0,0 +1,151 @@
+#   Copyright (c) 2011, Diaspora Inc.  This file is
+#   licensed under the Affero General Public License version 3 or later.  See
+#   the COPYRIGHT file.
+
+defaults: &defaults
+
+  # Hostname of the machine you're running Diaspora on, as seen from the internet.
+  # For development and testing, you can leave this as is.
+  pod_url: "http://localhost:3000"
+
+  # Set this to true to prevent people from signing up for your pod without an invitation.
+  registrations_closed: false
+
+  # Set this to true to prevent users from sending invitations.
+  invites_off: false
+
+  #
+  # Logging setup
+  #
+
+  # Enable extensive logging to log/{development,test,production}.log
+  debug: false
+
+  # If you want normal Rails logs, set this to false in the appropriate environment.
+  # It is false by default in development and test.
+  enable_splunk_logging: true
+
+  #
+  # Websocket server setup - see script/websocket_server.rb
+  #
+
+  # Enable extensive logging to websocket server.
+  socket_debug : false
+
+  # Websocket host - leave as 0.0.0.0 unless you know what you are doing
+  socket_host: 0.0.0.0
+
+  # File containing pid of running script/websocket_server.rb
+  socket_pidfile: "log/diaspora-wsd.pid"
+
+  # Websocket port - should normally be 8080 or 8081.
+  socket_port: 8090
+  socket_collection_name: 'websocket'
+
+  # Secure websocket confguration (wss://).
+  # Requires SSL cert and key
+  socket_secure: false
+  socket_cert_chain_location: '/full/path/to/cert_chain.crt'
+  socket_private_key_location: '/full/path/to/file.key'
+
+  #
+  # Federation setup
+  #
+
+  # Diaspora is only tested against this default pubsub server. You probably don't want to change this.
+  pubsub_server: 'https://pubsubhubbub.appspot.com/'
+
+  #
+  # Email setup
+  #
+
+  # Setting this to true enables Diaspora's "send email" functionality,
+  # requiring meaningful smtp_* settings. These are options for RoR's
+  # ActionMailer class.
+  mailer_on: false
+
+  # This chooses which mailer should be used. 'smtp' for a smtp
+  # connection or 'sendmail' to use the sendmail binary.
+  mailer_method: 'smtp'
+
+  # Address/port to smtp server handling outgoing mail.
+  smtp_address: 'smtp.example.com'
+  smtp_port: '587'
+
+  # Domain of smtp server.
+  smtp_domain: 'example.com'
+
+  # Sender address in Diaspora's outgoing mail.
+  smtp_sender_address: 'no-reply@joindiaspora.com'
+
+  # Authentication required to send mail. Use one of 'one', 'plain',
+  # 'login' or 'cram-md5'. Use 'none' if server does not support
+  # authentication
+  smtp_authentication: 'plain'
+
+  # Automatically enable TLS? Ignored if smtp_authentication is set to none
+  smtp_starttls_auto: true
+
+  # Credentials to log in to the SMTP server - may be necessary if
+  # smtp_authentication is not 'none'
+  smtp_username: 'smtp_username'
+  smtp_password: 'secret'
+
+  # The path to the sendmail binary.
+  sendmail_location: '/usr/sbin/sendmail'
+
+  #
+  # Web tracking setup
+  #
+
+  # google analytics key - if false, no javascript included
+  google_a_site: false
+
+  # piwik integration - if not set, no javascript included
+  piwik_id:
+  # the site url in raw format (e.g. pikwik.examplehost.com)
+  piwik_url:
+
+  #
+  # Miscellaneous setup
+  #
+
+  # cloudfiles username and api-key - used for backups
+  cloudfiles_username: 'example'
+  cloudfiles_api_key:  'abc123'
+
+  # List of users who have admin privileges
+  admins:
+    - 'example_user1dsioaioedfhgoiesajdigtoearogjaidofgjo'
+
+  # s3 config - if set, carrierwave will store your photos on s3. Otherwise they're on the filesystem.
+  #s3_key: 'key'
+  #s3_secret: 'secret'
+  #s3_bucket: 'my_photos'
+  s3_region: 'us-east-1'
+
+  # Set this to true if you want to do everything synchronously instead of using resque, our redis-backed queue system.
+  single_process_mode: true
+
+
+# Use this section to override default settings in specific environments
+development:
+  <<: *defaults
+  enable_splunk_logging: false
+
+production:
+  <<: *defaults
+  single_process_mode: false
+
+  # Setting the root certificate bundle (this is operating system specific). Defaults:
+  # CentOS: '/etc/pki/tls/certs/ca-bundle.crt'
+  # Debian: '/etc/ssl/certs/ca-certificates.crt'
+  ca_file: '/etc/pki/tls/certs/ca-bundle.crt'
+
+# Do not touch unless you know what you're doing
+test:
+  <<: *defaults
+  pod_url: "http://example.org"
+  socket_port: 8081
+  enable_splunk_logging: false
+

config/assets.yml

@@ -33,6 +33,7 @@ javascripts:
     - public/javascripts/widgets/infinite-scroll.js
     - public/javascripts/widgets/directionDetector.js
     - public/javascripts/widgets/notifications.js
+    - public/javascripts/widgets/notifications-badge.js
     - public/javascripts/widgets/flashes.js
     - public/javascripts/widgets/post.js
     - public/javascripts/view.js

public/javascripts/diaspora.js

@@ -35,42 +35,7 @@
         this.collection[widgetId].start();
       }
     };
-    $("#notification_badge a").click(function(event){
+  
-      event.preventDefault();
-      $.ajax({
-        "url":"/notifications",
-        "success":function(data){
-          $("#notifications_overlay").show();
-          var hash = eval("(" + data + ")");
-          var notifications_element =  $("#notifications_overlay .notifications");
-          var day_element_template = $("#notifications_overlay .day_group").clone();
-          day_element_template.find(".notifications_for_day").empty();
-          var stream_element_template = $("#notifications_overlay .stream_element").clone();
-          notifications_element.empty();
-          $.each(hash["group_days"], function(day){
-            var day_element = day_element_template.clone();
-            day_element.find(".month").text(day.split(" ")[0])
-            day_element.find(".day").text(day.split(" ")[1])
-            var notifications_for_day = hash["group_days"][day]
-            var notifications_for_day_element = day_element.find('.notifications_for_day');
-            $.each(notifications_for_day, function(i, notification_hash){
-              $.each(notification_hash, function(notification_type, notification){
-                var stream_element = stream_element_template.clone();
-                console.log(notification_type);
-                console.log(notification);
-                stream_element.find(".actor").
-                  text(notification["actors"][0]["name"]).
-                  attr("href", notification["actors"][0]["url"]);
-                console.log(notification["created_at"]);
-                stream_element.find('time').text(notification["created_at"]);
-                notifications_for_day_element.append(stream_element);
-              });
-            });
-            notifications_element.append(day_element);
-          })
-        }
-      });
-    });
   };
 
   Diaspora.WidgetCollection.prototype.subscribe = function(id, callback, context) {
@@ -88,4 +53,3 @@
 
 
 $(document).ready(function() { Diaspora.widgets.init(); });
-

public/javascripts/templates/notification-badge.mustache

@@ -0,0 +1,25 @@
+<div class="span-24 last" id="notifications_overlay">
+  <div class="stream notifications">
+      {{# group_days}}
+      
+        <div class="day_group span-24 last">
+            <div class="span-3">
+              <div class="date">
+                <div class="day">20</div>
+                <div class="month">June</div>
+              </div>
+            </div>
+            <div class="span-8 notifications_for_day"><div class="stream_element">
+                <div class="right"></div>
+                <span class="from">
+                  <a href="/people/1" class="actor">Alice Smith</a>
+                  <a href="#" class="object"></a>
+                </span>
+                <br>
+                <time>2011-06-20T20:20:55Z</time>
+              </div></div>
+          </div></div>
+      </div>
+      {{/ group_days}}
+  </div>
+</div>

public/javascripts/widgets/notifications-badge.js

@@ -0,0 +1,34 @@
+(function() {
+  $("#notification_badge a").live("click", function(event){
+    event.preventDefault();
+    $.getJSON("/notifications", function(hash) {
+      $("#notifications_overlay").show();
+      var notificationsElement =  $("#notifications_overlay .notifications");
+      var dayElementTemplate = $("#notifications_overlay .day_group").clone();
+      dayElementTemplate.find(".notifications_for_day").empty();
+      var streamElementTemplate = $("#notifications_overlay .stream_element").clone();
+      notificationsElement.empty();
+      $.each(hash["group_days"], function(day){
+        var dayElement = dayElementTemplate.clone();
+        var dayParts = day.split(" ");
+        dayElement.find(".month").text(dayParts[0])
+        dayElement.find(".day").text(dayParts[1])
+        var notificationsForDay = hash["group_days"][day],
+          notificationsForDayElement = dayElement.find('.notifications_for_day');
+          
+        $.each(notificationsForDay, function(i, notificationHash) {
+          $.each(notificationHash, function(notificationType, notification) {
+            var actor = notification.actors[0];
+            var streamElement = streamElementTemplate.clone().appendTo(notificationsForDayElement);
+            streamElement.find(".actor")
+              .text(actor.name)
+              .attr("href", notification.actors[0]["url"]);
+            streamElement.find('time').text(notification["created_at"]);
+          });
+        });
+        notificationsElement.append(dayElement);
+      });
+    });
+  });
+  
+})();

public/stylesheets/sass/application.sass

@@ -27,7 +27,7 @@ h1, h2, h3, h4, h5
   :position relative
   :font
     :weight bold
-    
+
 h1, h2, h3
   :letter-spacing -1px
 
@@ -150,7 +150,7 @@ header
   &.fixit
     :position fixed
     :top -30px
-  
+
   a
     :color #CCC
 
@@ -287,7 +287,7 @@ ul.dropdown
     &:first-child
       :border
         :top none
-      
+
 
     .youtube-player, .vimeo-player
       :border none
@@ -478,7 +478,7 @@ ul.dropdown
     :margin
       :bottom 5px
 
-  
+
 .time,
 .timeago,
 .via
@@ -607,10 +607,10 @@ ul.dropdown
 .stream ul.comments
   :padding
     :bottom 6px
-    
+
   > li:last-child
     :border-bottom none
-    
+
   .avatar
     :width 30px
     :height 30px
@@ -639,7 +639,7 @@ ul.show_comments,
     :height 18px
 
   :position relative
-  
+
   textarea
     :width 100%
     :height 1.4em
@@ -718,7 +718,7 @@ ul.show_comments,
       textarea
         :min-height 2.4em
 
-.comments 
+.comments
   .timeago
     :color #999
 
@@ -2238,9 +2238,9 @@ h3,h4
 
 .aspect_badge.removed
   :background
-    :color #FA2A00 
+    :color #FA2A00
   :text
-    :decoration line-through 
+    :decoration line-through
   &:hover
     :background
       :color #FA2A00
@@ -2313,7 +2313,7 @@ h3,h4
     :padding 0.2em 0.5em
     :width 500px
     @include border-radius(5px)
-    
+
     &:hover
       :background-color #EFEFEF
 
@@ -2560,7 +2560,7 @@ ul.show_comments,
     :color #444
     :overflow hidden
     :white-space nowrap
-  
+
   .last_author
     :font
       :size 12px
@@ -2772,7 +2772,7 @@ h1.tag
   &:hover
     :border
       :bottom 2px dotted $blue
-    
+
 
 .info
   .tag
@@ -2816,7 +2816,7 @@ h1.tag
     :background
       :color rgb(245,245,245)
 
-#contacts_of_contact 
+#contacts_of_contact
   .section
     :margin
       :bottom 4px
@@ -2862,7 +2862,7 @@ h1.tag
       :weight bold
 
 .leftBar
-  .title 
+  .title
     :position relative
     :border
       :bottom 1px solid #888
@@ -3055,3 +3055,13 @@ ul#left_nav
     :height 30px
     :width 30px
 
+#notifications_overlay
+  display: none
+  position: absolute
+  border: 4px solid black
+  background-color: white
+  width: 700px
+  padding: 10px
+  top: 75.5px
+  left: 217.5px
+