Przeglądaj źródła

[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.
j8
Lyubo Marinov 8 lat temu
rodzic
commit
2b8a770163

+ 12
- 6
react/features/conference/components/styles.js Wyświetl plik

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 Wyświetl plik

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 Wyświetl plik

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
     /**

Ładowanie…
Anuluj
Zapisz