The challenge:

The solution:
My solution is built around the <eventbox> widget that holds the actions, while the <text> widget holds the label. A svg image marks the active tab, and a tiny gtk-theme helps us to highlight the tab when hovering. See it in use in pMusic 5.3.1 (or newer).

The gtkdialog-code for one tab looks like this:

<vbox spacing="0" visible="true" space-expand="false" space-fill="false"> 

 <hbox height-request="1" space-expand="true" space-fill="true"> 

 <hseparator height-request="1" width-request="12" space-expand="false" space-fill="false"></hseparator> 

 <text space-expand="true" space-fill="true"><label>""</label></text> 

 </hbox> 

 <eventbox name="tab" space-expand="true" space-fill="true"> 

 <hbox> 

 <vbox> 

 <pixmap> 

 <variable>PIX_TAB_1</variable> 

 <width>20</width> 

 <input file>/tmp/tab_1_icon.svg</input> 

 </pixmap> 

 </vbox> 

 <text name="playqueue_tab" xalign="0" angle="270" wrap="false" space-expand="true" space-fill="true"> 

 <variable>TXT_TAB_1</variable> 

 <input>cat /tmp/tab_1_NAME | sed -e "s%^%\n %" -e "s%$% %"</input> 

 </text> 

 </hbox> 

 <action signal="enter-notify-event">disable:TXT_TAB_1</action> 

 <action signal="leave-notify-event">enable:TXT_TAB_1</action> 

 <action signal="button-press-event">if [[ $PTR_BTN -eq 3 ]]; then menu_tabs 1; else gxmessage "My actions"; fi</action> 

 <action signal="button-release-event">activate:REFRESH_LIST</action> 

 <action condition="command_is_true([[ $PTR_BTN -eq 3 ]] && echo true)" signal="button-release-event">activate:REFRESH_TABS</action>' 

 </eventbox> 

 <variable>VBOX_TAB_1</variable> 

</vbox>

Hovering a tab activates signal="enter-notify-event" and disables the <text> widget in the tab. It might feels wrong to disable a widget we want to highlight, but this is one of the two methods I know to get a hovering effect on <text> widgets. (The other is to underline the text.) When the text get disabled, it receives the fg[INSENSITEVE] signal from the gtk-theme. If we override the theming, disabled widgets can look crisp. The class in the gtk-theme corresponds to <text name="tab" in the gtkdialog-code above.

style "Tab" 

{ 

 fg[INSENSITIVE] = "#00CA10" 

} 

widget "*tab" style "Tab"

Clicking on a tab executes its actions. Mouse left click shows the svg marker for this tab. All other tabs get a blank svg instead of the marker. A right click calls the function menu_tabs to show the menu. Here you can delete a tab, which is nothing else but hiding it. But since gtkdialog can't embed new code, we have to carefully keep this hidden tab for a next time. Therefor, I rebuild the tabs so the hidden ones always are at the end of the line - ready for next 'Add'.

No comments posted yet.