From ba45b0965ba3a797a1036b7f0589010af280c01d Mon Sep 17 00:00:00 2001
From: Ahmed Awan <qe66653@umbc.edu>
Date: Tue, 13 Feb 2024 16:47:30 -0600
Subject: [PATCH] use `ActivityPanel` in `MultiviewPanel`

Adjust classes to make all activity panels look uniform
---
 .../History/Layout/DetailsLayout.vue          |  2 +-
 .../src/components/Panels/MultiviewPanel.vue  | 57 +++++++++----------
 2 files changed, 29 insertions(+), 30 deletions(-)

diff --git a/client/src/components/History/Layout/DetailsLayout.vue b/client/src/components/History/Layout/DetailsLayout.vue
index 1f73da6e7c76..2af7f399d88a 100644
--- a/client/src/components/History/Layout/DetailsLayout.vue
+++ b/client/src/components/History/Layout/DetailsLayout.vue
@@ -191,4 +191,4 @@ function selectText() {
         min-height: 2rem;
     }
 }
-</style>
\ No newline at end of file
+</style>
diff --git a/client/src/components/Panels/MultiviewPanel.vue b/client/src/components/Panels/MultiviewPanel.vue
index 21b3fc11dadc..42a435a787b0 100644
--- a/client/src/components/Panels/MultiviewPanel.vue
+++ b/client/src/components/Panels/MultiviewPanel.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { library } from "@fortawesome/fontawesome-svg-core";
-import { faColumns, faUndo } from "@fortawesome/free-solid-svg-icons";
+import { faColumns, faPlus, faUndo } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
 import { storeToRefs } from "pinia";
 import { computed, ref } from "vue";
@@ -16,12 +16,13 @@ import { errorMessageAsString } from "@/utils/simple-error";
 
 import FilterMenu from "@/components/Common/FilterMenu.vue";
 import HistoryList from "@/components/History/HistoryScrollList.vue";
+import ActivityPanel from "@/components/Panels/ActivityPanel.vue";
 
 const route = useRoute();
 const router = useRouter();
 
 // @ts-ignore bad library types
-library.add(faColumns, faUndo);
+library.add(faColumns, faPlus, faUndo);
 
 const filter = ref("");
 const showAdvanced = ref(false);
@@ -95,27 +96,23 @@ function userTitle(title: string) {
 </script>
 
 <template>
-    <div class="unified-panel" aria-labelledby="multiview-heading">
-        <div unselectable="on">
-            <div class="unified-panel-header-inner">
-                <nav class="d-flex justify-content-between mx-3 my-2">
-                    <h2 v-localize class="m-1 h-sm">Select Histories</h2>
-                    <b-button-group>
-                        <b-button
-                            v-b-tooltip.bottom.hover
-                            data-description="create new history for multiview"
-                            size="sm"
-                            variant="link"
-                            :title="userTitle('Create new history and show in multiview')"
-                            :disabled="isAnonymous"
-                            @click="createAndPin">
-                            <Icon fixed-width icon="plus" />
-                        </b-button>
-                    </b-button-group>
-                </nav>
-            </div>
-        </div>
-        <div class="unified-panel-controls">
+    <ActivityPanel title="Select Histories">
+        <template v-slot:header-buttons>
+            <b-button-group>
+                <b-button
+                    v-b-tooltip.bottom.hover
+                    data-description="create new history for multiview"
+                    size="sm"
+                    variant="link"
+                    :title="userTitle('Create new history and show in multiview')"
+                    :disabled="isAnonymous"
+                    @click="createAndPin">
+                    <FontAwesomeIcon :icon="faPlus" fixed-width />
+                </b-button>
+            </b-button-group>
+        </template>
+
+        <template v-slot:header>
             <FilterMenu
                 class="mb-3"
                 name="Histories"
@@ -130,33 +127,35 @@ function userTitle(title: string) {
                     v-b-tooltip.hover.noninteractive.bottom
                     :aria-label="userTitle('Open History Multiview in center panel')"
                     :title="userTitle('Open History Multiview in center panel')"
-                    class="w-100 mb-2"
+                    class="w-100"
                     size="sm"
                     :disabled="isAnonymous"
                     @click="router.push('/histories/view_multiple')">
-                    <FontAwesomeIcon icon="columns" />
+                    <FontAwesomeIcon :icon="faColumns" class="mr-1" />
                     <span v-localize>Open History Multiview</span>
                 </b-button>
                 <b-button-group
                     v-else
                     v-b-tooltip.hover.noninteractive.bottom
-                    class="w-100 mb-2"
+                    class="w-100"
                     :aria-label="pinRecentTitle"
                     :title="pinRecentTitle">
                     <b-button size="sm" :disabled="!pinnedHistoryCount" @click="pinRecent">
                         <span class="position-relative">
-                            <FontAwesomeIcon v-if="pinnedHistoryCount" icon="undo" class="mr-1" />
+                            <FontAwesomeIcon v-if="pinnedHistoryCount" :icon="faUndo" class="mr-1" />
                             <b>{{ pinRecentText }}</b>
                         </span>
                     </b-button>
                 </b-button-group>
             </section>
-        </div>
+        </template>
+
         <div v-if="isAnonymous">
             <b-badge class="alert-info w-100 mx-2">
                 Please <a :href="withPrefix('/login')">log in or register</a> to create multiple histories.
             </b-badge>
         </div>
+
         <HistoryList v-show="!showAdvanced" multiple :filter="filter" :loading.sync="loading" @setFilter="setFilter" />
-    </div>
+    </ActivityPanel>
 </template>