From a09a4d6b5136b20b0075ceccde8bf7ea281caf38 Mon Sep 17 00:00:00 2001 From: Travis Ralston Date: Fri, 15 Dec 2017 21:22:34 -0700 Subject: [PATCH] Styling for widgets (mostly) --- web/app/app.module.ts | 4 +- .../integration-bag.component.html | 9 ++++ .../integration-bag.component.scss | 37 +++++++++++++++ .../integration-bag.component.ts | 25 +++++++++++ .../integration/integration.component.html | 23 ++-------- .../integration/integration.component.scss | 45 ++++++++----------- web/app/integration/integration.component.ts | 31 +++---------- web/app/riot/riot-home/home.component.html | 8 +--- web/app/riot/riot-home/home.component.ts | 13 ++---- web/app/riot/riot.component.ts | 1 - web/style/app.scss | 1 + web/style/components/ibox.scss | 22 +++++++++ 12 files changed, 131 insertions(+), 88 deletions(-) create mode 100644 web/app/integration-bag/integration-bag.component.html create mode 100644 web/app/integration-bag/integration-bag.component.scss create mode 100644 web/app/integration-bag/integration-bag.component.ts create mode 100644 web/style/components/ibox.scss 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 @@
-

{{ 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