Skip to content

Commit

Permalink
Merge pull request #3169 from SEED-platform/2508-fix/fix-tooltips
Browse files Browse the repository at this point in the history 
fix: popovers now open one at a time and disappear with scrolling
  • Loading branch information
Ryo committed Mar 16, 2022
2 parents 8350c1a + f732ffa commit 1f65433
Show file tree
Hide file tree
Showing 2 changed files with 11 additions and 8 deletions.
3 changes: 3 additions & 0 deletions seed/static/seed/js/controllers/inventory_detail_controller.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -117,6 +117,9 @@ angular.module('BE.seed.controller.inventory_detail', [])
}
$scope.users = users_payload.users;

// handle popovers cleared on scrolling
[document.getElementsByClassName('ui-view-container')[0], document.getElementById('pin')].forEach(el => {if (el) el.onscroll = document.body.click;})

// Flag columns whose values have changed between imports and edits.
var historical_states = _.map($scope.historical_items, 'state');

Expand Down
16 changes: 8 additions & 8 deletions seed/static/seed/partials/inventory_detail.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -93,7 +93,7 @@ <h2>
</div>
</div>
<div class="ellipsis">
<span popover-placement="top-left" popover-animation="false" popover-trigger="outsideClick" uib-popover="{$:: cycle.name $}">
<span uib-popover="{$:: cycle.name $}" popover-trigger="'outsideClick'" popover-animation="false" popover-placement="top-left">
<strong>{$:: 'Cycle' | translate $}:</strong> {$:: cycle.name $}
</span>
</div>
Expand Down Expand Up @@ -149,7 +149,7 @@ <h2>
</th>
<!-- Historical values -->
<th ng-repeat="historical_item in ::historical_items">
<div ng-if="::_.includes(['ImportFile', 'UserEdit'], historical_item.source)" uib-popover="{$:: historical_item.filename $}" popover-placement="bottom">
<div ng-if="::_.includes(['ImportFile', 'UserEdit'], historical_item.source)" uib-popover="{$:: historical_item.filename $}" popover-trigger="'outsideClick'" popover-animation="false" popover-placement="top-left">
{$:: historical_item.filename $}
<a ng-if="::historical_item.file" style="padding-left: 8px;" href="{$:: historical_item.file $}" download="{$:: historical_item.filename $}">
<i class="fa fa-download" aria-hidden="true"></i>
Expand All @@ -165,28 +165,28 @@ <h2>

<!-- Show read-only current 'regular' field value -->
<td ng-if="edit_form_showing===false && !col.is_extra_data && !col.is_derived_column && col.table_name.toLowerCase().includes('state')" ng-class="{highlight: col.changed}" class="ellipsis">
<span class="sd-data-content" popover-placement="top-left" popover-animation="false" popover-trigger="outsideClick" uib-popover="{$:: item_state[col.column_name] $}">
<span class="sd-data-content" uib-popover="{$:: item_state[col.column_name] $}" popover-trigger="'outsideClick'" popover-animation="false" popover-placement="top-left">
<span>{$:: displayValue(col.data_type, item_state[col.column_name]) $}</span>
</span>
</td>

<!-- Show read-only current 'extra_data' field value -->
<td ng-if="edit_form_showing===false && col.is_extra_data && col.table_name.toLowerCase().includes('state')" ng-class="{highlight: col.changed}" class="ellipsis">
<span class="sd-data-content" popover-placement="top-left" popover-animation="false" popover-trigger="outsideClick" uib-popover="{$ item_state.extra_data[col.column_name] $}">
<span class="sd-data-content" uib-popover="{$ item_state.extra_data[col.column_name] $}" popover-trigger="'outsideClick'" popover-animation="false" popover-placement="top-left">
<span>{$:: displayValue(col.data_type, item_state.extra_data[col.column_name]) $}</span>
</span>
</td>

<!-- Show read-only current 'property / taxlot' fields -->
<td ng-if="edit_form_showing===false && !col.table_name.toLowerCase().includes('state') && !col.is_derived_column" ng-class="{highlight: col.changed}" class="ellipsis">
<span class="sd-data-content" popover-placement="top-left" popover-animation="false" popover-trigger="outsideClick" uib-popover="{$ item_parent[col.column_name] $}">
<span class="sd-data-content" uib-popover="{$ item_parent[col.column_name] $}" popover-trigger="'outsideClick'" popover-animation="false" popover-placement="top-left">
<span>{$:: displayValue(col.data_type, item_parent[col.column_name]) $}</span>
</span>
</td>

<!-- Show read-only current derived column value -->
<td ng-if="edit_form_showing===false && col.is_derived_column" class="ellipsis">
<span class="sd-data-content" popover-placement="top-left" popover-animation="false" popover-trigger="outsideClick" uib-popover="{$ item_derived_values[col.column_name] $}">
<span class="sd-data-content" uib-popover="{$ item_derived_values[col.column_name] $}" popover-trigger="'outsideClick'" popover-animation="false" popover-placement="top-left">
<span ng-if="!item_derived_values.hasOwnProperty(col.id)"><i class="fa fa-spinner fa-pulse fa-fw" style="padding-right: 0"></i> Loading...</span>
<span ng-if="!!item_derived_values.hasOwnProperty(col.id)">{$ item_derived_values[col.id] $}</span>
</span>
Expand All @@ -210,10 +210,10 @@ <h2>

<!-- Show read-only historical field value -->
<td ng-repeat="historical_item in historical_items" ng-class="{highlight: col.changed}" class="ellipsis">
<span ng-if="::!col.is_extra_data && col.table_name.toLowerCase().includes('state')" class="sd-data-content" popover-placement="top-left" popover-trigger="outsideClick" popover-animation="false" uib-popover="{$:: historical_item.state[col.column_name] $}">
<span ng-if="::!col.is_extra_data && col.table_name.toLowerCase().includes('state')" class="sd-data-content" uib-popover="{$:: historical_item.state[col.column_name] $}" popover-trigger="'outsideClick'" popover-animation="false" popover-placement="top-left">
<span>{$:: displayValue(col.data_type, historical_item.state[col.column_name]) $}</span>
</span>
<span ng-if="::col.is_extra_data && col.table_name.toLowerCase().includes('state')" class="sd-data-content" popover-placement="top-left" popover-trigger="outsideClick" popover-animation="false" uib-popover="{$:: historical_item.state.extra_data[col.column_name] $}">
<span ng-if="::col.is_extra_data && col.table_name.toLowerCase().includes('state')" class="sd-data-content" uib-popover="{$:: historical_item.state.extra_data[col.column_name] $}" popover-trigger="'outsideClick'" popover-animation="false" popover-placement="top-left">
<span>{$:: displayValue(col.data_type, historical_item.state.extra_data[col.column_name]) $}</span>
</span>
</td>
Expand Down

0 comments on commit 1f65433

Please sign in to comment.