Hacktoberfest 2026：メンテナが10月に向けて印を付けた、オープンで初心者向けの issue。 Hacktoberfest の issue を見る

ux(button): show the label as a tooltip when QueryaButton truncates it

オープン 初心者向け
  • 何か問題がありますか？
#1,689 コメント 0 件 リアクション 0 件 担当者 0 名 GitHub で見る

メンテナーはふだん 1 日以内に返信

まだ誰も着手していません。

評価

難易度
2/5
見積もり時間
1〜3時間
初心者へのやさしさ
78/100
issue の種類
バグ
明瞭さ
明確に書かれている
活発さ
活発
技術スタック
dart, flutter
領域
accessibility, frontend

調査の方向性

querya_button.dart の、375 行目と 513 行目付近で示されているラベルのレイアウトと tooltip のロジックから始めます。LayoutBuilder と TextPainter を使い、1 行のテキストがラベルに使用できる幅を超えるか確認します。明示的に指定された tooltip は維持し、アイコンのみのボタンは対象外にします。ラベルが切り詰められる場合、ラベルが幅に収まる場合、明示的な tooltip がある場合のテストを追加または更新します。切り詰められたラベルだけが全文を tooltip として受け取れば完了です。

索引モデルが issue の本文から書いたものです。

説明

enhancement ui

From a review of the component library, checked against dev.

Problem

QueryaButton draws its label with maxLines: 1 and TextOverflow.ellipsis (querya_button.dart, ~line 375). The tooltip is only shown when tooltip is set or the button is icon-only (~line 513). A label cut short by a narrow toolbar or a long translation therefore cannot be read by hovering.

Not this

Do not simply fall back to label as the tooltip: every button would then show "Save" over "Save" on hover.

Change
  • Show the label as the tooltip only when it is actually truncated: lay the text out with a TextPainter (maxLines: 1, the button's text style, the width the label gets) and check didExceedMaxLines, in a LayoutBuilder. An explicit tooltip still wins.
  • Check that a button which fits shows no tooltip, and that one which does not shows the full label.
Acceptance
  • Narrow QueryaButton with a long label shows the full label as a tooltip on hover.
  • A button that fits shows no tooltip of its own.
  • The extra layout pass is not paid by buttons with an explicit tooltip, or by icon-only buttons.
Considered in the same review and left out
  • AppToast keeps its overlay in statics (app_toast.dart: _entry, _overlay). The review wanted an AppToastScope for multi-window use; the app has one window (bitsdojo_window only restyles it), so there is no problem to solve today.
  • QueryaTabStrip announcing a tab change: each tab is a Semantics(button, selected) with its own Focus, and arrow keys move focus, so a screen reader reads the selected tab already. An extra SemanticsService.announce would read it twice.
主要言語
Dart
スター
23
フォーク
1
平均マージ
31分
マージ済み PR（30日）
570

環境構築

Codespaces で開く

このプロジェクトの開発コンテナを、あなたの GitHub アカウントでブラウザ上に起動します。

はじめの一歩

  1. issue を最後まで読み、次にプロジェクトのコントリビューションガイドを読みます。
  2. 着手することを issue にコメントします — 二人が同じ作業をするのを防げます。
  3. リポジトリをフォークし、ブランチを切って変更します。
  4. issue 番号を参照したプルリクエストを送ります。

QueryaHub/Querya-Desktop のほかの issue

QueryaHub/Querya-Desktop の issue をすべて見る

似ている issue

Dart の issue をもっと見る

新しい issue をメールで受け取る

初心者向けの GitHub issue を短くまとめたダイジェスト。