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:
parent
0c55506b40
commit
f88ad5424f
123 changed files with 308 additions and 322 deletions
|
@ -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"/>
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue