mirror
/
gitea
mirror of https://github.com/go-gitea/gitea
2
0
Fork 0
Code Issues Releases Wiki Activity

Fix all rounded borders, change affected tab menus to pills (#30707)

Browse Source 
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>
pull/30763/head
silverwind 7 months ago committed by GitHub
parent 4daea7c603
commit a3d9f0d915
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
25 changed files with 107 additions and 68 deletions
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Show Stats Download Patch File Download Diff File
  1. 6
      routers/web/repo/editor.go
  2. 4
      templates/org/team/members.tmpl
  3. 2
      templates/org/team/navbar.tmpl
  4. 2
      templates/org/team/repositories.tmpl
  5. 2
      templates/repo/commit_page.tmpl
  6. 6
      templates/repo/editor/diff_preview.tmpl
  7. 8
      templates/repo/editor/edit.tmpl
  8. 4
      templates/repo/editor/patch.tmpl
  9. 33
      templates/repo/issue/labels/label_load_template.tmpl
  10. 2
      templates/repo/tag/list.tmpl
  11. 4
      templates/user/notification/notification_subscriptions.tmpl
  12. 2
      templates/user/settings/account.tmpl
  13. 2
      templates/user/settings/applications.tmpl
  14. 2
      templates/user/settings/applications_oauth2_edit_form.tmpl
  15. 2
      templates/user/settings/applications_oauth2_list.tmpl
  16. 2
      templates/user/settings/security/openid.tmpl
  17. 5
      web_src/css/features/codeeditor.css
  18. 1
      web_src/css/modules/card.css
  19. 20
      web_src/css/modules/menu.css
  20. 2
      web_src/css/modules/modal.css
  21. 8
      web_src/css/modules/segment.css
  22. 18
      web_src/css/repo.css
  23. 19
      web_src/css/repo/list-header.css
  24. 1
      web_src/js/features/codeeditor.js
  25. 18
      web_src/js/features/repo-editor.js

6
routers/web/repo/editor.go
Unescape View File

@ -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.Data["File"] = diff.Files[0]
ctx.HTML(http.StatusOK, tplEditDiffPreview)
}

4
templates/org/team/members.tmpl
Unescape View File

@ -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">

2
templates/org/team/navbar.tmpl
Unescape View File

@ -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>&nbsp; {{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>&nbsp; {{ctx.Locale.Tr "org.lower_repositories"}}</a>
</div>

2
templates/org/team/repositories.tmpl
Unescape View File

@ -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">

2
templates/repo/commit_page.tmpl
Unescape View File

@ -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"}}

6
templates/repo/editor/diff_preview.tmpl
Unescape View File

@ -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}}

8
templates/repo/editor/edit.tmpl
Unescape View File

@ -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>

4
templates/repo/editor/patch.tmpl
Unescape View File

@ -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}}">

33
templates/repo/issue/labels/label_load_template.tmpl
Unescape View File

@ -1,24 +1,21 @@
<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">
<div class="ui selection dropdown">
<input type="hidden" name="template_name" value="Default">
<div class="default text">{{ctx.Locale.Tr "repo.issues.label_templates.helper"}}</div>
<div class="menu">
{{range .LabelTemplateFiles}}
<div class="item" data-value="{{.DisplayName}}">{{.DisplayName}}<br><i>({{.Description}})</i></div>
{{end}}
</div>
{{svg "octicon-triangle-down" 18 "dropdown icon"}}
<p>{{ctx.Locale.Tr "repo.issues.label_templates.info"}}</p>
<form class="ui form center" action="{{.Link}}/initialize" method="post">
{{.CsrfTokenHtml}}
<div class="field">
<div class="ui selection dropdown">
<input type="hidden" name="template_name" value="Default">
<div class="default text">{{ctx.Locale.Tr "repo.issues.label_templates.helper"}}</div>
<div class="menu">
{{range .LabelTemplateFiles}}
<div class="item" data-value="{{.DisplayName}}">{{.DisplayName}}<br><i>({{.Description}})</i></div>
{{end}}
</div>
{{svg "octicon-triangle-down" 18 "dropdown icon"}}
</div>
<button type="submit" class="ui primary button">{{ctx.Locale.Tr "repo.issues.label_templates.use"}}</button>
</form>
</div>
</div>
<button type="submit" class="ui primary button">{{ctx.Locale.Tr "repo.issues.label_templates.use"}}</button>
</form>
</div>
</div>

2
templates/repo/tag/list.tmpl
Unescape View File

@ -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>

4
templates/user/notification/notification_subscriptions.tmpl
Unescape View File

@ -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">

2
templates/user/settings/account.tmpl
Unescape View File

@ -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}}">

2
templates/user/settings/applications.tmpl
Unescape View File

@ -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>

2
templates/user/settings/applications_oauth2_edit_form.tmpl
Unescape View File

@ -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}}">

2
templates/user/settings/applications_oauth2_list.tmpl
Unescape View File

@ -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>

2
templates/user/settings/security/openid.tmpl
Unescape View File

@ -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}}">

5
web_src/css/features/codeeditor.css
Unescape View File

@ -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;

1
web_src/css/modules/card.css
Unescape View File

@ -21,6 +21,7 @@
border: 1px solid var(--color-secondary);
box-shadow: none;
word-wrap: break-word;
border-radius: var(--border-radius);
}
.ui.card {

20
web_src/css/modules/menu.css
Unescape View File

@ -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;
}

2
web_src/css/modules/modal.css
Unescape View File

@ -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 {

8
web_src/css/modules/segment.css
Unescape View File

@ -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;

18
web_src/css/repo.css
Unescape View File

@ -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 {

19
web_src/css/repo/list-header.css
Unescape View File

@ -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;

1
web_src/js/features/codeeditor.js
Unescape View File

@ -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
},
});

18
web_src/js/features/repo-editor.js
Unescape View File

@ -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')}"]`);
renderPreviewPanelContent($previewPanel, data);
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);
}

Write Preview
Loading…
Cancel
Save