diff options
| author | silverwind <me@silverwind.io> | 2024-03-15 03:05:31 +0100 |
|---|---|---|
| committer | GitHub <noreply@github.com> | 2024-03-15 02:05:31 +0000 |
| commit | 256a1eeb9a67b18c62a10f5909b584b7b220848a (patch) | |
| tree | 0a7cb048ebb91a199cfa3dec045992a027721073 | |
| parent | 4a377c033608d64a7a3e352d1a55955dcc988f87 (diff) | |
| download | gitea-256a1eeb9a67b18c62a10f5909b584b7b220848a.tar.gz gitea-256a1eeb9a67b18c62a10f5909b584b7b220848a.zip | |
Add `<overflow-menu>`, rename webcomponents (#29400)
1. Add `<overflow-menu>` web component
2. Rename `<gitea-origin-url>` to `<origin-url>` and make filenames
match.
<img width="439" alt="image"
src="https://github.com/go-gitea/gitea/assets/115237/2fbe4ca4-110b-4ad2-8e17-c1e116ccbd74">
<img width="444" alt="Screenshot 2024-03-02 at 21 36 52"
src="https://github.com/go-gitea/gitea/assets/115237/aa8f786e-dc8c-4030-b12d-7cfb74bdfd6e">
<img width="537" alt="Screenshot 2024-03-03 at 03 05 06"
src="https://github.com/go-gitea/gitea/assets/115237/fddd50aa-adf1-4b4b-bd7f-caf30c7b2245">
TODO:
- [x] Check if removal of `requestAnimationFrame` is possible to avoid
flash of content. Likely needs a `MutationObserver`.
- [x] Hide tippy when button is removed from DOM.
- [x] ~~Implement right-aligned items
(https://github.com/go-gitea/gitea/pull/28976)~~. Not going to do it.
- [x] Clean up CSS so base element has no background and add background
via tailwind instead.
- [x] Use it for org and user page.
---------
Co-authored-by: Giteabot <teabot@gitea.io>
Co-authored-by: wxiaoguang <wxiaoguang@gmail.com>
54 files changed, 458 insertions, 287 deletions
diff --git a/modules/timeutil/datetime.go b/modules/timeutil/datetime.go index 50c8d44f13..3ae44cb714 100644 --- a/modules/timeutil/datetime.go +++ b/modules/timeutil/datetime.go @@ -56,7 +56,7 @@ func DateTime(format string, datetime any, extraAttrs ...string) template.HTML { switch format { case "short", "long": // date only attrs = append(attrs, `month="`+format+`"`, `day="numeric"`) - return template.HTML(fmt.Sprintf(`<gitea-absolute-date %s date="%s">%s</gitea-absolute-date>`, strings.Join(attrs, " "), datetimeEscaped, textEscaped)) + return template.HTML(fmt.Sprintf(`<absolute-date %s date="%s">%s</absolute-date>`, strings.Join(attrs, " "), datetimeEscaped, textEscaped)) case "full": // full date including time attrs = append(attrs, `format="datetime"`, `month="short"`, `day="numeric"`, `hour="numeric"`, `minute="numeric"`, `second="numeric"`, `data-tooltip-content`, `data-tooltip-interactive="true"`) return template.HTML(fmt.Sprintf(`<relative-time %s datetime="%s">%s</relative-time>`, strings.Join(attrs, " "), datetimeEscaped, textEscaped)) diff --git a/modules/timeutil/datetime_test.go b/modules/timeutil/datetime_test.go index 39aecbc43b..ac2ce35ba2 100644 --- a/modules/timeutil/datetime_test.go +++ b/modules/timeutil/datetime_test.go @@ -28,19 +28,19 @@ func TestDateTime(t *testing.T) { assert.EqualValues(t, "-", DateTime("short", TimeStamp(0))) actual := DateTime("short", "invalid") - assert.EqualValues(t, `<gitea-absolute-date weekday="" year="numeric" month="short" day="numeric" date="invalid">invalid</gitea-absolute-date>`, actual) + assert.EqualValues(t, `<absolute-date weekday="" year="numeric" month="short" day="numeric" date="invalid">invalid</absolute-date>`, actual) actual = DateTime("short", refTimeStr) - assert.EqualValues(t, `<gitea-absolute-date weekday="" year="numeric" month="short" day="numeric" date="2018-01-01T00:00:00Z">2018-01-01T00:00:00Z</gitea-absolute-date>`, actual) + assert.EqualValues(t, `<absolute-date weekday="" year="numeric" month="short" day="numeric" date="2018-01-01T00:00:00Z">2018-01-01T00:00:00Z</absolute-date>`, actual) actual = DateTime("short", refTime) - assert.EqualValues(t, `<gitea-absolute-date weekday="" year="numeric" month="short" day="numeric" date="2018-01-01T00:00:00Z">2018-01-01</gitea-absolute-date>`, actual) + assert.EqualValues(t, `<absolute-date weekday="" year="numeric" month="short" day="numeric" date="2018-01-01T00:00:00Z">2018-01-01</absolute-date>`, actual) actual = DateTime("short", refDateStr) - assert.EqualValues(t, `<gitea-absolute-date weekday="" year="numeric" month="short" day="numeric" date="2018-01-01">2018-01-01</gitea-absolute-date>`, actual) + assert.EqualValues(t, `<absolute-date weekday="" year="numeric" month="short" day="numeric" date="2018-01-01">2018-01-01</absolute-date>`, actual) actual = DateTime("short", refTimeStamp) - assert.EqualValues(t, `<gitea-absolute-date weekday="" year="numeric" month="short" day="numeric" date="2017-12-31T19:00:00-05:00">2017-12-31</gitea-absolute-date>`, actual) + assert.EqualValues(t, `<absolute-date weekday="" year="numeric" month="short" day="numeric" date="2017-12-31T19:00:00-05:00">2017-12-31</absolute-date>`, actual) actual = DateTime("full", refTimeStamp) assert.EqualValues(t, `<relative-time weekday="" year="numeric" format="datetime" month="short" day="numeric" hour="numeric" minute="numeric" second="numeric" data-tooltip-content data-tooltip-interactive="true" datetime="2017-12-31T19:00:00-05:00">2017-12-31 19:00:00 -05:00</relative-time>`, actual) diff --git a/options/locale/locale_en-US.ini b/options/locale/locale_en-US.ini index 8c014955d0..a54367e221 100644 --- a/options/locale/locale_en-US.ini +++ b/options/locale/locale_en-US.ini @@ -25,6 +25,7 @@ enable_javascript = This website requires JavaScript. toc = Table of Contents licenses = Licenses return_to_gitea = Return to Gitea +more_items = More items username = Username email = Email Address diff --git a/package-lock.json b/package-lock.json index 8f5e6d0ca9..9ed28e671a 100644 --- a/package-lock.json +++ b/package-lock.json @@ -15,7 +15,6 @@ "@github/text-expander-element": "2.6.1", "@mcaptcha/vanilla-glue": "0.1.0-alpha-3", "@primer/octicons": "19.8.0", - "@webcomponents/custom-elements": "1.6.0", "add-asset-webpack-plugin": "2.0.1", "ansi_up": "6.0.2", "asciinema-player": "3.7.0", @@ -2864,11 +2863,6 @@ "@xtuc/long": "4.2.2" } }, - "node_modules/@webcomponents/custom-elements": { - "version": "1.6.0", - "resolved": "https://registry.npmjs.org/@webcomponents/custom-elements/-/custom-elements-1.6.0.tgz", - "integrity": "sha512-CqTpxOlUCPWRNUPZDxT5v2NnHXA4oox612iUGnmTUGQFhZ1Gkj8kirtl/2wcF6MqX7+PqqicZzOCBKKfIn0dww==" - }, "node_modules/@webpack-cli/configtest": { "version": "2.1.1", "resolved": "https://registry.npmjs.org/@webpack-cli/configtest/-/configtest-2.1.1.tgz", diff --git a/package.json b/package.json index d4aec0e88e..efa71a7747 100644 --- a/package.json +++ b/package.json @@ -14,7 +14,6 @@ "@github/text-expander-element": "2.6.1", "@mcaptcha/vanilla-glue": "0.1.0-alpha-3", "@primer/octicons": "19.8.0", - "@webcomponents/custom-elements": "1.6.0", "add-asset-webpack-plugin": "2.0.1", "ansi_up": "6.0.2", "asciinema-player": "3.7.0", diff --git a/templates/base/head_script.tmpl b/templates/base/head_script.tmpl index 4a723f63b9..22e08e9c8f 100644 --- a/templates/base/head_script.tmpl +++ b/templates/base/head_script.tmpl @@ -41,6 +41,7 @@ If you introduce mistakes in it, Gitea JavaScript code wouldn't run correctly. remove_label_str: {{ctx.Locale.Tr "remove_label_str"}}, modal_confirm: {{ctx.Locale.Tr "modal.confirm"}}, modal_cancel: {{ctx.Locale.Tr "modal.cancel"}}, + more_items: {{ctx.Locale.Tr "more_items"}}, }, }; {{/* in case some pages don't render the pageData, we make sure it is an object to prevent null access */}} diff --git a/templates/devtest/gitea-ui.tmpl b/templates/devtest/gitea-ui.tmpl index e551572b96..0b1f982ee4 100644 --- a/templates/devtest/gitea-ui.tmpl +++ b/templates/devtest/gitea-ui.tmpl @@ -105,18 +105,45 @@ </div> <div> - <h1>GiteaOriginUrl</h1> - <div><gitea-origin-url data-url="test/url"></gitea-origin-url></div> - <div><gitea-origin-url data-url="/test/url"></gitea-origin-url></div> + <h1><origin-url></h1> + <div><origin-url data-url="test/url"></origin-url></div> + <div><origin-url data-url="/test/url"></origin-url></div> + </div> + + <div> + <h1><overflow-menu></h1> + <overflow-menu class="ui secondary pointing tabular borderless menu"> + <div class="overflow-menu-items"> + <a class="active item">item</a> + <a class="item">item 1</a> + <a class="item">item 2</a> + <a class="item">item 3</a> + <a class="item">item 4</a> + <a class="item">item 5</a> + <a class="item">item 6</a> + <a class="item">item 7</a> + <a class="item">item 8</a> + <a class="item">item 9</a> + <a class="item">item 10</a> + <a class="item">item 11</a> + <a class="item">item 12</a> + <a class="item">item 13</a> + <a class="item">item 14</a> + <a class="item">item 15</a> + <a class="item">item 16</a> + <a class="item">item 17</a> + <a class="item">item 18</a> + </div> + </overflow-menu> </div> <div> <h1>GiteaAbsoluteDate</h1> - <div><gitea-absolute-date date="2024-03-11" year="numeric" day="numeric" month="short"></gitea-absolute-date></div> - <div><gitea-absolute-date date="2024-03-11" year="numeric" day="numeric" month="long"></gitea-absolute-date></div> - <div><gitea-absolute-date date="2024-03-11" year="" day="numeric" month="numeric"></gitea-absolute-date></div> - <div><gitea-absolute-date date="2024-03-11" year="" day="numeric" month="numeric" weekday="long"></gitea-absolute-date></div> - <div><gitea-absolute-date date="2024-03-11T19:00:00-05:00" year="" day="numeric" month="numeric" weekday="long"></gitea-absolute-date></div> + <div><absolute-date date="2024-03-11" year="numeric" day="numeric" month="short"></absolute-date></div> + <div><absolute-date date="2024-03-11" year="numeric" day="numeric" month="long"></absolute-date></div> + <div><absolute-date date="2024-03-11" year="" day="numeric" month="numeric"></absolute-date></div> + <div><absolute-date date="2024-03-11" year="" day="numeric" month="numeric" weekday="long"></absolute-date></div> + <div><absolute-date date="2024-03-11T19:00:00-05:00" year="" day="numeric" month="numeric" weekday="long"></absolute-date></div> <div class="tw-text-text-light-2">relative-time: <relative-time format="datetime" datetime="2024-03-11" year="" day="numeric" month="numeric"></relative-time></div> </div> diff --git a/templates/explore/navbar.tmpl b/templates/explore/navbar.tmpl index 7f2aea497a..8841613b9f 100644 --- a/templates/explore/navbar.tmpl +++ b/templates/explore/navbar.tmpl @@ -1,5 +1,5 @@ -<div class="ui secondary pointing tabular top attached borderless menu new-menu navbar"> - <div class="new-menu-inner"> +<overflow-menu class="ui secondary pointing tabular top attached borderless menu navbar"> + <div class="overflow-menu-items tw-justify-center"> <a class="{{if .PageIsExploreRepositories}}active {{end}}item" href="{{AppSubUrl}}/explore/repos"> {{svg "octicon-repo"}} {{ctx.Locale.Tr "explore.repos"}} </a> @@ -17,4 +17,4 @@ </a> {{end}} </div> -</div> +</overflow-menu> diff --git a/templates/org/menu.tmpl b/templates/org/menu.tmpl index f07b26865a..8eacc17e82 100644 --- a/templates/org/menu.tmpl +++ b/templates/org/menu.tmpl @@ -1,50 +1,49 @@ <div class="ui container"> - <div class="ui secondary stackable pointing menu"> - <a class="{{if .PageIsViewRepositories}}active {{end}}item" href="{{$.Org.HomeLink}}"> - {{svg "octicon-repo"}} {{ctx.Locale.Tr "user.repositories"}} - {{if .RepoCount}} - <div class="ui small label">{{.RepoCount}}</div> + <overflow-menu class="ui secondary pointing tabular borderless menu"> + <div class="overflow-menu-items"> + <a class="{{if .PageIsViewRepositories}}active {{end}}item" href="{{$.Org.HomeLink}}"> + {{svg "octicon-repo"}} {{ctx.Locale.Tr "user.repositories"}} + {{if .RepoCount}} + <div class="ui small label">{{.RepoCount}}</div> + {{end}} + </a> + {{if .CanReadProjects}} + <a class="{{if .PageIsViewProjects}}active {{end}}item" href="{{$.Org.HomeLink}}/-/projects"> + {{svg "octicon-project-symlink"}} {{ctx.Locale.Tr "user.projects"}} + {{if .ProjectCount}} + <div class="ui small label">{{.ProjectCount}}</div> + {{end}} + </a> {{end}} - </a> - {{if .CanReadProjects}} - <a class="{{if .PageIsViewProjects}}active {{end}}item" href="{{$.Org.HomeLink}}/-/projects"> - {{svg "octicon-project-symlink"}} {{ctx.Locale.Tr "user.projects"}} - {{if .ProjectCount}} - <div class="ui small label">{{.ProjectCount}}</div> + {{if and .IsPackageEnabled .CanReadPackages}} + <a class="{{if .IsPackagesPage}}active {{end}}item" href="{{$.Org.HomeLink}}/-/packages"> + {{svg "octicon-package"}} {{ctx.Locale.Tr "packages.title"}} + </a> {{end}} - </a> - {{end}} - {{if and .IsPackageEnabled .CanReadPackages}} - <a class="{{if .IsPackagesPage}}active {{end}}item" href="{{$.Org.HomeLink}}/-/packages"> - {{svg "octicon-package"}} {{ctx.Locale.Tr "packages.title"}} - </a> - {{end}} - {{if and .IsRepoIndexerEnabled .CanReadCode}} - <a class="{{if .IsCodePage}}active {{end}}item" href="{{$.Org.HomeLink}}/-/code"> - {{svg "octicon-code"}} {{ctx.Locale.Tr "org.code"}} - </a> - {{end}} - {{if .NumMembers}} + {{if and .IsRepoIndexerEnabled .CanReadCode}} + <a class="{{if .IsCodePage}}active {{end}}item" href="{{$.Org.HomeLink}}/-/code"> + {{svg "octicon-code"}} {{ctx.Locale.Tr "org.code"}} + </a> + {{end}} + {{if .NumMembers}} <a class="{{if $.PageIsOrgMembers}}active {{end}}item" href="{{$.OrgLink}}/members"> {{svg "octicon-person"}} {{ctx.Locale.Tr "org.members"}} <div class="ui small label">{{.NumMembers}}</div> </a> - {{end}} - {{if .IsOrganizationMember}} + {{end}} + {{if .IsOrganizationMember}} <a class="{{if $.PageIsOrgTeams}}active {{end}}item" href="{{$.OrgLink}}/teams"> {{svg "octicon-people"}} {{ctx.Locale.Tr "org.teams"}} {{if .NumTeams}} <div class="ui small label">{{.NumTeams}}</div> {{end}} </a> - {{end}} - - {{if .IsOrganizationOwner}} - <div class="right menu"> - <a class="{{if .PageIsOrgSettings}}active {{end}}item" href="{{.OrgLink}}/settings"> - {{svg "octicon-tools"}} {{ctx.Locale.Tr "repo.settings"}} - </a> - </div> - {{end}} - </div> + {{end}} + {{if .IsOrganizationOwner}} + <a class="{{if .PageIsOrgSettings}}active {{end}}item" href="{{.OrgLink}}/settings"> + {{svg "octicon-tools"}} {{ctx.Locale.Tr "repo.settings"}} + </a> + {{end}} + </div> + </overflow-menu> </div> diff --git a/templates/package/content/alpine.tmpl b/templates/package/content/alpine.tmpl index 7bc22ae382..5c144b9779 100644 --- a/templates/package/content/alpine.tmpl +++ b/templates/package/content/alpine.tmpl @@ -4,12 +4,12 @@ <div class="ui form"> <div class="field"> <label>{{svg "octicon-code"}} {{ctx.Locale.Tr "packages.alpine.registry"}}</label> - <div class="markup"><pre class="code-block"><code><gitea-origin-url data-url="{{AppSubUrl}}/api/packages/{{$.PackageDescriptor.Owner.Name}}/alpine"></gitea-origin-url>/$branch/$repository</code></pre></div> + <div class="markup"><pre class="code-block"><code><origin-url data-url="{{AppSubUrl}}/api/packages/{{$.PackageDescriptor.Owner.Name}}/alpine"></origin-url>/$branch/$repository</code></pre></div> <p>{{ctx.Locale.Tr "packages.alpine.registry.info"}}</p> </div> <div class="field"> <label>{{svg "octicon-terminal"}} {{ctx.Locale.Tr "packages.alpine.registry.key"}}</label> - <div class="markup"><pre class="code-block"><code>curl -JO <gitea-origin-url data-url="{{AppSubUrl}}/api/packages/{{$.PackageDescriptor.Owner.Name}}/alpine/key"></gitea-origin-url></code></pre></div> + <div class="markup"><pre class="code-block"><code>curl -JO <origin-url data-url="{{AppSubUrl}}/api/packages/{{$.PackageDescriptor.Owner.Name}}/alpine/key"></origin-url></code></pre></div> </div> <div class="field"> <label>{{svg "octicon-terminal"}} {{ctx.Locale.Tr "packages.alpine.install"}}</label> diff --git a/templates/package/content/cargo.tmpl b/templates/package/content/cargo.tmpl index eff6d6c3b3..7fd88a284a 100644 --- a/templates/package/content/cargo.tmpl +++ b/templates/package/content/cargo.tmpl @@ -8,8 +8,8 @@ default = "gitea" [registries.gitea] -index = "sparse+<gitea-origin-url data-url="{{AppSubUrl}}/api/packages/{{.PackageDescriptor.Owner.Name}}/cargo/"></gitea-origin-url>" # Sparse index -# index = "<gitea-origin-url data-url="{{AppSubUrl}}/{{.PackageDescriptor.Owner.Name}}/_cargo-index.git"></gitea-origin-url>" # Git +index = "sparse+<origin-url data-url="{{AppSubUrl}}/api/packages/{{.PackageDescriptor.Owner.Name}}/cargo/"></origin-url>" # Sparse index +# index = "<origin-url data-url="{{AppSubUrl}}/{{.PackageDescriptor.Owner.Name}}/_cargo-index.git"></origin-url>" # Git [net] git-fetch-with-cli = true</code></pre></div> diff --git a/templates/package/content/chef.tmpl b/templates/package/content/chef.tmpl index c8172b8126..03ce9f852b 100644 --- a/templates/package/content/chef.tmpl +++ b/templates/package/content/chef.tmpl @@ -4,7 +4,7 @@ <div class="ui form"> <div class="field"> <label>{{svg "octicon-code"}} {{ctx.Locale.Tr "packages.chef.registry"}}</label> - <div class="markup"><pre class="code-block"><code>knife[:supermarket_site] = '<gitea-origin-url data-url="{{AppSubUrl}}/api/packages/{{.PackageDescriptor.Owner.Name}}/chef"></gitea-origin-url>'</code></pre></div> + <div class="markup"><pre class="code-block"><code>knife[:supermarket_site] = '<origin-url data-url="{{AppSubUrl}}/api/packages/{{.PackageDescriptor.Owner.Name}}/chef"></origin-url>'</code></pre></div> </div> <div class="field"> <label>{{svg "octicon-terminal"}} {{ctx.Locale.Tr "packages.chef.install"}}</label> diff --git a/templates/package/content/composer.tmpl b/templates/package/content/composer.tmpl index 70bfbc4488..c2dc6345c3 100644 --- a/templates/package/content/composer.tmpl +++ b/templates/package/content/composer.tmpl @@ -7,7 +7,7 @@ <div class="markup"><pre class="code-block"><code>{ "repositories": [{ "type": "composer", - "url": "<gitea-origin-url data-url="{{AppSubUrl}}/api/packages/{{.PackageDescriptor.Owner.Name}}/composer"></gitea-origin-url>" + "url": "<origin-url data-url="{{AppSubUrl}}/api/packages/{{.PackageDescriptor.Owner.Name}}/composer"></origin-url>" } ] }</code></pre></div> diff --git a/templates/package/content/conan.tmpl b/templates/package/content/conan.tmpl index c5019c6fd6..b68a45fde3 100644 --- a/templates/package/content/conan.tmpl +++ b/templates/package/content/conan.tmpl @@ -4,7 +4,7 @@ <div class="ui form"> <div class="field"> <label>{{svg "octicon-terminal"}} {{ctx.Locale.Tr "packages.conan.registry"}}</label> - <div class="markup"><pre class="code-block"><code>conan remote add gitea <gitea-origin-url data-url="{{AppSubUrl}}/api/packages/{{.PackageDescriptor.Owner.Name}}/conan"></gitea-origin-url></code></pre></div> + <div class="markup"><pre class="code-block"><code>conan remote add gitea <origin-url data-url="{{AppSubUrl}}/api/packages/{{.PackageDescriptor.Owner.Name}}/conan"></origin-url></code></pre></div> </div> <div class="field"> <label>{{svg "octicon-terminal"}} {{ctx.Locale.Tr "packages.conan.install"}}</label> diff --git a/templates/package/content/conda.tmpl b/templates/package/content/conda.tmpl index 0172966145..031b51aa10 100644 --- a/templates/package/content/conda.tmpl +++ b/templates/package/content/conda.tmpl @@ -4,11 +4,11 @@ <div class="ui form"> <div class="field"> <label>{{svg "octicon-code"}} {{ctx.Locale.Tr "packages.conda.registry"}}</label> - <div class="markup"><pre class="code-block"><code>channel_alias: <gitea-origin-url data-url="{{AppSubUrl}}/api/packages/{{.PackageDescriptor.Owner.Name}}/conda"></gitea-origin-url> + <div class="markup"><pre class="code-block"><code>channel_alias: <origin-url data-url="{{AppSubUrl}}/api/packages/{{.PackageDescriptor.Owner.Name}}/conda"></origin-url> channels: -  - <gitea-origin-url data-url="{{AppSubUrl}}/api/packages/{{.PackageDescriptor.Owner.Name}}/conda"></gitea-origin-url> +  - <origin-url data-url="{{AppSubUrl}}/api/packages/{{.PackageDescriptor.Owner.Name}}/conda"></origin-url> default_channels: -  - <gitea-origin-url data-url="{{AppSubUrl}}/api/packages/{{.PackageDescriptor.Owner.Name}}/conda"></gitea-origin-url></code></pre></div> +  - <origin-url data-url="{{AppSubUrl}}/api/packages/{{.PackageDescriptor.Owner.Name}}/conda"></origin-url></code></pre></div> </div> <div class="field"> <label>{{svg "octicon-terminal"}} {{ctx.Locale.Tr "packages.conda.install"}}</label> diff --git a/templates/package/content/cran.tmpl b/templates/package/content/cran.tmpl index 3b5c741701..ae58e6f334 100644 --- a/templates/package/content/cran.tmpl +++ b/templates/package/content/cran.tmpl @@ -4,7 +4,7 @@ <div class="ui form"> <div class="field"> <label>{{svg "octicon-code"}} {{ctx.Locale.Tr "packages.cran.registry"}}</label> - <div class="markup"><pre class="code-block"><code>options("repos" = c(getOption("repos"), c(gitea="<gitea-origin-url data-url="{{AppSubUrl}}/api/packages/{{.PackageDescriptor.Owner.Name}}/cran"></gitea-origin-url>")))</code></pre></div> + <div class="markup"><pre class="code-block"><code>options("repos" = c(getOption("repos"), c(gitea="<origin-url data-url="{{AppSubUrl}}/api/packages/{{.PackageDescriptor.Owner.Name}}/cran"></origin-url>")))</code></pre></div> </div> <div class="field"> <label>{{svg "octicon-terminal"}} {{ctx.Locale.Tr "packages.cran.install"}}</label> diff --git a/templates/package/content/debian.tmpl b/templates/package/content/debian.tmpl index 08b50b46ff..73b8257835 100644 --- a/templates/package/content/debian.tmpl +++ b/templates/package/content/debian.tmpl @@ -4,8 +4,8 @@ <div class="ui form"> <div class="field"> <label>{{svg "octicon-terminal"}} {{ctx.Locale.Tr "packages.debian.registry"}}</label> - <div class="markup"><pre class="code-block"><code>sudo curl <gitea-origin-url data-url="{{AppSubUrl}}/api/packages/{{$.PackageDescriptor.Owner.Name}}/debian/repository.key"></gitea-origin-url> -o /etc/apt/keyrings/gitea-{{$.PackageDescriptor.Owner.Name}}.asc -echo "deb [signed-by=/etc/apt/keyrings/gitea-{{$.PackageDescriptor.Owner.Name}}.asc] <gitea-origin-url data-url="{{AppSubUrl}}/api/packages/{{$.PackageDescriptor.Owner.Name}}/debian"></gitea-origin-url> $distribution $component" | sudo tee -a /etc/apt/sources.list.d/gitea.list + <div class="markup"><pre class="code-block"><code>sudo curl <origin-url data-url="{{AppSubUrl}}/api/packages/{{$.PackageDescriptor.Owner.Name}}/debian/repository.key"></origin-url> -o /etc/apt/keyrings/gitea-{{$.PackageDescriptor.Owner.Name}}.asc +echo "deb [signed-by=/etc/apt/keyrings/gitea-{{$.PackageDescriptor.Owner.Name}}.asc] <origin-url data-url="{{AppSubUrl}}/api/packages/{{$.PackageDescriptor.Owner.Name}}/debian"></origin-url> $distribution $component" | sudo tee -a /etc/apt/sources.list.d/gitea.list sudo apt update</code></pre></div> <p>{{ctx.Locale.Tr "packages.debian.registry.info"}}</p> </div> diff --git a/templates/package/content/generic.tmpl b/templates/package/content/generic.tmpl index b5a6059f75..2fd952105f 100644 --- a/templates/package/content/generic.tmpl +++ b/templates/package/content/generic.tmpl @@ -6,7 +6,7 @@ <label>{{svg "octicon-terminal"}} {{ctx.Locale.Tr "packages.generic.download"}}</label> <div class="markup"><pre class="code-block"><code> {{- range .PackageDescriptor.Files -}} -curl -OJ <gitea-origin-url data-url="{{AppSubUrl}}/api/packages/{{$.PackageDescriptor.Owner.Name}}/generic/{{$.PackageDescriptor.Package.Name}}/{{$.PackageDescriptor.Version.Version}}/{{.File.Name}}"></gitea-origin-url> +curl -OJ <origin-url data-url="{{AppSubUrl}}/api/packages/{{$.PackageDescriptor.Owner.Name}}/generic/{{$.PackageDescriptor.Package.Name}}/{{$.PackageDescriptor.Version.Version}}/{{.File.Name}}"></origin-url> {{end -}} </code></pre></div> </div> diff --git a/templates/package/content/go.tmpl b/templates/package/content/go.tmpl index c74c19095a..80d1ab231a 100644 --- a/templates/package/content/go.tmpl +++ b/templates/package/content/go.tmpl @@ -4,7 +4,7 @@ <div class="ui form"> <div class="field"> <label>{{svg "octicon-terminal"}} {{ctx.Locale.Tr "packages.go.install"}}</label> - <div class="markup"><pre class="code-block"><code>GOPROXY=<gitea-origin-url data-url="{{AppSubUrl}}/api/packages/{{$.PackageDescriptor.Owner.Name}}/go"></gitea-origin-url> go install {{$.PackageDescriptor.Package.Name}}@{{$.PackageDescriptor.Version.Version}}</code></pre></div> + <div class="markup"><pre class="code-block"><code>GOPROXY=<origin-url data-url="{{AppSubUrl}}/api/packages/{{$.PackageDescriptor.Owner.Name}}/go"></origin-url> go install {{$.PackageDescriptor.Package.Name}}@{{$.PackageDescriptor.Version.Version}}</code></pre></div> </div> <div class="field"> <label>{{ctx.Locale.Tr "packages.registry.documentation" "Go" "https://docs.gitea.com/usage/packages/go"}}</label> diff --git a/templates/package/content/helm.tmpl b/templates/package/content/helm.tmpl index 3fc217fbb0..da846e934d 100644 --- a/templates/package/content/helm.tmpl +++ b/templates/package/content/helm.tmpl @@ -4,7 +4,7 @@ <div class="ui form"> <div class="field"> <label>{{svg "octicon-terminal"}} {{ctx.Locale.Tr "packages.helm.registry"}}</label> - <div class="markup"><pre class="code-block"><code>helm repo add {{AppDomain}} <gitea-origin-url data-url="{{AppSubUrl}}/api/packages/{{.PackageDescriptor.Owner.Name}}/helm"></gitea-origin-url> + <div class="markup"><pre class="code-block"><code>helm repo add {{AppDomain}} <origin-url data-url="{{AppSubUrl}}/api/packages/{{.PackageDescriptor.Owner.Name}}/helm"></origin-url> helm repo update</code></pre></div> </div> <div class="field"> diff --git a/templates/package/content/maven.tmpl b/templates/package/content/maven.tmpl index 9c694094b9..3a7de335de 100644 --- a/templates/package/content/maven.tmpl +++ b/templates/package/content/maven.tmpl @@ -7,19 +7,19 @@ <div class="markup"><pre class="code-block"><code><repositories> <repository> <id>gitea</id> - <url><gitea-origin-url data-url="{{AppSubUrl}}/api/packages/{{.PackageDescriptor.Owner.Name}}/maven"></gitea-origin-url></url> + <url><origin-url data-url="{{AppSubUrl}}/api/packages/{{.PackageDescriptor.Owner.Name}}/maven"></origin-url></url> </repository> </repositories> <distributionManagement> <repository> <id>gitea</id> - <url><gitea-origin-url data-url="{{AppSubUrl}}/api/packages/{{.PackageDescriptor.Owner.Name}}/maven"></gitea-origin-url></url> + <url><origin-url data-url="{{AppSubUrl}}/api/packages/{{.PackageDescriptor.Owner.Name}}/maven"></origin-url></url> </repository> <snapshotRepository> <id>gitea</id> - <url><gitea-origin-url data-url="{{AppSubUrl}}/api/packages/{{.PackageDescriptor.Owner.Name}}/maven"></gitea-origin-url></url> + <url><origin-url data-url="{{AppSubUrl}}/api/packages/{{.PackageDescriptor.Owner.Name}}/maven"></origin-url></url> </snapshotRepository> </distributionManagement></code></pre></div> </div> @@ -37,7 +37,7 @@ </div> <div class="field"> <label>{{svg "octicon-terminal"}} {{ctx.Locale.Tr "packages.maven.download"}}</label> - <div class="markup"><pre class="code-block"><code>mvn dependency:get -DremoteRepositories=<gitea-origin-url data-url="{{AppSubUrl}}/api/packages/{{.PackageDescriptor.Owner.Name}}/maven"></gitea-origin-url> -Dartifact={{.PackageDescriptor.Metadata.GroupID}}:{{.PackageDescriptor.Metadata.ArtifactID}}:{{.PackageDescriptor.Version.Version}}</code></pre></div> + <div class="markup"><pre class="code-block"><code>mvn dependency:get -DremoteRepositories=<origin-url data-url="{{AppSubUrl}}/api/packages/{{.PackageDescriptor.Owner.Name}}/maven"></origin-url> -Dartifact={{.PackageDescriptor.Metadata.GroupID}}:{{.PackageDescriptor.Metadata.ArtifactID}}:{{.PackageDescriptor.Version.Version}}</code></pre></div> </div> <div class="field"> <label>{{ctx.Locale.Tr "packages.registry.documentation" "Maven" "https://docs.gitea.com/usage/packages/maven/"}}</label> diff --git a/templates/package/content/npm.tmpl b/templates/package/content/npm.tmpl index bf15ec34e9..a78a07d874 100644 --- a/templates/package/content/npm.tmpl +++ b/templates/package/content/npm.tmpl @@ -4,7 +4,7 @@ <div class="ui form"> <div class="field"> <label>{{svg "octicon-code"}} {{ctx.Locale.Tr "packages.npm.registry"}}</label> - <div class="markup"><pre class="code-block"><code>{{if .PackageDescriptor.Metadata.Scope}}{{.PackageDescriptor.Metadata.Scope}}:{{end}}registry=<gitea-origin-url data-url="{{AppSubUrl}}/api/packages/{{.PackageDescriptor.Owner.Name}}/npm/"></gitea-origin-url></code></pre></div> + <div class="markup"><pre class="code-block"><code>{{if .PackageDescriptor.Metadata.Scope}}{{.PackageDescriptor.Metadata.Scope}}:{{end}}registry=<origin-url data-url="{{AppSubUrl}}/api/packages/{{.PackageDescriptor.Owner.Name}}/npm/"></origin-url></code></pre></div> </div> <div class="field"> <label>{{svg "octicon-terminal"}} {{ctx.Locale.Tr "packages.npm.install"}}</label> diff --git a/templates/package/content/nuget.tmpl b/templates/package/content/nuget.tmpl index 2008cf4cc8..0911260fba 100644 --- a/templates/package/content/nuget.tmpl +++ b/templates/package/content/nuget.tmpl @@ -4,7 +4,7 @@ <div class="ui form"> <div class="field"> <label>{{svg "octicon-terminal"}} {{ctx.Locale.Tr "packages.nuget.registry"}}</label> - <div class="markup"><pre class="code-block"><code>dotnet nuget add source --name {{.PackageDescriptor.Owner.Name}} --username your_username --password your_token <gitea-origin-url data-url="{{AppSubUrl}}/api/packages/{{.PackageDescriptor.Owner.Name}}/nuget/index.json"></gitea-origin-url></code></pre></div> + <div class="markup"><pre class="code-block"><code>dotnet nuget add source --name {{.PackageDescriptor.Owner.Name}} --username your_username --password your_token <origin-url data-url="{{AppSubUrl}}/api/packages/{{.PackageDescriptor.Owner.Name}}/nuget/index.json"></origin-url></code></pre></div> </div> <div class="field"> <label>{{svg "octicon-terminal"}} {{ctx.Locale.Tr "packages.nuget.install"}}</label> diff --git a/templates/package/content/pub.tmpl b/templates/package/content/pub.tmpl index e0608e533f..f2c7ac938f 100644 --- a/templates/package/content/pub.tmpl +++ b/templates/package/content/pub.tmpl @@ -4,7 +4,7 @@ <div class="ui form"> <div class="field"> <label>{{svg "octicon-terminal"}} {{ctx.Locale.Tr "packages.pub.install"}}</label> - <div class="markup"><pre class="code-block"><code>dart pub add {{.PackageDescriptor.Package.Name}}:{{.PackageDescriptor.Version.Version}} --hosted-url=<gitea-origin-url data-url="{{AppSubUrl}}/api/packages/{{.PackageDescriptor.Owner.Name}}/pub/"></gitea-origin-url></code></pre></div> + <div class="markup"><pre class="code-block"><code>dart pub add {{.PackageDescriptor.Package.Name}}:{{.PackageDescriptor.Version.Version}} --hosted-url=<origin-url data-url="{{AppSubUrl}}/api/packages/{{.PackageDescriptor.Owner.Name}}/pub/"></origin-url></code></pre></div> </div> <div class="field"> <label>{{ctx.Locale.Tr "packages.registry.documentation" "Pub" "https://docs.gitea.com/usage/packages/pub/"}}</label> diff --git a/templates/package/content/pypi.tmpl b/templates/package/content/pypi.tmpl index d0ce2cd65d..817fced97b 100644 --- a/templates/package/content/pypi.tmpl +++ b/templates/package/content/pypi.tmpl @@ -4,7 +4,7 @@ <div class="ui form"> <div class="field"> <label>{{svg "octicon-terminal"}} {{ctx.Locale.Tr "packages.pypi.install"}}</label> - <div class="markup"><pre class="code-block"><code>pip install --index-url <gitea-origin-url data-url="{{AppSubUrl}}/api/packages/{{.PackageDescriptor.Owner.Name}}/pypi/simple/"></gitea-origin-url> {{.PackageDescriptor.Package.Name}}</code></pre></div> + <div class="markup"><pre class="code-block"><code>pip install --index-url <origin-url data-url="{{AppSubUrl}}/api/packages/{{.PackageDescriptor.Owner.Name}}/pypi/simple/"></origin-url> {{.PackageDescriptor.Package.Name}}</code></pre></div> </div> <div class="field"> <label>{{ctx.Locale.Tr "packages.registry.documentation" "PyPI" "https://docs.gitea.com/usage/packages/pypi/"}}</label> diff --git a/templates/package/content/rpm.tmpl b/templates/package/content/rpm.tmpl index 28d875fca3..3faa8a0dc7 100644 --- a/templates/package/content/rpm.tmpl +++ b/templates/package/content/rpm.tmpl @@ -11,13 +11,13 @@ # {{ctx.Locale.Tr "packages.rpm.distros.redhat"}} {{- range $group := .Groups}} {{- if $group}}{{$group = print "/" $group}}{{end}} -dnf config-manager --add-repo <gitea-origin-url data-url="{{AppSubUrl}}/api/packages/{{$.PackageDescriptor.Owner.Name}}/rpm{{$group}}.repo"></gitea-origin-url> +dnf config-manager --add-repo <origin-url data-url="{{AppSubUrl}}/api/packages/{{$.PackageDescriptor.Owner.Name}}/rpm{{$group}}.repo"></origin-url> {{- end}} # {{ctx.Locale.Tr "packages.rpm.distros.suse"}} {{- range $group := .Groups}} {{- if $group}}{{$group = print "/" $group}}{{end}} -zypper addrepo <gitea-origin-url data-url="{{AppSubUrl}}/api/packages/{{$.PackageDescriptor.Owner.Name}}/rpm{{$group}}.repo"></gitea-origin-url> +zypper addrepo <origin-url data-url="{{AppSubUrl}}/api/packages/{{$.PackageDescriptor.Owner.Name}}/rpm{{$group}}.repo"></origin-url> {{- end}}</code></pre></div> </div> <div class="field"> diff --git a/templates/package/content/rubygems.tmpl b/templates/package/content/rubygems.tmpl index e19aab7080..610dfc7856 100644 --- a/templates/package/content/rubygems.tmpl +++ b/templates/package/content/rubygems.tmpl @@ -4,11 +4,11 @@ <div class="ui form"> <div class="field"> <label>{{svg "octicon-terminal"}} {{ctx.Locale.Tr "packages.rubygems.install"}}:</label> - <div class="markup"><pre class="code-block"><code>gem install {{.PackageDescriptor.Package.Name}} --version "{{.PackageDescriptor.Version.Version}}" --source "<gitea-origin-url data-url="{{AppSubUrl}}/api/packages/{{.PackageDescriptor.Owner.Name}}/rubygems"></gitea-origin-url>"</code></pre></div> + <div class="markup"><pre class="code-block"><code>gem install {{.PackageDescriptor.Package.Name}} --version "{{.PackageDescriptor.Version.Version}}" --source "<origin-url data-url="{{AppSubUrl}}/api/packages/{{.PackageDescriptor.Owner.Name}}/rubygems"></origin-url>"</code></pre></div> </div> <div class="field"> <label>{{svg "octicon-code"}} {{ctx.Locale.Tr "packages.rubygems.install2"}}:</label> - <div class="markup"><pre class="code-block"><code>source "<gitea-origin-url data-url="{{AppSubUrl}}/api/packages/{{.PackageDescriptor.Owner.Name}}/rubygems"></gitea-origin-url>" do + <div class="markup"><pre class="code-block"><code>source "<origin-url data-url="{{AppSubUrl}}/api/packages/{{.PackageDescriptor.Owner.Name}}/rubygems"></origin-url>" do gem "{{.PackageDescriptor.Package.Name}}", "{{.PackageDescriptor.Version.Version}}" end</code></pre></div> </div> diff --git a/templates/package/content/swift.tmpl b/templates/package/content/swift.tmpl index 819cc7f3d0..aacbc83980 100644 --- a/templates/package/content/swift.tmpl +++ b/templates/package/content/swift.tmpl @@ -4,7 +4,7 @@ <div class="ui form"> <div class="field"> <label>{{svg "octicon-terminal"}} {{ctx.Locale.Tr "packages.swift.registry"}}</label> - <div class="markup"><pre class="code-block"><code>swift package-registry set <gitea-origin-url data-url="{{AppSubUrl}}/api/packages/{{.PackageDescriptor.Owner.Name}}/swift"></gitea-origin-url></code></pre></div> + <div class="markup"><pre class="code-block"><code>swift package-registry set <origin-url data-url="{{AppSubUrl}}/api/packages/{{.PackageDescriptor.Owner.Name}}/swift"></origin-url></code></pre></div> </div> <div class="field"> <label>{{svg "octicon-code"}} {{ctx.Locale.Tr "packages.swift.install"}}</label> diff --git a/templates/package/content/vagrant.tmpl b/templates/package/content/vagrant.tmpl index cd294b4ea5..7666284b87 100644 --- a/templates/package/content/vagrant.tmpl +++ b/templates/package/content/vagrant.tmpl @@ -4,7 +4,7 @@ <div class="ui form"> <div class="field"> <label>{{svg "octicon-terminal"}} {{ctx.Locale.Tr "packages.vagrant.install"}}</label> - <div class="markup"><pre class="code-block"><code>vagrant box add --box-version {{.PackageDescriptor.Version.Version}} "<gitea-origin-url data-url="{{AppSubUrl}}/api/packages/{{.PackageDescriptor.Owner.Name}}/vagrant/{{.PackageDescriptor.Package.Name}}"></gitea-origin-url>"</code></pre></div> + <div class="markup"><pre class="code-block"><code>vagrant box add --box-version {{.PackageDescriptor.Version.Version}} "<origin-url data-url="{{AppSubUrl}}/api/packages/{{.PackageDescriptor.Owner.Name}}/vagrant/{{.PackageDescriptor.Package.Name}}"></origin-url>"</code></pre></div> </div> <div class="field"> <label>{{ctx.Locale.Tr "packages.registry.documentation" "Vagrant" "https://docs.gitea.com/usage/packages/vagrant/"}}</label> diff --git a/templates/repo/diff/image_diff.tmpl b/templates/repo/diff/image_diff.tmpl index 02cca784f6..9ad7916398 100644 --- a/templates/repo/diff/image_diff.tmpl +++ b/templates/repo/diff/image_diff.tmpl @@ -7,15 +7,15 @@ data-mime-before="{{.sniffedTypeBase.GetMimeType}}" data-mime-after="{{.sniffedTypeHead.GetMimeType}}" > - <div class="ui secondary pointing tabular top attached borderless menu new-menu"> - <div class="new-menu-inner"> + <overflow-menu class="ui secondary pointing tabular top attached borderless menu"> + <div class="overflow-menu-items tw-justify-center"> <a class="item active" data-tab="diff-side-by-side-{{.file.Index}}">{{ctx.Locale.Tr "repo.diff.image.side_by_side"}}</a> {{if and .blobBase .blobHead}} <a class="item" data-tab="diff-swipe-{{.file.Index}}">{{ctx.Locale.Tr "repo.diff.image.swipe"}}</a> <a class="item" data-tab="diff-overlay-{{.file.Index}}">{{ctx.Locale.Tr "repo.diff.image.overlay"}}</a> {{end}} </div> - </div> + </overflow-menu> <div class="image-diff-tabs is-loading"> <div class="ui bottom attached tab image-diff-container active" data-tab="diff-side-by-side-{{.file.Index}}"> <div class="diff-side-by-side"> diff --git a/templates/repo/header.tmpl b/templates/repo/header.tmpl index 0f64380337..6e0a9985f7 100644 --- a/templates/repo/header.tmpl +++ b/templates/repo/header.tmpl @@ -126,9 +126,9 @@ {{if .IsGenerated}}<div class="fork-flag">{{ctx.Locale.Tr "repo.generated_from"}} <a href="{{(.TemplateRepo ctx).Link}}">{{(.TemplateRepo ctx).FullName}}</a></div>{{end}} </div> {{end}} - <div class="ui container secondary pointing tabular top attached borderless menu new-menu navbar"> + <overflow-menu class="ui container secondary pointing tabular top attached borderless menu navbar tw-pt-0 tw-my-0"> {{if not (or .Repository.IsBeingCreated .Repository.IsBroken)}} - <div class="new-menu-inner"> + <div class="overflow-menu-items"> {{if .Permission.CanRead $.UnitTypeCode}} <a class="{{if .PageIsViewCode}}active {{end}}item" href="{{.RepoLink}}{{if and (ne .BranchName .Repository.DefaultBranch) (not $.PageIsWiki)}}/src/{{.BranchNameSubURL}}{{end}}"> {{svg "octicon-code"}} {{ctx.Locale.Tr "repo.code"}} @@ -220,12 +220,12 @@ {{end}} </div> {{else if .Permission.IsAdmin}} - <div class="new-menu-inner"> + <div class="overflow-menu-items"> <a class="{{if .PageIsRepoSettings}}active {{end}} item" href="{{.RepoLink}}/settings"> {{svg "octicon-tools"}} {{ctx.Locale.Tr "repo.settings"}} </a> </div> {{end}} - </div> + </overflow-menu> <div class="ui tabs divider"></div> </div> diff --git a/templates/repo/issue/view_content/pull_merge_instruction.tmpl b/templates/repo/issue/view_content/pull_merge_instruction.tmpl index a2269feeaf..12b0c4b4e0 100644 --- a/templates/repo/issue/view_content/pull_merge_instruction.tmpl +++ b/templates/repo/issue/view_content/pull_merge_instruction.tmpl @@ -8,7 +8,7 @@ {{end}} <div class="ui secondary segment"> {{if eq .PullRequest.Flow 0}} - <div>git fetch -u {{if ne .PullRequest.HeadRepo.ID .PullRequest.BaseRepo.ID}}<gitea-origin-url data-url="{{.PullRequest.HeadRepo.Link}}"></gitea-origin-url>{{else}}origin{{end}} {{.PullRequest.HeadBranch}}:{{$localBranch}}</div> + <div>git fetch -u {{if ne .PullRequest.HeadRepo.ID .PullRequest.BaseRepo.ID}}<origin-url data-url="{{.PullRequest.HeadRepo.Link}}"></origin-url>{{else}}origin{{end}} {{.PullRequest.HeadBranch}}:{{$localBranch}}</div> <div>git checkout {{$localBranch}}</div> {{else}} <div>git fetch -u origin {{.GetGitRefName}}:{{$localBranch}}</div> diff --git a/templates/repo/view_file.tmpl b/templates/repo/view_file.tmpl index 75f45b293f..cdd415a47a 100644 --- a/templates/repo/view_file.tmpl +++ b/templates/repo/view_file.tmpl @@ -135,12 +135,12 @@ {{end}} </tbody> </table> - <div class="code-line-menu ui vertical pointing menu tippy-target"> + <div class="code-line-menu tippy-target"> {{if $.Permission.CanRead $.UnitTypeIssues}} - <a class="item ref-in-new-issue" data-url-issue-new="{{.RepoLink}}/issues/new" data-url-param-body-link="{{.Repository.Link}}/src/commit/{{PathEscape .CommitID}}/{{PathEscapeSegments .TreePath}}{{if $.HasSourceRenderedToggle}}?display=source{{end}}" rel="nofollow noindex">{{ctx.Locale.Tr "repo.issues.context.reference_issue"}}</a> + <a class="item ref-in-new-issue" role="menuitem" data-url-issue-new="{{.RepoLink}}/issues/new" data-url-param-body-link="{{.Repository.Link}}/src/commit/{{PathEscape .CommitID}}/{{PathEscapeSegments .TreePath}}{{if $.HasSourceRenderedToggle}}?display=source{{end}}" rel="nofollow noindex">{{ctx.Locale.Tr "repo.issues.context.reference_issue"}}</a> {{end}} - <a class="item view_git_blame" href="{{.Repository.Link}}/blame/commit/{{PathEscape .CommitID}}/{{PathEscapeSegments .TreePath}}">{{ctx.Locale.Tr "repo.view_git_blame"}}</a> - <a class="item copy-line-permalink" data-url="{{.Repository.Link}}/src/commit/{{PathEscape .CommitID}}/{{PathEscapeSegments .TreePath}}{{if $.HasSourceRenderedToggle}}?display=source{{end}}">{{ctx.Locale.Tr "repo.file_copy_permalink"}}</a> + <a class="item view_git_blame" role="menuitem" href="{{.Repository.Link}}/blame/commit/{{PathEscape .CommitID}}/{{PathEscapeSegments .TreePath}}">{{ctx.Locale.Tr "repo.view_git_blame"}}</a> + <a class="item copy-line-permalink" role="menuitem" data-url="{{.Repository.Link}}/src/commit/{{PathEscape .CommitID}}/{{PathEscapeSegments .TreePath}}{{if $.HasSourceRenderedToggle}}?display=source{{end}}">{{ctx.Locale.Tr "repo.file_copy_permalink"}}</a> </div> {{end}} {{end}} diff --git a/templates/user/auth/link_account.tmpl b/templates/user/auth/link_account.tmpl index 5235cbf69f..81ea92c959 100644 --- a/templates/user/auth/link_account.tmpl +++ b/templates/user/auth/link_account.tmpl @@ -1,7 +1,7 @@ {{template "base/head" .}} <div role="main" aria-label="{{.Title}}" class="page-content user link-account"> - <div class="ui secondary pointing tabular top attached borderless menu new-menu navbar"> - <div class="new-menu-inner"> + <overflow-menu class="ui secondary pointing tabular top attached borderless menu navbar tw-bg-header-wrapper"> + <div class="overflow-menu-items tw-justify-center"> <!-- TODO handle .ShowRegistrationButton once other login bugs are fixed --> {{if not .AllowOnlyInternalRegistration}} <a class="item {{if not .user_exists}}active{{end}}" @@ -14,7 +14,7 @@ {{ctx.Locale.Tr "auth.oauth_signin_tab"}} </a> </div> - </div> + </overflow-menu> <div class="ui middle very relaxed page grid"> <div class="column"> <div class="ui tab {{if not .user_exists}}active{{end}}" diff --git a/templates/user/auth/signin_navbar.tmpl b/templates/user/auth/signin_navbar.tmpl index bc7fd03e13..a576883065 100644 --- a/templates/user/auth/signin_navbar.tmpl +++ b/templates/user/auth/signin_navbar.tmpl @@ -1,6 +1,6 @@ {{if or .EnableOpenIDSignIn .EnableSSPI}} -<div class="ui secondary pointing tabular top attached borderless menu new-menu navbar"> - <div class="new-menu-inner"> +<overflow-menu class="ui secondary pointing tabular top attached borderless menu navbar tw-bg-header-wrapper"> + <div class="overflow-menu-items tw-justify-center"> <a class="{{if .PageIsLogin}}active {{end}}item" rel="nofollow" href="{{AppSubUrl}}/user/login"> {{ctx.Locale.Tr "auth.login_userpass"}} </a> @@ -20,5 +20,5 @@ </a> {{end}} </div> -</div> +</overflow-menu> {{end}} diff --git a/templates/user/auth/signup_openid_navbar.tmpl b/templates/user/auth/signup_openid_navbar.tmpl index 075f2e4d7b..9cf81b048f 100644 --- a/templates/user/auth/signup_openid_navbar.tmpl +++ b/templates/user/auth/signup_openid_navbar.tmpl @@ -1,5 +1,5 @@ -<div class="ui secondary pointing tabular top attached borderless menu new-menu navbar"> - <div class="new-menu-inner"> +<overflow-menu class="ui secondary pointing tabular top attached borderless menu navbar tw-bg-header-wrapper"> + <div class="overflow-menu-items tw-justify-center"> <a class="{{if .PageIsOpenIDConnect}}active {{end}}item" href="{{AppSubUrl}}/user/openid/connect"> {{ctx.Locale.Tr "auth.openid_connect_title"}} </a> @@ -9,4 +9,4 @@ </a> {{end}} </div> -</div> +</overflow-menu> diff --git a/templates/user/overview/header.tmpl b/templates/user/overview/header.tmpl index cf5e21fa62..275c4e295e 100644 --- a/templates/user/overview/header.tmpl +++ b/templates/user/overview/header.tmpl @@ -1,49 +1,50 @@ -<div class="ui secondary stackable pointing menu"> - {{if and .HasProfileReadme .ContextUser.IsIndividual}} - <a class="{{if eq .TabName "overview"}}active {{end}}item" href="{{.ContextUser.HomeLink}}?tab=overview"> - {{svg "octicon-info"}} {{ctx.Locale.Tr "user.overview"}} - </a> - {{end}} - <a class="{{if eq .TabName "repositories"}}active {{end}} item" href="{{.ContextUser.HomeLink}}?tab=repositories"> - {{svg "octicon-repo"}} {{ctx.Locale.Tr "user.repositories"}} - {{if .RepoCount}} - <div class="ui small label">{{.RepoCount}}</div> - {{end}} - </a> - {{if or .ContextUser.IsIndividual .CanReadProjects}} - <a href="{{.ContextUser.HomeLink}}/-/projects" class="{{if .PageIsViewProjects}}active {{end}}item"> - {{svg "octicon-project-symlink"}} {{ctx.Locale.Tr "user.projects"}} - {{if .ProjectCount}} - <div class="ui small label">{{.ProjectCount}}</div> - {{end}} - </a> - {{end}} - {{if and .IsPackageEnabled (or .ContextUser.IsIndividual .CanReadPackages)}} - <a href="{{.ContextUser.HomeLink}}/-/packages" class="{{if .IsPackagesPage}}active {{end}}item"> - {{svg "octicon-package"}} {{ctx.Locale.Tr "packages.title"}} +<overflow-menu class="ui secondary pointing tabular borderless menu"> + <div class="overflow-menu-items"> + {{if and .HasProfileReadme .ContextUser.IsIndividual}} + <a class="{{if eq .TabName "overview"}}active {{end}}item" href="{{.ContextUser.HomeLink}}?tab=overview"> + {{svg "octicon-info"}} {{ctx.Locale.Tr "user.overview"}} </a> - {{end}} - {{if and .IsRepoIndexerEnabled (or .ContextUser.IsIndividual .CanReadCode)}} - <a href="{{.ContextUser.HomeLink}}/-/code" class="{{if .IsCodePage}}active {{end}}item"> - {{svg "octicon-code"}} {{ctx.Locale.Tr "user.code"}} + {{end}} + <a class="{{if eq .TabName "repositories"}}active {{end}} item" href="{{.ContextUser.HomeLink}}?tab=repositories"> + {{svg "octicon-repo"}} {{ctx.Locale.Tr "user.repositories"}} + {{if .RepoCount}} + <div class="ui small label">{{.RepoCount}}</div> + {{end}} </a> - {{end}} - - {{if .ContextUser.IsIndividual}} - <a class="{{if eq .TabName "activity"}}active {{end}}item" href="{{.ContextUser.HomeLink}}?tab=activity"> - {{svg "octicon-rss"}} {{ctx.Locale.Tr "user.activity"}} + {{if or .ContextUser.IsIndividual .CanReadProjects}} + <a href="{{.ContextUser.HomeLink}}/-/projects" class="{{if .PageIsViewProjects}}active {{end}}item"> + {{svg "octicon-project-symlink"}} {{ctx.Locale.Tr "user.projects"}} + {{if .ProjectCount}} + <div class="ui small label">{{.ProjectCount}}</div> + {{end}} </a> - {{if not .DisableStars}} + {{end}} + {{if and .IsPackageEnabled (or .ContextUser.IsIndividual .CanReadPackages)}} + <a href="{{.ContextUser.HomeLink}}/-/packages" class="{{if .IsPackagesPage}}active {{end}}item"> + {{svg "octicon-package"}} {{ctx.Locale.Tr "packages.title"}} + </a> + {{end}} + {{if and .IsRepoIndexerEnabled (or .ContextUser.IsIndividual .CanReadCode)}} + <a href="{{.ContextUser.HomeLink}}/-/code" class="{{if .IsCodePage}}active {{end}}item"> + {{svg "octicon-code"}} {{ctx.Locale.Tr "user.code"}} + </a> + {{end}} + {{if .ContextUser.IsIndividual}} + <a class="{{if eq .TabName "activity"}}active {{end}}item" href="{{.ContextUser.HomeLink}}?tab=activity"> + {{svg "octicon-rss"}} {{ctx.Locale.Tr "user.activity"}} + </a> + {{if not .DisableStars}} <a class="{{if eq .TabName "stars"}}active {{end}}item" href="{{.ContextUser.HomeLink}}?tab=stars"> {{svg "octicon-star"}} {{ctx.Locale.Tr "user.starred"}} {{if .ContextUser.NumStars}} <div class="ui small label">{{.ContextUser.NumStars}}</div> {{end}} </a> - {{else}} + {{else}} <a class="{{if eq .TabName "watching"}}active {{end}}item" href="{{.ContextUser.HomeLink}}?tab=watching"> {{svg "octicon-eye"}} {{ctx.Locale.Tr "user.watched"}} </a> + {{end}} {{end}} - {{end}} -</div> + </div> +</overflow-menu> diff --git a/web_src/css/base.css b/web_src/css/base.css index 1c6b3fa488..510a28ad9f 100644 --- a/web_src/css/base.css +++ b/web_src/css/base.css @@ -248,7 +248,7 @@ a.label, } .page-content .header-wrapper, -.page-content .new-menu { +.page-content overflow-menu { margin-top: -15px !important; padding-top: 15px !important; } @@ -1353,75 +1353,21 @@ strong.attention-caution, span.attention-caution { } } -.ui.menu.new-menu { - margin-bottom: 15px; - background: var(--color-header-wrapper); +overflow-menu { + margin-bottom: 15px !important; border-bottom: 1px solid var(--color-secondary) !important; - overflow: auto; + display: flex; } -.ui.menu.new-menu .new-menu-inner { +overflow-menu .overflow-menu-items { display: flex; - margin-left: auto; - margin-right: auto; - overflow-x: auto; - width: 100%; - mask-image: linear-gradient(to right, #000 0%, #000 calc(100% - 60px), transparent 100%); - -webkit-mask-image: linear-gradient(to right, #000 0%, #000 calc(100% - 60px), transparent 100%); + flex: 1; } -.ui.menu.new-menu .item { +overflow-menu .overflow-menu-items .item { margin-bottom: 0 !important; /* reset fomantic's margin, because the active menu has special bottom border */ } -@media (max-width: 767.98px) { - .ui.menu.new-menu .item { - width: auto !important; - } -} - -.ui.menu.new-menu .item:first-child { - margin-left: auto; /* "justify-content: center" doesn't work with "overflow: auto", so use margin: auto */ -} - -.ui.menu.new-menu .item:last-child { - padding-right: 30px !important; - margin-right: auto; -} - -.ui.menu.new-menu::-webkit-scrollbar { - height: 6px; - display: none; -} - -.ui.menu.new-menu::-webkit-scrollbar-track { - background: none !important; -} - -.ui.menu.new-menu::-webkit-scrollbar-thumb { - box-shadow: none !important; -} - -.ui.menu.new-menu:hover::-webkit-scrollbar { - display: block; -} - -.repos-search { - padding-bottom: 0 !important; -} - -.repos-filter { - margin-top: 0 !important; - border-bottom-width: 0 !important; - margin-bottom: 2px !important; - justify-content: space-evenly; -} - -.ui.secondary.pointing.menu.repos-filter .item { - padding-left: 4.5px; - padding-right: 4.5px; -} - .activity-bar-graph { background-color: var(--color-primary); color: var(--color-primary-contrast); @@ -1927,7 +1873,6 @@ table th[data-sortt-desc] .svg { background: var(--color-body); border-color: var(--color-secondary); color: var(--color-text); - margin-top: 1px; /* offset fomantic's margin-bottom: -1px */ } .ui.segment .ui.tabular.menu .active.item, diff --git a/web_src/css/modules/tippy.css b/web_src/css/modules/tippy.css index d65ecc89fb..76d36b4293 100644 --- a/web_src/css/modules/tippy.css +++ b/web_src/css/modules/tippy.css @@ -5,6 +5,11 @@ display: none !important; } +/* show target element once it's been moved by tippy.js */ +.tippy-content .tippy-target { + display: unset !important; +} + [data-tippy-root] { max-width: calc(100vw - 32px); } @@ -46,18 +51,40 @@ .tippy-box[data-theme="menu"] { background-color: var(--color-menu); color: var(--color-text); + box-shadow: 0 6px 18px var(--color-shadow); } .tippy-box[data-theme="menu"] .tippy-content { - padding: 0; + padding: 4px 0; } .tippy-box[data-theme="menu"] .tippy-svg-arrow-inner { fill: var(--color-menu); } +.tippy-box[data-theme="menu"] .item { + display: flex; + align-items: center; + padding: 9px 18px; + color: inherit; + text-decoration: none; + gap: 10px; +} + +.tippy-box[data-theme="menu"] .item:hover { + background: var(--color-hover); +} + +.tippy-box[data-theme="menu"] .item:focus { + background: var(--color-active); +} + /* box-with-header theme to look like .ui.attached.segment. can contain .ui.attached.header */ +.tippy-box[data-theme="box-with-header"] { + box-shadow: 0 6px 18px var(--color-shadow); +} + .tippy-box[data-theme="box-with-header"] .tippy-content { background: var(--color-box-body); border-radius: var(--border-radius); diff --git a/web_src/css/repo.css b/web_src/css/repo.css index c9c27acf34..23b4e94a06 100644 --- a/web_src/css/repo.css +++ b/web_src/css/repo.css @@ -2787,16 +2787,6 @@ tbody.commit-list { border-left: 1px solid var(--color-secondary); } -.repository .ui.menu.new-menu { - background: none !important; -} - -@media (max-width: 1200px) { - .repository .ui.menu.new-menu::after { - background: none !important; - } -} - .migrate-entries { display: grid !important; grid-template-columns: repeat(3, 1fr); diff --git a/web_src/css/repo/header.css b/web_src/css/repo/header.css index 0eb03136ef..4461e3338e 100644 --- a/web_src/css/repo/header.css +++ b/web_src/css/repo/header.css @@ -74,17 +74,6 @@ background-color: var(--color-header-wrapper); } -.repository .header-wrapper .new-menu { - padding-top: 0 !important; - margin-top: 0 !important; - margin-bottom: 0 !important; -} - -.repository .header-wrapper .new-menu .item { - margin-left: 0 !important; - margin-right: 0 !important; -} - @media (max-width: 767.98px) { .repo-header .flex-item { flex-grow: 1; diff --git a/web_src/css/repo/linebutton.css b/web_src/css/repo/linebutton.css index 1e5e51eac5..79be5a7a9e 100644 --- a/web_src/css/repo/linebutton.css +++ b/web_src/css/repo/linebutton.css @@ -2,11 +2,6 @@ color: var(--color-text-dark) !important; } -.code-line-menu { - width: auto !important; - border: none !important; /* the border is provided by tippy, not using the `.ui.menu` border */ -} - .code-line-button { background-color: var(--color-menu); color: var(--color-text-light); diff --git a/web_src/css/shared/repoorg.css b/web_src/css/shared/repoorg.css index 7f0a805d0f..5573ae47b8 100644 --- a/web_src/css/shared/repoorg.css +++ b/web_src/css/shared/repoorg.css @@ -5,13 +5,6 @@ margin-left: 15px; } -.repository .ui.secondary.stackable.pointing.menu, -.organization .ui.secondary.stackable.pointing.menu { - flex-wrap: wrap; - margin-top: 5px; - margin-bottom: 10px; -} - .repository .ui.tabs.container, .organization .ui.tabs.container { margin-top: 14px; diff --git a/web_src/js/components/DashboardRepoList.vue b/web_src/js/components/DashboardRepoList.vue index 2e8f335ce5..b9ee531d2a 100644 --- a/web_src/js/components/DashboardRepoList.vue +++ b/web_src/js/components/DashboardRepoList.vue @@ -384,28 +384,30 @@ export default sfc; // activate the IDE's Vue plugin </div> </div> </div> - <div class="ui secondary tiny pointing borderless menu center grid repos-filter"> - <a class="item" :class="{active: reposFilter === 'all'}" @click="changeReposFilter('all')"> - {{ textAll }} - <div v-show="reposFilter === 'all'" class="ui circular mini grey label">{{ repoTypeCount }}</div> - </a> - <a class="item" :class="{active: reposFilter === 'sources'}" @click="changeReposFilter('sources')"> - {{ textSources }} - <div v-show="reposFilter === 'sources'" class="ui circular mini grey label">{{ repoTypeCount }}</div> - </a> - <a class="item" :class="{active: reposFilter === 'forks'}" @click="changeReposFilter('forks')"> - {{ textForks }} - <div v-show="reposFilter === 'forks'" class="ui circular mini grey label">{{ repoTypeCount }}</div> - </a> - <a class="item" :class="{active: reposFilter === 'mirrors'}" @click="changeReposFilter('mirrors')" v-if="isMirrorsEnabled"> - {{ textMirrors }} - <div v-show="reposFilter === 'mirrors'" class="ui circular mini grey label">{{ repoTypeCount }}</div> - </a> - <a class="item" :class="{active: reposFilter === 'collaborative'}" @click="changeReposFilter('collaborative')"> - {{ textCollaborative }} - <div v-show="reposFilter === 'collaborative'" class="ui circular mini grey label">{{ repoTypeCount }}</div> - </a> - </div> + <overflow-menu class="ui secondary pointing tabular borderless menu repos-filter"> + <div class="overflow-menu-items tw-justify-center"> + <a class="item" tabindex="0" :class="{active: reposFilter === 'all'}" @click="changeReposFilter('all')"> + {{ textAll }} + <div v-show="reposFilter === 'all'" class="ui circular mini grey label">{{ repoTypeCount }}</div> + </a> + <a class="item" tabindex="0" :class="{active: reposFilter === 'sources'}" @click="changeReposFilter('sources')"> + {{ textSources }} + <div v-show="reposFilter === 'sources'" class="ui circular mini grey label">{{ repoTypeCount }}</div> + </a> + <a class="item" tabindex="0" :class="{active: reposFilter === 'forks'}" @click="changeReposFilter('forks')"> + {{ textForks }} + <div v-show="reposFilter === 'forks'" class="ui circular mini grey label">{{ repoTypeCount }}</div> + </a> + <a class="item" tabindex="0" :class="{active: reposFilter === 'mirrors'}" @click="changeReposFilter('mirrors')" v-if="isMirrorsEnabled"> + {{ textMirrors }} + <div v-show="reposFilter === 'mirrors'" class="ui circular mini grey label">{{ repoTypeCount }}</div> + </a> + <a class="item" tabindex="0" :class="{active: reposFilter === 'collaborative'}" @click="changeReposFilter('collaborative')"> + {{ textCollaborative }} + <div v-show="reposFilter === 'collaborative'" class="ui circular mini grey label">{{ repoTypeCount }}</div> + </a> + </div> + </overflow-menu> </div> <div v-if="repos.length" class="ui attached table segment gt-rounded-bottom"> <ul class="repo-owner-name-list"> @@ -501,6 +503,22 @@ ul li:not(:last-child) { border-bottom: 1px solid var(--color-secondary); } +.repos-search { + padding-bottom: 0 !important; +} + +.repos-filter { + padding-top: 0 !important; + margin-top: 0 !important; + border-bottom-width: 0 !important; + margin-bottom: 2px !important; +} + +.repos-filter .item { + padding-left: 6px !important; + padding-right: 6px !important; +} + .repo-list-link { min-width: 0; /* for text truncation */ display: flex; diff --git a/web_src/js/modules/tippy.js b/web_src/js/modules/tippy.js index 489afc0ae1..e7eb39f457 100644 --- a/web_src/js/modules/tippy.js +++ b/web_src/js/modules/tippy.js @@ -7,7 +7,8 @@ const visibleInstances = new Set(); export function createTippy(target, opts = {}) { // the callback functions should be destructured from opts, // because we should use our own wrapper functions to handle them, do not let the user override them - const {onHide, onShow, onDestroy, ...other} = opts; + const {onHide, onShow, onDestroy, role, theme, ...other} = opts; + const instance = tippy(target, { appendTo: document.body, animation: false, @@ -35,17 +36,14 @@ export function createTippy(target, opts = {}) { return onShow?.(instance); }, arrow: `<svg width="16" height="7"><path d="m0 7 8-7 8 7Z" class="tippy-svg-arrow-outer"/><path d="m0 8 8-7 8 7Z" class="tippy-svg-arrow-inner"/></svg>`, - role: 'menu', // HTML role attribute, only tooltips should use "tooltip" - theme: other.role || 'menu', // CSS theme, either "tooltip", "menu" or "box-with-header" + role: role || 'menu', // HTML role attribute + theme: theme || role || 'menu', // CSS theme, either "tooltip", "menu" or "box-with-header" plugins: [followCursor], ...other, }); - // for popups where content refers to a DOM element, we use the 'tippy-target' class - // to initially hide the content, now we can remove it as the content has been removed - // from the DOM by tippy - if (other.content instanceof Element) { - other.content.classList.remove('tippy-target'); + if (role === 'menu') { + target.setAttribute('aria-haspopup', 'true'); } return instance; diff --git a/web_src/js/webcomponents/README.md b/web_src/js/webcomponents/README.md index 0fde507310..45af58e1d2 100644 --- a/web_src/js/webcomponents/README.md +++ b/web_src/js/webcomponents/README.md @@ -6,7 +6,6 @@ https://developer.mozilla.org/en-US/docs/Web/Web_Components # Guidelines -* These components are loaded in `<head>` (before DOM body), - so they should have their own dependencies and should be very light, - then they won't affect the page loading time too much. -* If the component is not a public one, it's suggested to have its own `Gitea` or `gitea-` prefix to avoid conflicts. +* These components are loaded in `<head>` (before DOM body) in a separate entry point, they need to be lightweight to not affect the page loading time too much. +* Do not import `svg.js` into a web component because that file is currently not tree-shakeable, import svg files individually insteat. +* All our components must be added to `webpack.config.js` so they work correctly in Vue. diff --git a/web_src/js/webcomponents/GiteaAbsoluteDate.js b/web_src/js/webcomponents/absolute-date.js index 660aa99d07..d12ea0a437 100644 --- a/web_src/js/webcomponents/GiteaAbsoluteDate.js +++ b/web_src/js/webcomponents/absolute-date.js @@ -1,4 +1,4 @@ -window.customElements.define('gitea-absolute-date', class extends HTMLElement { +window.customElements.define('absolute-date', class extends HTMLElement { static observedAttributes = ['date', 'year', 'month', 'weekday', 'day']; update = () => { diff --git a/web_src/js/webcomponents/index.js b/web_src/js/webcomponents/index.js new file mode 100644 index 0000000000..7cec9da734 --- /dev/null +++ b/web_src/js/webcomponents/index.js @@ -0,0 +1,5 @@ +import './polyfills.js'; +import '@github/relative-time-element'; +import './origin-url.js'; +import './overflow-menu.js'; +import './absolute-date.js'; diff --git a/web_src/js/webcomponents/GiteaOriginUrl.js b/web_src/js/webcomponents/origin-url.js index 6e6f84d739..09aa77f2c0 100644 --- a/web_src/js/webcomponents/GiteaOriginUrl.js +++ b/web_src/js/webcomponents/origin-url.js @@ -15,7 +15,7 @@ export function toOriginUrl(urlStr) { return urlStr; } -window.customElements.define('gitea-origin-url', class extends HTMLElement { +window.customElements.define('origin-url', class extends HTMLElement { connectedCallback() { this.textContent = toOriginUrl(this.getAttribute('data-url')); } diff --git a/web_src/js/webcomponents/GiteaOriginUrl.test.js b/web_src/js/webcomponents/origin-url.test.js index f0629842b8..3b2ab89f2a 100644 --- a/web_src/js/webcomponents/GiteaOriginUrl.test.js +++ b/web_src/js/webcomponents/origin-url.test.js @@ -1,4 +1,4 @@ -import {toOriginUrl} from './GiteaOriginUrl.js'; +import {toOriginUrl} from './origin-url.js'; test('toOriginUrl', () => { const oldLocation = window.location; diff --git a/web_src/js/webcomponents/overflow-menu.js b/web_src/js/webcomponents/overflow-menu.js new file mode 100644 index 0000000000..9fa4585567 --- /dev/null +++ b/web_src/js/webcomponents/overflow-menu.js @@ -0,0 +1,179 @@ +import {throttle} from 'throttle-debounce'; +import {createTippy} from '../modules/tippy.js'; +import {isDocumentFragmentOrElementNode} from '../utils/dom.js'; +import octiconKebabHorizontal from '../../../public/assets/img/svg/octicon-kebab-horizontal.svg'; + +window.customElements.define('overflow-menu', class extends HTMLElement { + updateItems = throttle(100, () => { + if (!this.tippyContent) { + const div = document.createElement('div'); + div.classList.add('tippy-target'); + div.tabIndex = '-1'; // for initial focus, programmatic focus only + div.addEventListener('keydown', (e) => { + if (e.key === 'Tab') { + const items = this.tippyContent.querySelectorAll('[role="menuitem"]'); + if (e.shiftKey) { + if (document.activeElement === items[0]) { + e.preventDefault(); + items[items.length - 1].focus(); + } + } else { + if (document.activeElement === items[items.length - 1]) { + e.preventDefault(); + items[0].focus(); + } + } + } else if (e.key === 'Escape') { + e.preventDefault(); + e.stopPropagation(); + this.button._tippy.hide(); + this.button.focus(); + } else if (e.key === ' ' || e.code === 'Enter') { + if (document.activeElement?.matches('[role="menuitem"]')) { + e.preventDefault(); + e.stopPropagation(); + document.activeElement.click(); + } + } else if (e.key === 'ArrowDown') { + if (document.activeElement?.matches('.tippy-target')) { + e.preventDefault(); + e.stopPropagation(); + document.activeElement.querySelector('[role="menuitem"]:first-of-type').focus(); + } else if (document.activeElement?.matches('[role="menuitem"]')) { + e.preventDefault(); + e.stopPropagation(); + document.activeElement.nextElementSibling?.focus(); + } + } else if (e.key === 'ArrowUp') { + if (document.activeElement?.matches('.tippy-target')) { + e.preventDefault(); + e.stopPropagation(); + document.activeElement.querySelector('[role="menuitem"]:last-of-type').focus(); + } else if (document.activeElement?.matches('[role="menuitem"]')) { + e.preventDefault(); + e.stopPropagation(); + document.activeElement.previousElementSibling?.focus(); + } + } + }); + this.append(div); + this.tippyContent = div; + } + + // move items in tippy back into the menu items for subsequent measurement + for (const item of this.tippyItems || []) { + this.menuItemsEl.append(item); + } + + // measure which items are partially outside the element and move them into the button menu + this.tippyItems = []; + const menuRight = this.offsetLeft + this.offsetWidth; + const menuItems = this.menuItemsEl.querySelectorAll('.item'); + for (const item of menuItems) { + const itemRight = item.offsetLeft + item.offsetWidth; + if (menuRight - itemRight < 38) { // roughly the width of .overflow-menu-button + this.tippyItems.push(item); + } + } + + // if there are no overflown items, remove any previously created button + if (!this.tippyItems?.length) { + const btn = this.querySelector('.overflow-menu-button'); + btn?._tippy?.destroy(); + btn?.remove(); + return; + } + + // remove aria role from items that moved from tippy to menu + for (const item of menuItems) { + if (!this.tippyItems.includes(item)) { + item.removeAttribute('role'); + } + } + + // move all items that overflow into tippy + for (const item of this.tippyItems) { + item.setAttribute('role', 'menuitem'); + this.tippyContent.append(item); + } + + // update existing tippy + if (this.button?._tippy) { + this.button._tippy.setContent(this.tippyContent); + return; + } + + // create button initially + const btn = document.createElement('button'); + btn.classList.add('overflow-menu-button', 'btn', 'tw-px-2', 'hover:tw-text-text-dark'); + btn.setAttribute('aria-label', window.config.i18n.more_items); + btn.innerHTML = octiconKebabHorizontal; + this.append(btn); + this.button = btn; + + createTippy(btn, { + trigger: 'click', + hideOnClick: true, + interactive: true, + placement: 'bottom-end', + role: 'menu', + content: this.tippyContent, + onShow: () => { // FIXME: onShown doesn't work (never be called) + setTimeout(() => { + this.tippyContent.focus(); + }, 0); + }, + }); + }); + + init() { + // ResizeObserver triggers on initial render, so we don't manually call `updateItems` here which + // also avoids a full-page FOUC in Firefox that happens when `updateItems` is called too soon. + this.resizeObserver = new ResizeObserver((entries) => { + for (const entry of entries) { + const newWidth = entry.contentBoxSize[0].inlineSize; + if (newWidth !== this.lastWidth) { + requestAnimationFrame(() => { + this.updateItems(); + }); + this.lastWidth = newWidth; + } + } + }); + this.resizeObserver.observe(this); + } + + connectedCallback() { + this.setAttribute('role', 'navigation'); + + // check whether the mandatory `.overflow-menu-items` element is present initially which happens + // with Vue which renders differently than browsers. If it's not there, like in the case of browser + // template rendering, wait for its addition. + // The eslint rule is not sophisticated enough or aware of this problem, see + // https://github.com/43081j/eslint-plugin-wc/pull/130 + const menuItemsEl = this.querySelector('.overflow-menu-items'); // eslint-disable-line wc/no-child-traversal-in-connectedcallback + if (menuItemsEl) { + this.menuItemsEl = menuItemsEl; + this.init(); + } else { + this.mutationObserver = new MutationObserver((mutations) => { + for (const mutation of mutations) { + for (const node of mutation.addedNodes) { + if (!isDocumentFragmentOrElementNode(node)) continue; + if (node.classList.contains('overflow-menu-items')) { + this.menuItemsEl = node; + this.mutationObserver?.disconnect(); + this.init(); + } + } + } + }); + this.mutationObserver.observe(this, {childList: true}); + } + } + + disconnectedCallback() { + this.mutationObserver?.disconnect(); + this.resizeObserver?.disconnect(); + } +}); diff --git a/web_src/js/webcomponents/polyfill.js b/web_src/js/webcomponents/polyfills.js index 88c7276881..88c7276881 100644 --- a/web_src/js/webcomponents/polyfill.js +++ b/web_src/js/webcomponents/polyfills.js diff --git a/web_src/js/webcomponents/webcomponents.js b/web_src/js/webcomponents/webcomponents.js deleted file mode 100644 index 03348d895f..0000000000 --- a/web_src/js/webcomponents/webcomponents.js +++ /dev/null @@ -1,6 +0,0 @@ -import '@webcomponents/custom-elements'; // polyfill for some browsers like PaleMoon -import './polyfill.js'; - -import '@github/relative-time-element'; -import './GiteaOriginUrl.js'; -import './GiteaAbsoluteDate.js'; diff --git a/webpack.config.js b/webpack.config.js index d073a3e9f1..eb23778bae 100644 --- a/webpack.config.js +++ b/webpack.config.js @@ -43,6 +43,18 @@ if ('ENABLE_SOURCEMAP' in env) { sourceMaps = isProduction ? 'reduced' : 'true'; } +// define which web components we use for Vue to not interpret them as Vue components +const webComponents = new Set([ + // our own, in web_src/js/webcomponents + 'overflow-menu', + 'origin-url', + 'absolute-date', + // from dependencies + 'markdown-toolbar', + 'relative-time', + 'text-expander', +]); + const filterCssImport = (url, ...args) => { const cssFile = args[1] || args[0]; // resourcePath is 2nd argument for url and 3rd for import const importedFile = url.replace(/[?#].+/, '').toLowerCase(); @@ -72,7 +84,7 @@ export default { fileURLToPath(new URL('web_src/css/index.css', import.meta.url)), ], webcomponents: [ - fileURLToPath(new URL('web_src/js/webcomponents/webcomponents.js', import.meta.url)), + fileURLToPath(new URL('web_src/js/webcomponents/index.js', import.meta.url)), ], swagger: [ fileURLToPath(new URL('web_src/js/standalone/swagger.js', import.meta.url)), @@ -121,6 +133,11 @@ export default { test: /\.vue$/i, exclude: /node_modules/, loader: 'vue-loader', + options: { + compilerOptions: { + isCustomElement: (tag) => webComponents.has(tag), + }, + }, }, { test: /\.js$/i, |