Can someone help me with the theme switcher? It has a bug. When a theme is selected that is not the default theme, the background of a modal window is not applied correctly. You can reproduce it here:
ttps://northwind.demos.appgini.com/customers_view.php
Please select the "Slate" theme and then open the child entries in the "Customer's Orders" column. The background of the modal window ist white not black.
Thank you very much!
Theme switcher bug
Re: Theme switcher bug
That is my Code in footer-extras.php:
Code: Select all
<!-- Theme switcher -->
<?php if(!$_REQUEST['Embedded']) { ?>
<form method="get" target="_blank">
<div id="demo-tools" class="hidden text-center">
<div class="btn-group"">
<button type="button" class="btn btn-default" id="prev-theme" title="Vorheriges Theme" style="width: 40px;"><i class="glyphicon glyphicon-triangle-left"></i></button>
<button type="button" class="btn btn-default active" id="demo-options" style="width: 100px;"><span class="hidden-xs hidden-sm"></span><span class="badge" id="demo-theme-name">Light</span></button>
<button type="button" class="btn btn-default" id="next-theme" title="Nächstes Theme" style="width: 40px;"><i class="glyphicon glyphicon-triangle-right"></i></button>
<button type="button" class="btn btn-default" id="compact-toggle" title="Klein/Groß" style="width: 40px;"><i class="glyphicon glyphicon-resize-full"></i></button>
<button type="reset" class="btn btn-default" id="hide-demo-tools" title="Schließen" style="width: 40px;"><i class="glyphicon glyphicon-remove"></i></button>
</div>
</div>
</form>
<div id="restore-demo-tools" class="hidden text-left">
<button type="button" class="btn btn-default" title="Theme ändern"><i class="glyphicon glyphicon-cog"></i></button>
</div>
<style>
#demo-tools, #restore-demo-tools {
position: fixed;
bottom: 0;
left: 0;
right: 0;
z-index: 1030;
padding: 5px;
}
#restore-demo-tools {
width: 100px;
}
#restore-demo-tools button {
box-shadow: 0px 0px 10px 1px #000;
}
#demo-tools .btn{
white-space: normal;
}
@media (max-width: 991px){
#demo-tools .btn { max-width: 32%; }
}
div#demo-tools.text-center {
border: none !important;
background: none !important;
}
</style>
<script>
var notEmbedded = true;
const themes = [
'light.css',
'dark.css'
];
const demoToolsSameHeight = () => {
if(notEmbedded === undefined) return;
var maxHeight = 30;
$j('#demo-tools .btn').each(function(){
var bh = $j(this).height();
if(bh > maxHeight) maxHeight = bh;
});
$j('#demo-tools .btn').height(maxHeight);
};
const cookie = (name, val) => {
if(val !== undefined) localStorage.setItem(name, val);
return localStorage.getItem(name);
}
const applyDemoToolsVisibility = (viz) => {
if(notEmbedded === undefined) return;
if(viz === undefined) viz = cookie('displayDemoTools');
if(viz === 'null') viz = 'on';
$j('#restore-demo-tools').toggleClass('hidden', viz == 'on');
$j('#demo-tools').toggleClass('hidden', viz != 'on');
if(viz === 'on') demoToolsSameHeight();
cookie('displayDemoTools', viz);
}
const applyTheme = (newTheme) => {
/* get configured theme */
var theme = newTheme;
var prePath = <?php echo json_encode(PREPEND_PATH); ?>;
theme = theme || cookie('theme');
theme = theme || 'light.css'; // default theme if no cookie and no theme passed
if(!theme.match(/.*?\.css$/)) return;
/* remove current theme */
$j('link[rel=stylesheet][href*="initializr/css/"]').remove();
$j('link[rel=stylesheet][href="dynamic.css"]').remove();
$j('body > div.users-area')
.toggleClass('theme-3d', theme == 'bootstrap.css')
.removeClass(themes.map((theme) => 'theme-' + theme.replace(/\.css$/, '')).join(' '))
.addClass(`theme-${theme.replace(/\.css$/, '')}`);
/* apply configured theme */
$j('head')
.append(`<link rel="stylesheet" href="${prePath}resources/initializr/css/${theme}">`);
if(theme == 'bootstrap.css')
$j('head')
.append(`<link rel="stylesheet" href="${prePath}resources/initializr/css/bootstrap-theme.css">`);
$j('head').append(`<link rel="stylesheet" href="${prePath}dynamic.css">`);
/* update displayed theme name */
$j('#demo-theme-name').html(ucfirst(theme.replace(/\.css$/, '')));
/* Apply navbar color, bgcolor and border styles to #demo-tools */
$j('#demo-tools').css({
'border': $j('.navbar').css('border'),
'background-color': $j('.navbar').css('background-color')
});
}
const compact = (turnOn) => {
// on by default
if(turnOn === undefined)
turnOn = (cookie('compactMode') != 'false');
if(notEmbedded !== undefined)
$j('#compact-toggle > .glyphicon')
.toggleClass('glyphicon-resize-small', !turnOn)
.toggleClass('glyphicon-resize-full', turnOn);
$j('body > div.users-area').toggleClass('theme-compact', turnOn);
cookie('compactMode', turnOn ? 'true' : 'false');
}
const ucfirst = (str) => {
str += '';
var f = str.charAt(0).toUpperCase();
return f + str.substr(1);
}
$j(() => {
/* Remove the bottom nav */
$j('.navbar-fixed-bottom').remove();
/* Apply navbar color, bgcolor and border styles to #demo-tools */
$j('#demo-tools').css({
'border': $j('.navbar').css('border'),
'background-color': $j('.navbar').css('background-color')
});
/* initially, based on stored settings: */
/* toggle theme switcher */
applyDemoToolsVisibility();
/* toggle theme compactness */
compact();
/* apply theme */
applyTheme();
/* Same height for all #demo-tools buttons */
setTimeout(demoToolsSameHeight, 2500);
$j('#next-theme, #prev-theme').on('click', function() {
var next = ($j(this).attr('id') == 'next-theme'),
themeIndex = themes.indexOf(cookie('theme'));
if(themeIndex == -1) themeIndex = 0;
if(next) {
themeIndex++;
if(themeIndex >= themes.length) themeIndex = 0;
} else {
themeIndex--;
if(themeIndex < 0) themeIndex = themes.length - 1;
}
cookie('theme', themes[themeIndex]);
applyTheme(themes[themeIndex]);
demoToolsSameHeight();
});
$j('#compact-toggle').click(function() {
compact(
$j(this).children('.glyphicon').hasClass('glyphicon-resize-small')
);
})
$j('#hide-demo-tools').click(function() {
applyDemoToolsVisibility('off');
});
$j('#restore-demo-tools').on('click', 'button', function() {
applyDemoToolsVisibility('on');
})
});
</script>
<?php } ?>
Re: Theme switcher bug
It's taken care of. It seems to be a problem with the Slate theme in certain situations.