WIP: add tippy button to filters

Author: tpokorra

templates/repo/issue/filters.tmpl

@@ -21,6 +21,17 @@
 			{{else}}
 				{{template "repo/issue/filter_list" .}}
 			{{end}}
+
+			<button class="ui compact secondary button js-btn-misc-actions">
+				&hellip;
+			</button>
+
+			<div class="misc-actions-popup tippy-target">
+				<div class="flex-items-block misc-actions-panel-list">
+					<a class="item muted" href="{{$.RepoLink}}/issues/export?{{$.Page.GetParams}}">{{ctx.Locale.Tr "action.export_to_excel"}}</a>
+				</div>
+			</div>
+
 		</div>
 	</div>
 </div>

templates/repo/issue/list.tmpl

@@ -31,11 +31,12 @@
 					<a class="ui small primary small button issue-list-new{{if not .PullRequestCtx.Allowed}} disabled{{end}}" href="{{if .PullRequestCtx.Allowed}}{{.PullRequestCtx.BaseRepo.Link}}/compare/{{.PullRequestCtx.BaseRepo.DefaultBranch | PathEscapeSegments}}...{{if ne .Repository.Owner.Name .PullRequestCtx.BaseRepo.Owner.Name}}{{PathEscape .Repository.Owner.Name}}:{{end}}{{.Repository.DefaultBranch | PathEscapeSegments}}{{end}}">{{ctx.Locale.Tr "action.compare_commits_general"}}</a>
 				{{end}}
 			{{end}}
-			<a class="ui small primary button issue-list-export" href="{{.RepoLink}}/issues/export?{{.Page.GetParams}}">{{ctx.Locale.Tr "action.export_to_excel"}}</a>
+
 		</div>
 
 		{{template "repo/issue/filters" .}}
 
+
 		<div id="issue-actions" class="issue-list-toolbar tw-hidden">
 			<div class="issue-list-toolbar-left">
 				{{template "repo/issue/openclose" .}}
@@ -51,7 +52,30 @@
 			</div>
 			<div class="issue-list-toolbar-right">
 				{{template "repo/issue/filter_actions" .}}
+
+                <!-- Export dropdown button (Tippy.js) placed to the right of filter_actions -->
+                <div class="issue-export-container" style="display:inline-block; margin-left:8px;">
+                    <button id="issue-export-btn" class="ui small button" type="button" aria-haspopup="true" aria-expanded="false" title="More actions">
+                        &hellip;
+                    </button>
+
+                    <!-- Hidden popover content for tippy.js -->
+                    <div id="issue-export-popover" style="display:none;">
+                        <div class="dropdown-popover">
+                            <a href="#" class="dropdown-item" id="export-csv">Export CSV</a>
+                            <a href="#" class="dropdown-item" id="export-json">Export JSON</a>
+                            <a href="#" class="dropdown-item" id="export-selected">Export selected</a>
+                        </div>
+                    </div>
+
+                    <style>
+                        .issue-export-container .dropdown-popover { padding:8px; min-width:160px; background:var(--dropdown-bg,#fff); border-radius:4px; box-shadow:0 2px 8px rgba(0,0,0,0.12); }
+                        .issue-export-container .dropdown-item { display:block; padding:6px 8px; color:var(--link-color,#0366d6); text-decoration:none; }
+                        .issue-export-container .dropdown-item:hover { background:var(--hover-bg,#f6f8fa); }
+                    </style>
+                </div>
 			</div>
+
 		</div>
 		{{template "shared/issuelist" dict "." . "listType" "repo"}}
 	</div>

web_src/css/repo/issue-list.css

@@ -84,3 +84,29 @@
   margin-right: 8px;
   text-align: left;
 }
+
+/* used by the misc-actions popup */
+.misc-actions-panel-field,
+.misc-actions-list {
+  margin: 10px;
+}
+
+.misc-actions-tab .item {
+  padding: 5px 10px;
+  background: none;
+  color: var(--color-text-light-2);
+}
+
+.misc-actions-tab .item.active {
+  color: var(--color-text-dark);
+  border-bottom: 3px solid currentcolor;
+}
+
+.misc-actions-tab + .divider {
+  margin: -1px 0 0;
+}
+
+.misc-actions-panel-list .item {
+  margin: 5px 0;
+}
+

web_src/js/features/repo-issue-list.ts

@@ -8,6 +8,7 @@ import {DELETE, POST} from '../modules/fetch.ts';
 import {parseDom} from '../utils.ts';
 import {fomanticQuery} from '../modules/fomantic/base.ts';
 import type {SortableEvent} from 'sortablejs';
+import {createTippy} from '../modules/tippy.ts';
 
 function initRepoIssueListCheckboxes() {
   const issueSelectAll = document.querySelector<HTMLInputElement>('.issue-checkbox-all');
@@ -223,11 +224,28 @@ async function initIssuePinSort() {
   });
 }
 
+function initMiscActionsButton(btn: HTMLButtonElement) {
+  const elPanel = btn.nextElementSibling;
+  createTippy(btn, {
+    content: elPanel,
+    trigger: 'click',
+    placement: 'bottom-end',
+    interactive: true,
+    hideOnClick: true,
+    arrow: false,
+  });
+}
+
+async function initRepoIssueMiscActions() {
+  queryElems(document, '.js-btn-misc-actions', initMiscActionsButton);
+}
+
 export function initRepoIssueList() {
   if (document.querySelector('.page-content.repository.issue-list, .page-content.repository.milestone-issue-list')) {
     initRepoIssueListCheckboxes();
     queryElems(document, '.ui.dropdown.user-remote-search', (el) => initDropdownUserRemoteSearch(el));
     initIssuePinSort();
+    initRepoIssueMiscActions();
   } else if (document.querySelector('.page-content.dashboard.issues')) {
     // user or org home: issue list, pull request list
     queryElems(document, '.ui.dropdown.user-remote-search', (el) => initDropdownUserRemoteSearch(el));