@learningpool/ui 1.7.2 → 1.7.4
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.
- package/components/navigation/VerticalNavigation/VerticalNavigation.js +2 -0
- package/components/navigation/VerticalNavigation/VerticalNavigationAvatar.js +1 -1
- package/components/navigation/VerticalNavigation/VerticalNavigationAvatarStyles.js +13 -15
- package/components/navigation/VerticalNavigation/VerticalNavigationItem/VerticalNavigationItemFlyoutMenuStyles.js +21 -23
- package/components/stream/AppHub/AppHub.js +3 -2
- package/components/stream/AppHub/AppHubCustom.js +2 -1
- package/lang/en-us.d.ts +1 -1
- package/lang/en-us.js +1 -1
- package/package.json +2 -1
- package/types/components/stream/AppHub.d.ts +1 -0
- package/utils/constants.d.ts +4 -0
- package/utils/constants.js +4 -0
|
@@ -131,11 +131,13 @@ var VerticalNavigation = function (props) {
|
|
|
131
131
|
// @ts-expect-error
|
|
132
132
|
component: animated.button, style: useFadeIn(animationCount, incrementAnimationCount) }, { children: _jsx(DrawerToggleHitboxContent, { children: isDrawerOpen
|
|
133
133
|
? (_jsx(ChevronLeft, { style: {
|
|
134
|
+
fill: theme.palette.getContrastText(theme.palette.background.paper),
|
|
134
135
|
fontSize: '1.75rem',
|
|
135
136
|
height: '1.75rem',
|
|
136
137
|
width: '1.75rem'
|
|
137
138
|
} }))
|
|
138
139
|
: (_jsx(ChevronRight, { style: {
|
|
140
|
+
fill: theme.palette.getContrastText(theme.palette.background.paper),
|
|
139
141
|
fontSize: '1.75rem',
|
|
140
142
|
height: '1.75rem',
|
|
141
143
|
width: '1.75rem'
|
|
@@ -65,7 +65,7 @@ var AvatarPanel = function (props) {
|
|
|
65
65
|
// @ts-expect-error
|
|
66
66
|
, __assign({
|
|
67
67
|
// @ts-expect-error
|
|
68
|
-
component: animated.button, style: useStaggerAnimation(isAvatarOpen, animationCount, incrementAnimationCount), disablePadding: true,
|
|
68
|
+
component: animated.button, style: useStaggerAnimation(isAvatarOpen, animationCount, incrementAnimationCount), disablePadding: true, color: 'primary', size: 'medium', onClick: avatarPanelOnClickMainAction, startIcon: _jsx(Settings, {}) }, { children: avatarPanelMainActionString })), _jsx(List, __assign({ style: { marginBottom: theme.spacing(2) } }, { children: avatarPanelSettingItems &&
|
|
69
69
|
avatarPanelSettingItems.length > 0 &&
|
|
70
70
|
avatarPanelSettingItems.map(function (avatarMenuItem) { return (_jsx(ListItem, __assign({ component: animated.div, style: useStaggerAnimation(isAvatarOpen, animationCount, incrementAnimationCount),
|
|
71
71
|
// whileHover={motionWhileHover}
|
|
@@ -6,28 +6,26 @@ import { Avatar, Button, ButtonGroup, ListItemButton, Typography } from '../../.
|
|
|
6
6
|
import { Drawer } from '@mui/material';
|
|
7
7
|
import { styled } from '@mui/material/styles';
|
|
8
8
|
import { animated } from '@react-spring/web';
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
:
|
|
9
|
+
import { lighten, darken } from 'polished';
|
|
10
|
+
import { VERTNAV_COLORS } from '../../../utils/constants';
|
|
11
|
+
export var StyledSwipeableAvatar = styled(Drawer)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n .MuiPaper-root {\n height: 100vh;\n border: none;\n z-index: 1;\n }\n"], ["\n .MuiPaper-root {\n height: 100vh;\n border: none;\n z-index: 1;\n }\n"])));
|
|
12
12
|
export var StyledButton = styled(Button)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n /* Fix for RTL issue */\n .MuiButton-startIcon {\n margin-inline-start: -", ";\n margin-inline-end: ", ";\n }\n\n .MuiButton-endIcon {\n margin-inline-start: ", ";\n margin-inline-end: -", ";\n }\n"], ["\n /* Fix for RTL issue */\n .MuiButton-startIcon {\n margin-inline-start: -", ";\n margin-inline-end: ", ";\n }\n\n .MuiButton-endIcon {\n margin-inline-start: ", ";\n margin-inline-end: -", ";\n }\n"])), function (props) { return props.theme.spacing(0.5); }, function (props) { return props.theme.spacing(1); }, function (props) { return props.theme.spacing(1); }, function (props) { return props.theme.spacing(0.5); });
|
|
13
|
-
export var StyledBox = styled(animated.div)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n align-items: center;\n background-color: ", ";\n display: flex;\n flex-direction: column;\n font-family: ", ";\n height: 100%;\n justify-content: flex-start;\n overflow: auto;\n padding: 15vh ", ";\n position: relative;\n"], ["\n align-items: center;\n background-color: ", ";\n display: flex;\n flex-direction: column;\n font-family: ", ";\n height: 100%;\n justify-content: flex-start;\n overflow: auto;\n padding: 15vh ", ";\n position: relative;\n"])), function (props) { return props.theme.palette.
|
|
14
|
-
? props.theme.palette.
|
|
15
|
-
:
|
|
13
|
+
export var StyledBox = styled(animated.div)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n align-items: center;\n background-color: ", ";\n color: ", ";\n display: flex;\n flex-direction: column;\n font-family: ", ";\n height: 100%;\n justify-content: flex-start;\n overflow: auto;\n padding: 15vh ", ";\n position: relative;\n"], ["\n align-items: center;\n background-color: ", ";\n color: ", ";\n display: flex;\n flex-direction: column;\n font-family: ", ";\n height: 100%;\n justify-content: flex-start;\n overflow: auto;\n padding: 15vh ", ";\n position: relative;\n"])), function (props) { return props.theme.palette.background.paper === ('#fff' || '#ffffff' || 'white')
|
|
14
|
+
? darken(VERTNAV_COLORS.DARKEN_AMOUNT, props.theme.palette.background.paper)
|
|
15
|
+
: lighten(VERTNAV_COLORS.LIGHTEN_AMOUNT, props.theme.palette.background.paper); }, function (props) { return props.theme.palette.background.paper === ('#fff' || '#ffffff' || 'white')
|
|
16
|
+
? props.theme.palette.getContrastText(darken(VERTNAV_COLORS.DARKEN_AMOUNT, props.theme.palette.background.paper))
|
|
17
|
+
: props.theme.palette.getContrastText(lighten(VERTNAV_COLORS.LIGHTEN_AMOUNT, props.theme.palette.background.paper)); }, function (props) { return props.theme.typography.fontFamily; }, function (props) { return props.theme.spacing(2); });
|
|
16
18
|
export var StyledBoxProfile = styled(animated.div)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n display: flex;\n flex-direction: row;\n align-items: center;\n margin-bottom: 2rem;\n"], ["\n display: flex;\n flex-direction: row;\n align-items: center;\n margin-bottom: 2rem;\n"])));
|
|
17
19
|
export var StyledBoxProfileEdit = styled(animated.div)(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n display: flex;\n"], ["\n display: flex;\n"])));
|
|
18
|
-
export var StyledAvatarName = styled(Typography)(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n
|
|
19
|
-
|
|
20
|
-
: props.theme.palette.text.primary; });
|
|
21
|
-
export var StyledOutlineButton = styled(Button)(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n border-color: ", ";\n color: ", ";\n\n /* Fix for RTL issue */\n .MuiButton-startIcon {\n margin-inline-start: -", ";\n margin-inline-end: ", ";\n }\n\n .MuiButton-endIcon {\n margin-inline-start: ", ";\n margin-inline-end: -", ";\n }\n"], ["\n border-color: ", ";\n color: ", ";\n\n /* Fix for RTL issue */\n .MuiButton-startIcon {\n margin-inline-start: -", ";\n margin-inline-end: ", ";\n }\n\n .MuiButton-endIcon {\n margin-inline-start: ", ";\n margin-inline-end: -", ";\n }\n"])), function (props) { return props.theme.palette.mode === 'dark'
|
|
22
|
-
? props.theme.palette.primary.contrastText
|
|
23
|
-
: props.theme.palette.primary.main; }, function (props) { return props.theme.palette.mode === 'dark'
|
|
24
|
-
? props.theme.palette.primary.contrastText
|
|
25
|
-
: props.theme.palette.primary.main; }, function (props) { return props.theme.spacing(0.5); }, function (props) { return props.theme.spacing(1); }, function (props) { return props.theme.spacing(1); }, function (props) { return props.theme.spacing(0.5); });
|
|
20
|
+
export var StyledAvatarName = styled(Typography)(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n font-size: 1.75rem;\n"], ["\n font-size: 1.75rem;\n"])));
|
|
21
|
+
export var StyledOutlineButton = styled(Button)(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n /* Fix for RTL issue */\n .MuiButton-startIcon {\n margin-inline-start: -", ";\n margin-inline-end: ", ";\n }\n\n .MuiButton-endIcon {\n margin-inline-start: ", ";\n margin-inline-end: -", ";\n }\n"], ["\n /* Fix for RTL issue */\n .MuiButton-startIcon {\n margin-inline-start: -", ";\n margin-inline-end: ", ";\n }\n\n .MuiButton-endIcon {\n margin-inline-start: ", ";\n margin-inline-end: -", ";\n }\n"])), function (props) { return props.theme.spacing(0.5); }, function (props) { return props.theme.spacing(1); }, function (props) { return props.theme.spacing(1); }, function (props) { return props.theme.spacing(0.5); });
|
|
26
22
|
export var StyledButtonGroup = styled(ButtonGroup)(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n /* Fix for RTL issue */\n .MuiButtonGroup-grouped:not(:first-of-type) {\n border-bottom-left-radius: ", ";\n border-bottom-right-radius: ", ";\n border-top-left-radius: ", ";\n border-top-right-radius: ", ";\n }\n\n .MuiButtonGroup-grouped:not(:last-of-type) {\n border-bottom-left-radius: ", ";\n border-bottom-right-radius: ", ";\n border-top-left-radius: ", ";\n border-top-right-radius: ", ";\n\n border-style: solid;\n border-left-width: ", ";\n border-right-width: ", ";\n }\n"], ["\n /* Fix for RTL issue */\n .MuiButtonGroup-grouped:not(:first-of-type) {\n border-bottom-left-radius: ", ";\n border-bottom-right-radius: ", ";\n border-top-left-radius: ", ";\n border-top-right-radius: ", ";\n }\n\n .MuiButtonGroup-grouped:not(:last-of-type) {\n border-bottom-left-radius: ", ";\n border-bottom-right-radius: ", ";\n border-top-left-radius: ", ";\n border-top-right-radius: ", ";\n\n border-style: solid;\n border-left-width: ", ";\n border-right-width: ", ";\n }\n"])), function (props) { return props.theme.direction === 'ltr' ? 0 : "".concat(props.theme.shape.borderRadius, "px"); }, function (props) { return props.theme.direction === 'ltr' ? "".concat(props.theme.shape.borderRadius, "px") : 0; }, function (props) { return props.theme.direction === 'ltr' ? 0 : "".concat(props.theme.shape.borderRadius, "px"); }, function (props) { return props.theme.direction === 'ltr' ? "".concat(props.theme.shape.borderRadius, "px") : 0; }, function (props) { return props.theme.direction === 'ltr' ? "".concat(props.theme.shape.borderRadius, "px") : 0; }, function (props) { return props.theme.direction === 'ltr' ? 0 : "".concat(props.theme.shape.borderRadius, "px"); }, function (props) { return props.theme.direction === 'ltr' ? "".concat(props.theme.shape.borderRadius, "px") : 0; }, function (props) { return props.theme.direction === 'ltr' ? 0 : "".concat(props.theme.shape.borderRadius, "px"); }, function (props) { return props.theme.direction === 'rtl' ? '1px' : 0; }, function (props) { return props.theme.direction === 'ltr' ? '1px' : 0; });
|
|
27
23
|
export var StyledAvatar = styled(Avatar)(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n background-color: ", ";\n color: ", ";\n font-size: 0.85rem;\n"], ["\n background-color: ", ";\n color: ", ";\n font-size: 0.85rem;\n"])), function (props) { return props.theme.palette.mode === 'dark'
|
|
28
24
|
? props.theme.palette.primary.contrastText
|
|
29
25
|
: props.theme.palette.primary.main; }, function (props) { return props.theme.palette.mode === 'dark'
|
|
30
26
|
? props.theme.palette.primary.main
|
|
31
27
|
: props.theme.palette.primary.contrastText; });
|
|
32
|
-
export var StyledListItemButton = styled(ListItemButton)(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n border-radius: 50px;\n white-space: normal;\n"], ["\n border-radius: 50px;\n white-space: normal;\n"])))
|
|
28
|
+
export var StyledListItemButton = styled(ListItemButton)(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n border-radius: 50px;\n white-space: normal;\n\n & .MuiListItemIcon-root {\n color: ", ";\n }\n"], ["\n border-radius: 50px;\n white-space: normal;\n\n & .MuiListItemIcon-root {\n color: ", ";\n }\n"])), function (props) { return props.theme.palette.background.paper === ('#fff' || '#ffffff' || 'white')
|
|
29
|
+
? props.theme.palette.getContrastText(darken(VERTNAV_COLORS.DARKEN_AMOUNT, props.theme.palette.background.paper))
|
|
30
|
+
: props.theme.palette.getContrastText(lighten(VERTNAV_COLORS.LIGHTEN_AMOUNT, props.theme.palette.background.paper)); });
|
|
33
31
|
var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10;
|
|
@@ -5,6 +5,8 @@ var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cook
|
|
|
5
5
|
import { List, ListItem, ListItemButton as SSListItemButton, Paper, Typography, ListItemText } from '../../../../index';
|
|
6
6
|
import { styled } from '@mui/material/styles';
|
|
7
7
|
import { NotchMiniSVG } from '../../../../assets/Images';
|
|
8
|
+
import { lighten, darken } from 'polished';
|
|
9
|
+
import { VERTNAV_COLORS } from '../../../../utils/constants';
|
|
8
10
|
export var DRAWER_WIDTH = {
|
|
9
11
|
Collapsed: 60,
|
|
10
12
|
Expanded: 300
|
|
@@ -16,11 +18,11 @@ export var FlyoutMenuPaper = styled(Paper, {
|
|
|
16
18
|
: 'auto'; });
|
|
17
19
|
export var FlyoutMenuWrap = styled('div', {
|
|
18
20
|
shouldForwardProp: function (prop) { return prop !== 'open'; }
|
|
19
|
-
})(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n background-color: ", ";\n color: ", ";\n border-radius: 0 8px 8px 0;\n box-shadow: 5px 7px 8px -10px rgb(0 0 0 / 20%), 5px 12px 17px -10px rgb(0 0 0 / 14%), 5px 5px 22px -10px rgb(0 0 0 / 12%);\n opacity: ", ";\n visibility: ", ";\n transform: ", ";\n transform-origin: left center;\n transition: ", ";\n"], ["\n background-color: ", ";\n color: ", ";\n border-radius: 0 8px 8px 0;\n box-shadow: 5px 7px 8px -10px rgb(0 0 0 / 20%), 5px 12px 17px -10px rgb(0 0 0 / 14%), 5px 5px 22px -10px rgb(0 0 0 / 12%);\n opacity: ", ";\n visibility: ", ";\n transform: ", ";\n transform-origin: left center;\n transition: ", ";\n"])), function (props) { return props.theme.palette.
|
|
20
|
-
? props.theme.palette.
|
|
21
|
-
:
|
|
22
|
-
? props.theme.palette.
|
|
23
|
-
: props.theme.palette.getContrastText(props.theme.palette.background.paper); }, function (props) { return props.open ? 1 : 0; }, function (props) { return props.open ? 'visible' : 'hidden'; }, function (props) { return props.open ? 'rotateY(0deg) scale(1)' : 'rotateY(15deg) scale(.97)'; }, function (props) { return props.open
|
|
21
|
+
})(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n background-color: ", ";\n color: ", ";\n border-radius: 0 8px 8px 0;\n box-shadow: 5px 7px 8px -10px rgb(0 0 0 / 20%), 5px 12px 17px -10px rgb(0 0 0 / 14%), 5px 5px 22px -10px rgb(0 0 0 / 12%);\n opacity: ", ";\n visibility: ", ";\n transform: ", ";\n transform-origin: left center;\n transition: ", ";\n"], ["\n background-color: ", ";\n color: ", ";\n border-radius: 0 8px 8px 0;\n box-shadow: 5px 7px 8px -10px rgb(0 0 0 / 20%), 5px 12px 17px -10px rgb(0 0 0 / 14%), 5px 5px 22px -10px rgb(0 0 0 / 12%);\n opacity: ", ";\n visibility: ", ";\n transform: ", ";\n transform-origin: left center;\n transition: ", ";\n"])), function (props) { return props.theme.palette.background.paper === ('#fff' || '#ffffff' || 'white')
|
|
22
|
+
? darken(VERTNAV_COLORS.DARKEN_AMOUNT, props.theme.palette.background.paper)
|
|
23
|
+
: lighten(VERTNAV_COLORS.LIGHTEN_AMOUNT, props.theme.palette.background.paper); }, function (props) { return props.theme.palette.background.paper === ('#fff' || '#ffffff' || 'white')
|
|
24
|
+
? props.theme.palette.getContrastText(darken(VERTNAV_COLORS.DARKEN_AMOUNT, props.theme.palette.background.paper))
|
|
25
|
+
: props.theme.palette.getContrastText(lighten(VERTNAV_COLORS.LIGHTEN_AMOUNT, props.theme.palette.background.paper)); }, function (props) { return props.open ? 1 : 0; }, function (props) { return props.open ? 'visible' : 'hidden'; }, function (props) { return props.open ? 'rotateY(0deg) scale(1)' : 'rotateY(15deg) scale(.97)'; }, function (props) { return props.open
|
|
24
26
|
? "all\n ".concat(props.theme.transitions.duration.enteringScreen, "ms\n ").concat(props.theme.transitions.easing.easeOut)
|
|
25
27
|
: "all\n ".concat(props.theme.transitions.duration.leavingScreen, "ms\n ").concat(props.theme.transitions.easing.easeIn); });
|
|
26
28
|
export var FlyoutMenuList = styled(List, {
|
|
@@ -31,13 +33,9 @@ export var FlyoutMenuItem = styled(ListItem)(templateObject_5 || (templateObject
|
|
|
31
33
|
export var FlyoutMenuItemText = styled(ListItemText)(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n text-align: ", ";\n"], ["\n text-align: ", ";\n"])), function (props) { return props.theme.direction === 'ltr' ? 'left' : 'right'; });
|
|
32
34
|
export var FlyoutMenuButton = styled(SSListItemButton, {
|
|
33
35
|
shouldForwardProp: function (prop) { return prop !== 'isDrawerOpen' && prop !== 'isExpanded'; }
|
|
34
|
-
})(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n align-items: flex-start;\n background-color: transparent;\n
|
|
36
|
+
})(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n align-items: flex-start;\n background-color: transparent;\n border-radius: 5px;\n display: flex;\n flex-wrap: wrap;\n text-decoration: none;\n text-transform: none;\n transition: all\n ", "ms\n ", ";\n padding: ", ";\n width: 100%;\n\n /* Indicator */\n :before {\n background-color: ", ";\n border-radius: 50px;\n content: '';\n height: calc(100% - 10px);\n opacity: 0;\n position: absolute;\n top: 5px;\n left: ", ";\n right: ", ";\n transition: all\n ", "ms\n ", ";\n width: 4px;\n transform: scale(.95);\n }\n\n :hover:before,\n :focus:before {\n opacity: 1;\n transform: scale(1);\n }\n\n :hover {\n background-color: rgba(0, 0, 0, .05);\n }\n\n :focus {\n background-color: ", ";\n }\n"], ["\n align-items: flex-start;\n background-color: transparent;\n border-radius: 5px;\n display: flex;\n flex-wrap: wrap;\n text-decoration: none;\n text-transform: none;\n transition: all\n ", "ms\n ", ";\n padding: ", ";\n width: 100%;\n\n /* Indicator */\n :before {\n background-color: ", ";\n border-radius: 50px;\n content: '';\n height: calc(100% - 10px);\n opacity: 0;\n position: absolute;\n top: 5px;\n left: ", ";\n right: ", ";\n transition: all\n ", "ms\n ", ";\n width: 4px;\n transform: scale(.95);\n }\n\n :hover:before,\n :focus:before {\n opacity: 1;\n transform: scale(1);\n }\n\n :hover {\n background-color: rgba(0, 0, 0, .05);\n }\n\n :focus {\n background-color: ", ";\n }\n"
|
|
35
37
|
// FullHeight
|
|
36
|
-
])), function (props) {
|
|
37
|
-
return props.theme.palette.mode === 'dark'
|
|
38
|
-
? props.theme.palette.primary.contrastText
|
|
39
|
-
: props.theme.palette.getContrastText(props.theme.palette.background.paper);
|
|
40
|
-
}, function (props) { return props.theme.transitions.duration.enteringScreen; }, function (props) { return props.theme.transitions.easing.easeOut; }, function (props) { return props.theme.spacing(1, 2); }, function (props) {
|
|
38
|
+
])), function (props) { return props.theme.transitions.duration.enteringScreen; }, function (props) { return props.theme.transitions.easing.easeOut; }, function (props) { return props.theme.spacing(1, 2); }, function (props) {
|
|
41
39
|
return props.theme.palette.mode === 'dark'
|
|
42
40
|
? 'rgba(255, 255, 255, 0.5)'
|
|
43
41
|
: props.theme.palette.primary.main;
|
|
@@ -49,22 +47,22 @@ export var FlyoutMenuButton = styled(SSListItemButton, {
|
|
|
49
47
|
// FullHeight
|
|
50
48
|
export var FullHeightFlyoutMenuPaper = styled(Paper, {
|
|
51
49
|
shouldForwardProp: function (prop) { return prop !== 'isDrawerOpen' && prop !== 'open'; }
|
|
52
|
-
})(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n background: transparent none;\n box-shadow: none;\n
|
|
53
|
-
? props.theme.palette.primary.contrastText
|
|
54
|
-
: props.theme.palette.getContrastText(props.theme.palette.background.paper); }, function (props) { return props.theme.direction === 'ltr' ? props.isDrawerOpen ? "".concat(DRAWER_WIDTH.Expanded, "px") : "".concat(DRAWER_WIDTH.Collapsed - 3, "px") : 'auto'; }, function (props) { return props.theme.direction === 'rtl' ? props.isDrawerOpen ? "".concat(DRAWER_WIDTH.Expanded, "px") : "".concat(DRAWER_WIDTH.Collapsed - 3, "px") : 'auto'; }, function (props) { return props.open ? 'auto' : 'none'; }, function (props) { return props.open
|
|
50
|
+
})(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n background: transparent none;\n box-shadow: none;\n height: 100%;\n left: ", ";\n right: ", ";\n perspective: 800px;\n pointer-events: ", ";\n position: fixed;\n top: 0;\n transition: ", ";\n z-index: 1;\n"], ["\n background: transparent none;\n box-shadow: none;\n height: 100%;\n left: ", ";\n right: ", ";\n perspective: 800px;\n pointer-events: ", ";\n position: fixed;\n top: 0;\n transition: ", ";\n z-index: 1;\n"])), function (props) { return props.theme.direction === 'ltr' ? props.isDrawerOpen ? "".concat(DRAWER_WIDTH.Expanded, "px") : "".concat(DRAWER_WIDTH.Collapsed - 3, "px") : 'auto'; }, function (props) { return props.theme.direction === 'rtl' ? props.isDrawerOpen ? "".concat(DRAWER_WIDTH.Expanded, "px") : "".concat(DRAWER_WIDTH.Collapsed - 3, "px") : 'auto'; }, function (props) { return props.open ? 'auto' : 'none'; }, function (props) { return props.open
|
|
55
51
|
? "all\n ".concat(props.theme.transitions.duration.enteringScreen, "ms\n ").concat(props.theme.transitions.easing.easeOut)
|
|
56
52
|
: "all\n ".concat(props.theme.transitions.duration.leavingScreen, "ms\n ").concat(props.theme.transitions.easing.easeIn); });
|
|
57
53
|
export var FullHeightFlyoutMenuWrapper = styled('div', {
|
|
58
54
|
shouldForwardProp: function (prop) { return prop !== 'open'; }
|
|
59
|
-
})(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n background-color: ", ";\n box-shadow: ", " 0 15px 0 rgb(0 0 0 / 10%);\n height: 100%;\n max-width: 300px;\n min-width: 300px;\n opacity: ", ";\n pointer-events: ", ";\n transform: ", ";\n transform-origin: left center;\n transition: ", ";\n visibility: ", ";\n width: ", ";\n"], ["\n background-color: ", ";\n box-shadow: ", " 0 15px 0 rgb(0 0 0 / 10%);\n height: 100%;\n max-width: 300px;\n min-width: 300px;\n opacity: ", ";\n pointer-events: ", ";\n transform: ", ";\n transform-origin: left center;\n transition: ", ";\n visibility: ", ";\n width: ", ";\n"])), function (props) { return props.theme.palette.
|
|
60
|
-
? props.theme.palette.
|
|
61
|
-
: props.theme.palette.background.paper; }, function (props) { return props.theme.
|
|
55
|
+
})(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n background-color: ", ";\n color: ", ";\n box-shadow: ", " 0 15px 0 rgb(0 0 0 / 10%);\n height: 100%;\n max-width: 300px;\n min-width: 300px;\n opacity: ", ";\n pointer-events: ", ";\n transform: ", ";\n transform-origin: left center;\n transition: ", ";\n visibility: ", ";\n width: ", ";\n"], ["\n background-color: ", ";\n color: ", ";\n box-shadow: ", " 0 15px 0 rgb(0 0 0 / 10%);\n height: 100%;\n max-width: 300px;\n min-width: 300px;\n opacity: ", ";\n pointer-events: ", ";\n transform: ", ";\n transform-origin: left center;\n transition: ", ";\n visibility: ", ";\n width: ", ";\n"])), function (props) { return props.theme.palette.background.paper === ('#fff' || '#ffffff' || 'white')
|
|
56
|
+
? darken(VERTNAV_COLORS.DARKEN_AMOUNT, props.theme.palette.background.paper)
|
|
57
|
+
: lighten(VERTNAV_COLORS.LIGHTEN_AMOUNT, props.theme.palette.background.paper); }, function (props) { return props.theme.palette.background.paper === ('#fff' || '#ffffff' || 'white')
|
|
58
|
+
? props.theme.palette.getContrastText(darken(VERTNAV_COLORS.DARKEN_AMOUNT, props.theme.palette.background.paper))
|
|
59
|
+
: props.theme.palette.getContrastText(lighten(VERTNAV_COLORS.LIGHTEN_AMOUNT, props.theme.palette.background.paper)); }, function (props) { return props.theme.direction === 'ltr' ? '35px' : '-35px'; }, function (props) { return props.open ? 1 : 0; }, function (props) { return props.open ? 'auto' : 'none'; }, function (props) { return props.open ? 'rotateY(0deg) scale(1)' : 'rotateY(8deg) scale(.98)'; }, function (props) { return props.open
|
|
62
60
|
? "all\n ".concat(props.theme.transitions.duration.enteringScreen, "ms\n ").concat(props.theme.transitions.easing.easeOut)
|
|
63
61
|
: "all\n ".concat(props.theme.transitions.duration.leavingScreen, "ms\n ").concat(props.theme.transitions.easing.easeIn); }, function (props) { return props.open ? 'visible' : 'hidden'; }, function (props) { return props.open ? '300' : 0; });
|
|
64
|
-
export var FlyoutNotchMask = styled('div')(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n background-color: ", ";\n content: '';\n display: block;\n height: 80px;\n left: ", ";\n right: ", ";\n position: absolute;\n top: 65px;\n width: 80px;\n z-index: -1;\n"], ["\n background-color: ", ";\n content: '';\n display: block;\n height: 80px;\n left: ", ";\n right: ", ";\n position: absolute;\n top: 65px;\n width: 80px;\n z-index: -1;\n"])), function (props) { return props.theme.palette.
|
|
65
|
-
? props.theme.palette.
|
|
66
|
-
:
|
|
67
|
-
export var NotchMini = styled(NotchMiniSVG)(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n fill: ", ";\n left: ", ";\n right: ", ";\n pointer-events: none;\n position: absolute;\n"], ["\n fill: ", ";\n left: ", ";\n right: ", ";\n pointer-events: none;\n position: absolute;\n"])), function (props) { return props.theme.palette.
|
|
68
|
-
? props.theme.palette.
|
|
69
|
-
:
|
|
62
|
+
export var FlyoutNotchMask = styled('div')(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n background-color: ", ";\n content: '';\n display: block;\n height: 80px;\n left: ", ";\n right: ", ";\n position: absolute;\n top: 65px;\n width: 80px;\n z-index: -1;\n"], ["\n background-color: ", ";\n content: '';\n display: block;\n height: 80px;\n left: ", ";\n right: ", ";\n position: absolute;\n top: 65px;\n width: 80px;\n z-index: -1;\n"])), function (props) { return props.theme.palette.background.paper === ('#fff' || '#ffffff' || 'white')
|
|
63
|
+
? darken(VERTNAV_COLORS.DARKEN_AMOUNT, props.theme.palette.background.paper)
|
|
64
|
+
: lighten(VERTNAV_COLORS.LIGHTEN_AMOUNT, props.theme.palette.background.paper); }, function (props) { return props.theme.direction === 'ltr' ? '-40px' : 'auto'; }, function (props) { return props.theme.direction === 'rtl' ? '-40px' : 'auto'; });
|
|
65
|
+
export var NotchMini = styled(NotchMiniSVG)(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n fill: ", ";\n left: ", ";\n right: ", ";\n pointer-events: none;\n position: absolute;\n"], ["\n fill: ", ";\n left: ", ";\n right: ", ";\n pointer-events: none;\n position: absolute;\n"])), function (props) { return props.theme.palette.background.paper === ('#fff' || '#ffffff' || 'white')
|
|
66
|
+
? darken(VERTNAV_COLORS.DARKEN_AMOUNT, props.theme.palette.background.paper)
|
|
67
|
+
: lighten(VERTNAV_COLORS.LIGHTEN_AMOUNT, props.theme.palette.background.paper); }, function (props) { return props.theme.direction === 'ltr' ? '-12px' : 0; }, function (props) { return props.theme.direction === 'rtl' ? '-12px' : 0; });
|
|
70
68
|
var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10, templateObject_11;
|
|
@@ -20,6 +20,7 @@ var AppHub = function (props) {
|
|
|
20
20
|
var isPageLayout = props.isPageLayout, localization = props.localization, customLinkBgColor = props.customLinkBgColor, data = props.data;
|
|
21
21
|
var messages = __assign(__assign({}, defaultMessages), localization);
|
|
22
22
|
var renderRow = function (rowData, rowIndex) {
|
|
23
|
+
var _a, _b;
|
|
23
24
|
var type = rowData.type, items = rowData.items, title = rowData.title, addButton = rowData.addButton;
|
|
24
25
|
switch (type) {
|
|
25
26
|
case Constants.DataRowType.Product: {
|
|
@@ -37,10 +38,10 @@ var AppHub = function (props) {
|
|
|
37
38
|
// @ts-ignore
|
|
38
39
|
, __assign({
|
|
39
40
|
// @ts-ignore
|
|
40
|
-
component: isPageLayout ? 'h2' : 'div' }, { children: title })), _jsxs(Grid, __assign({ container: true, spacing: { xs: 2, md: 3 } }, { children: [addButton && addButton.order === Constants.AddButtonOrder.Start && (_jsx(Grid, __assign({ xs: 6, sm: 4, md: 2 }, { children: _jsx(AppHubCustom, { isAddButton: true, customName: messages['add-
|
|
41
|
+
component: isPageLayout ? 'h2' : 'div' }, { children: title })), _jsxs(Grid, __assign({ container: true, spacing: { xs: 2, md: 3 } }, { children: [addButton && addButton.order === Constants.AddButtonOrder.Start && (_jsx(Grid, __assign({ xs: 6, sm: 4, md: 2 }, { children: _jsx(AppHubCustom, { isAddButton: true, customName: (_a = addButton.title) !== null && _a !== void 0 ? _a : messages['add-item'], customLinkBgColor: customLinkBgColor, url: addButton.url }) }))), items.map(function (_a, index) {
|
|
41
42
|
var customName = _a.customName, url = _a.url, icon = _a.icon;
|
|
42
43
|
return (_jsx(Grid, __assign({ xs: 6, sm: 4, md: 2 }, { children: url && (_jsx(AppHubCustom, { customName: customName, customLinkBgColor: customLinkBgColor, url: url, icon: icon })) }), "".concat(customName, "_").concat(rowIndex, "_").concat(index)));
|
|
43
|
-
}), addButton && addButton.order === Constants.AddButtonOrder.End && (_jsx(Grid, __assign({ xs: 6, sm: 4, md: 2 }, { children: _jsx(AppHubCustom, { isAddButton: true, customName: messages['add-
|
|
44
|
+
}), addButton && addButton.order === Constants.AddButtonOrder.End && (_jsx(Grid, __assign({ xs: 6, sm: 4, md: 2 }, { children: _jsx(AppHubCustom, { isAddButton: true, customName: (_b = addButton.title) !== null && _b !== void 0 ? _b : messages['add-item'], customLinkBgColor: customLinkBgColor, url: addButton.url }) })))] }))] }, "row_".concat(rowIndex)));
|
|
44
45
|
}
|
|
45
46
|
default: {
|
|
46
47
|
console.log('no items');
|
|
@@ -21,7 +21,8 @@ export var LogoVariants = {
|
|
|
21
21
|
};
|
|
22
22
|
var AppHubCustom = function (props) {
|
|
23
23
|
var shortName = props.shortName, customName = props.customName, url = props.url, isAddButton = props.isAddButton, customLinkBgColor = props.customLinkBgColor, icon = props.icon;
|
|
24
|
-
|
|
24
|
+
var addIcon = icon !== null && icon !== void 0 ? icon : _jsx(StyledAddCircleOutlineIcon, {});
|
|
25
|
+
return (_jsx(StyledPaper, __assign({ elevation: 0 }, { children: _jsx(StyledLink, __assign({ href: url, target: !isAddButton ? '_blank' : '_self', underline: 'none' }, { children: _jsxs(StyledBoxWrap, { children: [!isAddButton && (_jsx(StyledAvatar, { children: icon !== null && icon !== void 0 ? icon : (customName ? handleAvatarInitials(customName) : null), customLinkBgColor: customLinkBgColor })), isAddButton && addIcon, _jsx(StyledTypography
|
|
25
26
|
// @ts-ignore
|
|
26
27
|
, __assign({
|
|
27
28
|
// @ts-ignore
|
package/lang/en-us.d.ts
CHANGED
package/lang/en-us.js
CHANGED
|
@@ -3,7 +3,7 @@ export var defaultMessages = {
|
|
|
3
3
|
'app-switcher': 'App Switcher',
|
|
4
4
|
'your-apps': 'Your Apps',
|
|
5
5
|
'custom-apps': 'Explore Custom Apps',
|
|
6
|
-
'add-
|
|
6
|
+
'add-item': 'Add item',
|
|
7
7
|
'lp-apps': 'Explore Learning Pool Apps',
|
|
8
8
|
questions: 'Questions',
|
|
9
9
|
'back-to': 'Back',
|
package/package.json
CHANGED
|
@@ -9,7 +9,7 @@
|
|
|
9
9
|
"components",
|
|
10
10
|
"ui"
|
|
11
11
|
],
|
|
12
|
-
"version": "1.7.
|
|
12
|
+
"version": "1.7.4",
|
|
13
13
|
"private": false,
|
|
14
14
|
"main": "index.js",
|
|
15
15
|
"module": "index.js",
|
|
@@ -30,6 +30,7 @@
|
|
|
30
30
|
"eslint-plugin-n": "^15.2.4",
|
|
31
31
|
"focus-trap-react": "^8.11.0",
|
|
32
32
|
"jwt-decode": "^3.1.2",
|
|
33
|
+
"polished": "^4.2.2",
|
|
33
34
|
"query-string": "^7.1.1",
|
|
34
35
|
"tss-react": "^3.3.6",
|
|
35
36
|
"typescript": "^4.6.2",
|
package/utils/constants.d.ts
CHANGED
package/utils/constants.js
CHANGED
|
@@ -4,6 +4,10 @@ export var MOBILE_NAV_PANEL_TYPES = {
|
|
|
4
4
|
SEARCH: 'search',
|
|
5
5
|
AVATAR: 'avatar'
|
|
6
6
|
};
|
|
7
|
+
export var VERTNAV_COLORS = {
|
|
8
|
+
LIGHTEN_AMOUNT: 0.1,
|
|
9
|
+
DARKEN_AMOUNT: 0.1
|
|
10
|
+
};
|
|
7
11
|
// 50 seems a reasonable default limit
|
|
8
12
|
// https://m2.material.io/design/typography/understanding-typography.html#readability
|
|
9
13
|
export var DEFAULT_MAX_CHARACTERS_PER_LINE = 50;
|