matrix-dimension/web/app/riot/riot.component.html
Travis Ralston 6657d5dbf5 Start of a new UI for Dimension
Integrations need styling and the breadcrumbs don't work. Further, you can't actually add/edit anything.
2017-12-14 21:25:15 -07:00

57 lines
2.6 KiB
HTML

<div id="wrapper">
<my-scalar-close></my-scalar-close>
<my-page-header pageName="Dimension"></my-page-header>
<div class="page-content">
<div *ngIf="isError">
<div class="alert alert-danger">{{ errorMessage }}</div>
</div>
<div *ngIf="isLoading">
<my-spinner></my-spinner>
</div>
<div *ngIf="!isLoading && !isError">
<!-- ------------------------ -->
<!-- EMPTY/ENCRYPTED STATES -->
<!-- ------------------------ -->
<div class="alert alert-warning" *ngIf="hasIntegrations() && isRoomEncrypted">
<h4>This room is encrypted</h4>
<strong>Integrations are not encrypted!</strong>
This means that some information about yourself and the
room may be leaked to the bot, bridge, or widget. This information includes the room ID, your display
name,
your username, your avatar, information about Riot, and other similar details. Add integrations with
caution.
</div>
<div class="alert alert-warning" *ngIf="!hasIntegrations() && isRoomEncrypted">
<h4>This room is encrypted</h4>
There are currently no integrations which support encrypted rooms. Sorry about that!
</div>
<div class="alert alert-warning" *ngIf="!hasIntegrations() && !isRoomEncrypted">
<h4>No integrations available</h4>
This room does not have any compatible integrations. Please contact the server owner if you're seeing
this
message.
</div>
<!-- ------------------------ -->
<!-- CATEGORIES -->
<!-- ------------------------ -->
<div *ngFor="let category of getCategories()">
<div class="ibox" *ngIf="getIntegrationsIn(category).length > 0">
<div class="ibox-title">
<h4>{{ category }}</h4>
</div>
<div class="ibox-content">
<div class="integration" *ngFor="let integration of getIntegrationsIn(category)">
<img class="integration-avatar" [src]="getSafeUrl(integration.avatar)"/>
<div class="integration-name">{{ integration.name }}</div>
<div class="integration-description">{{ integration.about }}</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>