ListIconGadget Restyle

Just starting out? Need help? Post your questions and find answers here.
Dirk Geppert
Posts: 282
Joined: Fri Sep 22, 2017 7:02 am

ListIconGadget Restyle

Post by Dirk Geppert »

Hi folks, I use the ListIconGadget () very often to visualize data contents. But I need that it looks like more modern.
How to improve the gadget style? I need mainly rounded corners and shadow.

I did some tests with the browser debugger, but css changes like 'border-radius: 10px;' seems to be ignored inside LIG elements.

There is also some stuff from peter to change rows and header, but this is to difficult for me, to adapt it for my needs.
Dirk Geppert
Posts: 282
Joined: Fri Sep 22, 2017 7:02 am

Re: ListIconGadget Restyle

Post by Dirk Geppert »

I copied the access to the header from Peter's ListIconGadgetEx code and changed it to Grid. But without success.

Code: Select all

Macro GetGadgetID(ListIconGadget)
  If IsGadget(ListIconGadget) = 0 : ProcedureReturn : EndIf
  If GadgetType(ListIconGadget) <> #PB_GadgetType_ListIcon : ProcedureReturn : EndIf
  Protected GadgetID = GadgetID(ListIconGadget)
EndMacro

Macro GetGrid
  GetGadgetID(ListIconGadget)
  ! var grid = v_gadgetid.gadget;
EndMacro

Procedure SetListIconStyles(ListIconGadget)
    
    GetGrid
    
    ! $('#dgrid_' + grid.id).remove();
    
    ! var style = "<style type='text/css' id='dgrid_" + grid.id + "'>" + 
    !             " #" + grid.id + " [role='grid'] {border-radius: 10px; color: red;}" + 
    !             "</style>"
    
    ! $(style).appendTo("head");
    
  EndProcedure   
  

Enumeration
  #Window
  #ListIconGadget1
EndEnumeration


OpenWindow(#Window, #PB_Ignore, #PB_Ignore, 800, 800, "ListIcon Example", #PB_Window_SystemMenu | #PB_Window_ScreenCentered)

; #ListIconGadget1

ListIconGadget(#ListIconGadget1, 10, 10, 400, 400, "Column 0", 200, #PB_ListIcon_FullRowSelect | #PB_ListIcon_AlwaysShowSelection)
AddGadgetColumn(#ListIconGadget1, 1, "Column 1", 100)

SetListIconStyles(#ListIconGadget1)

Does anyone have an idea how to add round corners and shadows to the ListIconGadget?
Dirk Geppert
Posts: 282
Joined: Fri Sep 22, 2017 7:02 am

Re: ListIconGadget Restyle

Post by Dirk Geppert »

Post Reply