Menu bar: orgs & projects pushed into dropdowns (rough sketch)

This commit is contained in:
Klaas van Schelven
2024-03-28 17:14:48 +01:00
parent fe534a57b6
commit bb20c68459
6 changed files with 61 additions and 13 deletions

View File

@@ -39,7 +39,7 @@
<button disabled {# disabled b/c clicking the dropdown does nothing - we have hover for that #} class="font-bold text-slate-800 border-slate-500 pl-4 pr-4 pb-2 pt-2 border-r-2 border-t-2 border-b-2 hover:bg-slate-200 active:ring rounded-e-md">🞃</button>
{# note that we can depend on get_latest_release being available, because we're in the 'project.has_releases' branch #}
<div class="dropdown-content flex-col pl-2">
<div class="dropdown-content-right flex-col pl-2">
{% if not issue.occurs_in_last_release %}
<button name="action" value="resolved_release:{{ issue.project.get_latest_release.version }}" class="block self-stretch font-bold text-slate-500 border-slate-300 pl-4 pr-4 pb-2 pt-2 border-l-2 border-r-2 border-b-2 bg-white hover:bg-slate-200 active:ring text-left whitespace-nowrap">Resolved in latest ({{ issue.project.get_latest_release.get_short_version }})</button>
@@ -69,7 +69,7 @@
{% if not issue.is_muted and not issue.is_resolved %}
<button disabled {# disabled b/c clicking the dropdown does nothing - we have hover for that #} class="font-bold text-slate-500 border-slate-300 pl-4 pr-4 pb-2 pt-2 border-r-2 border-b-2 border-t-2 hover:bg-slate-200 active:ring">Mute for/until&nbsp;&nbsp;&nbsp;🞃</button>
<div class="dropdown-content flex-col">
<div class="dropdown-content-right flex-col">
{% for mute_option in mute_options %}
<button name="action" value="mute_{{ mute_option.for_or_until }}:{{ mute_option.period_name }},{{ mute_option.nr_of_periods }},{{ mute_option.gte_threshold }}" class="block self-stretch font-bold text-slate-500 border-slate-300 pl-4 pr-4 pb-2 pt-2 border-l-2 border-r-2 border-b-2 bg-white hover:bg-slate-200 active:ring text-left whitespace-nowrap">{% if mute_option.for_or_until == "for" %}{{ mute_option.nr_of_periods }} {{ mute_option.period_name }}{% if mute_option.nr_of_periods != 1 %}s{% endif %}{% else %}{{ mute_option.gte_threshold }} events per {% if mute_option.nr_of_periods != 1%} {{ mute_option.nr_of_periods }} {{ mute_option.period_name }}s{% else %} {{ mute_option.period_name }}{% endif %}{% endif %}</button>
{% endfor %}

View File

@@ -85,7 +85,7 @@ https://flowbite.com/docs/forms/floating-label/
<button disabled {# disabled b/c clicking the dropdown does nothing - we have hover for that #} class="font-bold text-slate-800 border-slate-500 pl-4 pr-4 pb-2 pt-2 border-r-2 border-t-2 border-b-2 hover:bg-slate-200 active:ring rounded-e-md">🞃</button>
{# note that we can depend on get_latest_release being available, because we're in the 'project.has_releases' branch #}
<div class="dropdown-content flex-col pl-2">
<div class="dropdown-content-right flex-col pl-2">
{# note that an if-statement ("issue.occurs_in_last_release") is missing here, because we're not on the level of a single issue #}
{# handling of that question (but per-issue, and after-click) is left as a TODO on the view #}
@@ -112,7 +112,7 @@ https://flowbite.com/docs/forms/floating-label/
{% if not disable_mute_buttons %}
<button disabled {# disabled b/c clicking the dropdown does nothing - we have hover for that #} class="font-bold text-slate-500 border-slate-300 pl-4 pr-4 pb-2 pt-2 border-r-2 border-b-2 border-t-2 hover:bg-slate-200 active:ring">Mute for/until&nbsp;&nbsp;&nbsp;🞃</button>
<div class="dropdown-content flex-col">
<div class="dropdown-content-right flex-col">
{% for mute_option in mute_options %}
<button name="action" value="mute_{{ mute_option.for_or_until }}:{{ mute_option.period_name }},{{ mute_option.nr_of_periods }},{{ mute_option.gte_threshold }}" class="block self-stretch font-bold text-slate-500 border-slate-300 pl-4 pr-4 pb-2 pt-2 border-l-2 border-r-2 border-b-2 bg-white hover:bg-slate-200 active:ring text-left whitespace-nowrap">{% if mute_option.for_or_until == "for" %}{{ mute_option.nr_of_periods }} {{ mute_option.period_name }}{% if mute_option.nr_of_periods != 1 %}s{% endif %}{% else %}{{ mute_option.gte_threshold }} events per {% if mute_option.nr_of_periods != 1%} {{ mute_option.nr_of_periods }} {{ mute_option.period_name }}s{% else %} {{ mute_option.period_name }}{% endif %}{% endif %}</button>
{% endfor %}

View File

@@ -189,6 +189,7 @@ def issue_event_stacktrace(request, issue, event_pk):
return render(request, "issues/issue_stacktrace.html", {
"tab": "stacktrace",
"project": issue.project,
"issue": issue,
"event": event,
"is_event_page": True,
@@ -208,6 +209,7 @@ def issue_event_details(request, issue, event_pk):
return render(request, "issues/issue_event_details.html", {
"tab": "event-details",
"project": issue.project,
"issue": issue,
"event": event,
"is_event_page": True,
@@ -221,6 +223,7 @@ def issue_history(request, issue):
return render(request, "issues/issue_history.html", {
"tab": "history",
"project": issue.project,
"issue": issue,
"event": issue.event_set.order_by("timestamp").last(), # the template needs this for the tabs, we pick the last
"is_event_page": False,
@@ -234,6 +237,7 @@ def issue_grouping(request, issue):
return render(request, "issues/issue_grouping.html", {
"tab": "grouping",
"project": issue.project,
"issue": issue,
"event": issue.event_set.order_by("timestamp").last(), # the template needs this for the tabs, we pick the last
"is_event_page": False,
@@ -249,6 +253,7 @@ def issue_event_list(request, issue):
return render(request, "issues/issue_event_list.html", {
"tab": "event-list",
"project": issue.project,
"issue": issue,
"event": issue.event_set.order_by("timestamp").last(), # the template needs this for the tabs, we pick the last
"event_list": event_list,

View File

@@ -1507,7 +1507,7 @@ select {
/* Dropdown Content (Hidden by Default) */
.dropdown-content {
.dropdown-content-right {
display: none;
position: absolute;
z-index: 1;
@@ -1515,9 +1515,18 @@ select {
right: 0;
}
/* Dropdown Content (Hidden by Default) */
.dropdown-content-left {
display: none;
position: absolute;
z-index: 1;
left: 0;
}
/* Show the dropdown menu on hover */
.dropdown:hover .dropdown-content {
.dropdown:hover .dropdown-content-left, .dropdown:hover .dropdown-content-right {
display: flex;
}

View File

@@ -81,7 +81,7 @@
}
/* Dropdown Content (Hidden by Default) */
.dropdown-content {
.dropdown-content-right {
display: none;
position: absolute;
z-index: 1;
@@ -89,7 +89,15 @@
right: 0;
}
/* Dropdown Content (Hidden by Default) */
.dropdown-content-left {
display: none;
position: absolute;
z-index: 1;
left: 0;
}
/* Show the dropdown menu on hover */
.dropdown:hover .dropdown-content {
.dropdown:hover .dropdown-content-left, .dropdown:hover .dropdown-content-right {
display: flex;
}

View File

@@ -13,16 +13,42 @@
<div class="flex pl-4 bg-slate-200">
<a href="/"><img src="{% static 'images/bugsink-logo.png' %}" class="p-2 h-12 w-12"></a>
<a href="/"><div class="pt-4 pb-4 pl-2 pr-2 font-bold">{{ site_title }}</div></a>
{% for project in user_projects %} {# or, maybe, if you're single-org, or single-project, just show that #}
<a href="/issues/{{ project.id }}/"><div class="p-4 hover:bg-slate-400">{{ project.name }}</div></a>
{% endfor %}
{# TODO how to handle single-org, single-project #}
<div class="dropdown">
<a href="TODO"><div class="p-4 hover:bg-slate-400">Group 1&nbsp;&nbsp;🞃 </div></a>
<div class="dropdown-content-left flex-col">
<a href="TODO"><div class="bg-slate-200 hover:bg-slate-400 p-4 whitespace-nowrap {% if project == loop_project %}italic{% endif %}">Group 1</div></a>
<a href="TODO"><div class="bg-slate-200 hover:bg-slate-400 p-4 whitespace-nowrap {% if project == loop_project %}italic{% endif %}">Group 2</div></a>
<a href="TODO"><div class="bg-slate-200 hover:bg-slate-400 p-4 whitespace-nowrap {% if project == loop_project %}italic{% endif %}">Group 3</div></a>
</div>
</div>
<div class="dropdown">
<a href="/issues/{{ project.id }}"><div class="p-4 hover:bg-slate-400">{{ project.name }}&nbsp;&nbsp;🞃 </div></a>
<div class="dropdown-content-left flex-col">
{% for loop_project in user_projects %}
<a href="/issues/{{ loop_project.id }}/"><div class="bg-slate-200 hover:bg-slate-400 p-4 whitespace-nowrap {% if project == loop_project %}italic{% endif %}">{{ loop_project.name }}</div></a>
{% endfor %}
</div>
</div>
<div class="ml-auto flex">
{% if user.is_staff %}
<a href="/admin/"><div class="p-4 hover:bg-slate-400">Admin</div></a>
{% endif %}
{% if logged_in_user.is_anonymous %}
<a href="/accounts/login/" class="ml-auto"><div class="p-4 hover:bg-slate-400">Login</div></a>
<a href="/accounts/login/"><div class="p-4 hover:bg-slate-400">Login</div></a>
{% else %}
<a href="/accounts/logout/" class="ml-auto"><div class="p-4 hover:bg-slate-400">{{ logged_in_user.username }} (logout)</div></a>
<a href="/accounts/TODO/"><div class="p-4 hover:bg-slate-400">Profile</div></a>
<a href="/accounts/logout/"><div class="p-4 hover:bg-slate-400">Log out</div></a>
{% endif %}
</div>
</div>
<div>
{% block content %}{% endblock %}