From a82c318ecf7ff2cd070e6e1d46933e4be4db42c7 Mon Sep 17 00:00:00 2001
From: Jorik Schellekens <joriksch@gmail.com>
Date: Thu, 10 Sep 2020 11:27:47 +0100
Subject: [PATCH] Update client selection to match figma
---
src/App.scss | 2 +-
src/components/ClientSelection.scss | 2 --
src/components/ClientSelection.tsx | 1 +
src/components/ClientTile.scss | 39 ++++++++++++++++++---------
src/components/ClientTile.tsx | 8 ++++++
src/components/FakeProgress.scss | 31 +++++++++++++++++++++
src/components/FakeProgress.tsx | 27 +++++++++++++++++++
src/components/InviteTile.scss | 8 ++++--
src/components/InviteTile.tsx | 42 +++++++++++++++++++----------
src/index.scss | 5 ++++
src/layouts/SingleColumn.scss | 5 ----
11 files changed, 133 insertions(+), 37 deletions(-)
create mode 100644 src/components/FakeProgress.scss
create mode 100644 src/components/FakeProgress.tsx
diff --git a/src/App.scss b/src/App.scss
index 6b61de3..7179a17 100644
--- a/src/App.scss
+++ b/src/App.scss
@@ -20,7 +20,7 @@ limitations under the License.
background-color: $app-background;
background-image: url('./imgs/background.svg');
background-repeat: none;
- background-position: 50% 10%;
+ background-position: 50% -20%;
}
@mixin spacer {
diff --git a/src/components/ClientSelection.scss b/src/components/ClientSelection.scss
index 4754359..f4977b7 100644
--- a/src/components/ClientSelection.scss
+++ b/src/components/ClientSelection.scss
@@ -15,8 +15,6 @@ limitations under the License.
*/
.advanced {
- margin: 0 5%;
-
display: grid;
row-gap: 20px;
diff --git a/src/components/ClientSelection.tsx b/src/components/ClientSelection.tsx
index 794ba0a..8a41d4a 100644
--- a/src/components/ClientSelection.tsx
+++ b/src/components/ClientSelection.tsx
@@ -84,6 +84,7 @@ const ClientSelection: React.FC<IProps> = ({ link }: IProps) => {
return (
<div className="advanced">
{options}
+ <h4>Clients you can accept this invite with</h4>
<ClientList link={link} rememberSelection={rememberSelection} />
{clearSelection}
</div>
diff --git a/src/components/ClientTile.scss b/src/components/ClientTile.scss
index 18a8be0..0b8f091 100644
--- a/src/components/ClientTile.scss
+++ b/src/components/ClientTile.scss
@@ -19,36 +19,49 @@ limitations under the License.
.clientTile {
display: flex;
flex-direction: row;
+ align-items: center;
- height: 155px;
+ min-height: 150px;
width: 100%;
color: $foreground;
> img {
flex-shrink: 0;
- height: 100%;
+ height: 130px;
}
- h1 {
- text-align: left;
- font-size: 14px;
- line-height: 24px;
- }
-
- p {
- margin-right: 20px;
- margin-top: 20px;
- text-align: left;
+ > div {
+ display: flex;
+ flex-direction: column;
+ justify-content: space-between;
+ h1 {
+ text-align: left;
+ font-size: 14px;
+ line-height: 24px;
+ }
+
+ p {
+ margin-right: 20px;
+ text-align: left;
+ }
+
+ .button {
+ margin: 5px;
+ }
}
border: 1px solid $borders;
border-radius: 8px;
- padding: 8px;
+ padding: 15px;
// For the chevron
position: relative;
+
+ &::hover {
+ background-color: $grey;
+ }
}
.clientTileLink {
diff --git a/src/components/ClientTile.tsx b/src/components/ClientTile.tsx
index 6367b72..7644782 100644
--- a/src/components/ClientTile.tsx
+++ b/src/components/ClientTile.tsx
@@ -20,6 +20,7 @@ import classNames from 'classnames';
import { Client, ClientKind } from '../clients/types';
import { SafeLink } from '../parser/types';
import Tile from './Tile';
+import Button from './Button';
import './ClientTile.scss';
@@ -37,6 +38,12 @@ const ClientTile: React.FC<IProps> = ({ client, link }: IProps) => {
const className = classNames('clientTile', {
clientTileLink: client.kind === ClientKind.LINKED_CLIENT,
});
+
+ const inviteButton =
+ client.kind === ClientKind.LINKED_CLIENT ? (
+ <Button>Accept invite</Button>
+ ) : null;
+
let clientTile = (
<Tile className={className}>
<img src={client.logo} alt={client.name + ' logo'} />
@@ -44,6 +51,7 @@ const ClientTile: React.FC<IProps> = ({ client, link }: IProps) => {
<h1>{client.name}</h1>
<p>{client.description}</p>
{inviteLine}
+ {inviteButton}
</div>
</Tile>
);
diff --git a/src/components/FakeProgress.scss b/src/components/FakeProgress.scss
new file mode 100644
index 0000000..32cd224
--- /dev/null
+++ b/src/components/FakeProgress.scss
@@ -0,0 +1,31 @@
+/*
+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 '../color-scheme';
+
+.fakeProgress {
+ width: 100%;
+ height: 4px;
+ background-color: lighten($grey, 50%);
+ border-radius: 4px;
+
+ > div {
+ width: 60%;
+ height: 100%;
+ background-color: $foreground;
+ border-radius: 4px;
+ }
+}
diff --git a/src/components/FakeProgress.tsx b/src/components/FakeProgress.tsx
new file mode 100644
index 0000000..587a7e3
--- /dev/null
+++ b/src/components/FakeProgress.tsx
@@ -0,0 +1,27 @@
+/*
+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 React from 'react';
+
+import './FakeProgress.scss';
+
+const FakeProgress = () => (
+ <div className="fakeProgress">
+ <div />
+ </div>
+);
+
+export default FakeProgress;
diff --git a/src/components/InviteTile.scss b/src/components/InviteTile.scss
index 35d45c5..0421927 100644
--- a/src/components/InviteTile.scss
+++ b/src/components/InviteTile.scss
@@ -18,7 +18,11 @@ limitations under the License.
display: grid;
row-gap: 24px;
- .advancedPlaceholder {
- height: 245px;
+ .inviteTileClientSelection {
+ margin: 0 5%;
+ display: grid;
+
+ justify-content: space-between;
+ row-gap: 20px;
}
}
diff --git a/src/components/InviteTile.tsx b/src/components/InviteTile.tsx
index b719f7d..1311f9f 100644
--- a/src/components/InviteTile.tsx
+++ b/src/components/InviteTile.tsx
@@ -20,10 +20,12 @@ import './InviteTile.scss';
import Tile from './Tile';
import LinkButton from './LinkButton';
+import Button from './Button';
import ClientSelection from './ClientSelection';
import { Client, ClientKind } from '../clients/types';
import { SafeLink } from '../parser/types';
import TextButton from './TextButton';
+import FakeProgress from './FakeProgress';
interface IProps {
children?: React.ReactNode;
@@ -35,12 +37,15 @@ const InviteTile: React.FC<IProps> = ({ children, client, link }: IProps) => {
const [showAdvanced, setShowAdvanced] = useState(false);
let invite: React.ReactNode;
let advanced: React.ReactNode;
- // This i s a hacky way to get a the overlapping list of client
- // options working.
- let advancedPlaceholder: React.ReactNode;
if (client === null) {
- invite = null;
+ invite = showAdvanced ? (
+ <FakeProgress />
+ ) : (
+ <Button onClick={() => setShowAdvanced(!showAdvanced)}>
+ Accept invite
+ </Button>
+ );
} else {
let inviteUseString: string;
@@ -60,11 +65,7 @@ const InviteTile: React.FC<IProps> = ({ children, client, link }: IProps) => {
break;
}
- const advancedToggle = showAdvanced ? (
- <TextButton onClick={(): void => setShowAdvanced(!showAdvanced)}>
- Hide advanced options
- </TextButton>
- ) : (
+ const advancedToggle = (
<p>
{inviteUseString}
<TextButton
@@ -83,9 +84,23 @@ const InviteTile: React.FC<IProps> = ({ children, client, link }: IProps) => {
);
}
- if (client === null || showAdvanced) {
- advanced = <ClientSelection link={link} />;
- advancedPlaceholder = <div className="advancedPlaceholder" />;
+ if (showAdvanced) {
+ if (client === null) {
+ advanced = (
+ <>
+ <h4>Pick an app to accept the invite with</h4>
+ <ClientSelection link={link} />
+ </>
+ );
+ } else {
+ advanced = (
+ <>
+ <hr />
+ <h4>Change app</h4>
+ <ClientSelection link={link} />
+ </>
+ );
+ }
}
return (
@@ -93,9 +108,8 @@ const InviteTile: React.FC<IProps> = ({ children, client, link }: IProps) => {
<Tile className="inviteTile">
{children}
{invite}
- {advancedPlaceholder}
+ <div className="inviteTileClientSelection">{advanced}</div>
</Tile>
- {advanced}
</>
);
};
diff --git a/src/index.scss b/src/index.scss
index 2c9c506..a9b22d8 100644
--- a/src/index.scss
+++ b/src/index.scss
@@ -49,6 +49,11 @@ h1 {
text-align: center;
}
+h4 {
+ text-align: left;
+ width: 100%;
+}
+
a {
color: $link;
text-decoration: none;
diff --git a/src/layouts/SingleColumn.scss b/src/layouts/SingleColumn.scss
index 045504f..00edf39 100644
--- a/src/layouts/SingleColumn.scss
+++ b/src/layouts/SingleColumn.scss
@@ -10,9 +10,4 @@
row-gap: 60px;
align-items: center;
-
- .advanced {
- position: relative;
- top: -335px;
- }
}
--
GitLab