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

enhance(client): ヘッダー（MkPageHeader）関連 #9869

Merged
merged 20 commits into from
Feb 11, 2023
Merged

enhance(client): ヘッダー（MkPageHeader）関連 #9869

merged 20 commits into from
Feb 11, 2023

Conversation

tamaina
Copy link
Member

@tamaina tamaina commented Feb 10, 2023 •
edited

Resolve #9307
Related to #4336

What

  • MkPageHeaderをごっそり変えた
    • モバイルではヘッダーは上下に分割され、下段にタブが表示されるように
    • iconOnlyのタブ項目がアクティブな場合にはタブのタイトルを表示するように
    • メインタイムラインではタイトルを表示しない
    • メインタイムラインかつモバイルで表示される左上のアバターを選択するとアカウントメニューが開くように
  • ユーザーページのノート一覧をタブとして分離

image

93672786-256E-4F11-A667-7EA487898E02

Why

🎨

Additional info (optional)

p1.a9z.devで動作中

@github-actions github-actions bot added the packages/frontend Client side specific issue/PR label Feb 10, 2023
@tamaina
Copy link
Member Author

tamaina commented Feb 10, 2023

  • iconOnlyのタブ項目がアクティブな場合にはタブのタイトルを表示するように
  • メインタイムラインかつモバイルで表示される左上のアバターを選択するとアカウントメニューが開くように

@tamaina
Copy link
Member Author

tamaina commented Feb 10, 2023

IMG_1644.MOV

@syuilo
Copy link
Member

syuilo commented Feb 10, 2023

ユーザーページのノート一覧をタブとして分離

これ検討したこともあったし良いと思う
ただプロフィール開いただけの状態では何も投稿が表示されないのもアレだから5つくらい最新の投稿表示しておいて もっと見る リンクでタブ遷移すると良いと思った

@tamaina
Copy link
Member Author

tamaina commented Feb 11, 2023

投稿が表示されないのもアレだから

ピン留めあるし

まあでもモバイルだと上下移動するのがつかれるのでいいUIではない感じがある

@syuilo
Copy link
Member

syuilo commented Feb 11, 2023

ピン留めは使ってないユーザー結構いる印象

@syuilo
Copy link
Member

syuilo commented Feb 11, 2023

プロフィール開いただけの状態では何も投稿が表示されないのもアレだから5つくらい最新の投稿表示しておいて もっと見る リンクでタブ遷移すると良いと思った

あとでやる

@tamaina
Copy link
Member Author

tamaina commented Feb 11, 2023

ヘッダーを真ん中ぐらいに持ってこれればいい感じかもしれない

@syuilo syuilo merged commit 0138c3b into misskey-dev:develop Feb 11, 2023
@syuilo
Copy link
Member

syuilo commented Feb 11, 2023

👍🏻👍🏻

@futchitwo
Copy link
Contributor

futchitwo commented Feb 11, 2023 •
edited

ユーザーページのノート一覧をタブとして分離

issueたてるほどじゃないからここに書くけど、ノート一覧を別タブに分けるんじゃなくて、従来通り概要の下につけて「ノート」タブメニューをクリックしたときにそこまでスクロールすると良さそう

@EbiseLutica
Copy link
Member

タブがタブとしての挙動をしないのだと、逆に違和感ありそうにおもう

@syuilo
Copy link
Member

syuilo commented Feb 11, 2023

タブをクリックするとページ全体の内容が切り替わるというメンタルモデルから逸脱することになるのは微妙と思った

@futchitwo futchitwo mentioned this pull request Feb 11, 2023
Closed
@futchitwo
Copy link
Contributor

タブがタブとしての挙動をしないのだと、逆に違和感ありそうにおもう

タブをクリックするとページ全体の内容が切り替わるというメンタルモデルから逸脱することになるのは微妙と思った

それはたしかにありそう

tamaina added a commit that referenced this pull request Feb 11, 2023
@tamaina
refactor(client): Refactor MkPageHeader #9869 (#9878)
9349f72 
* disable animation

* refactor(client): MkPageHeaderのタブをMkPageHeader.tabsに分離
animationをフォローするように

* update CHANGELOG.md

* remove unnecessary props
@tamaina tamaina mentioned this pull request Feb 11, 2023
Closed
@futchitwo
Copy link
Contributor

ノート一覧を別タブに分けるんじゃなくて、従来通り概要の下につけて「ノート」タブメニューをクリックしたときにそこまでスクロールすると良さそう

一応追記しておくと、タブメニューの「ノート」ボタンを本当にただのスクロールボタンにするんじゃなくて、概要タブページの下にノートタブページをくっつけて、概要ページから下にスクロールしてもノートタブページの内容に差し掛かったらアクティブタブを「ノート」に切り替えるみたいなイメージだった

taiyme added a commit to taiyme/misskey that referenced this pull request Mar 7, 2023
@taiyme
enhance(client): better-header
19519f1 
* enhance(client): ヘッダー（MkPageHeader）関連 (misskey-dev#9869)

* MkPageHeader大改造

* ユーザーページのノート一覧をタブにするなど

* ✌️

* 🎨

* fix

* wheel

* clean up

* 🎨

* 🎨

* remove console.log

* update CHANGELOG.md

* fix

* fix

* fix

* ✌️

* header avatar clickable

* !hideTitle

* Revert "!hideTitle"

This reverts commit 19cad42.

* fix changelog
@tamaina tamaina mentioned this pull request Apr 12, 2023
Open
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers
No reviews
Assignees
No one assigned
Labels
packages/frontend Client side specific issue/PR
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.

MkPageHeader（ページヘッダー、タブ）の右側の空白が気になる
4 participants
@tamaina @syuilo @futchitwo @EbiseLutica