GDB-11251 - add copy button to repo info popover. Known issue: popove…

…r won't close GDB-11251 - move popover to another element in order to allow it to close GDB-11251 - improve repo popover behavior GDB-11251 - rename fields and functions for better readability
Ontotext-AD · Dec 11, 2024 · e6c2a2f · e6c2a2f
1 parent 7e6161f
commit e6c2a2f
Show file tree

Hide file tree

Showing 2 changed files with 40 additions and 3 deletions.
diff --git a/src/js/angular/controllers.js b/src/js/angular/controllers.js
@@ -600,6 +600,7 @@ function mainCtrl($scope, $menuItems, $jwtAuth, $http, toastr, $location, $repos
     window.addEventListener('storage', localStoreChangeHandler);
 
     $scope.$on('$destroy', () => {
+        document.removeEventListener('click', closeActiveRepoPopoverEventHandler);
         window.removeEventListener('storage', localStoreChangeHandler);
         deregisterMenuWatcher();
         if ($scope.checkMenu) {
@@ -638,6 +639,12 @@ function mainCtrl($scope, $menuItems, $jwtAuth, $http, toastr, $location, $repos
         $scope.popoverRepo = repository;
     };
 
+    // When the dropdown list is open, the popover of the already selected repo should disappear on mouseover on any of the listed options
+    $scope.handlePopovers = function (repository) {
+        $scope.setPopoverRepo(repository);
+        $scope.closeActiveRepoPopover();
+    };
+
     $scope.isRepoActive = function (repository) {
         return $repositories.isRepoActive(repository);
     };
@@ -652,6 +659,29 @@ function mainCtrl($scope, $menuItems, $jwtAuth, $http, toastr, $location, $repos
         }
     };
 
+    $scope.isActiveRepoPopoverOpen = false;
+
+    $scope.openActiveRepoPopover = function () {
+        if ($scope.getActiveRepository()) {
+            $scope.isActiveRepoPopoverOpen = true;
+        }
+    };
+
+    $scope.closeActiveRepoPopover = function () {
+       $scope.isActiveRepoPopoverOpen = false;
+    };
+
+    const closeActiveRepoPopoverEventHandler = function(event) {
+        const popoverElement = document.querySelector('.popover');
+        if ($scope.isActiveRepoPopoverOpen && popoverElement && !popoverElement.contains(event.target)) {
+            $timeout(function () {
+                $scope.isActiveRepoPopoverOpen = false;
+            }, 0);
+        }
+    };
+
+    document.addEventListener('click', closeActiveRepoPopoverEventHandler);
+
     $scope.getDegradedReason = function () {
         return $repositories.getDegradedReason();
     };

diff --git a/src/template.html b/src/template.html
@@ -42,9 +42,16 @@
     <!-- Current repository and repository selection dropdown -->
     <div id="repositorySelectDropdown" class="btn-group" role="group" ng-show="!embedded">
         <button id="btnReposGroup" type="button" class="btn btn-secondary dropdown-toggle"
+                ng-mouseover="setPopoverRepo(getActiveRepositoryObject())"
+                popover-trigger="none"
+                popover-is-open="isActiveRepoPopoverOpen"
+                popover-popup-delay="500"
+                ng-mouseenter="openActiveRepoPopover()"
+                popover-placement="left-bottom"
+                uib-popover-template="popoverTemplate"
+                popover-title="{{'security.repository.title' | translate}} {{getActiveRepositoryObject().id}}"
                 data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" guide-selector="repositoriesGroupButton">
-            <span ng-mouseover="setPopoverRepo(getActiveRepositoryObject())" popover-popup-delay="1000" popover-trigger="mouseenter" popover-placement="left-bottom"
-                  uib-popover-template="popoverTemplate" popover-title="{{'security.repository.title' | translate}} {{getActiveRepositoryObject().id}}" ng-if="getActiveRepository()"
+            <span ng-if="getActiveRepository()"
                   guide-selector="repository-{{getActiveRepositoryObject().id}}-button"
                   class="active-repository">
                 <em ng-class="'icon-repo-' + getActiveRepositoryObject().type"></em>
@@ -56,7 +63,7 @@
         <ul class="dropdown-menu dropdown-menu-right pre-scrollable" aria-labelledby="dropdownMenuButton">
             <li ng-repeat="repository in getReadableRepositories() | orderBy: ['location', 'id']"
                 ng-if="!isRepoActive(repository)"
-                ng-mouseover="setPopoverRepo(repository)" popover-popup-delay="500"
+                ng-mouseover="handlePopovers(repository)" popover-popup-delay="500"
                 popover-trigger="mouseenter" popover-placement="left"
                 uib-popover-template="popoverTemplate" popover-title="{{'security.repository.title' | translate}} {{repository.id}}">
                 <a class="dropdown-item" ng-click="setRepository(repository)" guide-selector="repository-{{repository.id}}-button">