Matrix-Mirrors/matrix-dimension
1
0
Fork 0
mirror of https://github.com/turt2live/matrix-dimension.git synced 2024-10-01 01:05:53 -04:00
Code Issues Packages Projects Releases Wiki Activity

Reorganize the UI into sections to make it a bit clearer on what everthing is

Browse Source
This commit is contained in:
turt2live 2017-09-08 20:53:52 -06:00
parent ab4d5ac76d
commit 0b37269014
5 changed files with 68 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
config/integrations/customwidget.yaml
View File

@ -2,6 +2,6 @@
type: "widget"
integrationType: "customwidget"
enabled: true
name: "Custom Widget"
name: "Custom Widgets"
about: "A webpage embedded in the room."
avatar: "img/avatars/customwidget.png"

2
web/app/app.module.ts
View File

@ -23,6 +23,7 @@ import { IrcConfigComponent } from "./configs/irc/irc-config.component";
import { IrcApiService } from "./shared/irc-api.service";
import { TravisCiConfigComponent } from "./configs/travisci/travisci-config.component";
import { CustomWidgetConfigComponent } from "./configs/widget/custom_widget/custom_widget-config.component";
import { MyFilterPipe } from "./shared/my-filter.pipe";
@NgModule({
imports: [
@ -47,6 +48,7 @@ import { CustomWidgetConfigComponent } from "./configs/widget/custom_widget/cust
IrcConfigComponent,
TravisCiConfigComponent,
CustomWidgetConfigComponent,
MyFilterPipe,
// Vendor
],

48
web/app/riot/riot.component.html
View File

@ -7,11 +7,51 @@
<p><i class="fa fa-circle-o-notch fa-spin"></i> Loading...</p>
</div>
<div *ngIf="!error && !loading">
<h3>Manage Integrations</h3>
<p>Turn on anything you like. If an integration has some special configuration, it will have a configuration
icon next to it.</p>
<!-- ------------------------ -->
<!-- WIDGETS -->
<!-- ------------------------ -->
<h4>
Widgets <i class="fa fa-question-circle text-info" style="font-size: 15px;" placement="bottom"
ngbTooltip="Widgets add small apps to Riot, like Google Docs, Jitsi conferences, and YouTube videos"></i>
</h4>
<div class="integration-container">
<my-integration *ngFor="let integration of integrations"
<my-integration *ngFor="let integration of integrations | myfilter:'type':'widget'"
[integration]="integration"
[roomId]="roomId"
[scalarToken]="scalarToken"
(updated)="updateIntegration(integration)"></my-integration>
</div>
<!-- ------------------------ -->
<!-- BOTS -->
<!-- ------------------------ -->
<h4>
Bots <i class="fa fa-question-circle text-info" style="font-size: 15px;" placement="bottom"
ngbTooltip="Bots can provide entertainment or some utility to your room"></i>
</h4>
<div class="integration-container">
<my-integration *ngFor="let integration of integrations | myfilter:'type':'bot'"
[integration]="integration"
[roomId]="roomId"
[scalarToken]="scalarToken"
(updated)="updateIntegration(integration)"></my-integration>
<my-integration *ngFor="let integration of integrations | myfilter:'type':'complex-bot'"
[integration]="integration"
[roomId]="roomId"
[scalarToken]="scalarToken"
(updated)="updateIntegration(integration)"></my-integration>
</div>
<!-- ------------------------ -->
<!-- BRIDGES -->
<!-- ------------------------ -->
<h4>
Bridges <i class="fa fa-question-circle text-info" style="font-size: 15px;" placement="bottom"
ngbTooltip="Bridges allow people on other platforms to talk in the room"></i>
</h4>
<div class="integration-container">
<my-integration *ngFor="let integration of integrations | myfilter:'type':'bridge'"
[integration]="integration"
[roomId]="roomId"
[scalarToken]="scalarToken"

10
web/app/riot/riot.component.scss
View File

@ -2,6 +2,7 @@
.integration-container {
display: flex;
flex-wrap: wrap;
margin-bottom: 20px;
}
#wrapper {
@ -9,6 +10,11 @@
}
my-scalar-close {
float: right;
margin: -15px;
position: fixed;
top: 15px;
right: 15px;
}
h4 {
margin-left: 5px;
}

13
web/app/shared/my-filter.pipe.ts Normal file
View File

@ -0,0 +1,13 @@
import { Pipe, PipeTransform } from "@angular/core";
@Pipe({
name: 'myfilter',
pure: false
})
export class MyFilterPipe implements PipeTransform {
transform(items: any[], field: string, value: string): any[] {
if (!items) return [];
if (!value || value.length == 0) return items;
return items.filter(it => it[field].toLowerCase() === value.toLowerCase());
}
}