@taruvi/navkit 0.0.48-beta.7 → 0.0.48-beta.9
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/package.json
CHANGED
package/src/App.styles.ts
CHANGED
|
@@ -53,9 +53,9 @@ export const appStyles = {
|
|
|
53
53
|
padding: '8px',
|
|
54
54
|
},
|
|
55
55
|
chatOpenButton: {
|
|
56
|
-
backgroundColor:
|
|
56
|
+
backgroundColor: 'transparent',
|
|
57
57
|
'&:hover': {
|
|
58
|
-
backgroundColor:
|
|
58
|
+
backgroundColor: 'transparent',
|
|
59
59
|
},
|
|
60
60
|
},
|
|
61
61
|
iconStyle: {
|
|
@@ -139,9 +139,9 @@ export const getAppStyles = (mode: ThemeMode) => {
|
|
|
139
139
|
padding: '8px',
|
|
140
140
|
},
|
|
141
141
|
chatOpenButton: {
|
|
142
|
-
backgroundColor:
|
|
142
|
+
backgroundColor: 'transparent',
|
|
143
143
|
'&:hover': {
|
|
144
|
-
backgroundColor:
|
|
144
|
+
backgroundColor: 'transparent',
|
|
145
145
|
},
|
|
146
146
|
},
|
|
147
147
|
iconStyle: {
|
package/src/App.tsx
CHANGED
|
@@ -139,12 +139,16 @@ const NavkitContent = () => {
|
|
|
139
139
|
)}
|
|
140
140
|
|
|
141
141
|
{showChat && chatUrl && (
|
|
142
|
-
<DraggableResizable
|
|
143
|
-
|
|
142
|
+
<DraggableResizable
|
|
143
|
+
onClose={() => setShowChat(false)}
|
|
144
|
+
initialWidth={Math.min(1200, window.innerWidth * 0.9)}
|
|
145
|
+
initialHeight={Math.min(600, window.innerHeight * 0.8)}
|
|
146
|
+
titleBarActions={
|
|
144
147
|
<IconButton onClick={() => window.open(chatUrl, "_blank")} sx={styles.chatOpenButton}>
|
|
145
148
|
<FontAwesomeIcon icon={["fas", "external-link-alt"]} style={{ fontSize: "10px" }} />
|
|
146
149
|
</IconButton>
|
|
147
|
-
|
|
150
|
+
}
|
|
151
|
+
>
|
|
148
152
|
<MattermostChat
|
|
149
153
|
mattermostUrl={chatUrl}
|
|
150
154
|
loginId={userData?.username ?? ''}
|
|
@@ -3,6 +3,7 @@ import { Box } from '@mui/material'
|
|
|
3
3
|
|
|
4
4
|
interface Props {
|
|
5
5
|
children: React.ReactNode
|
|
6
|
+
titleBarActions?: React.ReactNode
|
|
6
7
|
initialWidth?: number
|
|
7
8
|
initialHeight?: number
|
|
8
9
|
minWidth?: number
|
|
@@ -14,6 +15,7 @@ const HEADER_HEIGHT = 28
|
|
|
14
15
|
|
|
15
16
|
const DraggableResizable = ({
|
|
16
17
|
children,
|
|
18
|
+
titleBarActions,
|
|
17
19
|
initialWidth = 900,
|
|
18
20
|
initialHeight = 600,
|
|
19
21
|
minWidth = 320,
|
|
@@ -108,13 +110,21 @@ const DraggableResizable = ({
|
|
|
108
110
|
cursor: 'grab',
|
|
109
111
|
display: 'flex',
|
|
110
112
|
alignItems: 'center',
|
|
111
|
-
justifyContent: '
|
|
113
|
+
justifyContent: 'space-between',
|
|
114
|
+
px: 1,
|
|
112
115
|
flexShrink: 0,
|
|
113
116
|
userSelect: 'none',
|
|
114
117
|
'&:active': { cursor: 'grabbing' },
|
|
115
118
|
}}
|
|
116
119
|
>
|
|
120
|
+
<Box sx={{ width: 32 }} />
|
|
117
121
|
<Box sx={{ width: 40, height: 4, borderRadius: 2, backgroundColor: '#999' }} />
|
|
122
|
+
<Box
|
|
123
|
+
sx={{ display: 'flex', alignItems: 'center', width: 32, justifyContent: 'flex-end' }}
|
|
124
|
+
onPointerDown={(e) => e.stopPropagation()}
|
|
125
|
+
>
|
|
126
|
+
{titleBarActions}
|
|
127
|
+
</Box>
|
|
118
128
|
</Box>
|
|
119
129
|
{/* Content */}
|
|
120
130
|
<Box sx={{ flex: 1, overflow: 'hidden', position: 'relative' }}>
|