Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Setting separate theme for panels does not work #165

Closed
dmenne opened this issue Mar 10, 2021 · 8 comments
Closed

Setting separate theme for panels does not work #165

dmenne opened this issue Mar 10, 2021 · 8 comments
Labels
fixed-in-rc-1.0.0 Fixed in latest devel Framework7 This issue comes from the original template

Comments

@dmenne
Copy link
Contributor

dmenne commented Mar 10, 2021

This example is from f7Tab, but any other one would do. The color of the panels is always the base color of the app, different settings are not honoured.

      panels = tagList(
        f7Panel(title = "Left Panel", side = "left", theme = "light", "Blabla", effect = "cover"),
        f7Panel(title = "Right Panel", side = "right", theme = "dark", "Blabla", effect = "cover")
      ),

Possibly related: In shinyMobile.js, `dark_mode is not defined.

            if (dark_mode) $(newTab).css("background-color", "");
@DivadNojnarg
Copy link
Member

I'll check but it could be a Framework7 internal issue. If you change the global theme to light, panels have correct CSS.

@DivadNojnarg DivadNojnarg reopened this Mar 11, 2021
@DivadNojnarg DivadNojnarg added the Framework7 This issue comes from the original template label Apr 20, 2021
@jpiaskowski
Copy link

jpiaskowski commented Aug 24, 2022

I'm having trouble getting the pre-set colors to work:

Setting color = "red" (one of the colors in the F7 framework), nothing happens. When the color is set to a hex value, color = "#FF0000", this color is applied to the main header and various FAB items.

library(shiny)
library(shinyMobile)

shinyApp(
  ui = f7Page(
    title = "Menus",
    options = list(
      #color = "red",  # color not showing up
      color = "#FF0000", # works
      theme = "auto",
      filled = TRUE,
      dark = FALSE),
    f7SingleLayout(
      navbar = f7Navbar(
        title = "f7Menu",
        hairline = FALSE,
        shadow = TRUE
      ),
      f7Button(inputId = "toggle", label = "Toggle menu"),
      f7Menu(
        f7MenuDropdown(
          id = "menu1",
          label = "Menu 1",
          f7MenuItem(inputId = "item1", "Item 1"),
          f7MenuItem(inputId = "item2", "Item 2"),
          f7MenuDropdownDivider(),
          f7MenuItem(inputId = "item3", "Item 3")
        )
      )
    )
  ),
  server = function(input, output, session) {

  }
)

@jpiaskowski
Copy link

jpiaskowski commented Aug 24, 2022

I have a work-around by adding a custom CSS file per F7 documentation:

:root {
  --f7-theme-color: #0C8346;
  --f7-theme-color-rgb: 12, 131, 70; /* same as theme-color */
  --f7-theme-color-shade: #095e32; /* darker version of theme-color */
  --f7-theme-color-tint: #0fa85a;  /* lighter version of theme-color */
  --f7-navbar-text-color: #fff; /* controls navbar and panels titles */
  --f7-block-text-color: #fff; /* font color for panel menu text */
  --f7-block-font-size: 18px; /* font size  for panel menu text */
 }
/* for the left and right menu background */
.page {
  background-color: #095e32 !important;
}

@DivadNojnarg
Copy link
Member

Yes there was an undocumented breaking change in the API. Thanks for reporting it. However, I will now use https://rdrr.io/cran/gplots/man/col2hex.html:

gplots::col2hex("red")
[1] "#FF0000"

which will avoid this situation so you can pass either the name or the code, like before.

@DivadNojnarg
Copy link
Member

That being said, gplots::col2hex only supports a limited number of colors and some of the framework7 one are not like deeporange.

@jpiaskowski
Copy link

Thank you. Setting the color option via your suggestion works, but there is still is the problem that the panel menus (left or right) are running a the default colors for the "light" theme (some very light shade of gray?) - hence this CSS workaround:

.page {
  background-color: #095e32 !important;
}

@DivadNojnarg
Copy link
Member

@jpiaskowski and @dmenne : finally found the issue, a bit obvious. In the JS code, the theme-dark class is added at the top level on the html tag, which propagates to all children. A way to workaround would be to add theme-dark to an element such as .view, which is a sibling of panels. That way, panel theme can be applied independently of the main app theme:

toggleDarkTheme: function() {
        var self = this;
        var $view = self.$(".view-main");
        $view.toggleClass("theme-dark");
      }

DivadNojnarg added a commit that referenced this issue Aug 31, 2022
@DivadNojnarg DivadNojnarg added the fixed-in-rc-1.0.0 Fixed in latest devel label Aug 31, 2022
@DivadNojnarg
Copy link
Member

After further investigations, my modification breaks many other things like notification style, popovers, ... in dark mode (they appear in grey/white). From the Framework7 documentation, I can set a callback when a widget opens (notification) and add it the theme-dark class on the fly:

Shiny.addCustomMessageHandler(widget, (function(message) {
                message.on = {
                    open: function(target) {
                        if (target.app.params.dark) $(target.el).addClass("theme-dark");
                    }
                };
                app[widget].create(message).open();
            }))

Keep you updated on the progress ...

DivadNojnarg added a commit that referenced this issue Aug 31, 2022
DivadNojnarg added a commit that referenced this issue Sep 2, 2022
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
fixed-in-rc-1.0.0 Fixed in latest devel Framework7 This issue comes from the original template
Projects
None yet
Development

No branches or pull requests

3 participants