Merge pull request #4350 from matrix-org/t3chguy/default_home

Add new default home page fallback

res/css/structures/_HomePage.scss

@@ -23,3 +23,84 @@ 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 {
+        height: 48px;
+    }
+
+    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;
+            vertical-align: top;
+            word-break: break-word;
+
+            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');
+            }
+        }
+    }
+}

src/components/structures/HomePage.tsx

@@ -0,0 +1,66 @@
+/*
+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.
+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 <EmbeddedPage className="mx_HomePage" url={pageUrl} scrollbar={true} />;
+    }
+
+    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 <AutoHideScrollbar className="mx_HomePage mx_HomePage_default">
+        <div className="mx_HomePage_default_wrapper">
+            <img src={logoUrl} alt="Riot" />
+            <h1>{ _t("Welcome to %(appName)s", { appName: config.brand || "Riot" }) }</h1>
+            <h4>{ _t("Liberate your communication") }</h4>
+            <div className="mx_HomePage_default_buttons">
+                <AccessibleButton onClick={onClickSendDm} className="mx_HomePage_button_sendDm">
+                    { _t("Send a Direct Message") }
+                </AccessibleButton>
+                <AccessibleButton onClick={onClickExplore} className="mx_HomePage_button_explore">
+                    { _t("Explore Public Rooms") }
+                </AccessibleButton>
+                <AccessibleButton onClick={onClickNewRoom} className="mx_HomePage_button_createGroup">
+                    { _t("Create a Group Chat") }
+                </AccessibleButton>
+            </div>
+        </div>
+    </AutoHideScrollbar>;
+};
+
+export default HomePage;

src/components/structures/LoggedInView.js

@@ -32,14 +32,14 @@ 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';
 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.
@@ -538,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');
@@ -577,13 +576,7 @@ const LoggedInView = createReactClass({
                 break;
 
             case PageTypes.HomePage:
-                {
-                    const pageUrl = getHomePageUrl(this.props.config);
-                    pageElement = <EmbeddedPage className="mx_HomePage"
-                        url={pageUrl}
-                        scrollbar={true}
-                    />;
-                }
+                pageElement = <HomePage />;
                 break;
 
             case PageTypes.UserView:

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() {

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…",