Predoaler dialog opened and closed in the app.js on init make all the app buttoms and links can't be pressed in every pages

Hello

1)
I made a connection test in the app.js on: init … i put there a dialog.preloader to inform the user… during the test i close the preloader and show alert to inform the result of the connection test… and after it i cant press or follow some links and buttoms in the app… i’ve try to destroy the preloader, but it still happens…
This only happens in the compiled app
it’s seeems like the dialog is still there but invisible or something, just to avoid press the buttoms and links under… because i can press buttoms around

  on: {
    init: function () {
      var f7 = this;
      if (f7.device.cordova) {
        // Init cordova APIs (see cordova-app.js)
        cordovaApp.init(f7);
      }
      var self = this;

      self.dialog.preloader(' ... testing connection ...');

      /// I PUT HERE THE USERNAME AND TOKEN FROM LOCALSTORAGE
      var username = "";
      var token = "";

      self.request({url:window.serverUrl + 'init.php',method:'POST',dataType:'json',
        data:{usuario:username,token:token},
        success:function(data){
          if (data.init.hello == 'true') {
            self.dialog.close();
            if (data.init.db_con == 'true') {
              if (data.init.logged == 'true') {
                self.dialog.alert(" Server OK and DB Conect OK. You are Logged in.");
              } else {
                self.dialog.alert(" Server OK and DB Conect OK. You are NOT Logged in.");
              }
            } else {
              self.dialog.alert(" ERROR: Server OK but NOT DB Conect.");
            }
          }
        },error: function (xhr, status)  {
            self.dialog.close();
            self.dialog.alert(" ERROR: NOT Conect to the Server. ");
        },statusCode: {
          404: function (xhr) {
            self.dialog.close();
            self.dialog.alert(" ERROR 404 ");
          },
          500: function (xhr) {
            self.dialog.close();
            self.dialog.alert(" ERROR 500 ");
          }
        }
      });
      self.dialog.destroy();
    },
  },

Thanks for help

2)
I’ve put a check to change between dark-theme and light one.
Some popups don’t change to the dark theme…
I’ve there too some styled colors i’ve put by myself in some pages but i don´t know how to make this change automatically by the check like does by default…

In example, how i can make the backgroud image change on a div element on dark-theme? or another custom color changes.
I’ve this code in app.js to make a check change to the dark-theme

$$('.toggle input').on('change', function () {
     if (this.checked) {
          $$('.view').addClass('theme-dark');
     } else {
          $$('.view').removeClass('theme-dark');
     }
});

3)
How to make the navbar change to fill-style? I’ve not find this in the documentation

Thanks

#1
do not change the init code

var url = window.serverUrl+'init.php';
var data = { username:'', token:'' };
on: {
  init: function(){
    var self = this;
    if (self.device.cordova) { cordovaApp.init(self); }
    var preloader = self.dialog.preloader('try to connect');
    self.request({url:url,method:'POST',dataType:'json',data:data,
      success: function(data){
        var msg = data.init.db_con == 'true' ? data.init.logged == 'true' ?
        'You are Logged in' : 'You are NOT Logged in' : 'database is down';
        self.dialog.alert(msg);
      },
      error: function(xhr,status){
        if (!this.statusCode.hasOwnProperty(status)){
          self.dialog.alert('Undefined Error');
        }
      },
      statusCode: {
        404: function(xhr){ self.dialog.alert('Not Found'); },
        500: function(xhr){ self.dialog.alert('Internal Server Error'); }
      }, complete: function(xhr,status){ preloader.close(); }
    });
  }
}

#2

$$('.toggle input').on('change',function(e){
  app.root[this.checked?'addClass':'removeClass']('theme-dark');
});

#3
i dont understand what do you need

1)
Your code replicate the same problem, now too in http-serve, not only in android app…
Your code and mine works… both shows the “try to connect” preloader and the alerts,
your code is more compact and better version.
But the problem persist… maybe it’s a bug or somethig?
The probem is because of the preloader, if i take out the preloader dialog the problem dissapears…
The problem is that after this preloader shows and close the place in wich the preloader was in the screen is “untouchable”… i can’t press the buttoms in that place, neither any link, in the whole app… if the link extend both sides of this place i can pick it in the sides but not just in the place the preloader was showed in the screen…
It’s means like the preloader even closed is masking the whole app, and i can’t access to the place in which it was.

2)
My problem is not with the code, it works fine, like yours more compact one, i’ve just take it from an example in this page, and it change propertly to the dark theme…

But i whant to make a custom-made class with respond to this changes too, for changing the background image of a componet to a dark image for the dark theme, and a lighter for the light one… or changing another styled thing to feech the dark or light theme depending of the change this check made…

I was writting this previous text and i’ve stopped to write to try this thing:

I’ve made a global variable and change it when changing the check, this code is in the app.js:

$$('.toggle input').on('change', function () {
  if (this.checked) {
    $$('.view').addClass('theme-dark');
    window.theme = "dark";
  } else {
    $$('.view').removeClass('theme-dark');
    window.theme = "light";
  }
});

An then i’ve put these styles in the page i want to change the background image of some components :

.dark_bg {
  background-image:url(img/bg_dark.jpg);
}
.light_bg {
  background-image:url(img/bg_light.jpg);
}

And in the pageInit ot that page i’ve placed this code:

    if (window.theme == "dark") {
      $$('.my_component_class').addClass('dark_bg');
      $$('.my_component_class').removeClass('light_bg');
    } else {
      $$('.my_component_class').addClass('light_bg');
      $$('.my_component_class').removeClass('dark_bg');
    }

This works, but I know this is not a good way of working, because i need code on every place just to change styles…
I don’t know how to design a style for changing the background images of every places just when globally adding the theme-dark style in the .view class, like framework7 does by default…

3)

In framework7 exist a fill style for the navigation bars, that makes the navbar filled with the main color and the buttons gets blank, instead of having the navbar blank and buttons coloured, I’ve seen this working in the main page example only, inside Themes -> Color Themes in the main page “app simulator” in the right…
But i can’t find the way of make this, i can’t find the documentation of how to change the navbar to fill style, i don’t need to do this dynamically like in the example, only have the navbar fill styled …

Thanks for your answer

#1
i dont know what to say
i just test it on a real device (both iphone and huawei)
and it’s working fine

#2
first => you should add “theme-dark” to app-root, not to view.
so the theme will apply also to your popup (or any other modal)

second => try this :

// js
$$('.toggle input').on('change',function(e){
  app.root[this.checked?'addClass':'removeClass']('theme-dark');
  // this will add/remove theme-dark class to your app-root
  // <div id="app" class="framework7-root theme-dark"></div>
});

// app.css
.my_component_class {
  background-image: url(img/bg_light.jpg);
}

.theme-dark .my_component_class {
  background-image: url(img/bg_dark.jpg);
}

that will do the job
no need to add/remove class on pageInit

#3
still not sure to understand
if it’s not this one than post some code

<div class="navbar">
  <div class="navbar-bg bg-color-black"></div>
  <div class="navbar-inner color-green text-color-green">
    <div class="left">
      <a href="#" class="link back">
        <i class="icon icon-back"></i>
        <span>Back</span>
      </a>
    </div>
    <div class="title">title</div>
  </div>
</div>

this will do your navbar background => “black”
and the text will be => “green”

1 Like

1)
I’ve solved it without the preloader dialog.
The preloader dialog have this annoying behaviour in two different huawei mobiles i’ve try, and sometimes in the http-serve. First time i though my mobile touch pad was broken… :dizzy_face:
If i remove the preloader dialog everything works fine, so i’ve decide to do in other way, without this dialog.
I’m going to do it changing de innerHTML of a page element catching it with document.getElementById.
Now i can put in the page any HTML i want depending of the response… i have does in that way, the dialog.alert dont have this behaviour, so i can use them without problems:

  on: {
    init: function(){
      var self = this;
      if (self.device.cordova) { cordovaApp.init(self); }

      const msg_try = "<div class=\"block block-strong text-align-center\">" +
                        "<p>try to connect</p>" +
                        "<div class=\"preloader color-multi\"></div>" +
                      "</div>";
      const msg_logged = 'You are Logged in';
      const msg_not_logged = 'You are NOT Logged in';
      const msg_not_database = 'database is down';
      const msg_error_undefined = 'Undefined Error ';
      const msg_error_404 = 'Not Found';
      const msg_error_500 = 'Internal Server Error';

      var panel_central = document.getElementById('panel_central');
      var previous_content = panel_central.innerHTML;
      panel_central.innerHTML = msg_try;

      self.request({url:url,method:'POST',dataType:'json',data:data,
        success: function(data){
          var msg = data.init.db_con == 'true' ? data.init.logged == 'true' ?
          msg_logged : msg_not_logged : msg_not_database;
          self.dialog.alert(msg);
        },
        error: function(xhr,status){
          if (!this.statusCode.hasOwnProperty(status)){
            self.dialog.alert(msg_error_undefined + status);
          }
        },
        statusCode: {
          404: function(xhr){ self.dialog.alert(msg_error_404); },
          500: function(xhr){ self.dialog.alert(msg_error_500); }
        }, complete: function(xhr,status){
          panel_central.innerHTML = previous_content;
        }
      });
    }
  }

2)

It’s works fine, just what i needed!!! You are the best one @plpl
:trophy: :1st_place_medal: :muscle:
Thanks a lot!!!

3)
In the home of framework7.io you can navigate down to Color Themes in the Framework7 example.

You can change Navigation Bar Style to filled style…

This is what I want… The filled style of Navigation Bar with can be set by default withing a framework7 app… But it’s not described in the documentation… I’ve not found it.

Thanks!!!

#3
actually it’s a very cool tool (thanks to vladimir)

just stay on that page (“Color Themes”)
use that page to custom your color/style
then scroll down
you will see => “Generated CSS Variables”
and copy/paste the generated css to your app.css

this is the all point of this page

i will post the result here in case you did not understand
but i’m sure you will

just to be clear:
you dont need that page in your app
use it only to generated your color/style

Add this code block to your custom stylesheet:

/* Invert navigation bars to fill style */
:root,
:root.theme-dark,
:root .theme-dark {
  --f7-bars-bg-color: var(--f7-theme-color);
  --f7-bars-bg-color-rgb: var(--f7-theme-color-rgb);
  --f7-bars-translucent-opacity: 0.9;
  --f7-bars-text-color: #fff;
  --f7-bars-link-color: #fff;
  --f7-navbar-subtitle-text-color: rgba(255,255,255,0.85);
  --f7-bars-border-color: transparent;
  --f7-tabbar-link-active-color: #fff;
  --f7-tabbar-link-inactive-color: rgba(255,255,255,0.54);
  --f7-sheet-border-color: transparent;
  --f7-tabbar-link-active-border-color: #fff;
}
.appbar,
.navbar,
.toolbar,
.subnavbar,
.calendar-header,
.calendar-footer {
  --f7-touch-ripple-color: var(--f7-touch-ripple-white);
  --f7-link-highlight-color: var(--f7-link-highlight-white);
  --f7-button-text-color: #fff;
  --f7-button-pressed-bg-color: rgba(255,255,255,0.1);
}
.navbar-large-transparent,
.navbar-large.navbar-transparent {
  --f7-navbar-large-title-text-color: #000;

  --r: 0;
  --g: 122;
  --b: 255;
  --progress: var(--f7-navbar-large-collapse-progress);
  --f7-bars-link-color: rgb(
    calc(var(--r) + (255 - var(--r)) * var(--progress)),
    calc(var(--g) + (255 - var(--g)) * var(--progress)),
    calc(var(--b) + (255 - var(--b)) * var(--progress))
  );
}
.theme-dark .navbar-large-transparent,
.theme-dark .navbar-large.navbar-transparent {
  --f7-navbar-large-title-text-color: #fff;
}
2 Likes

Wow, i’ve not scroll down to see the generated CSS variables Option…
:+1:
THANKS

1 Like