Drop toolbar text labels in favor of hover tooltips
Varying label widths (especially when a button hides itself, e.g. "Labs" on a question with no lab results) broke even spacing between icons. Every toolbar button already has a tooltip_text carrying the same label as hover text, so drop the labels/wrapper containers entirely and go back to plain, uniformly-spaced 44x44 icon buttons.
This commit is contained in:
@@ -280,8 +280,8 @@ func _ready() -> void:
|
|||||||
timer_label.horizontal_alignment = HORIZONTAL_ALIGNMENT_RIGHT
|
timer_label.horizontal_alignment = HORIZONTAL_ALIGNMENT_RIGHT
|
||||||
|
|
||||||
question_toolbar = HFlowContainer.new()
|
question_toolbar = HFlowContainer.new()
|
||||||
question_toolbar.add_theme_constant_override("h_separation", 10)
|
question_toolbar.add_theme_constant_override("h_separation", 8)
|
||||||
question_toolbar.add_theme_constant_override("v_separation", 10)
|
question_toolbar.add_theme_constant_override("v_separation", 8)
|
||||||
question_toolbar.alignment = FlowContainer.ALIGNMENT_END
|
question_toolbar.alignment = FlowContainer.ALIGNMENT_END
|
||||||
|
|
||||||
# All the underlying buttons are constructed up front (same as before) so every
|
# All the underlying buttons are constructed up front (same as before) so every
|
||||||
@@ -402,19 +402,22 @@ func _ready() -> void:
|
|||||||
Style.style_chip(app_feedback_button, Style.CYAN)
|
Style.style_chip(app_feedback_button, Style.CYAN)
|
||||||
app_feedback_button.pressed.connect(func(): main.open_feedback_dialog())
|
app_feedback_button.pressed.connect(func(): main.open_feedback_dialog())
|
||||||
|
|
||||||
# Every action is directly visible and labeled - no "More" overflow or popups
|
# Every action is directly visible - no "More" overflow or popups hiding
|
||||||
# hiding controls behind an extra click.
|
# controls behind an extra click. No text labels either (their varying widths
|
||||||
question_toolbar.add_child(_toolbar_labeled_group([text_smaller_button, text_larger_button], "Text size"))
|
# broke even spacing when a button hid itself) - each button's existing
|
||||||
question_toolbar.add_child(_toolbar_labeled_button(calculator_button, "Calculator"))
|
# tooltip_text carries the label as hover text instead.
|
||||||
question_toolbar.add_child(_toolbar_labeled_button(labs_button, "Labs"))
|
question_toolbar.add_child(text_smaller_button)
|
||||||
question_toolbar.add_child(_toolbar_labeled_button(clear_highlight_button, "Clear highlight"))
|
question_toolbar.add_child(text_larger_button)
|
||||||
question_toolbar.add_child(_toolbar_labeled_button(flag_button, "Flag"))
|
question_toolbar.add_child(calculator_button)
|
||||||
question_toolbar.add_child(_toolbar_labeled_button(flashcard_button, "Flashcard"))
|
question_toolbar.add_child(labs_button)
|
||||||
question_toolbar.add_child(_toolbar_labeled_button(bookmark_button, "Bookmark"))
|
question_toolbar.add_child(clear_highlight_button)
|
||||||
question_toolbar.add_child(_toolbar_labeled_button(report_button, "Report"))
|
question_toolbar.add_child(flag_button)
|
||||||
question_toolbar.add_child(_toolbar_labeled_button(notes_button, "Notes"))
|
question_toolbar.add_child(flashcard_button)
|
||||||
question_toolbar.add_child(_toolbar_labeled_button(theme_button, "Theme"))
|
question_toolbar.add_child(bookmark_button)
|
||||||
question_toolbar.add_child(_toolbar_labeled_button(app_feedback_button, "Feedback"))
|
question_toolbar.add_child(report_button)
|
||||||
|
question_toolbar.add_child(notes_button)
|
||||||
|
question_toolbar.add_child(theme_button)
|
||||||
|
question_toolbar.add_child(app_feedback_button)
|
||||||
|
|
||||||
header_toolbar_host = HBoxContainer.new()
|
header_toolbar_host = HBoxContainer.new()
|
||||||
header_toolbar_host.alignment = BoxContainer.ALIGNMENT_END
|
header_toolbar_host.alignment = BoxContainer.ALIGNMENT_END
|
||||||
@@ -782,10 +785,7 @@ func _fit_modal_panels() -> void:
|
|||||||
func _refresh_responsive_layout() -> void:
|
func _refresh_responsive_layout() -> void:
|
||||||
if header_toolbar_host == null or header_row == null or header_stack == null:
|
if header_toolbar_host == null or header_row == null or header_stack == null:
|
||||||
return
|
return
|
||||||
# The toolbar now has 11 labeled groups (vs. 12 bare 44px icons before), so it
|
var compact := size.x < 1120.0
|
||||||
# needs real room to lay out on one line - give it enough minimum width to do
|
|
||||||
# that and raise the compact-mode threshold to match.
|
|
||||||
var compact := size.x < 1360.0
|
|
||||||
var target_parent: Control = header_row
|
var target_parent: Control = header_row
|
||||||
if compact:
|
if compact:
|
||||||
target_parent = header_stack
|
target_parent = header_stack
|
||||||
@@ -793,7 +793,7 @@ func _refresh_responsive_layout() -> void:
|
|||||||
header_toolbar_host.reparent(target_parent)
|
header_toolbar_host.reparent(target_parent)
|
||||||
header_toolbar_host.size_flags_horizontal = Control.SIZE_EXPAND_FILL if compact else Control.SIZE_SHRINK_END
|
header_toolbar_host.size_flags_horizontal = Control.SIZE_EXPAND_FILL if compact else Control.SIZE_SHRINK_END
|
||||||
question_toolbar.size_flags_horizontal = Control.SIZE_EXPAND_FILL
|
question_toolbar.size_flags_horizontal = Control.SIZE_EXPAND_FILL
|
||||||
header_toolbar_host.custom_minimum_size.x = 0.0 if compact else 980.0
|
header_toolbar_host.custom_minimum_size.x = 0.0 if compact else 520.0
|
||||||
if size.x < 560.0:
|
if size.x < 560.0:
|
||||||
nav_palette.columns = 5
|
nav_palette.columns = 5
|
||||||
else:
|
else:
|
||||||
@@ -1012,9 +1012,6 @@ func _apply_question_theme() -> void:
|
|||||||
question_panel.add_theme_stylebox_override("panel", _question_content_box(dark))
|
question_panel.add_theme_stylebox_override("panel", _question_content_box(dark))
|
||||||
if navigator_popup != null:
|
if navigator_popup != null:
|
||||||
navigator_popup.add_theme_stylebox_override("panel", Brand.content_card_box(dark, false))
|
navigator_popup.add_theme_stylebox_override("panel", Brand.content_card_box(dark, false))
|
||||||
if question_toolbar != null:
|
|
||||||
for label in question_toolbar.find_children("ToolbarLabel", "Label", true, false):
|
|
||||||
(label as Label).add_theme_color_override("font_color", Brand.muted_color(dark))
|
|
||||||
progress_button.add_theme_color_override("font_color", Brand.text_color(dark))
|
progress_button.add_theme_color_override("font_color", Brand.text_color(dark))
|
||||||
progress_button.add_theme_color_override("font_hover_color", Brand.SKY_BLUE)
|
progress_button.add_theme_color_override("font_hover_color", Brand.SKY_BLUE)
|
||||||
progress_button.add_theme_color_override("font_disabled_color", Brand.text_color(dark))
|
progress_button.add_theme_color_override("font_disabled_color", Brand.text_color(dark))
|
||||||
@@ -2131,48 +2128,6 @@ func _toggle_question_navigator() -> void:
|
|||||||
navigator_popup.popup(Rect2i(Vector2i(popup_x, popup_y), popup_size))
|
navigator_popup.popup(Rect2i(Vector2i(popup_x, popup_y), popup_size))
|
||||||
|
|
||||||
|
|
||||||
func _toolbar_labeled_button(button: Button, label_text: String) -> Control:
|
|
||||||
var wrap := VBoxContainer.new()
|
|
||||||
wrap.add_theme_constant_override("separation", 2)
|
|
||||||
wrap.alignment = BoxContainer.ALIGNMENT_CENTER
|
|
||||||
wrap.size_flags_horizontal = Control.SIZE_SHRINK_CENTER
|
|
||||||
wrap.visible = button.visible
|
|
||||||
wrap.add_child(button)
|
|
||||||
var label := Label.new()
|
|
||||||
label.name = "ToolbarLabel"
|
|
||||||
label.text = label_text
|
|
||||||
label.horizontal_alignment = HORIZONTAL_ALIGNMENT_CENTER
|
|
||||||
label.size_flags_horizontal = Control.SIZE_SHRINK_CENTER
|
|
||||||
_set_scaled_label(label, 11, Brand.SLATE)
|
|
||||||
wrap.add_child(label)
|
|
||||||
# Some buttons (labs, notes, flashcard, bookmark) toggle their own .visible at
|
|
||||||
# runtime depending on the question/session - without this, the icon disappears
|
|
||||||
# but its label stays behind, leaving an orphaned label floating in a gap.
|
|
||||||
button.visibility_changed.connect(func(): wrap.visible = button.visible)
|
|
||||||
return wrap
|
|
||||||
|
|
||||||
|
|
||||||
func _toolbar_labeled_group(buttons: Array, label_text: String) -> Control:
|
|
||||||
var wrap := VBoxContainer.new()
|
|
||||||
wrap.add_theme_constant_override("separation", 2)
|
|
||||||
wrap.alignment = BoxContainer.ALIGNMENT_CENTER
|
|
||||||
wrap.size_flags_horizontal = Control.SIZE_SHRINK_CENTER
|
|
||||||
var row := HBoxContainer.new()
|
|
||||||
row.add_theme_constant_override("separation", 4)
|
|
||||||
row.alignment = BoxContainer.ALIGNMENT_CENTER
|
|
||||||
for button in buttons:
|
|
||||||
row.add_child(button)
|
|
||||||
wrap.add_child(row)
|
|
||||||
var label := Label.new()
|
|
||||||
label.name = "ToolbarLabel"
|
|
||||||
label.text = label_text
|
|
||||||
label.horizontal_alignment = HORIZONTAL_ALIGNMENT_CENTER
|
|
||||||
label.size_flags_horizontal = Control.SIZE_SHRINK_CENTER
|
|
||||||
_set_scaled_label(label, 11, Brand.SLATE)
|
|
||||||
wrap.add_child(label)
|
|
||||||
return wrap
|
|
||||||
|
|
||||||
|
|
||||||
func _navigate_to_question(target_index: int) -> void:
|
func _navigate_to_question(target_index: int) -> void:
|
||||||
if target_index == BlockSessionService.current_index:
|
if target_index == BlockSessionService.current_index:
|
||||||
navigator_popup.hide()
|
navigator_popup.hide()
|
||||||
|
|||||||
Reference in New Issue
Block a user