Matrix/element-web-Github
1
0
Fork 0
mirror of https://github.com/vector-im/element-web.git synced 2024-11-16 21:24:59 +08:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source 
Add new default home page fallback
This commit is contained in:
Michael Telatynski 2020-04-07 14:46:23 +01:00 committed by GitHub
commit 5c5c095737
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
8 changed files with 174 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

81
res/css/structures/_HomePage.scss
View File

@ -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');
}
}
}
}

8
res/img/feather-customised/explore.svg Normal file
View File

@ -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>
Side by Side

After

Width:  |  Height:  |  Size: 672 B

7
res/img/feather-customised/group.svg Normal file
View File

@ -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>
Side by Side

After

Width:  |  Height:  |  Size: 922 B

3
res/img/feather-customised/message-circle.svg Normal file
View File

@ -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>
Side by Side

After

Width:  |  Height:  |  Size: 828 B

66
src/components/structures/HomePage.tsx Normal file
View File

@ -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;

11
src/components/structures/LoggedInView.js
View File

@ -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:

11
src/components/views/context_menus/TopLeftMenu.js
View File

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

5
src/i18n/strings/en_EN.json
View File

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