sij/env.esq
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

move "looks like not installed" in client view, and open & install stage

Browse source
This commit is contained in:
Bruno Windels 2020-12-01 15:29:12 +01:00
parent c1bc2546fd
commit 64657c196a
9 changed files with 141 additions and 53 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

38
css/main.css
View file

@ -144,19 +144,19 @@ button.text:hover {
padding: 0;
}
.ClientView .header {
.ListedClientView .header {
display: flex;
}
.ClientView .description {
.ListedClientView .description {
flex: 1;
}
.ClientView h3 {
.ListedClientView h3 {
margin-top: 0;
}
.ClientView .icon {
.ListedClientView .icon {
border-radius: 8px;
background-repeat: no-repeat;
background-size: cover;
@ -165,23 +165,39 @@ button.text:hover {
}
.ClientView .icon.element-io {
.ListedClientView .icon.element-io {
background-image: url('../images/client-icons/element.svg');
}
button.primary, a.primary, button.secondary, a.secondary {
text-decoration: none;
font-weight: bold;
text-align: center;
padding: 8px;
margin: 8px 0;
line-height: 24px;
}
button.secondary, a.secondary {
background: var(--background);
color: var(--link);
}
button.primary, a.primary {
background: var(--link);
color: var(--background);
border-radius: 32px;
text-decoration: none;
font-weight: bold;
}
.ClientView .actions a {
button.primary, button.secondary {
border: none;
width: 100%;
font-size: inherit;
}
.PreviewView .primary, .PreviewView .secondary {
display: block;
text-align: center;
padding: 8px;
margin: 8px;
}
.ClientView .actions a.badge {

9
src/Link.js
View file

@ -40,6 +40,15 @@ function asPrefix(identifierKind) {
}
}
export function getLabelForLinkKind(kind) {
switch (kind) {
case LinkKind.User: return "Start chat";
case LinkKind.Room: return "View room";
case LinkKind.Group: return "View community";
case LinkKind.Event: return "View message";
}
}
export const LinkKind = createEnum(
"Room",
"User",

4
src/client/ClientListView.js
View file

@ -15,11 +15,11 @@ limitations under the License.
*/
import {TemplateView} from "../utils/TemplateView.js";
import {ClientView} from "./ClientView.js";
import {ListedClientView} from "./ClientView.js";
export class ClientListView extends TemplateView {
render(t, vm) {
const clients = vm.clients.map(clientViewModel => t.view(new ClientView(clientViewModel)));
const clients = vm.clients.map(clientViewModel => t.view(new ListedClientView(clientViewModel)));
return t.div({className: "ClientListView"}, [
t.h3("You need an app to continue"),
t.div({className: "ClientListView"}, clients)

39
src/client/ClientView.js
View file

@ -16,9 +16,9 @@ limitations under the License.
import {TemplateView} from "../utils/TemplateView.js";
export class ClientView extends TemplateView {
export class ListedClientView extends TemplateView {
render(t, vm) {
return t.div({className: "ClientView"}, [
return t.div({className: "ListedClientView"}, [
t.div({className: "header"}, [
t.div({className: "description"}, [
t.h3(vm.name),
@ -26,6 +26,41 @@ export class ClientView extends TemplateView {
]),
t.div({className: `icon ${vm.clientId}`})
]),
t.view(new ClientView(vm))
]);
}
}
export class ClientView extends TemplateView {
render(t, vm) {
return t.div({className: "ClientView"}, [
t.mapView(vm => vm.stage, stage => {
switch (stage) {
case "open": return new OpenClientView(vm);
case "install": return new InstallClientView(vm);
}
}),
]);
}
}
class OpenClientView extends TemplateView {
render(t, vm) {
return t.div({className: "OpenClientView"}, [
t.a({
className: "primary",
href: vm.deepLink,
rel: "noopener noreferrer",
onClick: () => vm.deepLinkActivated(),
}, vm.deepLinkLabel)
]);
}
}
class InstallClientView extends TemplateView {
render(t, vm) {
return t.div({className: "InstallClientView"}, [
t.h3(`Looks like you don't have ${vm.name} installed.`),
t.div({className: "actions"}, vm.actions.map(a => {
let badgeUrl;
switch (a.kind) {

40
src/client/ClientViewModel.js
View file

@ -16,20 +16,28 @@ limitations under the License.
import {isWebPlatform, Platform} from "./Platform.js";
import {ViewModel} from "../utils/ViewModel.js";
import {getLabelForLinkKind} from "../Link.js";
export class ClientViewModel extends ViewModel {
constructor(options) {
super(options);
const {client, link} = options;
this._client = client;
this._link = link;
const supportedPlatforms = client.platforms;
const matchingPlatforms = this.platforms.filter(p => {
return supportedPlatforms.includes(p);
});
const nativePlatform = matchingPlatforms.find(p => !isWebPlatform(p));
const webPlatform = this.platforms.find(p => isWebPlatform(p));
this._showOpen = nativePlatform && !client.canInterceptMatrixToLinks(nativePlatform);
this._proposedPlatform = this.preferences.platform || nativePlatform || webPlatform;
this.actions = this._createActions(client, link, nativePlatform, webPlatform);
this.name = this._client.getName(nativePlatform || webPlatform);
this.name = this._client.getName(this._proposedPlatform);
this.deepLink = this._client.getDeepLink(this._proposedPlatform, this._link);
}
_createActions(client, link, nativePlatform, webPlatform) {
@ -64,4 +72,34 @@ export class ClientViewModel extends ViewModel {
get clientId() {
return this._client.id;
}
get stage() {
return this._showOpen ? "open" : "install";
}
get deepLinkLabel() {
return getLabelForLinkKind(this._link.kind);
}
deepLinkActivated() {
this.preferences.setClient(this._client.id, this._proposedPlatform);
if (this._showOpen) {
this._showOpen = false;
this.emitChange();
}
}
}
/*
if (this._preferredClient.getLinkSupport(this.preferences.platform, this._link)) {
const deepLink = this._preferredClient.getDeepLink(this.preferences.platform, this._link);
this.openLink(deepLink);
const protocol = new URL(deepLink).protocol;
const isWebProtocol = protocol === "http:" || protocol === "https:";
if (!isWebProtocol) {
this.missingClientViewModel = new ClientViewModel(this.childOptions({client: this._preferredClient, link: this._link}));
}
} else {
this.acceptInstructions = this._preferredClient.getLinkInstructions(this.preferences.platform, this._link);
}
*/

1
src/client/Platform.js
View file

@ -29,6 +29,7 @@ export const Platform = createEnum(
export function guessApplicablePlatforms(userAgent) {
// use https://github.com/faisalman/ua-parser-js to guess, and pass as RootVM options
return [Platform.DesktopWeb, Platform.Linux];
//return [Platform.MobileWeb, Platform.iOS];
}
export function isWebPlatform(p) {

4
src/client/clients/Element.js
View file

@ -78,4 +78,8 @@ export class Element {
default: return [new WebsiteLink("https://element.io/get-started")];
}
}
canInterceptMatrixToLinks(platform) {
return platform === Platform.iOS || platform === Platform.Android;
}
}

17
src/preview/PreviewView.js
View file

@ -31,19 +31,14 @@ export class PreviewView extends TemplateView {
t.p(["Preview from ", vm => vm.previewDomain]),
]),
]),
t.p({hidden: vm => !!vm.clientsViewModel}, t.button({onClick: () => vm.accept()}, vm => vm.acceptLabel)),
t.p({className: {hidden: vm => !vm.canShowClients}}, t.button({
className: "primary",
onClick: () => vm.showClients()
}, vm => vm.showClientsLabel)),
t.mapView(vm => vm.clientsViewModel, childVM => childVM ? new ClientListView(childVM) : null),
t.mapView(vm => vm.missingClientViewModel, childVM => childVM ? new MissingClientView(childVM) : null),
t.mapView(vm => vm.preferredClientViewModel, childVM => childVM ? new ClientView(childVM) : null),
t.p({className: {hidden: vm => !vm.preferredClientViewModel}}, vm => `This will open in ${vm.preferredClientViewModel?.name}`),
])
]);
}
}
class MissingClientView extends TemplateView {
render(t, vm) {
return t.div({className: "MissingClientView"}, [
t.h3(`It looks like you don't have ${vm.name} installed.`),
t.view(new ClientView(vm)),
]);
}
}

36
src/preview/PreviewViewModel.js
View file

@ -14,7 +14,7 @@ See the License for the specific language governing permissions and
limitations under the License.
*/
import {LinkKind} from "../Link.js";
import {LinkKind, getLabelForLinkKind} from "../Link.js";
import {ViewModel} from "../utils/ViewModel.js";
import {resolveServer} from "./HomeServer.js";
import {ClientListViewModel} from "../client/ClientListViewModel.js";
@ -35,7 +35,10 @@ export class PreviewViewModel extends ViewModel {
this.previewDomain = null;
this.clientsViewModel = null;
this.acceptInstructions = null;
this.missingClientViewModel = null;
this.preferredClientViewModel = this._preferredClient ? new ClientViewModel(this.childOptions({
client: this._preferredClient,
link: this._link
})) : null;
}
async load() {
@ -71,31 +74,18 @@ export class PreviewViewModel extends ViewModel {
return this._link.identifier;
}
get acceptLabel() {
if (this._preferredClient) {
return `Open in ${this._preferredClient.getName(this.preferences.platform)}`;
} else {
return "Choose app";
}
get canShowClients() {
return !(this.preferredClientViewModel || this.clientsViewModel);
}
accept() {
if (this._preferredClient) {
if (this._preferredClient.getLinkSupport(this.preferences.platform, this._link)) {
const deepLink = this._preferredClient.getDeepLink(this.preferences.platform, this._link);
this.openLink(deepLink);
const protocol = new URL(deepLink).protocol;
const isWebProtocol = protocol === "http:" || protocol === "https:";
if (!isWebProtocol) {
this.missingClientViewModel = new ClientViewModel(this.childOptions({client: this._preferredClient, link: this._link}));
get showClientsLabel() {
return getLabelForLinkKind(this._link.kind);
}
} else {
this.acceptInstructions = this._preferredClient.getLinkInstructions(this.preferences.platform, this._link);
}
} else {
showClients() {
if (!this._preferredClient) {
this.clientsViewModel = new ClientListViewModel(this.childOptions({clients: this._clients, link: this._link}));
// show client list
}
this.emitChange();
}
}
}