[MobileUI] Change buttons size to "large" and more...

[Caronte3D]

I think this kind of things should be part of the MobileUI implementation, but in the mean time, you can use workarounds like this one:

Code: Select all

If ContainerMobile(#PB_Any, #PB_Mobile_Page, "margin:8px")
  If ContainerMobile(#PB_Any, #PB_Mobile_Row, "margin:8px")
    ButtonMobile(0, "Button Small",#PB_Mobile_Right)
    ButtonMobile(1, "Button Large")    
    CloseMobileContainer()
  EndIf
  CloseMobileContainer()
EndIf

;This line does the trick and you can modify it to do more similar things:
! $('ons-button:contains("Button Large")').attr('modifier', 'large');

EDIT: viewtopic.php?p=10602#p10602

[Peter]

However, this only works if the button has a specific text.

This one is a little more flexible:

Code: Select all

If ContainerMobile(#PB_Any, #PB_Mobile_Page, "margin:8px")
  If ContainerMobile(#PB_Any, #PB_Mobile_Row, "margin:8px")
    ButtonMobile(0, "Button Small",#PB_Mobile_Right)
    
    LargeButton = ButtonMobile(1, "Hello World!")    
    ! $(v_largebutton.gadget).attr('modifier', 'large');

    CloseMobileContainer()
  EndIf
  CloseMobileContainer()
EndIf

[Caronte3D]

Perfect!
Thanks Peter

[Fred]

May be SetMobileAttribute() can work as well (not tested)

[Fred]

I think this kind of things should be part of the MobileUI implementation

Actually I'm interested to know which features are missing from the wrapper, because I didn't created a real app with the UI for now, so I could have missed something useful.

[Peter]

May be SetMobileAttribute() can work as well (not tested)

Code: Select all

If ContainerMobile(#PB_Any, #PB_Mobile_Page, "margin:8px")
  If ContainerMobile(#PB_Any, #PB_Mobile_Row, "margin:8px")
    ButtonMobile(0, "Button Small",#PB_Mobile_Right)
    ButtonMobile(1, "Hello World!")    
    CloseMobileContainer()
  EndIf
  CloseMobileContainer()
EndIf

SetMobileAttribute(1, "modifier", "large") 

[Caronte3D]

May be SetMobileAttribute() can work as well (not tested)

I missed it
but... Peter too

Actually I'm interested to know which features are missing from the wrapper, because I didn't created a real app with the UI for now, so I could have missed something useful.

I just started my first SB app and... for example, I think it would be better to do things a bit more logically, so that when I want to insert a component, the most common parameters are in the definition (more in tune with SB/PB gadgets).

It's like the flags... I'd love for #PB_... constants to show only the ones that work on a specific component and not have them all.

Anyway, I can survive with that, if there is a workaround to make the UI near 100% configurable

[Caronte3D]

Actually I'm interested to know which features are missing from the wrapper, because I didn't created a real app with the UI for now, so I could have missed something useful.

May be make the height of components configurable is needed in most UIs, like this one I'm using to make the button x2 taller:

Code: Select all

    !$(v_largebutton.gadget).css({
    !  'height': function(index, currentHeight) {
    !    return parseFloat(currentHeight) * 2 + 'px'; // Duplicate height
    !  },
    !  'display': 'flex',
    !  'align-items': 'center',  // Center vertically
    !  'justify-content': 'center', // Center horizontally
    !  'font-size': '1.5em'  // Tweak the text size
    !});

[Quin]

It's like the flags... I'd love for #PB_... constants to show only the ones that work on a specific component and not have them all.

+1, it puzzled me a bit when upgrading to SB 3.00, going to the flags field of a mobile call, typing #PB_, and seeing all the constants

[Fred]

Ha yes I didn't added them in the IDE code source. Will do for the next version