Theme switcher bug

Discussions related to customizing hooks. Hooks are documented at http://bigprof.com/appgini/help/advanced-topics/hooks/
Post Reply
SkayyHH
Veteran Member
Posts: 479
Joined: 2015-04-27 21:18

Theme switcher bug

Post by SkayyHH » 2025-02-01 08:19

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!

SkayyHH
Veteran Member
Posts: 479
Joined: 2015-04-27 21:18

Re: Theme switcher bug

Post by SkayyHH » 2025-02-01 08:27

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 } ?>

SkayyHH
Veteran Member
Posts: 479
Joined: 2015-04-27 21:18

Re: Theme switcher bug

Post by SkayyHH » 2025-02-01 08:42

It's taken care of. It seems to be a problem with the Slate theme in certain situations.

Post Reply