Skip to content
Snippets Groups Projects
Commit 06cdeb13 authored by Kameel Zaghbour's avatar Kameel Zaghbour
Browse files

dialog layouting

parent b89e09cc
No related merge requests found
Expand all Hide whitespace changes
Inline Side-by-side
Showing
with 866 additions and 17599 deletions
package-lock.json
+ 59
− 17585
View file @ 06cdeb13
This diff is collapsed.
src/app/components/participant/participant-routing.module.ts
+ 6
− 0
View file @ 06cdeb13
......@@ -4,6 +4,7 @@ import { UserRole } from '../../models/user-roles.enum';
import { RoomParticipantPageComponent } from './room-participant-page/room-participant-page.component';
import { CommentPageComponent } from '../shared/comment-page/comment-page.component';
import { CommentAnswerComponent } from '../shared/comment-answer/comment-answer.component';
import { TagCloadComponent } from '../shared/tag-cload/tag-cload.component';
const routes: Routes = [
{
......@@ -20,6 +21,11 @@ const routes: Routes = [
path: 'room/:shortId/comment/:commentId',
component: CommentAnswerComponent,
data: { roles: [UserRole.PARTICIPANT] }
},
{
path: 'room/:shortId/tag_cloud',
component: TagCloadComponent,
data: { roles: [UserRole.PARTICIPANT] }
}
];
......
src/app/components/shared/_dialogs/cloud-configuration/cloud-configuration.component.html
+ 236
− 5
View file @ 06cdeb13
<div mat-dialog-content>
<!--questions-->
<h2 class="oldtypo-h2">{{'room-page.comments' | translate }}</h2>
<!-- <div mat-dialog-content>
<h2 class="oldtypo-h2">{{title | translate }}</h2>
<mat-divider></mat-divider>
<div fxLayout="column">
<div fxLayout="row">
<!--direct send-->
<p class="oldtypo-p">{{ 'room-page.settings-direct-send' | translate}}&nbsp;
<mat-slide-toggle
aria-labelledby="settings-direct-send"
......@@ -19,7 +17,6 @@
<div fxLayout="column">
<div fxLayout="row">
<!--comment threshold-->
<p class="oldtypo-p">{{ 'room-page.threshold' | translate}}&nbsp;
<mat-slide-toggle>
aria-labelledby="threshold"
......@@ -67,4 +64,238 @@
<div id="settings-direct-send">{{'room-page.a11y-settings-direct-send' | translate}} </div>
<div id="export-comments">{{'room-page.a11y-export-comments' | translate}} </div>
<div id="delete-all-comments">{{'room-page.a11y-delete-all-comments' | translate}} </div>
</div> -->
<div
fxLayout="row"
fxLayout.xs="column"
fxLayout.sm="column"
fxLayoutGap="15px"
>
<form [formGroup]="cloudConfigForm" fxLayout="column">
<h2>Tag Cloud Configuration</h2>
<h3>General options</h3>
<div
class="input-row"
fxLayout="row"
fxLayoutGap="20px"
fxLayout.xs="column"
>
<mat-form-field fxFlex fxLayout.xs="column">
<input
matInput
type="number"
formControlName="height"
placeholder="Height"
min="100"
max="1000"
step="10"
/>
</mat-form-field>
</div>
<div
class="input-row"
fxLayout="row"
fxLayoutGap="20px"
fxLayout.xs="column"
>
<mat-slide-toggle fxFlex formControlName="overflow"
>Overflow</mat-slide-toggle
>
<mat-slide-toggle fxFlex formControlName="randomizeAngle"
>Randomize angle</mat-slide-toggle
>
</div>
<div
class="input-row"
fxLayout="row"
fxLayoutGap="20px"
fxLayout.xs="column"
>
<mat-slide-toggle fxFlex formControlName="realignOnResize"
>Realign on resize</mat-slide-toggle
>
</div>
<div
class="input-row"
fxLayout="row"
fxLayoutGap="20px"
fxLayout.xs="column"
style="padding-top: 20px;"
>
</div>
<div
class="input-row"
fxLayout="row"
fxLayout.xs="column"
fxLayoutGap="20px"
>
<div fxFlex="48%" fxFlex.xs="100%">
<div fxLayout="row" fxLayoutGap="10px">
<mat-form-field fxFlex="80%">
<mat-label>Background</mat-label>
<input
matInput
[colorPicker]="
cloudConfigForm.get('background').value
"
(colorPickerChange)="
cloudConfigForm
.get('background')
.setValue($event)
"
formControlName="background"
/>
</mat-form-field>
<div
fxFlex="20%"
class="color-box"
[style.background]="
cloudConfigForm.get('background').value
"
></div>
</div>
</div>
<div fxFlex="50%" fxFlex.xs="100%">
<mat-label class="label-text">Delay</mat-label>
<mat-slider
min="0"
max="1000"
step="50"
formControlName="delay"
[thumbLabel]="true"
></mat-slider>
</div>
</div>
<h3>Zoom on hover options</h3>
<div formGroupName="zoomOnHover">
<div
class="input-row"
fxLayout="row"
fxLayout.xs="column"
fxLayoutGap="20px"
>
<div fxFlex="48%" fxFlex.xs="100%">
<div fxLayout="row" fxLayoutGap="10px">
<mat-form-field fxFlex="80%">
<mat-label>Color</mat-label>
<input
matInput
[colorPicker]="
cloudConfigForm.get('zoomOnHover').get('color').value
"
(colorPickerChange)="
cloudConfigForm
.get('zoomOnHover')
.get('color')
.setValue($event)
"
formControlName="color"
/>
</mat-form-field>
<div
fxFlex="20%"
class="color-box"
[style.background]="
cloudConfigForm.get('zoomOnHover').get('color').value
"
></div>
</div>
</div>
<div fxFlex="50%" fxFlex.xs="100%">
<mat-label class="label-text">Scale</mat-label>
<mat-slider
min="1"
max="2"
step="0.01"
formControlName="scale"
[thumbLabel]="true"
></mat-slider>
</div>
</div>
<div
class="input-row"
fxLayout="row"
fxLayout.xs="column"
fxLayoutGap="20px"
>
<div fxFlex="50%" fxFlex.xs="100%">
<mat-label class="label-text">Time</mat-label>
<mat-slider
min="0"
max="2"
step="0.1"
formControlName="transitionTime"
[thumbLabel]="true"
></mat-slider>
</div>
<div fxFlex="50%" fxFlex.xs="100%">
<mat-label class="label-text">Delay</mat-label>
<mat-slider
min="0"
max="2"
step="0.1"
formControlName="delay"
[thumbLabel]="true"
></mat-slider>
</div>
</div>
</div>
<div
class="input-row"
fxLayout="row"
fxLayoutGap="20px"
fxLayout.xs="column"
>
</div>
<!-- <h2>Style</h2> -->
<!-- <div
class="input-row"
fxLayout="row"
fxLayoutGap="20px"
fxLayout.xs="column"
>
<mat-slide-toggle fxFlex formControlName="customStyle"
>Use custom Stylesheet</mat-slide-toggle
>
</div> -->
<!-- <div
class="input-row"
fxLayout="row"
fxLayoutGap="20px"
fxLayout.xs="column"
>
<mat-form-field fxFlex>
<input matInput formControlName="font" placeholder="Font" />
</mat-form-field>
</div> -->
<!-- <div
class="input-row"
fxLayout="row"
fxLayoutGap="20px"
fxLayout.xs="column"
>
<mat-form-field fxFlex>
<input
matInput
formControlName="background"
placeholder="Background"
/>
</mat-form-field>
</div> -->
<br>
<div class="button-row">
<button mat-button class="secondary">cancel</button>
<button mat-button class="primary">Save</button>
</div>
</form>
</div>
src/app/components/shared/_dialogs/cloud-configuration/cloud-configuration.component.scss
+ 75
− 0
View file @ 06cdeb13
......@@ -43,3 +43,78 @@ mat-divider {
.submit {
margin-top: 20px;
}
.color-box{
flex: 1 1 85%;
box-sizing: border-box;
height: 30px;
width: 20px;
border-radius: 50%;
margin-top: 13px;
display: block;
position: relative;
right: 40px;
}
::ng-deep .mat-slide-toggle-thumb{
background-color: var(--secondary);
}
::ng-deep .mat-slide-toggle.mat-checked .mat-slide-toggle-bar{
background-color: var(--primary);
}
::ng-deep .mat-slide-toggle.mat-checked .mat-slide-toggle-thumb{
background-color: var(--primary);
}
::ng-deep .mat-form-field-label {
color: var(--on-surface)!important;
}
::ng-deep .mat-form-field-underline {
background-color: var(--on-surface)!important;
}
::ng-deep .mat-form-field-ripple {
background-color: var(--on-surface)!important;
}
::ng-deep .mat-select-arrow-wrapper .mat-select-arrow {
color: var(--on-surface);
}
::ng-deep .mat-select-value-text {
color: var(--on-surface);
}
::ng-deep .mat-primary .mat-option.mat-selected:not(.mat-option-disabled) {
color: var(--primary);
}
::ng-deep .mat-accent .mat-slider-track-fill,
::ng-deep .mat-accent .mat-slider-thumb,
::ng-deep .mat-accent .mat-slider-thumb-label{
background-color: var(--primary);
}
::ng-deep .mat-accent .mat-slider-thumb-label-text{
color: var(--dialog);
}
::ng-deep .primary{
color: var(--dialog);;
background-color: var(--primary);
}
::ng-deep .secondary{
color: var(--dialog);;
background-color: var(--secondary);
margin-right: 20px;
}
.button-row{
margin: 0 0 0 auto;
}
\ No newline at end of file
src/app/components/shared/_dialogs/cloud-configuration/cloud-configuration.component.ts
+ 112
− 7
View file @ 06cdeb13
import { Component, OnInit } from '@angular/core';
import { MatDialogRef } from "@angular/material/dialog";
import { MatButtonModule } from '@angular/material/button';
import { Component, OnInit, ViewChild } from '@angular/core';
import { FormBuilder, FormGroup } from '@angular/forms';
import { MatSnackBar } from '@angular/material/snack-bar';
import { CloudData, CloudOptions, ZoomOnHoverOptions } from 'angular-tag-cloud-module';
import { Observable, of } from 'rxjs';
@Component({
selector: 'app-cloud-configuration',
templateUrl: './cloud-configuration.component.html',
styleUrls: ['./cloud-configuration.component.scss']
styleUrls: ['./cloud-configuration.component.scss'],
})
export class CloudConfigurationComponent implements OnInit {
constructor(public dialogRef: MatDialogRef<CloudConfigurationComponent>) { }
cloudDataForm: FormGroup;
cloudConfigForm: FormGroup;
data: CloudData[] = [];
title: String = "Cloud Configuration"
height: number = 400;
overflow: boolean = false;
realignonResize: boolean = true;
randomizeAngle: boolean = true;
background: string = "#333";
delay: number = 1;
hoverScale: number = 2;
hoverTransitionTime: number = 1;
hoverDelay: number = 1;
hoverColor: string = "lightseagreen";
defaultCloudOptions: CloudOptions = {
width: 0.98,
height: 500,
overflow: false,
strict: false,
realignOnResize: true,
randomizeAngle: true,
zoomOnHover: {
scale: 1.2,
transitionTime: 0.6,
delay: 0.1,
color: '#33bb33',
},
step: 5,
log: 'debug',
delay: 50,
};
exampleDataOptions = {
amount: 40,
rotate: true,
data: JSON.stringify(this.data, null, 2),
};
constructor(private fb: FormBuilder, private snackBar: MatSnackBar) {}
ngOnInit() {
this.cloudDataForm = this.fb.group({
...this.exampleDataOptions,
});
this.cloudConfigForm = this.fb.group({
...this.defaultCloudOptions,
zoomOnHover: this.fb.group(this.defaultCloudOptions.zoomOnHover),
customStyle: true,
background: '#2C2C2C',
font: 'italic bold 14px "Indie Flower", cursive',
});
ngOnInit(): void {
}
}
log(eventType: string, e?: CloudData) {
console.log(eventType, e);
}
renderJsonData() {
try {
this.data = JSON.parse(this.cloudDataForm.value.data);
} catch (error) {
this.snackBar.open(error, 'Ok, got it!', {
duration: 2500,
});
}
}
reDraw() {
let data: CloudData[] = [];
try {
data = JSON.parse(this.cloudDataForm.value.data);
} catch (error) {
this.snackBar.open(
'Error parsing JSON. Fall back to random data.' + error,
'Ok, got it!',
{
duration: 3000,
},
);
}
const changedData$: Observable<CloudData[]> = of(data);
changedData$.subscribe((res) => this.setData(res));
}
private setData(data: CloudData[]) {
this.data = data;
this.cloudDataForm.get('data').setValue(JSON.stringify(this.data, null, 2));
}
public cancel(){
}
public save (){
}
}
\ No newline at end of file
src/app/components/shared/shared.module.ts
+ 8
− 2
View file @ 06cdeb13
......@@ -29,6 +29,9 @@ import { QRCodeModule } from 'angularx-qrcode';
import { MotdDialogComponent } from './_dialogs/motd-dialog/motd-dialog.component';
import { MotdMessageComponent } from './_dialogs/motd-dialog/motd-message/motd-message.component';
import {CloudConfigurationComponent} from "./_dialogs/cloud-configuration/cloud-configuration.component";
import { TagCloudModule } from 'angular-tag-cloud-module';
import { TagCloadComponent } from './tag-cload/tag-cload.component';
import { ColorPickerModule } from 'ngx-color-picker';
@NgModule({
imports: [
......@@ -38,7 +41,9 @@ import {CloudConfigurationComponent} from "./_dialogs/cloud-configuration/cloud-
MatRippleModule,
ArsModule,
MarkdownModule,
QRCodeModule
QRCodeModule,
TagCloudModule,
ColorPickerModule
],
declarations: [
RoomJoinComponent,
......@@ -63,7 +68,8 @@ import {CloudConfigurationComponent} from "./_dialogs/cloud-configuration/cloud-
RemoveFromHistoryComponent,
CommentAnswerComponent,
MotdDialogComponent,
MotdMessageComponent
MotdMessageComponent,
TagCloadComponent
],
exports: [
RoomJoinComponent,
......
src/app/components/shared/tag-cload/tag-cload.component.html 0 → 100644
+ 1
− 0
View file @ 06cdeb13
<h1>Tag Cloud</h1>
\ No newline at end of file
src/app/components/shared/tag-cload/tag-cload.component.scss 0 → 100644
+ 0
− 0
View file @ 06cdeb13
src/app/components/shared/tag-cload/tag-cload.component.spec.ts 0 → 100644
+ 25
− 0
View file @ 06cdeb13
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { TagCloadComponent } from './tag-cload.component';
describe('TagCloadComponent', () => {
let component: TagCloadComponent;
let fixture: ComponentFixture<TagCloadComponent>;
beforeEach(async(() => {
TestBed.configureTestingModule({
declarations: [ TagCloadComponent ]
})
.compileComponents();
}));
beforeEach(() => {
fixture = TestBed.createComponent(TagCloadComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});
src/app/components/shared/tag-cload/tag-cload.component.ts 0 → 100644
+ 342
− 0
View file @ 06cdeb13
import { Component, OnInit } from '@angular/core';
import { CloudData, CloudOptions, ZoomOnHoverOptions } from 'angular-tag-cloud-module';
@Component({
selector: 'app-tag-cload',
template: `<div>
<mat-checkbox [(ngModel)]="options.randomizeAngle" class="example-margin">Random Angle</mat-checkbox>
<angular-tag-cloud
[data]="exampleData"
[width]="options.width"
[height]="options.height"
[randomizeAngle]= "options.randomizeAngle"
[overflow]="options.overflow">
</angular-tag-cloud>
</div>`,
styleUrls: ['./tag-cload.component.scss']
})
export class TagCloadComponent implements OnInit {
public exampleData = [
{
"text": "w9",
"weight": 9,
"rotate": -18,
"tooltip": "tooltip w9"
},
{
"text": "w7",
"weight": 7,
"rotate": 0,
"tooltip": "tooltip w7"
},
{
"text": "w10-link-ext",
"weight": 10,
"link": "http://example.org",
"external": true,
"rotate": -13,
"tooltip": "tooltip w10-link-ext"
},
{
"text": "w2-color-link",
"weight": 2,
"color": "#1ea15",
"link": "http://example.org",
"rotate": 16,
"tooltip": "tooltip w2-color-link"
},
{
"text": "w9",
"weight": 9,
"rotate": -17,
"tooltip": "tooltip w9"
},
{
"text": "w3-link-ext",
"weight": 3,
"link": "http://example.org",
"external": true,
"rotate": 0,
"tooltip": "tooltip w3-link-ext"
},
{
"text": "w2",
"weight": 2,
"rotate": 0,
"tooltip": "tooltip w2"
},
{
"text": "w1-link-ext",
"weight": 1,
"link": "http://example.org",
"external": true,
"rotate": 0,
"tooltip": "tooltip w1-link-ext"
},
{
"text": "w2-color-link-ext",
"weight": 2,
"color": "#53adbf",
"link": "http://example.org",
"external": true,
"rotate": 0,
"tooltip": "tooltip w2-color-link-ext"
},
{
"text": "w6-color-link-ext",
"weight": 6,
"color": "#aff0ba",
"link": "http://example.org",
"external": true,
"rotate": 0,
"tooltip": "tooltip w6-color-link-ext"
},
{
"text": "w3-color-link",
"weight": 3,
"color": "#7e8a34",
"link": "http://example.org",
"rotate": -12,
"tooltip": "tooltip w3-color-link"
},
{
"text": "w4",
"weight": 4,
"rotate": 0,
"tooltip": "tooltip w4"
},
{
"text": "w3-color",
"weight": 3,
"color": "#f3ff87",
"rotate": 0,
"tooltip": "tooltip w3-color"
},
{
"text": "w9",
"weight": 9,
"rotate": 2,
"tooltip": "tooltip w9"
},
{
"text": "w1-color",
"weight": 1,
"color": "#7c2789",
"rotate": 16,
"tooltip": "tooltip w1-color"
},
{
"text": "w10-color-link-ext",
"weight": 10,
"color": "#64dc80",
"link": "http://example.org",
"external": true,
"rotate": 0,
"tooltip": "tooltip w10-color-link-ext"
},
{
"text": "w3",
"weight": 3,
"rotate": 0,
"tooltip": "tooltip w3"
},
{
"text": "w4",
"weight": 4,
"rotate": 0,
"tooltip": "tooltip w4"
},
{
"text": "w1-link-ext",
"weight": 1,
"link": "http://example.org",
"external": true,
"rotate": 17,
"tooltip": "tooltip w1-link-ext"
},
{
"text": "w5-color-link",
"weight": 5,
"color": "#9b9444",
"link": "http://example.org",
"rotate": 0,
"tooltip": "tooltip w5-color-link"
},
{
"text": "w10-color-link-ext",
"weight": 10,
"color": "#f7c39a",
"link": "http://example.org",
"external": true,
"rotate": 16,
"tooltip": "tooltip w10-color-link-ext"
},
{
"text": "w4-link",
"weight": 4,
"link": "http://example.org",
"rotate": 0,
"tooltip": "tooltip w4-link"
},
{
"text": "w7-link",
"weight": 7,
"link": "http://example.org",
"rotate": 0,
"tooltip": "tooltip w7-link"
},
{
"text": "w2",
"weight": 2,
"rotate": -2,
"tooltip": "tooltip w2"
},
{
"text": "w8-color-link",
"weight": 8,
"color": "#e6b63f",
"link": "http://example.org",
"rotate": 2,
"tooltip": "tooltip w8-color-link"
},
{
"text": "w8-color-link-ext",
"weight": 8,
"color": "#d7e6fc",
"link": "http://example.org",
"external": true,
"rotate": 0,
"tooltip": "tooltip w8-color-link-ext"
},
{
"text": "w5",
"weight": 5,
"rotate": 12,
"tooltip": "tooltip w5"
},
{
"text": "w7-color-link",
"weight": 7,
"color": "#975717",
"link": "http://example.org",
"rotate": 0,
"tooltip": "tooltip w7-color-link"
},
{
"text": "w8-color-link-ext",
"weight": 8,
"color": "#25d1be",
"link": "http://example.org",
"external": true,
"rotate": -16,
"tooltip": "tooltip w8-color-link-ext"
},
{
"text": "w9",
"weight": 9,
"rotate": 0,
"tooltip": "tooltip w9"
},
{
"text": "w3-color-link-ext",
"weight": 3,
"color": "#9d7e63",
"link": "http://example.org",
"external": true,
"rotate": 0,
"tooltip": "tooltip w3-color-link-ext"
},
{
"text": "w9-color-link-ext",
"weight": 9,
"color": "#16093e",
"link": "http://example.org",
"external": true,
"rotate": 0,
"tooltip": "tooltip w9-color-link-ext"
},
{
"text": "w3-color",
"weight": 3,
"color": "#3674cd",
"rotate": 0,
"tooltip": "tooltip w3-color"
},
{
"text": "w10-color-link",
"weight": 10,
"color": "#fcd7f1",
"link": "http://example.org",
"rotate": 0,
"tooltip": "tooltip w10-color-link"
},
{
"text": "w4-color-link-ext",
"weight": 4,
"color": "#a0976a",
"link": "http://example.org",
"external": true,
"rotate": 0,
"tooltip": "tooltip w4-color-link-ext"
},
{
"text": "w1-color",
"weight": 1,
"color": "#120e75",
"rotate": 0,
"tooltip": "tooltip w1-color"
},
{
"text": "w8-color",
"weight": 8,
"color": "#58fb55",
"rotate": 0,
"tooltip": "tooltip w8-color"
},
{
"text": "w3-color-link-ext",
"weight": 3,
"color": "#354f70",
"link": "http://example.org",
"external": true,
"rotate": 0,
"tooltip": "tooltip w3-color-link-ext"
},
{
"text": "w3",
"weight": 3,
"rotate": 0,
"tooltip": "tooltip w3"
},
{
"text": "w8-color",
"weight": 8,
"color": "#d31e8f",
"rotate": 0,
"tooltip": "tooltip w8-color"
}
];
options: CloudOptions = {
// if width is between 0 and 1 it will be set to the width of the upper element multiplied by the value
width: 1000,
// if height is between 0 and 1 it will be set to the height of the upper element multiplied by the value
height: 500,
overflow: false,
randomizeAngle: false
};
zoomOnHoverOptions: ZoomOnHoverOptions = {
scale: 2,
transitionTime: 2,
color: "#123456"
}
constructor() { }
ngOnInit(): void {
}
}
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment