Improve "no stickers" view

Fixes https://github.com/turt2live/matrix-dimension/issues/186
This commit is contained in:
Travis Ralston 2018-10-23 23:55:29 -06:00
parent 97cd39ac4f
commit 9ae83f3dae
6 changed files with 36 additions and 3 deletions

View File

@ -5,7 +5,7 @@ import {
WIDGET_GOOGLE_CALENDAR, WIDGET_GOOGLE_CALENDAR,
WIDGET_GOOGLE_DOCS, WIDGET_GOOGLE_DOCS,
WIDGET_GRAFANA, WIDGET_GRAFANA,
WIDGET_JITSI, WIDGET_SPOTIFY, WIDGET_JITSI, WIDGET_SPOTIFY, WIDGET_STICKER_PICKER,
WIDGET_TRADINGVIEW, WIDGET_TRADINGVIEW,
WIDGET_TWITCH, WIDGET_TWITCH,
WIDGET_YOUTUBE WIDGET_YOUTUBE
@ -59,6 +59,9 @@ export class IntegrationsRegistry {
"spotify": { "spotify": {
types: WIDGET_SPOTIFY, types: WIDGET_SPOTIFY,
}, },
"stickerpicker": {
types: WIDGET_STICKER_PICKER,
},
}, },
}; };

View File

@ -71,6 +71,15 @@ export class ScalarWidgetApi {
}); });
} }
public static openIntegrationManager(integrationType: string, integrationId: string): void {
ScalarWidgetApi.callAction("integration_manager_open", {
data: {
integType: integrationType,
integId: integrationId,
},
});
}
private static callAction(action, payload) { private static callAction(action, payload) {
if (!window.opener) { if (!window.opener) {
return; return;

View File

@ -10,8 +10,9 @@
</div> </div>
<div class="sticker-picker" *ngIf="!isLoading && !authError"> <div class="sticker-picker" *ngIf="!isLoading && !authError">
<div class="no-stickers" *ngIf="!packs || packs.length === 0"> <div class="no-stickers" *ngIf="!packs || packs.length === 0">
You have no sticker packs. <img src="/img/no_stickers.png" />
<!-- TODO: Open integrations manager --> <span class="message">You have no sticker packs.</span>
<button class="btn btn-link btn-sm" (click)="openIntegrationManager()">Add some stickers</button>
</div> </div>
<div class="sticker-pack" *ngFor="let pack of packs trackById"> <div class="sticker-pack" *ngFor="let pack of packs trackById">
<div class="header"> <div class="header">

View File

@ -29,6 +29,21 @@
color: themed(stickerPickerErrorColor); color: themed(stickerPickerErrorColor);
} }
.no-stickers {
text-align: center;
img {
width: 96px;
height: 96px;
margin-top: 20px;
margin-bottom: 15px;
}
.message {
display: block;
}
}
.sticker-picker { .sticker-picker {
margin: 15px 15px 30px; margin: 15px 15px 30px;

View File

@ -8,6 +8,7 @@ import { SessionStorage } from "../../shared/SessionStorage";
import { ScalarServerApiService } from "../../shared/services/scalar/scalar-server-api.service"; import { ScalarServerApiService } from "../../shared/services/scalar/scalar-server-api.service";
import { FE_Sticker, FE_UserStickerPack } from "../../shared/models/integration"; import { FE_Sticker, FE_UserStickerPack } from "../../shared/models/integration";
import { MediaService } from "../../shared/services/media.service"; import { MediaService } from "../../shared/services/media.service";
import { WIDGET_STICKER_PICKER } from "../../shared/models/widget";
@Component({ @Component({
selector: "my-generic-widget-wrapper", selector: "my-generic-widget-wrapper",
@ -100,4 +101,8 @@ export class StickerPickerWidgetWrapperComponent extends CapableWidget implement
public sendSticker(sticker: FE_Sticker, pack: FE_UserStickerPack) { public sendSticker(sticker: FE_Sticker, pack: FE_UserStickerPack) {
ScalarWidgetApi.sendSticker(sticker, pack); ScalarWidgetApi.sendSticker(sticker, pack);
} }
public openIntegrationManager() {
ScalarWidgetApi.openIntegrationManager(WIDGET_STICKER_PICKER[0], ScalarWidgetApi.widgetId);
}
} }

Binary file not shown.

After

Width:  |  Height:  |  Size: 103 KiB