feat(popover): added popover component (#120)

positive-js · May 26, 2019 · d2e885e · d2e885e
1 parent 10eab4c
commit d2e885e
Show file tree

Hide file tree

Showing 18 changed files with 1,845 additions and 17 deletions.
diff --git a/package.json b/package.json
@@ -174,6 +174,7 @@
         "server-dev:modal": "npm run server-dev -- --env.component modal",
         "server-dev:navbar": "npm run server-dev -- --env.component navbar",
         "server-dev:panel": "npm run server-dev -- --env.component panel",
+        "server-dev:popover": "npm run server-dev -- --env.component popover",
         "server-dev:progress-bar": "npm run server-dev -- --env.component progress-bar",
         "server-dev:progress-spinner": "npm run server-dev -- --env.component progress-spinner",
         "server-dev:radio": "npm run server-dev -- --env.component radio",

diff --git a/packages/mosaic-dev/popover/module.ts b/packages/mosaic-dev/popover/module.ts
@@ -0,0 +1,158 @@
+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 { McButtonModule } from '@ptsecurity/mosaic/button';
+import { McPopoverModule } from '@ptsecurity/mosaic/popover';
+import { McIconModule } from '../../mosaic/icon/';
+
+
+/* tslint:disable:no-trailing-whitespace */
+@Component({
+    selector: 'app',
+    styleUrls: ['./styles.css'],
+    encapsulation: ViewEncapsulation.None,
+    template: require('./template.html')
+})
+export class DemoComponent {
+    private popoverActiveStage: number;
+
+    private isPopoverVisibleLeft: boolean = false;
+    private isPopoverVisibleLeftTop: boolean = false;
+    private isPopoverVisibleLeftBottom: boolean = false;
+    private isPopoverVisibleBottom: boolean = false;
+    private isPopoverVisibleBottomRight: boolean = false;
+    private isPopoverVisibleBottomLeft: boolean = false;
+    private isPopoverVisibleRight: boolean = false;
+    private isPopoverVisibleRightTop: boolean = false;
+    private isPopoverVisibleRightBottom: boolean = false;
+    private isPopoverVisibleTop: boolean = false;
+    private isPopoverVisibleTopRight: boolean = false;
+    private isPopoverVisibleTopLeft: boolean = false;
+
+    constructor() {
+        this.popoverActiveStage = 1;
+    }
+
+    changeStep(direction: number) {
+        this.popoverActiveStage += direction;
+    }
+
+    changePopoverVisibilityLeft() {
+        this.isPopoverVisibleLeft = !this.isPopoverVisibleLeft;
+    }
+
+    changePopoverVisibilityLeftTop() {
+        this.isPopoverVisibleLeftTop = !this.isPopoverVisibleLeftTop;
+    }
+
+    changePopoverVisibilityLeftBottom() {
+        this.isPopoverVisibleLeftBottom = !this.isPopoverVisibleLeftBottom;
+    }
+
+    changePopoverVisibilityBottom() {
+        this.isPopoverVisibleBottom = !this.isPopoverVisibleBottom;
+    }
+
+    changePopoverVisibilityBottomRight() {
+        this.isPopoverVisibleBottomRight = !this.isPopoverVisibleBottomRight;
+    }
+
+    changePopoverVisibilityBottomLeft() {
+        this.isPopoverVisibleBottomLeft = !this.isPopoverVisibleBottomLeft;
+    }
+
+    changePopoverVisibilityRight() {
+        this.isPopoverVisibleRight = !this.isPopoverVisibleRight;
+    }
+
+    changePopoverVisibilityRightTop() {
+        this.isPopoverVisibleRightTop = !this.isPopoverVisibleRightTop;
+    }
+
+    changePopoverVisibilityRightBottom() {
+        this.isPopoverVisibleRightBottom = !this.isPopoverVisibleRightBottom;
+    }
+
+    changePopoverVisibilityTop() {
+        this.isPopoverVisibleTop = !this.isPopoverVisibleTop;
+    }
+
+    changePopoverVisibilityTopRight() {
+        this.isPopoverVisibleTopRight = !this.isPopoverVisibleTopRight;
+    }
+
+    changePopoverVisibilityTopLeft() {
+        this.isPopoverVisibleTopLeft = !this.isPopoverVisibleTopLeft;
+    }
+
+    onPopoverVisibleChangeLeft(update: boolean) {
+        this.isPopoverVisibleLeft = update;
+    }
+
+    onPopoverVisibleChangeLeftTop(update: boolean) {
+        this.isPopoverVisibleLeftTop = update;
+    }
+
+    onPopoverVisibleChangeLeftBottom(update: boolean) {
+        this.isPopoverVisibleLeftBottom = update;
+    }
+
+    onPopoverVisibleChangeBottom(update: boolean) {
+        this.isPopoverVisibleBottom = update;
+    }
+
+    onPopoverVisibleChangeBottomRight(update: boolean) {
+        this.isPopoverVisibleBottomRight = update;
+    }
+
+    onPopoverVisibleChangeBottomLeft(update: boolean) {
+        this.isPopoverVisibleBottomLeft = update;
+    }
+
+    onPopoverVisibleChangeRight(update: boolean) {
+        this.isPopoverVisibleRight = update;
+    }
+
+    onPopoverVisibleChangeRightTop(update: boolean) {
+        this.isPopoverVisibleRightTop = update;
+    }
+
+    onPopoverVisibleChangeRightBottom(update: boolean) {
+        this.isPopoverVisibleRightBottom = update;
+    }
+
+    onPopoverVisibleChangeTop(update: boolean) {
+        this.isPopoverVisibleTop = update;
+    }
+
+    onPopoverVisibleChangeTopRight(update: boolean) {
+        this.isPopoverVisibleTopRight = update;
+    }
+
+    onPopoverVisibleChangeTopLeft(update: boolean) {
+        this.isPopoverVisibleTopLeft = update;
+    }
+}
+
+@NgModule({
+    declarations: [
+        DemoComponent
+    ],
+    imports: [
+        BrowserModule,
+        BrowserAnimationsModule,
+        McPopoverModule,
+        McButtonModule,
+        McIconModule
+    ],
+    bootstrap: [
+        DemoComponent
+    ]
+})
+export class DemoModule {
+}
+
+platformBrowserDynamic()
+    .bootstrapModule(DemoModule)
+    .catch((error) => console.error(error)); // tslint:disable-line
diff --git a/packages/mosaic-dev/popover/styles.scss b/packages/mosaic-dev/popover/styles.scss
@@ -0,0 +1,45 @@
+@import '~@ptsecurity/mosaic-icons/dist/styles/mc-icons';
+
+@import '../../mosaic/core/visual/prebuilt/default-visual';
+
+@import '../../mosaic/core/theming/prebuilt/default-theme';
+//@import '../../lib/core/theming/prebuilt/dark-theme';
+
+@include mosaic-visual();
+
+body, html {
+    width: 100%;
+    height: 100%;
+    margin: 0;
+}
+
+app {
+    height: 100%;
+    width: 100%;
+    display: flex;
+    flex: 1 1 100%;
+    flex-flow: column;
+    justify-content: center;
+    align-items: stretch;
+    padding: 0 10%;
+}
+
+.popover-485 {
+    width: 485px;
+}
+
+
+button.step {
+    display: inline-block;
+    width: 30%;
+    min-width: 100px;
+}
+
+.trigger-button {
+    width: 130px;
+    margin: 15px;
+}
+
+button.with-margin {
+    margin: 0 5%;
+}