From 24d0950b7edd73dc16ba8a9860df20775645f0f5 Mon Sep 17 00:00:00 2001 From: Travis Ralston Date: Thu, 17 Sep 2020 09:23:06 -0600 Subject: [PATCH 1/5] Adjust layout and formatting of notifications / file cards This follows some polish time with a designer. The placeholder text on the two panels was tracking up/down when the width was changed. This is fixed by adjusting some of the flexbox properties to center it more safely. We also spent some time making the notifications panel more legible while we wait for the overhaul to land. --- res/css/structures/_FilePanel.scss | 7 ++++ res/css/structures/_NotificationPanel.scss | 37 ++++++++++++++++++---- res/css/structures/_RoomView.scss | 8 ++--- src/components/views/rooms/EventTile.js | 2 ++ 4 files changed, 43 insertions(+), 11 deletions(-) diff --git a/res/css/structures/_FilePanel.scss b/res/css/structures/_FilePanel.scss index 21b30d804a..2aa068b674 100644 --- a/res/css/structures/_FilePanel.scss +++ b/res/css/structures/_FilePanel.scss @@ -23,6 +23,13 @@ limitations under the License. .mx_FilePanel .mx_RoomView_messageListWrapper { margin-right: 20px; + flex-direction: row; + align-items: center; + justify-content: center; +} + +.mx_FilePanel .mx_RoomView_MessageList { + width: 100%; } .mx_FilePanel .mx_RoomView_MessageList h2 { diff --git a/res/css/structures/_NotificationPanel.scss b/res/css/structures/_NotificationPanel.scss index 715a94fe2c..2da334b385 100644 --- a/res/css/structures/_NotificationPanel.scss +++ b/res/css/structures/_NotificationPanel.scss @@ -22,7 +22,13 @@ limitations under the License. } .mx_NotificationPanel .mx_RoomView_messageListWrapper { - margin-right: 20px; + flex-direction: row; + align-items: center; + justify-content: center; +} + +.mx_NotificationPanel .mx_RoomView_MessageList { + width: 100%; } .mx_NotificationPanel .mx_RoomView_MessageList h2 { @@ -35,11 +41,32 @@ limitations under the License. .mx_NotificationPanel .mx_EventTile { word-break: break-word; + position: relative; + padding-bottom: 18px; + + &:not(.mx_EventTile_last)::after { + position: absolute; + bottom: 0; + left: 0; + right: 0; + background-color: $tertiary-fg-color; + height: 1px; + opacity: 0.4; + content: ''; + } } .mx_NotificationPanel .mx_EventTile_roomName { font-weight: bold; font-size: $font-14px; + + > * { + vertical-align: middle; + } + + > .mx_BaseAvatar { + margin-right: 8px; + } } .mx_NotificationPanel .mx_EventTile_roomName a { @@ -47,8 +74,7 @@ limitations under the License. } .mx_NotificationPanel .mx_EventTile_avatar { - top: 8px; - left: 0px; + display: none; } .mx_NotificationPanel .mx_EventTile .mx_SenderProfile, @@ -60,8 +86,7 @@ limitations under the License. } .mx_NotificationPanel .mx_EventTile_senderDetails { - padding-left: 32px; - padding-top: 8px; + padding-left: 36px; position: relative; a { @@ -82,7 +107,7 @@ limitations under the License. .mx_NotificationPanel .mx_EventTile_line { margin-right: 0px; - padding-left: 32px; + padding-left: 36px; padding-top: 0px; padding-bottom: 0px; padding-right: 0px; diff --git a/res/css/structures/_RoomView.scss b/res/css/structures/_RoomView.scss index 3b60c4e62b..f63f80f470 100644 --- a/res/css/structures/_RoomView.scss +++ b/res/css/structures/_RoomView.scss @@ -185,13 +185,11 @@ limitations under the License. } .mx_RoomView_empty { - flex: 1 1 auto; font-size: $font-13px; - padding-left: 3em; - padding-right: 3em; - margin-right: 20px; - margin-top: 33%; + padding: 0 24px; + margin-right: 30px; text-align: center; + margin-bottom: 80px; } .mx_RoomView_MessageList { diff --git a/src/components/views/rooms/EventTile.js b/src/components/views/rooms/EventTile.js index f444fb1f1a..121930b294 100644 --- a/src/components/views/rooms/EventTile.js +++ b/src/components/views/rooms/EventTile.js @@ -34,6 +34,7 @@ import * as ObjectUtils from "../../../ObjectUtils"; import MatrixClientContext from "../../../contexts/MatrixClientContext"; import {E2E_STATE} from "./E2EIcon"; import {toRem} from "../../../utils/units"; +import RoomAvatar from "../avatars/RoomAvatar"; const eventTileTypes = { 'm.room.message': 'messages.MessageEvent', @@ -821,6 +822,7 @@ export default class EventTile extends React.Component { return (
+ { room ? room.name : '' } From 14a7b839880761a63aac457664b0aad637cc79a8 Mon Sep 17 00:00:00 2001 From: Travis Ralston Date: Thu, 17 Sep 2020 10:40:48 -0600 Subject: [PATCH 2/5] Don't show a bottom border ahead of the date separator --- res/css/structures/_NotificationPanel.scss | 2 +- src/components/structures/MessagePanel.js | 13 +++++++++++-- src/components/views/rooms/EventTile.js | 5 +++++ 3 files changed, 17 insertions(+), 3 deletions(-) diff --git a/res/css/structures/_NotificationPanel.scss b/res/css/structures/_NotificationPanel.scss index 2da334b385..6366bcaec5 100644 --- a/res/css/structures/_NotificationPanel.scss +++ b/res/css/structures/_NotificationPanel.scss @@ -44,7 +44,7 @@ limitations under the License. position: relative; padding-bottom: 18px; - &:not(.mx_EventTile_last)::after { + &:not(.mx_EventTile_last):not(.mx_EventTile_lastInSection)::after { position: absolute; bottom: 0; left: 0; diff --git a/src/components/structures/MessagePanel.js b/src/components/structures/MessagePanel.js index fe7b20a2d9..e2e3592536 100644 --- a/src/components/structures/MessagePanel.js +++ b/src/components/structures/MessagePanel.js @@ -518,10 +518,13 @@ export default class MessagePanel extends React.Component { if (!grouper) { const wantTile = this._shouldShowEvent(mxEv); if (wantTile) { + const nextEvent = i < this.props.events.length - 1 + ? this.props.events[i + 1] + : null; // make sure we unpack the array returned by _getTilesForEvent, // otherwise react will auto-generate keys and we will end up // replacing all of the DOM elements every time we paginate. - ret.push(...this._getTilesForEvent(prevEvent, mxEv, last)); + ret.push(...this._getTilesForEvent(prevEvent, mxEv, last, nextEvent)); prevEvent = mxEv; } @@ -537,7 +540,7 @@ export default class MessagePanel extends React.Component { return ret; } - _getTilesForEvent(prevEvent, mxEv, last) { + _getTilesForEvent(prevEvent, mxEv, last, nextEvent) { const TileErrorBoundary = sdk.getComponent('messages.TileErrorBoundary'); const EventTile = sdk.getComponent('rooms.EventTile'); const DateSeparator = sdk.getComponent('messages.DateSeparator'); @@ -562,6 +565,11 @@ export default class MessagePanel extends React.Component { ret.push(dateSeparator); } + let willWantDateSeparator = false; + if (nextEvent) { + willWantDateSeparator = this._wantsDateSeparator(mxEv, nextEvent.getDate() || new Date()); + } + // is this a continuation of the previous message? const continuation = !wantsDateSeparator && shouldFormContinuation(prevEvent, mxEv); @@ -598,6 +606,7 @@ export default class MessagePanel extends React.Component { isTwelveHour={this.props.isTwelveHour} permalinkCreator={this.props.permalinkCreator} last={last} + lastInSection={willWantDateSeparator} isSelectedEvent={highlight} getRelationsForEvent={this.props.getRelationsForEvent} showReactions={this.props.showReactions} diff --git a/src/components/views/rooms/EventTile.js b/src/components/views/rooms/EventTile.js index 121930b294..a1cc681a4c 100644 --- a/src/components/views/rooms/EventTile.js +++ b/src/components/views/rooms/EventTile.js @@ -148,6 +148,10 @@ export default class EventTile extends React.Component { */ last: PropTypes.bool, + // true if the event is the last event in a section (adds a css class for + // targeting) + lastInSection: PropTypes.bool, + /* true if this is search context (which has the effect of greying out * the text */ @@ -674,6 +678,7 @@ export default class EventTile extends React.Component { mx_EventTile_selected: this.props.isSelectedEvent, mx_EventTile_continuation: this.props.tileShape ? '' : this.props.continuation, mx_EventTile_last: this.props.last, + mx_EventTile_lastInSection: this.props.lastInSection, mx_EventTile_contextual: this.props.contextual, mx_EventTile_actionBarFocused: this.state.actionBarFocused, mx_EventTile_verified: !isBubbleMessage && this.state.verified === E2E_STATE.VERIFIED, From 4657a34bbb9715edca6b53e0f398c2443fae7eff Mon Sep 17 00:00:00 2001 From: Travis Ralston Date: Thu, 17 Sep 2020 10:44:18 -0600 Subject: [PATCH 3/5] Document some of the magic values --- res/css/structures/_NotificationPanel.scss | 6 +++--- res/css/structures/_RoomView.scss | 2 +- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/res/css/structures/_NotificationPanel.scss b/res/css/structures/_NotificationPanel.scss index 6366bcaec5..8282b92bc4 100644 --- a/res/css/structures/_NotificationPanel.scss +++ b/res/css/structures/_NotificationPanel.scss @@ -74,7 +74,7 @@ limitations under the License. } .mx_NotificationPanel .mx_EventTile_avatar { - display: none; + display: none; // we don't need this in this view } .mx_NotificationPanel .mx_EventTile .mx_SenderProfile, @@ -86,7 +86,7 @@ limitations under the License. } .mx_NotificationPanel .mx_EventTile_senderDetails { - padding-left: 36px; + padding-left: 36px; // align with the room name position: relative; a { @@ -107,7 +107,7 @@ limitations under the License. .mx_NotificationPanel .mx_EventTile_line { margin-right: 0px; - padding-left: 36px; + padding-left: 36px; // align with the room name padding-top: 0px; padding-bottom: 0px; padding-right: 0px; diff --git a/res/css/structures/_RoomView.scss b/res/css/structures/_RoomView.scss index f63f80f470..572c7166d2 100644 --- a/res/css/structures/_RoomView.scss +++ b/res/css/structures/_RoomView.scss @@ -189,7 +189,7 @@ limitations under the License. padding: 0 24px; margin-right: 30px; text-align: center; - margin-bottom: 80px; + margin-bottom: 80px; // visually center the content (intentional offset) } .mx_RoomView_MessageList { From f5f48cbc21bef4526ef967772e7307762702b861 Mon Sep 17 00:00:00 2001 From: Travis Ralston Date: Thu, 17 Sep 2020 10:44:58 -0600 Subject: [PATCH 4/5] Fix indentation --- res/css/structures/_NotificationPanel.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/res/css/structures/_NotificationPanel.scss b/res/css/structures/_NotificationPanel.scss index 8282b92bc4..1258ace069 100644 --- a/res/css/structures/_NotificationPanel.scss +++ b/res/css/structures/_NotificationPanel.scss @@ -65,7 +65,7 @@ limitations under the License. } > .mx_BaseAvatar { - margin-right: 8px; + margin-right: 8px; } } From 949b8d9afe39e60ab264d71f4e3ef2959996fefc Mon Sep 17 00:00:00 2001 From: Michael Telatynski <7t3chguy@gmail.com> Date: Fri, 18 Sep 2020 16:22:35 +0100 Subject: [PATCH 5/5] Rename apps back to widgets Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> --- src/components/views/elements/AppTile.js | 4 ++-- src/components/views/right_panel/RoomSummaryCard.tsx | 4 ++-- src/components/views/right_panel/WidgetCard.tsx | 2 +- src/i18n/strings/en_EN.json | 12 ++++++------ 4 files changed, 11 insertions(+), 11 deletions(-) diff --git a/src/components/views/elements/AppTile.js b/src/components/views/elements/AppTile.js index 79a88ed43d..6aaeab060f 100644 --- a/src/components/views/elements/AppTile.js +++ b/src/components/views/elements/AppTile.js @@ -863,13 +863,13 @@ export default class AppTile extends React.Component { { /* Minimise widget */ } { showMinimiseButton && } { /* Maximise widget */ } { showMaximiseButton && } { /* Title */ } diff --git a/src/components/views/right_panel/RoomSummaryCard.tsx b/src/components/views/right_panel/RoomSummaryCard.tsx index 9d20dc1fe1..95b159deed 100644 --- a/src/components/views/right_panel/RoomSummaryCard.tsx +++ b/src/components/views/right_panel/RoomSummaryCard.tsx @@ -99,7 +99,7 @@ const AppsSection: React.FC = ({ room }) => { } }; - return + return { apps.map(app => { const name = WidgetUtils.getWidgetName(app); const dataTitle = WidgetUtils.getWidgetDataTitle(app); @@ -161,7 +161,7 @@ const AppsSection: React.FC = ({ room }) => { }) } - { apps.length > 0 ? _t("Edit apps, bridges & bots") : _t("Add apps, bridges & bots") } + { apps.length > 0 ? _t("Edit widgets, bridges & bots") : _t("Add widgets, bridges & bots") } ; }; diff --git a/src/components/views/right_panel/WidgetCard.tsx b/src/components/views/right_panel/WidgetCard.tsx index dec30a57f2..1677494708 100644 --- a/src/components/views/right_panel/WidgetCard.tsx +++ b/src/components/views/right_panel/WidgetCard.tsx @@ -152,7 +152,7 @@ const WidgetCard: React.FC = ({ room, widgetId, onClose }) => { ; } else { pinButton =