mirror of https://github.com/go-gitea/gitea.git
Fix all rounded borders, change affected tab menus to pills (#30707)
Fixes https://github.com/go-gitea/gitea/issues/30673, all 23 issues. Notes: - Tab bar menus had to change to pills because of unsolvable issue with the border-radius as tab bar renders a overlapping border onto the box below. And I think pills look better. - Added padding to code editor empty preview message - Hide monaco's built-in blue focus border, we don't need it and it never showed before either. - Label add menu is simplified, removing the nested segment. <img width="1322" alt="Screenshot 2024-04-25 at 22 26 19" src="https://github.com/go-gitea/gitea/assets/115237/7e394e0c-b7ad-417d-8e9f-12f1dea93ed1"> <img width="1326" alt="Screenshot 2024-04-25 at 22 28 00" src="https://github.com/go-gitea/gitea/assets/115237/66c8499f-aa9f-4d95-8cca-ef13dfa82c65"> <img width="997" alt="Screenshot 2024-04-25 at 22 36 53" src="https://github.com/go-gitea/gitea/assets/115237/07896102-c71d-4246-8173-c2bc2e1d3cae"> <img width="832" alt="Screenshot 2024-04-25 at 22 56 09" src="https://github.com/go-gitea/gitea/assets/115237/d83afc96-08ca-4adc-baf4-3d02804be57c"> <img width="361" alt="Screenshot 2024-04-25 at 22 57 12" src="https://github.com/go-gitea/gitea/assets/115237/c7371a68-00b5-47d8-84d0-ddc5268b2b2c"> --------- Co-authored-by: wxiaoguang <wxiaoguang@gmail.com> Co-authored-by: Giteabot <teabot@gitea.io>
This commit is contained in:
silverwind
GitHub
parent
4daea7c603
commit
a3d9f0d915
|
|
@ -419,11 +419,9 @@ func DiffPreviewPost(ctx *context.Context) {
|
|||
return
|
||||
}
|
||||
|
||||
if diff.NumFiles == 0 {
|
||||
ctx.PlainText(http.StatusOK, ctx.Locale.TrString("repo.editor.no_changes_to_show"))
|
||||
return
|
||||
}
|
||||
if diff.NumFiles != 0 {
|
||||
ctx.Data["File"] = diff.Files[0]
|
||||
}
|
||||
|
||||
ctx.HTML(http.StatusOK, tplEditDiffPreview)
|
||||
}
|
||||
|
|
|
|||
|
|
@ -8,7 +8,7 @@
|
|||
<div class="ui ten wide column">
|
||||
{{template "org/team/navbar" .}}
|
||||
{{if .IsOrganizationOwner}}
|
||||
<div class="ui attached segment">
|
||||
<div class="ui top attached segment">
|
||||
<form class="ui form ignore-dirty tw-flex tw-flex-wrap tw-gap-2" action="{{$.OrgLink}}/teams/{{$.Team.LowerName | PathEscape}}/action/add" method="post">
|
||||
{{.CsrfTokenHtml}}
|
||||
<input type="hidden" name="uid" value="{{.SignedUser.ID}}">
|
||||
|
|
@ -21,7 +21,7 @@
|
|||
</form>
|
||||
</div>
|
||||
{{end}}
|
||||
<div class="ui attached segment">
|
||||
<div class="ui{{if not .IsOrganizationOwner}} top{{end}} attached segment">
|
||||
<div class="flex-list">
|
||||
{{range .Team.Members}}
|
||||
<div class="flex-item tw-items-center">
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
<div class="ui top attached tabular menu org-team-navbar">
|
||||
<div class="ui compact small menu small-menu-items org-team-navbar">
|
||||
<a class="item{{if .PageIsOrgTeamMembers}} active{{end}}" href="{{.OrgLink}}/teams/{{.Team.LowerName | PathEscape}}">{{svg "octicon-person"}} <strong>{{.Team.NumMembers}}</strong> {{ctx.Locale.Tr "org.lower_members"}}</a>
|
||||
<a class="item{{if .PageIsOrgTeamRepos}} active{{end}}" href="{{.OrgLink}}/teams/{{.Team.LowerName | PathEscape}}/repositories">{{svg "octicon-repo"}} <strong>{{.Team.NumRepos}}</strong> {{ctx.Locale.Tr "org.lower_repositories"}}</a>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -25,7 +25,7 @@
|
|||
</div>
|
||||
</div>
|
||||
{{end}}
|
||||
<div class="ui attached segment">
|
||||
<div class="ui{{if not $canAddRemove}} top{{end}} attached segment">
|
||||
<div class="flex-list">
|
||||
{{range .Team.Repos}}
|
||||
<div class="flex-item tw-items-center">
|
||||
|
|
|
|||
|
|
@ -139,7 +139,7 @@
|
|||
{{end}}
|
||||
{{template "repo/commit_load_branches_and_tags" .}}
|
||||
</div>
|
||||
<div class="ui attached segment tw-flex tw-items-center tw-justify-between tw-py-1 commit-header-row tw-flex-wrap {{$class}}">
|
||||
<div class="ui{{if not .Commit.Signature}} bottom{{end}} attached segment tw-flex tw-items-center tw-justify-between tw-py-1 commit-header-row tw-flex-wrap {{$class}}">
|
||||
<div class="tw-flex tw-items-center author">
|
||||
{{if .Author}}
|
||||
{{ctx.AvatarUtils.Avatar .Author 28 "tw-mr-2"}}
|
||||
|
|
|
|||
|
|
@ -1,3 +1,4 @@
|
|||
{{if .File}}
|
||||
<div class="diff-file-box">
|
||||
<div class="ui attached table segment">
|
||||
<div class="file-body file-code code-diff code-diff-unified unicode-escaped">
|
||||
|
|
@ -9,3 +10,8 @@
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{{else}}
|
||||
<div class="tw-p-6 tw-text-center">
|
||||
{{ctx.Locale.Tr "repo.editor.no_changes_to_show"}}
|
||||
</div>
|
||||
{{end}}
|
||||
|
|
|
|||
|
|
@ -26,14 +26,14 @@
|
|||
</div>
|
||||
</div>
|
||||
<div class="field">
|
||||
<div class="ui top attached tabular menu" data-write="write" data-preview="preview" data-diff="diff">
|
||||
<div class="ui compact small menu small-menu-items repo-editor-menu">
|
||||
<a class="active item" data-tab="write">{{svg "octicon-code"}} {{if .IsNewFile}}{{ctx.Locale.Tr "repo.editor.new_file"}}{{else}}{{ctx.Locale.Tr "repo.editor.edit_file"}}{{end}}</a>
|
||||
<a class="item" data-tab="preview" data-url="{{.Repository.Link}}/markup" data-context="{{.RepoLink}}/src/{{.BranchNameSubURL}}" data-markup-mode="file">{{svg "octicon-eye"}} {{ctx.Locale.Tr "preview"}}</a>
|
||||
{{if not .IsNewFile}}
|
||||
<a class="item" data-tab="diff" hx-params="context,content" hx-vals='{"context":"{{.BranchLink}}"}' hx-include="#edit_area" hx-swap="innerHTML" hx-target=".tab[data-tab='diff']" hx-indicator=".tab[data-tab='diff']" hx-post="{{.RepoLink}}/_preview/{{.BranchName | PathEscapeSegments}}/{{.TreePath | PathEscapeSegments}}">{{svg "octicon-diff"}} {{ctx.Locale.Tr "repo.editor.preview_changes"}}</a>
|
||||
{{end}}
|
||||
</div>
|
||||
<div class="ui bottom attached active tab segment" data-tab="write">
|
||||
<div class="ui active tab segment tw-rounded" data-tab="write">
|
||||
<textarea id="edit_area" name="content" class="tw-hidden" data-id="repo-{{.Repository.Name}}-{{.TreePath}}"
|
||||
data-url="{{.Repository.Link}}/markup"
|
||||
data-context="{{.RepoLink}}"
|
||||
|
|
@ -41,10 +41,10 @@
|
|||
data-line-wrap-extensions="{{.LineWrapExtensions}}">{{.FileContent}}</textarea>
|
||||
<div class="editor-loading is-loading"></div>
|
||||
</div>
|
||||
<div class="ui bottom attached tab segment markup" data-tab="preview">
|
||||
<div class="ui tab segment markup tw-rounded" data-tab="preview">
|
||||
{{ctx.Locale.Tr "loading"}}
|
||||
</div>
|
||||
<div class="ui bottom attached tab segment diff edit-diff" data-tab="diff">
|
||||
<div class="ui tab segment diff edit-diff" data-tab="diff">
|
||||
<div class="tw-p-16"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -19,10 +19,10 @@
|
|||
</div>
|
||||
</div>
|
||||
<div class="field">
|
||||
<div class="ui top attached tabular menu" data-write="write">
|
||||
<div class="ui compact small menu small-menu-items repo-editor-menu">
|
||||
<a class="active item" data-tab="write">{{svg "octicon-code" 16 "tw-mr-1"}}{{ctx.Locale.Tr "repo.editor.new_patch"}}</a>
|
||||
</div>
|
||||
<div class="ui bottom attached active tab segment" data-tab="write">
|
||||
<div class="ui active tab segment tw-rounded tw-p-0" data-tab="write">
|
||||
<textarea id="edit_area" name="content" class="tw-hidden" data-id="repo-{{.Repository.Name}}-patch"
|
||||
data-context="{{.RepoLink}}"
|
||||
data-line-wrap-extensions="{{.LineWrapExtensions}}">
|
||||
|
|
|
|||
|
|
@ -1,8 +1,6 @@
|
|||
<div class="ui centered grid">
|
||||
<div class="twelve wide computer column">
|
||||
<div class="ui attached left aligned segment">
|
||||
<p>{{ctx.Locale.Tr "repo.issues.label_templates.info"}}</p>
|
||||
<br>
|
||||
<form class="ui form center" action="{{.Link}}/initialize" method="post">
|
||||
{{.CsrfTokenHtml}}
|
||||
<div class="field">
|
||||
|
|
@ -21,4 +19,3 @@
|
|||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -4,6 +4,7 @@
|
|||
<div class="ui container">
|
||||
{{template "base/alert" .}}
|
||||
{{template "repo/release_tag_header" .}}
|
||||
{{if .Releases}}
|
||||
<h4 class="ui top attached header">
|
||||
<div class="five wide column tw-flex tw-items-center">
|
||||
{{svg "octicon-tag" 16 "tw-mr-1"}}{{ctx.Locale.Tr "repo.release.tags"}}
|
||||
|
|
@ -57,6 +58,7 @@
|
|||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
{{end}}
|
||||
|
||||
{{template "base/paginate" .}}
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
{{template "base/head" .}}
|
||||
<div role="main" aria-label="{{.Title}}" class="page-content user notification">
|
||||
<div class="ui container">
|
||||
<div class="ui top attached tabular menu">
|
||||
<div class="ui compact small menu small-menu-items">
|
||||
<a href="{{AppSubUrl}}/notifications/subscriptions" class="{{if eq .Status 1}}active {{end}}item">
|
||||
{{ctx.Locale.Tr "notification.subscriptions"}}
|
||||
</a>
|
||||
|
|
@ -9,7 +9,7 @@
|
|||
{{ctx.Locale.Tr "notification.watching"}}
|
||||
</a>
|
||||
</div>
|
||||
<div class="ui bottom attached active tab segment">
|
||||
<div class="ui top attached segment">
|
||||
{{if eq .Status 1}}
|
||||
<div class="tw-flex tw-justify-between">
|
||||
<div class="tw-flex">
|
||||
|
|
|
|||
|
|
@ -111,7 +111,7 @@
|
|||
{{end}}
|
||||
</div>
|
||||
</div>
|
||||
<div class="ui attached bottom segment">
|
||||
<div class="ui bottom attached segment">
|
||||
<form class="ui form" action="{{AppSubUrl}}/user/settings/account/email" method="post">
|
||||
{{.CsrfTokenHtml}}
|
||||
<div class="required field {{if .Err_Email}}error{{end}}">
|
||||
|
|
|
|||
|
|
@ -49,7 +49,7 @@
|
|||
{{end}}
|
||||
</div>
|
||||
</div>
|
||||
<div class="ui attached bottom segment">
|
||||
<div class="ui bottom attached segment">
|
||||
<h5 class="ui top header">
|
||||
{{ctx.Locale.Tr "settings.generate_new_token"}}
|
||||
</h5>
|
||||
|
|
|
|||
|
|
@ -30,7 +30,7 @@
|
|||
</form>
|
||||
</div>
|
||||
</div>
|
||||
<div class="ui attached bottom segment">
|
||||
<div class="ui bottom attached segment">
|
||||
<form class="ui form ignore-dirty" action="{{.FormActionPath}}" method="post">
|
||||
{{.CsrfTokenHtml}}
|
||||
<div class="field {{if .Err_AppName}}error{{end}}">
|
||||
|
|
|
|||
|
|
@ -47,7 +47,7 @@
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<div class="ui attached bottom segment">
|
||||
<div class="ui bottom attached segment">
|
||||
<h5 class="ui top header">
|
||||
{{ctx.Locale.Tr "settings.create_oauth2_application"}}
|
||||
</h5>
|
||||
|
|
|
|||
|
|
@ -38,7 +38,7 @@
|
|||
{{end}}
|
||||
</div>
|
||||
</div>
|
||||
<div class="ui attached bottom segment">
|
||||
<div class="ui bottom attached segment">
|
||||
<form class="ui form" action="{{AppSubUrl}}/user/settings/security/openid" method="post">
|
||||
{{.CsrfTokenHtml}}
|
||||
<div class="required field {{if .Err_OpenID}}error{{end}}">
|
||||
|
|
|
|||
|
|
@ -21,6 +21,11 @@
|
|||
background-color: transparent !important;
|
||||
}
|
||||
|
||||
.monaco-editor,
|
||||
.monaco-editor .overflow-guard {
|
||||
border-radius: var(--border-radius);
|
||||
}
|
||||
|
||||
/* these seem unthemeable */
|
||||
.monaco-scrollable-element > .scrollbar > .slider {
|
||||
background: var(--color-primary) !important;
|
||||
|
|
|
|||
|
|
@ -21,6 +21,7 @@
|
|||
border: 1px solid var(--color-secondary);
|
||||
box-shadow: none;
|
||||
word-wrap: break-word;
|
||||
border-radius: var(--border-radius);
|
||||
}
|
||||
|
||||
.ui.card {
|
||||
|
|
|
|||
|
|
@ -799,3 +799,23 @@
|
|||
.ui.segment .ui.tabular.menu .active.item:hover {
|
||||
background: var(--color-box-body);
|
||||
}
|
||||
|
||||
.small-menu-items {
|
||||
min-height: 35.4px !important; /* match .small.button in height */
|
||||
background: none !important; /* fomantic sets a color here which does not play well with active transparent color on the item, so unset and set the colors on the item */
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.small-menu-items .item {
|
||||
background: var(--color-menu) !important;
|
||||
padding-top: 6px !important;
|
||||
padding-bottom: 6px !important;
|
||||
}
|
||||
|
||||
.small-menu-items .item:hover {
|
||||
background: var(--color-hover) !important;
|
||||
}
|
||||
|
||||
.small-menu-items .item.active {
|
||||
background: var(--color-active) !important;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -54,6 +54,7 @@ These inconsistent layouts should be refactored to simple ones.
|
|||
.ui.modal form > .content {
|
||||
padding: 1.5em;
|
||||
background: var(--color-body);
|
||||
border-radius: 0 0 var(--border-radius) var(--border-radius);
|
||||
}
|
||||
|
||||
.ui.modal > .actions,
|
||||
|
|
@ -63,6 +64,7 @@ These inconsistent layouts should be refactored to simple ones.
|
|||
border-color: var(--color-secondary);
|
||||
padding: 1rem;
|
||||
text-align: right;
|
||||
border-radius: 0 0 var(--border-radius) var(--border-radius);
|
||||
}
|
||||
|
||||
.ui.modal .content > .actions {
|
||||
|
|
|
|||
|
|
@ -152,7 +152,9 @@
|
|||
}
|
||||
|
||||
.ui.attached.segment:has(+ .ui[class*="top attached"].header),
|
||||
.ui.attached.segment:last-child {
|
||||
.ui.attached.segment:last-child,
|
||||
.ui.segment:has(+ .ui.segment:not(.attached)),
|
||||
.ui.attached.segment:has(+ .ui.modal) {
|
||||
border-radius: 0 0 0.28571429rem 0.28571429rem;
|
||||
}
|
||||
|
||||
|
|
@ -166,6 +168,10 @@
|
|||
.ui.segment[class*="top attached"]:first-child {
|
||||
margin-top: 0;
|
||||
}
|
||||
.ui[class*="top attached"].segment:last-child {
|
||||
border-top-left-radius: 0.28571429rem;
|
||||
border-top-right-radius: 0.28571429rem;
|
||||
}
|
||||
|
||||
.ui.segment[class*="bottom attached"] {
|
||||
bottom: 0;
|
||||
|
|
|
|||
|
|
@ -1586,6 +1586,7 @@ td .commit-summary {
|
|||
|
||||
.repository .diff-file-box .file-body.file-code {
|
||||
background: var(--color-code-bg);
|
||||
border-radius: var(--border-radius);
|
||||
}
|
||||
|
||||
.repository .diff-file-box .file-body.file-code .lines-num {
|
||||
|
|
@ -2382,6 +2383,22 @@ tbody.commit-list {
|
|||
vertical-align: middle;
|
||||
}
|
||||
|
||||
/* fix bottom border radius on diff files */
|
||||
.diff-file-body tr.tag-code:last-child {
|
||||
background: none;
|
||||
}
|
||||
.diff-file-body tr.tag-code:last-child > td {
|
||||
background: var(--color-box-body-highlight);
|
||||
}
|
||||
.diff-file-body tr.tag-code:last-child td:first-child,
|
||||
.diff-file-body tr.tag-code:last-child td:first-child * {
|
||||
border-bottom-left-radius: 3px;
|
||||
}
|
||||
.diff-file-body tr.tag-code:last-child td:last-child,
|
||||
.diff-file-body tr.tag-code:last-child td:last-child * {
|
||||
border-bottom-right-radius: 3px;
|
||||
}
|
||||
|
||||
.resolved-placeholder {
|
||||
font-weight: var(--font-weight-normal) !important;
|
||||
border: 1px solid var(--color-secondary) !important;
|
||||
|
|
@ -2491,6 +2508,7 @@ tbody.commit-list {
|
|||
|
||||
.diff-file-header {
|
||||
padding: 5px 8px !important;
|
||||
box-shadow: 0 -1px 0 1px var(--color-body); /* prevent borders being visible behind top corners when sticky and scrolled */
|
||||
}
|
||||
|
||||
.diff-file-box[data-folded="true"] .diff-file-body {
|
||||
|
|
|
|||
|
|
@ -25,25 +25,6 @@
|
|||
flex: 1;
|
||||
}
|
||||
|
||||
.small-menu-items {
|
||||
min-height: 35.4px !important; /* match .small.button in height */
|
||||
background: none !important; /* fomantic sets a color here which does not play well with active transparent color on the item, so unset and set the colors on the item */
|
||||
}
|
||||
|
||||
.small-menu-items .item {
|
||||
background: var(--color-menu) !important;
|
||||
padding-top: 6px !important;
|
||||
padding-bottom: 6px !important;
|
||||
}
|
||||
|
||||
.small-menu-items .item:hover {
|
||||
background: var(--color-hover) !important;
|
||||
}
|
||||
|
||||
.small-menu-items .item.active {
|
||||
background: var(--color-active) !important;
|
||||
}
|
||||
|
||||
@media (max-width: 767.98px) {
|
||||
.list-header-search {
|
||||
order: 0;
|
||||
|
|
|
|||
|
|
@ -98,6 +98,7 @@ export async function createMonaco(textarea, filename, editorOpts) {
|
|||
'input.foreground': getColor('--color-input-text'),
|
||||
'scrollbar.shadow': getColor('--color-shadow'),
|
||||
'progressBar.background': getColor('--color-primary'),
|
||||
'focusBorder': '#0000', // prevent blue border
|
||||
},
|
||||
});
|
||||
|
||||
|
|
|
|||
|
|
@ -7,9 +7,9 @@ import {attachRefIssueContextPopup} from './contextpopup.js';
|
|||
import {POST} from '../modules/fetch.js';
|
||||
|
||||
function initEditPreviewTab($form) {
|
||||
const $tabMenu = $form.find('.tabular.menu');
|
||||
const $tabMenu = $form.find('.repo-editor-menu');
|
||||
$tabMenu.find('.item').tab();
|
||||
const $previewTab = $tabMenu.find(`.item[data-tab="${$tabMenu.data('preview')}"]`);
|
||||
const $previewTab = $tabMenu.find('a[data-tab="preview"]');
|
||||
if ($previewTab.length) {
|
||||
$previewTab.on('click', async function () {
|
||||
const $this = $(this);
|
||||
|
|
@ -24,13 +24,15 @@ function initEditPreviewTab($form) {
|
|||
const formData = new FormData();
|
||||
formData.append('mode', mode);
|
||||
formData.append('context', context);
|
||||
formData.append('text', $form.find(`.tab[data-tab="${$tabMenu.data('write')}"] textarea`).val());
|
||||
formData.append('text', $form.find('.tab[data-tab="write"] textarea').val());
|
||||
formData.append('file_path', $treePathEl.val());
|
||||
try {
|
||||
const response = await POST($this.data('url'), {data: formData});
|
||||
const data = await response.text();
|
||||
const $previewPanel = $form.find(`.tab[data-tab="${$tabMenu.data('preview')}"]`);
|
||||
const $previewPanel = $form.find('.tab[data-tab="preview"]');
|
||||
if ($previewPanel.length) {
|
||||
renderPreviewPanelContent($previewPanel, data);
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Error:', error);
|
||||
}
|
||||
|
|
@ -175,10 +177,10 @@ export function initRepoEditor() {
|
|||
})();
|
||||
}
|
||||
|
||||
export function renderPreviewPanelContent($panelPreviewer, data) {
|
||||
$panelPreviewer.html(data);
|
||||
export function renderPreviewPanelContent($previewPanel, data) {
|
||||
$previewPanel.html(data);
|
||||
initMarkupContent();
|
||||
|
||||
const $refIssues = $panelPreviewer.find('p .ref-issue');
|
||||
const $refIssues = $previewPanel.find('p .ref-issue');
|
||||
attachRefIssueContextPopup($refIssues);
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue