mirror of https://github.com/vector-im/riot-web
Merge pull request #4350 from matrix-org/t3chguy/default_home
Add new default home page fallbackpull/21833/head
Michael Telatynski
GitHub
commit
5c5c095737
|
|
@ -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');
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,8 @@
|
|||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<circle cx="12" cy="12" r="11.5" stroke="#2E2F32" stroke-linecap="round"/>
|
||||
<circle cx="12" cy="4" r="0.8" fill="#2E2F32" stroke="#2E2F32" stroke-width="0.4"/>
|
||||
<circle cx="12" cy="20" r="0.8" fill="#2E2F32" stroke="#2E2F32" stroke-width="0.4"/>
|
||||
<circle cx="20" cy="12" r="0.8" fill="#2E2F32" stroke="#2E2F32" stroke-width="0.4"/>
|
||||
<circle cx="4" cy="12" r="0.8" fill="#2E2F32" stroke="#2E2F32" stroke-width="0.4"/>
|
||||
<path d="M10.7272 10.4443L18.3639 5.63602L13.5556 13.2728L5.636 18.3639L10.7272 10.4443Z" stroke="#2E2F32" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 672 B |
|
|
@ -0,0 +1,7 @@
|
|||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M14.7273 16.8V15.6666C14.7273 14.4148 13.7504 13.4 12.5455 13.4H8.18182C6.97683 13.4 6 14.4148 6 15.6666V16.8" stroke="#27303A" stroke-linecap="round"/>
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M10.3636 11.1333C11.5686 11.1333 12.5455 10.1185 12.5455 8.86664C12.5455 7.6148 11.5686 6.59998 10.3636 6.59998C9.15866 6.59998 8.18182 7.6148 8.18182 8.86664C8.18182 10.1185 9.15866 11.1333 10.3636 11.1333Z" stroke="#27303A" stroke-linecap="round"/>
|
||||
<path d="M18 16.8V15.6666C17.9993 14.6337 17.3264 13.7319 16.3636 13.4736" stroke="#27303A" stroke-linecap="round"/>
|
||||
<path d="M14.1818 6.67352C15.1472 6.93032 15.8225 7.83405 15.8225 8.86936C15.8225 9.90466 15.1472 10.8084 14.1818 11.0652" stroke="#27303A" stroke-linecap="round"/>
|
||||
<circle cx="12" cy="12" r="11.5" stroke="#27303A" stroke-linecap="round"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 922 B |
|
|
@ -0,0 +1,3 @@
|
|||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M23.5 11.3334L23.5 11.3347C23.5043 13.0157 23.1116 14.6741 22.3537 16.1746L22.3527 16.1765C20.5186 19.8462 16.769 22.1651 12.6665 22.1667L12.6653 22.1667C10.9843 22.1711 9.32594 21.7783 7.82541 21.0204C7.70642 20.9603 7.56835 20.9502 7.44187 20.9923L1.73925 22.8932C1.34837 23.0235 0.976504 22.6516 1.1068 22.2607L3.00767 16.5581C3.04983 16.4317 3.03973 16.2936 2.97963 16.1746C2.22171 14.6741 1.82895 13.0157 1.83333 11.3347L1.83333 11.3335C1.83492 7.23102 4.15379 3.48136 7.82352 1.64729L7.82352 1.64729L7.82541 1.64634C9.32594 0.888416 10.9843 0.495653 12.6653 0.500038H12.6666H13.3194C18.8084 0.809695 23.1903 5.19159 23.5 10.6806L23.5 11.3334Z" stroke="#2E2F32" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 828 B |
|
|
@ -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;
|
||||
|
|
@ -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 = <EmbeddedPage className="mx_HomePage"
|
||||
url={pageUrl}
|
||||
scrollbar={true}
|
||||
/>;
|
||||
}
|
||||
pageElement = <HomePage />;
|
||||
break;
|
||||
|
||||
case PageTypes.UserView:
|
||||
|
|
|
|||
|
|
@ -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() {
|
||||
|
|
|
|||
|
|
@ -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…",
|
||||
|
|
|
|||
Loading…
Reference in New Issue