paulmataruso/zulip
1
0
Fork 0
mirror of https://github.com/zulip/zulip.git synced 2025-11-07 15:33:30 +00:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source 
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
Download Patch File Download Diff File Expand all files Collapse all files

4
zephyr/jstemplates/subscription.html
View File

@@ -4,7 +4,7 @@
<tr class="subscription_row" id="subscription_{{id}}"> <tr class="subscription_row" id="subscription_{{id}}">
<td> <td>
<div class="subscription_table_elem subscription_header" data-toggle="collapse" data-target="#subscription_settings_{{id}}"> <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> <span class="subscription_name">{{name}}</span>
<button class="btn sub_unsub_button {{^subscribed}}btn-primary{{/subscribed}}" <button class="btn sub_unsub_button {{^subscribed}}btn-primary{{/subscribed}}"
type="button" name="subscription"> type="button" name="subscription">
@@ -18,7 +18,7 @@
</div> </div>
<div id="subscription_settings_{{id}}" class="collapse subscription_settings"> <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> <span class="sub_settings_title">Settings</span>
<ul> <ul>
<li><span class="sub_setting_control"><input class="colorpicker" type="text" value="{{color}}" /></span> <li><span class="sub_setting_control"><input class="colorpicker" type="text" value="{{color}}" /></span>

15
zephyr/static/js/subs.js
View File

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