diff --git a/src/components/structures/RoomSubList.js b/src/components/structures/RoomSubList.js index faf2499e2f..afbde3989b 100644 --- a/src/components/structures/RoomSubList.js +++ b/src/components/structures/RoomSubList.js @@ -511,7 +511,7 @@ var RoomSubList = React.createClass({ if (list[i].tags[self.props.tagName] && list[i].tags[self.props.tagName].order === undefined) { MatrixClientPeg.get().setRoomTag(list[i].roomId, self.props.tagName, {order: (order + 1.0) / 2.0}).finally(function() { // Do any final stuff here - }).fail(function(err) { + }).catch(function(err) { var ErrorDialog = sdk.getComponent("dialogs.ErrorDialog"); console.error("Failed to add tag " + self.props.tagName + " to room" + err); Modal.createTrackedDialog('Failed to add tag to room', err.toString(), ErrorDialog, { diff --git a/src/components/views/context_menus/RoomTileContextMenu.js b/src/components/views/context_menus/RoomTileContextMenu.js index 3f3154c195..e6bccb0a38 100644 --- a/src/components/views/context_menus/RoomTileContextMenu.js +++ b/src/components/views/context_menus/RoomTileContextMenu.js @@ -68,7 +68,7 @@ module.exports = React.createClass({ if (self.props.onFinished) { self.props.onFinished(); }; - }).fail(function(err) { + }).catch(function(err) { var ErrorDialog = sdk.getComponent("dialogs.ErrorDialog"); Modal.createTrackedDialog('Failed to remove tag from room 1', err.toString(), ErrorDialog, { title: _t('Failed to remove tag %(tagName)s from room', {tagName: tagNameOff}), @@ -85,7 +85,7 @@ module.exports = React.createClass({ if (self.props.onFinished) { self.props.onFinished(); }; - }).fail(function(err) { + }).catch(function(err) { var ErrorDialog = sdk.getComponent("dialogs.ErrorDialog"); Modal.createTrackedDialog('Failed to remove tag from room 2', err.toString(), ErrorDialog, { title: _t('Failed to remove tag %(tagName)s from room', {tagName: tagNameOn}), diff --git a/src/components/views/rooms/DNDRoomTile.js b/src/components/views/rooms/DNDRoomTile.js index ee4f70363c..9ef934f8e4 100644 --- a/src/components/views/rooms/DNDRoomTile.js +++ b/src/components/views/rooms/DNDRoomTile.js @@ -111,7 +111,7 @@ var roomTileSource = { //component.state.set({ spinner: component.state.spinner ? component.state.spinner++ : 1 }); MatrixClientPeg.get().deleteRoomTag(item.room.roomId, prevTag).finally(function() { //component.state.set({ spinner: component.state.spinner-- }); - }).fail(function(err) { + }).catch(function(err) { var ErrorDialog = sdk.getComponent("dialogs.ErrorDialog"); console.error("Failed to remove tag " + prevTag + " from room: " + err); Modal.createTrackedDialog('Failed to remove tag from room', err.toString(), ErrorDialog, { diff --git a/src/skins/vector/css/_common.scss b/src/skins/vector/css/_common.scss index c52204c5e9..3189deb0b2 100644 --- a/src/skins/vector/css/_common.scss +++ b/src/skins/vector/css/_common.scss @@ -319,6 +319,7 @@ textarea { cursor: help; transition-duration: 200ms; font-size: smaller; + filter: opacity(0.5); } .mx_Beta:hover { diff --git a/src/skins/vector/css/matrix-react-sdk/structures/_GroupView.scss b/src/skins/vector/css/matrix-react-sdk/structures/_GroupView.scss index e56da68d2f..ae9f97b223 100644 --- a/src/skins/vector/css/matrix-react-sdk/structures/_GroupView.scss +++ b/src/skins/vector/css/matrix-react-sdk/structures/_GroupView.scss @@ -17,19 +17,115 @@ limitations under the License. .mx_GroupView { max-width: 960px; width: 100%; - margin: 20px auto; } .mx_GroupView_error { margin: auto; } +.mx_GroupView_header { + max-width: 960px; + margin: auto; + height: 70px; + align-items: center; + display: flex; + margin-bottom: 20px; +} + +.mx_GroupView_header_view { + border-bottom: 1px solid #e5e5e5; +} + +.mx_GroupView_header_avatar, .mx_GroupView_header_info { + display: table-cell; + vertical-align: middle; +} + +.mx_GroupHeader_button { + margin-left: 12px; + cursor: pointer; +} + +.mx_GroupHeader_button object { + // prevents clicks from being swallowed by svg in 'object' tag + pointer-events: none; +} + +.mx_GroupView_avatarPicker { + position: relative; +} + +.mx_GroupView_avatarPicker_edit { + position: absolute; + top: 50px; + left: 15px; +} + +.mx_GroupView_avatarPicker .mx_Spinner { + width: 48px; + height: 48px ! important; +} + +.mx_GroupView_header_leftCol { + flex: 1; +} + +.mx_GroupView_saveButton, .mx_GroupView_cancelButton { + display: table-cell; +} + .mx_GroupView_header_groupid { font-weight: normal; font-size: initial; padding-left: 10px; } +.mx_GroupView_header_name { + vertical-align: middle; + width: 100%; + height: 31px; + overflow: hidden; + color: $primary-fg-color; + font-weight: bold; + font-size: 22px; + padding-left: 19px; + padding-right: 16px; + /* why isn't text-overflow working? */ + text-overflow: ellipsis; + border-bottom: 1px solid transparent; +} + +.mx_GroupView_header_name input, .mx_GroupView_header_shortDesc input { + width: 400px; +} + +.mx_GroupView_header_shortDesc { + vertical-align: bottom; + float: left; + max-height: 42px; + color: $settings-grey-fg-color; + font-weight: 300; + font-size: 13px; + padding-left: 19px; + margin-right: 16px; + overflow: hidden; + text-overflow: ellipsis; + border-bottom: 1px solid transparent; +} + +.mx_GroupView_avatarPicker_label { + cursor: pointer; +} + +.mx_GroupView_cancelButton { + padding-left: 8px; +} + +.mx_GroupView_cancelButton img { + position: relative; + top: 5px; +} + .mx_GroupView_featuredThings { margin-top: 20px; } @@ -50,3 +146,12 @@ limitations under the License. cursor: pointer; display: table-cell; } + +.mx_GroupView_uploadInput { + display: none; +} + +.mx_GroupView_editLongDesc { + width: 100%; + height: 150px; +} diff --git a/src/skins/vector/css/matrix-react-sdk/views/elements/_RichText.scss b/src/skins/vector/css/matrix-react-sdk/views/elements/_RichText.scss index 788955e31d..55faab8473 100644 --- a/src/skins/vector/css/matrix-react-sdk/views/elements/_RichText.scss +++ b/src/skins/vector/css/matrix-react-sdk/views/elements/_RichText.scss @@ -14,6 +14,8 @@ .mx_EventTile_content .markdown-body a.mx_UserPill, .mx_UserPill { color: $primary-fg-color; + background-color: $other-user-pill-bg-color; + padding-right: 5px; } .mx_EventTile_highlight .mx_EventTile_content .markdown-body a.mx_UserPill_me { diff --git a/src/skins/vector/css/matrix-react-sdk/views/rooms/_AppsDrawer.scss b/src/skins/vector/css/matrix-react-sdk/views/rooms/_AppsDrawer.scss index 7d1ac62818..73c59c6efa 100644 --- a/src/skins/vector/css/matrix-react-sdk/views/rooms/_AppsDrawer.scss +++ b/src/skins/vector/css/matrix-react-sdk/views/rooms/_AppsDrawer.scss @@ -83,11 +83,20 @@ limitations under the License. border: 1px solid transparent; } +.mx_AppTileMenuBarWidgetDelete { + filter: none; +} + .mx_AppTileMenuBarWidget:hover { border: 1px solid $primary-hairline-color; border-radius: 2px; } +.mx_AppTileBody{ + height: 350px; + overflow: hidden; +} + .mx_AppTileBody iframe { width: 100%; height: 350px; @@ -167,3 +176,52 @@ form.mx_Custom_Widget_Form div { margin-top: 10px; margin-bottom: 10px; } + +.mx_AppPermissionWarning { + text-align: center; + padding: 30px 0; + background-color: $primary-bg-color; +} + +.mx_AppPermissionWarningImage { + margin: 10px 0; +} + +.mx_AppPermissionWarningImage img { + width: 150px; +} + +.mx_AppPermissionWarningText { + max-width: 400px; + margin: 10px auto 10px auto; + color: $primary-fg-color; +} + +.mx_AppPermissionWarningTextLabel { + font-weight: bold; +} + +.mx_AppPermissionWarningTextURL { + color: $accent-color; +} + +.mx_AppPermissionButton { + padding: 5px; + border-radius: 5px; + color: $warning-color; + background-color: $primary-bg-color; +} + +.mx_AppPermissionButton:hover { + background-color: $primary-fg-color; + cursor: pointer; +} + +.mx_AppLoading { + min-height: 305px; + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + font-weight: bold; +} diff --git a/src/skins/vector/css/matrix-react-sdk/views/rooms/_EventTile.scss b/src/skins/vector/css/matrix-react-sdk/views/rooms/_EventTile.scss index cf148603ca..57d4a180b5 100644 --- a/src/skins/vector/css/matrix-react-sdk/views/rooms/_EventTile.scss +++ b/src/skins/vector/css/matrix-react-sdk/views/rooms/_EventTile.scss @@ -128,6 +128,12 @@ limitations under the License. color: $event-sending-color; } +.mx_EventTile_sending .mx_UserPill, +.mx_EventTile_sending .mx_RoomPill, +.mx_EventTile_sending .mx_emojione { + opacity: 0.5; +} + .mx_EventTile_notSent { color: $event-notsent-color; } @@ -370,6 +376,7 @@ limitations under the License. .mx_EventTile_content .markdown-body h6 { font-family: inherit ! important; + color: inherit; } diff --git a/src/skins/vector/css/matrix-react-sdk/views/rooms/_MessageComposer.scss b/src/skins/vector/css/matrix-react-sdk/views/rooms/_MessageComposer.scss index 98c803fd87..d85ce58a15 100644 --- a/src/skins/vector/css/matrix-react-sdk/views/rooms/_MessageComposer.scss +++ b/src/skins/vector/css/matrix-react-sdk/views/rooms/_MessageComposer.scss @@ -95,8 +95,6 @@ limitations under the License. .mx_MessageComposer_input .DraftEditor-root { width: 100%; flex: 1; - max-height: 120px; - overflow: auto; word-break: break-word; } @@ -105,6 +103,11 @@ limitations under the License. padding-top: 2px; } +.mx_MessageComposer_input .public-DraftEditor-content { + max-height: 120px; + overflow: auto; +} + .mx_MessageComposer_input blockquote { color: $blockquote-fg-color; margin: 0 0 16px; diff --git a/src/skins/vector/css/themes/_base.scss b/src/skins/vector/css/themes/_base.scss index 545334d3df..6f613e38f8 100644 --- a/src/skins/vector/css/themes/_base.scss +++ b/src/skins/vector/css/themes/_base.scss @@ -20,6 +20,7 @@ $focus-brightness: 125%; // red warning colour $warning-color: #ff0064; $mention-user-pill-bg-color: #ff0064; +$other-user-pill-bg-color: rgba(0, 0, 0, 0.1); $preview-bar-bg-color: #f7f7f7; diff --git a/src/skins/vector/css/themes/_dark.scss b/src/skins/vector/css/themes/_dark.scss index fe2e7591cf..a8f162d9f9 100644 --- a/src/skins/vector/css/themes/_dark.scss +++ b/src/skins/vector/css/themes/_dark.scss @@ -20,6 +20,8 @@ $focus-brightness: 200%; // red warning colour $warning-color: #ff0064; +$other-user-pill-bg-color: rgba(255, 255, 255, 0.1); + $preview-bar-bg-color: #333; // left-panel style muted accent color diff --git a/src/skins/vector/img/cancel-red.svg b/src/skins/vector/img/cancel-red.svg new file mode 100644 index 0000000000..a72a970b62 --- /dev/null +++ b/src/skins/vector/img/cancel-red.svg @@ -0,0 +1,10 @@ + + + + Slice 1 + Created with Sketch. + + + + +