Merge branch 'develop' into travis/granular-settings

src/components/structures/ContextualMenu.js

@@ -33,6 +33,7 @@ module.exports = {
         menuHeight: React.PropTypes.number,
         chevronOffset: React.PropTypes.number,
         menuColour: React.PropTypes.string,
+        chevronFace: React.PropTypes.string, // top, bottom, left, right
     },
 
     getOrCreateContainer: function() {
@@ -58,12 +59,30 @@ module.exports = {
             }
         };
 
-        const position = {
-            top: props.top,
-        };
+        const position = {};
+        let chevronFace = null;
+
+        if (props.top) {
+            position.top = props.top;
+        } else {
+            position.bottom = props.bottom;
+        }
+
+        if (props.left) {
+            position.left = props.left;
+            chevronFace = 'left';
+        } else {
+            position.right = props.right;
+            chevronFace = 'right';
+        }
 
         const chevronOffset = {};
-        if (props.chevronOffset) {
+        if (props.chevronFace) {
+            chevronFace = props.chevronFace;
+        }
+        if (chevronFace === 'top' || chevronFace === 'bottom') {
+            chevronOffset.left = props.chevronOffset;
+        } else {
             chevronOffset.top = props.chevronOffset;
         }
 
@@ -74,28 +93,27 @@ module.exports = {
                 .mx_ContextualMenu_chevron_left:after {
                     border-right-color: ${props.menuColour};
                 }
-
                 .mx_ContextualMenu_chevron_right:after {
                     border-left-color: ${props.menuColour};
                 }
+                .mx_ContextualMenu_chevron_top:after {
+                    border-left-color: ${props.menuColour};
+                }
+                .mx_ContextualMenu_chevron_bottom:after {
+                    border-left-color: ${props.menuColour};
+                }
             `;
         }
 
-        let chevron = null;
-        if (props.left) {
-            chevron = <div style={chevronOffset} className="mx_ContextualMenu_chevron_left"></div>;
-            position.left = props.left;
-        } else {
-            chevron = <div style={chevronOffset} className="mx_ContextualMenu_chevron_right"></div>;
-            position.right = props.right;
-        }
-
+        const chevron = <div style={chevronOffset} className={"mx_ContextualMenu_chevron_" + chevronFace}></div>;
         const className = 'mx_ContextualMenu_wrapper';
 
         const menuClasses = classNames({
             'mx_ContextualMenu': true,
-            'mx_ContextualMenu_left': props.left,
-            'mx_ContextualMenu_right': !props.left,
+            'mx_ContextualMenu_left': chevronFace === 'left',
+            'mx_ContextualMenu_right': chevronFace === 'right',
+            'mx_ContextualMenu_top': chevronFace === 'top',
+            'mx_ContextualMenu_bottom': chevronFace === 'bottom',
         });
 
         const menuStyle = {};

src/components/structures/MatrixChat.js

@@ -288,7 +288,9 @@ module.exports = React.createClass({
         this.handleResize();
         window.addEventListener('resize', this.handleResize);
 
-        // check we have the right tint applied for this theme
+        // check we have the right tint applied for this theme.
+        // N.B. we don't call the whole of setTheme() here as we may be
+        // racing with the theme CSS download finishing from index.js
         Tinter.tint();
     },
 
@@ -912,22 +914,44 @@ module.exports = React.createClass({
         // disable all of them first, then enable the one we want. Chrome only
         // bothers to do an update on a true->false transition, so this ensures
         // that we get exactly one update, at the right time.
+        //
+        // ^ This comment was true when we used to use alternative stylesheets
+        // for the CSS.  Nowadays we just set them all as disabled in index.html
+        // and enable them as needed.  It might be cleaner to disable them all
+        // at the same time to prevent loading two themes simultaneously and
+        // having them interact badly... but this causes a flash of unstyled app
+        // which is even uglier.  So we don't.
 
-        Object.values(styleElements).forEach((a) => {
-            a.disabled = true;
-        });
         styleElements[theme].disabled = false;
 
-        Tinter.setTheme(theme);
-        const colors = Tinter.getCurrentColors();
-        Tinter.tint(colors[0], colors[1]);
+        const switchTheme = function() {
+            Object.values(styleElements).forEach((a) => {
+                if (a == styleElements[theme]) return;
+                a.disabled = true;
+            });
+            Tinter.setTheme(theme);
+        };
 
-        if (theme === 'dark') {
-            // abuse the tinter to change all the SVG's #fff to #2d2d2d
-            // XXX: obviously this shouldn't be hardcoded here.
-            Tinter.tintSvgWhite('#2d2d2d');
-        } else {
-            Tinter.tintSvgWhite('#ffffff');
+        // turns out that Firefox preloads the CSS for link elements with
+        // the disabled attribute, but Chrome doesn't.
+
+        let cssLoaded = false;
+
+        styleElements[theme].onload = () => {
+            switchTheme();
+        };
+
+        for (let i = 0; i < document.styleSheets.length; i++) {
+            const ss = document.styleSheets[i];
+            if (ss && ss.href === styleElements[theme].href) {
+                cssLoaded = true;
+                break;
+            }
+        }
+
+        if (cssLoaded) {
+            styleElements[theme].onload = undefined;
+            switchTheme();
         }
     },
 

src/components/structures/login/Login.js

@@ -370,6 +370,9 @@ module.exports = React.createClass({
         }
         */
 
+        let serverConfig;
+        let header;
+
         if (!SdkConfig.get().disable_custom_urls) {
             serverConfig = <ServerConfig ref="serverConfig"
                 withToggleButton={true}
@@ -381,9 +384,6 @@ module.exports = React.createClass({
                 delayTimeMs={1000} />;
         }
 
-        let serverConfig;
-        let header;
-
         // FIXME: remove status.im theme tweaks
         const theme = SettingsStore.getValue("theme");
         if (theme !== "status") {