From 36710eccc4abd7d1ae329c900464cc6291d48741 Mon Sep 17 00:00:00 2001 From: Bruno Windels Date: Wed, 2 Dec 2020 16:06:48 +0100 Subject: [PATCH] some styling for create link form --- css/main.css | 24 ++++++++++++++++++++---- src/Link.js | 2 +- src/RootViewModel.js | 2 +- src/create/CreateLinkView.js | 26 ++++++++++++++++++++------ src/create/CreateLinkViewModel.js | 4 +++- 5 files changed, 45 insertions(+), 13 deletions(-) diff --git a/css/main.css b/css/main.css index 79ecd0f..f78ad1d 100644 --- a/css/main.css +++ b/css/main.css @@ -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%; @@ -212,4 +222,10 @@ button.primary, button.secondary { .ClientView .actions img { height: 100%; +} + +.CreateLinkView h2 { + padding: 0 40px; + word-break: break-all; + text-align: center; } \ No newline at end of file diff --git a/src/Link.js b/src/Link.js index 292879c..6b6c401 100644 --- a/src/Link.js +++ b/src/Link.js @@ -67,7 +67,7 @@ function orderedUnique(array) { } export class Link { - static parseFragment(fragment) { + static parse(fragment) { if (!fragment) { return null; } diff --git a/src/RootViewModel.js b/src/RootViewModel.js index ffa79a0..1387702 100644 --- a/src/RootViewModel.js +++ b/src/RootViewModel.js @@ -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); } diff --git a/src/create/CreateLinkView.js b/src/create/CreateLinkView.js index cc1b738..b7bc007 100644 --- a/src/create/CreateLinkView.js +++ b/src/create/CreateLinkView.js @@ -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.div(t.input({ - className: "fullwidth", - type: "text", - onChange: evt => vm.createLink(evt.target.value), - placeholder: "#room:example.com, @user:example.com" - })), + t.form({action: "#", onSubmit: evt => this._onSubmit(evt)}, [ + t.div(t.input({ + className: "fullwidth large", + type: "text", + 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); + } } \ No newline at end of file diff --git a/src/create/CreateLinkViewModel.js b/src/create/CreateLinkViewModel.js index 2f620bc..40f39d2 100644 --- a/src/create/CreateLinkViewModel.js +++ b/src/create/CreateLinkViewModel.js @@ -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(); }