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);
}
// Collections
$('[data-type="collection"]').each(function () {
var el = $(this),
holder = el.find('[data-collection-holder]'),
@@ -396,4 +397,13 @@ $(function () {
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
</div>
{% 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> #}
Activate
</a>
@@ -48,3 +48,19 @@
</div>
{% endfor %}
</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>