diff --git a/package.json b/package.json index 3a7ff119..902c5d8d 100644 --- a/package.json +++ b/package.json @@ -16,8 +16,8 @@ "bootstrap-sass": "^3.3.6", "chart.js": "^2.7.0", "cross-env": "^5.1", - "eonasdan-bootstrap-datetimepicker": "^4.17", "es5-shim": "^4.5.9", + "flatpickr": "^4.5.0", "github-markdown-css": "^2.3.0", "gulp": "^3.9.1", "ionicons": "~2.0", diff --git a/resources/assets/js/app.js b/resources/assets/js/app.js index 99f14562..9a3dec94 100644 --- a/resources/assets/js/app.js +++ b/resources/assets/js/app.js @@ -20,6 +20,11 @@ window.axios.defaults.headers.common = { 'X-Requested-With': 'XMLHttpRequest' }; +/** + * Flatpickr. + */ +const Flatpickr = require('flatpickr'); + ((win, doc) => { /** * Next, we will create a fresh Vue application instance and attach it to @@ -43,6 +48,13 @@ window.axios.defaults.headers.common = { } } }, + mounted () { + Flatpickr('.flatpickr'); + + Flatpickr('.flatpickr-time', { + enableTime: true + }); + }, components: { 'setup': require('./components/Setup'), 'dashboard': require('./components/dashboard/Dashboard'), diff --git a/resources/assets/js/cachet.js b/resources/assets/js/cachet.js index 2444940a..98c4fab4 100644 --- a/resources/assets/js/cachet.js +++ b/resources/assets/js/cachet.js @@ -133,52 +133,6 @@ $(function () { } }); - // Date picker. - $('input[rel=datepicker]').datetimepicker({ - format: "DD/MM/YYYY HH:mm", - minDate: new Date(), // Don't allow dates before today. - sideBySide: true, - icons: { - time: 'ion-clock', - date: 'ion-android-calendar', - up: 'ion-ios-arrow-up', - down: 'ion-ios-arrow-down', - previous: 'ion-ios-arrow-left', - next: 'ion-ios-arrow-right', - today: 'ion-android-home', - clear: 'ion-trash-a', - } - }); - - $('input[rel=datepicker-any]').datetimepicker({ - format: "DD/MM/YYYY HH:mm", - sideBySide: true, - icons: { - time: 'ion-clock', - date: 'ion-android-calendar', - up: 'ion-ios-arrow-up', - down: 'ion-ios-arrow-down', - previous: 'ion-ios-arrow-left', - next: 'ion-ios-arrow-right', - today: 'ion-android-home', - clear: 'ion-trash-a', - } - }); - - $('input[rel=datepicker-custom]').datetimepicker({ - sideBySide: true, - icons: { - time: 'ion-clock', - date: 'ion-android-calendar', - up: 'ion-ios-arrow-up', - down: 'ion-ios-arrow-down', - previous: 'ion-ios-arrow-left', - next: 'ion-ios-arrow-right', - today: 'ion-android-home', - clear: 'ion-trash-a', - } - }); - // Sortable models. var orderableLists = document.querySelectorAll('[data-orderable-list]'); diff --git a/resources/assets/sass/_vendors.scss b/resources/assets/sass/_vendors.scss index 43c6abd7..220f7a18 100644 --- a/resources/assets/sass/_vendors.scss +++ b/resources/assets/sass/_vendors.scss @@ -4,6 +4,7 @@ $ionicons-font-path: "../../../fonts" !default; @import "./node_modules/ionicons/scss/ionicons"; @import "modules/bootstrap"; +@import "plugins/flatpickr"; html { position: relative; diff --git a/resources/assets/sass/dashboard.scss b/resources/assets/sass/dashboard.scss index 4b98accf..32af8a24 100644 --- a/resources/assets/sass/dashboard.scss +++ b/resources/assets/sass/dashboard.scss @@ -19,6 +19,5 @@ @import "plugins/sweetalert"; @import "plugins/messenger"; @import "plugins/animate"; -@import "plugins/bootstrap-datetimepicker/bootstrap-datetimepicker"; @import "plugins/password-strength"; @import "plugins/sortable"; diff --git a/resources/assets/sass/plugins/_flatpickr.scss b/resources/assets/sass/plugins/_flatpickr.scss new file mode 100644 index 00000000..aab191fc --- /dev/null +++ b/resources/assets/sass/plugins/_flatpickr.scss @@ -0,0 +1,61 @@ +@import "./node_modules/flatpickr/dist/flatpickr"; + +.flatpickr-calendar { + width: auto; + min-width: 293.75px; + padding: rem-calc(10); + &.open { + z-index: 4 !important; + } + .flatpickr-month { + min-height: 30px; + } + .flatpickr-prev-month, + .flatpickr-current-month, + .flatpickr-next-month { + padding: 0; + display: flex !important; + justify-content: center; + align-items: center; + height: 100%; + } + .flatpickr-prev-month, + .flatpickr-next-month { + border-radius: 1rem; + padding: 0.5rem; + &:hover { + background-color: $cachet-gray-light; + svg { + color: rgba(0, 0, 0, 0.9); + fill: rgba(0, 0, 0, 0.9); + } + } + } + .flatpickr-current-month { + .cur-month { + margin-left: 1rem; + &:hover { + background: transparent; + } + } + } + .flatpickr-day { + line-height: 36px; + &:hover { + background-color: $cachet-gray-light; + border-color: $cachet-gray-light; + } + } + .numInputWrapper { + width: 4rem; + margin-left: 0.5rem; + .numInput { + padding: 0; + box-shadow: none; + } + } +} + +.flatpickr-time { + text-align: left; +} diff --git a/resources/assets/sass/plugins/bootstrap-datetimepicker/bootstrap-datetimepicker.scss b/resources/assets/sass/plugins/bootstrap-datetimepicker/bootstrap-datetimepicker.scss deleted file mode 100644 index 177df94b..00000000 --- a/resources/assets/sass/plugins/bootstrap-datetimepicker/bootstrap-datetimepicker.scss +++ /dev/null @@ -1,342 +0,0 @@ -// Import boostrap variables including default color palette and fonts -@import "./node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_variables"; - -$bs-datetimepicker-timepicker-font-size: 1.2em !default; -$bs-datetimepicker-active-bg: $cachet-green !default; -$bs-datetimepicker-active-color: $btn-primary-color !default; -$bs-datetimepicker-border-radius: $border-radius-base !default; -$bs-datetimepicker-btn-hover-bg: $cachet-gray-light !default; -$bs-datetimepicker-disabled-color: $cachet-gray !default; -$bs-datetimepicker-alternate-color: $cachet-gray !default; -$bs-datetimepicker-secondary-border-color: #ccc !default; -$bs-datetimepicker-secondary-border-color-rgba: rgba(0, 0, 0, 0.2) !default; -$bs-datetimepicker-primary-border-color: white !default; -$bs-datetimepicker-text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25) !default; - -.bootstrap-datetimepicker-widget { - list-style: none; - - &.dropdown-menu { - margin: 2px 0; - padding: 4px; - width: 19em; - - &.timepicker-sbs { - @media (min-width: $screen-sm-min) { - width: 38em; - } - - @media (min-width: $screen-md-min) { - width: 38em; - } - - @media (min-width: $screen-lg-min) { - width: 38em; - } - } - - &:before, &:after { - content: ''; - display: inline-block; - position: absolute; - } - - &.bottom { - &:before { - border-left: 7px solid transparent; - border-right: 7px solid transparent; - border-bottom: 7px solid $bs-datetimepicker-secondary-border-color; - border-bottom-color: $bs-datetimepicker-secondary-border-color-rgba; - top: -7px; - left: 7px; - } - - &:after { - border-left: 6px solid transparent; - border-right: 6px solid transparent; - border-bottom: 6px solid $bs-datetimepicker-primary-border-color; - top: -6px; - left: 8px; - } - } - - &.top { - &:before { - border-left: 7px solid transparent; - border-right: 7px solid transparent; - border-top: 7px solid $bs-datetimepicker-secondary-border-color; - border-top-color: $bs-datetimepicker-secondary-border-color-rgba; - bottom: -7px; - left: 6px; - } - - &:after { - border-left: 6px solid transparent; - border-right: 6px solid transparent; - border-top: 6px solid $bs-datetimepicker-primary-border-color; - bottom: -6px; - left: 7px; - } - } - - &.pull-right { - &:before { - left: auto; - right: 6px; - } - - &:after { - left: auto; - right: 7px; - } - } - } - - .list-unstyled { - margin: 0; - } - - a[data-action] { - padding: 6px 0; - } - - a[data-action]:active { - box-shadow: none; - } - - .timepicker-hour, .timepicker-minute, .timepicker-second { - width: 54px; - font-weight: bold; - font-size: $bs-datetimepicker-timepicker-font-size; - margin: 0; - } - - button[data-action] { - padding: 6px; - } - - .btn[data-action="incrementHours"]::after { - @extend .sr-only; - content: "Increment Hours"; - } - - .btn[data-action="incrementMinutes"]::after { - @extend .sr-only; - content: "Increment Minutes"; - } - - .btn[data-action="decrementHours"]::after { - @extend .sr-only; - content: "Decrement Hours"; - } - - .btn[data-action="decrementMinutes"]::after { - @extend .sr-only; - content: "Decrement Minutes"; - } - - .btn[data-action="showHours"]::after { - @extend .sr-only; - content: "Show Hours"; - } - - .btn[data-action="showMinutes"]::after { - @extend .sr-only; - content: "Show Minutes"; - } - - .btn[data-action="togglePeriod"]::after { - @extend .sr-only; - content: "Toggle AM/PM"; - } - - .btn[data-action="clear"]::after { - @extend .sr-only; - content: "Clear the picker"; - } - - .btn[data-action="today"]::after { - @extend .sr-only; - content: "Set the date to today"; - } - - .picker-switch { - text-align: center; - - &::after { - @extend .sr-only; - content: "Toggle Date and Time Screens"; - } - - td { - padding: 0; - margin: 0; - height: auto; - width: auto; - line-height: inherit; - - span { - line-height: 2.5; - height: 2.5em; - width: 100%; - } - } - } - - table { - width: 100%; - margin: 0; - - - & td, - & th { - text-align: center; - border-radius: $bs-datetimepicker-border-radius; - } - - & th { - height: 20px; - line-height: 20px; - width: 20px; - - &.picker-switch { - width: 145px; - } - - &.disabled, - &.disabled:hover { - background: none; - color: $bs-datetimepicker-disabled-color; - cursor: not-allowed; - } - - &.prev::after { - @extend .sr-only; - content: "Previous Month"; - } - - &.next::after { - @extend .sr-only; - content: "Next Month"; - } - } - - & thead tr:first-child th { - cursor: pointer; - - &:hover { - background: $bs-datetimepicker-btn-hover-bg; - } - } - - & td { - height: 54px; - line-height: 54px; - width: 54px; - - &.cw { - font-size: .8em; - height: 20px; - line-height: 20px; - color: $bs-datetimepicker-alternate-color; - } - - &.day { - height: 20px; - line-height: 20px; - width: 20px; - } - - &.day:hover, - &.hour:hover, - &.minute:hover, - &.second:hover { - background: $bs-datetimepicker-btn-hover-bg; - cursor: pointer; - } - - &.old, - &.new { - color: $bs-datetimepicker-alternate-color; - } - - &.today { - position: relative; - - &:before { - content: ''; - display: inline-block; - border: solid transparent; - border-width: 0 0 7px 7px; - border-bottom-color: $bs-datetimepicker-active-bg; - border-top-color: $bs-datetimepicker-secondary-border-color-rgba; - position: absolute; - bottom: 4px; - right: 4px; - } - } - - &.active, - &.active:hover { - background-color: $bs-datetimepicker-active-bg; - color: $bs-datetimepicker-active-color; - text-shadow: $bs-datetimepicker-text-shadow; - } - - &.active.today:before { - border-bottom-color: #fff; - } - - &.disabled, - &.disabled:hover { - background: none; - color: $bs-datetimepicker-disabled-color; - cursor: not-allowed; - } - - span { - display: inline-block; - width: 54px; - height: 54px; - line-height: 54px; - margin: 2px 1.5px; - cursor: pointer; - border-radius: $bs-datetimepicker-border-radius; - - &:hover { - background: $bs-datetimepicker-btn-hover-bg; - } - - &.active { - background-color: $bs-datetimepicker-active-bg; - color: $bs-datetimepicker-active-color; - text-shadow: $bs-datetimepicker-text-shadow; - } - - &.old { - color: $bs-datetimepicker-alternate-color; - } - - &.disabled, - &.disabled:hover { - background: none; - color: $bs-datetimepicker-disabled-color; - cursor: not-allowed; - } - } - } - } - - &.usetwentyfour { - td.hour { - height: 27px; - line-height: 27px; - } - } -} - -.input-group.date { - & .input-group-addon { - cursor: pointer; - } -} diff --git a/resources/views/dashboard/incidents/add.blade.php b/resources/views/dashboard/incidents/add.blade.php index d12fd25c..85a7222a 100644 --- a/resources/views/dashboard/incidents/add.blade.php +++ b/resources/views/dashboard/incidents/add.blade.php @@ -118,7 +118,7 @@
{{ trans('forms.optional') }} - +
@if($notificationsEnabled) diff --git a/resources/views/dashboard/incidents/edit.blade.php b/resources/views/dashboard/incidents/edit.blade.php index d7ca5cfd..57e3a263 100644 --- a/resources/views/dashboard/incidents/edit.blade.php +++ b/resources/views/dashboard/incidents/edit.blade.php @@ -109,7 +109,7 @@
{{ trans('forms.optional') }} - +
diff --git a/resources/views/dashboard/maintenance/add.blade.php b/resources/views/dashboard/maintenance/add.blade.php index db395897..5bdae1b4 100644 --- a/resources/views/dashboard/maintenance/add.blade.php +++ b/resources/views/dashboard/maintenance/add.blade.php @@ -49,11 +49,11 @@
- +
- +
diff --git a/resources/views/dashboard/maintenance/edit.blade.php b/resources/views/dashboard/maintenance/edit.blade.php index 755fb1f5..456e0797 100644 --- a/resources/views/dashboard/maintenance/edit.blade.php +++ b/resources/views/dashboard/maintenance/edit.blade.php @@ -50,11 +50,11 @@
- +
- +
diff --git a/webpack.mix.js b/webpack.mix.js index fd25b8ee..3b5d1bc2 100644 --- a/webpack.mix.js +++ b/webpack.mix.js @@ -37,7 +37,6 @@ mix 'node_modules/jquery/dist/jquery.min.js', 'node_modules/bootstrap-sass/assets/javascripts/bootstrap.min.js', 'node_modules/moment/min/moment-with-locales.min.js', - 'node_modules/eonasdan-bootstrap-datetimepicker/build/js/bootstrap-datetimepicker.min.js', 'node_modules/lodash/lodash.min.js', 'node_modules/autosize/dist/autosize.min.js', 'node_modules/messenger/build/js/messenger.min.js', diff --git a/yarn.lock b/yarn.lock index 3151ecc1..64d6c89f 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1062,10 +1062,6 @@ bootstrap-sass@^3.3.6: version "3.3.7" resolved "https://registry.yarnpkg.com/bootstrap-sass/-/bootstrap-sass-3.3.7.tgz#6596c7ab40f6637393323ab0bc80d064fc630498" -bootstrap@^3.3: - version "3.3.7" - resolved "https://registry.yarnpkg.com/bootstrap/-/bootstrap-3.3.7.tgz#5a389394549f23330875a3b150656574f8a9eb71" - brace-expansion@^1.0.0, brace-expansion@^1.1.7: version "1.1.11" resolved "https://registry.yarnpkg.com/brace-expansion/-/brace-expansion-1.1.11.tgz#3c7fcbf529d87226f3d2f52b966ff5271eb441dd" @@ -2280,13 +2276,20 @@ domhandler@^2.3.0: dependencies: domelementtype "1" -domutils@1.5.1, domutils@^1.5.1: +domutils@1.5.1: version "1.5.1" resolved "https://registry.yarnpkg.com/domutils/-/domutils-1.5.1.tgz#dcd8488a26f563d61079e48c9f7b7e32373682cf" dependencies: dom-serializer "0" domelementtype "1" +domutils@^1.5.1: + version "1.7.0" + resolved "https://registry.yarnpkg.com/domutils/-/domutils-1.7.0.tgz#56ea341e834e06e6748af7a1cb25da67ea9f8c2a" + dependencies: + dom-serializer "0" + domelementtype "1" + dotenv-expand@^4.2.0: version "4.2.0" resolved "https://registry.yarnpkg.com/dotenv-expand/-/dotenv-expand-4.2.0.tgz#def1f1ca5d6059d24a766e587942c21106ce1275" @@ -2422,15 +2425,6 @@ entities@^1.1.1, entities@~1.1.1: version "1.1.1" resolved "https://registry.yarnpkg.com/entities/-/entities-1.1.1.tgz#6e5c2d0a5621b5dadaecef80b90edfb5cd7772f0" -eonasdan-bootstrap-datetimepicker@^4.17: - version "4.17.47" - resolved "https://registry.yarnpkg.com/eonasdan-bootstrap-datetimepicker/-/eonasdan-bootstrap-datetimepicker-4.17.47.tgz#7a49970044065276e7965efd16f822735219e735" - dependencies: - bootstrap "^3.3" - jquery "^1.8.3 || ^2.0 || ^3.0" - moment "^2.10" - moment-timezone "^0.4.0" - errno@^0.1.3, errno@~0.1.7: version "0.1.7" resolved "https://registry.yarnpkg.com/errno/-/errno-0.1.7.tgz#4684d71779ad39af177e3f007996f7c67c852618" @@ -3000,6 +2994,10 @@ flagged-respawn@^1.0.0: version "1.0.0" resolved "https://registry.yarnpkg.com/flagged-respawn/-/flagged-respawn-1.0.0.tgz#4e79ae9b2eb38bf86b3bb56bf3e0a56aa5fcabd7" +flatpickr@^4.5.0: + version "4.5.0" + resolved "https://registry.yarnpkg.com/flatpickr/-/flatpickr-4.5.0.tgz#f72c7164a1c24e3ad419e3b2209d1a2d3604724a" + flatten@^1.0.2: version "1.0.2" resolved "https://registry.yarnpkg.com/flatten/-/flatten-1.0.2.tgz#dae46a9d78fbe25292258cc1e780a41d95c03782" @@ -4334,7 +4332,7 @@ jquery-sparkline@^2.4.0: version "2.4.0" resolved "https://registry.yarnpkg.com/jquery-sparkline/-/jquery-sparkline-2.4.0.tgz#1be8b7b704dd3857152708aefb1d4a4b3a69fb33" -"jquery@>= 1.7.x", "jquery@^1.8.3 || ^2.0 || ^3.0", jquery@^2.2.4: +"jquery@>= 1.7.x", jquery@^2.2.4: version "2.2.4" resolved "https://registry.yarnpkg.com/jquery/-/jquery-2.2.4.tgz#2c89d6889b5eac522a7eea32c14521559c6cbf02" @@ -5071,13 +5069,7 @@ mkdirp@0.5.x, "mkdirp@>=0.5 0", mkdirp@^0.5.0, mkdirp@^0.5.1, mkdirp@~0.5.0, mkd dependencies: minimist "0.0.8" -moment-timezone@^0.4.0: - version "0.4.1" - resolved "https://registry.yarnpkg.com/moment-timezone/-/moment-timezone-0.4.1.tgz#81f598c3ad5e22cdad796b67ecd8d88d0f5baa06" - dependencies: - moment ">= 2.6.0" - -"moment@>= 2.6.0", moment@^2.10, moment@^2.10.2, moment@^2.17.1: +moment@^2.10.2, moment@^2.17.1: version "2.22.2" resolved "https://registry.yarnpkg.com/moment/-/moment-2.22.2.tgz#3c257f9839fc0e93ff53149632239eb90783ff66" @@ -6585,11 +6577,11 @@ run-queue@^1.0.0, run-queue@^1.0.3: dependencies: aproba "^1.1.1" -safe-buffer@5.1.1, safe-buffer@^5.0.1, safe-buffer@~5.1.1: +safe-buffer@5.1.1, safe-buffer@^5.0.1, safe-buffer@^5.1.1, safe-buffer@~5.1.1: version "5.1.1" resolved "https://registry.yarnpkg.com/safe-buffer/-/safe-buffer-5.1.1.tgz#893312af69b2123def71f57889001671eeb2c853" -safe-buffer@^5.1.0, safe-buffer@^5.1.1, safe-buffer@^5.1.2, safe-buffer@~5.1.0: +safe-buffer@^5.1.0, safe-buffer@^5.1.2, safe-buffer@~5.1.0: version "5.1.2" resolved "https://registry.yarnpkg.com/safe-buffer/-/safe-buffer-5.1.2.tgz#991ec69d296e0313747d59bdfd2b745c35f8828d"