Commit 25e7e934 authored by mdsecurity's avatar mdsecurity
Browse files

added a show hide sidebar button

parent 3a146ec4
......@@ -43,4 +43,4 @@ Thumbs.db
scraper.js
results.json
dummy-results.json
*.swp
\ No newline at end of file
*.swp
\ No newline at end of file
No preview for this file type
......@@ -14,6 +14,7 @@ import { PlaceWindowComponent } from './place-window/place-window.component';
import { PlaceCardComponent } from './place-window/area/place-card/place-card.component';
import { AreaComponent } from './place-window/area/area.component';
import { FilterBarComponent } from './filter-bar/filter-bar.component';
import { ShowHideArrowComponent } from './context-bar/show-hide-arrow/show-hide-arrow.component';
@NgModule({
declarations: [
AppComponent,
......@@ -27,7 +28,8 @@ import { FilterBarComponent } from './filter-bar/filter-bar.component';
PlaceCardComponent,
AreaComponent,
FilterBarComponent,
FilterBarComponent
FilterBarComponent,
ShowHideArrowComponent
],
imports: [
BrowserModule,
......
<div class="light-card context-bar">
<div class="header">
<div class="context-bar-button-container">
<!--<button class="show-hide-button"(click)="show=!show">Click Me</button>-->
<app-show-hide-arrow class="show-hide-button" [isRight]='true' (change)="show = $event"></app-show-hide-arrow>
<div [ngClass]="(show)?'light-card context-bar-open' : 'light-card context-bar-closed'">
<div class="context-bar-header">
<img class="image" src="../../assets/BKing.jpg">
<div class="title">Burger King</div>
<div class="content-bar-title">Burger King</div>
</div>
<hr>
<div>
......@@ -50,3 +54,4 @@
<!--<hr>-->
<app-map></app-map>
</div>
</div>
\ No newline at end of file
@import '../../global-styles';
.show-hide-button{
margin-top:auto;
margin-bottom: auto;
}
.context-bar-button-container{
display: flex;
flex-direction: row;
height: 100%;
}
.context-bar {
height: 100%;
width: 374px;
// width: 374px;
// float: right;
// padding-left: 11px;
// padding-right: 11px
box-sizing: content-box;
transition: all .41s ease-in-out;
overflow: hidden;
}
.context-bar-closed{
@extend .context-bar;
width:0px;
padding:0px;
}
.context-bar-open{
@extend .context-bar;
width:374px;
padding-left: 11px;
padding-right: 11px;
box-sizing: content-box;
}
.image{
width: 77.8px;
height: 82.7px;
border-radius: 50%;
}
.title{
.content-bar-title{
font-family: HelveticaNeue-Medium;
font-size: 32px;
font-weight: 500;
......@@ -25,11 +46,11 @@ font-family: HelveticaNeue-Medium;
color: $primary;
margin-left: 50.5px;
}
.header{
.context-bar-header{
display: flex;
align-items: center;
height: 104.6px;
width: 100%;
width: 374px;
}
hr{
background-color: $border-color;
......@@ -55,6 +76,8 @@ hr{
.info-block{
display: flex;
flex-direction: column;
width:187px;
height:28;
}
.spacer{
......
import { Component, OnInit } from '@angular/core';
import { Component, OnInit} from '@angular/core';
@Component({
selector: 'app-context-bar',
templateUrl: './context-bar.component.html',
styleUrls: ['./context-bar.component.scss']
})
export class ContextBarComponent implements OnInit {
show: boolean = true;
constructor() { }
ngOnInit() {
}
private tempF =function(event){
console.log(event);
}
}
<svg (click)="onClick()"width="18px" height="32px" viewBox="0 0 18 32" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Generator`: Sketch 42 (36781) - http://www.bohemiancoding.com/sketch -->
<title>Close Arrow</title>
<desc>Created with Sketch.</desc>
<defs></defs>
<g id="Symbols" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="Close-Arrow">
<g transform="translate(0.000000, 0.333984)">
<path d="M18,0.127530847 C17.3295121,0.0433831801 16.6460035,0 15.9521484,0 C7.14202013,0 0,6.99436473 0,15.6223509 C0,24.250337 7.14202013,31.2447017 15.9521484,31.2447017 C16.6460035,31.2447017 17.3295121,31.2013186 18,31.1171709 L18,0.127530847 Z" id="Combined-Shape" stroke="#E6EAEE" fill="#FFFFFF"></path>
<text id="Arrow-Right-Icon" font-family="FontAwesome" font-size="18" font-weight="normal" fill="#9FA9BA">
<tspan x="3.00081759" y="21.7194516">{{arrow}}</tspan>
</text>
</g>
</g>
</g>
</svg>
\ No newline at end of file
#Arrow-Right-Icon{
user-select: none;
cursor: default;
}
\ No newline at end of file
/* tslint:disable:no-unused-variable */
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { By } from '@angular/platform-browser';
import { DebugElement } from '@angular/core';
import { ShowHideArrowComponent } from './show-hide-arrow.component';
describe('ShowHideArrowComponent', () => {
let component: ShowHideArrowComponent;
let fixture: ComponentFixture<ShowHideArrowComponent>;
beforeEach(async(() => {
TestBed.configureTestingModule({
declarations: [ ShowHideArrowComponent ]
})
.compileComponents();
}));
beforeEach(() => {
fixture = TestBed.createComponent(ShowHideArrowComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});
import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core';
@Component({
selector: 'app-show-hide-arrow',
templateUrl: './show-hide-arrow.component.html',
styleUrls: ['./show-hide-arrow.component.scss']
})
export class ShowHideArrowComponent implements OnInit {
@Input() isRight: boolean;
private arrow: string;
private show: boolean;
@Output() change: EventEmitter<boolean> = new EventEmitter<boolean>();
constructor() { }
ngOnInit() {
this.show = this.isRight;
if (this.isRight) {
this.arrow = ''; // arrow pointing right
this.change.emit(true);
} else {
this.arrow = ''; // arrow pointing left
this.change.emit(false);
}
}
onClick = function (event) {
this.show = !this.show;
if (this.show) {
this.arrow = ''; // arrow pointing right
this.change.emit(true);
} else {
this.arrow = ''; // arrow pointing left
this.change.emit(false);
}
}
}
<?xml version="1.0" encoding="UTF-8"?>
<svg width="18px" height="32px" viewBox="0 0 18 32" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Generator: Sketch 42 (36781) - http://www.bohemiancoding.com/sketch -->
<title>Close Arrow</title>
<desc>Created with Sketch.</desc>
<defs></defs>
<g id="Symbols" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="Close-Arrow">
<g transform="translate(0.000000, 0.333984)">
<path d="M18,0.127530847 C17.3295121,0.0433831801 16.6460035,0 15.9521484,0 C7.14202013,0 0,6.99436473 0,15.6223509 C0,24.250337 7.14202013,31.2447017 15.9521484,31.2447017 C16.6460035,31.2447017 17.3295121,31.2013186 18,31.1171709 L18,0.127530847 Z" id="Combined-Shape" stroke="#E6EAEE" fill="#FFFFFF"></path>
<text id="Arrow-Right-Icon" font-family="FontAwesome" font-size="18" font-weight="normal" fill="#9FA9BA">
<tspan x="3.00081759" y="21.7194516"></tspan>
</text>
</g>
</g>
</g>
</svg>
\ No newline at end of file
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment