asonix/matrix-dimension
1
0
Fork 0
Code Issues Pull requests Projects Releases Wiki Activity

Styling for widgets (mostly)

Browse source
This commit is contained in:
Travis Ralston 2017-12-15 21:22:34 -07:00
parent ebe0048710
commit a09a4d6b51
12 changed files with 131 additions and 88 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
web/app/app.module.ts
View file

@ -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,

9
web/app/integration-bag/integration-bag.component.html Normal file
View file

@ -0,0 +1,9 @@
<div class="integration-bag">
<!--<my-integration *ngFor="let integration of integrations"-->
<!--[integration]="integration" (selected)="onClick(integration)"></my-integration>-->
<div class="integration" *ngFor="let integration of integrations">
<img class="integration-avatar" [src]="getSafeUrl(integration.avatar)"/>
<div class="integration-name">{{ integration.name }}</div>
<div class="integration-description">{{ integration.about }}</div>
</div>
</div>

37
web/app/integration-bag/integration-bag.component.scss Normal file
View file

@ -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;
}

25
web/app/integration-bag/integration-bag.component.ts Normal file
View file

@ -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<Integration> = new EventEmitter<Integration>();
constructor(private sanitizer: DomSanitizer) {
}
public getSafeUrl(url: string): SafeResourceUrl {
return this.sanitizer.bypassSecurityTrustResourceUrl(url);
}
public onClick(integration: Integration) {
this.integrationClicked.emit(integration);
}
}

23
web/app/integration/integration.component.html
View file

@ -1,22 +1,5 @@
<div class="integration">
<img [src]="integration.avatar" class="avatar">
<div class="title">
<b>{{ integration.name }}</b>
<div style="display: flex;">
<div class="switch" *ngIf="integration.type !== 'bridge' && integration.type !== 'widget'">
<ui-switch [checked]="integration.isEnabled" size="small" [disabled]="integration.isBroken"
(change)="update()"></ui-switch>
</div>
<div class="switch" *ngIf="canHaveErrors(integration) && !integration.isEnabled">
<i class="fa fa-warning text-warning" ngbTooltip="{{ integration.bridgeError }}"></i>
</div>
<div class="toolbar">
<i class="fa fa-question-circle text-info" ngbTooltip="{{integration.about}}"
*ngIf="integration.about"></i>
<i class="fa fa-cog text-info config-icon" (click)="configureIntegration()"
*ngIf="integration.isEnabled && integration.hasConfig"></i>
</div>
</div>
</div>
<div style="clear: both;"></div>
<img class="integration-avatar" [src]="getSafeUrl(integration.avatar)"/>
<div class="integration-name">{{ integration.name }}</div>
<div class="integration-description">{{ integration.about }}</div>
</div>

45
web/app/integration/integration.component.scss
View file

@ -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;
}

31
web/app/integration/integration.component.ts
View file

@ -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<any> = new EventEmitter();
@Output() selected: EventEmitter<any> = new EventEmitter<any>();
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);
}
}

8
web/app/riot/riot-home/home.component.html
View file

@ -35,14 +35,10 @@
<div *ngFor="let category of getCategories()">
<div class="ibox" *ngIf="getIntegrationsIn(category).length > 0">
<div class="ibox-title">
<h4>{{ category }}</h4>
<h5>{{ category }}</h5>
</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>
<my-integration-bag [integrations]="getIntegrationsIn(category)"></my-integration-bag>
</div>
</div>
</div>

13
web/app/riot/riot-home/home.component.ts
View file

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

1
web/app/riot/riot.component.ts
View file

@ -6,5 +6,4 @@ import { Component } from "@angular/core";
styleUrls: ["./riot.component.scss"],
})
export class RiotComponent {
}

1
web/style/app.scss
View file

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

22
web/style/components/ibox.scss Normal file
View file

@ -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;
}