Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Grepダイアログ部品配置の改善 #1431

Merged
merged 2 commits into from
Oct 30, 2020
Merged

Grepダイアログ部品配置の改善 #1431

merged 2 commits into from
Oct 30, 2020

Conversation

suconbu
Copy link
Member

@suconbu suconbu commented Oct 17, 2020 •
edited
Loading

PR の目的

Grep ダイアログおよび Grep 置換ダイアログ上の UI 部品の配置を見直して操作性を向上させます。

日本語

変更前 変更後
image image
image image

英語

変更前 変更後
image image
image image

カテゴリ

  • 仕様変更

PR の背景

#1426 を参照下さい。

PR のメリット

(特に新しく使い始めた方の) 使い勝手が向上すると思います。

PR のデメリット (トレードオフとかあれば)

現行の配置で慣れている人には不便を掛けてしまうかもしれません。

仕様・動作説明

今回の変更は日本語/英語リソースそれぞれの IDD_GREP (Grep), IDD_GREP_REPLACE (Grep置換) が対象です。

本題の変更：

  • 関連する部品同士が集まるよう配置/サイズ変更

本題に便乗して行った変更：

  • ダイアログリソースで指定するフォントを「ＭＳ ゴシック / Tahoma」から「Yu Gothic UI / Segoe UI」に変更(日本語 / 英語)
  • IDD_GREPのキャプションを「Grep条件入力」から「Grep」に変更(メニューアイテムと統一)
  • ラベル文言を他のダイアログを参考に見直し(Term->Find what等)
  • コンボボックス左のラベルを左寄せから右寄せに変更(見栄え/視認性向上)
  • ラベル末尾にコロン追加(ガイドライン適用)
  • アクセラレータキー割り当て見直し
  • .rc内の変更対象部分をVisualStudioのリソースエディタで保存した時の形式に変更

テスト内容

前述の変更対象のダイアログにおいて、文字切れ、UI 部品同士の重なりがないことを確認します。
(ディスプレイ設定の表示スケールが 100% と 200% の時それぞれで確認します)

PR の影響範囲

今回の変更はダイアログリソースの変更のみです。コードの変更はありません。

関連 issue, PR

#1426 #1323

参考資料

配置にあたって以下リンク先のレイアウトガイドラインを参考にしました。
https://docs.microsoft.com/en-us/windows/win32/uxguide/vis-layout

上記ガイドラインを参考にしつつ今回の配置変更にあたって設定した配置ルールです。
image

@suconbu suconbu added the enhancement ■機能追加 label Oct 17, 2020
@suconbu suconbu mentioned this pull request Oct 17, 2020
Closed
@AppVeyorBot
Copy link

✅ Build sakura 1.0.3165 completed (commit 95ec90af66 by @suconbu)

@AppVeyorBot
Copy link

✅ Build sakura 1.0.3166 completed (commit 8c41f0d898 by @suconbu)

berryzplus
berryzplus reviewed Oct 19, 2020
View reviewed changes
sakura_core/sakura_rc.rc Outdated
DEFPUSHBUTTON "検索(&F)", IDOK, 288, 128, 49, 14, WS_GROUP
PUSHBUTTON "キャンセル(&X)", IDCANCEL, 288, 152, 49, 14
PUSHBUTTON "ヘルプ(&H)", IDC_BUTTON_HELP, 288, 177, 49,14
FONT 9, "Yu Gothic UI"
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
FONT 9, "Yu Gothic UI"
FONT 8, "Yu Gothic UI"

全体構成の練り直ししないとダメかもですが、せっかくやるなら標準サイズに合わせといたほうがいいような気がします。

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

現行の指定 (9pt) でメモ帳の検索ダイアログ上の文字などと文字高さが一致しているので、多分 9pt が標準というか一般的なサイズだと思いますがどうでしょうか。

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

現行の指定 (9pt) でメモ帳の検索ダイアログ上の文字などと文字高さが一致しているので、多分 9pt が標準というか一般的なサイズだと思いますがどうでしょうか。

vs2017でリソースエディタからダイアログリソースを追加すると「MS Shell Dlg(8)」になるんですよ。
これってたぶん標準は「MS UI Gothic(8pt)」ということなんじゃないかな、と思うわけです。

メモ帳というかWindows標準の「検索ダイアログ」と合わせてますってことなら、
ダイアログの標準とはズレていてよいと思いますが。

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

vs2017でリソースエディタからダイアログリソースを追加すると「MS Shell Dlg(8)」
あ、確かに……

Yu Gothic UI (8pt) 試してみたところ、(表示スケール 100% 環境では) 文字が読みづらい感じがしてしまったので今回は 9pt で対応しておきます。

@AppVeyorBot
Copy link

✅ Build sakura 1.0.3184 completed (commit ad27848b63 by @suconbu)

@AppVeyorBot
Copy link

✅ Build sakura 1.0.3185 completed (commit 69b241cc13 by @suconbu)

@AppVeyorBot
Copy link

✅ Build sakura 1.0.3186 completed (commit 2790aad76f by @suconbu)

@suconbu
IDD_GREP,IDD_GREP_REPLACEの配置改善(日本語リソース)
786c44e 
* フォントを「ＭＳ ゴシック」から「Yu Gothic UI」に変更
* 関連する部品同士が集まるよう配置/サイズ変更
* IDD_GREPのキャプションを「Grep条件入力」から「Grep」に変更(メニューアイテムと統一)
* ラベル文言を他のダイアログを参考に見直し(Term->Find what等)
* ラベルを左寄せから右寄せに変更(見栄え/視認性向上)
* ラベル末尾にコロン追加(ガイドライン適用)
* アクセラレータキー割り当て見直し
* .rc内の変更対象部分をVisualStudioのリソースエディタで保存した時の形式に変更
@suconbu
IDD_GREP,IDD_GREP_REPLACEの配置改善(英語リソース)
ae0d02b 
* フォントを「Tahoma」から「Segoe UI」に変更
* 他は日本語リソースと同様の変更を適用
@suconbu suconbu force-pushed the feature/improve_grepdlg_layout branch from f5f6f93 to ae0d02b Compare October 26, 2020 15:24
@suconbu suconbu changed the title GREPダイアログの配置改善サンプル Grepダイアログ部品配置の改善 Oct 26, 2020
@suconbu suconbu marked this pull request as ready for review October 26, 2020 15:34
@suconbu
Copy link
Member Author

suconbu commented Oct 26, 2020

最終調整とセルフチェックが済みましたので Draft 解除します。
レビューお願い致します。

@AppVeyorBot
Copy link

✅ Build sakura 1.0.3191 completed (commit b19c1820e0 by @suconbu)

beru
beru reviewed Oct 26, 2020
View reviewed changes
Copy link
Contributor

@beru beru left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

大分見やすいと思います。

テキストボックス（コンボボックスも）の高さが気持ち少し小さい感じがします。

@beru
Copy link
Contributor

beru commented Oct 26, 2020

ちょっと話が変わりますがフォルダ選択もそろそろ SHBrowseForFolder でなく IFileOpenDialog に FOS_PICKFOLDERS 指定したので行うようにしたいですね。。

@suconbu
Copy link
Member Author

suconbu commented Oct 27, 2020

テキストボックス（コンボボックスも）の高さが気持ち少し小さい感じがします。

小さいと感じられるのは表示スケール 200% 時のこのあたりの隙間からでしょうか。
image

そうだとすると、コンボボックスは以下二つの理由からドンピシャサイズ/配置にできておりません。。
今回の PR ではこれでご容赦頂きたいです。

  1. コンボボックスは他の部品と違いユーザー設定のフォント (＝エディタのフォント) により高さが変動する (GREPダイアログ内の全コンボボックスに対してフォント設定で指定されたフォントを使用する #1400 のため)
    →間隔を詰めすぎると選択されたフォントによっては重なってしまう。(特に表示スケール 100% 時)

  2. コンボボックスは表示スケールの変化に対する高さの変化が一致しない
    → 100% 時に高さ 23px だったものが 200% 時には 40px にしかならない。(6px 足りない)
    → 200% の時に間隔少なくピッタリで合わせると 100% の時に重なってしまう。

@beru
Copy link
Contributor

beru commented Oct 28, 2020

小さいと感じられるのは表示スケール 200% 時のこのあたりの隙間からでしょうか。

自分が今使っている環境だと下記のように表示されます。

image

感覚なのでその日の体調とか気分によっても影響されそうですが、他の画面（タイプ別設定や共通設定の各所）のエディトコントロールと比べると少し縦幅が小さいかなと思いました。

ただこの縦幅だと使いにくく感じるほどかというと、まぁ多分大丈夫じゃないかと思います。

beru
beru approved these changes Oct 28, 2020
View reviewed changes
Copy link
Contributor

@beru beru left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

ビルドして実行して画面のレイアウトを確認しました。

問題ないと思います。

@suconbu
Copy link
Member Author

suconbu commented Oct 30, 2020 •
edited
Loading

確認ありがとうございました。マージします。

下記のように表示されます。

ＭＳ ゴシック など丈が短めのフォントが設定されているとほっそりしてしまいますね。。

@suconbu suconbu merged commit daa7fa9 into sakura-editor:master Oct 30, 2020
This was referenced Oct 30, 2020
Closed
Merged
@Ocelot1210 Ocelot1210 mentioned this pull request Mar 27, 2021
Merged
@dep5 dep5 mentioned this pull request Apr 12, 2021
Closed
@suconbu suconbu mentioned this pull request May 21, 2021
Merged
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@berryzplus berryzplus berryzplus left review comments

@beru beru beru approved these changes

Assignees
No one assigned
Labels
enhancement ■機能追加
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.
4 participants
@suconbu @AppVeyorBot @beru @berryzplus