@weavy/uikit-react 12.1.0 → 14.0.0

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 (280) hide show
  1. package/changelog.md +60 -0
  2. package/dist/cjs/index.js +28 -6
  3. package/dist/cjs/index.js.map +1 -1
  4. package/dist/cjs/types/client/WeavyClient.d.ts +8 -1
  5. package/dist/cjs/types/components/Attachment.d.ts +2 -1
  6. package/dist/cjs/types/components/Chat.d.ts +1 -1
  7. package/dist/cjs/types/components/Messages.d.ts +3 -1
  8. package/dist/cjs/types/components/PdfViewer.d.ts +3 -1
  9. package/dist/cjs/types/components/Preview.d.ts +8 -10
  10. package/dist/cjs/types/contexts/PreviewContext.d.ts +2 -1
  11. package/dist/cjs/types/contexts/WeavyContext.d.ts +2 -3
  12. package/dist/cjs/types/hooks/useConversations.d.ts +1 -1
  13. package/dist/cjs/types/hooks/useMutateMessage.d.ts +1 -1
  14. package/dist/cjs/types/hooks/useMutateRead.d.ts +1 -0
  15. package/dist/cjs/types/types/Chat.d.ts +2 -1
  16. package/dist/cjs/types/types/Message.d.ts +2 -0
  17. package/dist/cjs/types/types/types.d.ts +63 -9
  18. package/dist/cjs/types/ui/Spinner.d.ts +10 -0
  19. package/dist/cjs/types/utils/fileUtilities.d.ts +1 -4
  20. package/dist/css/weavy-chat.css +1803 -1041
  21. package/dist/css/weavy-messenger.css +2141 -1360
  22. package/dist/css/weavy.css +1943 -1162
  23. package/dist/esm/index.js +28 -6
  24. package/dist/esm/index.js.map +1 -1
  25. package/dist/esm/types/client/WeavyClient.d.ts +8 -1
  26. package/dist/esm/types/components/Attachment.d.ts +2 -1
  27. package/dist/esm/types/components/Chat.d.ts +1 -1
  28. package/dist/esm/types/components/Messages.d.ts +3 -1
  29. package/dist/esm/types/components/PdfViewer.d.ts +3 -1
  30. package/dist/esm/types/components/Preview.d.ts +8 -10
  31. package/dist/esm/types/contexts/PreviewContext.d.ts +2 -1
  32. package/dist/esm/types/contexts/WeavyContext.d.ts +2 -3
  33. package/dist/esm/types/hooks/useConversations.d.ts +1 -1
  34. package/dist/esm/types/hooks/useMutateMessage.d.ts +1 -1
  35. package/dist/esm/types/hooks/useMutateRead.d.ts +1 -0
  36. package/dist/esm/types/types/Chat.d.ts +2 -1
  37. package/dist/esm/types/types/Message.d.ts +2 -0
  38. package/dist/esm/types/types/types.d.ts +63 -9
  39. package/dist/esm/types/ui/Spinner.d.ts +10 -0
  40. package/dist/esm/types/utils/fileUtilities.d.ts +1 -4
  41. package/dist/index.d.ts +15 -7
  42. package/package.json +2 -2
  43. package/rollup.config.js +3 -1
  44. package/src/client/WeavyClient.ts +105 -29
  45. package/src/components/Attachment.tsx +8 -7
  46. package/src/components/Chat.tsx +8 -7
  47. package/src/components/Conversation.tsx +29 -23
  48. package/src/components/ConversationBadge.tsx +7 -5
  49. package/src/components/ConversationForm.tsx +1 -1
  50. package/src/components/ConversationList.tsx +59 -11
  51. package/src/components/ConversationListItem.tsx +71 -54
  52. package/src/components/FileBrowser.tsx +53 -50
  53. package/src/components/MeetingCard.tsx +35 -13
  54. package/src/components/Meetings.tsx +1 -1
  55. package/src/components/Message.tsx +41 -41
  56. package/src/components/Messages.tsx +62 -61
  57. package/src/components/Messenger.tsx +7 -2
  58. package/src/components/NewConversation.tsx +1 -1
  59. package/src/components/PdfViewer.tsx +93 -88
  60. package/src/components/Preview.tsx +115 -54
  61. package/src/components/Reactions.tsx +11 -5
  62. package/src/components/SearchUsers.tsx +21 -11
  63. package/src/components/SeenBy.tsx +13 -7
  64. package/src/components/Typing.tsx +11 -12
  65. package/src/contexts/PreviewContext.tsx +90 -16
  66. package/src/contexts/UserContext.tsx +1 -1
  67. package/src/contexts/WeavyContext.tsx +10 -7
  68. package/src/hooks/useBadge.ts +2 -6
  69. package/src/hooks/useChat.ts +3 -14
  70. package/src/hooks/useConversation.ts +1 -7
  71. package/src/hooks/useConversations.ts +15 -11
  72. package/src/hooks/useFileUploader.ts +6 -8
  73. package/src/hooks/useMembers.ts +1 -7
  74. package/src/hooks/useMessages.ts +1 -7
  75. package/src/hooks/useMutateChat.ts +6 -11
  76. package/src/hooks/useMutateConversation.ts +7 -10
  77. package/src/hooks/useMutateConversationName.ts +10 -12
  78. package/src/hooks/useMutateDeleteReaction.ts +3 -8
  79. package/src/hooks/useMutateExternalBlobs.ts +6 -11
  80. package/src/hooks/useMutateMeeting.ts +6 -11
  81. package/src/hooks/useMutateMembers.ts +8 -13
  82. package/src/hooks/useMutateMessage.ts +9 -18
  83. package/src/hooks/useMutatePinned.ts +3 -8
  84. package/src/hooks/useMutateReaction.ts +6 -12
  85. package/src/hooks/useMutateRead.ts +5 -12
  86. package/src/hooks/useMutateRemoveMembers.ts +7 -12
  87. package/src/hooks/useMutateTyping.ts +6 -11
  88. package/src/hooks/usePresence.ts +2 -3
  89. package/src/hooks/useReactions.ts +11 -12
  90. package/src/hooks/useSearchUsers.ts +1 -6
  91. package/src/hooks/useUser.ts +3 -14
  92. package/src/scss/theme/_alert.scss +61 -63
  93. package/src/scss/theme/_appbar.scss +105 -28
  94. package/src/scss/theme/_avatar.scss +23 -28
  95. package/src/scss/theme/_badge.scss +26 -18
  96. package/src/scss/theme/_buttons.scss +107 -52
  97. package/src/scss/theme/_card.scss +102 -4
  98. package/src/scss/theme/_checkbox.scss +16 -20
  99. package/src/scss/theme/_code-vscode-dark.scss +184 -0
  100. package/src/scss/theme/_code-vscode-light.scss +179 -0
  101. package/src/scss/theme/_code.scss +9 -114
  102. package/src/scss/theme/_comment-editor-cm.scss +97 -0
  103. package/src/scss/theme/_comment-editor.scss +129 -0
  104. package/src/scss/theme/_comments.scss +66 -0
  105. package/src/scss/theme/_content.scss +33 -5
  106. package/src/scss/theme/_conversations.scss +19 -78
  107. package/src/scss/theme/_dropdown.scss +102 -15
  108. package/src/scss/theme/_embed.scss +135 -0
  109. package/src/scss/theme/_facepile.scss +11 -0
  110. package/src/scss/theme/_filebrowser.scss +1 -1
  111. package/src/scss/theme/_files.scss +77 -48
  112. package/src/scss/theme/_grid.scss +8 -0
  113. package/src/scss/theme/_icons.scss +155 -19
  114. package/src/scss/theme/_image-grid.scss +7 -10
  115. package/src/scss/theme/_input.scss +160 -0
  116. package/src/scss/theme/_item.scss +169 -0
  117. package/src/scss/theme/_list.scss +57 -0
  118. package/src/scss/theme/_meeting.scss +11 -0
  119. package/src/scss/theme/_message-editor-cm.scss +95 -0
  120. package/src/scss/theme/_message-editor.scss +66 -20
  121. package/src/scss/theme/_messages.scss +51 -105
  122. package/src/scss/theme/_meta.scss +12 -0
  123. package/src/scss/theme/_overlays.scss +31 -76
  124. package/src/scss/theme/_pager.scss +5 -1
  125. package/src/scss/theme/_pane.scss +13 -2
  126. package/src/scss/theme/_panels.scss +34 -25
  127. package/src/scss/theme/_picker-list.scss +5 -3
  128. package/src/scss/theme/_placeholder.scss +19 -0
  129. package/src/scss/theme/_poll.scss +49 -0
  130. package/src/scss/theme/_post-editor-cm.scss +100 -0
  131. package/src/scss/theme/_post-editor.scss +127 -0
  132. package/src/scss/theme/_post.scss +83 -0
  133. package/src/scss/theme/_preview-code.scss +14 -0
  134. package/src/scss/theme/_preview-embed.scss +11 -5
  135. package/src/scss/theme/_preview-image.scss +8 -26
  136. package/src/scss/theme/_preview-media.scss +1 -0
  137. package/src/scss/theme/_preview-pdf.scss +10 -15
  138. package/src/scss/theme/_preview-text.scss +1 -1
  139. package/src/scss/theme/_preview.scss +59 -76
  140. package/src/scss/theme/_reactions.scss +48 -17
  141. package/src/scss/theme/_sheet.scss +59 -0
  142. package/src/scss/theme/_sidebar.scss +86 -0
  143. package/src/scss/theme/_spinner.scss +11 -7
  144. package/src/scss/theme/_tab.scss +72 -0
  145. package/src/scss/theme/_tables.scss +70 -23
  146. package/src/scss/theme/_toasts.scss +56 -26
  147. package/src/scss/theme/_type.scss +41 -0
  148. package/src/scss/theme/{mixins → base}/_backdrop.scss +0 -0
  149. package/src/scss/theme/{bootstrap/mixins → base}/_breakpoints.scss +9 -0
  150. package/src/scss/theme/base/_colors.scss +315 -0
  151. package/src/scss/theme/base/_md.scss +19 -0
  152. package/src/scss/theme/base/_palette.scss +130 -0
  153. package/src/scss/theme/{mixins → base}/_position.scss +5 -5
  154. package/src/scss/theme/base/_reboot.scss +51 -0
  155. package/src/scss/theme/base/_scroll.scss +180 -0
  156. package/src/scss/theme/base/_svg.scss +49 -0
  157. package/src/scss/theme/base/_text.scss +23 -0
  158. package/src/scss/theme/base/_vars.scss +203 -0
  159. package/src/scss/theme/{fonts → base/fonts}/_fontmapping-roboto.scss +0 -0
  160. package/src/scss/theme/{fonts → base/fonts}/_fontmapping-segoe-ui.scss +0 -0
  161. package/src/scss/theme/base/fonts/_index.scss +2 -0
  162. package/src/scss/weavy-chat.scss +11 -4
  163. package/src/scss/weavy-messenger.scss +38 -21
  164. package/src/types/Chat.ts +2 -1
  165. package/src/types/Message.ts +3 -1
  166. package/src/types/types.ts +72 -10
  167. package/src/ui/Icon.tsx +1 -1
  168. package/src/ui/Spinner.tsx +19 -0
  169. package/src/utils/fileUtilities.ts +11 -125
  170. package/src/utils/infiniteScroll.js +11 -2
  171. package/src/utils/postal-parent.js +398 -0
  172. package/src/utils/promise.js +187 -0
  173. package/src/utils/scrollbarDetection.js +68 -9
  174. package/src/utils/utils.js +547 -0
  175. package/src/scss/theme/_attachments.scss +0 -74
  176. package/src/scss/theme/_cm-editor.scss +0 -42
  177. package/src/scss/theme/_colors.scss +0 -520
  178. package/src/scss/theme/_config.scss +0 -6
  179. package/src/scss/theme/_inputs.scss +0 -28
  180. package/src/scss/theme/_nav.scss +0 -52
  181. package/src/scss/theme/_palette.scss +0 -165
  182. package/src/scss/theme/_preview-icon.scss +0 -41
  183. package/src/scss/theme/_reboot.scss +0 -41
  184. package/src/scss/theme/_root.scss +0 -2
  185. package/src/scss/theme/_scroll.scss +0 -55
  186. package/src/scss/theme/_search.scss +0 -68
  187. package/src/scss/theme/_turbo.scss +0 -17
  188. package/src/scss/theme/_variables.scss +0 -139
  189. package/src/scss/theme/bootstrap/_accordion.scss +0 -146
  190. package/src/scss/theme/bootstrap/_alert.scss +0 -71
  191. package/src/scss/theme/bootstrap/_badge.scss +0 -38
  192. package/src/scss/theme/bootstrap/_breadcrumb.scss +0 -40
  193. package/src/scss/theme/bootstrap/_button-group.scss +0 -142
  194. package/src/scss/theme/bootstrap/_buttons.scss +0 -186
  195. package/src/scss/theme/bootstrap/_card.scss +0 -234
  196. package/src/scss/theme/bootstrap/_carousel.scss +0 -229
  197. package/src/scss/theme/bootstrap/_close.scss +0 -40
  198. package/src/scss/theme/bootstrap/_containers.scss +0 -41
  199. package/src/scss/theme/bootstrap/_dropdown.scss +0 -248
  200. package/src/scss/theme/bootstrap/_forms.scss +0 -9
  201. package/src/scss/theme/bootstrap/_functions.scss +0 -302
  202. package/src/scss/theme/bootstrap/_grid.scss +0 -33
  203. package/src/scss/theme/bootstrap/_helpers.scss +0 -10
  204. package/src/scss/theme/bootstrap/_images.scss +0 -42
  205. package/src/scss/theme/bootstrap/_list-group.scss +0 -191
  206. package/src/scss/theme/bootstrap/_maps.scss +0 -54
  207. package/src/scss/theme/bootstrap/_mixins.scss +0 -43
  208. package/src/scss/theme/bootstrap/_modal.scss +0 -237
  209. package/src/scss/theme/bootstrap/_nav.scss +0 -172
  210. package/src/scss/theme/bootstrap/_navbar.scss +0 -276
  211. package/src/scss/theme/bootstrap/_offcanvas.scss +0 -143
  212. package/src/scss/theme/bootstrap/_pagination.scss +0 -109
  213. package/src/scss/theme/bootstrap/_placeholders.scss +0 -51
  214. package/src/scss/theme/bootstrap/_popover.scss +0 -196
  215. package/src/scss/theme/bootstrap/_progress.scss +0 -59
  216. package/src/scss/theme/bootstrap/_reboot.scss +0 -610
  217. package/src/scss/theme/bootstrap/_root.scss +0 -73
  218. package/src/scss/theme/bootstrap/_spinners.scss +0 -85
  219. package/src/scss/theme/bootstrap/_tables.scss +0 -164
  220. package/src/scss/theme/bootstrap/_toasts.scss +0 -70
  221. package/src/scss/theme/bootstrap/_tooltip.scss +0 -120
  222. package/src/scss/theme/bootstrap/_transitions.scss +0 -27
  223. package/src/scss/theme/bootstrap/_type.scss +0 -106
  224. package/src/scss/theme/bootstrap/_utilities.scss +0 -647
  225. package/src/scss/theme/bootstrap/_variables.scss +0 -1633
  226. package/src/scss/theme/bootstrap/forms/_floating-labels.scss +0 -74
  227. package/src/scss/theme/bootstrap/forms/_form-check.scss +0 -175
  228. package/src/scss/theme/bootstrap/forms/_form-control.scss +0 -194
  229. package/src/scss/theme/bootstrap/forms/_form-range.scss +0 -91
  230. package/src/scss/theme/bootstrap/forms/_form-select.scss +0 -71
  231. package/src/scss/theme/bootstrap/forms/_form-text.scss +0 -11
  232. package/src/scss/theme/bootstrap/forms/_input-group.scss +0 -129
  233. package/src/scss/theme/bootstrap/forms/_labels.scss +0 -36
  234. package/src/scss/theme/bootstrap/forms/_validation.scss +0 -12
  235. package/src/scss/theme/bootstrap/helpers/_clearfix.scss +0 -3
  236. package/src/scss/theme/bootstrap/helpers/_color-bg.scss +0 -10
  237. package/src/scss/theme/bootstrap/helpers/_colored-links.scss +0 -12
  238. package/src/scss/theme/bootstrap/helpers/_position.scss +0 -36
  239. package/src/scss/theme/bootstrap/helpers/_ratio.scss +0 -26
  240. package/src/scss/theme/bootstrap/helpers/_stacks.scss +0 -15
  241. package/src/scss/theme/bootstrap/helpers/_stretched-link.scss +0 -15
  242. package/src/scss/theme/bootstrap/helpers/_text-truncation.scss +0 -7
  243. package/src/scss/theme/bootstrap/helpers/_visually-hidden.scss +0 -8
  244. package/src/scss/theme/bootstrap/helpers/_vr.scss +0 -8
  245. package/src/scss/theme/bootstrap/mixins/_alert.scss +0 -15
  246. package/src/scss/theme/bootstrap/mixins/_backdrop.scss +0 -14
  247. package/src/scss/theme/bootstrap/mixins/_banner.scss +0 -9
  248. package/src/scss/theme/bootstrap/mixins/_border-radius.scss +0 -78
  249. package/src/scss/theme/bootstrap/mixins/_box-shadow.scss +0 -18
  250. package/src/scss/theme/bootstrap/mixins/_buttons.scss +0 -70
  251. package/src/scss/theme/bootstrap/mixins/_caret.scss +0 -64
  252. package/src/scss/theme/bootstrap/mixins/_clearfix.scss +0 -9
  253. package/src/scss/theme/bootstrap/mixins/_color-scheme.scss +0 -7
  254. package/src/scss/theme/bootstrap/mixins/_container.scss +0 -11
  255. package/src/scss/theme/bootstrap/mixins/_deprecate.scss +0 -10
  256. package/src/scss/theme/bootstrap/mixins/_forms.scss +0 -152
  257. package/src/scss/theme/bootstrap/mixins/_gradients.scss +0 -47
  258. package/src/scss/theme/bootstrap/mixins/_grid.scss +0 -151
  259. package/src/scss/theme/bootstrap/mixins/_image.scss +0 -16
  260. package/src/scss/theme/bootstrap/mixins/_list-group.scss +0 -24
  261. package/src/scss/theme/bootstrap/mixins/_lists.scss +0 -7
  262. package/src/scss/theme/bootstrap/mixins/_pagination.scss +0 -10
  263. package/src/scss/theme/bootstrap/mixins/_reset-text.scss +0 -17
  264. package/src/scss/theme/bootstrap/mixins/_resize.scss +0 -6
  265. package/src/scss/theme/bootstrap/mixins/_table-variants.scss +0 -24
  266. package/src/scss/theme/bootstrap/mixins/_text-truncate.scss +0 -8
  267. package/src/scss/theme/bootstrap/mixins/_transition.scss +0 -26
  268. package/src/scss/theme/bootstrap/mixins/_utilities.scss +0 -97
  269. package/src/scss/theme/bootstrap/mixins/_visually-hidden.scss +0 -29
  270. package/src/scss/theme/bootstrap/utilities/_api.scss +0 -47
  271. package/src/scss/theme/bootstrap/vendor/_rfs.scss +0 -354
  272. package/src/scss/theme/bs/_badge.scss +0 -20
  273. package/src/scss/theme/bs/_buttons.scss +0 -185
  274. package/src/scss/theme/bs/_dropdown.scss +0 -86
  275. package/src/scss/theme/bs/_forms.scss +0 -161
  276. package/src/scss/theme/bs/_list-group.scss +0 -73
  277. package/src/scss/theme/bs/_tables.scss +0 -46
  278. package/src/scss/theme/fonts/_index.scss +0 -2
  279. package/src/scss/theme/mixins/_palette.scss +0 -165
  280. package/src/scss/theme/mixins/_scrollbar.scss +0 -110
package/src/scss/theme/base/_scroll.scss ADDED
@@ -0,0 +1,180 @@
1
+ @use "sass:selector";
2
+ @use "colors";
3
+
4
+ @mixin scroll-y {
5
+ overflow-y: auto;
6
+ touch-action: pan-y, pan-x;
7
+
8
+ // to enable HW acceleration and not cause repaint on scroll
9
+ // opacity needed for custom scrollbar to paint
10
+ will-change: scroll-position, opacity;
11
+ backface-visibility: hidden;
12
+
13
+ // ios momentum scrolling on iOS <= 12, cannot be used on the <body> element!
14
+ &:not(body) {
15
+ -webkit-overflow-scrolling: touch;
16
+ }
17
+
18
+ max-height: 100%;
19
+ }
20
+
21
+ @mixin scroll-x {
22
+ overflow-x: auto;
23
+ touch-action: pan-y, pan-x;
24
+
25
+ // to enable HW acceleration and not cause repaint on scroll
26
+ will-change: scroll-position, opacity;
27
+ backface-visibility: hidden;
28
+ max-width: 100%;
29
+ }
30
+
31
+ // custom scrollbar styling
32
+ @mixin custom-scrollbar {
33
+ // custom scrollbar for webkit browsers
34
+ // reference https://webkit.org/blog/363/styling-scrollbars/
35
+
36
+ &::-webkit-scrollbar {
37
+ height: .625rem;
38
+ width: .625rem;
39
+ background: transparent;
40
+ z-index: 999;
41
+ }
42
+
43
+ &::-webkit-scrollbar-track {
44
+ background: transparent;
45
+ }
46
+
47
+ &::-webkit-scrollbar-thumb {
48
+ //background-color: rgba(colors.$gray-500, 0.75);
49
+ background-color: colors.$outline;
50
+ border: .125rem solid transparent;
51
+ border-radius: .5rem;
52
+ background-clip: padding-box;
53
+ opacity: 75%;
54
+
55
+ &:hover {
56
+ //background-color: rgba(colors.$gray-700, 0.75);
57
+ background-color: colors.$outline-variant;
58
+ opacity: 75%;
59
+ }
60
+
61
+ &:window-inactive {
62
+ //background-color: rgba(colors.$gray-500, 0.5);
63
+ background-color: colors.$outline;
64
+ opacity: 50%;
65
+ }
66
+ }
67
+
68
+ // custom scrollbar for firefox
69
+ scrollbar-width: thin;
70
+ //scrollbar-color: rgba(colors.$gray-500, 0.75) transparent;
71
+ scrollbar-color: #{colors.$outline} transparent;
72
+ }
73
+
74
+ // custom scrollbar styling
75
+ @mixin thin-scrollbar {
76
+ // custom scrollbar for webkit browsers
77
+ &::-webkit-scrollbar {
78
+ height: .375rem;
79
+ width: .375rem;
80
+ background: transparent;
81
+ z-index: 999;
82
+ }
83
+
84
+ &::-webkit-scrollbar-track {
85
+ background: transparent;
86
+ }
87
+
88
+ &::-webkit-scrollbar-thumb {
89
+ //background-color: rgba(colors.$gray-700, 0.75);
90
+ background-color: colors.$outline-variant;
91
+ opacity: 75%;
92
+ border: 0 solid transparent;
93
+ border-radius: 0;
94
+ background-clip: padding-box;
95
+
96
+ &:hover {
97
+ //background-color: rgba(colors.$gray-500, 0.75);
98
+ background-color: colors.$outline;
99
+ opacity: 75%;
100
+ }
101
+
102
+ &:window-inactive {
103
+ //background-color: rgba(colors.$gray-500, 0.5);
104
+ background-color: colors.$outline;
105
+ opacity: 50%;
106
+ }
107
+ }
108
+
109
+ // custom scrollbar for firefox
110
+ scrollbar-width: thin;
111
+ //scrollbar-color: rgba(colors.$gray-700, 0.75) transparent;
112
+ scrollbar-color: #{colors.$outline-variant} transparent;
113
+ }
114
+
115
+ @mixin scrollbar-top-padding($scrollbar-padding) {
116
+ &::-webkit-scrollbar-button:vertical:start:single-button {
117
+ height: $scrollbar-padding;
118
+ }
119
+ }
120
+
121
+ @mixin scrollbar-bottom-padding($scrollbar-padding) {
122
+ &::-webkit-scrollbar-button:vertical:end:single-button {
123
+ height: $scrollbar-padding;
124
+ }
125
+ }
126
+
127
+ // Exposed styles
128
+
129
+ .wy-scroll-y {
130
+ @include scroll-y;
131
+
132
+ &:not(.wy-scroll-x) {
133
+ overflow-x: hidden;
134
+ touch-action: pan-y;
135
+ }
136
+ }
137
+
138
+ .wy-scroll-x {
139
+ @include scroll-x;
140
+
141
+ &:not(.wy-scroll-y) {
142
+ overflow-y: hidden;
143
+ touch-action: pan-x;
144
+ }
145
+ }
146
+
147
+ .wy-scrollbars {
148
+ // custom scrollbar styling
149
+ // use overlay scrollbars if supported
150
+
151
+ &.wy-scroll-y, .wy-scroll-y {
152
+ @supports (overflow-y: overlay) {
153
+ overflow-y: overlay;
154
+ }
155
+
156
+ @include custom-scrollbar;
157
+
158
+ // scrollbar offsets
159
+ @include scrollbar-top-padding(#{'var(--wy-scrollbar-adjust-top, 0)'});
160
+ @include scrollbar-bottom-padding(#{'var(--wy-scrollbar-adjust-bottom, 0)'});
161
+ }
162
+ }
163
+
164
+ // prevent scroll when opening modals etc.
165
+ .wy-block-scroll {
166
+ overflow: hidden !important;
167
+ }
168
+
169
+ // element for detecting scrollbar capabilities (visibility, overlay etc.)
170
+ .wy-scrollbar-detection {
171
+ position: fixed;
172
+ top: 0;
173
+ left: 0;
174
+ width: 8rem;
175
+ height: 8rem;
176
+ overflow: scroll;
177
+ z-index: -99999;
178
+ pointer-events: none;
179
+ visibility: hidden;
180
+ }
package/src/scss/theme/base/_svg.scss ADDED
@@ -0,0 +1,49 @@
1
+ @use "sass:string";
2
+
3
+ $escaped-characters: (
4
+ ("<", "%3c"),
5
+ (">", "%3e"),
6
+ ("#", "%23"),
7
+ ("(", "%28"),
8
+ (")", "%29"),
9
+ ) !default;
10
+
11
+ // Replace `$search` with `$replace` in `$string`
12
+ // Used on our SVG icon backgrounds for custom forms.
13
+ //
14
+ // @author Hugo Giraudel
15
+ // @param {String} $string - Initial string
16
+ // @param {String} $search - Substring to replace
17
+ // @param {String} $replace ('') - New value
18
+ // @return {String} - Updated string
19
+ @function str-replace($string, $search, $replace: "") {
20
+ $index: string.index($string, $search);
21
+
22
+ @if $index {
23
+ @return string.slice($string, 1, $index - 1) + $replace + str-replace(string.slice($string, $index + string.length($search)), $search, $replace);
24
+ }
25
+
26
+ @return $string;
27
+ }
28
+
29
+ // See https://codepen.io/kevinweber/pen/dXWoRw
30
+ //
31
+ // Requires the use of quotes around data URIs.
32
+
33
+ @function escape($string) {
34
+ @if string.index($string, "data:image/svg+xml") {
35
+ @each $char, $encoded in $escaped-characters {
36
+ // Do not escape the url brackets
37
+ @if string.index($string, "url(") == 1 {
38
+ $string: url("#{str-replace(string.slice($string, 6, -3), $char, $encoded)}");
39
+ } @else {
40
+ $string: str-replace($string, $char, $encoded);
41
+ }
42
+ }
43
+ }
44
+
45
+ @return $string;
46
+ }
47
+
48
+ // spinner.svg encoded with https://codepen.io/jakob-e/pen/doMoML
49
+ $spinner: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' width='24' height='24' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E%3Cstyle type='text/css'%3Eg%7Banimation:rotate 2s linear infinite;transform-origin:center center%7Dcircle%7Bstroke-dasharray:1,100;stroke-dashoffset:0;animation:dash 1.5s ease-in-out infinite,color 6s ease-in-out infinite%7D@keyframes rotate%7B100%25%7Btransform:rotate(360deg)%7D%7D@keyframes dash%7B0%25%7Bstroke-dasharray:1,100;stroke-dashoffset:0%7D50%25%7Bstroke-dasharray:44.5,100;stroke-dashoffset:-17.5px%7D100%25%7Bstroke-dasharray:44.5,100;stroke-dashoffset:-62px%7D%7D@keyframes color%7B0%25,100%25%7Bstroke:%23216eb4%7D40%25%7Bstroke:%2328b7cf%7D66%25%7Bstroke:%23216eb4%7D80%25,90%25%7Bstroke:%2328b7cf%7D%7D%3C/style%3E%3Cg%3E%3Ccircle fill='none' cx='12' cy='12' r='11' stroke-linecap='butt' stroke-width='2' /%3E%3C/g%3E%3C/svg%3E")
package/src/scss/theme/base/_text.scss ADDED
@@ -0,0 +1,23 @@
1
+ @use "vars";
2
+
3
+ // Text truncate
4
+ // Requires inline-block or block for proper styling
5
+ @mixin truncate {
6
+ overflow: hidden;
7
+ text-overflow: ellipsis;
8
+ white-space: nowrap;
9
+ }
10
+
11
+ // Use stretched-link on links to to make its containing block clickable via a ::after pseudo element.
12
+ // In most cases, this means that an element with position: relative; that contains a link is clickable.
13
+ @mixin stretched-link {
14
+ &::after {
15
+ position: absolute;
16
+ top: 0;
17
+ right: 0;
18
+ bottom: 0;
19
+ left: 0;
20
+ z-index: 1;
21
+ content: "";
22
+ }
23
+ }
package/src/scss/theme/base/_vars.scss ADDED
@@ -0,0 +1,203 @@
1
+ @use "colors";
2
+ @use "md";
3
+
4
+ // Breakpoints for responsive layout
5
+ $breakpoint-sm: 576px;
6
+ $breakpoint-md: 768px;
7
+ $breakpoint-lg: 992px;
8
+ $breakpoint-xl: 1200px;
9
+ $breakpoint-xxl: 1400px;
10
+
11
+ // Z-index master list
12
+ $zindex-dropdown: 1000 !default;
13
+ $zindex-sticky: 1020 !default;
14
+ $zindex-fixed: 1030 !default;
15
+ //$zindex-offcanvas-backdrop: 1040 !default;
16
+ //$zindex-offcanvas: 1045 !default;
17
+ $zindex-modal-backdrop: 1050 !default;
18
+ $zindex-modal: 1055 !default;
19
+ $zindex-popover: 1070 !default;
20
+ $zindex-tooltip: 1080 !default;
21
+ $zindex-toast: 1090 !default;
22
+
23
+ $zindex-max: 2147483647 !default;
24
+
25
+ $font-family-sans-serif: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
26
+
27
+ $font-weight-thin: 100;
28
+ $font-weight-extralight: 200;
29
+ $font-weight-light: 300;
30
+ $font-weight-normal: 400;
31
+ $font-weight-medium: 500;
32
+ $font-weight-semibold: 600;
33
+ $font-weight-bold: 700;
34
+ $font-weight-extrabold: 800;
35
+ $font-weight-black: 900;
36
+ $font-weight-extrablack: 950;
37
+
38
+ // Components
39
+ $appbar-height: 3rem;
40
+ $footerbar-height: 4rem;
41
+
42
+ // VARIABLES
43
+
44
+ :where(:root, :host > *) {
45
+ /* Typography */
46
+
47
+ // Font should be inherited/unset by default
48
+ --wy-font-family: unset; // #{$font-family-sans-serif};
49
+ --wy-font-weight: unset; // #{$font-weight-normal};
50
+
51
+ --wy-line-height: 1.5;
52
+
53
+ --wy-font-size-base: 1rem; // Assumes the browser default, typically 16px
54
+ --wy-font-size-xxs: calc(.625 * var(--wy-font-size-base)); // .625rem 10px
55
+ --wy-font-size-xs: calc(.75 * var(--wy-font-size-base)); // .75rem 12px
56
+ --wy-font-size-sm: calc(.875 * var(--wy-font-size-base)); // .875rem 14px
57
+ --wy-font-size-lg: calc(1.25 * var(--wy-font-size-base)); // 1.25rem 20px
58
+
59
+ --wy-headings-font-style: unset;
60
+ --wy-headings-font-family: var(--wy-font-family);
61
+ --wy-headings-font-weight: #{$font-weight-medium};
62
+ --wy-headings-line-height: var(--wy-line-height);
63
+
64
+ /* Border */
65
+ --wy-border-radius: .5rem;
66
+ --wy-border-radius-sm: calc(.75 * var(--wy-border-radius)); // .375rem;
67
+ --wy-border-radius-lg: calc(1.5 * var(--wy-border-radius)); // .75rem;
68
+ --wy-border-radius-xl: calc(2 * var(--wy-border-radius)); // 1rem;
69
+ --wy-border-radius-pill: 50rem;
70
+
71
+ /* Links */
72
+ //--wy-link-color: #{colors.$primary}; ---> --wy-link in colors
73
+ --wy-link-decoration: none;
74
+ --wy-link-hover-decoration: null;
75
+
76
+ /* Tables */
77
+ --wy-table-cell-padding-x: .25rem;
78
+ --wy-table-cell-padding-y: .25rem;
79
+
80
+ /* Inputs */
81
+ --wy-input-padding-y: .4375rem;
82
+ --wy-input-padding-x: .75rem;
83
+ --wy-input-font-family: unset;
84
+ --wy-input-font-size: var(--wy-font-size-base);
85
+ --wy-input-font-weight: var(--wy-font-weight);
86
+ --wy-input-line-height: var(--wy-line-height);
87
+ --wy-input-border-width: 1px;
88
+ --wy-input-border-radius: var(--wy-border-radius);
89
+
90
+
91
+ /* Shadows */
92
+ --wy-shadow-level0: none; // xxs
93
+ --wy-shadow-level1: #{md.$shadow-2dp}; // xs
94
+ --wy-shadow-level2: #{md.$shadow-4dp}; // sm
95
+ --wy-shadow-level3: #{md.$shadow-8dp}; //
96
+ --wy-shadow-level4: #{md.$shadow-16dp}; // lg
97
+
98
+ /* Transitions */
99
+ --wy-transition-curve: #{md.$animation-curve-default};
100
+ --wy-transition-duration: #{md.$animation-duration};
101
+ --wy-transition-duration-fast: #{md.$animation-duration-fast};
102
+ --wy-transition: var(--wy-transition-duration) var(--wy-transition-curve);
103
+ --wy-transition-fast: var(--wy-transition-duration-fast) var(--wy-transition-curve);
104
+
105
+ /* Opacity */
106
+ --wy-opacity-backdrop: 95%;
107
+ --wy-opacity-muted: 38%;
108
+ --wy-opacity-disabled: 38%;
109
+ /*
110
+ --wy-opacity-disabled: 12%;
111
+ --wy-opacity-on-disabled: 38%;
112
+ */
113
+
114
+ /* State layer */
115
+ --wy-opacity-state-hover: 8%;
116
+ --wy-opacity-state-focus: 12%;
117
+ --wy-opacity-state-active: 12%;
118
+ --wy-opacity-state-drag: 16%;
119
+
120
+ /* Surface elevation */
121
+ --wy-surface-1-mix: 5%;
122
+ --wy-surface-2-mix: 8%;
123
+ --wy-surface-3-mix: 11%;
124
+ --wy-surface-4-mix: 12%;
125
+ --wy-surface-5-mix: 14%;
126
+
127
+ }
128
+
129
+ // Rounded corners
130
+ $border-radius-sm: var(--wy-border-radius-sm);
131
+ $border-radius: var(--wy-border-radius);
132
+ $border-radius-lg: var(--wy-border-radius-lg);
133
+ $border-radius-xl: var(--wy-border-radius-xl);
134
+ $border-radius-pill: var(--wy-border-radius-pill);
135
+
136
+ // Typography
137
+ $font-family-base: var(--wy-font-family);
138
+ $font-weight-base: var(--wy-font-weight);
139
+
140
+ $line-height-base: var(--wy-line-height);
141
+
142
+ $font-size-xxs: var(--wy-font-size-xxs);
143
+ $font-size-xs: var(--wy-font-size-xs);
144
+ $font-size-sm: var(--wy-font-size-sm);
145
+ $font-size-base: var(--wy-font-size-base);
146
+ $font-size-lg: var(--wy-font-size-lg);
147
+
148
+ $headings-font-style: var(--wy-headings-font-style);
149
+ $headings-font-family: var(--wy-headings-font-family);
150
+ $headings-font-weight: var(--wy-headings-font-weight);
151
+ $headings-line-height: var(--wy-headings-line-height);
152
+
153
+ // Links
154
+ //$link-color: var(--wy-link-color); ---> colors.$link;
155
+ $link-decoration: var(--wy-link-decoration);
156
+ $link-hover-decoration: var(--wy-link-hover-decoration);
157
+
158
+ // Tables
159
+ $table-cell-padding-x: var(--wy-table-cell-padding-x);
160
+ $table-cell-padding-y: var(--wy-table-cell-padding-y);
161
+
162
+ // Forms, Inputs
163
+ $input-padding-y: var(--wy-input-padding-y);
164
+ $input-padding-x: var(--wy-input-padding-x);
165
+ $input-font-family: var(--wy-input-font-family);
166
+ $input-font-size: var(--wy-input-font-size);
167
+ $input-font-weight: var(--wy-input-font-weight);
168
+ $input-line-height: var(--wy-input-line-height);
169
+ $input-border-width: var(--wy-input-border-width);
170
+ $input-border-radius: var(--wy-input-border-radius);
171
+
172
+ // Shadows
173
+ $shadow-level0: var(--wy-shadow-level0);
174
+ $shadow-level1: var(--wy-shadow-level1);
175
+ $shadow-level2: var(--wy-shadow-level2);
176
+ $shadow-level3: var(--wy-shadow-level3);
177
+ $shadow-level4: var(--wy-shadow-level4);
178
+
179
+ // Transitions
180
+ $transition-curve: var(--wy-transition-curve);
181
+ $transition-duration: var(--wy-transition-duration);
182
+ $transition-duration-fast: var(--wy-transition-duration-fast);
183
+ $transition: var(--wy-transition);
184
+ $transition-fast: var(--wy-transition-fast);
185
+
186
+ // Opacity
187
+ $opacity-backdrop: var(--wy-opacity-backdrop);
188
+ $opacity-muted: var(--wy-opacity-muted);
189
+ $opacity-disabled: var(--wy-opacity-disabled);
190
+ $opacity-on-disabled: var(--wy-opacity-on-disabled);
191
+
192
+ // State layer
193
+ $opacity-state-hover: var(--wy-opacity-state-hover);
194
+ $opacity-state-focus: var(--wy-opacity-state-focus);
195
+ $opacity-state-active: var(--wy-opacity-state-active);
196
+ $opacity-state-drag: var(--wy-opacity-state-drag);
197
+
198
+ // Surface elevation
199
+ $surface-1-mix: var(--wy-surface-1-mix);
200
+ $surface-2-mix: var(--wy-surface-2-mix);
201
+ $surface-3-mix: var(--wy-surface-3-mix);
202
+ $surface-4-mix: var(--wy-surface-4-mix);
203
+ $surface-5-mix: var(--wy-surface-5-mix);
package/src/scss/theme/base/fonts/_index.scss ADDED
@@ -0,0 +1,2 @@
1
+ @import './fontmapping-roboto';
2
+ @import './fontmapping-segoe-ui'; // Needed by Firefox
package/src/scss/weavy-chat.scss CHANGED
@@ -1,7 +1,9 @@
1
1
  // weavy reboot
2
- @use "theme/reboot";
2
+ @use "theme/base/reboot";
3
+ @use "theme/base/scroll";
4
+ @use "theme/base/vars";
5
+
3
6
  // weavy ui components
4
- @use "theme/attachments";
5
7
  @use "theme/avatar";
6
8
  @use "theme/buttons";
7
9
  @use "theme/code";
@@ -10,22 +12,27 @@
10
12
  @use "theme/emoji";
11
13
  @use "theme/icons";
12
14
  @use "theme/image-grid";
15
+ @use "theme/input";
16
+ @use "theme/item";
17
+ @use "theme/list";
13
18
  @use "theme/messages";
14
19
  @use "theme/message-editor";
20
+ @use "theme/meta";
15
21
  @use "theme/overlays";
16
22
  @use "theme/pager";
17
23
  @use "theme/pane";
18
24
  @use "theme/panels";
19
25
  @use "theme/picker-list";
20
26
  @use "theme/preview";
27
+ @use "theme/preview-code";
21
28
  @use "theme/preview-embed";
22
29
  @use "theme/preview-html";
23
- @use "theme/preview-icon";
24
30
  @use "theme/preview-image";
25
31
  @use "theme/preview-media";
26
32
  @use "theme/preview-pdf";
27
33
  @use "theme/preview-text";
28
34
  @use "theme/reactions";
29
- @use "theme/scroll";
30
35
  @use "theme/spinner";
36
+ @use "theme/type";
31
37
  @use "theme/typing";
38
+ @use "theme/meeting";
package/src/scss/weavy-messenger.scss CHANGED
@@ -1,9 +1,10 @@
1
1
  // weavy reboot
2
- @use "theme/reboot";
2
+ @use "theme/base/reboot";
3
+ @use "theme/base/scroll";
4
+ @use "theme/base/colors";
3
5
 
4
6
  // weavy ui components
5
7
  @use "theme/appbar";
6
- @use "theme/attachments";
7
8
  @use "theme/avatar";
8
9
  @use "theme/badge";
9
10
  @use "theme/buttons";
@@ -15,46 +16,62 @@
15
16
  @use "theme/emoji";
16
17
  @use "theme/icons";
17
18
  @use "theme/image-grid";
18
- @use "theme/inputs";
19
+ @use "theme/input";
20
+ @use "theme/item";
21
+ @use "theme/list";
19
22
  @use "theme/messages";
20
23
  @use "theme/message-editor";
24
+ @use "theme/meta";
21
25
  @use "theme/overlays";
22
26
  @use "theme/pager";
23
27
  @use "theme/pane";
24
28
  @use "theme/panels";
25
29
  @use "theme/picker-list";
26
30
  @use "theme/preview";
31
+ @use "theme/preview-code";
27
32
  @use "theme/preview-embed";
28
33
  @use "theme/preview-html";
29
- @use "theme/preview-icon";
30
34
  @use "theme/preview-image";
31
35
  @use "theme/preview-media";
32
36
  @use "theme/preview-pdf";
33
37
  @use "theme/preview-text";
34
38
  @use "theme/reactions";
35
- @use "theme/search";
36
- @use "theme/scroll";
37
39
  @use "theme/spinner";
40
+ @use "theme/tables";
41
+ @use "theme/type";
38
42
  @use "theme/typing";
43
+ @use "theme/meeting";
39
44
 
40
45
  // layout
41
46
  .wy-messenger-provider {
42
- display: flex;
43
- min-height: 0;
44
- min-width: 0;
45
- flex: 1 1 0;
46
- }
47
+ display: flex;
48
+ min-height: 0;
49
+ min-width: 0;
50
+ flex: 1 1 0;
51
+ }
47
52
 
48
- .wy-messenger-sidebar {
49
- width: 300px;
50
- border-right: 1px solid #ccc;
51
- }
53
+ .wy-messenger-sidebar {
54
+ ---background-color: #{colors.$background};
55
+ ---color: #{colors.$on-background};
56
+
57
+ background-color: var(---background-color);
58
+ color: var(---color);
59
+
60
+ width: 300px;
61
+ border-right: 1px solid #{colors.$outline-variant};
62
+ }
52
63
 
53
- .wy-messenger-conversation{
54
- overflow-anchor: none;
55
- display: flex;
56
- flex-direction: column;
57
- flex: 1 1 0;
58
- }
64
+ .wy-messenger-conversation {
65
+ ---background-color: #{colors.$background};
66
+ ---color: #{colors.$on-background};
67
+
68
+ background-color: var(---background-color);
69
+ color: var(---color);
70
+
71
+ overflow-anchor: none;
72
+ display: flex;
73
+ flex-direction: column;
74
+ flex: 1 1 0;
75
+ }
59
76
 
60
77
 
package/src/types/Chat.ts CHANGED
@@ -1,3 +1,4 @@
1
1
  export interface ChatProps {
2
- id: string
2
+ uid: string,
3
+ className?: string
3
4
  }
package/src/types/Message.ts CHANGED
@@ -6,11 +6,13 @@ export interface MessageProps {
6
6
  avatar?: string,
7
7
  name: string,
8
8
  created_at: string,
9
+ created_by: string,
9
10
  attachments: AttachmentType[],
10
11
  meeting: MeetingCardType,
11
12
  parentId: number | null,
12
13
  reactions: ReactableType[],
13
14
  reactions_count?: number,
14
- seenBy: MemberType[]
15
+ seenBy: MemberType[],
16
+ chatRoom: boolean
15
17
  }
16
18