@topconsultnpm/sdkui-react 6.20.0-dev1.104 → 6.20.0-dev1.106
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.
|
@@ -0,0 +1,87 @@
|
|
|
1
|
+
<?xml version="1.0" encoding="UTF-8"?>
|
|
2
|
+
<svg id="Livello_2" data-name="Livello 2" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 1920 505.45">
|
|
3
|
+
<defs>
|
|
4
|
+
<style>
|
|
5
|
+
.cls-1 {
|
|
6
|
+
fill: url(#Sfumatura_senza_nome_6);
|
|
7
|
+
}
|
|
8
|
+
|
|
9
|
+
.cls-1, .cls-2, .cls-3, .cls-4 {
|
|
10
|
+
opacity: .5;
|
|
11
|
+
}
|
|
12
|
+
|
|
13
|
+
.cls-5 {
|
|
14
|
+
clip-path: url(#clippath-2);
|
|
15
|
+
}
|
|
16
|
+
|
|
17
|
+
.cls-5, .cls-6, .cls-7, .cls-8, .cls-9 {
|
|
18
|
+
fill: none;
|
|
19
|
+
}
|
|
20
|
+
|
|
21
|
+
.cls-2 {
|
|
22
|
+
fill: url(#Sfumatura_senza_nome_2);
|
|
23
|
+
}
|
|
24
|
+
|
|
25
|
+
.cls-6 {
|
|
26
|
+
clip-path: url(#clippath-3);
|
|
27
|
+
}
|
|
28
|
+
|
|
29
|
+
.cls-8 {
|
|
30
|
+
clip-path: url(#clippath);
|
|
31
|
+
}
|
|
32
|
+
|
|
33
|
+
.cls-3 {
|
|
34
|
+
fill: url(#Sfumatura_senza_nome_3-2);
|
|
35
|
+
}
|
|
36
|
+
|
|
37
|
+
.cls-9 {
|
|
38
|
+
clip-path: url(#clippath-1);
|
|
39
|
+
}
|
|
40
|
+
|
|
41
|
+
.cls-4 {
|
|
42
|
+
fill: url(#Sfumatura_senza_nome_3);
|
|
43
|
+
}
|
|
44
|
+
</style>
|
|
45
|
+
<clipPath id="clippath">
|
|
46
|
+
<rect class="cls-7" x="1237.53" y="0" width="682.47" height="326.62"/>
|
|
47
|
+
</clipPath>
|
|
48
|
+
<radialGradient id="Sfumatura_senza_nome_3" data-name="Sfumatura senza nome 3" cx="1285.93" cy="3418.23" fx="1285.93" fy="3418.23" r="50" gradientTransform="translate(-6983.46 -9577.73) scale(6.82 2.8)" gradientUnits="userSpaceOnUse">
|
|
49
|
+
<stop offset="0" stop-color="#2459a4"/>
|
|
50
|
+
<stop offset="1" stop-color="#fff" stop-opacity="0"/>
|
|
51
|
+
</radialGradient>
|
|
52
|
+
<clipPath id="clippath-1">
|
|
53
|
+
<rect class="cls-7" x="0" y="0" width="682.47" height="326.62" transform="translate(682.47 326.62) rotate(-180)"/>
|
|
54
|
+
</clipPath>
|
|
55
|
+
<radialGradient id="Sfumatura_senza_nome_6" data-name="Sfumatura senza nome 6" cx="1673.12" cy="3418.23" fx="1673.12" fy="3418.23" r="50" gradientTransform="translate(11545.93 -9577.73) rotate(-180) scale(6.82 -2.8)" gradientUnits="userSpaceOnUse">
|
|
56
|
+
<stop offset="0" stop-color="#2459a4"/>
|
|
57
|
+
<stop offset="1" stop-color="#fff" stop-opacity="0"/>
|
|
58
|
+
</radialGradient>
|
|
59
|
+
<clipPath id="clippath-2">
|
|
60
|
+
<rect class="cls-7" x="0" y="0" width="1055.7" height="297.5"/>
|
|
61
|
+
</clipPath>
|
|
62
|
+
<radialGradient id="Sfumatura_senza_nome_3-2" data-name="Sfumatura senza nome 3" cx="955.6" cy="3436.6" fx="955.6" fy="3436.6" r="50" gradientTransform="translate(-9560.44 -8770.57) scale(10.56 2.55)" xlink:href="#Sfumatura_senza_nome_3"/>
|
|
63
|
+
<clipPath id="clippath-3">
|
|
64
|
+
<rect class="cls-7" x="297.09" y="0" width="1055.7" height="505.45"/>
|
|
65
|
+
</clipPath>
|
|
66
|
+
<radialGradient id="Sfumatura_senza_nome_2" data-name="Sfumatura senza nome 2" cx="983.74" cy="3351.83" fx="983.74" fy="3351.83" r="50" gradientTransform="translate(-9560.44 -14533.91) scale(10.56 4.33)" gradientUnits="userSpaceOnUse">
|
|
67
|
+
<stop offset="0" stop-color="#2459a4"/>
|
|
68
|
+
<stop offset="1" stop-color="#fff"/>
|
|
69
|
+
</radialGradient>
|
|
70
|
+
</defs>
|
|
71
|
+
<g id="Livello_1-2" data-name="Livello 1">
|
|
72
|
+
<g>
|
|
73
|
+
<g class="cls-8">
|
|
74
|
+
<ellipse class="cls-4" cx="1792.58" cy="-7.96" rx="341.23" ry="139.98"/>
|
|
75
|
+
</g>
|
|
76
|
+
<g class="cls-9">
|
|
77
|
+
<ellipse class="cls-1" cx="127.42" cy="-7.96" rx="341.23" ry="139.98"/>
|
|
78
|
+
</g>
|
|
79
|
+
<g class="cls-5">
|
|
80
|
+
<ellipse class="cls-3" cx="527.85" cy="-7.25" rx="527.85" ry="127.5"/>
|
|
81
|
+
</g>
|
|
82
|
+
<g class="cls-6">
|
|
83
|
+
<ellipse class="cls-2" cx="824.94" cy="-12.32" rx="527.85" ry="216.62"/>
|
|
84
|
+
</g>
|
|
85
|
+
</g>
|
|
86
|
+
</g>
|
|
87
|
+
</svg>
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
|
|
2
2
|
import { useState, useEffect, useRef, useMemo } from 'react';
|
|
3
3
|
import six from '../../assets/six.png';
|
|
4
|
-
import { getAvatarColor, IconCloseOutline, IconCopy,
|
|
4
|
+
import { getAvatarColor, IconCloseOutline, IconCopy, openApps, SDKUI_Localizator } from '../../helper';
|
|
5
5
|
import styled, { keyframes } from 'styled-components';
|
|
6
6
|
import { SDK_Globals, AuthenticationModes, AppModules, UserLevels, CultureIDs } from '@topconsultnpm/sdk-ts';
|
|
7
7
|
import { TMColors } from '../../utils/theme';
|
|
@@ -87,7 +87,7 @@ export const copyUserInfoToClipboard = (userName, cultureId, archiveId, archiveD
|
|
|
87
87
|
};
|
|
88
88
|
export const TMSearchBar = ({ searchValue, onSearchValueChanged, maxWidth, marginLeft }) => {
|
|
89
89
|
const deviceType = useDeviceType();
|
|
90
|
-
return (_jsxs(StyledSearchBarContainer, { style: { maxWidth: maxWidth ? maxWidth : deviceType === DeviceType.MOBILE ? '65%' : '650px', marginLeft: marginLeft ? marginLeft : deviceType === DeviceType.MOBILE ? '10px' : '20px' }, "$isMobile": deviceType === DeviceType.MOBILE, children: [" ", _jsx(
|
|
90
|
+
return (_jsxs(StyledSearchBarContainer, { style: { maxWidth: maxWidth ? maxWidth : deviceType === DeviceType.MOBILE ? '65%' : '650px', marginLeft: marginLeft ? marginLeft : deviceType === DeviceType.MOBILE ? '10px' : '20px' }, "$isMobile": deviceType === DeviceType.MOBILE, children: [" ", _jsx(StyledSearchBar, { placeholder: SDKUI_Localizator.Search + '...', type: "text", value: searchValue, onChange: (e) => onSearchValueChanged(e.target.value) }), searchValue.length > 0 && _jsx(IconCloseOutline, { onClick: () => onSearchValueChanged(''), color: '#00000060', style: { cursor: 'pointer', position: 'absolute', width: '20px', height: '20px', right: '5px', top: '5px', zIndex: 1 } })] }));
|
|
91
91
|
};
|
|
92
92
|
const TMHeader = ({ customButtons = _jsx(_Fragment, {}), onMenusOpen, showSettingsMenu = true, showSearchBar = true, clearSearchJobValue, clearSearchQEValue, searchContext = TMSearchContext.JOBS, onChangePassword, onLogout, settingsMenuContext, onSeacrhJobsValueChange, onSeacrhJobslistValueChange, onSeacrhProcessMonitorValueChange, onSeacrhProcessValueChange, onSeacrhPlatformValueChange, onSeacrhQEValueChange, onSettingsClick }) => {
|
|
93
93
|
const [appRoutes, setAppRoutes] = useState();
|
|
@@ -302,9 +302,9 @@ const StyledLogo = styled.img `
|
|
|
302
302
|
`;
|
|
303
303
|
const StyledHeaderContainer = styled.div `
|
|
304
304
|
position:fixed;
|
|
305
|
-
|
|
306
|
-
|
|
307
|
-
background-
|
|
305
|
+
height:60px;
|
|
306
|
+
background: transparent;
|
|
307
|
+
background-size: 200%;
|
|
308
308
|
opacity: 1;
|
|
309
309
|
display: flex;
|
|
310
310
|
flex-direction: row;
|
|
@@ -381,8 +381,8 @@ const StyledHeaderIcon = styled.div `
|
|
|
381
381
|
filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.1));
|
|
382
382
|
}
|
|
383
383
|
`;
|
|
384
|
-
const StyledSearchBarContainer = styled.div ` position: relative; height:
|
|
385
|
-
const StyledSearchBar = styled.input ` background: #FFFFFF 0% 0% no-repeat padding-box; border: 1px solid #dbdbdb; border-radius: 5px; padding:
|
|
384
|
+
const StyledSearchBarContainer = styled.div ` position: relative; height:35px; width: 100%; max-width: ${props => props.$isMobile ? '65%' : '650px'}; margin-left: ${props => props.$isMobile ? '10px' : '50px'}; `;
|
|
385
|
+
const StyledSearchBar = styled.input ` background: #FFFFFF 0% 0% no-repeat padding-box; border: 1px solid #dbdbdb; border-radius: 5px; padding: 8px 30px 8px 20px; width:100%; transition: 100ms linear; &:focus{ outline: none; border-bottom: 2px solid ${TMColors.primary}; } `;
|
|
386
386
|
const StyledHeaderAppText = styled.h2 ` text-align: left; letter-spacing: 0px; color: ${TMColors.primary}; opacity: 1; `;
|
|
387
387
|
const AppMenuButton = styled.div `
|
|
388
388
|
width: 90px;
|
|
@@ -7,30 +7,32 @@ import { TMColors } from '../../utils/theme';
|
|
|
7
7
|
import TMSpinner from '../base/TMSpinner';
|
|
8
8
|
import { TMExceptionBoxManager } from '../base/TMPopUp';
|
|
9
9
|
const StyledTMSidebarContainer = styled.div `
|
|
10
|
-
top: ${props => props.$top || '
|
|
10
|
+
top: ${props => props.$top || '70px'};
|
|
11
11
|
left: ${props => props.$left || '0px'};
|
|
12
12
|
width: ${props => props.$width || '50px'};
|
|
13
|
-
height: ${props => props.$height || 'calc(100% -
|
|
14
|
-
background: ${() => TMColors.primaryColor} 0
|
|
15
|
-
box-shadow:
|
|
16
|
-
border-radius:
|
|
13
|
+
height: ${props => props.$height || 'calc(100% - 90px)'};
|
|
14
|
+
background: linear-gradient(180deg, ${() => TMColors.primaryColor} 0%, #0a3d23 100%);
|
|
15
|
+
box-shadow: 2px 0 8px rgba(0,0,0,0.08);
|
|
16
|
+
border-radius: 0px 10px 10px 0px;
|
|
17
17
|
opacity: 1;
|
|
18
18
|
display: flex;
|
|
19
19
|
flex-direction: column;
|
|
20
20
|
justify-content: space-between;
|
|
21
21
|
align-items: center;
|
|
22
|
-
padding:
|
|
22
|
+
padding: 20px 0px;
|
|
23
23
|
position: absolute;
|
|
24
|
-
border-top-right-radius: 10px;
|
|
25
|
-
border-bottom-right-radius: 10px;
|
|
26
24
|
overflow: hidden;
|
|
25
|
+
z-index: 100;
|
|
27
26
|
`;
|
|
28
27
|
const FixedBottomContainer = styled.div `
|
|
29
28
|
display: flex;
|
|
30
29
|
flex-direction: column;
|
|
31
30
|
align-items: center;
|
|
31
|
+
gap: 3px;
|
|
32
32
|
position: relative;
|
|
33
|
-
|
|
33
|
+
width: 100%;
|
|
34
|
+
min-height: 130px;
|
|
35
|
+
overflow: hidden;
|
|
34
36
|
`;
|
|
35
37
|
const TMSidebar = ({ items, height, borderRightRadius, left, top, width }) => {
|
|
36
38
|
const [canArchive, setCanArhive] = useState(false);
|
|
@@ -56,6 +58,12 @@ const TMSidebar = ({ items, height, borderRightRadius, left, top, width }) => {
|
|
|
56
58
|
TMSpinner.hide();
|
|
57
59
|
}
|
|
58
60
|
};
|
|
59
|
-
return (_jsxs(StyledTMSidebarContainer, { "$borderRightRadius": borderRightRadius, "$left": left, "$top": top, "$width": width, "$appName": SDK_Globals.appModule, "$height": height, children: [_jsx(ScrollView, { height: "100%", width: "100%",
|
|
61
|
+
return (_jsxs(StyledTMSidebarContainer, { "$borderRightRadius": borderRightRadius, "$left": left, "$top": top, "$width": width, "$appName": SDK_Globals.appModule, "$height": height, children: [_jsx(ScrollView, { height: "calc(100% - 150px)", width: "100%", useNative: true, children: _jsx("div", { style: {
|
|
62
|
+
display: "flex",
|
|
63
|
+
flexDirection: "column",
|
|
64
|
+
alignItems: "center",
|
|
65
|
+
gap: "3px",
|
|
66
|
+
width: "100%"
|
|
67
|
+
}, children: items.filter(item => item.props.type !== 'app') }) }), _jsx(FixedBottomContainer, { children: items.filter(item => item.props.type === 'app') })] }));
|
|
60
68
|
};
|
|
61
69
|
export default TMSidebar;
|
|
@@ -1,8 +1,7 @@
|
|
|
1
1
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
-
import styled from 'styled-components';
|
|
2
|
+
import styled, { css } from 'styled-components';
|
|
3
3
|
import TMTooltip from '../base/TMTooltip';
|
|
4
4
|
import { SDK_Globals } from '@topconsultnpm/sdk-ts';
|
|
5
|
-
import { TMColors } from '../../utils/theme';
|
|
6
5
|
var ApplicationThemeColor;
|
|
7
6
|
(function (ApplicationThemeColor) {
|
|
8
7
|
ApplicationThemeColor["SURFER"] = "#1d6f42";
|
|
@@ -11,29 +10,47 @@ var ApplicationThemeColor;
|
|
|
11
10
|
ApplicationThemeColor["DESIGNER"] = "#482234";
|
|
12
11
|
})(ApplicationThemeColor || (ApplicationThemeColor = {}));
|
|
13
12
|
const StyledTMSidebarItemContainer = styled.div `
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
13
|
+
width: 40px;
|
|
14
|
+
height: 40px;
|
|
15
|
+
display: flex;
|
|
16
|
+
align-items: center;
|
|
17
|
+
justify-content: center;
|
|
18
|
+
border-radius: 8px;
|
|
19
19
|
cursor: pointer;
|
|
20
|
-
color:
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
20
|
+
color: #fff;
|
|
21
|
+
position: relative;
|
|
22
|
+
transition: background-color 200ms ease;
|
|
23
|
+
user-select: none;
|
|
24
|
+
background-color: ${props => props.$isSelected ? 'rgba(255,255,255,0.35)' : 'transparent'};
|
|
25
25
|
|
|
26
26
|
p {
|
|
27
27
|
display: none;
|
|
28
28
|
}
|
|
29
29
|
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
30
|
+
${props => !props.$isApp && css `
|
|
31
|
+
&:hover {
|
|
32
|
+
background-color: rgba(255,255,255,0.35);
|
|
33
|
+
}
|
|
34
|
+
`}
|
|
34
35
|
`;
|
|
35
36
|
const TMSidebarItem = (props) => {
|
|
36
37
|
let app = SDK_Globals.appModule;
|
|
37
|
-
return (_jsx(TMTooltip, { hideAfterDelay: true, content: props.tooltipContent ?? props.name, children: _jsxs(StyledTMSidebarItemContainer, { "$app": app, "$isApp": props.isAppIcon, onClick: () => props.onClick?.(props),
|
|
38
|
+
return (_jsx(TMTooltip, { hideAfterDelay: true, content: props.tooltipContent ?? props.name, children: _jsxs(StyledTMSidebarItemContainer, { "$app": app, "$isApp": props.isAppIcon, onClick: () => props.onClick?.(props), "$isSelected": props.isSelected, children: [_jsxs("div", { children: [_jsx("i", { children: props.icon }), _jsx("p", { children: props.name })] }), props.badgeNumber > 0 && (_jsx("div", { style: {
|
|
39
|
+
position: 'absolute',
|
|
40
|
+
top: '4px',
|
|
41
|
+
right: '4px',
|
|
42
|
+
background: '#f09c0a',
|
|
43
|
+
color: '#fff',
|
|
44
|
+
fontSize: '10px',
|
|
45
|
+
minWidth: '16px',
|
|
46
|
+
height: '16px',
|
|
47
|
+
borderRadius: '8px',
|
|
48
|
+
display: 'flex',
|
|
49
|
+
alignItems: 'center',
|
|
50
|
+
justifyContent: 'center',
|
|
51
|
+
padding: '0 4px',
|
|
52
|
+
pointerEvents: 'none',
|
|
53
|
+
fontWeight: 'bold'
|
|
54
|
+
}, children: props.badgeNumber }))] }) }));
|
|
38
55
|
};
|
|
39
56
|
export default TMSidebarItem;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@topconsultnpm/sdkui-react",
|
|
3
|
-
"version": "6.20.0-dev1.
|
|
3
|
+
"version": "6.20.0-dev1.106",
|
|
4
4
|
"description": "",
|
|
5
5
|
"scripts": {
|
|
6
6
|
"test": "echo \"Error: no test specified\" && exit 1",
|
|
@@ -40,7 +40,7 @@
|
|
|
40
40
|
"lib"
|
|
41
41
|
],
|
|
42
42
|
"dependencies": {
|
|
43
|
-
"@topconsultnpm/sdk-ts": "6.20.0-dev1.
|
|
43
|
+
"@topconsultnpm/sdk-ts": "6.20.0-dev1.7",
|
|
44
44
|
"buffer": "^6.0.3",
|
|
45
45
|
"devextreme": "25.2.4",
|
|
46
46
|
"devextreme-react": "25.2.4",
|