diff --git a/res/css/structures/_HomePage.scss b/res/css/structures/_HomePage.scss index 3aa80f6f595..0160cf368b1 100644 --- a/res/css/structures/_HomePage.scss +++ b/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'); + } + } + } +} diff --git a/res/img/feather-customised/explore.svg b/res/img/feather-customised/explore.svg new file mode 100644 index 00000000000..45be889bb77 --- /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 00000000000..7051860e62f --- /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 00000000000..acc6d2fb0f6 --- /dev/null +++ b/res/img/feather-customised/message-circle.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/components/structures/HomePage.tsx b/src/components/structures/HomePage.tsx new file mode 100644 index 00000000000..ddf9cd6d008 --- /dev/null +++ b/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 ; + } + + 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 51ce41e36fc..d9980aeca62 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'; @@ -40,6 +39,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. @@ -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 = ; - } + pageElement = ; break; case PageTypes.UserView: diff --git a/src/components/views/context_menus/TopLeftMenu.js b/src/components/views/context_menus/TopLeftMenu.js index f1309cac2de..4448ecd041a 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 3007db1b445..b7ad92757a1 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…",