Merge pull request #1811 from thecodingmachine/visual-cowebsite-icon

Enhance UX co-website opening
This commit is contained in:
Alexis Faizeau 2022-02-01 18:52:46 +01:00 committed by GitHub
commit 8bd0d648d4
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 50 additions and 2 deletions

View file

@ -20,7 +20,7 @@
onMount(() => { onMount(() => {
icon.src = `${ICON_URL}/icon?url=${urlObject.hostname}&size=64..96..256&fallback_icon_color=14304c`; icon.src = `${ICON_URL}/icon?url=${urlObject.hostname}&size=64..96..256&fallback_icon_color=14304c`;
icon.alt = urlObject.hostname; icon.alt = coWebsite.altMessage ?? urlObject.hostname;
icon.onload = () => { icon.onload = () => {
iconLoaded = true; iconLoaded = true;
}; };
@ -204,6 +204,10 @@
border-image-outset: 1; border-image-outset: 1;
} }
&:not(.vertical) {
animation: bounce 0.35s ease 6 alternate;
}
&.vertical { &.vertical {
margin: 7px; margin: 7px;
@ -216,6 +220,8 @@
width: 40px; width: 40px;
height: 40px; height: 40px;
} }
animation: shake 0.35s ease-in-out;
} }
&.displayed { &.displayed {
@ -259,6 +265,41 @@
} }
} }
@keyframes bounce {
from {
transform: translateY(0);
}
to {
transform: translateY(-15px);
}
}
@keyframes shake {
0% {
transform: translateX(0);
}
20% {
transform: translateX(-10px);
}
40% {
transform: translateX(10px);
}
60% {
transform: translateX(-10px);
}
80% {
transform: translateX(10px);
}
100% {
transform: translateX(0);
}
}
.cowebsite-icon { .cowebsite-icon {
width: 50px; width: 50px;
height: 50px; height: 50px;

View file

@ -66,6 +66,7 @@ export class GameMapPropertiesListener {
let websitePolicyProperty: string | undefined; let websitePolicyProperty: string | undefined;
let websitePositionProperty: number | undefined; let websitePositionProperty: number | undefined;
let websiteTriggerProperty: string | undefined; let websiteTriggerProperty: string | undefined;
let websiteTriggerMessageProperty: string | undefined;
layer.properties.forEach((property) => { layer.properties.forEach((property) => {
switch (property.name) { switch (property.name) {
@ -84,6 +85,9 @@ export class GameMapPropertiesListener {
case GameMapProperties.OPEN_WEBSITE_TRIGGER: case GameMapProperties.OPEN_WEBSITE_TRIGGER:
websiteTriggerProperty = property.value as string | undefined; websiteTriggerProperty = property.value as string | undefined;
break; break;
case GameMapProperties.OPEN_WEBSITE_TRIGGER_MESSAGE:
websiteTriggerMessageProperty = property.value as string | undefined;
break;
} }
}); });

View file

@ -44,6 +44,7 @@ export type CoWebsite = {
allowPolicy: string | undefined; allowPolicy: string | undefined;
allowApi: boolean | undefined; allowApi: boolean | undefined;
jitsi?: boolean; jitsi?: boolean;
altMessage?: string;
}; };
class CoWebsiteManager { class CoWebsiteManager {
@ -533,7 +534,8 @@ class CoWebsiteManager {
allowApi?: boolean, allowApi?: boolean,
allowPolicy?: string, allowPolicy?: string,
position?: number, position?: number,
closable?: boolean closable?: boolean,
altMessage?: string
): CoWebsite { ): CoWebsite {
const iframe = document.createElement("iframe"); const iframe = document.createElement("iframe");
const fullUrl = new URL(url, base); const fullUrl = new URL(url, base);
@ -547,6 +549,7 @@ class CoWebsiteManager {
closable: closable ?? false, closable: closable ?? false,
allowPolicy, allowPolicy,
allowApi, allowApi,
altMessage,
}; };
this.initialiseCowebsite(newCoWebsite, position); this.initialiseCowebsite(newCoWebsite, position);