diff options
| author | Jonathan Tran <jon@allspice.io> | 2023-06-13 03:55:48 -0400 |
|---|---|---|
| committer | GitHub <noreply@github.com> | 2023-06-13 15:55:48 +0800 |
| commit | a583c5630629fa664e77bad62afe95c0d9fb0a5e (patch) | |
| tree | b184801b6a5b88eb9610e48496786837acfb7e78 /web_src/css | |
| parent | f62cd2f4738c1b3cf7c31e8b98702a709bdd4072 (diff) | |
| download | gitea-a583c5630629fa664e77bad62afe95c0d9fb0a5e.tar.gz gitea-a583c5630629fa664e77bad62afe95c0d9fb0a5e.zip | |
Change access token UI to select dropdowns (#25109)
The current UI to create API access tokens uses checkboxes that have a
complicated relationship where some need to be checked and/or disabled
in certain states. It also requires that a user interact with it to
understand what their options really are.
This branch changes to use `<select>`s. It better fits the available
options, and it's closer to [GitHub's
UI](https://github.com/settings/personal-access-tokens/new), which is
good, in my opinion. It's more mobile friendly since the tap-areas are
larger. If we ever add more permissions, like Maintainer, there's a
natural place that doesn't take up more screen real-estate.
This branch also fixes a few minor issues:
- Hide the error about selecting at least one permission after second
submission
- Fix help description to call it "authorization" since that's what
permissions are about (not authentication)
Related: #24767.
<img width="883" alt="Screenshot 2023-06-07 at 5 07 34 PM"
src="https://github.com/go-gitea/gitea/assets/10803/6b63d807-c9be-4a4b-8e53-ecab6cbb8f76">
---
When it's open:
<img width="881" alt="Screenshot 2023-06-07 at 5 07 59 PM"
src="https://github.com/go-gitea/gitea/assets/10803/2432c6d0-39c2-4ca4-820e-c878ffdbfb69">
Diffstat (limited to 'web_src/css')
| -rw-r--r-- | web_src/css/index.css | 1 | ||||
| -rw-r--r-- | web_src/css/modules/select.css | 25 |
2 files changed, 26 insertions, 0 deletions
diff --git a/web_src/css/index.css b/web_src/css/index.css index 689c3f4a29..c9cc1d8032 100644 --- a/web_src/css/index.css +++ b/web_src/css/index.css @@ -1,6 +1,7 @@ @import "./modules/normalize.css"; @import "./modules/animations.css"; @import "./modules/button.css"; +@import "./modules/select.css"; @import "./modules/tippy.css"; @import "./modules/modal.css"; @import "./modules/breadcrumb.css"; diff --git a/web_src/css/modules/select.css b/web_src/css/modules/select.css new file mode 100644 index 0000000000..57a87888e0 --- /dev/null +++ b/web_src/css/modules/select.css @@ -0,0 +1,25 @@ +.gitea-select { + position: relative; +} + +.gitea-select select { + appearance: none; /* hide default triangle */ +} + +/* ::before and ::after pseudo elements don't work on select elements, + so we need to put it on the parent. */ +.gitea-select::after { + position: absolute; + top: 12px; + right: 8px; + pointer-events: none; + content: ''; + width: 14px; + height: 14px; + mask-size: cover; + -webkit-mask-size: cover; + mask-image: var(--octicon-chevron-right); + -webkit-mask-image: var(--octicon-chevron-right); + transform: rotate(90deg); /* point the chevron down */ + background: currentcolor; +} |