dice/impress
1
0
Fork 0
forked from OpenNeo/impress
Code Pull requests Activity

better handle list emptiness for drag-n-drop

Browse source
This commit is contained in:
Emi Matchu 2011-07-30 19:47:04 -04:00
parent bbb4e02b75
commit 0e522fa371
7 changed files with 101 additions and 69 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

7
app/controllers/closet_hangers_controller.rb
View file

@ -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

5
app/helpers/closet_hangers_helper.rb
View file

@ -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

7
app/stylesheets/closet_hangers/_index.sass
View file

@ -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:

10
app/views/closet_hangers/index.html.haml
View file

@ -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
.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)
.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.

4
app/views/closet_lists/_closet_list.html.haml
View file

@ -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-content
.closet-list-hangers
- unless closet_list.hangers.empty?
= render_sorted_hangers(closet_list, show_controls)
- else
%span.empty-list This list is empty.

25
public/javascripts/closet_hangers/index.js
View file

@ -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');

90
public/stylesheets/compiled/screen.css
View file

@ -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%;