Browse Source

fix(polls): Fix scroll not working on mobile web polls pane

* Moved TouchmoveHack's css to component
master
Vlad Piersec 4 years ago
parent
commit
1feb0fa129

+ 0
- 5
css/_chat.scss View File

563
     }
563
     }
564
 }
564
 }
565
 
565
 
566
-.touchmove-hack {
567
-    display: flex;
568
-    flex: 1;
569
-    overflow: auto;
570
-}
571
 
566
 
572
 /**
567
 /**
573
  * Make header close button more easily tappable on mobile.
568
  * Make header close button more easily tappable on mobile.

+ 1
- 1
css/_polls.scss View File

240
     position: relative;
240
     position: relative;
241
 
241
 
242
     @media (max-width: 580px) {
242
     @media (max-width: 580px) {
243
-        height: calc(100% - 32px);
243
+        height: 100%;
244
     }
244
     }
245
 }
245
 }
246
 
246
 

+ 4
- 2
react/features/chat/components/web/Chat.js View File

134
             return (
134
             return (
135
                 <>
135
                 <>
136
                     { this.props._isPollsEnabled && this._renderTabs()}
136
                     { this.props._isPollsEnabled && this._renderTabs()}
137
-                    <PollsPane />
137
+                    <TouchmoveHack isModal = { true }><PollsPane /></TouchmoveHack>
138
                     <KeyboardAvoider />
138
                     <KeyboardAvoider />
139
                 </>
139
                 </>
140
             );
140
             );
143
         return (
143
         return (
144
             <>
144
             <>
145
                 {this.props._isPollsEnabled && this._renderTabs()}
145
                 {this.props._isPollsEnabled && this._renderTabs()}
146
-                <TouchmoveHack isModal = { this.props._isModal }>
146
+                <TouchmoveHack
147
+                    flex = { true }
148
+                    isModal = { this.props._isModal }>
147
                     <MessageContainer
149
                     <MessageContainer
148
                         messages = { this.props._messages }
150
                         messages = { this.props._messages }
149
                         ref = { this._messageContainerRef } />
151
                         ref = { this._messageContainerRef } />

+ 24
- 3
react/features/chat/components/web/TouchmoveHack.js View File

1
 // @flow
1
 // @flow
2
 
2
 
3
+import { makeStyles } from '@material-ui/core/styles';
4
+import clsx from 'clsx';
3
 import React, { useEffect, useRef } from 'react';
5
 import React, { useEffect, useRef } from 'react';
4
 
6
 
5
 import { isMobileBrowser } from '../../../base/environment/utils';
7
 import { isMobileBrowser } from '../../../base/environment/utils';
11
      */
13
      */
12
    children: React$Node,
14
    children: React$Node,
13
 
15
 
16
+    /**
17
+     * Whether the component should be flex container or not.
18
+     */
19
+    flex?: boolean,
20
+
14
     /**
21
     /**
15
      * Whether the component is rendered within a modal.
22
      * Whether the component is rendered within a modal.
16
      */
23
      */
17
-    isModal: boolean
24
+    isModal: boolean,
25
+
18
 };
26
 };
19
 
27
 
28
+const useStyles = makeStyles(() => {
29
+    return {
30
+        flex: {
31
+            display: 'flex',
32
+            flex: 1
33
+        },
34
+        base: {
35
+            height: '100%',
36
+            overflow: 'auto'
37
+        }
38
+    };
39
+});
20
 
40
 
21
 /**
41
 /**
22
  * Component that disables {@code touchmove} propagation below it.
42
  * Component that disables {@code touchmove} propagation below it.
23
  *
43
  *
24
  * @returns {ReactElement}
44
  * @returns {ReactElement}
25
  */
45
  */
26
-function TouchmoveHack({ children, isModal }: Props) {
46
+function TouchmoveHack({ children, isModal, flex }: Props) {
27
     if (!isModal || !isMobileBrowser()) {
47
     if (!isModal || !isMobileBrowser()) {
28
         return children;
48
         return children;
29
     }
49
     }
54
             }
74
             }
55
         };
75
         };
56
     }, []);
76
     }, []);
77
+    const classes = useStyles();
57
 
78
 
58
     return (
79
     return (
59
         <div
80
         <div
60
-            className = 'touchmove-hack'
81
+            className = { clsx(classes.base, flex && classes.flex) }
61
             ref = { touchMoveElementRef }>
82
             ref = { touchMoveElementRef }>
62
             {children}
83
             {children}
63
         </div>
84
         </div>

+ 6
- 2
react/features/settings/components/web/MoreTab.js View File

301
                     { t('settings.desktopShareFramerate') }
301
                     { t('settings.desktopShareFramerate') }
302
                 </h2>
302
                 </h2>
303
                 <div className = 'dropdown-menu'>
303
                 <div className = 'dropdown-menu'>
304
-                    <TouchmoveHack isModal = { true }>
304
+                    <TouchmoveHack
305
+                        flex = { true }
306
+                        isModal = { true }>
305
                         <DropdownMenu
307
                         <DropdownMenu
306
                             isOpen = { this.state.isFramerateSelectOpen }
308
                             isOpen = { this.state.isFramerateSelectOpen }
307
                             onOpenChange = { this._onFramerateDropdownOpenChange }
309
                             onOpenChange = { this._onFramerateDropdownOpenChange }
384
                     { t('settings.language') }
386
                     { t('settings.language') }
385
                 </h2>
387
                 </h2>
386
                 <div className = 'dropdown-menu'>
388
                 <div className = 'dropdown-menu'>
387
-                    <TouchmoveHack isModal = { true }>
389
+                    <TouchmoveHack
390
+                        flex = { true }
391
+                        isModal = { true }>
388
                         <DropdownMenu
392
                         <DropdownMenu
389
                             isOpen = { this.state.isLanguageSelectOpen }
393
                             isOpen = { this.state.isLanguageSelectOpen }
390
                             onOpenChange = { this._onLanguageDropdownOpenChange }
394
                             onOpenChange = { this._onLanguageDropdownOpenChange }

Loading…
Cancel
Save