diff --git a/res/css/_common.scss b/res/css/_common.scss index 7fead4317e..fa91532540 100644 --- a/res/css/_common.scss +++ b/res/css/_common.scss @@ -174,7 +174,7 @@ input[type=text]:focus, input[type=password]:focus, textarea:focus { :not(.mx_textinput):not(.mx_Field):not(.mx_no_textinput) > input[type=text]::placeholder, :not(.mx_textinput):not(.mx_Field):not(.mx_no_textinput) > input[type=search]::placeholder, .mx_textinput input::placeholder { - color: $roomsublist-label-fg-color; + color: rgba($input-darker-fg-color, .75); } } diff --git a/res/css/_components.scss b/res/css/_components.scss index 8f3c187ff8..d0432b2f23 100644 --- a/res/css/_components.scss +++ b/res/css/_components.scss @@ -146,7 +146,6 @@ @import "./views/messages/_MjolnirBody.scss"; @import "./views/messages/_ReactionsRow.scss"; @import "./views/messages/_ReactionsRowButton.scss"; -@import "./views/messages/_ReactionsRowButtonTooltip.scss"; @import "./views/messages/_RedactedBody.scss"; @import "./views/messages/_RoomAvatarEvent.scss"; @import "./views/messages/_SenderProfile.scss"; diff --git a/res/css/structures/_HeaderButtons.scss b/res/css/structures/_HeaderButtons.scss index eef7653b24..9ef40e9d6a 100644 --- a/res/css/structures/_HeaderButtons.scss +++ b/res/css/structures/_HeaderButtons.scss @@ -22,7 +22,7 @@ limitations under the License. content: ""; background-color: $header-divider-color; opacity: 0.5; - margin: 0 15px; + margin: 6px 8px; border-radius: 1px; width: 1px; } diff --git a/res/css/structures/_RightPanel.scss b/res/css/structures/_RightPanel.scss index 77114954eb..2fe7aac3b2 100644 --- a/res/css/structures/_RightPanel.scss +++ b/res/css/structures/_RightPanel.scss @@ -61,10 +61,10 @@ limitations under the License. &::before { content: ''; position: absolute; - top: 6px; // center with parent of 32px - left: 6px; // center with parent of 32px - height: 20px; - width: 20px; + top: 4px; // center with parent of 32px + left: 4px; // center with parent of 32px + height: 24px; + width: 24px; background-color: $rightpanel-button-color; mask-repeat: no-repeat; mask-size: contain; diff --git a/res/css/views/elements/_Tooltip.scss b/res/css/views/elements/_Tooltip.scss index 7efea2c3f7..a3a90e2a4f 100644 --- a/res/css/views/elements/_Tooltip.scss +++ b/res/css/views/elements/_Tooltip.scss @@ -52,7 +52,7 @@ limitations under the License. display: none; position: fixed; border: 1px solid $menu-border-color; - border-radius: 4px; + border-radius: 8px; box-shadow: 4px 4px 12px 0 $menu-box-shadow-color; background-color: $menu-bg-color; z-index: 6000; // Higher than context menu so tooltips can be used everywhere @@ -60,7 +60,7 @@ limitations under the License. pointer-events: none; line-height: $font-14px; font-size: $font-12px; - font-weight: 600; + font-weight: 500; color: $primary-fg-color; max-width: 200px; word-break: break-word; @@ -87,3 +87,12 @@ limitations under the License. } } } + +.mx_Tooltip_title { + font-weight: 600; +} + +.mx_Tooltip_sub { + opacity: 0.7; + margin-top: 4px; +} diff --git a/res/css/views/messages/_ReactionsRowButtonTooltip.scss b/res/css/views/messages/_ReactionsRowButtonTooltip.scss deleted file mode 100644 index cf4219fcec..0000000000 --- a/res/css/views/messages/_ReactionsRowButtonTooltip.scss +++ /dev/null @@ -1,19 +0,0 @@ -/* -Copyright 2019 The Matrix.org Foundation C.I.C. - -Licensed under the Apache License, Version 2.0 (the "License"); -you may not use this file except in compliance with the License. -You may obtain a copy of the License at - - http://www.apache.org/licenses/LICENSE-2.0 - -Unless required by applicable law or agreed to in writing, software -distributed under the License is distributed on an "AS IS" BASIS, -WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. -See the License for the specific language governing permissions and -limitations under the License. -*/ - -.mx_ReactionsRowButtonTooltip_reactedWith { - opacity: 0.7; -} diff --git a/res/css/views/rooms/_Autocomplete.scss b/res/css/views/rooms/_Autocomplete.scss index a4aebdb708..f8e0a382b1 100644 --- a/res/css/views/rooms/_Autocomplete.scss +++ b/res/css/views/rooms/_Autocomplete.scss @@ -6,9 +6,10 @@ border: 1px solid $primary-hairline-color; background: $primary-bg-color; border-bottom: none; - border-radius: 4px 4px 0 0; + border-radius: 8px 8px 0 0; max-height: 50vh; overflow: auto; + box-shadow: 0px -16px 32px $composer-shadow-color; } .mx_Autocomplete_ProviderSection { diff --git a/res/css/views/rooms/_MemberList.scss b/res/css/views/rooms/_MemberList.scss index 718164589c..be58db43ae 100644 --- a/res/css/views/rooms/_MemberList.scss +++ b/res/css/views/rooms/_MemberList.scss @@ -63,6 +63,11 @@ limitations under the License. .mx_GroupMemberList_query, .mx_GroupRoomList_query { flex: 1 1 0; + + // stricter rule to override the one in _common.scss + &[type="text"] { + font-size: $font-12px; + } } diff --git a/res/css/views/rooms/_MessageComposer.scss b/res/css/views/rooms/_MessageComposer.scss index 9f6d2ec590..ec95403262 100644 --- a/res/css/views/rooms/_MessageComposer.scss +++ b/res/css/views/rooms/_MessageComposer.scss @@ -20,7 +20,7 @@ limitations under the License. margin: auto; border-top: 1px solid $primary-hairline-color; position: relative; - padding-left: 83px; + padding-left: 82px; } .mx_MessageComposer_replaced_wrapper { diff --git a/res/css/views/rooms/_NotificationBadge.scss b/res/css/views/rooms/_NotificationBadge.scss index 0e6d442cc1..dbc9006ca3 100644 --- a/res/css/views/rooms/_NotificationBadge.scss +++ b/res/css/views/rooms/_NotificationBadge.scss @@ -42,6 +42,8 @@ limitations under the License. // These are the 3 background types &.mx_NotificationBadge_dot { + background-color: $primary-fg-color; // increased visibility + width: 6px; height: 6px; border-radius: 6px; diff --git a/res/css/views/rooms/_ReplyPreview.scss b/res/css/views/rooms/_ReplyPreview.scss index 4dc4cb2c40..9feb337042 100644 --- a/res/css/views/rooms/_ReplyPreview.scss +++ b/res/css/views/rooms/_ReplyPreview.scss @@ -22,9 +22,10 @@ limitations under the License. border: 1px solid $primary-hairline-color; background: $primary-bg-color; border-bottom: none; - border-radius: 4px 4px 0 0; + border-radius: 8px 8px 0 0; max-height: 50vh; overflow: auto; + box-shadow: 0px -16px 32px $composer-shadow-color; } .mx_ReplyPreview_section { diff --git a/res/css/views/rooms/_RoomHeader.scss b/res/css/views/rooms/_RoomHeader.scss index 46993bb644..ba46100ea6 100644 --- a/res/css/views/rooms/_RoomHeader.scss +++ b/res/css/views/rooms/_RoomHeader.scss @@ -75,7 +75,6 @@ limitations under the License. .mx_RoomHeader_buttons { display: flex; background-color: $primary-bg-color; - padding-right: 5px; } .mx_RoomHeader_info { @@ -209,20 +208,32 @@ limitations under the License. .mx_RoomHeader_button { position: relative; - margin-left: 10px; + margin-left: 1px; + margin-right: 1px; cursor: pointer; - height: 20px; - width: 20px; + height: 32px; + width: 32px; + border-radius: 100%; &::before { content: ''; position: absolute; - height: 20px; - width: 20px; + top: 4px; // center with parent of 32px + left: 4px; // center with parent of 32px + height: 24px; + width: 24px; background-color: $roomheader-button-color; mask-repeat: no-repeat; mask-size: contain; } + + &:hover { + background: rgba($accent-color, 0.1); + + &::before { + background-color: $accent-color; + } + } } .mx_RoomHeader_settingsButton::before { diff --git a/res/css/views/rooms/_WhoIsTypingTile.scss b/res/css/views/rooms/_WhoIsTypingTile.scss index 02d779a99c..1c0dabbeb5 100644 --- a/res/css/views/rooms/_WhoIsTypingTile.scss +++ b/res/css/views/rooms/_WhoIsTypingTile.scss @@ -59,7 +59,7 @@ limitations under the License. flex: 1; font-size: $font-14px; font-weight: 600; - color: $composer-button-color; + color: $roomtopic-color; } .mx_WhoIsTypingTile_label > span { diff --git a/res/img/element-icons/community-members.svg b/res/img/element-icons/community-members.svg index 3131075c7b..553ba3b1af 100644 --- a/res/img/element-icons/community-members.svg +++ b/res/img/element-icons/community-members.svg @@ -1,8 +1,8 @@ - + - + - - - + + + diff --git a/res/img/element-icons/community-rooms.svg b/res/img/element-icons/community-rooms.svg index c46cedc74f..570b45a488 100644 --- a/res/img/element-icons/community-rooms.svg +++ b/res/img/element-icons/community-rooms.svg @@ -1,3 +1,3 @@ - - + + diff --git a/res/img/element-icons/leave.svg b/res/img/element-icons/leave.svg index 8a96160afd..773e27d4ce 100644 --- a/res/img/element-icons/leave.svg +++ b/res/img/element-icons/leave.svg @@ -1,7 +1,7 @@ - - + + - + - + diff --git a/res/img/element-icons/notifications.svg b/res/img/element-icons/notifications.svg index c86a7a3b98..7002782129 100644 --- a/res/img/element-icons/notifications.svg +++ b/res/img/element-icons/notifications.svg @@ -1,5 +1,5 @@ - - - - + + + + diff --git a/res/img/element-icons/room/files.svg b/res/img/element-icons/room/files.svg index 6dfd6856d6..6648ab00a5 100644 --- a/res/img/element-icons/room/files.svg +++ b/res/img/element-icons/room/files.svg @@ -1,3 +1,3 @@ - - + + diff --git a/res/img/element-icons/room/integrations.svg b/res/img/element-icons/room/integrations.svg index 57937cd929..3a39506411 100644 --- a/res/img/element-icons/room/integrations.svg +++ b/res/img/element-icons/room/integrations.svg @@ -1,3 +1,3 @@ - - + + diff --git a/res/img/element-icons/room/members.svg b/res/img/element-icons/room/members.svg index e73834bfe5..03aba81ad4 100644 --- a/res/img/element-icons/room/members.svg +++ b/res/img/element-icons/room/members.svg @@ -1,7 +1,7 @@ - + - + - - + + diff --git a/res/img/element-icons/room/pin.svg b/res/img/element-icons/room/pin.svg index d2e9a2c2eb..16941b329b 100644 --- a/res/img/element-icons/room/pin.svg +++ b/res/img/element-icons/room/pin.svg @@ -1,7 +1,7 @@ - - - - - - + + + + + + diff --git a/res/img/element-icons/room/search-inset.svg b/res/img/element-icons/room/search-inset.svg index 2a837f5106..699cdd1d00 100644 --- a/res/img/element-icons/room/search-inset.svg +++ b/res/img/element-icons/room/search-inset.svg @@ -1,3 +1,3 @@ - - + + diff --git a/res/img/element-icons/room/share.svg b/res/img/element-icons/room/share.svg index 5accc0a849..dac35ae5a7 100644 --- a/res/img/element-icons/room/share.svg +++ b/res/img/element-icons/room/share.svg @@ -1,3 +1,3 @@ - - + + diff --git a/res/img/element-icons/settings.svg b/res/img/element-icons/settings.svg index e6e2aef54c..05d640df27 100644 --- a/res/img/element-icons/settings.svg +++ b/res/img/element-icons/settings.svg @@ -1,3 +1,3 @@ - - + + diff --git a/res/themes/dark/css/_dark.scss b/res/themes/dark/css/_dark.scss index 990debb0a4..370c30d4f2 100644 --- a/res/themes/dark/css/_dark.scss +++ b/res/themes/dark/css/_dark.scss @@ -211,6 +211,8 @@ $appearance-tab-border-color: $room-highlight-color; $roomlist-background-blur-amount: 60px; $tagpanel-background-blur-amount: 30px; +$composer-shadow-color: rgba(0, 0, 0, 0.28); + // ***** Mixins! ***** @define-mixin mx_DialogButton { diff --git a/res/themes/legacy-dark/css/_legacy-dark.scss b/res/themes/legacy-dark/css/_legacy-dark.scss index a6a85edfe1..6671afb929 100644 --- a/res/themes/legacy-dark/css/_legacy-dark.scss +++ b/res/themes/legacy-dark/css/_legacy-dark.scss @@ -203,6 +203,8 @@ $user-tile-hover-bg-color: $header-panel-bg-color; // Appearance tab colors $appearance-tab-border-color: $room-highlight-color; +$composer-shadow-color: tranparent; + // ***** Mixins! ***** @define-mixin mx_DialogButton { diff --git a/res/themes/legacy-light/css/_legacy-light.scss b/res/themes/legacy-light/css/_legacy-light.scss index 991abdefff..822b65d57d 100644 --- a/res/themes/legacy-light/css/_legacy-light.scss +++ b/res/themes/legacy-light/css/_legacy-light.scss @@ -331,6 +331,8 @@ $user-tile-hover-bg-color: $header-panel-bg-color; // FontSlider colors $appearance-tab-border-color: $input-darker-bg-color; +$composer-shadow-color: tranparent; + // ***** Mixins! ***** @define-mixin mx_DialogButton { diff --git a/res/themes/light/css/_light.scss b/res/themes/light/css/_light.scss index 3737d21a0f..657d3bfd13 100644 --- a/res/themes/light/css/_light.scss +++ b/res/themes/light/css/_light.scss @@ -335,6 +335,7 @@ $appearance-tab-border-color: $input-darker-bg-color; $roomlist-background-blur-amount: 40px; $tagpanel-background-blur-amount: 20px; +$composer-shadow-color: rgba(0, 0, 0, 0.04); // ***** Mixins! ***** diff --git a/src/components/views/elements/AccessibleTooltipButton.tsx b/src/components/views/elements/AccessibleTooltipButton.tsx index 4dbb8f42bf..641151bbfd 100644 --- a/src/components/views/elements/AccessibleTooltipButton.tsx +++ b/src/components/views/elements/AccessibleTooltipButton.tsx @@ -24,6 +24,7 @@ import Tooltip from './Tooltip'; interface ITooltipProps extends IProps { title: string; + tooltip?: React.ReactNode; tooltipClassName?: string; } @@ -52,12 +53,12 @@ export default class AccessibleTooltipButton extends React.PureComponent :
; return ( diff --git a/src/components/views/messages/ReactionsRowButtonTooltip.js b/src/components/views/messages/ReactionsRowButtonTooltip.js index 59e9d2ad7f..3a87befdae 100644 --- a/src/components/views/messages/ReactionsRowButtonTooltip.js +++ b/src/components/views/messages/ReactionsRowButtonTooltip.js @@ -55,7 +55,7 @@ export default class ReactionsRowButtonTooltip extends React.PureComponent { }, { reactors: () => { - return
+ return
{formatCommaSeparatedList(senders, 6)}
; }, @@ -63,7 +63,7 @@ export default class ReactionsRowButtonTooltip extends React.PureComponent { if (!shortName) { return null; } - return
+ return
{sub}
; }, diff --git a/src/components/views/messages/TextualBody.js b/src/components/views/messages/TextualBody.js index 84126ed7fc..5784e36a8b 100644 --- a/src/components/views/messages/TextualBody.js +++ b/src/components/views/messages/TextualBody.js @@ -376,11 +376,21 @@ export default createReactClass({ const date = this.props.mxEvent.replacingEventDate(); const dateString = date && formatDate(date); + const tooltip =
+
+ {_t("Edited at %(date)s", {date: dateString})} +
+
+ {_t("Click to view edits")} +
+
; + return ( {`(${_t("edited")})`} diff --git a/src/components/views/rooms/RoomSublist2.tsx b/src/components/views/rooms/RoomSublist2.tsx index ec937dcad3..145bd8d68e 100644 --- a/src/components/views/rooms/RoomSublist2.tsx +++ b/src/components/views/rooms/RoomSublist2.tsx @@ -444,24 +444,20 @@ export default class RoomSublist2 extends React.Component {
-
{_t("Unread rooms")}
+
{_t("Appearance")}
- {_t("Always show first")} + {_t("Show rooms with unread messages first")} -
-
-
-
{_t("Show")}
- {_t("Message preview")} + {_t("Show previews of messages")}
diff --git a/src/i18n/strings/en_EN.json b/src/i18n/strings/en_EN.json index a205b78f1e..d81c0c717b 100644 --- a/src/i18n/strings/en_EN.json +++ b/src/i18n/strings/en_EN.json @@ -1210,10 +1210,9 @@ "Securely back up your keys to avoid losing them. Learn more.": "Securely back up your keys to avoid losing them. Learn more.", "Not now": "Not now", "Don't ask me again": "Don't ask me again", - "Unread rooms": "Unread rooms", - "Always show first": "Always show first", - "Show": "Show", - "Message preview": "Message preview", + "Appearance": "Appearance", + "Show rooms with unread messages first": "Show rooms with unread messages first", + "Show previews of messages": "Show previews of messages", "Sort by": "Sort by", "Activity": "Activity", "A-Z": "A-Z", @@ -1456,6 +1455,8 @@ "Failed to copy": "Failed to copy", "Add an Integration": "Add an Integration", "You are about to be taken to a third-party site so you can authenticate your account for use with %(integrationsUrl)s. Do you wish to continue?": "You are about to be taken to a third-party site so you can authenticate your account for use with %(integrationsUrl)s. Do you wish to continue?", + "Edited at %(date)s": "Edited at %(date)s", + "Click to view edits": "Click to view edits", "Edited at %(date)s. Click to view edits.": "Edited at %(date)s. Click to view edits.", "edited": "edited", "Can't load this message": "Can't load this message", @@ -1855,7 +1856,6 @@ "Upload %(count)s other files|one": "Upload %(count)s other file", "Cancel All": "Cancel All", "Upload Error": "Upload Error", - "Appearance": "Appearance", "Verify other session": "Verify other session", "Verification Request": "Verification Request", "A widget would like to verify your identity": "A widget would like to verify your identity",