@topconsultnpm/sdkui-react-beta 6.14.129 → 6.14.131

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (4) hide show
  1. package/lib/components/features/assistant/ToppyHelpCenter.js +23 -23
  2. package/lib/components/features/documents/TMDcmtForm.js +1 -1
  3. package/lib/components/grids/TMBlogs.js +2 -2
  4. package/package.json +1 -1
package/lib/components/features/assistant/ToppyHelpCenter.js CHANGED
@@ -4,7 +4,6 @@ import ReactDOM from 'react-dom';
4
4
  import styled, { keyframes, css } from 'styled-components';
5
5
  import Toppy from '../../../assets/Toppy-generico.png';
6
6
  import { DeviceType } from '../../base/TMDeviceProvider';
7
- import { IconWindowMinimize, IconWindowMaximize } from '../../../helper';
8
7
  const toppyEntrance = keyframes `
9
8
  0% { right: -200px; opacity: 0; }
10
9
  60% { opacity: 1; }
@@ -39,15 +38,14 @@ const wiggle = keyframes `
39
38
  90% { transform: rotate(5deg) scale(1); }
40
39
  100% { transform: rotate(-5deg) scale(1.08); }
41
40
  `;
42
- // Styled Components
43
41
  const ToppyContainer = styled.div `
44
42
  position: ${({ $fixed }) => ($fixed ? 'fixed' : 'absolute')};
45
- bottom: ${({ $isCollapsed, $isMobile }) => $isMobile ? '60px' : $isCollapsed ? '5px' : '-20px'};
43
+ bottom: ${({ $isCollapsed, $isMobile }) => $isMobile ? '5px' : $isCollapsed ? '5px' : '-20px'};
46
44
  ${({ $align, $isCollapsed }) => $align === 'left'
47
45
  ? `left: ${$isCollapsed ? '5px' : '10px'}; right: auto;`
48
46
  : `right: ${$isCollapsed ? '5px' : '10px'}; left: auto;`}
49
47
  display: flex;
50
- flex-direction: column-reverse;
48
+ flex-direction: column-reverse; /* Il contenuto è sopra l'immagine */
51
49
  align-items: ${({ $align }) => $align === 'left' ? 'flex-start' : 'flex-end'};
52
50
  animation: ${({ $fixed }) => $fixed && css `${toppyEntrance} 0.5s cubic-bezier(0.23, 1, 0.32, 1)`};
53
51
  z-index: ${({ $fixed }) => ($fixed ? 2147483647 : 10)};
@@ -69,16 +67,17 @@ const ToppyImage = styled.img `
69
67
  css `
70
68
  /* animation: ${bounceAnimation} 2s infinite; */
71
69
  /* animation: ${pulseAnimation} 2s infinite; */
72
- animation: ${wiggle} 2s infinite;
70
+ animation: ${wiggle} 4s infinite;
73
71
  `}
74
72
  `;
75
73
  const ToppyContent = styled.div `
76
74
  margin-bottom: ${({ $isMobile, $align }) => $align === 'left'
77
- ? '50px'
75
+ ? '30px' // Spazio tra ToppyContent e ToppyImage
78
76
  : $isMobile
79
- ? '10px'
77
+ ? '30px'
80
78
  : '20px'};
81
- margin-left: ${({ $align }) => $align === 'left' ? '50px' : '0'};
79
+
80
+
82
81
  display: ${props => (props.$isCollapsed ? 'none' : 'block')};
83
82
  width: max-content;
84
83
  max-width: 250px;
@@ -88,21 +87,31 @@ const ToppyContent = styled.div `
88
87
  rgba(27, 20, 100, 0.65) 100%
89
88
  );
90
89
  color: white;
91
- padding: ${props => props.$isMobile ? '18px' : '10px'};
90
+ padding: 10px;
92
91
  border-radius: 10px;
93
92
  border: 1px solid #FFFFFF;
94
93
  opacity: ${props => (props.$isCollapsed ? 0 : 1)};
95
94
  transform: ${props => (props.$isCollapsed ? 'translateY(20px)' : 'translateY(0)')};
96
95
  transition: opacity 0.3s ease, transform 0.3s ease;
97
96
  pointer-events: ${props => (props.$isCollapsed ? 'none' : 'auto')};
98
- position: relative;
97
+ position: relative;
98
+
99
+ ${({ $align, $isMobile }) => $align === 'left' &&
100
+ css `
101
+ position: absolute;
102
+ left: 50px;
103
+ right: auto;
104
+ bottom: 100%;
105
+ transform: translateY(-${$isMobile ? '10px' : '20px'});
106
+ `}
99
107
 
100
108
  &::after {
101
109
  transform: ${({ $align }) => $align === 'left' ? 'skewX(15deg)' : 'skewX(-15deg)'};
102
110
  content: "";
103
111
  position: absolute;
104
112
  top: 100%;
105
- ${({ $align }) => $align === 'left' ? 'left: 25px; right: auto;' : 'right: 25px; left: auto;'}
113
+
114
+ ${({ $align }) => $align === 'left' ? 'left: 20px; right: auto;' : 'right: 15px; left: auto;'}
106
115
  border-width: 32px 32px 0 0;
107
116
  border-style: solid;
108
117
  border-color: #FFFFFF transparent;
@@ -117,7 +126,8 @@ const ToppyContent = styled.div `
117
126
  content: "";
118
127
  position: absolute;
119
128
  top: 100%;
120
- ${({ $align }) => $align === 'left' ? 'left: 27px; right: auto;' : 'right: 27px; left: auto;'}
129
+
130
+ ${({ $align }) => $align === 'left' ? 'left: 20px; right: auto;' : 'right: 15px; left: auto;'}
121
131
  border-width: 32px 32px 0 0;
122
132
  border-style: solid;
123
133
  border-color: rgba(27, 20, 100, 0.65) transparent;
@@ -127,16 +137,6 @@ const ToppyContent = styled.div `
127
137
  z-index: 2;
128
138
  }
129
139
  `;
130
- const CollapseButton = styled.button `
131
- position: absolute;
132
- top: 5px;
133
- right: 5px;
134
- background: transparent;
135
- border: none;
136
- color: white;
137
- cursor: pointer;
138
- font-size: 1.2rem;
139
- `;
140
140
  const ToppyHelpCenter = ({ content, deviceType, usePortal = true, align = 'right', onToppyImageClick }) => {
141
141
  const [isCollapsed, setIsCollapsed] = useState(false);
142
142
  const [portalContainer, setPortalContainer] = useState(null);
@@ -161,7 +161,7 @@ const ToppyHelpCenter = ({ content, deviceType, usePortal = true, align = 'right
161
161
  onToppyImageClick?.();
162
162
  };
163
163
  const isMobile = deviceType === DeviceType.MOBILE;
164
- const toppyComponent = (_jsxs(ToppyContainer, { "$isMobile": isMobile, "$isCollapsed": isCollapsed, "$fixed": usePortal, "$align": align, children: [_jsx(ToppyImage, { "$isMobile": isMobile, "$isCollapsed": isCollapsed, "$align": align, onClick: toggleCollapse, src: Toppy, alt: "Toppy" }), _jsxs(ToppyContent, { "$isCollapsed": isCollapsed, "$isMobile": isMobile, "$align": align, children: [_jsx(CollapseButton, { onClick: toggleCollapse, children: isCollapsed ? _jsx(IconWindowMaximize, { fontSize: 16 }) : _jsx(IconWindowMinimize, { fontSize: 16 }) }), content] })] }));
164
+ const toppyComponent = (_jsxs(ToppyContainer, { "$isMobile": isMobile, "$isCollapsed": isCollapsed, "$fixed": usePortal, "$align": align, children: [_jsx(ToppyImage, { "$isMobile": isMobile, "$isCollapsed": isCollapsed, "$align": align, onClick: toggleCollapse, src: Toppy, alt: "Toppy" }), _jsx(ToppyContent, { "$isCollapsed": isCollapsed, "$isMobile": isMobile, "$align": align, children: content })] }));
165
165
  if (usePortal) {
166
166
  if (!portalContainer)
167
167
  return null;
package/lib/components/features/documents/TMDcmtForm.js CHANGED
@@ -642,7 +642,7 @@ const TMDcmtForm = ({ showHeader = true, onSaveRecents, layoutMode = LayoutModes
642
642
  } }), showApprovePopup && _jsx(WorkFlowApproveRejectPopUp, { deviceType: deviceType, onCompleted: handleWFOperationCompleted, TID: approvalVID, DID: DID, isReject: 0, onClose: () => setShowApprovePopup(false) }), showRejectPopup && _jsx(WorkFlowApproveRejectPopUp, { deviceType: deviceType, onCompleted: handleWFOperationCompleted, TID: approvalVID, DID: DID, isReject: 1, onClose: () => setShowRejectPopup(false) }), showReAssignPopup && _jsx(WorkFlowReAssignPopUp, { deviceType: deviceType, onCompleted: handleWFOperationCompleted, TID: approvalVID, DID: DID, onClose: () => setShowReAssignPopup(false) }), showMoreInfoPopup && _jsx(WorkFlowMoreInfoPopUp, { deviceType: deviceType, onCompleted: handleWFOperationCompleted, TID: approvalVID, DID: DID, onClose: () => setShowMoreInfoPopup(false) }), (isModal && onClose) && _jsx("div", { id: "TMDcmtFormShowConfirmForClose-" + id })] }), showToppyForApprove && (_jsx(ToppyHelpCenter, { deviceType: deviceType, usePortal: false, content: workItems.length === 1 ?
643
643
  _jsx("div", { style: { display: 'flex', flexDirection: 'column', gap: '10px' }, children: _jsx(WorkFlowOperationButtons, { deviceType: deviceType, onApprove: () => setShowApprovePopup(true), onSignApprove: () => ShowAlert({ message: 'TODO', mode: 'info', title: SDKUI_Localizator.SignatureAndApprove, duration: 3000 }), onReject: () => setShowRejectPopup(true), onReAssign: () => setShowReAssignPopup(true), onMoreInfo: () => setShowMoreInfoPopup(true) }) })
644
644
  :
645
- _jsxs("div", { style: { padding: 10, color: 'white', maxWidth: '180px', borderRadius: 10, background: '#1B1464 0% 0% no-repeat padding-box', border: '1px solid #FFFFFF' }, children: [`Devi approvare ${workItems.length} workitem(s) per questo documento.`, `Vai alla sezione di approvazione.`] }) })), showToppyForCompleteMoreInfo && (_jsx(ToppyHelpCenter, { deviceType: deviceType, usePortal: false, content: _jsxs("div", { style: { paddingRight: 15, display: 'flex', flexDirection: 'column', gap: 10 }, children: [_jsx("div", { style: { padding: 10, color: 'white', maxWidth: '180px', borderRadius: 10, background: '#1B1464 0% 0% no-repeat padding-box', border: '1px solid #FFFFFF' }, children: `${SDKUI_Localizator.MoreInfoCompleteRequestSentBy} ${taskMoreInfo?.fromName}!` }), _jsx(TMButton, { caption: SDKUI_Localizator.CommentAndComplete, color: 'success', showTooltip: false, onClick: () => {
645
+ _jsxs("div", { style: { padding: 10, color: 'white', maxWidth: '180px', borderRadius: 10, background: '#1B1464 0% 0% no-repeat padding-box', border: '1px solid #FFFFFF' }, children: [`Devi approvare ${workItems.length} workitem(s) per questo documento.`, `Vai alla sezione di approvazione.`] }) })), showToppyForCompleteMoreInfo && (_jsx(ToppyHelpCenter, { deviceType: deviceType, usePortal: false, content: _jsxs("div", { style: { display: 'flex', flexDirection: 'column', gap: 10 }, children: [_jsx("div", { style: { padding: 10, color: 'white', maxWidth: '180px', borderRadius: 10, background: '#1B1464 0% 0% no-repeat padding-box', border: '1px solid #FFFFFF' }, children: `${SDKUI_Localizator.MoreInfoCompleteRequestSentBy} ${taskMoreInfo?.fromName}!` }), _jsx(TMButton, { caption: SDKUI_Localizator.CommentAndComplete, color: 'success', showTooltip: false, onClick: () => {
646
646
  setShowCommentForm(true);
647
647
  } })] }) })), (showCommentForm && TID && DID) &&
648
648
  _jsx(TMBlogCommentForm, { context: { engine: 'SearchEngine', object: { tid: TID, did: DID } }, onClose: () => setShowCommentForm(false), refreshCallback: completeMoreInfoCallback, participants: [], showAttachmentsSection: false }), isOpenDetails &&
package/lib/components/grids/TMBlogs.js CHANGED
@@ -407,7 +407,7 @@ const TMBlogs = (props) => {
407
407
  // Scroll the focused blog post into view
408
408
  useEffect(() => {
409
409
  if (focusedBlog && focusedBlog.id && containerRef.current) {
410
- const focusedElement = document.getElementById(id + "-" + uiId + focusedBlog.id.toString());
410
+ const focusedElement = document.getElementById(id + "-" + uiId + "-" + focusedBlog.id.toString());
411
411
  if (focusedElement) {
412
412
  focusedElement.scrollIntoView({ behavior: 'smooth', block: 'center' });
413
413
  }
@@ -417,7 +417,7 @@ const TMBlogs = (props) => {
417
417
  const scrollRef = useRef(null);
418
418
  useEffect(() => {
419
419
  if (focusedBlog && focusedBlog.id) { // containerRef.current
420
- const focusedElement = document.getElementById(id + "-" + uiId + focusedBlog.id.toString());
420
+ const focusedElement = document.getElementById(id + "-" + uiId + "-" + focusedBlog.id.toString());
421
421
  if (focusedElement) {
422
422
  focusedElement.scrollIntoView({ behavior: 'smooth', block: 'center' });
423
423
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@topconsultnpm/sdkui-react-beta",
3
- "version": "6.14.129",
3
+ "version": "6.14.131",
4
4
  "description": "",
5
5
  "scripts": {
6
6
  "test": "echo \"Error: no test specified\" && exit 1",