From 4711d3311ba493e52786323eebb5ac88c343f955 Mon Sep 17 00:00:00 2001
From: silverwind <me@silverwind.io>
Date: Mon, 18 Mar 2024 15:47:05 +0100
Subject: [PATCH] Migrate border and margin classes to Tailwind (#29828)
Used all existing css vars, other migrations are 1:1.
---------
Co-authored-by: wxiaoguang <wxiaoguang@gmail.com>
(cherry picked from commit 34290a00c4501ffeba26db267be71ab68e3ec97f)
Conflicts:
templates/repo/issue/filter_list.tmpl
web_src/js/components/DashboardRepoList.vue
trivial context conflicts
---
tailwind.config.js | 11 ++++++++++
templates/devtest/flex-list.tmpl | 2 +-
templates/devtest/gitea-ui.tmpl | 4 ++--
templates/org/header.tmpl | 2 +-
templates/repo/issue/filter_list.tmpl | 4 ++--
templates/repo/issue/labels/label_list.tmpl | 2 +-
templates/repo/pulls/tab_menu.tmpl | 2 +-
templates/repo/settings/options.tmpl | 6 +++---
templates/status/500.tmpl | 3 ++-
templates/user/dashboard/navbar.tmpl | 2 +-
web_src/css/helpers.css | 22 --------------------
web_src/js/components/DashboardRepoList.vue | 9 ++++----
web_src/js/components/DiffCommitSelector.vue | 14 ++++++++-----
web_src/js/components/RepoCodeFrequency.vue | 2 +-
web_src/js/components/RepoContributors.vue | 2 +-
web_src/js/components/RepoRecentCommits.vue | 2 +-
web_src/js/features/repo-diff-commit.js | 2 +-
17 files changed, 43 insertions(+), 48 deletions(-)
diff --git a/tailwind.config.js b/tailwind.config.js
index d783268bd7..e2e8f23656 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -55,5 +55,16 @@ export default {
current: 'currentcolor',
transparent: 'transparent',
},
+ borderRadius: {
+ 'none': '0',
+ 'sm': '2px',
+ 'DEFAULT': 'var(--border-radius)', // 4px
+ 'md': 'var(--border-radius-medium)', // 6px
+ 'lg': '8px',
+ 'xl': '12px',
+ '2xl': '16px',
+ '3xl': '24px',
+ 'full': 'var(--border-radius-circle)', // 50%
+ },
},
};
diff --git a/templates/devtest/flex-list.tmpl b/templates/devtest/flex-list.tmpl
index c8584c110b..0c7b27cd84 100644
--- a/templates/devtest/flex-list.tmpl
+++ b/templates/devtest/flex-list.tmpl
@@ -104,7 +104,7 @@
</div>
<h1>If parent provides the padding/margin space:</h1>
- <div class="gt-border-secondary gt-py-4">
+ <div class="tw-border tw-border-secondary gt-py-4">
<div class="flex-list flex-space-fitted">
<div class="flex-item">item 1 (no padding top)</div>
<div class="flex-item">item 2 (no padding bottom)</div>
diff --git a/templates/devtest/gitea-ui.tmpl b/templates/devtest/gitea-ui.tmpl
index 0b1f982ee4..9ef0aa675a 100644
--- a/templates/devtest/gitea-ui.tmpl
+++ b/templates/devtest/gitea-ui.tmpl
@@ -95,8 +95,8 @@
<div>
<h1>Loading</h1>
- <div class="is-loading small-loading-icon gt-border-secondary gt-py-2"><span>loading ...</span></div>
- <div class="is-loading gt-border-secondary gt-py-4">
+ <div class="is-loading small-loading-icon tw-border tw-border-secondary gt-py-2"><span>loading ...</span></div>
+ <div class="is-loading tw-border tw-border-secondary gt-py-4">
<p>loading ...</p>
<p>loading ...</p>
<p>loading ...</p>
diff --git a/templates/org/header.tmpl b/templates/org/header.tmpl
index 943557b1ca..1a55101c2e 100644
--- a/templates/org/header.tmpl
+++ b/templates/org/header.tmpl
@@ -7,7 +7,7 @@
{{if .Org.Visibility.IsLimited}}<span class="ui large basic horizontal label">{{ctx.Locale.Tr "org.settings.visibility.limited_shortname"}}</span>{{end}}
{{if .Org.Visibility.IsPrivate}}<span class="ui large basic horizontal label">{{ctx.Locale.Tr "org.settings.visibility.private_shortname"}}</span>{{end}}
</span>
- <span class="gt-df gt-ac gt-gap-2 gt-ml-auto gt-font-16 tw-whitespace-nowrap">
+ <span class="gt-df gt-ac gt-gap-2 tw-ml-auto gt-font-16 tw-whitespace-nowrap">
{{if .EnableFeed}}
<a class="ui basic label button gt-mr-0" href="{{.Org.HomeLink}}.rss" data-tooltip-content="{{ctx.Locale.Tr "rss_feed"}}">
{{svg "octicon-rss" 24}}
diff --git a/templates/repo/issue/filter_list.tmpl b/templates/repo/issue/filter_list.tmpl
index f9f635f7cd..c95ce6b2b8 100644
--- a/templates/repo/issue/filter_list.tmpl
+++ b/templates/repo/issue/filter_list.tmpl
@@ -43,7 +43,7 @@
{{end}}
{{end}}
{{RenderLabel $.Context .}}
- <p class="gt-ml-auto">{{template "repo/issue/labels/label_archived" .}}</p>
+ <p class="tw-ml-auto">{{template "repo/issue/labels/label_archived" .}}</p>
</a>
{{end}}
</div>
@@ -108,7 +108,7 @@
</div>
{{range .OpenProjects}}
<a rel="nofollow" class="{{if $.ProjectID}}{{if eq $.ProjectID .ID}}active selected{{end}}{{end}} item gt-df" href="{{$.Link}}?type={{$.ViewType}}&sort={{$.SortType}}&state={{$.State}}&labels={{$.SelectLabels}}&milestone={{$.MilestoneID}}&project={{.ID}}&assignee={{$.AssigneeID}}&poster={{$.PosterID}}{{if $.ShowArchivedLabels}}&archived=true{{end}}">
- {{svg .IconName 18 "gt-mr-3 gt-shrink-0"}}<span class="gt-ellipsis">{{.Title}}</span>
+ {{svg .IconName 18 "gt-mr-3 tw-shrink-0"}}<span class="gt-ellipsis">{{.Title}}</span>
</a>
{{end}}
{{end}}
diff --git a/templates/repo/issue/labels/label_list.tmpl b/templates/repo/issue/labels/label_list.tmpl
index 9b0061b60e..284c0d3bf6 100644
--- a/templates/repo/issue/labels/label_list.tmpl
+++ b/templates/repo/issue/labels/label_list.tmpl
@@ -44,7 +44,7 @@
</div>
<div class="label-operation gt-df">
{{template "repo/issue/labels/label_archived" .}}
- <div class="gt-df gt-ml-auto">
+ <div class="gt-df tw-ml-auto">
{{if and (not $.PageIsOrgSettingsLabels) (not $.Repository.IsArchived) (or $.CanWriteIssues $.CanWritePulls)}}
<a class="edit-label-button" href="#" data-id="{{.ID}}" data-title="{{.Name}}" {{if .Exclusive}}data-exclusive{{end}} {{if gt .ArchivedUnix 0}}data-is-archived{{end}} data-num-issues="{{.NumIssues}}" data-description="{{.Description}}" data-color={{.Color}}>{{svg "octicon-pencil"}} {{ctx.Locale.Tr "repo.issues.label_edit"}}</a>
<a class="delete-button" href="#" data-url="{{$.Link}}/delete" data-id="{{.ID}}">{{svg "octicon-trash"}} {{ctx.Locale.Tr "repo.issues.label_delete"}}</a>
diff --git a/templates/repo/pulls/tab_menu.tmpl b/templates/repo/pulls/tab_menu.tmpl
index 10bdfdb3de..340b1bb397 100644
--- a/templates/repo/pulls/tab_menu.tmpl
+++ b/templates/repo/pulls/tab_menu.tmpl
@@ -15,7 +15,7 @@
{{ctx.Locale.Tr "repo.pulls.tab_files"}}
<span class="ui small label">{{if .NumFiles}}{{.NumFiles}}{{else}}-{{end}}</span>
</a>
- <span class="item gt-ml-auto gt-pr-0 gt-font-bold gt-df gt-ac gt-gap-3">
+ <span class="item tw-ml-auto gt-pr-0 gt-font-bold gt-df gt-ac gt-gap-3">
<span><span class="text green">{{if .Diff.TotalAddition}}+{{.Diff.TotalAddition}}{{end}}</span> <span class="text red">{{if .Diff.TotalDeletion}}-{{.Diff.TotalDeletion}}{{end}}</span></span>
<span class="diff-stats-bar">
<div class="diff-stats-add-bar" style="width: {{Eval 100 "*" .Diff.TotalAddition "/" "(" .Diff.TotalAddition "+" .Diff.TotalDeletion "+" 0.0 ")"}}%"></div>
diff --git a/templates/repo/settings/options.tmpl b/templates/repo/settings/options.tmpl
index 99d75b8a84..a2947701a0 100644
--- a/templates/repo/settings/options.tmpl
+++ b/templates/repo/settings/options.tmpl
@@ -116,13 +116,12 @@
<th></th>
</tr>
</thead>
- {{end}}
{{if $modifyBrokenPullMirror}}
{{/* even if a repo is a pull mirror (IsMirror=true), the PullMirror might still be nil if the mirror migration is broken */}}
<tbody>
<tr>
<td colspan="4">
- <div class="text red gt-py-4 gt-border-secondary-bottom">{{ctx.Locale.Tr "repo.settings.mirror_settings.direction.pull"}}: {{ctx.Locale.Tr "error.occurred"}}</div>
+ <div class="text red gt-py-4">{{ctx.Locale.Tr "repo.settings.mirror_settings.direction.pull"}}: {{ctx.Locale.Tr "error.occurred"}}</div>
</td>
</tr>
</tbody>
@@ -201,8 +200,9 @@
</td>
</tr>
</tbody>
+ {{end}}{{/* end if: $modifyBrokenPullMirror / $isWorkingPullMirror */}}
</table>
- {{end}}{{/* end if: IsMirror */}}
+ {{end}}{{/* end if .Repository.IsMirror */}}
<table class="ui table">
<thead>
diff --git a/templates/status/500.tmpl b/templates/status/500.tmpl
index 98e3044db2..043ca7523b 100644
--- a/templates/status/500.tmpl
+++ b/templates/status/500.tmpl
@@ -16,7 +16,7 @@
</head>
<body>
<div class="full height">
- <nav class="ui secondary menu gt-border-secondary-bottom">
+ <nav class="ui secondary menu">
<div class="ui container gt-df">
<div class="item gt-f1">
<a href="{{AppSubUrl}}/" aria-label="{{ctx.Locale.Tr "home"}}">
@@ -28,6 +28,7 @@
</div>
</div>
</nav>
+ <div class="divider gt-my-0"></div>
<div role="main" class="page-content status-page-500">
<div class="ui container" >
<style> .ui.message.flash-message { text-align: left; } </style>
diff --git a/templates/user/dashboard/navbar.tmpl b/templates/user/dashboard/navbar.tmpl
index af07897e2c..3e9442d6fc 100644
--- a/templates/user/dashboard/navbar.tmpl
+++ b/templates/user/dashboard/navbar.tmpl
@@ -78,7 +78,7 @@
{{if .ContextUser.IsOrganization}}
<div class="right menu">
- <a class="{{if .PageIsNews}}active {{end}}item gt-ml-auto" href="{{.ContextUser.DashboardLink}}{{if .Team}}/{{PathEscape .Team.Name}}{{end}}">
+ <a class="{{if .PageIsNews}}active {{end}}item tw-ml-auto" href="{{.ContextUser.DashboardLink}}{{if .Team}}/{{PathEscape .Team.Name}}{{end}}">
{{svg "octicon-rss"}} {{ctx.Locale.Tr "activities"}}
</a>
{{if not .UnitIssuesGlobalDisabled}}
diff --git a/web_src/css/helpers.css b/web_src/css/helpers.css
index 860722823a..6fc84d743c 100644
--- a/web_src/css/helpers.css
+++ b/web_src/css/helpers.css
@@ -52,18 +52,6 @@ Gitea's private styles use `g-` prefix.
.gt-font-semibold { font-weight: var(--font-weight-semibold) !important; }
.gt-font-bold { font-weight: var(--font-weight-bold) !important; }
-.gt-rounded { border-radius: var(--border-radius) !important; }
-.gt-rounded-top { border-radius: var(--border-radius) var(--border-radius) 0 0 !important; }
-.gt-rounded-bottom { border-radius: 0 0 var(--border-radius) var(--border-radius) !important; }
-.gt-rounded-left { border-radius: var(--border-radius) 0 0 var(--border-radius) !important; }
-.gt-rounded-right { border-radius: 0 var(--border-radius) var(--border-radius) 0 !important; }
-
-.gt-border-secondary { border: 1px solid var(--color-secondary) !important; }
-.gt-border-secondary-top { border-top: 1px solid var(--color-secondary) !important; }
-.gt-border-secondary-bottom { border-bottom: 1px solid var(--color-secondary) !important; }
-.gt-border-secondary-left { border-left: 1px solid var(--color-secondary) !important; }
-.gt-border-secondary-right { border-right: 1px solid var(--color-secondary) !important; }
-
.interact-fg { color: inherit !important; }
.interact-fg:hover { color: var(--color-primary) !important; }
.interact-fg:active { color: var(--color-primary-active) !important; }
@@ -121,14 +109,6 @@ Gitea's private styles use `g-` prefix.
.gt-my-4 { margin-top: 1rem !important; margin-bottom: 1rem !important; }
.gt-my-5 { margin-top: 2rem !important; margin-bottom: 2rem !important; }
-.gt-m-auto { margin: auto !important; }
-.gt-mx-auto { margin-left: auto !important; margin-right: auto !important; }
-.gt-my-auto { margin-top: auto !important; margin-bottom: auto !important; }
-.gt-mt-auto { margin-top: auto !important; }
-.gt-mr-auto { margin-right: auto !important; }
-.gt-mb-auto { margin-bottom: auto !important; }
-.gt-ml-auto { margin-left: auto !important; }
-
.gt-p-0 { padding: 0 !important; }
.gt-p-1 { padding: .125rem !important; }
.gt-p-2 { padding: .25rem !important; }
@@ -199,8 +179,6 @@ Gitea's private styles use `g-` prefix.
.gt-gap-y-4 { row-gap: 1rem !important; }
.gt-gap-y-5 { row-gap: 2rem !important; }
-.gt-shrink-0 { flex-shrink: 0 !important; }
-
.gt-font-12 { font-size: 12px !important }
.gt-font-13 { font-size: 13px !important }
.gt-font-14 { font-size: 14px !important }
diff --git a/web_src/js/components/DashboardRepoList.vue b/web_src/js/components/DashboardRepoList.vue
index 6c1d031640..3b3402f458 100644
--- a/web_src/js/components/DashboardRepoList.vue
+++ b/web_src/js/components/DashboardRepoList.vue
@@ -405,7 +405,7 @@ export default sfc; // activate the IDE's Vue plugin
</div>
</overflow-menu>
</div>
- <div v-if="repos.length" class="ui attached table segment gt-rounded-bottom">
+ <div v-if="repos.length" class="ui attached table segment tw-rounded-b">
<ul class="repo-owner-name-list">
<li class="gt-df gt-ac gt-py-3" v-for="repo, index in repos" :class="{'active': index === activeIndex}" :key="repo.id">
<a class="repo-list-link muted" :href="repo.link">
@@ -421,8 +421,9 @@ export default sfc; // activate the IDE's Vue plugin
</a>
</li>
</ul>
- <div v-if="showMoreReposLink" class="center gt-py-3 gt-border-secondary-top">
- <div class="ui borderless pagination menu narrow">
+ <div v-if="showMoreReposLink" class="tw-text-center">
+ <div class="divider gt-my-0"/>
+ <div class="ui borderless pagination menu narrow gt-my-3">
<a
class="item navigation gt-py-2" :class="{'disabled': page === 1}"
@click="changePage(1)" :title="textFirstPage"
@@ -453,7 +454,7 @@ export default sfc; // activate the IDE's Vue plugin
</div>
</div>
<div v-if="!isOrganization" v-show="tab === 'organizations'" class="ui tab active list dashboard-orgs">
- <div v-if="organizations.length" class="ui attached table segment gt-rounded">
+ <div v-if="organizations.length" class="ui attached table segment tw-rounded-b">
<ul class="repo-owner-name-list">
<li class="gt-df gt-ac gt-py-3" v-for="org in organizations" :key="org.name">
<a class="repo-list-link muted" :href="subUrl + '/' + encodeURIComponent(org.name)">
diff --git a/web_src/js/components/DiffCommitSelector.vue b/web_src/js/components/DiffCommitSelector.vue
index 780ba22f0c..b465127aca 100644
--- a/web_src/js/components/DiffCommitSelector.vue
+++ b/web_src/js/components/DiffCommitSelector.vue
@@ -204,7 +204,7 @@ export default {
</button>
<div class="menu left transition" id="diff-commit-selector-menu" :class="{visible: menuVisible}" v-show="menuVisible" v-cloak :aria-expanded="menuVisible ? 'true': 'false'">
<div class="loading-indicator is-loading" v-if="isLoading"/>
- <div v-if="!isLoading" class="vertical item gt-df gt-fc gt-gap-2" id="diff-commit-list-show-all" role="menuitem" @keydown.enter="showAllChanges()" @click="showAllChanges()">
+ <div v-if="!isLoading" class="vertical item" id="diff-commit-list-show-all" role="menuitem" @keydown.enter="showAllChanges()" @click="showAllChanges()">
<div class="gt-ellipsis">
{{ locale.show_all_commits }}
</div>
@@ -215,7 +215,7 @@ export default {
<!-- only show the show changes since last review if there is a review AND we are commits ahead of the last review -->
<div
v-if="lastReviewCommitSha != null" role="menuitem"
- class="vertical item gt-df gt-fc gt-gap-2 gt-border-secondary-top"
+ class="vertical item"
:class="{disabled: commitsSinceLastReview === 0}"
@keydown.enter="changesSinceLastReviewClick()"
@click="changesSinceLastReviewClick()"
@@ -227,10 +227,10 @@ export default {
{{ commitsSinceLastReview }} commits
</div>
</div>
- <span v-if="!isLoading" class="info gt-border-secondary-top text light-2">{{ locale.select_commit_hold_shift_for_range }}</span>
+ <span v-if="!isLoading" class="info text light-2">{{ locale.select_commit_hold_shift_for_range }}</span>
<template v-for="commit in commits" :key="commit.id">
<div
- class="vertical item gt-df gt-gap-2 gt-border-secondary-top" role="menuitem"
+ class="vertical item" role="menuitem"
:class="{selection: commit.selected, hovered: commit.hovered}"
@keydown.enter.exact="commitClicked(commit.id)"
@keydown.enter.shift.exact="commitClickedShift(commit)"
@@ -285,10 +285,14 @@ export default {
width: 350px;
}
- #diff-commit-selector-menu .item {
+ #diff-commit-selector-menu .item,
+ #diff-commit-selector-menu .info {
+ display: flex !important;
flex-direction: row;
line-height: 1.4;
padding: 7px 14px !important;
+ border-top: 1px solid var(--color-secondary) !important;
+ gap: 0.25em;
}
#diff-commit-selector-menu .item:focus {
diff --git a/web_src/js/components/RepoCodeFrequency.vue b/web_src/js/components/RepoCodeFrequency.vue
index ad607a041a..c55bbff9cd 100644
--- a/web_src/js/components/RepoCodeFrequency.vue
+++ b/web_src/js/components/RepoCodeFrequency.vue
@@ -148,7 +148,7 @@ export default {
{{ isLoading ? locale.loadingTitle : errorText ? locale.loadingTitleFailed: `Code frequency over the history of ${repoLink.slice(1)}` }}
</div>
<div class="gt-df ui segment main-graph">
- <div v-if="isLoading || errorText !== ''" class="gt-tc gt-m-auto">
+ <div v-if="isLoading || errorText !== ''" class="gt-tc tw-m-auto">
<div v-if="isLoading">
<SvgIcon name="octicon-sync" class="gt-mr-3 job-status-rotate"/>
{{ locale.loadingInfo }}
diff --git a/web_src/js/components/RepoContributors.vue b/web_src/js/components/RepoContributors.vue
index 22c247ae32..6093c762cb 100644
--- a/web_src/js/components/RepoContributors.vue
+++ b/web_src/js/components/RepoContributors.vue
@@ -353,7 +353,7 @@ export default {
</div>
</div>
<div class="gt-df ui segment main-graph">
- <div v-if="isLoading || errorText !== ''" class="gt-tc gt-m-auto">
+ <div v-if="isLoading || errorText !== ''" class="gt-tc tw-m-auto">
<div v-if="isLoading">
<SvgIcon name="octicon-sync" class="gt-mr-3 job-status-rotate"/>
{{ locale.loadingInfo }}
diff --git a/web_src/js/components/RepoRecentCommits.vue b/web_src/js/components/RepoRecentCommits.vue
index 77697cd413..c1fd40f506 100644
--- a/web_src/js/components/RepoRecentCommits.vue
+++ b/web_src/js/components/RepoRecentCommits.vue
@@ -125,7 +125,7 @@ export default {
{{ isLoading ? locale.loadingTitle : errorText ? locale.loadingTitleFailed: "Number of commits in the past year" }}
</div>
<div class="gt-df ui segment main-graph">
- <div v-if="isLoading || errorText !== ''" class="gt-tc gt-m-auto">
+ <div v-if="isLoading || errorText !== ''" class="gt-tc tw-m-auto">
<div v-if="isLoading">
<SvgIcon name="octicon-sync" class="gt-mr-3 job-status-rotate"/>
{{ locale.loadingInfo }}
diff --git a/web_src/js/features/repo-diff-commit.js b/web_src/js/features/repo-diff-commit.js
index 3d4f0f677a..f0466f9320 100644
--- a/web_src/js/features/repo-diff-commit.js
+++ b/web_src/js/features/repo-diff-commit.js
@@ -39,7 +39,7 @@ function addLink(parent, href, text, tooltip) {
link.href = href;
link.textContent = text;
if (tooltip) {
- link.classList.add('gt-border-secondary', 'gt-rounded');
+ link.classList.add('tw-border', 'tw-border-secondary', 'tw-rounded');
link.setAttribute('data-tooltip-content', tooltip);
}
parent.append(link);