diff --git a/web/app/app.module.ts b/web/app/app.module.ts
index 8b5a035..440c96c 100644
--- a/web/app/app.module.ts
+++ b/web/app/app.module.ts
@@ -13,7 +13,6 @@ import { UiSwitchModule } from "angular2-ui-switch";
import { ScalarService } from "./shared/services/scalar.service";
import { ToasterModule } from "angular2-toaster";
import { BrowserAnimationsModule } from "@angular/platform-browser/animations";
-import { IntegrationComponent } from "./integration/integration.component";
import { ScalarCloseComponent } from "./riot/scalar-close/scalar-close.component";
import { IntegrationService } from "./shared/services/integration.service";
import { BootstrapModalModule } from "ngx-modialog/plugins/bootstrap";
@@ -29,6 +28,8 @@ import { PageHeaderComponent } from "./page-header/page-header.component";
import { SpinnerComponent } from "./spinner/spinner.component";
import { BreadcrumbsModule } from "ng2-breadcrumbs";
import { RiotHomeComponent } from "./riot/riot-home/home.component";
+import { IntegrationBagComponent } from "./integration-bag/integration-bag.component";
+import { IntegrationComponent } from "./integration/integration.component";
const WIDGET_CONFIGURATION_COMPONENTS: any[] = IntegrationService.getAllConfigComponents();
@@ -52,6 +53,7 @@ const WIDGET_CONFIGURATION_COMPONENTS: any[] = IntegrationService.getAllConfigCo
HomeComponent,
RiotComponent,
IntegrationComponent,
+ IntegrationBagComponent,
PageHeaderComponent,
SpinnerComponent,
ScalarCloseComponent,
diff --git a/web/app/integration-bag/integration-bag.component.html b/web/app/integration-bag/integration-bag.component.html
new file mode 100644
index 0000000..7d5a396
--- /dev/null
+++ b/web/app/integration-bag/integration-bag.component.html
@@ -0,0 +1,9 @@
+
+
+
+
+
+
{{ integration.name }}
+
{{ integration.about }}
+
+
\ No newline at end of file
diff --git a/web/app/integration-bag/integration-bag.component.scss b/web/app/integration-bag/integration-bag.component.scss
new file mode 100644
index 0000000..bc10af3
--- /dev/null
+++ b/web/app/integration-bag/integration-bag.component.scss
@@ -0,0 +1,37 @@
+// component styles are encapsulated and only applied to their components
+.integration-bag {
+ display: flex;
+ flex-direction: row;
+ align-items: stretch;
+ flex-wrap: wrap;
+ justify-content: flex-start;
+}
+
+.integration {
+ border: 1px solid #eee;
+ border-radius: 5px;
+ margin: 7px;
+ padding: 5px;
+ width: calc(325px - 14px);
+ position: relative;
+}
+
+.integration .integration-avatar {
+ width: 50px;
+ height: 50px;
+ float: left;
+}
+
+.integration .integration-name {
+ display: inline-block;
+ font-size: 1.1em;
+ font-weight: 100;
+ padding-left: 5px;
+}
+
+.integration .integration-description {
+ display: block;
+ font-size: 0.8em;
+ margin-left: 55px;
+ color: #999;
+}
\ No newline at end of file
diff --git a/web/app/integration-bag/integration-bag.component.ts b/web/app/integration-bag/integration-bag.component.ts
new file mode 100644
index 0000000..dfd1874
--- /dev/null
+++ b/web/app/integration-bag/integration-bag.component.ts
@@ -0,0 +1,25 @@
+import { Component, EventEmitter, Input, Output } from "@angular/core";
+import { Integration } from "../shared/models/integration";
+import { DomSanitizer, SafeResourceUrl } from "@angular/platform-browser";
+
+@Component({
+ selector: "my-integration-bag",
+ templateUrl: "./integration-bag.component.html",
+ styleUrls: ["./integration-bag.component.scss"],
+})
+export class IntegrationBagComponent {
+
+ @Input() integrations: Integration[];
+ @Output() integrationClicked: EventEmitter = new EventEmitter();
+
+ constructor(private sanitizer: DomSanitizer) {
+ }
+
+ public getSafeUrl(url: string): SafeResourceUrl {
+ return this.sanitizer.bypassSecurityTrustResourceUrl(url);
+ }
+
+ public onClick(integration: Integration) {
+ this.integrationClicked.emit(integration);
+ }
+}
diff --git a/web/app/integration/integration.component.html b/web/app/integration/integration.component.html
index dd7f0b0..19bdddb 100644
--- a/web/app/integration/integration.component.html
+++ b/web/app/integration/integration.component.html
@@ -1,22 +1,5 @@
-
-
-
{{ integration.name }}
-
-
-
+
+
{{ integration.name }}
+
{{ integration.about }}
\ No newline at end of file
diff --git a/web/app/integration/integration.component.scss b/web/app/integration/integration.component.scss
index 0b55b7a..b7b4af4 100644
--- a/web/app/integration/integration.component.scss
+++ b/web/app/integration/integration.component.scss
@@ -1,38 +1,31 @@
// component styles are encapsulated and only applied to their components
.integration {
- flex: auto;
- margin: 5px;
- padding: 10px;
- border: 1px solid #ccc;
- border-radius: 4px;
- min-width: 150px;
- background-color: white;
+ border: 1px solid #eee;
+ border-radius: 3px;
+ margin-left: 7px;
+ margin-right: 7px;
+ padding: 5px;
+ width: calc(325px - 14px);
+ position: relative;
+ flex: 1;
}
-.avatar {
- float: left;
- margin-right: 7px;
+.integration .integration-avatar {
width: 50px;
height: 50px;
- border-radius: 50px;
+ float: left;
}
-.title {
- float: right;
- width: calc(100% - 57px);
-}
-
-.switch {
+.integration .integration-name {
display: inline-block;
- text-align: left;
+ font-size: 1.1em;
+ font-weight: 100;
+ padding-left: 5px;
}
-.toolbar {
- display: inline-block;
- vertical-align: top;
- margin-left: 5px;
+.integration .integration-description {
+ display: block;
+ font-size: 0.8em;
+ margin-left: 55px;
+ color: #999;
}
-
-.config-icon {
- cursor: pointer;
-}
\ No newline at end of file
diff --git a/web/app/integration/integration.component.ts b/web/app/integration/integration.component.ts
index ba4467a..5416c8b 100644
--- a/web/app/integration/integration.component.ts
+++ b/web/app/integration/integration.component.ts
@@ -1,8 +1,7 @@
import { Component, EventEmitter, Input, Output } from "@angular/core";
import { Integration } from "../shared/models/integration";
-import { overlayConfigFactory } from "ngx-modialog";
-import { BSModalContext, Modal } from "ngx-modialog/plugins/bootstrap";
-import { IntegrationService } from "../shared/services/integration.service";
+import { BSModalContext } from "ngx-modialog/plugins/bootstrap";
+import { DomSanitizer, SafeResourceUrl } from "@angular/platform-browser";
export class ConfigModalContext extends BSModalContext {
public integration: Integration;
@@ -20,30 +19,12 @@ export class ConfigModalContext extends BSModalContext {
export class IntegrationComponent {
@Input() integration: Integration;
- @Input() roomId: string;
- @Input() scalarToken: string;
- @Output() updated: EventEmitter = new EventEmitter();
+ @Output() selected: EventEmitter = new EventEmitter();
- constructor(public modal: Modal) {
+ constructor(private sanitizer: DomSanitizer) {
}
- public update(): void {
- this.integration.isEnabled = !this.integration.isEnabled;
- this.updated.emit();
- }
-
- public configureIntegration(integrationId: string = null): void {
- this.modal.open(IntegrationService.getConfigComponent(this.integration), overlayConfigFactory({
- integration: this.integration,
- roomId: this.roomId,
- scalarToken: this.scalarToken,
- isBlocking: false,
- integrationId: integrationId,
- size: "lg"
- }, BSModalContext));
- }
-
- public canHaveErrors(integration: Integration): boolean {
- return integration.type === "bridge" || integration.type === "widget";
+ public getSafeUrl(url: string): SafeResourceUrl {
+ return this.sanitizer.bypassSecurityTrustResourceUrl(url);
}
}
diff --git a/web/app/riot/riot-home/home.component.html b/web/app/riot/riot-home/home.component.html
index 06dbc19..2cba7ec 100644
--- a/web/app/riot/riot-home/home.component.html
+++ b/web/app/riot/riot-home/home.component.html
@@ -35,14 +35,10 @@
0">
-
{{ category }}
+ {{ category }}
-
-
-
{{ integration.name }}
-
{{ integration.about }}
-
+
diff --git a/web/app/riot/riot-home/home.component.ts b/web/app/riot/riot-home/home.component.ts
index 3b89dca..fcb10f0 100644
--- a/web/app/riot/riot-home/home.component.ts
+++ b/web/app/riot/riot-home/home.component.ts
@@ -7,7 +7,6 @@ import { ActivatedRoute } from "@angular/router";
import { ApiService } from "../../shared/services/api.service";
import { ScalarService } from "../../shared/services/scalar.service";
import * as _ from "lodash";
-import { DomSanitizer, SafeResourceUrl } from "@angular/platform-browser";
const CATEGORY_MAP = {
"Widgets": ["widget"],
@@ -33,14 +32,13 @@ export class RiotHomeComponent {
private userId: string;
private requestedScreen: string = null;
private requestedIntegration: string = null;
- private integrationsForCategory: { [category: string]: Integration[] } = {};
+ public integrationsForCategory: { [category: string]: Integration[] } = {};
private categoryMap: { [categoryName: string]: string[] } = CATEGORY_MAP;
constructor(private activatedRoute: ActivatedRoute,
private api: ApiService,
private scalar: ScalarService,
- private toaster: ToasterService,
- private sanitizer: DomSanitizer) {
+ private toaster: ToasterService) {
let params: any = this.activatedRoute.snapshot.queryParams;
this.requestedScreen = params.screen;
@@ -75,10 +73,6 @@ export class RiotHomeComponent {
}
}
- public getSafeUrl(url: string): SafeResourceUrl {
- return this.sanitizer.bypassSecurityTrustResourceUrl(url);
- }
-
public hasIntegrations(): boolean {
for (const category of this.getCategories()) {
if (this.getIntegrationsIn(category).length > 0) return true;
@@ -196,7 +190,8 @@ export class RiotHomeComponent {
if (opened) return;
if (component.integration.type !== type || component.integration.integrationType !== integrationType) return;
console.log("Configuring integration " + this.requestedIntegration + " type=" + type + " integrationType=" + integrationType);
- component.configureIntegration(this.requestedIntegration);
+ //component.configureIntegration(this.requestedIntegration);
+ // TODO: Support editing integrations
opened = true;
});
if (!opened) {
diff --git a/web/app/riot/riot.component.ts b/web/app/riot/riot.component.ts
index de6e3db..52219a9 100644
--- a/web/app/riot/riot.component.ts
+++ b/web/app/riot/riot.component.ts
@@ -6,5 +6,4 @@ import { Component } from "@angular/core";
styleUrls: ["./riot.component.scss"],
})
export class RiotComponent {
-
}
diff --git a/web/style/app.scss b/web/style/app.scss
index 7a3ccb0..b981442 100644
--- a/web/style/app.scss
+++ b/web/style/app.scss
@@ -1,6 +1,7 @@
// styles in src/style directory are applied to the whole page
@import url('https://fonts.googleapis.com/css?family=Open+Sans:100|Roboto:300');
@import '../../node_modules/angular2-toaster/toaster';
+@import "components/ibox.scss";
@import "riot";
body {
diff --git a/web/style/components/ibox.scss b/web/style/components/ibox.scss
new file mode 100644
index 0000000..71bd302
--- /dev/null
+++ b/web/style/components/ibox.scss
@@ -0,0 +1,22 @@
+.ibox {
+ background-color: #fff;
+ padding: 0;
+ margin-bottom: 30px;
+}
+
+.ibox .ibox-title {
+ padding: 5px;
+ border-bottom: 1px solid #e7eaec;
+ border-top: 2px solid #e7eaec;
+}
+
+.ibox .ibox-title h5 {
+ display: inline-block;
+ font-size: 1.1em;
+ padding: 5px;
+ margin: 0;
+}
+
+.ibox .ibox-content {
+ padding: 15px;
+}
\ No newline at end of file