feat: add sidebar (#145)

positive-js · Jun 26, 2019 · 9f618eb · 9f618eb
1 parent 481f7e9
commit 9f618eb
Show file tree

Hide file tree

Showing 42 changed files with 708 additions and 664 deletions.
diff --git a/package.json b/package.json
@@ -167,7 +167,6 @@
         "server-dev:icon": "npm run server-dev -- --env.component icon",
         "server-dev:input": "npm run server-dev -- --env.component input",
         "server-dev:flex-layout": "npm run server-dev -- --env.component flex-layout",
-        "server-dev:layout": "npm run server-dev -- --env.component layout",
         "server-dev:link": "npm run server-dev -- --env.component link",
         "server-dev:list": "npm run server-dev -- --env.component list",
         "server-dev:modal": "npm run server-dev -- --env.component modal",
@@ -178,6 +177,7 @@
         "server-dev:progress-spinner": "npm run server-dev -- --env.component progress-spinner",
         "server-dev:radio": "npm run server-dev -- --env.component radio",
         "server-dev:select": "npm run server-dev -- --env.component select",
+        "server-dev:sidebar": "npm run server-dev -- --env.component sidebar",
         "server-dev:sidepanel": "npm run server-dev -- --env.component sidepanel",
         "server-dev:splitter": "npm run server-dev -- --env.component splitter",
         "server-dev:tabs": "npm run server-dev -- --env.component tabs",

diff --git a/packages/cdk/keycodes/keycodes.ts b/packages/cdk/keycodes/keycodes.ts
@@ -1,3 +1,4 @@
+/* tslint:disable:no-magic-numbers no-bitwise */
 
 export const MAC_ENTER = 3;
 export const BACKSPACE = 8;
@@ -128,3 +129,65 @@ export function hasModifierKey(event: KeyboardEvent, ...modifiers: ModifierKey[]
 
     return event.altKey || event.shiftKey || event.ctrlKey || event.metaKey;
 }
+
+export function isControl(event) {
+    const keyCode = event.which;
+    switch (keyCode) {
+        case SHIFT:
+        case CONTROL:
+        case ALT:
+            return true;
+        default:
+            return !!event.metaKey;
+    }
+}
+
+export function isNumberKey(event) {
+    const keyCode = event.which ? event.which : event;
+
+    return keyCode >= 49 && keyCode <= 57;
+}
+
+export function isLetterKey(event) {
+    const keyCode = event.which ? event.which : event;
+
+    return keyCode >= 65 && keyCode <= 90;
+}
+
+export function isFunctionKey(event) {
+    const keyCode = event.which ? event.which : event;
+
+    return keyCode >= 112 && keyCode <= 123;
+}
+
+export function isVerticalMovement(event) {
+    return ~[UP_ARROW, DOWN_ARROW, PAGE_DOWN, PAGE_UP, HOME, END].indexOf(event);
+}
+
+export function isHorizontalMovement(event) {
+    return ~[LEFT_ARROW, RIGHT_ARROW, BACKSPACE, DELETE].indexOf(event);
+}
+
+export function isSelectAll(event) {
+    return event.ctrlKey && event.keyCode === 65;
+}
+
+export function isCopy(event) {
+    return event.ctrlKey && event.keyCode === 67;
+}
+
+export function isInput(event) {
+    return event.target.tagName === 'INPUT' || event.target.tagName === 'TEXTAREA';
+}
+
+export function isLeftBracket(event) {
+    return event.code === 'BracketLeft';
+}
+
+export function isRightBracket(event) {
+    return event.code === 'BracketRight';
+}
+
+export function isDigit(event) {
+    return [48, 49, 50, 51, 52, 53, 54, 55, 56, 57].indexOf(event.which) !== -1;
+}
diff --git a/packages/dev-app/system-config.ts b/packages/dev-app/system-config.ts
@@ -74,7 +74,6 @@ System.config({
         '@ptsecurity/mosaic/progress-bar': 'dist/packages/mosaic/progress-bar/index.js',
         '@ptsecurity/mosaic/progress-spinner': 'dist/packages/mosaic/progress-spinner/index.js',
         '@ptsecurity/mosaic/icon': 'dist/packages/mosaic/icon/index.js',
-        '@ptsecurity/mosaic/layout': 'dist/packages/mosaic/layout/index.js',
         '@ptsecurity/mosaic/link': 'dist/packages/mosaic/link/index.js',
         '@ptsecurity/mosaic/radio': 'dist/packages/mosaic/radio/index.js',
         '@ptsecurity/mosaic/checkbox': 'dist/packages/mosaic/checkbox/index.js',

diff --git a/packages/mosaic-dev/all/module.ts b/packages/mosaic-dev/all/module.ts
@@ -16,7 +16,6 @@ import { McDropdownModule } from '@ptsecurity/mosaic/dropdown';
 import { McFormFieldModule } from '@ptsecurity/mosaic/form-field';
 import { McIconModule } from '@ptsecurity/mosaic/icon';
 import { McInputModule } from '@ptsecurity/mosaic/input';
-import { McLayoutModule } from '@ptsecurity/mosaic/layout';
 import { McLinkModule } from '@ptsecurity/mosaic/link';
 import { McListModule } from '@ptsecurity/mosaic/list';
 import { McModalModule, McModalService } from '@ptsecurity/mosaic/modal';
@@ -204,7 +203,6 @@ export class DemoComponent {
         McDropdownModule,
         McInputModule,
         McFormFieldModule,
-        McLayoutModule,
         McNavbarModule,
         McListModule,
         McModalModule,

diff --git a/packages/mosaic-dev/all/template.html b/packages/mosaic-dev/all/template.html
@@ -600,49 +600,6 @@ <h1>Input</h1>
         </mc-form-field>
     </div>
 
-    <div class="dev-box">
-        <h1>Layout</h1>
-
-        <mc-layout>
-            <mc-header>Header</mc-header>
-            <mc-content>Content</mc-content>
-            <mc-footer>Footer</mc-footer>
-        </mc-layout>
-
-        <br><br>
-
-        <mc-layout>
-            <mc-header>Header</mc-header>
-            <mc-layout>
-                <mc-content>Content</mc-content>
-                <mc-sidebar>Sidebar</mc-sidebar>
-            </mc-layout>
-        </mc-layout>
-
-        <br><br>
-
-        <mc-layout>
-            <mc-sidebar>Sidebar</mc-sidebar>
-            <mc-layout>
-                <mc-header>Header</mc-header>
-                <mc-content>Content</mc-content>
-                <mc-footer>Footer</mc-footer>
-            </mc-layout>
-        </mc-layout>
-
-        <br><br>
-
-        <mc-layout>
-            <mc-sidebar>Sidebar</mc-sidebar>
-            <mc-layout>
-                <mc-header>Header</mc-header>
-                <mc-content>Content</mc-content>
-                <mc-footer>Footer</mc-footer>
-            </mc-layout>
-            <mc-sidebar>Sidebar</mc-sidebar>
-        </mc-layout>
-    </div>
-
     <div class="dev-box">
         <h1>Link</h1>
 

diff --git a/packages/mosaic-dev/layout/module.ts b/packages/mosaic-dev/layout/module.ts
diff --git a/packages/mosaic-dev/layout/styles.scss b/packages/mosaic-dev/layout/styles.scss
diff --git a/packages/mosaic-dev/layout/template.html b/packages/mosaic-dev/layout/template.html
diff --git a/packages/mosaic-dev/sidebar/module.ts b/packages/mosaic-dev/sidebar/module.ts
@@ -0,0 +1,60 @@
+/* tslint:disable:no-console */
+import { Component, NgModule, ViewEncapsulation } from '@angular/core';
+import { BrowserModule } from '@angular/platform-browser';
+import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
+import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
+import { McIconModule } from '@ptsecurity/mosaic/icon';
+import { McSidebarModule } from '@ptsecurity/mosaic/sidebar';
+import { McSplitterModule } from '@ptsecurity/mosaic/splitter';
+
+import { McButtonModule } from '../../mosaic/button';
+
+
+@Component({
+    selector: 'app',
+    template: require('./template.html'),
+    styleUrls: ['./styles.scss'],
+    encapsulation: ViewEncapsulation.None
+})
+export class DemoComponent {
+    leftSidebarSidebarState: boolean = false;
+    leftSplitterState: boolean = false;
+
+    rightSidebarSidebarState: boolean = false;
+    rightSplitterState: boolean = false;
+
+    onStateChanged($event): void {
+        console.log('onStateChanged: ', $event);
+    }
+
+    toggleLeftSidebar() {
+        this.leftSidebarSidebarState = !this.leftSidebarSidebarState;
+    }
+
+    toggleRightSidebar() {
+        this.rightSidebarSidebarState = !this.rightSidebarSidebarState;
+    }
+}
+
+
+@NgModule({
+    declarations: [
+        DemoComponent
+    ],
+    imports: [
+        BrowserModule,
+        BrowserAnimationsModule,
+        McSplitterModule,
+        McButtonModule,
+        McSidebarModule
+    ],
+    bootstrap: [
+        DemoComponent
+    ]
+})
+export class DemoModule {}
+
+platformBrowserDynamic()
+    .bootstrapModule(DemoModule)
+    .catch((error) => console.error(error));
+