Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Repo list improvements, fix bold helper classes #24935

Merged
merged 17 commits into from
May 29, 2023
Merged

Repo list improvements, fix bold helper classes #24935

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
17 commits
Select commit Hold shift + click to select a range
741aa0f
Repo list improvements, fix bold helper classes
silverwind May 25, 2023
ddbf954
fix truncations and more tweaks
silverwind May 25, 2023
41fb319
revert archived condition
silverwind May 25, 2023
a087ef1
remove comment, vue compiler does not like it
silverwind May 25, 2023
6809632
align the '+' and mute it
silverwind May 25, 2023
9db7895
add comment
silverwind May 25, 2023
7533421
move styles
silverwind May 25, 2023
389096a
use gap
silverwind May 25, 2023
616c9cc
move right content outside of anchor tag
silverwind May 25, 2023
9b44680
remove div wrapper
silverwind May 25, 2023
7134af9
move min-width to css
silverwind May 26, 2023
58a601b
remove unused rule for privateFilterCheckbox
silverwind May 26, 2023
b2b5e17
Update web_src/css/helpers.css
silverwind May 26, 2023
8fc742c
add comment to div
silverwind May 26, 2023
6294751
resize mirror icon via SVG
silverwind May 26, 2023
ae131fb
Merge branch 'main' into home-org
GiteaBot May 29, 2023
74e5cb6
Merge branch 'main' into home-org
GiteaBot May 29, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
36 changes: 0 additions & 36 deletions web_src/css/dashboard.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -160,39 +160,3 @@
.feeds .news:last-of-type .divider {
display: none !important;
}

.feeds .list ul {
list-style: none;
margin: 0;
padding-left: 0;
}

.feeds .list ul li:not(:last-child) {
border-bottom: 1px solid var(--color-secondary);
}

.feeds .list ul li .repo-list-link {
padding: 6px 1em;
display: block;
}

.feeds .list ul li .repo-list-link .svg {
color: var(--color-text-light-2);
}

.feeds .list ul li .repo-list-link .star-num {
font-size: 12px;
}

.feeds .list #privateFilterCheckbox .svg {
color: var(--color-grey);
margin-right: 0.25rem;
}

.feeds .list .repo-owner-name-list .item-name {
min-width: 0;
}

.feeds .list .repo-owner-name-list .item-name svg {
min-width: 16px;
}
10 changes: 5 additions & 5 deletions web_src/css/helpers.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -86,11 +86,11 @@ Gitea's private styles use `g-` prefix.
.gt-float-left { float: left !important; }
.gt-float-right { float: right !important; }

.gt-font-light { font-weight: var(--font-weight-light) !important };
.gt-font-normal { font-weight: var(--font-weight-normal) !important };
.gt-font-medium { font-weight: var(--font-weight-medium) !important };
.gt-font-semibold { font-weight: var(--font-weight-semibold) !important };
.gt-font-bold { font-weight: var(--font-weight-bold) !important };
.gt-font-light { font-weight: var(--font-weight-light) !important; }
.gt-font-normal { font-weight: var(--font-weight-normal) !important; }
.gt-font-medium { font-weight: var(--font-weight-medium) !important; }
.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; }
Expand Down
80 changes: 58 additions & 22 deletions web_src/js/components/DashboardRepoList.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@
{{ textMyRepos }}
<span class="ui grey label gt-ml-3">{{ reposTotalCount }}</span>
</div>
<a :href="subUrl + '/repo/create' + (isOrganization ? '?org=' + organizationId : '')" :data-tooltip-content="textNewRepo">
<a class="gt-df gt-ac muted" :href="subUrl + '/repo/create' + (isOrganization ? '?org=' + organizationId : '')" :data-tooltip-content="textNewRepo">
<svg-icon name="octicon-plus"/>
<span class="sr-only">{{ textNewRepo }}</span>
</a>
Expand Down Expand Up @@ -70,18 +70,16 @@
</div>
<div v-if="repos.length" class="ui attached table segment gt-rounded-bottom">
<ul class="repo-owner-name-list">
<li v-for="repo in repos" :key="repo.id">
<a class="repo-list-link muted gt-df gt-ac gt-sb" :href="repo.link">
<div class="item-name gt-df gt-ac gt-f1">
<svg-icon :name="repoIcon(repo)" :size="16" class-name="gt-mr-2"/>
<div class="text gt-font-semibold truncate gt-ml-1">{{ repo.full_name }}</div>
<span v-if="repo.archived">
<svg-icon name="octicon-archive" :size="16" class-name="gt-ml-2"/>
</span>
<li class="gt-df gt-ac" v-for="repo in repos" :key="repo.id">
<a class="repo-list-link muted gt-df gt-ac gt-f1" :href="repo.link">
<svg-icon :name="repoIcon(repo)" :size="16" class-name="repo-list-icon"/>
<div class="text truncate">{{ repo.full_name }}</div>
<div v-if="repo.archived">
<svg-icon name="octicon-archive" :size="16"/>
</div>
<!-- the commit status icon logic is taken from templates/repo/commit_status.tmpl -->
<svg-icon v-if="repo.latest_commit_status_state" :name="statusIcon(repo.latest_commit_status_state)" :class-name="'commit-status icon text ' + statusColor(repo.latest_commit_status_state)" :size="16"/>
</a>
<!-- the commit status icon logic is taken from templates/repo/commit_status.tmpl -->
<svg-icon v-if="repo.latest_commit_status_state" :name="statusIcon(repo.latest_commit_status_state)" :class-name="'gt-ml-3 commit-status icon text ' + statusColor(repo.latest_commit_status_state)" :size="16"/>
</li>
</ul>
<div v-if="showMoreReposLink" class="center gt-py-3 gt-border-secondary-top">
Expand Down Expand Up @@ -121,27 +119,27 @@
{{ textMyOrgs }}
<span class="ui grey label gt-ml-3">{{ organizationsTotalCount }}</span>
</div>
<a v-if="canCreateOrganization" :href="subUrl + '/org/create'" :data-tooltip-content="textNewOrg">
<a class="gt-df gt-ac muted" v-if="canCreateOrganization" :href="subUrl + '/org/create'" :data-tooltip-content="textNewOrg">
<svg-icon name="octicon-plus"/>
<span class="sr-only">{{ textNewOrg }}</span>
</a>
</h4>
<div v-if="organizations.length" class="ui attached table segment gt-rounded-bottom">
<ul class="repo-owner-name-list">
<li v-for="org in organizations" :key="org.name">
<a class="repo-list-link gt-df gt-ac gt-sb" :href="subUrl + '/' + encodeURIComponent(org.name)">
<div class="text truncate item-name gt-f1">
<svg-icon name="octicon-organization" :size="16" class-name="gt-mr-2"/>
<strong>{{ org.name }}</strong>
<span class="ui tiny basic label gt-ml-3" v-if="org.org_visibility !== 'public'">
<li class="gt-df gt-ac" v-for="org in organizations" :key="org.name">
<a class="repo-list-link muted gt-df gt-ac gt-f1" :href="subUrl + '/' + encodeURIComponent(org.name)">
<svg-icon name="octicon-organization" :size="16" class-name="repo-list-icon"/>
<div class="text truncate">{{ org.name }}</div>
<div><!-- div to prevent underline of label on hover -->
<span class="ui tiny basic label" v-if="org.org_visibility !== 'public'">
{{ org.org_visibility === 'limited' ? textOrgVisibilityLimited: textOrgVisibilityPrivate }}
</span>
</div>
<div class="text light grey gt-df gt-ac">
{{ org.num_repos }}
<svg-icon name="octicon-repo" :size="16" class-name="gt-ml-2 gt-mt-1"/>
</div>
</a>
<div class="text light grey gt-df gt-ac gt-ml-3">
{{ org.num_repos }}
<svg-icon name="octicon-repo" :size="16" class-name="gt-ml-2 gt-mt-1"/>
</div>
</li>
</ul>
</div>
Expand Down Expand Up @@ -445,3 +443,41 @@ export function initDashboardRepoList() {
export default sfc; // activate the IDE's Vue plugin

</script>
<style scoped>
ul {
list-style: none;
margin: 0;
padding-left: 0;
}

ul li {
padding: 0 10px;
}

ul li:not(:last-child) {
border-bottom: 1px solid var(--color-secondary);
}

.repo-list-link {
padding: 6px 0;
gap: 6px;
min-width: 0; /* for text truncation */
}

.repo-list-link .svg {
color: var(--color-text-light-2);
}

.repo-list-icon {
min-width: 16px;
silverwind marked this conversation as resolved.
Show resolved Hide resolved
margin-right: 2px;
}

/* octicon-mirror has no padding inside the SVG */
.repo-list-icon.octicon-mirror {
width: 14px;
min-width: 14px;
margin-left: 1px;
margin-right: 3px;
}
</style>