diff --git a/projects/ars/src/lib/ars.module.ts b/projects/ars/src/lib/ars.module.ts
index 75eda76c507c9d6543d0186ead0ecb543df9191d..8a834752be2c763619be430c1915dc2f00514fb0 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 0000000000000000000000000000000000000000..08394c6af5459b7706263a831409543264898a1d
--- /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 0000000000000000000000000000000000000000..e377f9918e755a13fa575f66482d823de2e350a9
--- /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 0000000000000000000000000000000000000000..79a0bf74bf11a390a83733aa6dff67825cc1bc3c
--- /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 fd4dfa0cd74c0064378b6065e024194508fbfe47..0000000000000000000000000000000000000000
--- 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 21286c2c5c6c7409b07732313cd14adf94822b77..0000000000000000000000000000000000000000
--- 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 de76df8b1aa62726f584bb8ef25c130cbd803b43..0000000000000000000000000000000000000000
--- 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 1e7b1524ab82adaf07d4afc88cae5e1a9ba4ee30..0000000000000000000000000000000000000000
--- 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 dfdbcc70d33d46727133f0a9a723584ae5fb747e..4f0f965714792e16a44c7949b994fd3ac9f7a3ec 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 a85dea4d396e2607de7afe7cf1d06882c9fbf45d..2de23dc6783be212ed673b9191173c5e015bc7f6 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 fdbb2555b274941c916cdc987e0200472fd68be1..215230a113ad0880f889e15653a5ea5279916fad 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 0000000000000000000000000000000000000000..95425060e06dfcd61bb5c8af27ab9bca6e90951e
--- /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 c18f3d0591519d014830ec16970ebd37adb75c2c..0000000000000000000000000000000000000000
--- 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 d57aa0e04451122a1b666ed4f6508b37c50fcd81..d373b4dbe5a6bb499bf550950f2a65672a8943fd 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 fca0cf3664d83a17c9642c2a71ca8e8e2b30466e..861e86f375700ef5828868962f884aa8a18d6cff 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 feac83642b151e6af9e23a6ff8f06cd832924710..2d3243366193ce9b1517cac17f46fec128485ca3 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 0000000000000000000000000000000000000000..6dbc74306383aaa6efc4216ee6c449c3b38ceaa9
--- /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 0000000000000000000000000000000000000000..78bec6c4e8a37495630dc6b64d81277160eab4ad
--- /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 0000000000000000000000000000000000000000..c2ad2f11af31cfaed4055d1d3fdb37e498a77155
--- /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 0000000000000000000000000000000000000000..b8ae3ace26a8f189bcdad9dc4fbfafd80e0bd1e4
--- /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 0000000000000000000000000000000000000000..8382c8bf5018883b0ab595e2aadeaca499fc1ba8
--- /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 0000000000000000000000000000000000000000..39efc42cc18b33ef59fdf23049065383354da2d0
--- /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 bce2d7e303ce05621e03da736212249a2a16e8d0..7344fdeb766f84b202063a1f944cec3ef7658a83 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 0000000000000000000000000000000000000000..ec401f23819e45cb34b9a8bf327a89449b76c4de
--- /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 e28e583f354a99e611e388f028ea2f7f62bce043..616fa453b4214dd776ce668017d57e77886d0f93 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 0000000000000000000000000000000000000000..2d4f6e9fe78cf3312f257fcc8ea2914ae0425f54
--- /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 a8aff6458aef4df1bb6ffc6f2e150c98832fc268..51815e05dfbfe4aa9bb78e9c44604c98fb35b8d1 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'
};