nune/gitea
nune/gitea
0
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 1

Optimize the dashboard (#32990)

Browse source 
before:

![image](https://github.com/user-attachments/assets/d0b432e4-a521-4540-a489-d18b9c265674)

after:

![image](https://github.com/user-attachments/assets/dbb8b387-d150-41e2-b12b-f9d8450e36d7)
-----

![image](https://github.com/user-attachments/assets/40dcd71e-344b-4043-9811-77227c71aed9)
-----

Optimize the dashboard by adding welcoming messages or quick action
entry points (such as adding a new repository or organization) to ensure
that new users are not greeted by a blank page upon logging in.

---------

Co-authored-by: wxiaoguang <wxiaoguang@gmail.com>
This commit is contained in:
Kerwin Bryant 2025-02-11 01:24:34 +08:00 • committed by GitHub
parent 72518a8dab
commit 085f273d19
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
5 changed files with 55 additions and 7 deletions
Download patch file Download diff file Expand all files Collapse all files

35
web_src/js/components/DashboardRepoList.vue
View file

@ -113,7 +113,7 @@ export default defineComponent({
this.changeReposFilter(this.reposFilter);
fomanticQuery(el.querySelector('.ui.dropdown')).dropdown();
nextTick(() => {
this.$refs.search.focus();
this.$refs.search?.focus();
});
this.textArchivedFilterTitles = {
@ -243,7 +243,7 @@ export default defineComponent({
if (!this.reposTotalCount) {
const totalCountSearchURL = `${this.subUrl}/repo/search?count_only=1&uid=${this.uid}&team_id=${this.teamId}&q=&page=1&mode=`;
response = await GET(totalCountSearchURL);
this.reposTotalCount = response.headers.get('X-Total-Count') ?? '?';
this.reposTotalCount = parseInt(response.headers.get('X-Total-Count') ?? '0');
}
response = await GET(searchedURL);
@ -336,7 +336,6 @@ export default defineComponent({
},
},
});
</script>
<template>
<div>
@ -354,7 +353,15 @@ export default defineComponent({
<svg-icon name="octicon-plus"/>
</a>
</h4>
<div class="ui attached segment repos-search">
<div v-if="!reposTotalCount" class="ui attached segment">
<div v-if="!isLoading" class="empty-repo-or-org">
<svg-icon name="octicon-git-branch" :size="24"/>
<p>{{ textNoRepo }}</p>
</div>
<!-- using the loading indicator here will cause more (unnecessary) page flickers, so at the moment, not use the loading indicator -->
<!-- <div v-else class="is-loading loading-icon-2px tw-min-h-16"/> -->
</div>
<div v-else class="ui attached segment repos-search">
<div class="ui small fluid action left icon input">
<input type="search" spellcheck="false" maxlength="255" @input="changeReposFilter(reposFilter)" v-model="searchQuery" ref="search" @keydown="reposFilterKeyControl" :placeholder="textSearchRepos">
<i class="icon loading-icon-3px" :class="{'is-loading': isLoading}"><svg-icon name="octicon-search" :size="16"/></i>
@ -438,7 +445,7 @@ export default defineComponent({
class="item navigation tw-py-1" :class="{'disabled': page === 1}"
@click="changePage(page - 1)" :title="textPreviousPage"
>
<svg-icon name="octicon-chevron-left" :size="16" clsas-name="tw-mr-1"/>
<svg-icon name="octicon-chevron-left" :size="16" clsas="tw-mr-1"/>
</a>
<a class="active item tw-py-1">{{ page }}</a>
<a
@ -467,7 +474,13 @@ export default defineComponent({
<svg-icon name="octicon-plus"/>
</a>
</h4>
<div v-if="organizations.length" class="ui attached table segment tw-rounded-b">
<div v-if="!organizations.length" class="ui attached segment">
<div class="empty-repo-or-org">
<svg-icon name="octicon-organization" :size="24"/>
<p>{{ textNoOrg }}</p>
</div>
</div>
<div v-else class="ui attached table segment tw-rounded-b">
<ul class="repo-owner-name-list">
<li class="tw-flex tw-items-center tw-py-2" v-for="org in organizations" :key="org.name">
<a class="repo-list-link muted" :href="subUrl + '/' + encodeURIComponent(org.name)">
@ -546,4 +559,14 @@ ul li:not(:last-child) {
.repo-owner-name-list li.active {
background: var(--color-hover);
}
.empty-repo-or-org {
margin-top: 1em;
text-align: center;
color: var(--color-placeholder-text);
}
.empty-repo-or-org p {
margin: 1em auto;
}
</style>