tdsds.com/gitea
1
1
Fork 0
mirror of https://github.com/go-gitea/gitea synced 2025-07-03 09:07:19 +00:00
Code Releases 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>
This commit is contained in:
silverwind
2024-04-29 22:53:15 +02:00
committed by GitHub
parent 4daea7c603
commit a3d9f0d915
25 changed files with 107 additions and 68 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
web_src/css/features/codeeditor.css
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
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
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
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
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
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
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
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
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);
}