From faab35738f3686a609d6e0f2072f05e4a20ddc7f Mon Sep 17 00:00:00 2001 From: Michael Telatynski <7t3chguy@gmail.com> Date: Tue, 7 Apr 2020 10:48:56 +0100 Subject: [PATCH 1/5] Add new default home page fallback Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> --- res/css/structures/_HomePage.scss | 79 +++++++++++++++++++ src/components/structures/HomePage.tsx | 67 ++++++++++++++++ src/components/structures/LoggedInView.js | 9 +-- .../views/context_menus/TopLeftMenu.js | 11 +-- src/i18n/strings/en_EN.json | 5 ++ 5 files changed, 155 insertions(+), 16 deletions(-) create mode 100644 src/components/structures/HomePage.tsx diff --git a/res/css/structures/_HomePage.scss b/res/css/structures/_HomePage.scss index 3aa80f6f59..2f2f27f377 100644 --- a/res/css/structures/_HomePage.scss +++ b/res/css/structures/_HomePage.scss @@ -23,3 +23,82 @@ limitations under the License. margin-left: auto; margin-right: auto; } + +.mx_HomePage_default { + text-align: center; + + .mx_HomePage_default_wrapper { + padding: 25vh 0 12px; + } + + img { + width: 40px; + } + + h1 { + font-weight: 600; + font-size: $font-32px; + line-height: $font-44px; + margin-bottom: 4px; + } + + h4 { + margin-top: 4px; + font-weight: 600; + font-size: $font-18px; + line-height: $font-25px; + color: $muted-fg-color; + } + + .mx_HomePage_default_buttons { + margin: 80px auto 0; + width: fit-content; + + .mx_AccessibleButton { + padding: 73px 8px 15px; // top: 20px top padding + 40px icon + 13px margin + + width: 104px; // 120px - 2* 8px + margin: 0 39px; // 55px - 2* 8px + position: relative; + display: inline-block; + border-radius: 8px; + + font-weight: 600; + font-size: $font-15px; + line-height: $font-20px; + color: $muted-fg-color; + + &:hover { + color: $accent-color; + background: rgba(#03b381, 0.06); + + &::before { + background-color: $accent-color; + } + } + + &::before { + top: 20px; + left: 40px; // (120px-40px)/2 + width: 40px; + height: 40px; + + content: ''; + position: absolute; + background-color: $muted-fg-color; + mask-repeat: no-repeat; + mask-size: contain; + } + + &.mx_HomePage_button_sendDm::before { + mask-image: url('$(res)/img/feather-customised/message-circle.svg'); + } + &.mx_HomePage_button_explore::before { + mask-image: url('$(res)/img/feather-customised/explore.svg'); + } + &.mx_HomePage_button_createGroup::before { + mask-image: url('$(res)/img/feather-customised/group.svg'); + } + } + } +} diff --git a/src/components/structures/HomePage.tsx b/src/components/structures/HomePage.tsx new file mode 100644 index 0000000000..ecc56ef0e5 --- /dev/null +++ b/src/components/structures/HomePage.tsx @@ -0,0 +1,67 @@ +/* +Copyright 2020 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. +*/ + +import * as React from "react"; + +import AutoHideScrollbar from './AutoHideScrollbar'; +import { getHomePageUrl } from "../../utils/pages"; +import { _t } from "../../languageHandler"; +import SdkConfig from "../../SdkConfig"; +import * as sdk from "../../index"; +import dis from "../../dispatcher"; + + +const onClickSendDm = () => dis.dispatch({action: 'view_create_chat'}); +const onClickExplore = () => dis.dispatch({action: 'view_room_directory'}); +const onClickNewRoom = () => dis.dispatch({action: 'view_create_room'}); + +const HomePage = () => { + const config = SdkConfig.get(); + const pageUrl = getHomePageUrl(config); + + if (pageUrl) { + const EmbeddedPage = sdk.getComponent('structures.EmbeddedPage'); + return ; + } + + const brandingConfig = config.branding; + let logoUrl = "themes/riot/img/logos/riot-logo.svg"; + if (brandingConfig && brandingConfig.authHeaderLogoUrl) { + logoUrl = brandingConfig.authHeaderLogoUrl; + } + + const AccessibleButton = sdk.getComponent("elements.AccessibleButton"); + return +
+ Riot +

{ _t("Welcome to %(appName)s", { appName: config.brand || "Riot" }) }

+

{ _t("Liberate your communication") }

+
+ + { _t("Send a Direct Message") } + + + { _t("Explore Public Rooms") } + + + { _t("Create a Group Chat") } + +
+
+ ; +}; + +export default HomePage; diff --git a/src/components/structures/LoggedInView.js b/src/components/structures/LoggedInView.js index 51ce41e36f..53c2d61642 100644 --- a/src/components/structures/LoggedInView.js +++ b/src/components/structures/LoggedInView.js @@ -40,6 +40,7 @@ import ResizeHandle from '../views/elements/ResizeHandle'; import {Resizer, CollapseDistributor} from '../../resizer'; import MatrixClientContext from "../../contexts/MatrixClientContext"; import * as KeyboardShortcuts from "../../accessibility/KeyboardShortcuts"; +import HomePage from "./HomePage"; // We need to fetch each pinned message individually (if we don't already have it) // so each pinned message may trigger a request. Limit the number per room for sanity. // NB. this is just for server notices rather than pinned messages in general. @@ -577,13 +578,7 @@ const LoggedInView = createReactClass({ break; case PageTypes.HomePage: - { - const pageUrl = getHomePageUrl(this.props.config); - pageElement = ; - } + pageElement = ; break; case PageTypes.UserView: diff --git a/src/components/views/context_menus/TopLeftMenu.js b/src/components/views/context_menus/TopLeftMenu.js index f1309cac2d..4448ecd041 100644 --- a/src/components/views/context_menus/TopLeftMenu.js +++ b/src/components/views/context_menus/TopLeftMenu.js @@ -26,6 +26,7 @@ import { getHostingLink } from '../../../utils/HostingLink'; import {MatrixClientPeg} from '../../../MatrixClientPeg'; import {MenuItem} from "../../structures/ContextMenu"; import * as sdk from "../../../index"; +import {getHomePageUrl} from "../../../utils/pages"; export default class TopLeftMenu extends React.Component { static propTypes = { @@ -47,15 +48,7 @@ export default class TopLeftMenu extends React.Component { } hasHomePage() { - const config = SdkConfig.get(); - const pagesConfig = config.embeddedPages; - if (pagesConfig && pagesConfig.homeUrl) { - return true; - } - // This is a deprecated config option for the home page - // (despite the name, given we also now have a welcome - // page, which is not the same). - return !!config.welcomePageUrl; + return !!getHomePageUrl(SdkConfig.get()); } render() { diff --git a/src/i18n/strings/en_EN.json b/src/i18n/strings/en_EN.json index 3007db1b44..b7ad92757a 100644 --- a/src/i18n/strings/en_EN.json +++ b/src/i18n/strings/en_EN.json @@ -1954,6 +1954,11 @@ "Community %(groupId)s not found": "Community %(groupId)s not found", "This homeserver does not support communities": "This homeserver does not support communities", "Failed to load %(groupId)s": "Failed to load %(groupId)s", + "Welcome to %(appName)s": "Welcome to %(appName)s", + "Liberate your communication": "Liberate your communication", + "Send a Direct Message": "Send a Direct Message", + "Explore Public Rooms": "Explore Public Rooms", + "Create a Group Chat": "Create a Group Chat", "Explore": "Explore", "Filter": "Filter", "Filter rooms…": "Filter rooms…", From 4d002bd24d5b63ebdabb71bf65036842642835d8 Mon Sep 17 00:00:00 2001 From: Michael Telatynski <7t3chguy@gmail.com> Date: Tue, 7 Apr 2020 10:51:51 +0100 Subject: [PATCH 2/5] delint Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> --- src/components/structures/LoggedInView.js | 2 -- 1 file changed, 2 deletions(-) diff --git a/src/components/structures/LoggedInView.js b/src/components/structures/LoggedInView.js index 53c2d61642..d9980aeca6 100644 --- a/src/components/structures/LoggedInView.js +++ b/src/components/structures/LoggedInView.js @@ -32,7 +32,6 @@ import sessionStore from '../../stores/SessionStore'; import {MatrixClientPeg} from '../../MatrixClientPeg'; import SettingsStore from "../../settings/SettingsStore"; import RoomListStore from "../../stores/RoomListStore"; -import { getHomePageUrl } from '../../utils/pages'; import TagOrderActions from '../../actions/TagOrderActions'; import RoomListActions from '../../actions/RoomListActions'; @@ -539,7 +538,6 @@ const LoggedInView = createReactClass({ const LeftPanel = sdk.getComponent('structures.LeftPanel'); const RoomView = sdk.getComponent('structures.RoomView'); const UserView = sdk.getComponent('structures.UserView'); - const EmbeddedPage = sdk.getComponent('structures.EmbeddedPage'); const GroupView = sdk.getComponent('structures.GroupView'); const MyGroups = sdk.getComponent('structures.MyGroups'); const ToastContainer = sdk.getComponent('structures.ToastContainer'); From 5c8ad71a15193ad76c43ca554b4ccecaa428c95f Mon Sep 17 00:00:00 2001 From: Michael Telatynski <7t3chguy@gmail.com> Date: Tue, 7 Apr 2020 11:03:49 +0100 Subject: [PATCH 3/5] add missing assets Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> --- res/img/feather-customised/explore.svg | 8 ++++++++ res/img/feather-customised/group.svg | 7 +++++++ res/img/feather-customised/message-circle.svg | 3 +++ 3 files changed, 18 insertions(+) create mode 100644 res/img/feather-customised/explore.svg create mode 100644 res/img/feather-customised/group.svg create mode 100644 res/img/feather-customised/message-circle.svg diff --git a/res/img/feather-customised/explore.svg b/res/img/feather-customised/explore.svg new file mode 100644 index 0000000000..45be889bb7 --- /dev/null +++ b/res/img/feather-customised/explore.svg @@ -0,0 +1,8 @@ + + + + + + + + diff --git a/res/img/feather-customised/group.svg b/res/img/feather-customised/group.svg new file mode 100644 index 0000000000..7051860e62 --- /dev/null +++ b/res/img/feather-customised/group.svg @@ -0,0 +1,7 @@ + + + + + + + diff --git a/res/img/feather-customised/message-circle.svg b/res/img/feather-customised/message-circle.svg new file mode 100644 index 0000000000..acc6d2fb0f --- /dev/null +++ b/res/img/feather-customised/message-circle.svg @@ -0,0 +1,3 @@ + + + From b5e6f8b8c199066221699a49d8d577e1916b9994 Mon Sep 17 00:00:00 2001 From: Michael Telatynski <7t3chguy@gmail.com> Date: Tue, 7 Apr 2020 13:34:10 +0100 Subject: [PATCH 4/5] Iterate PR Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> --- res/css/structures/_HomePage.scss | 3 ++- src/components/structures/HomePage.tsx | 3 +-- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/res/css/structures/_HomePage.scss b/res/css/structures/_HomePage.scss index 2f2f27f377..a4c39c8e06 100644 --- a/res/css/structures/_HomePage.scss +++ b/res/css/structures/_HomePage.scss @@ -32,7 +32,7 @@ limitations under the License. } img { - width: 40px; + height: 48px; } h1 { @@ -62,6 +62,7 @@ limitations under the License. position: relative; display: inline-block; border-radius: 8px; + vertical-align: top; font-weight: 600; font-size: $font-15px; diff --git a/src/components/structures/HomePage.tsx b/src/components/structures/HomePage.tsx index ecc56ef0e5..ddf9cd6d00 100644 --- a/src/components/structures/HomePage.tsx +++ b/src/components/structures/HomePage.tsx @@ -1,5 +1,5 @@ /* -Copyright 2020 New Vector Ltd +Copyright 2020 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,7 +23,6 @@ import SdkConfig from "../../SdkConfig"; import * as sdk from "../../index"; import dis from "../../dispatcher"; - const onClickSendDm = () => dis.dispatch({action: 'view_create_chat'}); const onClickExplore = () => dis.dispatch({action: 'view_room_directory'}); const onClickNewRoom = () => dis.dispatch({action: 'view_create_room'}); From 3e4e7953ed9ec897ed160c89caf323dd525dd138 Mon Sep 17 00:00:00 2001 From: Michael Telatynski <7t3chguy@gmail.com> Date: Tue, 7 Apr 2020 13:40:25 +0100 Subject: [PATCH 5/5] word-break: break-word; Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> --- res/css/structures/_HomePage.scss | 1 + 1 file changed, 1 insertion(+) diff --git a/res/css/structures/_HomePage.scss b/res/css/structures/_HomePage.scss index a4c39c8e06..0160cf368b 100644 --- a/res/css/structures/_HomePage.scss +++ b/res/css/structures/_HomePage.scss @@ -63,6 +63,7 @@ limitations under the License. display: inline-block; border-radius: 8px; vertical-align: top; + word-break: break-word; font-weight: 600; font-size: $font-15px;