mirror of
				https://github.com/go-gitea/gitea
				synced 2025-10-31 03:18:24 +00:00 
			
		
		
		
	Replace 10 more gt- classes with tw- (#29945)
Likely the biggest change of the tailwind refactors. Only thing of note is that `tw-flex-1` resolves to `flex: 1 1 0%` while our `gt-f1` was `flex: 1 1 0`, I don't think it will make any difference. Commands I've ran: ```sh perl -p -i -e 's#gt-vm#tw-align-middle#g' web_src/js/**/* templates/**/* models/**/* perl -p -i -e 's#gt-fw#tw-flex-wrap#g' web_src/js/**/* templates/**/* models/**/* perl -p -i -e 's#gt-f1#tw-flex-1#g' web_src/js/**/* templates/**/* models/**/* perl -p -i -e 's#gt-fc#tw-flex-col#g' web_src/js/**/* templates/**/* models/**/* perl -p -i -e 's#gt-sb#tw-justify-between#g' web_src/js/**/* templates/**/* models/**/* perl -p -i -e 's#gt-je#tw-justify-end#g' web_src/js/**/* templates/**/* models/**/* perl -p -i -e 's#gt-jc#tw-justify-center#g' web_src/js/**/* templates/**/* models/**/* perl -p -i -e 's#gt-ac#tw-content-center#g' web_src/js/**/* templates/**/* models/**/* tests/**/* perl -p -i -e 's#gt-df#tw-flex#g' web_src/js/**/* templates/**/* models/**/* tests/**/* perl -p -i -e 's#gt-dib#tw-inline-block#g' web_src/js/**/* templates/**/* models/**/* tests/**/* Co-authored-by: wxiaoguang <wxiaoguang@gmail.com>
This commit is contained in:
		| @@ -28,7 +28,7 @@ export default { | ||||
| }; | ||||
| </script> | ||||
| <template> | ||||
|   <span class="gt-df gt-ac" :data-tooltip-content="localeStatus" v-if="status"> | ||||
|   <span class="tw-flex tw-content-center" :data-tooltip-content="localeStatus" v-if="status"> | ||||
|     <SvgIcon name="octicon-check-circle-fill" class="text green" :size="size" :class-name="className" v-if="status === 'success'"/> | ||||
|     <SvgIcon name="octicon-skip" class="text grey" :size="size" :class-name="className" v-else-if="status === 'skipped'"/> | ||||
|     <SvgIcon name="octicon-clock" class="text yellow" :size="size" :class-name="className" v-else-if="status === 'waiting'"/> | ||||
|   | ||||
| @@ -345,12 +345,12 @@ export default sfc; // activate the IDE's Vue plugin | ||||
|       <a :class="{item: true, active: tab === 'organizations'}" @click="changeTab('organizations')">{{ textOrganization }}</a> | ||||
|     </div> | ||||
|     <div v-show="tab === 'repos'" class="ui tab active list dashboard-repos"> | ||||
|       <h4 class="ui top attached header gt-df gt-ac"> | ||||
|         <div class="gt-f1 gt-df gt-ac"> | ||||
|       <h4 class="ui top attached header tw-flex tw-content-center"> | ||||
|         <div class="tw-flex-1 tw-flex tw-content-center"> | ||||
|           {{ textMyRepos }} | ||||
|           <span class="ui grey label gt-ml-3">{{ reposTotalCount }}</span> | ||||
|         </div> | ||||
|         <a class="gt-df gt-ac muted" :href="subUrl + '/repo/create' + (isOrganization ? '?org=' + organizationId : '')" :data-tooltip-content="textNewRepo"> | ||||
|         <a class="tw-flex tw-content-center muted" :href="subUrl + '/repo/create' + (isOrganization ? '?org=' + organizationId : '')" :data-tooltip-content="textNewRepo"> | ||||
|           <svg-icon name="octicon-plus"/> | ||||
|         </a> | ||||
|       </h4> | ||||
| @@ -411,7 +411,7 @@ export default sfc; // activate the IDE's Vue plugin | ||||
|       </div> | ||||
|       <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"> | ||||
|           <li class="tw-flex tw-content-center 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"> | ||||
|               <svg-icon :name="repoIcon(repo)" :size="16" class-name="repo-list-icon"/> | ||||
|               <div class="text truncate">{{ repo.full_name }}</div> | ||||
| @@ -419,7 +419,7 @@ export default sfc; // activate the IDE's Vue plugin | ||||
|                 <svg-icon name="octicon-archive" :size="16"/> | ||||
|               </div> | ||||
|             </a> | ||||
|             <a class="gt-df gt-ac" v-if="repo.latest_commit_status_state" :href="repo.latest_commit_status_state_link" :data-tooltip-content="repo.locale_latest_commit_status_state"> | ||||
|             <a class="tw-flex tw-content-center" v-if="repo.latest_commit_status_state" :href="repo.latest_commit_status_state_link" :data-tooltip-content="repo.locale_latest_commit_status_state"> | ||||
|               <!-- the commit status icon logic is taken from templates/repo/commit_status.tmpl --> | ||||
|               <svg-icon :name="statusIcon(repo.latest_commit_status_state)" :class-name="'gt-ml-3 commit-status icon text ' + statusColor(repo.latest_commit_status_state)" :size="16"/> | ||||
|             </a> | ||||
| @@ -458,18 +458,18 @@ 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"> | ||||
|       <h4 class="ui top attached header gt-df gt-ac"> | ||||
|         <div class="gt-f1 gt-df gt-ac"> | ||||
|       <h4 class="ui top attached header tw-flex tw-content-center"> | ||||
|         <div class="tw-flex-1 tw-flex tw-content-center"> | ||||
|           {{ textMyOrgs }} | ||||
|           <span class="ui grey label gt-ml-3">{{ organizationsTotalCount }}</span> | ||||
|         </div> | ||||
|         <a class="gt-df gt-ac muted" v-if="canCreateOrganization" :href="subUrl + '/org/create'" :data-tooltip-content="textNewOrg"> | ||||
|         <a class="tw-flex tw-content-center muted" v-if="canCreateOrganization" :href="subUrl + '/org/create'" :data-tooltip-content="textNewOrg"> | ||||
|           <svg-icon name="octicon-plus"/> | ||||
|         </a> | ||||
|       </h4> | ||||
|       <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"> | ||||
|           <li class="tw-flex tw-content-center gt-py-3" v-for="org in organizations" :key="org.name"> | ||||
|             <a class="repo-list-link muted" :href="subUrl + '/' + encodeURIComponent(org.name)"> | ||||
|               <svg-icon name="octicon-organization" :size="16" class-name="repo-list-icon"/> | ||||
|               <div class="text truncate">{{ org.name }}</div> | ||||
| @@ -479,7 +479,7 @@ export default sfc; // activate the IDE's Vue plugin | ||||
|                 </span> | ||||
|               </div> | ||||
|             </a> | ||||
|             <div class="text light grey gt-df gt-ac gt-ml-3"> | ||||
|             <div class="text light grey tw-flex tw-content-center gt-ml-3"> | ||||
|               {{ org.num_repos }} | ||||
|               <svg-icon name="octicon-repo" :size="16" class-name="gt-ml-2 gt-mt-1"/> | ||||
|             </div> | ||||
|   | ||||
| @@ -240,7 +240,7 @@ export default { | ||||
|           @click.meta.exact="commitClicked(commit.id, true)" | ||||
|           @click.shift.exact.stop.prevent="commitClickedShift(commit)" | ||||
|         > | ||||
|           <div class="gt-f1 gt-df gt-fc gt-gap-2"> | ||||
|           <div class="tw-flex-1 tw-flex tw-flex-col gt-gap-2"> | ||||
|             <div class="gt-ellipsis commit-list-summary"> | ||||
|               {{ commit.summary }} | ||||
|             </div> | ||||
|   | ||||
| @@ -38,7 +38,7 @@ export default { | ||||
| <template> | ||||
|   <ol class="diff-stats gt-m-0" ref="root" v-if="store.fileListIsVisible"> | ||||
|     <li v-for="file in store.files" :key="file.NameHash"> | ||||
|       <div class="gt-font-semibold gt-df gt-ac pull-right"> | ||||
|       <div class="gt-font-semibold tw-flex tw-content-center pull-right"> | ||||
|         <span v-if="file.IsBin" class="gt-ml-1 gt-mr-3">{{ store.binaryFileMessage }}</span> | ||||
|         {{ file.IsBin ? '' : file.Addition + file.Deletion }} | ||||
|         <span v-if="!file.IsBin" class="diff-stats-bar gt-mx-3" :data-tooltip-content="store.statisticsMessage.replace('%d', (file.Addition + file.Deletion)).replace('%d', file.Addition).replace('%d', file.Deletion)"> | ||||
| @@ -50,7 +50,7 @@ export default { | ||||
|       <a class="file gt-mono" :href="'#diff-' + file.NameHash">{{ file.Name }}</a> | ||||
|     </li> | ||||
|     <li v-if="store.isIncomplete" class="gt-pt-2"> | ||||
|       <span class="file gt-df gt-ac gt-sb">{{ store.tooManyFilesMessage }} | ||||
|       <span class="file tw-flex tw-content-center tw-justify-between">{{ store.tooManyFilesMessage }} | ||||
|         <a :class="['ui', 'basic', 'tiny', 'button', store.isLoadingNewData ? 'disabled' : '']" @click.stop="loadMoreData">{{ store.showMoreMessage }}</a> | ||||
|       </span> | ||||
|     </li> | ||||
|   | ||||
| @@ -37,7 +37,7 @@ export default { | ||||
|   > | ||||
|     <!-- file --> | ||||
|     <SvgIcon name="octicon-file"/> | ||||
|     <span class="gt-ellipsis gt-f1">{{ item.name }}</span> | ||||
|     <span class="gt-ellipsis tw-flex-1">{{ item.name }}</span> | ||||
|     <SvgIcon :name="getIconForDiffType(item.file.Type).name" :class="getIconForDiffType(item.file.Type).classes"/> | ||||
|   </a> | ||||
|   <div v-else class="item-directory" :title="item.name" @click.stop="collapsed = !collapsed"> | ||||
|   | ||||
| @@ -136,7 +136,7 @@ export default { | ||||
|       </div> | ||||
|     </form> | ||||
|  | ||||
|     <div v-if="!showActionForm" class="gt-df"> | ||||
|     <div v-if="!showActionForm" class="tw-flex"> | ||||
|       <!-- the merge button --> | ||||
|       <div class="ui buttons merge-button" :class="[mergeForm.emptyCommit ? 'grey' : mergeForm.allOverridableChecksOk ? 'primary' : 'red']" @click="toggleActionForm(true)"> | ||||
|         <button class="ui button"> | ||||
|   | ||||
| @@ -245,8 +245,8 @@ export default sfc; // activate IDE's Vue plugin | ||||
| </script> | ||||
| <template> | ||||
|   <div class="ui dropdown custom"> | ||||
|     <button class="branch-dropdown-button gt-ellipsis ui basic small compact button gt-df gt-m-0" @click="menuVisible = !menuVisible" @keyup.enter="menuVisible = !menuVisible"> | ||||
|       <span class="text gt-df gt-ac gt-mr-2"> | ||||
|     <button class="branch-dropdown-button gt-ellipsis ui basic small compact button tw-flex gt-m-0" @click="menuVisible = !menuVisible" @keyup.enter="menuVisible = !menuVisible"> | ||||
|       <span class="text tw-flex tw-content-center gt-mr-2"> | ||||
|         <template v-if="release">{{ textReleaseCompare }}</template> | ||||
|         <template v-else> | ||||
|           <svg-icon v-if="isViewTag" name="octicon-tag"/> | ||||
|   | ||||
| @@ -144,10 +144,10 @@ export default { | ||||
| </script> | ||||
| <template> | ||||
|   <div> | ||||
|     <div class="ui header gt-df gt-ac gt-sb"> | ||||
|     <div class="ui header tw-flex tw-content-center tw-justify-between"> | ||||
|       {{ 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 class="tw-flex ui segment main-graph"> | ||||
|       <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"/> | ||||
|   | ||||
| @@ -303,7 +303,7 @@ export default { | ||||
| </script> | ||||
| <template> | ||||
|   <div> | ||||
|     <div class="ui header gt-df gt-ac gt-sb"> | ||||
|     <div class="ui header tw-flex tw-content-center tw-justify-between"> | ||||
|       <div> | ||||
|         <relative-time | ||||
|           v-if="xAxisMin > 0" | ||||
| @@ -352,7 +352,7 @@ export default { | ||||
|         </div> | ||||
|       </div> | ||||
|     </div> | ||||
|     <div class="gt-df ui segment main-graph"> | ||||
|     <div class="tw-flex ui segment main-graph"> | ||||
|       <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"/> | ||||
| @@ -374,17 +374,17 @@ export default { | ||||
|         :key="index" | ||||
|         v-memo="[sortedContributors, type]" | ||||
|       > | ||||
|         <div class="ui top attached header gt-df gt-f1"> | ||||
|         <div class="ui top attached header tw-flex tw-flex-1"> | ||||
|           <b class="ui right">#{{ index + 1 }}</b> | ||||
|           <a :href="contributor.home_link"> | ||||
|             <img class="ui avatar gt-vm" height="40" width="40" :src="contributor.avatar_link"> | ||||
|             <img class="ui avatar tw-align-middle" height="40" width="40" :src="contributor.avatar_link"> | ||||
|           </a> | ||||
|           <div class="gt-ml-3"> | ||||
|             <a v-if="contributor.home_link !== ''" :href="contributor.home_link"><h4>{{ contributor.name }}</h4></a> | ||||
|             <h4 v-else class="contributor-name"> | ||||
|               {{ contributor.name }} | ||||
|             </h4> | ||||
|             <p class="gt-font-12 gt-df gt-gap-2"> | ||||
|             <p class="gt-font-12 tw-flex gt-gap-2"> | ||||
|               <strong v-if="contributor.total_commits">{{ contributor.total_commits.toLocaleString() }} {{ locale.contributionType.commits }}</strong> | ||||
|               <strong v-if="contributor.total_additions" class="text green">{{ contributor.total_additions.toLocaleString() }}++ </strong> | ||||
|               <strong v-if="contributor.total_deletions" class="text red"> | ||||
|   | ||||
| @@ -121,10 +121,10 @@ export default { | ||||
| </script> | ||||
| <template> | ||||
|   <div> | ||||
|     <div class="ui header gt-df gt-ac gt-sb"> | ||||
|     <div class="ui header tw-flex tw-content-center tw-justify-between"> | ||||
|       {{ isLoading ? locale.loadingTitle : errorText ? locale.loadingTitleFailed: "Number of commits in the past year" }} | ||||
|     </div> | ||||
|     <div class="gt-df ui segment main-graph"> | ||||
|     <div class="tw-flex ui segment main-graph"> | ||||
|       <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"/> | ||||
|   | ||||
| @@ -16,7 +16,7 @@ function showContentHistoryDetail(issueBaseUrl, commentId, historyId, itemTitleH | ||||
|   $dialog = $(` | ||||
| <div class="ui modal content-history-detail-dialog"> | ||||
|   ${svg('octicon-x', 16, 'close icon inside')} | ||||
|   <div class="header gt-df gt-ac gt-sb"> | ||||
|   <div class="header tw-flex tw-content-center tw-justify-between"> | ||||
|     <div>${itemTitleHtml}</div> | ||||
|     <div class="ui dropdown dialog-header-options gt-mr-5 gt-hidden"> | ||||
|       ${i18nTextOptions} | ||||
|   | ||||
| @@ -108,7 +108,7 @@ function initRepoIssueListAuthorDropdown() { | ||||
|         // the content is provided by backend IssuePosters handler | ||||
|         const processedResults = []; // to be used by dropdown to generate menu items | ||||
|         for (const item of resp.results) { | ||||
|           let html = `<img class="ui avatar gt-vm" src="${htmlEscape(item.avatar_link)}" aria-hidden="true" alt="" width="20" height="20"><span class="gt-ellipsis">${htmlEscape(item.username)}</span>`; | ||||
|           let html = `<img class="ui avatar tw-align-middle" src="${htmlEscape(item.avatar_link)}" aria-hidden="true" alt="" width="20" height="20"><span class="gt-ellipsis">${htmlEscape(item.username)}</span>`; | ||||
|           if (item.full_name) html += `<span class="search-fullname gt-ml-3">${htmlEscape(item.full_name)}</span>`; | ||||
|           processedResults.push({value: item.user_id, name: html}); | ||||
|         } | ||||
|   | ||||
		Reference in New Issue
	
	Block a user