Implemented 2-steps Theme switcher with warning before proceeding

This commit is contained in:
Djamil Legato
2015-08-06 12:48:42 -07:00
parent 41fd0cc0c2
commit 865628913a
2 changed files with 27 additions and 1 deletions

View File

@@ -360,6 +360,7 @@ $(function () {
addBtn.data('key-index', index); addBtn.data('key-index', index);
} }
// Collections
$('[data-type="collection"]').each(function () { $('[data-type="collection"]').each(function () {
var el = $(this), var el = $(this),
holder = el.find('[data-collection-holder]'), holder = el.find('[data-collection-holder]'),
@@ -396,4 +397,13 @@ $(function () {
button.data('key-index', ++key); button.data('key-index', ++key);
}); });
}); });
// Thems Switcher Warning
$(document).on('mousedown', '[data-remodal-target="theme-switch-warn"]', function(e){
var name = $(e.target).closest('[data-gpm-theme]').find('.gpm-name a').text(),
remodal = $('.remodal.theme-switcher');
remodal.find('strong').text(name);
remodal.find('.button.continue').attr('href', $(e.target).attr('href'));
});
}); });

View File

@@ -38,7 +38,7 @@
<i class="fa fa-star"></i> Active Theme <i class="fa fa-star"></i> Active Theme
</div> </div>
{% else %} {% else %}
<a href="{{ base_url_relative }}/themes/{{ slug }}/task:activate" class="gpm-actions"> <a data-remodal-target="theme-switch-warn" href="{{ base_url_relative }}/themes/{{ slug }}/task:activate" class="gpm-actions">
{# <a class="disabled" href="{{ base_url_relative }}/themes/{{ slug }}/task:activate"><i class="fa fa-fw fa-toggle-off"></i></a> #} {# <a class="disabled" href="{{ base_url_relative }}/themes/{{ slug }}/task:activate"><i class="fa fa-fw fa-toggle-off"></i></a> #}
Activate Activate
</a> </a>
@@ -48,3 +48,19 @@
</div> </div>
{% endfor %} {% endfor %}
</div> </div>
<div class="remodal theme-switcher" data-remodal-id="theme-switch-warn" data-remodal-options="hashTracking: false">
<form>
<h1>Switching to <strong>{theme_name}</strong></h1>
<p class="bigger">
By switching to a different theme, there is no guarantee that all the layout pages are supported, potentially causing errors when trying to load said pages.
</p>
<p class="bigger">
Do you want to continue and switch to the new theme <strong>{theme_name}</strong>?
</p>
<br>
<div class="button-bar">
<a class="button secondary remodal-cancel" href="#"><i class="fa fa-fw fa-close"></i> Cancel</a>
<a class="button continue" href="#"><i class="fa fa-fw fa-check"></i>Continue</a>
</form>
</div>