diff --git a/.babelrc b/.babelrc index 3fb847ad18..abe7e1ef3f 100644 --- a/.babelrc +++ b/.babelrc @@ -13,7 +13,6 @@ ], "transform-class-properties", "transform-object-rest-spread", - "transform-async-to-bluebird", "transform-runtime", "add-module-exports", "syntax-dynamic-import" diff --git a/.buildkite/pipeline.yaml b/.buildkite/pipeline.yaml index 946e417676..639c7420f0 100644 --- a/.buildkite/pipeline.yaml +++ b/.buildkite/pipeline.yaml @@ -1,7 +1,12 @@ steps: - label: ":eslint: Lint" command: - - "yarn install" + # TODO: Remove hacky chmod for BuildKite + - "echo '--- Setup'" + - "chmod +x ./scripts/ci/*.sh" + - "chmod +x ./scripts/*" + - "echo '--- Install js-sdk'" + - "./scripts/ci/install-deps.sh" - "yarn lintwithexclusions" - "yarn stylelint" plugins: @@ -10,9 +15,9 @@ steps: - label: ":chains: End-to-End Tests" agents: - # We use a medium sized instance instead of the normal small ones because + # We use a xlarge sized instance instead of the normal small ones because # e2e tests otherwise take +-8min - queue: "medium" + queue: "xlarge" command: # TODO: Remove hacky chmod for BuildKite - "echo '--- Setup'" @@ -80,8 +85,18 @@ steps: image: "node:10" propagate-environment: true + - label: "🌐 i18n" + command: + - "echo '--- Fetching Dependencies'" + - "yarn install" + - "echo '+++ Testing i18n output'" + - "yarn diff-i18n" + plugins: + - docker#v3.0.1: + image: "node:10" + - wait - + - label: "🐴 Trigger riot-web" trigger: "riot-web" branches: "develop" diff --git a/.eslintignore.errorfiles b/.eslintignore.errorfiles index ffe0ade5cc..7d998f8c4b 100644 --- a/.eslintignore.errorfiles +++ b/.eslintignore.errorfiles @@ -1,10 +1,6 @@ # autogenerated file: run scripts/generate-eslint-error-ignore-file to update. src/component-index.js -src/components/structures/BottomLeftMenu.js -src/components/structures/CreateRoom.js -src/components/structures/MessagePanel.js -src/components/structures/NotificationPanel.js src/components/structures/RoomDirectory.js src/components/structures/RoomStatusBar.js src/components/structures/RoomView.js @@ -19,58 +15,39 @@ src/components/views/dialogs/SetPasswordDialog.js src/components/views/dialogs/UnknownDeviceDialog.js src/components/views/elements/AddressSelector.js src/components/views/elements/DirectorySearchBox.js -src/components/views/elements/ImageView.js src/components/views/elements/MemberEventListSummary.js -src/components/views/elements/TintableSvg.js src/components/views/elements/UserSelector.js src/components/views/globals/MatrixToolbar.js src/components/views/globals/NewVersionBar.js src/components/views/globals/UpdateCheckBar.js src/components/views/messages/MFileBody.js -src/components/views/messages/RoomAvatarEvent.js src/components/views/messages/TextualBody.js src/components/views/room_settings/ColorSettings.js src/components/views/rooms/Autocomplete.js src/components/views/rooms/AuxPanel.js -src/components/views/rooms/EntityTile.js src/components/views/rooms/LinkPreviewWidget.js src/components/views/rooms/MemberDeviceInfo.js src/components/views/rooms/MemberInfo.js src/components/views/rooms/MemberList.js -src/components/views/rooms/MessageComposer.js -src/components/views/rooms/PinnedEventTile.js src/components/views/rooms/RoomList.js src/components/views/rooms/RoomPreviewBar.js -src/components/views/rooms/SearchableEntityList.js src/components/views/rooms/SearchBar.js src/components/views/rooms/SearchResultTile.js -src/components/views/rooms/TopUnreadMessagesBar.js -src/components/views/rooms/UserTile.js +src/components/views/rooms/SlateMessageComposer.js src/components/views/settings/ChangeAvatar.js src/components/views/settings/ChangePassword.js src/components/views/settings/DevicesPanel.js -src/components/views/settings/IntegrationsManager.js src/components/views/settings/Notifications.js -src/GroupAddressPicker.js src/HtmlUtils.js src/ImageUtils.js -src/languageHandler.js -src/linkify-matrix.js src/Markdown.js -src/MatrixClientPeg.js src/notifications/ContentRules.js src/notifications/PushRuleVectorState.js -src/notifications/VectorPushRulesDefinitions.js -src/Notifier.js src/PlatformPeg.js -src/Presence.js src/rageshake/rageshake.js src/rageshake/submit-rageshake.js src/ratelimitedfunc.js -src/Roles.js src/Rooms.js -src/ScalarAuthClient.js -src/UiEffects.js src/Unread.js src/utils/DecryptFile.js src/utils/DirectoryUtils.js @@ -78,16 +55,10 @@ src/utils/DMRoomMap.js src/utils/FormattingUtils.js src/utils/MultiInviter.js src/utils/Receipt.js -src/VectorConferenceHandler.js src/Velociraptor.js -src/WhoIsTyping.js -src/wrappers/withMatrixClient.js test/components/structures/MessagePanel-test.js -test/components/structures/ScrollPanel-test.js -test/components/structures/TimelinePanel-test.js test/components/views/dialogs/InteractiveAuthDialog-test.js test/components/views/rooms/MessageComposerInput-test.js -test/components/views/rooms/RoomSettings-test.js test/mock-clock.js test/notifications/ContentRules-test.js test/notifications/PushRuleVectorState-test.js diff --git a/.eslintrc.js b/.eslintrc.js index fdf0bb351e..81c3752301 100644 --- a/.eslintrc.js +++ b/.eslintrc.js @@ -12,6 +12,7 @@ module.exports = { extends: [matrixJsSdkPath + "/.eslintrc.js"], plugins: [ "react", + "react-hooks", "flowtype", "babel" ], @@ -104,6 +105,9 @@ module.exports = { // crashes currently: https://github.com/eslint/eslint/issues/6274 "generator-star-spacing": "off", + + "react-hooks/rules-of-hooks": "error", + "react-hooks/exhaustive-deps": "warn", }, settings: { flowtype: { diff --git a/.github/FUNDING.yml b/.github/FUNDING.yml new file mode 100644 index 0000000000..afc29f0142 --- /dev/null +++ b/.github/FUNDING.yml @@ -0,0 +1,2 @@ +patreon: matrixdotorg +liberapay: matrixdotorg diff --git a/.stylelintrc.js b/.stylelintrc.js index fc00b643a0..1690f2186f 100644 --- a/.stylelintrc.js +++ b/.stylelintrc.js @@ -1,5 +1,8 @@ module.exports = { "extends": "stylelint-config-standard", + "plugins": [ + "stylelint-scss", + ], "rules": { "indentation": 4, "comment-empty-line-before": null, @@ -11,5 +14,11 @@ module.exports = { "number-no-trailing-zeros": null, "number-leading-zero": null, "selector-list-comma-newline-after": null, + "at-rule-no-unknown": null, + "no-descending-specificity": null, + "scss/at-rule-no-unknown": [true, { + // https://github.com/vector-im/riot-web/issues/10544 + "ignoreAtRules": ["define-mixin"], + }], } } diff --git a/CHANGELOG.md b/CHANGELOG.md index 4d9a01e668..8fe6f80e43 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,3 +1,1579 @@ +Changes in [1.7.4](https://github.com/matrix-org/matrix-react-sdk/releases/tag/v1.7.4) (2019-11-27) +=================================================================================================== +[Full Changelog](https://github.com/matrix-org/matrix-react-sdk/compare/v1.7.3...v1.7.4) + +* Upgrade to JS SDK 2.5.4 to relax identity server discovery and E2EE debugging +* Fix override behaviour of system vs defined theme +* Clarify that cross-signing is in development + +Changes in [1.7.3](https://github.com/matrix-org/matrix-react-sdk/releases/tag/v1.7.3) (2019-11-25) +=================================================================================================== +[Full Changelog](https://github.com/matrix-org/matrix-react-sdk/compare/v1.7.3-rc.2...v1.7.3) + + * No changes since rc.2 + +Changes in [1.7.3-rc.2](https://github.com/matrix-org/matrix-react-sdk/releases/tag/v1.7.3-rc.2) (2019-11-22) +============================================================================================================= +[Full Changelog](https://github.com/matrix-org/matrix-react-sdk/compare/v1.7.3-rc.1...v1.7.3-rc.2) + + * Fix double date separator for room upgrade tiles + [\#3663](https://github.com/matrix-org/matrix-react-sdk/pull/3663) + * Show m.room.create event before the ELS on room upgrade + [\#3660](https://github.com/matrix-org/matrix-react-sdk/pull/3660) + * Make addEventListener conditional + [\#3659](https://github.com/matrix-org/matrix-react-sdk/pull/3659) + * Fix e2e icons + [\#3658](https://github.com/matrix-org/matrix-react-sdk/pull/3658) + +Changes in [1.7.3-rc.1](https://github.com/matrix-org/matrix-react-sdk/releases/tag/v1.7.3-rc.1) (2019-11-20) +============================================================================================================= +[Full Changelog](https://github.com/matrix-org/matrix-react-sdk/compare/v1.7.2...v1.7.3-rc.1) + + * Fix positioning, size, and colour of the composer e2e icon + [\#3641](https://github.com/matrix-org/matrix-react-sdk/pull/3641) + * upgrade nunito from 3.500 to 3.504 + [\#3639](https://github.com/matrix-org/matrix-react-sdk/pull/3639) + * Wire up the widget permission prompt to the cross-platform setting + [\#3630](https://github.com/matrix-org/matrix-react-sdk/pull/3630) + * Get theme automatically from system setting + [\#3637](https://github.com/matrix-org/matrix-react-sdk/pull/3637) + * Update code style for our 90 char life + [\#3636](https://github.com/matrix-org/matrix-react-sdk/pull/3636) + * use general warning icon instead of e2e one for room status + [\#3633](https://github.com/matrix-org/matrix-react-sdk/pull/3633) + * Add support for platform specific event indexing and search + [\#3550](https://github.com/matrix-org/matrix-react-sdk/pull/3550) + * Update from Weblate + [\#3635](https://github.com/matrix-org/matrix-react-sdk/pull/3635) + * Use a settings watcher to set the theme + [\#3634](https://github.com/matrix-org/matrix-react-sdk/pull/3634) + * Merge the `feature_user_info_panel` flag into `feature_dm_verification` + [\#3632](https://github.com/matrix-org/matrix-react-sdk/pull/3632) + * Fix some styling regressions in member panel + [\#3631](https://github.com/matrix-org/matrix-react-sdk/pull/3631) + * Add a bit more safety around breadcrumbs + [\#3629](https://github.com/matrix-org/matrix-react-sdk/pull/3629) + * Ensure widgets always have a sender associated with them + [\#3628](https://github.com/matrix-org/matrix-react-sdk/pull/3628) + * re-add missing case of codepath + [\#3627](https://github.com/matrix-org/matrix-react-sdk/pull/3627) + * Implement the bulk of the new widget permission prompt design + [\#3622](https://github.com/matrix-org/matrix-react-sdk/pull/3622) + * Relax identity server discovery error handling + [\#3588](https://github.com/matrix-org/matrix-react-sdk/pull/3588) + * Add cross-signing feature flag + [\#3626](https://github.com/matrix-org/matrix-react-sdk/pull/3626) + * Attempt number two at ripping out Bluebird from rageshake.js + [\#3624](https://github.com/matrix-org/matrix-react-sdk/pull/3624) + * Update from Weblate + [\#3625](https://github.com/matrix-org/matrix-react-sdk/pull/3625) + * Remove Bluebird: phase 2.1 + [\#3618](https://github.com/matrix-org/matrix-react-sdk/pull/3618) + * Add better error handling to Synapse user deactivation + [\#3619](https://github.com/matrix-org/matrix-react-sdk/pull/3619) + * New design for member panel + [\#3620](https://github.com/matrix-org/matrix-react-sdk/pull/3620) + * Show server details on login for unreachable homeserver + [\#3617](https://github.com/matrix-org/matrix-react-sdk/pull/3617) + * Add a function to get the "base" theme for a theme + [\#3615](https://github.com/matrix-org/matrix-react-sdk/pull/3615) + * Remove Bluebird: phase 2 + [\#3616](https://github.com/matrix-org/matrix-react-sdk/pull/3616) + * Remove Bluebird: phase 1 + [\#3612](https://github.com/matrix-org/matrix-react-sdk/pull/3612) + * Move notification count to in front of the room name in the page title + [\#3613](https://github.com/matrix-org/matrix-react-sdk/pull/3613) + * Add some logging/recovery for lost rooms + [\#3614](https://github.com/matrix-org/matrix-react-sdk/pull/3614) + * Add Mjolnir ban list support + [\#3585](https://github.com/matrix-org/matrix-react-sdk/pull/3585) + * Improve room switching performance with alias cache + [\#3610](https://github.com/matrix-org/matrix-react-sdk/pull/3610) + * Fix draw order when hovering composer format buttons + [\#3609](https://github.com/matrix-org/matrix-react-sdk/pull/3609) + * Use a ternary operator instead of relying on AND semantics in + EditHistoryDialog + [\#3606](https://github.com/matrix-org/matrix-react-sdk/pull/3606) + * Update from Weblate + [\#3608](https://github.com/matrix-org/matrix-react-sdk/pull/3608) + * Fix HTML fallback in replies + [\#3607](https://github.com/matrix-org/matrix-react-sdk/pull/3607) + * Fix rounded corners for the formatting toolbar + [\#3605](https://github.com/matrix-org/matrix-react-sdk/pull/3605) + * Check for a message type before assuming it is a room message + [\#3604](https://github.com/matrix-org/matrix-react-sdk/pull/3604) + * Remove lint comments about no-descending-specificity + [\#3603](https://github.com/matrix-org/matrix-react-sdk/pull/3603) + * Show verification requests in the timeline + [\#3601](https://github.com/matrix-org/matrix-react-sdk/pull/3601) + * Match identity server registration to the IS r0.3.0 spec + [\#3602](https://github.com/matrix-org/matrix-react-sdk/pull/3602) + * Restore thumbs after variation selector removal + [\#3600](https://github.com/matrix-org/matrix-react-sdk/pull/3600) + * Fix breadcrumbs so the bar is a toolbar and the buttons are buttons. + [\#3599](https://github.com/matrix-org/matrix-react-sdk/pull/3599) + * Now that part of spacing is padding, make it smaller when collapsed + [\#3597](https://github.com/matrix-org/matrix-react-sdk/pull/3597) + * Remove variation selectors from quick reactions + [\#3598](https://github.com/matrix-org/matrix-react-sdk/pull/3598) + * Fix linkify imports + [\#3595](https://github.com/matrix-org/matrix-react-sdk/pull/3595) + +Changes in [1.7.2](https://github.com/matrix-org/matrix-react-sdk/releases/tag/v1.7.2) (2019-11-06) +=================================================================================================== +[Full Changelog](https://github.com/matrix-org/matrix-react-sdk/compare/v1.7.1...v1.7.2) + + * Fix softcrash if editing silly events + [\#3596](https://github.com/matrix-org/matrix-react-sdk/pull/3596) + * Fix: file and notifications panel back-paginating forever. + [\#3594](https://github.com/matrix-org/matrix-react-sdk/pull/3594) + * Fix focus-within on EventTile and more showing onClick + [\#3591](https://github.com/matrix-org/matrix-react-sdk/pull/3591) + * Support RTL language in message composer + [\#3592](https://github.com/matrix-org/matrix-react-sdk/pull/3592) + * Update from Weblate + [\#3590](https://github.com/matrix-org/matrix-react-sdk/pull/3590) + * Improve A11Y of timeline. Show timestamp & Actions on focus-within + [\#3587](https://github.com/matrix-org/matrix-react-sdk/pull/3587) + * Fix SVG mask-image usage in a bunch of places for correct outlining + [\#3589](https://github.com/matrix-org/matrix-react-sdk/pull/3589) + * Handle breadcrumbs, integration manager provisioning, and allowed widgets + Riot settings + [\#3577](https://github.com/matrix-org/matrix-react-sdk/pull/3577) + * Add a prompt when interacting with an identity server without terms + [\#3582](https://github.com/matrix-org/matrix-react-sdk/pull/3582) + * Fix bug where rooms would not appear when filtering + [\#3584](https://github.com/matrix-org/matrix-react-sdk/pull/3584) + * Guard against misconfigured homeservers when adding / binding phone numbers + [\#3583](https://github.com/matrix-org/matrix-react-sdk/pull/3583) + * Fix error message which is shown when unknown slash command attempted + [\#3580](https://github.com/matrix-org/matrix-react-sdk/pull/3580) + * Attempt to fix soft crash on some pinned events by null guarding member + [\#3581](https://github.com/matrix-org/matrix-react-sdk/pull/3581) + +Changes in [1.7.1](https://github.com/matrix-org/matrix-react-sdk/releases/tag/v1.7.1) (2019-11-04) +=================================================================================================== +[Full Changelog](https://github.com/matrix-org/matrix-react-sdk/compare/v1.7.1-rc.2...v1.7.1) + + * No changes since rc.2 + +Changes in [1.7.1-rc.2](https://github.com/matrix-org/matrix-react-sdk/releases/tag/v1.7.1-rc.2) (2019-11-01) +============================================================================================================= +[Full Changelog](https://github.com/matrix-org/matrix-react-sdk/compare/v1.7.1-rc.1...v1.7.1-rc.2) + + * Fix bug where rooms would not appear when filtering + [\#3586](https://github.com/matrix-org/matrix-react-sdk/pull/3586) + +Changes in [1.7.1-rc.1](https://github.com/matrix-org/matrix-react-sdk/releases/tag/v1.7.1-rc.1) (2019-10-30) +============================================================================================================= +[Full Changelog](https://github.com/matrix-org/matrix-react-sdk/compare/v1.7.0...v1.7.1-rc.1) + + * Add ability to hide tray icon on non-Mac + [\#3573](https://github.com/matrix-org/matrix-react-sdk/pull/3573) + * Update from Weblate + [\#3579](https://github.com/matrix-org/matrix-react-sdk/pull/3579) + * Fix call state logging + [\#3578](https://github.com/matrix-org/matrix-react-sdk/pull/3578) + * Match widgets up with their integration manager + [\#3576](https://github.com/matrix-org/matrix-react-sdk/pull/3576) + * Add diagnostic log to catch events without an ID + [\#3575](https://github.com/matrix-org/matrix-react-sdk/pull/3575) + * Fix missing i18n for RoomTile ARIA labels and add a case for notif-off bold + [\#3574](https://github.com/matrix-org/matrix-react-sdk/pull/3574) + * LifeCycle onLoggedOut unmount before stopping client + [\#3566](https://github.com/matrix-org/matrix-react-sdk/pull/3566) + * Remove unneeded help about identity servers + [\#3572](https://github.com/matrix-org/matrix-react-sdk/pull/3572) + * Remove messages implying you need an identity server for email recovery + [\#3571](https://github.com/matrix-org/matrix-react-sdk/pull/3571) + * Fix quick reactions to be aligned with other emoji + [\#3570](https://github.com/matrix-org/matrix-react-sdk/pull/3570) + * If ToS gets rejected/any Scalar error then don't make Jitsi widget + [\#3569](https://github.com/matrix-org/matrix-react-sdk/pull/3569) + * Update from Weblate + [\#3568](https://github.com/matrix-org/matrix-react-sdk/pull/3568) + * Fix Room Create ELS using MXID instead of newly set Displayname/Avatar + [\#3567](https://github.com/matrix-org/matrix-react-sdk/pull/3567) + * Improve opening emoji picker performance + [\#3565](https://github.com/matrix-org/matrix-react-sdk/pull/3565) + * Update ServerTypeSelector for new matrix.org CS API URL + [\#3564](https://github.com/matrix-org/matrix-react-sdk/pull/3564) + * Accessibility Improvements + [\#3563](https://github.com/matrix-org/matrix-react-sdk/pull/3563) + * A11Y fixes in the Left Panel + [\#3562](https://github.com/matrix-org/matrix-react-sdk/pull/3562) + * Fix lint and i18n test failures + [\#3560](https://github.com/matrix-org/matrix-react-sdk/pull/3560) + * Fix: editor tests + [\#3561](https://github.com/matrix-org/matrix-react-sdk/pull/3561) + * Use Navigation Treeview pattern for RoomList Accessibility + [\#3556](https://github.com/matrix-org/matrix-react-sdk/pull/3556) + * Abort scroll updates when already unmounted + [\#3557](https://github.com/matrix-org/matrix-react-sdk/pull/3557) + * UserInfo consolidation of GroupMemberInfo and MemberInfo panels + [\#3465](https://github.com/matrix-org/matrix-react-sdk/pull/3465) + * Fix some things in the edit HTML parser + [\#3552](https://github.com/matrix-org/matrix-react-sdk/pull/3552) + * Update from Weblate + [\#3559](https://github.com/matrix-org/matrix-react-sdk/pull/3559) + * Merge end-to-end tests + [\#3537](https://github.com/matrix-org/matrix-react-sdk/pull/3537) + * Add full emoji picker for reactions + [\#3554](https://github.com/matrix-org/matrix-react-sdk/pull/3554) + * Accessibility fixes to autocomplete and tabpanels + [\#3555](https://github.com/matrix-org/matrix-react-sdk/pull/3555) + * Show warning dialog when changing unreachable IS + [\#3549](https://github.com/matrix-org/matrix-react-sdk/pull/3549) + * Fix reply fallback being included in edit m.new_content + [\#3551](https://github.com/matrix-org/matrix-react-sdk/pull/3551) + * Document composer features + [\#3548](https://github.com/matrix-org/matrix-react-sdk/pull/3548) + * Correctly update the banned users list when a user is unbanned + [\#3547](https://github.com/matrix-org/matrix-react-sdk/pull/3547) + * Summarise state events after room creation + [\#3433](https://github.com/matrix-org/matrix-react-sdk/pull/3433) + * Don't intercept TAB on the app outside of the composer, fix tabIndex > 0 + [\#3543](https://github.com/matrix-org/matrix-react-sdk/pull/3543) + * Add some type checking on event body + [\#3546](https://github.com/matrix-org/matrix-react-sdk/pull/3546) + * Fix: crash while canceling editing an event when no selection + [\#3544](https://github.com/matrix-org/matrix-react-sdk/pull/3544) + * SettingsFlag always run ToggleSwitch fully-controlled + [\#3541](https://github.com/matrix-org/matrix-react-sdk/pull/3541) + * Use Keyboard Key consts instead of hardcoded strings + [\#3540](https://github.com/matrix-org/matrix-react-sdk/pull/3540) + +Changes in [1.7.0](https://github.com/matrix-org/matrix-react-sdk/releases/tag/v1.7.0) (2019-10-18) +=================================================================================================== +[Full Changelog](https://github.com/matrix-org/matrix-react-sdk/compare/v1.7.0-rc.1...v1.7.0) + + * Upgrade to JS SDK v2.4.2 + * Fix: edit unmount when no selection + [\#3545](https://github.com/matrix-org/matrix-react-sdk/pull/3545) + * "SettingsFlag always run ToggleSwitch fully controlled" to release + [\#3542](https://github.com/matrix-org/matrix-react-sdk/pull/3542) + +Changes in [1.7.0-rc.1](https://github.com/matrix-org/matrix-react-sdk/releases/tag/v1.7.0-rc.1) (2019-10-09) +============================================================================================================= +[Full Changelog](https://github.com/matrix-org/matrix-react-sdk/compare/v1.6.2...v1.7.0-rc.1) + + * Update from Weblate + [\#3539](https://github.com/matrix-org/matrix-react-sdk/pull/3539) + * React error/warning cleanup + [\#3529](https://github.com/matrix-org/matrix-react-sdk/pull/3529) + * Add label to rageshakes for React soft crashes + [\#3535](https://github.com/matrix-org/matrix-react-sdk/pull/3535) + * Support UI Auth on adding email addresses & phone numbers + [\#3534](https://github.com/matrix-org/matrix-react-sdk/pull/3534) + * Unmount React components before stopping the client + [\#3533](https://github.com/matrix-org/matrix-react-sdk/pull/3533) + * Fix soft crash on room join + [\#3532](https://github.com/matrix-org/matrix-react-sdk/pull/3532) + * Fix: Unable to verify email address error + [\#3528](https://github.com/matrix-org/matrix-react-sdk/pull/3528) + * Fix: submit create room dialog when pressing enter + [\#3509](https://github.com/matrix-org/matrix-react-sdk/pull/3509) + * Allow cyclic objects in console logs + [\#3531](https://github.com/matrix-org/matrix-react-sdk/pull/3531) + * Fix: watch emoticon autoreplace setting + [\#3530](https://github.com/matrix-org/matrix-react-sdk/pull/3530) + * Make "remove recent messages" more robust + [\#3508](https://github.com/matrix-org/matrix-react-sdk/pull/3508) + * Label submit button in UI auth password prompt + [\#3527](https://github.com/matrix-org/matrix-react-sdk/pull/3527) + * Null-guard the recaptcha setup + [\#3526](https://github.com/matrix-org/matrix-react-sdk/pull/3526) + * Use a mask instead of an img for "Show image" eye + [\#3513](https://github.com/matrix-org/matrix-react-sdk/pull/3513) + * Only limit the rageshake log size in one place + [\#3523](https://github.com/matrix-org/matrix-react-sdk/pull/3523) + * Rename UPPER_CAMEL_CASE to UPPER_SNAKE_CASE in Coding Style + [\#3525](https://github.com/matrix-org/matrix-react-sdk/pull/3525) + * Revert "Run yarn upgrade" + [\#3524](https://github.com/matrix-org/matrix-react-sdk/pull/3524) + * Run yarn upgrade + [\#3521](https://github.com/matrix-org/matrix-react-sdk/pull/3521) + * Limit Backspace-consuming workaround to just Slate, tidy Keyboard :) + [\#3522](https://github.com/matrix-org/matrix-react-sdk/pull/3522) + * Enable CIDER composer by default + [\#3519](https://github.com/matrix-org/matrix-react-sdk/pull/3519) + * Update from Weblate + [\#3520](https://github.com/matrix-org/matrix-react-sdk/pull/3520) + * Cull some easily fixable errors which make the console a mess + [\#3516](https://github.com/matrix-org/matrix-react-sdk/pull/3516) + +Changes in [1.6.2](https://github.com/matrix-org/matrix-react-sdk/releases/tag/v1.6.2) (2019-10-04) +=================================================================================================== +[Full Changelog](https://github.com/matrix-org/matrix-react-sdk/compare/v1.6.2-rc.1...v1.6.2) + + * Handle null from TimelinePanel.getScrollState in RoomView _getScrollState + [\#3518](https://github.com/matrix-org/matrix-react-sdk/pull/3518) + * Fix Community Panel preference not taking effect until some refreshing + [\#3517](https://github.com/matrix-org/matrix-react-sdk/pull/3517) + * Fix backspace without slate focus killing everything + [\#3515](https://github.com/matrix-org/matrix-react-sdk/pull/3515) + * Fix integration manager not updating when set + [\#3510](https://github.com/matrix-org/matrix-react-sdk/pull/3510) + * Various ARIA a11y fixes. + [\#3514](https://github.com/matrix-org/matrix-react-sdk/pull/3514) + * Add a bit of debugging for where MatrixClient stops + [\#3511](https://github.com/matrix-org/matrix-react-sdk/pull/3511) + * Add error boundaries to catch rendering errors + [\#3512](https://github.com/matrix-org/matrix-react-sdk/pull/3512) + * Add an option to hide image previews + [\#3492](https://github.com/matrix-org/matrix-react-sdk/pull/3492) + * Fix: stuck tooltip with composer formatting bar + [\#3507](https://github.com/matrix-org/matrix-react-sdk/pull/3507) + * Fix: don't let composer placeholder show horizontal scrollbar when too + narrow + [\#3506](https://github.com/matrix-org/matrix-react-sdk/pull/3506) + +Changes in [1.6.2-rc.1](https://github.com/matrix-org/matrix-react-sdk/releases/tag/v1.6.2-rc.1) (2019-10-02) +============================================================================================================= +[Full Changelog](https://github.com/matrix-org/matrix-react-sdk/compare/v1.6.1...v1.6.2-rc.1) + + * Custom theming MVP + [\#3503](https://github.com/matrix-org/matrix-react-sdk/pull/3503) + * Don't mark a room as unread when someone adds an alias + [\#3505](https://github.com/matrix-org/matrix-react-sdk/pull/3505) + * Fix upgraderoom slashcommand + [\#3504](https://github.com/matrix-org/matrix-react-sdk/pull/3504) + * Update stripped emoji and bump emojidata to 4.0.2 + [\#3501](https://github.com/matrix-org/matrix-react-sdk/pull/3501) + * Support local permalinks for unfederated instances + [\#3500](https://github.com/matrix-org/matrix-react-sdk/pull/3500) + * Accessibility fixes to the LeftPanel + [\#3499](https://github.com/matrix-org/matrix-react-sdk/pull/3499) + * Make Autocomplete more accessible to screen reader users + [\#3497](https://github.com/matrix-org/matrix-react-sdk/pull/3497) + * Fix: even more resilience to detect slash commands + [\#3496](https://github.com/matrix-org/matrix-react-sdk/pull/3496) + * Fix PropTypes usage, sdk import path and GroupMemberTile letter-avatar + [\#3486](https://github.com/matrix-org/matrix-react-sdk/pull/3486) + +Changes in [1.6.1](https://github.com/matrix-org/matrix-react-sdk/releases/tag/v1.6.1) (2019-10-01) +=================================================================================================== +[Full Changelog](https://github.com/matrix-org/matrix-react-sdk/compare/v1.6.0...v1.6.1) + + * Upgrade to JS SDK 2.4.1 to ignore crypto events with empty content + * Update from Weblate + [\#3502](https://github.com/matrix-org/matrix-react-sdk/pull/3502) + * Adjust details of terms dialog + [\#3489](https://github.com/matrix-org/matrix-react-sdk/pull/3489) + * Okay -> OK + [\#3491](https://github.com/matrix-org/matrix-react-sdk/pull/3491) + * Guard against falsy names in getInitialLetter + [\#3498](https://github.com/matrix-org/matrix-react-sdk/pull/3498) + * Update from Weblate + [\#3495](https://github.com/matrix-org/matrix-react-sdk/pull/3495) + * Upgrade deps + [\#3488](https://github.com/matrix-org/matrix-react-sdk/pull/3488) + * Fix: allow mass redaction for members with same or larger power level + [\#3487](https://github.com/matrix-org/matrix-react-sdk/pull/3487) + * Truncate debug logs at the start, not the end + [\#3484](https://github.com/matrix-org/matrix-react-sdk/pull/3484) + * Fix: don't block Shift+Tab in CIDER autocomplete + [\#3481](https://github.com/matrix-org/matrix-react-sdk/pull/3481) + * Fix: make command detection more resilient + [\#3479](https://github.com/matrix-org/matrix-react-sdk/pull/3479) + +Changes in [1.6.0](https://github.com/matrix-org/matrix-react-sdk/releases/tag/v1.6.0) (2019-09-27) +=================================================================================================== +[Full Changelog](https://github.com/matrix-org/matrix-react-sdk/compare/v1.6.0-rc.2...v1.6.0) + + * Upgrade to JS SDK 2.4.0 + * Improve keyboard/screen reader accesibility some more + [\#3483](https://github.com/matrix-org/matrix-react-sdk/pull/3483) + +Changes in [1.6.0-rc.2](https://github.com/matrix-org/matrix-react-sdk/releases/tag/v1.6.0-rc.2) (2019-09-26) +============================================================================================================= +[Full Changelog](https://github.com/matrix-org/matrix-react-sdk/compare/v1.6.0-rc.1...v1.6.0-rc.2) + + * Settings a11y tweaks + [\#3475](https://github.com/matrix-org/matrix-react-sdk/pull/3475) + +Changes in [1.6.0-rc.1](https://github.com/matrix-org/matrix-react-sdk/releases/tag/v1.6.0-rc.1) (2019-09-25) +============================================================================================================= +[Full Changelog](https://github.com/matrix-org/matrix-react-sdk/compare/v1.5.3...v1.6.0-rc.1) + + * Upgrade to JS SDK 2.4.0-rc.1 + * Update from Weblate + [\#3480](https://github.com/matrix-org/matrix-react-sdk/pull/3480) + * Fix: latin input through Chinese IME + [\#3477](https://github.com/matrix-org/matrix-react-sdk/pull/3477) + * Move focus to first field in create room dialog when showing + [\#3478](https://github.com/matrix-org/matrix-react-sdk/pull/3478) + * Send MSISDN validation token to submit_url during registration + [\#3476](https://github.com/matrix-org/matrix-react-sdk/pull/3476) + * Hide browser a11y outline on context menus + [\#3474](https://github.com/matrix-org/matrix-react-sdk/pull/3474) + * Remove id_server param from threepid_creds + [\#3473](https://github.com/matrix-org/matrix-react-sdk/pull/3473) + * Fix: make sure client exists while logging out + [\#3472](https://github.com/matrix-org/matrix-react-sdk/pull/3472) + * Fix: hide details summary arrow in create room dialog on webkit too + [\#3470](https://github.com/matrix-org/matrix-react-sdk/pull/3470) + * put the room name in the title tag + [\#3471](https://github.com/matrix-org/matrix-react-sdk/pull/3471) + * Fix: when using autocomplete, ensure command is not sent as text, and @room + notifs gets needed suffix + [\#3468](https://github.com/matrix-org/matrix-react-sdk/pull/3468) + * Fix: paragraphs not being preserved when editing in CIDER + [\#3469](https://github.com/matrix-org/matrix-react-sdk/pull/3469) + * Fix: formatbar appearing below other elements + [\#3467](https://github.com/matrix-org/matrix-react-sdk/pull/3467) + * Use alternate MSISDN submit URL when returned by HS + [\#3466](https://github.com/matrix-org/matrix-react-sdk/pull/3466) + * FTUE: Create Room Dialog update + [\#3464](https://github.com/matrix-org/matrix-react-sdk/pull/3464) + * Use separate 3PID add and bind flow for supporting HSes + [\#3462](https://github.com/matrix-org/matrix-react-sdk/pull/3462) + * Add roomavatar slash command to set avatar of the current room + [\#3460](https://github.com/matrix-org/matrix-react-sdk/pull/3460) + * Don't show spinner if registration is disabled + [\#3458](https://github.com/matrix-org/matrix-react-sdk/pull/3458) + * Use same initial device name rules for SSO login as password login + [\#3457](https://github.com/matrix-org/matrix-react-sdk/pull/3457) + * Fix disabled save button on message editor when pasting + [\#3459](https://github.com/matrix-org/matrix-react-sdk/pull/3459) + * Some delinting + [\#3456](https://github.com/matrix-org/matrix-react-sdk/pull/3456) + * Fix failure to render newly verified phone number and nested forms + [\#3455](https://github.com/matrix-org/matrix-react-sdk/pull/3455) + * Focus context menus so screen readers can find them + [\#3454](https://github.com/matrix-org/matrix-react-sdk/pull/3454) + * Fix unit tests: Use correct ShallowRenderer and updated lolex + [\#3453](https://github.com/matrix-org/matrix-react-sdk/pull/3453) + * make the lifetimes of the RM configurable + [\#3450](https://github.com/matrix-org/matrix-react-sdk/pull/3450) + * Point to develop dependencies and fixed react-gemini-scrollbar + [\#3451](https://github.com/matrix-org/matrix-react-sdk/pull/3451) + * Fix address type props to state conversion + [\#3449](https://github.com/matrix-org/matrix-react-sdk/pull/3449) + * Only put a room in Historical if === 'leave' not peeked + [\#3445](https://github.com/matrix-org/matrix-react-sdk/pull/3445) + * Reuse showRoom for onJoinClick so we join using alias if its available + [\#3444](https://github.com/matrix-org/matrix-react-sdk/pull/3444) + * Fix: make sure scalarUrls is never undefined + [\#3446](https://github.com/matrix-org/matrix-react-sdk/pull/3446) + * Tweak lock file to pull in only one React version + [\#3447](https://github.com/matrix-org/matrix-react-sdk/pull/3447) + * Wrap deactivation check with sanity conditions + [\#3437](https://github.com/matrix-org/matrix-react-sdk/pull/3437) + * Fix identity server text in AddressPickerDialog + [\#3408](https://github.com/matrix-org/matrix-react-sdk/pull/3408) + * Change copy for sharing an email + [\#3438](https://github.com/matrix-org/matrix-react-sdk/pull/3438) + * Fix: stop propagation click handler for doesn't run + [\#3441](https://github.com/matrix-org/matrix-react-sdk/pull/3441) + * Fix: clicking on a room directory item takes you to the room + [\#3439](https://github.com/matrix-org/matrix-react-sdk/pull/3439) + * Fix: only hide clear filter button when blurred & no more search term + [\#3432](https://github.com/matrix-org/matrix-react-sdk/pull/3432) + * Dont wrap text in room directory buttons + [\#3430](https://github.com/matrix-org/matrix-react-sdk/pull/3430) + * Add way to report the content of a message + [\#3290](https://github.com/matrix-org/matrix-react-sdk/pull/3290) + * Breadcrumbs: only show after having joined at least 10 rooms + [\#3428](https://github.com/matrix-org/matrix-react-sdk/pull/3428) + * Breadcrumbs: show placeholder for empty slot + [\#3429](https://github.com/matrix-org/matrix-react-sdk/pull/3429) + * Hide the change HS url button on SSO login flow if custom urls disabled + [\#3421](https://github.com/matrix-org/matrix-react-sdk/pull/3421) + * Fix register page selector buttons growing too wide + [\#3423](https://github.com/matrix-org/matrix-react-sdk/pull/3423) + * Left panel: visual fixes + [\#3422](https://github.com/matrix-org/matrix-react-sdk/pull/3422) + * EditMessageComposer: disable Save button until a change has been made + [\#3410](https://github.com/matrix-org/matrix-react-sdk/pull/3410) + * RoomDirectory: show spinner if loading more results + [\#3416](https://github.com/matrix-org/matrix-react-sdk/pull/3416) + * SSO Login: don't assume m.login.password, ask server before showing + [\#3417](https://github.com/matrix-org/matrix-react-sdk/pull/3417) + * Switch to React 16 + [\#3270](https://github.com/matrix-org/matrix-react-sdk/pull/3270) + * Fix replying from search results for this and all rooms + [\#3406](https://github.com/matrix-org/matrix-react-sdk/pull/3406) + * Support Synapse deactivate on MemberInfo without Room (timeline pill) + [\#3411](https://github.com/matrix-org/matrix-react-sdk/pull/3411) + * Lift 3PID state management up to Settings tab + [\#3419](https://github.com/matrix-org/matrix-react-sdk/pull/3419) + * Room directory: update design + [\#3418](https://github.com/matrix-org/matrix-react-sdk/pull/3418) + * Room directory: add action buttons on room directly + [\#3413](https://github.com/matrix-org/matrix-react-sdk/pull/3413) + * Add explore button in left panel to go show room directory + [\#3412](https://github.com/matrix-org/matrix-react-sdk/pull/3412) + * Only update m.accepted_terms if there were changes + [\#3415](https://github.com/matrix-org/matrix-react-sdk/pull/3415) + * Make uses of AddressPickerDialog static dialogs + [\#3414](https://github.com/matrix-org/matrix-react-sdk/pull/3414) + * Support sending hidden read receipts + [\#3395](https://github.com/matrix-org/matrix-react-sdk/pull/3395) + * Catch error from changing room power level requirements and show modal + [\#3407](https://github.com/matrix-org/matrix-react-sdk/pull/3407) + * Add "Remove recent messages" button in member info for administrator + [\#3409](https://github.com/matrix-org/matrix-react-sdk/pull/3409) + * Add bound 3PID warning when changing IS as well + [\#3394](https://github.com/matrix-org/matrix-react-sdk/pull/3394) + * Stregthen bound 3PID warning dialog + [\#3401](https://github.com/matrix-org/matrix-react-sdk/pull/3401) + * Stop setting IS input field on account change + [\#3398](https://github.com/matrix-org/matrix-react-sdk/pull/3398) + * New composer: use underscore for italics so it doesn't collide with bold + when toggling + [\#3403](https://github.com/matrix-org/matrix-react-sdk/pull/3403) + * Switch to createReactClass: views/elements & views/groups. React 16 :D + [\#3404](https://github.com/matrix-org/matrix-react-sdk/pull/3404) + * Switch to createReactClass: *everything else*. React 16 :D + [\#3405](https://github.com/matrix-org/matrix-react-sdk/pull/3405) + * Switch to createReactClass: views/rooms and test/components. React 16 :D + [\#3400](https://github.com/matrix-org/matrix-react-sdk/pull/3400) + * New composer: support toggling inline formatting + [\#3402](https://github.com/matrix-org/matrix-react-sdk/pull/3402) + * Fix format bar not appearing in edit composer + [\#3399](https://github.com/matrix-org/matrix-react-sdk/pull/3399) + * Correct case of propTypes property in ES6 React Components. React 16 + [\#3397](https://github.com/matrix-org/matrix-react-sdk/pull/3397) + * Fix error on load in composer + [\#3396](https://github.com/matrix-org/matrix-react-sdk/pull/3396) + * New composer: ensure undo history is persisted before applying formatting + [\#3391](https://github.com/matrix-org/matrix-react-sdk/pull/3391) + * New composer: fix pasting from word processors + [\#3392](https://github.com/matrix-org/matrix-react-sdk/pull/3392) + * New composer: fix needing to push arrow-up twice after sending first message + after switching to a room + [\#3393](https://github.com/matrix-org/matrix-react-sdk/pull/3393) + * Remove accent color as selection color + [\#3390](https://github.com/matrix-org/matrix-react-sdk/pull/3390) + * New composer: formatting keyboard shortcuts + [\#3389](https://github.com/matrix-org/matrix-react-sdk/pull/3389) + * New composer: format bar tooltips + [\#3387](https://github.com/matrix-org/matrix-react-sdk/pull/3387) + * New composer: show format bar on selection + [\#3386](https://github.com/matrix-org/matrix-react-sdk/pull/3386) + * Add new agreed URLs to account data instead of overwriting + [\#3388](https://github.com/matrix-org/matrix-react-sdk/pull/3388) + * Fix member power levels in room settings + [\#3384](https://github.com/matrix-org/matrix-react-sdk/pull/3384) + * New composer: allow escaping the first slash to not write a command + [\#3382](https://github.com/matrix-org/matrix-react-sdk/pull/3382) + * /plain command to bypass markdown conversion + [\#3381](https://github.com/matrix-org/matrix-react-sdk/pull/3381) + * Improve email invite preview messaging + [\#3385](https://github.com/matrix-org/matrix-react-sdk/pull/3385) + * Revert "New composer: show markdown legend on focus" + [\#3383](https://github.com/matrix-org/matrix-react-sdk/pull/3383) + * Disable MSISDN registration if the homeserver doesn't support it + [\#3368](https://github.com/matrix-org/matrix-react-sdk/pull/3368) + * Add a button to MemberInfo to deactivate a user + [\#3371](https://github.com/matrix-org/matrix-react-sdk/pull/3371) + * New composer: show markdown legend on focus + [\#3378](https://github.com/matrix-org/matrix-react-sdk/pull/3378) + * New composer: allow submitting after inserting newline + [\#3380](https://github.com/matrix-org/matrix-react-sdk/pull/3380) + * Message editing: deserialize headers from html back to markdown + [\#3379](https://github.com/matrix-org/matrix-react-sdk/pull/3379) + * New composer: share user pill postfix between autocomplete and insert + mention + [\#3375](https://github.com/matrix-org/matrix-react-sdk/pull/3375) + * New composer: make command detection not break with pill candidates in + command + [\#3374](https://github.com/matrix-org/matrix-react-sdk/pull/3374) + * New composer: dont allow sending empty messages + [\#3377](https://github.com/matrix-org/matrix-react-sdk/pull/3377) + * New composer: disable spell check for pills + [\#3376](https://github.com/matrix-org/matrix-react-sdk/pull/3376) + * Restrict green link colours to address picker dialog + [\#3373](https://github.com/matrix-org/matrix-react-sdk/pull/3373) + * New composer: fix tab-complete in commands + [\#3372](https://github.com/matrix-org/matrix-react-sdk/pull/3372) + * Add a dialog when inviting via slash command without IS + [\#3367](https://github.com/matrix-org/matrix-react-sdk/pull/3367) + * Migrate away from React.createClass for auth and views/auth. React 16 :D + [\#3363](https://github.com/matrix-org/matrix-react-sdk/pull/3363) + * Migrate away from React.createClass for non-auth structures. React 16 :D + [\#3365](https://github.com/matrix-org/matrix-react-sdk/pull/3365) + * New composer: put display name in user pill text fallback instead of mxid + [\#3366](https://github.com/matrix-org/matrix-react-sdk/pull/3366) + * New composer: force model update after IME composition finishes + [\#3364](https://github.com/matrix-org/matrix-react-sdk/pull/3364) + * New composer: append colon to completed user pill when at start of message + [\#3361](https://github.com/matrix-org/matrix-react-sdk/pull/3361) + * Expose power level toggle for enabling e2ee to room settings + [\#3351](https://github.com/matrix-org/matrix-react-sdk/pull/3351) + * Allow connecting to an IS from address picker + [\#3359](https://github.com/matrix-org/matrix-react-sdk/pull/3359) + * New composer: don't capture enter to close autocomplete + [\#3362](https://github.com/matrix-org/matrix-react-sdk/pull/3362) + * Add Spoilers as per MSC2010 + [\#3018](https://github.com/matrix-org/matrix-react-sdk/pull/3018) + * New composer: support pasting files + [\#3358](https://github.com/matrix-org/matrix-react-sdk/pull/3358) + * New composer: don't update model while doing IME compositions + [\#3357](https://github.com/matrix-org/matrix-react-sdk/pull/3357) + * New composer: handle newlines properly when pasting + [\#3356](https://github.com/matrix-org/matrix-react-sdk/pull/3356) + * Bump eslint-utils from 1.4.0 to 1.4.2 + [\#3360](https://github.com/matrix-org/matrix-react-sdk/pull/3360) + * Reveal custom IS field only when required + [\#3343](https://github.com/matrix-org/matrix-react-sdk/pull/3343) + * Only Destroy the expected persistent widget, not *ANY* + [\#3338](https://github.com/matrix-org/matrix-react-sdk/pull/3338) + * Expose upgrade room permissions in room settings and fix command + [\#3352](https://github.com/matrix-org/matrix-react-sdk/pull/3352) + * Don't use cursor: pointer on roomsettings avatar if you can't change it + [\#3354](https://github.com/matrix-org/matrix-react-sdk/pull/3354) + * New composer: support forcing auto complete on name by hitting tab + [\#3349](https://github.com/matrix-org/matrix-react-sdk/pull/3349) + * Update email help text + [\#3355](https://github.com/matrix-org/matrix-react-sdk/pull/3355) + * Don't infinite loop on server change + [\#3350](https://github.com/matrix-org/matrix-react-sdk/pull/3350) + * Support multiple integration managers behind a labs flag + [\#3341](https://github.com/matrix-org/matrix-react-sdk/pull/3341) + * Support homeserver-configured integration managers + [\#3340](https://github.com/matrix-org/matrix-react-sdk/pull/3340) + * Auto-replace emoticons with emojis in new composer + [\#3342](https://github.com/matrix-org/matrix-react-sdk/pull/3342) + * Adjust copy and include identity server changing when terms are pending + [\#3348](https://github.com/matrix-org/matrix-react-sdk/pull/3348) + * Migrate away from React.createClass for views/dialogs. React 16 :D + [\#3347](https://github.com/matrix-org/matrix-react-sdk/pull/3347) + * Migrate away from React.createClass for async-components. React 16 :D + [\#3346](https://github.com/matrix-org/matrix-react-sdk/pull/3346) + * Switch from react-addons-test-utils to react-dom/test-utils. React 16 :D + [\#3345](https://github.com/matrix-org/matrix-react-sdk/pull/3345) + * Iterate over all instances of variable/tag for _t substitutions + [\#3339](https://github.com/matrix-org/matrix-react-sdk/pull/3339) + * Treat 404 errors on IS as having no terms + [\#3344](https://github.com/matrix-org/matrix-react-sdk/pull/3344) + * Add IS access token callback + [\#3337](https://github.com/matrix-org/matrix-react-sdk/pull/3337) + * Tweak rageshake logging messages + [\#3331](https://github.com/matrix-org/matrix-react-sdk/pull/3331) + * Support editing composer to be used as main composer (feature flagged) + [\#3287](https://github.com/matrix-org/matrix-react-sdk/pull/3287) + * Remove tooltipClassName from the Field's input + [\#3333](https://github.com/matrix-org/matrix-react-sdk/pull/3333) + * Fix alignment of discovery section addresses + [\#3335](https://github.com/matrix-org/matrix-react-sdk/pull/3335) + * No-op removals of widgets that don't exist + [\#3336](https://github.com/matrix-org/matrix-react-sdk/pull/3336) + * Remove extraneous logging + [\#3334](https://github.com/matrix-org/matrix-react-sdk/pull/3334) + * Handle terms agreement in Discovery section of user settings + [\#3327](https://github.com/matrix-org/matrix-react-sdk/pull/3327) + * Don't double translate labs settings + [\#3332](https://github.com/matrix-org/matrix-react-sdk/pull/3332) + * Explicitly check for modifier keydown events before focusing composer + [\#3328](https://github.com/matrix-org/matrix-react-sdk/pull/3328) + * Touch up settings: alignment, spacing, error states + [\#3330](https://github.com/matrix-org/matrix-react-sdk/pull/3330) + * Fix regression on widget panel edit button + [\#3329](https://github.com/matrix-org/matrix-react-sdk/pull/3329) + * Clarify that device names are publicly visible + [\#3326](https://github.com/matrix-org/matrix-react-sdk/pull/3326) + * Tweak privacy settings copy and whitespace + [\#3325](https://github.com/matrix-org/matrix-react-sdk/pull/3325) + * Persist and maintain identity server in account data + [\#3320](https://github.com/matrix-org/matrix-react-sdk/pull/3320) + * Prompt for terms of service on identity server changes + [\#3317](https://github.com/matrix-org/matrix-react-sdk/pull/3317) + * Allow 3pids to be added with no ID server set + [\#3323](https://github.com/matrix-org/matrix-react-sdk/pull/3323) + * Fix up remove threepid confirmation UX + [\#3324](https://github.com/matrix-org/matrix-react-sdk/pull/3324) + * Improve Discovery section when no IS set + [\#3322](https://github.com/matrix-org/matrix-react-sdk/pull/3322) + * Allow password reset without an ID Server + [\#3319](https://github.com/matrix-org/matrix-react-sdk/pull/3319) + * Allow registering with email if no ID Server + [\#3318](https://github.com/matrix-org/matrix-react-sdk/pull/3318) + * Update from Weblate + [\#3321](https://github.com/matrix-org/matrix-react-sdk/pull/3321) + * Fix showing events which were replied to and then redacted + [\#3310](https://github.com/matrix-org/matrix-react-sdk/pull/3310) + * Prompt for terms of service on integration manager changes + [\#3316](https://github.com/matrix-org/matrix-react-sdk/pull/3316) + * Warn on disconnecting from IS + [\#3314](https://github.com/matrix-org/matrix-react-sdk/pull/3314) + * Fix set integration manager tooltip + [\#3315](https://github.com/matrix-org/matrix-react-sdk/pull/3315) + * Prompt for ICE server fallback permission + [\#3309](https://github.com/matrix-org/matrix-react-sdk/pull/3309) + * Fix Persisted Widgets (Jitsi) randomly closing on room change + [\#3313](https://github.com/matrix-org/matrix-react-sdk/pull/3313) + * Verifying your own device should not ask you to "contact its owner" + [\#3312](https://github.com/matrix-org/matrix-react-sdk/pull/3312) + * Support changing your integration manager in the UI + [\#3308](https://github.com/matrix-org/matrix-react-sdk/pull/3308) + * delint languageHandler + [\#3311](https://github.com/matrix-org/matrix-react-sdk/pull/3311) + * Disconnect from IS Button + [\#3305](https://github.com/matrix-org/matrix-react-sdk/pull/3305) + * Add UI in settings to change ID Server + [\#3300](https://github.com/matrix-org/matrix-react-sdk/pull/3300) + * Read integration managers from account data (widgets) + [\#3302](https://github.com/matrix-org/matrix-react-sdk/pull/3302) + * Refactor integration manager handling into a common place + [\#3301](https://github.com/matrix-org/matrix-react-sdk/pull/3301) + * Fix wrong default-letter-avatar for RoomAvatarEvent + [\#3291](https://github.com/matrix-org/matrix-react-sdk/pull/3291) + * Fix alignment of add email/phone number inputs in settings + [\#3307](https://github.com/matrix-org/matrix-react-sdk/pull/3307) + * Bump matrix-react-test-utils for React 16 compatibility + [\#3306](https://github.com/matrix-org/matrix-react-sdk/pull/3306) + * Consolidate Themes into ThemeController. Remove hardcoded themes in view + [\#3304](https://github.com/matrix-org/matrix-react-sdk/pull/3304) + * Deduplicate code in ModularServerConfig by extending ServerConfig + [\#3303](https://github.com/matrix-org/matrix-react-sdk/pull/3303) + * RegistrationForm: the Fields are controlled, fix default values + [\#3299](https://github.com/matrix-org/matrix-react-sdk/pull/3299) + * change Modal async/await signature to use raw promises + [\#3298](https://github.com/matrix-org/matrix-react-sdk/pull/3298) + * Modal.createX return thenable which extends onFinished, for async/await + [\#3297](https://github.com/matrix-org/matrix-react-sdk/pull/3297) + * Add mount-guards to MImageBody + [\#3294](https://github.com/matrix-org/matrix-react-sdk/pull/3294) + * Get rid of support for legacy login params + [\#3296](https://github.com/matrix-org/matrix-react-sdk/pull/3296) + * Change throttle to debounce + [\#3295](https://github.com/matrix-org/matrix-react-sdk/pull/3295) + * Misc fixes to karma webpack + [\#3293](https://github.com/matrix-org/matrix-react-sdk/pull/3293) + * Remove 3PID binding during registration + [\#3289](https://github.com/matrix-org/matrix-react-sdk/pull/3289) + * Add controls for toggling discovery in user settings + [\#3288](https://github.com/matrix-org/matrix-react-sdk/pull/3288) + * Reuse DMs whenever possible instead of asking to reuse them + [\#3286](https://github.com/matrix-org/matrix-react-sdk/pull/3286) + * Work with no ID server set + [\#3285](https://github.com/matrix-org/matrix-react-sdk/pull/3285) + * Split MessageEditor up in edit-specifics & reusable parts for main composer + [\#3282](https://github.com/matrix-org/matrix-react-sdk/pull/3282) + * Fix waste of space of collapsed left panel + [\#2668](https://github.com/matrix-org/matrix-react-sdk/pull/2668) + * Add help slash command + [\#3257](https://github.com/matrix-org/matrix-react-sdk/pull/3257) + * Allow setting in electron whether or not to auto hide menu bar + [\#3278](https://github.com/matrix-org/matrix-react-sdk/pull/3278) + * Progress towards React 16 compatibility + [\#3276](https://github.com/matrix-org/matrix-react-sdk/pull/3276) + * Hide settings button on Room Tile Context Menu for myMembership=invite + [\#3284](https://github.com/matrix-org/matrix-react-sdk/pull/3284) + * Remove withMatrixClient as we are committed to using Contexts + [\#3279](https://github.com/matrix-org/matrix-react-sdk/pull/3279) + * Update existing 3PID management UX + [\#3283](https://github.com/matrix-org/matrix-react-sdk/pull/3283) + * Let user know their account has been deactivated upon trying to login + [\#3280](https://github.com/matrix-org/matrix-react-sdk/pull/3280) + * Fix newline not being appended to code block while converting message to + markdown + [\#3274](https://github.com/matrix-org/matrix-react-sdk/pull/3274) + * Don't load guest sessions on post-registration login link + [\#3273](https://github.com/matrix-org/matrix-react-sdk/pull/3273) + * Show terms modal when inviting by email + [\#3271](https://github.com/matrix-org/matrix-react-sdk/pull/3271) + * Add developer documentation for the new editor + [\#3272](https://github.com/matrix-org/matrix-react-sdk/pull/3272) + * Undo/redo support for new editor + [\#3267](https://github.com/matrix-org/matrix-react-sdk/pull/3267) + * Check IS v2 account tokens for validity + [\#3268](https://github.com/matrix-org/matrix-react-sdk/pull/3268) + * Fix dialog button border colours + [\#3269](https://github.com/matrix-org/matrix-react-sdk/pull/3269) + * Upgrade dependencies + [\#3266](https://github.com/matrix-org/matrix-react-sdk/pull/3266) + +Changes in [1.5.3](https://github.com/matrix-org/matrix-react-sdk/releases/tag/v1.5.3) (2019-09-16) +=================================================================================================== +[Full Changelog](https://github.com/matrix-org/matrix-react-sdk/compare/v1.5.3-rc.3...v1.5.3) + + * Release: Directory should use the alias or server information to join the + room + [\#3448](https://github.com/matrix-org/matrix-react-sdk/pull/3448) + +Changes in [1.5.3-rc.3](https://github.com/matrix-org/matrix-react-sdk/releases/tag/v1.5.3-rc.3) (2019-09-13) +============================================================================================================= +[Full Changelog](https://github.com/matrix-org/matrix-react-sdk/compare/v1.5.3-rc.2...v1.5.3-rc.3) + + * js-sdk rc.1 for report API + +Changes in [1.5.3-rc.2](https://github.com/matrix-org/matrix-react-sdk/releases/tag/v1.5.3-rc.2) (2019-09-13) +============================================================================================================= +[Full Changelog](https://github.com/matrix-org/matrix-react-sdk/compare/v1.5.3-rc.1...v1.5.3-rc.2) + + * Fix: stop propagation click handler for doesn't run + [\#3443](https://github.com/matrix-org/matrix-react-sdk/pull/3443) + * Add way to report the content of a message + [\#3442](https://github.com/matrix-org/matrix-react-sdk/pull/3442) + * Fix synapse deactivate button for release + [\#3436](https://github.com/matrix-org/matrix-react-sdk/pull/3436) + * Fix: clicking on a room directory item takes you to the room + [\#3440](https://github.com/matrix-org/matrix-react-sdk/pull/3440) + +Changes in [1.5.3-rc.1](https://github.com/matrix-org/matrix-react-sdk/releases/tag/v1.5.3-rc.1) (2019-09-12) +============================================================================================================= +[Full Changelog](https://github.com/matrix-org/matrix-react-sdk/compare/v1.5.2...v1.5.3-rc.1) + + * Fix: only hide clear filter button when blurred & no more search term + [\#3435](https://github.com/matrix-org/matrix-react-sdk/pull/3435) + * Dont wrap text in room directory buttons + [\#3434](https://github.com/matrix-org/matrix-react-sdk/pull/3434) + +Changes in [1.5.2](https://github.com/matrix-org/matrix-react-sdk/releases/tag/v1.5.2) (2019-09-12) +=================================================================================================== +[Full Changelog](https://github.com/matrix-org/matrix-react-sdk/compare/v1.5.2-rc.1...v1.5.2) + + * Fix register page selector buttons growing too wide + [\#3427](https://github.com/matrix-org/matrix-react-sdk/pull/3427) + * Left panel: visual fixes + [\#3426](https://github.com/matrix-org/matrix-react-sdk/pull/3426) + * Hide the change HS url button on SSO login flow if custom urls disabled + [\#3425](https://github.com/matrix-org/matrix-react-sdk/pull/3425) + * RoomDirectory: show spinner if loading more results + [\#3424](https://github.com/matrix-org/matrix-react-sdk/pull/3424) + +Changes in [1.5.2-rc.1](https://github.com/matrix-org/matrix-react-sdk/releases/tag/v1.5.2-rc.1) (2019-09-11) +============================================================================================================= +[Full Changelog](https://github.com/matrix-org/matrix-react-sdk/compare/v1.5.1...v1.5.2-rc.1) + + * Merge first pass of First Time User Experience to release branch + [\#3420](https://github.com/matrix-org/matrix-react-sdk/pull/3420) + +Changes in [1.5.1](https://github.com/matrix-org/matrix-react-sdk/releases/tag/v1.5.1) (2019-08-05) +=================================================================================================== +[Full Changelog](https://github.com/matrix-org/matrix-react-sdk/compare/v1.5.0-rc.1...v1.5.1) + + * Let user know their account has been deactivated upon trying to login + [\#3281](https://github.com/matrix-org/matrix-react-sdk/pull/3281) + +Changes in [1.5.0](https://github.com/matrix-org/matrix-react-sdk/releases/tag/v1.5.0) (2019-08-05) +=================================================================================================== +[Full Changelog](https://github.com/matrix-org/matrix-react-sdk/compare/v1.5.0-rc.1...v1.5.0) + + * Don't load guest sessions on post-registration login link + [\#3277](https://github.com/matrix-org/matrix-react-sdk/pull/3277) + +Changes in [1.5.0-rc.1](https://github.com/matrix-org/matrix-react-sdk/releases/tag/v1.5.0-rc.1) (2019-07-31) +============================================================================================================= +[Full Changelog](https://github.com/matrix-org/matrix-react-sdk/compare/v1.4.0...v1.5.0-rc.1) + + * Upgrade to JS SDK 2.3.0-rc.1 + * Update from Weblate + [\#3265](https://github.com/matrix-org/matrix-react-sdk/pull/3265) + * Replace React.PropTypes with usage of the `prop-types` package + [\#3263](https://github.com/matrix-org/matrix-react-sdk/pull/3263) + * strikethrough & underline deletions & insertions + [\#3264](https://github.com/matrix-org/matrix-react-sdk/pull/3264) + * Get rid of warning of required prop + [\#3261](https://github.com/matrix-org/matrix-react-sdk/pull/3261) + * Fix html diffs repeating text sometimes + [\#3262](https://github.com/matrix-org/matrix-react-sdk/pull/3262) + * Introduce RoomContext for sharing state between RoomView and children + [\#3260](https://github.com/matrix-org/matrix-react-sdk/pull/3260) + * Upgrade emojibase to fix :anxious: + [\#3259](https://github.com/matrix-org/matrix-react-sdk/pull/3259) + * Add support for IS v2 API with authentication + [\#3256](https://github.com/matrix-org/matrix-react-sdk/pull/3256) + * Fix autocomplete for editing being broken + [\#3258](https://github.com/matrix-org/matrix-react-sdk/pull/3258) + * Unit tests for new editor + [\#3247](https://github.com/matrix-org/matrix-react-sdk/pull/3247) + * Show MessageActionBar buttons conditionally on room state permissions + [\#3255](https://github.com/matrix-org/matrix-react-sdk/pull/3255) + * Handle onPaste AddressPickerDialog, allow addressing CSV/NL/Space delim list + [\#3249](https://github.com/matrix-org/matrix-react-sdk/pull/3249) + * Move history with alt up/down regardless of where selection is + [\#3254](https://github.com/matrix-org/matrix-react-sdk/pull/3254) + * Update from Weblate + [\#3253](https://github.com/matrix-org/matrix-react-sdk/pull/3253) + * Fix /rainbowme and /rainbow breaking apart utf-16 emoji + [\#3248](https://github.com/matrix-org/matrix-react-sdk/pull/3248) + * Tweak interactive tooltip buffer area allow for overshoot + [\#3245](https://github.com/matrix-org/matrix-react-sdk/pull/3245) + * Keep widget URL in permission screen to one line + [\#3243](https://github.com/matrix-org/matrix-react-sdk/pull/3243) + * Avoid visual glitch when terms appear for Integration Manager + [\#3242](https://github.com/matrix-org/matrix-react-sdk/pull/3242) + * Show diff for formatted messages in the edit history + [\#3244](https://github.com/matrix-org/matrix-react-sdk/pull/3244) + * Redirect paste to composer when event target can't receive input + [\#3239](https://github.com/matrix-org/matrix-react-sdk/pull/3239) + * Restore manual composing focusing logic + [\#3241](https://github.com/matrix-org/matrix-react-sdk/pull/3241) + * ToS for ISes/IMs: prompt on use screen + [\#3199](https://github.com/matrix-org/matrix-react-sdk/pull/3199) + * Defer IM token until widget is shown and permission granted + [\#3240](https://github.com/matrix-org/matrix-react-sdk/pull/3240) + * Move read marker past invisible events + [\#3226](https://github.com/matrix-org/matrix-react-sdk/pull/3226) + * Basic diff visualisation for plain text edits + [\#3238](https://github.com/matrix-org/matrix-react-sdk/pull/3238) + * Don't focus composer on keydown with modifier + [\#3237](https://github.com/matrix-org/matrix-react-sdk/pull/3237) + * Focus composer when typing anywhere in the app + [\#3224](https://github.com/matrix-org/matrix-react-sdk/pull/3224) + * Don't show remove button for original event in edit history + [\#3235](https://github.com/matrix-org/matrix-react-sdk/pull/3235) + * Remove feature flags for reactions and edits + [\#3233](https://github.com/matrix-org/matrix-react-sdk/pull/3233) + * Enable reactions and edits by default + [\#3229](https://github.com/matrix-org/matrix-react-sdk/pull/3229) + * Improve interactive tooltip safe mousing area + [\#3228](https://github.com/matrix-org/matrix-react-sdk/pull/3228) + * Add a previous event safe area around action bar + [\#3227](https://github.com/matrix-org/matrix-react-sdk/pull/3227) + * Parse integration manager origins more sensibly + [\#3217](https://github.com/matrix-org/matrix-react-sdk/pull/3217) + * ChatCreateOrReuse show only rooms both you and the other party still in + [\#3225](https://github.com/matrix-org/matrix-react-sdk/pull/3225) + * Check for liveliness on submission when the server was previously dead + [\#3218](https://github.com/matrix-org/matrix-react-sdk/pull/3218) + * Fix autocomplete delay text field not accepting text + [\#3219](https://github.com/matrix-org/matrix-react-sdk/pull/3219) + * Don't show a reason if there's no reason for a kick/ban + [\#3220](https://github.com/matrix-org/matrix-react-sdk/pull/3220) + * Take adjacent invisible events into account for read receipt, even if any + but first should be ignored. + [\#3221](https://github.com/matrix-org/matrix-react-sdk/pull/3221) + * Check content and content.users in power levels + [\#3216](https://github.com/matrix-org/matrix-react-sdk/pull/3216) + * Autojoin rooms when clicking the tombstone + [\#3206](https://github.com/matrix-org/matrix-react-sdk/pull/3206) + * Verify i18n in CI + [\#3209](https://github.com/matrix-org/matrix-react-sdk/pull/3209) + * Send the correct UIA alongside the wrong UIA for backwards comaptibility + [\#3211](https://github.com/matrix-org/matrix-react-sdk/pull/3211) + * Remove unused identityEnabled property from ValidatedServerConfig + [\#3213](https://github.com/matrix-org/matrix-react-sdk/pull/3213) + * Remove misleading text about admins logging people out from soft logout + [\#3205](https://github.com/matrix-org/matrix-react-sdk/pull/3205) + +Changes in [1.4.0](https://github.com/matrix-org/matrix-react-sdk/releases/tag/v1.4.0) (2019-07-18) +=================================================================================================== +[Full Changelog](https://github.com/matrix-org/matrix-react-sdk/compare/v1.4.0-rc.3...v1.4.0) + + * Upgrade to JS SDK 2.2.0 + * Don't show remove button for original event in edit history + [\#3236](https://github.com/matrix-org/matrix-react-sdk/pull/3236) + * Remove feature flags for reactions and edits + [\#3234](https://github.com/matrix-org/matrix-react-sdk/pull/3234) + * Enable reactions and edits by default + [\#3232](https://github.com/matrix-org/matrix-react-sdk/pull/3232) + * Improve interactive tooltip safe mousing area + [\#3231](https://github.com/matrix-org/matrix-react-sdk/pull/3231) + * Add a previous event safe area around action bar + [\#3230](https://github.com/matrix-org/matrix-react-sdk/pull/3230) + +Changes in [1.4.0-rc.3](https://github.com/matrix-org/matrix-react-sdk/releases/tag/v1.4.0-rc.3) (2019-07-15) +============================================================================================================= +[Full Changelog](https://github.com/matrix-org/matrix-react-sdk/compare/v1.4.0-rc.2...v1.4.0-rc.3) + + * Check content and content.users in power levels + [\#3223](https://github.com/matrix-org/matrix-react-sdk/pull/3223) + * Take adjacent invisible events into account for read receipt, even if any + but first should be ignored. + [\#3222](https://github.com/matrix-org/matrix-react-sdk/pull/3222) + +Changes in [1.4.0-rc.2](https://github.com/matrix-org/matrix-react-sdk/releases/tag/v1.4.0-rc.2) (2019-07-12) +============================================================================================================= +[Full Changelog](https://github.com/matrix-org/matrix-react-sdk/compare/v1.4.0-rc.1...v1.4.0-rc.2) + + * Upgrade to JS SDK 2.2.0-rc.2 to fix regresion in listing devices + * Remove misleading text about admins logging people out from soft logout + [\#3215](https://github.com/matrix-org/matrix-react-sdk/pull/3215) + +Changes in [1.4.0-rc.1](https://github.com/matrix-org/matrix-react-sdk/releases/tag/v1.4.0-rc.1) (2019-07-12) +============================================================================================================= +[Full Changelog](https://github.com/matrix-org/matrix-react-sdk/compare/v1.3.1...v1.4.0-rc.1) + + * Update from Weblate + [\#3214](https://github.com/matrix-org/matrix-react-sdk/pull/3214) + * Prevent autocomplete on paste, and verserev-ing text before and after : + [\#3210](https://github.com/matrix-org/matrix-react-sdk/pull/3210) + * Close settings after deactivating + [\#3212](https://github.com/matrix-org/matrix-react-sdk/pull/3212) + * Require an issue URL (or notes) on rageshakes + [\#3207](https://github.com/matrix-org/matrix-react-sdk/pull/3207) + * Use r0 media endpoints for group tests + [\#3202](https://github.com/matrix-org/matrix-react-sdk/pull/3202) + * Fix field styling regression + [\#3204](https://github.com/matrix-org/matrix-react-sdk/pull/3204) + * Upgrade dependencies + [\#3203](https://github.com/matrix-org/matrix-react-sdk/pull/3203) + * Show anything other than ban/invite -> leave as a kick + [\#3198](https://github.com/matrix-org/matrix-react-sdk/pull/3198) + * Run stylelint on all SCSS files + [\#3200](https://github.com/matrix-org/matrix-react-sdk/pull/3200) + * Show original event in edit history + [\#3195](https://github.com/matrix-org/matrix-react-sdk/pull/3195) + * Use the state variable for the password when deactivating + [\#3201](https://github.com/matrix-org/matrix-react-sdk/pull/3201) + * Support SSO for rehydrating a soft-logged-out session. + [\#3197](https://github.com/matrix-org/matrix-react-sdk/pull/3197) + * Change highlight colour on dark theme + [\#3196](https://github.com/matrix-org/matrix-react-sdk/pull/3196) + * Dress up the soft logout page to look like the design + [\#3190](https://github.com/matrix-org/matrix-react-sdk/pull/3190) + * Overwrite the old session if the new creds are for a different user + [\#3189](https://github.com/matrix-org/matrix-react-sdk/pull/3189) + * Fix React crash when using a non-default homeserver on soft logout + [\#3188](https://github.com/matrix-org/matrix-react-sdk/pull/3188) + * Change soft logout rehydrate text if there's pending key backups + [\#3187](https://github.com/matrix-org/matrix-react-sdk/pull/3187) + * Ask for the user's password to rehydrate their soft logged out session + [\#3182](https://github.com/matrix-org/matrix-react-sdk/pull/3182) + * Don't try to call bodyToHtml with an empty content + [\#3194](https://github.com/matrix-org/matrix-react-sdk/pull/3194) + * Take server-side aggregation into account for timestamp on (edited) tooltip + [\#3193](https://github.com/matrix-org/matrix-react-sdk/pull/3193) + * Fix some React errors + [\#3164](https://github.com/matrix-org/matrix-react-sdk/pull/3164) + * Preserve reply fallback on edit + [\#3192](https://github.com/matrix-org/matrix-react-sdk/pull/3192) + * Don't show Remove button in ImageView if can't redact, delint ImageView + [\#3191](https://github.com/matrix-org/matrix-react-sdk/pull/3191) + * Edit history actions + [\#3180](https://github.com/matrix-org/matrix-react-sdk/pull/3180) + * Don't allow editing via up-arrow when Replying + [\#3183](https://github.com/matrix-org/matrix-react-sdk/pull/3183) + * If oldContent matches newContent, skip sending the edit + [\#3103](https://github.com/matrix-org/matrix-react-sdk/pull/3103) + * Track live events in timeline and use for read receipts and read markers + [\#3184](https://github.com/matrix-org/matrix-react-sdk/pull/3184) + * Upgrade dependencies + [\#3179](https://github.com/matrix-org/matrix-react-sdk/pull/3179) + * Allow diplayed reaction values to contain anything + [\#3186](https://github.com/matrix-org/matrix-react-sdk/pull/3186) + * Fix interactive tooltip null target error + [\#3185](https://github.com/matrix-org/matrix-react-sdk/pull/3185) + * Require that users go to the soft logout page if they're soft logged out + [\#3181](https://github.com/matrix-org/matrix-react-sdk/pull/3181) + * Emojibase data includes blank variations, accept these when searching + [\#3163](https://github.com/matrix-org/matrix-react-sdk/pull/3163) + * Implement basic soft logout handling + [\#3177](https://github.com/matrix-org/matrix-react-sdk/pull/3177) + * De-lint ScalarAuthClient + [\#3178](https://github.com/matrix-org/matrix-react-sdk/pull/3178) + * show /relations error in edit history dialog + [\#3174](https://github.com/matrix-org/matrix-react-sdk/pull/3174) + +Changes in [1.3.1](https://github.com/matrix-org/matrix-react-sdk/releases/tag/v1.3.1) (2019-07-11) +=================================================================================================== +[Full Changelog](https://github.com/matrix-org/matrix-react-sdk/compare/v1.3.0...v1.3.1) + + * Fix account deactivation + [\#3201](https://github.com/matrix-org/matrix-react-sdk/pull/3201) + * Upgrade lodash dependencies + * Upgrade to JS SDK 2.1.1 + +Changes in [1.3.0](https://github.com/matrix-org/matrix-react-sdk/releases/tag/v1.3.0) (2019-07-08) +=================================================================================================== +[Full Changelog](https://github.com/matrix-org/matrix-react-sdk/compare/v1.3.0-rc.1...v1.3.0) + +No changes since rc.1 + +Changes in [1.3.0-rc.1](https://github.com/matrix-org/matrix-react-sdk/releases/tag/v1.3.0-rc.1) (2019-07-03) +============================================================================================================= +[Full Changelog](https://github.com/matrix-org/matrix-react-sdk/compare/v1.2.2...v1.3.0-rc.1) + + * MELS handle m.room.third_party_invite + [\#3173](https://github.com/matrix-org/matrix-react-sdk/pull/3173) + * Fix logic around MemberList invites section, specifically regarding 3pid + [\#3172](https://github.com/matrix-org/matrix-react-sdk/pull/3172) + * Update from Weblate + [\#3176](https://github.com/matrix-org/matrix-react-sdk/pull/3176) + * Track the user's own typing state external to the composer + [\#3150](https://github.com/matrix-org/matrix-react-sdk/pull/3150) + * Handle associated event send failures + [\#3170](https://github.com/matrix-org/matrix-react-sdk/pull/3170) + * Improve interactive tooltip hover behaviour + [\#3169](https://github.com/matrix-org/matrix-react-sdk/pull/3169) + * Fix login type selector border + [\#3171](https://github.com/matrix-org/matrix-react-sdk/pull/3171) + * Use the event sender instead of event ID for viaServers off a tombstone + [\#3159](https://github.com/matrix-org/matrix-react-sdk/pull/3159) + * Append keyshare request dialogs instead of replacing the current dialog + [\#3160](https://github.com/matrix-org/matrix-react-sdk/pull/3160) + * Add AccessibleTooltipButton and use it for RoomSubList buttons + [\#3165](https://github.com/matrix-org/matrix-react-sdk/pull/3165) + * MemberInfo wrap Device Name/ID + [\#3166](https://github.com/matrix-org/matrix-react-sdk/pull/3166) + * Correctly populate the dispatch for joining a room via servers + [\#3161](https://github.com/matrix-org/matrix-react-sdk/pull/3161) + * Clean up legacy breadcrumbs persistence fallback + [\#3162](https://github.com/matrix-org/matrix-react-sdk/pull/3162) + * Update from Weblate + [\#3168](https://github.com/matrix-org/matrix-react-sdk/pull/3168) + * Add ability to render null-rejoins in Timeline and MELS + [\#3135](https://github.com/matrix-org/matrix-react-sdk/pull/3135) + * Add /myavatar command + [\#3155](https://github.com/matrix-org/matrix-react-sdk/pull/3155) + * Update config.json docs location + [\#3158](https://github.com/matrix-org/matrix-react-sdk/pull/3158) + * If on trackpad, don't mess with horizontal scrolling. + [\#3148](https://github.com/matrix-org/matrix-react-sdk/pull/3148) + * Limit reactions row on initial display + [\#3152](https://github.com/matrix-org/matrix-react-sdk/pull/3152) + * Unpin highlight.js + [\#3156](https://github.com/matrix-org/matrix-react-sdk/pull/3156) + * Flexboxify generic error page + [\#3154](https://github.com/matrix-org/matrix-react-sdk/pull/3154) + * Fix weird scrollbar when devtools is in a narrow browser + [\#3153](https://github.com/matrix-org/matrix-react-sdk/pull/3153) + * Show a loading state for slow peeks + [\#3142](https://github.com/matrix-org/matrix-react-sdk/pull/3142) + * Don't show error dialog when user has no webcam + [\#3146](https://github.com/matrix-org/matrix-react-sdk/pull/3146) + * Make edit history work in encrypted rooms. + [\#3151](https://github.com/matrix-org/matrix-react-sdk/pull/3151) + * Change interactive tooltip to only flip when required + [\#3147](https://github.com/matrix-org/matrix-react-sdk/pull/3147) + * Edit history dialog + [\#3144](https://github.com/matrix-org/matrix-react-sdk/pull/3144) + * Fix the scrollbar in the community bar + [\#3143](https://github.com/matrix-org/matrix-react-sdk/pull/3143) + * Add focus border to edit composer + [\#3145](https://github.com/matrix-org/matrix-react-sdk/pull/3145) + * Supply oobData to RoomPreviewBar + [\#3141](https://github.com/matrix-org/matrix-react-sdk/pull/3141) + * Don't boost trackpad users in breadcrumbs + [\#3140](https://github.com/matrix-org/matrix-react-sdk/pull/3140) + * Fix room upgrade warning being chopped off and a spelling mistake + [\#3139](https://github.com/matrix-org/matrix-react-sdk/pull/3139) + * Add quick reaction buttons in tooltip + [\#3138](https://github.com/matrix-org/matrix-react-sdk/pull/3138) + * When joining from room directory, use auto_join + [\#3136](https://github.com/matrix-org/matrix-react-sdk/pull/3136) + * Improve API and interactivity of new tooltip + [\#3137](https://github.com/matrix-org/matrix-react-sdk/pull/3137) + * Use feature flag for displaying edits as well + [\#3132](https://github.com/matrix-org/matrix-react-sdk/pull/3132) + * Add interactive tooltip style + [\#3131](https://github.com/matrix-org/matrix-react-sdk/pull/3131) + * Remove redundant extra chevrons from ContextualMenu + [\#3129](https://github.com/matrix-org/matrix-react-sdk/pull/3129) + * Editor caret improvements + [\#3126](https://github.com/matrix-org/matrix-react-sdk/pull/3126) + * Disable left/right arrow navigating completions for now + [\#3130](https://github.com/matrix-org/matrix-react-sdk/pull/3130) + * Take list nesting into account for indenting + [\#3128](https://github.com/matrix-org/matrix-react-sdk/pull/3128) + * Add file size to UploadConfirmDialog + [\#3127](https://github.com/matrix-org/matrix-react-sdk/pull/3127) + * Consider cancelled verifications when mounting IncomingSasDialog + [\#3123](https://github.com/matrix-org/matrix-react-sdk/pull/3123) + * Make the verification cancelled dialog say OK instead of Cancel + [\#3124](https://github.com/matrix-org/matrix-react-sdk/pull/3124) + * Update from Weblate + [\#3125](https://github.com/matrix-org/matrix-react-sdk/pull/3125) + * Remove unused ContextualMenu features + [\#3122](https://github.com/matrix-org/matrix-react-sdk/pull/3122) + * Fix casing of TooltipButton + [\#3119](https://github.com/matrix-org/matrix-react-sdk/pull/3119) + * De-duplicate notif badge code + [\#3120](https://github.com/matrix-org/matrix-react-sdk/pull/3120) + * Fix favicon/title badge count + [\#3121](https://github.com/matrix-org/matrix-react-sdk/pull/3121) + * Switch ugly password boxes to Field or styled input + [\#3071](https://github.com/matrix-org/matrix-react-sdk/pull/3071) + * Restore warning for if you're already logged in + [\#3118](https://github.com/matrix-org/matrix-react-sdk/pull/3118) + * Provide default name if device label is missing + [\#3113](https://github.com/matrix-org/matrix-react-sdk/pull/3113) + * Support @room pills while editing + [\#3108](https://github.com/matrix-org/matrix-react-sdk/pull/3108) + +Changes in [1.2.2](https://github.com/matrix-org/matrix-react-sdk/releases/tag/v1.2.2) (2019-06-19) +=================================================================================================== +[Full Changelog](https://github.com/matrix-org/matrix-react-sdk/compare/v1.2.2-rc.2...v1.2.2) + +No changes since rc.2 + +Changes in [1.2.2-rc.2](https://github.com/matrix-org/matrix-react-sdk/releases/tag/v1.2.2-rc.2) (2019-06-18) +============================================================================================================= +[Full Changelog](https://github.com/matrix-org/matrix-react-sdk/compare/v1.2.2-rc.1...v1.2.2-rc.2) + + * Defer scalar API calls until they are needed + [\#3115](https://github.com/matrix-org/matrix-react-sdk/pull/3115) + * Blend pending redactions + [\#3117](https://github.com/matrix-org/matrix-react-sdk/pull/3117) + * Keep old arrow-up behaviour when editing is not enabled + [\#3116](https://github.com/matrix-org/matrix-react-sdk/pull/3116) + * Restore Composer History under shift-up & down + [\#3098](https://github.com/matrix-org/matrix-react-sdk/pull/3098) + * Allow changing server if validation has failed + [\#3114](https://github.com/matrix-org/matrix-react-sdk/pull/3114) + * Add Upload All button to UploadConfirmDialog + [\#3109](https://github.com/matrix-org/matrix-react-sdk/pull/3109) + * Re-enable register button + [\#3112](https://github.com/matrix-org/matrix-react-sdk/pull/3112) + * keep mx_Field stretching + [\#3111](https://github.com/matrix-org/matrix-react-sdk/pull/3111) + * Fix double-spinner + [\#3107](https://github.com/matrix-org/matrix-react-sdk/pull/3107) + * Fix display of canonicalAlias in group room info + [\#3110](https://github.com/matrix-org/matrix-react-sdk/pull/3110) + * Fix welcome user + [\#3106](https://github.com/matrix-org/matrix-react-sdk/pull/3106) + * Support editing emote messages + [\#3105](https://github.com/matrix-org/matrix-react-sdk/pull/3105) + * Use flex: 1 for mx_Field to replace all the calc(100% - 20px) and more + [\#3104](https://github.com/matrix-org/matrix-react-sdk/pull/3104) + * Use overflow on MemberInfo name/mxid so that the back button stays + [\#3099](https://github.com/matrix-org/matrix-react-sdk/pull/3099) + * Allow changing servers on nonfatal errors + [\#3102](https://github.com/matrix-org/matrix-react-sdk/pull/3102) + * Simplify email registration + [\#3101](https://github.com/matrix-org/matrix-react-sdk/pull/3101) + * Allow arrow keys navigation in autocomplete list + [\#2966](https://github.com/matrix-org/matrix-react-sdk/pull/2966) + * Edit unsent messages + [\#3097](https://github.com/matrix-org/matrix-react-sdk/pull/3097) + * Fix registration with email + non-default HS + [\#3096](https://github.com/matrix-org/matrix-react-sdk/pull/3096) + * Raise action bar above read marker + [\#3095](https://github.com/matrix-org/matrix-react-sdk/pull/3095) + * Console log more helpfully + [\#3094](https://github.com/matrix-org/matrix-react-sdk/pull/3094) + +Changes in [1.2.2-rc.1](https://github.com/matrix-org/matrix-react-sdk/releases/tag/v1.2.2-rc.1) (2019-06-12) +============================================================================================================= +[Full Changelog](https://github.com/matrix-org/matrix-react-sdk/compare/v1.2.1...v1.2.2-rc.1) + + * Align message context menu to right and vertically where space available + [\#3087](https://github.com/matrix-org/matrix-react-sdk/pull/3087) + * Allow registration to submit for non-fatal errors + [\#3093](https://github.com/matrix-org/matrix-react-sdk/pull/3093) + * Clear the login busy state after .well-known discovery + [\#3092](https://github.com/matrix-org/matrix-react-sdk/pull/3092) + * Update from Weblate + [\#3091](https://github.com/matrix-org/matrix-react-sdk/pull/3091) + * Fix registration after fail-fast + [\#3090](https://github.com/matrix-org/matrix-react-sdk/pull/3090) + * Use setBusy interface of js-sdk interactive auth + [\#3085](https://github.com/matrix-org/matrix-react-sdk/pull/3085) + * Don't handle identity server failure as fatal, and use the right message + [\#3088](https://github.com/matrix-org/matrix-react-sdk/pull/3088) + * Recheck message actions on decrypt + [\#3084](https://github.com/matrix-org/matrix-react-sdk/pull/3084) + * Fix exception on logout + [\#3086](https://github.com/matrix-org/matrix-react-sdk/pull/3086) + * Remember we were trying to accept an invite + [\#3083](https://github.com/matrix-org/matrix-react-sdk/pull/3083) + * Add funding details for GitHub sponsor button + [\#3079](https://github.com/matrix-org/matrix-react-sdk/pull/3079) + * Remove highlight from reactions + [\#3081](https://github.com/matrix-org/matrix-react-sdk/pull/3081) + * Clarify that only lowercase letters are allowed + [\#3080](https://github.com/matrix-org/matrix-react-sdk/pull/3080) + * Don't handle identity server liveliness errors as fatal + [\#3082](https://github.com/matrix-org/matrix-react-sdk/pull/3082) + * truncate long display names in timeline headings + [\#3078](https://github.com/matrix-org/matrix-react-sdk/pull/3078) + * Fail more softly on homeserver liveliness errors + [\#3067](https://github.com/matrix-org/matrix-react-sdk/pull/3067) + * Fix AddressPickerDialog adding wrong entry to selected list case + [\#3076](https://github.com/matrix-org/matrix-react-sdk/pull/3076) + * change profile keybind to backtick from i due to italics conflict + [\#3077](https://github.com/matrix-org/matrix-react-sdk/pull/3077) + * Look busy whilst requesting the email token + [\#3075](https://github.com/matrix-org/matrix-react-sdk/pull/3075) + * Fix email invites address-match checking + [\#3074](https://github.com/matrix-org/matrix-react-sdk/pull/3074) + * Add license info for Twemoji + [\#3073](https://github.com/matrix-org/matrix-react-sdk/pull/3073) + * Show read receipts on top of message + [\#3072](https://github.com/matrix-org/matrix-react-sdk/pull/3072) + * Be somewhat fuzzier when matching emojis to complete on space + [\#3070](https://github.com/matrix-org/matrix-react-sdk/pull/3070) + * Restrict reactions to a single emoji + [\#3069](https://github.com/matrix-org/matrix-react-sdk/pull/3069) + * Fix live updates to reaction row buttons + [\#3068](https://github.com/matrix-org/matrix-react-sdk/pull/3068) + * Don't refresh custom status on logout + [\#3065](https://github.com/matrix-org/matrix-react-sdk/pull/3065) + * Add a logged in class to EmbeddedPage and react to MatrixClient changes + [\#3066](https://github.com/matrix-org/matrix-react-sdk/pull/3066) + * Don't show "can't redact" dialog on network error, with redaction having + local echo & queuing now. + [\#3058](https://github.com/matrix-org/matrix-react-sdk/pull/3058) + * Fix login page breaking on wrong password + [\#3062](https://github.com/matrix-org/matrix-react-sdk/pull/3062) + * Update from Weblate + [\#3064](https://github.com/matrix-org/matrix-react-sdk/pull/3064) + * Install latest JS SDK when linting + [\#3063](https://github.com/matrix-org/matrix-react-sdk/pull/3063) + * Ensure we always show read receipts even with hidden events + [\#3056](https://github.com/matrix-org/matrix-react-sdk/pull/3056) + * Advance read receipts into trailing events without tiles + [\#3059](https://github.com/matrix-org/matrix-react-sdk/pull/3059) + * Remove unused errorText prop + [\#3061](https://github.com/matrix-org/matrix-react-sdk/pull/3061) + * Remove SettingsStore reference in RoomSettingsDialog + [\#3060](https://github.com/matrix-org/matrix-react-sdk/pull/3060) + * Custom notification sounds for rooms + [\#2928](https://github.com/matrix-org/matrix-react-sdk/pull/2928) + * Fix comments in unread room tracking + [\#3054](https://github.com/matrix-org/matrix-react-sdk/pull/3054) + * Allow source tile handler for replacements + [\#3057](https://github.com/matrix-org/matrix-react-sdk/pull/3057) + * Fix linting in MessagePanel + [\#3055](https://github.com/matrix-org/matrix-react-sdk/pull/3055) + * Convert breadcrumbs from labs to real setting + [\#3053](https://github.com/matrix-org/matrix-react-sdk/pull/3053) + * Add local echo on badges in breadcrumbs + [\#3052](https://github.com/matrix-org/matrix-react-sdk/pull/3052) + * Counteract smooth scrolling on breadcrumbs + [\#3051](https://github.com/matrix-org/matrix-react-sdk/pull/3051) + * add sbix fallback twemoji font (and bump to emoji 12) + [\#3050](https://github.com/matrix-org/matrix-react-sdk/pull/3050) + * Add option to change the default country code + [\#3049](https://github.com/matrix-org/matrix-react-sdk/pull/3049) + * Accept JSX into the GenericErrorPage and expose local session vars + [\#3043](https://github.com/matrix-org/matrix-react-sdk/pull/3043) + * Don't try and low encryption info when signing out in low bandwidth mode + [\#3048](https://github.com/matrix-org/matrix-react-sdk/pull/3048) + * only capture enter if something was selected in completions + [\#3047](https://github.com/matrix-org/matrix-react-sdk/pull/3047) + * Fix: better HTML > MD conversion for editing, including lists and quotes + [\#3040](https://github.com/matrix-org/matrix-react-sdk/pull/3040) + * Native emoji require extra line-height + [\#3044](https://github.com/matrix-org/matrix-react-sdk/pull/3044) + * port over low_bandwidth mode to develop + [\#2598](https://github.com/matrix-org/matrix-react-sdk/pull/2598) + * Fix: maintain caret at current line when position is on newline part + [\#3029](https://github.com/matrix-org/matrix-react-sdk/pull/3029) + * Remove username on HS input label + [\#3042](https://github.com/matrix-org/matrix-react-sdk/pull/3042) + * Exclude chrome in ua from safari version check for colr support + [\#3038](https://github.com/matrix-org/matrix-react-sdk/pull/3038) + * fix COLR font check being racy + [\#3034](https://github.com/matrix-org/matrix-react-sdk/pull/3034) + * Override font for usercontent download link + [\#3035](https://github.com/matrix-org/matrix-react-sdk/pull/3035) + * Revert "Make the timeline less noisy for screen readers (mk II) #3019" + [\#3033](https://github.com/matrix-org/matrix-react-sdk/pull/3033) + * Hide autocomplete on Enter key press instead of sending message + [\#2968](https://github.com/matrix-org/matrix-react-sdk/pull/2968) + * Message editing: arrow key (up/down) navigation between editable events + [\#3025](https://github.com/matrix-org/matrix-react-sdk/pull/3025) + * Message editing: fix reply text appearing in edit + [\#3032](https://github.com/matrix-org/matrix-react-sdk/pull/3032) + * Do not try to request thumbnails with non-integer widths + [\#3031](https://github.com/matrix-org/matrix-react-sdk/pull/3031) + * Message editing: preserve strikethrough as well + [\#3030](https://github.com/matrix-org/matrix-react-sdk/pull/3030) + * Add some logging for COLR checks + [\#3027](https://github.com/matrix-org/matrix-react-sdk/pull/3027) + * Fixup for tab completion: take part length into account as well + [\#3026](https://github.com/matrix-org/matrix-react-sdk/pull/3026) + * Message editing: tab completion + [\#3024](https://github.com/matrix-org/matrix-react-sdk/pull/3024) + * Message editing: dont jump to next part when inserting at *start* of + uneditable part + [\#3021](https://github.com/matrix-org/matrix-react-sdk/pull/3021) + * Message editing: preserve and re-apply formatting + [\#3013](https://github.com/matrix-org/matrix-react-sdk/pull/3013) + * Fix relationship between guests, .well-known, and auth + [\#3001](https://github.com/matrix-org/matrix-react-sdk/pull/3001) + * Restore use of full mxid login + [\#2972](https://github.com/matrix-org/matrix-react-sdk/pull/2972) + * Only expose the fallback_hs_url if the homeserver is the default homeserver + [\#2971](https://github.com/matrix-org/matrix-react-sdk/pull/2971) + * Refactor "Next" button into ServerConfig components + [\#2964](https://github.com/matrix-org/matrix-react-sdk/pull/2964) + * Render underlines and tooltips on custom server names in auth pages + [\#2965](https://github.com/matrix-org/matrix-react-sdk/pull/2965) + * Use validated server config for login, registration, and password reset + [\#2941](https://github.com/matrix-org/matrix-react-sdk/pull/2941) + +Changes in [1.2.1](https://github.com/matrix-org/matrix-react-sdk/releases/tag/v1.2.1) (2019-05-31) +=================================================================================================== +[Full Changelog](https://github.com/matrix-org/matrix-react-sdk/compare/v1.2.0...v1.2.1) + + * Upgrade to JS SDK 2.0.0 which fixes an error during key backup + * Native emoji require extra line-height for release + [\#3045](https://github.com/matrix-org/matrix-react-sdk/pull/3045) + +Changes in [1.2.0](https://github.com/matrix-org/matrix-react-sdk/releases/tag/v1.2.0) (2019-05-29) +=================================================================================================== +[Full Changelog](https://github.com/matrix-org/matrix-react-sdk/compare/v1.2.0-rc.1...v1.2.0) + + * COLR font check fixes for release + [\#3041](https://github.com/matrix-org/matrix-react-sdk/pull/3041) + * Revert "Make the timeline less noisy for screen readers (mk II) #3019" for + release + [\#3036](https://github.com/matrix-org/matrix-react-sdk/pull/3036) + * Override font for usercontent download link for release + [\#3037](https://github.com/matrix-org/matrix-react-sdk/pull/3037) + +Changes in [1.2.0-rc.1](https://github.com/matrix-org/matrix-react-sdk/releases/tag/v1.2.0-rc.1) (2019-05-23) +============================================================================================================= +[Full Changelog](https://github.com/matrix-org/matrix-react-sdk/compare/v1.1.2...v1.2.0-rc.1) + + * Update from Weblate + [\#3023](https://github.com/matrix-org/matrix-react-sdk/pull/3023) + * Use the correct line-height for bold emoji + [\#3022](https://github.com/matrix-org/matrix-react-sdk/pull/3022) + * Make the timeline less noisy for screen readers (mk II) + [\#3019](https://github.com/matrix-org/matrix-react-sdk/pull/3019) + * Label message edit field as such for screen readers + [\#3020](https://github.com/matrix-org/matrix-react-sdk/pull/3020) + * Move checkmark to the front of key backup message + [\#3014](https://github.com/matrix-org/matrix-react-sdk/pull/3014) + * Revert "Make the timeline less noisy for screen readers" + [\#3017](https://github.com/matrix-org/matrix-react-sdk/pull/3017) + * Translate scroll movement if the deltaX is the same as the threshold + [\#3016](https://github.com/matrix-org/matrix-react-sdk/pull/3016) + * Make the timeline less noisy for screen readers + [\#3007](https://github.com/matrix-org/matrix-react-sdk/pull/3007) + * Windows emoji tweaks + [\#3015](https://github.com/matrix-org/matrix-react-sdk/pull/3015) + * Message editing: update link previews after editing + [\#3004](https://github.com/matrix-org/matrix-react-sdk/pull/3004) + * js-sdk interactive auth now sends email token + [\#3010](https://github.com/matrix-org/matrix-react-sdk/pull/3010) + * remove SBIX font and fallback to native emoji + [\#3011](https://github.com/matrix-org/matrix-react-sdk/pull/3011) + * Update from Weblate + [\#3012](https://github.com/matrix-org/matrix-react-sdk/pull/3012) + * load twemoji dynamically as colr or sbix; fix monospace + [\#3008](https://github.com/matrix-org/matrix-react-sdk/pull/3008) + * Guard against null rooms in `onEventDecrypted` + [\#3009](https://github.com/matrix-org/matrix-react-sdk/pull/3009) + * Only show reactions in main message timeline + [\#3005](https://github.com/matrix-org/matrix-react-sdk/pull/3005) + * Add voice labels for quick add room buttons + [\#3006](https://github.com/matrix-org/matrix-react-sdk/pull/3006) + * Update TopLeftMenu for accessibility: Keyboard shortcut, reduced screen + reader noise + [\#2994](https://github.com/matrix-org/matrix-react-sdk/pull/2994) + * Remove reacted with text when shortcode missing + [\#3003](https://github.com/matrix-org/matrix-react-sdk/pull/3003) + * Fixup: also change editor margin when last event and buttons are not + overlaying + [\#3002](https://github.com/matrix-org/matrix-react-sdk/pull/3002) + * Message editing: render avatars for pills in the editor + [\#2997](https://github.com/matrix-org/matrix-react-sdk/pull/2997) + * Replace emojione with twemoji + emojibase + [\#2995](https://github.com/matrix-org/matrix-react-sdk/pull/2995) + * Hide WhoIsTyping component if the MessagePanel is shaped e.g file grid + [\#3000](https://github.com/matrix-org/matrix-react-sdk/pull/3000) + * Close copy tooltip in edge cases correctly + [\#2999](https://github.com/matrix-org/matrix-react-sdk/pull/2999) + * Limit reaction sender tooltip to 6 people + [\#2998](https://github.com/matrix-org/matrix-react-sdk/pull/2998) + * Message editing: apply design + [\#2996](https://github.com/matrix-org/matrix-react-sdk/pull/2996) + * Add debug feature to show hidden events in timeline + [\#2993](https://github.com/matrix-org/matrix-react-sdk/pull/2993) + * Mute screen readers over reactions + [\#2986](https://github.com/matrix-org/matrix-react-sdk/pull/2986) + * Fix not being able to edit already edited messages + [\#2992](https://github.com/matrix-org/matrix-react-sdk/pull/2992) + * Add a basic tooltip showing who reacted + [\#2991](https://github.com/matrix-org/matrix-react-sdk/pull/2991) + * Message editing: show (edited) marker on edited messages, with tooltip + [\#2990](https://github.com/matrix-org/matrix-react-sdk/pull/2990) + * Update from Weblate + [\#2989](https://github.com/matrix-org/matrix-react-sdk/pull/2989) + * Message editing: only allow editing of text messages + [\#2988](https://github.com/matrix-org/matrix-react-sdk/pull/2988) + * Message editing: shift+enter for newline, enter to send + [\#2987](https://github.com/matrix-org/matrix-react-sdk/pull/2987) + * Apply Flex voodoo for devtools send event dialog + [\#2985](https://github.com/matrix-org/matrix-react-sdk/pull/2985) + * Fix some source strings noticed as incorrect by translators + [\#2984](https://github.com/matrix-org/matrix-react-sdk/pull/2984) + * Message editing: fix some bugs in cursor behaviour + [\#2983](https://github.com/matrix-org/matrix-react-sdk/pull/2983) + * Message editing: local echo & back-pagination + [\#2982](https://github.com/matrix-org/matrix-react-sdk/pull/2982) + * Listen for removed relations + [\#2981](https://github.com/matrix-org/matrix-react-sdk/pull/2981) + * Update from Weblate + [\#2980](https://github.com/matrix-org/matrix-react-sdk/pull/2980) + * Use `getRelation` helper + [\#2977](https://github.com/matrix-org/matrix-react-sdk/pull/2977) + * Add tooltips to rotate and close buttons in ImageView (#9686) + [\#2979](https://github.com/matrix-org/matrix-react-sdk/pull/2979) + * Message editing: smaller fixes + [\#2978](https://github.com/matrix-org/matrix-react-sdk/pull/2978) + * Message editing: adjust to js-sdk changes of marking original event as + replaced + [\#2973](https://github.com/matrix-org/matrix-react-sdk/pull/2973) + * Fix Single Sign-on + [\#2974](https://github.com/matrix-org/matrix-react-sdk/pull/2974) + * Initial support for editing messages + [\#2952](https://github.com/matrix-org/matrix-react-sdk/pull/2952) + * Check permission to invite before showing invite buttons/disable them + [\#2957](https://github.com/matrix-org/matrix-react-sdk/pull/2957) + * Support a backup room ID in PermalinkCreator + [\#2963](https://github.com/matrix-org/matrix-react-sdk/pull/2963) + * Always thumbnail for GIFs + [\#2962](https://github.com/matrix-org/matrix-react-sdk/pull/2962) + * Fix registration with email + [\#2967](https://github.com/matrix-org/matrix-react-sdk/pull/2967) + * Add configuration flag to disable minimum password requirements + [\#2947](https://github.com/matrix-org/matrix-react-sdk/pull/2947) + * Send and undo reaction events + [\#2954](https://github.com/matrix-org/matrix-react-sdk/pull/2954) + * Fix bug where email was not required where it shouldn't have been + [\#2961](https://github.com/matrix-org/matrix-react-sdk/pull/2961) + * add /rainbow and /rainbowme Slash Commands + [\#2958](https://github.com/matrix-org/matrix-react-sdk/pull/2958) + * Fix invite via MemberInfo + [\#2956](https://github.com/matrix-org/matrix-react-sdk/pull/2956) + * Close Room Settings upon Leave Room + [\#2955](https://github.com/matrix-org/matrix-react-sdk/pull/2955) + * Command to change avatar for a single room, including upload of mxc res + [\#2953](https://github.com/matrix-org/matrix-react-sdk/pull/2953) + * Add View Servers in Room to Devtools + [\#2804](https://github.com/matrix-org/matrix-react-sdk/pull/2804) + * Update 'Rooms' import RoomView.js file + [\#2951](https://github.com/matrix-org/matrix-react-sdk/pull/2951) + * Extract `ReactionDimension` out of `MessageActionBar` + [\#2950](https://github.com/matrix-org/matrix-react-sdk/pull/2950) + * Always default to the registration form + [\#2942](https://github.com/matrix-org/matrix-react-sdk/pull/2942) + * Check for `room` in all `Room.timeline*` handlers + [\#2945](https://github.com/matrix-org/matrix-react-sdk/pull/2945) + * Remove the karma junit reporter + [\#2944](https://github.com/matrix-org/matrix-react-sdk/pull/2944) + * yarn upgrade + [\#2943](https://github.com/matrix-org/matrix-react-sdk/pull/2943) + * Support changing options for .m.rule.tombstone push rule + [\#2798](https://github.com/matrix-org/matrix-react-sdk/pull/2798) + * Remove timeline explosion rageshake prompt + [\#2939](https://github.com/matrix-org/matrix-react-sdk/pull/2939) + * Add existing reactions below message + [\#2940](https://github.com/matrix-org/matrix-react-sdk/pull/2940) + * Fix lint errors in TimelinePanel + [\#2938](https://github.com/matrix-org/matrix-react-sdk/pull/2938) + * Add primary reactions to action bar + [\#2937](https://github.com/matrix-org/matrix-react-sdk/pull/2937) + +Changes in [1.1.2](https://github.com/matrix-org/matrix-react-sdk/releases/tag/v1.1.2) (2019-05-15) +=================================================================================================== +[Full Changelog](https://github.com/matrix-org/matrix-react-sdk/compare/v1.1.1...v1.1.2) + + * Always thumbnail for GIFs + [\#2976](https://github.com/matrix-org/matrix-react-sdk/pull/2976) + * Fix Single Sign-on + [\#2975](https://github.com/matrix-org/matrix-react-sdk/pull/2975) + +Changes in [1.1.1](https://github.com/matrix-org/matrix-react-sdk/releases/tag/v1.1.1) (2019-05-14) +=================================================================================================== +[Full Changelog](https://github.com/matrix-org/matrix-react-sdk/compare/v1.1.0...v1.1.1) + + * Fix registration with email + [\#2970](https://github.com/matrix-org/matrix-react-sdk/pull/2970) + * Fix bug where email was not required where it shouldn't have been + [\#2969](https://github.com/matrix-org/matrix-react-sdk/pull/2969) + Changes in [1.1.0](https://github.com/matrix-org/matrix-react-sdk/releases/tag/v1.1.0) (2019-05-07) =================================================================================================== [Full Changelog](https://github.com/matrix-org/matrix-react-sdk/compare/v1.1.0-rc.1...v1.1.0) diff --git a/README.md b/README.md index e944b04ff2..1265c2bd77 100644 --- a/README.md +++ b/README.md @@ -168,3 +168,8 @@ Ensure you've followed the above development instructions and then: ```bash yarn test ``` + +## End-to-End tests + +Make sure you've got your Riot development server running (by doing `yarn start` in riot-web), and then in this project, run `yarn run e2etests`. +See `test/end-to-end-tests/README.md` for more information. diff --git a/code_style.md b/code_style.md index 96f3879ebc..4b2338064c 100644 --- a/code_style.md +++ b/code_style.md @@ -22,7 +22,7 @@ number throgh from the original code to the final application. General Style ------------- - 4 spaces to indent, for consistency with Matrix Python. -- 120 columns per line, but try to keep JavaScript code around the 80 column mark. +- 120 columns per line, but try to keep JavaScript code around the 90 column mark. Inline JSX in particular can be nicer with more columns per line. - No trailing whitespace at end of lines. - Don't indent empty lines. @@ -34,7 +34,7 @@ General Style - UpperCamelCase for class and type names - lowerCamelCase for functions and variables. - Single line ternary operators are fine. -- UPPER_CAMEL_CASE for constants +- UPPER_SNAKE_CASE for constants - Single quotes for strings by default, for consistency with most JavaScript styles: ```javascript diff --git a/docs/ciderEditor.md b/docs/ciderEditor.md new file mode 100644 index 0000000000..00033b5b8c --- /dev/null +++ b/docs/ciderEditor.md @@ -0,0 +1,71 @@ +# The CIDER (Contenteditable-Input-Diff-Error-Reconcile) editor + +The CIDER editor is a custom editor written for Riot. +Most of the code can be found in the `/editor/` directory of the `matrix-react-sdk` project. +It is used to power the composer main composer (both to send and edit messages), and might be used for other usecases where autocomplete is desired (invite box, ...). + +## High-level overview. + +The editor is backed by a model that contains parts. +A part has some text and a type (plain text, pill, ...). When typing in the editor, +the model validates the input and updates the parts. +The parts are then reconciled with the DOM. + +## Inner workings + +When typing in the `contenteditable` element, the `input` event fires and +the DOM of the editor is turned into a string. The way this is done has +some logic to it to deal with adding newlines for block elements, to make sure +the caret offset is calculated in the same way as the content string, and to ignore +caret nodes (more on that later). +For these reasons it doesn't use `innerText`, `textContent` or anything similar. +The model addresses any content in the editor within as an offset within this string. +The caret position is thus also converted from a position in the DOM tree +to an offset in the content string. This happens in `getCaretOffsetAndText` in `dom.js`. + +Once the content string and caret offset is calculated, it is passed to the `update()` +method of the model. The model first calculates the same content string of its current parts, +basically just concatenating their text. It then looks for differences between +the current and the new content string. The diffing algorithm is very basic, +and assumes there is only one change around the caret offset, +so this should be very inexpensive. See `diff.js` for details. + +The result of the diffing is the strings that were added and/or removed from +the current content. These differences are then applied to the parts, +where parts can apply validation logic to these changes. + +For example, if you type an @ in some plain text, the plain text part rejects +that character, and this character is then presented to the part creator, +which will turn it into a pill candidate part. +Pill candidate parts are what opens the auto completion, and upon picking a completion, +replace themselves with an actual pill which can't be edited anymore. + +The diffing is needed to preserve state in the parts apart from their text +(which is the only thing the model receives from the DOM), e.g. to build +the model incrementally. Any text that didn't change is assumed +to leave the parts it intersects alone. + +The benefit of this is that we can use the `input` event, which is broadly supported, +to find changes in the editor. We don't have to rely on keyboard events, +which relate poorly to text input or changes, and don't need the `beforeinput` event, +which isn't broadly supported yet. + +Once the parts of the model are updated, the DOM of the editor is then reconciled +with the new model state, see `renderModel` in `render.js` for this. +If the model didn't reject the input and didn't make any additional changes, +this won't make any changes to the DOM at all, and should thus be fairly efficient. + +For the browser to allow the user to place the caret between two pills, +or between a pill and the start and end of the line, we need some extra DOM nodes. +These DOM nodes are called caret nodes, and contain an invisble character, so +the caret can be placed into them. The model is unaware of caret nodes, and they +are only added to the DOM during the render phase. Likewise, when calculating +the content string, caret nodes need to be ignored, as they would confuse the model. + +As part of the reconciliation, the caret position is also adjusted to any changes +the model made to the input. The caret is passed around in two formats. +The model receives the caret *offset* within the content string (which includes +an atNodeEnd flag to make it unambiguous if it is at a part and or the next part start). +The model converts this to a caret *position* internally, which has a partIndex +and an offset within the part text, which is more natural to work with. +From there on, the caret *position* is used, also during reconciliation. diff --git a/docs/features/README.md b/docs/features/README.md new file mode 100644 index 0000000000..05a38f029b --- /dev/null +++ b/docs/features/README.md @@ -0,0 +1,6 @@ +# Feature documention + +The idea of this folder is to document the features we support in different parts of the app. +In case anyone needs to work on a given part, and isn't aware of all the features in the area, +they will hopefully get an idea for all the supported functionality to know what to take into account +when making changes. diff --git a/docs/features/composer.md b/docs/features/composer.md new file mode 100644 index 0000000000..112a597001 --- /dev/null +++ b/docs/features/composer.md @@ -0,0 +1,37 @@ +# Composer Features +## Auto Complete + + - Hitting tab tries to auto-complete the word before the caret as a room member + - If no matching name is found, a visual bell is shown + - @ + a letter opens auto complete for members starting with the given letter + - When inserting a user pill at the start in the composer, a colon and space is appended to the pill + - When inserting a user pill anywhere else in composer, only a space is appended to the pill + - # + a letter opens auto complete for rooms starting with the given letter + - : open auto complete for emoji + - Pressing arrow-up/arrow-down while the autocomplete is open navigates between auto complete options + - Pressing tab while the autocomplete is open goes to the next autocomplete option, + wrapping around at the end after reverting to the typed text first. + +## Formatting + + - When selecting text, a formatting bar appears above the selection. + - The formatting bar allows to format the selected test as: + bold, italic, strikethrough, a block quote, and a code block (inline if no linebreak is selected). + - Formatting is applied as markdown syntax. + - Hitting ctrl/cmd+B also marks the selected text as bold + - Hitting ctrl/cmd+I also marks the selected text as italic + - Hitting ctrl/cmd+> also marks the selected text as a blockquote + +## Misc + + - When hitting the arrow-up button while having the caret at the start in the composer, + the last message sent by the syncing user is edited. + - Clicking a display name on an event in the timeline inserts a user pill into the composer + - Emoticons (like :-), >:-), :-/, ...) are replaced by emojis while typing if the relevant setting is enabled + - Typing in the composer sends typing notifications in the room + - Pressing ctrl/mod+z and ctrl/mod+y undoes/redoes modifications + - Pressing shift+enter inserts a line break + - Pressing enter sends the message. + - Choosing "Quote" in the context menu of an event inserts a quote of the event body in the composer. + - Choosing "Reply" in the context menu of an event shows a preview above the composer to reply to. + - Pressing alt+arrow up/arrow down navigates in previously sent messages, putting them in the composer. \ No newline at end of file diff --git a/docs/settings.md b/docs/settings.md index 1ba8981f84..9b780c27c9 100644 --- a/docs/settings.md +++ b/docs/settings.md @@ -15,7 +15,7 @@ order of prioirty, are: * `room-account` - The current user's account, but only when in a specific room * `account` - The current user's account * `room` - A specific room (setting for all members of the room) -* `config` - Values are defined by `config.json` +* `config` - Values are defined by the `settingDefaults` key (usually) in `config.json` * `default` - The hardcoded default for the settings Individual settings may control which levels are appropriate for them as part of the defaults. This is often to ensure diff --git a/karma.conf.js b/karma.conf.js index e2728cdc09..d55be049bb 100644 --- a/karma.conf.js +++ b/karma.conf.js @@ -28,7 +28,7 @@ process.env.PHANTOMJS_BIN = 'node_modules/.bin/phantomjs'; function fileExists(name) { try { - fs.statSync(gsCss); + fs.statSync(name); return true; } catch (e) { return false; @@ -166,7 +166,7 @@ module.exports = function (config) { ] }, { - test: /\.(gif|png|svg|ttf)$/, + test: /\.(gif|png|svg|ttf|woff2)$/, loader: 'file-loader', }, ], diff --git a/package.json b/package.json index 991080cb7e..5b82d9b111 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "matrix-react-sdk", - "version": "1.1.0", + "version": "1.7.4", "description": "SDK for matrix.org using React", "author": "matrix.org", "repository": { @@ -40,6 +40,7 @@ "rethemendex": "res/css/rethemendex.sh", "i18n": "matrix-gen-i18n", "prunei18n": "matrix-prune-i18n", + "diff-i18n": "cp src/i18n/strings/en_EN.json src/i18n/strings/en_EN_orig.json && ./scripts/gen-i18n.js && node scripts/compare-file.js src/i18n/strings/en_EN_orig.json src/i18n/strings/en_EN.json", "build": "yarn reskindex && yarn start:init", "build:watch": "babel src -w --skip-initial-build -d lib --source-maps --copy-files", "emoji-data-strip": "node scripts/emoji-data-strip.js", @@ -49,38 +50,45 @@ "lint": "eslint src/", "lintall": "eslint src/ test/", "lintwithexclusions": "eslint --max-warnings 0 --ignore-path .eslintignore.errorfiles src test", - "stylelint": "stylelint res/css/**/*.scss", + "stylelint": "stylelint 'res/css/**/*.scss'", "clean": "rimraf lib", "prepare": "yarn clean && yarn build && git rev-parse HEAD > git-revision.txt", "test": "karma start --single-run=true --browsers VectorChromeHeadless", - "test-multi": "karma start" + "test-multi": "karma start", + "e2etests": "./test/end-to-end-tests/run.sh --riot-url http://localhost:8080" }, "dependencies": { "babel-plugin-syntax-dynamic-import": "^6.18.0", "babel-runtime": "^6.26.0", - "bluebird": "^3.5.0", "blueimp-canvas-to-blob": "^3.5.0", "browser-encrypt-attachment": "^0.3.0", "browser-request": "^0.3.3", "classnames": "^2.1.2", "commonmark": "^0.28.1", "counterpart": "^0.18.0", - "emojione": "2.2.7", + "create-react-class": "^15.6.0", + "diff-dom": "^4.1.3", + "diff-match-patch": "^1.0.4", + "emojibase-data": "^4.0.2", + "emojibase-regex": "^3.0.0", + "escape-html": "^1.0.3", "file-saver": "^1.3.3", "filesize": "3.5.6", "flux": "2.1.1", "focus-trap-react": "^3.0.5", + "focus-visible": "^5.0.2", "fuse.js": "^2.2.0", - "gemini-scrollbar": "github:matrix-org/gemini-scrollbar#b302279", + "gemini-scrollbar": "github:matrix-org/gemini-scrollbar#91e1e566", "gfm.css": "^1.1.1", "glob": "^5.0.14", - "highlight.js": "9.14.2", + "glob-to-regexp": "^0.4.1", + "highlight.js": "^9.15.8", "is-ip": "^2.0.0", "isomorphic-fetch": "^2.2.1", "linkifyjs": "^2.1.6", - "lodash": "^4.13.1", - "lolex": "2.3.2", - "matrix-js-sdk": "1.1.0", + "lodash": "^4.17.14", + "lolex": "4.2", + "matrix-js-sdk": "github:matrix-org/matrix-js-sdk#develop", "optimist": "^0.6.1", "pako": "^1.0.5", "png-chunks-extract": "^1.0.0", @@ -88,11 +96,11 @@ "qrcode-react": "^0.1.16", "qs": "^6.6.0", "querystring": "^0.2.0", - "react": "^15.6.0", - "react-addons-css-transition-group": "15.3.2", + "react": "^16.9.0", + "react-addons-css-transition-group": "15.6.2", "react-beautiful-dnd": "^4.0.1", - "react-dom": "^15.6.0", - "react-gemini-scrollbar": "github:matrix-org/react-gemini-scrollbar#5e97aef", + "react-dom": "^16.9.0", + "react-gemini-scrollbar": "github:matrix-org/react-gemini-scrollbar#9cf17f63b7c0b0ec5f31df27da0f82f7238dc594", "resize-observer-polyfill": "^1.5.0", "sanitize-html": "^1.18.4", "slate": "^0.41.2", @@ -111,7 +119,6 @@ "babel-eslint": "^10.0.1", "babel-loader": "^7.1.5", "babel-plugin-add-module-exports": "^0.2.1", - "babel-plugin-transform-async-to-bluebird": "^1.1.1", "babel-plugin-transform-builtin-extend": "^1.1.2", "babel-plugin-transform-class-properties": "^6.24.1", "babel-plugin-transform-object-rest-spread": "^6.26.0", @@ -127,7 +134,9 @@ "eslint-config-google": "^0.7.1", "eslint-plugin-babel": "^5.2.1", "eslint-plugin-flowtype": "^2.30.0", + "eslint-plugin-jest": "^23.0.4", "eslint-plugin-react": "^7.7.0", + "eslint-plugin-react-hooks": "^2.0.1", "estree-walker": "^0.5.0", "expect": "^24.1.0", "file-loader": "^3.0.1", @@ -143,15 +152,16 @@ "karma-summary-reporter": "^1.5.1", "karma-webpack": "^4.0.0-beta.0", "matrix-mock-request": "^1.2.3", - "matrix-react-test-utils": "^0.1.1", + "matrix-react-test-utils": "^0.2.2", "mocha": "^5.0.5", - "react-addons-test-utils": "^15.4.0", + "react-test-renderer": "^16.9.0", "require-json": "0.0.1", "rimraf": "^2.4.3", "sinon": "^5.0.7", "source-map-loader": "^0.2.3", "stylelint": "^9.10.1", "stylelint-config-standard": "^18.2.0", + "stylelint-scss": "^3.9.0", "walk": "^2.3.9", "webpack": "^4.20.2", "webpack-cli": "^3.1.1" diff --git a/res/css/_common.scss b/res/css/_common.scss index d3cf1921e0..51d985efb7 100644 --- a/res/css/_common.scss +++ b/res/css/_common.scss @@ -30,6 +30,16 @@ body { color: $primary-fg-color; border: 0px; margin: 0px; + + // needed to match the designs correctly on macOS + // see https://github.com/vector-im/riot-web/issues/11425 + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; +} + +pre, code { + font-family: $monospace-font-family; + font-size: 100% !important; } .error, .warning { @@ -99,15 +109,23 @@ input[type=text], input[type=password], textarea { color: $primary-fg-color; } +/* Required by Firefox */ +textarea { + font-family: $font-family; + color: $primary-fg-color; +} + input[type=text]:focus, input[type=password]:focus, textarea:focus { outline: none; box-shadow: none; } -/* Required by Firefox */ -textarea { - font-family: $font-family; - color: $primary-fg-color; +// This is used to hide the standard outline added by browsers for +// accessible (focusable) components. Not intended for buttons, but +// should be used on things like focusable containers where the outline +// is usually not helping anyone. +*:focus:not(.focus-visible) { + outline: none; } // .mx_textinput is a container for a text input @@ -116,6 +134,13 @@ textarea { // appear to be part of the input .mx_Dialog, .mx_MatrixChat { + .mx_textinput > input[type=text], + .mx_textinput > input[type=search] { + border: none; + flex: 1; + color: $primary-fg-color; + } + :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 { @@ -134,13 +159,6 @@ textarea { .mx_textinput { display: flex; align-items: center; - - > input[type=text], - > input[type=search] { - border: none; - flex: 1; - color: $primary-fg-color; - } } :not(.mx_textinput):not(.mx_Field):not(.mx_no_textinput) > input[type=text]::placeholder, @@ -153,14 +171,12 @@ textarea { /*** panels ***/ .dark-panel { background-color: $dark-panel-bg-color; -} -.dark-panel { :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; + background-color: $primary-bg-color; border: none; } } @@ -196,25 +212,25 @@ textarea { /* Expand thumbs on hoverover */ .gm-scrollbar { - border-radius: 5px ! important; + border-radius: 5px !important; } .gm-scrollbar.-vertical { width: 6px; - transition: width 120ms ease-out ! important; + transition: width 120ms ease-out !important; } .gm-scrollbar.-vertical:hover, .gm-scrollbar.-vertical:active { width: 8px; - transition: width 120ms ease-out ! important; + transition: width 120ms ease-out !important; } .gm-scrollbar.-horizontal { height: 6px; - transition: height 120ms ease-out ! important; + transition: height 120ms ease-out !important; } .gm-scrollbar.-horizontal:hover, .gm-scrollbar.-horizontal:active { height: 8px; - transition: height 120ms ease-out ! important; + transition: height 120ms ease-out !important; } // These are magic constants which are excluded from tinting, to let themes @@ -258,14 +274,6 @@ textarea { justify-content: center; } -/* Spinner Dialog overide */ -.mx_Dialog_wrapper.mx_Dialog_spinner .mx_Dialog { - width: auto; - border-radius: 8px; - padding: 0px; - box-shadow: none; -} - .mx_Dialog { background-color: $primary-bg-color; color: $light-fg-color; @@ -327,7 +335,7 @@ textarea { .mx_Dialog_header { position: relative; - margin-bottom: 20px; + margin-bottom: 10px; } .mx_Dialog_title { @@ -377,7 +385,7 @@ textarea { // flip colours for the secondary ones font-weight: 600; - border: 1px solid $accent-color ! important; + border: 1px solid $accent-color; color: $accent-color; background-color: $button-secondary-bg-color; } @@ -394,7 +402,7 @@ textarea { filter: brightness($focus-brightness); } -.mx_Dialog button.mx_Dialog_primary, .mx_Dialog input[type="submit"].mx_Dialog_primary { +.mx_Dialog button.mx_Dialog_primary, .mx_Dialog input[type="submit"].mx_Dialog_primary { color: $accent-fg-color; background-color: $accent-color; min-width: 156px; @@ -412,6 +420,14 @@ textarea { opacity: 0.7; } +/* Spinner Dialog overide */ +.mx_Dialog_wrapper.mx_Dialog_spinner .mx_Dialog { + width: auto; + border-radius: 8px; + padding: 0px; + box-shadow: none; +} + // TODO: Review mx_GeneralButton usage to see if it can use a different class // These classes were brought in from the old UserSettings and are included here to avoid // breaking the app. @@ -445,25 +461,6 @@ textarea { background-color: $primary-bg-color; } -.mx_emojione { - height: 1em; - vertical-align: middle; -} - -.mx_emojione_selected { - background-color: $accent-color; -} - -::-moz-selection { - background-color: $accent-color; - color: $selection-fg-color; -} - -::selection { - background-color: $accent-color; - color: $selection-fg-color; -} - .mx_textButton { @mixin mx_DialogButton_small; } @@ -558,3 +555,27 @@ textarea { color: $username-variant8-color; } +@define-mixin mx_Tooltip_dark { + box-shadow: none; + background-color: $tooltip-timeline-bg-color; + color: $tooltip-timeline-fg-color; + border: none; + border-radius: 3px; + padding: 6px 8px; +} + +// This is a workaround for our mixins not supporting child selectors +.mx_Tooltip_dark { + .mx_Tooltip_chevron::after { + border-right-color: $tooltip-timeline-bg-color; + } +} + +@define-mixin mx_Settings_fullWidthField { + margin-right: 100px; +} + +@define-mixin mx_Settings_tooltip { + // So it fits in the space provided by the page + max-width: 120px; +} diff --git a/res/css/_components.scss b/res/css/_components.scss index 6e681894e3..c47222da59 100644 --- a/res/css/_components.scss +++ b/res/css/_components.scss @@ -25,6 +25,7 @@ @import "./structures/_TabbedView.scss"; @import "./structures/_TagPanel.scss"; @import "./structures/_TagPanelButtons.scss"; +@import "./structures/_ToastContainer.scss"; @import "./structures/_TopLeftMenuButton.scss"; @import "./structures/_UploadBar.scss"; @import "./structures/_ViewSource.scss"; @@ -48,9 +49,9 @@ @import "./views/context_menus/_StatusMessageContextMenu.scss"; @import "./views/context_menus/_TagTileContextMenu.scss"; @import "./views/context_menus/_TopLeftMenu.scss"; +@import "./views/context_menus/_WidgetContextMenu.scss"; @import "./views/dialogs/_AddressPickerDialog.scss"; @import "./views/dialogs/_Analytics.scss"; -@import "./views/dialogs/_BugReportDialog.scss"; @import "./views/dialogs/_ChangelogDialog.scss"; @import "./views/dialogs/_ChatCreateOrReuseChatDialog.scss"; @import "./views/dialogs/_ConfirmUserActionDialog.scss"; @@ -62,6 +63,7 @@ @import "./views/dialogs/_EncryptedEventDialog.scss"; @import "./views/dialogs/_GroupAddressPicker.scss"; @import "./views/dialogs/_IncomingSasDialog.scss"; +@import "./views/dialogs/_MessageEditHistoryDialog.scss"; @import "./views/dialogs/_RestoreKeyBackupDialog.scss"; @import "./views/dialogs/_RoomSettingsDialog.scss"; @import "./views/dialogs/_RoomUpgradeDialog.scss"; @@ -70,6 +72,9 @@ @import "./views/dialogs/_SetPasswordDialog.scss"; @import "./views/dialogs/_SettingsDialog.scss"; @import "./views/dialogs/_ShareDialog.scss"; +@import "./views/dialogs/_SlashCommandHelpDialog.scss"; +@import "./views/dialogs/_TabbedIntegrationManagerDialog.scss"; +@import "./views/dialogs/_TermsDialog.scss"; @import "./views/dialogs/_UnknownDeviceDialog.scss"; @import "./views/dialogs/_UploadConfirmDialog.scss"; @import "./views/dialogs/_UserSettingsDialog.scss"; @@ -84,23 +89,30 @@ @import "./views/elements/_DirectorySearchBox.scss"; @import "./views/elements/_Dropdown.scss"; @import "./views/elements/_EditableItemList.scss"; +@import "./views/elements/_ErrorBoundary.scss"; +@import "./views/elements/_EventListSummary.scss"; @import "./views/elements/_Field.scss"; +@import "./views/elements/_FormButton.scss"; +@import "./views/elements/_IconButton.scss"; @import "./views/elements/_ImageView.scss"; @import "./views/elements/_InlineSpinner.scss"; +@import "./views/elements/_InteractiveTooltip.scss"; @import "./views/elements/_ManageIntegsButton.scss"; -@import "./views/elements/_MemberEventListSummary.scss"; @import "./views/elements/_PowerSelector.scss"; @import "./views/elements/_ProgressBar.scss"; @import "./views/elements/_ReplyThread.scss"; @import "./views/elements/_ResizeHandle.scss"; @import "./views/elements/_RichText.scss"; @import "./views/elements/_RoleButton.scss"; +@import "./views/elements/_RoomAliasField.scss"; @import "./views/elements/_Spinner.scss"; @import "./views/elements/_SyntaxHighlight.scss"; +@import "./views/elements/_TextWithTooltip.scss"; @import "./views/elements/_ToggleSwitch.scss"; -@import "./views/elements/_ToolTipButton.scss"; @import "./views/elements/_Tooltip.scss"; +@import "./views/elements/_TooltipButton.scss"; @import "./views/elements/_Validation.scss"; +@import "./views/emojipicker/_EmojiPicker.scss"; @import "./views/globals/_MatrixToolbar.scss"; @import "./views/groups/_GroupPublicityToggle.scss"; @import "./views/groups/_GroupRoomList.scss"; @@ -110,24 +122,30 @@ @import "./views/messages/_MEmoteBody.scss"; @import "./views/messages/_MFileBody.scss"; @import "./views/messages/_MImageBody.scss"; +@import "./views/messages/_MKeyVerificationRequest.scss"; @import "./views/messages/_MNoticeBody.scss"; @import "./views/messages/_MStickerBody.scss"; @import "./views/messages/_MTextBody.scss"; @import "./views/messages/_MessageActionBar.scss"; @import "./views/messages/_MessageTimestamp.scss"; -@import "./views/messages/_ReactionDimension.scss"; +@import "./views/messages/_MjolnirBody.scss"; @import "./views/messages/_ReactionsRow.scss"; @import "./views/messages/_ReactionsRowButton.scss"; +@import "./views/messages/_ReactionsRowButtonTooltip.scss"; @import "./views/messages/_RoomAvatarEvent.scss"; @import "./views/messages/_SenderProfile.scss"; @import "./views/messages/_TextualEvent.scss"; @import "./views/messages/_UnknownBody.scss"; +@import "./views/messages/_ViewSourceEvent.scss"; +@import "./views/right_panel/_UserInfo.scss"; @import "./views/room_settings/_AliasSettings.scss"; @import "./views/room_settings/_ColorSettings.scss"; @import "./views/rooms/_AppsDrawer.scss"; @import "./views/rooms/_Autocomplete.scss"; @import "./views/rooms/_AuxPanel.scss"; +@import "./views/rooms/_BasicMessageComposer.scss"; @import "./views/rooms/_E2EIcon.scss"; +@import "./views/rooms/_EditMessageComposer.scss"; @import "./views/rooms/_EntityTile.scss"; @import "./views/rooms/_EventTile.scss"; @import "./views/rooms/_JumpToBottomButton.scss"; @@ -136,6 +154,7 @@ @import "./views/rooms/_MemberInfo.scss"; @import "./views/rooms/_MemberList.scss"; @import "./views/rooms/_MessageComposer.scss"; +@import "./views/rooms/_MessageComposerFormatBar.scss"; @import "./views/rooms/_PinnedEventTile.scss"; @import "./views/rooms/_PinnedEventsPanel.scss"; @import "./views/rooms/_PresenceLabel.scss"; @@ -150,26 +169,31 @@ @import "./views/rooms/_RoomUpgradeWarningBar.scss"; @import "./views/rooms/_SearchBar.scss"; @import "./views/rooms/_SearchableEntityList.scss"; +@import "./views/rooms/_SendMessageComposer.scss"; @import "./views/rooms/_Stickers.scss"; @import "./views/rooms/_TopUnreadMessagesBar.scss"; @import "./views/rooms/_WhoIsTypingTile.scss"; @import "./views/settings/_DevicesPanel.scss"; @import "./views/settings/_EmailAddresses.scss"; -@import "./views/settings/_IntegrationsManager.scss"; +@import "./views/settings/_IntegrationManager.scss"; @import "./views/settings/_KeyBackupPanel.scss"; @import "./views/settings/_Notifications.scss"; @import "./views/settings/_PhoneNumbers.scss"; @import "./views/settings/_ProfileSettings.scss"; +@import "./views/settings/_SetIdServer.scss"; +@import "./views/settings/_SetIntegrationManager.scss"; @import "./views/settings/tabs/_SettingsTab.scss"; @import "./views/settings/tabs/room/_GeneralRoomSettingsTab.scss"; @import "./views/settings/tabs/room/_RolesRoomSettingsTab.scss"; @import "./views/settings/tabs/room/_SecurityRoomSettingsTab.scss"; @import "./views/settings/tabs/user/_GeneralUserSettingsTab.scss"; @import "./views/settings/tabs/user/_HelpUserSettingsTab.scss"; +@import "./views/settings/tabs/user/_MjolnirUserSettingsTab.scss"; @import "./views/settings/tabs/user/_NotificationUserSettingsTab.scss"; @import "./views/settings/tabs/user/_PreferencesUserSettingsTab.scss"; @import "./views/settings/tabs/user/_SecurityUserSettingsTab.scss"; @import "./views/settings/tabs/user/_VoiceUserSettingsTab.scss"; +@import "./views/terms/_InlineTermsAgreement.scss"; @import "./views/verification/_VerificationShowSas.scss"; @import "./views/voip/_CallView.scss"; @import "./views/voip/_IncomingCallbox.scss"; diff --git a/res/css/structures/_AutoHideScrollbar.scss b/res/css/structures/_AutoHideScrollbar.scss index db86a6fbd6..6e4484157c 100644 --- a/res/css/structures/_AutoHideScrollbar.scss +++ b/res/css/structures/_AutoHideScrollbar.scss @@ -14,12 +14,11 @@ See the License for the specific language governing permissions and limitations under the License. */ -/* This file has CSS for both native and non-native scrollbars in an - * order that's fairly logic to read but violates stylelints descending - * specificity rule, so turn it off for this file. It also duplicates - * a selector to separate the hiding/showing from the sizing. +/* This file has CSS for both native and non-native scrollbars in an order + * that's fairly logical to read but duplicates a selector to separate the + * hiding/showing from the sizing. */ -/* stylelint-disable no-descending-specificity, no-duplicate-selectors */ +/* stylelint-disable no-duplicate-selectors */ /* 1. for browsers that support native overlay auto-hiding scrollbars diff --git a/res/css/structures/_ContextualMenu.scss b/res/css/structures/_ContextualMenu.scss index fc1538a13d..fa2d87029d 100644 --- a/res/css/structures/_ContextualMenu.scss +++ b/res/css/structures/_ContextualMenu.scss @@ -1,5 +1,6 @@ /* Copyright 2015, 2016 OpenMarket Ltd +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. @@ -39,7 +40,11 @@ limitations under the License. z-index: 5001; } -.mx_ContextualMenu.mx_ContextualMenu_right { +.mx_ContextualMenu_right { + right: 0; +} + +.mx_ContextualMenu.mx_ContextualMenu_withChevron_right { right: 8px; } @@ -54,19 +59,11 @@ limitations under the License. border-bottom: 8px solid transparent; } -.mx_ContextualMenu_chevron_right::after { - content: ''; - width: 0; - height: 0; - border-top: 7px solid transparent; - border-left: 7px solid $menu-bg-color; - border-bottom: 7px solid transparent; - position: absolute; - top: -7px; - right: 1px; +.mx_ContextualMenu_left { + left: 0; } -.mx_ContextualMenu.mx_ContextualMenu_left { +.mx_ContextualMenu.mx_ContextualMenu_withChevron_left { left: 8px; } @@ -81,19 +78,11 @@ limitations under the License. border-bottom: 8px solid transparent; } -.mx_ContextualMenu_chevron_left::after { - content: ''; - width: 0; - height: 0; - border-top: 7px solid transparent; - border-right: 7px solid $menu-bg-color; - border-bottom: 7px solid transparent; - position: absolute; - top: -7px; - left: 1px; +.mx_ContextualMenu_top { + top: 0; } -.mx_ContextualMenu.mx_ContextualMenu_top { +.mx_ContextualMenu.mx_ContextualMenu_withChevron_top { top: 8px; } @@ -108,19 +97,11 @@ limitations under the License. border-right: 8px solid transparent; } -.mx_ContextualMenu_chevron_top::after { - content: ''; - width: 0; - height: 0; - border-left: 7px solid transparent; - border-bottom: 7px solid $menu-bg-color; - border-right: 7px solid transparent; - position: absolute; - left: -7px; - top: 1px; +.mx_ContextualMenu_bottom { + bottom: 0; } -.mx_ContextualMenu.mx_ContextualMenu_bottom { +.mx_ContextualMenu.mx_ContextualMenu_withChevron_bottom { bottom: 8px; } @@ -135,24 +116,6 @@ limitations under the License. border-right: 8px solid transparent; } -.mx_ContextualMenu_chevron_bottom::after { - content: ''; - width: 0; - height: 0; - border-left: 7px solid transparent; - border-top: 7px solid $menu-bg-color; - border-right: 7px solid transparent; - position: absolute; - left: -7px; - bottom: 1px; -} - -.mx_ContextualMenu_field { - padding: 3px 6px 3px 6px; - cursor: pointer; - white-space: nowrap; -} - .mx_ContextualMenu_spinner { display: block; margin: 0 auto; diff --git a/res/css/structures/_FilePanel.scss b/res/css/structures/_FilePanel.scss index 703e90f402..87e885e668 100644 --- a/res/css/structures/_FilePanel.scss +++ b/res/css/structures/_FilePanel.scss @@ -18,6 +18,7 @@ limitations under the License. order: 2; flex: 1 1 0; overflow-y: auto; + display: flex; } .mx_FilePanel .mx_RoomView_messageListWrapper { diff --git a/res/css/structures/_GenericErrorPage.scss b/res/css/structures/_GenericErrorPage.scss index 9c973af411..7e9d7bbdaa 100644 --- a/res/css/structures/_GenericErrorPage.scss +++ b/res/css/structures/_GenericErrorPage.scss @@ -2,18 +2,16 @@ width: 100%; height: 100%; background-color: #fff; + display: flex; + align-items: center; + justify-content: center; } .mx_GenericErrorPage_box { - position: absolute; - top: 0; - bottom: 0; - left: 0; - right: 0; - margin: auto; + display: inline; width: 500px; - height: 200px; + min-height: 125px; border: 1px solid #f22; - padding: 10px; + padding: 10px 10px 20px; background-color: #fcc; } diff --git a/res/css/structures/_GroupView.scss b/res/css/structures/_GroupView.scss index ae86f68fd0..4ec53a3c9a 100644 --- a/res/css/structures/_GroupView.scss +++ b/res/css/structures/_GroupView.scss @@ -44,21 +44,29 @@ limitations under the License. } .mx_GroupHeader_button { + position: relative; margin-left: 5px; margin-right: 5px; cursor: pointer; height: 20px; width: 20px; - background-color: $groupheader-button-color; - mask-repeat: no-repeat; - mask-size: contain; + + &::before { + content: ''; + position: absolute; + height: 20px; + width: 20px; + background-color: $groupheader-button-color; + mask-repeat: no-repeat; + mask-size: contain; + } } -.mx_GroupHeader_editButton { +.mx_GroupHeader_editButton::before { mask-image: url('$(res)/img/icons-settings-room.svg'); } -.mx_GroupHeader_shareButton { +.mx_GroupHeader_shareButton::before { mask-image: url('$(res)/img/icons-share.svg'); } diff --git a/res/css/structures/_LeftPanel.scss b/res/css/structures/_LeftPanel.scss index a8d8669285..85fdfa092d 100644 --- a/res/css/structures/_LeftPanel.scss +++ b/res/css/structures/_LeftPanel.scss @@ -24,13 +24,13 @@ limitations under the License. .mx_LeftPanel_container.collapsed { min-width: unset; - /* Collapsed LeftPanel 70px */ - flex: 0 0 70px; + /* Collapsed LeftPanel 50px */ + flex: 0 0 50px; } .mx_LeftPanel_container.collapsed.mx_LeftPanel_container_hasTagPanel { - /* TagPanel 70px + Collapsed LeftPanel 70px */ - flex: 0 0 140px; + /* TagPanel 70px + Collapsed LeftPanel 50px */ + flex: 0 0 120px; } .mx_LeftPanel_tagPanelContainer { @@ -125,3 +125,53 @@ limitations under the License. margin-top: 12px; } } + +.mx_LeftPanel_exploreAndFilterRow { + display: flex; + + .mx_SearchBox { + flex: 1 1 0; + min-width: 0; + margin: 4px 9px 1px 9px; + } +} + +.mx_LeftPanel_explore { + flex: 0 0 50%; + overflow: hidden; + transition: flex-basis 0.2s; + box-sizing: border-box; + + &.mx_LeftPanel_explore_hidden { + flex-basis: 0; + } + + .mx_AccessibleButton { + font-size: 14px; + margin: 4px 0 1px 9px; + padding: 9px; + padding-left: 42px; + font-weight: 600; + color: $notice-secondary-color; + position: relative; + border-radius: 4px; + + &:hover { + background-color: $primary-bg-color; + } + + &::before { + cursor: pointer; + mask: url('$(res)/img/explore.svg'); + mask-repeat: no-repeat; + mask-position: center center; + content: ""; + left: 14px; + top: 10px; + width: 16px; + height: 16px; + background-color: $notice-secondary-color; + position: absolute; + } + } +} diff --git a/res/css/structures/_NotificationPanel.scss b/res/css/structures/_NotificationPanel.scss index 78b3522d4e..c9e0261ec9 100644 --- a/res/css/structures/_NotificationPanel.scss +++ b/res/css/structures/_NotificationPanel.scss @@ -18,6 +18,7 @@ limitations under the License. order: 2; flex: 1 1 0; overflow-y: auto; + display: flex; } .mx_NotificationPanel .mx_RoomView_messageListWrapper { diff --git a/res/css/structures/_RightPanel.scss b/res/css/structures/_RightPanel.scss index c63db5d274..973f6fe9b3 100644 --- a/res/css/structures/_RightPanel.scss +++ b/res/css/structures/_RightPanel.scss @@ -50,18 +50,18 @@ limitations under the License. height: 20px; width: 20px; position: relative; -} -.mx_RightPanel_headerButton::before { - content: ''; - position: absolute; - top: 0; - left: 0; - height: 20px; - width: 20px; - background-color: $rightpanel-button-color; - mask-repeat: no-repeat; - mask-size: contain; + &::before { + content: ''; + position: absolute; + top: 0; + left: 0; + height: 20px; + width: 20px; + background-color: $rightpanel-button-color; + mask-repeat: no-repeat; + mask-size: contain; + } } .mx_RightPanel_membersButton::before { diff --git a/res/css/structures/_RoomDirectory.scss b/res/css/structures/_RoomDirectory.scss index bcfe3aefd6..4b49332af7 100644 --- a/res/css/structures/_RoomDirectory.scss +++ b/res/css/structures/_RoomDirectory.scss @@ -17,7 +17,6 @@ limitations under the License. .mx_RoomDirectory_dialogWrapper > .mx_Dialog { max-width: 960px; height: 100%; - padding: 20px; } .mx_RoomDirectory_dialog { @@ -35,24 +34,6 @@ limitations under the License. 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; @@ -91,9 +72,8 @@ limitations under the License. } .mx_RoomDirectory_roomAvatar { - width: 24px; - padding-left: 12px; - padding-right: 24px; + width: 32px; + padding-right: 14px; vertical-align: top; } @@ -101,6 +81,35 @@ limitations under the License. padding-bottom: 16px; } +.mx_RoomDirectory_roomMemberCount { + color: $light-fg-color; + width: 60px; + padding: 0 10px; + text-align: center; + + &::before { + background-color: $light-fg-color; + display: inline-block; + vertical-align: text-top; + margin-right: 2px; + content: ""; + mask: url('$(res)/img/feather-customised/user.svg'); + mask-repeat: no-repeat; + mask-position: center; + // scale it down and make the size slightly bigger (16 instead of 14px) + // to avoid rendering artifacts + mask-size: 80%; + width: 16px; + height: 16px; + } +} + +.mx_RoomDirectory_join, .mx_RoomDirectory_preview { + width: 80px; + text-align: center; + white-space: nowrap; +} + .mx_RoomDirectory_name { display: inline-block; font-weight: 600; @@ -110,22 +119,9 @@ limitations under the License. display: inline-block; } -.mx_RoomDirectory_perm { - display: inline; - padding-left: 5px; - padding-right: 5px; - margin-right: 5px; - height: 15px; - border-radius: 11px; - background-color: $plinth-bg-color; - text-transform: uppercase; - font-weight: 600; - font-size: 11px; - color: $accent-color; -} - .mx_RoomDirectory_topic { cursor: initial; + color: $light-fg-color; } .mx_RoomDirectory_alias { @@ -133,13 +129,20 @@ limitations under the License. color: $settings-grey-fg-color; } -.mx_RoomDirectory_roomMemberCount { - text-align: right; - width: 100px; - padding-right: 10px; -} - .mx_RoomDirectory_table tr { padding-bottom: 10px; cursor: pointer; } + +.mx_RoomDirectory .mx_RoomView_MessageList { + padding: 0; +} + +.mx_RoomDirectory p { + font-size: 14px; + margin-top: 0; + + .mx_AccessibleButton { + padding: 0; + } +} diff --git a/res/css/structures/_RoomSubList.scss b/res/css/structures/_RoomSubList.scss index 15fddba817..be44563cfb 100644 --- a/res/css/structures/_RoomSubList.scss +++ b/res/css/structures/_RoomSubList.scss @@ -20,7 +20,7 @@ limitations under the License. so they ideally wouldn't affect each other. lowest category: .mx_RoomSubList flex-shrink: 10000000 - distribute size of items within the same categery by their size + distribute size of items within the same category by their size middle category: .mx_RoomSubList.resized-sized flex-shrink: 1000 applied when using the resizer, will have a max-height set to it, @@ -46,10 +46,15 @@ limitations under the License. flex-direction: row; align-items: center; flex: 0 0 auto; - margin: 0 16px; + margin: 0 8px; + padding: 0 8px; height: 36px; } +.mx_RoomSubList_labelContainer.focus-visible:focus-within { + background-color: $roomtile-focused-bg-color; +} + .mx_RoomSubList_label { flex: 1; cursor: pointer; @@ -67,13 +72,13 @@ limitations under the License. margin-left: 8px; } -.mx_RoomSubList_badge { +.mx_RoomSubList_badge > div { flex: 0 0 auto; border-radius: 8px; - color: $accent-fg-color; font-weight: 600; font-size: 12px; padding: 0 5px; + color: $roomtile-badge-fg-color; background-color: $roomtile-name-color; cursor: pointer; } @@ -103,7 +108,8 @@ limitations under the License. } } -.mx_RoomSubList_badgeHighlight { +.mx_RoomSubList_badgeHighlight > div { + color: $accent-fg-color; background-color: $warning-color; } @@ -143,8 +149,9 @@ limitations under the License. } .mx_RoomSubList_labelContainer { - margin-right: 14px; + margin-right: 8px; margin-left: 2px; + padding: 0; } .mx_RoomSubList_addRoom { diff --git a/res/css/structures/_RoomView.scss b/res/css/structures/_RoomView.scss index 50d412ad58..5e826306c6 100644 --- a/res/css/structures/_RoomView.scss +++ b/res/css/structures/_RoomView.scss @@ -221,6 +221,9 @@ hr.mx_RoomView_myReadMarker { position: relative; top: -1px; z-index: 1; + transition: width 400ms easeInSine 1s, opacity 400ms easeInSine 1s; + width: 99%; + opacity: 1; } .mx_RoomView_callStatusBar .mx_UploadBar_uploadProgressInner { diff --git a/res/css/structures/_SearchBox.scss b/res/css/structures/_SearchBox.scss index 9434d93bd2..23ee06f7b3 100644 --- a/res/css/structures/_SearchBox.scss +++ b/res/css/structures/_SearchBox.scss @@ -14,12 +14,21 @@ See the License for the specific language governing permissions and limitations under the License. */ -.mx_SearchBox_closeButton { - cursor: pointer; - background-image: url('$(res)/img/icons-close.svg'); - background-repeat: no-repeat; - width: 16px; - height: 16px; - background-position: center; - padding: 9px; +.mx_SearchBox { + flex: 1 1 0; + min-width: 0; + + &.mx_SearchBox_blurred:not(:hover) { + background-color: transparent; + } + + .mx_SearchBox_closeButton { + cursor: pointer; + background-image: url('$(res)/img/icons-close.svg'); + background-repeat: no-repeat; + width: 16px; + height: 16px; + background-position: center; + padding: 9px; + } } diff --git a/res/css/structures/_TagPanel.scss b/res/css/structures/_TagPanel.scss index a818f52125..b03d36a592 100644 --- a/res/css/structures/_TagPanel.scss +++ b/res/css/structures/_TagPanel.scss @@ -63,7 +63,6 @@ limitations under the License. display: flex; flex-direction: column; align-items: center; - margin-top: 5px; height: 100%; } diff --git a/res/css/structures/_ToastContainer.scss b/res/css/structures/_ToastContainer.scss new file mode 100644 index 0000000000..4c5e746e66 --- /dev/null +++ b/res/css/structures/_ToastContainer.scss @@ -0,0 +1,98 @@ +/* +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_ToastContainer { + position: absolute; + top: 0; + left: 70px; + z-index: 101; + padding: 4px; + display: grid; + grid-template-rows: 1fr 14px 6px; + + &.mx_ToastContainer_stacked::before { + content: ""; + margin: 0 4px; + grid-row: 2 / 4; + grid-column: 1; + background-color: white; + box-shadow: 0px 4px 12px $menu-box-shadow-color; + border-radius: 8px; + } + + .mx_Toast_toast { + grid-row: 1 / 3; + grid-column: 1; + color: $primary-fg-color; + background-color: $primary-bg-color; + box-shadow: 0px 4px 12px $menu-box-shadow-color; + border-radius: 8px; + overflow: hidden; + display: grid; + grid-template-columns: 20px 1fr; + column-gap: 10px; + row-gap: 4px; + padding: 8px; + padding-right: 16px; + + &.mx_Toast_hasIcon { + &::after { + content: ""; + width: 20px; + height: 20px; + grid-column: 1; + grid-row: 1; + mask-size: 100%; + mask-repeat: no-repeat; + } + + &.mx_Toast_icon_verification::after { + mask-image: url("$(res)/img/e2e/normal.svg"); + background-color: $primary-fg-color; + } + + h2, .mx_Toast_body { + grid-column: 2; + } + } + + h2 { + grid-column: 1 / 3; + grid-row: 1; + margin: 0; + font-size: 15px; + font-weight: 600; + } + + .mx_Toast_body { + grid-column: 1 / 3; + grid-row: 2; + } + + .mx_Toast_buttons { + display: flex; + } + + .mx_Toast_description { + max-width: 400px; + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; + margin: 4px 0 11px 0; + font-size: 12px; + } + } +} diff --git a/res/css/structures/_TopLeftMenuButton.scss b/res/css/structures/_TopLeftMenuButton.scss index 94a391ae70..ee03978f18 100644 --- a/res/css/structures/_TopLeftMenuButton.scss +++ b/res/css/structures/_TopLeftMenuButton.scss @@ -22,7 +22,7 @@ limitations under the License. display: flex; align-items: center; min-width: 0; - padding: 0 7px; + padding: 0 4px; overflow: hidden; } diff --git a/res/css/structures/auth/_Login.scss b/res/css/structures/auth/_Login.scss index 2cf6276557..4ce90cc6bd 100644 --- a/res/css/structures/auth/_Login.scss +++ b/res/css/structures/auth/_Login.scss @@ -30,6 +30,7 @@ limitations under the License. .mx_Login_submit:disabled { opacity: 0.3; + cursor: default; } .mx_AuthBody a.mx_Login_sso_link:link, @@ -62,6 +63,15 @@ limitations under the License. margin-bottom: 12px; } +.mx_Login_error.mx_Login_serverError { + text-align: left; + font-weight: normal; +} + +.mx_Login_error.mx_Login_serverError.mx_Login_serverErrorNonFatal { + color: $orange-warning-color; +} + .mx_Login_type_container { display: flex; align-items: center; @@ -73,9 +83,9 @@ limitations under the License. } .mx_Login_type_label { - flex-grow: 1; + flex: 1; } -.mx_Login_type_dropdown { - min-width: 200px; +.mx_Login_underlinedServerName { + border-bottom: 1px dashed $accent-color; } diff --git a/res/css/views/auth/_AuthBody.scss b/res/css/views/auth/_AuthBody.scss index 16ac876869..b05629003e 100644 --- a/res/css/views/auth/_AuthBody.scss +++ b/res/css/views/auth/_AuthBody.scss @@ -39,8 +39,7 @@ limitations under the License. a:link, a:hover, a:visited { - color: $accent-color; - text-decoration: none; + @mixin mx_Dialog_link; } input[type=text], @@ -58,12 +57,12 @@ limitations under the License. color: $authpage-primary-color; } + .mx_Field_labelAlwaysTopLeft label, + .mx_Field select + label /* Always show a select's label on top to not collide with the value */, .mx_Field input:focus + label, .mx_Field input:not(:placeholder-shown) + label, .mx_Field textarea:focus + label, - .mx_Field textarea:not(:placeholder-shown) + label, - .mx_Field select + label /* Always show a select's label on top to not collide with the value */, - .mx_Field_labelAlwaysTopLeft label { + .mx_Field textarea:not(:placeholder-shown) + label { background-color: $authpage-body-bg-color; } @@ -72,7 +71,6 @@ limitations under the License. } .mx_Field input { - width: 100%; box-sizing: border-box; } @@ -110,7 +108,6 @@ limitations under the License. .mx_AuthBody_fieldRow > .mx_Field { margin: 0 5px; - flex: 1; } .mx_AuthBody_fieldRow > .mx_Field:first-child { diff --git a/res/css/views/auth/_InteractiveAuthEntryComponents.scss b/res/css/views/auth/_InteractiveAuthEntryComponents.scss index e2ea7d86fb..85007aeecb 100644 --- a/res/css/views/auth/_InteractiveAuthEntryComponents.scss +++ b/res/css/views/auth/_InteractiveAuthEntryComponents.scss @@ -49,10 +49,14 @@ limitations under the License. } .mx_InteractiveAuthEntryComponents_termsSubmit:disabled { - background-color: $accent-color-50pct; + background-color: $accent-color-darker; cursor: default; } .mx_InteractiveAuthEntryComponents_termsPolicy { display: block; -} \ No newline at end of file +} + +.mx_InteractiveAuthEntryComponents_passwordSection { + width: 300px; +} diff --git a/res/css/views/auth/_ServerConfig.scss b/res/css/views/auth/_ServerConfig.scss index 79ad9e8238..a7e0057ab3 100644 --- a/res/css/views/auth/_ServerConfig.scss +++ b/res/css/views/auth/_ServerConfig.scss @@ -1,5 +1,6 @@ /* Copyright 2015, 2016 OpenMarket Ltd +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. @@ -14,24 +15,21 @@ See the License for the specific language governing permissions and limitations under the License. */ -.mx_ServerConfig_fields { - display: flex; - margin: 1em 0; -} - -.mx_ServerConfig_fields .mx_Field { - flex: 1; - margin: 0 5px; -} - -.mx_ServerConfig_fields .mx_Field:first-child { - margin-left: 0; -} - -.mx_ServerConfig_fields .mx_Field:last-child { - margin-right: 0; -} - .mx_ServerConfig_help:link { opacity: 0.8; } + +.mx_ServerConfig_error { + display: block; + color: $warning-color; +} + +.mx_ServerConfig_identityServer { + transform: scaleY(0); + transform-origin: top; + transition: transform 0.25s; + + &.mx_ServerConfig_identityServer_shown { + transform: scaleY(1); + } +} diff --git a/res/css/views/context_menus/_RoomTileContextMenu.scss b/res/css/views/context_menus/_RoomTileContextMenu.scss index f832691be4..308cecfe1e 100644 --- a/res/css/views/context_menus/_RoomTileContextMenu.scss +++ b/res/css/views/context_menus/_RoomTileContextMenu.scss @@ -18,6 +18,18 @@ limitations under the License. padding: 6px; } +.mx_RoomTileContextMenu_tag_icon { + padding-right: 8px; + padding-left: 4px; + display: inline-block; +} + +.mx_RoomTileContextMenu_tag_icon_set { + padding-right: 8px; + padding-left: 4px; + display: none; +} + .mx_RoomTileContextMenu_tag_field, .mx_RoomTileContextMenu_leave { padding-top: 8px; padding-right: 20px; @@ -45,18 +57,6 @@ limitations under the License. color: rgba(0, 0, 0, 0.2); } -.mx_RoomTileContextMenu_tag_icon { - padding-right: 8px; - padding-left: 4px; - display: inline-block -} - -.mx_RoomTileContextMenu_tag_icon_set { - padding-right: 8px; - padding-left: 4px; - display: none; -} - .mx_RoomTileContextMenu_separator { margin-top: 0; margin-bottom: 0; @@ -72,10 +72,6 @@ limitations under the License. color: $warning-color; } -.mx_RoomTileContextMenu_tag_fieldSet .mx_RoomTileContextMenu_tag_icon { - /* Something to indicate that the icon is the set tag */ -} - .mx_RoomTileContextMenu_notif_picker { position: absolute; top: 16px; diff --git a/res/css/views/context_menus/_TagTileContextMenu.scss b/res/css/views/context_menus/_TagTileContextMenu.scss index 799151b198..46b279ce2d 100644 --- a/res/css/views/context_menus/_TagTileContextMenu.scss +++ b/res/css/views/context_menus/_TagTileContextMenu.scss @@ -33,7 +33,7 @@ limitations under the License. .mx_TagTileContextMenu_item_icon { padding-right: 8px; padding-left: 4px; - display: inline-block + display: inline-block; } .mx_TagTileContextMenu_separator { diff --git a/res/css/views/context_menus/_TopLeftMenu.scss b/res/css/views/context_menus/_TopLeftMenu.scss index 113da004b8..9d258bcf55 100644 --- a/res/css/views/context_menus/_TopLeftMenu.scss +++ b/res/css/views/context_menus/_TopLeftMenu.scss @@ -89,5 +89,4 @@ limitations under the License. background-color: $menu-selected-color; } } - } diff --git a/res/css/views/context_menus/_WidgetContextMenu.scss b/res/css/views/context_menus/_WidgetContextMenu.scss new file mode 100644 index 0000000000..60b7b93f99 --- /dev/null +++ b/res/css/views/context_menus/_WidgetContextMenu.scss @@ -0,0 +1,36 @@ +/* +Copyright 2019 The Matrix.org Foundaction 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_WidgetContextMenu { + padding: 6px; + + .mx_WidgetContextMenu_option { + padding: 3px 6px 3px 6px; + cursor: pointer; + white-space: nowrap; + } + + .mx_WidgetContextMenu_separator { + margin-top: 0; + margin-bottom: 0; + border-bottom-style: none; + border-left-style: none; + border-right-style: none; + border-top-style: solid; + border-top-width: 1px; + border-color: $menu-border-color; + } +} diff --git a/res/css/views/dialogs/_AddressPickerDialog.scss b/res/css/views/dialogs/_AddressPickerDialog.scss index b4d4a74cb5..39a9260ba3 100644 --- a/res/css/views/dialogs/_AddressPickerDialog.scss +++ b/res/css/views/dialogs/_AddressPickerDialog.scss @@ -1,6 +1,7 @@ /* Copyright 2016 OpenMarket Ltd Copyright 2019 New Vector Ltd +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. @@ -15,10 +16,17 @@ See the License for the specific language governing permissions and limitations under the License. */ +.mx_AddressPickerDialog { + a:link, + a:hover, + a:visited { + @mixin mx_Dialog_link; + } +} + /* Using a textarea for this element, to circumvent autofill */ .mx_AddressPickerDialog_input, -.mx_AddressPickerDialog_input:focus -{ +.mx_AddressPickerDialog_input:focus { height: 26px; font-size: 14px; font-family: $font-family; @@ -36,7 +44,7 @@ limitations under the License. } .mx_AddressPickerDialog .mx_Dialog_content { - min-height: 50px + min-height: 50px; } .mx_AddressPickerDialog_inputContainer { @@ -68,3 +76,6 @@ limitations under the License. pointer-events: none; } +.mx_AddressPickerDialog_identityServer { + margin-top: 1em; +} diff --git a/res/css/views/dialogs/_CreateRoomDialog.scss b/res/css/views/dialogs/_CreateRoomDialog.scss index 05d5bfcebf..d3a8f6ff42 100644 --- a/res/css/views/dialogs/_CreateRoomDialog.scss +++ b/res/css/views/dialogs/_CreateRoomDialog.scss @@ -14,8 +14,29 @@ See the License for the specific language governing permissions and limitations under the License. */ -.mx_CreateRoomDialog_details_summary { - outline: none; +.mx_CreateRoomDialog_details { + .mx_CreateRoomDialog_details_summary { + outline: none; + list-style: none; + font-weight: 600; + cursor: pointer; + color: $accent-color; + + // list-style doesn't do it for webkit + &::-webkit-details-marker { + display: none; + } + } + + > div { + display: flex; + align-items: start; + margin: 5px 0; + + input[type=checkbox] { + margin-right: 10px; + } + } } .mx_CreateRoomDialog_label { @@ -36,3 +57,38 @@ limitations under the License. background-color: $primary-bg-color; width: 100%; } + +// needed to make the alias field only grow as wide as needed +// as opposed to full width +.mx_CreateRoomDialog_aliasContainer { + display: flex; + // put margin on container so it can collapse with siblings + margin: 10px 0; + + .mx_RoomAliasField { + margin: 0; + } +} + +.mx_CreateRoomDialog { + + &.mx_Dialog_fixedWidth { + width: 450px; + } + + .mx_SettingsFlag { + display: flex; + } + + .mx_SettingsFlag_label { + flex: 1 1 0; + min-width: 0; + font-weight: 600; + } + + .mx_ToggleSwitch { + flex: 0 0 auto; + margin-left: 30px; + } +} + diff --git a/res/css/views/dialogs/_DeactivateAccountDialog.scss b/res/css/views/dialogs/_DeactivateAccountDialog.scss index dc76da5b15..192917b2d0 100644 --- a/res/css/views/dialogs/_DeactivateAccountDialog.scss +++ b/res/css/views/dialogs/_DeactivateAccountDialog.scss @@ -21,3 +21,7 @@ limitations under the License. .mx_DeactivateAccountDialog .mx_DeactivateAccountDialog_input_section { margin-top: 60px; } + +.mx_DeactivateAccountDialog .mx_DeactivateAccountDialog_input_section .mx_Field { + width: 300px; +} diff --git a/res/css/views/dialogs/_DevtoolsDialog.scss b/res/css/views/dialogs/_DevtoolsDialog.scss index 2f01f3ecc6..9d58c999c3 100644 --- a/res/css/views/dialogs/_DevtoolsDialog.scss +++ b/res/css/views/dialogs/_DevtoolsDialog.scss @@ -23,7 +23,11 @@ limitations under the License. cursor: default !important; } -.mx_DevTools_RoomStateExplorer_button, .mx_DevTools_ServersInRoomList_button, .mx_DevTools_RoomStateExplorer_query { +.mx_DevTools_RoomStateExplorer_query { + margin-bottom: 10px; +} + +.mx_DevTools_RoomStateExplorer_button, .mx_DevTools_ServersInRoomList_button { margin-bottom: 10px; width: 100%; } @@ -41,13 +45,11 @@ limitations under the License. border-bottom: 1px solid #e5e5e5; } -.mx_DevTools_inputRow -{ +.mx_DevTools_inputRow { display: table-row; } -.mx_DevTools_inputLabelCell -{ +.mx_DevTools_inputLabelCell { display: table-cell; font-weight: bold; padding-right: 24px; @@ -58,8 +60,7 @@ limitations under the License. width: 240px; } -.mx_DevTools_inputCell input -{ +.mx_DevTools_inputCell input { display: inline-block; border: 0; border-bottom: 1px solid $input-underline-color; @@ -75,15 +76,15 @@ limitations under the License. max-width: 684px; min-height: 250px; padding: 10px; - width: 100%; } -.mx_DevTools_content .mx_Field_input { - display: inline-block; +.mx_DevTools_eventTypeStateKeyGroup { + display: flex; + flex-wrap: wrap; } -.mx_DevTools_content .mx_Field_input + .mx_Field_input { - margin-left: 42px; +.mx_DevTools_content .mx_Field_input:first-of-type { + margin-right: 42px; } .mx_DevTools_tgl { @@ -91,11 +92,11 @@ limitations under the License. // add default box-sizing for this scope &, - &:after, - &:before, + &::after, + &::before, & *, - & *:after, - & *:before, + & *::after, + & *::before, & + .mx_DevTools_tgl-btn { box-sizing: border-box; &::selection { @@ -111,8 +112,8 @@ limitations under the License. position: relative; cursor: pointer; user-select: none; - &:after, - &:before { + &::after, + &::before { position: relative; display: block; content: ""; @@ -120,16 +121,16 @@ limitations under the License. height: 100%; } - &:after { + &::after { left: 0; } - &:before { + &::before { display: none; } } - &:checked + .mx_DevTools_tgl-btn:after { + &:checked + .mx_DevTools_tgl-btn::after { left: 50%; } } @@ -140,8 +141,8 @@ limitations under the License. transition: all .2s ease; font-family: sans-serif; perspective: 100px; - &:after, - &:before { + &::after, + &::before { display: inline-block; transition: all .4s ease; width: 100%; @@ -156,34 +157,34 @@ limitations under the License. border-radius: 4px; } - &:after { + &::after { content: attr(data-tg-on); - background: #02C66F; + background: #02c66f; transform: rotateY(-180deg); } - &:before { - background: #FF3A19; + &::before { + background: #ff3a19; content: attr(data-tg-off); } - &:active:before { + &:active::before { transform: rotateY(-20deg); } } &:checked + .mx_DevTools_tgl-btn { - &:before { + &::before { transform: rotateY(180deg); } - &:after { + &::after { transform: rotateY(0); left: 0; - background: #7FC6A6; + background: #7fc6a6; } - &:active:after { + &:active::after { transform: rotateY(20deg); } } diff --git a/res/css/views/dialogs/_GroupAddressPicker.scss b/res/css/views/dialogs/_GroupAddressPicker.scss index d6c961c0ec..20a7cc1047 100644 --- a/res/css/views/dialogs/_GroupAddressPicker.scss +++ b/res/css/views/dialogs/_GroupAddressPicker.scss @@ -14,7 +14,7 @@ See the License for the specific language governing permissions and limitations under the License. */ -.mx_GroupAddressPicker_checkboxContainer{ +.mx_GroupAddressPicker_checkboxContainer { margin-top: 10px; display: flex; } diff --git a/res/css/views/dialogs/_MessageEditHistoryDialog.scss b/res/css/views/dialogs/_MessageEditHistoryDialog.scss new file mode 100644 index 0000000000..0066faccae --- /dev/null +++ b/res/css/views/dialogs/_MessageEditHistoryDialog.scss @@ -0,0 +1,67 @@ +/* +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_MessageEditHistoryDialog .mx_Dialog_header > .mx_Dialog_title { + text-align: center; +} + +.mx_MessageEditHistoryDialog { + display: flex; + flex-direction: column; + max-height: 60vh; +} + +.mx_MessageEditHistoryDialog_scrollPanel { + flex: 1 1 auto; +} + +.mx_MessageEditHistoryDialog_error { + color: $warning-color; + text-align: center; +} + +.mx_MessageEditHistoryDialog_edits { + list-style-type: none; + font-size: 14px; + padding: 0; + color: $primary-fg-color; + + span.mx_EditHistoryMessage_deletion, span.mx_EditHistoryMessage_insertion { + padding: 0px 2px; + } + + .mx_EditHistoryMessage_deletion { + color: rgb(255, 76, 85); + background-color: rgba(255, 76, 85, 0.1); + text-decoration: line-through; + } + + .mx_EditHistoryMessage_insertion { + color: rgb(26, 169, 123); + background-color: rgba(26, 169, 123, 0.1); + text-decoration: underline; + } + + .mx_EventTile_line, .mx_EventTile_content { + margin-right: 0px; + } + + .mx_MessageActionBar .mx_AccessibleButton { + font-size: 10px; + padding: 0 8px; + } +} + diff --git a/res/css/views/dialogs/_RoomSettingsDialog.scss b/res/css/views/dialogs/_RoomSettingsDialog.scss index 60b35528a1..723eb237ad 100644 --- a/res/css/views/dialogs/_RoomSettingsDialog.scss +++ b/res/css/views/dialogs/_RoomSettingsDialog.scss @@ -17,19 +17,19 @@ limitations under the License. // ICONS // ========================================================== -.mx_RoomSettingsDialog_settingsIcon:before { +.mx_RoomSettingsDialog_settingsIcon::before { mask-image: url('$(res)/img/feather-customised/settings.svg'); } -.mx_RoomSettingsDialog_securityIcon:before { +.mx_RoomSettingsDialog_securityIcon::before { mask-image: url('$(res)/img/feather-customised/lock.svg'); } -.mx_RoomSettingsDialog_rolesIcon:before { +.mx_RoomSettingsDialog_rolesIcon::before { mask-image: url('$(res)/img/feather-customised/users-sm.svg'); } -.mx_RoomSettingsDialog_warningIcon:before { +.mx_RoomSettingsDialog_warningIcon::before { mask-image: url('$(res)/img/feather-customised/warning-triangle.svg'); } diff --git a/res/css/views/dialogs/_SetEmailDialog.scss b/res/css/views/dialogs/_SetEmailDialog.scss index 588f10c9cb..9d09a208df 100644 --- a/res/css/views/dialogs/_SetEmailDialog.scss +++ b/res/css/views/dialogs/_SetEmailDialog.scss @@ -31,6 +31,3 @@ limitations under the License. box-shadow: none; border: 1px solid $accent-color; } - -.mx_SetEmailDialog_email_input_placeholder { -} diff --git a/res/css/views/dialogs/_SetPasswordDialog.scss b/res/css/views/dialogs/_SetPasswordDialog.scss index 28a8b7c9d7..325ff6c6ed 100644 --- a/res/css/views/dialogs/_SetPasswordDialog.scss +++ b/res/css/views/dialogs/_SetPasswordDialog.scss @@ -21,7 +21,6 @@ limitations under the License. color: $primary-fg-color; background-color: $primary-bg-color; font-size: 15px; - width: 100%; max-width: 280px; margin-bottom: 10px; } diff --git a/res/css/views/dialogs/_BugReportDialog.scss b/res/css/views/dialogs/_SlashCommandHelpDialog.scss similarity index 68% rename from res/css/views/dialogs/_BugReportDialog.scss rename to res/css/views/dialogs/_SlashCommandHelpDialog.scss index 90ef55b945..786a28deef 100644 --- a/res/css/views/dialogs/_BugReportDialog.scss +++ b/res/css/views/dialogs/_SlashCommandHelpDialog.scss @@ -1,5 +1,5 @@ /* -Copyright 2017 OpenMarket Ltd +Copyright Michael Telatynski <7t3chguy@gmail.com> Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. @@ -14,12 +14,11 @@ See the License for the specific language governing permissions and limitations under the License. */ -.mx_BugReportDialog .mx_Field { - flex: 1; +.mx_SlashCommandHelpDialog .mx_SlashCommandHelpDialog_headerRow h2 { + margin-bottom: 2px; } -.mx_BugReportDialog_field_input { - // TODO: We should really apply this to all .mx_Field inputs. - // See https://github.com/vector-im/riot-web/issues/9344. - flex: 1; +.mx_SlashCommandHelpDialog .mx_Dialog_content { + margin-top: 12px; + margin-bottom: 34px; } diff --git a/res/css/views/dialogs/_TabbedIntegrationManagerDialog.scss b/res/css/views/dialogs/_TabbedIntegrationManagerDialog.scss new file mode 100644 index 0000000000..0ab59c44a7 --- /dev/null +++ b/res/css/views/dialogs/_TabbedIntegrationManagerDialog.scss @@ -0,0 +1,62 @@ +/* +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_TabbedIntegrationManagerDialog .mx_Dialog { + width: 60%; + height: 70%; + overflow: hidden; + padding: 0; + max-width: initial; + max-height: initial; + position: relative; +} + +.mx_TabbedIntegrationManagerDialog_container { + // Full size of the dialog, whatever it is + position: absolute; + top: 0; + bottom: 0; + left: 0; + right: 0; + + .mx_TabbedIntegrationManagerDialog_currentManager { + width: 100%; + height: 100%; + border-top: 1px solid $accent-color; + + iframe { + background-color: #fff; + border: 0; + width: 100%; + height: 100%; + } + } +} + +.mx_TabbedIntegrationManagerDialog_tab { + display: inline-block; + border: 1px solid $accent-color; + border-bottom: 0; + border-top-left-radius: 3px; + border-top-right-radius: 3px; + padding: 10px 8px; + margin-right: 5px; +} + +.mx_TabbedIntegrationManagerDialog_currentTab { + background-color: $accent-color; + color: $accent-fg-color; +} diff --git a/res/css/views/dialogs/_TermsDialog.scss b/res/css/views/dialogs/_TermsDialog.scss new file mode 100644 index 0000000000..beb507e778 --- /dev/null +++ b/res/css/views/dialogs/_TermsDialog.scss @@ -0,0 +1,48 @@ +/* +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. +*/ + +/* + * To avoid visual glitching of two modals stacking briefly, we customise the + * terms dialog sizing when it will appear for the integration manager so that + * it gets the same basic size as the IM's own modal. + */ +.mx_TermsDialog_forIntegrationManager .mx_Dialog { + width: 60%; + height: 70%; + box-sizing: border-box; +} + +.mx_TermsDialog_termsTableHeader { + font-weight: bold; + text-align: left; +} + +.mx_TermsDialog_termsTable { + font-size: 12px; + width: 100%; +} + +.mx_TermsDialog_service, .mx_TermsDialog_summary { + padding-right: 10px; +} + +.mx_TermsDialog_link { + display: inline-block; + mask-image: url('$(res)/img/external-link.svg'); + background-color: $accent-color; + width: 10px; + height: 10px; +} diff --git a/res/css/views/dialogs/_UserSettingsDialog.scss b/res/css/views/dialogs/_UserSettingsDialog.scss index 9665ee06b4..4d831d7858 100644 --- a/res/css/views/dialogs/_UserSettingsDialog.scss +++ b/res/css/views/dialogs/_UserSettingsDialog.scss @@ -17,34 +17,38 @@ limitations under the License. // ICONS // ========================================================== -.mx_UserSettingsDialog_settingsIcon:before { +.mx_UserSettingsDialog_settingsIcon::before { mask-image: url('$(res)/img/feather-customised/settings.svg'); } -.mx_UserSettingsDialog_voiceIcon:before { +.mx_UserSettingsDialog_voiceIcon::before { mask-image: url('$(res)/img/feather-customised/phone.svg'); } -.mx_UserSettingsDialog_bellIcon:before { +.mx_UserSettingsDialog_bellIcon::before { mask-image: url('$(res)/img/feather-customised/notifications.svg'); } -.mx_UserSettingsDialog_preferencesIcon:before { +.mx_UserSettingsDialog_preferencesIcon::before { mask-image: url('$(res)/img/feather-customised/sliders.svg'); } -.mx_UserSettingsDialog_securityIcon:before { +.mx_UserSettingsDialog_securityIcon::before { mask-image: url('$(res)/img/feather-customised/lock.svg'); } -.mx_UserSettingsDialog_helpIcon:before { +.mx_UserSettingsDialog_helpIcon::before { mask-image: url('$(res)/img/feather-customised/help-circle.svg'); } -.mx_UserSettingsDialog_labsIcon:before { +.mx_UserSettingsDialog_labsIcon::before { mask-image: url('$(res)/img/feather-customised/flag.svg'); } -.mx_UserSettingsDialog_flairIcon:before { +.mx_UserSettingsDialog_mjolnirIcon::before { + mask-image: url('$(res)/img/feather-customised/face.svg'); +} + +.mx_UserSettingsDialog_flairIcon::before { mask-image: url('$(res)/img/feather-customised/flair.svg'); } diff --git a/res/css/views/dialogs/keybackup/_CreateKeyBackupDialog.scss b/res/css/views/dialogs/keybackup/_CreateKeyBackupDialog.scss index 3f4c8d2da4..7ba5f01a76 100644 --- a/res/css/views/dialogs/keybackup/_CreateKeyBackupDialog.scss +++ b/res/css/views/dialogs/keybackup/_CreateKeyBackupDialog.scss @@ -20,8 +20,8 @@ limitations under the License. } .mx_CreateKeyBackupDialog_primaryContainer { - /*FIXME: plinth colour in new theme(s). background-color: $accent-color;*/ - padding: 20px + /* FIXME: plinth colour in new theme(s). background-color: $accent-color; */ + padding: 20px; } .mx_CreateKeyBackupDialog_primaryContainer::after { diff --git a/res/css/views/dialogs/keybackup/_KeyBackupFailedDialog.scss b/res/css/views/dialogs/keybackup/_KeyBackupFailedDialog.scss index f905516bd4..05ce158413 100644 --- a/res/css/views/dialogs/keybackup/_KeyBackupFailedDialog.scss +++ b/res/css/views/dialogs/keybackup/_KeyBackupFailedDialog.scss @@ -23,7 +23,7 @@ limitations under the License. padding-left: 45px; padding-bottom: 10px; - &:before { + &::before { mask: url("$(res)/img/e2e/lock-warning-filled.svg"); mask-repeat: no-repeat; background-color: $primary-fg-color; diff --git a/res/css/views/dialogs/keybackup/_RestoreKeyBackupDialog.scss b/res/css/views/dialogs/keybackup/_RestoreKeyBackupDialog.scss index 612c921038..415a2021cc 100644 --- a/res/css/views/dialogs/keybackup/_RestoreKeyBackupDialog.scss +++ b/res/css/views/dialogs/keybackup/_RestoreKeyBackupDialog.scss @@ -13,10 +13,10 @@ 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_RestoreKeyBackupDialog_primaryContainer { - /*FIXME: plinth colour in new theme(s). background-color: $accent-color;*/ - padding: 20px + /* FIXME: plinth colour in new theme(s). background-color: $accent-color; */ + padding: 20px; } .mx_RestoreKeyBackupDialog_passPhraseInput, diff --git a/res/css/views/directory/_NetworkDropdown.scss b/res/css/views/directory/_NetworkDropdown.scss index 8d5fa5dc7b..d402f6c48f 100644 --- a/res/css/views/directory/_NetworkDropdown.scss +++ b/res/css/views/directory/_NetworkDropdown.scss @@ -36,7 +36,7 @@ limitations under the License. position: absolute; right: 10px; top: 16px; - width: 0 + width: 0; } .mx_NetworkDropdown_networkoption { diff --git a/res/css/views/elements/_AccessibleButton.scss b/res/css/views/elements/_AccessibleButton.scss index fe1f283009..b87071745d 100644 --- a/res/css/views/elements/_AccessibleButton.scss +++ b/res/css/views/elements/_AccessibleButton.scss @@ -14,10 +14,6 @@ See the License for the specific language governing permissions and limitations under the License. */ -.mx_AccessibleButton:focus { - outline: 0; -} - .mx_AccessibleButton { cursor: pointer; } @@ -79,3 +75,22 @@ limitations under the License. color: $button-danger-disabled-fg-color; background-color: $button-danger-disabled-bg-color; } + +.mx_AccessibleButton_kind_link { + color: $button-link-fg-color; + background-color: $button-link-bg-color; +} + +.mx_AccessibleButton_kind_link.mx_AccessibleButton_disabled { + opacity: 0.4; +} + +.mx_AccessibleButton_hasKind.mx_AccessibleButton_kind_link_sm { + padding: 5px 12px; + color: $button-link-fg-color; + background-color: $button-link-bg-color; +} + +.mx_AccessibleButton_kind_link_sm.mx_AccessibleButton_disabled { + opacity: 0.4; +} diff --git a/res/css/views/elements/_AddressSelector.scss b/res/css/views/elements/_AddressSelector.scss index 9871a7e881..dd78fcc0f0 100644 --- a/res/css/views/elements/_AddressSelector.scss +++ b/res/css/views/elements/_AddressSelector.scss @@ -20,9 +20,8 @@ limitations under the License. width: 485px; max-height: 116px; overflow-y: auto; - border-radius: 3px; - background-color: $primary-bg-color; - border: solid 1px $accent-color; + border-radius: 3px; + border: solid 1px $accent-color; cursor: pointer; } diff --git a/res/css/views/elements/_Dropdown.scss b/res/css/views/elements/_Dropdown.scss index 2a59393499..102ac56bf9 100644 --- a/res/css/views/elements/_Dropdown.scss +++ b/res/css/views/elements/_Dropdown.scss @@ -51,13 +51,6 @@ limitations under the License. background: $primary-fg-color; } -.mx_Dropdown_input > .mx_Dropdown_option { - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; - flex: 1; -} - .mx_Dropdown_option { height: 35px; line-height: 35px; @@ -65,6 +58,13 @@ limitations under the License. padding-right: 8px; } +.mx_Dropdown_input > .mx_Dropdown_option { + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + flex: 1; +} + .mx_Dropdown_option div { overflow: hidden; text-overflow: ellipsis; diff --git a/res/css/views/elements/_EditableItemList.scss b/res/css/views/elements/_EditableItemList.scss index be96d811d3..51fa4c4423 100644 --- a/res/css/views/elements/_EditableItemList.scss +++ b/res/css/views/elements/_EditableItemList.scss @@ -42,12 +42,6 @@ limitations under the License. margin-right: 5px; } -.mx_EditableItemList_newItem .mx_Field input { - // Use 100% of the space available for the input, but don't let the 10px - // padding on either side of the input to push it out of alignment. - width: calc(100% - 20px); -} - .mx_EditableItemList_label { margin-bottom: 5px; -} \ No newline at end of file +} diff --git a/res/css/views/elements/_ErrorBoundary.scss b/res/css/views/elements/_ErrorBoundary.scss new file mode 100644 index 0000000000..e46ba69a7c --- /dev/null +++ b/res/css/views/elements/_ErrorBoundary.scss @@ -0,0 +1,34 @@ +/* +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_ErrorBoundary { + width: 100%; + height: 100%; + display: flex; + align-items: center; + justify-content: center; +} + +.mx_ErrorBoundary_body { + display: flex; + flex-direction: column; + max-width: 400px; + align-items: center; + + .mx_AccessibleButton { + margin-top: 5px; + } +} diff --git a/res/css/views/elements/_MemberEventListSummary.scss b/res/css/views/elements/_EventListSummary.scss similarity index 75% rename from res/css/views/elements/_MemberEventListSummary.scss rename to res/css/views/elements/_EventListSummary.scss index 02ecb5d84a..99a5c06a5f 100644 --- a/res/css/views/elements/_MemberEventListSummary.scss +++ b/res/css/views/elements/_EventListSummary.scss @@ -14,28 +14,28 @@ See the License for the specific language governing permissions and limitations under the License. */ -.mx_MemberEventListSummary { +.mx_EventListSummary { position: relative; } -.mx_TextualEvent.mx_MemberEventListSummary_summary { +.mx_TextualEvent.mx_EventListSummary_summary { font-size: 14px; display: inline-flex; } -.mx_MemberEventListSummary_avatars { +.mx_EventListSummary_avatars { display: inline-block; margin-right: 8px; padding-top: 8px; line-height: 12px; } -.mx_MemberEventListSummary_avatars .mx_BaseAvatar { +.mx_EventListSummary_avatars .mx_BaseAvatar { margin-right: -4px; cursor: pointer; } -.mx_MemberEventListSummary_toggle { +.mx_EventListSummary_toggle { color: $accent-color; cursor: pointer; float: right; @@ -43,29 +43,29 @@ limitations under the License. margin-top: 8px; } -.mx_MemberEventListSummary_line { +.mx_EventListSummary_line { border-bottom: 1px solid $primary-hairline-color; margin-left: 63px; line-height: 30px; } .mx_MatrixChat_useCompactLayout { - .mx_MemberEventListSummary { + .mx_EventListSummary { font-size: 13px; .mx_EventTile_line { line-height: 20px; } } - .mx_MemberEventListSummary_line { + .mx_EventListSummary_line { line-height: 22px; } - .mx_MemberEventListSummary_toggle { + .mx_EventListSummary_toggle { margin-top: 3px; } - .mx_TextualEvent.mx_MemberEventListSummary_summary { + .mx_TextualEvent.mx_EventListSummary_summary { font-size: 13px; } } diff --git a/res/css/views/elements/_Field.scss b/res/css/views/elements/_Field.scss index 147bb3b471..b260d4b097 100644 --- a/res/css/views/elements/_Field.scss +++ b/res/css/views/elements/_Field.scss @@ -18,6 +18,8 @@ limitations under the License. .mx_Field { display: flex; + flex: 1; + min-width: 0; position: relative; margin: 1em 0; border-radius: 4px; @@ -29,6 +31,10 @@ limitations under the License. border-right: 1px solid $input-border-color; } +.mx_Field_postfix { + border-left: 1px solid $input-border-color; +} + .mx_Field input, .mx_Field select, .mx_Field textarea { @@ -42,6 +48,8 @@ limitations under the License. padding: 8px 9px; color: $primary-fg-color; background-color: $primary-bg-color; + flex: 1; + min-width: 0; } .mx_Field select { @@ -107,12 +115,12 @@ limitations under the License. max-width: calc(100% - 20px); // 100% of parent minus margin and padding } +.mx_Field_labelAlwaysTopLeft label, +.mx_Field select + label /* Always show a select's label on top to not collide with the value */, .mx_Field input:focus + label, .mx_Field input:not(:placeholder-shown) + label, .mx_Field textarea:focus + label, -.mx_Field textarea:not(:placeholder-shown) + label, -.mx_Field select + label /* Always show a select's label on top to not collide with the value */, -.mx_Field_labelAlwaysTopLeft label { +.mx_Field textarea:not(:placeholder-shown) + label { transition: font-size 0.25s ease-out 0s, color 0.25s ease-out 0s, diff --git a/res/css/views/elements/_FormButton.scss b/res/css/views/elements/_FormButton.scss new file mode 100644 index 0000000000..1483fe2091 --- /dev/null +++ b/res/css/views/elements/_FormButton.scss @@ -0,0 +1,36 @@ +/* +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_FormButton { + line-height: 16px; + padding: 5px 15px; + font-size: 12px; + height: min-content; + + &:not(:last-child) { + margin-right: 8px; + } + + &.mx_AccessibleButton_kind_primary { + color: $accent-color; + background-color: $accent-bg-color; + } + + &.mx_AccessibleButton_kind_danger { + color: $notice-primary-color; + background-color: $notice-primary-bg-color; + } +} diff --git a/res/css/views/elements/_IconButton.scss b/res/css/views/elements/_IconButton.scss new file mode 100644 index 0000000000..d8ebbeb65e --- /dev/null +++ b/res/css/views/elements/_IconButton.scss @@ -0,0 +1,55 @@ +/* +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_IconButton { + width: 32px; + height: 32px; + border-radius: 100%; + background-color: $accent-bg-color; + // don't shrink or grow if in a flex container + flex: 0 0 auto; + + &.mx_AccessibleButton_disabled { + background-color: none; + + &::before { + background-color: lightgrey; + } + } + + &:hover { + opacity: 90%; + } + + &::before { + content: ""; + display: block; + width: 100%; + height: 100%; + mask-repeat: no-repeat; + mask-position: center; + mask-size: 55%; + background-color: $accent-color; + } + + &.mx_IconButton_icon_check::before { + mask-image: url('$(res)/img/feather-customised/check.svg'); + } + + &.mx_IconButton_icon_edit::before { + mask-image: url('$(res)/img/feather-customised/edit.svg'); + } +} diff --git a/res/css/views/elements/_ImageView.scss b/res/css/views/elements/_ImageView.scss index 88cf2ce8ba..67b0d6d7df 100644 --- a/res/css/views/elements/_ImageView.scss +++ b/res/css/views/elements/_ImageView.scss @@ -128,8 +128,8 @@ limitations under the License. } .mx_ImageView_link { - color: $lightbox-fg-color ! important; - text-decoration: none ! important; + color: $lightbox-fg-color !important; + text-decoration: none !important; } .mx_ImageView_button { diff --git a/res/css/views/elements/_InteractiveTooltip.scss b/res/css/views/elements/_InteractiveTooltip.scss new file mode 100644 index 0000000000..17a76436e8 --- /dev/null +++ b/res/css/views/elements/_InteractiveTooltip.scss @@ -0,0 +1,91 @@ +/* +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_InteractiveTooltip_wrapper { + position: fixed; + z-index: 5000; +} + +.mx_InteractiveTooltip { + border-radius: 3px; + background-color: $interactive-tooltip-bg-color; + color: $interactive-tooltip-fg-color; + position: absolute; + font-size: 10px; + font-weight: 600; + padding: 6px; + z-index: 5001; +} + +.mx_InteractiveTooltip.mx_InteractiveTooltip_withChevron_top { + top: 10px; // 8px chevron + 2px spacing +} + +.mx_InteractiveTooltip_chevron_top { + position: absolute; + left: calc(50% - 8px); + top: -8px; + width: 0; + height: 0; + border-left: 8px solid transparent; + border-bottom: 8px solid $interactive-tooltip-bg-color; + border-right: 8px solid transparent; +} + +// Adapted from https://codyhouse.co/blog/post/css-rounded-triangles-with-clip-path +// by Sebastiano Guerriero (@guerriero_se) +@supports (clip-path: polygon(0% 0%, 100% 100%, 0% 100%)) { + .mx_InteractiveTooltip_chevron_top { + height: 16px; + width: 16px; + background-color: inherit; + border: none; + clip-path: polygon(0% 0%, 100% 100%, 0% 100%); + transform: rotate(135deg); + border-radius: 0 0 0 3px; + top: calc(-8px / 1.414); // sqrt(2) because of rotation + } +} + +.mx_InteractiveTooltip.mx_InteractiveTooltip_withChevron_bottom { + bottom: 10px; // 8px chevron + 2px spacing +} + +.mx_InteractiveTooltip_chevron_bottom { + position: absolute; + left: calc(50% - 8px); + bottom: -8px; + width: 0; + height: 0; + border-left: 8px solid transparent; + border-top: 8px solid $interactive-tooltip-bg-color; + border-right: 8px solid transparent; +} + +// Adapted from https://codyhouse.co/blog/post/css-rounded-triangles-with-clip-path +// by Sebastiano Guerriero (@guerriero_se) +@supports (clip-path: polygon(0% 0%, 100% 100%, 0% 100%)) { + .mx_InteractiveTooltip_chevron_bottom { + height: 16px; + width: 16px; + background-color: inherit; + border: none; + clip-path: polygon(0% 0%, 100% 100%, 0% 100%); + transform: rotate(-45deg); + border-radius: 0 0 0 3px; + bottom: calc(-8px / 1.414); // sqrt(2) because of rotation + } +} diff --git a/res/css/views/elements/_ManageIntegsButton.scss b/res/css/views/elements/_ManageIntegsButton.scss index 7c91b9dbde..fe8c76003b 100644 --- a/res/css/views/elements/_ManageIntegsButton.scss +++ b/res/css/views/elements/_ManageIntegsButton.scss @@ -16,6 +16,7 @@ limitations under the License. .mx_ManageIntegsButton_error { position: relative; + float: right; cursor: not-allowed; } @@ -25,18 +26,6 @@ limitations under the License. top: -5px; } -.mx_ManageIntegsButton_error { - float: right; -} - -.mx_ManageIntegsButton_error .mx_ManageIntegsButton_errorPopup { - display: none; -} - -.mx_ManageIntegsButton_error:hover .mx_ManageIntegsButton_errorPopup { - display: inline; -} - .mx_ManageIntegsButton_errorPopup { position: absolute; top: 110%; @@ -51,3 +40,11 @@ limitations under the License. text-align: center; z-index: 1000; } + +.mx_ManageIntegsButton_error .mx_ManageIntegsButton_errorPopup { + display: none; +} + +.mx_ManageIntegsButton_error:hover .mx_ManageIntegsButton_errorPopup { + display: inline; +} diff --git a/res/css/views/elements/_PowerSelector.scss b/res/css/views/elements/_PowerSelector.scss index 69f3a8eebb..799f6f246e 100644 --- a/res/css/views/elements/_PowerSelector.scss +++ b/res/css/views/elements/_PowerSelector.scss @@ -20,6 +20,5 @@ limitations under the License. .mx_PowerSelector .mx_Field select, .mx_PowerSelector .mx_Field input { - width: 100%; box-sizing: border-box; } diff --git a/res/css/views/elements/_RichText.scss b/res/css/views/elements/_RichText.scss index cf2c066589..73f0be291f 100644 --- a/res/css/views/elements/_RichText.scss +++ b/res/css/views/elements/_RichText.scss @@ -13,12 +13,6 @@ padding-left: 5px; } -.mx_EventTile_body .mx_UserPill, -.mx_EventTile_body .mx_RoomPill, -.mx_EventTile_body .mx_GroupPill { - cursor: pointer; -} - /* More specific to override `.markdown-body a` text-decoration */ .mx_EventTile_content .markdown-body a.mx_Pill { text-decoration: none; @@ -33,7 +27,7 @@ } .mx_UserPill_selected { - background-color: $accent-color ! important; + background-color: $accent-color !important; } /* More specific to override `.markdown-body a` color */ @@ -64,6 +58,12 @@ padding-right: 5px; } +.mx_EventTile_body .mx_UserPill, +.mx_EventTile_body .mx_RoomPill, +.mx_EventTile_body .mx_GroupPill { + cursor: pointer; +} + .mx_UserPill .mx_BaseAvatar, .mx_RoomPill .mx_BaseAvatar, .mx_GroupPill .mx_BaseAvatar, @@ -79,7 +79,7 @@ .mx_Markdown_ITALIC { font-style: italic; -/* + /* // interestingly, *not* using the explicit italic font // variant seems yield better results. @@ -87,7 +87,7 @@ // https://github.com/google/fonts/issues/1726 transform: skewX(-14deg); display: inline-block; -*/ + */ } .mx_Markdown_CODE { diff --git a/res/css/views/elements/_RoomAliasField.scss b/res/css/views/elements/_RoomAliasField.scss new file mode 100644 index 0000000000..0fe53b2766 --- /dev/null +++ b/res/css/views/elements/_RoomAliasField.scss @@ -0,0 +1,56 @@ +/* +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_RoomAliasField { + // if parent is a flex container, this allows the + // width to be as wide as needed, and not 100% + flex: 0 1 auto; + display: flex; + align-items: stretch; + min-width: 0; + max-width: 100%; + + input { + width: 150px; + padding-left: 0; + padding-right: 0; + } + + input::placeholder { + color: $greyed-fg-color; + font-weight: normal; + } + + .mx_Field_prefix, .mx_Field_postfix { + color: $greyed-fg-color; + border-left: none; + border-right: none; + font-weight: 600; + padding: 9px 10px; + flex: 0 0 auto; + } + + .mx_Field_postfix { + text-overflow: ellipsis; + white-space: nowrap; + overflow: hidden; + // this allows the domain name to show + // as long as it doesn't make the input shrink + // if it's too big, it shows an ellipsis + // 180: 28 for prefix, 152 for input + max-width: calc(100% - 180px); + } +} diff --git a/res/css/views/elements/_Spinner.scss b/res/css/views/elements/_Spinner.scss index aea5737918..01b4f23c2c 100644 --- a/res/css/views/elements/_Spinner.scss +++ b/res/css/views/elements/_Spinner.scss @@ -25,4 +25,4 @@ limitations under the License. .mx_MatrixChat_middlePanel .mx_Spinner { height: auto; -} \ No newline at end of file +} diff --git a/res/css/views/elements/_TextWithTooltip.scss b/res/css/views/elements/_TextWithTooltip.scss new file mode 100644 index 0000000000..a7f9cb7483 --- /dev/null +++ b/res/css/views/elements/_TextWithTooltip.scss @@ -0,0 +1,19 @@ +/* +Copyright 2019 New Vector Ltd. + +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_TextWithTooltip_tooltip { + display: none; +} diff --git a/res/css/views/elements/_ToggleSwitch.scss b/res/css/views/elements/_ToggleSwitch.scss index 1bb3a74ab1..1f4445b88c 100644 --- a/res/css/views/elements/_ToggleSwitch.scss +++ b/res/css/views/elements/_ToggleSwitch.scss @@ -44,10 +44,10 @@ limitations under the License. top: 0; } -.mx_ToggleSwitch:not(.mx_ToggleSwitch_on) > .mx_ToggleSwitch_ball { - left: 2px; -} - .mx_ToggleSwitch_on > .mx_ToggleSwitch_ball { left: 23px; // 48px switch - 20px ball - 5px padding = 23px } + +.mx_ToggleSwitch:not(.mx_ToggleSwitch_on) > .mx_ToggleSwitch_ball { + left: 2px; +} diff --git a/res/css/views/elements/_Tooltip.scss b/res/css/views/elements/_Tooltip.scss index 43ddf6dde5..cc4eb409df 100644 --- a/res/css/views/elements/_Tooltip.scss +++ b/res/css/views/elements/_Tooltip.scss @@ -36,8 +36,8 @@ limitations under the License. border-bottom: 7px solid transparent; } -.mx_Tooltip_chevron:after { - content:''; +.mx_Tooltip_chevron::after { + content: ''; width: 0; height: 0; border-top: 6px solid transparent; @@ -55,7 +55,7 @@ limitations under the License. border-radius: 4px; box-shadow: 4px 4px 12px 0 $menu-box-shadow-color; background-color: $menu-bg-color; - z-index: 2000; + z-index: 4000; // Higher than dialogs so tooltips can be used in dialogs padding: 10px; pointer-events: none; line-height: 14px; @@ -74,3 +74,19 @@ limitations under the License. animation: mx_fadeout 0.1s forwards; } } + +.mx_Tooltip_timeline { + box-shadow: none; + background-color: $tooltip-timeline-bg-color; + color: $tooltip-timeline-fg-color; + text-align: center; + border: none; + border-radius: 3px; + font-size: 14px; + line-height: 1.2; + padding: 6px 8px; + + .mx_Tooltip_chevron::after { + border-right-color: $tooltip-timeline-bg-color; + } +} diff --git a/res/css/views/elements/_ToolTipButton.scss b/res/css/views/elements/_TooltipButton.scss similarity index 87% rename from res/css/views/elements/_ToolTipButton.scss rename to res/css/views/elements/_TooltipButton.scss index c496e67515..6ea36c800e 100644 --- a/res/css/views/elements/_ToolTipButton.scss +++ b/res/css/views/elements/_TooltipButton.scss @@ -1,5 +1,6 @@ /* Copyright 2017 New Vector Ltd. +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. @@ -14,7 +15,7 @@ See the License for the specific language governing permissions and limitations under the License. */ -.mx_ToolTipButton { +.mx_TooltipButton { display: inline-block; width: 11px; height: 11px; @@ -33,17 +34,17 @@ limitations under the License. cursor: pointer; } -.mx_ToolTipButton:hover { +.mx_TooltipButton:hover { opacity: 1.0; } -.mx_ToolTipButton_container { +.mx_TooltipButton_container { position: relative; top: -18px; left: 4px; } -.mx_ToolTipButton_helpText { +.mx_TooltipButton_helpText { width: 400px; text-align: start; line-height: 17px !important; diff --git a/res/css/views/emojipicker/_EmojiPicker.scss b/res/css/views/emojipicker/_EmojiPicker.scss new file mode 100644 index 0000000000..5d9b3f2687 --- /dev/null +++ b/res/css/views/emojipicker/_EmojiPicker.scss @@ -0,0 +1,229 @@ +/* +Copyright 2019 Tulir Asokan + +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_EmojiPicker { + width: 340px; + height: 450px; + + border-radius: 4px; + + display: flex; + flex-direction: column; +} + +.mx_EmojiPicker_body { + flex: 1; + overflow-y: scroll; + scrollbar-width: thin; + scrollbar-color: rgba(0, 0, 0, 0.2) transparent; +} + +.mx_EmojiPicker_header { + padding: 4px 8px 0; + border-bottom: 1px solid $message-action-bar-border-color; +} + +.mx_EmojiPicker_anchor { + border: none; + padding: 8px 8px 6px; + border-bottom: 2px solid transparent; + background-color: transparent; + border-radius: 4px 4px 0 0; + + width: 36px; + height: 38px; + + &:not(:disabled) { + cursor: pointer; + } + + &:not(:disabled):hover { + background-color: $focus-bg-color; + border-bottom: 2px solid $button-bg-color; + } +} + +.mx_EmojiPicker_anchor::before { + background-color: $primary-fg-color; + content: ''; + display: inline-block; + mask-size: 100%; + mask-repeat: no-repeat; + width: 100%; + height: 100%; +} + +.mx_EmojiPicker_anchor:disabled::before { + background-color: $focus-bg-color; +} + +.mx_EmojiPicker_anchor_activity::before { mask-image: url('$(res)/img/emojipicker/activity.svg'); } +.mx_EmojiPicker_anchor_custom::before { mask-image: url('$(res)/img/emojipicker/custom.svg'); } +.mx_EmojiPicker_anchor_flags::before { mask-image: url('$(res)/img/emojipicker/flags.svg'); } +.mx_EmojiPicker_anchor_foods::before { mask-image: url('$(res)/img/emojipicker/foods.svg'); } +.mx_EmojiPicker_anchor_nature::before { mask-image: url('$(res)/img/emojipicker/nature.svg'); } +.mx_EmojiPicker_anchor_objects::before { mask-image: url('$(res)/img/emojipicker/objects.svg'); } +.mx_EmojiPicker_anchor_people::before { mask-image: url('$(res)/img/emojipicker/people.svg'); } +.mx_EmojiPicker_anchor_places::before { mask-image: url('$(res)/img/emojipicker/places.svg'); } +.mx_EmojiPicker_anchor_recent::before { mask-image: url('$(res)/img/emojipicker/recent.svg'); } +.mx_EmojiPicker_anchor_symbols::before { mask-image: url('$(res)/img/emojipicker/symbols.svg'); } + +.mx_EmojiPicker_anchor_visible { + border-bottom: 2px solid $button-bg-color; +} + +.mx_EmojiPicker_search { + margin: 8px; + border-radius: 4px; + border: 1px solid $input-border-color; + background-color: $primary-bg-color; + display: flex; + + input { + flex: 1; + border: none; + padding: 8px 12px; + border-radius: 4px 0; + } + + button { + border: none; + background-color: inherit; + margin: 0; + padding: 8px; + align-self: center; + width: 32px; + height: 32px; + } +} + +.mx_EmojiPicker_search_clear { + cursor: pointer; +} + +.mx_EmojiPicker_search_icon { + width: 16px; + margin: 8px; +} + +.mx_EmojiPicker_search_icon:not(.mx_EmojiPicker_search_clear) { + pointer-events: none; +} + +.mx_EmojiPicker_search_icon::after { + mask: url('$(res)/img/emojipicker/search.svg') no-repeat; + mask-size: 100%; + background-color: $primary-fg-color; + content: ''; + display: inline-block; + width: 100%; + height: 100%; +} + +.mx_EmojiPicker_search_clear::after { + mask-image: url('$(res)/img/emojipicker/delete.svg'); +} + +.mx_EmojiPicker_category { + padding: 0 12px; + display: flex; + flex-direction: column; + align-items: center; +} + +.mx_EmojiPicker_category_label { + width: 304px; +} + +.mx_EmojiPicker_list { + width: 304px; + padding: 0; + margin: 0; +} + +.mx_EmojiPicker_item_wrapper { + display: inline-block; + list-style: none; + width: 38px; + cursor: pointer; +} + +.mx_EmojiPicker_item { + display: inline-block; + font-size: 20px; + padding: 5px; + width: 100%; + height: 100%; + box-sizing: border-box; + text-align: center; + border-radius: 4px; + + &:hover { + background-color: $focus-bg-color; + } +} + +.mx_EmojiPicker_item_selected { + color: rgba(0, 0, 0, .5); + border: 1px solid $input-valid-border-color; + padding: 4px; +} + +.mx_EmojiPicker_category_label, .mx_EmojiPicker_preview_name { + font-size: 16px; + font-weight: 600; + margin: 0; +} + +.mx_EmojiPicker_footer { + border-top: 1px solid $message-action-bar-border-color; + height: 72px; + + display: flex; + align-items: center; +} + +.mx_EmojiPicker_preview_emoji { + font-size: 32px; + padding: 8px 16px; +} + +.mx_EmojiPicker_preview_text { + display: flex; + flex-direction: column; +} + +.mx_EmojiPicker_name { + text-transform: capitalize; +} + +.mx_EmojiPicker_shortcode { + color: $light-fg-color; + font-size: 14px; + + &::before, &::after { + content: ":"; + } +} + +.mx_EmojiPicker_quick { + flex-direction: column; + justify-content: space-around; +} + +.mx_EmojiPicker_quick_header .mx_EmojiPicker_name { + margin-right: 4px; +} diff --git a/res/css/views/globals/_MatrixToolbar.scss b/res/css/views/globals/_MatrixToolbar.scss index 1791d619ae..5fdf572f99 100644 --- a/res/css/views/globals/_MatrixToolbar.scss +++ b/res/css/views/globals/_MatrixToolbar.scss @@ -44,10 +44,9 @@ limitations under the License. flex: 1; } -.mx_MatrixToolbar_link -{ - color: $accent-fg-color ! important; - text-decoration: underline ! important; +.mx_MatrixToolbar_link { + color: $accent-fg-color !important; + text-decoration: underline !important; cursor: pointer; } diff --git a/res/css/views/messages/_CreateEvent.scss b/res/css/views/messages/_CreateEvent.scss index adf16d6c4a..d45645863f 100644 --- a/res/css/views/messages/_CreateEvent.scss +++ b/res/css/views/messages/_CreateEvent.scss @@ -37,6 +37,3 @@ limitations under the License. .mx_CreateEvent_header { font-weight: bold; } - -.mx_CreateEvent_link { -} diff --git a/res/css/views/messages/_DateSeparator.scss b/res/css/views/messages/_DateSeparator.scss index f8738f10e3..935ee1aba3 100644 --- a/res/css/views/messages/_DateSeparator.scss +++ b/res/css/views/messages/_DateSeparator.scss @@ -30,7 +30,7 @@ limitations under the License. border-bottom: 1px solid $panel-divider-color; } -.mx_DateSeparator > date { +.mx_DateSeparator > div { margin: 0 25px; flex: 0 0 auto; } diff --git a/res/css/views/messages/_MImageBody.scss b/res/css/views/messages/_MImageBody.scss index 86bc022829..547b16e9ad 100644 --- a/res/css/views/messages/_MImageBody.scss +++ b/res/css/views/messages/_MImageBody.scss @@ -59,3 +59,42 @@ limitations under the License. color: $imagebody-giflabel-color; pointer-events: none; } + +.mx_HiddenImagePlaceholder { + position: absolute; + left: 0; + top: 0; + bottom: 0; + right: 0; + + // To center the text in the middle of the frame + display: flex; + align-items: center; + justify-content: center; + text-align: center; + + cursor: pointer; + background-color: $header-panel-bg-color; + + .mx_HiddenImagePlaceholder_button { + color: $accent-color; + + span.mx_HiddenImagePlaceholder_eye { + margin-right: 8px; + + background-color: $accent-color; + mask-image: url('$(res)/img/feather-customised/eye.svg'); + display: inline-block; + width: 18px; + height: 14px; + } + + span:not(.mx_HiddenImagePlaceholder_eye) { + vertical-align: text-bottom; + } + } +} + +.mx_EventTile:hover .mx_HiddenImagePlaceholder { + background-color: $primary-bg-color; +} diff --git a/res/css/views/messages/_MKeyVerificationRequest.scss b/res/css/views/messages/_MKeyVerificationRequest.scss new file mode 100644 index 0000000000..ee20751083 --- /dev/null +++ b/res/css/views/messages/_MKeyVerificationRequest.scss @@ -0,0 +1,77 @@ +/* +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_KeyVerification { + + display: grid; + grid-template-columns: 24px minmax(0, 1fr) min-content; + + &.mx_KeyVerification_icon::after { + grid-column: 1; + grid-row: 1 / 3; + width: 12px; + height: 16px; + content: ""; + mask-image: url("$(res)/img/e2e/normal.svg"); + mask-repeat: no-repeat; + mask-size: 100%; + margin-top: 4px; + background-color: $primary-fg-color; + } + + &.mx_KeyVerification_icon_verified::after { + mask-image: url("$(res)/img/e2e/verified.svg"); + background-color: $accent-color; + } + + .mx_KeyVerification_title, .mx_KeyVerification_subtitle, .mx_KeyVerification_state { + overflow-wrap: break-word; + } + + .mx_KeyVerification_title { + font-weight: 600; + font-size: 15px; + grid-column: 2; + grid-row: 1; + } + + .mx_KeyVerification_subtitle { + grid-column: 2; + grid-row: 2; + } + + .mx_KeyVerification_state, .mx_KeyVerification_subtitle { + font-size: 12px; + } + + .mx_KeyVerification_state, .mx_KeyVerification_buttons { + grid-column: 3; + grid-row: 1 / 3; + } + + .mx_KeyVerification_buttons { + align-items: center; + display: flex; + } + + .mx_KeyVerification_state { + width: 130px; + padding: 10px 20px; + margin: auto 0; + text-align: center; + color: $notice-secondary-color; + } +} diff --git a/res/css/views/messages/_MStickerBody.scss b/res/css/views/messages/_MStickerBody.scss index e4977bcc34..162ee7da86 100644 --- a/res/css/views/messages/_MStickerBody.scss +++ b/res/css/views/messages/_MStickerBody.scss @@ -22,3 +22,14 @@ limitations under the License. position: absolute; top: 50%; } + +.mx_MStickerBody_hidden { + max-width: 220px; + text-decoration: none; + text-align: center; + + // To center the text in the middle of the frame + display: flex; + align-items: center; + justify-content: center; +} diff --git a/res/css/views/messages/_MessageActionBar.scss b/res/css/views/messages/_MessageActionBar.scss index 419542036e..c032051c36 100644 --- a/res/css/views/messages/_MessageActionBar.scss +++ b/res/css/views/messages/_MessageActionBar.scss @@ -1,5 +1,6 @@ /* Copyright 2019 New Vector Ltd +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. @@ -23,14 +24,33 @@ limitations under the License. line-height: 24px; border-radius: 4px; background: $message-action-bar-bg-color; - top: -13px; + top: -18px; right: 8px; user-select: none; + // Ensure the action bar appears above over things, like the read marker. + z-index: 1; + + // Adds a previous event safe area so that you can't accidentally hover the + // previous event while trying to mouse into the action bar or from the + // react button to its tooltip. + &::before { + content: ''; + position: absolute; + // tooltip safe mousing area + tooltip overhang + + // action bar + action bar offset from event + width: calc(10px + 48px + 100% + 8px); + // safe area + action bar + height: calc(20px + 100%); + top: -20px; + left: -58px; + z-index: -1; + cursor: initial; + } > * { + white-space: nowrap; display: inline-block; position: relative; - width: 27px; border: 1px solid $message-action-bar-border-color; margin-left: -1px; @@ -53,6 +73,11 @@ limitations under the License. } } + +.mx_MessageActionBar_maskButton { + width: 27px; +} + .mx_MessageActionBar_maskButton::after { content: ''; position: absolute; @@ -65,10 +90,18 @@ limitations under the License. background-color: $message-action-bar-fg-color; } +.mx_MessageActionBar_reactButton::after { + mask-image: url('$(res)/img/react.svg'); +} + .mx_MessageActionBar_replyButton::after { mask-image: url('$(res)/img/reply.svg'); } +.mx_MessageActionBar_editButton::after { + mask-image: url('$(res)/img/edit.svg'); +} + .mx_MessageActionBar_optionsButton::after { mask-image: url('$(res)/img/icon_context.svg'); } diff --git a/res/css/views/messages/_MessageTimestamp.scss b/res/css/views/messages/_MessageTimestamp.scss index e21189c59e..e5c228aa68 100644 --- a/res/css/views/messages/_MessageTimestamp.scss +++ b/res/css/views/messages/_MessageTimestamp.scss @@ -15,4 +15,6 @@ limitations under the License. */ .mx_MessageTimestamp { + color: $event-timestamp-color; + font-size: 10px; } diff --git a/res/css/views/messages/_ReactionDimension.scss b/res/css/views/messages/_MjolnirBody.scss similarity index 77% rename from res/css/views/messages/_ReactionDimension.scss rename to res/css/views/messages/_MjolnirBody.scss index 9a891d05cf..2760adfd7e 100644 --- a/res/css/views/messages/_ReactionDimension.scss +++ b/res/css/views/messages/_MjolnirBody.scss @@ -1,5 +1,5 @@ /* -Copyright 2019 New Vector Ltd +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. @@ -14,12 +14,6 @@ See the License for the specific language governing permissions and limitations under the License. */ -.mx_ReactionDimension { - width: 42px; - display: flex; - justify-content: space-evenly; -} - -.mx_ReactionDimension_disabled { +.mx_MjolnirBody { opacity: 0.4; } diff --git a/res/css/views/messages/_ReactionsRow.scss b/res/css/views/messages/_ReactionsRow.scss index fb66ffbb8c..57c02ed3e5 100644 --- a/res/css/views/messages/_ReactionsRow.scss +++ b/res/css/views/messages/_ReactionsRow.scss @@ -16,4 +16,19 @@ limitations under the License. .mx_ReactionsRow { margin: 6px 0; + color: $primary-fg-color; +} + +.mx_ReactionsRow_showAll { + text-decoration: none; + font-size: 10px; + font-weight: 600; + margin-left: 6px; + vertical-align: top; + + &:hover, + &:link, + &:visited { + color: $accent-color; + } } diff --git a/res/css/views/messages/_ReactionsRowButton.scss b/res/css/views/messages/_ReactionsRowButton.scss index 49e3930979..e54201d963 100644 --- a/res/css/views/messages/_ReactionsRowButton.scss +++ b/res/css/views/messages/_ReactionsRowButton.scss @@ -15,7 +15,7 @@ limitations under the License. */ .mx_ReactionsRowButton { - display: inline-block; + display: inline-flex; height: 20px; line-height: 21px; margin-right: 6px; @@ -24,6 +24,7 @@ limitations under the License. border-radius: 10px; background-color: $reaction-row-button-bg-color; cursor: pointer; + user-select: none; &:hover { border-color: $reaction-row-button-hover-border-color; @@ -34,3 +35,11 @@ limitations under the License. border-color: $reaction-row-button-selected-border-color; } } + +.mx_ReactionsRowButton_content { + max-width: 100px; + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; + padding-right: 4px; +} diff --git a/res/css/views/messages/_ReactionsRowButtonTooltip.scss b/res/css/views/messages/_ReactionsRowButtonTooltip.scss new file mode 100644 index 0000000000..cf4219fcec --- /dev/null +++ b/res/css/views/messages/_ReactionsRowButtonTooltip.scss @@ -0,0 +1,19 @@ +/* +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/messages/_RoomAvatarEvent.scss b/res/css/views/messages/_RoomAvatarEvent.scss index 9adce42eef..3db18c1d10 100644 --- a/res/css/views/messages/_RoomAvatarEvent.scss +++ b/res/css/views/messages/_RoomAvatarEvent.scss @@ -23,4 +23,4 @@ limitations under the License. display: inline; position: relative; top: 5px; -} \ No newline at end of file +} diff --git a/res/css/views/messages/_ViewSourceEvent.scss b/res/css/views/messages/_ViewSourceEvent.scss new file mode 100644 index 0000000000..a15924e759 --- /dev/null +++ b/res/css/views/messages/_ViewSourceEvent.scss @@ -0,0 +1,50 @@ +/* +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_EventTile_content.mx_ViewSourceEvent { + display: flex; + opacity: 0.6; + font-size: 12px; + + pre, code { + flex: 1; + } + + pre { + line-height: 1.2; + margin: 3.5px 0; + } + + .mx_ViewSourceEvent_toggle { + width: 12px; + mask-repeat: no-repeat; + mask-position: 0 center; + mask-size: auto 12px; + visibility: hidden; + background-color: $accent-color; + mask-image: url('$(res)/img/feather-customised/widget/maximise.svg'); + } + + &.mx_ViewSourceEvent_expanded .mx_ViewSourceEvent_toggle { + mask-position: 0 bottom; + margin-bottom: 7px; + mask-image: url('$(res)/img/feather-customised/widget/minimise.svg'); + } + + &:hover .mx_ViewSourceEvent_toggle { + visibility: visible; + } +} diff --git a/res/css/views/right_panel/_UserInfo.scss b/res/css/views/right_panel/_UserInfo.scss new file mode 100644 index 0000000000..df7d0a5f87 --- /dev/null +++ b/res/css/views/right_panel/_UserInfo.scss @@ -0,0 +1,244 @@ +/* +Copyright 2015, 2016 OpenMarket Ltd +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_UserInfo { + display: flex; + flex-direction: column; + flex: 1; + overflow-y: auto; + font-size: 12px; + + .mx_UserInfo_cancel { + height: 16px; + width: 16px; + padding: 10px 0 10px 10px; + cursor: pointer; + mask-image: url('$(res)/img/minimise.svg'); + mask-repeat: no-repeat; + mask-position: 16px center; + background-color: $rightpanel-button-color; + position: absolute; + } + + h2 { + font-size: 18px; + font-weight: 600; + margin: 18px 0 0 0; + } + + .mx_UserInfo_container { + padding: 0 16px 16px 16px; + border-bottom: 1px solid lightgray; + } + + .mx_UserInfo_memberDetailsContainer { + padding-bottom: 0; + } + + .mx_RoomTile_nameContainer { + width: 154px; + } + + .mx_RoomTile_badge { + display: none; + } + + .mx_RoomTile_name { + width: 160px; + } + + .mx_UserInfo_avatar { + margin: 24px 32px 0 32px; + cursor: pointer; + } + + .mx_UserInfo_avatar > div { + max-width: 30vh; + margin: 0 auto; + } + + .mx_UserInfo_avatar > div > div { + /* use padding-top instead of height to make this element square, + as the % in padding is a % of the width (including margin, + that's why we had to put the margin to center on a parent div), + and not a % of the parent height. */ + padding-top: 100%; + height: 0; + border-radius: 100%; + box-sizing: content-box; + background-repeat: no-repeat; + background-size: cover; + background-position: center; + } + + .mx_UserInfo_avatar .mx_BaseAvatar.mx_BaseAvatar_image { + cursor: zoom-in; + } + + h3 { + text-transform: uppercase; + color: $notice-secondary-color; + font-weight: bold; + font-size: 12px; + margin: 4px 0; + } + + p { + margin: 5px 0; + } + + .mx_UserInfo_profile { + text-align: center; + + h2 { + font-size: 18px; + line-height: 25px; + flex: 1; + overflow-x: auto; + max-height: 50px; + display: flex; + justify-content: center; + align-items: center; + + .mx_E2EIcon { + margin: 5px; + } + } + + .mx_UserInfo_profileStatus { + margin-top: 12px; + } + } + + .mx_UserInfo_memberDetails .mx_UserInfo_profileField { + display: flex; + justify-content: center; + align-items: center; + + margin: 6px 0; + + .mx_IconButton, .mx_Spinner { + margin-left: 20px; + width: 16px; + height: 16px; + + &::before { + mask-size: 80%; + } + } + + .mx_UserInfo_roleDescription { + display: flex; + justify-content: center; + align-items: center; + // try to make it the same height as the dropdown + margin: 11px 0 12px 0; + + .mx_IconButton { + margin-left: 6px; + } + } + + .mx_Field { + margin: 0; + } + } + + .mx_UserInfo_field { + cursor: pointer; + color: $accent-color; + line-height: 16px; + margin: 8px 0; + + &.mx_UserInfo_destructive { + color: $warning-color; + } + } + + .mx_UserInfo_statusMessage { + font-size: 11px; + opacity: 0.5; + overflow: hidden; + white-space: nowrap; + text-overflow: clip; + } + + .mx_UserInfo_scrollContainer { + flex: 1 1 0; + padding-bottom: 16px; + } + + .mx_UserInfo_scrollContainer .mx_UserInfo_container { + padding-top: 16px; + padding-bottom: 0; + border-bottom: none; + + > :not(h3) { + margin-left: 8px; + } + } + + .mx_UserInfo_devices { + .mx_UserInfo_device { + display: flex; + margin: 8px 0; + + + &.mx_UserInfo_device_verified { + .mx_UserInfo_device_trusted { + color: $accent-color; + } + } + &.mx_UserInfo_device_unverified { + .mx_UserInfo_device_trusted { + color: $warning-color; + } + } + + .mx_UserInfo_device_name { + flex: 1; + margin-right: 5px; + word-break: break-word; + } + } + + // both for icon in expand button and device item + .mx_E2EIcon { + // don't squeeze + flex: 0 0 auto; + margin: 2px 5px 0 0; + width: 12px; + height: 12px; + } + + .mx_UserInfo_expand { + display: flex; + margin-top: 11px; + color: $accent-color; + } + } + + .mx_UserInfo_verify { + display: block; + background-color: $accent-color; + color: $accent-fg-color; + border-radius: 4px; + padding: 7px 1.5em; + text-align: center; + margin: 16px 0; + } +} diff --git a/res/css/views/room_settings/_ColorSettings.scss b/res/css/views/room_settings/_ColorSettings.scss index 39b087653d..fc6a4443ad 100644 --- a/res/css/views/room_settings/_ColorSettings.scss +++ b/res/css/views/room_settings/_ColorSettings.scss @@ -28,7 +28,7 @@ limitations under the License. position: absolute; left: 10px; top: 4px; - cursor: default ! important; + cursor: default !important; } .mx_ColorSettings_roomColorPrimary { diff --git a/res/css/views/rooms/_AppsDrawer.scss b/res/css/views/rooms/_AppsDrawer.scss index db38eebfca..a3fe573ad0 100644 --- a/res/css/views/rooms/_AppsDrawer.scss +++ b/res/css/views/rooms/_AppsDrawer.scss @@ -1,5 +1,6 @@ /* Copyright 2015, 2016 OpenMarket Ltd +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. @@ -42,7 +43,6 @@ $AppsDrawerBodyHeight: 273px; .mx_AddWidget_button { order: 2; cursor: pointer; - padding-right: 12px; padding: 0; margin: 5px auto 5px auto; color: $accent-color; @@ -153,40 +153,12 @@ $AppsDrawerBodyHeight: 273px; background-color: $accent-color; } -.mx_AppTileMenuBar_iconButton.mx_AppTileMenuBar_iconButton_reload { - mask-image: url('$(res)/img/feather-customised/widget/refresh.svg'); - mask-size: 100%; -} - .mx_AppTileMenuBar_iconButton.mx_AppTileMenuBar_iconButton_popout { mask-image: url('$(res)/img/feather-customised/widget/external-link.svg'); } -.mx_AppTileMenuBar_iconButton.mx_AppTileMenuBar_iconButton_snapshot { - mask-image: url('$(res)/img/feather-customised/widget/camera.svg'); -} - -.mx_AppTileMenuBar_iconButton.mx_AppTileMenuBar_iconButton_edit { - mask-image: url('$(res)/img/feather-customised/widget/edit.svg'); -} - -.mx_AppTileMenuBar_iconButton.mx_AppTileMenuBar_iconButton_delete { - mask-image: url('$(res)/img/feather-customised/widget/bin.svg'); - background-color: $warning-color; -} - -.mx_AppTileMenuBar_iconButton.mx_AppTileMenuBar_iconButton_cancel { - mask-image: url('$(res)/img/feather-customised/widget/x-circle.svg'); -} - -/* delete ? */ -.mx_AppTileMenuBarWidget { - cursor: pointer; - width: 10px; - height: 10px; - padding: 1px; - transition-duration: 500ms; - border: 1px solid transparent; +.mx_AppTileMenuBar_iconButton.mx_AppTileMenuBar_iconButton_menu { + mask-image: url('$(res)/img/icon_context.svg'); } .mx_AppTileMenuBarWidgetDelete { @@ -198,7 +170,7 @@ $AppsDrawerBodyHeight: 273px; border-radius: 2px; } -.mx_AppTileBody{ +.mx_AppTileBody { height: $AppsDrawerBodyHeight; width: 100%; overflow: hidden; @@ -234,7 +206,7 @@ $AppsDrawerBodyHeight: 273px; background-color: $lightbox-bg-color; border: 1px solid rgba(0, 0, 0, 0); width: 200px; - box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2); + box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2); transition: 0.3s; border-radius: 3px; margin: 5px; @@ -248,7 +220,7 @@ $AppsDrawerBodyHeight: 273px; .mx_AppIconTile:hover { border: 1px solid $accent-color; - box-shadow: 0 0 10px 5px rgba(200,200,200,0.5); + box-shadow: 0 0 10px 5px rgba(200, 200, 200, 0.5); } .mx_AppIconTile_content { @@ -270,9 +242,8 @@ $AppsDrawerBodyHeight: 273px; .mx_AppIconTile_image { padding: 10px; - width: 75%; - max-width:100px; - max-height:100px; + max-width: 100px; + max-height: 100px; width: auto; height: auto; } @@ -295,44 +266,61 @@ form.mx_Custom_Widget_Form div { .mx_AppPermissionWarning { text-align: center; - background-color: $primary-bg-color; + background-color: $widget-menu-bar-bg-color; display: flex; height: 100%; flex-direction: column; justify-content: center; align-items: center; + font-size: 16px; } -.mx_AppPermissionWarningImage { - margin: 10px 0; +.mx_AppPermissionWarning_row { + margin-bottom: 12px; } -.mx_AppPermissionWarningImage img { - width: 100px; +.mx_AppPermissionWarning_smallText { + font-size: 12px; } -.mx_AppPermissionWarningText { - max-width: 400px; - margin: 10px auto 10px auto; - color: $primary-fg-color; +.mx_AppPermissionWarning_bolder { + font-weight: 600; } -.mx_AppPermissionWarningTextLabel { - font-weight: bold; - display: block; +.mx_AppPermissionWarning h4 { + margin: 0; + padding: 0; } -.mx_AppPermissionWarningTextURL { - color: $accent-color; +.mx_AppPermissionWarning_helpIcon { + margin-top: 1px; + margin-right: 2px; + width: 10px; + height: 10px; + display: inline-block; } -.mx_AppPermissionButton { - border: none; - padding: 5px 20px; - border-radius: 5px; - background-color: $button-bg-color; - color: $button-fg-color; - cursor: pointer; +.mx_AppPermissionWarning_helpIcon::before { + display: inline-block; + background-color: $accent-color; + mask-repeat: no-repeat; + mask-size: 12px; + width: 12px; + height: 12px; + mask-position: center; + content: ''; + vertical-align: middle; + mask-image: url('$(res)/img/feather-customised/help-circle.svg'); +} + +.mx_AppPermissionWarning_tooltip { + @mixin mx_Tooltip_dark; + + ul { + list-style-position: inside; + padding-left: 2px; + margin-left: 0; + } } .mx_AppLoading { @@ -361,11 +349,11 @@ form.mx_Custom_Widget_Form div { } @keyframes mx_AppLoading_spinner_fadeIn_animation { - from { opacity: 0 } - to { opacity: 1 } + from { opacity: 0; } + to { opacity: 1; } } .mx_AppLoading iframe { - display: none; + display: none; } diff --git a/res/css/views/rooms/_Autocomplete.scss b/res/css/views/rooms/_Autocomplete.scss index 3bc0ea25a4..e5316f5a46 100644 --- a/res/css/views/rooms/_Autocomplete.scss +++ b/res/css/views/rooms/_Autocomplete.scss @@ -8,18 +8,13 @@ border-bottom: none; border-radius: 4px 4px 0 0; max-height: 50vh; - overflow: auto + overflow: auto; } .mx_Autocomplete_ProviderSection { border-bottom: 1px solid $primary-hairline-color; } -.mx_Autocomplete_Completion_container_pill { - margin: 12px; - display: flex; -} - /* a "block" completion takes up a whole line */ .mx_Autocomplete_Completion_block { height: 34px; @@ -32,7 +27,7 @@ } .mx_Autocomplete_Completion_block * { - margin: 0 3px; + margin: 0 3px; } .mx_Autocomplete_Completion_pill { @@ -50,11 +45,27 @@ margin: 0 3px; } +/* styling for common completion elements */ +.mx_Autocomplete_Completion_subtitle { + font-style: italic; + flex: 1; +} + +.mx_Autocomplete_Completion_description { + color: gray; +} + +.mx_Autocomplete_Completion_container_pill { + margin: 12px; + display: flex; + flex-flow: wrap; +} + .mx_Autocomplete_Completion_container_truncate { .mx_Autocomplete_Completion_title, .mx_Autocomplete_Completion_subtitle, .mx_Autocomplete_Completion_description { - /* Ellipsis for long names/subtitles/descriptions*/ + /* Ellipsis for long names/subtitles/descriptions */ max-width: 150px; white-space: nowrap; overflow: hidden; @@ -62,13 +73,6 @@ } } -/* container for pill-style completions */ -.mx_Autocomplete_Completion_container_pill { - margin: 12px; - display: flex; - flex-flow: wrap; -} - .mx_Autocomplete_Completion.selected, .mx_Autocomplete_Completion:hover { background: $selected-color; @@ -81,14 +85,3 @@ font-weight: 400; opacity: 0.4; } - -/* styling for common completion elements */ -.mx_Autocomplete_Completion_subtitle { - font-style: italic; - flex: 1; -} - -.mx_Autocomplete_Completion_description { - color: gray; -} - diff --git a/res/css/views/rooms/_BasicMessageComposer.scss b/res/css/views/rooms/_BasicMessageComposer.scss new file mode 100644 index 0000000000..ce519b1ea7 --- /dev/null +++ b/res/css/views/rooms/_BasicMessageComposer.scss @@ -0,0 +1,76 @@ +/* +Copyright 2019 New Vector Ltd +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_BasicMessageComposer { + position: relative; + + .mx_BasicMessageComposer_inputEmpty > :first-child::before { + content: var(--placeholder); + opacity: 0.333; + width: 0; + height: 0; + overflow: visible; + display: inline-block; + pointer-events: none; + white-space: nowrap; + } + + @keyframes visualbell { + from { background-color: $visual-bell-bg-color; } + to { background-color: $primary-bg-color; } + } + + &.mx_BasicMessageComposer_input_error { + animation: 0.2s visualbell; + } + + .mx_BasicMessageComposer_input { + white-space: pre-wrap; + word-wrap: break-word; + outline: none; + overflow-x: hidden; + + span.mx_UserPill, span.mx_RoomPill { + padding-left: 21px; + position: relative; + + // avatar psuedo element + &::before { + position: absolute; + left: 2px; + top: 2px; + content: var(--avatar-letter); + width: 16px; + height: 16px; + background: var(--avatar-background), $avatar-bg-color; + color: $avatar-initial-color; + background-repeat: no-repeat; + background-size: 16px; + border-radius: 8px; + text-align: center; + font-weight: normal; + line-height: 16px; + font-size: 10.4px; + } + } + } + + .mx_BasicMessageComposer_AutoCompleteWrapper { + position: relative; + height: 0; + } +} diff --git a/res/css/views/rooms/_E2EIcon.scss b/res/css/views/rooms/_E2EIcon.scss index 84a16611de..cb99aa63f1 100644 --- a/res/css/views/rooms/_E2EIcon.scss +++ b/res/css/views/rooms/_E2EIcon.scss @@ -15,19 +15,29 @@ limitations under the License. */ .mx_E2EIcon { - width: 25px; - height: 25px; - mask-repeat: no-repeat; - mask-position: center 0; + width: 16px; + height: 16px; margin: 0 9px; + position: relative; + display: block; } -.mx_E2EIcon_verified { - mask-image: url('$(res)/img/e2e/lock-verified.svg'); - background-color: $accent-color; +.mx_E2EIcon_verified::after, .mx_E2EIcon_warning::after { + content: ""; + display: block; + position: absolute; + top: 0; + bottom: 0; + left: 0; + right: 0; + background-repeat: no-repeat; + background-size: contain; } -.mx_E2EIcon_warning { - mask-image: url('$(res)/img/e2e/lock-warning.svg'); - background-color: $warning-color; +.mx_E2EIcon_verified::after { + background-image: url('$(res)/img/e2e/verified.svg'); +} + +.mx_E2EIcon_warning::after { + background-image: url('$(res)/img/e2e/warning.svg'); } diff --git a/res/css/views/rooms/_EditMessageComposer.scss b/res/css/views/rooms/_EditMessageComposer.scss new file mode 100644 index 0000000000..214bfc4a1a --- /dev/null +++ b/res/css/views/rooms/_EditMessageComposer.scss @@ -0,0 +1,63 @@ +/* +Copyright 2019 New Vector Ltd +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_EditMessageComposer { + + padding: 3px; + // this is to try not make the text move but still have some + // padding around and in the editor. + // Actual values from fiddling around in inspector + margin: -7px -10px -5px -10px; + overflow: visible !important; // override mx_EventTile_content + + + .mx_BasicMessageComposer_input { + border-radius: 4px; + border: solid 1px $primary-hairline-color; + background-color: $primary-bg-color; + max-height: 200px; + padding: 3px 6px; + + &:focus { + border-color: $accent-color-50pct; + } + } + + .mx_EditMessageComposer_buttons { + display: flex; + flex-direction: row; + justify-content: flex-end; + padding: 5px; + position: absolute; + left: 0; + background: $header-panel-bg-color; + z-index: 100; + right: 0; + margin: 0 -110px 0 0; + padding-right: 147px; + + .mx_AccessibleButton { + margin-left: 5px; + padding: 5px 40px; + } + } +} + +.mx_EventTile_last .mx_EditMessageComposer_buttons { + position: static; + margin-right: -147px; +} diff --git a/res/css/views/rooms/_EntityTile.scss b/res/css/views/rooms/_EntityTile.scss index 44528a5624..2b6b31acb4 100644 --- a/res/css/views/rooms/_EntityTile.scss +++ b/res/css/views/rooms/_EntityTile.scss @@ -85,10 +85,6 @@ limitations under the License. overflow: hidden; } -.mx_EntityTile:not(.mx_EntityTile_noHover):hover .mx_EntityTile_name { - font-size: 13px; -} - .mx_EntityTile_ellipsis .mx_EntityTile_name { font-style: italic; color: $primary-fg-color; @@ -102,23 +98,24 @@ limitations under the License. .mx_EntityTile_unavailable .mx_EntityTile_avatar, .mx_EntityTile_unavailable .mx_EntityTile_name, .mx_EntityTile_offline_beenactive .mx_EntityTile_avatar, -.mx_EntityTile_offline_beenactive .mx_EntityTile_name -{ +.mx_EntityTile_offline_beenactive .mx_EntityTile_name { opacity: 0.5; } .mx_EntityTile_offline_neveractive .mx_EntityTile_avatar, -.mx_EntityTile_offline_neveractive .mx_EntityTile_name -{ +.mx_EntityTile_offline_neveractive .mx_EntityTile_name { opacity: 0.25; } .mx_EntityTile_unknown .mx_EntityTile_avatar, -.mx_EntityTile_unknown .mx_EntityTile_name -{ +.mx_EntityTile_unknown .mx_EntityTile_name { opacity: 0.25; } +.mx_EntityTile:not(.mx_EntityTile_noHover):hover .mx_EntityTile_name { + font-size: 13px; +} + .mx_EntityTile_subtext { font-size: 11px; opacity: 0.5; diff --git a/res/css/views/rooms/_EventTile.scss b/res/css/views/rooms/_EventTile.scss index f4c12bb734..fb85b9cf88 100644 --- a/res/css/views/rooms/_EventTile.scss +++ b/res/css/views/rooms/_EventTile.scss @@ -22,6 +22,15 @@ limitations under the License. position: relative; } +.mx_EventTile_bubble { + background-color: $dark-panel-bg-color; + padding: 10px; + border-radius: 5px; + margin: 10px auto; + max-width: 75%; + box-sizing: border-box; +} + .mx_EventTile.mx_EventTile_info { padding-top: 0px; } @@ -40,20 +49,33 @@ limitations under the License. } .mx_EventTile_continuation { - padding-top: 0px ! important; + padding-top: 0px !important; + + &.mx_EventTile_isEditing { + padding-top: 5px !important; + margin-top: -5px; + } +} + +.mx_EventTile_isEditing { + background-color: $header-panel-bg-color; } .mx_EventTile .mx_SenderProfile { color: $primary-fg-color; font-size: 14px; display: inline-block; /* anti-zalgo, with overflow hidden */ - overflow-y: hidden; + overflow: hidden; cursor: pointer; padding-left: 65px; /* left gutter */ padding-bottom: 0px; padding-top: 0px; margin: 0px; line-height: 17px; + /* the next three lines, along with overflow hidden, truncate long display names */ + white-space: nowrap; + text-overflow: ellipsis; + max-width: calc(100% - 65px); } .mx_EventTile .mx_SenderProfile .mx_Flair { @@ -72,12 +94,14 @@ limitations under the License. } } +.mx_EventTile_isEditing .mx_MessageTimestamp { + visibility: hidden !important; +} + .mx_EventTile .mx_MessageTimestamp { display: block; visibility: hidden; white-space: nowrap; - color: $event-timestamp-color; - font-size: 10px; left: 0px; width: 46px; /* 8 + 30 (avatar) + 8 */ text-align: center; @@ -97,6 +121,21 @@ limitations under the License. line-height: 22px; } +.mx_EventTile_bubbleContainer { + display: grid; + grid-template-columns: 1fr 100px; + + .mx_EventTile_line { + margin-right: 0px; + grid-column: 1 / 3; + padding: 0; + } + + .mx_EventTile_msgOption { + grid-column: 2; + } +} + .mx_EventTile_reply { margin-right: 10px; } @@ -107,8 +146,31 @@ limitations under the License. /* HACK to override line-height which is already marked important elsewhere */ .mx_EventTile_bigEmoji.mx_EventTile_bigEmoji { - font-size: 48px ! important; - line-height: 48px ! important; + font-size: 48px !important; + line-height: 57px !important; +} + +.mx_MessagePanel_alwaysShowTimestamps .mx_MessageTimestamp { + visibility: visible; +} + +.mx_EventTile_selected > div > a > .mx_MessageTimestamp { + left: 3px; + width: auto; +} + +// Explicit relationships so that it doesn't apply to nested EventTile components (e.g in Replies) +.mx_EventTile_last > div > a > .mx_MessageTimestamp, +.mx_EventTile:hover > div > a > .mx_MessageTimestamp, +.mx_EventTile.mx_EventTile_actionBarFocused > div > a > .mx_MessageTimestamp, +.mx_EventTile.focus-visible:focus-within > div > a > .mx_MessageTimestamp { + visibility: visible; +} + +.mx_EventTile:hover .mx_MessageActionBar, +.mx_EventTile.mx_EventTile_actionBarFocused .mx_MessageActionBar, +.mx_EventTile.focus-visible:focus-within .mx_MessageActionBar { + visibility: visible; } /* this is used for the tile for the event which is selected via the URL. @@ -120,9 +182,22 @@ limitations under the License. background-color: $event-selected-color; } +.mx_EventTile_highlight, +.mx_EventTile_highlight .markdown-body { + color: $event-highlight-fg-color; + + .mx_EventTile_line { + background-color: $event-highlight-bg-color; + } +} + +.mx_EventTile_selected.mx_EventTile_info .mx_EventTile_line { + padding-left: 78px; +} + .mx_EventTile:hover .mx_EventTile_line, -.mx_EventTile.mx_EventTile_actionBarFocused .mx_EventTile_line -{ +.mx_EventTile.mx_EventTile_actionBarFocused .mx_EventTile_line, +.mx_EventTile.focus-visible:focus-within .mx_EventTile_line { background-color: $event-selected-color; } @@ -141,7 +216,7 @@ limitations under the License. } .mx_EventTile_encrypting { - color: $event-encrypting-color ! important; + color: $event-encrypting-color !important; } .mx_EventTile_sending { @@ -149,8 +224,7 @@ limitations under the License. } .mx_EventTile_sending .mx_UserPill, -.mx_EventTile_sending .mx_RoomPill, -.mx_EventTile_sending .mx_emojione { +.mx_EventTile_sending .mx_RoomPill { opacity: 0.5; } @@ -160,25 +234,30 @@ limitations under the License. .mx_EventTile_redacted .mx_EventTile_line .mx_UnknownBody, .mx_EventTile_redacted .mx_EventTile_reply .mx_UnknownBody { + --lozenge-color: $event-redacted-fg-color; + --lozenge-border-color: $event-redacted-border-color; display: block; - width: 100%; height: 22px; width: 250px; border-radius: 11px; - background: repeating-linear-gradient( - -45deg, - $event-redacted-fg-color, - $event-redacted-fg-color 3px, - transparent 3px, - transparent 6px - ); - box-shadow: 0px 0px 3px $event-redacted-border-color inset; + background: + repeating-linear-gradient( + -45deg, + var(--lozenge-color), + var(--lozenge-color) 3px, + transparent 3px, + transparent 6px + ); + box-shadow: 0px 0px 3px var(--lozenge-border-color) inset; } -.mx_EventTile_highlight, -.mx_EventTile_highlight .markdown-body - { - color: $warning-color; +.mx_EventTile_sending.mx_EventTile_redacted .mx_UnknownBody { + opacity: 0.4; +} + +div.mx_EventTile_notSent.mx_EventTile_redacted .mx_UnknownBody { + --lozenge-color: $event-notsent-color; + --lozenge-border-color: $event-notsent-color; } .mx_EventTile_contextual { @@ -203,27 +282,6 @@ limitations under the License. text-decoration: none; } -// Explicit relationships so that it doesn't apply to nested EventTile components (e.g in Replies) -.mx_EventTile_last > div > a > .mx_MessageTimestamp, -.mx_EventTile:hover > div > a > .mx_MessageTimestamp, -.mx_EventTile.mx_EventTile_actionBarFocused > div > a > .mx_MessageTimestamp { - visibility: visible; -} - -.mx_MessagePanel_alwaysShowTimestamps .mx_MessageTimestamp { - visibility: visible; -} - -.mx_EventTile_selected > div > a > .mx_MessageTimestamp { - left: 3px; - width: auto; -} - -.mx_EventTile:hover .mx_MessageActionBar, -.mx_EventTile.mx_EventTile_actionBarFocused .mx_MessageActionBar { - visibility: visible; -} - .mx_EventTile_readAvatars { position: relative; display: inline-block; @@ -231,6 +289,7 @@ limitations under the License. height: 14px; top: 29px; user-select: none; + z-index: 1; } .mx_EventTile_continuation .mx_EventTile_readAvatars, @@ -268,9 +327,23 @@ limitations under the License. overflow-y: hidden; } -/* End to end encryption stuff */ -.mx_EventTile:hover .mx_EventTile_e2eIcon { - opacity: 1; +/* Spoiler stuff */ +.mx_EventTile_spoiler { + cursor: pointer; +} + +.mx_EventTile_spoiler_reason { + color: $event-timestamp-color; + font-size: 11px; +} + +.mx_EventTile_spoiler_content { + filter: blur(5px) saturate(0.1) sepia(1); + transition-duration: 0.5s; +} + +.mx_EventTile_spoiler.visible > .mx_EventTile_spoiler_content { + filter: none; } .mx_EventTile_e2eIcon { @@ -344,17 +417,22 @@ limitations under the License. padding-left: 60px; } -.mx_EventTile_selected.mx_EventTile_info .mx_EventTile_line, +.mx_EventTile:hover.mx_EventTile_verified .mx_EventTile_line { + border-left: $e2e-verified-color 5px solid; +} + +.mx_EventTile:hover.mx_EventTile_unverified .mx_EventTile_line { + border-left: $e2e-unverified-color 5px solid; +} + .mx_EventTile:hover.mx_EventTile_verified.mx_EventTile_info .mx_EventTile_line, .mx_EventTile:hover.mx_EventTile_unverified.mx_EventTile_info .mx_EventTile_line { padding-left: 78px; } -.mx_EventTile:hover.mx_EventTile_verified .mx_EventTile_line { - border-left: $e2e-verified-color 5px solid; -} -.mx_EventTile:hover.mx_EventTile_unverified .mx_EventTile_line { - border-left: $e2e-unverified-color 5px solid; +/* End to end encryption stuff */ +.mx_EventTile:hover .mx_EventTile_e2eIcon { + opacity: 1; } // Explicit relationships so that it doesn't apply to nested EventTile components (e.g in Replies) @@ -364,12 +442,6 @@ limitations under the License. width: auto; } -/* -.mx_EventTile_verified .mx_EventTile_e2eIcon { - display: none; -} -*/ - // Explicit relationships so that it doesn't apply to nested EventTile components (e.g in Replies) .mx_EventTile:hover.mx_EventTile_verified .mx_EventTile_line > .mx_EventTile_e2eIcon, .mx_EventTile:hover.mx_EventTile_unverified .mx_EventTile_line > .mx_EventTile_e2eIcon { @@ -377,36 +449,52 @@ limitations under the License. left: 41px; } +.mx_EventTile_content .mx_EventTile_edited { + user-select: none; + font-size: 12px; + color: $roomtopic-color; + display: inline-block; + margin-left: 9px; + cursor: pointer; +} + /* Various markdown overrides */ +.mx_EventTile_body pre { + border: 1px solid transparent; +} + .mx_EventTile_content .markdown-body { - font-family: inherit ! important; - white-space: normal ! important; - line-height: inherit ! important; + font-family: inherit !important; + white-space: normal !important; + line-height: inherit !important; color: inherit; // inherit the colour from the dark or light theme by default (but not for code blocks) font-size: 14px; -} -/* have to use overlay rather than auto otherwise Linux and Windows - Chrome gets very confused about vertical spacing: - https://github.com/vector-im/vector-web/issues/754 -*/ -.mx_EventTile_content .markdown-body pre { - overflow-x: overlay; - overflow-y: visible; - max-height: 30vh; -} - -.mx_EventTile_content .markdown-body code { - // deliberate constants as we're behind an invert filter - background-color: #f8f8f8; -} - -.mx_EventTile_content .markdown-body { pre, code { + font-family: $monospace-font-family !important; // deliberate constants as we're behind an invert filter color: #333; } + + pre { + // have to use overlay rather than auto otherwise Linux and Windows + // Chrome gets very confused about vertical spacing: + // https://github.com/vector-im/vector-web/issues/754 + overflow-x: overlay; + overflow-y: visible; + max-height: 30vh; + } + + code { + // deliberate constants as we're behind an invert filter + background-color: #f8f8f8; + } +} + +.mx_EventTile:hover .mx_EventTile_body pre, +.mx_EventTile.focus-visible:focus-within .mx_EventTile_body pre { + border: 1px solid #e5e5e5; // deliberate constant as we're behind an invert filter } .mx_EventTile_pre_container { @@ -427,17 +515,8 @@ limitations under the License. background-image: url($copy-button-url); } -.mx_EventTile_body pre { - border: 1px solid transparent; -} - -.mx_EventTile:hover .mx_EventTile_body pre -{ - border: 1px solid #e5e5e5; // deliberate constant as we're behind an invert filter -} - -.mx_EventTile_body .mx_EventTile_pre_container:hover .mx_EventTile_copyButton -{ +.mx_EventTile_body .mx_EventTile_pre_container:focus-within .mx_EventTile_copyButton, +.mx_EventTile_body .mx_EventTile_pre_container:hover .mx_EventTile_copyButton { visibility: visible; } @@ -446,19 +525,17 @@ limitations under the License. .mx_EventTile_content .markdown-body h3, .mx_EventTile_content .markdown-body h4, .mx_EventTile_content .markdown-body h5, -.mx_EventTile_content .markdown-body h6 -{ - font-family: inherit ! important; +.mx_EventTile_content .markdown-body h6 { + font-family: inherit !important; color: inherit; } /* Make h1 and h2 the same size as h3. */ .mx_EventTile_content .markdown-body h1, -.mx_EventTile_content .markdown-body h2 -{ +.mx_EventTile_content .markdown-body h2 { font-size: 1.5em; - border-bottom: none ! important; // override GFM + border-bottom: none !important; // override GFM } .mx_EventTile_content .markdown-body a { @@ -467,7 +544,7 @@ limitations under the License. } .mx_EventTile_content .markdown-body .hljs { - display: inline ! important; + display: inline !important; } /* @@ -556,8 +633,8 @@ limitations under the License. } .mx_EventTile_content .markdown-body { - p, ul, ol, dl, blockquote, pre, table { - margin-bottom: 4px; // 1/4 of the non-compact margin-bottom - } + p, ul, ol, dl, blockquote, pre, table { + margin-bottom: 4px; // 1/4 of the non-compact margin-bottom + } } } diff --git a/res/css/views/rooms/_JumpToBottomButton.scss b/res/css/views/rooms/_JumpToBottomButton.scss index 968139671f..7f458092fb 100644 --- a/res/css/views/rooms/_JumpToBottomButton.scss +++ b/res/css/views/rooms/_JumpToBottomButton.scss @@ -55,7 +55,7 @@ limitations under the License. cursor: pointer; } -.mx_JumpToBottomButton_scrollDown:before { +.mx_JumpToBottomButton_scrollDown::before { content: ""; position: absolute; top: 0; diff --git a/res/css/views/rooms/_MemberDeviceInfo.scss b/res/css/views/rooms/_MemberDeviceInfo.scss index 3be6a0f7b4..e73e6c58f1 100644 --- a/res/css/views/rooms/_MemberDeviceInfo.scss +++ b/res/css/views/rooms/_MemberDeviceInfo.scss @@ -25,6 +25,7 @@ limitations under the License. width: 12px; height: 12px; mask-repeat: no-repeat; + mask-size: 100%; } .mx_MemberDeviceInfo_icon_blacklisted { mask-image: url('$(res)/img/e2e/blacklisted.svg'); @@ -57,6 +58,7 @@ limitations under the License. } .mx_MemberDeviceInfo_deviceId { + word-break: break-word; font-size: 13px; } diff --git a/res/css/views/rooms/_MemberInfo.scss b/res/css/views/rooms/_MemberInfo.scss index c3b3ca2f7d..e3f746e9d3 100644 --- a/res/css/views/rooms/_MemberInfo.scss +++ b/res/css/views/rooms/_MemberInfo.scss @@ -43,6 +43,8 @@ limitations under the License. .mx_MemberInfo_name h2 { flex: 1; + overflow-x: auto; + max-height: 50px; } .mx_MemberInfo h2 { @@ -80,9 +82,6 @@ limitations under the License. display: block; } -.mx_MemberInfo_avatar .mx_BaseAvatar { -} - .mx_MemberInfo_avatar .mx_BaseAvatar.mx_BaseAvatar_image { cursor: zoom-in; } @@ -124,7 +123,7 @@ limitations under the License. } .mx_MemberInfo_createRoom_label { - width: initial ! important; + width: initial !important; cursor: pointer; } diff --git a/res/css/views/rooms/_MemberList.scss b/res/css/views/rooms/_MemberList.scss index cac97cb60d..6e4465583c 100644 --- a/res/css/views/rooms/_MemberList.scss +++ b/res/css/views/rooms/_MemberList.scss @@ -87,10 +87,14 @@ limitations under the License. } } +.mx_MemberList_invite.mx_AccessibleButton_disabled { + background-color: $greyed-fg-color; + cursor: not-allowed; +} + .mx_MemberList_invite span { background-image: url('$(res)/img/feather-customised/user-add.svg'); background-repeat: no-repeat; background-position: center left; padding-left: 25px; - } diff --git a/res/css/views/rooms/_MessageComposer.scss b/res/css/views/rooms/_MessageComposer.scss index 708c29bb3e..12e45a07c9 100644 --- a/res/css/views/rooms/_MessageComposer.scss +++ b/res/css/views/rooms/_MessageComposer.scss @@ -23,10 +23,6 @@ limitations under the License. padding-left: 84px; } -.mx_MessageComposer_wrapper.mx_MessageComposer_hasE2EIcon { - padding-left: 109px; -} - .mx_MessageComposer_replaced_wrapper { margin-left: auto; margin-right: auto; @@ -78,7 +74,8 @@ limitations under the License. .mx_MessageComposer_e2eIcon.mx_E2EIcon { position: absolute; left: 60px; - background-color: $composer-e2e-icon-color; + margin-right: 0; // Counteract the E2EIcon class + margin-left: 3px; // Counteract the E2EIcon class } .mx_MessageComposer_noperm_error { @@ -122,16 +119,15 @@ limitations under the License. // FIXME: rather unpleasant hack to get rid of

margins. // really we should be mixing in markdown-body from gfm.css instead .mx_MessageComposer_editor > :first-child { - margin-top: 0 ! important; + margin-top: 0 !important; } .mx_MessageComposer_editor > :last-child { - margin-bottom: 0 ! important; + margin-bottom: 0 !important; } -@keyframes visualbell -{ - from { background-color: #faa } - to { background-color: $primary-bg-color } +@keyframes visualbell { + from { background-color: $visual-bell-bg-color; } + to { background-color: $primary-bg-color; } } .mx_MessageComposer_input_error { @@ -181,34 +177,42 @@ limitations under the License. } .mx_MessageComposer_button { + position: relative; margin-right: 12px; cursor: pointer; - padding-top: 4px; height: 20px; width: 20px; - background-color: $composer-button-color; - mask-repeat: no-repeat; - mask-size: contain; - mask-position: center; + + &::before { + content: ''; + position: absolute; + + height: 20px; + width: 20px; + background-color: $composer-button-color; + mask-repeat: no-repeat; + mask-size: contain; + mask-position: center; + } } -.mx_MessageComposer_upload { +.mx_MessageComposer_upload::before { mask-image: url('$(res)/img/feather-customised/paperclip.svg'); } -.mx_MessageComposer_hangup { +.mx_MessageComposer_hangup::before { mask-image: url('$(res)/img/hangup.svg'); } -.mx_MessageComposer_voicecall { +.mx_MessageComposer_voicecall::before { mask-image: url('$(res)/img/feather-customised/phone.svg'); } -.mx_MessageComposer_videocall { +.mx_MessageComposer_videocall::before { mask-image: url('$(res)/img/feather-customised/video.svg'); } -.mx_MessageComposer_stickers { +.mx_MessageComposer_stickers::before { mask-image: url('$(res)/img/feather-customised/face.svg'); } diff --git a/res/css/views/rooms/_MessageComposerFormatBar.scss b/res/css/views/rooms/_MessageComposerFormatBar.scss new file mode 100644 index 0000000000..1b5a21bed0 --- /dev/null +++ b/res/css/views/rooms/_MessageComposerFormatBar.scss @@ -0,0 +1,109 @@ +/* +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_MessageComposerFormatBar { + display: none; + width: calc(26px * 5); + height: 24px; + position: absolute; + cursor: pointer; + border-radius: 4px; + background-color: $message-action-bar-bg-color; + user-select: none; + // equal to z-index of mx_ReplyPreview and mx_RoomView_statusArea (1000) + // but as it appears after them in the DOM, will appear on top. + z-index: 1000; + + &.mx_MessageComposerFormatBar_shown { + display: block; + } + + > * { + white-space: nowrap; + display: inline-block; + position: relative; + border: 1px solid $message-action-bar-border-color; + margin-left: -1px; + + &:hover { + border-color: $message-action-bar-hover-border-color; + z-index: 1; + } + + &:first-child { + border-radius: 3px 0 0 3px; + } + + &:last-child { + border-radius: 0 3px 3px 0; + } + + &:only-child { + border-radius: 3px; + } + } + + .mx_MessageComposerFormatBar_button { + width: 27px; + height: 24px; + box-sizing: border-box; + } + + .mx_MessageComposerFormatBar_button::after { + content: ''; + position: absolute; + top: 0; + left: 0; + height: 100%; + width: 100%; + mask-repeat: no-repeat; + mask-position: center; + background-color: $message-action-bar-fg-color; + } + + .mx_MessageComposerFormatBar_buttonIconBold::after { + mask-image: url('$(res)/img/format/bold.svg'); + } + + .mx_MessageComposerFormatBar_buttonIconItalic::after { + mask-image: url('$(res)/img/format/italics.svg'); + } + + .mx_MessageComposerFormatBar_buttonIconStrikethrough::after { + mask-image: url('$(res)/img/format/strikethrough.svg'); + } + + .mx_MessageComposerFormatBar_buttonIconQuote::after { + mask-image: url('$(res)/img/format/quote.svg'); + } + + .mx_MessageComposerFormatBar_buttonIconCode::after { + mask-image: url('$(res)/img/format/code.svg'); + } +} + +.mx_MessageComposerFormatBar_buttonTooltip { + white-space: nowrap; + font-size: 13px; + font-weight: 600; + min-width: 54px; + text-align: center; + + .mx_MessageComposerFormatBar_tooltipShortcut { + font-size: 9px; + opacity: 0.7; + } +} diff --git a/res/css/views/rooms/_PinnedEventTile.scss b/res/css/views/rooms/_PinnedEventTile.scss index f7417272b6..030a76674a 100644 --- a/res/css/views/rooms/_PinnedEventTile.scss +++ b/res/css/views/rooms/_PinnedEventTile.scss @@ -44,6 +44,12 @@ limitations under the License. margin-right: 10px; } +.mx_PinnedEventTile_actions { + float: right; + margin-right: 10px; + display: none; +} + .mx_PinnedEventTile:hover .mx_PinnedEventTile_timestamp { display: inline-block; } @@ -52,12 +58,6 @@ limitations under the License. display: block; } -.mx_PinnedEventTile_actions { - float: right; - margin-right: 10px; - display: none; -} - .mx_PinnedEventTile_unpinButton { display: inline-block; cursor: pointer; @@ -74,4 +74,4 @@ limitations under the License. position: relative; top: 0; left: 0; -} \ No newline at end of file +} diff --git a/res/css/views/rooms/_PresenceLabel.scss b/res/css/views/rooms/_PresenceLabel.scss index 682c849cee..26ed1aa6a3 100644 --- a/res/css/views/rooms/_PresenceLabel.scss +++ b/res/css/views/rooms/_PresenceLabel.scss @@ -17,4 +17,4 @@ limitations under the License. .mx_PresenceLabel { font-size: 11px; opacity: 0.5; -} \ No newline at end of file +} diff --git a/res/css/views/rooms/_ReplyPreview.scss b/res/css/views/rooms/_ReplyPreview.scss index 5bf4adff27..4dc4cb2c40 100644 --- a/res/css/views/rooms/_ReplyPreview.scss +++ b/res/css/views/rooms/_ReplyPreview.scss @@ -24,7 +24,7 @@ limitations under the License. border-bottom: none; border-radius: 4px 4px 0 0; max-height: 50vh; - overflow: auto + overflow: auto; } .mx_ReplyPreview_section { diff --git a/res/css/views/rooms/_RoomBreadcrumbs.scss b/res/css/views/rooms/_RoomBreadcrumbs.scss index 6c3eb0420a..67350aac34 100644 --- a/res/css/views/rooms/_RoomBreadcrumbs.scss +++ b/res/css/views/rooms/_RoomBreadcrumbs.scss @@ -22,6 +22,19 @@ limitations under the License. display: flex; flex-direction: row; + // repeating circles as empty placeholders + background: + radial-gradient( + circle at center, + $breadcrumb-placeholder-bg-color, + $breadcrumb-placeholder-bg-color 15px, + transparent 16px + ); + background-size: 36px; + background-position: 6px -1px; + background-repeat: repeat-x; + + // Autohide the scrollbar overflow-x: hidden; &:hover { @@ -78,6 +91,14 @@ limitations under the License. display: none; } + .mx_IndicatorScrollbar_leftOverflowIndicator { + background: linear-gradient(to left, $panel-gradient); + } + + .mx_IndicatorScrollbar_rightOverflowIndicator { + background: linear-gradient(to right, $panel-gradient); + } + &.mx_IndicatorScrollbar_leftOverflow .mx_IndicatorScrollbar_leftOverflowIndicator, &.mx_IndicatorScrollbar_rightOverflow .mx_IndicatorScrollbar_rightOverflowIndicator { position: absolute; @@ -88,13 +109,4 @@ limitations under the License. pointer-events: none; z-index: 100; } - - .mx_IndicatorScrollbar_leftOverflowIndicator { - background: linear-gradient(to left, $panel-gradient); - } - - .mx_IndicatorScrollbar_rightOverflowIndicator { - background: linear-gradient(to right, $panel-gradient); - } } - diff --git a/res/css/views/rooms/_RoomHeader.scss b/res/css/views/rooms/_RoomHeader.scss index e7589f0e90..f1e4456cc1 100644 --- a/res/css/views/rooms/_RoomHeader.scss +++ b/res/css/views/rooms/_RoomHeader.scss @@ -17,12 +17,15 @@ limitations under the License. .mx_RoomHeader { flex: 0 0 52px; border-bottom: 1px solid $primary-hairline-color; + + .mx_E2EIcon { + margin: 0 5px; + } } .mx_RoomHeader_wrapper { margin: auto; height: 52px; - align-items: center; display: flex; align-items: center; min-width: 0; @@ -107,7 +110,7 @@ limitations under the License. } .mx_RoomHeader_settingsHint { - color: $settings-grey-fg-color ! important; + color: $settings-grey-fg-color !important; } .mx_RoomHeader_searchStatus { @@ -134,17 +137,17 @@ limitations under the License. } .mx_RoomHeader_placeholder { - color: $settings-grey-fg-color ! important; + color: $settings-grey-fg-color !important; } .mx_RoomHeader_editable { - border-bottom: 1px solid $strong-input-border-color ! important; + border-bottom: 1px solid $strong-input-border-color !important; min-width: 150px; cursor: text; } .mx_RoomHeader_editable:focus { - border-bottom: 1px solid $accent-color ! important; + border-bottom: 1px solid $accent-color !important; outline: none; box-shadow: none; } @@ -193,33 +196,41 @@ limitations under the License. } .mx_RoomHeader_button { + position: relative; margin-left: 10px; cursor: pointer; height: 20px; width: 20px; - background-color: $roomheader-button-color; - mask-repeat: no-repeat; - mask-size: contain; + + &::before { + content: ''; + position: absolute; + height: 20px; + width: 20px; + background-color: $roomheader-button-color; + mask-repeat: no-repeat; + mask-size: contain; + } } -.mx_RoomHeader_settingsButton { +.mx_RoomHeader_settingsButton::before { mask-image: url('$(res)/img/feather-customised/settings.svg'); } -.mx_RoomHeader_forgetButton { +.mx_RoomHeader_forgetButton::before { mask-image: url('$(res)/img/leave.svg'); width: 26px; } -.mx_RoomHeader_searchButton { +.mx_RoomHeader_searchButton::before { mask-image: url('$(res)/img/feather-customised/search.svg'); } -.mx_RoomHeader_shareButton { +.mx_RoomHeader_shareButton::before { mask-image: url('$(res)/img/feather-customised/share.svg'); } -.mx_RoomHeader_manageIntegsButton { +.mx_RoomHeader_manageIntegsButton::before { mask-image: url('$(res)/img/feather-customised/grid.svg'); } @@ -235,8 +246,7 @@ limitations under the License. margin-top: 18px; } -.mx_RoomHeader_pinnedButton { - position: relative; +.mx_RoomHeader_pinnedButton::before { mask-image: url('$(res)/img/icons-pin.svg'); } diff --git a/res/css/views/rooms/_RoomList.scss b/res/css/views/rooms/_RoomList.scss index 886f10dc4c..5ed22f997d 100644 --- a/res/css/views/rooms/_RoomList.scss +++ b/res/css/views/rooms/_RoomList.scss @@ -27,12 +27,8 @@ limitations under the License. position: relative; } -.mx_SearchBox { - flex: none; -} - /* hide resize handles next to collapsed / empty sublists */ -.mx_RoomList .mx_RoomSubList:not(.mx_RoomSubList_nonEmpty) + .mx_ResizeHandle { +.mx_RoomList .mx_RoomSubList:not(.mx_RoomSubList_nonEmpty) + .mx_ResizeHandle { display: none; } diff --git a/res/css/views/rooms/_RoomPreviewBar.scss b/res/css/views/rooms/_RoomPreviewBar.scss index ea3b787971..c7d03e3523 100644 --- a/res/css/views/rooms/_RoomPreviewBar.scss +++ b/res/css/views/rooms/_RoomPreviewBar.scss @@ -39,6 +39,16 @@ limitations under the License. margin: 10px 10px 10px 0; flex: 0 0 auto; } + + .mx_RoomPreviewBar_footer { + font-size: 12px; + line-height: 20px; + + .mx_Spinner { + vertical-align: middle; + display: inline-block; + } + } } .mx_RoomPreviewBar_dark { @@ -70,7 +80,7 @@ limitations under the License. flex-direction: row; padding: 3px 8px; - &>* { + & > * { margin-left: 12px; } } @@ -81,7 +91,7 @@ limitations under the License. display: flex; flex-direction: column; - &>* { + & > * { margin: 4px; } } @@ -99,7 +109,7 @@ limitations under the License. .mx_RoomPreviewBar_message { flex-direction: column; - &>* { + & > * { margin: 5px 0 20px 0; } } @@ -110,7 +120,7 @@ limitations under the License. padding: 7px 50px;//extra wide } - &>* { + & > * { margin-top: 12px; } } diff --git a/res/css/views/rooms/_RoomTile.scss b/res/css/views/rooms/_RoomTile.scss index a1fc9bdca1..1814919b61 100644 --- a/res/css/views/rooms/_RoomTile.scss +++ b/res/css/views/rooms/_RoomTile.scss @@ -25,6 +25,11 @@ limitations under the License. position: relative; } +.mx_RoomTile:focus { + filter: none !important; + background-color: $roomtile-focused-bg-color; +} + .mx_RoomTile_menuButton { display: none; flex: 0 0 16px; @@ -34,13 +39,6 @@ limitations under the License. background-position: center; } -// toggle menuButton and badge on hover/menu displayed -.mx_LeftPanel_container:not(.collapsed) .mx_RoomTile:hover, .mx_RoomTile_menuDisplayed { - .mx_RoomTile_menuButton { - display: block; - } -} - .mx_RoomTile_tooltip { display: inline-block; position: relative; @@ -48,7 +46,6 @@ limitations under the License. left: -12px; } - .mx_RoomTile_nameContainer { display: flex; align-items: center; @@ -109,9 +106,18 @@ limitations under the License. text-overflow: ellipsis; } +.mx_RoomTile_badge { + flex: 0 1 content; + border-radius: 0.8em; + padding: 0 0.4em; + color: $roomtile-badge-fg-color; + font-weight: 600; + font-size: 12px; +} + .collapsed { .mx_RoomTile { - margin: 0 2px; + margin: 0 6px; padding: 0 2px; position: relative; justify-content: center; @@ -135,13 +141,14 @@ limitations under the License. } } -.mx_RoomTile_badge { - flex: 0 1 content; - border-radius: 0.8em; - padding: 0 0.4em; - color: $accent-fg-color; - font-weight: 600; - font-size: 12px; +// toggle menuButton and badge on hover/menu displayed +.mx_RoomTile_menuDisplayed, +// or on keyboard focus of room tile +.mx_RoomTile.focus-visible:focus-within, +.mx_LeftPanel_container:not(.collapsed) .mx_RoomTile:hover { + .mx_RoomTile_menuButton { + display: block; + } } .mx_RoomTile_unreadNotify .mx_RoomTile_badge, @@ -150,8 +157,8 @@ limitations under the License. } .mx_RoomTile_highlight .mx_RoomTile_badge, -.mx_RoomTile_badge.mx_RoomTile_badgeRed -{ +.mx_RoomTile_badge.mx_RoomTile_badgeRed { + color: $accent-fg-color; background-color: $warning-color; } @@ -176,11 +183,6 @@ limitations under the License. transform: scale(1.05, 1.05); } -.mx_RoomTile:focus { - filter: none !important; - background-color: $roomtile-focused-bg-color; -} - .mx_RoomTile_arrow { position: absolute; right: 0px; diff --git a/res/css/views/rooms/_RoomUpgradeWarningBar.scss b/res/css/views/rooms/_RoomUpgradeWarningBar.scss index fe81d3801a..1c477cedfe 100644 --- a/res/css/views/rooms/_RoomUpgradeWarningBar.scss +++ b/res/css/views/rooms/_RoomUpgradeWarningBar.scss @@ -15,17 +15,22 @@ limitations under the License. */ .mx_RoomUpgradeWarningBar { + max-height: 235px; + background-color: $preview-bar-bg-color; + padding-left: 20px; + padding-right: 20px; + overflow: scroll; +} + +.mx_RoomUpgradeWarningBar_wrapped { + width: 100%; + height: 100%; + display: flex; text-align: center; - height: 235px; - background-color: $event-selected-color; align-items: center; flex-direction: column; justify-content: center; - display: flex; - background-color: $preview-bar-bg-color; -webkit-align-items: center; - padding-left: 20px; - padding-right: 20px; } .mx_RoomUpgradeWarningBar_header { diff --git a/res/css/views/rooms/_SendMessageComposer.scss b/res/css/views/rooms/_SendMessageComposer.scss new file mode 100644 index 0000000000..d20f7107b3 --- /dev/null +++ b/res/css/views/rooms/_SendMessageComposer.scss @@ -0,0 +1,53 @@ +/* +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_SendMessageComposer { + flex: 1; + display: flex; + flex-direction: column; + font-size: 14px; + justify-content: center; + margin-right: 6px; + // don't grow wider than available space + min-width: 0; + + .mx_BasicMessageComposer { + flex: 1; + display: flex; + flex-direction: column; + // min-height at this level so the mx_BasicMessageComposer_input + // still stays vertically centered when less than 50px + min-height: 50px; + + .mx_BasicMessageComposer_input { + padding: 3px 0; + // this will center the contenteditable + // in it's parent vertically + // while keeping the autocomplete at the top + // of the composer. The parent needs to be a flex container for this to work. + margin: auto 0; + // max-height at this level so autocomplete doesn't get scrolled too + max-height: 140px; + overflow-y: auto; + } + } + + .mx_SendMessageComposer_overlayWrapper { + position: relative; + height: 0; + } +} + diff --git a/res/css/views/rooms/_TopUnreadMessagesBar.scss b/res/css/views/rooms/_TopUnreadMessagesBar.scss index a4b7a6aa51..77f19dac1c 100644 --- a/res/css/views/rooms/_TopUnreadMessagesBar.scss +++ b/res/css/views/rooms/_TopUnreadMessagesBar.scss @@ -24,7 +24,7 @@ limitations under the License. width: 38px; } -.mx_TopUnreadMessagesBar:after { +.mx_TopUnreadMessagesBar::after { content: "·"; position: absolute; top: -8px; @@ -49,7 +49,7 @@ limitations under the License. cursor: pointer; } -.mx_TopUnreadMessagesBar_scrollUp:before { +.mx_TopUnreadMessagesBar_scrollUp::before { content: ""; position: absolute; width: 38px; diff --git a/res/css/views/settings/_DevicesPanel.scss b/res/css/views/settings/_DevicesPanel.scss index e4856531d9..581ff47fc1 100644 --- a/res/css/views/settings/_DevicesPanel.scss +++ b/res/css/views/settings/_DevicesPanel.scss @@ -26,8 +26,13 @@ limitations under the License. font-weight: bold; } +.mx_DevicesPanel_header > .mx_DevicesPanel_deviceButtons { + height: 48px; // make this tall so the table doesn't move down when the delete button appears +} + .mx_DevicesPanel_header > div { display: table-cell; + vertical-align: bottom; } .mx_DevicesPanel_header .mx_DevicesPanel_deviceLastSeen { @@ -48,4 +53,4 @@ limitations under the License. .mx_DevicesPanel_myDevice { font-weight: bold; -} \ No newline at end of file +} diff --git a/res/css/views/settings/_EmailAddresses.scss b/res/css/views/settings/_EmailAddresses.scss index eef804a33b..1c9ce724d1 100644 --- a/res/css/views/settings/_EmailAddresses.scss +++ b/res/css/views/settings/_EmailAddresses.scss @@ -1,5 +1,6 @@ /* Copyright 2019 New Vector Ltd +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. @@ -15,6 +16,8 @@ limitations under the License. */ .mx_ExistingEmailAddress { + display: flex; + align-items: center; margin-bottom: 5px; } @@ -24,20 +27,12 @@ limitations under the License. vertical-align: middle; } -.mx_ExistingEmailAddress_email { - vertical-align: middle; -} - +.mx_ExistingEmailAddress_email, .mx_ExistingEmailAddress_promptText { + flex: 1; margin-right: 10px; } .mx_ExistingEmailAddress_confirmBtn { - margin-right: 5px; -} - -.mx_EmailAddresses_new .mx_Field input { - // Use 100% of the space available for the input, but don't let the 10px - // padding on either side of the input to push it out of alignment. - width: calc(100% - 20px); + margin-left: 5px; } diff --git a/res/css/views/settings/_IntegrationsManager.scss b/res/css/views/settings/_IntegrationManager.scss similarity index 73% rename from res/css/views/settings/_IntegrationsManager.scss rename to res/css/views/settings/_IntegrationManager.scss index 93ee0e20fe..81b01ab8de 100644 --- a/res/css/views/settings/_IntegrationsManager.scss +++ b/res/css/views/settings/_IntegrationManager.scss @@ -14,7 +14,7 @@ See the License for the specific language governing permissions and limitations under the License. */ -.mx_IntegrationsManager .mx_Dialog { +.mx_IntegrationManager .mx_Dialog { width: 60%; height: 70%; overflow: hidden; @@ -23,9 +23,22 @@ limitations under the License. max-height: initial; } -.mx_IntegrationsManager iframe { +.mx_IntegrationManager iframe { background-color: #fff; border: 0px; width: 100%; height: 100%; } + +.mx_IntegrationManager_loading h3 { + text-align: center; +} + +.mx_IntegrationManager_error { + text-align: center; + padding-top: 20px; +} + +.mx_IntegrationManager_error h3 { + color: $warning-color; +} diff --git a/res/css/views/settings/_Notifications.scss b/res/css/views/settings/_Notifications.scss index d6c0b5dbeb..e6d09b9a2a 100644 --- a/res/css/views/settings/_Notifications.scss +++ b/res/css/views/settings/_Notifications.scss @@ -14,8 +14,7 @@ See the License for the specific language governing permissions and limitations under the License. */ -.mx_UserNotifSettings_tableRow -{ +.mx_UserNotifSettings_tableRow { display: table-row; } @@ -26,8 +25,7 @@ limitations under the License. width: 16px; } -.mx_UserNotifSettings_labelCell -{ +.mx_UserNotifSettings_labelCell { padding-bottom: 8px; width: 400px; display: table-cell; @@ -71,3 +69,26 @@ limitations under the License. .mx_UserNotifSettings_notifTable .mx_Spinner { position: absolute; } + +.mx_NotificationSound_soundUpload { + display: none; +} + +.mx_NotificationSound_browse { + color: $accent-color; + border: 1px solid $accent-color; + background-color: transparent; +} + +.mx_NotificationSound_save { + margin-left: 5px; + color: white; + background-color: $accent-color; +} + +.mx_NotificationSound_resetSound { + margin-top: 5px; + color: white; + border: $warning-color; + background-color: $warning-color; +} diff --git a/res/css/views/settings/_PhoneNumbers.scss b/res/css/views/settings/_PhoneNumbers.scss index 2f54babd6f..507b07334e 100644 --- a/res/css/views/settings/_PhoneNumbers.scss +++ b/res/css/views/settings/_PhoneNumbers.scss @@ -1,5 +1,6 @@ /* Copyright 2019 New Vector Ltd +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. @@ -15,6 +16,8 @@ limitations under the License. */ .mx_ExistingPhoneNumber { + display: flex; + align-items: center; margin-bottom: 5px; } @@ -24,22 +27,23 @@ limitations under the License. vertical-align: middle; } -.mx_ExistingPhoneNumber_address { - vertical-align: middle; -} - +.mx_ExistingPhoneNumber_address, .mx_ExistingPhoneNumber_promptText { + flex: 1; margin-right: 10px; } .mx_ExistingPhoneNumber_confirmBtn { - margin-right: 5px; + margin-left: 5px; } -.mx_PhoneNumbers_new .mx_Field input { - // Use 100% of the space available for the input, but don't let the 10px - // padding on either side of the input to push it out of alignment. - width: calc(100% - 20px); +.mx_ExistingPhoneNumber_verification { + display: inline-flex; + align-items: center; + + .mx_Field { + margin: 0 0 0 1em; + } } .mx_PhoneNumbers_input { diff --git a/res/css/views/settings/_ProfileSettings.scss b/res/css/views/settings/_ProfileSettings.scss index b2e449ac34..432b713c1b 100644 --- a/res/css/views/settings/_ProfileSettings.scss +++ b/res/css/views/settings/_ProfileSettings.scss @@ -22,11 +22,6 @@ limitations under the License. flex-grow: 1; } -.mx_ProfileSettings_controls .mx_Field #profileDisplayName, -.mx_ProfileSettings_controls .mx_Field #profileTopic { - width: calc(100% - 20px); // subtract 10px padding on left and right -} - .mx_ProfileSettings_controls .mx_Field #profileTopic { height: 4em; } @@ -48,7 +43,6 @@ limitations under the License. height: 88px; margin-left: 13px; position: relative; - cursor: pointer; } .mx_ProfileSettings_avatar > * { @@ -76,6 +70,7 @@ limitations under the License. text-align: center; vertical-align: middle; font-size: 10px; + cursor: pointer; } .mx_ProfileSettings_avatar:hover .mx_ProfileSettings_avatarOverlay:not(.mx_ProfileSettings_avatarOverlay_disabled) { @@ -110,7 +105,7 @@ limitations under the License. margin: auto; } -.mx_ProfileSettings_avatarOverlayImg:before { +.mx_ProfileSettings_avatarOverlayImg::before { background-color: $settings-profile-overlay-placeholder-fg-color; mask: url("$(res)/img/feather-customised/upload.svg"); mask-repeat: no-repeat; @@ -124,7 +119,7 @@ limitations under the License. right: 0; } -.mx_ProfileSettings_avatar:hover .mx_ProfileSettings_avatarOverlayImg:before { +.mx_ProfileSettings_avatar:hover .mx_ProfileSettings_avatarOverlayImg::before { background-color: $settings-profile-overlay-fg-color !important; } diff --git a/res/css/views/settings/_SetIdServer.scss b/res/css/views/settings/_SetIdServer.scss new file mode 100644 index 0000000000..98c64b7218 --- /dev/null +++ b/res/css/views/settings/_SetIdServer.scss @@ -0,0 +1,23 @@ +/* +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_SetIdServer .mx_Field_input { + @mixin mx_Settings_fullWidthField; +} + +.mx_SetIdServer_tooltip { + @mixin mx_Settings_tooltip; +} diff --git a/res/css/views/settings/_SetIntegrationManager.scss b/res/css/views/settings/_SetIntegrationManager.scss new file mode 100644 index 0000000000..3e59ac73ac --- /dev/null +++ b/res/css/views/settings/_SetIntegrationManager.scss @@ -0,0 +1,37 @@ +/* +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_SetIntegrationManager { + margin-top: 10px; + margin-bottom: 10px; +} + +.mx_SetIntegrationManager > .mx_SettingsTab_heading { + margin-bottom: 10px; +} + +.mx_SetIntegrationManager > .mx_SettingsTab_heading > .mx_SettingsTab_subheading { + display: inline-block; + padding-left: 5px; +} + +.mx_SetIntegrationManager .mx_ToggleSwitch { + display: inline-block; + float: right; + top: 9px; + + @mixin mx_Settings_fullWidthField; +} diff --git a/res/css/views/settings/tabs/_SettingsTab.scss b/res/css/views/settings/tabs/_SettingsTab.scss index def28bfbd2..794c8106be 100644 --- a/res/css/views/settings/tabs/_SettingsTab.scss +++ b/res/css/views/settings/tabs/_SettingsTab.scss @@ -24,6 +24,10 @@ limitations under the License. color: $primary-fg-color; } +.mx_SettingsTab_heading:nth-child(n + 2) { + margin-top: 30px; +} + .mx_SettingsTab_subheading { font-size: 16px; display: block; @@ -37,9 +41,8 @@ limitations under the License. .mx_SettingsTab_subsectionText { color: $settings-subsection-fg-color; font-size: 14px; - padding-bottom: 12px; display: block; - margin: 0 100px 0 0; // Align with the rest of the view + margin: 10px 100px 10px 0; // Align with the rest of the view } .mx_SettingsTab_section .mx_SettingsFlag { @@ -67,12 +70,6 @@ limitations under the License. word-break: break-all; } -.mx_SettingsTab .mx_SettingsTab_subheading:nth-child(n + 2) { - // These views have a lot of the same repetitive information on it, so - // give them more visual distinction between the sections. - margin-top: 30px; -} - .mx_SettingsTab a { color: $accent-color-alt; -} \ No newline at end of file +} diff --git a/res/css/views/settings/tabs/room/_GeneralRoomSettingsTab.scss b/res/css/views/settings/tabs/room/_GeneralRoomSettingsTab.scss index 91d7ed2c7d..af55820d66 100644 --- a/res/css/views/settings/tabs/room/_GeneralRoomSettingsTab.scss +++ b/res/css/views/settings/tabs/room/_GeneralRoomSettingsTab.scss @@ -17,7 +17,3 @@ limitations under the License. .mx_GeneralRoomSettingsTab_profileSection { margin-top: 10px; } - -.mx_GeneralRoomSettingsTab .mx_AliasSettings .mx_Field select { - width: 100%; -} diff --git a/res/css/views/settings/tabs/room/_RolesRoomSettingsTab.scss b/res/css/views/settings/tabs/room/_RolesRoomSettingsTab.scss index 8bfc792dc3..5d0a8ed142 100644 --- a/res/css/views/settings/tabs/room/_RolesRoomSettingsTab.scss +++ b/res/css/views/settings/tabs/room/_RolesRoomSettingsTab.scss @@ -21,4 +21,4 @@ limitations under the License. .mx_RolesRoomSettingsTab_unbanBtn { margin-right: 10px; margin-bottom: 5px; -} \ No newline at end of file +} diff --git a/res/css/views/settings/tabs/room/_SecurityRoomSettingsTab.scss b/res/css/views/settings/tabs/room/_SecurityRoomSettingsTab.scss index dfd046e672..b5a57dfefb 100644 --- a/res/css/views/settings/tabs/room/_SecurityRoomSettingsTab.scss +++ b/res/css/views/settings/tabs/room/_SecurityRoomSettingsTab.scss @@ -31,4 +31,4 @@ limitations under the License. .mx_SecurityRoomSettingsTab_encryptionSection { margin-bottom: 25px; -} \ No newline at end of file +} diff --git a/res/css/views/settings/tabs/user/_GeneralUserSettingsTab.scss b/res/css/views/settings/tabs/user/_GeneralUserSettingsTab.scss index bec013674a..62d230e752 100644 --- a/res/css/views/settings/tabs/user/_GeneralUserSettingsTab.scss +++ b/res/css/views/settings/tabs/user/_GeneralUserSettingsTab.scss @@ -14,33 +14,23 @@ See the License for the specific language governing permissions and limitations under the License. */ -.mx_GeneralUserSettingsTab_changePassword, -.mx_GeneralUserSettingsTab_themeSection { - display: block; -} - .mx_GeneralUserSettingsTab_changePassword .mx_Field, .mx_GeneralUserSettingsTab_themeSection .mx_Field { - display: block; - margin-right: 100px; // Align with the other fields on the page -} - -.mx_GeneralUserSettingsTab_changePassword .mx_Field input { - display: block; - width: calc(100% - 20px); // subtract 10px padding on left and right + @mixin mx_Settings_fullWidthField; } .mx_GeneralUserSettingsTab_changePassword .mx_Field:first-child { margin-top: 0; } -.mx_GeneralUserSettingsTab_themeSection .mx_Field select { - display: block; - width: 100%; +.mx_GeneralUserSettingsTab_accountSection .mx_EmailAddresses, +.mx_GeneralUserSettingsTab_accountSection .mx_PhoneNumbers, +.mx_GeneralUserSettingsTab_discovery .mx_ExistingEmailAddress, +.mx_GeneralUserSettingsTab_discovery .mx_ExistingPhoneNumber, +.mx_GeneralUserSettingsTab_languageInput { + @mixin mx_Settings_fullWidthField; } -.mx_GeneralUserSettingsTab_accountSection > .mx_EmailAddresses, -.mx_GeneralUserSettingsTab_accountSection > .mx_PhoneNumbers, -.mx_GeneralUserSettingsTab_languageInput { - margin-right: 100px; // Align with the other fields on the page -} \ No newline at end of file +.mx_GeneralUserSettingsTab_warningIcon { + vertical-align: middle; +} diff --git a/res/css/views/settings/tabs/user/_HelpUserSettingsTab.scss b/res/css/views/settings/tabs/user/_HelpUserSettingsTab.scss index fa0d0edeb7..109edfff81 100644 --- a/res/css/views/settings/tabs/user/_HelpUserSettingsTab.scss +++ b/res/css/views/settings/tabs/user/_HelpUserSettingsTab.scss @@ -21,4 +21,4 @@ limitations under the License. .mx_HelpUserSettingsTab span.mx_AccessibleButton { word-break: break-word; -} \ No newline at end of file +} diff --git a/res/css/views/settings/tabs/user/_MjolnirUserSettingsTab.scss b/res/css/views/settings/tabs/user/_MjolnirUserSettingsTab.scss new file mode 100644 index 0000000000..2a3fd12f31 --- /dev/null +++ b/res/css/views/settings/tabs/user/_MjolnirUserSettingsTab.scss @@ -0,0 +1,23 @@ +/* +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_MjolnirUserSettingsTab .mx_Field { + @mixin mx_Settings_fullWidthField; +} + +.mx_MjolnirUserSettingsTab_listItem { + margin-bottom: 2px; +} diff --git a/res/css/views/settings/tabs/user/_NotificationUserSettingsTab.scss b/res/css/views/settings/tabs/user/_NotificationUserSettingsTab.scss index 3cebd2958e..b57c46a1d9 100644 --- a/res/css/views/settings/tabs/user/_NotificationUserSettingsTab.scss +++ b/res/css/views/settings/tabs/user/_NotificationUserSettingsTab.scss @@ -16,4 +16,4 @@ limitations under the License. .mx_NotificationUserSettingsTab .mx_SettingsTab_heading { margin-bottom: 10px; // Give some spacing between the title and the first elements -} \ No newline at end of file +} diff --git a/res/css/views/settings/tabs/user/_PreferencesUserSettingsTab.scss b/res/css/views/settings/tabs/user/_PreferencesUserSettingsTab.scss index f447221b7a..d003e175d9 100644 --- a/res/css/views/settings/tabs/user/_PreferencesUserSettingsTab.scss +++ b/res/css/views/settings/tabs/user/_PreferencesUserSettingsTab.scss @@ -15,13 +15,5 @@ limitations under the License. */ .mx_PreferencesUserSettingsTab .mx_Field { - margin-right: 100px; // Align with the rest of the controls -} - -.mx_PreferencesUserSettingsTab .mx_Field input { - display: block; - - // Subtract 10px padding on left and right - // This is to keep the input aligned with the rest of the tab's controls. - width: calc(100% - 20px); + @mixin mx_Settings_fullWidthField; } diff --git a/res/css/views/settings/tabs/user/_SecurityUserSettingsTab.scss b/res/css/views/settings/tabs/user/_SecurityUserSettingsTab.scss index 1c0a4b5864..b5a6693006 100644 --- a/res/css/views/settings/tabs/user/_SecurityUserSettingsTab.scss +++ b/res/css/views/settings/tabs/user/_SecurityUserSettingsTab.scss @@ -54,4 +54,4 @@ limitations under the License. .mx_SecurityUserSettingsTab_ignoredUser .mx_AccessibleButton { margin-right: 10px; -} \ No newline at end of file +} diff --git a/res/css/views/settings/tabs/user/_VoiceUserSettingsTab.scss b/res/css/views/settings/tabs/user/_VoiceUserSettingsTab.scss index f5dba9831e..69d57bdba1 100644 --- a/res/css/views/settings/tabs/user/_VoiceUserSettingsTab.scss +++ b/res/css/views/settings/tabs/user/_VoiceUserSettingsTab.scss @@ -14,13 +14,8 @@ See the License for the specific language governing permissions and limitations under the License. */ -.mx_VoiceUserSettingsTab .mx_Field select { - width: 100%; - max-width: 100%; -} - .mx_VoiceUserSettingsTab .mx_Field { - margin-right: 100px; // align with the rest of the fields + @mixin mx_Settings_fullWidthField; } .mx_VoiceUserSettingsTab_missingMediaPermissions { diff --git a/res/css/views/terms/_InlineTermsAgreement.scss b/res/css/views/terms/_InlineTermsAgreement.scss new file mode 100644 index 0000000000..e00dcf31d1 --- /dev/null +++ b/res/css/views/terms/_InlineTermsAgreement.scss @@ -0,0 +1,45 @@ +/* +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_InlineTermsAgreement_cbContainer { + margin-bottom: 10px; + font-size: 14px; + + a { + color: $accent-color; + text-decoration: none; + } + + .mx_InlineTermsAgreement_checkbox { + margin-top: 10px; + + input { + vertical-align: text-bottom; + } + } +} + +.mx_InlineTermsAgreement_link { + display: inline-block; + mask-image: url('$(res)/img/external-link.svg'); + background-color: $accent-color; + mask-repeat: no-repeat; + mask-size: contain; + width: 12px; + height: 12px; + margin-left: 3px; + vertical-align: middle; +} diff --git a/res/css/views/voip/_CallView.scss b/res/css/views/voip/_CallView.scss index deb89a837c..b01fbf8c66 100644 --- a/res/css/views/voip/_CallView.scss +++ b/res/css/views/voip/_CallView.scss @@ -22,4 +22,4 @@ limitations under the License. padding: 6px; font-weight: bold; font-size: 13px; -} \ No newline at end of file +} diff --git a/res/fonts/Fira_Mono/FiraMono-Bold.ttf b/res/fonts/Fira_Mono/FiraMono-Bold.ttf deleted file mode 100755 index 4b8b1cfbcb..0000000000 Binary files a/res/fonts/Fira_Mono/FiraMono-Bold.ttf and /dev/null differ diff --git a/res/fonts/Fira_Mono/FiraMono-Regular.ttf b/res/fonts/Fira_Mono/FiraMono-Regular.ttf deleted file mode 100755 index 5238c09eda..0000000000 Binary files a/res/fonts/Fira_Mono/FiraMono-Regular.ttf and /dev/null differ diff --git a/res/fonts/Fira_Mono/OFL.txt b/res/fonts/Fira_Mono/OFL.txt deleted file mode 100755 index ba853c049e..0000000000 --- a/res/fonts/Fira_Mono/OFL.txt +++ /dev/null @@ -1,92 +0,0 @@ -Copyright (c) 2012-2013, The Mozilla Corporation and Telefonica S.A. -This Font Software is licensed under the SIL Open Font License, Version 1.1. -This license is copied below, and is also available with a FAQ at: -http://scripts.sil.org/OFL - - ------------------------------------------------------------ -SIL OPEN FONT LICENSE Version 1.1 - 26 February 2007 ------------------------------------------------------------ - -PREAMBLE -The goals of the Open Font License (OFL) are to stimulate worldwide -development of collaborative font projects, to support the font creation -efforts of academic and linguistic communities, and to provide a free and -open framework in which fonts may be shared and improved in partnership -with others. - -The OFL allows the licensed fonts to be used, studied, modified and -redistributed freely as long as they are not sold by themselves. The -fonts, including any derivative works, can be bundled, embedded, -redistributed and/or sold with any software provided that any reserved -names are not used by derivative works. The fonts and derivatives, -however, cannot be released under any other type of license. The -requirement for fonts to remain under this license does not apply -to any document created using the fonts or their derivatives. - -DEFINITIONS -"Font Software" refers to the set of files released by the Copyright -Holder(s) under this license and clearly marked as such. This may -include source files, build scripts and documentation. - -"Reserved Font Name" refers to any names specified as such after the -copyright statement(s). - -"Original Version" refers to the collection of Font Software components as -distributed by the Copyright Holder(s). - -"Modified Version" refers to any derivative made by adding to, deleting, -or substituting -- in part or in whole -- any of the components of the -Original Version, by changing formats or by porting the Font Software to a -new environment. - -"Author" refers to any designer, engineer, programmer, technical -writer or other person who contributed to the Font Software. - -PERMISSION & CONDITIONS -Permission is hereby granted, free of charge, to any person obtaining -a copy of the Font Software, to use, study, copy, merge, embed, modify, -redistribute, and sell modified and unmodified copies of the Font -Software, subject to the following conditions: - -1) Neither the Font Software nor any of its individual components, -in Original or Modified Versions, may be sold by itself. - -2) Original or Modified Versions of the Font Software may be bundled, -redistributed and/or sold with any software, provided that each copy -contains the above copyright notice and this license. These can be -included either as stand-alone text files, human-readable headers or -in the appropriate machine-readable metadata fields within text or -binary files as long as those fields can be easily viewed by the user. - -3) No Modified Version of the Font Software may use the Reserved Font -Name(s) unless explicit written permission is granted by the corresponding -Copyright Holder. This restriction only applies to the primary font name as -presented to the users. - -4) The name(s) of the Copyright Holder(s) or the Author(s) of the Font -Software shall not be used to promote, endorse or advertise any -Modified Version, except to acknowledge the contribution(s) of the -Copyright Holder(s) and the Author(s) or with their explicit written -permission. - -5) The Font Software, modified or unmodified, in part or in whole, -must be distributed entirely under this license, and must not be -distributed under any other license. The requirement for fonts to -remain under this license does not apply to any document created -using the Font Software. - -TERMINATION -This license becomes null and void if any of the above conditions are -not met. - -DISCLAIMER -THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, -EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF -MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT -OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE -COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, -INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL -DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING -FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM -OTHER DEALINGS IN THE FONT SOFTWARE. diff --git a/res/fonts/Inconsolata/QldKNThLqRwH-OJ1UHjlKGlX5qhExfHwNJU.woff2 b/res/fonts/Inconsolata/QldKNThLqRwH-OJ1UHjlKGlX5qhExfHwNJU.woff2 new file mode 100644 index 0000000000..880f06af78 Binary files /dev/null and b/res/fonts/Inconsolata/QldKNThLqRwH-OJ1UHjlKGlX5qhExfHwNJU.woff2 differ diff --git a/res/fonts/Inconsolata/QldKNThLqRwH-OJ1UHjlKGlZ5qhExfHw.woff2 b/res/fonts/Inconsolata/QldKNThLqRwH-OJ1UHjlKGlZ5qhExfHw.woff2 new file mode 100644 index 0000000000..9fe96559d1 Binary files /dev/null and b/res/fonts/Inconsolata/QldKNThLqRwH-OJ1UHjlKGlZ5qhExfHw.woff2 differ diff --git a/res/fonts/Inconsolata/QldXNThLqRwH-OJ1UHjlKGHiw71n5_zaDpwm80E.woff2 b/res/fonts/Inconsolata/QldXNThLqRwH-OJ1UHjlKGHiw71n5_zaDpwm80E.woff2 new file mode 100644 index 0000000000..cd79590d99 Binary files /dev/null and b/res/fonts/Inconsolata/QldXNThLqRwH-OJ1UHjlKGHiw71n5_zaDpwm80E.woff2 differ diff --git a/res/fonts/Inconsolata/QldXNThLqRwH-OJ1UHjlKGHiw71p5_zaDpwm.woff2 b/res/fonts/Inconsolata/QldXNThLqRwH-OJ1UHjlKGHiw71p5_zaDpwm.woff2 new file mode 100644 index 0000000000..cf26d38db4 Binary files /dev/null and b/res/fonts/Inconsolata/QldXNThLqRwH-OJ1UHjlKGHiw71p5_zaDpwm.woff2 differ diff --git a/res/fonts/Nunito/Nunito-Bold.ttf b/res/fonts/Nunito/Nunito-Bold.ttf index c70de76bbd..c8fabf7d92 100644 Binary files a/res/fonts/Nunito/Nunito-Bold.ttf and b/res/fonts/Nunito/Nunito-Bold.ttf differ diff --git a/res/fonts/Nunito/Nunito-Regular.ttf b/res/fonts/Nunito/Nunito-Regular.ttf index 064e805431..86ce522f60 100644 Binary files a/res/fonts/Nunito/Nunito-Regular.ttf and b/res/fonts/Nunito/Nunito-Regular.ttf differ diff --git a/res/fonts/Nunito/Nunito-SemiBold.ttf b/res/fonts/Nunito/Nunito-SemiBold.ttf index a84b3b35a6..8bf953b59a 100644 Binary files a/res/fonts/Nunito/Nunito-SemiBold.ttf and b/res/fonts/Nunito/Nunito-SemiBold.ttf differ diff --git a/res/fonts/Nunito/XRXQ3I6Li01BKofIMN44Y9vKUTo.ttf b/res/fonts/Nunito/XRXQ3I6Li01BKofIMN44Y9vKUTo.ttf deleted file mode 100644 index 4387fb67c4..0000000000 Binary files a/res/fonts/Nunito/XRXQ3I6Li01BKofIMN44Y9vKUTo.ttf and /dev/null differ diff --git a/res/fonts/Nunito/XRXQ3I6Li01BKofIMN5cYtvKUTo.ttf b/res/fonts/Nunito/XRXQ3I6Li01BKofIMN5cYtvKUTo.ttf deleted file mode 100644 index 68fb3ff5cb..0000000000 Binary files a/res/fonts/Nunito/XRXQ3I6Li01BKofIMN5cYtvKUTo.ttf and /dev/null differ diff --git a/res/fonts/Nunito/XRXV3I6Li01BKofINeaE.ttf b/res/fonts/Nunito/XRXV3I6Li01BKofINeaE.ttf deleted file mode 100644 index c40e599260..0000000000 Binary files a/res/fonts/Nunito/XRXV3I6Li01BKofINeaE.ttf and /dev/null differ diff --git a/res/fonts/Nunito/XRXW3I6Li01BKofA6sKUYevN.ttf b/res/fonts/Nunito/XRXW3I6Li01BKofA6sKUYevN.ttf deleted file mode 100644 index 0c4fd17dfa..0000000000 Binary files a/res/fonts/Nunito/XRXW3I6Li01BKofA6sKUYevN.ttf and /dev/null differ diff --git a/res/fonts/Nunito/XRXW3I6Li01BKofAjsOUYevN.ttf b/res/fonts/Nunito/XRXW3I6Li01BKofAjsOUYevN.ttf deleted file mode 100644 index 339d59ac00..0000000000 Binary files a/res/fonts/Nunito/XRXW3I6Li01BKofAjsOUYevN.ttf and /dev/null differ diff --git a/res/fonts/Nunito/XRXX3I6Li01BKofIMNaDRss.ttf b/res/fonts/Nunito/XRXX3I6Li01BKofIMNaDRss.ttf deleted file mode 100644 index b5fcd891af..0000000000 Binary files a/res/fonts/Nunito/XRXX3I6Li01BKofIMNaDRss.ttf and /dev/null differ diff --git a/res/fonts/Twemoji_Mozilla/TwemojiMozilla-colr.woff2 b/res/fonts/Twemoji_Mozilla/TwemojiMozilla-colr.woff2 new file mode 100644 index 0000000000..593d7c8f5c Binary files /dev/null and b/res/fonts/Twemoji_Mozilla/TwemojiMozilla-colr.woff2 differ diff --git a/res/fonts/Twemoji_Mozilla/TwemojiMozilla-sbix.woff2 b/res/fonts/Twemoji_Mozilla/TwemojiMozilla-sbix.woff2 new file mode 100644 index 0000000000..277324851f Binary files /dev/null and b/res/fonts/Twemoji_Mozilla/TwemojiMozilla-sbix.woff2 differ diff --git a/res/img/e2e/normal.svg b/res/img/e2e/normal.svg new file mode 100644 index 0000000000..5b848bc27f --- /dev/null +++ b/res/img/e2e/normal.svg @@ -0,0 +1,3 @@ + + + diff --git a/res/img/e2e/verified.svg b/res/img/e2e/verified.svg index 459a552a40..464b443dcf 100644 --- a/res/img/e2e/verified.svg +++ b/res/img/e2e/verified.svg @@ -1,3 +1,4 @@ - - + + + diff --git a/res/img/e2e/warning.svg b/res/img/e2e/warning.svg index 3d5fba550c..209ae0f71f 100644 --- a/res/img/e2e/warning.svg +++ b/res/img/e2e/warning.svg @@ -1,6 +1,5 @@ - - - - - + + + + diff --git a/res/img/edit.svg b/res/img/edit.svg new file mode 100644 index 0000000000..9674b31690 --- /dev/null +++ b/res/img/edit.svg @@ -0,0 +1 @@ + diff --git a/res/img/emojipicker/activity.svg b/res/img/emojipicker/activity.svg new file mode 100644 index 0000000000..d921667e7a --- /dev/null +++ b/res/img/emojipicker/activity.svg @@ -0,0 +1,14 @@ + + + + + diff --git a/res/img/emojipicker/custom.svg b/res/img/emojipicker/custom.svg new file mode 100644 index 0000000000..814cd8ec13 --- /dev/null +++ b/res/img/emojipicker/custom.svg @@ -0,0 +1,34 @@ + + + + + + + + + diff --git a/res/img/emojipicker/delete.svg b/res/img/emojipicker/delete.svg new file mode 100644 index 0000000000..5f5d4e52eb --- /dev/null +++ b/res/img/emojipicker/delete.svg @@ -0,0 +1,15 @@ + + + + + diff --git a/res/img/emojipicker/flags.svg b/res/img/emojipicker/flags.svg new file mode 100644 index 0000000000..bd0a935265 --- /dev/null +++ b/res/img/emojipicker/flags.svg @@ -0,0 +1,14 @@ + + + + + diff --git a/res/img/emojipicker/foods.svg b/res/img/emojipicker/foods.svg new file mode 100644 index 0000000000..57a15976d8 --- /dev/null +++ b/res/img/emojipicker/foods.svg @@ -0,0 +1,14 @@ + + + + + diff --git a/res/img/emojipicker/nature.svg b/res/img/emojipicker/nature.svg new file mode 100644 index 0000000000..a4778be927 --- /dev/null +++ b/res/img/emojipicker/nature.svg @@ -0,0 +1,15 @@ + + + + + + diff --git a/res/img/emojipicker/objects.svg b/res/img/emojipicker/objects.svg new file mode 100644 index 0000000000..e0d39f985a --- /dev/null +++ b/res/img/emojipicker/objects.svg @@ -0,0 +1,15 @@ + + + + + + diff --git a/res/img/emojipicker/people.svg b/res/img/emojipicker/people.svg new file mode 100644 index 0000000000..c2fdb579f6 --- /dev/null +++ b/res/img/emojipicker/people.svg @@ -0,0 +1,15 @@ + + + + + + diff --git a/res/img/emojipicker/places.svg b/res/img/emojipicker/places.svg new file mode 100644 index 0000000000..0947baaf04 --- /dev/null +++ b/res/img/emojipicker/places.svg @@ -0,0 +1,15 @@ + + + + + + diff --git a/res/img/emojipicker/recent.svg b/res/img/emojipicker/recent.svg new file mode 100644 index 0000000000..2fdcc65cd2 --- /dev/null +++ b/res/img/emojipicker/recent.svg @@ -0,0 +1,15 @@ + + + + + + diff --git a/res/img/emojipicker/search.svg b/res/img/emojipicker/search.svg new file mode 100644 index 0000000000..b5f660b3ac --- /dev/null +++ b/res/img/emojipicker/search.svg @@ -0,0 +1,15 @@ + + + + + diff --git a/res/img/emojipicker/symbols.svg b/res/img/emojipicker/symbols.svg new file mode 100644 index 0000000000..a2b86d9ec8 --- /dev/null +++ b/res/img/emojipicker/symbols.svg @@ -0,0 +1,14 @@ + + + + + diff --git a/res/img/explore.svg b/res/img/explore.svg new file mode 100644 index 0000000000..3956e912ac --- /dev/null +++ b/res/img/explore.svg @@ -0,0 +1,97 @@ + + + + + + image/svg+xml + + + + + + + + + + + + + + + + + + + + + diff --git a/res/img/feather-customised/edit.svg b/res/img/feather-customised/edit.svg new file mode 100644 index 0000000000..f511aa1477 --- /dev/null +++ b/res/img/feather-customised/edit.svg @@ -0,0 +1,4 @@ + + + + diff --git a/res/img/feather-customised/eye.svg b/res/img/feather-customised/eye.svg new file mode 100644 index 0000000000..fd06bf7b21 --- /dev/null +++ b/res/img/feather-customised/eye.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/res/img/feather-customised/widget/bin.svg b/res/img/feather-customised/widget/bin.svg deleted file mode 100644 index 7616d8931b..0000000000 --- a/res/img/feather-customised/widget/bin.svg +++ /dev/null @@ -1,65 +0,0 @@ - - - - - - image/svg+xml - - - - - - - - - - - diff --git a/res/img/feather-customised/widget/camera.svg b/res/img/feather-customised/widget/camera.svg deleted file mode 100644 index 5502493068..0000000000 --- a/res/img/feather-customised/widget/camera.svg +++ /dev/null @@ -1,6 +0,0 @@ - - - - - - diff --git a/res/img/feather-customised/widget/edit.svg b/res/img/feather-customised/widget/edit.svg deleted file mode 100644 index 749e83f982..0000000000 --- a/res/img/feather-customised/widget/edit.svg +++ /dev/null @@ -1,6 +0,0 @@ - - - - - - diff --git a/res/img/feather-customised/widget/refresh.svg b/res/img/feather-customised/widget/refresh.svg deleted file mode 100644 index 0994bbdd52..0000000000 --- a/res/img/feather-customised/widget/refresh.svg +++ /dev/null @@ -1,6 +0,0 @@ - - - - - - diff --git a/res/img/feather-customised/widget/x-circle.svg b/res/img/feather-customised/widget/x-circle.svg deleted file mode 100644 index 951407b39c..0000000000 --- a/res/img/feather-customised/widget/x-circle.svg +++ /dev/null @@ -1,6 +0,0 @@ - - - - - - diff --git a/res/img/format/bold.svg b/res/img/format/bold.svg new file mode 100644 index 0000000000..634d735031 --- /dev/null +++ b/res/img/format/bold.svg @@ -0,0 +1,3 @@ + + + diff --git a/res/img/format/code.svg b/res/img/format/code.svg new file mode 100644 index 0000000000..0a29bcd7bd --- /dev/null +++ b/res/img/format/code.svg @@ -0,0 +1,7 @@ + + + + + + + diff --git a/res/img/format/italics.svg b/res/img/format/italics.svg new file mode 100644 index 0000000000..841afadffd --- /dev/null +++ b/res/img/format/italics.svg @@ -0,0 +1,3 @@ + + + diff --git a/res/img/format/quote.svg b/res/img/format/quote.svg new file mode 100644 index 0000000000..82d3403314 --- /dev/null +++ b/res/img/format/quote.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/res/img/format/strikethrough.svg b/res/img/format/strikethrough.svg new file mode 100644 index 0000000000..fc02b0aae2 --- /dev/null +++ b/res/img/format/strikethrough.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/res/img/react.svg b/res/img/react.svg new file mode 100644 index 0000000000..dd23c41c2c --- /dev/null +++ b/res/img/react.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/res/img/reply.svg b/res/img/reply.svg index 8cbbad3550..540e228883 100644 --- a/res/img/reply.svg +++ b/res/img/reply.svg @@ -1,6 +1,6 @@ - + - - + + - + \ No newline at end of file diff --git a/res/themes/dark-custom/css/dark-custom.scss b/res/themes/dark-custom/css/dark-custom.scss new file mode 100644 index 0000000000..aff647ce26 --- /dev/null +++ b/res/themes/dark-custom/css/dark-custom.scss @@ -0,0 +1,6 @@ +@import "../../light/css/_paths.scss"; +@import "../../light/css/_fonts.scss"; +@import "../../light/css/_light.scss"; +@import "../../dark/css/_dark.scss"; +@import "../../light-custom/css/_custom.scss"; +@import "../../../../res/css/_components.scss"; diff --git a/res/themes/dark/css/_dark.scss b/res/themes/dark/css/_dark.scss index 592b1a1887..eadde4c672 100644 --- a/res/themes/dark/css/_dark.scss +++ b/res/themes/dark/css/_dark.scss @@ -121,6 +121,9 @@ $event-sending-color: $text-secondary-color; $event-redacted-fg-color: #606060; $event-redacted-border-color: #000000; +$event-highlight-fg-color: $warning-color; +$event-highlight-bg-color: #25271F; + // event timestamp $event-timestamp-color: $text-secondary-color; @@ -140,6 +143,10 @@ $button-danger-fg-color: #ffffff; $button-danger-bg-color: $notice-primary-color; $button-danger-disabled-fg-color: #ffffff; $button-danger-disabled-bg-color: #f5b6bb; // TODO: Verify color +$button-link-fg-color: $accent-color; +$button-link-bg-color: transparent; + +$visual-bell-bg-color: #800; $room-warning-bg-color: $header-panel-bg-color; @@ -157,6 +164,14 @@ $reaction-row-button-hover-border-color: $header-panel-text-primary-color; $reaction-row-button-selected-bg-color: #1f6954; $reaction-row-button-selected-border-color: $accent-color; +$tooltip-timeline-bg-color: $tagpanel-bg-color; +$tooltip-timeline-fg-color: #ffffff; + +$interactive-tooltip-bg-color: $base-color; +$interactive-tooltip-fg-color: #ffffff; + +$breadcrumb-placeholder-bg-color: #272c35; + // ***** Mixins! ***** @define-mixin mx_DialogButton { @@ -189,6 +204,11 @@ $reaction-row-button-selected-border-color: $accent-color; background-color: $button-secondary-bg-color; } +@define-mixin mx_Dialog_link { + color: $accent-color; + text-decoration: none; +} + // Nasty hacks to apply a filter to arbitrary monochrome artwork to make it // better match the theme. Typically applied to dark grey 'off' buttons or // light grey 'on' buttons. diff --git a/res/themes/light-custom/css/_custom.scss b/res/themes/light-custom/css/_custom.scss new file mode 100644 index 0000000000..e4a08277f9 --- /dev/null +++ b/res/themes/light-custom/css/_custom.scss @@ -0,0 +1,126 @@ +/* +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. +*/ + +// +// --accent-color +$accent-color: var(--accent-color); +$button-bg-color: var(--accent-color); +$button-link-fg-color: var(--accent-color); +$button-primary-bg-color: var(--accent-color); +$input-valid-border-color: var(--accent-color); +$reaction-row-button-selected-border-color: var(--accent-color); +$roomsublist-chevron-color: var(--accent-color); +$tab-label-active-bg-color: var(--accent-color); +$togglesw-on-color: var(--accent-color); +$username-variant3-color: var(--accent-color); +$accent-color-50pct: var(--accent-color-50pct); //still needs alpha at .5 +// +// --timeline-background-color +$authpage-body-bg-color: var(--timeline-background-color); +$button-secondary-bg-color: var(--timeline-background-color); +$field-focused-label-bg-color: var(--timeline-background-color); +$lightbox-border-color: var(--timeline-background-color); +$menu-bg-color: var(--timeline-background-color); +$avatar-bg-color: var(--timeline-background-color); +$message-action-bar-bg-color: var(--timeline-background-color); +$primary-bg-color: var(--timeline-background-color); +$roomtile-focused-bg-color: var(--timeline-background-color); +$togglesw-ball-color: var(--timeline-background-color); +$droptarget-bg-color: var(--timeline-background-color-50pct); //still needs alpha at .5 +$authpage-modal-bg-color: var(--timeline-background-color-50pct); //still needs alpha at .59 +// +// --roomlist-highlights-color +$roomtile-selected-bg-color: var(--roomlist-highlights-color); +// +// --sidebar-color +$interactive-tooltip-bg-color: var(--sidebar-color); +$tagpanel-bg-color: var(--sidebar-color); +$tooltip-timeline-bg-color: var(--sidebar-color); +$dialog-backdrop-color: var(--sidebar-color-50pct); +// +// --roomlist-background-color +$event-selected-color: var(--roomlist-background-color); +$header-panel-bg-color: var(--roomlist-background-color); +$reaction-row-button-bg-color: var(--roomlist-background-color); +$panel-gradient: var(--roomlist-background-color-0pct), var(--roomlist-background-color); +// these were #f2f5f8 instead of #f3f8fd, but close enough +$dark-panel-bg-color: var(--roomlist-background-color); +$input-lighter-bg-color: var(--roomlist-background-color); +$plinth-bg-color: var(--roomlist-background-color); +$roomsublist-background: var(--roomlist-background-color); +$secondary-accent-color: var(--roomlist-background-color); +$selected-color: var(--roomlist-background-color); +$widget-menu-bar-bg-color: var(--roomlist-background-color); +$roomtile-badge-fg-color: var(--roomlist-background-color); +// +// --timeline-text-color +$message-action-bar-fg-color: var(--timeline-text-color); +$primary-fg-color: var(--timeline-text-color); +$settings-profile-overlay-placeholder-fg-color: var(--timeline-text-color); +$roomtopic-color: var(--timeline-text-color-50pct); +$tab-label-fg-color: var(--timeline-text-color); +$tab-label-icon-bg-color: var(--timeline-text-color); //was #454545 +// was #212121 +$topleftmenu-color: var(--timeline-text-color); +// was #45474a +$dialog-title-fg-color: var(--timeline-text-color); +$tab-label-fg-color: var(--timeline-text-color); +// was #4e5054 +$authpage-lang-color: var(--timeline-text-color); +$roomheader-color: var(--timeline-text-color); +// +// --roomlist-text-color +$roomtile-notified-color: var(--roomlist-text-color); +$roomtile-selected-color: var(--roomlist-text-color); +// +// --roomlist-text-secondary-color +$roomsublist-label-fg-color: var(--roomlist-text-secondary-color); +$roomtile-name-color: var(--roomlist-text-secondary-color); +// +// --roomlist-separator-color +$input-darker-bg-color: var(--roomlist-separator-color); +$panel-divider-color: var(--roomlist-separator-color);// originally #dee1f3, but close enough +$primary-hairline-color: var(--roomlist-separator-color);// originally #e5e5e5, but close enough +// +// --timeline-text-secondary-color +$authpage-secondary-color: var(--timeline-text-secondary-color); +$memberstatus-placeholder-color: var(--timeline-text-secondary-color); +$notice-secondary-color: var(--timeline-text-secondary-color); +$pinned-color: var(--timeline-text-secondary-color); +$settings-subsection-fg-color: var(--timeline-text-secondary-color); +$roomheader-addroom-bg-color: var(--timeline-text-secondary-color); +// was #747474 +$light-fg-color: var(--timeline-text-secondary-color); +// was #777777 +$blockquote-fg-color: var(--timeline-text-secondary-color); +// was #888888 +$greyed-fg-color: var(--timeline-text-secondary-color); +$info-plinth-fg-color: var(--timeline-text-secondary-color); +$preview-widget-fg-color: var(--timeline-text-secondary-color); +// +// --primary-color +$accent-color-alt: var(--primary-color); +$input-focused-border-color: var(--primary-color); +// +// --warning-color +$button-danger-bg-color: var(--warning-color); +$event-highlight-fg-color: var(--warning-color); +$input-invalid-border-color: var(--warning-color); +$mention-user-pill-bg-color: var(--warning-color); +$notice-primary-color: var(--warning-color); +$pinned-unread-color: var(--warning-color); +$warning-color: var(--warning-color); +$button-danger-disabled-bg-color: var(--warning-color-50pct); // still needs alpha at 0.5 diff --git a/res/themes/light-custom/css/light-custom.scss b/res/themes/light-custom/css/light-custom.scss new file mode 100644 index 0000000000..278ca5f0b1 --- /dev/null +++ b/res/themes/light-custom/css/light-custom.scss @@ -0,0 +1,5 @@ +@import "../../light/css/_paths.scss"; +@import "../../light/css/_fonts.scss"; +@import "../../light/css/_light.scss"; +@import "_custom.scss"; +@import "../../../../res/css/_components.scss"; diff --git a/res/themes/light/css/_fonts.scss b/res/themes/light/css/_fonts.scss index ac15847e44..1bc9b5a4a3 100644 --- a/res/themes/light/css/_fonts.scss +++ b/res/themes/light/css/_fonts.scss @@ -15,39 +15,70 @@ /* the 'src' links are relative to the bundle.css, which is in a subdirectory. */ @font-face { - font-family: 'Nunito'; - font-style: normal; - font-weight: 400; - src: url('$(res)/fonts/Nunito/Nunito-Regular.ttf') format('truetype'); -} -@font-face { - font-family: 'Nunito'; - font-style: normal; - font-weight: 600; - src: url('$(res)/fonts/Nunito/Nunito-SemiBold.ttf') format('truetype'); -} -@font-face { - font-family: 'Nunito'; - font-style: normal; - font-weight: 700; - src: url('$(res)/fonts/Nunito/Nunito-Bold.ttf') format('truetype'); -} - -/* - * Fira Mono - * Used for monospace copy, i.e. code - */ - -@font-face { - font-family: 'Fira Mono'; - src: url('$(res)/fonts/Fira_Mono/FiraMono-Regular.ttf') format('truetype'); + font-family: 'Nunito'; + font-style: normal; font-weight: 400; + src: url('$(res)/fonts/Nunito/Nunito-Regular.ttf') format('truetype'); +} +@font-face { + font-family: 'Nunito'; font-style: normal; + font-weight: 600; + src: url('$(res)/fonts/Nunito/Nunito-SemiBold.ttf') format('truetype'); +} +@font-face { + font-family: 'Nunito'; + font-style: normal; + font-weight: 700; + src: url('$(res)/fonts/Nunito/Nunito-Bold.ttf') format('truetype'); } +/* latin-ext */ @font-face { - font-family: 'Fira Mono'; - src: url('$(res)/fonts/Fira_Mono/FiraMono-Bold.ttf') format('truetype'); - font-weight: 700; + font-family: 'Inconsolata'; font-style: normal; + font-weight: 400; + src: local('Inconsolata Regular'), local('Inconsolata-Regular'), url('$(res)/fonts/Inconsolata/QldKNThLqRwH-OJ1UHjlKGlX5qhExfHwNJU.woff2') format('woff2'); + unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF; } +/* latin */ +@font-face { + font-family: 'Inconsolata'; + font-style: normal; + font-weight: 400; + font-display: swap; + src: local('Inconsolata Regular'), local('Inconsolata-Regular'), url('$(res)/fonts/Inconsolata/QldKNThLqRwH-OJ1UHjlKGlZ5qhExfHw.woff2') format('woff2'); + unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; +} +/* latin-ext */ +@font-face { + font-family: 'Inconsolata'; + font-style: normal; + font-weight: 700; + font-display: swap; + src: local('Inconsolata Bold'), local('Inconsolata-Bold'), url('$(res)/fonts/Inconsolata/QldXNThLqRwH-OJ1UHjlKGHiw71n5_zaDpwm80E.woff2') format('woff2'); + unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF; +} +/* latin */ +@font-face { + font-family: 'Inconsolata'; + font-style: normal; + font-weight: 700; + font-display: swap; + src: local('Inconsolata Bold'), local('Inconsolata-Bold'), url('$(res)/fonts/Inconsolata/QldXNThLqRwH-OJ1UHjlKGHiw71p5_zaDpwm.woff2') format('woff2'); + unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; +} + +/* a COLR/CPAL version of Twemoji used for consistent cross-browser emoji + * taken from https://github.com/mozilla/twemoji-colr + * using the fix from https://github.com/mozilla/twemoji-colr/issues/50 to + * work on macOS + */ +/* +// except we now load it dynamically via FontManager to handle browsers +// which can't render COLR/CPAL still +@font-face { + font-family: "Twemoji Mozilla"; + src: url('$(res)/fonts/Twemoji_Mozilla/TwemojiMozilla.woff2') format('woff2'); +} +*/ \ No newline at end of file diff --git a/res/themes/light/css/_light.scss b/res/themes/light/css/_light.scss index adadd39333..0a3ef812b8 100644 --- a/res/themes/light/css/_light.scss +++ b/res/themes/light/css/_light.scss @@ -1,15 +1,20 @@ // XXX: check this? /* Nunito lacks combining diacritics, so these will fall through to the next font. Helevetica's diacritics however do not combine - nicely with Open Sans (on OSX, at least) and result in a huge - horizontal mess. Arial empirically gets it right, hence prioritising - Arial here. */ -$font-family: 'Nunito', Arial, Helvetica, Sans-Serif; + nicely (on OSX, at least) and result in a huge horizontal mess. + Arial empirically gets it right, hence prioritising Arial here. */ +/* We fall through to Twemoji for emoji rather than falling through + to native Emoji fonts (if any) to ensure cross-browser consistency */ +$font-family: Nunito, Twemoji, 'Apple Color Emoji', 'Segoe UI Emoji', 'Noto Color Emoji', Arial, Helvetica, Sans-Serif; + +$monospace-font-family: Inconsolata, Twemoji, 'Apple Color Emoji', 'Segoe UI Emoji', 'Noto Color Emoji', Courier, monospace; // unified palette // try to use these colors when possible $accent-color: #03b381; +$accent-bg-color: rgba(3, 179, 129, 0.16); $notice-primary-color: #ff4b55; +$notice-primary-bg-color: rgba(255, 75, 85, 0.16); $notice-secondary-color: #61708b; $header-panel-bg-color: #f3f8fd; @@ -25,15 +30,17 @@ $focus-bg-color: #dddddd; // button UI (white-on-green in light skin) $accent-fg-color: #ffffff; -$accent-color-50pct: #92caad; +$accent-color-50pct: rgba(3, 179, 129, 0.5); //#03b381 in rgb +$accent-color-darker: #92caad; $accent-color-alt: #238CF5; $selection-fg-color: $primary-bg-color; $focus-brightness: 105%; -// red warning colour -$warning-color: $notice-primary-color; +// warning colours +$warning-color: $notice-primary-color; // red +$orange-warning-color: #ff8d13; // used for true warnings // background colour for warnings $warning-bg-color: #DF2A8B; $info-bg-color: #2A9EDF; @@ -162,6 +169,7 @@ $header-divider-color: #91A1C0; // ******************** $roomtile-name-color: #61708b; +$roomtile-badge-fg-color: $accent-fg-color; $roomtile-selected-color: #212121; $roomtile-notified-color: #212121; $roomtile-selected-bg-color: #fff; @@ -191,11 +199,19 @@ $widget-menu-bar-bg-color: $secondary-accent-color; // ******************** +// both $event-highlight-bg-color and $room-warning-bg-color share this value, +// so to not make their order dependent on who depends on who, have a shared value +// defined before both +$yellow-background: #fff8e3; + // event tile lifecycle $event-encrypting-color: #abddbc; $event-sending-color: #ddd; $event-notsent-color: #f44; +$event-highlight-fg-color: $warning-color; +$event-highlight-bg-color: $yellow-background; + // event redaction $event-redacted-fg-color: #e2e2e2; $event-redacted-border-color: #cccccc; @@ -221,7 +237,7 @@ $tab-label-active-fg-color: #ffffff; $tab-label-bg-color: transparent; $tab-label-active-bg-color: $accent-color; $tab-label-icon-bg-color: #454545; -$tab-label-active-icon-bg-color: #ffffff; +$tab-label-active-icon-bg-color: $tab-label-active-fg-color; // Buttons $button-primary-fg-color: #ffffff; @@ -231,6 +247,10 @@ $button-danger-fg-color: #ffffff; $button-danger-bg-color: $notice-primary-color; $button-danger-disabled-fg-color: #ffffff; $button-danger-disabled-bg-color: #f5b6bb; // TODO: Verify color +$button-link-fg-color: $accent-color; +$button-link-bg-color: transparent; + +$visual-bell-bg-color: #faa; // Toggle switch $togglesw-off-color: #c1c9d6; @@ -239,7 +259,7 @@ $togglesw-ball-color: #fff; $progressbar-color: #000; -$room-warning-bg-color: #fff8e3; +$room-warning-bg-color: $yellow-background; $memberstatus-placeholder-color: $roomtile-name-color; @@ -257,14 +277,22 @@ $panel-gradient: rgba(242, 245, 248, 0), rgba(242, 245, 248, 1); $message-action-bar-bg-color: $primary-bg-color; $message-action-bar-fg-color: $primary-fg-color; $message-action-bar-border-color: #e9edf1; -$message-action-bar-hover-border-color: #b8c1d2; +$message-action-bar-hover-border-color: $focus-bg-color; $reaction-row-button-bg-color: $header-panel-bg-color; $reaction-row-button-border-color: #e9edf1; -$reaction-row-button-hover-border-color: #bebebe; +$reaction-row-button-hover-border-color: $focus-bg-color; $reaction-row-button-selected-bg-color: #e9fff9; $reaction-row-button-selected-border-color: $accent-color; +$tooltip-timeline-bg-color: $tagpanel-bg-color; +$tooltip-timeline-fg-color: #ffffff; + +$interactive-tooltip-bg-color: #27303a; +$interactive-tooltip-fg-color: #ffffff; + +$breadcrumb-placeholder-bg-color: #e8eef5; + // ***** Mixins! ***** @define-mixin mx_DialogButton { @@ -305,3 +333,8 @@ $reaction-row-button-selected-border-color: $accent-color; color: $accent-color; background-color: $button-secondary-bg-color; } + +@define-mixin mx_Dialog_link { + color: $accent-color; + text-decoration: none; +} diff --git a/scripts/ci/end-to-end-tests.sh b/scripts/ci/end-to-end-tests.sh index 0ec26df450..567c853c2b 100644 --- a/scripts/ci/end-to-end-tests.sh +++ b/scripts/ci/end-to-end-tests.sh @@ -28,14 +28,14 @@ REACT_SDK_DIR=`pwd` echo "--- Building Riot" scripts/ci/build.sh # run end to end tests -echo "--- Fetching end-to-end tests from master" -scripts/fetchdep.sh matrix-org matrix-react-end-to-end-tests master -pushd matrix-react-end-to-end-tests +pushd test/end-to-end-tests ln -s $REACT_SDK_DIR/$RIOT_WEB_DIR riot/riot-web # PUPPETEER_SKIP_CHROMIUM_DOWNLOAD=true ./install.sh # CHROME_PATH=$(which google-chrome-stable) ./run.sh echo "--- Install synapse & other dependencies" ./install.sh +# install static webserver to server symlinked local copy of riot +./riot/install-webserver.sh mkdir logs echo "+++ Running end-to-end tests" TESTS_STARTED=1 diff --git a/scripts/compare-file.js b/scripts/compare-file.js new file mode 100644 index 0000000000..f53275ebfa --- /dev/null +++ b/scripts/compare-file.js @@ -0,0 +1,10 @@ +const fs = require("fs"); + +if (process.argv.length < 4) throw new Error("Missing source and target file arguments"); + +const sourceFile = fs.readFileSync(process.argv[2], 'utf8'); +const targetFile = fs.readFileSync(process.argv[3], 'utf8'); + +if (sourceFile !== targetFile) { + throw new Error("Files do not match"); +} diff --git a/scripts/emoji-data-strip.js b/scripts/emoji-data-strip.js index 42bf2ac2de..1c3738cab1 100644 --- a/scripts/emoji-data-strip.js +++ b/scripts/emoji-data-strip.js @@ -1,28 +1,29 @@ #!/usr/bin/env node -const EMOJI_DATA = require('emojione/emoji.json'); -const EMOJI_SUPPORTED = Object.keys(require('emojione').emojioneList); + +// This generates src/stripped-emoji.json as used by the EmojiProvider autocomplete +// provider. + +const EMOJIBASE = require('emojibase-data/en/compact.json'); + const fs = require('fs'); -const output = Object.keys(EMOJI_DATA).map( - (key) => { - const datum = EMOJI_DATA[key]; +const output = EMOJIBASE.map( + (datum) => { const newDatum = { - name: datum.name, - shortname: datum.shortname, - category: datum.category, - emoji_order: datum.emoji_order, + name: datum.annotation, + shortname: `:${datum.shortcodes[0]}:`, + category: datum.group, + emoji_order: datum.order, }; - if (datum.aliases.length > 0) { - newDatum.aliases = datum.aliases; + if (datum.shortcodes.length > 1) { + newDatum.aliases = datum.shortcodes.slice(1).map(s => `:${s}:`); } - if (datum.aliases_ascii.length > 0) { - newDatum.aliases_ascii = datum.aliases_ascii; + if (datum.emoticon) { + newDatum.aliases_ascii = [ datum.emoticon ]; } return newDatum; } -).filter((datum) => { - return EMOJI_SUPPORTED.includes(datum.shortname); -}); +); // Write to a file in src. Changes should be checked into git. This file is copied by // babel using --copy-files diff --git a/src/AddThreepid.js b/src/AddThreepid.js index adeaf84a69..694c2e124c 100644 --- a/src/AddThreepid.js +++ b/src/AddThreepid.js @@ -1,6 +1,7 @@ /* Copyright 2016 OpenMarket Ltd Copyright 2017 Vector Creations Ltd +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. @@ -16,7 +17,14 @@ limitations under the License. */ import MatrixClientPeg from './MatrixClientPeg'; +import sdk from './index'; +import Modal from './Modal'; import { _t } from './languageHandler'; +import IdentityAuthClient from './IdentityAuthClient'; + +function getIdServerDomain() { + return MatrixClientPeg.get().idBaseUrl.split("://")[1]; +} /** * Allows a user to add a third party identifier to their homeserver and, @@ -25,21 +33,25 @@ import { _t } from './languageHandler'; * This involves getting an email token from the identity server to "prove" that * the client owns the given email address, which is then passed to the * add threepid API on the homeserver. + * + * Diagrams of the intended API flows here are available at: + * + * https://gist.github.com/jryans/839a09bf0c5a70e2f36ed990d50ed928 */ export default class AddThreepid { constructor() { this.clientSecret = MatrixClientPeg.get().generateClientSecret(); + this.sessionId = null; + this.submitUrl = null; } /** - * Attempt to add an email threepid. This will trigger a side-effect of - * sending an email to the provided email address. + * Attempt to add an email threepid to the homeserver. + * This will trigger a side-effect of sending an email to the provided email address. * @param {string} emailAddress The email address to add - * @param {boolean} bind If True, bind this email to this mxid on the Identity Server * @return {Promise} Resolves when the email has been sent. Then call checkEmailLinkClicked(). */ - addEmailAddress(emailAddress, bind) { - this.bind = bind; + addEmailAddress(emailAddress) { return MatrixClientPeg.get().requestAdd3pidEmailToken(emailAddress, this.clientSecret, 1).then((res) => { this.sessionId = res.sid; return res; @@ -54,19 +66,50 @@ export default class AddThreepid { } /** - * Attempt to add a msisdn threepid. This will trigger a side-effect of - * sending a test message to the provided phone number. + * Attempt to bind an email threepid on the identity server via the homeserver. + * This will trigger a side-effect of sending an email to the provided email address. + * @param {string} emailAddress The email address to add + * @return {Promise} Resolves when the email has been sent. Then call checkEmailLinkClicked(). + */ + async bindEmailAddress(emailAddress) { + this.bind = true; + if (await MatrixClientPeg.get().doesServerSupportSeparateAddAndBind()) { + // For separate bind, request a token directly from the IS. + const authClient = new IdentityAuthClient(); + const identityAccessToken = await authClient.getAccessToken(); + return MatrixClientPeg.get().requestEmailToken( + emailAddress, this.clientSecret, 1, + undefined, undefined, identityAccessToken, + ).then((res) => { + this.sessionId = res.sid; + return res; + }, function(err) { + if (err.errcode === 'M_THREEPID_IN_USE') { + err.message = _t('This email address is already in use'); + } else if (err.httpStatus) { + err.message = err.message + ` (Status ${err.httpStatus})`; + } + throw err; + }); + } else { + // For tangled bind, request a token via the HS. + return this.addEmailAddress(emailAddress); + } + } + + /** + * Attempt to add a MSISDN threepid to the homeserver. + * This will trigger a side-effect of sending an SMS to the provided phone number. * @param {string} phoneCountry The ISO 2 letter code of the country to resolve phoneNumber in * @param {string} phoneNumber The national or international formatted phone number to add - * @param {boolean} bind If True, bind this phone number to this mxid on the Identity Server * @return {Promise} Resolves when the text message has been sent. Then call haveMsisdnToken(). */ - addMsisdn(phoneCountry, phoneNumber, bind) { - this.bind = bind; + addMsisdn(phoneCountry, phoneNumber) { return MatrixClientPeg.get().requestAdd3pidMsisdnToken( phoneCountry, phoneNumber, this.clientSecret, 1, ).then((res) => { this.sessionId = res.sid; + this.submitUrl = res.submit_url; return res; }, function(err) { if (err.errcode === 'M_THREEPID_IN_USE') { @@ -78,49 +121,185 @@ export default class AddThreepid { }); } + /** + * Attempt to bind a MSISDN threepid on the identity server via the homeserver. + * This will trigger a side-effect of sending an SMS to the provided phone number. + * @param {string} phoneCountry The ISO 2 letter code of the country to resolve phoneNumber in + * @param {string} phoneNumber The national or international formatted phone number to add + * @return {Promise} Resolves when the text message has been sent. Then call haveMsisdnToken(). + */ + async bindMsisdn(phoneCountry, phoneNumber) { + this.bind = true; + if (await MatrixClientPeg.get().doesServerSupportSeparateAddAndBind()) { + // For separate bind, request a token directly from the IS. + const authClient = new IdentityAuthClient(); + const identityAccessToken = await authClient.getAccessToken(); + return MatrixClientPeg.get().requestMsisdnToken( + phoneCountry, phoneNumber, this.clientSecret, 1, + undefined, undefined, identityAccessToken, + ).then((res) => { + this.sessionId = res.sid; + return res; + }, function(err) { + if (err.errcode === 'M_THREEPID_IN_USE') { + err.message = _t('This phone number is already in use'); + } else if (err.httpStatus) { + err.message = err.message + ` (Status ${err.httpStatus})`; + } + throw err; + }); + } else { + // For tangled bind, request a token via the HS. + return this.addMsisdn(phoneCountry, phoneNumber); + } + } + /** * Checks if the email link has been clicked by attempting to add the threepid * @return {Promise} Resolves if the email address was added. Rejects with an object * with a "message" property which contains a human-readable message detailing why * the request failed. */ - checkEmailLinkClicked() { - const identityServerDomain = MatrixClientPeg.get().idBaseUrl.split("://")[1]; - return MatrixClientPeg.get().addThreePid({ - sid: this.sessionId, - client_secret: this.clientSecret, - id_server: identityServerDomain, - }, this.bind).catch(function(err) { + async checkEmailLinkClicked() { + try { + if (await MatrixClientPeg.get().doesServerSupportSeparateAddAndBind()) { + if (this.bind) { + const authClient = new IdentityAuthClient(); + const identityAccessToken = await authClient.getAccessToken(); + await MatrixClientPeg.get().bindThreePid({ + sid: this.sessionId, + client_secret: this.clientSecret, + id_server: getIdServerDomain(), + id_access_token: identityAccessToken, + }); + } else { + try { + await this._makeAddThreepidOnlyRequest(); + + // The spec has always required this to use UI auth but synapse briefly + // implemented it without, so this may just succeed and that's OK. + return; + } catch (e) { + if (e.httpStatus !== 401 || !e.data || !e.data.flows) { + // doesn't look like an interactive-auth failure + throw e; + } + + // pop up an interactive auth dialog + const InteractiveAuthDialog = sdk.getComponent("dialogs.InteractiveAuthDialog"); + + const { finished } = Modal.createTrackedDialog('Add Email', '', InteractiveAuthDialog, { + title: _t("Add Email Address"), + matrixClient: MatrixClientPeg.get(), + authData: e.data, + makeRequest: this._makeAddThreepidOnlyRequest, + }); + return finished; + } + } + } else { + await MatrixClientPeg.get().addThreePid({ + sid: this.sessionId, + client_secret: this.clientSecret, + id_server: getIdServerDomain(), + }, this.bind); + } + } catch (err) { if (err.httpStatus === 401) { err.message = _t('Failed to verify email address: make sure you clicked the link in the email'); } else if (err.httpStatus) { err.message += ` (Status ${err.httpStatus})`; } throw err; + } + } + + /** + * @param {Object} auth UI auth object + * @return {Promise} Response from /3pid/add call (in current spec, an empty object) + */ + _makeAddThreepidOnlyRequest = (auth) => { + return MatrixClientPeg.get().addThreePidOnly({ + sid: this.sessionId, + client_secret: this.clientSecret, + auth, }); } /** * Takes a phone number verification code as entered by the user and validates * it with the ID server, then if successful, adds the phone number. - * @param {string} token phone number verification code as entered by the user + * @param {string} msisdnToken phone number verification code as entered by the user * @return {Promise} Resolves if the phone number was added. Rejects with an object * with a "message" property which contains a human-readable message detailing why * the request failed. */ - haveMsisdnToken(token) { - return MatrixClientPeg.get().submitMsisdnToken( - this.sessionId, this.clientSecret, token, - ).then((result) => { - if (result.errcode) { - throw result; + async haveMsisdnToken(msisdnToken) { + const authClient = new IdentityAuthClient(); + const supportsSeparateAddAndBind = + await MatrixClientPeg.get().doesServerSupportSeparateAddAndBind(); + + let result; + if (this.submitUrl) { + result = await MatrixClientPeg.get().submitMsisdnTokenOtherUrl( + this.submitUrl, + this.sessionId, + this.clientSecret, + msisdnToken, + ); + } else if (this.bind || !supportsSeparateAddAndBind) { + result = await MatrixClientPeg.get().submitMsisdnToken( + this.sessionId, + this.clientSecret, + msisdnToken, + await authClient.getAccessToken(), + ); + } else { + throw new Error("The add / bind with MSISDN flow is misconfigured"); + } + if (result.errcode) { + throw result; + } + + if (supportsSeparateAddAndBind) { + if (this.bind) { + await MatrixClientPeg.get().bindThreePid({ + sid: this.sessionId, + client_secret: this.clientSecret, + id_server: getIdServerDomain(), + id_access_token: await authClient.getAccessToken(), + }); + } else { + try { + await this._makeAddThreepidOnlyRequest(); + + // The spec has always required this to use UI auth but synapse briefly + // implemented it without, so this may just succeed and that's OK. + return; + } catch (e) { + if (e.httpStatus !== 401 || !e.data || !e.data.flows) { + // doesn't look like an interactive-auth failure + throw e; + } + + // pop up an interactive auth dialog + const InteractiveAuthDialog = sdk.getComponent("dialogs.InteractiveAuthDialog"); + + const { finished } = Modal.createTrackedDialog('Add MSISDN', '', InteractiveAuthDialog, { + title: _t("Add Phone Number"), + matrixClient: MatrixClientPeg.get(), + authData: e.data, + makeRequest: this._makeAddThreepidOnlyRequest, + }); + return finished; + } } - const identityServerDomain = MatrixClientPeg.get().idBaseUrl.split("://")[1]; - return MatrixClientPeg.get().addThreePid({ + } else { + await MatrixClientPeg.get().addThreePid({ sid: this.sessionId, client_secret: this.clientSecret, - id_server: identityServerDomain, + id_server: getIdServerDomain(), }, this.bind); - }); + } } } diff --git a/src/Avatar.js b/src/Avatar.js index 99b558fa93..17860698cb 100644 --- a/src/Avatar.js +++ b/src/Avatar.js @@ -17,6 +17,7 @@ limitations under the License. 'use strict'; import {ContentRepo} from 'matrix-js-sdk'; import MatrixClientPeg from './MatrixClientPeg'; +import DMRoomMap from './utils/DMRoomMap'; module.exports = { avatarUrlForMember: function(member, width, height, resizeMethod) { @@ -58,4 +59,76 @@ module.exports = { } return require('../res/img/' + images[total % images.length] + '.png'); }, + + /** + * returns the first (non-sigil) character of 'name', + * converted to uppercase + * @param {string} name + * @return {string} the first letter + */ + getInitialLetter(name) { + if (!name) { + // XXX: We should find out what causes the name to sometimes be falsy. + console.trace("`name` argument to `getInitialLetter` not supplied"); + return undefined; + } + if (name.length < 1) { + return undefined; + } + + let idx = 0; + const initial = name[0]; + if ((initial === '@' || initial === '#' || initial === '+') && name[1]) { + idx++; + } + + // string.codePointAt(0) would do this, but that isn't supported by + // some browsers (notably PhantomJS). + let chars = 1; + const first = name.charCodeAt(idx); + + // check if it’s the start of a surrogate pair + if (first >= 0xD800 && first <= 0xDBFF && name[idx+1]) { + const second = name.charCodeAt(idx+1); + if (second >= 0xDC00 && second <= 0xDFFF) { + chars++; + } + } + + const firstChar = name.substring(idx, idx+chars); + return firstChar.toUpperCase(); + }, + + avatarUrlForRoom(room, width, height, resizeMethod) { + const explicitRoomAvatar = room.getAvatarUrl( + MatrixClientPeg.get().getHomeserverUrl(), + width, + height, + resizeMethod, + false, + ); + if (explicitRoomAvatar) { + return explicitRoomAvatar; + } + + let otherMember = null; + const otherUserId = DMRoomMap.shared().getUserIdForRoomId(room.roomId); + if (otherUserId) { + otherMember = room.getMember(otherUserId); + } else { + // if the room is not marked as a 1:1, but only has max 2 members + // then still try to show any avatar (pref. other member) + otherMember = room.getAvatarFallbackMember(); + } + if (otherMember) { + return otherMember.getAvatarUrl( + MatrixClientPeg.get().getHomeserverUrl(), + width, + height, + resizeMethod, + false, + ); + } + return null; + }, }; diff --git a/src/BasePlatform.js b/src/BasePlatform.js index 54310d1849..14e34a1f40 100644 --- a/src/BasePlatform.js +++ b/src/BasePlatform.js @@ -19,6 +19,7 @@ limitations under the License. */ import dis from './dispatcher'; +import BaseEventIndexManager from './indexing/BaseEventIndexManager'; /** * Base class for classes that provide platform-specific functionality @@ -36,6 +37,7 @@ export default class BasePlatform { _onAction(payload: Object) { switch (payload.action) { + case 'on_client_not_viable': case 'on_logged_out': this.setNotificationCount(0); break; @@ -127,6 +129,18 @@ export default class BasePlatform { throw new Error("Unimplemented"); } + supportsAutoHideMenuBar(): boolean { + return false; + } + + async getAutoHideMenuBarEnabled(): boolean { + return false; + } + + async setAutoHideMenuBarEnabled(enabled: boolean): void { + throw new Error("Unimplemented"); + } + supportsMinimizeToTray(): boolean { return false; } @@ -138,4 +152,14 @@ export default class BasePlatform { async setMinimizeToTrayEnabled(enabled: boolean): void { throw new Error("Unimplemented"); } + + /** + * Get our platform specific EventIndexManager. + * + * @return {BaseEventIndexManager} The EventIndex manager for our platform, + * can be null if the platform doesn't support event indexing. + */ + getEventIndexingManager(): BaseEventIndexManager | null { + return null; + } } diff --git a/src/CallHandler.js b/src/CallHandler.js index acdc3e5122..ecbf6c2c12 100644 --- a/src/CallHandler.js +++ b/src/CallHandler.js @@ -1,6 +1,7 @@ /* Copyright 2015, 2016 OpenMarket Ltd Copyright 2017, 2018 New Vector Ltd +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. @@ -63,7 +64,8 @@ import SdkConfig from './SdkConfig'; import { showUnknownDeviceDialogForCalls } from './cryptodevices'; import WidgetUtils from './utils/WidgetUtils'; import WidgetEchoStore from './stores/WidgetEchoStore'; -import ScalarAuthClient from './ScalarAuthClient'; +import {IntegrationManagers} from "./integrations/IntegrationManagers"; +import SettingsStore, { SettingLevel } from './settings/SettingsStore'; global.mxCalls = { //room_id: MatrixCall @@ -78,13 +80,26 @@ function play(audioId) { // which listens? const audio = document.getElementById(audioId); if (audio) { + const playAudio = async () => { + try { + // This still causes the chrome debugger to break on promise rejection if + // the promise is rejected, even though we're catching the exception. + await audio.play(); + } catch (e) { + // This is usually because the user hasn't interacted with the document, + // or chrome doesn't think so and is denying the request. Not sure what + // we can really do here... + // https://github.com/vector-im/riot-web/issues/7657 + console.log("Unable to play audio clip", e); + } + }; if (audioPromises[audioId]) { audioPromises[audioId] = audioPromises[audioId].then(()=>{ audio.load(); - return audio.play(); + return playAudio(); }); } else { - audioPromises[audioId] = audio.play(); + audioPromises[audioId] = playAudio(); } } } @@ -117,8 +132,7 @@ function _reAttemptCall(call) { function _setCallListeners(call) { call.on("error", function(err) { - console.error("Call error: %s", err); - console.error(err.stack); + console.error("Call error:", err); if (err.code === 'unknown_devices') { const QuestionDialog = sdk.getComponent("dialogs.QuestionDialog"); @@ -146,8 +160,15 @@ function _setCallListeners(call) { }, }); } else { - const ErrorDialog = sdk.getComponent("dialogs.ErrorDialog"); + if ( + MatrixClientPeg.get().getTurnServers().length === 0 && + SettingsStore.getValue("fallbackICEServerAllowed") === null + ) { + _showICEFallbackPrompt(); + return; + } + const ErrorDialog = sdk.getComponent("dialogs.ErrorDialog"); Modal.createTrackedDialog('Call Failed', '', ErrorDialog, { title: _t('Call Failed'), description: err.message, @@ -197,7 +218,7 @@ function _setCallListeners(call) { function _setCallState(call, roomId, status) { console.log( - "Call state in %s changed to %s (%s)", roomId, status, (call ? call.call_state : "-"), + `Call state in ${roomId} changed to ${status} (${call ? call.call_state : "-"})`, ); calls[roomId] = call; @@ -217,6 +238,36 @@ function _setCallState(call, roomId, status) { }); } +function _showICEFallbackPrompt() { + const cli = MatrixClientPeg.get(); + const QuestionDialog = sdk.getComponent("dialogs.QuestionDialog"); + const code = sub => {sub}; + Modal.createTrackedDialog('No TURN servers', '', QuestionDialog, { + title: _t("Call failed due to misconfigured server"), + description:

+

{_t( + "Please ask the administrator of your homeserver " + + "(%(homeserverDomain)s) to configure a TURN server in " + + "order for calls to work reliably.", + { homeserverDomain: cli.getDomain() }, { code }, + )}

+

{_t( + "Alternatively, you can try to use the public server at " + + "turn.matrix.org, but this will not be as reliable, and " + + "it will share your IP address with that server. You can also manage " + + "this in Settings.", + null, { code }, + )}

+
, + button: _t('Try using turn.matrix.org'), + cancelButton: _t('OK'), + onFinished: (allow) => { + SettingsStore.setValue("fallbackICEServerAllowed", null, SettingLevel.DEVICE, allow); + cli.setFallbackICEServerAllowed(allow); + }, + }, null, true); +} + function _onAction(payload) { function placeCall(newCall) { _setCallListeners(newCall); @@ -284,7 +335,7 @@ function _onAction(payload) { }); return; } else if (members.length === 2) { - console.log("Place %s call in %s", payload.type, payload.room_id); + console.info("Place %s call in %s", payload.type, payload.room_id); const call = Matrix.createNewMatrixCall(MatrixClientPeg.get(), payload.room_id); placeCall(call); } else { // > 2 @@ -299,7 +350,7 @@ function _onAction(payload) { } break; case 'place_conference_call': - console.log("Place conference call in %s", payload.room_id); + console.info("Place conference call in %s", payload.room_id); _startCallApp(payload.room_id, payload.type); break; case 'incoming_call': @@ -344,24 +395,28 @@ function _onAction(payload) { } async function _startCallApp(roomId, type) { - // check for a working intgrations manager. Technically we could put + // check for a working integration manager. Technically we could put // the state event in anyway, but the resulting widget would then not // work for us. Better that the user knows before everyone else in the // room sees it. - const scalarClient = new ScalarAuthClient(); + const managers = IntegrationManagers.sharedInstance(); let haveScalar = false; - try { - await scalarClient.connect(); - haveScalar = scalarClient.hasCredentials(); - } catch (e) { - // fall through + if (managers.hasManager()) { + try { + const scalarClient = managers.getPrimaryManager().getScalarClient(); + await scalarClient.connect(); + haveScalar = scalarClient.hasCredentials(); + } catch (e) { + // ignore + } } + if (!haveScalar) { const ErrorDialog = sdk.getComponent("dialogs.ErrorDialog"); Modal.createTrackedDialog('Could not connect to the integration server', '', ErrorDialog, { title: _t('Could not connect to the integration server'), - description: _t('A conference call could not be started because the intgrations server is not available'), + description: _t('A conference call could not be started because the integrations server is not available'), }); return; } @@ -421,7 +476,8 @@ async function _startCallApp(roomId, type) { // URL, but this will at least allow the integration manager to not be hardcoded. widgetUrl = SdkConfig.get().integrations_jitsi_widget_url + '?' + queryString; } else { - widgetUrl = SdkConfig.get().integrations_rest_url + '/widgets/jitsi.html?' + queryString; + const apiUrl = IntegrationManagers.sharedInstance().getPrimaryManager().apiUrl; + widgetUrl = apiUrl + '/widgets/jitsi.html?' + queryString; } const widgetData = { widgetSessionId }; @@ -452,6 +508,17 @@ async function _startCallApp(roomId, type) { // with the dispatcher once if (!global.mxCallHandler) { dis.register(_onAction); + // add empty handlers for media actions, otherwise the media keys + // end up causing the audio elements with our ring/ringback etc + // audio clips in to play. + if (navigator.mediaSession) { + navigator.mediaSession.setActionHandler('play', function() {}); + navigator.mediaSession.setActionHandler('pause', function() {}); + navigator.mediaSession.setActionHandler('seekbackward', function() {}); + navigator.mediaSession.setActionHandler('seekforward', function() {}); + navigator.mediaSession.setActionHandler('previoustrack', function() {}); + navigator.mediaSession.setActionHandler('nexttrack', function() {}); + } } const callHandler = { diff --git a/src/CallMediaHandler.js b/src/CallMediaHandler.js index 9a1c9d70b8..a0364f798a 100644 --- a/src/CallMediaHandler.js +++ b/src/CallMediaHandler.js @@ -18,6 +18,11 @@ import * as Matrix from 'matrix-js-sdk'; import SettingsStore, {SettingLevel} from "./settings/SettingsStore"; export default { + hasAnyLabeledDevices: async function() { + const devices = await navigator.mediaDevices.enumerateDevices(); + return devices.some(d => !!d.label); + }, + getDevices: function() { // Only needed for Electron atm, though should work in modern browsers // once permission has been granted to the webapp @@ -26,8 +31,6 @@ export default { const audioinput = []; const videoinput = []; - if (devices.some((device) => !device.label)) return false; - devices.forEach((device) => { switch (device.kind) { case 'audiooutput': audiooutput.push(device); break; diff --git a/src/ContentMessages.js b/src/ContentMessages.js index ee3e8f1390..6908a6a18e 100644 --- a/src/ContentMessages.js +++ b/src/ContentMessages.js @@ -17,7 +17,6 @@ limitations under the License. 'use strict'; -import Promise from 'bluebird'; import extend from './extend'; import dis from './dispatcher'; import MatrixClientPeg from './MatrixClientPeg'; @@ -59,40 +58,38 @@ export class UploadCanceledError extends Error {} * and a thumbnail key. */ function createThumbnail(element, inputWidth, inputHeight, mimeType) { - const deferred = Promise.defer(); + return new Promise((resolve) => { + let targetWidth = inputWidth; + let targetHeight = inputHeight; + if (targetHeight > MAX_HEIGHT) { + targetWidth = Math.floor(targetWidth * (MAX_HEIGHT / targetHeight)); + targetHeight = MAX_HEIGHT; + } + if (targetWidth > MAX_WIDTH) { + targetHeight = Math.floor(targetHeight * (MAX_WIDTH / targetWidth)); + targetWidth = MAX_WIDTH; + } - let targetWidth = inputWidth; - let targetHeight = inputHeight; - if (targetHeight > MAX_HEIGHT) { - targetWidth = Math.floor(targetWidth * (MAX_HEIGHT / targetHeight)); - targetHeight = MAX_HEIGHT; - } - if (targetWidth > MAX_WIDTH) { - targetHeight = Math.floor(targetHeight * (MAX_WIDTH / targetWidth)); - targetWidth = MAX_WIDTH; - } - - const canvas = document.createElement("canvas"); - canvas.width = targetWidth; - canvas.height = targetHeight; - canvas.getContext("2d").drawImage(element, 0, 0, targetWidth, targetHeight); - canvas.toBlob(function(thumbnail) { - deferred.resolve({ - info: { - thumbnail_info: { - w: targetWidth, - h: targetHeight, - mimetype: thumbnail.type, - size: thumbnail.size, + const canvas = document.createElement("canvas"); + canvas.width = targetWidth; + canvas.height = targetHeight; + canvas.getContext("2d").drawImage(element, 0, 0, targetWidth, targetHeight); + canvas.toBlob(function(thumbnail) { + resolve({ + info: { + thumbnail_info: { + w: targetWidth, + h: targetHeight, + mimetype: thumbnail.type, + size: thumbnail.size, + }, + w: inputWidth, + h: inputHeight, }, - w: inputWidth, - h: inputHeight, - }, - thumbnail: thumbnail, - }); - }, mimeType); - - return deferred.promise; + thumbnail: thumbnail, + }); + }, mimeType); + }); } /** @@ -179,30 +176,29 @@ function infoForImageFile(matrixClient, roomId, imageFile) { * @return {Promise} A promise that resolves with the video image element. */ function loadVideoElement(videoFile) { - const deferred = Promise.defer(); + return new Promise((resolve, reject) => { + // Load the file into an html element + const video = document.createElement("video"); - // Load the file into an html element - const video = document.createElement("video"); + const reader = new FileReader(); - const reader = new FileReader(); - reader.onload = function(e) { - video.src = e.target.result; + reader.onload = function(e) { + video.src = e.target.result; - // Once ready, returns its size - // Wait until we have enough data to thumbnail the first frame. - video.onloadeddata = function() { - deferred.resolve(video); + // Once ready, returns its size + // Wait until we have enough data to thumbnail the first frame. + video.onloadeddata = function() { + resolve(video); + }; + video.onerror = function(e) { + reject(e); + }; }; - video.onerror = function(e) { - deferred.reject(e); + reader.onerror = function(e) { + reject(e); }; - }; - reader.onerror = function(e) { - deferred.reject(e); - }; - reader.readAsDataURL(videoFile); - - return deferred.promise; + reader.readAsDataURL(videoFile); + }); } /** @@ -236,16 +232,16 @@ function infoForVideoFile(matrixClient, roomId, videoFile) { * is read. */ function readFileAsArrayBuffer(file) { - const deferred = Promise.defer(); - const reader = new FileReader(); - reader.onload = function(e) { - deferred.resolve(e.target.result); - }; - reader.onerror = function(e) { - deferred.reject(e); - }; - reader.readAsArrayBuffer(file); - return deferred.promise; + return new Promise((resolve, reject) => { + const reader = new FileReader(); + reader.onload = function(e) { + resolve(e.target.result); + }; + reader.onerror = function(e) { + reject(e); + }; + reader.readAsArrayBuffer(file); + }); } /** @@ -425,19 +421,25 @@ export default class ContentMessages { } const UploadConfirmDialog = sdk.getComponent("dialogs.UploadConfirmDialog"); + let uploadAll = false; for (let i = 0; i < okFiles.length; ++i) { const file = okFiles[i]; - const shouldContinue = await new Promise((resolve) => { - Modal.createTrackedDialog('Upload Files confirmation', '', UploadConfirmDialog, { - file, - currentIndex: i, - totalFiles: okFiles.length, - onFinished: (shouldContinue) => { - resolve(shouldContinue); - }, + if (!uploadAll) { + const shouldContinue = await new Promise((resolve) => { + Modal.createTrackedDialog('Upload Files confirmation', '', UploadConfirmDialog, { + file, + currentIndex: i, + totalFiles: okFiles.length, + onFinished: (shouldContinue, shouldUploadAll) => { + if (shouldUploadAll) { + uploadAll = true; + } + resolve(shouldContinue); + }, + }); }); - }); - if (!shouldContinue) break; + if (!shouldContinue) break; + } this._sendContentToRoom(file, roomId, matrixClient); } } @@ -455,33 +457,34 @@ export default class ContentMessages { content.info.mimetype = file.type; } - const def = Promise.defer(); - if (file.type.indexOf('image/') == 0) { - content.msgtype = 'm.image'; - infoForImageFile(matrixClient, roomId, file).then((imageInfo)=>{ - extend(content.info, imageInfo); - def.resolve(); - }, (error)=>{ - console.error(error); + const prom = new Promise((resolve) => { + if (file.type.indexOf('image/') == 0) { + content.msgtype = 'm.image'; + infoForImageFile(matrixClient, roomId, file).then((imageInfo)=>{ + extend(content.info, imageInfo); + resolve(); + }, (error)=>{ + console.error(error); + content.msgtype = 'm.file'; + resolve(); + }); + } else if (file.type.indexOf('audio/') == 0) { + content.msgtype = 'm.audio'; + resolve(); + } else if (file.type.indexOf('video/') == 0) { + content.msgtype = 'm.video'; + infoForVideoFile(matrixClient, roomId, file).then((videoInfo)=>{ + extend(content.info, videoInfo); + resolve(); + }, (error)=>{ + content.msgtype = 'm.file'; + resolve(); + }); + } else { content.msgtype = 'm.file'; - def.resolve(); - }); - } else if (file.type.indexOf('audio/') == 0) { - content.msgtype = 'm.audio'; - def.resolve(); - } else if (file.type.indexOf('video/') == 0) { - content.msgtype = 'm.video'; - infoForVideoFile(matrixClient, roomId, file).then((videoInfo)=>{ - extend(content.info, videoInfo); - def.resolve(); - }, (error)=>{ - content.msgtype = 'm.file'; - def.resolve(); - }); - } else { - content.msgtype = 'm.file'; - def.resolve(); - } + resolve(); + } + }); const upload = { fileName: file.name || 'Attachment', @@ -503,7 +506,7 @@ export default class ContentMessages { dis.dispatch({action: 'upload_progress', upload: upload}); } - return def.promise.then(function() { + return prom.then(function() { // XXX: upload.promise must be the promise that // is returned by uploadFile as it has an abort() // method hacked onto it. diff --git a/src/FromWidgetPostMessageApi.js b/src/FromWidgetPostMessageApi.js index 61c51d4a20..8915c1412f 100644 --- a/src/FromWidgetPostMessageApi.js +++ b/src/FromWidgetPostMessageApi.js @@ -1,6 +1,7 @@ /* Copyright 2018 New Vector Ltd Copyright 2019 Travis Ralston +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. @@ -17,9 +18,12 @@ limitations under the License. import URL from 'url'; import dis from './dispatcher'; -import IntegrationManager from './IntegrationManager'; import WidgetMessagingEndpoint from './WidgetMessagingEndpoint'; import ActiveWidgetStore from './stores/ActiveWidgetStore'; +import MatrixClientPeg from "./MatrixClientPeg"; +import RoomViewStore from "./stores/RoomViewStore"; +import {IntegrationManagers} from "./integrations/IntegrationManagers"; +import SettingsStore from "./settings/SettingsStore"; const WIDGET_API_VERSION = '0.0.2'; // Current API version const SUPPORTED_WIDGET_API_VERSIONS = [ @@ -189,7 +193,21 @@ export default class FromWidgetPostMessageApi { const data = event.data.data || event.data.widgetData; const integType = (data && data.integType) ? data.integType : null; const integId = (data && data.integId) ? data.integId : null; - IntegrationManager.open(integType, integId); + + // TODO: Open the right integration manager for the widget + if (SettingsStore.isFeatureEnabled("feature_many_integration_managers")) { + IntegrationManagers.sharedInstance().openAll( + MatrixClientPeg.get().getRoom(RoomViewStore.getRoomId()), + `type_${integType}`, + integId, + ); + } else { + IntegrationManagers.sharedInstance().getPrimaryManager().open( + MatrixClientPeg.get().getRoom(RoomViewStore.getRoomId()), + `type_${integType}`, + integId, + ); + } } else if (action === 'set_always_on_screen') { // This is a new message: there is no reason to support the deprecated widgetData here const data = event.data.data; diff --git a/src/GroupAddressPicker.js b/src/GroupAddressPicker.js index 532ee23c25..793f5c9227 100644 --- a/src/GroupAddressPicker.js +++ b/src/GroupAddressPicker.js @@ -21,6 +21,7 @@ import MultiInviter from './utils/MultiInviter'; import { _t } from './languageHandler'; import MatrixClientPeg from './MatrixClientPeg'; import GroupStore from './stores/GroupStore'; +import {allSettled} from "./utils/promise"; export function showGroupInviteDialog(groupId) { return new Promise((resolve, reject) => { @@ -38,7 +39,7 @@ export function showGroupInviteDialog(groupId) { Modal.createTrackedDialog('Group Invite', '', AddressPickerDialog, { title: _t("Invite new community members"), description: description, - placeholder: _t("Name or matrix ID"), + placeholder: _t("Name or Matrix ID"), button: _t("Invite to Community"), validAddressTypes: ['mx-user-id'], onFinished: (success, addrs) => { @@ -46,7 +47,7 @@ export function showGroupInviteDialog(groupId) { _onGroupInviteFinished(groupId, addrs).then(resolve, reject); }, - }); + }, /*className=*/null, /*isPriority=*/false, /*isStatic=*/true); }); } @@ -61,7 +62,7 @@ export function showGroupAddRoomDialog(groupId) { ; const checkboxContainer =