Merge remote-tracking branch 'origin/develop' into dbkr/group_userlist

src/components/structures/LeftPanel.js

@@ -16,17 +16,16 @@ limitations under the License.
 
 'use strict';
 
-var React = require('react');
+import React from 'react';
-var DragDropContext = require('react-dnd').DragDropContext;
+import { DragDropContext } from 'react-dnd';
-var HTML5Backend = require('react-dnd-html5-backend');
+import HTML5Backend from 'react-dnd-html5-backend';
-var sdk = require('matrix-react-sdk')
+import KeyCode from 'matrix-react-sdk/lib/KeyCode';
-var dis = require('matrix-react-sdk/lib/dispatcher');
+import sdk from 'matrix-react-sdk';
+import dis from 'matrix-react-sdk/lib/dispatcher';
 import MatrixClientPeg from 'matrix-react-sdk/lib/MatrixClientPeg';
-
+import CallHandler from 'matrix-react-sdk/lib/CallHandler';
-var VectorConferenceHandler = require('../../VectorConferenceHandler');
-var CallHandler = require("matrix-react-sdk/lib/CallHandler");
-
 import AccessibleButton from 'matrix-react-sdk/lib/components/views/elements/AccessibleButton';
+import VectorConferenceHandler from '../../VectorConferenceHandler';
 
 var LeftPanel = React.createClass({
     displayName: 'LeftPanel',
@@ -42,6 +41,10 @@ var LeftPanel = React.createClass({
         };
     },
 
+    componentWillMount: function() {
+        this.focusedElement = null;
+    },
+
     componentDidMount: function() {
         this.dispatcherRef = dis.register(this.onAction);
     },
@@ -64,6 +67,91 @@ var LeftPanel = React.createClass({
         }
     },
 
+    _onFocus: function(ev) {
+        this.focusedElement = ev.target;
+    },
+
+    _onBlur: function(ev) {
+        this.focusedElement = null;
+    },
+
+    _onKeyDown: function(ev) {
+        if (!this.focusedElement) return;
+        let handled = false;
+
+        switch (ev.keyCode) {
+            case KeyCode.UP:
+                this._onMoveFocus(true);
+                handled = true;
+                break;
+            case KeyCode.DOWN:
+                this._onMoveFocus(false);
+                handled = true;
+                break;
+        }
+
+        if (handled) {
+            ev.stopPropagation();
+            ev.preventDefault();
+        }
+    },
+
+    _onMoveFocus: function(up) {
+        var element = this.focusedElement;
+
+        // unclear why this isn't needed
+        // var descending = (up == this.focusDirection) ? this.focusDescending : !this.focusDescending;
+        // this.focusDirection = up;
+
+        var descending = false; // are we currently descending or ascending through the DOM tree?
+        var classes;
+
+        do {
+            var child = up ? element.lastElementChild : element.firstElementChild;
+            var sibling = up ? element.previousElementSibling : element.nextElementSibling;
+
+            if (descending) {
+                if (child) {
+                    element = child;
+                }
+                else if (sibling) {
+                    element = sibling;
+                }
+                else {
+                    descending = false;
+                    element = element.parentElement;
+                }
+            }
+            else {
+                if (sibling) {
+                    element = sibling;
+                    descending = true;
+                }
+                else {
+                    element = element.parentElement;
+                }
+            }
+
+            if (element) {
+                classes = element.classList;
+                if (classes.contains("mx_LeftPanel")) { // we hit the top
+                    element = up ? element.lastElementChild : element.firstElementChild;
+                    descending = true;
+                }
+            }
+
+        } while(element && !(
+            classes.contains("mx_RoomTile") ||
+            classes.contains("mx_SearchBox_search") ||
+            classes.contains("mx_RoomSubList_ellipsis")));
+
+        if (element) {
+            element.focus();
+            this.focusedElement = element;
+            this.focusedDescending = descending;
+        }
+    },
+
     _recheckCallElement: function(selectedRoomId) {
         // if we aren't viewing a room with an ongoing call, but there is an
         // active call, show the call element - we need to do this to make
@@ -126,7 +214,8 @@ var LeftPanel = React.createClass({
         }
 
         return (
-            <aside className={classes} style={{ opacity: this.props.opacity }}>
+            <aside className={classes} style={{ opacity: this.props.opacity }}
+                   onKeyDown={ this._onKeyDown } onFocus={ this._onFocus } onBlur={ this._onBlur }>
                 { topBox }
                 { callPreview }
                 <RoomList

src/components/structures/RightPanel.js

@@ -30,7 +30,8 @@ module.exports = React.createClass({
     displayName: 'RightPanel',
 
     propTypes: {
-        userId: React.PropTypes.string, // if showing an orphaned MemberInfo page, this is set
+        // TODO: We're trying to move away from these being props, but we need to know
+        // whether we should be displaying a room or group member list
         roomId: React.PropTypes.string, // if showing panels for a given room, this is set
         groupId: React.PropTypes.string, // if showing panels for a given group, this is set
         collapsed: React.PropTypes.bool, // currently unused property to request for a minimized view of the panel
@@ -58,24 +59,14 @@ module.exports = React.createClass({
         }
     },
 
-    componentWillReceiveProps: function(newprops) {
-        this.setState(this.getInitialState());
-    },
-
     getInitialState: function() {
-        if (this.props.userId) {
+        if (this.props.groupId) {
-            const member = new Matrix.RoomMember(null, this.props.userId);
             return {
-                phase: this.Phase.RoomMemberInfo,
+                phase: this.Phase.GroupMemberList,
-                member: member,
-            };
-        } else if (this.props.groupId) {
-            return {
-                phase: this.Phase.GroupMemberList
             };
         } else {
             return {
-                phase: this.Phase.RoomMemberList
+                phase: this.Phase.RoomMemberList,
             };
         }
     },
@@ -153,6 +144,12 @@ module.exports = React.createClass({
                     });
                 }
             }
+        } else if (payload.action === "view_group") {
+            this.setState({
+                phase: this.Phase.GroupMemberList,
+                groupId: payload.groupId,
+                member: null,
+            });
         } else if (payload.action === "view_group_user") {
             this.setState({
                 phase: this.Phase.GroupMemberInfo,
@@ -160,11 +157,9 @@ module.exports = React.createClass({
                 member: payload.member,
             });
         } else if (payload.action === "view_room") {
-            if (this.state.phase === this.Phase.RoomMemberInfo) {
+            this.setState({
-                this.setState({
+                phase: this.Phase.RoomMemberList
-                    phase: this.Phase.RoomMemberList
+            });
-                });
-            }
         }
     },
 
@@ -253,7 +248,7 @@ module.exports = React.createClass({
                 panel = <GroupMemberList groupId={this.props.groupId} key={this.props.groupId} />
             } else if (this.state.phase == this.Phase.RoomMemberInfo) {
                 const MemberInfo = sdk.getComponent('rooms.MemberInfo');
-                panel = <MemberInfo member={this.state.member} key={this.props.roomId || this.props.userId} />
+                panel = <MemberInfo member={this.state.member} key={this.props.roomId || this.state.member.userId} />
             } else if (this.state.phase == this.Phase.GroupMemberInfo) {
                 const GroupMemberInfo = sdk.getComponent('groups.GroupMemberInfo');
                 panel = <GroupMemberInfo member={this.state.member} groupId={this.props.groupId} key={this.state.member.user_id} />

src/components/structures/RoomDirectory.js

@@ -82,7 +82,7 @@ module.exports = React.createClass({
                 return;
             }
             const ErrorDialog = sdk.getComponent("dialogs.ErrorDialog");
-            Modal.createDialog(ErrorDialog, {
+            Modal.createTrackedDialog('Failed to get protocol list from Home Server', '', ErrorDialog, {
                 title: _t('Failed to get protocol list from Home Server'),
                 description: _t('The Home Server may be too old to support third party networks'),
             });
@@ -178,7 +178,7 @@ module.exports = React.createClass({
             this.setState({ loading: false });
             console.error("Failed to get publicRooms: %s", JSON.stringify(err));
             var ErrorDialog = sdk.getComponent("dialogs.ErrorDialog");
-            Modal.createDialog(ErrorDialog, {
+            Modal.createTrackedDialog('Failed to get public room list', '', ErrorDialog, {
                 title: _t('Failed to get public room list'),
                 description: ((err && err.message) ? err.message : _t('The server may be unavailable or overloaded'))
             });
@@ -206,7 +206,7 @@ module.exports = React.createClass({
             desc = _t('Remove %(name)s from the directory?', {name: name});
         }
 
-        Modal.createDialog(QuestionDialog, {
+        Modal.createTrackedDialog('Remove from Directory', '', QuestionDialog, {
             title: _t('Remove from Directory'),
             description: desc,
             onFinished: (should_delete) => {
@@ -227,7 +227,7 @@ module.exports = React.createClass({
                     modal.close();
                     this.refreshRoomList();
                     console.error("Failed to " + step + ": " + err);
-                    Modal.createDialog(ErrorDialog, {
+                    Modal.createTrackedDialog('Remove from Directory Error', '', ErrorDialog, {
                         title: _t('Error'),
                         description: ((err && err.message) ? err.message : _t('The server may be unavailable or overloaded'))
                     });
@@ -316,7 +316,7 @@ module.exports = React.createClass({
             const fields = protocolName ? this._getFieldsForThirdPartyLocation(alias, this.protocols[protocolName], instance) : null;
             if (!fields) {
                 const ErrorDialog = sdk.getComponent("dialogs.ErrorDialog");
-                Modal.createDialog(ErrorDialog, {
+                Modal.createTrackedDialog('Unable to join network', '', ErrorDialog, {
                     title: _t('Unable to join network'),
                     description: _t('Riot does not know how to join a room on this network'),
                 });
@@ -327,14 +327,14 @@ module.exports = React.createClass({
                     this.showRoomAlias(resp[0].alias);
                 } else {
                     const ErrorDialog = sdk.getComponent("dialogs.ErrorDialog");
-                    Modal.createDialog(ErrorDialog, {
+                    Modal.createTrackedDialog('Room not found', '', ErrorDialog, {
                         title: _t('Room not found'),
                         description: _t('Couldn\'t find a matching Matrix room'),
                     });
                 }
             }, (e) => {
                 const ErrorDialog = sdk.getComponent("dialogs.ErrorDialog");
-                Modal.createDialog(ErrorDialog, {
+                Modal.createTrackedDialog('Fetching third party location failed', '', ErrorDialog, {
                     title: _t('Fetching third party location failed'),
                     description: _t('Unable to look up room ID from server'),
                 });

src/components/structures/RoomSubList.js

@@ -514,7 +514,7 @@ var RoomSubList = React.createClass({
                     }).catch(function(err) {
                         var ErrorDialog = sdk.getComponent("dialogs.ErrorDialog");
                         console.error("Failed to add tag " + self.props.tagName + " to room" + err);
-                        Modal.createDialog(ErrorDialog, {
+                        Modal.createTrackedDialog('Failed to add tag to room', '', ErrorDialog, {
                             title: _t('Failed to add tag %(tagName)s to room', {tagName: self.props.tagName}),
                             description: ((err && err.message) ? err.message : _t('Operation failed')),
                         });

src/components/views/context_menus/MessageContextMenu.js

@@ -72,7 +72,7 @@ module.exports = React.createClass({
 
     onViewSourceClick: function() {
         const ViewSource = sdk.getComponent('structures.ViewSource');
-        Modal.createDialog(ViewSource, {
+        Modal.createTrackedDialog('View Event Source', '', ViewSource, {
             content: this.props.mxEvent.event,
         }, 'mx_Dialog_viewsource');
         this.closeMenu();
@@ -80,7 +80,7 @@ module.exports = React.createClass({
 
     onViewClearSourceClick: function() {
         const ViewSource = sdk.getComponent('structures.ViewSource');
-        Modal.createDialog(ViewSource, {
+        Modal.createTrackedDialog('View Clear Event Source', '', ViewSource, {
             // FIXME: _clearEvent is private
             content: this.props.mxEvent._clearEvent,
         }, 'mx_Dialog_viewsource');
@@ -89,7 +89,7 @@ module.exports = React.createClass({
 
     onRedactClick: function() {
         const ConfirmRedactDialog = sdk.getComponent("dialogs.ConfirmRedactDialog");
-        Modal.createDialog(ConfirmRedactDialog, {
+        Modal.createTrackedDialog('Confirm Redact Dialog', '', ConfirmRedactDialog, {
             onFinished: (proceed) => {
                 if (!proceed) return;
 
@@ -99,7 +99,7 @@ module.exports = React.createClass({
                     const ErrorDialog = sdk.getComponent("dialogs.ErrorDialog");
                     // display error message stating you couldn't delete this.
                     const code = e.errcode || e.statusCode;
-                    Modal.createDialog(ErrorDialog, {
+                    Modal.createTrackedDialog('You cannot delete this message', '', ErrorDialog, {
                         title: _t('Error'),
                         description: _t('You cannot delete this message. (%(code)s)', {code: code})
                     });
@@ -134,10 +134,9 @@ module.exports = React.createClass({
     },
 
     onQuoteClick: function() {
-        console.log(this.props.mxEvent);
         dis.dispatch({
             action: 'quote',
-            event: this.props.mxEvent,
+            text: this.props.eventTileOps.getInnerText(),
         });
         this.closeMenu();
     },
@@ -153,6 +152,7 @@ module.exports = React.createClass({
         let unhidePreviewButton;
         let permalinkButton;
         let externalURLButton;
+        let quoteButton;
 
         if (eventStatus === 'not_sent') {
             resendButton = (
@@ -221,11 +221,13 @@ module.exports = React.createClass({
             </div>
         );
 
-        const quoteButton = (
+        if (this.props.eventTileOps && this.props.eventTileOps.getInnerText) {
-            <div className="mx_MessageContextMenu_field" onClick={this.onQuoteClick}>
+            quoteButton = (
-                { _t('Quote') }
+                <div className="mx_MessageContextMenu_field" onClick={this.onQuoteClick}>
-            </div>
+                    { _t('Quote') }
-        );
+                </div>
+            );
+        }
 
         // Bridges can provide a 'external_url' to link back to the source.
         if( typeof(this.props.mxEvent.event.content.external_url) === "string") {

src/components/views/context_menus/RoomTileContextMenu.js

@@ -70,7 +70,7 @@ module.exports = React.createClass({
                         };
                     }).catch(function(err) {
                         var ErrorDialog = sdk.getComponent("dialogs.ErrorDialog");
-                        Modal.createDialog(ErrorDialog, {
+                        Modal.createTrackedDialog('Failed to remove tag from room 1', '', ErrorDialog, {
                             title: _t('Failed to remove tag %(tagName)s from room', {tagName: tagNameOff}),
                             description: ((err && err.message) ? err.message : _t('Operation failed')),
                         });
@@ -87,7 +87,7 @@ module.exports = React.createClass({
                         };
                     }).catch(function(err) {
                         var ErrorDialog = sdk.getComponent("dialogs.ErrorDialog");
-                        Modal.createDialog(ErrorDialog, {
+                        Modal.createTrackedDialog('Failed to remove tag from room 2', '', ErrorDialog, {
                             title: _t('Failed to remove tag %(tagName)s from room', {tagName: tagNameOn}),
                             description: ((err && err.message) ? err.message : _t('Operation failed')),
                         });
@@ -148,7 +148,7 @@ module.exports = React.createClass({
             };
         }, (err) => {
             var ErrorDialog = sdk.getComponent("dialogs.ErrorDialog");
-            Modal.createDialog(ErrorDialog, {
+            Modal.createTrackedDialog('Failed to set Direct Message status of room', '', ErrorDialog, {
                 title: _t('Failed to set Direct Message status of room'),
                 description: ((err && err.message) ? err.message : _t('Operation failed')),
             });
@@ -187,7 +187,7 @@ module.exports = React.createClass({
         }, function(err) {
             var errCode = err.errcode || "unknown error code";
             var ErrorDialog = sdk.getComponent("dialogs.ErrorDialog");
-            Modal.createDialog(ErrorDialog, {
+            Modal.createTrackedDialog('Failed to forget room', '', ErrorDialog, {
                 title: _t('Failed to forget room %(errCode)s', {errCode: errCode}),
                 description: ((err && err.message) ? err.message : _t('Operation failed')),
             });

src/components/views/elements/ImageView.js

@@ -66,7 +66,7 @@ module.exports = React.createClass({
 
     onRedactClick: function() {
         const ConfirmRedactDialog = sdk.getComponent("dialogs.ConfirmRedactDialog");
-        Modal.createDialog(ConfirmRedactDialog, {
+        Modal.createTrackedDialog('Confirm Redact Dialog', 'Image View', ConfirmRedactDialog, {
             onFinished: (proceed) => {
                 if (!proceed) return;
                 var self = this;
@@ -76,7 +76,7 @@ module.exports = React.createClass({
                     var ErrorDialog = sdk.getComponent("dialogs.ErrorDialog");
                     // display error message stating you couldn't delete this.
                     var code = e.errcode || e.statusCode;
-                    Modal.createDialog(ErrorDialog, {
+                    Modal.createTrackedDialog('You cannot delete this image.', '', ErrorDialog, {
                         title: _t('Error'),
                         description: _t('You cannot delete this image. (%(code)s)', {code: code})
                     });

src/components/views/globals/NewVersionBar.js

@@ -40,7 +40,7 @@ export default React.createClass({
 
     displayReleaseNotes: function(releaseNotes) {
         const QuestionDialog = sdk.getComponent('dialogs.QuestionDialog');
-        Modal.createDialog(QuestionDialog, {
+        Modal.createTrackedDialog('Display release notes', '', QuestionDialog, {
             title: _t("What's New"),
             description: <pre className="changelog_text">{releaseNotes}</pre>,
             button: _t("Update"),
@@ -54,7 +54,7 @@ export default React.createClass({
 
     displayChangelog: function() {
         const ChangelogDialog = sdk.getComponent('dialogs.ChangelogDialog');
-        Modal.createDialog(ChangelogDialog, {
+        Modal.createTrackedDialog('Display Changelog', '', ChangelogDialog, {
             version: this.props.version,
             newVersion: this.props.newVersion,
             onFinished: (update) => {

src/components/views/globals/PasswordNagBar.js

@@ -25,7 +25,7 @@ import { _t, _tJsx } from 'matrix-react-sdk/lib/languageHandler';
 export default React.createClass({
     onUpdateClicked: function() {
         const SetPasswordDialog = sdk.getComponent('dialogs.SetPasswordDialog');
-        Modal.createDialog(SetPasswordDialog, {
+        Modal.createTrackedDialog('Set Password Dialog', 'Password Nag Bar', SetPasswordDialog, {
             onFinished: (passwordChanged) => {
                 if (!passwordChanged) {
                     return;

src/components/views/rooms/DNDRoomTile.js

@@ -89,7 +89,7 @@ var roomTileSource = {
                 }, (err) => {
                     const ErrorDialog = sdk.getComponent("dialogs.ErrorDialog");
                     console.error("Failed to set direct chat tag " + err);
-                    Modal.createDialog(ErrorDialog, {
+                    Modal.createTrackedDialog('Failed to set direct chat tag', '', ErrorDialog, {
                         title: _t('Failed to set direct chat tag'),
                         description: ((err && err.message) ? err.message : _t('Operation failed')),
                     });
@@ -114,7 +114,7 @@ var roomTileSource = {
                 }).catch(function(err) {
                     var ErrorDialog = sdk.getComponent("dialogs.ErrorDialog");
                     console.error("Failed to remove tag " + prevTag + " from room: " + err);
-                    Modal.createDialog(ErrorDialog, {
+                    Modal.createTrackedDialog('Failed to remove tag from room', '', ErrorDialog, {
                         title: _t('Failed to remove tag %(tagName)s from room', {tagName: prevTag}),
                         description: ((err && err.message) ? err.message : _t('Operation failed')),
                     });
@@ -133,7 +133,7 @@ var roomTileSource = {
                 MatrixClientPeg.get().setRoomTag(item.room.roomId, newTag, newOrder).catch(function(err) {
                     var ErrorDialog = sdk.getComponent("dialogs.ErrorDialog");
                     console.error("Failed to add tag " + newTag + " to room: " + err);
-                    Modal.createDialog(ErrorDialog, {
+                    Modal.createTrackedDialog('Failed to add tag to room', '', ErrorDialog, {
                         title: _t('Failed to add tag %(tagName)s to room', {tagName: newTag}),
                         description: ((err && err.message) ? err.message : _t('Operation failed')),
                     });

src/components/views/settings/Notifications.js

@@ -131,7 +131,7 @@ module.exports = React.createClass({
             this._refreshFromServer();
         }, (error) => {
             var ErrorDialog = sdk.getComponent("dialogs.ErrorDialog");
-            Modal.createDialog(ErrorDialog, {
+            Modal.createTrackedDialog('Error saving email notification preferences', '', ErrorDialog, {
                 title: _t('Error saving email notification preferences'),
                 description: _t('An error occurred whilst saving your email notification preferences.'),
             });
@@ -175,7 +175,7 @@ module.exports = React.createClass({
         }
 
         var TextInputDialog = sdk.getComponent("dialogs.TextInputDialog");
-        Modal.createDialog(TextInputDialog, {
+        Modal.createTrackedDialog('Keywords Dialog', '', TextInputDialog, {
             title: _t('Keywords'),
             description: _t('Enter keywords separated by a comma:'),
             button: _t('OK'),
@@ -241,7 +241,7 @@ module.exports = React.createClass({
             }, function(error) {
                 var ErrorDialog = sdk.getComponent("dialogs.ErrorDialog");
                 console.error("Failed to change settings: " + error);
-                Modal.createDialog(ErrorDialog, {
+                Modal.createTrackedDialog('Failed to change settings', '', ErrorDialog, {
                     title: _t('Failed to change settings'),
                     description: ((error && error.message) ? error.message : _t('Operation failed')),
                     onFinished: self._refreshFromServer
@@ -311,7 +311,7 @@ module.exports = React.createClass({
         }, function(error) {
             var ErrorDialog = sdk.getComponent("dialogs.ErrorDialog");
             console.error("Can't update user notification settings: " + error);
-            Modal.createDialog(ErrorDialog, {
+            Modal.createTrackedDialog('Can\'t update user notifcation settings', '', ErrorDialog, {
                 title: _t('Can\'t update user notification settings'),
                 description: ((error && error.message) ? error.message : _t('Operation failed')),
                 onFinished: self._refreshFromServer
@@ -353,7 +353,7 @@ module.exports = React.createClass({
         var onError = function(error) {
             var ErrorDialog = sdk.getComponent("dialogs.ErrorDialog");
             console.error("Failed to update keywords: " + error);
-            Modal.createDialog(ErrorDialog, {
+            Modal.createTrackedDialog('Failed to update keywords', '', ErrorDialog, {
                 title: _t('Failed to update keywords'),
                 description: ((error && error.message) ? error.message : _t('Operation failed')),
                 onFinished: self._refreshFromServer

src/skins/vector/css/matrix-react-sdk/structures/login/_Login.scss

@@ -265,3 +265,16 @@ limitations under the License.
     margin: 3px;
     vertical-align: top;
 }
+
+.mx_Login_language {
+  margin-left: auto;
+  margin-right: auto;
+  min-width: 60%;
+}
+
+.mx_Login_language_div {
+  display: flex;
+  margin-top: 12px;
+  margin-bottom: 12px;
+}
+

src/skins/vector/css/matrix-react-sdk/views/rooms/_MemberDeviceInfo.scss

@@ -18,6 +18,12 @@ limitations under the License.
     padding: 10px 0px;
 }
 
+.mx_MemberDeviceInfo.mx_DeviceVerifyButtons {
+    padding: 6px 0;
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: space-between;
+}
 
 .mx_MemberDeviceInfo_textButton {
     color: $accent-fg-color;
@@ -26,12 +32,11 @@ limitations under the License.
     text-align: center;
     padding-left: 1em;
     padding-right: 1em;
-    width: 95px;
     border: 0px;
     font-size: 14px;
-
     cursor: pointer;
-    display: inline;
+    margin: 2px;
+    flex: 1;
 }
 
 .mx_MemberDeviceInfo_deviceId {
@@ -44,11 +49,6 @@ limitations under the License.
     border-bottom: 1px solid rgba(0,0,0,0.1);
 }
 
-.mx_MemberDeviceInfo_blacklist,
-.mx_MemberDeviceInfo_unblacklist {
-    float: right;
-}
-
 /* "Unblacklist" is too long for a regular button: make it wider and
    reduce the padding. */
 .mx_EncryptedEventDialog .mx_MemberDeviceInfo_blacklist,

src/skins/vector/css/matrix-react-sdk/views/rooms/_MessageComposer.scss

@@ -105,6 +105,7 @@ limitations under the License.
 
 .mx_MessageComposer_input .public-DraftEditor-content {
     max-height: 120px;
+    min-height: 21px;
     overflow: auto;
 }