mirror of
https://github.com/go-gitea/gitea.git
synced 2024-12-23 12:03:45 +08:00
Fix various UI bugs (#32821)
This commit is contained in:
parent
887928e0a6
commit
5bc030efa2
modules/markup/markdown
templates/repo
web_src
|
@ -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>
|
||||
|
|
|
@ -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 {
|
||||
|
|
|
@ -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))
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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 */
|
||||
|
|
|
@ -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);
|
||||
}
|
||||
|
|
|
@ -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> {
|
||||
|
|
Loading…
Reference in New Issue
Block a user