Skip to content
This repository has been archived by the owner on Sep 11, 2024. It is now read-only.

Commit

Permalink
Implement button to return to user onboarding screen
Browse files Browse the repository at this point in the history
  • Loading branch information
justjanne committed Jul 22, 2022
1 parent 8e9084c commit d154d68
Show file tree
Hide file tree
Showing 8 changed files with 172 additions and 0 deletions.
1 change: 1 addition & 0 deletions res/css/_components.pcss
Original file line number Diff line number Diff line change
Expand Up @@ -328,6 +328,7 @@
@import "./views/user-onboarding/_UserOnboardingList.pcss";
@import "./views/user-onboarding/_UserOnboardingPage.pcss";
@import "./views/user-onboarding/_UserOnboardingTask.pcss";
@import "./views/user-onboarding/_UserOnboardingButton.pcss";
@import "./views/verification/_VerificationShowSas.pcss";
@import "./views/voip/CallView/_CallViewButtons.pcss";
@import "./views/voip/_CallPreview.pcss";
Expand Down
68 changes: 68 additions & 0 deletions res/css/views/user-onboarding/_UserOnboardingButton.pcss
Original file line number Diff line number Diff line change
@@ -0,0 +1,68 @@
.mx_UserOnboardingButton {
display: flex;
flex-direction: column;
align-content: stretch;
align-items: stretch;
border-radius: 8px;
margin: $spacing-8 $spacing-8 0;
padding: $spacing-12;

&.mx_UserOnboardingButton_selected,
&:hover,
&:focus-within {
background-color: $panel-actions;
}

.mx_UserOnboardingButton_content {
display: flex;
flex-direction: row;
gap: 5px;
align-items: center;

.mx_Heading_h4 {
margin-right: auto;
font-size: $font-14px;
color: $primary-content;
}

.mx_UserOnboardingButton_percentage {
font-size: $font-12px;
color: $secondary-content;
}

.mx_UserOnboardingButton_close {
position: relative;
box-sizing: border-box;
width: 14px;
height: 14px;
border-radius: 7px;
border: 1px solid $secondary-content;
flex-shrink: 0;

&::before {
background-color: $secondary-content;
content: "";
mask-repeat: no-repeat;
mask-position: center;
mask-size: contain;
width: 7px;
height: 7px;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
mask-image: url("$(res)/img/element-icons/cancel-rounded.svg");
}
}
}

.mx_ProgressBar {
width: auto;
margin-top: $spacing-8;
background: $background;
}

&.mx_UserOnboardingButton_completed .mx_ProgressBar {
display: none;
}
}
7 changes: 7 additions & 0 deletions src/components/structures/LeftPanel.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -45,9 +45,12 @@ import { shouldShowComponent } from "../../customisations/helpers/UIComponents";
import { UIComponent } from "../../settings/UIFeature";
import { ButtonEvent } from "../views/elements/AccessibleButton";
import PosthogTrackers from "../../PosthogTrackers";
import PageType from "../../PageTypes";
import { UserOnboardingButton } from "../views/user-onboarding/UserOnboardingButton";

interface IProps {
isMinimized: boolean;
pageType: PageType;
resizeNotifier: ResizeNotifier;
}

Expand Down Expand Up @@ -390,6 +393,10 @@ export default class LeftPanel extends React.Component<IProps, IState> {
onVisibilityChange={this.refreshStickyHeaders}
/>
) }
<UserOnboardingButton
selected={this.props.pageType === PageType.HomePage}
minimized={this.props.isMinimized}
/>
<div className="mx_LeftPanel_roomListWrapper">
<div
className={roomListClasses}
Expand Down
1 change: 1 addition & 0 deletions src/components/structures/LoggedInView.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -689,6 +689,7 @@ class LoggedInView extends React.Component<IProps, IState> {
data-collapsed={this.props.collapseLhs ? true : undefined}
>
<LeftPanel
pageType={this.props.page_type as PageTypes}
isMinimized={this.props.collapseLhs || false}
resizeNotifier={this.props.resizeNotifier}
/>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -42,6 +42,7 @@ interface IState {
export default class PreferencesUserSettingsTab extends React.Component<IProps, IState> {
static ROOM_LIST_SETTINGS = [
'breadcrumbs',
"FTUE.userOnboardingButton",
];

static SPACES_SETTINGS = [
Expand Down
87 changes: 87 additions & 0 deletions src/components/views/user-onboarding/UserOnboardingButton.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,87 @@
/*
Copyright 2022 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 classNames from "classnames";
import React, { useCallback } from "react";

import { Action } from "../../../dispatcher/actions";
import defaultDispatcher from "../../../dispatcher/dispatcher";
import { useSettingValue } from "../../../hooks/useSettings";
import { useUserOnboardingTasks } from "../../../hooks/useUserOnboardingTasks";
import { _t } from "../../../languageHandler";
import { SettingLevel } from "../../../settings/SettingLevel";
import SettingsStore from "../../../settings/SettingsStore";
import AccessibleButton from "../../views/elements/AccessibleButton";
import ProgressBar from "../../views/elements/ProgressBar";
import Heading from "../../views/typography/Heading";

function toPercentage(progress: number): string {
return (progress * 100).toFixed(0);
}

interface Props {
selected: boolean;
minimized: boolean;
}

export function UserOnboardingButton({ selected, minimized }: Props) {
const [completedTasks, waitingTasks] = useUserOnboardingTasks();

const completed = completedTasks.length;
const waiting = waitingTasks.length;
const total = completed + waiting;

const progress = waiting ? completed / total : 1;

const onDismiss = useCallback(() => {
SettingsStore.setValue("FTUE.userOnboardingButton", null, SettingLevel.ACCOUNT, false);
}, []);

const visible = useSettingValue("FTUE.userOnboardingButton");
if (!visible || minimized) {
return null;
}

return (
<AccessibleButton
className={classNames("mx_UserOnboardingButton", {
"mx_UserOnboardingButton_selected": selected,
"mx_UserOnboardingButton_minimized": minimized,
"mx_UserOnboardingButton_completed": !waiting,
})}
onClick={() => defaultDispatcher.fire(Action.ViewHomePage)}>
{ !minimized && (
<>
<div className="mx_UserOnboardingButton_content">
<Heading size="h4" className="mx_Heading_h4">
{ _t("Welcome") }
</Heading>
{ !completed && (
<div className="mx_UserOnboardingButton_percentage">
{ toPercentage(progress) }%
</div>
) }
<AccessibleButton
className="mx_UserOnboardingButton_close"
onClick={onDismiss}
/>
</div>
<ProgressBar value={completed} max={total} animated />
</>
) }
</AccessibleButton>
);
}
2 changes: 2 additions & 0 deletions src/i18n/strings/en_EN.json
Original file line number Diff line number Diff line change
Expand Up @@ -951,6 +951,7 @@
"Order rooms by name": "Order rooms by name",
"Show rooms with unread notifications first": "Show rooms with unread notifications first",
"Show shortcuts to recently viewed rooms above the room list": "Show shortcuts to recently viewed rooms above the room list",
"Show shortcut to welcome page above the room list": "Show shortcut to welcome page above the room list",
"Show hidden events in timeline": "Show hidden events in timeline",
"Low bandwidth mode (requires compatible homeserver)": "Low bandwidth mode (requires compatible homeserver)",
"Allow fallback call assist server turn.matrix.org when your homeserver does not offer one (your IP address would be shared during a call)": "Allow fallback call assist server turn.matrix.org when your homeserver does not offer one (your IP address would be shared during a call)",
Expand Down Expand Up @@ -1147,6 +1148,7 @@
"Anchor": "Anchor",
"Headphones": "Headphones",
"Folder": "Folder",
"Welcome": "Welcome",
"Secure messaging for friends and family.": "Secure messaging for friends and family.",
"With free end-to-end encrypted messaging, and unlimited voice and video calls, Element is a great way to stay in touch.": "With free end-to-end encrypted messaging, and unlimited voice and video calls, Element is a great way to stay in touch.",
"Secure messaging for work.": "Secure messaging for work.",
Expand Down
5 changes: 5 additions & 0 deletions src/settings/Settings.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -804,6 +804,11 @@ export const SETTINGS: {[setting: string]: ISetting} = {
default: true,
controller: new IncompatibleController("feature_breadcrumbs_v2", true),
},
"FTUE.userOnboardingButton": {
supportedLevels: LEVELS_ACCOUNT_SETTINGS,
displayName: _td("Show shortcut to welcome page above the room list"),
default: true,
},
"showHiddenEventsInTimeline": {
displayName: _td("Show hidden events in timeline"),
supportedLevels: LEVELS_DEVICE_ONLY_SETTINGS,
Expand Down

0 comments on commit d154d68

Please sign in to comment.