refactoring of the sites picker is done

app/assets/javascripts/locomotive/views/application_view.js.coffee

@@ -9,6 +9,9 @@ class Locomotive.Views.ApplicationView extends Backbone.View
 
     @center_ui_dialog()
 
+    @enable_sites_picker()
+
+    # render page view
     if @options.view?
       @view = new @options.view(@options.view_data || {})
       @view.render()
@@ -50,3 +53,16 @@ class Locomotive.Views.ApplicationView extends Backbone.View
     css = $('#submenu > ul').attr('class')
     $("#submenu > ul > li.#{css}").addClass('on') if css != ''
 
+  enable_sites_picker: ->
+    link    = @$('#sites-picker-link')
+    picker  = @$('#sites-picker')
+
+    return if picker.size() == 0
+
+    left = link.position().left + link.parent().position().left - (picker.width() - link.width())
+    picker.css('left', left)
+
+    link.bind 'click', (event) ->
+      event.stopPropagation() & event.preventDefault()
+      picker.toggle()
+

app/assets/stylesheets/locomotive/layout.scss

@@ -65,7 +65,7 @@ body {
 
     #global-actions-bar {
       position: absolute;
-      top: 70px;
+      top: 75px;
       right: 8px;
 
       color: #8b8d9a;

app/assets/stylesheets/locomotive/sites_picker.scss

@@ -0,0 +1,76 @@
+@import "compass/css3";
+@import "compass/css3/border-radius";
+@import "helpers";
+
+#sites-picker {
+
+  position: absolute;
+  top: 97px;
+
+  margin: 5px 0 0 0;
+  padding: 0 0 0 0;
+  min-width: 160px;
+  z-index: 999;
+
+  @include border-radius(4px);
+  border: 1px solid #000;
+  @include box-shadow(rgba(255, 255, 255, 0.17) 0 1px 0 0 inset, rgba(0, 0, 0, 0.4) 3px 3px 5px 0);
+  background: rgba(50, 51, 59, 1);
+
+  font-size: 12px;
+
+  p {
+    margin-bottom: 0px;
+    padding: 0 8px;
+
+    @include locomotive-link;
+
+    &, a {
+      color: #fff;
+      @include text-shadow(#000 0 1px 0);
+    }
+
+    &.action {
+      margin-top: 0px;
+      padding: 2px 8px 4px 8px;
+
+      text-align: right;
+      font-size: 11px;
+    }
+  }
+
+  ul {
+    margin: 1px 0 0 0;
+
+    li {
+      padding: 2px 8px 6px 8px;
+
+      border-bottom: 1px solid #1e1e23;
+      @include box-shadow(#424349 0 1px 0 0);
+
+      color: #aaa;
+      cursor: pointer;
+      @include text-shadow(#000 0 1px 0);
+
+      a {
+        text-decoration: none;
+        color: #aaa;
+      }
+
+      &:hover {
+        &, a { color: #fff; }
+      }
+    }
+  }
+
+  &:before {
+    content: " ";
+    display: block;
+    width: 21px;
+    height: 13px;
+    position: absolute;
+    top: -11px;
+    right: 20px;
+    background: transparent image-url("locomotive/plugins/sites_picker_top_arrow.png") no-repeat 0 0;
+  }
+}

app/views/locomotive/cross_domain_sessions/new.html.haml

@@ -8,7 +8,7 @@
     %p.notice= t('.notice')
 
   .footer
-    = box_button_tag t('locomotive.buttons.switch_to_site')
+    = submit_tag t('locomotive.buttons.switch_to_site')
 
 :javascript
-  $(document).ready(function() { $('form').submit(); });
+  $(document).ready(function() { setTimeout(function() { $('form').submit(); }, 1000); });

app/views/locomotive/layouts/not_logged_in.html.haml

@@ -4,7 +4,7 @@
   %head
     %title= yield(:head_title) || escape_once("#{Locomotive.config.name} — #{current_site.name}")
 
-    = javascript_include_tag  'locomotive/jquery.js'
+    = javascript_include_tag  'jquery.js'
     = stylesheet_link_tag     'locomotive/not_logged_in', :media => 'screen'
 
     = yield :head