removed md2

+ replaced the date/time picker in scrumboard
2025-01-09 20:15:07 +00:00 · 2017-09-11 16:19:46 +03:00 · 2017-09-11 16:19:46 +03:00 · dde2333c8a
commit dde2333c8a
parent babf6dc47b
9 changed files with 410 additions and 73 deletions
--- a/package-lock.json
+++ b/package-lock.json
@ -1,6 +1,6 @@
 {
  "name": "fuse2",
-  "version": "1.0.4",
+  "version": "1.0.5",
  "lockfileVersion": 1,
  "requires": true,
  "dependencies": {
@ -4001,14 +4001,6 @@
            }
          }
        },
-        "string_decoder": {
-          "version": "1.0.1",
-          "bundled": true,
-          "dev": true,
-          "requires": {
-            "safe-buffer": "5.0.1"
-          }
-        },
        "string-width": {
          "version": "1.0.2",
          "bundled": true,
@ -4019,6 +4011,14 @@
            "strip-ansi": "3.0.1"
          }
        },
+        "string_decoder": {
+          "version": "1.0.1",
+          "bundled": true,
+          "dev": true,
+          "requires": {
+            "safe-buffer": "5.0.1"
+          }
+        },
        "stringstream": {
          "version": "0.0.5",
          "bundled": true,
@ -5917,11 +5917,6 @@
      "integrity": "sha1-3oGf282E3M2PrlnGrreWFbnSZqw=",
      "dev": true
    },
-    "md2": {
-      "version": "0.0.28",
-      "resolved": "https://registry.npmjs.org/md2/-/md2-0.0.28.tgz",
-      "integrity": "sha512-XQ71eTVKG3oRsGBj3lMLqL8p2inueqDXn++a2EntzWkUPlBZXPCPtlpfI9ER/LAlBKwJZQSqTzFItw7q9+vgvw=="
-    },
    "md5.js": {
      "version": "1.3.4",
      "resolved": "https://registry.npmjs.org/md5.js/-/md5.js-1.3.4.tgz",
@ -6173,6 +6168,14 @@
      "integrity": "sha1-KzJxhOiZIQEXeyhWP7XnECrNDKk=",
      "dev": true
    },
+    "ng-pick-datetime": {
+      "version": "5.0.0-beta.4",
+      "resolved": "https://registry.npmjs.org/ng-pick-datetime/-/ng-pick-datetime-5.0.0-beta.4.tgz",
+      "integrity": "sha1-GT+giu6j4gK75GmUzfJeg3XG7dU=",
+      "requires": {
+        "date-fns": "1.28.5"
+      }
+    },
    "ngx-color-picker": {
      "version": "4.3.1",
      "resolved": "https://registry.npmjs.org/ngx-color-picker/-/ngx-color-picker-4.3.1.tgz",
@ -8685,15 +8688,6 @@
      "integrity": "sha1-J5siXfHVgrH1TmWt3UNS4Y+qBxM=",
      "dev": true
    },
-    "string_decoder": {
-      "version": "1.0.3",
-      "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.0.3.tgz",
-      "integrity": "sha512-4AH6Z5fzNNBcH+6XDMfA/BTt87skxqJlO0lAh3Dker5zThcAxG6mKz+iGu308UKoPPQ8Dcqx/4JhujzltRa+hQ==",
-      "dev": true,
-      "requires": {
-        "safe-buffer": "5.1.1"
-      }
-    },
    "string-width": {
      "version": "2.1.1",
      "resolved": "https://registry.npmjs.org/string-width/-/string-width-2.1.1.tgz",
@ -8721,6 +8715,15 @@
        }
      }
    },
+    "string_decoder": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.0.3.tgz",
+      "integrity": "sha512-4AH6Z5fzNNBcH+6XDMfA/BTt87skxqJlO0lAh3Dker5zThcAxG6mKz+iGu308UKoPPQ8Dcqx/4JhujzltRa+hQ==",
+      "dev": true,
+      "requires": {
+        "safe-buffer": "5.1.1"
+      }
+    },
    "stringstream": {
      "version": "0.0.5",
      "resolved": "https://registry.npmjs.org/stringstream/-/stringstream-0.0.5.tgz",
--- a/package.json
+++ b/package.json
@ -35,8 +35,8 @@
    "hammerjs": "2.0.8",
    "highlight.js": "9.12.0",
    "intl": "1.2.5",
-    "md2": "0.0.28",
    "moment": "2.18.1",
+    "ng-pick-datetime": "5.0.0-beta.4",
    "ngx-color-picker": "4.3.1",
    "ngx-cookie-service": "1.0.7",
    "ngx-perfect-scrollbar": "4.5.6",
--- a/src/app/core/modules/shared.module.ts
+++ b/src/app/core/modules/shared.module.ts
@ -20,8 +20,9 @@ import { FuseMdSidenavHelperService } from '../directives/md-sidenav-helper/md-s
 import { FuseHljsComponent } from '../components/hljs/hljs.component';
 import { FuseIfOnDomDirective } from '../directives/fuse-if-on-dom/fuse-if-on-dom.directive';
 import { FuseMaterialColorPickerComponent } from '../components/material-color-picker/material-color-picker.component';
-import { Md2Module } from 'md2';
 import { CookieService } from 'ngx-cookie-service';
+import { DateTimePickerModule } from 'ng-pick-datetime';
+

@NgModule({
    declarations   : [
@ -44,7 +45,7 @@ import { CookieService } from 'ngx-cookie-service';
        ColorPickerModule,
        NgxDnDModule,
        NgxDatatableModule,
-        Md2Module
+        DateTimePickerModule
    ],
    exports        : [
        FlexLayoutModule,
@ -63,7 +64,7 @@ import { CookieService } from 'ngx-cookie-service';
        NgxDatatableModule,
        FuseIfOnDomDirective,
        FuseMaterialColorPickerComponent,
-        Md2Module
+        DateTimePickerModule
    ],
    entryComponents: [
        FuseConfirmDialogComponent
--- a/src/app/core/scss/partials/_colors.scss
+++ b/src/app/core/scss/partials/_colors.scss
@ -54,8 +54,7 @@ $matColorHues: 50, 100, 200, 300, 400, 500, 600, 700, 800, 900, A100, A200, A400
        &.secondary-text,
        .secondary-text,
        .mat-icon,
-        .icon,
-        .md2-datepicker-button {
+        .icon {
            color: rgba(0, 0, 0, 0.54);
        }

@ -80,8 +79,7 @@ $matColorHues: 50, 100, 200, 300, 400, 500, 600, 700, 800, 900, A100, A200, A400
    @else {

        .mat-icon,
-        .icon,
-        .md2-datepicker-button {
+        .icon {
            color: rgba(255, 255, 255, 1);
        }

--- a/src/app/core/scss/partials/plugins/_ng-pick-datetime.scss
+++ b/src/app/core/scss/partials/plugins/_ng-pick-datetime.scss
@ -0,0 +1,360 @@
+/*@font-face {
+  font-family: 'fontello';
+  src: url('../font/fontello.eot?81091010');
+  src: url('../font/fontello.eot?81091010#iefix') format('embedded-opentype'),
+  url('../font/fontello.woff2?81091010') format('woff2'),
+  url('../font/fontello.woff?81091010') format('woff'),
+  url('../font/fontello.ttf?81091010') format('truetype'),
+  url('../font/fontello.svg?81091010#fontello') format('svg');
+  font-weight: normal;
+  font-style: normal;
+}*/
+
+owl-date-time {
+
+    [class^="icon-"]:before, [class*=" icon-"]:before {
+        font-family: "Material Icons";
+        font-style: normal;
+        font-weight: normal;
+        speak: none;
+
+        display: flex;
+        align-items: center;
+        justify-content: center;
+
+        /* For safety - reset parent styles, that can break glyph codes*/
+        font-variant: normal;
+        text-transform: none;
+
+        /* Font smoothing. That was taken from TWBS */
+        -webkit-font-smoothing: antialiased;
+        -moz-osx-font-smoothing: grayscale;
+    }
+
+    .icon-cancel:before {
+        content: 'close';
+    }
+
+    .icon-up-open:before {
+        content: 'keyboard_arrow_up';
+    }
+
+    .icon-down-open:before {
+        content: 'keyboard_arrow_down';
+    }
+
+    .icon-left-open:before {
+        content: 'chevron_left';
+    }
+
+    .icon-right-open:before {
+        content: 'chevron_right';
+    }
+
+    $white: #FFFFFF;
+    $black: #000000;
+    $grey: #DDDDDD;
+    $blue: #0070BA;
+
+    .owl-widget,
+    .owl-widget * {
+        box-sizing: border-box;
+    }
+
+    .owl-widget {
+        font-size: 1em;
+    }
+
+    .owl-state-focus {
+
+    }
+
+    .owl-corner-all {
+        border-radius: 2px;
+    }
+
+    .owl-corner-top {
+        border-top-left-radius: 2px;
+        border-top-right-radius: 2px;
+    }
+
+    .owl-state-default {
+        background: #FFFFFF;
+        color: rgba(0, 0, 0, 0.87);
+    }
+
+    .owl-dateTime-inputWrapper {
+        display: flex;
+        flex-direction: row;
+        justify-content: flex-start;
+        align-items: center;
+
+        .owl-dateTime-input {
+            background: none !important;
+            padding: 0 !important;
+            cursor: pointer;
+
+            .owl-inputtext {
+                margin: 0;
+                padding: 8px;
+                background: none !important;
+                color: rgba(0, 0, 0, 0.87);
+            }
+        }
+
+        .owl-dateTime-cancel {
+            position: relative !important;
+            right: 0 !important;
+            top: 0 !important;
+            transform: none !important;
+            font-size: 16px !important;
+            width: 16px !important;
+            height: 16px !important;
+            min-width: 16px !important;
+            min-height: 16px !important;
+            line-height: 16px !important;
+            color: rgba(0, 0, 0, 0.54) !important;
+        }
+    }
+
+    .owl-dateTime {
+        position: relative;
+        width: 140px;
+
+        &.owl-dateTime-inline {
+            width: auto;
+
+            .owl-dateTime-dialog {
+                position: relative;
+                z-index: auto;
+            }
+        }
+    }
+
+    .owl-dateTime-dialog {
+        width: 256px;
+        user-select: none;
+        z-index: 99999;
+        top: 24px !important;
+        right: 0 !important;
+        left: auto !important;
+        @include mat-elevation(4);
+    }
+
+    .owl-dateTime-dialogHeader {
+        height: 2.5em;
+        padding: .25em;
+        background-color: rgba(0, 0, 0, .1);
+        overflow-y: auto;
+    }
+
+    .owl-calendar-wrapper {
+        padding: 16px !important;
+    }
+
+    .owl-calendar-control {
+
+        .owl-calendar-controlNav {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+
+            .nav-prev,
+            .nav-next {
+                display: flex;
+
+                &:before {
+                    font-family: "Material Icons";
+                    position: relative !important;
+                    right: 0 !important;
+                    top: 0 !important;
+                    transform: none !important;
+                    font-size: 20px !important;
+                    width: 20px !important;
+                    height: 20px !important;
+                    min-width: 20px !important;
+                    min-height: 20px !important;
+                    line-height: 20px !important;
+                    content: "chevron_left";
+                    color: rgba(0, 0, 0, 0.54);
+                }
+            }
+
+            .nav-next:before {
+                content: "chevron_right";
+            }
+        }
+
+        .owl-calendar-controlContent {
+
+            .month-control,
+            .year-control {
+                font-size: 14px;
+                font-weight: 500;
+                cursor: pointer;
+            }
+
+            .month-control {
+                margin-right: 8px;
+            }
+
+            .year-control {
+            }
+        }
+    }
+
+    .owl-calendar {
+
+        table {
+            border-spacing: 0 !important;
+        }
+
+        tbody td {
+
+            &.owl-calendar-selected {
+                background-color: $blue;
+                color: $white;
+            }
+
+            &.owl-calendar-invalid {
+                color: #ACACAC;
+            }
+
+            &.owl-calendar-outFocus {
+                color: $grey;
+            }
+
+            &.owl-calendar-hidden {
+                visibility: hidden;
+            }
+
+            &:not(.owl-calendar-selected):not(.owl-calendar-invalid):hover {
+                background-color: lighten($blue, 50%);
+                color: $black;
+            }
+        }
+    }
+
+    .owl-years,
+    .owl-months {
+
+        td.owl-year,
+        td.owl-month {
+            padding: 0;
+            font-size: 16px;
+            width: 72px;
+            height: 48px;
+            line-height: 48px;
+            cursor: pointer;
+        }
+    }
+
+    .owl-calendar-yearArrow {
+        width: 24px !important;
+        height: 24px !important;
+
+        &.left {
+            left: -16px !important;
+        }
+
+        &.right {
+            right: -16px !important;
+        }
+    }
+
+    .owl-weekdays {
+
+        th.owl-weekday {
+            height: 32px;
+            line-height: 32px;
+            text-align: center;
+            font-size: 12px;
+            padding: 0;
+            color: rgba(0, 0, 0, 0.37);
+        }
+    }
+
+    .owl-days {
+
+        td.owl-day {
+            height: 32px;
+            width: 32px;
+            line-height: 32px;
+            cursor: pointer;
+            border-radius: 100%;
+            padding: 0;
+
+            &.owl-day-today:before {
+                content: '';
+                display: block;
+                position: absolute;
+                right: 2px;
+                top: 2px;
+                border-top: .5em solid lighten($blue, 20%);
+                border-left: .5em solid transparent;
+            }
+        }
+    }
+
+    .owl-timer-wrapper {
+        height: 88px;
+        padding: 8px !important;
+        background-color: rgba(0, 0, 0, 0.06);
+
+        .owl-timer-input {
+            background: none;
+            width: 100% !important;
+            text-align: center;
+        }
+
+        .owl-timer-text {
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            width: 100%;
+            height: 40%;
+            font-size: 20px;
+        }
+
+        .owl-meridian-btn {
+            font-size: .8em;
+            color: $blue;
+            background-image: none;
+            background-color: transparent;
+            border-color: $blue;
+
+            &:hover {
+                color: $white;
+                background-color: $blue;
+                border-color: $blue;
+            }
+        }
+    }
+
+    .owl-timer-divider {
+        display: inline-block;
+        position: absolute;
+        width: 8px;
+        height: 100%;
+        left: -2px;
+
+        .owl-timer-dot {
+            display: block;
+            background: rgba(0, 0, 0, 0.37);
+            width: 3px;
+            height: 3px;
+            position: absolute;
+            left: 50%;
+            border-radius: 100%;
+            transform: translateX(-50%);
+
+            &.dot-top {
+                top: 40%;
+            }
+
+            &.dot-bottom {
+                bottom: 40%;
+            }
+        }
+    }
+}
--- a/src/app/core/scss/partials/plugins/_plugins.scss
+++ b/src/app/core/scss/partials/plugins/_plugins.scss
@ -2,3 +2,4 @@
@import "perfect-scrollbar";
@import "ngx-datatable";
@import "ngx-color-picker";
+@import "ng-pick-datetime";
--- a/src/app/main/content/apps/scrumboard/board/dialogs/card/card.component.html
+++ b/src/app/main/content/apps/scrumboard/board/dialogs/card/card.component.html
@ -7,6 +7,10 @@
            <!-- DUE DATE -->
            <div class="due-date" fxFlex="0 1 auto">

+                <button *ngIf="!card.due" md-icon-button class="" (click)="addDueDate()">
+                    <md-icon>today</md-icon>
+                </button>
+
                <button *ngIf="card.due" md-icon-button class="" [mdMenuTriggerFor]="dueDateMenu">
                    <md-icon>today</md-icon>
                </button>
@ -15,7 +19,6 @@
                    <button md-menu-item (click)="removeDueDate()">Remove Due Date</button>
                </md-menu>

-                <md2-datepicker *ngIf="!card.due" [(ngModel)]="card.due" openOnFocus="true" placeholder="Set Date/Time" type="datetime"></md2-datepicker>
            </div>
            <!-- / DUE DATE -->

@ -139,11 +142,10 @@
        <!-- DUE DATE -->
        <div *ngIf="card.due" class="due-date" fxLayout="row" fxLayoutAlign="start center">

-            <md2-datepicker class="picker ml-8" [(ngModel)]="card.due" openOnFocus="true" type="datetime" format="dd/MM/y H:mm"></md2-datepicker>
+            <md-icon class="s-24 mr-8">today</md-icon>
+
+            <owl-date-time [(ngModel)]="card.due" dateFormat="DD/MM/YYYY HH:mm"></owl-date-time>

-            <button md-icon-button class="remove-due-date" (click)="removeDueDate()">
-                <md-icon class="s-16">close</md-icon>
-            </button>
        </div>
        <!-- / DUE DATE -->

--- a/src/app/main/content/apps/scrumboard/board/dialogs/card/card.component.scss
+++ b/src/app/main/content/apps/scrumboard/board/dialogs/card/card.component.scss
@ -15,25 +15,6 @@

            .due-date {

-                md2-datepicker {
-                    min-width: initial;
-
-                    .md2-datepicker-trigger {
-                        padding: 0;
-
-                        .md2-datepicker-button {
-                            display: block;
-                            position: relative;
-                            top: 0;
-                            left: 0;
-                            line-height: normal;
-                        }
-
-                        .md2-datepicker-input {
-                            display: none;
-                        }
-                    }
-                }
            }
        }

@ -68,24 +49,6 @@

            .due-date {

-                md2-datepicker {
-                    width: 180px;
-                    min-width: 180px;
-
-                    .md2-datepicker-trigger {
-                        padding-top: 5px;
-                        padding-bottom: 5px;
-
-                        .md2-datepicker-button {
-                            top: 0;
-                        }
-
-                        .md2-datepicker-input {
-                            min-width: initial;
-                        }
-                    }
-                }
-
                .remove-due-date {
                }
            }
--- a/src/app/main/content/apps/scrumboard/board/dialogs/card/card.component.ts
+++ b/src/app/main/content/apps/scrumboard/board/dialogs/card/card.component.ts
@ -53,6 +53,15 @@ export class FuseScrumboardCardDialogComponent implements OnInit, OnDestroy
                });
    }

+    /**
+     * Add Due date
+     */
+    addDueDate()
+    {
+        this.card.due = new Date();
+        this.updateCard();
+    }
+
    /**
     * Remove Due date
     */