MarcoBuster/gitea
1
0
Fork 0
mirror of https://github.com/go-gitea/gitea synced 2024-12-21 18:07:51 +01:00
Code Issues Packages Projects Releases Wiki Activity

Fix various UI bugs (#32821)

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

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

@ -12,6 +12,17 @@ import (
"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
type BlockRenderer struct {
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) {
n := node.(*Block)
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.writeLines(w, source, n)
} else {

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

@ -13,6 +13,9 @@ import (
"github.com/yuin/goldmark/util"
)
// Inline render output:
// <code class="language-math">...</code>
// InlineRenderer is an inline renderer
type InlineRenderer struct {
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) {
if entering {
extraClass := ""
if _, ok := n.(*InlineBlock); ok {
extraClass = "display "
}
_ = r.renderInternal.FormatWithSafeAttrs(w, `<code class="language-math %sis-loading">`, extraClass)
_ = r.renderInternal.FormatWithSafeAttrs(w, `<code class="language-math">`)
for c := n.FirstChild(); c != nil; c = c.NextSibling() {
segment := c.(*ast.Text).Segment
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 */}}
<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>{{if and .LatestCommit .LatestCommit.Committer}}{{DateUtils.TimeSince .LatestCommit.Committer.When}}{{end}}</div>
</div>

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

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

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

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

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

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