Added a beatiful design to the sidebar sidebardesign
authorYrjan A. F. Fraschetti <yrjanaff@1x-193-157-241-240.uio.no>
Sun, 6 Dec 2015 16:24:00 +0000 (17:24 +0100)
committerYrjan A. F. Fraschetti <yrjanaff@1x-193-157-241-240.uio.no>
Sun, 6 Dec 2015 16:24:00 +0000 (17:24 +0100)
src/components/search/livesearch.ts
src/components/search/search.ts
src/components/sidebar/sidebar.html
src/components/sidebar/sidebar.ts

index e514449..941c6f2 100644 (file)
@@ -34,8 +34,7 @@ export class LiveSearch {
             .do(zone.bind(() => this.loading.next(false)))
             .subscribe(
                 zone.bind(orgunits => {
-                    //this.filterUnits(orgunits)
-                    this.results.next(orgunits/*this.filterUnits(orgunits)*/);
+                    this.results.next(orgunits);
                 }),
                 zone.bind(err => {
                     console.log(err);
index f2fffd5..5c7735f 100644 (file)
@@ -98,7 +98,8 @@ export class Search {
                                             this.setOption(this.locationSelector, result.organisationUnitGroups[j].name);
                                         }
                                     }
-                                }));
+                                })
+                            );
                     }
                 })
             )
@@ -146,6 +147,7 @@ export class Search {
 
     setFilter() {
         this.filteredOrgunits = [];
+        console.log("orgunits.length: " + this.orgunits.length);
         this.filterset = true;
         for (var i = 0; i < this.orgunits.length; i++) {
             this.http.get(this.orgunits[i].href)
index 50b0a89..267e49b 100644 (file)
@@ -1,5 +1,6 @@
 <div>
-    <div [hidden]="!active" class="form-background" style="overflow-y:auto; position:relative; float:right; ">
+    <div [hidden]="!active" class="form-background sidebar slide" style="overflow-y:auto; position:relative; float:right; ">
+        <button id="slideout" (click)="exit()"><span class="glyphicon glyphicon-chevron-right"></span> </button>
         <form *ng-if="editmode" [(ng-form-model)]="form" (ng-submit)="onSubmit()" #of="form">
             <h3>{{newObject?"Add new Organizational Unit":"Update Organizational Unit"}}</h3>
 
         </form>
 
 
-        <section *ng-if="!editmode">
-            <label for="actOrgUnitName">Name</label>
+        <section id="nonedit" *ng-if="!editmode">
+            <label class="label-text" for="actOrgUnitName">Name</label>
 
-            <p id="actOrgUnitName">{{(form.controls.name.value) || "[None]"}}</p>
+            <p id="actOrgUnitName">{{(form.controls.name.value) || "[None]"}}</p><hr>
 
-            <label for="actOrgUnitShortName">Short Name</label>
+            <label class="label-text" for="actOrgUnitShortName">Short Name</label>
 
-            <p id="actOrgUnitShortName">{{(form.controls.shortName.value)||["None"]}}</p>
+            <p id="actOrgUnitShortName">{{(form.controls.shortName.value)||["None"]}}</p><hr>
 
-            <label for="actOrgUnitDescription">Description</label>
+            <label class="label-text" for="actOrgUnitDescription">Description</label>
 
-            <p id="actOrgUnitDescription">{{(form.controls.description.value)||"None"}}</p>
+            <p id="actOrgUnitDescription">{{(form.controls.description.value)||"None"}}</p><hr>
 
-            <label for="actOrgUnitCode">Code</label>
+            <label class="label-text" for="actOrgUnitCode">Code</label>
 
-            <p id="actOrgUnitCode">{{(form.controls.code.value)||["None"]}}</p>
+            <p id="actOrgUnitCode">{{(form.controls.code.value)||["None"]}}</p><hr>
 
-            <label for="actOrgUnitOpeningDate">Opening Date</label>
+            <label class="label-text" for="actOrgUnitOpeningDate">Opening Date</label>
 
-            <p id="actOrgUnitOpeningDate">{{form.controls.openingDate.value||["None"]}}</p>
+            <p id="actOrgUnitOpeningDate">{{form.controls.openingDate.value||["None"]}}</p><hr>
 
-            <label for="actOrgUnitClosingDate">Closed Date</label>
+            <label class="label-text" for="actOrgUnitClosingDate">Closed Date</label>
 
-            <p id="actOrgUnitClosingDate">{{form.controls.closedDate.value||["None"]}}</p>
+            <p id="actOrgUnitClosingDate">{{form.controls.closedDate.value||["None"]}}</p><hr>
 
-            <label for="actOrgUnitURL">Url</label>
+            <label class="label-text" for="actOrgUnitURL">Url</label>
 
-            <p id="actOrgUnitURL">{{(form.controls.url.value) ||["None"]}}</p>
+            <p id="actOrgUnitURL">{{(form.controls.url.value) ||["None"]}}</p><hr>
 
             <button class="btn btn-default" (click)="editmode = !editmode">Edit</button>
         </section>
index b681df2..8159499 100644 (file)
@@ -23,6 +23,28 @@ declare var zone: Zone;
             height: 100vh;
             z-index: 5;
         }
+        p {
+           font-size: 14pt;
+        }
+        .label-text {
+            font-size: 16pt;
+        }
+        #nonedit{
+            margin: auto;
+            padding: 10px;
+        }
+        .sidebar{
+            box-shadow: -1px 0px 20px #888888;
+
+        }
+        .slide{
+            -webkit-transition: all cubic-bezier(0.250, 0.460, 0.450, 0.940) 2s;
+            -moz-transition: all cubic-bezier(0.250, 0.460, 0.450, 0.940) 2s;
+            -o-transition: all cubic-bezier(0.250, 0.460, 0.450, 0.940) 2s;
+            transition: all cubic-bezier(0.250, 0.460, 0.450, 0.940) 2s;
+            line-height: 20px;
+        }
+
     `]
 })
 
@@ -50,6 +72,7 @@ export class Sidebar {
     address: Control = new Control("");
     email: Control = new Control("");
     phoneNumber: Control = new Control("");
+    exitButton: any;
 
 
     constructor(http:Http, fb: FormBuilder) {
@@ -58,6 +81,7 @@ export class Sidebar {
         this.active = false;
         this.coordinatePoint = false;
         this.tempmarker = new EventEmitter();
+        this.exitButton = document.getElementById("slideout")
 
         this.form = fb.group({
             "id": this.id,
@@ -190,5 +214,9 @@ export class Sidebar {
         this.form.controls.parent.updateValue(data.parent);
 
     }
+
+    exit(){
+        this.active = false;
+    }
 }