@topconsultnpm/sdkui-react-beta 6.12.11 → 6.12.13
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.
|
@@ -17,7 +17,7 @@ export var TMSearchContext;
|
|
|
17
17
|
TMSearchContext["PLATFORM"] = "OrchestrationPlatform";
|
|
18
18
|
TMSearchContext["QE"] = "QueryEditor";
|
|
19
19
|
})(TMSearchContext || (TMSearchContext = {}));
|
|
20
|
-
const StyledHeaderContainer = styled.div ` width: 100%; height: 50px; background:
|
|
20
|
+
const StyledHeaderContainer = styled.div ` width: 100%; height: 50px; /* background: #E85C36 0% 0% no-repeat padding-box; */ background: linear-gradient(90deg, #f0f4fa, ${() => TMColors.primaryColor}) ; opacity: 1; display: flex; flex-direction: row; width: 100%; justify-content: space-between; align-items: center; `;
|
|
21
21
|
const StyledMenu = styled.div ` position: absolute; top: 50px; right: 0px; width: fit-content; height: fit-content; padding: 10px 20px; border: 1px solid #2459A420; background: #E2E9EF 0% 0% no-repeat padding-box; z-index: 20000022; display: flex; flex-direction: column; justify-content: flex-start; align-items: flex-start; gap: 10px; border: 1px solid #c9c9c9; border-top: none; `;
|
|
22
22
|
const StyledMenuItem = styled.p ` font-size: ${props => props.$fontSize}; display: flex; flex-direction: row; justify-content: flex-start; align-items: center; gap: 2px; cursor: pointer; color: gray; &:hover{ color: ${TMColors.primary}; transition: color 100ms ease; } `;
|
|
23
23
|
const StyledHeaderIcon = styled.div ` width: 50px; height: 50px; margin-left: 10px; display: flex; align-items: center; justify-content: center; color: ${props => props.$isSelected ? '#135596' : '#ffffff'}; transition: color ease 100ms; background-color: ${props => props.$isSelected && '#ffffff'}; cursor: pointer; &:hover { color: #ffffff; background-color: #0d3862; transition: color ease 100ms; } `;
|
|
@@ -27,7 +27,7 @@ export const TMSearchBar = ({ searchValue, onSearchValueChanged, maxWidth, margi
|
|
|
27
27
|
const deviceType = useDeviceType();
|
|
28
28
|
return (_jsxs(StyledSearchBarContainer, { style: { maxWidth: maxWidth ? maxWidth : deviceType === DeviceType.MOBILE ? '65%' : '650px', marginLeft: marginLeft ? marginLeft : deviceType === DeviceType.MOBILE ? '10px' : '50px' }, "$isMobile": deviceType === DeviceType.MOBILE, children: [_jsx(IconSearch, { fontSize: 12, color: '#00000060', style: { position: 'absolute', width: '20px', height: '20px', left: '5px', top: '5px', zIndex: 1 } }), _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 } })] }));
|
|
29
29
|
};
|
|
30
|
-
const TMHeader = ({
|
|
30
|
+
const TMHeader = ({ showSettingsMenu = true, showSearchBar = true, clearSearchJobValue, clearSearchQEValue, searchContext = TMSearchContext.JOBS, onChangePassword, onLogout, settingsMenuContext, onSeacrhJobsValueChange, onSeacrhJobslistValueChange, onSeacrhProcessMonitorValueChange, onSeacrhProcessValueChange, onSeacrhPlatformValueChange, onSeacrhQEValueChange, onSettingsClick }) => {
|
|
31
31
|
const [menuStatus, setMenuStatus] = useState(false);
|
|
32
32
|
const [searchJobListValue, setSearchJobListValue] = useState('');
|
|
33
33
|
const [searchJobsValue, setSearchJobsValue] = useState('');
|
|
@@ -74,6 +74,6 @@ const TMHeader = ({ isConnector = false, showSettingsMenu = true, showSearchBar
|
|
|
74
74
|
document.addEventListener('click', handleClickOutside);
|
|
75
75
|
return () => document.removeEventListener('click', handleClickOutside);
|
|
76
76
|
}, [menuRef, userIcon, menuStatus]);
|
|
77
|
-
return (_jsxs(StyledHeaderContainer, { "$appName": SDK_Globals.appModule,
|
|
77
|
+
return (_jsxs(StyledHeaderContainer, { "$appName": SDK_Globals.appModule, children: [_jsxs("div", { style: { display: 'flex', flexDirection: 'row', alignItems: 'center', justifyContent: 'flex-start', width: '100%' }, children: [_jsx("div", { style: { width: '50px', height: '50px', display: 'flex', alignItems: 'center', justifyContent: 'center' }, children: _jsx("img", { src: six, height: 30, alt: "" }) }), !isMobile && _jsxs("div", { style: { display: 'flex', flexDirection: 'column', alignItems: 'flex-start', justifyContent: 'flex-start', gap: '1px', fontSize: '14px' }, children: [_jsx("div", { style: { userSelect: 'none', color: '#135596' }, children: "TopMedia" }), _jsx("div", { style: { userSelect: 'none', color: '#135596' }, children: SDK_Globals.appModule })] }), showSearchBar && _jsxs(_Fragment, { children: [searchContext === TMSearchContext.JOBS_LIST && _jsx(TMSearchBar, { onSearchValueChanged: (e) => setSearchJobListValue(e), searchValue: searchJobListValue }), searchContext === TMSearchContext.JOBS && _jsx(TMSearchBar, { onSearchValueChanged: (e) => setSearchJobsValue(e), searchValue: searchJobsValue }), searchContext === TMSearchContext.PROCESSES && _jsx(TMSearchBar, { onSearchValueChanged: (e) => setSearchProcessesValue(e), searchValue: searchProcessesValue }), searchContext === TMSearchContext.PROCESS_MONITOR && _jsx(TMSearchBar, { onSearchValueChanged: (e) => setSearchProcessMonitorValue(e), searchValue: searchProcessMonitorValue }), searchContext === TMSearchContext.PLATFORM && _jsx(TMSearchBar, { onSearchValueChanged: (e) => setSearchPlatformValue(e), searchValue: searchPlatformValue }), searchContext === TMSearchContext.QE && _jsx(TMSearchBar, { onSearchValueChanged: (e) => setSearchQEValue(e), searchValue: searchQEValue })] })] }), showSettingsMenu && _jsxs(StyledHeaderIcon, { onClick: () => onSettingsClick?.(), children: [" ", _jsx(IconSettings, { fontSize: 20 }), " "] }), _jsxs(StyledHeaderIcon, { "$isSelected": menuStatus, ref: userIcon, onClick: () => setMenuStatus(!menuStatus), children: [" ", _jsx(IconUserProfile, { fontSize: 20 }), " "] }), menuStatus && _jsxs(StyledMenu, { ref: menuRef, children: [SDK_Globals.tmSession?.SessionDescr?.authenticationMode === AuthenticationModes.TopMedia && _jsxs(StyledMenuItem, { "$fontSize": FontSize.defaultFontSize, onClick: () => { setMenuStatus(false); onChangePassword && onChangePassword(); }, style: { fontSize: FontSize.defaultFontSize }, children: [" ", _jsx("span", { children: _jsx(IconPassword, {}) }), " ", _jsx("span", { children: SDKUI_Localizator.ChangePassword }), " "] }), _jsxs(StyledMenuItem, { "$fontSize": FontSize.defaultFontSize, onClick: () => { setMenuStatus(false); onLogout && onLogout(); }, children: [_jsx("span", { children: _jsx(IconLogout, {}) }), " ", _jsx("span", { children: "Logout" }), " "] }), _jsx("div", { style: { width: '100%', height: '1px', backgroundColor: 'gray' } }), _jsxs(StyledMenuItem, { "$fontSize": FontSize.defaultFontSize, onClick: () => { setMenuStatus(false); TMMessageBoxManager.show({ buttons: [ButtonNames.OK], title: `About. ${SDK_Globals.appModule}`, message: _jsx(TMAboutApp, { app: true, skdui: true, sdk: true, websdk: true }) }); }, style: { fontSize: FontSize.defaultFontSize }, children: [" ", _jsx("span", { children: _jsx(IconBxInfo, {}) }), " ", _jsx("span", { children: "About" }), " "] })] })] }));
|
|
78
78
|
};
|
|
79
79
|
export default TMHeader;
|
|
@@ -8,7 +8,7 @@ const StyledTMSidebarContainer = styled.div `
|
|
|
8
8
|
left: ${props => props.$left || '0px'};
|
|
9
9
|
width: ${props => props.$width || '50px'};
|
|
10
10
|
height: ${props => props.$height || 'calc(100% - 88px)'};
|
|
11
|
-
background
|
|
11
|
+
background: ${() => TMColors.primaryColor} 0% 0% no-repeat padding-box;
|
|
12
12
|
box-shadow: 0px 3px 6px #00000029;
|
|
13
13
|
border-radius: 0;
|
|
14
14
|
opacity: 1;
|
|
@@ -29,7 +29,7 @@ const FixedBottomContainer = styled.div `
|
|
|
29
29
|
position: relative;
|
|
30
30
|
bottom: 10px;
|
|
31
31
|
`;
|
|
32
|
-
const TMSidebar = ({ items, height, borderRightRadius, left, top, width
|
|
32
|
+
const TMSidebar = ({ items, height, borderRightRadius, left, top, width }) => {
|
|
33
33
|
return (_jsxs(StyledTMSidebarContainer, { "$borderRightRadius": borderRightRadius, "$left": left, "$top": top, "$width": width, "$appName": SDK_Globals.appModule, "$height": height, children: [_jsx(ScrollView, { height: "100%", width: "100%", style: { padding: "5px 0 0 5px" }, useNative: true, children: items.filter(item => item.props.type !== 'app') }), _jsx(FixedBottomContainer, { children: items.filter(item => item.props.type === 'app') })] }));
|
|
34
34
|
};
|
|
35
35
|
export default TMSidebar;
|