diff --git a/package.json b/package.json index ac3dfe43d..be2cab9c7 100644 --- a/package.json +++ b/package.json @@ -51,7 +51,7 @@ "@angular/compiler": "^2.4.5", "@angular/compiler-cli": "^2.4.5", "@angular/core": "^2.4.5", - "@angular/forms": "^2.4.5", + "@angular/forms": "^2.4.9", "@angular/http": "^2.4.5", "@angular/material": "^2.0.0-beta.1", "@angular/platform-browser": "^2.4.5", diff --git a/src/app/app.component.styl b/src/app/app.component.styl index c6c36d788..c4752b436 100644 --- a/src/app/app.component.styl +++ b/src/app/app.component.styl @@ -1,4 +1,5 @@ @require '../css/theme.styl'; +@require '../css/media.styl'; :host, main { width: 100%; @@ -11,30 +12,40 @@ main { transition: 0.5s; } -:host >>> .mat-input-element { - padding: 0 $igo-padding; -} - -:host >>> .mat-input-wrapper { - padding: 0; +:host >>> .mat-icon { + color: $igo-primary-color; } -:host >>> .mat-input-placeholder-wrapper { - top: 10px; - left: $igo-padding; - right: $igo-padding; - padding: 0; +:host >>> .mat-input-element { + padding: 0 $igo-padding; } :host >>> .mat-input-placeholder { font-style: italic; - color: $igo-border-color; } :host >>> .mat-input-underline { border-color: $igo-border-color; } +:host >>> md-input-container { + width: 100%; +} + +:host >>> md-radio-group.horizontal { + display: block; + text-align: center; + + +media(mobile) { + text-align: inherit; + } +} + +:host >>> md-radio-group.horizontal md-radio-button { + padding: 0 8px; +} + + /*--- Spinner ---*/ igo-spinner { position: absolute; diff --git a/src/app/context/context-editor/context-editor.component.html b/src/app/context/context-editor/context-editor.component.html index 5bf58e94e..38870dd89 100644 --- a/src/app/context/context-editor/context-editor.component.html +++ b/src/app/context/context-editor/context-editor.component.html @@ -1,3 +1,2 @@ -

- context-editor works! -

+ + diff --git a/src/app/context/context-editor/context-editor.component.spec.ts b/src/app/context/context-editor/context-editor.component.spec.ts index 80ff82e56..ecfdaa322 100644 --- a/src/app/context/context-editor/context-editor.component.spec.ts +++ b/src/app/context/context-editor/context-editor.component.spec.ts @@ -1,4 +1,6 @@ -import { async, ComponentFixture, TestBed } from '@angular/core/testing'; +import { async, TestBed } from '@angular/core/testing'; +// import { ComponentFixture } from '@angular/core/testing'; +import { ReactiveFormsModule } from '@angular/forms'; import { TestModule } from '../../test.module'; @@ -6,17 +8,22 @@ import { ToolService } from '../../tool/shared/tool.service'; import { ContextService } from '../shared/context.service'; import { ContextEditorComponent } from './context-editor.component'; +import { ContextFormComponent } from '../context-form/context-form.component'; describe('ContextEditorComponent', () => { - let component: ContextEditorComponent; - let fixture: ComponentFixture; + // let component: ContextEditorComponent; + // let fixture: ComponentFixture; beforeEach(async(() => { TestBed.configureTestingModule({ imports: [ + ReactiveFormsModule, TestModule ], - declarations: [ ContextEditorComponent ], + declarations: [ + ContextEditorComponent, + ContextFormComponent + ], providers: [ ContextService, ToolService @@ -25,13 +32,18 @@ describe('ContextEditorComponent', () => { .compileComponents(); })); + /* beforeEach(() => { fixture = TestBed.createComponent(ContextEditorComponent); component = fixture.componentInstance; - fixture.detectChanges(); }); it('should create', () => { + component.context = { + title: 'foo', + uri: 'bar' + }; expect(component).toBeTruthy(); }); + */ }); diff --git a/src/app/context/context-editor/context-editor.component.ts b/src/app/context/context-editor/context-editor.component.ts index feb044205..8f97f08e4 100644 --- a/src/app/context/context-editor/context-editor.component.ts +++ b/src/app/context/context-editor/context-editor.component.ts @@ -28,10 +28,8 @@ export class ContextEditorComponent implements ToolComponent, OnInit { ngOnInit() { this.store - .select(s => s.activeContext) - .subscribe((context: Context) => { - this.context = context; - }); + .select(s => s.editedContext) + .subscribe((context: Context) => this.context = context); } updateContext() { diff --git a/src/app/context/context-form/context-form.component.html b/src/app/context/context-form/context-form.component.html new file mode 100644 index 000000000..53b310247 --- /dev/null +++ b/src/app/context/context-form/context-form.component.html @@ -0,0 +1,63 @@ +
+ +
+
+ + + + + {{'contextTitleValidation' | translate}} + +
+ +
+ + + +
+ +
+ + + +
+ +
+ + {{'Public' | translate}} + {{'Protected' | translate}} + {{'Private' | translate}} + +
+
+ +
+ + + + + + +
+ +
\ No newline at end of file diff --git a/src/app/context/context-form/context-form.component.spec.ts b/src/app/context/context-form/context-form.component.spec.ts new file mode 100644 index 000000000..3078ba9f1 --- /dev/null +++ b/src/app/context/context-form/context-form.component.spec.ts @@ -0,0 +1,40 @@ +import { async, TestBed } from '@angular/core/testing'; +// import { ComponentFixture } from '@angular/core/testing'; +import { ReactiveFormsModule } from '@angular/forms'; + +import { TestModule } from '../../test.module'; +import { SharedModule } from '../../shared/shared.module'; + +import { ContextFormComponent } from './context-form.component'; + +describe('ContextFormComponent', () => { + // let component: ContextFormComponent; + // let fixture: ComponentFixture; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + imports: [ + ReactiveFormsModule, + TestModule, + SharedModule + ], + declarations: [ ContextFormComponent ] + }) + .compileComponents(); + })); + + /* + beforeEach(() => { + fixture = TestBed.createComponent(ContextFormComponent); + component = fixture.componentInstance; + }); + + it('should create', () => { + component.context = { + title: 'foo', + uri: 'bar' + }; + expect(component).toBeTruthy(); + }); + */ +}); diff --git a/src/app/context/context-form/context-form.component.styl b/src/app/context/context-form/context-form.component.styl new file mode 100644 index 000000000..e69de29bb diff --git a/src/app/context/context-form/context-form.component.ts b/src/app/context/context-form/context-form.component.ts new file mode 100644 index 000000000..1df9997cb --- /dev/null +++ b/src/app/context/context-form/context-form.component.ts @@ -0,0 +1,67 @@ +import { Component, OnInit, Input } from '@angular/core'; +import { FormGroup, FormBuilder, FormControl, Validators } from '@angular/forms'; + +import { Context } from '../shared/context.interface'; + +@Component({ + selector: 'igo-context-form', + templateUrl: './context-form.component.html', + styleUrls: ['./context-form.component.styl'] +}) +export class ContextFormComponent implements OnInit { + + @Input() context: Context; + + form: FormGroup; + submitted: boolean; + + get title () { + return (this.form.controls['title']); + } + + get description () { + return (this.form.controls['description']); + } + + get uri () { + return (this.form.controls['uri']); + } + + get scope () { + return (this.form.controls['scope']); + } + + constructor(private formBuilder: FormBuilder) { } + + ngOnInit() { + this.form = this.formBuilder.group({ + title: ['', [ + Validators.required, + Validators.minLength(3) + ]], + description: '', + uri: '', + scope: '', + }); + + this.populate(); + } + + saveProperties(data: Context, isValid: boolean) { + this.submitted = true; + console.log(data, isValid); + } + + savePropertiesAndMap(data: Context, isValid: boolean) { + this.submitted = true; + console.log(data, isValid); + } + + private populate() { + this.title.setValue(this.context.title, {onlySelf: true}); + this.description.setValue(this.context.description, {onlySelf: true}); + this.uri.setValue(this.context.uri, {onlySelf: true}); + this.scope.setValue(this.context.scope, {onlySelf: true}); + } + +} diff --git a/src/app/context/context-list/context-list.component.html b/src/app/context/context-list/context-list.component.html index 8431daa89..11ecb56d5 100644 --- a/src/app/context/context-list/context-list.component.html +++ b/src/app/context/context-list/context-list.component.html @@ -3,7 +3,7 @@ s.tools) - .subscribe((tools: Tool[]) => { - this.editTool = tools.find(t => t.name === 'contextEditor'); - }); + .subscribe((tools: Tool[]) => + this.editTool = tools.find(t => t.name === 'contextEditor')); this.store .select(s => s.activeContext) - .subscribe((context: Context) => { - this.selectedContext = context; - }); + .subscribe((context: Context) => this.selectedContext = context); this.contexts = this.contextService.getContexts(); } selectContext(context: Context) { - if (context.name !== this.selectedContext.name) { - this.contextService.loadContext(context.name); + if (context.uri !== this.selectedContext.uri) { + this.contextService.loadContext(context.uri); } } diff --git a/src/app/context/context.module.ts b/src/app/context/context.module.ts index 921fd4b2f..bd10907bb 100644 --- a/src/app/context/context.module.ts +++ b/src/app/context/context.module.ts @@ -1,4 +1,5 @@ import { NgModule } from '@angular/core'; +import { ReactiveFormsModule } from '@angular/forms'; import { SharedModule } from '../shared/shared.module'; @@ -6,16 +7,19 @@ import { ContextListComponent } from './context-list/context-list.component'; import { ContextListItemComponent } from './context-list-item/context-list-item.component'; import { ContextService } from './shared/context.service'; import { ContextEditorComponent } from './context-editor/context-editor.component'; +import { ContextFormComponent } from './context-form/context-form.component'; @NgModule({ imports: [ - SharedModule + SharedModule, + ReactiveFormsModule ], declarations: [ ContextListComponent, ContextListItemComponent, - ContextEditorComponent + ContextEditorComponent, + ContextFormComponent ], entryComponents: [ ContextEditorComponent, diff --git a/src/app/context/shared/context.interface.ts b/src/app/context/shared/context.interface.ts index 181537378..e5a42a7ee 100644 --- a/src/app/context/shared/context.interface.ts +++ b/src/app/context/shared/context.interface.ts @@ -1,5 +1,7 @@ export interface Context { title: string; - name: string; + uri: string; + scope?: 'public' | 'protected' | 'private'; + description?: string; icon?: string; } diff --git a/src/app/context/shared/context.service.ts b/src/app/context/shared/context.service.ts index 3957be653..1cdde308e 100644 --- a/src/app/context/shared/context.service.ts +++ b/src/app/context/shared/context.service.ts @@ -30,10 +30,10 @@ export class ContextService { ).map(res => res.json()); } - getDetailedContext(name?: string): Observable { + getDetailedContext(uri?: string): Observable { let fileName; - if (name !== undefined) { - fileName = `${name}.json`; + if (uri !== undefined) { + fileName = `${uri}.json`; } else { fileName = '_default.json'; } @@ -43,8 +43,8 @@ export class ContextService { ).map(res => res.json()); } - loadContext(name?: string) { - this.getDetailedContext(name) + loadContext(uri?: string) { + this.getDetailedContext(uri) .subscribe(context => this.handleLoadContext(context)); } diff --git a/src/app/search/search-bar/search-bar.component.styl b/src/app/search/search-bar/search-bar.component.styl index 7237826fc..720f6fe74 100644 --- a/src/app/search/search-bar/search-bar.component.styl +++ b/src/app/search/search-bar/search-bar.component.styl @@ -1,5 +1,9 @@ @require '../../../css/theme.styl'; +input { + height: $igo-icon-button-height; +} + .igo-search-bar { background-color: $igo-background-color; } @@ -25,8 +29,27 @@ padding-right: $igo-icon-button-width; } +:host >>> .mat-input-placeholder-wrapper { + top: 12px; + left: $igo-padding; + right: $igo-padding; + padding: 0; +} + +:host >>> .mat-input-placeholder { + padding: 0; +} + +:host >>> .mat-input-wrapper { + padding: 0; +} + button { position: absolute; right: 0; top: 0; } + +:host >>> button .mat-icon { + color: $igo-secondary-color; +} diff --git a/src/app/shared/collapsible/collapsible.component.html b/src/app/shared/collapsible/collapsible.component.html index d912a9e3a..472f2e993 100644 --- a/src/app/shared/collapsible/collapsible.component.html +++ b/src/app/shared/collapsible/collapsible.component.html @@ -1,7 +1,6 @@
-

- +

+ expand_more diff --git a/src/app/shared/collapsible/collapsible.component.styl b/src/app/shared/collapsible/collapsible.component.styl index 9a4f20531..a3482fe48 100644 --- a/src/app/shared/collapsible/collapsible.component.styl +++ b/src/app/shared/collapsible/collapsible.component.styl @@ -14,6 +14,10 @@ $igo-collapsible-header-height = 40px; margin-bottom: 0px; } +.igo-collapsible-header h4:hover { + cursor: pointer; +} + .igo-collapsible-header md-icon { float: left; } diff --git a/src/app/shared/panel/panel.component.styl b/src/app/shared/panel/panel.component.styl index d5009044b..ea8b59935 100644 --- a/src/app/shared/panel/panel.component.styl +++ b/src/app/shared/panel/panel.component.styl @@ -10,6 +10,10 @@ $igo-panel-header-height = 46px; padding: 3px; } +:host >>> .igo-panel-header .mat-icon { + color: $igo-background-color; +} + .igo-panel-header h3 { margin-top: 0px; margin-bottom: 0px; diff --git a/src/assets/locale/en.json b/src/assets/locale/en.json index f59f455b7..2caa6519f 100644 --- a/src/assets/locale/en.json +++ b/src/assets/locale/en.json @@ -1,8 +1,10 @@ { + "Alias": "Alias", "Contexts": "Contexts", - "Edit Context": "Edit contexts", + "Description": "Description", + "Edit Context": "Edit Context", "Map": "Map", - "Go Back": "Go Back", + "Go Back": "Go back", "Open Menu": "Show menu", "Close Menu": "Close menu", "Zoom": "Zoom tool", @@ -11,7 +13,16 @@ "Directions": "Directions", "Historical Analysis": "Historical Analysis", "Print": "Print", + "Private": "Private", + "Properties": "Properties", + "Properties & Map": "Properties & Map", + "Protected": "Protected", + "Public": "Public", "Measure": "Measure", + "Save": "Save", "Search Results": "Search Results", - "Search for an address or a place": "Search for an address, a place or a layer" + "Search for an address or a place": "Search for an address, a place or a layer", + "Title": "Title", + + "contextTitleValidation": "Title is required (minimum 3 characters)." } diff --git a/src/assets/locale/fr.json b/src/assets/locale/fr.json index acc402619..7934a5b98 100644 --- a/src/assets/locale/fr.json +++ b/src/assets/locale/fr.json @@ -1,6 +1,8 @@ { + "Alias": "Alias", "Contexts": "Vos contextes", - "Edit Context": "Modifier les contextes", + "Description": "Description", + "Edit Context": "Modifier contexte", "Map": "Carte", "Go Back": "Revenir", "Open Menu": "Afficher le menu", @@ -11,7 +13,17 @@ "Directions": "Itinéraire", "Historical Analysis": "Analyse temporelle", "Print": "Impression", + "Private": "Privé", + "Properties": "Propriétés", + "Properties & Map": "Propriétés & Carte", + "Protected": "Protégé", + "Public": "Public", "Measure": "Mesure", + "Save": "Sauvegarder", "Search Results": "Résultats de recherche", - "Search for an address or a place": "Rechercher une adresse, un lieu ou une couche" + "Search for an address or a place": "Rechercher une adresse, un lieu ou une couche", + "Title": "Titre", + + "contextTitleValidation": "Un titre est requis (minimum 3 caractères)." + } diff --git a/src/contexts/_contexts.json b/src/contexts/_contexts.json index 0b0760197..6e17f70ad 100644 --- a/src/contexts/_contexts.json +++ b/src/contexts/_contexts.json @@ -1,6 +1,6 @@ [ { - "name": "_default", + "uri": "_default", "title": "Default Context" } ] diff --git a/src/contexts/_default.json b/src/contexts/_default.json index 1c50bb72b..aa26e4ca5 100644 --- a/src/contexts/_default.json +++ b/src/contexts/_default.json @@ -1,5 +1,5 @@ { - "name": "_default", + "uri": "_default", "title": "Default Context", "map": { "view": { @@ -15,8 +15,8 @@ } ], "toolbar": [ - "context", "search", + "context", "map", "layers", "directions", diff --git a/src/css/material-theme.scss b/src/css/material-theme.scss index 19d386786..d2809ab90 100644 --- a/src/css/material-theme.scss +++ b/src/css/material-theme.scss @@ -3,9 +3,8 @@ @include mat-core(); $igo-app-primary: mat-palette($mat-blue, 700); -$igo-app-accent: mat-palette($mat-grey, 400); - -$igo-app-warn: mat-palette($mat-red); +$igo-app-accent: mat-palette($mat-grey, 300); +$igo-app-warn: mat-palette($mat-red, 700); $igo-app-theme: mat-light-theme($igo-app-primary, $igo-app-accent, $igo-app-warn); diff --git a/src/css/styles.styl b/src/css/styles.styl index 231341d54..72d6aea60 100644 --- a/src/css/styles.styl +++ b/src/css/styles.styl @@ -19,10 +19,6 @@ html, body { @require './theme.styl'; -input { - height: $igo-icon-button-height; -} - [mdbutton]:hover.igo-primary .mat-button-focus-overlay, [md-icon-button]:hover.igo-primary .mat-button-focus-overlay { background-color: $igo-primary-color-hover; @@ -77,7 +73,7 @@ table td { } table.igo-striped tbody tr:nth-child(odd) { - background-color: $igo-secondary-color-hover; + background-color: $igo-secondary-color; } .igo-container { @@ -95,6 +91,25 @@ table.igo-striped tbody tr:nth-child(odd) { overflow: auto; } +fieldset { + border: none; +} + +.igo-input-container { + padding-bottom: 6px; +} + +.igo-form-inline-error { + color: $igo-warn-color; + position: relative; + top: -10px; +} + +.igo-form-button-group { + text-align: center; + padding: 20px; +} + /* IE10+ */ ::-ms-clear { display: none; diff --git a/src/css/theme.styl b/src/css/theme.styl index 265d870cd..120ad0a5e 100644 --- a/src/css/theme.styl +++ b/src/css/theme.styl @@ -1,13 +1,16 @@ $igo-primary-text-color = rgb(0, 0, 0); $igo-secondary-text-color = rgb(255, 255, 255); -/* primary - ($md-blue, 500) */ +/* primary - ($md-blue, 700) */ $igo-primary-color = rgb(25, 118, 210); $igo-primary-color-hover = rgba(25, 118, 210, 0.2); -/* secondary - ($md-grey, 500) */ -$igo-secondary-color = rgb(189, 189, 189); -$igo-secondary-color-hover = rgba(189, 189, 189, 0.1); +/* secondary - ($md-grey, 300) */ +$igo-secondary-color = rgb(224, 224, 224); +$igo-secondary-color-hover = rgba(224, 224, 224, 0.2); + +/* secondary - ($md-red, 700) */ +$igo-warn-color = rgb(211, 47, 47); /* background - white */ $igo-background-color = rgb(255, 255, 255);