stryan/matrix.to
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

polish

Browse Source
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
css/client.css
View File

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

13
css/main.css
View File

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

10
css/open.css
View File

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

6
css/preview.css
View File

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

2
images/background.svg
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">
<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="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"/>

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 26 KiB

After

Width:  |  Height:  |  Size: 26 KiB

4
images/copy.svg
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">
<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"/>
<rect x="9" y="9" width="11" height="11" rx="2" 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="#0098d4" stroke-width="1.5"/>
</svg>

Side by Side Swipe Overlay

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

After

Width:  |  Height:  |  Size: 249 B

13
src/open/ClientView.js
View File

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

6
src/open/ClientViewModel.js
View File

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

6
src/open/OpenLinkView.js
View File

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

2
src/open/clients/Element.js
View File

@ -40,7 +40,7 @@ export class Element {
get name() {return "Element"; }
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"; }
getMaturity(platform) { return Maturity.Stable; }