Mirrors
/
gitea
mirror of https://github.com/go-gitea/gitea.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Fix various UI bugs (#32821)

This commit is contained in:
wxiaoguang 2024-12-13 14:45:32 +08:00 committed by GitHub
parent 887928e0a6
commit 5bc030efa2
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
7 changed files with 47 additions and 30 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

40
modules/markup/markdown/markdown_math_test.go
View File

@ -20,23 +20,23 @@ func TestMathRender(t *testing.T) {
}{ }{
{ {
"$a$", "$a$",
`<p><code class="language-math is-loading">a</code></p>` + nl, `<p><code class="language-math">a</code></p>` + nl,
}, },
{ {
"$ a $", "$ a $",
`<p><code class="language-math is-loading">a</code></p>` + nl, `<p><code class="language-math">a</code></p>` + nl,
}, },
{ {
"$a$ $b$", "$a$ $b$",
`<p><code class="language-math is-loading">a</code> <code class="language-math is-loading">b</code></p>` + nl, `<p><code class="language-math">a</code> <code class="language-math">b</code></p>` + nl,
}, },
{ {
`\(a\) \(b\)`, `\(a\) \(b\)`,
`<p><code class="language-math is-loading">a</code> <code class="language-math is-loading">b</code></p>` + nl, `<p><code class="language-math">a</code> <code class="language-math">b</code></p>` + nl,
}, },
{ {
`$a$.`, `$a$.`,
`<p><code class="language-math is-loading">a</code>.</p>` + nl, `<p><code class="language-math">a</code>.</p>` + nl,
}, },
{ {
`.$a$`, `.$a$`,
@ -64,27 +64,27 @@ func TestMathRender(t *testing.T) {
}, },
{ {
"$a$ ($b$) [$c$] {$d$}", "$a$ ($b$) [$c$] {$d$}",
`<p><code class="language-math is-loading">a</code> (<code class="language-math is-loading">b</code>) [$c$] {$d$}</p>` + nl, `<p><code class="language-math">a</code> (<code class="language-math">b</code>) [$c$] {$d$}</p>` + nl,
}, },
{ {
"$$a$$", "$$a$$",
`<code class="chroma language-math display">a</code>` + nl, `<code class="language-math display">a</code>` + nl,
}, },
{ {
"$$a$$ test", "$$a$$ test",
`<p><code class="language-math display is-loading">a</code> test</p>` + nl, `<p><code class="language-math">a</code> test</p>` + nl,
}, },
{ {
"test $$a$$", "test $$a$$",
`<p>test <code class="language-math display is-loading">a</code></p>` + nl, `<p>test <code class="language-math">a</code></p>` + nl,
}, },
{ {
`foo $x=\$$ bar`, `foo $x=\$$ bar`,
`<p>foo <code class="language-math is-loading">x=\$</code> bar</p>` + nl, `<p>foo <code class="language-math">x=\$</code> bar</p>` + nl,
}, },
{ {
`$\text{$b$}$`, `$\text{$b$}$`,
`<p><code class="language-math is-loading">\text{$b$}</code></p>` + nl, `<p><code class="language-math">\text{$b$}</code></p>` + nl,
}, },
} }
@ -110,7 +110,7 @@ func TestMathRenderBlockIndent(t *testing.T) {
\alpha \alpha
\] \]
`, `,
`<pre class="code-block is-loading"><code class="chroma language-math display"> `<pre class="code-block is-loading"><code class="language-math display">
\alpha \alpha
</code></pre> </code></pre>
`, `,
@ -122,7 +122,7 @@ func TestMathRenderBlockIndent(t *testing.T) {
\alpha \alpha
\] \]
`, `,
`<pre class="code-block is-loading"><code class="chroma language-math display"> `<pre class="code-block is-loading"><code class="language-math display">
\alpha \alpha
</code></pre> </code></pre>
`, `,
@ -137,7 +137,7 @@ a
d d
\] \]
`, `,
`<pre class="code-block is-loading"><code class="chroma language-math display"> `<pre class="code-block is-loading"><code class="language-math display">
a a
b b
c c
@ -154,7 +154,7 @@ c
c c
\] \]
`, `,
`<pre class="code-block is-loading"><code class="chroma language-math display"> `<pre class="code-block is-loading"><code class="language-math display">
a a
b b
c c
@ -165,7 +165,7 @@ c
"indent-0-oneline", "indent-0-oneline",
`$$ x $$ `$$ x $$
foo`, foo`,
`<code class="chroma language-math display"> x </code> `<code class="language-math display"> x </code>
<p>foo</p> <p>foo</p>
`, `,
}, },
@ -173,7 +173,7 @@ foo`,
"indent-3-oneline", "indent-3-oneline",
` $$ x $$<SPACE> ` $$ x $$<SPACE>
foo`, foo`,
`<code class="chroma language-math display"> x </code> `<code class="language-math display"> x </code>
<p>foo</p> <p>foo</p>
`, `,
}, },
@ -188,10 +188,10 @@ foo`,
> \] > \]
`, `,
`<blockquote> `<blockquote>
<pre class="code-block is-loading"><code class="chroma language-math display"> <pre class="code-block is-loading"><code class="language-math display">
a a
</code></pre> </code></pre>
<pre class="code-block is-loading"><code class="chroma language-math display"> <pre class="code-block is-loading"><code class="language-math display">
b b
</code></pre> </code></pre>
</blockquote> </blockquote>
@ -207,7 +207,7 @@ b
2. b`, 2. b`,
`<ol> `<ol>
<li>a <li>a
<pre class="code-block is-loading"><code class="chroma language-math display"> <pre class="code-block is-loading"><code class="language-math display">
x x
</code></pre> </code></pre>
</li> </li>

13
modules/markup/markdown/math/block_renderer.go
View File

@ -12,6 +12,17 @@ import (
"github.com/yuin/goldmark/util" "github.com/yuin/goldmark/util"
) )
// Block render output:
// <pre class="code-block is-loading"><code class="language-math display">...</code></pre>
//
// Keep in mind that there is another "code block" render in "func (r *GlodmarkRender) highlightingRenderer"
// "highlightingRenderer" outputs the math block with extra "chroma" class:
// <pre class="code-block is-loading"><code class="chroma language-math display">...</code></pre>
//
// Special classes:
// * "is-loading": show a loading indicator
// * "display": used by JS to decide to render as a block, otherwise render as inline
// BlockRenderer represents a renderer for math Blocks // BlockRenderer represents a renderer for math Blocks
type BlockRenderer struct { type BlockRenderer struct {
renderInternal *internal.RenderInternal renderInternal *internal.RenderInternal
@ -38,7 +49,7 @@ func (r *BlockRenderer) writeLines(w util.BufWriter, source []byte, n gast.Node)
func (r *BlockRenderer) renderBlock(w util.BufWriter, source []byte, node gast.Node, entering bool) (gast.WalkStatus, error) { func (r *BlockRenderer) renderBlock(w util.BufWriter, source []byte, node gast.Node, entering bool) (gast.WalkStatus, error) {
n := node.(*Block) n := node.(*Block)
if entering { if entering {
code := giteaUtil.Iif(n.Inline, "", `<pre class="code-block is-loading">`) + `<code class="chroma language-math display">` code := giteaUtil.Iif(n.Inline, "", `<pre class="code-block is-loading">`) + `<code class="language-math display">`
_ = r.renderInternal.FormatWithSafeAttrs(w, code) _ = r.renderInternal.FormatWithSafeAttrs(w, code)
r.writeLines(w, source, n) r.writeLines(w, source, n)
} else { } else {

9
modules/markup/markdown/math/inline_renderer.go
View File

@ -13,6 +13,9 @@ import (
"github.com/yuin/goldmark/util" "github.com/yuin/goldmark/util"
) )
// Inline render output:
// <code class="language-math">...</code>
// InlineRenderer is an inline renderer // InlineRenderer is an inline renderer
type InlineRenderer struct { type InlineRenderer struct {
renderInternal *internal.RenderInternal renderInternal *internal.RenderInternal
@ -25,11 +28,7 @@ func NewInlineRenderer(renderInternal *internal.RenderInternal) renderer.NodeRen
func (r *InlineRenderer) renderInline(w util.BufWriter, source []byte, n ast.Node, entering bool) (ast.WalkStatus, error) { func (r *InlineRenderer) renderInline(w util.BufWriter, source []byte, n ast.Node, entering bool) (ast.WalkStatus, error) {
if entering { if entering {
extraClass := "" _ = r.renderInternal.FormatWithSafeAttrs(w, `<code class="language-math">`)
if _, ok := n.(*InlineBlock); ok {
extraClass = "display "
}
_ = r.renderInternal.FormatWithSafeAttrs(w, `<code class="language-math %sis-loading">`, extraClass)
for c := n.FirstChild(); c != nil; c = c.NextSibling() { for c := n.FirstChild(); c != nil; c = c.NextSibling() {
segment := c.(*ast.Text).Segment segment := c.(*ast.Text).Segment
value := util.EscapeHTML(segment.Value(source)) value := util.EscapeHTML(segment.Value(source))

2
templates/repo/view_list.tmpl
View File

@ -1,6 +1,6 @@
{{/* use grid layout, still use the old ID because there are many other CSS styles depending on this ID */}} {{/* use grid layout, still use the old ID because there are many other CSS styles depending on this ID */}}
<div id="repo-files-table" {{if .HasFilesWithoutLatestCommit}}hx-indicator="#repo-files-table .repo-file-cell.message" hx-trigger="load" hx-swap="morph" hx-post="{{.LastCommitLoaderURL}}"{{end}}> <div id="repo-files-table" {{if .HasFilesWithoutLatestCommit}}hx-indicator="#repo-files-table .repo-file-cell.message" hx-trigger="load" hx-swap="morph" hx-post="{{.LastCommitLoaderURL}}"{{end}}>
<div class="repo-file-line"> <div class="repo-file-line repo-file-last-commit">
<div class="latest-commit">{{template "repo/latest_commit" .}}</div> <div class="latest-commit">{{template "repo/latest_commit" .}}</div>
<div>{{if and .LatestCommit .LatestCommit.Committer}}{{DateUtils.TimeSince .LatestCommit.Committer.When}}{{end}}</div> <div>{{if and .LatestCommit .LatestCommit.Committer}}{{DateUtils.TimeSince .LatestCommit.Committer.When}}{{end}}</div>
</div> </div>

3
web_src/css/repo/clone.css
View File

@ -1,11 +1,14 @@
/* only used by "repo/empty.tmpl" */ /* only used by "repo/empty.tmpl" */
.clone-buttons-combo { .clone-buttons-combo {
display: flex;
align-items: center;
flex: 1; flex: 1;
} }
.clone-buttons-combo input { .clone-buttons-combo input {
border-left: none !important; border-left: none !important;
border-radius: 0 !important; border-radius: 0 !important;
height: 30px;
} }
/* used by the clone-panel popup */ /* used by the clone-panel popup */

5
web_src/css/repo/home-file-list.css
View File

@ -44,6 +44,10 @@
padding: 6px 10px; padding: 6px 10px;
} }
#repo-files-table .repo-file-last-commit {
background: var(--color-box-header);
}
#repo-files-table .repo-file-cell.name { #repo-files-table .repo-file-cell.name {
max-width: 300px; max-width: 300px;
white-space: nowrap; white-space: nowrap;
@ -59,6 +63,7 @@
} }
#repo-files-table .repo-file-cell.age { #repo-files-table .repo-file-cell.age {
text-align: right;
white-space: nowrap; white-space: nowrap;
color: var(--color-text-light-1); color: var(--color-text-light-1);
} }

5
web_src/js/markup/math.ts
View File

@ -1,9 +1,8 @@
import {displayError} from './common.ts'; import {displayError} from './common.ts';
function targetElement(el: Element) { function targetElement(el: Element) {
// The target element is either the current element if it has the // The target element is either the parent "code block with loading indicator", or itself
// `is-loading` class or the pre that contains it return el.closest('.code-block.is-loading') ?? el;
return el.classList.contains('is-loading') ? el : el.closest('pre');
} }
export async function renderMath(): Promise<void> { export async function renderMath(): Promise<void> {