Add more z-index fixes (#4665)

superdesk · Nov 5, 2024 · 7c33757 · 7c33757
1 parent 25c8b35
commit 7c33757
Show file tree

Hide file tree

Showing 7 changed files with 20 additions and 7 deletions.
diff --git a/scripts/apps/authoring-react/article-widgets/comments/index.tsx b/scripts/apps/authoring-react/article-widgets/comments/index.tsx
@@ -4,6 +4,7 @@ import {IArticleSideWidget, IArticleSideWidgetComponentType, IComment, IRestApiR
 import {gettext} from 'core/utils';
 import CommentsWidget from '../../generic-widgets/comments/CommentsWidget';
 import {httpRequestJsonLocal} from 'core/helpers/network';
+import {notify} from 'core/notify/notify';
 // Can't call `gettext` in the top level
 const getLabel = () => gettext('Comments');
 
@@ -49,7 +50,13 @@ class Component extends React.PureComponent<IArticleSideWidgetComponentType> {
                             item: this.props.article._id,
                             text: text,
                         },
-                    });
+                    })
+                        .then((res: void) => res)
+                        .catch((error) => {
+                            if (error.data._issues?.text != null) {
+                                notify.error(error.data._issues.text);
+                            }
+                        });
                 }}
             />
         );

diff --git a/scripts/apps/authoring/comments/comments.ts b/scripts/apps/authoring/comments/comments.ts
@@ -1,3 +1,4 @@
+import {notify} from 'core/notify/notify';
 import {gettext} from 'core/utils';
 import {each} from 'lodash';
 
@@ -22,7 +23,11 @@ function CommentsService(api) {
     };
 
     this.save = function(comment) {
-        return api.item_comments.save(comment);
+        return api.item_comments.save(comment).catch((error) => {
+            if (error.data._issues?.text != null) {
+                notify.error(error.data._issues.text);
+            }
+        });
     };
 }
 

diff --git a/scripts/apps/authoring/views/change-image.html b/scripts/apps/authoring/views/change-image.html
@@ -1,4 +1,4 @@
-<div class="modal__header modal__header--flex" data-test-id="change-image" data-theme="dark-ui">
+<div class="modal__header modal__header--flex" style="z-index:1051" data-test-id="change-image" data-theme="dark-ui">
     <h3 class="modal__heading modal__heading--no-grow" ng-if="!nav || nav === 'view'">{{ :: activity.label}}</h3>
     <h3 class="modal__heading modal__heading--no-grow" ng-if="nav === 'image-edit'">{{ :: 'Edit image' | translate }}</h3>
     <h3 class="modal__heading modal__heading--no-grow" ng-if="nav === 'crop'">{{ :: 'Edit Crops' | translate }}</h3>

diff --git a/scripts/core/activity/views/activity-modal.html b/scripts/core/activity/views/activity-modal.html
@@ -1,4 +1,4 @@
-<div class="modal in {{activity.cssClass}}" ng-if="activity">
+<div style="z-index: 1051 !important;" class="modal in {{activity.cssClass}}" ng-if="activity">
     <div class="modal__dialog" ng-controller="activity.controller">
         <div class="modal__content" ng-include="activity.templateUrl"></div>
     </div>

diff --git a/scripts/core/editor3/components/HighlightsPopupPositioner.tsx b/scripts/core/editor3/components/HighlightsPopupPositioner.tsx
@@ -27,7 +27,8 @@ function getNextPosition(originalElement, editorNode) {
     element.style.bottom = '';
     mainFlexElement.style['max-height'] = '';
 
-    element.style.left = (editorNode.getBoundingClientRect().left - 360) + 'px';
+    // Math.abs is needed, so that the popover is never positioned outside of the viewport
+    element.style.left = `${Math.abs(editorNode.getBoundingClientRect().left - 360)}px`;
 
     const paddingBlockStart = 4;
     const paddingBlockEnd = 4;

diff --git a/scripts/core/editor3/components/annotations/AnnotationInput.tsx b/scripts/core/editor3/components/annotations/AnnotationInput.tsx
@@ -298,7 +298,7 @@ class AnnotationInputBody extends React.Component<IProps, IState> {
                 ref={(component) => {
                     this.positionerRef = component;
                 }}
-                zIndex={90}
+                zIndex={1051}
             >
                 <Card padding={10}>
                     <div className="annotation-input" style={{width: 460}}>

diff --git a/scripts/core/menu/views/superdesk-view.html b/scripts/core/menu/views/superdesk-view.html
@@ -34,7 +34,7 @@
 
 <div id="main-container" ng-class="superdesk.flags" ng-if="renderMonitoring && superdesk.flags.workspace === false" ng-view></div>
 
-<div id="react-placeholder"></div>
+<div style="z-index: 1051 !important" id="react-placeholder"></div>
 <div id="react-backdrop"></div>
 
 <div sd-activity-modal></div>