From 0e522fa371a4e0384e14c565d87a4804836ee0d4 Mon Sep 17 00:00:00 2001 From: Matchu Date: Sat, 30 Jul 2011 19:47:04 -0400 Subject: [PATCH] better handle list emptiness for drag-n-drop --- app/controllers/closet_hangers_controller.rb | 7 +- app/helpers/closet_hangers_helper.rb | 5 ++ app/stylesheets/closet_hangers/_index.sass | 7 +- app/views/closet_hangers/index.html.haml | 24 ++--- app/views/closet_lists/_closet_list.html.haml | 12 +-- public/javascripts/closet_hangers/index.js | 25 ++++-- public/stylesheets/compiled/screen.css | 90 ++++++++++--------- 7 files changed, 101 insertions(+), 69 deletions(-) diff --git a/app/controllers/closet_hangers_controller.rb b/app/controllers/closet_hangers_controller.rb index 2d9dd540..4bd30974 100644 --- a/app/controllers/closet_hangers_controller.rb +++ b/app/controllers/closet_hangers_controller.rb @@ -14,10 +14,13 @@ class ClosetHangersController < ApplicationController def index @user = User.find params[:user_id] + @public_perspective = params.has_key?(:public) || !user_is?(@user) + @perspective_user = current_user unless @public_perspective + @closet_lists_by_owned = @user.closet_lists.alphabetical. includes(:hangers => :item).group_by(&:hangers_owned) - visible_groups = @user.closet_hangers_groups_visible_to(current_user) + visible_groups = @user.closet_hangers_groups_visible_to(@perspective_user) unless visible_groups.empty? @unlisted_closet_hangers_by_owned = @user.closet_hangers.unlisted. owned_before_wanted.alphabetical_by_item_name.includes(:item). @@ -25,8 +28,6 @@ class ClosetHangersController < ApplicationController else @unlisted_closet_hangers_by_owned = {} end - - @public_perspective = params.has_key?(:public) || !user_is?(@user) end # Since the user does not care about the idea of a hanger, but rather the diff --git a/app/helpers/closet_hangers_helper.rb b/app/helpers/closet_hangers_helper.rb index d3f7b47d..90c2d527 100644 --- a/app/helpers/closet_hangers_helper.rb +++ b/app/helpers/closet_hangers_helper.rb @@ -69,5 +69,10 @@ module ClosetHangersHelper :collection => @unlisted_closet_hangers_by_owned[owned], :locals => {:show_controls => !public_perspective?} end + + def unlisted_hangers_count(owned) + hangers = @unlisted_closet_hangers_by_owned[owned] + hangers ? hangers.size : 0 + end end diff --git a/app/stylesheets/closet_hangers/_index.sass b/app/stylesheets/closet_hangers/_index.sass index 78cdab24..3fc13c8a 100644 --- a/app/stylesheets/closet_hangers/_index.sass +++ b/app/stylesheets/closet_hangers/_index.sass @@ -145,7 +145,7 @@ body.closet_hangers-index .visibility-form +inline-block - margin: 0 auto + margin: 0 auto 1em position: relative input, select @@ -177,6 +177,7 @@ body.closet_hangers-index margin: 0 auto .empty-list + display: none font-style: italic .closet-list-controls @@ -191,6 +192,10 @@ body.closet_hangers-index form display: inline + &[data-hangers-count="0"] + .empty-list + display: block + &.unlisted h4 font: diff --git a/app/views/closet_hangers/index.html.haml b/app/views/closet_hangers/index.html.haml index 90dae381..586ed835 100644 --- a/app/views/closet_hangers/index.html.haml +++ b/app/views/closet_hangers/index.html.haml @@ -67,16 +67,20 @@ = link_to_add_closet_list 'Add new list', :owned => owned, :class => 'add-closet-list' .closet-hangers-group-content = render_closet_lists(@closet_lists_by_owned[owned]) - - if @unlisted_closet_hangers_by_owned[owned] - .closet-list.unlisted - - if has_lists?(owned) - %header - %h4 (Not in a list) - = 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-list-hangers= render_unlisted_closet_hangers(owned) + .closet-list.unlisted{'data-hangers-count' => unlisted_hangers_count(owned)} + - if has_lists?(owned) + %header + %h4 (Not in a list) + .closet-list-content + - 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-list-hangers + = render_unlisted_closet_hangers(owned) + %span.empty-list + All the items you #{closet_hanger_verb owned} are in lists. - if public_perspective? - unless has_hangers?(owned) %p #{@user.name} doesn't seem to #{closet_hanger_verb(owned, false)} anything. diff --git a/app/views/closet_lists/_closet_list.html.haml b/app/views/closet_lists/_closet_list.html.haml index 7b67f5b4..040bbf04 100644 --- a/app/views/closet_lists/_closet_list.html.haml +++ b/app/views/closet_lists/_closet_list.html.haml @@ -1,4 +1,4 @@ -.closet-list{'data-id' => closet_list.id, :id => "closet-list-#{closet_list.id}"} +.closet-list{'data-id' => closet_list.id, 'data-hangers-count' => closet_list.hangers.count, :id => "closet-list-#{closet_list.id}"} %header - if show_controls .closet-list-controls @@ -10,9 +10,9 @@ - if closet_list.description? = closet_list_description_format closet_list - .closet-list-hangers - - unless closet_list.hangers.empty? - = render_sorted_hangers(closet_list, show_controls) - - else - %span.empty-list This list is empty. + .closet-list-content + .closet-list-hangers + - unless closet_list.hangers.empty? + = render_sorted_hangers(closet_list, show_controls) + %span.empty-list This list is empty. diff --git a/public/javascripts/closet_hangers/index.js b/public/javascripts/closet_hangers/index.js index 5e1803f0..a0e0ee9c 100644 --- a/public/javascripts/closet_hangers/index.js +++ b/public/javascripts/closet_hangers/index.js @@ -126,14 +126,25 @@ return a.find('span.name').text().localeCompare(b.find('span.name').text()); } - function moveItemToList(item, listId) { - if(listId) { - var list = $('#closet-list-' + listId); + function findList(id, item) { + if(id) { + return $('#closet-list-' + id); } else { - var list = item.closest('.closet-hangers-group').find('div.closet-list.unlisted'); + return item.closest('.closet-hangers-group').find('div.closet-list.unlisted'); } - var hangersWrapper = list.find('div.closet-list-hangers'); + } + + function updateListHangersCount(el) { + el.attr('data-hangers-count', el.find('div.object').length); + } + + function moveItemToList(item, listId) { + var newList = findList(listId, item); + var oldList = item.closest('div.closet-list'); + var hangersWrapper = newList.find('div.closet-list-hangers'); item.insertIntoSortedList(hangersWrapper, compareItemsByName); + updateListHangersCount(oldList); + updateListHangersCount(newList); } function submitUpdateForm(form) { @@ -427,11 +438,11 @@ group.find('div.closet-list').droppable({ accept: '#' + group.attr('id') + ' div.object', activate: function () { - $(this).find('.closet-list-hangers').animate({opacity: 0, height: 100}, 250); + $(this).find('.closet-list-content').animate({opacity: 0, height: 100}, 250); }, activeClass: 'droppable-active', deactivate: function () { - $(this).find('.closet-list-hangers').css('height', 'auto').animate({opacity: 1}, 250); + $(this).find('.closet-list-content').css('height', 'auto').animate({opacity: 1}, 250); }, drop: function (e, ui) { var form = ui.draggable.find('form.closet-hanger-update'); diff --git a/public/stylesheets/compiled/screen.css b/public/stylesheets/compiled/screen.css index 5d6fe689..6003dc47 100644 --- a/public/stylesheets/compiled/screen.css +++ b/public/stylesheets/compiled/screen.css @@ -801,7 +801,7 @@ body.closet_hangers-index .closet-list .visibility-form { vertical-align: middle; *display: inline; *vertical-align: auto; - margin: 0 auto; + margin: 0 auto 1em; position: relative; } /* line 151, ../../../app/stylesheets/closet_hangers/_index.sass */ @@ -839,16 +839,17 @@ body.closet_hangers-index .closet-list h4 { } /* line 179, ../../../app/stylesheets/closet_hangers/_index.sass */ body.closet_hangers-index .closet-list .empty-list { + display: none; font-style: italic; } -/* line 182, ../../../app/stylesheets/closet_hangers/_index.sass */ +/* line 183, ../../../app/stylesheets/closet_hangers/_index.sass */ body.closet_hangers-index .closet-list .closet-list-controls { display: none; position: absolute; right: 1em; top: 0; } -/* line 188, ../../../app/stylesheets/closet_hangers/_index.sass */ +/* line 189, ../../../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; @@ -889,32 +890,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 191, ../../../app/stylesheets/closet_hangers/_index.sass */ +/* line 192, ../../../app/stylesheets/closet_hangers/_index.sass */ body.closet_hangers-index .closet-list .closet-list-controls form { display: inline; } -/* line 195, ../../../app/stylesheets/closet_hangers/_index.sass */ +/* line 196, ../../../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 */ body.closet_hangers-index .closet-list.unlisted h4 { font-size: 125%; font-style: italic; } -/* line 201, ../../../app/stylesheets/closet_hangers/_index.sass */ +/* line 206, ../../../app/stylesheets/closet_hangers/_index.sass */ body.closet_hangers-index .closet-list:hover .closet-list-controls { display: block; } -/* line 205, ../../../app/stylesheets/closet_hangers/_index.sass */ +/* line 210, ../../../app/stylesheets/closet_hangers/_index.sass */ body.closet_hangers-index .closet-list:hover .visibility-form input[type=submit] { visibility: visible; } -/* line 208, ../../../app/stylesheets/closet_hangers/_index.sass */ +/* line 213, ../../../app/stylesheets/closet_hangers/_index.sass */ body.closet_hangers-index .closet-list:hover .visibility-form select { border-color: #aaddaa; } -/* line 211, ../../../app/stylesheets/closet_hangers/_index.sass */ +/* line 216, ../../../app/stylesheets/closet_hangers/_index.sass */ body.closet_hangers-index .closet-list:last-child { border-bottom: 0; } -/* line 214, ../../../app/stylesheets/closet_hangers/_index.sass */ +/* line 219, ../../../app/stylesheets/closet_hangers/_index.sass */ body.closet_hangers-index .closet-list.droppable-active { -moz-border-radius: 1em; -webkit-border-radius: 1em; @@ -925,49 +930,49 @@ body.closet_hangers-index .closet-list.droppable-active { border-style: dotted; margin: 1em 0; } -/* line 221, ../../../app/stylesheets/closet_hangers/_index.sass */ +/* line 226, ../../../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 225, ../../../app/stylesheets/closet_hangers/_index.sass */ +/* line 230, ../../../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 228, ../../../app/stylesheets/closet_hangers/_index.sass */ +/* line 233, ../../../app/stylesheets/closet_hangers/_index.sass */ body.closet_hangers-index .closet-list.droppable-active .closet-list-controls { display: none; } -/* line 231, ../../../app/stylesheets/closet_hangers/_index.sass */ +/* line 236, ../../../app/stylesheets/closet_hangers/_index.sass */ body.closet_hangers-index .closet-list.droppable-active .closet-list-hangers { overflow: hidden; } -/* line 235, ../../../app/stylesheets/closet_hangers/_index.sass */ +/* line 240, ../../../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 240, ../../../app/stylesheets/closet_hangers/_index.sass */ +/* line 245, ../../../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 247, ../../../app/stylesheets/closet_hangers/_index.sass */ +/* line 252, ../../../app/stylesheets/closet_hangers/_index.sass */ body.closet_hangers-index.current-user #closet-hangers .object:hover form { display: inline; } -/* line 250, ../../../app/stylesheets/closet_hangers/_index.sass */ +/* line 255, ../../../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 255, ../../../app/stylesheets/closet_hangers/_index.sass */ +/* line 260, ../../../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; @@ -1008,7 +1013,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 258, ../../../app/stylesheets/closet_hangers/_index.sass */ +/* line 263, ../../../app/stylesheets/closet_hangers/_index.sass */ body.closet_hangers-index.current-user #closet-hangers .object:hover .quantity { -moz-opacity: 1; -webkit-opacity: 1; @@ -1018,73 +1023,73 @@ body.closet_hangers-index.current-user #closet-hangers .object:hover .quantity { top: 56px; padding: 0; } -/* line 264, ../../../app/stylesheets/closet_hangers/_index.sass */ +/* line 269, ../../../app/stylesheets/closet_hangers/_index.sass */ body.closet_hangers-index.current-user #closet-hangers .object:hover .quantity span { display: none; } -/* line 267, ../../../app/stylesheets/closet_hangers/_index.sass */ +/* line 272, ../../../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 271, ../../../app/stylesheets/closet_hangers/_index.sass */ +/* line 276, ../../../app/stylesheets/closet_hangers/_index.sass */ body.closet_hangers-index.current-user #closet-hangers .object:hover .quantity input[type=submit] { font-size: 85%; } -/* line 276, ../../../app/stylesheets/closet_hangers/_index.sass */ +/* line 281, ../../../app/stylesheets/closet_hangers/_index.sass */ body.closet_hangers-index.current-user.js #closet-hangers .object:hover .quantity { display: block; } -/* line 279, ../../../app/stylesheets/closet_hangers/_index.sass */ +/* line 284, ../../../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 282, ../../../app/stylesheets/closet_hangers/_index.sass */ +/* line 287, ../../../app/stylesheets/closet_hangers/_index.sass */ body.closet_hangers-index.current-user.js #closet-hangers .object:hover .quantity input[type=submit] { display: none; } -/* line 285, ../../../app/stylesheets/closet_hangers/_index.sass */ +/* line 290, ../../../app/stylesheets/closet_hangers/_index.sass */ body.closet_hangers-index.current-user.js #closet-hangers .object.loading { background: #eeffee; outline: 1px solid #006600; } -/* line 289, ../../../app/stylesheets/closet_hangers/_index.sass */ +/* line 294, ../../../app/stylesheets/closet_hangers/_index.sass */ body.closet_hangers-index.current-user.js #closet-hangers .object.loading .quantity { display: block; } -/* line 292, ../../../app/stylesheets/closet_hangers/_index.sass */ +/* line 297, ../../../app/stylesheets/closet_hangers/_index.sass */ body.closet_hangers-index.current-user.js #closet-hangers .object.loading .quantity span:after { content: "…"; } -/* line 296, ../../../app/stylesheets/closet_hangers/_index.sass */ +/* line 301, ../../../app/stylesheets/closet_hangers/_index.sass */ body.closet_hangers-index.current-user.js #closet-hangers-contact form { display: none; } -/* line 299, ../../../app/stylesheets/closet_hangers/_index.sass */ +/* line 304, ../../../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 303, ../../../app/stylesheets/closet_hangers/_index.sass */ +/* line 308, ../../../app/stylesheets/closet_hangers/_index.sass */ body.closet_hangers-index.current-user.js #closet-hangers-contact.editing form { display: block; } -/* line 306, ../../../app/stylesheets/closet_hangers/_index.sass */ +/* line 311, ../../../app/stylesheets/closet_hangers/_index.sass */ body.closet_hangers-index.current-user.js #closet-hangers-contact.editing .edit-contact-link { display: none; } -/* line 311, ../../../app/stylesheets/closet_hangers/_index.sass */ +/* line 316, ../../../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 314, ../../../app/stylesheets/closet_hangers/_index.sass */ +/* line 319, ../../../app/stylesheets/closet_hangers/_index.sass */ body.closet_hangers-index.current-user.js .closet-hangers-group header .hide { display: block; } -/* line 318, ../../../app/stylesheets/closet_hangers/_index.sass */ +/* line 323, ../../../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 321, ../../../app/stylesheets/closet_hangers/_index.sass */ +/* line 326, ../../../app/stylesheets/closet_hangers/_index.sass */ body.closet_hangers-index.current-user.js .closet-hangers-group.hidden header .show { display: block; } @@ -1105,31 +1110,32 @@ body.closet_lists-new #secondary-nav, body.closet_lists-create #secondary-nav, b } /* line 4, ../../../app/stylesheets/closet_lists/_form.sass */ body.closet_lists-new form ul.fields, body.closet_lists-create form ul.fields, body.closet_lists-edit form ul.fields, body.closet_lists-update form ul.fields { + clear: both; list-style: none; } -/* line 7, ../../../app/stylesheets/closet_lists/_form.sass */ +/* line 8, ../../../app/stylesheets/closet_lists/_form.sass */ body.closet_lists-new form ul.fields label, body.closet_lists-create form ul.fields label, body.closet_lists-edit form ul.fields label, body.closet_lists-update form ul.fields label { float: left; font-weight: bold; margin-right: 1em; } -/* line 12, ../../../app/stylesheets/closet_lists/_form.sass */ +/* line 13, ../../../app/stylesheets/closet_lists/_form.sass */ body.closet_lists-new form ul.fields li, body.closet_lists-create form ul.fields li, body.closet_lists-edit form ul.fields li, body.closet_lists-update form ul.fields li { padding: 0.75em 0; width: 25em; } -/* line 16, ../../../app/stylesheets/closet_lists/_form.sass */ +/* line 17, ../../../app/stylesheets/closet_lists/_form.sass */ body.closet_lists-new form ul.fields input, body.closet_lists-new form ul.fields textarea, body.closet_lists-new form ul.fields select, body.closet_lists-create form ul.fields input, body.closet_lists-create form ul.fields textarea, body.closet_lists-create form ul.fields select, body.closet_lists-edit form ul.fields input, body.closet_lists-edit form ul.fields textarea, body.closet_lists-edit form ul.fields select, body.closet_lists-update form ul.fields input, body.closet_lists-update form ul.fields textarea, body.closet_lists-update form ul.fields select { clear: both; display: block; margin-top: 0.25em; width: 80%; } -/* line 22, ../../../app/stylesheets/closet_lists/_form.sass */ +/* line 23, ../../../app/stylesheets/closet_lists/_form.sass */ body.closet_lists-new form ul.fields textarea, body.closet_lists-create form ul.fields textarea, body.closet_lists-edit form ul.fields textarea, body.closet_lists-update form ul.fields textarea { height: 12em; } -/* line 25, ../../../app/stylesheets/closet_lists/_form.sass */ +/* line 26, ../../../app/stylesheets/closet_lists/_form.sass */ body.closet_lists-new form ul.fields .hint, body.closet_lists-create form ul.fields .hint, body.closet_lists-edit form ul.fields .hint, body.closet_lists-update form ul.fields .hint { display: block; font-size: 85%;