diff --git a/res/css/_components.scss b/res/css/_components.scss index c82dedc069..57a34023c0 100644 --- a/res/css/_components.scss +++ b/res/css/_components.scss @@ -36,6 +36,7 @@ @import "./views/auth/_LanguageSelector.scss"; @import "./views/auth/_ServerConfig.scss"; @import "./views/auth/_ServerTypeSelector.scss"; +@import "./views/auth/_Welcome.scss"; @import "./views/avatars/_BaseAvatar.scss"; @import "./views/avatars/_MemberStatusMessageAvatar.scss"; @import "./views/context_menus/_MessageContextMenu.scss"; diff --git a/res/css/structures/_AutoHideScrollbar.scss b/res/css/structures/_AutoHideScrollbar.scss index cb0d6f7f09..0e1faf727d 100644 --- a/res/css/structures/_AutoHideScrollbar.scss +++ b/res/css/structures/_AutoHideScrollbar.scss @@ -74,6 +74,7 @@ body.mx_scrollbar_nooverlay { // or fallback for webkit browsers ::-webkit-scrollbar { width: 6px; + height: 6px; background-color: $scrollbar-track-color; } diff --git a/res/css/structures/_HomePage.scss b/res/css/structures/_HomePage.scss index 5f1e035e99..3aa80f6f59 100644 --- a/res/css/structures/_HomePage.scss +++ b/res/css/structures/_HomePage.scss @@ -1,6 +1,7 @@ /* Copyright 2016 OpenMarket Ltd Copyright 2017 Vector Creations Ltd +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. @@ -22,10 +23,3 @@ limitations under the License. margin-left: auto; margin-right: auto; } - -.mx_HomePage iframe { - display: block; - width: 100%; - height: 100%; - border: 0px; -} diff --git a/res/css/structures/_TabbedView.scss b/res/css/structures/_TabbedView.scss index fb4df53d52..6e435b8e75 100644 --- a/res/css/structures/_TabbedView.scss +++ b/res/css/structures/_TabbedView.scss @@ -28,8 +28,8 @@ limitations under the License. } .mx_TabbedView_tabLabels { - width: 150px; - max-width: 150px; + width: 170px; + max-width: 170px; color: $tab-label-fg-color; position: fixed; } @@ -39,9 +39,8 @@ limitations under the License. cursor: pointer; display: block; border-radius: 3px; - font-size: 12px; - font-weight: 600; - min-height: 20px; // use min-height instead of height to allow the label to overflow a bit + font-size: 14px; + min-height: 24px; // use min-height instead of height to allow the label to overflow a bit margin-bottom: 6px; position: relative; } @@ -55,8 +54,8 @@ limitations under the License. margin-left: 6px; margin-right: 9px; margin-top: 1px; - width: 14px; - height: 14px; + width: 16px; + height: 16px; display: inline-block; } @@ -64,9 +63,9 @@ limitations under the License. display: inline-block; background-color: $tab-label-icon-bg-color; mask-repeat: no-repeat; - mask-size: 14px; + mask-size: 16px; width: 14px; - height: 18px; + height: 22px; mask-position: center; content: ''; vertical-align: middle; @@ -81,7 +80,7 @@ limitations under the License. } .mx_TabbedView_tabPanel { - margin-left: 220px; // 150px sidebar + 70px padding + margin-left: 240px; // 170px sidebar + 70px padding flex-grow: 1; display: flex; flex-direction: column; diff --git a/res/css/views/auth/_Welcome.scss b/res/css/views/auth/_Welcome.scss new file mode 100644 index 0000000000..9043289184 --- /dev/null +++ b/res/css/views/auth/_Welcome.scss @@ -0,0 +1,26 @@ +/* +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_Welcome { + display: flex; + flex-direction: column; + align-items: center; +} + +.mx_Welcome .mx_AuthBody_language { + width: 120px; + margin-bottom: 10px; +} diff --git a/res/css/views/context_menus/_TopLeftMenu.scss b/res/css/views/context_menus/_TopLeftMenu.scss index 18463da824..f305f0fae3 100644 --- a/res/css/views/context_menus/_TopLeftMenu.scss +++ b/res/css/views/context_menus/_TopLeftMenu.scss @@ -27,6 +27,10 @@ limitations under the License. margin: 5px 0; padding: 0; + li.mx_TopLeftMenu_icon_home::after { + mask-image: url('$(res)/img/feather-icons/home.svg'); + } + li.mx_TopLeftMenu_icon_settings::after { mask-image: url('$(res)/img/feather-icons/settings.svg'); } diff --git a/res/css/views/dialogs/_SettingsDialog.scss b/res/css/views/dialogs/_SettingsDialog.scss index 4a9708f6d1..abf0048cfd 100644 --- a/res/css/views/dialogs/_SettingsDialog.scss +++ b/res/css/views/dialogs/_SettingsDialog.scss @@ -16,8 +16,8 @@ limitations under the License. .mx_SettingsDialog { .mx_Dialog { - max-width: 900px; - width: 80%; + max-width: 1000px; + width: 90%; height: 80%; border-radius: 4px; padding-top: 0; @@ -30,7 +30,7 @@ limitations under the License. .mx_TabbedView .mx_SettingsTab { box-sizing: border-box; - min-width: 550px; + min-width: 580px; padding-right: 130px; // Put some padding on the bottom to avoid the settings tab from diff --git a/res/css/views/elements/_Field.scss b/res/css/views/elements/_Field.scss index 6f215412db..6ce6b33a05 100644 --- a/res/css/views/elements/_Field.scss +++ b/res/css/views/elements/_Field.scss @@ -112,7 +112,11 @@ limitations under the License. } .mx_Field select:disabled, -.mx_Field input:disabled { +.mx_Field select:disabled + label, +.mx_Field input:disabled, +.mx_Field input:disabled + label, +.mx_Field textarea:disabled, +.mx_Field textarea:disabled + label { background-color: $field-focused-label-bg-color; color: $greyed-fg-color; } diff --git a/res/css/views/rooms/_RoomRecoveryReminder.scss b/res/css/views/rooms/_RoomRecoveryReminder.scss index e4e2d19b42..68e2bf861e 100644 --- a/res/css/views/rooms/_RoomRecoveryReminder.scss +++ b/res/css/views/rooms/_RoomRecoveryReminder.scss @@ -38,7 +38,6 @@ limitations under the License. margin: 0 10px; } -.mx_RoomRecoveryReminder_button.mx_RoomRecoveryReminder_secondary { - @mixin mx_DialogButton_secondary; - background-color: transparent; +.mx_RoomRecoveryReminder_secondary { + font-size: 90%; } diff --git a/res/css/views/rooms/_RoomTile.scss b/res/css/views/rooms/_RoomTile.scss index 220790784e..2024a503ae 100644 --- a/res/css/views/rooms/_RoomTile.scss +++ b/res/css/views/rooms/_RoomTile.scss @@ -154,7 +154,7 @@ limitations under the License. } .mx_RoomTile_unread, .mx_RoomTile_highlight { - font-weight: 700 ! important; + font-weight: 700 !important; .mx_RoomTile_name { color: $roomtile-selected-color; @@ -176,7 +176,7 @@ limitations under the License. } .mx_RoomTile:focus { - filter: none ! important; + filter: none !important; background-color: $roomtile-focused-bg-color; } diff --git a/res/css/views/settings/tabs/_SettingsTab.scss b/res/css/views/settings/tabs/_SettingsTab.scss index a899aec0fa..626c0e32eb 100644 --- a/res/css/views/settings/tabs/_SettingsTab.scss +++ b/res/css/views/settings/tabs/_SettingsTab.scss @@ -21,7 +21,7 @@ limitations under the License. } .mx_SettingsTab_subheading { - font-size: 14px; + font-size: 16px; display: block; font-family: $font-family; font-weight: 600; @@ -32,7 +32,7 @@ limitations under the License. .mx_SettingsTab_subsectionText { color: $settings-subsection-fg-color; - font-size: 12px; + font-size: 14px; padding-bottom: 12px; display: block; margin: 0 100px 0 0; // Align with the rest of the view @@ -45,9 +45,9 @@ limitations under the License. } .mx_SettingsTab_section .mx_SettingsFlag .mx_SettingsFlag_label { - vertical-align: bottom; + vertical-align: middle; display: inline-block; - font-size: 12px; + font-size: 14px; color: $primary-fg-color; max-width: calc(100% - 48px); // Force word wrap instead of colliding with the switch } diff --git a/res/css/views/verification/_VerificationShowSas.scss b/res/css/views/verification/_VerificationShowSas.scss index 32ccf6b0bb..a0da7e2539 100644 --- a/res/css/views/verification/_VerificationShowSas.scss +++ b/res/css/views/verification/_VerificationShowSas.scss @@ -14,9 +14,35 @@ See the License for the specific language governing permissions and limitations under the License. */ -.mx_VerificationShowSas_sas { +.mx_VerificationShowSas_decimalSas { text-align: center; font-weight: bold; padding-left: 3px; padding-right: 3px; } + +.mx_VerificationShowSas_decimalSas span { + margin-left: 5px; + margin-right: 5px; +} + +.mx_VerificationShowSas_emojiSas { + text-align: center; +} + +.mx_VerificationShowSas_emojiSas_block { + display: inline-block; + margin-left: 15px; + margin-right: 15px; + text-align: center; + margin-bottom: 20px; +} + +.mx_VerificationShowSas_emojiSas_emoji { + font-size: 48px; +} + +.mx_VerificationShowSas_emojiSas_label { + text-align: center; + font-weight: bold; +} diff --git a/res/img/03b381.png b/res/img/03b381.png new file mode 100644 index 0000000000..cf28fc7e59 Binary files /dev/null and b/res/img/03b381.png differ diff --git a/res/img/368bd6.png b/res/img/368bd6.png new file mode 100644 index 0000000000..a2700bd0ae Binary files /dev/null and b/res/img/368bd6.png differ diff --git a/res/img/50e2c2.png b/res/img/50e2c2.png deleted file mode 100644 index ee0f855895..0000000000 Binary files a/res/img/50e2c2.png and /dev/null differ diff --git a/res/img/76cfa6.png b/res/img/76cfa6.png deleted file mode 100644 index de1ea60d54..0000000000 Binary files a/res/img/76cfa6.png and /dev/null differ diff --git a/res/img/80cef4.png b/res/img/80cef4.png deleted file mode 100644 index 637d03f63c..0000000000 Binary files a/res/img/80cef4.png and /dev/null differ diff --git a/res/img/ac3ba8.png b/res/img/ac3ba8.png new file mode 100644 index 0000000000..031471d85a Binary files /dev/null and b/res/img/ac3ba8.png differ diff --git a/res/img/f4c371.png b/res/img/f4c371.png deleted file mode 100644 index ad3b8f1616..0000000000 Binary files a/res/img/f4c371.png and /dev/null differ diff --git a/res/img/feather-icons/home.svg b/res/img/feather-icons/home.svg new file mode 100644 index 0000000000..7bb31b23dc --- /dev/null +++ b/res/img/feather-icons/home.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/Avatar.js b/src/Avatar.js index d3df12eb49..99b558fa93 100644 --- a/src/Avatar.js +++ b/src/Avatar.js @@ -51,7 +51,7 @@ module.exports = { }, defaultAvatarUrlForString: function(s) { - const images = ['76cfa6', '50e2c2', 'f4c371']; + const images = ['03b381', '368bd6', 'ac3ba8']; let total = 0; for (let i = 0; i < s.length; ++i) { total += s.charCodeAt(i); diff --git a/src/HtmlUtils.js b/src/HtmlUtils.js index 371804725d..2e08c059eb 100644 --- a/src/HtmlUtils.js +++ b/src/HtmlUtils.js @@ -68,8 +68,10 @@ export function containsEmoji(str) { /* modified from https://github.com/Ranks/emojione/blob/master/lib/js/emojione.js * because we want to include emoji shortnames in title text */ -function unicodeToImage(str) { - let replaceWith; let unicode; let alt; let short; let fname; +function unicodeToImage(str, addAlt) { + if (addAlt === undefined) addAlt = true; + + let replaceWith; let unicode; let short; let fname; const mappedUnicode = emojione.mapUnicodeToShort(); str = str.replace(emojione.regUnicode, function(unicodeChar) { @@ -84,10 +86,14 @@ function unicodeToImage(str) { fname = emojione.emojioneList[short].fname; // depending on the settings, we'll either add the native unicode as the alt tag, otherwise the shortname - alt = (emojione.unicodeAlt) ? emojione.convert(unicode.toUpperCase()) : mappedUnicode[unicode]; const title = mappedUnicode[unicode]; - replaceWith = `${alt}`; + if (addAlt) { + const alt = (emojione.unicodeAlt) ? emojione.convert(unicode.toUpperCase()) : mappedUnicode[unicode]; + replaceWith = `${alt}`; + } else { + replaceWith = ``; + } return replaceWith; } }); @@ -508,9 +514,9 @@ export function bodyToHtml(content, highlights, opts={}) { { strippedBody }; } -export function emojifyText(text) { +export function emojifyText(text, addAlt) { return { - __html: unicodeToImage(escape(text)), + __html: unicodeToImage(escape(text), addAlt), }; } diff --git a/src/Registration.js b/src/Registration.js index f3a2076ed6..42e172ca0b 100644 --- a/src/Registration.js +++ b/src/Registration.js @@ -35,8 +35,10 @@ export const SAFE_LOCALPART_REGEX = /^[a-z0-9=_\-./]+$/; * on what the HS supports * * @param {object} options - * @param {bool} options.go_home_on_cancel If true, goes to - * the hame page if the user cancels the action + * @param {bool} options.go_home_on_cancel + * If true, goes to the home page if the user cancels the action + * @param {bool} options.go_welcome_on_cancel + * If true, goes to the welcome page if the user cancels the action */ export async function startAnyRegistrationFlow(options) { if (options === undefined) options = {}; @@ -73,6 +75,8 @@ export async function startAnyRegistrationFlow(options) { dis.dispatch({action: 'start_registration'}); } else if (options.go_home_on_cancel) { dis.dispatch({action: 'view_home_page'}); + } else if (options.go_welcome_on_cancel) { + dis.dispatch({action: 'view_welcome_page'}); } }, }); diff --git a/src/components/structures/HomePage.js b/src/components/structures/EmbeddedPage.js similarity index 59% rename from src/components/structures/HomePage.js rename to src/components/structures/EmbeddedPage.js index 18f1a2ba31..d10b7f8414 100644 --- a/src/components/structures/HomePage.js +++ b/src/components/structures/EmbeddedPage.js @@ -1,6 +1,7 @@ /* Copyright 2016 OpenMarket Ltd Copyright 2017 Vector Creations Ltd +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. @@ -26,22 +27,27 @@ import sdk from '../../index'; import { MatrixClient } from 'matrix-js-sdk'; import classnames from 'classnames'; -class HomePage extends React.Component { - static displayName = 'HomePage'; - +export default class EmbeddedPage extends React.PureComponent { static propTypes = { - // URL to use as the iFrame src. Defaults to /home.html. - homePageUrl: PropTypes.string, + // URL to request embedded page content from + url: PropTypes.string, + // Class name prefix to apply for a given instance + className: PropTypes.string, + // Whether to wrap the page in a scrollbar + scrollbar: PropTypes.bool, }; static contextTypes = { matrixClient: PropTypes.instanceOf(MatrixClient), }; - state = { - iframeSrc: '', + constructor(props) { + super(props); + + this.state = { page: '', - }; + }; + } translate(s) { // default implementation - skins may wish to extend this @@ -51,22 +57,24 @@ class HomePage extends React.Component { componentWillMount() { this._unmounted = false; - // we use request() to inline the homepage into the react component + if (!this.props.url) { + return; + } + + // we use request() to inline the page into the react component // so that it can inherit CSS and theming easily rather than mess around // with iframes and trying to synchronise document.stylesheets. - const src = this.props.homePageUrl || 'home.html'; - request( - { method: "GET", url: src }, + { method: "GET", url: this.props.url }, (err, response, body) => { if (this._unmounted) { return; } if (err || response.status < 200 || response.status >= 300) { - console.warn(`Error loading home page: ${err}`); - this.setState({ page: _t("Couldn't load home page") }); + console.warn(`Error loading page: ${err}`); + this.setState({ page: _t("Couldn't load page") }); return; } @@ -81,28 +89,28 @@ class HomePage extends React.Component { } render() { - const isGuest = this.context.matrixClient.isGuest(); + const client = this.context.matrixClient; + const isGuest = client ? client.isGuest() : true; + const className = this.props.className; const classes = classnames({ - mx_HomePage: true, - mx_HomePage_guest: isGuest, + [className]: true, + [`${className}_guest`]: isGuest, }); - if (this.state.iframeSrc) { - return ( -
-