Skip to content
Snippets Groups Projects
Commit 2ecdf323 authored by Bruno Windels's avatar Bruno Windels
Browse files

polish create page

parent e69b9241
No related branches found
No related tags found
No related merge requests found
......@@ -3,3 +3,11 @@
word-break: break-all;
text-align: center;
}
.CreateLinkView form {
margin-top: 36px;
}
.CreateLinkView form > *:not(:first-child) {
margin-top: 24px;
}
......@@ -47,7 +47,6 @@ body {
height: 100%;
width: 100%;
font-size: 14px;
line-height: 24px;
color: var(--font);
padding: 120px 0 0 0;
margin: 0;
......@@ -142,9 +141,8 @@ button.text:hover {
text-decoration: none;
font-weight: bold;
text-align: center;
padding: 8px;
padding: 12px 8px;
margin: 8px 0;
line-height: 24px;
}
.secondary {
......@@ -158,6 +156,23 @@ button.text:hover {
border-radius: 32px;
}
.primary.icon {
background-repeat: no-repeat;
background-position: 12px center;
}
.icon.link {
background-image: url('../images/link.svg');
}
.icon.tick {
background-image: url('../images/tick.svg');
}
.icon.copy {
background-image: url('../images/copy.svg');
}
button.primary, input[type='submit'].primary, button.secondary, input[type='submit'].secondary {
border: none;
font-size: inherit;
......
......@@ -58,6 +58,15 @@ export const LinkKind = createEnum(
)
export class Link {
static validateIdentifier(identifier) {
return !!(
USERID_PATTERN.exec(identifier) ||
ROOMALIAS_PATTERN.exec(identifier) ||
ROOMID_PATTERN.exec(identifier) ||
GROUPID_PATTERN.exec(identifier)
);
}
static parse(fragment) {
if (!fragment) {
return null;
......
......@@ -17,23 +17,53 @@ limitations under the License.
import {TemplateView} from "../utils/TemplateView.js";
import {PreviewView} from "../preview/PreviewView.js";
function selectNode(node) {
let selection = window.getSelection();
selection.removeAllRanges();
let range = document.createRange();
range.selectNode(copyNode);
selection.addRange(range);
}
function copyButton(t, copyNode, label, classNames) {
return t.button({className: `${classNames} icon copy`, onClick: evt => {
const button = evt.target;
selectNode(copyNode);
if (document.execCommand("copy")) {
button.innerText = "Copied!";
button.classList.remove("copy");
button.classList.add("tick");
setTimeout(() => {
button.classList.remove("tick");
button.classList.add("copy");
button.innerText = label;
}, 2000);
}
}}, label);
}
export class CreateLinkView extends TemplateView {
render(t, vm) {
const link = t.a({href: vm => vm.linkUrl}, vm => vm.linkUrl);
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({className: {hidden: vm => !vm.linkUrl}}, [
t.h2(link),
t.div(copyButton(t, link, "Copy link", "fullwidth primary")),
]),
t.form({action: "#", onSubmit: evt => this._onSubmit(evt), className: {hidden: vm => vm.linkUrl}}, [
t.div(t.input({
className: "fullwidth large",
type: "text",
name: "identifier",
placeholder: "#room:example.com, @user:example.com"
placeholder: "#room:example.com, @user:example.com",
onChange: evt => this._onIdentifierChange(evt)
})),
t.div(t.input({className: "primary fullwidth", type: "submit", value: "Create link"}))
t.div(t.input({className: "primary fullwidth icon link", type: "submit", value: "Create link"}))
]),
]);
}
......@@ -44,4 +74,13 @@ export class CreateLinkView extends TemplateView {
const identifier = form.elements.identifier.value;
this.value.createLink(identifier);
}
}
\ No newline at end of file
_onIdentifierChange(evt) {
const inputField = evt.target;
if (!this.value.validateIdentifier(inputField.value)) {
inputField.setCustomValidity("That doesn't seem valid. Try #room:example.com, @user:example.com or +group:example.com.");
} else {
inputField.setCustomValidity("");
}
}
}
......@@ -24,6 +24,10 @@ export class CreateLinkViewModel extends ViewModel {
this.previewViewModel = null;
}
validateIdentifier(identifier) {
return Link.validateIdentifier(identifier);
}
async createLink(identifier) {
this._link = Link.parse(identifier);
if (this._link) {
......@@ -45,4 +49,4 @@ export class CreateLinkViewModel extends ViewModel {
return `${this.origin}/#${this._link.toFragment()}`;
}
}
}
\ No newline at end of file
}
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment