Add animation effects when hiding/unhiding the subscription swatch and regular settings

Fixes #727

(imported from commit 0d794e3e06c1b5238444712f032961b841e9eedb)
This commit is contained in:
Zev Benjamin
2013-01-25 18:04:18 -05:00
parent 30a1409a3d
commit 56e29ba11c
2 changed files with 13 additions and 6 deletions

View File

@@ -4,7 +4,7 @@
<tr class="subscription_row" id="subscription_{{id}}">
<td>
<div class="subscription_table_elem subscription_header" data-toggle="collapse" data-target="#subscription_settings_{{id}}">
<span class="color_swatch {{^subscribed}}invisible{{/subscribed}}" style="background-color: {{color}}"></span>
<span class="color_swatch fade {{#subscribed}}in{{/subscribed}}" style="background-color: {{color}}"></span>
<span class="subscription_name">{{name}}</span>
<button class="btn sub_unsub_button {{^subscribed}}btn-primary{{/subscribed}}"
type="button" name="subscription">
@@ -18,7 +18,7 @@
</div>
<div id="subscription_settings_{{id}}" class="collapse subscription_settings">
<div class="regular_subscription_settings {{^subscribed}}hide{{/subscribed}}">
<div class="regular_subscription_settings collapse {{#subscribed}}in{{/subscribed}}">
<span class="sub_settings_title">Settings</span>
<ul>
<li><span class="sub_setting_control"><input class="colorpicker" type="text" value="{{color}}" /></span>

View File

@@ -154,8 +154,8 @@ function mark_subscribed(stream_name) {
// Display the swatch and subscription settings
var sub_row = settings.closest('.subscription_row');
sub_row.find(".color_swatch").removeClass("invisible");
sub_row.find(".regular_subscription_settings").show();
sub_row.find(".color_swatch").addClass('in');
sub_row.find(".regular_subscription_settings").collapse('show');
} else {
// Already subscribed
return;
@@ -180,13 +180,13 @@ function mark_unsubscribed(stream_name) {
// Hide the swatch and subscription settings
var sub_row = settings.closest('.subscription_row');
sub_row.find(".color_swatch").addClass("invisible");
sub_row.find(".color_swatch").removeClass('in');
if (sub.render_subscribers) {
// TODO: having a completely empty settings div messes
// with Bootstrap's collapser. We currently just ensure
// that it's not empty on the MIT realm, even though it
// looks weird
sub_row.find(".regular_subscription_settings").hide();
sub_row.find(".regular_subscription_settings").collapse('hide');
}
} else {
// Already unsubscribed
@@ -455,6 +455,13 @@ $(function () {
});
});
$("#subscriptions_table").on("show", ".regular_subscription_settings", function (e) {
// We want 'show' events that originate from
// 'regular_subscription_settings' divs not to trigger the
// handler for the entire subscription_settings div
e.stopPropagation();
});
$("#subscriptions_table").on("show", ".subscription_settings", function (e) {
var sub_row = $(e.target).closest('.subscription_row');
var stream = sub_row.find('.subscription_name').text();