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.

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

macOSにおいて最小化・最大化・閉じるボタンをタイトルバーの左側に表示する #558

Conversation

PickledChair
Copy link
Member

内容

タイトルの通りです。 #554 の最初の案を採用しています。

関連 Issue

close #554

スクリーンショット・動画など

変更前

before_mac_titlebar

変更後

after_mac_titlebar

その他

Issue #554 に他のデザイン案もあります。より良い案が見つかればそちらに変更します。
手持ちのWindows環境がないので、macOS以外に動作確認を行ったのはLinuxのみです。
Vue.js や TypeScript に不慣れなので、ナンセンスなことをおこなっていた場合はご指摘よろしくお願いします。

@PickledChair
Copy link
Member Author

#554 (comment) のような意見もいただきましたので、デザインについてはまだ様子を見ています…… #554 (comment) の最後の案も確かに自然だと思いました。

@PickledChair
Copy link
Member Author

先ほどのコメント #554 (comment) にポジティブなリアクションがついたので、左上のボタンの背景が透過になるように変更しました。

after_mac_titlebar_transparent

@PickledChair
Copy link
Member Author

先述の通りLinuxで動作確認したのですが、実際には見た目がまったく変わっていないわけではなく、ピン留めボタンと最小化ボタンの間が少し空くようになっています。許容範囲の変更だと考えたのですが、問題があれば対策を考えます。

voicevox_linux_titlebar

Copy link
Member

@y-chan y-chan left a comment

Choose a reason for hiding this comment

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

Macは持ってないのでそこまでの動作確認はできませんが、他の2種を見る限り特に問題はなさそうです、LGTM

min-max-close-buttonsコンポーネントにまとめてしまうのはメンテナンス的にもよいと思いました

@Hiroshiba
Copy link
Member

ピン留めボタンと最小化ボタンの間が少し空くようになっています

たしかに気になるといえば気になるので、簡単に消せそうなら消したいところかもです。
vueのslotを使う(結構難しい)か、MinMaxCloseButtons.vueのq-badgeのmargin-leftを0にすれば良さそうかもです。

@PickledChair
Copy link
Member Author

slot調べてみましたが、vue初心者の自分にはまだ使えなさそうでした……。後者の簡単な解決策を適用してみました。自分のLinux環境ではうまく行きました。

voicevox_linux_titlebar_improve

Copy link
Member

@Hiroshiba Hiroshiba left a comment

Choose a reason for hiding this comment

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

LGTM!

@Hiroshiba Hiroshiba merged commit 652354f into VOICEVOX:main Dec 5, 2021
@PickledChair PickledChair deleted the three-color-buttons-to-the-left-side-in-macos branch December 14, 2021 08:04
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

macOSにおいてタイトルバーの三色ボタンを左側に移動したい
3 participants