Commit d0045ebf authored by mdsecurity's avatar mdsecurity

midway through TimeRangeComponent

parent 833bf3af
......@@ -4,7 +4,7 @@ root = true
[*]
charset = utf-8
indent_style = space
indent_size = 2
indent_size = 4
insert_final_newline = true
trim_trailing_whitespace = true
......
No preview for this file type
......@@ -18,9 +18,14 @@
"prefix": "app",
"mobile": false,
"styles": [
"styles.scss"
"../node_modules/bootstrap/scss/bootstrap.scss",
"../node_modules/font-awesome/scss/font-awesome.scss",
"styles.scss",
"text-styles.scss"
],
"scripts": [
],
"scripts": [],
"environments": {
"source": "environments/environment.ts",
"dev": "environments/environment.ts",
......
Hi
\ No newline at end of file
<app-nav-bar></app-nav-bar>
<app-context-bar></app-context-bar>
\ No newline at end of file
......@@ -4,12 +4,16 @@ import { FormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';
import { AppComponent } from './app.component';
import { LocationViewComponent } from './location-view/location-view.component';
import { NavBarComponent } from './nav-bar/nav-bar.component';
import { ContextBarComponent } from './context-bar/context-bar.component';
import { TimeRangeComponent } from './context-bar/time-range/time-range.component';
@NgModule({
declarations: [
AppComponent,
LocationViewComponent
NavBarComponent,
ContextBarComponent,
TimeRangeComponent
],
imports: [
BrowserModule,
......
<div class="light-card context-bar">
<div class="header">
<img class="image" src="../../assets/BKing.jpg">
<div class="title">Burger King</div>
</div>
<hr>
<div>
<div class="info">
<div class="column">
<div class="info-block">
<div class="info-header">Location</div>
<div class="info-text">The Johnson Center</div>
</div>
<div class="spacer"></div>
<div class="info-block">
<div class="info-header">Mobile</div>
<div class="info-text">+44 (0) 7887-665-588</div>
</div>
</div>
<div class="column">
<div class="info-block">
<div class="info-header">Menu</div>
<div class="info-text"><a>bk.com</a></div>
</div>
<div class="spacer"></div>
<div class="info-block ">
<div class="info-header">Tags</div>
<div class="tag-container">
<div class="tag">
<div class="tag-text">h</div>
</div>
<div class="tag">
<div class="tag-text">Som</div>
</div>
<div class="tag">
<div class="tag-text">Somethg</div>
</div>
<div class="tag">
<div class="tag-text">ng</div>
</div>
<div class="tag">
<div class="tag-text">Somhing</div>
</div>
</div>
</div>
</div>
</div>
<app-time-range></app-time-range>
</div>
@import '../../color-palette';
.context-bar {
height: 100%;
width: 374px;
float: right;
padding: 11px;
}
.light-card {
background-color: $white;
border-radius: 4px;
border-width: 1px;
border-style: solid;
border-color: $border-color;
}
.image{
width: 77.8px;
height: 82.7px;
border-radius: 50%;
}
.title{
font-family: HelveticaNeue-Medium;
font-size: 32px;
font-weight: 500;
font-style: normal;
font-stretch: normal;
text-align: left;
color: $primary;
margin-left: 50.5px;
}
.header{
display: flex;
align-items: center;
height: 104.6px;
width: 100%;
}
hr{
background-color: $border-color;
margin-top: 16.5px;
margin-bottom: 16.5px;
}
.info{
display: flex;
flex-direction: row;
// justify-content: space-between;
}
.column {
flex-grow: 1;
flex-shrink: 1;
flex-basis: 48%;
min-height: 61.9px;
// background-color: #00ffff;
display: flex;
flex-direction: column;
}
.info-block{
display: flex;
flex-direction: column;
}
.spacer{
height:14.7px;
width: 1px;
}
.tag{
display:inline-block;
height: 15.8px;
width:40px;
padding-right: 4px;
padding-left: 4px;
padding-top: 2px;
background-color: $primary;
border-radius: 4px;
}
.tag-container{
width: 168px;
height:78px;
display: flex;
flex-direction: row;
flex-wrap: wrap;
align-content: flex-start;
// width: 100%;
}
\ 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 { ContextBarComponent } from './context-bar.component';
describe('ContextBarComponent', () => {
let component: ContextBarComponent;
let fixture: ComponentFixture<ContextBarComponent>;
beforeEach(async(() => {
TestBed.configureTestingModule({
declarations: [ ContextBarComponent ]
})
.compileComponents();
}));
beforeEach(() => {
fixture = TestBed.createComponent(ContextBarComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});
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 {
constructor() { }
ngOnInit() {
}
}
hi there
<div *ngFor="let day of days;">
<svg width="350px" height="21px" viewBox="0 0 350 21" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Generator: Sketch 41.2 (35397) - http://www.bohemiancoding.com/sketch -->
<title>Skinny Time Bar</title>
<desc>Created with Sketch.</desc>
<defs>
<rect id="path-1" x="0" y="0" width="350" height="21" rx="4"></rect>
<mask id="mask-2" maskContentUnits="userSpaceOnUse" maskUnits="objectBoundingBox" x="0" y="0" width="350" height="21" fill="white">
<use xlink:href="#path-1"></use>
</mask>
<radialGradient cx="50%" cy="50%" fx="50%" fy="50%" r="50%" id="radialGradient-3">
<stop stop-color="#1991EB" offset="0%"></stop>
<stop stop-color="#2DA1F8" offset="100%"></stop>
</radialGradient>
<text id="text-4" font-family="HelveticaNeue, Helvetica Neue" font-size="8" font-weight="normal" fill="#FFFFFF">
<tspan x="203" y="9">8:20 PM</tspan>
</text>
<filter x="-50%" y="-50%" width="200%" height="200%" filterUnits="objectBoundingBox" id="filter-5">
<feOffset dx="0" dy="1" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
<feGaussianBlur stdDeviation="4" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
<feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.5 0" type="matrix" in="shadowBlurOuter1"></feColorMatrix>
</filter>
<text id="text-6" font-family="HelveticaNeue, Helvetica Neue" font-size="8" font-weight="normal" fill="#FFFFFF">
<tspan x="4" y="9">6:20 AM</tspan>
</text>
<filter x="-50%" y="-50%" width="200%" height="200%" filterUnits="objectBoundingBox" id="filter-7">
<feOffset dx="0" dy="1" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
<feGaussianBlur stdDeviation="4" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
<feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.5 0" type="matrix" in="shadowBlurOuter1"></feColorMatrix>
</filter>
</defs>
<g id="Symbols" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="Skinny-Time-Bar">
<g id="Time-Bar">
<use id="Base" stroke="#E6EAEE" mask="url(#mask-2)" stroke-width="2" fill="#FFFFFF" xlink:href="#path-1"></use>
<text id="Day" font-family="HelveticaNeue, Helvetica Neue" font-size="10" font-weight="normal" fill="#354052">
<tspan x="8.235" y="14">MON</tspan>
</text>
<g id="Small-Ticks" transform="translate(53.000000, 7.620000)" fill="#354052" fill-opacity="0.75">
<rect id="Small-Tick" x="0.5" y="0" width="1" height="6"></rect>
<rect id="Small-Tick" x="13" y="0" width="1" height="6"></rect>
<rect id="Small-Tick" x="25.5" y="0" width="1" height="6"></rect>
<rect id="Small-Tick" x="50.5" y="0" width="1" height="6"></rect>
<rect id="Small-Tick" x="63" y="0" width="1" height="6"></rect>
<rect id="Small-Tick" x="75.5" y="0" width="1" height="6"></rect>
<rect id="Small-Tick" x="100.5" y="0" width="1" height="6"></rect>
<rect id="Small-Tick" x="113" y="0" width="1" height="6"></rect>
<rect id="Small-Tick" x="125.5" y="0" width="1" height="6"></rect>
<rect id="Small-Tick" x="150.5" y="0" width="1" height="6"></rect>
<rect id="Small-Tick" x="163" y="0" width="1" height="6"></rect>
<rect id="Small-Tick" x="175.5" y="0" width="1" height="6"></rect>
<rect id="Small-Tick" x="200.5" y="0" width="1" height="6"></rect>
<rect id="Small-Tick" x="213" y="0" width="1" height="6"></rect>
<rect id="Small-Tick" x="225.5" y="0" width="1" height="6"></rect>
<rect id="Small-Tick" x="250.5" y="0" width="1" height="6"></rect>
<rect id="Small-Tick" x="263" y="0" width="1" height="6"></rect>
<rect id="Small-Tick" x="275.5" y="0" width="1" height="6"></rect>
</g>
<rect id="Horizontal-Line" fill-opacity="0.5" fill="#354052" x="42" y="9.75" width="300" height="1.5"></rect>
<g id="Big-Ticks" transform="translate(40.000000, 6.000000)" fill="#354052">
<rect id="Big-Tick" x="0" y="0" width="2" height="9"></rect>
<rect id="Big-Tick" x="50.1666667" y="0" width="2" height="9"></rect>
<rect id="Big-Tick" x="100.333333" y="0" width="2" height="9"></rect>
<rect id="Big-Tick" x="150.5" y="0" width="2" height="9"></rect>
<rect id="Big-Tick" x="200.666667" y="0" width="2" height="9"></rect>
<rect id="Big-Tick" x="250.833333" y="0" width="2" height="9"></rect>
<rect id="Big-Tick" x="302" y="0" width="2" height="9"></rect>
</g>
<g id="Blue-Bar-with-Text" [attr.transform]="day[0]">
<rect id="Time-Marker" fill-opacity="0.9" fill="url(#radialGradient-3)" x="0" y="0" [attr.width]="day[1]" height="13" rx="6.5"></rect>
<g id="End-Time" fill-opacity="1" fill="#FFFFFF">
<use filter="url(#filter-5)" xlink:href="#text-4"></use>
<use xlink:href="#text-4"></use>
</g>
<g id="Start-Time" fill-opacity="1" fill="#FFFFFF">
<use filter="url(#filter-7)" xlink:href="#text-6"></use>
<use xlink:href="#text-6"></use>
</g>
</g>
</g>
</g>
</g>
</svg>
</div>
/* 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 { TimeRangeComponent } from './time-range.component';
describe('TimeRangeComponent', () => {
let component: TimeRangeComponent;
let fixture: ComponentFixture<TimeRangeComponent>;
beforeEach(async(() => {
TestBed.configureTestingModule({
declarations: [ TimeRangeComponent ]
})
.compileComponents();
}));
beforeEach(() => {
fixture = TestBed.createComponent(TimeRangeComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});
import { Component, OnInit } from '@angular/core';
import { Time } from '../../time';
@Component({
selector: 'app-time-range',
templateUrl: './time-range.component.html',
styleUrls: ['./time-range.component.scss']
})
export class TimeRangeComponent implements OnInit {
days: string[][] = [['translate(40, 4.000000)', '237']];
constructor() { }
ngOnInit() {
}
timeToPixel(time: Time): number {
let pixelPerMinute: number = 0.2111111111111111;
let past12 = pixelPerMinute * 60 * 12;
return 40 + ((time.hour * 60 + time.minute) * pixelPerMinute) + ((time.ampm == 'AM') ? 0 : past12);
}
}
<div class="nav-bar">
<div class="nav-icon"></div>
<a class="selected-nav nav-link" href="#">What's Open</a>
<a class="deselected-nav nav-link"href="#">Feedback</a>
<a class="deselected-nav nav-link"href="#">About</a>
<i class="fa fa-user-circle fa-2x user-icon"></i>
<img class="menu-arrow" src="../../assets/menu-arrow.png">
</div>
@import "../../color-palette.scss";
.nav-icon {
height: 40px;
width: 40px;
margin-right: 17px;
margin-left: 24px;
background-color: $background-color;
}
.nav-link {
margin-right: 12px;
}
.nav-bar {
background-color: $white;
height: 50px;
width: 100%;
display: flex;
align-items: center;
// border-radius: 0;
// margin-bottom: 0;
}
.user-icon {
margin-left: auto;
}
.menu-arrow {
margin-left: 6px;
margin-right: 40px;
}
\ 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 { NavBarComponent } from './nav-bar.component';
describe('NavBarComponent', () => {
let component: NavBarComponent;
let fixture: ComponentFixture<NavBarComponent>;
beforeEach(async(() => {
TestBed.configureTestingModule({
declarations: [ NavBarComponent ]
})
.compileComponents();
}));
beforeEach(() => {
fixture = TestBed.createComponent(NavBarComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-nav-bar',
templateUrl: './nav-bar.component.html',
styleUrls: ['./nav-bar.component.scss']
})
export class NavBarComponent implements OnInit {
constructor() { }
ngOnInit() {
}
}
export class Location {
export class Place {
_name: string;
picture: string;
_status: string;
......
<?xml version="1.0" encoding="UTF-8"?>
<svg width="10px" height="6px" viewBox="0 0 10 6" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Generator: Sketch 41.2 (35397) - http://www.bohemiancoding.com/sketch -->
<title>Arrow</title>
<desc>Created with Sketch.</desc>
<defs></defs>
<g id="Home-V2" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="Context-Window-&amp;-Filter" transform="translate(-1232.000000, -23.000000)" fill="#354052">
<g id="Group" transform="translate(-1.000000, 0.000000)">
<g id="Nav-Bar">
<g id="Action-Bar" transform="translate(1191.101617, 6.052734)">
<path d="M45.1119458,19.8661571 L45.1119458,15.1192403 C45.1119458,14.8402601 44.8857153,14.6186797 44.6066458,14.6186797 L44.1247234,14.6186797 C43.8526301,14.6186797 43.6194234,14.8427883 43.6194234,15.1192403 L43.6194234,20.7778286 C43.6194234,21.0568087 43.8456539,21.2783892 44.1247234,21.2783892 L44.2532361,21.2783892 C44.3307611,21.3289709 44.4227641,21.3586794 44.5214352,21.3586794 L50.1800235,21.3586794 C50.4590037,21.3586794 50.6805841,21.1324489 50.6805841,20.8533794 L50.6805841,20.371457 C50.6805841,20.0993637 50.4564755,19.8661571 50.1800235,19.8661571 L45.1119458,19.8661571 Z" id="Arrow" transform="translate(47.150004, 17.988680) rotate(-45.000000) translate(-47.150004, -17.988680) "></path>
</g>
</g>
</g>
</g>
</g>
</svg>
\ No newline at end of file
<?xml version="1.0" encoding="UTF-8"?>
<svg width="350px" height="21px" viewBox="0 0 350 21" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Generator: Sketch 41.2 (35397) - http://www.bohemiancoding.com/sketch -->
<title>Skinny Time Bar</title>
<desc>Created with Sketch.</desc>
<defs>
<rect id="path-1" x="0" y="0" width="350" height="21" rx="4"></rect>
<mask id="mask-2" maskContentUnits="userSpaceOnUse" maskUnits="objectBoundingBox" x="0" y="0" width="350" height="21" fill="white">
<use xlink:href="#path-1"></use>
</mask>
<radialGradient cx="50%" cy="50%" fx="50%" fy="50%" r="50%" id="radialGradient-3">
<stop stop-color="#1991EB" offset="0%"></stop>
<stop stop-color="#2DA1F8" offset="100%"></stop>
</radialGradient>
<text id="text-4" font-family="HelveticaNeue, Helvetica Neue" font-size="8" font-weight="normal" fill="#FFFFFF">
<tspan x="203" y="9">8:20 PM</tspan>
</text>
<filter x="-50%" y="-50%" width="200%" height="200%" filterUnits="objectBoundingBox" id="filter-5">
<feOffset dx="0" dy="1" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
<feGaussianBlur stdDeviation="4" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
<feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.5 0" type="matrix" in="shadowBlurOuter1"></feColorMatrix>
</filter>
<text id="text-6" font-family="HelveticaNeue, Helvetica Neue" font-size="8" font-weight="normal" fill="#FFFFFF">
<tspan x="4" y="9">6:20 AM</tspan>
</text>
<filter x="-50%" y="-50%" width="200%" height="200%" filterUnits="objectBoundingBox" id="filter-7">
<feOffset dx="0" dy="1" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
<feGaussianBlur stdDeviation="4" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
<feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.5 0" type="matrix" in="shadowBlurOuter1"></feColorMatrix>
</filter>
</defs>
<g id="Symbols" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="Skinny-Time-Bar">
<g id="Time-Bar">
<use id="Base" stroke="#E6EAEE" mask="url(#mask-2)" stroke-width="2" fill="#FFFFFF" xlink:href="#path-1"></use>
<text id="Day" font-family="HelveticaNeue, Helvetica Neue" font-size="10" font-weight="normal" fill="#354052">
<tspan x="8.235" y="14">MON</tspan>
</text>
<g id="Small-Ticks" transform="translate(53.000000, 7.620000)" fill="#354052" fill-opacity="0.75">
<rect id="Small-Tick" x="0.5" y="0" width="1" height="6"></rect>
<rect id="Small-Tick" x="13" y="0" width="1" height="6"></rect>
<rect id="Small-Tick" x="25.5" y="0" width="1" height="6"></rect>
<rect id="Small-Tick" x="50.5" y="0" width="1" height="6"></rect>
<rect id="Small-Tick" x="63" y="0" width="1" height="6"></rect>
<rect id="Small-Tick" x="75.5" y="0" width="1" height="6"></rect>
<rect id="Small-Tick" x="100.5" y="0" width="1" height="6"></rect>
<rect id="Small-Tick" x="113" y="0" width="1" height="6"></rect>
<rect id="Small-Tick" x="125.5" y="0" width="1" height="6"></rect>
<rect id="Small-Tick" x="150.5" y="0" width="1" height="6"></rect>
<rect id="Small-Tick" x="163" y="0" width="1" height="6"></rect>
<rect id="Small-Tick" x="175.5" y="0" width="1" height="6"></rect>
<rect id="Small-Tick" x="200.5" y="0" width="1" height="6"></rect>
<rect id="Small-Tick" x="213" y="0" width="1" height="6"></rect>
<rect id="Small-Tick" x="225.5" y="0" width="1" height="6"></rect>
<rect id="Small-Tick" x="250.5" y="0" width="1" height="6"></rect>
<rect id="Small-Tick" x="263" y="0" width="1" height="6"></rect>
<rect id="Small-Tick" x="275.5" y="0" width="1" height="6"></rect>
</g>
<rect id="Horizontal-Line" fill-opacity="0.5" fill="#354052" x="42" y="9.75" width="300" height="1.5"></rect>
<g id="Big-Ticks" transform="translate(40.000000, 6.000000)" fill="#354052">
<rect id="Big-Tick" x="0" y="0" width="2" height="9"></rect>
<rect id="Big-Tick" x="50.1666667" y="0" width="2" height="9"></rect>
<rect id="Big-Tick" x="100.333333" y="0" width="2" height="9"></rect>
<rect id="Big-Tick" x="150.5" y="0" width="2" height="9"></rect>
<rect id="Big-Tick" x="200.666667" y="0" width="2" height="9"></rect>
<rect id="Big-Tick" x="250.833333" y="0" width="2" height="9"></rect>
<rect id="Big-Tick" x="302" y="0" width="2" height="9"></rect>
</g>
<g id="Blue-Bar-with-Text" transform="translate(78.000000, 4.000000)">
<rect id="Time-Marker" fill-opacity="0.9" fill="url(#radialGradient-3)" x="0" y="0" width="237" height="13" rx="6.5"></rect>
<g id="End-Time" fill-opacity="1" fill="#FFFFFF">
<use filter="url(#filter-5)" xlink:href="#text-4"></use>
<use xlink:href="#text-4"></use>
</g>
<g id="Start-Time" fill-opacity="1" fill="#FFFFFF">
<use filter="url(#filter-7)" xlink:href="#text-6"></use>
<use xlink:href="#text-6"></use>
</g>
</g>
</g>
</g>
</g>
</svg>
\ No newline at end of file
<?xml version="1.0" encoding="UTF-8"?>
<svg width="303px" height="12px" viewBox="0 0 303 12" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Generator: Sketch 41.2 (35397) - http://www.bohemiancoding.com/sketch -->
<title>time-line</title>
<desc>Created with Sketch.</desc>
<defs></defs>
<g id="Symbols" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="Time-Bar" transform="translate(-40.000000, -6.000000)" fill="#354052">
<g id="time-line">
<g transform="translate(40.000000, 6.000000)">
<g id="Small-Ticks" transform="translate(13.000000, 3.000000)" fill-opacity="0.75">
<rect id="Small-Tick" x="0.5" y="0" width="1" height="6"></rect>
<rect id="Small-Tick" x="13" y="0" width="1" height="6"></rect>
<rect id="Small-Tick" x="25.5" y="0" width="1" height="6"></rect>
<rect id="Small-Tick" x="50.5" y="0" width="1" height="6"></rect>
<rect id="Small-Tick" x="63" y="0" width="1" height="6"></rect>
<rect id="Small-Tick" x="75.5" y="0" width="1" height="6"></rect>
<rect id="Small-Tick" x="100.5" y="0" width="1" height="6"></rect>
<rect id="Small-Tick" x="113" y="0" width="1" height="6"></rect>
<rect id="Small-Tick" x="125.5" y="0" width="1" height="6"></rect>
<rect id="Small-Tick" x="150.5" y="0" width="1" height="6"></rect>
<rect id="Small-Tick" x="163" y="0" width="1" height="6"></rect>
<rect id="Small-Tick" x="175.5" y="0" width="1" height="6">