From 11b5bdcecd7dff501b0fad83d105802fce181ec8 Mon Sep 17 00:00:00 2001 From: Lukas Haase <lukas.haase@mni.thm.de> Date: Tue, 14 Jan 2020 12:43:31 +0100 Subject: [PATCH] Rework Ars-Lib Components --- projects/ars/src/lib/ars.module.ts | 29 ++--- .../content/menu/ButtonBase.directive.ts | 73 +++++++++++++ .../content/menu/ButtonWrapper.directive.ts | 81 ++++++++++++++ .../content/menu/MenuWrapper.directive.ts | 23 ++++ .../ars-slider-comb.component.html | 7 -- .../ars-slider-comb.component.scss | 24 ----- .../ars-slider-comb.component.ts | 29 ----- .../io/slider/ars-slider.directive.ts | 72 ------------- .../flex-align.component.html} | 3 +- .../flex-align.component.scss} | 6 +- .../flex-align/flex-align.component.spec.ts} | 12 +-- .../base/flex-align/flex-align.component.ts | 45 ++++++++ .../layout/base/resp/resp.component.ts | 32 ------ .../screen.component.html} | 0 .../screen.component.scss} | 1 + .../screen.component.spec.ts} | 2 +- .../screen.component.ts} | 4 +- .../material-btn/material-btn.component.html | 1 + .../material-btn/material-btn.component.scss | 39 +++++++ .../material-btn.component.spec.ts | 25 +++++ .../material-btn/material-btn.component.ts | 15 +++ .../layout/base-test/base-test.component.html | 101 ++++++++++++++++++ .../layout/base-test/base-test.component.scss | 35 ++++++ .../base-test/base-test.component.spec.ts} | 12 +-- .../layout/base-test/base-test.component.ts | 17 +++ .../frame-test/frame-test.component.html | 4 +- .../ars/src/lib/models/debug/StyleDebug.ts | 24 +++++ projects/ars/src/lib/style/style.const.ts | 8 +- 28 files changed, 525 insertions(+), 199 deletions(-) create mode 100644 projects/ars/src/lib/components/content/menu/ButtonBase.directive.ts create mode 100644 projects/ars/src/lib/components/content/menu/ButtonWrapper.directive.ts create mode 100644 projects/ars/src/lib/components/content/menu/MenuWrapper.directive.ts delete mode 100644 projects/ars/src/lib/components/io/slider/ars-slider-comb/ars-slider-comb.component.html delete mode 100644 projects/ars/src/lib/components/io/slider/ars-slider-comb/ars-slider-comb.component.scss delete mode 100644 projects/ars/src/lib/components/io/slider/ars-slider-comb/ars-slider-comb.component.ts delete mode 100644 projects/ars/src/lib/components/io/slider/ars-slider.directive.ts rename projects/ars/src/lib/components/layout/base/{resp/resp.component.html => flex-align/flex-align.component.html} (74%) rename projects/ars/src/lib/components/layout/base/{resp/resp.component.scss => flex-align/flex-align.component.scss} (54%) rename projects/ars/src/lib/components/{io/slider/ars-slider-comb/ars-slider-comb.component.spec.ts => layout/base/flex-align/flex-align.component.spec.ts} (52%) create mode 100644 projects/ars/src/lib/components/layout/base/flex-align/flex-align.component.ts delete mode 100644 projects/ars/src/lib/components/layout/base/resp/resp.component.ts rename projects/ars/src/lib/components/layout/base/{full-screen-overlay/full-screen-overlay.component.html => screen/screen.component.html} (100%) rename projects/ars/src/lib/components/layout/base/{full-screen-overlay/full-screen-overlay.component.scss => screen/screen.component.scss} (86%) rename projects/ars/src/lib/components/layout/base/{full-screen-overlay/full-screen-overlay.component.spec.ts => screen/screen.component.spec.ts} (89%) rename projects/ars/src/lib/components/layout/base/{full-screen-overlay/full-screen-overlay.component.ts => screen/screen.component.ts} (64%) create mode 100644 projects/ars/src/lib/components/style/menu/material-btn/material-btn.component.html create mode 100644 projects/ars/src/lib/components/style/menu/material-btn/material-btn.component.scss create mode 100644 projects/ars/src/lib/components/style/menu/material-btn/material-btn.component.spec.ts create mode 100644 projects/ars/src/lib/components/style/menu/material-btn/material-btn.component.ts create mode 100644 projects/ars/src/lib/components/test/layout/base-test/base-test.component.html create mode 100644 projects/ars/src/lib/components/test/layout/base-test/base-test.component.scss rename projects/ars/src/lib/components/{layout/base/resp/resp.component.spec.ts => test/layout/base-test/base-test.component.spec.ts} (55%) create mode 100644 projects/ars/src/lib/components/test/layout/base-test/base-test.component.ts create mode 100644 projects/ars/src/lib/models/debug/StyleDebug.ts diff --git a/projects/ars/src/lib/ars.module.ts b/projects/ars/src/lib/ars.module.ts index 75eda76c5..8a834752b 100644 --- a/projects/ars/src/lib/ars.module.ts +++ b/projects/ars/src/lib/ars.module.ts @@ -1,34 +1,40 @@ import { NgModule } from '@angular/core'; import { ArsComponent } from './ars.component'; -import { ArsSliderDirective } from './components/io/slider/ars-slider.directive'; -import { ArsSliderCombComponent } from './components/io/slider/ars-slider-comb/ars-slider-comb.component'; import { MatButtonModule, MatIconModule } from '@angular/material'; -import { FullScreenOverlayComponent } from './components/layout/base/full-screen-overlay/full-screen-overlay.component'; +import { FullScreenOverlayComponent } from './components/layout/base/screen/screen.component'; import { RowComponent } from './components/layout/frame/row/row.component'; import { ColComponent } from './components/layout/frame/col/col.component'; import { FillComponent } from './components/layout/frame/fill/fill.component'; import { WrapperDirective } from './components/layout/frame/wrp/WrapperDirective'; import { FrameTestComponent } from './components/test/layout/frame/frame-test/frame-test.component'; -import { RespComponent } from './components/layout/base/resp/resp.component'; import { ScrollDirective } from './components/layout/base/scroll/ScrollDirective'; import { MaterialTypographyComponent } from './components/style/typography/material-typography/material-typography.component'; import { ThemeTestComponent } from './components/test/theme-test/theme-test.component'; +import { BaseTestComponent } from './components/test/layout/base-test/base-test.component'; +import { FlexAlignComponent } from './components/layout/base/flex-align/flex-align.component'; +import { MenuWrapperDirective } from './components/content/menu/MenuWrapper.directive'; +import { ButtonWrapperDirective } from './components/content/menu/ButtonWrapper.directive'; +import { ButtonBaseDirective } from './components/content/menu/ButtonBase.directive'; +import { MaterialBtnComponent } from './components/style/menu/material-btn/material-btn.component'; @NgModule({ declarations: [ ArsComponent, - ArsSliderDirective, - ArsSliderCombComponent, FullScreenOverlayComponent, RowComponent, ColComponent, FillComponent, WrapperDirective, FrameTestComponent, - RespComponent, ScrollDirective, MaterialTypographyComponent, - ThemeTestComponent + ThemeTestComponent, + BaseTestComponent, + FlexAlignComponent, + MenuWrapperDirective, + ButtonWrapperDirective, + ButtonBaseDirective, + MaterialBtnComponent ], imports: [ MatIconModule, @@ -36,18 +42,17 @@ import { ThemeTestComponent } from './components/test/theme-test/theme-test.comp ], exports: [ ArsComponent, - ArsSliderDirective, - ArsSliderCombComponent, FullScreenOverlayComponent, WrapperDirective, FrameTestComponent, ScrollDirective, MaterialTypographyComponent, RowComponent, - RespComponent, ColComponent, FillComponent, - ThemeTestComponent + ThemeTestComponent, + BaseTestComponent, + MenuWrapperDirective ] }) export class ArsModule { } diff --git a/projects/ars/src/lib/components/content/menu/ButtonBase.directive.ts b/projects/ars/src/lib/components/content/menu/ButtonBase.directive.ts new file mode 100644 index 000000000..08394c6af --- /dev/null +++ b/projects/ars/src/lib/components/content/menu/ButtonBase.directive.ts @@ -0,0 +1,73 @@ +import { AfterViewInit, Directive, ElementRef, OnInit, Renderer2 } from '@angular/core'; + + +@Directive({ + selector: '[ars-btn]' +}) +export class ButtonBaseDirective implements OnInit, AfterViewInit { + + private direction: string; + private left: number; + private right: number; + private top: number; + private bottom: number; + + constructor(private ref: ElementRef, private render: Renderer2) { + } + + ngOnInit() { + } + + ngAfterViewInit() { + } + + setDirection(direction: string) { + this.direction = direction; + } + + updateDirection() { + if (this.direction === 'row') { + this.setStyle('height', '100%'); + } else if (this.direction === 'col') { + this.setStyle('width', '100%'); + } else { + if (typeof this.direction === 'undefined') { + console.error('undefined direction'); + } else { + console.error('unknown direction: ' + this.direction); + } + } + } + + setStyle(style: string, value: any) { + this.render.setStyle(this.ref.nativeElement, style, value); + } + + setPaddingLeft(left: number) { + this.left = left; + } + + setPaddingRight(right: number) { + this.right = right; + } + + setPaddingTop(top: number) { + this.top = top; + } + + setPaddingBottom(bottom: number) { + this.bottom = bottom; + } + + setPadding(left: number, right: number, top: number, bottom: number) { + this.left = left; + this.right = right; + this.top = top; + this.bottom = bottom; + } + + updateStyle() { + this.setStyle('padding', this.top + 'px ' + this.right + 'px ' + this.bottom + 'px ' + this.left + 'px'); + } + +} diff --git a/projects/ars/src/lib/components/content/menu/ButtonWrapper.directive.ts b/projects/ars/src/lib/components/content/menu/ButtonWrapper.directive.ts new file mode 100644 index 000000000..e377f9918 --- /dev/null +++ b/projects/ars/src/lib/components/content/menu/ButtonWrapper.directive.ts @@ -0,0 +1,81 @@ +import { AfterViewInit, ContentChildren, Directive, ElementRef, Input, OnInit, QueryList, Renderer2 } from '@angular/core'; +import { ButtonBaseDirective } from './ButtonBase.directive'; +import { FrameType } from '../../layout/frame/FrameType'; + + +@Directive({ + selector: '[ars-btn-wrp]' +}) +export class ButtonWrapperDirective implements OnInit, AfterViewInit { + + @Input() xs: number; + @Input() ys: number; + @Input() xe: number; + @Input() ye: number; + + @Input() xp = 0; + @Input() yp = 0; + + @Input() extra: boolean; + @Input() extraStart: boolean; + @Input() extraEnd: boolean; + + @ContentChildren(ButtonBaseDirective, { descendants: false }) btn: QueryList<ButtonBaseDirective>; + + constructor(private ref: ElementRef, private render: Renderer2, private ft: FrameType) { + } + + ngOnInit() { + if (typeof this.xs === 'undefined') { + this.xs = this.xp; + } + if (typeof this.ys === 'undefined') { + this.ys = this.yp; + } + if (typeof this.xe === 'undefined') { + this.xe = this.xp; + } + if (typeof this.ye === 'undefined') { + this.ye = this.yp; + } + if (this.extra) { + this.extraStart = true; + this.extraEnd = true; + } + } + + ngAfterViewInit() { + + // init direction of all buttons + // when btn-wrp is col => menu must be row => horizontal-menu => all buttons fill height + // when btn-wrp is row => menu must be col => vertical-menu => all buttons fill width + this.btn.forEach(e => e.setDirection(this.ft.getOppositeFrameType())); + + // update direction + this.btn.forEach(e => e.updateDirection()); + + // init padding for each button + if (this.ft.isCol()) { + this.btn.forEach(e => e.setPadding(this.xs / 2, this.xe / 2, 0, 0)); + if (this.extraStart) { + this.btn.first.setPaddingLeft(this.xs); + } + if (this.extraEnd) { + this.btn.last.setPaddingRight(this.xe); + } + } else { + this.btn.forEach(e => e.setPadding(this.xs / 2, this.xe / 2, this.ys / 2, this.ye / 2)); + if (this.extraStart) { + this.btn.first.setPaddingTop(this.ys); + } + if (this.extraEnd) { + this.btn.last.setPaddingBottom(this.ye); + } + } + + // render style for each button + this.btn.forEach(e => e.updateStyle()); + + } + +} diff --git a/projects/ars/src/lib/components/content/menu/MenuWrapper.directive.ts b/projects/ars/src/lib/components/content/menu/MenuWrapper.directive.ts new file mode 100644 index 000000000..79a0bf74b --- /dev/null +++ b/projects/ars/src/lib/components/content/menu/MenuWrapper.directive.ts @@ -0,0 +1,23 @@ +import { AfterViewInit, Directive, ElementRef, OnInit, Renderer2 } from '@angular/core'; +import { FrameType } from '../../layout/frame/FrameType'; +import { WrapperDirective } from '../../layout/frame/wrp/WrapperDirective'; + + +@Directive({ + selector: '[ars-menu]' +}) +export class MenuWrapperDirective extends WrapperDirective implements OnInit, AfterViewInit { + + constructor(ref: ElementRef, render: Renderer2, private ft: FrameType) { + super(ref, render); + } + + ngOnInit() { + super.ngOnInit(); + } + + ngAfterViewInit() { + super.ngAfterViewInit(); + } + +} diff --git a/projects/ars/src/lib/components/io/slider/ars-slider-comb/ars-slider-comb.component.html b/projects/ars/src/lib/components/io/slider/ars-slider-comb/ars-slider-comb.component.html deleted file mode 100644 index fd4dfa0cd..000000000 --- a/projects/ars/src/lib/components/io/slider/ars-slider-comb/ars-slider-comb.component.html +++ /dev/null @@ -1,7 +0,0 @@ - -<ng-container> - <mat-icon (click)="slider.prev();">{{leftIcon}}</mat-icon> - <ng-content> - </ng-content> - <mat-icon (click)="slider.next();">{{rightIcon}}</mat-icon> -</ng-container> diff --git a/projects/ars/src/lib/components/io/slider/ars-slider-comb/ars-slider-comb.component.scss b/projects/ars/src/lib/components/io/slider/ars-slider-comb/ars-slider-comb.component.scss deleted file mode 100644 index 21286c2c5..000000000 --- a/projects/ars/src/lib/components/io/slider/ars-slider-comb/ars-slider-comb.component.scss +++ /dev/null @@ -1,24 +0,0 @@ - -:host{ - width:100%; - height:48px; - display:flex; - justify-content:space-between; - flex-direction:row; -} - -mat-icon{ - padding:12px 5px; - margin:0; - display:flex; - float:left; - flex-shrink:0; - cursor:pointer; - -webkit-touch-callout:none; - -webkit-user-select:none; - -moz-user-select:none; - -ms-user-select:none; - user-select:none; -} - - diff --git a/projects/ars/src/lib/components/io/slider/ars-slider-comb/ars-slider-comb.component.ts b/projects/ars/src/lib/components/io/slider/ars-slider-comb/ars-slider-comb.component.ts deleted file mode 100644 index de76df8b1..000000000 --- a/projects/ars/src/lib/components/io/slider/ars-slider-comb/ars-slider-comb.component.ts +++ /dev/null @@ -1,29 +0,0 @@ -import { AfterViewInit, Component, ContentChild, ElementRef, Input, OnInit, Renderer2 } from '@angular/core'; -import { ArsSliderDirective } from '../ars-slider.directive'; - -@Component({ - selector: 'ars-slider-comb', - templateUrl: './ars-slider-comb.component.html', - styleUrls: ['./ars-slider-comb.component.scss'] -}) -export class ArsSliderCombComponent implements OnInit, AfterViewInit { - - @Input() width: number; - @Input() leftIcon = 'keyboard_arrow_left'; - @Input() rightIcon = 'keyboard_arrow_right'; - @ContentChild(ArsSliderDirective) slider: ArsSliderDirective; - - constructor(private ref: ElementRef, private render: Renderer2) { - } - - ngOnInit() { - } - - ngAfterViewInit() { - this.slider.setWidth(this.width - 68); - if (this.width) { - this.render.setStyle(this.ref.nativeElement, 'width', this.width + 'px'); - } - } - -} diff --git a/projects/ars/src/lib/components/io/slider/ars-slider.directive.ts b/projects/ars/src/lib/components/io/slider/ars-slider.directive.ts deleted file mode 100644 index 1e7b1524a..000000000 --- a/projects/ars/src/lib/components/io/slider/ars-slider.directive.ts +++ /dev/null @@ -1,72 +0,0 @@ -import { AfterViewInit, Directive, Input, OnInit, Renderer2 } from '@angular/core'; -import { MatSlider } from '@angular/material'; - - -@Directive({ - selector: '[ars-slider]' -}) -export class ArsSliderDirective implements OnInit, AfterViewInit { - - public static classes: Object = { - 'mat-slider-wrapper': '', - 'mat-slider-track-wrapper': 'rgba(127,127,127,0.5)', - 'mat-slider-track-background': '', - 'mat-slider-track-fill': 'var(--on-surface)', - 'mat-slider-ticks-container': '', - 'mat-slider-ticks': '', - 'mat-slider-focus-ring': 'var(--on-surface)', - 'mat-slider-thumb': 'var(--on-surface)', - 'mat-slider-thumb-container': 'var(--on-surface)', - 'mat-slider-thumb-label': '', - 'mat-slider-thumb-label-text': '' - }; - - @Input() width: number; - - private elem: HTMLInputElement; - - constructor(private slider: MatSlider, private render: Renderer2) { - this.elem = slider._elementRef.nativeElement; - } - - ngOnInit() { - } - - ngAfterViewInit() { - Array.from(this.elem.getElementsByTagName('*')).forEach(e => { - if (ArsSliderDirective.classes.hasOwnProperty(e.className)) { - (<HTMLElement>e).style.background = ArsSliderDirective.classes[e.className]; - } - }); - this.render.setStyle(this.elem, 'height', '48px'); - this.render.setStyle(this.elem, 'minHeight', '48px'); - this.render.setStyle(this.elem, 'maxHeight', '48px'); - this.updateWidth(); - } - - public setWidth(width: number) { - this.width = width; - this.updateWidth(); - } - - private updateWidth() { - this.render.setStyle(this.elem, 'width', this.width + 'px'); - this.render.setStyle(this.elem, 'minWidth', this.width + 'px'); - this.render.setStyle(this.elem, 'maxWidth', this.width + 'px'); - } - - public next() { - this.slider.value += this.slider.step; - if (this.slider.value > this.slider.max) { - this.slider.value = this.slider.max; - } - } - - public prev() { - this.slider.value -= this.slider.step; - if (this.slider.value < this.slider.min) { - this.slider.value = this.slider.min; - } - } - -} diff --git a/projects/ars/src/lib/components/layout/base/resp/resp.component.html b/projects/ars/src/lib/components/layout/base/flex-align/flex-align.component.html similarity index 74% rename from projects/ars/src/lib/components/layout/base/resp/resp.component.html rename to projects/ars/src/lib/components/layout/base/flex-align/flex-align.component.html index dfdbcc70d..4f0f96571 100644 --- a/projects/ars/src/lib/components/layout/base/resp/resp.component.html +++ b/projects/ars/src/lib/components/layout/base/flex-align/flex-align.component.html @@ -1,3 +1,4 @@ -<div> + +<div #col> <ng-content></ng-content> </div> diff --git a/projects/ars/src/lib/components/layout/base/resp/resp.component.scss b/projects/ars/src/lib/components/layout/base/flex-align/flex-align.component.scss similarity index 54% rename from projects/ars/src/lib/components/layout/base/resp/resp.component.scss rename to projects/ars/src/lib/components/layout/base/flex-align/flex-align.component.scss index a85dea4d3..2de23dc67 100644 --- a/projects/ars/src/lib/components/layout/base/resp/resp.component.scss +++ b/projects/ars/src/lib/components/layout/base/flex-align/flex-align.component.scss @@ -1,7 +1,7 @@ + :host{ - width:100%; - height:auto; - float:left; display:flex; + flex-grow:1; + overflow:hidden; justify-content:center; } diff --git a/projects/ars/src/lib/components/io/slider/ars-slider-comb/ars-slider-comb.component.spec.ts b/projects/ars/src/lib/components/layout/base/flex-align/flex-align.component.spec.ts similarity index 52% rename from projects/ars/src/lib/components/io/slider/ars-slider-comb/ars-slider-comb.component.spec.ts rename to projects/ars/src/lib/components/layout/base/flex-align/flex-align.component.spec.ts index fdbb2555b..215230a11 100644 --- a/projects/ars/src/lib/components/io/slider/ars-slider-comb/ars-slider-comb.component.spec.ts +++ b/projects/ars/src/lib/components/layout/base/flex-align/flex-align.component.spec.ts @@ -1,20 +1,20 @@ import { async, ComponentFixture, TestBed } from '@angular/core/testing'; -import { ArsSliderCombComponent } from './ars-slider-comb.component'; +import { FlexAlignComponent } from './flex-align.component'; -describe('ArsSliderCombComponent', () => { - let component: ArsSliderCombComponent; - let fixture: ComponentFixture<ArsSliderCombComponent>; +describe('FlexAlignComponent', () => { + let component: FlexAlignComponent; + let fixture: ComponentFixture<FlexAlignComponent>; beforeEach(async(() => { TestBed.configureTestingModule({ - declarations: [ ArsSliderCombComponent ] + declarations: [ FlexAlignComponent ] }) .compileComponents(); })); beforeEach(() => { - fixture = TestBed.createComponent(ArsSliderCombComponent); + fixture = TestBed.createComponent(FlexAlignComponent); component = fixture.componentInstance; fixture.detectChanges(); }); diff --git a/projects/ars/src/lib/components/layout/base/flex-align/flex-align.component.ts b/projects/ars/src/lib/components/layout/base/flex-align/flex-align.component.ts new file mode 100644 index 000000000..95425060e --- /dev/null +++ b/projects/ars/src/lib/components/layout/base/flex-align/flex-align.component.ts @@ -0,0 +1,45 @@ +import { AfterViewInit, Component, ElementRef, Input, OnInit, Renderer2, ViewChild } from '@angular/core'; + +@Component({ + selector: 'ars-flex-align', + templateUrl: './flex-align.component.html', + styleUrls: ['./flex-align.component.scss'] +}) +export class FlexAlignComponent implements OnInit, AfterViewInit { + + @Input() align = 'center'; + @Input() width: number; + @Input() margin: number; + @ViewChild('col') col: ElementRef; + + constructor(private ref: ElementRef, private render: Renderer2) { + } + + ngOnInit() { + } + + ngAfterViewInit() { + if (this.align === 'center') { + this.setStyle('justify-content', 'center'); + } else if (this.align === 'left') { + this.setStyle('justify-content', 'flex-start'); + } else if (this.align === 'right') { + this.setStyle('justify-content', 'flex-end'); + } else { + console.error('Unknown align argument: ' + this.align); + } + this.setStyleCol('width', this.width + 'px'); + if (typeof this.margin !== 'undefined') { + this.setStyleCol('margin', '0px ' + this.margin + 'px'); + } + } + + setStyle(style: string, value: any) { + this.render.setStyle(this.ref.nativeElement, style, value); + } + + setStyleCol(style: string, value: any) { + this.render.setStyle(this.col.nativeElement, style, value); + } + +} diff --git a/projects/ars/src/lib/components/layout/base/resp/resp.component.ts b/projects/ars/src/lib/components/layout/base/resp/resp.component.ts deleted file mode 100644 index c18f3d059..000000000 --- a/projects/ars/src/lib/components/layout/base/resp/resp.component.ts +++ /dev/null @@ -1,32 +0,0 @@ -import { AfterViewInit, Component, ElementRef, Input, OnInit, Renderer2 } from '@angular/core'; - -@Component({ - selector: 'ars-resp', - templateUrl: './resp.component.html', - styleUrls: ['./resp.component.scss'] -}) -export class RespComponent implements OnInit, AfterViewInit { - - @Input() width: number; - @Input() margin: number; - @Input() fillHeight: boolean; - - constructor(public ref: ElementRef, public render: Renderer2) { } - - ngOnInit() { - } - - ngAfterViewInit() { - if (this.width) { - this.render.setStyle(this.ref.nativeElement.children[0], 'width', this.width + 'px'); - } - if (this.margin) { - this.render.setStyle(this.ref.nativeElement.children[0], 'margin', '0px ' + this.margin + 'px 0px ' + this.margin + 'px'); - } - if (this.fillHeight) { - this.render.setStyle(this.ref.nativeElement.children[0], 'height', 100 + '%'); - this.render.setStyle(this.ref.nativeElement, 'height', 100 + '%'); - } - } - -} diff --git a/projects/ars/src/lib/components/layout/base/full-screen-overlay/full-screen-overlay.component.html b/projects/ars/src/lib/components/layout/base/screen/screen.component.html similarity index 100% rename from projects/ars/src/lib/components/layout/base/full-screen-overlay/full-screen-overlay.component.html rename to projects/ars/src/lib/components/layout/base/screen/screen.component.html diff --git a/projects/ars/src/lib/components/layout/base/full-screen-overlay/full-screen-overlay.component.scss b/projects/ars/src/lib/components/layout/base/screen/screen.component.scss similarity index 86% rename from projects/ars/src/lib/components/layout/base/full-screen-overlay/full-screen-overlay.component.scss rename to projects/ars/src/lib/components/layout/base/screen/screen.component.scss index d57aa0e04..d373b4dbe 100644 --- a/projects/ars/src/lib/components/layout/base/full-screen-overlay/full-screen-overlay.component.scss +++ b/projects/ars/src/lib/components/layout/base/screen/screen.component.scss @@ -5,4 +5,5 @@ position:fixed; left:0px; top:0px; + z-index:2; } diff --git a/projects/ars/src/lib/components/layout/base/full-screen-overlay/full-screen-overlay.component.spec.ts b/projects/ars/src/lib/components/layout/base/screen/screen.component.spec.ts similarity index 89% rename from projects/ars/src/lib/components/layout/base/full-screen-overlay/full-screen-overlay.component.spec.ts rename to projects/ars/src/lib/components/layout/base/screen/screen.component.spec.ts index fca0cf366..861e86f37 100644 --- a/projects/ars/src/lib/components/layout/base/full-screen-overlay/full-screen-overlay.component.spec.ts +++ b/projects/ars/src/lib/components/layout/base/screen/screen.component.spec.ts @@ -1,6 +1,6 @@ /*import { async, ComponentFixture, TestBed } from '@angular/core/testing'; -import { FullScreenOverlayComponent } from './full-screen-overlay.component'; +import { FullScreenOverlayComponent } from './screen.component'; describe('FullScreenOverlayComponent', () => { let component: FullScreenOverlayComponent; diff --git a/projects/ars/src/lib/components/layout/base/full-screen-overlay/full-screen-overlay.component.ts b/projects/ars/src/lib/components/layout/base/screen/screen.component.ts similarity index 64% rename from projects/ars/src/lib/components/layout/base/full-screen-overlay/full-screen-overlay.component.ts rename to projects/ars/src/lib/components/layout/base/screen/screen.component.ts index feac83642..2d3243366 100644 --- a/projects/ars/src/lib/components/layout/base/full-screen-overlay/full-screen-overlay.component.ts +++ b/projects/ars/src/lib/components/layout/base/screen/screen.component.ts @@ -2,8 +2,8 @@ import { Component, OnInit } from '@angular/core'; @Component({ selector: 'ars-screen', - templateUrl: './full-screen-overlay.component.html', - styleUrls: ['./full-screen-overlay.component.scss'] + templateUrl: './screen.component.html', + styleUrls: ['./screen.component.scss'] }) export class FullScreenOverlayComponent implements OnInit { diff --git a/projects/ars/src/lib/components/style/menu/material-btn/material-btn.component.html b/projects/ars/src/lib/components/style/menu/material-btn/material-btn.component.html new file mode 100644 index 000000000..6dbc74306 --- /dev/null +++ b/projects/ars/src/lib/components/style/menu/material-btn/material-btn.component.html @@ -0,0 +1 @@ +<ng-content></ng-content> diff --git a/projects/ars/src/lib/components/style/menu/material-btn/material-btn.component.scss b/projects/ars/src/lib/components/style/menu/material-btn/material-btn.component.scss new file mode 100644 index 000000000..78bec6c4e --- /dev/null +++ b/projects/ars/src/lib/components/style/menu/material-btn/material-btn.component.scss @@ -0,0 +1,39 @@ + + +:host ::ng-deep{ + + p,h1,h2,h3,h4,h5{ + padding:0; + margin:0; + } + + button{ + padding:0; + margin:0; + background-color:transparent; + border:none; + outline:none; + cursor:pointer; + } + + button:focus-visible>*{ + outline:2px solid red; + outline-offset:5px; + } + + ars-col>button p{ + text-transform: uppercase; + } + + ars-row>button p{ + } + + button p{ + font-family: Roboto, 'sans-serif'; + font-weight: 500; + text-decoration: none; + color: var(--ars-button-color); + text-align: left; + } + +} diff --git a/projects/ars/src/lib/components/style/menu/material-btn/material-btn.component.spec.ts b/projects/ars/src/lib/components/style/menu/material-btn/material-btn.component.spec.ts new file mode 100644 index 000000000..c2ad2f11a --- /dev/null +++ b/projects/ars/src/lib/components/style/menu/material-btn/material-btn.component.spec.ts @@ -0,0 +1,25 @@ +import { async, ComponentFixture, TestBed } from '@angular/core/testing'; + +import { MaterialBtnComponent } from './material-btn.component'; + +describe('MaterialBtnComponent', () => { + let component: MaterialBtnComponent; + let fixture: ComponentFixture<MaterialBtnComponent>; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + declarations: [ MaterialBtnComponent ] + }) + .compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(MaterialBtnComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/projects/ars/src/lib/components/style/menu/material-btn/material-btn.component.ts b/projects/ars/src/lib/components/style/menu/material-btn/material-btn.component.ts new file mode 100644 index 000000000..b8ae3ace2 --- /dev/null +++ b/projects/ars/src/lib/components/style/menu/material-btn/material-btn.component.ts @@ -0,0 +1,15 @@ +import { Component, OnInit } from '@angular/core'; + +@Component({ + selector: 'ars-style-btn-material', + templateUrl: './material-btn.component.html', + styleUrls: ['./material-btn.component.scss'] +}) +export class MaterialBtnComponent implements OnInit { + + constructor() { } + + ngOnInit() { + } + +} diff --git a/projects/ars/src/lib/components/test/layout/base-test/base-test.component.html b/projects/ars/src/lib/components/test/layout/base-test/base-test.component.html new file mode 100644 index 000000000..8382c8bf5 --- /dev/null +++ b/projects/ars/src/lib/components/test/layout/base-test/base-test.component.html @@ -0,0 +1,101 @@ + +<ars-style-btn-material> + <ars-screen style="background-color:#FFFFFF;"> + </ars-screen> + <ars-screen class="examplescreen" ars-flex-box> + + <ars-row [height]="50" ars-menu> + <ars-col ars-btn-wrp [xp]="20" [extra]="true"> + <button ars-btn><p>Introduction</p></button> + <button ars-btn><p>Display</p></button> + <button ars-btn><p>Language</p></button> + <button ars-btn><p>Data Protection</p></button> + </ars-col> + <ars-col ars-btn-wrp [xp]="20" [extra]="true"> + <button ars-btn><p>Account</p></button> + </ars-col> + </ars-row> + + <ars-row [height]="1" class="seperator"></ars-row> + + <ars-fill ars-flex-box> + + <ars-col [width]="300" ars-menu> + <ars-row ars-btn-wrp [xp]="40" [yp]="30" [extra]="true"> + <button ars-btn><p>Settings</p></button> + <button ars-btn><p>Themes</p></button> + <button ars-btn><p>Configurations</p></button> + <button ars-btn><p>Options</p></button> + </ars-row> + <ars-row ars-btn-wrp [xp]="40" [yp]="30" [extra]="true"> + <button ars-btn><p>Settings</p></button> + <button ars-btn><p>Themes</p></button> + <button ars-btn><p>Configurations</p></button> + <button ars-btn><p>Options</p></button> + </ars-row> + </ars-col> + + <ars-col [width]="1" class="seperator"></ars-col> + + <ars-flex-align [width]="750" [margin]="5" [align]="'center'"> + <ars-row [height]="80"></ars-row> + <ars-row style="padding-left:10px;padding-right:10px;box-sizing:border-box;"> + <ars-style-typography-material> + <h1 class="typo-lead-h space-lead-p">An die Entwickler</h1> + <p class="typo-lead-p">In der Einführung unten links findest du Informationen zum Zweck und zur Bedienung von »frag.jetzt«.</p> + <ars-row [height]="50"></ars-row> + </ars-style-typography-material> + </ars-row> + <ars-row [height]="50" ars-menu> + <ars-col ars-btn-wrp [xp]="10" [extra]="true"> + <button ars-btn><p>Besuchen</p></button> + </ars-col> + </ars-row> + </ars-flex-align> + + <ars-col [width]="1" class="seperator"></ars-col> + + <ars-col [width]="300" ars-menu> + <ars-row ars-btn-wrp [xp]="40" [yp]="30" [extra]="true"> + <button ars-btn><p>Settings</p></button> + <button ars-btn><p>Themes</p></button> + <button ars-btn><p>Configurations</p></button> + <button ars-btn><p>Options</p></button> + </ars-row> + <ars-fill></ars-fill> + <ars-row ars-btn-wrp [xp]="40" [yp]="30" [extra]="true"> + <button ars-btn><p>Catalog</p></button> + <button ars-btn><p>Setting</p></button> + </ars-row> + <ars-row ars-btn-wrp [xp]="40" [yp]="30" [extra]="true"> + <button ars-btn><p>Settings</p></button> + <button ars-btn><p>Themes</p></button> + <button ars-btn><p>Configurations</p></button> + <button ars-btn><p>Options</p></button> + </ars-row> + </ars-col> + + </ars-fill> + + <ars-row [height]="1" class="seperator"></ars-row> + + <ars-row [height]="50" ars-menu> + <ars-col ars-btn-wrp [xp]="20" [extraStart]="true"> + <button ars-btn><p>Introduction</p></button> + </ars-col> + <ars-col ars-btn-wrp [xp]="20"> + <button ars-btn><p>Display</p></button> + </ars-col> + <ars-col ars-btn-wrp [xp]="20"> + <button ars-btn><p>Language</p></button> + </ars-col> + <ars-col ars-btn-wrp [xp]="20"> + <button ars-btn><p>Data Protection</p></button> + </ars-col> + <ars-col ars-btn-wrp [xp]="20" [extraEnd]="true"> + <button ars-btn><p>Imprint</p></button> + </ars-col> + </ars-row> + + </ars-screen> +</ars-style-btn-material> diff --git a/projects/ars/src/lib/components/test/layout/base-test/base-test.component.scss b/projects/ars/src/lib/components/test/layout/base-test/base-test.component.scss new file mode 100644 index 000000000..39efc42cc --- /dev/null +++ b/projects/ars/src/lib/components/test/layout/base-test/base-test.component.scss @@ -0,0 +1,35 @@ + + +.testflex{ + width:100%; + height:100%; + background-color:orange; + display:flex; + flex-direction:row; + justify-content:center; + overflow:scroll; +} + +.col{ + width:200px; + height:0; + margin-left:5px; + margin-right:5px; + background-color:yellow; +} + +.colwrp{ + width:100%; + float:left; + background-color:pink; + box-sizing:border-box; + padding:10px; +} + +.examplescreen{ + background-color: var(--ars-background-color); +} + +.seperator{ + background-color:var(--ars-border-color); +} diff --git a/projects/ars/src/lib/components/layout/base/resp/resp.component.spec.ts b/projects/ars/src/lib/components/test/layout/base-test/base-test.component.spec.ts similarity index 55% rename from projects/ars/src/lib/components/layout/base/resp/resp.component.spec.ts rename to projects/ars/src/lib/components/test/layout/base-test/base-test.component.spec.ts index bce2d7e30..7344fdeb7 100644 --- a/projects/ars/src/lib/components/layout/base/resp/resp.component.spec.ts +++ b/projects/ars/src/lib/components/test/layout/base-test/base-test.component.spec.ts @@ -1,20 +1,20 @@ import { async, ComponentFixture, TestBed } from '@angular/core/testing'; -import { RespComponent } from './resp.component'; +import { BaseTestComponent } from './base-test.component'; -describe('RespComponent', () => { - let component: RespComponent; - let fixture: ComponentFixture<RespComponent>; +describe('BaseTestComponent', () => { + let component: BaseTestComponent; + let fixture: ComponentFixture<BaseTestComponent>; beforeEach(async(() => { TestBed.configureTestingModule({ - declarations: [ RespComponent ] + declarations: [ BaseTestComponent ] }) .compileComponents(); })); beforeEach(() => { - fixture = TestBed.createComponent(RespComponent); + fixture = TestBed.createComponent(BaseTestComponent); component = fixture.componentInstance; fixture.detectChanges(); }); diff --git a/projects/ars/src/lib/components/test/layout/base-test/base-test.component.ts b/projects/ars/src/lib/components/test/layout/base-test/base-test.component.ts new file mode 100644 index 000000000..ec401f238 --- /dev/null +++ b/projects/ars/src/lib/components/test/layout/base-test/base-test.component.ts @@ -0,0 +1,17 @@ +import { Component, OnInit } from '@angular/core'; +import { StyleDebug } from '../../../../models/debug/StyleDebug'; + +@Component({ + selector: 'ars-test-base', + templateUrl: './base-test.component.html', + styleUrls: ['./base-test.component.scss'] +}) +export class BaseTestComponent implements OnInit { + + constructor() { } + + ngOnInit() { + // StyleDebug.border('c'); + } + +} diff --git a/projects/ars/src/lib/components/test/layout/frame/frame-test/frame-test.component.html b/projects/ars/src/lib/components/test/layout/frame/frame-test/frame-test.component.html index e28e583f3..616fa453b 100644 --- a/projects/ars/src/lib/components/test/layout/frame/frame-test/frame-test.component.html +++ b/projects/ars/src/lib/components/test/layout/frame/frame-test/frame-test.component.html @@ -3,7 +3,7 @@ <ars-screen ars-flex-box> <ars-row [height]="1"></ars-row> <ars-fill [overflow]="'hidden'"> - <ars-resp ars-scroll [width]="750" [margin]="30"> + <ars-flex-align [width]="750" [margin]="30"> <ars-row [height]="300"></ars-row> @@ -107,7 +107,7 @@ <ars-row [height]="160"></ars-row> - </ars-resp> + </ars-flex-align> </ars-fill> <ars-row [height]="1"></ars-row> </ars-screen> diff --git a/projects/ars/src/lib/models/debug/StyleDebug.ts b/projects/ars/src/lib/models/debug/StyleDebug.ts new file mode 100644 index 000000000..2d4f6e9fe --- /dev/null +++ b/projects/ars/src/lib/models/debug/StyleDebug.ts @@ -0,0 +1,24 @@ +export class StyleDebug { + + public static border(key: string) { + let isActive = true; + const style: HTMLStyleElement = document.createElement('style'); + style.appendChild(document.createTextNode( + 'body *:hover{background-color:rgba(60,114,201,0.01)} ' + + 'body *{box-shadow:inset 0px 0px 0px 1px rgba(125,125,125,0.2);}')); + document.getElementsByTagName('head')[0].appendChild(style); + window.addEventListener('keydown', (k) => { + if (k.key !== key) { + return; + } + if (isActive) { + document.getElementsByTagName('head')[0].removeChild(style); + isActive = false; + } else { + document.getElementsByTagName('head')[0].appendChild(style); + isActive = true; + } + }); + } + +} diff --git a/projects/ars/src/lib/style/style.const.ts b/projects/ars/src/lib/style/style.const.ts index a8aff6458..51815e05d 100644 --- a/projects/ars/src/lib/style/style.const.ts +++ b/projects/ars/src/lib/style/style.const.ts @@ -1,11 +1,15 @@ export const light = { 'ars-header-color': '#212121', 'ars-paragraph-color': '#616161', - 'ars-background-color': '#FFFFFF' + 'ars-button-color': '#000000', + 'ars-background-color': '#FFFFFF', + 'ars-border-color': '#DDDDDD' }; export const dark = { 'ars-header-color': '#FAFAFA', 'ars-paragraph-color': '#BDBDBD', - 'ars-background-color': '#212121' + 'ars-button-color': '#FFFFFF', + 'ars-background-color': '#212121', + 'ars-border-color': '#2E2E2E' }; -- GitLab