Skip to content

Commit e54cc54

Browse files
author
cho
committed
Closes #22: add vapp static designs
1 parent 9b7bc3f commit e54cc54

46 files changed

Lines changed: 4379 additions & 139 deletions

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

‎demo/src/app/app.component.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
<div id="header">
2-
<h1>gibraltar</h1>
2+
<h1>gibraltar</h1>
33
<h2>demo</h2>
44
</div>
55
<router-outlet></router-outlet>

‎demo/src/app/app.component.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ import { Component } from '@angular/core';
33
@Component({
44
selector: 'app-root',
55
template: require('./app.component.html'),
6-
styles: [require('./app.component.less')]
6+
styles: [require('../styles.less'), require('./app.component.less')]
77
})
88
export class AppComponent {
99
title = 'demo';

‎demo/src/app/components/components-page/components-page.component.html‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@
33
<ul class="nav flex-column">
44
<li class="nav-item">
55
<a class="nav-link" routerLink="vm" routerLinkActive="active">Virtual Machine</a>
6+
<a class="nav-link" routerLink="vapp" routerLinkActive="active">Virtual Application</a>
67
<a class="nav-link" routerLink="misc" routerLinkActive="active">Miscellaneous</a>
78
</li>
89
</ul>

‎demo/src/app/components/components-page/components-page.component.less‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,7 @@
1919
background-color: #E3E8E8
2020
}
2121
.nav-link.active {
22-
background-color: lightgray !important;
23-
font-weight: 500 !important;
22+
background-color: lightgray;
23+
font-weight: 500;
2424
}
2525
}

‎demo/src/app/components/components-routing.module.ts‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@ import { NgModule } from '@angular/core';
22
import { RouterModule } from '@angular/router';
33
import { ComponentsPageComponent } from './components-page/components-page.component';
44
import { VmPageComponent } from './vm-page-component/vm-page.component';
5+
import { VappPageComponent } from './vapp-page-component/vapp-page.component';
56
import { MiscPageComponent } from './misc-page-component/misc-page.component';
67

78
const routes = [
@@ -17,6 +18,9 @@ const routes = [
1718
{
1819
path: 'vm', component: VmPageComponent
1920
},
21+
{
22+
path: 'vapp', component: VappPageComponent
23+
},
2024
{
2125
path: 'misc', component: MiscPageComponent
2226
}

‎demo/src/app/components/components.module.ts‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,8 @@ import { DemoComponent } from './demo-component/demo.component';
99
import { VmPageComponent } from './vm-page-component/vm-page.component';
1010
import { VmCreateDemoComponent } from './vm-create-demo-component/vm-create-demo.component';
1111
import { VmDeleteDemoComponent } from './vm-delete-demo-component/vm-delete-demo.component';
12+
import { VappPageComponent } from './vapp-page-component/vapp-page.component';
13+
import { VappStaticDemoComponent } from './vapp-static-demo-component/vapp-static-demo.component';
1214
import { MiscPageComponent } from './misc-page-component/misc-page.component';
1315
import { MiscScrollbarHorizontalDemoComponent } from
1416
'./misc-scrollbar-demo-component/misc-scrollbar-horizontal-demo.component';
@@ -23,6 +25,8 @@ import { MiscScrollbarVerticalDemoComponent } from
2325
VmBasicDemoComponent,
2426
ComponentsPageComponent,
2527
DemoComponent,
28+
VappPageComponent,
29+
VappStaticDemoComponent,
2630
MiscPageComponent,
2731
MiscScrollbarHorizontalDemoComponent,
2832
MiscScrollbarVerticalDemoComponent

‎demo/src/app/components/misc-page-component/misc-page.component.ts‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
11
import { Component } from '@angular/core';
22

33
@Component({
4-
selector: 'other-page',
4+
selector: 'misc-page',
55
template: `
6-
<div id="other-page">
6+
<div id="misc-page">
77
<misc-scrollbar-horizontal-demo></misc-scrollbar-horizontal-demo>
88
<misc-scrollbar-vertical-demo></misc-scrollbar-vertical-demo>
99
</div>

‎demo/src/app/components/misc-scrollbar-demo-component/misc-scrollbar-horizontal-demo.component.ts‎

Lines changed: 21 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -7,8 +7,8 @@ import { DEFAULT_SCROLLBAR_THICKNESS } from '../../../../../src/constants/dimens
77

88
@Component({
99
selector: 'misc-scrollbar-horizontal-demo',
10-
template: `
11-
<demo label="Horizontal Scrollbar" height="200"
10+
template: `
11+
<demo label="Horizontal Scrollbar" height="162"
1212
description="Scrollbar UI component for horizontal scrolling with the default scrollbar and scroll track."
1313
runnable="true" (run)="run()" (reset)="reset()"></demo>
1414
` })
@@ -26,7 +26,7 @@ export class MiscScrollbarHorizontalDemoComponent implements AfterViewInit {
2626
proj.activeLayer.applyMatrix = false;
2727
this.demo.backgroundColor = CANVAS_BACKGROUND_COLOR;
2828
const view = paper.view;
29-
const canvas = this.demo.canvas.nativeElement;
29+
const canvas = paper.view.element;
3030
const VIEW_PADDING = 30;
3131

3232
// create content
@@ -37,13 +37,13 @@ export class MiscScrollbarHorizontalDemoComponent implements AfterViewInit {
3737
: i % 15 === 0 && 'fizzbuzz' || i % 3 === 0 && 'fizz' || i % 5 === 0 && 'buzz' || i;
3838
content.addChildren([
3939
new paper.Path.Circle({
40-
position: new paper.Point((100 + 15) * i + 50, view.center.y - 15),
40+
position: new paper.Point((100 + 15) * i + 50, view.center.y),
4141
radius: 50,
4242
strokeWidth: 1,
4343
strokeColor: LIGHT_GREY
4444
}),
4545
new paper.PointText({
46-
point: new paper.Point((100 + 15) * i + 50, view.center.y + 10 - 15),
46+
point: new paper.Point((100 + 15) * i + 50, view.center.y + 10),
4747
content: textContent,
4848
fillColor: LIGHT_GREY,
4949
fontSize: 25,
@@ -54,21 +54,24 @@ export class MiscScrollbarHorizontalDemoComponent implements AfterViewInit {
5454
content.translate(new paper.Point(VIEW_PADDING, 0));
5555

5656
// create scrollbar
57-
const scrollbar = new ScrollbarComponent(
58-
{ content: content, containerBounds: view.bounds, contentOffsetEnd: VIEW_PADDING },
59-
new paper.Point(VIEW_PADDING, view.bounds.bottom - VIEW_PADDING - DEFAULT_SCROLLBAR_THICKNESS),
60-
view.bounds.width - VIEW_PADDING * 2,
61-
'horizontal'
57+
const scrollbar = new ScrollbarComponent({
58+
content: content,
59+
containerBounds: view.bounds,
60+
contentOffsetEnd: VIEW_PADDING
61+
},
62+
new paper.Point(VIEW_PADDING, view.size.height - DEFAULT_SCROLLBAR_THICKNESS - 10),
63+
view.bounds.width - VIEW_PADDING * 2
6264
);
65+
if (scrollbar.isEnabled) {
66+
canvas.onmouseenter = scrollbar.containerMouseEnter;
67+
canvas.onmouseleave = scrollbar.containerMouseLeave;
68+
69+
// add scroll listening. paper doesn't have a wheel event handler
70+
canvas.onwheel = (event: WheelEvent) => {
71+
scrollbar.onScroll(event);
72+
};
73+
}
6374

64-
// add scroll listening. paper doesn't have a wheel event handler
65-
canvas.onwheel = (event: WheelEvent) => {
66-
scrollbar.onScroll(event);
67-
};
68-
// paper tools are global, so specific tools need to be activated when a different view is active
69-
view.onMouseEnter = () => {
70-
scrollbar.activateDefaultTool();
71-
};
7275
}
7376

7477
run() {

‎demo/src/app/components/misc-scrollbar-demo-component/misc-scrollbar-vertical-demo.component.ts‎

Lines changed: 19 additions & 52 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,14 @@
11
import { AfterViewInit, Component, ViewChild } from '@angular/core';
22
import * as paper from 'paper';
33
import { DemoComponent } from '../demo-component/demo.component';
4-
import { LIGHT_GREY, CANVAS_BACKGROUND_COLOR, VAPP_BACKGROUND_COLOR } from '../../../../../src/constants/colors';
4+
import { LIGHT_GREY, CANVAS_BACKGROUND_COLOR } from '../../../../../src/constants/colors';
55
import { ScrollbarComponent } from '../../../../../src/components/scrollbar';
6-
import { DEFAULT_SCROLLBAR_THICKNESS } from '../../../../../src/constants/dimensions';
76

87
@Component({
98
selector: 'misc-scrollbar-vertical-demo',
109
template: `
1110
<demo label="Vertical Scrollbar" height="800"
12-
description="Scrollbar UI component for vertical scrolling with custom scrollbar, track, and effects."
11+
description="Scrollbar UI component for vertical scrolling with default scrollbar and track."
1312
runnable="true" (run)="run()" (reset)="reset()"></demo>
1413
` })
1514
export class MiscScrollbarVerticalDemoComponent implements AfterViewInit {
@@ -26,7 +25,7 @@ export class MiscScrollbarVerticalDemoComponent implements AfterViewInit {
2625
proj.activeLayer.applyMatrix = false;
2726
this.demo.backgroundColor = CANVAS_BACKGROUND_COLOR;
2827
const view = paper.view;
29-
const canvas = this.demo.canvas.nativeElement;
28+
const canvas = paper.view.element;
3029
const VIEW_PADDING = 30;
3130

3231
// create content
@@ -54,57 +53,25 @@ export class MiscScrollbarVerticalDemoComponent implements AfterViewInit {
5453
content.translate(new paper.Point(0, VIEW_PADDING));
5554

5655
// create scrollbar
57-
const scrollbar = new ScrollbarComponent(
58-
{ content: content, containerBounds: view.bounds, contentOffsetEnd: VIEW_PADDING },
59-
new paper.Point(view.bounds.right - VIEW_PADDING - DEFAULT_SCROLLBAR_THICKNESS, VIEW_PADDING),
56+
const scrollbar = new ScrollbarComponent({
57+
content: content,
58+
containerBounds: view.bounds,
59+
contentOffsetEnd: VIEW_PADDING
60+
},
61+
new paper.Point(view.bounds.right - VIEW_PADDING, VIEW_PADDING),
6062
view.bounds.height - VIEW_PADDING * 2,
61-
'vertical');
63+
'vertical'
64+
);
65+
if (scrollbar.isEnabled) {
66+
canvas.onmouseenter = scrollbar.containerMouseEnter;
67+
canvas.onmouseleave = scrollbar.containerMouseLeave;
6268

63-
// add scroll listening. paper doesn't have a wheel event handler
64-
canvas.onwheel = (event: WheelEvent) => {
65-
scrollbar.onScroll(event);
66-
};
67-
// paper tools are global, so specific tools need to be activated when a different view is active
68-
view.onMouseEnter = () => {
69-
scrollbar.activateDefaultTool();
70-
};
71-
72-
scrollbar.getScrollbar().fillColor = 'red';
73-
scrollbar.getTrack().fillColor = 'blue';
74-
75-
// set up custom scrollbar
76-
const customScrollbar = new paper.Path.Rectangle({
77-
point: new paper.Point(-6.5, 0),
78-
size: new paper.Size(15, 15),
79-
pivot: new paper.Point(0, 0),
80-
radius: 15 / 2,
81-
fillColor: LIGHT_GREY
82-
});
83-
customScrollbar.remove();
84-
scrollbar.setScrollbar(customScrollbar);
85-
86-
// set up custom track
87-
const customTrack = new paper.Path.Rectangle({
88-
point: new paper.Point(0, 0),
89-
size: new paper.Size(2, view.bounds.height - VIEW_PADDING * 2),
90-
fillColor: VAPP_BACKGROUND_COLOR
91-
});
92-
customTrack.remove();
93-
scrollbar.setTrack(customTrack);
69+
// add scroll listening. paper doesn't have a wheel event handler
70+
canvas.onwheel = (event: WheelEvent) => {
71+
scrollbar.onScroll(event);
72+
};
73+
}
9474

95-
// set custom Effects
96-
(scrollbar.getScrollbar() as paper.Path).opacity = 1;
97-
scrollbar.disableDefaultEffects();
98-
scrollbar.setCustomEffects({
99-
setActive: () => {
100-
(scrollbar.getScrollbar() as paper.Path).fillColor = 'DeepSkyBlue';
101-
},
102-
setNormal: () => {
103-
(scrollbar.getScrollbar() as any).tweenTo({
104-
fillColor: LIGHT_GREY
105-
}, 250);
106-
}
107-
});
10875
}
10976

11077
run() {

‎demo/src/app/components/vapp-page-component/vapp-page.component.ts‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
import { Component } from '@angular/core';
2+
3+
@Component({
4+
selector: 'vapp-demo',
5+
template: `
6+
<div id="vapp-page">
7+
<vapp-static-demo></vapp-static-demo>
8+
</div>
9+
`
10+
})
11+
export class VappPageComponent {
12+
}

0 commit comments

Comments
 (0)