pretty tab navigation for wardrobe sidebar

app/stylesheets/outfits/_edit.sass

@@ -8,7 +8,7 @@
 $object-padding: 6px
 $nc-icon-size: 16px
 
-$preview-dimension: 400px
+$preview-dimension: 380px
 $sidebar-margin: 20px
 $sidebar-width: 400px
 $sidebar-unit-horizontal-padding: 24px
@@ -29,6 +29,16 @@ $outfit-content-inner-width: $outfit-content-width - $outfit-header-padding
   color: $text-color
   font-weight: bold
 
+=sidebar-navbar-unselected
+  background: transparent
+  border-bottom: 1px solid $soft-border-color
+  font-weight: normal
+
+=sidebar-navbar-selected
+  background: white
+  border-bottom-color: white
+  font-weight: bold
+
 =outfit
   +outfit-star-shifted
   padding: .25em 0
@@ -148,7 +158,7 @@ body.outfits-edit
         position: left center
         repeat: no-repeat
       padding-left: 20px
-  #save-outfit, #save-outfit-not-signed-in, #save-current-outfit, #save-outfit-copy, #save-outfit-finish
+  #save-outfit, #save-outfit-not-signed-in, #save-current-outfit, #save-outfit-finish
     +loud-awesome-button-color
   #current-outfit-permalink, #shared-outfit-permalink
     display: none
@@ -211,11 +221,14 @@ body.outfits-edit
     &.image-active
       #preview-mode-image
         +active-mode
-      #report-broken-image
+      #preview-mode-note, #report-broken-image
         display: block
-      &.can-download
-        #preview-download-image
-          display: inline-block
+      // Phasing out the image download section. Not confident enough yet to
+      // *remove* it, depending on user feedback, but that's a TODO for down
+      // the road if hiding goes well.
+      // &.can-download
+        // #preview-download-image
+          // display: inline-block
   #preview-mode-toggle
     +border-radius(.5em)
     border: 1px solid $module-border-color
@@ -253,17 +266,15 @@ body.outfits-edit
     em
       font-style: normal
       text-decoration: underline
-  #report-broken-image
+  #preview-mode-note, #report-broken-image
     display: none
+  
   #preview-sidebar
-    +border-radius(10px)
-    border: 1px solid $soft-border-color
     float: left
     height: $preview-dimension
     margin-left: $sidebar-margin
     margin-bottom: 1em
-    overflow: auto
-    width: $container_width - $preview-dimension - $sidebar-margin - 2px
+    width: $container_width - $preview-dimension - $sidebar-margin
     &.viewing-outfits
       #preview-closet
         display: none
@@ -275,10 +286,7 @@ body.outfits-edit
       #preview-sharing
         display: block
     .sidebar-view
-      h2
-        margin:
-          bottom: .25em
-          left: $sidebar-unit-horizontal-padding
+      margin-top: 1.5em
   #preview-closet
     h2
       margin-bottom: 0
@@ -380,7 +388,6 @@ body.outfits-edit
       width: 100%
     #preview-sidebar
       float: right
-      height: 100%
       margin: 0
       position: relative
       width: $sidebar-width
@@ -463,10 +470,11 @@ body.outfits-edit
   #preview-outfits
     display: none
     text-align: left
+    
     > ul
       +sidebar-view-child
       background: image-url("loading.gif") no-repeat center top
-      display: block
+      display: none
       font-family: $main-font
       list-style: none
       margin:
@@ -477,11 +485,38 @@ body.outfits-edit
       &.loaded
         background: transparent
     
+    #preview-outfits-not-logged-in
+      text-align: center
+      
+      img
+        border:
+          color: $module-border-color
+          style: solid
+          width: 1px 0
+      
+      figure
+        display: block
+        margin: 0 0 1em 0
+        padding: 0
+      
+      figcaption
+        display: block
+        font-weight: bold
+      
+      p
+        +sidebar-view-child
+        font-size: 85%
+      
+      #preview-outfits-log-in
+        +awesome-button
+        +loud-awesome-button-color
+  
   #preview-sharing
     display: none
     
     #preview-sharing-urls
       +sidebar-view-child
+      display: none
       margin:
         bottom: 1em
         top: 1em
@@ -503,6 +538,7 @@ body.outfits-edit
       +sidebar-view-child
       +user-select(none)
       // remove whitespace between inline-block elements
+      display: none
       font-size: 0
       text-align: center
       
@@ -536,7 +572,7 @@ body.outfits-edit
       border: 1px solid $soft-border-color
       display: block
       height: 150px
-      margin: 0 auto
+      margin: 1em auto 0
       width: 150px
       
     #preview-sharing-thumbnail-loading
@@ -553,10 +589,17 @@ body.outfits-edit
         top: 50%
         width: 100%
     
-      #preview-sharing-thumbnail
+    #preview-sharing-thumbnail, #preview-sharing-thumbnail-generating
       display: none
       
-      &.loaded
+    &.urls-loaded
+      #preview-sharing-thumbnail-saving
+        display: none
+      
+      #preview-sharing-urls, #preview-sharing-url-formats, #preview-sharing-thumbnail-generating
+        display: block
+      
+    &.urls-loaded.thumbnail-loaded
       #preview-sharing-thumbnail-loading
         display: none
       
@@ -570,6 +613,48 @@ body.outfits-edit
       right: $sidebar-unit-horizontal-padding
       top: 1em
   
+  $sidebar-border-radius: 10px
+  $sidebar-navbar-inner-width: $sidebar-width - 2px
+  $sidebar-navbar-child-outer-width: floor($sidebar-navbar-inner-width / 3)
+  
+  #preview-sidebar
+    #preview-sidebar-navbar-closet
+      +sidebar-navbar-selected
+    
+    &.viewing-outfits, &.sharing
+      #preview-sidebar-navbar-closet
+        +sidebar-navbar-unselected
+    
+    &.viewing-outfits #preview-sidebar-navbar-outfits, &.sharing #preview-sidebar-navbar-sharing
+      +sidebar-navbar-selected
+  
+  #preview-sidebar-navbar
+    +border-radius($sidebar-border-radius $sidebar-border-radius 0 0)
+    +clearfix
+    +header-text
+    background: $module-bg-color
+    border: 1px solid $soft-border-color
+    border-bottom: 0
+    font-size: 150%
+    
+    > div
+      +sidebar-navbar-unselected
+      cursor: pointer
+      float: left
+      border-left: 1px solid $soft-border-color
+      padding: .5em 0
+      text-align: center
+      width: $sidebar-navbar-child-outer-width
+      
+      &:first-child
+        border-left: 0
+  
+  #preview-sidebar-content
+    +border-radius(0 0 $sidebar-border-radius $sidebar-border-radius)
+    border: 1px solid $soft-border-color
+    border-top: 0
+    overflow: auto
+
   #save-success, #save-error, #outfit-not-found, #preview-sidebar-donation-request
     +sidebar-view-child
     display: none
@@ -656,8 +741,11 @@ body.outfits-edit
           display: none
         #save-current-outfit, #save-outfit-copy
           display: inline-block
-        #current-outfit-permalink
-          display: inline-block
+        // Phasing out permalink. Shared outfit links have been straight-up
+        // removed, but this may stay depending on user feedback. Otherwise,
+        // removing it is TODO down the road.
+        // #current-outfit-permalink
+          // display: inline-block
       &.saving-outfit
         #save-outfit-form
           display: block
@@ -665,6 +753,10 @@ body.outfits-edit
           display: none
     .preview-search-form-your-items
       +inline-block
+    #preview-outfits-not-logged-in
+      display: none
+    #preview-outfits-list
+      display: block
 
   &.user-not-signed-in
     #save-outfit-not-signed-in

app/views/outfits/edit.html.haml

@@ -17,14 +17,10 @@
     #save-outfit-wrapper
       %a#current-outfit-permalink{:target => '_blank'}
         = image_tag 'link_go.png', :alt => 'Permalink', :title => 'Permalink to current outfit'
-      %a#shared-outfit-permalink{:target => '_blank'}
-        = image_tag 'link_go.png', :alt => 'Permalink', :title => 'Permalink to shared outfit'
-      %input#shared-outfit-url.outfit-url{:type => 'text'}
-      %button#share-outfit Share outfit
       %button#save-outfit Save outfit
       %button#save-outfit-not-signed-in Log in to save
+      %button#save-outfit-copy Save as…
       %button#save-current-outfit Save &quot;<span>current outfit</span>&quot;
-      %button#save-outfit-copy Save a copy
       %form#save-outfit-form
         .outfit-star
         %input#save-outfit-name{:type => 'text', :placeholder => 'Outfit name'}
@@ -62,27 +58,44 @@
             %em donate
             at least $5 to help upgrade the server. Thanks!
     #preview-sidebar
+      %nav#preview-sidebar-navbar
+        #preview-sidebar-navbar-closet Closet
+        #preview-sidebar-navbar-sharing Sharing
+        #preview-sidebar-navbar-outfits Outfits
+      #preview-sidebar-content
         #outfit-not-found Outfit not found
         #save-success Outfit successfully saved
         #save-error
         #preview-closet.sidebar-view
-        %a#preview-sidebar-nav-outfits.preview-sidebar-nav{:href => '#'} Your outfits
-        %h2 Closet
           %ul
           %p#fullscreen-copyright
             Images © 2000-2010 Neopets, Inc. All Rights Reserved.
             Used With Permission
         #preview-outfits.sidebar-view
-        %a.preview-sidebar-nav-closet.preview-sidebar-nav{:href => "#"} &larr; Back to Closet
-        %h2 Your outfits
-        %ul
+          %ul#preview-outfits-list
+          #preview-outfits-not-logged-in
+            %figure
+              = image_tag 'outfits_welcome.png'
+              %figcaption Ready to become a pro designer?
+            :markdown
+              We know how hard it can be to keep track of your ideas,
+              especially if you end up having a lot of them.
+              **But Dress to Impress makes it easy.**
+            
+              Once you have an idea for an outfit, you can **build it,
+              save it, and view it again later**, either to update your
+              design or finally make your dream a reality.
+            
+              **Thousands of users have already saved tens of thousands of
+              outfits &mdash; will you be next?**
+            
+            = link_to 'Log in to save this outfit', login_path_with_return_to, :id => 'preview-outfits-log-in'
         #preview-sharing.sidebar-view
-        %a.preview-sidebar-nav-closet.preview-sidebar-nav{:href => '#'} &larr; Back to Closet
-        %h2 Sharing
           #preview-sharing-thumbnail-wrapper
             #preview-sharing-thumbnail-loading
               = image_tag 'outfits/small_loading.gif'
-            %span Generating&hellip;
+              %span#preview-sharing-thumbnail-saving Saving&hellip;
+              %span#preview-sharing-thumbnail-generating Generating&hellip;
             %img#preview-sharing-thumbnail
           %ul#preview-sharing-urls
             %li

public/javascripts/outfits/edit.js

@@ -171,7 +171,9 @@ View.Fullscreen = function (wardrobe) {
   var full = $(document.body).hasClass('fullscreen'), win = $(window),
     preview_el = $('#preview'), search_el = $('#preview-search-form'),
     preview_swf = $('#preview-swf'), sidebar_el = $('#preview-sidebar'),
-    footer = $('#footer'), jwindow = $(window), overrideFull = false;
+    sidebar_content_el = $('#preview-sidebar-content'),
+    sidebar_navbar_el = $('#preview-sidebar-navbar'), footer = $('#footer'),
+    jwindow = $(window), overrideFull = false;
 
   function fit() {
     if(!overrideFull) {
@@ -213,6 +215,12 @@ View.Fullscreen = function (wardrobe) {
       preview_swf.css(size.next);
 
       preview_el.height(available.height);
+      
+      // Now that preview is fit, we fit the sidebar's content element, which
+      // also has to deal with the constraint of its navbar's height.
+      var sidebar_content_height = available.height -
+        sidebar_navbar_el.outerHeight() - 1; // 1px bottom border
+      sidebar_content_el.height(sidebar_content_height);
     }
   }
   $('#preview').data('fit', fit);
@@ -430,8 +438,6 @@ View.Hash = function (wardrobe) {
 
 View.Outfits = function (wardrobe) {
   var current_outfit_permalink_el = $('#current-outfit-permalink'),
-    shared_outfit_permalink_el = $('#shared-outfit-permalink'),
-    shared_outfit_url_el = $('#shared-outfit-url'),
     new_outfit_form_el = $('#save-outfit-form'),
     new_outfit_name_el = $('#save-outfit-name'),
     outfits_el = $('#preview-outfits'),
@@ -451,13 +457,6 @@ View.Outfits = function (wardrobe) {
     return $('li.outfit-' + outfit.id);
   }
 
-  function navLinkTo(callback) {
-    return function (e) {
-      e.preventDefault();
-      callback();
-    }
-  }
-
   function navigateTo(will_be_viewing) {
     var currently_viewing = sidebar_el.attr('class');
     if(currently_viewing != will_be_viewing) previously_viewing = currently_viewing;
@@ -499,9 +498,13 @@ View.Outfits = function (wardrobe) {
     save_outfit_wrapper_el.removeClass('saving-outfit');
   }
 
-  $('#preview-sidebar-nav-outfits').click(navLinkTo(showOutfits));
-
-  $('.preview-sidebar-nav-closet').click(navLinkTo(showCloset));
+  $('#preview-sidebar-navbar-closet').click(showCloset);
+  $('#preview-sidebar-navbar-sharing').click(function () {
+    sharing.startLoading();
+    wardrobe.outfit.share();
+    showSharing();
+  });
+  $('#preview-sidebar-navbar-outfits').click(showOutfits);
 
   $('#save-outfit, #save-outfit-copy').click(showNewOutfitForm);
 
@@ -617,10 +620,6 @@ View.Outfits = function (wardrobe) {
     setOutfitPermalink(outfit, current_outfit_permalink_el);
   }
 
-  function setSharedOutfitPermalink(outfit) {
-    setOutfitPermalink(outfit, shared_outfit_permalink_el, shared_outfit_url_el);
-  }
-
   function setActiveOutfit(outfit) {
     outfits_list_el.find('li.active').removeClass('active');
     if(outfit.id) {
@@ -647,6 +646,7 @@ View.Outfits = function (wardrobe) {
   /* Sharing */
   
   var sharing = new function Sharing() {
+    var WRAPPER = $('#preview-sharing');
     var sharing_url_els = {
       permalink: $('#preview-sharing-permalink-url'),
       large_image: $('#preview-sharing-large-image-url'),
@@ -698,6 +698,11 @@ View.Outfits = function (wardrobe) {
       urls.large_image = pathToUrl(outfit.image_versions.large);
       thumbnail.setUrl(urls.small_image);
       formatUrls();
+      WRAPPER.addClass('urls-loaded');
+    }
+    
+    this.startLoading = function () {
+      WRAPPER.removeClass('urls-loaded');
     }
     
     function formatUrls() {
@@ -720,7 +725,6 @@ View.Outfits = function (wardrobe) {
     }
   
     var thumbnail = new function SharingThumbnail() {
-      var WRAPPER = $('#preview-sharing-thumbnail-wrapper');
       var IMAGE = $('#preview-sharing-thumbnail');
       var RETRY_DELAY = 2000; // 2 seconds
       var url = null;
@@ -734,7 +738,7 @@ View.Outfits = function (wardrobe) {
       }
       
       function hide() {
-        WRAPPER.removeClass('loaded');
+        WRAPPER.removeClass('thumbnail-loaded');
       }
       
       function load() {
@@ -756,7 +760,7 @@ View.Outfits = function (wardrobe) {
       function show() {
         log("Sharing thumbnail found");
         IMAGE.attr('src', url);
-        WRAPPER.addClass('loaded');
+        WRAPPER.addClass('thumbnail-loaded');
       }
       
       this.setUrl = function (newUrl) {
@@ -784,11 +788,6 @@ View.Outfits = function (wardrobe) {
     wardrobe.outfit.create({starred: new_outfit_form_el.hasClass('starred'), name: new_outfit_name_el.val()});
   });
 
-  $('#share-outfit').click(function () {
-    save_outfit_wrapper_el.startLoading();
-    wardrobe.outfit.saveAnonymously();
-  });
-
   new_outfit_form_el.find('div.outfit-star').click(function () {
     new_outfit_form_el.toggleClass('starred');
   });
@@ -806,6 +805,7 @@ View.Outfits = function (wardrobe) {
 
   wardrobe.outfit.bind('saveSuccess', function (outfit) {
     save_success_el.notify();
+    sharing.setOutfit(outfit);
   });
 
   wardrobe.outfit.bind('createSuccess', function (outfit) {
@@ -820,7 +820,6 @@ View.Outfits = function (wardrobe) {
   
   function shareComplete(outfit) {
     save_outfit_wrapper_el.stopLoading().addClass('shared-outfit');
-    setSharedOutfitPermalink(outfit);
     sharing.setOutfit(outfit);
     showSharing();
   }

public/javascripts/wardrobe.js

@@ -808,7 +808,7 @@ function Wardrobe() {
   Controller.all = {};
 
   Controller.all.Outfit = function OutfitController() {
-    var controller = this, outfit = new Outfit, last_saved_outfit = null;
+    var controller = this, outfit = new Outfit, last_shared_outfit = null;
 
     this.in_transaction = false;
 
@@ -938,16 +938,24 @@ function Wardrobe() {
       );
     }
 
-    this.saveAnonymously = function () {
-      if(!outfit.isIdenticalTo(last_saved_outfit)) {
-        last_saved_outfit = outfit.clone();
-        last_saved_outfit.anonymous = true;
-        last_saved_outfit.create(
+    this.share = function () {
+      if(outfit.id) {
+        // If this is a user-saved outfit (user is logged in), no need to
+        // re-share it. Skip to using the current outfit.
+        controller.events.trigger('shareSkipped', outfit);
+      } else if(outfit.isIdenticalTo(last_shared_outfit)) {
+        // If the outfit hasn't changed since last time we shared it, no need to
+        // re-share it. Skip to using the last shared outfit.
+        controller.events.trigger('shareSkipped', last_shared_outfit);
+      } else {
+        // Otherwise, this is a fresh outfit that needs to be shared. Try, and
+        // report success or failure.
+        last_shared_outfit = outfit.clone();
+        last_shared_outfit.anonymous = true;
+        last_shared_outfit.create(
           controller.event('shareSuccess'),
           controller.event('shareFailure')
         );
-      } else {
-        controller.events.trigger('shareSkipped', last_saved_outfit);
       }
     }