Merge branch 'develop' into improve-image-view

Signed-off-by: Šimon Brandner <simon.bra.ag@gmail.com>

src/components/views/elements/AppTile.js

@@ -33,7 +33,6 @@ import SettingsStore from "../../../settings/SettingsStore";
 import {aboveLeftOf, ContextMenuButton} from "../../structures/ContextMenu";
 import PersistedElement, {getPersistKey} from "./PersistedElement";
 import {WidgetType} from "../../../widgets/WidgetType";
-import {SettingLevel} from "../../../settings/SettingLevel";
 import {StopGapWidget} from "../../../stores/widgets/StopGapWidget";
 import {ElementWidgetActions} from "../../../stores/widgets/ElementWidgetActions";
 import {MatrixCapabilities} from "matrix-widget-api";
@@ -240,7 +239,8 @@ export default class AppTile extends React.Component {
         console.info("Granting permission for widget to load: " + this.props.app.eventId);
         const current = SettingsStore.getValue("allowedWidgets", roomId);
         current[this.props.app.eventId] = true;
-        SettingsStore.setValue("allowedWidgets", roomId, SettingLevel.ROOM_ACCOUNT, current).then(() => {
+        const level = SettingsStore.firstSupportedLevel("allowedWidgets");
+        SettingsStore.setValue("allowedWidgets", roomId, level, current).then(() => {
             this.setState({hasPermissionToLoad: true});
 
             // Fetch a token for the integration manager, now that we're allowed to

src/components/views/elements/EditableItemList.js

@@ -124,7 +124,7 @@ export default class EditableItemList extends React.Component {
                 <Field label={this.props.placeholder} type="text"
                        autoComplete="off" value={this.props.newItem || ""} onChange={this._onNewItemChanged}
                        list={this.props.suggestionsListId} />
-                <AccessibleButton onClick={this._onItemAdded} kind="primary" type="submit">
+                <AccessibleButton onClick={this._onItemAdded} kind="primary" type="submit" disabled={!this.props.newItem}>
                     {_t("Add")}
                 </AccessibleButton>
             </form>

src/components/views/elements/MiniAvatarUploader.tsx

@@ -15,14 +15,15 @@ limitations under the License.
 */
 
 import React, {useContext, useRef, useState} from 'react';
+import {EventType} from 'matrix-js-sdk/src/@types/event';
 import classNames from 'classnames';
 
 import AccessibleButton from "./AccessibleButton";
-import Tooltip from './Tooltip';
 import MatrixClientContext from "../../../contexts/MatrixClientContext";
 import {useTimeout} from "../../../hooks/useTimeout";
 import Analytics from "../../../Analytics";
 import CountlyAnalytics from '../../../CountlyAnalytics';
+import RoomContext from "../../../contexts/RoomContext";
 
 export const AVATAR_SIZE = 52;
 
@@ -50,6 +51,11 @@ const MiniAvatarUploader: React.FC<IProps> = ({ hasAvatar, hasAvatarLabel, noAva
 
     const label = (hasAvatar || busy) ? hasAvatarLabel : noAvatarLabel;
 
+    const {room} = useContext(RoomContext);
+    const canSetAvatar = room?.currentState.maySendStateEvent(EventType.RoomAvatar, cli.getUserId());
+    if (!canSetAvatar) return <React.Fragment>{ children }</React.Fragment>;
+
+    const visible = !!label && (hover || show);
     return <React.Fragment>
         <input
             type="file"
@@ -82,11 +88,13 @@ const MiniAvatarUploader: React.FC<IProps> = ({ hasAvatar, hasAvatarLabel, noAva
         >
             { children }
 
-            <Tooltip
-                label={label}
-                visible={!!label && (hover || show)}
-                forceOnRight
-            />
+            <div className={classNames("mx_Tooltip", {
+                "mx_Tooltip_visible": visible,
+                "mx_Tooltip_invisible": !visible,
+            })}>
+                <div className="mx_Tooltip_chevron" />
+                { label }
+            </div>
         </AccessibleButton>
     </React.Fragment>;
 };

src/components/views/elements/SSOButtons.tsx

@@ -15,13 +15,14 @@ limitations under the License.
 */
 
 import React from "react";
+import { chunk } from "lodash";
+import classNames from "classnames";
 import {MatrixClient} from "matrix-js-sdk/src/client";
 
 import PlatformPeg from "../../../PlatformPeg";
 import AccessibleButton from "./AccessibleButton";
 import {_t} from "../../../languageHandler";
 import {IIdentityProvider, ISSOFlow} from "../../../Login";
-import classNames from "classnames";
 
 interface ISSOButtonProps extends Omit<IProps, "flow"> {
     idp: IIdentityProvider;
@@ -83,6 +84,8 @@ interface IProps {
     primary?: boolean;
 }
 
+const MAX_PER_ROW = 6;
+
 const SSOButtons: React.FC<IProps> = ({matrixClient, flow, loginType, fragmentAfterLogin, primary}) => {
     const providers = flow["org.matrix.msc2858.identity_providers"] || [];
     if (providers.length < 2) {
@@ -97,17 +100,24 @@ const SSOButtons: React.FC<IProps> = ({matrixClient, flow, loginType, fragmentAf
         </div>;
     }
 
+    const rows = Math.ceil(providers.length / MAX_PER_ROW);
+    const size = Math.ceil(providers.length / rows);
+
     return <div className="mx_SSOButtons">
-        { providers.map(idp => (
-            <SSOButton
-                key={idp.id}
-                matrixClient={matrixClient}
-                loginType={loginType}
-                fragmentAfterLogin={fragmentAfterLogin}
-                idp={idp}
-                mini={true}
-                primary={primary}
-            />
+        { chunk(providers, size).map(chunk => (
+            <div key={chunk[0].id} className="mx_SSOButtons_row">
+                { chunk.map(idp => (
+                    <SSOButton
+                        key={idp.id}
+                        matrixClient={matrixClient}
+                        loginType={loginType}
+                        fragmentAfterLogin={fragmentAfterLogin}
+                        idp={idp}
+                        mini={true}
+                        primary={primary}
+                    />
+                )) }
+            </div>
         )) }
     </div>;
 };