Various improvements to pages: notifications and subscriptions

- fix rounding on /notifications/subscriptions
- add navigation interconnectivity between notifications and subscriptions
- use modern style for tabs
- clearing notificatons: hide the whole form instead of div. It doesn't seem like its changed via JS?
- replace issue-title-buttons and edit-buttons with universal top-right-buttons, get rid of tw-mr-0 helpers
- repo issues: fix misalignments on mobile view
This commit is contained in:
0ko 2024-04-11 23:02:27 +05:00
parent 4fc06cfd78
commit 41ab13c14f
5 changed files with 53 additions and 35 deletions

View file

@ -12,16 +12,16 @@
<input value="{{.Issue.Title}}" maxlength="255" autocomplete="off"> <input value="{{.Issue.Title}}" maxlength="255" autocomplete="off">
</div> </div>
</h1> </h1>
<div class="issue-title-buttons"> <div class="top-right-buttons">
{{if and (or .HasIssuesOrPullsWritePermission .IsIssuePoster) (not .Repository.IsArchived)}} {{if and (or .HasIssuesOrPullsWritePermission .IsIssuePoster) (not .Repository.IsArchived)}}
<button id="edit-title" class="ui small basic button edit-button not-in-edit tw-mr-0">{{ctx.Locale.Tr "repo.issues.edit"}}</button> <button id="edit-title" class="ui small basic button edit-button not-in-edit">{{ctx.Locale.Tr "repo.issues.edit"}}</button>
{{end}} {{end}}
{{if not .Issue.IsPull}} {{if not .Issue.IsPull}}
<a role="button" class="ui small primary button new-issue-button tw-mr-0" href="{{.RepoLink}}/issues/new{{if .NewIssueChooseTemplate}}/choose{{end}}">{{ctx.Locale.Tr "repo.issues.new"}}</a> <a role="button" class="ui small primary button new-issue-button" href="{{.RepoLink}}/issues/new{{if .NewIssueChooseTemplate}}/choose{{end}}">{{ctx.Locale.Tr "repo.issues.new"}}</a>
{{end}} {{end}}
</div> </div>
{{if and (or .HasIssuesOrPullsWritePermission .IsIssuePoster) (not .Repository.IsArchived)}} {{if and (or .HasIssuesOrPullsWritePermission .IsIssuePoster) (not .Repository.IsArchived)}}
<div class="edit-buttons"> <div class="top-right-buttons">
<button id="cancel-edit-title" class="ui small basic button in-edit tw-hidden">{{ctx.Locale.Tr "repo.issues.cancel"}}</button> <button id="cancel-edit-title" class="ui small basic button in-edit tw-hidden">{{ctx.Locale.Tr "repo.issues.cancel"}}</button>
<button id="save-edit-title" class="ui small primary button in-edit tw-hidden tw-mr-0" data-update-url="{{$.RepoLink}}/issues/{{.Issue.Index}}/title" {{if .Issue.IsPull}}data-target-update-url="{{$.RepoLink}}/pull/{{.Issue.Index}}/target_branch"{{end}}>{{ctx.Locale.Tr "repo.issues.save"}}</button> <button id="save-edit-title" class="ui small primary button in-edit tw-hidden tw-mr-0" data-update-url="{{$.RepoLink}}/issues/{{.Issue.Index}}/title" {{if .Issue.IsPull}}data-target-update-url="{{$.RepoLink}}/pull/{{.Issue.Index}}/target_branch"{{end}}>{{ctx.Locale.Tr "repo.issues.save"}}</button>
</div> </div>

View file

@ -1,8 +1,8 @@
<div role="main" aria-label="{{.Title}}" class="page-content user notification" id="notification_div" data-sequence-number="{{.SequenceNumber}}"> <div role="main" aria-label="{{.Title}}" class="page-content user notification" id="notification_div" data-sequence-number="{{.SequenceNumber}}">
<div class="ui container"> <div class="ui container">
{{$notificationUnreadCount := call .NotificationUnreadCount}} {{$notificationUnreadCount := call .NotificationUnreadCount}}
<div class="tw-flex tw-items-center tw-justify-between tw-mb-[--page-spacing]"> <div class="tw-flex tw-items-center tw-justify-between tw-mb-4">
<div class="small-menu-items ui compact tiny menu"> <div class="ui secondary partial menu">
<a class="{{if eq .Status 1}}active {{end}}item" href="{{AppSubUrl}}/notifications?q=unread"> <a class="{{if eq .Status 1}}active {{end}}item" href="{{AppSubUrl}}/notifications?q=unread">
{{ctx.Locale.Tr "notification.unread"}} {{ctx.Locale.Tr "notification.unread"}}
<div class="notifications-unread-count ui label {{if not $notificationUnreadCount}}tw-hidden{{end}}">{{$notificationUnreadCount}}</div> <div class="notifications-unread-count ui label {{if not $notificationUnreadCount}}tw-hidden{{end}}">{{$notificationUnreadCount}}</div>
@ -11,16 +11,21 @@
{{ctx.Locale.Tr "notification.read"}} {{ctx.Locale.Tr "notification.read"}}
</a> </a>
</div> </div>
{{if and (eq .Status 1)}} <div class="tw-flex top-right-buttons">
<form action="{{AppSubUrl}}/notifications/purge" method="post"> <a class="ui tiny button" href="{{AppSubUrl}}/notifications/subscriptions">
{{$.CsrfTokenHtml}} {{ctx.Locale.Tr "notification.subscriptions"}}
<div class="{{if not $notificationUnreadCount}}tw-hidden{{end}}"> </a>
<button class="ui mini button primary tw-mr-0" title="{{ctx.Locale.Tr "notification.mark_all_as_read"}}"> {{if and (eq .Status 1)}}
{{svg "octicon-checklist"}} <form class="{{if not $notificationUnreadCount}}tw-hidden{{end}}" action="{{AppSubUrl}}/notifications/purge" method="post">
</button> {{$.CsrfTokenHtml}}
</div> <div>
</form> <button class="ui mini button primary tw-mr-0" title="{{ctx.Locale.Tr "notification.mark_all_as_read"}}">
{{end}} {{svg "octicon-checklist"}}
</button>
</div>
</form>
{{end}}
</div>
</div> </div>
<div class="tw-p-0"> <div class="tw-p-0">
<div id="notification_table"> <div id="notification_table">

View file

@ -1,15 +1,20 @@
{{template "base/head" .}} {{template "base/head" .}}
<div role="main" aria-label="{{.Title}}" class="page-content user notification"> <div role="main" aria-label="{{.Title}}" class="page-content user notification">
<div class="ui container"> <div class="ui container">
<div class="ui top attached tabular menu"> <div class="tw-flex tw-items-center tw-justify-between tw-mb-4">
<a href="{{AppSubUrl}}/notifications/subscriptions" class="{{if eq .Status 1}}active {{end}}item"> <div class="ui secondary partial menu">
{{ctx.Locale.Tr "notification.subscriptions"}} <a href="{{AppSubUrl}}/notifications/subscriptions" class="{{if eq .Status 1}}active {{end}}item">
</a> {{ctx.Locale.Tr "notification.subscriptions"}}
<a href="{{AppSubUrl}}/notifications/watching" class="{{if eq .Status 2}}active {{end}}item"> </a>
{{ctx.Locale.Tr "notification.watching"}} <a href="{{AppSubUrl}}/notifications/watching" class="{{if eq .Status 2}}active {{end}}item">
{{ctx.Locale.Tr "notification.watching"}}
</a>
</div>
<a class="ui tiny button" href="{{AppSubUrl}}/notifications">
{{ctx.Locale.Tr "notifications"}}
</a> </a>
</div> </div>
<div class="ui bottom attached active tab segment"> <div class="ui bottom active tab segment">
{{if eq .Status 1}} {{if eq .Status 1}}
<div class="tw-flex tw-justify-between"> <div class="tw-flex tw-justify-between">
<div class="tw-flex"> <div class="tw-flex">

View file

@ -246,6 +246,18 @@ h1.error-code {
user-select: none; user-select: none;
} }
.top-right-buttons {
gap: 0.5rem;
}
.top-right-buttons .ui.button {
margin-right: 0;
}
.ui.partial.secondary.menu {
margin-bottom: 0;
}
a { a {
color: var(--color-primary); color: var(--color-primary);
cursor: pointer; cursor: pointer;

View file

@ -595,26 +595,18 @@ td .commit-summary {
align-items: center; align-items: center;
} }
.repository.view.issue .issue-title-buttons, .repository.view.issue .top-right-buttons {
.repository.view.issue .edit-buttons {
display: flex; display: flex;
} }
.issue-title-buttons {
gap: 0.5rem;
}
@media (max-width: 767.98px) { @media (max-width: 767.98px) {
.repository.view.issue .issue-title { .repository.view.issue .issue-title {
flex-direction: column; flex-direction: column;
} }
.repository.view.issue .issue-title-buttons, .repository.view.issue .top-right-buttons {
.repository.view.issue .edit-buttons {
width: 100%; width: 100%;
justify-content: space-between;
}
.repository.view.issue .edit-buttons {
margin-top: .5rem; margin-top: .5rem;
justify-content: space-between;
} }
.comment.form .issue-content-left .avatar { .comment.form .issue-content-left .avatar {
display: none; display: none;
@ -628,6 +620,10 @@ td .commit-summary {
.comment.form .content .form::after { .comment.form .content .form::after {
display: none; display: none;
} }
.repository.view.issue .issue-title.edit-active h1 {
padding-right: 0;
}
} }
.repository.view.issue .issue-title { .repository.view.issue .issue-title {
@ -645,7 +641,7 @@ td .commit-summary {
font-size: 32px; font-size: 32px;
line-height: 40px; line-height: 40px;
margin: 0; margin: 0;
padding-right: 0.25rem; padding-right: 0.5rem;
min-height: var(--repo-header-issue-min-height); min-height: var(--repo-header-issue-min-height);
} }