diff --git a/package-lock.json b/package-lock.json
index 2a06e75c..0260a0f6 100644
--- 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",
diff --git a/package.json b/package.json
index e26b2eff..b525382a 100644
--- 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",
diff --git a/src/app/core/modules/shared.module.ts b/src/app/core/modules/shared.module.ts
index e2c5e7d6..2b2cbfd9 100644
--- 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
diff --git a/src/app/core/scss/partials/_colors.scss b/src/app/core/scss/partials/_colors.scss
index 7d61345f..6a92fe6d 100644
--- 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);
}
diff --git a/src/app/core/scss/partials/plugins/_ng-pick-datetime.scss b/src/app/core/scss/partials/plugins/_ng-pick-datetime.scss
new file mode 100644
index 00000000..1829a68a
--- /dev/null
+++ 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%;
+ }
+ }
+ }
+}
diff --git a/src/app/core/scss/partials/plugins/_plugins.scss b/src/app/core/scss/partials/plugins/_plugins.scss
index 6e4ef192..531cb638 100644
--- 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";
diff --git 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
index d713ac37..e6a8b468 100644
--- 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 @@
+
+
@@ -15,7 +19,6 @@
-
@@ -139,11 +142,10 @@
-
+ today
+
+
-
diff --git 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
index 4bf9dae0..ef5a5c03 100644
--- 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 {
}
}
diff --git 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
index 1951a62e..7bc13456 100644
--- 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
*/