some styling for create link form

This commit is contained in:
Bruno Windels 2020-12-02 16:06:48 +01:00
parent 0fc203dff5
commit 36710eccc4
5 changed files with 45 additions and 13 deletions

View File

@ -173,7 +173,7 @@ button.text:hover {
background-image: url('../images/client-icons/weechat.svg');
}
button.primary, a.primary, button.secondary, a.secondary {
.primary, .secondary {
text-decoration: none;
font-weight: bold;
text-align: center;
@ -182,22 +182,32 @@ button.primary, a.primary, button.secondary, a.secondary {
line-height: 24px;
}
button.secondary, a.secondary {
.secondary {
background: var(--background);
color: var(--link);
}
button.primary, a.primary {
.primary {
background: var(--link);
color: var(--background);
border-radius: 32px;
}
button.primary, button.secondary {
button.primary, input[type='submit'].primary, button.secondary, input[type='submit'].secondary {
border: none;
font-size: inherit;
}
input[type='text'].large {
width: 100%;
padding: 12px;
background: var(--background);
border: 1px solid var(--foreground);
border-radius: 16px;
font-size: 14px;
line-height: 24px;
}
.fullwidth {
display: block;
width: 100%;
@ -213,3 +223,9 @@ button.primary, button.secondary {
.ClientView .actions img {
height: 100%;
}
.CreateLinkView h2 {
padding: 0 40px;
word-break: break-all;
text-align: center;
}

View File

@ -67,7 +67,7 @@ function orderedUnique(array) {
}
export class Link {
static parseFragment(fragment) {
static parse(fragment) {
if (!fragment) {
return null;
}

View File

@ -49,7 +49,7 @@ export class RootViewModel extends ViewModel {
updateHash(hash) {
const oldLink = this.link;
this.link = Link.parseFragment(hash);
this.link = Link.parse(hash);
this._updateChildVMs(oldLink);
}

View File

@ -20,14 +20,28 @@ import {PreviewView} from "../preview/PreviewView.js";
export class CreateLinkView extends TemplateView {
render(t, vm) {
return t.div({className: "CreateLinkView card"}, [
t.h1(
{className: {hidden: vm => vm.previewViewModel}},
"Create shareable links to Matrix rooms, users or messages without being tied to any app"
),
t.mapView(vm => vm.previewViewModel, childVM => childVM ? new PreviewView(childVM) : null),
t.h2({className: {hidden: vm => !vm.linkUrl}}, t.a({href: vm => vm.linkUrl}, vm => vm.linkUrl)),
t.form({action: "#", onSubmit: evt => this._onSubmit(evt)}, [
t.div(t.input({
className: "fullwidth",
className: "fullwidth large",
type: "text",
onChange: evt => vm.createLink(evt.target.value),
name: "identifier",
placeholder: "#room:example.com, @user:example.com"
})),
t.div(t.input({className: "primary fullwidth", type: "submit", value: "Create link"}))
]),
]);
}
_onSubmit(evt) {
evt.preventDefault();
const form = evt.target;
const identifier = form.elements.identifier.value;
this.value.createLink(identifier);
}
}

View File

@ -25,7 +25,7 @@ export class CreateLinkViewModel extends ViewModel {
}
async createLink(identifier) {
this._link = Link.parseFragment(identifier);
this._link = Link.parse(identifier);
if (this._link) {
// TODO: abort previous load
this.previewViewModel = new PreviewViewModel(this.childOptions({
@ -34,6 +34,8 @@ export class CreateLinkViewModel extends ViewModel {
}));
this.emitChange();
await this.previewViewModel.load();
} else {
this.previewViewModel = null;
}
this.emitChange();
}