OH3.1M3 has some great new features

Add-ons UIs
1

Just wanted to point out specifically some of the great new features of M3 for MainUI I have been desperately waiting for:

  1. Now you can create pages in a HABpanel manner: see here
  2. Supprt of CSS files: see here

many thanks to @hubsif for these great additions!
is it possible to provide a small documentation especially for new CSS feature?

7 Likes
2

Indeed, @hubsif has been the most active contributor these last couple of months, kudos to him!

4 Likes
3

main kudos still go to you😜

1 Like
4

still wanted to acknowledge that :wink:

image
image926×499 33.4 KB

5

Hi Hubsi/@hubsif, hi Yannick/@ysc
I have a few questions about your css feature. I did a lot of trial&error and wanted to make sure that I did not miss anything…

  1. Do I do something wrong or is it simply not possible to define stylesheets on page level?
    example:
config:
  layoutType: fixed
  label: Wohnzimmer
  stylesheet: |
    .testclass {
      fontSize: 1.3vw;
      iconSize: 20
      background: "#223344"
    }
...
        - component: oh-label-card
          config:
            label: Label
            icon: oh:lightbulb
            class: testclass
  1. Is it possible to refer to a selector on element property level?
    example:
component: oh-label-card
config:
  stylesheet: |
    .myIconSize {
      iconSize: 20;
    }
    .myColor {
      iconColor: "#223344"
    }

label: Test
icon: f7:alarm
iconSize: myIconSize
iconColor: myColor
  1. is it possible to make showFullscreenIcon, hideNavbar, hideSidebarIcon available within tabbed pages?
  2. can i put all css definitions into an external file like /static/ui_custom.css and how can I refer to it?
  3. Unfortunately this is not working anymore which does not matter if bullet #1 (define stylesheets on page level) would work

Many thanks in advance

6

It is possible and yes, I think you are doing something wrong: The stylesheet requires to be plain CSS, so each of your declarations requires a semicolon at the end - edit: and valid selectors and units!) :wink: .

Actually, I’m no CSS guru myself, but afaik what you’re trying here is not possible with CSS :thinking:. It’s only possible to define variables, not custom selectors.

I don’t think so, I would have to check. Originially, those config options were created for fixed layout pages, but since they actually apply to more than just fixed layout pages, I wanted to move those features to pages in general. Will do that soon.

That’s not possible yet.

This should actually not be affected by the change. Can you please recheck and if confirmed provide a sample?

7

:laughing: Beware, I’m taking over!!!

Nah, I agree to Oliver, my contributions are tiny compared to that whole UI you created :wink: :+1: . And like many I will also probably be a temporary appearance only…

2 Likes
8

ok. found out that #223344 color codes are not working which was my test example. in general style sheets on page level are working if you do it correctly :slight_smile:

GREAT! I use nothing else but tabed pages for navigation purposes. that would be great if you could add that if you have time.

correct. my fault. my apologies for bad testing.

one thing though: it seems like there are some invisible elements remaining:

image
image2560×1370 529 KB