feat(panel): add panel styles (#28)

positive-js · Aug 23, 2018 · 17ebb58 · 17ebb58
1 parent 8a70a7b
commit 17ebb58
Show file tree

Hide file tree

Showing 9 changed files with 297 additions and 0 deletions.
diff --git a/commitlint.config.js b/commitlint.config.js
@@ -12,6 +12,7 @@ module.exports = {
                 'common',
                 'typography',
                 'button',
+                'panel',
                 'list',
                 'checkbox',
                 'radio',

diff --git a/package.json b/package.json
@@ -137,6 +137,7 @@
         "server-dev": "webpack-dev-server --config tools/webpack/webpack.config.js",
         "server-dev:button": "npm run server-dev -- --env.component button",
         "server-dev:list": "npm run server-dev -- --env.component list",
+        "server-dev:panel": "npm run server-dev -- --env.component panel",
         "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/src/lib-dev/panel/module.ts b/src/lib-dev/panel/module.ts
@@ -0,0 +1,47 @@
+import { CommonModule } from '@angular/common';
+import { Component, ViewEncapsulation, NgModule } from '@angular/core';
+import { FormsModule } from '@angular/forms';
+
+import { BrowserModule } from '@angular/platform-browser';
+import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
+
+import { McButtonModule } from '../../lib/button';
+import { McIconModule } from '../../lib/icon';
+import { McListModule } from '../../lib/list';
+
+
+@Component({
+    selector: 'app',
+    template: require('./template.html'),
+    encapsulation: ViewEncapsulation.None,
+    styleUrls: ['./styles.scss']
+})
+export class PanelDemoComponent {
+    page: string = 'first';
+    test: boolean = true;
+    selectedItems = [];
+    narwhalCategories = [];
+}
+
+
+@NgModule({
+    declarations: [
+        PanelDemoComponent
+    ],
+    imports: [
+        CommonModule,
+        BrowserModule,
+        McButtonModule,
+        McIconModule,
+        McListModule,
+        FormsModule
+    ],
+    bootstrap: [
+        PanelDemoComponent
+    ]
+})
+export class PanelDemoModule {}  // tslint:disable-line no-unnecessary-class
+
+platformBrowserDynamic()
+    .bootstrapModule(PanelDemoModule);
+
diff --git a/src/lib-dev/panel/styles.scss b/src/lib-dev/panel/styles.scss
@@ -0,0 +1,75 @@
+@import '~@ptsecurity/mosaic-icons/dist/styles/mc-icons';
+@import '../../lib/core/theming/prebuilt/default-theme';
+@import '../../lib/core/visual/prebuilt/default-visual';
+
+@include mosaic-visual();
+
+body {
+    margin: 0px;
+    background-color: ghostwhite;
+}
+
+app {
+    overflow: hidden;
+    height: 100vh;
+    display: flex;
+    flex-direction: column;
+}
+
+.pages {
+    display: flex;
+    flex-direction: column;
+    flex-grow: 1;
+}
+
+.panel-container {
+    padding: 16px;
+}
+
+.title {
+    margin: 0px;
+}
+
+.buttons-container {
+    margin-left: auto;
+    justify-self: flex-end;
+}
+
+.footer-button {
+    margin-left: 16px!important;
+}
+
+.list {
+    margin-top: 16px;
+}
+
+.list__short {
+    width: 400px;
+}
+
+.narwhals__action {
+    margin-left: 8px!important;
+}
+
+.narwhals__panel {
+    flex-grow: 1;
+}
+
+.narwhals__footer {
+    justify-content: space-between;
+}
+
+.narwhals__content {
+    display: flex!important;
+    flex-grow: 1;
+}
+
+.narwhals__left {
+    flex-shrink: 0;
+}
+
+.narwhals__main {
+    flex-grow: 1;
+    margin-left: 16px;
+    text-align: justify;
+}
diff --git a/src/lib-dev/panel/template.html b/src/lib-dev/panel/template.html
@@ -0,0 +1,121 @@
+<h1>Panel</h1>
+<div>
+    Page:
+    <select [(ngModel)]="page">
+        <option [ngValue]="'first'">First</option>
+        <option [ngValue]="'list'">List</option>
+        <option [ngValue]="'narwhals'">Narwhals</option>
+    </select>
+</div>
+<div class="pages" [ngSwitch]="page">
+    <div *ngSwitchCase="'first'" class="panel-container">
+        <div class="mc-panel">
+            <div class="mc-panel__header">
+                <div class="mc-panel__title">
+                    <h1 class="mc-display-1 title">Some title</h1>
+                </div>
+                <div class="mc-panel__actions">
+                    <button mc-icon-button color="primary">
+                        <i mc-icon="mc-angle-L_16"></i>
+                    </button>
+                </div>
+            </div>
+            <div class="mc-panel__content">
+                Vivamus suscipit tortor eget felis porttitor volutpat. Vivamus magna justo, lacinia eget consectetur sed, convallis at tellus. Quisque velit nisi, pretium ut lacinia in, elementum id enim. Pellentesque in ipsum id orci porta dapibus. Curabitur arcu erat, accumsan id imperdiet et, porttitor at sem. Donec sollicitudin molestie malesuada. Curabitur non nulla sit amet nisl tempus convallis quis ac lectus. Mauris blandit aliquet elit, eget tincidunt nibh pulvinar a. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum ac diam sit amet quam vehicula elementum sed sit amet dui.
+                Praesent sapien massa, convallis a pellentesque nec, egestas non nisi. Mauris blandit aliquet elit, eget tincidunt nibh pulvinar a. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec velit neque, auctor sit amet aliquam vel, ullamcorper sit amet ligula. Nulla porttitor accumsan tincidunt. Nulla quis lorem ut libero malesuada feugiat. Curabitur non nulla sit amet nisl tempus convallis quis ac lectus. Praesent sapien massa, convallis a pellentesque nec, egestas non nisi. Pellentesque in ipsum id orci porta dapibus. Praesent sapien massa, convallis a pellentesque nec, egestas non nisi. Donec rutrum congue leo eget malesuada.
+                Proin eget tortor risus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum ac diam sit amet quam vehicula elementum sed sit amet dui. Donec sollicitudin molestie malesuada. Pellentesque in ipsum id orci porta dapibus. Curabitur aliquet quam id dui posuere blandit. Vestibulum ac diam sit amet quam vehicula elementum sed sit amet dui. Curabitur arcu erat, accumsan id imperdiet et, porttitor at sem. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed porttitor lectus nibh.
+                Donec sollicitudin molestie malesuada. Praesent sapien massa, convallis a pellentesque nec, egestas non nisi. Curabitur arcu erat, accumsan id imperdiet et, porttitor at sem. Mauris blandit aliquet elit, eget tincidunt nibh pulvinar a. Vivamus suscipit tortor eget felis porttitor volutpat. Nulla quis lorem ut libero malesuada feugiat. Curabitur aliquet quam id dui posuere blandit. Donec sollicitudin molestie malesuada. Quisque velit nisi, pretium ut lacinia in, elementum id enim. Donec sollicitudin molestie malesuada.
+                Proin eget tortor risus. Vivamus magna justo, lacinia eget consectetur sed, convallis at tellus. Cras ultricies ligula sed magna dictum porta. Cras ultricies ligula sed magna dictum porta. Cras ultricies ligula sed magna dictum porta. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin eget tortor risus. Proin eget tortor risus. Curabitur arcu erat, accumsan id imperdiet et, porttitor at sem. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec velit neque, auctor sit amet aliquam vel, ullamcorper sit amet ligula.
+            </div>
+            <div class="mc-panel__footer">
+                <div class="buttons-container">
+                    <button mc-button color="primary">Save</button>
+                    <button mc-button class="footer-button">Cancel</button>
+                </div>
+            </div>
+        </div>
+    </div>
+    <div *ngSwitchCase="'list'" class="panel-container">
+        <div class="mc-panel">
+            <mc-list-selection
+                class="mc-no-select"
+                [(ngModel)]="selectedItems">
+
+                <mc-list-option value="disabled" disabled>Disabled</mc-list-option>
+                <mc-list-option value="Item 1">Item 1</mc-list-option>
+                <mc-list-option value="Item 2">Item 2</mc-list-option>
+                <mc-list-option value="Item 3">Item 3</mc-list-option>
+                <mc-list-option value="Item 4">Item 4</mc-list-option>
+            </mc-list-selection>
+        </div>
+        <div class="mc-panel list list__short">
+            <mc-list-selection
+                class="mc-no-select"
+                [(ngModel)]="selectedItems">
+
+                <mc-list-option value="disabled" disabled>Disabled</mc-list-option>
+                <mc-list-option value="Item 1">Item 1</mc-list-option>
+                <mc-list-option value="Item 2">Item 2</mc-list-option>
+                <mc-list-option value="Item 3">Item 3</mc-list-option>
+                <mc-list-option value="Item 4">Item 4</mc-list-option>
+            </mc-list-selection>
+        </div>
+        <div class="mc-panel list list__short">
+            <div class="mc-panel__content">
+                <mc-list-selection
+                    class="mc-no-select"
+                    [(ngModel)]="selectedItems">
+
+                    <mc-list-option value="disabled" disabled>Disabled</mc-list-option>
+                    <mc-list-option value="Item 1">Item 1</mc-list-option>
+                    <mc-list-option value="Item 2">Item 2</mc-list-option>
+                    <mc-list-option value="Item 3">Item 3</mc-list-option>
+                    <mc-list-option value="Item 4">Item 4</mc-list-option>
+                </mc-list-selection>
+            </div>
+        </div>
+    </div>
+    <div *ngSwitchCase="'narwhals'" class="mc-panel narwhals__panel">
+        <div class="mc-panel__header">
+            <div class="mc-panel__title">
+                <h1 class="mc-display-1 title">Narwhals</h1>
+            </div>
+            <div class="mc-panel__actions">
+                <button mc-icon-button color="primary">
+                    <i mc-icon="mc-gear_16"></i>
+                </button>
+                <button mc-icon-button class="narwhals__action">
+                    <i mc-icon="mc-hamburger_16"></i>
+                </button>
+                <button mc-icon-button color="warn" class="narwhals__action">
+                    <i mc-icon="mc-close-S_16"></i>
+                </button>
+            </div>
+        </div>
+        <div class="mc-panel__content narwhals__main">
+            <div class="narwhals__left">
+                <mc-list-selection
+                    class="mc-no-select"
+                    [(ngModel)]="narwhalCategories"
+                    multiple="false">
+
+                    <mc-list-option value="all" disabled>All narwhals</mc-list-option>
+                    <mc-list-option value="grey">Grey narwhals</mc-list-option>
+                    <mc-list-option value="pink">Pink narwhals</mc-list-option>
+                    <mc-list-option value="cute">Cute narwhals</mc-list-option>
+                </mc-list-selection>
+            </div>
+            <div class="narwhals__main">
+                Vivamus suscipit tortor eget felis porttitor volutpat. Vivamus magna justo, lacinia eget consectetur sed, convallis at tellus. Quisque velit nisi, pretium ut lacinia in, elementum id enim. Pellentesque in ipsum id orci porta dapibus. Curabitur arcu erat, accumsan id imperdiet et, porttitor at sem. Donec sollicitudin molestie malesuada. Curabitur non nulla sit amet nisl tempus convallis quis ac lectus. Mauris blandit aliquet elit, eget tincidunt nibh pulvinar a. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum ac diam sit amet quam vehicula elementum sed sit amet dui.
+                Praesent sapien massa, convallis a pellentesque nec, egestas non nisi. Mauris blandit aliquet elit, eget tincidunt nibh pulvinar a. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec velit neque, auctor sit amet aliquam vel, ullamcorper sit amet ligula. Nulla porttitor accumsan tincidunt. Nulla quis lorem ut libero malesuada feugiat. Curabitur non nulla sit amet nisl tempus convallis quis ac lectus. Praesent sapien massa, convallis a pellentesque nec, egestas non nisi. Pellentesque in ipsum id orci porta dapibus. Praesent sapien massa, convallis a pellentesque nec, egestas non nisi. Donec rutrum congue leo eget malesuada.
+                Proin eget tortor risus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum ac diam sit amet quam vehicula elementum sed sit amet dui. Donec sollicitudin molestie malesuada. Pellentesque in ipsum id orci porta dapibus. Curabitur aliquet quam id dui posuere blandit. Vestibulum ac diam sit amet quam vehicula elementum sed sit amet dui. Curabitur arcu erat, accumsan id imperdiet et, porttitor at sem. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed porttitor lectus nibh.
+                Donec sollicitudin molestie malesuada. Praesent sapien massa, convallis a pellentesque nec, egestas non nisi. Curabitur arcu erat, accumsan id imperdiet et, porttitor at sem. Mauris blandit aliquet elit, eget tincidunt nibh pulvinar a. Vivamus suscipit tortor eget felis porttitor volutpat. Nulla quis lorem ut libero malesuada feugiat. Curabitur aliquet quam id dui posuere blandit. Donec sollicitudin molestie malesuada. Quisque velit nisi, pretium ut lacinia in, elementum id enim. Donec sollicitudin molestie malesuada.
+                Proin eget tortor risus. Vivamus magna justo, lacinia eget consectetur sed, convallis at tellus. Cras ultricies ligula sed magna dictum porta. Cras ultricies ligula sed magna dictum porta. Cras ultricies ligula sed magna dictum porta. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin eget tortor risus. Proin eget tortor risus. Curabitur arcu erat, accumsan id imperdiet et, porttitor at sem. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec velit neque, auctor sit amet aliquam vel, ullamcorper sit amet ligula.
+            </div>
+        </div>
+        <div class="mc-panel__footer narwhals__footer">
+            <span class="mc-small-text">Today narwhals made to smile 57 people</span>
+            <button mc-button color="primary">New narwhal</button>
+        </div>
+    </div>
+</div>
diff --git a/src/lib/core/theming/_all-theme.scss b/src/lib/core/theming/_all-theme.scss
@@ -1,6 +1,7 @@
 // Import all the theming
 @import '../core';
 @import '../styles/badges';
+@import '../visual/panel-theme';
 @import '../../button/button-theme';
 @import '../../list/list-theme';
 @import '../../progress-bar/progress-bar-theme';
@@ -18,6 +19,7 @@
     @include mc-badge-theme($theme);
     @include mc-button-theme($theme);
     @include mc-list-theme($theme);
+    @include mc-panel-theme($theme);
     @include mc-progress-bar-theme($theme);
     @include mc-progress-spinner-theme($theme);
     @include mc-radio-theme($theme);

diff --git a/src/lib/core/visual/_all-visual.scss b/src/lib/core/visual/_all-visual.scss
@@ -1,6 +1,7 @@
 @import './body';
 @import './layout';
 @import './layout-media';
+@import './panel';
 
 
 @mixin mosaic-visual() {

diff --git a/src/lib/core/visual/_panel-theme.scss b/src/lib/core/visual/_panel-theme.scss
@@ -0,0 +1,12 @@
+@import '../theming/theming';
+@import '../theming/palette';
+
+@mixin mc-panel-theme($theme) {
+    $backgroundColor: map-get(map-get($theme, background), background);
+    $borderColor: map-get($mc-grey, 60);
+
+    .mc-panel {
+        background-color: $backgroundColor;
+        border: 1px solid $borderColor;
+    }
+}
diff --git a/src/lib/core/visual/_panel.scss b/src/lib/core/visual/_panel.scss
@@ -0,0 +1,37 @@
+$vertical-padding: 12px;
+$horizontal-padding: 24px;
+
+@mixin mc-panel-element-padding() {
+    padding: $vertical-padding $horizontal-padding;
+}
+
+.mc-panel {
+    display: flex;
+    flex-direction: column;
+    border-radius: 3px;
+
+    &__header {
+        @include mc-panel-element-padding();
+        display: flex;
+    }
+
+    &__title {
+        display: block;
+        flex-grow: 1;
+    }
+
+    &__actions {
+        display: block;
+        flex-shrink: 0;
+    }
+
+    &__content {
+        @include mc-panel-element-padding();
+        display: block;
+    }
+
+    &__footer {
+        @include mc-panel-element-padding();
+        display: flex;
+    }
+}