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

Use mask-based fade-out effect for .new-menu #27181

Merged
merged 4 commits into from
Sep 25, 2023
Merged

Use mask-based fade-out effect for .new-menu #27181

merged 4 commits into from
Sep 25, 2023

Conversation

silverwind
Copy link
Member

@silverwind silverwind commented Sep 21, 2023 •
edited
Loading

The .new-menu was using a pseudo-element based fade-out effect. Replace this with a more modern mask-based effect which in this case required a child element to avoid fading out the background as well, so I applied it to child new-menu-inner which was present on all these menus except explore where I added it.

There is no visual difference except that the items on the explore page have no gap between them any longer, making it consistent with other menus. Before and after:

Screenshot 2023-09-21 at 21 13 19 Screenshot 2023-09-21 at 21 32 36

Also, this cleans up the related CSS vars:

  • --color-header-wrapper-transparent is removed, no longer needed
  • --color-header-wrapper is defined in base theme as well, was previously unset and therefor transparent.

no whitespace diff
demo of mask fade

@GiteaBot GiteaBot added the lgtm/need 2 This PR needs two approvals by maintainers to be considered for merging. label Sep 21, 2023
@pull-request-size pull-request-size bot added the size/M Denotes a PR that changes 30-99 lines, ignoring generated files. label Sep 21, 2023
@silverwind silverwind changed the title Use mask-based fade-out effect for new-menu Use mask-based fade-out effect for .new-menu Sep 21, 2023
@github-actions github-actions bot added the topic/ui Change the appearance of the Gitea UI label Sep 21, 2023
@silverwind silverwind added the backport/v1.21 This PR should be backported to Gitea 1.21 label Sep 21, 2023
@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 Sep 21, 2023
@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 Sep 24, 2023
@silverwind silverwind added the reviewed/wait-merge This pull request is part of the merge queue. It will be merged soon. label Sep 24, 2023
@silverwind silverwind enabled auto-merge (squash) September 24, 2023 23:47
@silverwind silverwind merged commit 6af34c0 into go-gitea:main Sep 25, 2023
25 checks passed
@GiteaBot GiteaBot added this to the 1.22.0 milestone Sep 25, 2023
@GiteaBot GiteaBot mentioned this pull request Sep 25, 2023
Merged
GiteaBot pushed a commit to GiteaBot/gitea that referenced this pull request Sep 25, 2023
@silverwind @GiteaBot
Use mask-based fade-out effect for .new-menu (go-gitea#27181)
1491e39 
The `.new-menu` was using a pseudo-element based fade-out effect.
Replace this with a more modern mask-based effect which in this case
required a child element to avoid fading out the background as well, so
I applied it to child `new-menu-inner` which was present on all these
menus except explore where I added it.

There is no visual difference except that the items on the explore page
have no `gap` between them any longer, making it consistent with other
menus. Before and after:

<img width="221" alt="Screenshot 2023-09-21 at 21 13 19"
src="https://github.com/go-gitea/gitea/assets/115237/b4a38ce2-cee1-4c54-84a5-e1d0bfd79e29">
<img width="222" alt="Screenshot 2023-09-21 at 21 32 36"
src="https://github.com/go-gitea/gitea/assets/115237/bb6b1335-d935-4ad4-bb85-3b0fc3027c2b">

Also, this cleans up the related CSS vars:

- `--color-header-wrapper-transparent` is removed, no longer needed
- `--color-header-wrapper` is defined in base theme as well, was
previously unset and therefor transparent.

[no whitespace
diff](https://github.com/go-gitea/gitea/pull/27181/files?diff=unified&w=1)
[demo of mask fade](https://jsfiddle.net/silverwind/tsfadb3u/)
@GiteaBot GiteaBot added backport/done All backports for this PR have been created and removed reviewed/wait-merge This pull request is part of the merge queue. It will be merged soon. labels Sep 25, 2023
@silverwind silverwind deleted the maskfade branch September 25, 2023 06:25
zjjhot added a commit to zjjhot/gitea that referenced this pull request Sep 25, 2023
@zjjhot
Merge remote-tracking branch 'giteaofficial/main'
294a64d 
* giteaofficial/main:
  Add missing public user visibility in user details page (go-gitea#27246)
  Use mask-based fade-out effect for `.new-menu` (go-gitea#27181)
  [skip ci] Updated translations via Crowdin
  Fix z-index on markdown completion (go-gitea#27237)
  Update database-preparation and add note re: MariaDB (go-gitea#27232)
  cleanup locale function usage (go-gitea#27227)
  Fix EOL handling in web editor (go-gitea#27141)
  Fix PushEvent NullPointerException jenkinsci/github-plugin (go-gitea#27203)
  fix issues on action runners page (go-gitea#27226)
  Fix Fomantic UI dropdown icon bug when there is a search input in menu (go-gitea#27225)
  Update go-enry to 2.8.5 (go-gitea#27215)
  Update nodejs installation method in release container (go-gitea#27207)
  Quote table `release` in sql queries (go-gitea#27205)
  Fix push mirror, wrong timestamp format (go-gitea#27153)
  Allow copying issue comment link on archived repos and when not logged in (go-gitea#27193)
  fix: text decorator on issue sidebar menu label (go-gitea#27206)
  Update JS and Poetry dependencies and eslint (go-gitea#27200)
  Remove some dead code (go-gitea#27196)

# Conflicts:
#	templates/repo/issue/view_content/context_menu.tmpl
silverwind added a commit that referenced this pull request Sep 25, 2023
@GiteaBot @silverwind
Use mask-based fade-out effect for .new-menu (#27181) (#27243)
37c7780 
Backport #27181 by @silverwind

The `.new-menu` was using a pseudo-element based fade-out effect.
Replace this with a more modern mask-based effect which in this case
required a child element to avoid fading out the background as well, so
I applied it to child `new-menu-inner` which was present on all these
menus except explore where I added it.

There is no visual difference except that the items on the explore page
have no `gap` between them any longer, making it consistent with other
menus. Before and after:

<img width="221" alt="Screenshot 2023-09-21 at 21 13 19"
src="https://github.com/go-gitea/gitea/assets/115237/b4a38ce2-cee1-4c54-84a5-e1d0bfd79e29">
<img width="222" alt="Screenshot 2023-09-21 at 21 32 36"
src="https://github.com/go-gitea/gitea/assets/115237/bb6b1335-d935-4ad4-bb85-3b0fc3027c2b">

Also, this cleans up the related CSS vars:

- `--color-header-wrapper-transparent` is removed, no longer needed
- `--color-header-wrapper` is defined in base theme as well, was
previously unset and therefor transparent.

[no whitespace
diff](https://github.com/go-gitea/gitea/pull/27181/files?diff=unified&w=1)
[demo of mask fade](https://jsfiddle.net/silverwind/tsfadb3u/)

Co-authored-by: silverwind <me@silverwind.io>
@go-gitea go-gitea locked as resolved and limited conversation to collaborators Dec 24, 2023
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Reviewers

@delvh delvh delvh approved these changes

@wxiaoguang wxiaoguang wxiaoguang approved these changes

Assignees
No one assigned
Labels
backport/done All backports for this PR have been created backport/v1.21 This PR should be backported to Gitea 1.21 lgtm/done This PR has enough approvals to get merged. There are no important open reservations anymore. size/M Denotes a PR that changes 30-99 lines, ignoring generated files. topic/ui Change the appearance of the Gitea UI
Projects
None yet
Milestone
1.22.0
Development

Successfully merging this pull request may close these issues.
4 participants
@silverwind @wxiaoguang @delvh @GiteaBot