Browse Source

[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 8 years ago
parent
commit
2b8a770163

+ 12
- 6
react/features/conference/components/styles.js View File

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 View File

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 View File

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…
Cancel
Save