This commit is contained in:
Bruno Windels 2020-12-07 16:02:06 +01:00
parent ef073de306
commit ca601d0e73
11 changed files with 55 additions and 25 deletions

View File

@ -1,5 +1,6 @@
.ClientListView .list { .ClientListView h2 {
padding: 16px 0; text-align: center;
margin: 18px 0;
} }
.ClientView { .ClientView {
@ -49,12 +50,15 @@
height: 100%; height: 100%;
} }
.ClientView .back {
margin-top: 22px;
}
.InstallClientView .instructions button { .InstallClientView .instructions button {
background-repeat: no-repeat; background-repeat: no-repeat;
background-position: center; background-position: center;
background-color: var(--link); background-color: transparent;
padding: 4px; padding: 4px;
border-radius: 4px;
border: none; border: none;
width: 24px; width: 24px;
height: 24px; height: 24px;
@ -67,5 +71,6 @@
} }
.InstallClientView .instructions button.tick { .InstallClientView .instructions button.tick {
background-image: url('../images/tick.svg'); background-image: url('../images/tick-dark.svg');
} }

View File

@ -42,6 +42,7 @@ html {
body { body {
background-color: var(--app-background); background-color: var(--app-background);
background-image: url('../images/background.svg'); background-image: url('../images/background.svg');
background-attachment: fixed;
background-repeat: no-repeat; background-repeat: no-repeat;
background-size: auto; background-size: auto;
background-position: center -50px; background-position: center -50px;
@ -53,6 +54,14 @@ body {
margin: 0; margin: 0;
} }
p {
line-height: 150%;
}
a {
text-decoration: none;
}
body, body,
button, button,
input, input,
@ -118,14 +127,13 @@ button, input {
} }
.footer .links { .footer .links {
font-size: 0.8em; font-size: 12px;
list-style: none; list-style: none;
padding: 0; padding: 0;
} }
a, button.text { a, button.text {
color: var(--link); color: var(--link);
text-decoration: underline;
} }
button.text { button.text {
@ -184,7 +192,6 @@ input[type='text'].large {
border: 1px solid var(--foreground); border: 1px solid var(--foreground);
border-radius: 16px; border-radius: 16px;
font-size: 14px; font-size: 14px;
line-height: 24px;
} }
.fullwidth { .fullwidth {

View File

@ -14,11 +14,17 @@ See the License for the specific language governing permissions and
limitations under the License. limitations under the License.
*/ */
.OpenLinkView .previewSource { .OpenLinkView .caption {
color: var(--grey); color: var(--grey);
font-size: 12px; font-size: 12px;
} }
.ServerConsentView .actions label {
display: flex;
align-items: end;
gap: 5px;
}
.ServerConsentView .actions { .ServerConsentView .actions {
margin-top: 24px; margin-top: 24px;
display: flex; display: flex;
@ -27,7 +33,7 @@ limitations under the License.
.ServerConsentView input[type=submit] { .ServerConsentView input[type=submit] {
flex: 1; flex: 1;
margin-left: 12px; margin-left: 32px;
} }
.ServerOptions div { .ServerOptions div {

View File

@ -61,8 +61,8 @@
} }
.PreviewView .memberCount p:not(.placeholder) { .PreviewView .memberCount p:not(.placeholder) {
padding: 4px 4px 4px 24px; padding: 4px 8px 4px 24px;
border-radius: 8px; border-radius: 14px;
background-image: url(../images/member-icon.svg); background-image: url(../images/member-icon.svg);
background-repeat: no-repeat; background-repeat: no-repeat;
background-position: 2px center; background-position: 2px center;
@ -107,7 +107,7 @@
var(--flash-fg) calc(10% + 25px), var(--flash-fg) calc(10% + 25px),
var(--flash-bg) calc(10% + 50px) var(--flash-bg) calc(10% + 50px)
); );
animation: flash 2s ease-in-out infinite; animation: flash 2s linear infinite;
background-size: 200%; background-size: 200%;
} }

View File

@ -1,6 +1,6 @@
<svg width="1440" height="1505" viewBox="0 0 1440 1505" fill="none" xmlns="http://www.w3.org/2000/svg"> <svg width="1440" height="1505" viewBox="0 0 1440 1505" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0)"> <g clip-path="url(#clip0)">
<g opacity="0.26"> <g>
<path opacity="0.26" d="M1027.99 602.979C1262.01 860.194 1465.48 1242.7 1528.69 1544.36C1592.2 1847.63 1503.31 2018.17 1310.8 1964.61C1117.48 1910.83 851.081 1638.68 658.35 1297.66C466.355 957.9 378.93 607.541 443.1 434.715C506.167 264.833 707.508 296.249 938.653 512.115C968.31 539.852 998.261 570.239 1027.99 602.979Z" stroke="url(#paint0_linear)" stroke-opacity="0.5" stroke-miterlimit="10"/> <path opacity="0.26" d="M1027.99 602.979C1262.01 860.194 1465.48 1242.7 1528.69 1544.36C1592.2 1847.63 1503.31 2018.17 1310.8 1964.61C1117.48 1910.83 851.081 1638.68 658.35 1297.66C466.355 957.9 378.93 607.541 443.1 434.715C506.167 264.833 707.508 296.249 938.653 512.115C968.31 539.852 998.261 570.239 1027.99 602.979Z" stroke="url(#paint0_linear)" stroke-opacity="0.5" stroke-miterlimit="10"/>
<path opacity="0.26" d="M1044.18 604.303C1277.61 867.698 1476.23 1255.51 1532.89 1558.78C1589.85 1863.67 1493.74 2031.71 1297.33 1973.07C1100.11 1914.14 833.789 1635 645.032 1288.91C457.01 944.068 376.871 591.501 447.59 420.442C517.133 252.325 723.184 289.112 954.844 511.085C984.648 539.632 1014.53 570.827 1044.18 604.303Z" stroke="url(#paint1_linear)" stroke-opacity="0.5" stroke-miterlimit="10"/> <path opacity="0.26" d="M1044.18 604.303C1277.61 867.698 1476.23 1255.51 1532.89 1558.78C1589.85 1863.67 1493.74 2031.71 1297.33 1973.07C1100.11 1914.14 833.789 1635 645.032 1288.91C457.01 944.068 376.871 591.501 447.59 420.442C517.133 252.325 723.184 289.112 954.844 511.085C984.648 539.632 1014.53 570.827 1044.18 604.303Z" stroke="url(#paint1_linear)" stroke-opacity="0.5" stroke-miterlimit="10"/>
<path opacity="0.26" d="M1060.81 606.069C1293.5 875.644 1486.97 1268.6 1536.79 1573.27C1586.9 1879.56 1483.51 2045.03 1283.27 1981.09C1082.22 1916.94 816.124 1630.66 631.709 1279.64C447.955 930.015 375.249 575.389 452.665 406.316C528.757 240.112 739.517 282.417 971.546 510.496C1001.42 539.779 1031.3 571.784 1060.81 606.069Z" stroke="url(#paint2_linear)" stroke-opacity="0.5" stroke-miterlimit="10"/> <path opacity="0.26" d="M1060.81 606.069C1293.5 875.644 1486.97 1268.6 1536.79 1573.27C1586.9 1879.56 1483.51 2045.03 1283.27 1981.09C1082.22 1916.94 816.124 1630.66 631.709 1279.64C447.955 930.015 375.249 575.389 452.665 406.316C528.757 240.112 739.517 282.417 971.546 510.496C1001.42 539.779 1031.3 571.784 1060.81 606.069Z" stroke="url(#paint2_linear)" stroke-opacity="0.5" stroke-miterlimit="10"/>

Before

Width:  |  Height:  |  Size: 26 KiB

After

Width:  |  Height:  |  Size: 26 KiB

View File

@ -1,4 +1,4 @@
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M9.5 15H6C4.89543 15 4 14.1046 4 13V6C4 4.89543 4.89543 4 6 4H13C14.1046 4 15 4.89543 15 6V9.5" stroke="white" stroke-width="1.5"/> <path d="M9.5 15H6C4.89543 15 4 14.1046 4 13V6C4 4.89543 4.89543 4 6 4H13C14.1046 4 15 4.89543 15 6V9.5" stroke="#0098d4" stroke-width="1.5"/>
<rect x="9" y="9" width="11" height="11" rx="2" stroke="white" stroke-width="1.5"/> <rect x="9" y="9" width="11" height="11" rx="2" stroke="#0098d4" stroke-width="1.5"/>
</svg> </svg>

Before

Width:  |  Height:  |  Size: 328 B

After

Width:  |  Height:  |  Size: 332 B

3
images/tick-dark.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="M5.5 12.5L8.84497 15.845C9.71398 16.714 11.1538 16.601 11.8767 15.6071L18.5 6.5" stroke="#333" stroke-width="2" stroke-linecap="round"/>
</svg>

After

Width:  |  Height:  |  Size: 249 B

View File

@ -43,7 +43,11 @@ export class ClientView extends TemplateView {
t.div({className: "header"}, [ t.div({className: "header"}, [
t.div({className: "description"}, [ t.div({className: "description"}, [
t.h3(vm.name), t.h3(vm.name),
t.p(vm.description), t.p([vm.description, " ", t.a({
href: vm.homepage,
target: "_blank",
rel: "noopener noreferrer"
}, "Learn more")]),
t.p({className: "platforms"}, formatPlatforms(vm.availableOnPlatformNames)), t.p({className: "platforms"}, formatPlatforms(vm.availableOnPlatformNames)),
]), ]),
t.img({className: "clientIcon", src: vm.iconUrl}) t.img({className: "clientIcon", src: vm.iconUrl})
@ -80,6 +84,8 @@ class InstallClientView extends TemplateView {
if (textInstructions) { if (textInstructions) {
const copyButton = t.button({ const copyButton = t.button({
className: "copy", className: "copy",
title: "Copy instructions",
"aria-label": "Copy instructions",
onClick: evt => { onClick: evt => {
if (copy(vm.copyString, copyButton.parentElement)) { if (copy(vm.copyString, copyButton.parentElement)) {
copyButton.className = "tick"; copyButton.className = "tick";
@ -131,9 +137,8 @@ class InstallClientView extends TemplateView {
} }
function showBack(t, vm) { function showBack(t, vm) {
return t.p({className: {previewSource: true, hidden: vm => !vm.showBack}}, [ return t.p({className: {caption: true, "back": true, hidden: vm => !vm.showBack}}, [
`Continue with ${vm.name}.`, `Continue with ${vm.name} · `,
" ",
t.button({className: "text", onClick: () => vm.back()}, "Change"), t.button({className: "text", onClick: () => vm.back()}, "Change"),
]); ]);
} }

View File

@ -76,6 +76,10 @@ export class ClientViewModel extends ViewModel {
return actions; return actions;
} }
get homepage() {
return this._client.homepage;
}
get identifier() { get identifier() {
return this._link.identifier; return this._link.identifier;
} }
@ -102,7 +106,7 @@ export class ClientViewModel extends ViewModel {
get textInstructions() { get textInstructions() {
let instructions = this._client.getLinkInstructions(this._proposedPlatform, this._link); let instructions = this._client.getLinkInstructions(this._proposedPlatform, this._link);
if (!Array.isArray(instructions)) { if (instructions && !Array.isArray(instructions)) {
instructions = [instructions]; instructions = [instructions];
} }
return instructions; return instructions;

View File

@ -35,9 +35,9 @@ class ShowLinkView extends TemplateView {
return t.div([ return t.div([
t.view(new PreviewView(vm.previewViewModel)), t.view(new PreviewView(vm.previewViewModel)),
t.view(new ClientListView(vm.clientsViewModel)), t.view(new ClientListView(vm.clientsViewModel)),
t.p({className: {previewSource: true, hidden: vm => !vm.previewDomain}}, [ t.p({className: {caption: true, hidden: vm => !vm.previewDomain}}, [
vm => vm.previewFailed ? `${vm.previewDomain} has not returned a preview.` : `Preview provided by ${vm.previewDomain}.`, vm => vm.previewFailed ? `${vm.previewDomain} has not returned a preview.` : `Preview provided by ${vm.previewDomain}`,
" ", " · ",
t.button({className: "text", onClick: () => vm.changeServer()}, "Change"), t.button({className: "text", onClick: () => vm.changeServer()}, "Change"),
]), ]),
]); ]);

View File

@ -40,7 +40,7 @@ export class Element {
get name() {return "Element"; } get name() {return "Element"; }
get description() { return 'Fully-featured Matrix client, used by millions.'; } get description() { return 'Fully-featured Matrix client, used by millions.'; }
get homepage() { return ; } // prevents a visit app homepage button from appearing get homepage() { return "https://element.io"; }
get author() { return "Element"; } get author() { return "Element"; }
getMaturity(platform) { return Maturity.Stable; } getMaturity(platform) { return Maturity.Stable; }