Merge pull request #1212 from jitsi/react-native-ui-modifications-more

React native ui modifications
2016-12-22 14:41:43 -06:00 · 2016-12-22 14:41:43 -06:00 · 96a6f2dfd6
parent 35be17cfc9 8d90a7d091
commit 96a6f2dfd6
18 changed files with 1203 additions and 1034 deletions
--- a/android/app/src/main/assets/fonts/jitsi.ttf
+++ b/android/app/src/main/assets/fonts/jitsi.ttf
--- a/css/_font.scss
+++ b/css/_font.scss
@ -34,15 +34,15 @@
 .icon-avatar:before {
  content: "\e901";
 }
-.icon-autorenew:before {
-  content: "\e903";
-}
 .icon-hangup:before {
  content: "\e905";
 }
 .icon-chat:before {
  content: "\e906";
 }
+.icon-download:before {
+  content: "\e902";
+}
 .icon-edit:before {
  content: "\e907";
 }
@ -55,9 +55,6 @@
 .icon-kick:before {
  content: "\e904";
 }
-.icon-menu:before {
-  content: "\e91f";
-}
 .icon-menu-up:before {
  content: "\e91f";
 }
@ -70,9 +67,6 @@
 .icon-exit-full-screen:before {
  content: "\e90c";
 }
-.icon-star:before {
-    content: "\e916";
-}
 .icon-star-full:before {
  content: "\e90a";
 }
@ -109,6 +103,12 @@
 .icon-settings:before {
  content: "\e915";
 }
+.icon-star:before {
+  content: "\e916";
+}
+.icon-switch-camera:before {
+  content: "\e921";
+}
 .icon-share-desktop:before {
  content: "\e917";
 }
@ -133,7 +133,6 @@
 .icon-recEnable:before {
  content: "\e614";
 }
-// FIXME not used anymore - consider removing in the next font update
 .icon-presentation:before {
  content: "\e603";
-}
+}
--- a/fonts/jitsi.eot
+++ b/fonts/jitsi.eot
--- a/fonts/jitsi.svg
+++ b/fonts/jitsi.svg
@ -14,7 +14,6 @@
 <glyph unicode="&#xe900;" glyph-name="connection-lost" horiz-adv-x="1414" d="M0 299.153h196.337v-187.951h-196.337v187.951zM271.842 480.372h196.337v-369.169h-196.337v369.169zM543.656 661.562h196.337v-550.36h-196.337v550.36zM815.47 842.766v-731.564h119.56c-14.589 33.025-23.125 71.503-23.232 111.943 0.132 86.42 38.697 163.851 99.656 216.468l0.348 403.153h-196.332zM1087.292 1024v-533.672c28.874 10.572 62.222 16.73 97.009 16.825 35.717-0.129 69.823-6.614 101.322-18.371l-1.999 535.218h-196.332zM1192.868 439.852c-0.009 0-0.020 0-0.031 0-122.247 0-221.351-98.447-221.372-219.896 0-0.007 0-0.014 0-0.021 0-121.467 99.111-219.935 221.372-219.935 0.011 0 0.021 0 0.032 0 122.248 0.014 221.345 98.477 221.345 219.935 0 0.007 0 0.013 0 0.020-0.021 121.441-99.11 219.883-221.345 219.897zM1194.706 372.607c87.601-0.006 158.614-69.787 158.614-155.866 0-0.006 0-0.012 0-0.019-0.022-86.062-71.026-155.822-158.614-155.828-87.588 0.006-158.593 69.766-158.615 155.826 0 0.007 0 0.014 0 0.020 0 86.079 71.013 155.86 158.613 155.866zM1286.795 355.682l48.348-52.528-236.375-217.567-48.348 52.528 236.375 217.567z" />
 <glyph unicode="&#xe901;" glyph-name="avatar" d="M512 204c106 0 200 56 256 138-2 84-172 132-256 132-86 0-254-48-256-132 56-82 150-138 256-138zM512 810c-70 0-128-58-128-128s58-128 128-128 128 58 128 128-58 128-128 128zM512 938c236 0 426-190 426-426s-190-426-426-426-426 190-426 426 190 426 426 426z" />
 <glyph unicode="&#xe902;" glyph-name="download" d="M726 470h-128v170h-172v-170h-128l214-214zM826 596c110-8 198-100 198-212 0-118-96-214-214-214h-554c-142 0-256 114-256 256 0 132 100 240 228 254 54 102 160 174 284 174 156 0 284-110 314-258z" />
-<glyph unicode="&#xe903;" glyph-name="autorenew" d="M800 694c34-52 54-116 54-182 0-188-154-342-342-342v-128l-170 172 170 170v-128c142 0 256 114 256 256 0 44-12 84-30 120zM512 768c-142 0-256-114-256-256 0-44 10-84 30-120l-62-62c-34 52-54 116-54 182 0 188 154 342 342 342v128l170-172-170-170v128z" />
 <glyph unicode="&#xe904;" glyph-name="kick" d="M512 810l284-426h-568zM214 298h596v-84h-596v84z" />
 <glyph unicode="&#xe905;" glyph-name="hangup" d="M512 640c-68 0-134-10-196-30v-132c0-16-10-34-24-40-42-20-80-46-114-78-8-8-18-12-30-12s-22 4-30 12l-106 106c-8 8-12 18-12 30s4 22 12 30c130 124 306 200 500 200s370-76 500-200c8-8 12-18 12-30s-4-22-12-30l-106-106c-8-8-18-12-30-12s-22 4-30 12c-34 32-72 58-114 78-14 6-24 20-24 38v132c-62 20-128 32-196 32z" />
 <glyph unicode="&#xe906;" glyph-name="chat" d="M854 342v512h-684v-598l86 86h598zM854 938c46 0 84-38 84-84v-512c0-46-38-86-84-86h-598l-170-170v768c0 46 38 84 84 84h684z" />
@ -44,4 +43,5 @@
 <glyph unicode="&#xe91e;" glyph-name="raised-hand" d="M982 790v-620c0-94-78-170-172-170h-310c-46 0-90 18-122 50l-336 342s54 52 56 52c10 8 22 12 34 12 10 0 18-2 26-6 2 0 184-104 184-104v508c0 36 28 64 64 64s64-28 64-64v-300h42v406c0 36 28 64 64 64s64-28 64-64v-406h42v364c0 36 28 64 64 64s64-28 64-64v-364h44v236c0 36 28 64 64 64s64-28 64-64z" />
 <glyph unicode="&#xe91f;" glyph-name="menu-up" d="M512 682l256-256-60-60-196 196-196-196-60 60z" />
 <glyph unicode="&#xe920;" glyph-name="menu-down" d="M708 658l60-60-256-256-256 256 60 60 196-196z" />
+<glyph unicode="&#xe921;" glyph-name="switch-camera" d="M640 362l150 150-150 150v-108h-256v108l-150-150 150-150v108h256v-108zM854 854c46 0 84-40 84-86v-512c0-46-38-86-84-86h-684c-46 0-84 40-84 86v512c0 46 38 86 84 86h136l78 84h256l78-84h136z" />
 </font></defs></svg>
--- a/fonts/jitsi.ttf
+++ b/fonts/jitsi.ttf
--- a/fonts/jitsi.woff
+++ b/fonts/jitsi.woff
--- a/fonts/selection.json
+++ b/fonts/selection.json
@ -85,32 +85,6 @@
      "setId": 2,
      "iconIdx": 12
    },
-    {
-      "icon": {
-        "paths": [
-          "M800 330c34 52 54 116 54 182 0 188-154 342-342 342v128l-170-172 170-170v128c142 0 256-114 256-256 0-44-12-84-30-120zM512 256c-142 0-256 114-256 256 0 44 10 84 30 120l-62 62c-34-52-54-116-54-182 0-188 154-342 342-342v-128l170 172-170 170v-128z"
-        ],
-        "isMulticolor": false,
-        "isMulticolor2": false,
-        "tags": [
-          "autorenew"
-        ],
-        "grid": 0,
-        "attrs": []
-      },
-      "attrs": [],
-      "properties": {
-        "id": 68,
-        "order": 84,
-        "ligatures": "autorenew",
-        "prevSize": 32,
-        "code": 59651,
-        "name": "autorenew"
-      },
-      "setIdx": 0,
-      "setId": 2,
-      "iconIdx": 69
-    },
    {
      "icon": {
        "paths": [
@ -735,6 +709,32 @@
      "setId": 2,
      "iconIdx": 718
    },
+    {
+      "icon": {
+        "paths": [
+          "M640 662l150-150-150-150v108h-256v-108l-150 150 150 150v-108h256v108zM854 170c46 0 84 40 84 86v512c0 46-38 86-84 86h-684c-46 0-84-40-84-86v-512c0-46 38-86 84-86h136l78-84h256l78 84h136z"
+        ],
+        "isMulticolor": false,
+        "isMulticolor2": false,
+        "tags": [
+          "switch_camera"
+        ],
+        "grid": 0,
+        "attrs": []
+      },
+      "attrs": [],
+      "properties": {
+        "id": 741,
+        "order": 108,
+        "ligatures": "switch_camera",
+        "prevSize": 32,
+        "code": 59681,
+        "name": "switch-camera"
+      },
+      "setIdx": 0,
+      "setId": 2,
+      "iconIdx": 742
+    },
    {
      "icon": {
        "paths": [
--- a/react/features/base/fontIcons/jitsi.json
+++ b/react/features/base/fontIcons/jitsi.json
--- a/react/features/conference/components/Conference.native.js
+++ b/react/features/conference/components/Conference.native.js
@ -55,7 +55,7 @@ class Conference extends Component {
    constructor(props) {
        super(props);

-        this.state = { toolbarVisible: false };
+        this.state = { toolbarVisible: true };

        /**
         * The numerical ID of the timeout in milliseconds after which the
--- a/react/features/filmStrip/components/Thumbnail.js
+++ b/react/features/filmStrip/components/Thumbnail.js
@ -86,6 +86,8 @@ class Thumbnail extends Component {
            };
        }

+        const thumbToolbarStyle = styles.thumbnailIndicatorContainer;
+
        // We don't render audio in any of the following:
        // 1. The audio (source) is muted. There's no practical reason (that we
        //    know of, anyway) why we'd want to render it given that it's
@ -121,11 +123,13 @@ class Thumbnail extends Component {
                { participant.dominantSpeaker
                    && <DominantSpeakerIndicator /> }

-                { audioMuted
-                    && <AudioMutedIndicator /> }
+                <Container style = { thumbToolbarStyle }>
+                    { audioMuted
+                        && <AudioMutedIndicator /> }

-                { videoMuted
-                    && <VideoMutedIndicator /> }
+                    { videoMuted
+                        && <VideoMutedIndicator /> }
+                </Container>

            </Container>
        );
--- a/react/features/filmStrip/components/native/AudioMutedIndicator.js
+++ b/react/features/filmStrip/components/native/AudioMutedIndicator.js
@ -16,7 +16,7 @@ export class AudioMutedIndicator extends Component {
        return (
            <Icon
                name = 'microphone-slash'
-                style = { styles.audioMutedIndicator } />
+                style = { styles.thumbnailIndicator } />
        );
    }
 }
--- a/react/features/filmStrip/components/native/VideoMutedIndicator.js
+++ b/react/features/filmStrip/components/native/VideoMutedIndicator.js
@ -18,7 +18,7 @@ export class VideoMutedIndicator extends Component {
        return (
            <Icon
                name = 'eye-slash'
-                style = { styles.videoMutedIndicator } />
+                style = { styles.thumbnailIndicator } />
        );
    }
 }
--- a/react/features/filmStrip/components/native/styles.js
+++ b/react/features/filmStrip/components/native/styles.js
@ -22,14 +22,18 @@ export const styles = createStyleSheet(platformIndependentStyles, {
    /**
     * Audio muted indicator style.
     */
-    audioMutedIndicator: indicator,
+    thumbnailIndicator: indicator,
+
+    dominantSpeakerIndicator: {
+        fontSize: 12
+    },

    /**
     * Dominant speaker indicator background style.
     */
    dominantSpeakerIndicatorBackground: {
-        borderRadius: 15,
-        padding: 5
+        borderRadius: 16,
+        padding: 4
    },

    /**
@ -43,10 +47,5 @@ export const styles = createStyleSheet(platformIndependentStyles, {
    thumbnail: {
        height: 80,
        width: 80
-    },
-
-   /**
-     * Video muted indicator style.
-     */
-    videoMutedIndicator: indicator
+    }
 });
--- a/react/features/filmStrip/components/styles.js
+++ b/react/features/filmStrip/components/styles.js
@ -4,17 +4,6 @@ import { BoxModel, ColorPalette } from '../../base/styles';
 * Film strip related styles common to both Web and native.
 */
 export const styles = {
-    /**
-     * Audio muted indicator style.
-     */
-    audioMutedIndicator: {
-        backgroundColor: 'transparent',
-        color: ColorPalette.white,
-        left: 20,
-        position: 'absolute',
-        top: 1
-    },
-
    /**
     * Dominant speaker indicator style.
     */
@ -29,10 +18,10 @@ export const styles = {
    dominantSpeakerIndicatorBackground: {
        backgroundColor: ColorPalette.blue,
        borderRadius: 15,
-        bottom: 2,
-        left: 1,
+        left: 4,
        padding: 5,
-        position: 'absolute'
+        position: 'absolute',
+        top: 4
    },

    /**
@ -63,10 +52,10 @@ export const styles = {
     */
    moderatorIndicator: {
        backgroundColor: 'transparent',
+        bottom: 4,
        color: ColorPalette.white,
-        left: 1,
        position: 'absolute',
-        top: 1
+        right: 4
    },

    /**
@ -76,14 +65,40 @@ export const styles = {
        alignItems: 'stretch',
        backgroundColor: ColorPalette.appBackground,
        borderColor: '#424242',
+        borderRadius: 3,
        borderStyle: 'solid',
        borderWidth: 1,
        flex: 1,
        justifyContent: 'center',
+        marginLeft: 2,
+        marginRight: 2,
        overflow: 'hidden',
        position: 'relative'
    },

+    /**
+     * The thumbnail audio and video muted indicator style.
+     */
+    thumbnailIndicator: {
+        backgroundColor: 'transparent',
+        color: ColorPalette.white,
+        paddingLeft: 1,
+        paddingRight: 1,
+        position: 'relative'
+    },
+
+    /**
+     * The thumbnails indicator container.
+     */
+    thumbnailIndicatorContainer: {
+        alignSelf: 'stretch',
+        bottom: 4,
+        flex: 1,
+        flexDirection: 'row',
+        left: 4,
+        position: 'absolute'
+    },
+
    /**
     * Pinned video thumbnail style.
     */
@ -95,16 +110,5 @@ export const styles = {
            width: 5
        },
        shadowRadius: 5
-    },
-
-    /**
-     * Video muted indicator style.
-     */
-    videoMutedIndicator: {
-        backgroundColor: 'transparent',
-        color: ColorPalette.white,
-        left: 35,
-        position: 'absolute',
-        top: 1
    }
 };
--- a/react/features/toolbar/components/Toolbar.native.js
+++ b/react/features/toolbar/components/Toolbar.native.js
@ -106,7 +106,7 @@ class Toolbar extends AbstractToolbar {
     * @returns {ReactElement}
     */
    _renderSecondaryToolbar() {
-        const iconStyle = styles.whiteIcon;
+        const iconStyle = styles.secondaryToolbarIcon;
        const style = styles.secondaryToolbarButton;
        const underlayColor = 'transparent';

@ -116,7 +116,7 @@ class Toolbar extends AbstractToolbar {
        return (
            <View style = { styles.secondaryToolbar }>
                <ToolbarButton
-                    iconName = 'reload'
+                    iconName = 'switch-camera'
                    iconStyle = { iconStyle }
                    onClick = { this._toggleCameraFacingMode }
                    style = { style }
@ -156,7 +156,7 @@ class Toolbar extends AbstractToolbar {
 Object.assign(Toolbar.prototype, {
    audioIcon: 'microphone',
    audioMutedIcon: 'mic-disabled',
-    videoIcon: 'webCam',
+    videoIcon: 'camera',
    videoMutedIcon: 'camera-disabled'
 });

--- a/react/features/toolbar/components/styles.js
+++ b/react/features/toolbar/components/styles.js
@ -6,7 +6,7 @@ import { BoxModel, ColorPalette, createStyleSheet } from '../../base/styles';
 * @type {Object}
 */
 const button = {
-    borderRadius: 35,
+    borderRadius: 30,
    borderWidth: 0,
    flex: 0,
    flexDirection: 'row',
@ -16,6 +16,22 @@ const button = {
    width: 60
 };

+/**
+ * Small toolbar button.
+ *
+ * @type {{borderRadius: number, flex: number, flexDirection: string,
+ * height: number, justifyContent: string, margin: number, width: number}}
+ */
+const smallButton = {
+    borderRadius: 20,
+    flex: 0,
+    flexDirection: 'column',
+    height: 40,
+    justifyContent: 'center',
+    margin: BoxModel.margin / 2,
+    width: 40
+};
+
 /**
 * The base style for icons.
 *
@ -27,6 +43,16 @@ const icon = {
    fontSize: 24
 };

+/**
+ * Small toolbar button icon.
+ *
+ * @type {{fontSize: number}}
+ */
+const smallIcon = {
+    ...icon,
+    fontSize: 18
+};
+
 /**
 * The base style for toolbars.
 *
@ -65,7 +91,7 @@ export const styles = createStyleSheet({
    primaryToolbarButton: {
        ...button,
        backgroundColor: ColorPalette.white,
-        opacity: 0.8
+        opacity: 0.7
    },

    /**
@ -76,16 +102,17 @@ export const styles = createStyleSheet({
        ...toolbar,
        bottom: 0,
        flexDirection: 'column',
-        right: 0,
-        top: 0
+        right: BoxModel.margin,
+        top: BoxModel.margin * 2
    },

    /**
     * The style of button in secondaryToolbar.
     */
    secondaryToolbarButton: {
-        ...button,
-        backgroundColor: 'transparent'
+        ...smallButton,
+        backgroundColor: ColorPalette.darkGrey,
+        opacity: 0.7
    },

    /**
@ -105,5 +132,13 @@ export const styles = createStyleSheet({
    whiteIcon: {
        ...icon,
        color: ColorPalette.white
+    },
+
+    /**
+     * The secondary toolbar icon style.
+     */
+    secondaryToolbarIcon: {
+        ...smallIcon,
+        color: ColorPalette.white
    }
 });
--- a/react/features/welcome/components/WelcomePage.native.js
+++ b/react/features/welcome/components/WelcomePage.native.js
@ -99,11 +99,13 @@ class WelcomePage extends AbstractWelcomePage {
                    <Text style = { styles.title }>Enter room name</Text>
                    <TextInput
                        autoCapitalize = 'none'
+                        autoComplete = { false }
                        autoCorrect = { false }
                        autoFocus = { true }
                        onChangeText = { this._onRoomChange }
                        placeholder = 'room name'
                        style = { styles.textInput }
+                        underlineColorAndroid = 'transparent'
                        value = { this.state.room } />
                    <TouchableHighlight
                        disabled = { this._isJoinDisabled() }
--- a/react/features/welcome/components/styles.js
+++ b/react/features/welcome/components/styles.js
@ -101,7 +101,6 @@ export const styles = createStyleSheet({
        backgroundColor: 'transparent',
        borderColor: ColorPalette.white,
        borderRadius: 8,
-        borderStyle: 'solid',
        borderWidth: 1,
        color: TEXT_COLOR,
        fontSize: 23,