瀏覽代碼

[RN] Consistent margins for Filmstrip and Toolbox

With the introduction of wide and narrow layouts the margins of the
Filmstrip and the Toolbox became inconsistent. For example, the
Filmstrip's top in the wide layout was nearer to the top than the
secondary Toolbar.
master
Lyubo Marinov 7 年之前
父節點
當前提交
2b8a770163

+ 12
- 6
react/features/conference/components/styles.js 查看文件

1
 import {
1
 import {
2
+    BoxModel,
2
     ColorPalette,
3
     ColorPalette,
3
     createStyleSheet,
4
     createStyleSheet,
4
     fixAndroidViewClipping
5
     fixAndroidViewClipping
41
     },
42
     },
42
 
43
 
43
     /**
44
     /**
44
-     * The style of the view which expands over the whole conference area and
45
-     * splits it between both the filmstrip and the toolbox.
45
+     * The style of the {@link View} which expands over the whole
46
+     * {@link Conference} area and splits it between the {@link Filmstrip} and
47
+     * the {@link Toolbox}.
46
      */
48
      */
47
     toolboxAndFilmstripContainer: {
49
     toolboxAndFilmstripContainer: {
48
-        bottom: 0,
50
+        bottom: BoxModel.margin,
49
         flexDirection: 'column',
51
         flexDirection: 'column',
50
         justifyContent: 'flex-end',
52
         justifyContent: 'flex-end',
51
-        left: 0,
53
+        left: BoxModel.margin,
52
         position: 'absolute',
54
         position: 'absolute',
53
-        right: 0,
54
-        top: 0
55
+        right: BoxModel.margin,
56
+
57
+        // Both on Android and iOS there is the status bar which may be visible.
58
+        // On iPhone X there is the notch. In the two cases BoxModel.margin is
59
+        // not enough.
60
+        top: BoxModel.margin * 3
55
     }
61
     }
56
 });
62
 });

+ 5
- 8
react/features/filmstrip/components/styles.js 查看文件

1
 import { Platform } from '../../base/react';
1
 import { Platform } from '../../base/react';
2
-import { BoxModel, ColorPalette } from '../../base/styles';
2
+import { ColorPalette } from '../../base/styles';
3
 
3
 
4
 /**
4
 /**
5
  * The base style of {@link Filmstrip} shared between narrow and wide versions.
5
  * The base style of {@link Filmstrip} shared between narrow and wide versions.
54
     filmstripNarrow: {
54
     filmstripNarrow: {
55
         ...filmstrip,
55
         ...filmstrip,
56
         alignItems: 'flex-end',
56
         alignItems: 'flex-end',
57
-        height: 90,
58
-        marginBottom: BoxModel.margin,
59
-        marginLeft: BoxModel.margin,
60
-        marginRight: BoxModel.margin
57
+        height: 90
61
     },
58
     },
62
 
59
 
63
     /**
60
     /**
66
      */
63
      */
67
     filmstripWide: {
64
     filmstripWide: {
68
         ...filmstrip,
65
         ...filmstrip,
69
-        bottom: BoxModel.margin,
70
-        left: BoxModel.margin,
66
+        bottom: 0,
67
+        left: 0,
71
         position: 'absolute',
68
         position: 'absolute',
72
-        top: BoxModel.margin
69
+        top: 0
73
     },
70
     },
74
 
71
 
75
     /**
72
     /**

+ 2
- 2
react/features/toolbox/components/styles.js 查看文件

111
         ..._toolbar,
111
         ..._toolbar,
112
         bottom: 0,
112
         bottom: 0,
113
         flexDirection: 'column',
113
         flexDirection: 'column',
114
-        right: BoxModel.margin,
115
-        top: BoxModel.margin * 2
114
+        right: 0,
115
+        top: 0
116
     },
116
     },
117
 
117
 
118
     /**
118
     /**

Loading…
取消
儲存