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

Always use octicon-eye on watch button #30288

Merged
merged 2 commits into from
Apr 6, 2024
Merged

Always use octicon-eye on watch button #30288

merged 2 commits into from
Apr 6, 2024

Conversation

silverwind
Copy link
Member

@silverwind silverwind commented Apr 5, 2024 •
edited
Loading

This might appear odd but I think it's the right thing to do: On Github, the "Watch" button always has the open eye icon:

Screenshot 2024-04-05 at 08 26 48 Screenshot 2024-04-05 at 08 26 40

On Gitea, while watching, the icon is this and this sometimes confuses me slightly, being used to above:

Screenshot 2024-04-05 at 08 29 08

After this PR, both states will use the same icon:

Screenshot 2024-04-05 at 08 26 27 Screenshot 2024-04-05 at 08 26 33

@GiteaBot GiteaBot added the lgtm/need 2 This PR needs two approvals by maintainers to be considered for merging. label Apr 5, 2024
@pull-request-size pull-request-size bot added the size/XS Denotes a PR that changes 0-9 lines, ignoring generated files. label Apr 5, 2024
@github-actions github-actions bot added the modifies/templates This PR modifies the template files label Apr 5, 2024
@GiteaBot GiteaBot added lgtm/need 1 This PR needs approval from one additional maintainer to be merged. and removed lgtm/need 2 This PR needs two approvals by maintainers to be considered for merging. labels Apr 5, 2024
@GiteaBot GiteaBot added lgtm/done This PR has enough approvals to get merged. There are no important open reservations anymore. and removed lgtm/need 1 This PR needs approval from one additional maintainer to be merged. labels Apr 6, 2024
@lunny lunny enabled auto-merge (squash) April 6, 2024 07:57
@lunny lunny added the reviewed/wait-merge This pull request is part of the merge queue. It will be merged soon. label Apr 6, 2024
@lunny lunny merged commit 9c1f4da into go-gitea:main Apr 6, 2024
26 checks passed
@GiteaBot GiteaBot added this to the 1.23.0 milestone Apr 6, 2024
@GiteaBot GiteaBot removed the reviewed/wait-merge This pull request is part of the merge queue. It will be merged soon. label Apr 6, 2024
@silverwind silverwind deleted the watcheye branch April 6, 2024 10:38
@silverwind silverwind added the backport/v1.22 This PR should be backported to Gitea 1.22 label Apr 6, 2024
GiteaBot pushed a commit to GiteaBot/gitea that referenced this pull request Apr 6, 2024
@silverwind @GiteaBot
Always use octicon-eye on watch button (go-gitea#30288)
feaa527 
This might appear odd but I think it's the right thing to do: On Github,
the "Watch" button always has the open eye icon:

<img width="177" alt="Screenshot 2024-04-05 at 08 26 48"
src="https://github.com/go-gitea/gitea/assets/115237/0c1188d1-145b-4c6d-909f-2e1460499941">
<img width="179" alt="Screenshot 2024-04-05 at 08 26 40"
src="https://github.com/go-gitea/gitea/assets/115237/e29d91fa-f122-4e10-9589-f79c1d612cf9">

On Gitea, while watching, the icon is this and this sometimes confuses
me slightly, being used to above:

<img width="158" alt="Screenshot 2024-04-05 at 08 29 08"
src="https://github.com/go-gitea/gitea/assets/115237/3301021b-744e-409f-a9d8-887ec2772fdc">

After this PR, both states will use the same icon:

<img width="145" alt="Screenshot 2024-04-05 at 08 26 27"
src="https://github.com/go-gitea/gitea/assets/115237/8addfa5b-c009-4bdb-bfa1-4f3dfaffa4cd">
<img width="161" alt="Screenshot 2024-04-05 at 08 26 33"
src="https://github.com/go-gitea/gitea/assets/115237/cef383e6-2cc0-460f-a4d3-83ebb321debe">
@GiteaBot GiteaBot mentioned this pull request Apr 6, 2024
Merged
@GiteaBot GiteaBot added the backport/done All backports for this PR have been created label Apr 6, 2024
@delvh
Copy link
Member

delvh commented Apr 6, 2024 •
edited
Loading

Hmm… I'm not sure if this is the correct course of action.
After all, now you are no longer able to quickly skim over that button to see if you are already watching this repo but need to read the text…

@silverwind
Copy link
Member Author

Hmm… I'm not sure if this is the correct course of action. After all, now you are no longer able to quickly skim over that button to see if you are already watching this repo but need to read the text…

The text does that for me. Being used to GitHub UI, when I look at the previous button I sometimes think I'm not watching because of the icon. Then I click it and only then it deems me that I was watching. I think the text is enough as an indicator.

silverwind added a commit that referenced this pull request Apr 6, 2024
@GiteaBot @silverwind
Always use octicon-eye on watch button (#30288) (#30307)
95caad7 
Backport #30288 by @silverwind

This might appear odd but I think it's the right thing to do: On Github,
the "Watch" button always has the open eye icon:

<img width="177" alt="Screenshot 2024-04-05 at 08 26 48"
src="https://github.com/go-gitea/gitea/assets/115237/0c1188d1-145b-4c6d-909f-2e1460499941">
<img width="179" alt="Screenshot 2024-04-05 at 08 26 40"
src="https://github.com/go-gitea/gitea/assets/115237/e29d91fa-f122-4e10-9589-f79c1d612cf9">

On Gitea, while watching, the icon is this and this sometimes confuses
me slightly, being used to above:

<img width="158" alt="Screenshot 2024-04-05 at 08 29 08"
src="https://github.com/go-gitea/gitea/assets/115237/3301021b-744e-409f-a9d8-887ec2772fdc">

After this PR, both states will use the same icon:

<img width="145" alt="Screenshot 2024-04-05 at 08 26 27"
src="https://github.com/go-gitea/gitea/assets/115237/8addfa5b-c009-4bdb-bfa1-4f3dfaffa4cd">
<img width="161" alt="Screenshot 2024-04-05 at 08 26 33"
src="https://github.com/go-gitea/gitea/assets/115237/cef383e6-2cc0-460f-a4d3-83ebb321debe">

Co-authored-by: silverwind <me@silverwind.io>
zjjhot added a commit to zjjhot/gitea that referenced this pull request Apr 8, 2024
@zjjhot
Merge remote-tracking branch 'giteaofficial/main'
aa3428f 
* giteaofficial/main: (26 commits)
  Fix oauth2 builtin application logic (go-gitea#30304)
  [skip ci] Updated licenses and gitignores
  Some NuGet package enhancements (go-gitea#30280)
  Fix and rewrite contrast color calculation, fix project-related bugs (go-gitea#30237)
  Add `--page-spacing` variable, fix admin dashboard notice (go-gitea#30302)
  Action view mobile improvements and fixes (go-gitea#30309)
  Fix checkboxes on mobile view, remove some dead css (go-gitea#30308)
  Clean up log messages (go-gitea#30313)
  Fix right-aligned input icons (go-gitea#30301)
  Refactor startup deprecation messages (go-gitea#30305)
  [skip ci] Updated translations via Crowdin
  Remove fomantic list module (go-gitea#30281)
  Markup color and font size fixes (go-gitea#30282)
  Fix code block style for code preview (go-gitea#30298)
  Always use `octicon-eye` on watch button (go-gitea#30288)
  Fix view commit link (go-gitea#30297)
  Add gap to commit status details (go-gitea#30284)
  Update JS dependencies and add new eslint rules (go-gitea#30279)
  Upgrade `golang.org/x/net` to v0.24.0 (go-gitea#30283)
  Commit-Dropdown: Show Author of commit if available (go-gitea#30272)
  ...

# Conflicts:
#	templates/base/footer_content.tmpl
AvengerMoJo pushed a commit to AvengerMoJo/gitea that referenced this pull request Apr 8, 2024
@silverwind @AvengerMoJo
Always use octicon-eye on watch button (go-gitea#30288)
4c826f7 
This might appear odd but I think it's the right thing to do: On Github,
the "Watch" button always has the open eye icon:

<img width="177" alt="Screenshot 2024-04-05 at 08 26 48"
src="https://github.com/go-gitea/gitea/assets/115237/0c1188d1-145b-4c6d-909f-2e1460499941">
<img width="179" alt="Screenshot 2024-04-05 at 08 26 40"
src="https://github.com/go-gitea/gitea/assets/115237/e29d91fa-f122-4e10-9589-f79c1d612cf9">

On Gitea, while watching, the icon is this and this sometimes confuses
me slightly, being used to above:

<img width="158" alt="Screenshot 2024-04-05 at 08 29 08"
src="https://github.com/go-gitea/gitea/assets/115237/3301021b-744e-409f-a9d8-887ec2772fdc">

After this PR, both states will use the same icon:

<img width="145" alt="Screenshot 2024-04-05 at 08 26 27"
src="https://github.com/go-gitea/gitea/assets/115237/8addfa5b-c009-4bdb-bfa1-4f3dfaffa4cd">
<img width="161" alt="Screenshot 2024-04-05 at 08 26 33"
src="https://github.com/go-gitea/gitea/assets/115237/cef383e6-2cc0-460f-a4d3-83ebb321debe">
@denyskon
Copy link
Member

Screenshot_20240415-193447.png

It makes the button de-facto unusable on mobile without any benefit. I propose reverting...

@wxiaoguang
Copy link
Contributor

Agree to revert.

@silverwind
Copy link
Member Author

silverwind commented Apr 15, 2024 •
edited
Loading

We can and should add tooltips or a dialog like GitHub to that button.

@wxiaoguang
Copy link
Contributor

First, I won't say anything is always right, or we should always follow anything, even it is GitHub.

Second, let's take GitHub as example: an icon with a slash is a good design language:

image

@silverwind
Copy link
Member Author

silverwind commented Apr 15, 2024 •
edited
Loading

It is but the meaning of the icon should show the current state, not the future state. Before that pr was:

  • state watching = not watching icon
  • state not watching = watching icon
  • state starred = starred icon
  • state not starred = not starred icon

So I could agree to chaning the icon if always shows the current state, not the action. I guess this invertion is what confused me.

@silverwind
Copy link
Member Author

#30503 fixes it. I decided to not introduce the octicon-eye-closed for now.

@silverwind silverwind mentioned this pull request Apr 16, 2024
Merged
silverwind added a commit that referenced this pull request Apr 16, 2024
@silverwind @GiteaBot
Tweak repo buttons on mobile and labeled button border-radius (#30503)
3746a62 
Fixes: #30514
Fixes:
#30288 (comment)

- Fix border-radius regression from
#30475
- Fix and simplify hover state
- Move the modal HTML so it does not interfere with the CSS
- Make the star and unwatch text show on mobile. There is still plenty
of space, below is iPhone 12 viewport size

<img width="696" alt="Screenshot 2024-04-15 at 20 34 03"
src="https://github.com/go-gitea/gitea/assets/115237/af90bb00-4671-4973-a255-8eb44ee6ba8d">
<img width="230" alt="Screenshot 2024-04-15 at 20 31 42"
src="https://github.com/go-gitea/gitea/assets/115237/986ef533-7a01-4bb0-8dcd-fd19e4259e84">
<img width="233" alt="Screenshot 2024-04-15 at 20 31 47"
src="https://github.com/go-gitea/gitea/assets/115237/5b825dd8-0ccc-4d56-9d8f-774abb935b68">

---------

Co-authored-by: Giteabot <teabot@gitea.io>
silverwind added a commit to silverwind/gitea that referenced this pull request Apr 16, 2024
@silverwind @GiteaBot
Tweak repo buttons on mobile and labeled button border-radius (go-git…
8399398 
…ea#30503)

Fixes: go-gitea#30514
Fixes: go-gitea#30288 (comment)

- Fix border-radius regression from
go-gitea#30475
- Fix and simplify hover state
- Move the modal HTML so it does not interfere with the CSS
- Make the star and unwatch text show on mobile. There is still plenty
of space, below is iPhone 12 viewport size

<img width="696" alt="Screenshot 2024-04-15 at 20 34 03"
src="https://github.com/go-gitea/gitea/assets/115237/af90bb00-4671-4973-a255-8eb44ee6ba8d">
<img width="230" alt="Screenshot 2024-04-15 at 20 31 42"
src="https://github.com/go-gitea/gitea/assets/115237/986ef533-7a01-4bb0-8dcd-fd19e4259e84">
<img width="233" alt="Screenshot 2024-04-15 at 20 31 47"
src="https://github.com/go-gitea/gitea/assets/115237/5b825dd8-0ccc-4d56-9d8f-774abb935b68">

---------

Co-authored-by: Giteabot <teabot@gitea.io>
@silverwind silverwind mentioned this pull request Apr 16, 2024
Merged
lunny pushed a commit that referenced this pull request Apr 24, 2024
@silverwind
Tweak repo buttons on mobile and labeled button border-radius (#30503) (
ad34d22 
#30525)

Backport of #30503 to v1.22, the
only change excluded is the border-radius changes which aren't necessary
on this branch because the button css was not migrated.

Fixes: #30514
Fixes:
#30288 (comment)

- Fix border-radius regression from
#30475
- Fix and simplify hover state
- Move the modal HTML so it does not interfere with the CSS
- Make the star and unwatch text show on mobile. There is still plenty
of space, below is iPhone 12 viewport size

<img width="696" alt="Screenshot 2024-04-15 at 20 34 03"
src="https://github.com/go-gitea/gitea/assets/115237/af90bb00-4671-4973-a255-8eb44ee6ba8d">
<img width="230" alt="Screenshot 2024-04-15 at 20 31 42"
src="https://github.com/go-gitea/gitea/assets/115237/986ef533-7a01-4bb0-8dcd-fd19e4259e84">
<img width="233" alt="Screenshot 2024-04-15 at 20 31 47"
src="https://github.com/go-gitea/gitea/assets/115237/5b825dd8-0ccc-4d56-9d8f-774abb935b68">
@wxiaoguang wxiaoguang added the skip-changelog This PR is irrelevant for the (next) changelog, for example bug fixes for unreleased features. label Apr 27, 2024
@go-gitea go-gitea locked as resolved and limited conversation to collaborators Jul 5, 2024
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Reviewers

@zokkis zokkis zokkis approved these changes

@lunny lunny lunny approved these changes

Assignees
No one assigned
Labels
backport/done All backports for this PR have been created backport/v1.22 This PR should be backported to Gitea 1.22 lgtm/done This PR has enough approvals to get merged. There are no important open reservations anymore. modifies/templates This PR modifies the template files size/XS Denotes a PR that changes 0-9 lines, ignoring generated files. skip-changelog This PR is irrelevant for the (next) changelog, for example bug fixes for unreleased features.
Projects
None yet
Milestone
1.23.0
Development

Successfully merging this pull request may close these issues.
7 participants
@silverwind @delvh @denyskon @wxiaoguang @lunny @zokkis @GiteaBot