fly/fgdata
1
0
Fork 0
Code Activity

Improve menu item styling

Browse source
This commit is contained in:
TheFGFSEagle 2023-01-18 15:26:33 +01:00 • committed by James Turner
parent 419de94e68
commit 2a95685eb7
2 changed files with 20 additions and 17 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

27
Nasal/canvas/gui/styles/DefaultStyle.nas
View file

@ -476,9 +476,7 @@ DefaultStyle.widgets["tab-widget"] = {
setSize: func(model, w, h) { setSize: func(model, w, h) {
me.bg.reset().rect(0, w, h, 0); me.bg.reset().rect(0, w, h, 0);
me.tabBar.set("clip", sprintf("rect(0, %d, %d, 0)", w, me.tabBarHeight));
me.content.setTranslation(0, me.tabBarHeight); me.content.setTranslation(0, me.tabBarHeight);
me.content.set("clip", sprintf("rect(0, %d, %d, 0)", w, h));
}, },
}; };
@ -491,8 +489,7 @@ DefaultStyle.widgets["tab-widget-tab-button"] = {
.set("stroke", me._style.getColor("tab_widget_tab_button_border")) .set("stroke", me._style.getColor("tab_widget_tab_button_border"))
.set("stroke-width", 1); .set("stroke-width", 1);
me._selected_indicator = me._root.createChild("path") me._selected_indicator = me._root.createChild("path")
.set("stroke", me._style.getColor("tab_widget_tab_button_selected_indicator")) .set("stroke-width", 4);
.set("stroke-width", 3);
me._label = me._root.createChild("text") me._label = me._root.createChild("text")
.set("font", "LiberationFonts/LiberationSans-Regular.ttf") .set("font", "LiberationFonts/LiberationSans-Regular.ttf")
.set("character-size", 14) .set("character-size", 14)
@ -501,7 +498,8 @@ DefaultStyle.widgets["tab-widget-tab-button"] = {
setSize: func(model, w, h) { setSize: func(model, w, h) {
me._bg.reset().rect(3, 0, w - 6, h); me._bg.reset().rect(3, 0, w - 6, h);
me._selected_indicator.reset().moveTo(3, h).horiz(w - 6); me._selected_indicator.reset().moveTo(3, h - 2).horiz(w - 6);
me._label.setTranslation(w / 2, h / 2 + 5);
}, },
setText: func(model, text) { setText: func(model, text) {
@ -518,8 +516,6 @@ DefaultStyle.widgets["tab-widget-tab-button"] = {
var backdrop = !model._windowFocus(); var backdrop = !model._windowFocus();
var (w, h) = model._size; var (w, h) = model._size;
me._label.setTranslation(w / 2, h / 2 + 5);
var bg_color_name = "tab_widget_tab_button_bg_focused"; var bg_color_name = "tab_widget_tab_button_bg_focused";
if (backdrop) { if (backdrop) {
bg_color_name = "tab_widget_tab_button_bg_unfocused"; bg_color_name = "tab_widget_tab_button_bg_unfocused";
@ -530,13 +526,14 @@ DefaultStyle.widgets["tab-widget-tab-button"] = {
} }
me._bg.set("fill", me._style.getColor(bg_color_name)); me._bg.set("fill", me._style.getColor(bg_color_name));
me._selected_indicator.setVisible(model._selected); me._selected_indicator.setVisible(model._selected or model._hover);
var selected_indicator_color_name = "tab_widget_tab_button_selected_indicator_selected";
if (backdrop) { if (!model._selected and model._hover) {
me._label.set("fill", me._style.getColor("backdrop_fg_color")); selected_indicator_color_name = "tab_widget_tab_button_selected_indicator_unselected_hovered";
} else {
me._label.set("fill", me._style.getColor("fg_color"));
} }
me._selected_indicator.set("stroke", me._style.getColor(selected_indicator_color_name));
me._label.set("fill", me._style.getColor((backdrop ? "backdrop_" : "") ~ "fg_color"));
} }
}; };
@ -958,11 +955,11 @@ DefaultStyle.widgets["menu-bar"] = {
new: func(parent, cfg) { new: func(parent, cfg) {
me._root = parent.createChild("group", "menu-bar"); me._root = parent.createChild("group", "menu-bar");
me._bg = me._root.createChild("path"); me._bg = me._root.createChild("path");
me._items = me._root.createChild("group", "tab-widget-content"); me._items = me._root.createChild("group", "menu-bar-items");
}, },
setSize: func(model, w, h) { setSize: func(model, w, h) {
me._bg.reset().rect(0, 0, w, h); me._bg.reset().rect(0, 0, w, 24);
me._items.setTranslation(0, 0); me._items.setTranslation(0, 0);
return me; return me;
}, },

10
gui/styles/AmbianceClassic/style.xml
View file

@ -108,11 +108,17 @@
<blue type="float">0.885</blue> <blue type="float">0.885</blue>
</tab_widget_tab_button_border> </tab_widget_tab_button_border>
<tab_widget_tab_button_selected_indicator> <tab_widget_tab_button_selected_indicator_selected>
<red type="float">0.11</red> <red type="float">0.11</red>
<green type="float">0.42</green> <green type="float">0.42</green>
<blue type="float">0.8</blue> <blue type="float">0.8</blue>
</tab_widget_tab_button_selected_indicator> </tab_widget_tab_button_selected_indicator_selected>
<tab_widget_tab_button_selected_indicator_unselected_hovered>
<red type="float">0.41</red>
<green type="float">0.42</green>
<blue type="float">0.43</blue>
</tab_widget_tab_button_selected_indicator_unselected_hovered>
<tab_widget_tab_button_bg_focused> <tab_widget_tab_button_bg_focused>
<red type="float">0.86</red> <red type="float">0.86</red>