Skip to content

Commit 749cfd5

Browse files
zjp-CNzjp-CN
authored
Merge pull request #161 from os-checker/diagnostics-header-center
chore(diagnostics): make number cells right aligned
2 parents 11eef13 + a5a8fec commit 749cfd5

File tree

4 files changed

+66
-63
lines changed

4 files changed

+66
-63
lines changed

‎os-checks/pages/diagnostics.vue‎

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@
22
import type { FetchError } from 'ofetch';
33
import type { TreeNode } from 'primevue/treenode';
44
import type { Columns, PassCountRepo, PassCountRepos } from '~/shared/types';
5+
import { rightCell } from '~/shared/styling';
56
67
useHead({ title: 'Diagnostics' });
78
@@ -120,7 +121,7 @@ const progressRatio = computed(() => {
120121
</div>
121122
</template>
122123

123-
<Column field="idx" header="序号" expander frozen style="min-width: 80px" />
124+
<Column field="idx" header="Idx" expander frozen style="min-width: 80px" />
124125

125126
<Column field="user" header="User" sortable frozen style="min-width: 160px" />
126127

@@ -135,9 +136,9 @@ const progressRatio = computed(() => {
135136

136137
<Column field="pkg" header="Package" frozen sortable style="min-width: 180px" />
137138

138-
<Column field="total_count" header="报告数量" sortable style="min-width: 120px; word-break: keep-all;" />
139+
<Column field="total_count" header="Total" sortable style="min-width: 120px;" :pt="rightCell" />
139140

140-
<Column v-for="col in selectedColumns" :field="col.field" :header="col.header" sortable
141+
<Column v-for="col in selectedColumns" :field="col.field" :header="col.header" sortable :pt="rightCell"
141142
style="min-width: 120px; word-break: keep-all;" />
142143

143144
</TreeTable>

‎os-checks/pages/index.vue‎

Lines changed: 18 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -49,12 +49,12 @@
4949
<Column frozen sortable field="pkg" header="Package" style="min-width: 200px;" />
5050

5151
<Column v-if="C.display('last_commit_time')" sortable field="last_commit_time"
52-
:header="C.name('last_commit_time')" :pt="ptColumnCenter" />
52+
:header="C.name('last_commit_time')" :pt="center" />
5353

54-
<Column v-if="C.display('version')" sortable field="version" :header="C.name('version')" :pt="ptColumnCenter" />
54+
<Column v-if="C.display('version')" sortable field="version" :header="C.name('version')" :pt="center" />
5555

5656
<Column v-if="C.display('release_count')" sortable field="release_count" :header="C.name('release_count')"
57-
:pt="ptColumnCenter">
57+
:pt="center">
5858
<template #body="{ data }">
5959
<NuxtLink :to="`https://crates.io/crates/${data.pkg}`" target="_blank" class="nav-link">
6060
{{ data.release_count }}
@@ -63,13 +63,13 @@
6363
</Column>
6464

6565
<Column v-if="C.display('last_release_time')" sortable field="last_release_time"
66-
:header="C.name('last_release_time')" style="min-width: 120px;" :pt="ptColumnCenter" />
66+
:header="C.name('last_release_time')" style="min-width: 120px;" :pt="center" />
6767

6868
<Column v-if="C.display('last_release_size')" sortable field="last_release_size"
69-
:header="C.name('last_release_size')" :pt="ptColumnRight" />
69+
:header="C.name('last_release_size')" :pt="right" />
7070

7171
<Column v-if="C.display('diag_total_count')" sortable field="diag_total_count"
72-
:header="C.name('diag_total_count')" :pt="ptColumnRight">
72+
:header="C.name('diag_total_count')" :pt="right">
7373
<template #body="{ data }">
7474
<NuxtLink :to="`/${data.user}/${data.repo}`" target="_blank" class="nav-link">
7575
{{ data.diag_total_count }}
@@ -78,25 +78,24 @@
7878
</Column>
7979

8080
<Column v-if="C.display('testcases')" sortable field="testcases" :header="C.name('testcases')"
81-
style="font-weight: bold" :pt="ptColumnRight">
81+
style="font-weight: bold" :pt="right">
8282
<template #body="{ data }">
8383
<span :style="{ color: data.testcases_color }">
8484
{{ data.testcases }}
8585
</span>
8686
</template>
8787
</Column>
8888

89-
<Column v-if="C.display('lib')" sortable field="lib" :header="C.name('lib')" :pt="ptColumnCenter" />
90-
<Column v-if="C.display('bin')" sortable field="bin" :header="C.name('bin')" :pt="ptColumnCenter" />
89+
<Column v-if="C.display('lib')" sortable field="lib" :header="C.name('lib')" :pt="center" />
90+
<Column v-if="C.display('bin')" sortable field="bin" :header="C.name('bin')" :pt="center" />
9191
<Column v-if="C.display('dependencies')" sortable field="dependencies" :header="C.name('dependencies')"
92-
:pt="ptColumnRight" />
92+
:pt="right" />
9393

94-
<Column v-if="C.display('tests')" sortable field="tests" :header="C.name('tests')" :pt="ptColumnRight" />
95-
<Column v-if="C.display('examples')" sortable field="examples" :header="C.name('examples')" :pt="ptColumnRight" />
96-
<Column v-if="C.display('benches')" sortable field="benches" :header="C.name('benches')" :pt="ptColumnRight" />
94+
<Column v-if="C.display('tests')" sortable field="tests" :header="C.name('tests')" :pt="right" />
95+
<Column v-if="C.display('examples')" sortable field="examples" :header="C.name('examples')" :pt="right" />
96+
<Column v-if="C.display('benches')" sortable field="benches" :header="C.name('benches')" :pt="right" />
9797

98-
<Column v-if="C.display('documentation')" field="documentation" :header="C.name('documentation')"
99-
:pt="ptColumnCenter">
98+
<Column v-if="C.display('documentation')" field="documentation" :header="C.name('documentation')" :pt="center">
10099
<template #body="{ data }">
101100
<NuxtLink v-if="data.documentation" :to="data.documentation" target="_blank" class="nav-link">
102101
link
@@ -105,7 +104,7 @@
105104
</template>
106105
</Column>
107106

108-
<Column v-if="C.display('latest_doc')" field="latest_doc" :header="C.name('latest_doc')" :pt="ptColumnCenter">
107+
<Column v-if="C.display('latest_doc')" field="latest_doc" :header="C.name('latest_doc')" :pt="center">
109108
<template #body="{ data }">
110109
<NuxtLink v-if="data.latest_doc" :to="data.latest_doc" target="_blank" class="nav-link">
111110
link
@@ -114,7 +113,7 @@
114113
</template>
115114
</Column>
116115

117-
<Column v-if="C.display('homepage')" field="homepage" :header="C.name('homepage')" :pt="ptColumnCenter">
116+
<Column v-if="C.display('homepage')" field="homepage" :header="C.name('homepage')" :pt="center">
118117
<template #body="{ data }">
119118
<NuxtLink v-if="data.homepage" :to="data.homepage" target="_blank" class="nav-link">
120119
link
@@ -145,7 +144,7 @@
145144
style="min-width: 280px;" />
146145

147146
<Column v-if="C.display('authors')" sortable field="authors" :header="C.name('authors')" style="min-width: 300px;"
148-
:pt="ptColumnCenter">
147+
:pt="center">
149148
<template #body="{ data: { authors } }">
150149
<div v-for="tag of authors">
151150
<Tag severity="info" :value="tag" style="margin-bottom: 5px;"></Tag>
@@ -235,22 +234,13 @@
235234
import type { Pkg, PkgInfo, Test } from '~/shared/info';
236235
import { unique_field, unique_field_bool, InfoCols } from '~/shared/info';
237236
import { formatBytes } from '~/shared/columns-select';
237+
import { center, right } from '~/shared/styling';
238238
import { FilterMatchMode } from '@primevue/core/api';
239239
import type { DataTableSortMeta } from 'primevue/datatable';
240240
241241
const { color, viewportHeight } = storeToRefs(useStyleStore());
242242
const tableHeight = computed(() => `${Math.round(viewportHeight.value * 0.8)}px`);
243243
244-
// styling
245-
const ptColumnCenter = ref({
246-
columnHeaderContent: { style: { "justify-content": "center" } },
247-
bodyCell: { style: { "text-align": "center" } }
248-
});
249-
const ptColumnRight = ref({
250-
columnHeaderContent: { style: { "justify-content": "right" } },
251-
bodyCell: { style: { "text-align": "right" } }
252-
});
253-
254244
const summaries = ref<PkgInfo[]>([]);
255245
256246
githubFetch<PkgInfo[]>({

‎os-checks/pages/repos.vue‎

Lines changed: 18 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -37,9 +37,9 @@
3737
</template>
3838
</Column>
3939

40-
<Column v-if="C.display('license')" sortable field="license" :header="C.name('license')" :pt="ptColumnCenter" />
40+
<Column v-if="C.display('license')" sortable field="license" :header="C.name('license')" :pt="center" />
4141

42-
<Column v-if="C.display('homepage')" sortable field="homepage" :header="C.name('homepage')" :pt="ptColumnCenter">
42+
<Column v-if="C.display('homepage')" sortable field="homepage" :header="C.name('homepage')" :pt="center">
4343
<template #body="{ data }">
4444
<NuxtLink v-if="data.homepage" :to="data.homepage" target="_blank" class="nav-link">
4545
<!-- <Button icon="pi pi-external-link" link /> a bug when scrolling -->
@@ -49,7 +49,7 @@
4949
</Column>
5050

5151
<Column v-if="C.display('open_issues_count')" sortable field="open_issues_count"
52-
:header="C.name('open_issues_count')" :pt="ptColumnCenter">
52+
:header="C.name('open_issues_count')" :pt="center">
5353
<template #body="{ data }">
5454
<NuxtLink v-if="data.issues" target="_blank" class="nav-link"
5555
:to="`https://github.com/${data.user}/${data.repo}/issues`">
@@ -60,18 +60,16 @@
6060

6161
<Column v-if="C.display('description')" sortable field="description" :header="C.name('description')"
6262
style="max-width: 500px; min-width: 280px" />
63-
<Column v-if="C.display('created_at')" sortable field="created_at" :header="C.name('created_at')"
64-
:pt="ptColumnCenter" />
65-
<Column v-if="C.display('pushed_at')" sortable field="pushed_at" :header="C.name('pushed_at')"
66-
:pt="ptColumnCenter" />
63+
<Column v-if="C.display('created_at')" sortable field="created_at" :header="C.name('created_at')" :pt="center" />
64+
<Column v-if="C.display('pushed_at')" sortable field="pushed_at" :header="C.name('pushed_at')" :pt="center" />
6765
<Column v-if="C.display('active_days')" sortable field="active_days" :header="C.name('active_days')"
68-
:pt="ptColumnRight" />
66+
:pt="right" />
6967
<Column v-if="C.display('contributions')" sortable field="contributions" :header="C.name('contributions')"
70-
:pt="ptColumnRight" />
68+
:pt="right" />
7169
<Column v-if="C.display('contributors')" sortable field="contributors" :header="C.name('contributors')"
72-
:pt="ptColumnRight" />
70+
:pt="right" />
7371

74-
<Column v-if="C.display('size')" sortable field="size" :header="C.name('size')" :pt="ptColumnRight">
72+
<Column v-if="C.display('size')" sortable field="size" :header="C.name('size')" :pt="right">
7573
<template #body="{ data }">
7674
<span :style="{ color: (data.size < 1024) ? color.grey : '' }">
7775
{{ formatBytes(data.size) }}
@@ -80,20 +78,17 @@
8078
</Column>
8179

8280
<Column v-if="C.display('default_branch')" sortable field="default_branch" :header="C.name('default_branch')"
83-
:pt="ptColumnCenter" />
84-
<Column v-if="C.display('fork')" sortable field="fork" :header="C.name('fork')" :pt="ptColumnCenter" />
85-
<Column v-if="C.display('archived')" sortable field="archived" :header="C.name('archived')"
86-
:pt="ptColumnCenter" />
81+
:pt="center" />
82+
<Column v-if="C.display('fork')" sortable field="fork" :header="C.name('fork')" :pt="center" />
83+
<Column v-if="C.display('archived')" sortable field="archived" :header="C.name('archived')" :pt="center" />
8784

88-
<Column v-if="C.display('stargazers')" sortable field="stargazers" :header="C.name('stargazers')"
89-
:pt="ptColumnRight" />
85+
<Column v-if="C.display('stargazers')" sortable field="stargazers" :header="C.name('stargazers')" :pt="right" />
9086
<Column v-if="C.display('subscribers')" sortable field="subscribers" :header="C.name('subscribers')"
91-
:pt="ptColumnRight" />
92-
<Column v-if="C.display('forks')" sortable field="forks" :header="C.name('forks')" :pt="ptColumnRight" />
93-
<Column v-if="C.display('network')" sortable field="network" :header="C.name('network')" :pt="ptColumnRight" />
87+
:pt="right" />
88+
<Column v-if="C.display('forks')" sortable field="forks" :header="C.name('forks')" :pt="right" />
89+
<Column v-if="C.display('network')" sortable field="network" :header="C.name('network')" :pt="right" />
9490

95-
<Column v-if="C.display('discussions')" sortable field="discussions" :header="C.name('discussions')"
96-
:pt="ptColumnCenter">
91+
<Column v-if="C.display('discussions')" sortable field="discussions" :header="C.name('discussions')" :pt="center">
9792
<template #body="{ data }">
9893
<NuxtLink v-if="data.discussions" target="_blank" class="nav-link"
9994
:to="`https://github.com/${data.user}/${data.repo}/discussions`">
@@ -120,22 +115,13 @@ import type { DataTableSortMeta } from 'primevue/datatable';
120115
import { RepoCols } from '~/shared/repos';
121116
import { formatBytes } from '~/shared/columns-select';
122117
import type { Output, Repo } from '~/shared/repos';
118+
import { center, right } from '~/shared/styling';
123119
124120
useHead({ title: 'Repositories Information' });
125121
126122
const { color, viewportHeight } = storeToRefs(useStyleStore());
127123
const tableHeight = computed(() => `${Math.round(viewportHeight.value * 0.8)}px`);
128124
129-
// styling
130-
const ptColumnCenter = ref({
131-
columnHeaderContent: { style: { "justify-content": "center" } },
132-
bodyCell: { style: { "text-align": "center" } }
133-
});
134-
const ptColumnRight = ref({
135-
columnHeaderContent: { style: { "justify-content": "right" } },
136-
bodyCell: { style: { "text-align": "right" } }
137-
});
138-
139125
const summaries = ref<Output[]>([]);
140126
141127
githubFetch<Output[]>({

‎os-checks/shared/styling.ts‎

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
/**
2+
* Make header and column content center aligned.
3+
*/
4+
export const center = {
5+
columnHeaderContent: { style: { "justify-content": "center" } },
6+
bodyCell: { style: { "text-align": "center" } }
7+
};
8+
9+
/**
10+
* Make header and column content right aligned.
11+
*/
12+
export const right = {
13+
columnHeaderContent: { style: { "justify-content": "right" } },
14+
bodyCell: { style: { "text-align": "right" } },
15+
};
16+
17+
/**
18+
* Make header and column content right aligend.
19+
*/
20+
export const rightCell = {
21+
columnHeaderContent: { style: { "justify-content": "right" } },
22+
bodyCell: { style: { "text-align": "right" } },
23+
// TreeTable need this to invalidate .p-treetable-body-cell-content { display: flex; }
24+
// to make right alignment work.
25+
bodyCellContent: { style: { display: 'block' } }
26+
};

0 commit comments

Comments
 (0)