bjoernager/forgejo
bjoernager/forgejo
1
Fork 0
Code Activity

feat(ui): add quota overview (#6602)

Browse source 
Add UI to the quota feature to see what quotas applies to you and if you're exceeding any quota, it's designed to be a general size overview although it's exclusively filled with quota features for now. There's also no UI to see what item is actually taking in the most size. Purely an quota overview.

Screenshots:
![](https://codeberg.org/attachments/9f7480f2-4c31-4d70-8aec-61db79282a1e)
![](https://codeberg.org/attachments/0bd45bf3-28c5-47bf-8fff-c4ae9f38cb28)

With inspiration from concept by 0ko:
![](https://codeberg.org/attachments/b8154a52-6fba-42fc-a4a8-b3ab1527fb33)

Co-authored-by: Otto Richter <git@otto.splvs.net>
Reviewed-on: https://codeberg.org/forgejo/forgejo/pulls/6602
Reviewed-by: Otto <otto@codeberg.org>
Co-authored-by: Gusted <postmaster@gusted.xyz>
Co-committed-by: Gusted <postmaster@gusted.xyz>
This commit is contained in:
Gusted 2025-02-26 14:36:53 +00:00 • committed by 0ko
parent 6dad457552
commit 77a1af5ab8
24 changed files with 348 additions and 33 deletions
Download patch file Download diff file Expand all files Collapse all files

32
templates/shared/quota_overview.tmpl Normal file
View file

@ -0,0 +1,32 @@
<h4 class="ui top attached header">
{{ctx.Locale.Tr "settings.quota"}}
</h4>
<div class="ui attached segment">
<p>{{if .ContextUser.IsOrganization}}{{ctx.Locale.Tr "settings.quota.applies_to_org"}}{{else}}{{ctx.Locale.Tr "settings.quota.applies_to_user"}}{{end}}:</p>
{{range $group := .QuotaGroups}}
<p class="tw-my-4"><strong>{{$group.Name}}</strong></p>
<div class="tw-ml-4">
{{range $rule := .Rules}}
<div class="tw-flex tw-justify-between">
<span class="tw-flex tw-items-center tw-gap-2{{if eq $rule.Limit -1}} tw-mb-5{{end}}">
{{if $rule.Acceptable ($.SizeUsed)}}
{{svg "octicon-check-circle-fill" 16 "text green"}}
{{$rule.Name}}
{{else}}
{{svg "octicon-alert-fill" 16 "text red"}}
<span data-tooltip-content="{{ctx.Locale.Tr "settings.quota.rule.exceeded.helper"}}" data-tooltip-placement="top">
{{$rule.Name}} – {{ctx.Locale.Tr "settings.quota.rule.exceeded"}}
</span>
{{end}}
</span>
<span>{{ctx.Locale.TrSize ($rule.Sum $.SizeUsed)}} / {{if eq $rule.Limit -1 -}}{{ctx.Locale.Tr "settings.quota.rule.no_limit"}}{{else}}{{ctx.Locale.TrSize $rule.Limit}}{{end}}</span>
</div>
<div class="ui segment">
{{range $idx, $subject := .Subjects}}
<div class="bar" style="width: calc(max(1%, {{Eval 100.0 "*" ($.SizeUsed.CalculateFor $subject) "/" $rule.Limit}}%)); background-color: oklch(80% 30% {{call $.Color $subject}}deg)" data-tooltip-placement="top" data-tooltip-content="{{call $.PrettySubject $subject}} – {{ctx.Locale.TrSize ($.SizeUsed.CalculateFor $subject)}}" data-tooltip-follow-cursor="horizontal"></div>
{{end}}
</div>
{{end}}
</div>
{{end}}
</div>