From 34a4ef201a835daaf1c2807d03a5a9eabd9759f6 Mon Sep 17 00:00:00 2001
From: Matchu <matchu1993@gmail.com>
Date: Sat, 30 Jul 2011 22:08:38 -0400
Subject: [PATCH] privacy dropdowns moved to be more out of the way

---
 app/helpers/closet_hangers_helper.rb       |  10 +-
 app/models/closet_visibility.rb            |   2 +-
 app/stylesheets/closet_hangers/_index.sass |  31 +++--
 app/views/closet_hangers/index.html.haml   |   9 +-
 public/javascripts/closet_hangers/index.js |  26 +++++
 public/stylesheets/compiled/screen.css     | 127 ++++++++++++---------
 6 files changed, 135 insertions(+), 70 deletions(-)

diff --git a/app/helpers/closet_hangers_helper.rb b/app/helpers/closet_hangers_helper.rb
index 90c2d527..f05c0f02 100644
--- a/app/helpers/closet_hangers_helper.rb
+++ b/app/helpers/closet_hangers_helper.rb
@@ -19,10 +19,18 @@ module ClosetHangersHelper
 
   def hangers_group_visibility_choices(owned)
     ClosetVisibility.levels.map do |level|
-      [level.description("these items"), level.id]
+      [level.name.to_s.humanize, level.id]
     end
   end
 
+  def closet_visibility_descriptions
+    content = ''
+    ClosetVisibility.levels.each do |level|
+      content << content_tag(:li, level.description('these items'), 'data-id' => level.id)
+    end
+    content_tag :ul, content.html_safe, :class => 'visibility-descriptions'
+  end
+
   # Do we have either unlisted hangers that are owned/wanted, or non-empty
   # owned/wanted lists?
   def has_hangers?(owned)
diff --git a/app/models/closet_visibility.rb b/app/models/closet_visibility.rb
index d2c675f0..d32c579b 100644
--- a/app/models/closet_visibility.rb
+++ b/app/models/closet_visibility.rb
@@ -31,7 +31,7 @@ module ClosetVisibility
     ),
     Level.new(
       :id => 2,
-      :name => :advertised,
+      :name => :trading,
       :description => "$SUBJECT will be publicly listed for trades"
     )
   ]
diff --git a/app/stylesheets/closet_hangers/_index.sass b/app/stylesheets/closet_hangers/_index.sass
index 3fc13c8a..f7de1cef 100644
--- a/app/stylesheets/closet_hangers/_index.sass
+++ b/app/stylesheets/closet_hangers/_index.sass
@@ -144,12 +144,15 @@ body.closet_hangers-index
     position: relative
 
     .visibility-form
-      +inline-block
-      margin: 0 auto 1em
-      position: relative
+      font-size: 85%
+      left: .5em
+      position: absolute
+      text-align: left
+      top: .25em
+      z-index: 10
 
       input, select
-        font-size: 85%
+        font-size: inherit
         margin:
           bottom: 0
           top: 0
@@ -158,14 +161,25 @@ body.closet_hangers-index
         border-color: $background-color
 
       input[type=submit]
-        left: 100%
-        position: absolute
-        top: 0
         visibility: hidden
 
         &:active
           top: 1px
 
+      .visibility-descriptions
+        +opacity(.75)
+        background: $background-color
+        font-style: italic
+        list-style: none
+        padding: 0 .5em
+
+        li
+          display: none
+
+      &:hover
+        .visibility-descriptions li.current
+          display: block
+
     header
       display: block
       position: relative
@@ -174,7 +188,8 @@ body.closet_hangers-index
       +header-text
       font-size: 150%
       line-height: 1
-      margin: 0 auto
+      margin: 0 auto .67em
+      width: 50%
 
     .empty-list
       display: none
diff --git a/app/views/closet_hangers/index.html.haml b/app/views/closet_hangers/index.html.haml
index 586ed835..c1a0cf3c 100644
--- a/app/views/closet_hangers/index.html.haml
+++ b/app/views/closet_hangers/index.html.haml
@@ -68,15 +68,16 @@
       .closet-hangers-group-content
         = render_closet_lists(@closet_lists_by_owned[owned])
         .closet-list.unlisted{'data-hangers-count' => unlisted_hangers_count(owned)}
-          - if has_lists?(owned)
-            %header
-              %h4 (Not in a list)
-          .closet-list-content
+          %header
             - unless public_perspective?
               = form_for @user, :html => {:class => 'visibility-form'} do |f|
                 = f.select hangers_group_visibility_field_name(owned),
                   hangers_group_visibility_choices(owned)
                 = f.submit "Save"
+                = closet_visibility_descriptions
+            - if has_lists?(owned)
+              %h4 (Not in a list)
+          .closet-list-content
             .closet-list-hangers
               = render_unlisted_closet_hangers(owned)
               %span.empty-list
diff --git a/public/javascripts/closet_hangers/index.js b/public/javascripts/closet_hangers/index.js
index a0e0ee9c..a290e83e 100644
--- a/public/javascripts/closet_hangers/index.js
+++ b/public/javascripts/closet_hangers/index.js
@@ -429,7 +429,9 @@
   });
 
   /*
+
     Closet list droppable
+
   */
 
   onHangersInit(function () {
@@ -454,7 +456,31 @@
   });
 
   /*
+
+    Visibility Descriptions
+
+  */
+
+  function updateVisibilityDescription() {
+    var descriptions = $(this).closest('.visibility-form').
+      find('ul.visibility-descriptions');
+
+    descriptions.children('li.current').removeClass('current');
+    descriptions.children('li[data-id=' + $(this).val() + ']').addClass('current');
+  }
+
+  function visibilitySelects() { return $('form.visibility-form select') }
+
+  visibilitySelects().live('change', updateVisibilityDescription);
+
+  onHangersInit(function () {
+    visibilitySelects().each(updateVisibilityDescription);
+  });
+
+  /*
+
     Initialize
+
   */
 
   hangersInit();
diff --git a/public/stylesheets/compiled/screen.css b/public/stylesheets/compiled/screen.css
index 6003dc47..2ef5f584 100644
--- a/public/stylesheets/compiled/screen.css
+++ b/public/stylesheets/compiled/screen.css
@@ -795,30 +795,25 @@ body.closet_hangers-index .closet-list {
 }
 /* line 146, ../../../app/stylesheets/closet_hangers/_index.sass */
 body.closet_hangers-index .closet-list .visibility-form {
-  display: -moz-inline-box;
-  -moz-box-orient: vertical;
-  display: inline-block;
-  vertical-align: middle;
-  *display: inline;
-  *vertical-align: auto;
-  margin: 0 auto 1em;
-  position: relative;
-}
-/* line 151, ../../../app/stylesheets/closet_hangers/_index.sass */
-body.closet_hangers-index .closet-list .visibility-form input, body.closet_hangers-index .closet-list .visibility-form select {
   font-size: 85%;
+  left: 0.5em;
+  position: absolute;
+  text-align: left;
+  top: 0.25em;
+  z-index: 10;
+}
+/* line 154, ../../../app/stylesheets/closet_hangers/_index.sass */
+body.closet_hangers-index .closet-list .visibility-form input, body.closet_hangers-index .closet-list .visibility-form select {
+  font-size: inherit;
   margin-bottom: 0;
   margin-top: 0;
 }
-/* line 157, ../../../app/stylesheets/closet_hangers/_index.sass */
+/* line 160, ../../../app/stylesheets/closet_hangers/_index.sass */
 body.closet_hangers-index .closet-list .visibility-form select {
   border-color: white;
 }
-/* line 160, ../../../app/stylesheets/closet_hangers/_index.sass */
+/* line 163, ../../../app/stylesheets/closet_hangers/_index.sass */
 body.closet_hangers-index .closet-list .visibility-form input[type=submit] {
-  left: 100%;
-  position: absolute;
-  top: 0;
   visibility: hidden;
 }
 /* line 166, ../../../app/stylesheets/closet_hangers/_index.sass */
@@ -826,30 +821,50 @@ body.closet_hangers-index .closet-list .visibility-form input[type=submit]:activ
   top: 1px;
 }
 /* line 169, ../../../app/stylesheets/closet_hangers/_index.sass */
+body.closet_hangers-index .closet-list .visibility-form .visibility-descriptions {
+  -moz-opacity: 0.75;
+  -webkit-opacity: 0.75;
+  -o-opacity: 0.75;
+  -khtml-opacity: 0.75;
+  background: white;
+  font-style: italic;
+  list-style: none;
+  padding: 0 0.5em;
+}
+/* line 176, ../../../app/stylesheets/closet_hangers/_index.sass */
+body.closet_hangers-index .closet-list .visibility-form .visibility-descriptions li {
+  display: none;
+}
+/* line 180, ../../../app/stylesheets/closet_hangers/_index.sass */
+body.closet_hangers-index .closet-list .visibility-form:hover .visibility-descriptions li.current {
+  display: block;
+}
+/* line 183, ../../../app/stylesheets/closet_hangers/_index.sass */
 body.closet_hangers-index .closet-list header {
   display: block;
   position: relative;
 }
-/* line 173, ../../../app/stylesheets/closet_hangers/_index.sass */
+/* line 187, ../../../app/stylesheets/closet_hangers/_index.sass */
 body.closet_hangers-index .closet-list h4 {
   font-family: Delicious, Helvetica, Arial, Verdana, sans-serif;
   font-size: 150%;
   line-height: 1;
-  margin: 0 auto;
+  margin: 0 auto 0.67em;
+  width: 50%;
 }
-/* line 179, ../../../app/stylesheets/closet_hangers/_index.sass */
+/* line 194, ../../../app/stylesheets/closet_hangers/_index.sass */
 body.closet_hangers-index .closet-list .empty-list {
   display: none;
   font-style: italic;
 }
-/* line 183, ../../../app/stylesheets/closet_hangers/_index.sass */
+/* line 198, ../../../app/stylesheets/closet_hangers/_index.sass */
 body.closet_hangers-index .closet-list .closet-list-controls {
   display: none;
   position: absolute;
   right: 1em;
   top: 0;
 }
-/* line 189, ../../../app/stylesheets/closet_hangers/_index.sass */
+/* line 204, ../../../app/stylesheets/closet_hangers/_index.sass */
 body.closet_hangers-index .closet-list .closet-list-controls a, body.closet_hangers-index .closet-list .closet-list-controls input[type=submit] {
   /* http://www.zurb.com/blog_uploads/0000/0617/buttons-03.html */
   -moz-border-radius: 5px;
@@ -890,36 +905,36 @@ body.closet_hangers-index .closet-list .closet-list-controls a:active, body.clos
 body.closet_hangers-index .closet-list .closet-list-controls a:hover, body.closet_hangers-index .closet-list .closet-list-controls input[type=submit]:hover {
   background-color: #999999;
 }
-/* line 192, ../../../app/stylesheets/closet_hangers/_index.sass */
+/* line 207, ../../../app/stylesheets/closet_hangers/_index.sass */
 body.closet_hangers-index .closet-list .closet-list-controls form {
   display: inline;
 }
-/* line 196, ../../../app/stylesheets/closet_hangers/_index.sass */
+/* line 211, ../../../app/stylesheets/closet_hangers/_index.sass */
 body.closet_hangers-index .closet-list[data-hangers-count="0"] .empty-list {
   display: block;
 }
-/* line 200, ../../../app/stylesheets/closet_hangers/_index.sass */
+/* line 215, ../../../app/stylesheets/closet_hangers/_index.sass */
 body.closet_hangers-index .closet-list.unlisted h4 {
   font-size: 125%;
   font-style: italic;
 }
-/* line 206, ../../../app/stylesheets/closet_hangers/_index.sass */
+/* line 221, ../../../app/stylesheets/closet_hangers/_index.sass */
 body.closet_hangers-index .closet-list:hover .closet-list-controls {
   display: block;
 }
-/* line 210, ../../../app/stylesheets/closet_hangers/_index.sass */
+/* line 225, ../../../app/stylesheets/closet_hangers/_index.sass */
 body.closet_hangers-index .closet-list:hover .visibility-form input[type=submit] {
   visibility: visible;
 }
-/* line 213, ../../../app/stylesheets/closet_hangers/_index.sass */
+/* line 228, ../../../app/stylesheets/closet_hangers/_index.sass */
 body.closet_hangers-index .closet-list:hover .visibility-form select {
   border-color: #aaddaa;
 }
-/* line 216, ../../../app/stylesheets/closet_hangers/_index.sass */
+/* line 231, ../../../app/stylesheets/closet_hangers/_index.sass */
 body.closet_hangers-index .closet-list:last-child {
   border-bottom: 0;
 }
-/* line 219, ../../../app/stylesheets/closet_hangers/_index.sass */
+/* line 234, ../../../app/stylesheets/closet_hangers/_index.sass */
 body.closet_hangers-index .closet-list.droppable-active {
   -moz-border-radius: 1em;
   -webkit-border-radius: 1em;
@@ -930,49 +945,49 @@ body.closet_hangers-index .closet-list.droppable-active {
   border-style: dotted;
   margin: 1em 0;
 }
-/* line 226, ../../../app/stylesheets/closet_hangers/_index.sass */
+/* line 241, ../../../app/stylesheets/closet_hangers/_index.sass */
 body.closet_hangers-index .closet-list.droppable-active .object {
   -moz-opacity: 0.25;
   -webkit-opacity: 0.25;
   -o-opacity: 0.25;
   -khtml-opacity: 0.25;
 }
-/* line 230, ../../../app/stylesheets/closet_hangers/_index.sass */
+/* line 245, ../../../app/stylesheets/closet_hangers/_index.sass */
 body.closet_hangers-index .closet-list.droppable-active .object.ui-draggable-dragging {
   -moz-opacity: 1;
   -webkit-opacity: 1;
   -o-opacity: 1;
   -khtml-opacity: 1;
 }
-/* line 233, ../../../app/stylesheets/closet_hangers/_index.sass */
+/* line 248, ../../../app/stylesheets/closet_hangers/_index.sass */
 body.closet_hangers-index .closet-list.droppable-active .closet-list-controls {
   display: none;
 }
-/* line 236, ../../../app/stylesheets/closet_hangers/_index.sass */
+/* line 251, ../../../app/stylesheets/closet_hangers/_index.sass */
 body.closet_hangers-index .closet-list.droppable-active .closet-list-hangers {
   overflow: hidden;
 }
-/* line 240, ../../../app/stylesheets/closet_hangers/_index.sass */
+/* line 255, ../../../app/stylesheets/closet_hangers/_index.sass */
 body.closet_hangers-index .closet-hangers-group-autocomplete-item span, body.closet_hangers-index .closet-list-autocomplete-item span {
   font-style: italic;
   padding: 0.2em 0.4em;
 }
-/* line 245, ../../../app/stylesheets/closet_hangers/_index.sass */
+/* line 260, ../../../app/stylesheets/closet_hangers/_index.sass */
 body.closet_hangers-index .closet-list-autocomplete-item a, body.closet_hangers-index .closet-list-autocomplete-item span {
   font-size: 85%;
   padding-left: 2em;
 }
-/* line 252, ../../../app/stylesheets/closet_hangers/_index.sass */
+/* line 267, ../../../app/stylesheets/closet_hangers/_index.sass */
 body.closet_hangers-index.current-user #closet-hangers .object:hover form {
   display: inline;
 }
-/* line 255, ../../../app/stylesheets/closet_hangers/_index.sass */
+/* line 270, ../../../app/stylesheets/closet_hangers/_index.sass */
 body.closet_hangers-index.current-user #closet-hangers .object:hover .closet-hanger-destroy {
   position: absolute;
   right: 18px;
   top: 0;
 }
-/* line 260, ../../../app/stylesheets/closet_hangers/_index.sass */
+/* line 275, ../../../app/stylesheets/closet_hangers/_index.sass */
 body.closet_hangers-index.current-user #closet-hangers .object:hover .closet-hanger-destroy input {
   /* http://www.zurb.com/blog_uploads/0000/0617/buttons-03.html */
   -moz-border-radius: 5px;
@@ -1013,7 +1028,7 @@ body.closet_hangers-index.current-user #closet-hangers .object:hover .closet-han
 body.closet_hangers-index.current-user #closet-hangers .object:hover .closet-hanger-destroy input:hover {
   background-color: #999999;
 }
-/* line 263, ../../../app/stylesheets/closet_hangers/_index.sass */
+/* line 278, ../../../app/stylesheets/closet_hangers/_index.sass */
 body.closet_hangers-index.current-user #closet-hangers .object:hover .quantity {
   -moz-opacity: 1;
   -webkit-opacity: 1;
@@ -1023,73 +1038,73 @@ body.closet_hangers-index.current-user #closet-hangers .object:hover .quantity {
   top: 56px;
   padding: 0;
 }
-/* line 269, ../../../app/stylesheets/closet_hangers/_index.sass */
+/* line 284, ../../../app/stylesheets/closet_hangers/_index.sass */
 body.closet_hangers-index.current-user #closet-hangers .object:hover .quantity span {
   display: none;
 }
-/* line 272, ../../../app/stylesheets/closet_hangers/_index.sass */
+/* line 287, ../../../app/stylesheets/closet_hangers/_index.sass */
 body.closet_hangers-index.current-user #closet-hangers .object:hover .quantity input[type=number] {
   padding: 2px;
   width: 2em;
 }
-/* line 276, ../../../app/stylesheets/closet_hangers/_index.sass */
+/* line 291, ../../../app/stylesheets/closet_hangers/_index.sass */
 body.closet_hangers-index.current-user #closet-hangers .object:hover .quantity input[type=submit] {
   font-size: 85%;
 }
-/* line 281, ../../../app/stylesheets/closet_hangers/_index.sass */
+/* line 296, ../../../app/stylesheets/closet_hangers/_index.sass */
 body.closet_hangers-index.current-user.js #closet-hangers .object:hover .quantity {
   display: block;
 }
-/* line 284, ../../../app/stylesheets/closet_hangers/_index.sass */
+/* line 299, ../../../app/stylesheets/closet_hangers/_index.sass */
 body.closet_hangers-index.current-user.js #closet-hangers .object:hover .quantity input[type=number] {
   width: 2.5em;
 }
-/* line 287, ../../../app/stylesheets/closet_hangers/_index.sass */
+/* line 302, ../../../app/stylesheets/closet_hangers/_index.sass */
 body.closet_hangers-index.current-user.js #closet-hangers .object:hover .quantity input[type=submit] {
   display: none;
 }
-/* line 290, ../../../app/stylesheets/closet_hangers/_index.sass */
+/* line 305, ../../../app/stylesheets/closet_hangers/_index.sass */
 body.closet_hangers-index.current-user.js #closet-hangers .object.loading {
   background: #eeffee;
   outline: 1px solid #006600;
 }
-/* line 294, ../../../app/stylesheets/closet_hangers/_index.sass */
+/* line 309, ../../../app/stylesheets/closet_hangers/_index.sass */
 body.closet_hangers-index.current-user.js #closet-hangers .object.loading .quantity {
   display: block;
 }
-/* line 297, ../../../app/stylesheets/closet_hangers/_index.sass */
+/* line 312, ../../../app/stylesheets/closet_hangers/_index.sass */
 body.closet_hangers-index.current-user.js #closet-hangers .object.loading .quantity span:after {
   content: "…";
 }
-/* line 301, ../../../app/stylesheets/closet_hangers/_index.sass */
+/* line 316, ../../../app/stylesheets/closet_hangers/_index.sass */
 body.closet_hangers-index.current-user.js #closet-hangers-contact form {
   display: none;
 }
-/* line 304, ../../../app/stylesheets/closet_hangers/_index.sass */
+/* line 319, ../../../app/stylesheets/closet_hangers/_index.sass */
 body.closet_hangers-index.current-user.js #closet-hangers-contact .edit-contact-link, body.closet_hangers-index.current-user.js #closet-hangers-contact #cancel-contact-link {
   display: inline;
 }
-/* line 308, ../../../app/stylesheets/closet_hangers/_index.sass */
+/* line 323, ../../../app/stylesheets/closet_hangers/_index.sass */
 body.closet_hangers-index.current-user.js #closet-hangers-contact.editing form {
   display: block;
 }
-/* line 311, ../../../app/stylesheets/closet_hangers/_index.sass */
+/* line 326, ../../../app/stylesheets/closet_hangers/_index.sass */
 body.closet_hangers-index.current-user.js #closet-hangers-contact.editing .edit-contact-link {
   display: none;
 }
-/* line 316, ../../../app/stylesheets/closet_hangers/_index.sass */
+/* line 331, ../../../app/stylesheets/closet_hangers/_index.sass */
 body.closet_hangers-index.current-user.js .closet-hangers-group header .show, body.closet_hangers-index.current-user.js .closet-hangers-group header .hide {
   cursor: pointer;
 }
-/* line 319, ../../../app/stylesheets/closet_hangers/_index.sass */
+/* line 334, ../../../app/stylesheets/closet_hangers/_index.sass */
 body.closet_hangers-index.current-user.js .closet-hangers-group header .hide {
   display: block;
 }
-/* line 323, ../../../app/stylesheets/closet_hangers/_index.sass */
+/* line 338, ../../../app/stylesheets/closet_hangers/_index.sass */
 body.closet_hangers-index.current-user.js .closet-hangers-group.hidden header .hide, body.closet_hangers-index.current-user.js .closet-hangers-group.hidden .closet-hangers-group-content {
   display: none;
 }
-/* line 326, ../../../app/stylesheets/closet_hangers/_index.sass */
+/* line 341, ../../../app/stylesheets/closet_hangers/_index.sass */
 body.closet_hangers-index.current-user.js .closet-hangers-group.hidden header .show {
   display: block;
 }