feat(layout): Added wide/narrow layout mode

krzysztofsaja · Jul 24, 2017 · 6abc9ae · 6abc9ae
1 parent 5db7439
commit 6abc9ae
Show file tree

Hide file tree

Showing 6 changed files with 94 additions and 40 deletions.
diff --git a/README.md b/README.md
@@ -51,7 +51,7 @@ export class MyModule {}
 Use in one of your apps components:
 ```typescript
 import { Component } from '@angular/core';
-import { WeatherSettings, TemperatureScale, ForecastMode } from 'angular-weather-widget';
+import { WeatherSettings, TemperatureScale, ForecastMode, WeatherLayout } from 'angular-weather-widget';
 
 
 @Component({
@@ -71,6 +71,7 @@ export class MyComponent {
       forecastMode: ForecastMode.DETAILED,
       showDetails: false,
       showForecast: true,
+      layout: WeatherLayout.WIDE,
       language: 'en'
     };
 }

diff --git a/demo/demo.component.ts b/demo/demo.component.ts
@@ -8,7 +8,11 @@ import {
 } from '../src/services/api/weather.api.service';
 import { Component } from '@angular/core';
 import { TemperatureScale } from '../src/components/weather-current-temperature/current-temperature.component';
-import { ForecastMode, WeatherSettings } from '../src/weather.interfaces';
+import {
+  ForecastMode,
+  WeatherLayout,
+  WeatherSettings
+} from '../src/weather.interfaces';
 
 @Component({
   selector: 'weather-demo-app',
@@ -40,11 +44,8 @@ import { ForecastMode, WeatherSettings } from '../src/weather.interfaces';
   ],
   template: `
     <div class="menu">
+      <h4>Data settings</h4>
       <div class="row"> Place<input type="text" [(ngModel)]="settings.location.cityName"></div>
-      <div class="row">Color<input type="text" [(ngModel)]="settings.color"></div>
-      <div class="row">Background color<input type="text" [(ngModel)]="settings.backgroundColor"></div>
-      <div class="row">Width<input type="text" [(ngModel)]="settings.width"></div>
-      <div class="row">Height<input type="text" [(ngModel)]="settings.height"></div>
       <div class="row">Show Wind<input type="checkbox" [(ngModel)]="settings.showWind"></div>
       <div class="row"> Show Details<input type="checkbox" [(ngModel)]="settings.showDetails"></div>
       <div class="row"> Show Forecast<input type="checkbox" [(ngModel)]="settings.showForecast"></div>
@@ -61,6 +62,17 @@ import { ForecastMode, WeatherSettings } from '../src/weather.interfaces';
           <option [value]="'fahrenheit'">Fahrenheit</option>
         </select>
       </div>
+      <h4>Layout</h4>
+      <div class="row">Layout
+        <select [(ngModel)]="settings.layout">
+          <option [value]="'wide'">Wide</option>
+          <option [value]="'narrow'">Narrow</option>
+        </select>
+      </div>
+      <div class="row">Color<input type="text" [(ngModel)]="settings.color"></div>
+      <div class="row">Background color<input type="text" [(ngModel)]="settings.backgroundColor"></div>
+      <div class="row">Width<input type="text" [(ngModel)]="settings.width"></div>
+      <div class="row">Height<input type="text" [(ngModel)]="settings.height"></div>
       <button (click)="onUpdate()">Update</button>
     </div>
     <weather-widget
@@ -76,13 +88,14 @@ export class DemoComponent {
     scale: TemperatureScale.CELCIUS,
     backgroundColor: '#ffffff',
     color: '#222222',
-    width: '300px',
+    width: 'auto',
     height: 'auto',
     showWind: false,
     showDetails: false,
     showForecast: true,
     forecastMode: ForecastMode.DETAILED,
-    language: 'en'
+    language: 'en',
+    layout: WeatherLayout.WIDE
   };
 
   currentWeather: CurrentWeather = CURRENT_WATHER_MOCK;

diff --git a/src/components/weather-current-temperature/current-temperature.component.ts b/src/components/weather-current-temperature/current-temperature.component.ts
@@ -6,6 +6,7 @@ import { ChangeDetectionStrategy, Component, Input } from '@angular/core';
   styles: [
     `
   :host {
+    display: block;
   }
     .deg {
       letter-spacing: -0.13em;

diff --git a/src/weather.container.ts b/src/weather.container.ts
@@ -16,7 +16,11 @@ import {
   Forecast,
   WeatherApiService
 } from './services/api/weather.api.service';
-import { WeatherQueryParams, WeatherSettings } from './weather.interfaces';
+import {
+  WeatherLayout,
+  WeatherQueryParams,
+  WeatherSettings
+} from './weather.interfaces';
 
 @Component({
   selector: 'weather-widget',
@@ -26,7 +30,7 @@ import { WeatherQueryParams, WeatherSettings } from './weather.interfaces';
              :host {
                display: flex;
                position: relative;
-               padding: 1.5em;
+               padding: 1em;
                box-sizing: border-box;
                overflow-y: auto;
              }
@@ -37,6 +41,28 @@ import { WeatherQueryParams, WeatherSettings } from './weather.interfaces';
                justify-content: center;
                width: 100%;
              }
+             .info.wide {
+               flex-direction: row;
+             }
+             .wide .current {
+               flex-grow: 0;
+             }
+             .wide .forecast {
+               flex-grow: 1;
+             }
+             .current {
+               display: flex;
+               flex-direction: column;
+               align-items: center;
+               justify-content: center;
+               min-width: 130px;
+             }
+             .forecast {
+               min-width: 200px;
+             }
+             .current, .forecast {
+               padding: 0.5em;
+             }
              weather-actions {
                display: block;
                position: absolute;
@@ -63,35 +89,38 @@ import { WeatherQueryParams, WeatherSettings } from './weather.interfaces';
   template: `
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/weather-icons/2.0.10/css/weather-icons.min.css">
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/weather-icons/2.0.10/css/weather-icons-wind.min.css">
-    <div *ngIf="currentWeather" class="info">
-      <weather-icon
-        class="big"
-        [iconImageUrl]="currentWeather?.iconUrl"
-        [iconClass]="currentWeather?.iconClass"></weather-icon>
-      <weather-current-description
-        [descripion]="currentWeather?.description"></weather-current-description>
-      <weather-current-wind
-        *ngIf="settings.showWind"
-        [scale]="settings.scale"
-        [deg]="currentWeather?.wind.deg"
-        [speed]="currentWeather?.wind.speed"></weather-current-wind>
-      <weather-location [place]="currentWeather?.location"></weather-location>
-      <weather-current-temperature
-        class="big"
-        [temp]="currentWeather?.temp"
-        [deg]="settings.scale"></weather-current-temperature>
-      <weather-current-details
-        *ngIf="settings.showDetails"
-        [maxTemp]="currentWeather?.maxTemp"
-        [minTemp]="currentWeather?.minTemp"
-        [pressure]="currentWeather?.pressure"
-        [humidity]="currentWeather?.humidity"></weather-current-details>
-      <weather-forecast
-        *ngIf="settings.showForecast"
-        [forecast]="forecast"
-        [settings]="settings"
-        [mode]="settings.forecastMode"></weather-forecast>
-
+    <div *ngIf="currentWeather" class="info" [class.wide]="isWideLayout">
+      <div class="current">
+        <weather-icon
+          class="big"
+          [iconImageUrl]="currentWeather?.iconUrl"
+          [iconClass]="currentWeather?.iconClass"></weather-icon>
+        <weather-current-description
+          [descripion]="currentWeather?.description"></weather-current-description>
+        <weather-current-wind
+          *ngIf="settings.showWind"
+          [scale]="settings.scale"
+          [deg]="currentWeather?.wind.deg"
+          [speed]="currentWeather?.wind.speed"></weather-current-wind>
+        <weather-location [place]="currentWeather?.location"></weather-location>
+        <weather-current-temperature
+          class="big"
+          [temp]="currentWeather?.temp"
+          [deg]="settings.scale"></weather-current-temperature>
+        <weather-current-details
+          *ngIf="settings.showDetails"
+          [maxTemp]="currentWeather?.maxTemp"
+          [minTemp]="currentWeather?.minTemp"
+          [pressure]="currentWeather?.pressure"
+          [humidity]="currentWeather?.humidity"></weather-current-details>
+      </div>
+      <div class="forecast">
+        <weather-forecast
+          *ngIf="settings.showForecast"
+          [forecast]="forecast"
+          [settings]="settings"
+          [mode]="settings.forecastMode"></weather-forecast>
+      </div>
     </div>
     <div *ngIf="!currentWeather" class="info empty">
       <i class="wi wi-sunrise"></i>
@@ -123,12 +152,16 @@ class WeatherContainer implements OnDestroy {
     if (this.weatherApi.apiConfig.name && this.weatherApi.apiConfig.key) {
       this.getWeather();
     }
+    if (this._settings.layout) {
+      this.isWideLayout = this._settings.layout === WeatherLayout.WIDE;
+    }
   }
 
   get settings(): WeatherSettings {
     return this._settings;
   }
 
+  isWideLayout: boolean = false;
   subscriptionCurrentWeather: Subscription;
   subscriptionForecast: Subscription;
   currentWeather$: Observable<CurrentWeather>;

diff --git a/src/weather.interfaces.ts b/src/weather.interfaces.ts
@@ -10,6 +10,7 @@ export class WeatherSettings {
   showForecast?: boolean;
   language?: string;
   forecastMode?: ForecastMode;
+  layout?: WeatherLayout = WeatherLayout.NARROW;
 }
 
 export enum ForecastMode {
@@ -34,3 +35,8 @@ export interface WeatherQueryParams {
   units?: TemperatureScale;
   lang?: string;
 }
+
+export enum WeatherLayout {
+  WIDE = <any>'wide',
+  NARROW = <any>'narrow'
+}
diff --git a/webpack.config.ts b/webpack.config.ts
@@ -40,7 +40,7 @@ export default {
     extensions: ['.ts', '.js']
   },
   devServer: {
-    port: 3000,
+    port: 3001,
     inline: true,
     hot: true,
     historyApiFallback: true