Fix styles in demo widget

irustm · irustm · commit 99266a2599d0 · 2019-11-10T01:47:43.000+03:00
diff --git a/demo/demo_widget.png b/demo/demo_widget.png
diff --git a/projects/angular-nodegui/src/lib/components/button.ts b/projects/angular-nodegui/src/lib/components/button.ts
@@ -22,7 +22,16 @@ export class NgButton extends QPushButton implements NgComponent {
     name: string,
     value: string,
     namespace?: string | null
-  ): void {}
+  ): void {
+    switch (name) {
+      case 'id':
+        this.setObjectName(value);
+        break;
+
+      default:
+        break;
+    }
+  }
 
   public setProperty(name: string, value: boolean | number): void {
     switch (name) {
diff --git a/projects/angular-nodegui/src/lib/components/checkbox.ts b/projects/angular-nodegui/src/lib/components/checkbox.ts
@@ -22,7 +22,16 @@ export class NgCheckbox extends QCheckBox implements NgComponent {
     name: string,
     value: string,
     namespace?: string | null
-  ): void {}
+  ): void {
+    switch (name) {
+      case 'id':
+        this.setObjectName(value);
+        break;
+
+      default:
+        break;
+    }
+  }
 
   public setProperty(name: string, value: boolean): void {
     switch (name) {
diff --git a/projects/angular-nodegui/src/lib/components/dial.ts b/projects/angular-nodegui/src/lib/components/dial.ts
@@ -16,7 +16,16 @@ export class NgDial extends QDial implements NgComponent {
     name: string,
     value: string,
     namespace?: string | null
-  ): void {}
+  ): void {
+    switch (name) {
+      case 'id':
+        this.setObjectName(value);
+        break;
+
+      default:
+        break;
+    }
+  }
 
   public setProperty(name: string, value: boolean | number): void {
     switch (name) {
diff --git a/projects/angular-nodegui/src/lib/components/line-edit.ts b/projects/angular-nodegui/src/lib/components/line-edit.ts
@@ -16,7 +16,16 @@ export class NgLineEdit extends QLineEdit implements NgComponent {
     name: string,
     value: string,
     namespace?: string | null
-  ): void {}
+  ): void {
+    switch (name) {
+      case 'id':
+        this.setObjectName(value);
+        break;
+
+      default:
+        break;
+    }
+  }
 
   public setProperty(name: string, value: boolean | string): void {
     switch (name) {
diff --git a/projects/angular-nodegui/src/lib/components/pline-text-edit.ts b/projects/angular-nodegui/src/lib/components/pline-text-edit.ts
@@ -16,7 +16,16 @@ export class NgPlainTextEdit extends QPlainTextEdit implements NgComponent {
     name: string,
     value: string,
     namespace?: string | null
-  ): void {}
+  ): void {
+    switch (name) {
+      case 'id':
+        this.setObjectName(value);
+        break;
+
+      default:
+        break;
+    }
+  }
 
   public setProperty(name: string, value: boolean | string): void {
     switch (name) {
diff --git a/projects/angular-nodegui/src/lib/components/radiobutton.ts b/projects/angular-nodegui/src/lib/components/radiobutton.ts
@@ -16,7 +16,16 @@ export class NgRadioButton extends QRadioButton implements NgComponent {
     name: string,
     value: string,
     namespace?: string | null
-  ): void {}
+  ): void {
+    switch (name) {
+      case 'id':
+        this.setObjectName(value);
+        break;
+
+      default:
+        break;
+    }
+  }
 
   public setProperty(name: string, value: boolean | string): void {
     switch (name) {
diff --git a/projects/angular-nodegui/src/lib/components/scroll-area.ts b/projects/angular-nodegui/src/lib/components/scroll-area.ts
@@ -16,7 +16,16 @@ export class NgScrollArea extends QScrollArea implements NgComponent {
     name: string,
     value: string,
     namespace?: string | null
-  ): void {}
+  ): void {
+    switch (name) {
+      case 'id':
+        this.setObjectName(value);
+        break;
+
+      default:
+        break;
+    }
+  }
 
   public setProperty(name: string, value: boolean | string): void {
     switch (name) {
diff --git a/projects/angular-nodegui/src/lib/components/spin-box.ts b/projects/angular-nodegui/src/lib/components/spin-box.ts
@@ -21,7 +21,16 @@ export class NgSpinnBox extends QSpinBox implements NgComponent {
     name: string,
     value: string,
     namespace?: string | null
-  ): void {}
+  ): void {
+    switch (name) {
+      case 'id':
+        this.setObjectName(value);
+        break;
+
+      default:
+        break;
+    }
+  }
 
   public setProperty(
     name: string,
diff --git a/projects/angular-nodegui/src/lib/components/text.ts b/projects/angular-nodegui/src/lib/components/text.ts
@@ -22,10 +22,26 @@ export class NgText extends QLabel implements NgComponent {
     name: string,
     value: string,
     namespace?: string | null
-  ): void {}
+  ): void {
+    switch (name) {
+      case 'id':
+        this.setObjectName(value);
+        break;
+
+      default:
+        break;
+    }
+  }
 
   public setProperty(name: string, value: any): void {
-    throw new Error('Method not implemented.');
+    switch (name) {
+      case 'style':
+        this.setStyleSheet(value);
+        break;
+
+      default:
+        break;
+    }
   }
 
   public setStyle(
diff --git a/projects/weather-demo/src/app/app.component.css b/projects/weather-demo/src/app/app.component.css
@@ -6,6 +6,7 @@
   flex: 2;
   qproperty-alignment: 'AlignCenter';
   margin-right: '10%';
+  margin-top: 40px;
 }
 
 #container {
@@ -21,7 +22,19 @@
   border-radius: 5px;
 }
 
+#summary{
+  justify-content: 'center';
+}
+
+
 #tempbox {
-  margin-vertical: 10px;
+  margin-top: 10px;
   flex-direction: 'row';
 }
+
+#buttonbox {
+  margin-top: 10px;
+  flex-direction: 'row';
+  justify-content: 'center';
+}
+
diff --git a/projects/weather-demo/src/app/app.component.html b/projects/weather-demo/src/app/app.component.html
@@ -1,11 +1,17 @@
 <window #window title="Weather" id="win">
   <view id="container">
-    <image id="image" [src]="'./projects/weather-demo/src/assets/04d.png'" [aspectRatioMode]="aspectRatioMode"></image>
+    <image id="image" [src]="'./projects/weather-demo/src/assets/09d.png'" [aspectRatioMode]="aspectRatioMode"></image>
     <view id="details">
-      <app-summary [title]="'name'" [description]="'description'"></app-summary>
+      <app-summary id="summary" [title]="'Rain'" [description]="'shower rain'"></app-summary>
       <view id="tempbox">
         <app-temerature [now]="3" [max]="5" [min]="1"></app-temerature>
+        <app-placedate [place]="'Snt.Petersburg'" [date]="date"></app-placedate>
+      </view>
+      <view id="buttonbox">
+        <button (clicked)="onRefresh()">Refresh</button>
+        <button (clicked)="onClose()">Close</button>
       </view>
     </view>
+
   </view>
 </window>
diff --git a/projects/weather-demo/src/app/app.component.ts b/projects/weather-demo/src/app/app.component.ts
@@ -5,28 +5,35 @@ import {
   OnInit,
   ElementRef
 } from '@angular/core';
-import { WindowType, WidgetAttribute, AspectRatioMode } from '@nodegui/nodegui';
+import {
+  WindowType,
+  WidgetAttribute,
+  AspectRatioMode,
+  QApplication
+} from '@nodegui/nodegui';
 import { NgWindow } from '../../../../projects/angular-nodegui/src/lib/components/window';
 import * as os from 'os';
 
 @Component({
   // tslint:disable-next-line: component-selector
   selector: 'app-root',
   templateUrl: './app.component.html',
-  styleUrls: ['./app.component.scss'],
+  styleUrls: ['./app.component.css'],
   encapsulation: ViewEncapsulation.None
 })
 export class AppComponent implements OnInit {
   @ViewChild('window', { static: true }) window: ElementRef<NgWindow>;
 
-  public aspectRatioMode = AspectRatioMode.KeepAspectRatio;
+  public aspectRatioMode: AspectRatioMode = AspectRatioMode.KeepAspectRatio;
+  public date: Date = new Date();
+
   constructor() {}
 
   ngOnInit() {
     const win = this.window.nativeElement.parent;
 
     win.hide();
-    win.resize(300, 300);
+    win.resize(300, 340);
 
     win.setWindowFlag(WindowType.FramelessWindowHint, true);
     win.setWindowFlag(WindowType.Widget, true);
@@ -40,5 +47,8 @@ export class AppComponent implements OnInit {
     win.show();
   }
 
-  textChanged(val: string) {}
+  onRefresh(): void {}
+  onClose(): void {
+    QApplication.instance().quit();
+  }
 }
diff --git a/projects/weather-demo/src/app/app.module.ts b/projects/weather-demo/src/app/app.module.ts
@@ -5,9 +5,10 @@ import { NodeguiLibModule } from '../../../../projects/angular-nodegui/src/lib/n
 import { AppComponent } from './app.component';
 import { SummaryComponent } from './summary/summary.component';
 import { TemeratureComponent } from './temerature/temerature.component';
+import { PlacedateComponent } from './placedate/placedate.component';
 
 @NgModule({
-  declarations: [AppComponent, SummaryComponent, TemeratureComponent],
+  declarations: [AppComponent, SummaryComponent, TemeratureComponent, PlacedateComponent],
   imports: [NodeguiLibModule, HttpClientModule],
   providers: [],
   bootstrap: [AppComponent],
diff --git a/projects/weather-demo/src/app/placedate/placedate.component.html b/projects/weather-demo/src/app/placedate/placedate.component.html
@@ -0,0 +1,4 @@
+<view id="pd-container">
+  <text [style]="placeStyle">{{place}}</text>
+  <text [style]="dateStyle">{{fullDate}}</text>
+</view>
diff --git a/projects/weather-demo/src/app/placedate/placedate.component.scss b/projects/weather-demo/src/app/placedate/placedate.component.scss
@@ -0,0 +1,3 @@
+#pd-container{
+  flex: 1;
+}
diff --git a/projects/weather-demo/src/app/placedate/placedate.component.ts b/projects/weather-demo/src/app/placedate/placedate.component.ts
@@ -0,0 +1,33 @@
+import { Component, OnInit, ViewEncapsulation, Input } from '@angular/core';
+import { dateFormatter } from '../utils/helpers';
+
+@Component({
+  selector: 'app-placedate',
+  templateUrl: './placedate.component.html',
+  styleUrls: ['./placedate.component.scss'],
+  encapsulation: ViewEncapsulation.None
+})
+export class PlacedateComponent implements OnInit {
+  @Input() place: string;
+  @Input() set date(value: Date) {
+    this.fullDate = dateFormatter(value);
+  }
+
+  public fullDate: string;
+
+  public placeStyle = `
+    flex: 1;
+    font-size: 20px;
+    qproperty-alignment: 'AlignCenter';
+    color: white;
+  `;
+  public dateStyle = `
+    flex: 1;
+    font-size: 12px;
+    qproperty-alignment: 'AlignCenter';
+    color: white;
+  `;
+  constructor() {}
+
+  ngOnInit() {}
+}
diff --git a/projects/weather-demo/src/app/summary/summary.component.html b/projects/weather-demo/src/app/summary/summary.component.html
@@ -1,5 +1,5 @@
-<view [style.align-items]="'center'">
+<view id="summary">
   <text [style.color]="'white'">
-    {{title}} : {{description}}
+    {{summary}}
   </text>
 </view>
diff --git a/projects/weather-demo/src/app/summary/summary.component.scss b/projects/weather-demo/src/app/summary/summary.component.scss
@@ -0,0 +1,3 @@
+#summary{
+  align-items: 'center';
+}
diff --git a/projects/weather-demo/src/app/summary/summary.component.ts b/projects/weather-demo/src/app/summary/summary.component.ts
@@ -1,16 +1,29 @@
-import { Component, OnInit, Input } from '@angular/core';
+import {
+  Component,
+  OnInit,
+  Input,
+  ViewEncapsulation,
+  OnChanges
+} from '@angular/core';
 
 @Component({
   // tslint:disable-next-line: component-selector
   selector: 'app-summary',
   templateUrl: './summary.component.html',
-  styleUrls: ['./summary.component.scss']
+  styleUrls: ['./summary.component.scss'],
+  encapsulation: ViewEncapsulation.None
 })
-export class SummaryComponent implements OnInit {
+export class SummaryComponent implements OnInit, OnChanges {
   @Input() title: string;
   @Input() description: string;
 
+  public summary;
+
   constructor() {}
 
   ngOnInit() {}
+
+  ngOnChanges(): void {
+    this.summary = `<b>${this.title}<b> : <i>${this.description}</i>`;
+  }
 }
diff --git a/projects/weather-demo/src/app/temerature/temerature.component.html b/projects/weather-demo/src/app/temerature/temerature.component.html
@@ -1,10 +1,8 @@
 <view id="temperature">
-  <text id="currentTemp">
-    {{now}} o C
-  </text>
+  <text [style]="currentTempStyle">{{now}}{{sup}} C</text>
   <view id="smallbox">
-    <text id="smallinfo">
-      {{min}}o C / {{max}} o C
+    <text [style]="smallInfo">
+      {{min}}{{sup}} C / {{max}}{{sup}} C
     </text>
   </view>
 </view>
diff --git a/projects/weather-demo/src/app/temerature/temerature.component.scss b/projects/weather-demo/src/app/temerature/temerature.component.scss
diff --git a/projects/weather-demo/src/app/temerature/temerature.component.ts b/projects/weather-demo/src/app/temerature/temerature.component.ts
diff --git a/projects/weather-demo/src/assets/09d.png b/projects/weather-demo/src/assets/09d.png
