From 9f1b4ac4cc254ac7afcfdf57fd2d94709b55a1e9 Mon Sep 17 00:00:00 2001 From: Bruno Windels Date: Tue, 29 Jan 2019 15:34:58 +0100 Subject: [PATCH 1/4] room directory makeover --- res/css/_common.scss | 50 +++++++++------- res/css/structures/_RoomDirectory.scss | 54 ++++++++++------- res/css/views/directory/_NetworkDropdown.scss | 6 +- .../views/elements/_DirectorySearchBox.scss | 32 ++-------- res/themes/dharma/css/_dharma.scss | 18 +++--- src/components/structures/LoggedInView.js | 8 +-- src/components/structures/MatrixChat.js | 8 ++- src/components/structures/RoomDirectory.js | 59 ++++++++++++++----- src/components/views/dialogs/BaseDialog.js | 12 ++-- .../views/directory/NetworkDropdown.js | 2 +- .../views/elements/DirectorySearchBox.js | 22 ++++--- src/components/views/rooms/RoomList.js | 2 +- src/i18n/strings/en_EN.json | 5 +- 13 files changed, 157 insertions(+), 121 deletions(-) diff --git a/res/css/_common.scss b/res/css/_common.scss index 306834bcde..56af1ab519 100644 --- a/res/css/_common.scss +++ b/res/css/_common.scss @@ -157,7 +157,7 @@ textarea { font-weight: 300; font-size: 15px; position: relative; - padding: 0 58px 36px; + padding: 40px 58px 36px 58px; width: 60%; max-width: 704px; box-shadow: 2px 15px 30px 0 $dialog-shadow-color; @@ -190,15 +190,36 @@ textarea { pointer-events: none; } -.mx_Dialog_cancelButton { - position: absolute; - right: 11px; - top: 13px; - cursor: pointer; +.mx_Dialog_header { + position: relative; } -.mx_Dialog_cancelButton object { - pointer-events: none; +.mx_Dialog_title { + font-weight: bold; + font-size: 22px; + line-height: 36px; + color: $primary-fg-color; +} + +.mx_Dialog_header.mx_Dialog_headerWithButton > .mx_Dialog_title { + text-align: center; +} + +.mx_Dialog_title.danger { + color: $warning-color; +} + +.mx_Dialog_cancelButton { + mask: url('$(res)/img/feather-icons/cancel.svg'); + mask-repeat: no-repeat; + mask-position: center; + width: 36px; + height: 36px; + background-color: $primary-fg-color; + cursor: pointer; + position: absolute; + top: 20px; + right: 20px; } .mx_Dialog_content { @@ -254,19 +275,6 @@ textarea { color: $accent-color; } -.mx_Dialog_title { - min-height: 16px; - padding-top: 40px; - font-weight: bold; - font-size: 22px; - line-height: 1.4; - color: $primary-fg-color; -} - -.mx_Dialog_title.danger { - color: $warning-color; -} - .mx_TextInputDialog_label { text-align: left; padding-bottom: 12px; diff --git a/res/css/structures/_RoomDirectory.scss b/res/css/structures/_RoomDirectory.scss index 9cd3e7284c..bcfe3aefd6 100644 --- a/res/css/structures/_RoomDirectory.scss +++ b/res/css/structures/_RoomDirectory.scss @@ -14,29 +14,48 @@ See the License for the specific language governing permissions and limitations under the License. */ -.mx_RoomDirectory { +.mx_RoomDirectory_dialogWrapper > .mx_Dialog { max-width: 960px; - width: 100%; - margin-left: auto; - margin-right: auto; - margin-bottom: 12px; - color: $primary-fg-color; - word-break: break-word; + height: 100%; + padding: 20px; +} +.mx_RoomDirectory_dialog { + height: 100%; display: flex; - flex-direction: column; } -.mx_RoomDirectory .mx_RoomHeader_simpleHeader { - margin-left: 0px; +.mx_RoomDirectory { + margin-bottom: 12px; + color: $primary-fg-color; + word-break: break-word; + display: flex; + flex-direction: column; + flex: 1; +} + +.mx_RoomDirectory .gm-scroll-view { + // little hack because gemini doesn't seem to detect + // the scrollbar width well in this instance + // when using css scrollbars + scrollbar-width: thin; +} + +.mx_RoomDirectory_createRoom { + background-color: $button-bg-color; + border-radius: 4px; + padding: 8px; + color: $button-fg-color; + font-weight: 600; + position: absolute; + top: 0; + left: 0; } .mx_RoomDirectory_list { flex: 1; - display: flex; - flex-direction: column; } @@ -45,22 +64,17 @@ limitations under the License. } .mx_RoomDirectory_listheader { - display: table; - table-layout: fixed; - width: 100%; + display: flex; margin-top: 12px; margin-bottom: 12px; - border-spacing: 5px; } .mx_RoomDirectory_searchbox { - display: table-cell; - vertical-align: middle; + flex: 1 !important; } .mx_RoomDirectory_listheader .mx_NetworkDropdown { - display: table-cell; - width: 200px; + flex: 0 0 200px; } .mx_RoomDirectory_tableWrapper { diff --git a/res/css/views/directory/_NetworkDropdown.scss b/res/css/views/directory/_NetworkDropdown.scss index 9850379597..8d5fa5dc7b 100644 --- a/res/css/views/directory/_NetworkDropdown.scss +++ b/res/css/views/directory/_NetworkDropdown.scss @@ -35,13 +35,13 @@ limitations under the License. height: 0; position: absolute; right: 10px; - top: 14px; + top: 16px; width: 0 } .mx_NetworkDropdown_networkoption { - height: 35px; - line-height: 35px; + height: 37px; + line-height: 37px; padding-left: 8px; padding-right: 8px; overflow: hidden; diff --git a/res/css/views/elements/_DirectorySearchBox.scss b/res/css/views/elements/_DirectorySearchBox.scss index 1a8c2b93de..ef944f6fa0 100644 --- a/res/css/views/elements/_DirectorySearchBox.scss +++ b/res/css/views/elements/_DirectorySearchBox.scss @@ -15,26 +15,10 @@ limitations under the License. */ .mx_DirectorySearchBox { - position: relative; - border-radius: 3px; - border: 1px solid $strong-input-border-color; -} - -.mx_DirectorySearchBox_container { display: flex; padding-left: 9px; padding-right: 9px; -} - -.mx_DirectorySearchBox_input { - flex-grow: 1; - border: 0; - padding: 0; - font-weight: 300; - font-size: 13px; -} -input[type=text].mx_DirectorySearchBox_input:focus { - border: 0; + margin: 0 5px 0 0 !important; } .mx_DirectorySearchBox_joinButton { @@ -54,16 +38,12 @@ input[type=text].mx_DirectorySearchBox_input:focus { cursor: pointer; } -.mx_DirectorySearchBox_clear_wrapper { - display: table-cell; -} - .mx_DirectorySearchBox_clear { - display: inline-block; - vertical-align: middle; - background: url('$(res)/img/icon_context_delete.svg'); - background-position: 0 50%; - background-repeat: no-repeat; + background-color: $warning-color; + mask: url('$(res)/img/cancel.svg'); + mask-repeat: no-repeat; + mask-position: center; + mask-size: 10px; width: 15px; height: 15px; cursor: pointer; diff --git a/res/themes/dharma/css/_dharma.scss b/res/themes/dharma/css/_dharma.scss index dccad9b6ef..a02efb3f89 100644 --- a/res/themes/dharma/css/_dharma.scss +++ b/res/themes/dharma/css/_dharma.scss @@ -243,18 +243,20 @@ $authpage-body-color: #61708b; // it has the appearance of a text box so the controls // appear to be part of the input -.mx_MatrixChat { +.mx_Dialog, .mx_MatrixChat { - :not(.mx_textinput):not(.mx_Field) > input[type=text], - :not(.mx_textinput):not(.mx_Field) > input[type=search], + :not(.mx_textinput):not(.mx_Field):not(.mx_no_textinput) > input[type=text], + :not(.mx_textinput):not(.mx_Field):not(.mx_no_textinput) > input[type=search], .mx_textinput { display: block; - margin: 9px; box-sizing: border-box; background-color: transparent; color: $input-darker-fg-color; border-radius: 4px; border: 1px solid #c1c1c1; + // these things should probably not be defined + // globally + margin: 9px; flex: 0 0 auto; } @@ -290,8 +292,8 @@ input[type=password] { } .dark-panel { - :not(.mx_textinput):not(.mx_Field) > input[type=text], - :not(.mx_textinput):not(.mx_Field) > input[type=search], + :not(.mx_textinput):not(.mx_Field):not(.mx_no_textinput) > input[type=text], + :not(.mx_textinput):not(.mx_Field):not(.mx_no_textinput) > input[type=search], .mx_textinput { color: $input-darker-fg-color; background-color: $input-darker-bg-color; @@ -300,8 +302,8 @@ input[type=password] { } .light-panel { - :not(.mx_textinput):not(.mx_Field) > input[type=text], - :not(.mx_textinput):not(.mx_Field) > input[type=search], + :not(.mx_textinput):not(.mx_Field):not(.mx_no_textinput) > input[type=text], + :not(.mx_textinput):not(.mx_Field):not(.mx_no_textinput) > input[type=search], .mx_textinput { color: $input-lighter-fg-color; background-color: $input-lighter-bg-color; diff --git a/src/components/structures/LoggedInView.js b/src/components/structures/LoggedInView.js index 2fd7a9bccf..ddfcbd1570 100644 --- a/src/components/structures/LoggedInView.js +++ b/src/components/structures/LoggedInView.js @@ -323,8 +323,6 @@ const LoggedInView = React.createClass({ _onScrollKeyPressed: function(ev) { if (this.refs.roomView) { this.refs.roomView.handleScrollKey(ev); - } else if (this.refs.roomDirectory) { - this.refs.roomDirectory.handleScrollKey(ev); } }, @@ -422,7 +420,6 @@ const LoggedInView = React.createClass({ const LeftPanel = sdk.getComponent('structures.LeftPanel'); const RoomView = sdk.getComponent('structures.RoomView'); const UserSettings = sdk.getComponent('structures.UserSettings'); - const RoomDirectory = sdk.getComponent('structures.RoomDirectory'); const HomePage = sdk.getComponent('structures.HomePage'); const GroupView = sdk.getComponent('structures.GroupView'); const MyGroups = sdk.getComponent('structures.MyGroups'); @@ -464,10 +461,7 @@ const LoggedInView = React.createClass({ break; case PageTypes.RoomDirectory: - pageElement = ; + // handled by MatrixChat for now break; case PageTypes.HomePage: diff --git a/src/components/structures/MatrixChat.js b/src/components/structures/MatrixChat.js index b8be3e017a..40ee7e52e1 100644 --- a/src/components/structures/MatrixChat.js +++ b/src/components/structures/MatrixChat.js @@ -615,8 +615,12 @@ export default React.createClass({ } break; case 'view_room_directory': - this._setPage(PageTypes.RoomDirectory); - this.notifyNewScreen('directory'); + const RoomDirectory = sdk.getComponent("structures.RoomDirectory"); + Modal.createTrackedDialog('Room directory', '', RoomDirectory, { + config: this.props.config, + }, 'mx_RoomDirectory_dialogWrapper'); + // this._setPage(PageTypes.RoomDirectory); + // this.notifyNewScreen('directory'); break; case 'view_my_groups': this._setPage(PageTypes.MyGroups); diff --git a/src/components/structures/RoomDirectory.js b/src/components/structures/RoomDirectory.js index 1ddfa92305..c18dd4d48a 100644 --- a/src/components/structures/RoomDirectory.js +++ b/src/components/structures/RoomDirectory.js @@ -44,6 +44,7 @@ module.exports = React.createClass({ propTypes: { config: React.PropTypes.object, + onFinished: React.PropTypes.func.isRequired, }, getDefaultProps: function() { @@ -64,6 +65,16 @@ module.exports = React.createClass({ }; }, + childContextTypes: { + matrixClient: React.PropTypes.object, + }, + + getChildContext: function() { + return { + matrixClient: MatrixClientPeg.get(), + }; + }, + componentWillMount: function() { this._unmounted = false; this.nextBatch = null; @@ -301,6 +312,11 @@ module.exports = React.createClass({ } }, + onCreateRoomClicked: function() { + this.props.onFinished(); + dis.dispatch({action: 'view_create_room'}); + }, + onJoinClick: function(alias) { // If we don't have a particular instance id selected, just show that rooms alias if (!this.state.instanceId) { @@ -348,6 +364,7 @@ module.exports = React.createClass({ }, showRoom: function(room, room_alias) { + this.props.onFinished(); const payload = {action: 'view_room'}; if (room) { // Don't let the user view a room they won't be able to either @@ -496,11 +513,13 @@ module.exports = React.createClass({ render: function() { const SimpleRoomHeader = sdk.getComponent('rooms.SimpleRoomHeader'); const Loader = sdk.getComponent("elements.Spinner"); + const BaseDialog = sdk.getComponent('views.dialogs.BaseDialog'); + const AccessibleButton = sdk.getComponent('elements.AccessibleButton'); + // TODO: clean this up if (this.state.protocolsLoading) { return (
-
); @@ -554,7 +573,7 @@ module.exports = React.createClass({ let placeholder = _t('Search for a room'); if (!this.state.instanceId) { - placeholder = _t('#example') + ':' + this.state.roomServer; + placeholder = _t('Search for a room like #example') + ':' + this.state.roomServer; } else if (instance_expected_field_type) { placeholder = instance_expected_field_type.placeholder; } @@ -567,23 +586,35 @@ module.exports = React.createClass({ } } + const createRoomButton = ({_t("Create new room")}); + const NetworkDropdown = sdk.getComponent('directory.NetworkDropdown'); const DirectorySearchBox = sdk.getComponent('elements.DirectorySearchBox'); return ( -
- -
-
- - + +
+
+
+ + +
+ {content}
- {content}
-
+ ); }, }); diff --git a/src/components/views/dialogs/BaseDialog.js b/src/components/views/dialogs/BaseDialog.js index 82ea649db4..0dcef973ad 100644 --- a/src/components/views/dialogs/BaseDialog.js +++ b/src/components/views/dialogs/BaseDialog.js @@ -111,7 +111,6 @@ export default React.createClass({ let cancelButton; if (this.props.hasCancel) { cancelButton = - ; } @@ -128,10 +127,15 @@ export default React.createClass({ // AT users can skip its presentation. aria-describedby={this.props.contentId} > - { cancelButton } -
- { this.props.title } +
+
+ { this.props.title } +
+ { this.props.headerButton }
+ { cancelButton } { this.props.children } ); diff --git a/src/components/views/directory/NetworkDropdown.js b/src/components/views/directory/NetworkDropdown.js index 053849863c..864a1be233 100644 --- a/src/components/views/directory/NetworkDropdown.js +++ b/src/components/views/directory/NetworkDropdown.js @@ -232,7 +232,7 @@ export default class NetworkDropdown extends React.Component { } return
-
+
{current_value} {menu} diff --git a/src/components/views/elements/DirectorySearchBox.js b/src/components/views/elements/DirectorySearchBox.js index 14f79687e1..78a7cb7eba 100644 --- a/src/components/views/elements/DirectorySearchBox.js +++ b/src/components/views/elements/DirectorySearchBox.js @@ -17,6 +17,8 @@ limitations under the License. import React from 'react'; import PropTypes from 'prop-types'; import classnames from 'classnames'; +import sdk from '../../../index'; +import { _t } from '../../../languageHandler'; export default class DirectorySearchBox extends React.Component { constructor() { @@ -74,6 +76,8 @@ export default class DirectorySearchBox extends React.Component { } render() { + const AccessibleButton = sdk.getComponent('elements.AccessibleButton'); + const searchbox_classes = { mx_DirectorySearchBox: true, }; @@ -81,27 +85,21 @@ export default class DirectorySearchBox extends React.Component { let join_button; if (this.props.showJoinButton) { - join_button = - Join - ; + >{_t("Join")}; } - return -
+ return
{ join_button } - - - -
- ; + +
; } } diff --git a/src/components/views/rooms/RoomList.js b/src/components/views/rooms/RoomList.js index 4f92d0cad6..f61ce8d594 100644 --- a/src/components/views/rooms/RoomList.js +++ b/src/components/views/rooms/RoomList.js @@ -689,7 +689,7 @@ module.exports = React.createClass({ headerItems: this._getHeaderItems('im.vector.fake.recent'), order: "recent", incomingCall: incomingCallIfTaggedAs('im.vector.fake.recent'), - onAddRoom: () => {dis.dispatch({action: 'view_create_room'})}, + onAddRoom: () => {dis.dispatch({action: 'view_room_directory'})}, }, ]; const tagSubLists = Object.keys(this.state.lists) diff --git a/src/i18n/strings/en_EN.json b/src/i18n/strings/en_EN.json index 4d67c33dad..de596f2601 100644 --- a/src/i18n/strings/en_EN.json +++ b/src/i18n/strings/en_EN.json @@ -1298,7 +1298,7 @@ "Unable to look up room ID from server": "Unable to look up room ID from server", "Directory": "Directory", "Search for a room": "Search for a room", - "#example": "#example", + "Search for a room like #example": "Search for a room like #example", "Message not sent due to unknown devices being present": "Message not sent due to unknown devices being present", "Show devices, send anyway or cancel.": "Show devices, send anyway or cancel.", "You can't send any messages until you review and agree to our terms and conditions.": "You can't send any messages until you review and agree to our terms and conditions.", @@ -1497,5 +1497,6 @@ "If you didn't remove the recovery method, an attacker may be trying to access your account. Change your account password and set a new recovery method immediately in Settings.": "If you didn't remove the recovery method, an attacker may be trying to access your account. Change your account password and set a new recovery method immediately in Settings.", "Failed to set direct chat tag": "Failed to set direct chat tag", "Failed to remove tag %(tagName)s from room": "Failed to remove tag %(tagName)s from room", - "Failed to add tag %(tagName)s to room": "Failed to add tag %(tagName)s to room" + "Failed to add tag %(tagName)s to room": "Failed to add tag %(tagName)s to room", + "Join": "Join" } From 7c0f463c91c5dec22f62480f4c25c25ca8b3db13 Mon Sep 17 00:00:00 2001 From: Bruno Windels Date: Tue, 29 Jan 2019 15:40:19 +0100 Subject: [PATCH 2/4] fix lint --- src/components/structures/MatrixChat.js | 5 +++-- src/components/views/dialogs/BaseDialog.js | 2 -- 2 files changed, 3 insertions(+), 4 deletions(-) diff --git a/src/components/structures/MatrixChat.js b/src/components/structures/MatrixChat.js index 40ee7e52e1..42ce44f42a 100644 --- a/src/components/structures/MatrixChat.js +++ b/src/components/structures/MatrixChat.js @@ -614,14 +614,15 @@ export default React.createClass({ Modal.createTrackedDialog('Create Community', '', CreateGroupDialog); } break; - case 'view_room_directory': + case 'view_room_directory': { const RoomDirectory = sdk.getComponent("structures.RoomDirectory"); Modal.createTrackedDialog('Room directory', '', RoomDirectory, { config: this.props.config, }, 'mx_RoomDirectory_dialogWrapper'); // this._setPage(PageTypes.RoomDirectory); // this.notifyNewScreen('directory'); - break; + } + break; case 'view_my_groups': this._setPage(PageTypes.MyGroups); this.notifyNewScreen('groups'); diff --git a/src/components/views/dialogs/BaseDialog.js b/src/components/views/dialogs/BaseDialog.js index 0dcef973ad..9fcaa03031 100644 --- a/src/components/views/dialogs/BaseDialog.js +++ b/src/components/views/dialogs/BaseDialog.js @@ -106,8 +106,6 @@ export default React.createClass({ }, render: function() { - const TintableSvg = sdk.getComponent("elements.TintableSvg"); - let cancelButton; if (this.props.hasCancel) { cancelButton = From 57b2f691ed8f5d580d4c1c2386a9ec06e1a33216 Mon Sep 17 00:00:00 2001 From: Bruno Windels Date: Tue, 29 Jan 2019 16:30:10 +0100 Subject: [PATCH 3/4] fix lint - bis --- src/components/views/dialogs/BaseDialog.js | 1 - 1 file changed, 1 deletion(-) diff --git a/src/components/views/dialogs/BaseDialog.js b/src/components/views/dialogs/BaseDialog.js index 9fcaa03031..34370d5b98 100644 --- a/src/components/views/dialogs/BaseDialog.js +++ b/src/components/views/dialogs/BaseDialog.js @@ -24,7 +24,6 @@ import { MatrixClient } from 'matrix-js-sdk'; import { KeyCode } from '../../../Keyboard'; import AccessibleButton from '../elements/AccessibleButton'; -import sdk from '../../../index'; import MatrixClientPeg from '../../../MatrixClientPeg'; /** From bcd4a53d44080c25af388e94f0b0cc8c44e77803 Mon Sep 17 00:00:00 2001 From: Bruno Windels Date: Tue, 29 Jan 2019 18:27:05 +0100 Subject: [PATCH 4/4] run i18n --- src/i18n/strings/en_EN.json | 11 ++++------- 1 file changed, 4 insertions(+), 7 deletions(-) diff --git a/src/i18n/strings/en_EN.json b/src/i18n/strings/en_EN.json index de596f2601..9300537051 100644 --- a/src/i18n/strings/en_EN.json +++ b/src/i18n/strings/en_EN.json @@ -267,8 +267,8 @@ "Increase performance by only loading room members on first view": "Increase performance by only loading room members on first view", "Backup of encryption keys to server": "Backup of encryption keys to server", "Render simple counters in room header": "Render simple counters in room header", - "Enable Emoji suggestions while typing": "Enable Emoji suggestions while typing", "Two-way device verification using short text": "Two-way device verification using short text", + "Enable Emoji suggestions while typing": "Enable Emoji suggestions while typing", "Use compact timeline layout": "Use compact timeline layout", "Show a placeholder for removed messages": "Show a placeholder for removed messages", "Show join/leave messages (invites/kicks/bans unaffected)": "Show join/leave messages (invites/kicks/bans unaffected)", @@ -430,11 +430,11 @@ "Upload profile picture": "Upload profile picture", "Display Name": "Display Name", "Save": "Save", + "Flair": "Flair", "Failed to change password. Is your password correct?": "Failed to change password. Is your password correct?", "Success": "Success", "Your password was successfully changed. You will not receive push notifications on other devices until you log back in to them": "Your password was successfully changed. You will not receive push notifications on other devices until you log back in to them", "Profile": "Profile", - "Flair": "Flair", "Account": "Account", "Set a new account password...": "Set a new account password...", "Email addresses": "Email addresses", @@ -818,8 +818,6 @@ "Failed to load group members": "Failed to load group members", "Filter community members": "Filter community members", "Invite to this community": "Invite to this community", - "Flair will appear if enabled in room settings": "Flair will appear if enabled in room settings", - "Flair will not appear": "Flair will not appear", "Are you sure you want to remove '%(roomName)s' from %(groupId)s?": "Are you sure you want to remove '%(roomName)s' from %(groupId)s?", "Removing a room from the community will also remove it from the community page.": "Removing a room from the community will also remove it from the community page.", "Failed to remove room from community": "Failed to remove room from community", @@ -873,6 +871,7 @@ "Unblacklist": "Unblacklist", "Blacklist": "Blacklist", "Unverify": "Unverify", + "Join": "Join", "No results": "No results", "Delete": "Delete", "Communities": "Communities", @@ -1296,7 +1295,6 @@ "Couldn't find a matching Matrix room": "Couldn't find a matching Matrix room", "Fetching third party location failed": "Fetching third party location failed", "Unable to look up room ID from server": "Unable to look up room ID from server", - "Directory": "Directory", "Search for a room": "Search for a room", "Search for a room like #example": "Search for a room like #example", "Message not sent due to unknown devices being present": "Message not sent due to unknown devices being present", @@ -1497,6 +1495,5 @@ "If you didn't remove the recovery method, an attacker may be trying to access your account. Change your account password and set a new recovery method immediately in Settings.": "If you didn't remove the recovery method, an attacker may be trying to access your account. Change your account password and set a new recovery method immediately in Settings.", "Failed to set direct chat tag": "Failed to set direct chat tag", "Failed to remove tag %(tagName)s from room": "Failed to remove tag %(tagName)s from room", - "Failed to add tag %(tagName)s to room": "Failed to add tag %(tagName)s to room", - "Join": "Join" + "Failed to add tag %(tagName)s to room": "Failed to add tag %(tagName)s to room" }