diff --git a/wagtail/wagtailadmin/static/wagtailadmin/js/page-editor.js b/wagtail/wagtailadmin/static/wagtailadmin/js/page-editor.js index 7f27c4a37..0d6c4d51f 100644 --- a/wagtail/wagtailadmin/static/wagtailadmin/js/page-editor.js +++ b/wagtail/wagtailadmin/static/wagtailadmin/js/page-editor.js @@ -57,22 +57,19 @@ function initDateChooser(id) { $('#' + id).datetimepicker({ timepicker: false, format: 'Y-m-d', - mask: '9999-19-39' }); } function initTimeChooser(id) { $('#' + id).datetimepicker({ datepicker: false, - format: 'H:i:s', - mask: '29:59:59' + format: 'H:i', }); } function initDateTimeChooser(id) { $('#' + id).datetimepicker({ - format: 'Y-m-d H:i:s', - mask: '9999-19-39 29:59:59' + format: 'Y-m-d H:i', }); } diff --git a/wagtail/wagtailadmin/static/wagtailadmin/scss/components/datetimepicker.scss b/wagtail/wagtailadmin/static/wagtailadmin/scss/components/datetimepicker.scss new file mode 100644 index 000000000..078c93469 --- /dev/null +++ b/wagtail/wagtailadmin/static/wagtailadmin/scss/components/datetimepicker.scss @@ -0,0 +1,304 @@ +.xdsoft_datetimepicker{ + box-shadow: 0px 5px 10px -5px rgba(0, 0, 0, 0.4); + background: #FFFFFF; + border:1px solid darken($color-input-focus, 40%); + display: block; + padding: 8px; + padding-left: 0px; + padding-top: 2px; + position: absolute; + z-index: 9999; + -moz-box-sizing: border-box; + box-sizing: border-box; + display:none; + + *{ + -moz-box-sizing: border-box; + box-sizing: border-box; + padding:0px; + margin:0px; + } + + iframe { + position: absolute; + left: 0; + top: 0; + width: 75px; + height: 210px; + background: transparent; + border:none; + } + + .xdsoft_datepicker, .xdsoft_timepicker{ + display:none; + + &.active{ + display:block; + } + } + .xdsoft_datepicker{ + float:left; + margin-left:8px; + } + .xdsoft_datepicker.active + .xdsoft_timepicker{ + margin-top:8px; + margin-bottom:3px + } + .xdsoft_mounthpicker{ + position: relative; + text-align: center; + } + + .xdsoft_next, .xdsoft_prev, .xdsoft_today_button{ + background-color: transparent; + cursor: pointer; + display: block; + border:0; + overflow: hidden; + padding: 5px 0px; + position: relative; + white-space: nowrap; + width: 2em; + color:$color-teal; + text-transform:none; + text-align:center; + + &:before{ + font-size:1.5em; + font-family:wagtail; + width:1em; + line-height:1.3em; + text-align:center; + margin:0; + } + &:hover{ + color:$color-teal-darker; + } + } + .xdsoft_prev{ + float: left; + + &:before{ + content:"z"; + } + } + .xdsoft_today_button{ + float: left; + margin-left:5px; + + &:before{ + content:"W"; + } + } + + .xdsoft_next{ + float: right; + + &:before{ + content:"n"; + } + } + + .xdsoft_timepicker{ + width: 70px; + float:left; + text-align:center; + margin-left:8px; + margin-top:0px; + + .xdsoft_prev, + .xdsoft_next{ + float:none; + height: 1.5em; + display: block; + text-align:center; + width:100%; + padding:0; + + &:before{ + width:100%; + } + } + + .xdsoft_prev:before{ + content:"e"; + } + + .xdsoft_next:before{ + content:"q"; + } + + .xdsoft_time_box{ + position:relative; + border:1px solid #ccc; + height:170px; + overflow:hidden; + border-bottom:1px solid #DDDDDD; + + > div > div{ + background: #F5F5F5; + border-top:1px solid #DDDDDD; + color: #666666; + font-size: 1em; + text-align: center; + border-collapse:collapse; + cursor:pointer; + border-bottom-width:0px; + height:2.3em; + line-height:2.3em; + + &:first-child{ + border-top-width:0px; + } + } + } + } + + .xdsoft_label{ + display: inline; + position: relative; + z-index: 9999; + margin: 0; + padding: 5px 3px; + font-size: 14px; + line-height: 20px; + font-weight: bold; + background-color: #fff; + float:left; + width:182px; + text-align:center; + cursor:pointer; + + &:hover{ + text-decoration:underline; + } + + > .xdsoft_select{ + border:1px solid #ccc; + position:absolute; + display:block; + right:0px; + top:30px; + z-index:101; + display:none; + background:#fff; + max-height:160px; + overflow-y:hidden; + + &.xdsoft_monthselect{right:-7px;} + &.xdsoft_yearselect{right:2px;} + + > div > .xdsoft_option:hover{ + color: #fff; + background: #ff8000; + } + > div > .xdsoft_option{ + padding:2px 15px 2px 5px; + } + > div > .xdsoft_option.xdsoft_current{ + background: #33AAFF; + color:#fff; + font-weight: 700; + } + } + + } + + .xdsoft_month{ + width:90px; + text-align:right; + } + .xdsoft_year{ + width:56px; + } + .xdsoft_calendar{ + clear:both; + + table{ + border-collapse:collapse; + } + td > div{ + padding-right:5px; + } + td, th{ + width:14.285%; + border:1px solid #DDDDDD; + color: #666666; + font-size: 12px; + text-align: right; + padding:5px 7px; + border-collapse:collapse; + cursor:pointer; + height: 25px; + } + td{ + background-color:white; + } + th{ + background: #F1F1F1; + font-weight: 700; + font-size:0.85em; + text-align: center; + cursor:default; + } + } + + .xdsoft_calendar td.xdsoft_default, + .xdsoft_calendar td.xdsoft_current, + .xdsoft_timepicker .xdsoft_time_box > div > div.xdsoft_current{ + background: $color-orange; + color:#fff; + font-weight: 700; + } + .xdsoft_calendar td.xdsoft_other_month, + .xdsoft_calendar td.xdsoft_disabled, + .xdsoft_time_box > div > div.xdsoft_disabled{ + opacity:0.5; + background:$color-grey-3; + } + + .xdsoft_calendar td.xdsoft_other_month.xdsoft_disabled{ + opacity:0.2; + } + .xdsoft_calendar td:hover, + .xdsoft_timepicker .xdsoft_time_box > div > div:hover{ + color: #fff; + background: $color-teal; + } +} + +.xdsoft_noselect{ + -webkit-touch-callout: none; + -webkit-user-select: none; + -khtml-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + -o-user-select: none; + user-select: none; +} +.xdsoft_noselect::selection { background: transparent; } +.xdsoft_noselect::-moz-selection { background: transparent; } +.xdsoft_datetimepicker.xdsoft_inline{ + display: inline-block; + position: static; + box-shadow: none; +} + +.xdsoft_scroller_box{ + position:relative; +} +.xdsoft_scrollbar{ + position:absolute; + width:7px; + width:7px; + right:0px; + top:0px; + bottom:0px; + cursor:pointer; + + > .xdsoft_scroller{ + background:#ccc !important; + height:20px; + border-radius:3px; + } +} diff --git a/wagtail/wagtailadmin/static/wagtailadmin/scss/core.scss b/wagtail/wagtailadmin/static/wagtailadmin/scss/core.scss index 60200de20..bfeb9b625 100644 --- a/wagtail/wagtailadmin/static/wagtailadmin/scss/core.scss +++ b/wagtail/wagtailadmin/static/wagtailadmin/scss/core.scss @@ -12,6 +12,7 @@ @import "components/messages.scss"; @import "components/formatters.scss"; @import "components/header.scss"; +@import "components/datetimepicker.scss"; @import "fonts.scss"; diff --git a/wagtail/wagtailadmin/static/wagtailadmin/scss/vendor/jquery.datetimepicker.css b/wagtail/wagtailadmin/static/wagtailadmin/scss/vendor/jquery.datetimepicker.css deleted file mode 100644 index dad45ed7e..000000000 --- a/wagtail/wagtailadmin/static/wagtailadmin/scss/vendor/jquery.datetimepicker.css +++ /dev/null @@ -1,304 +0,0 @@ -.xdsoft_datetimepicker{ - box-shadow: 0px 5px 15px -5px rgba(0, 0, 0, 0.506); - background: #FFFFFF; - border-bottom: 1px solid #BBBBBB; - border-left: 1px solid #CCCCCC; - border-right: 1px solid #CCCCCC; - border-top: 1px solid #CCCCCC; - color: #333333; - display: block; - font-family: "Helvetica Neue", "Helvetica", "Arial", sans-serif; - padding: 8px; - padding-left: 0px; - padding-top: 2px; - position: absolute; - z-index: 9999; - -moz-box-sizing: border-box; - box-sizing: border-box; - display:none; -} - -.xdsoft_datetimepicker iframe { - position: absolute; - left: 0; - top: 0; - width: 75px; - height: 210px; - background: transparent; - border:none; -} -/*For IE8 or lower*/ -.xdsoft_datetimepicker button { - border:none !important; -} - -.xdsoft_noselect{ - -webkit-touch-callout: none; - -webkit-user-select: none; - -khtml-user-select: none; - -moz-user-select: none; - -ms-user-select: none; - -o-user-select: none; - user-select: none; -} -.xdsoft_noselect::selection { background: transparent; } -.xdsoft_noselect::-moz-selection { background: transparent; } -.xdsoft_datetimepicker.xdsoft_inline{ - display: inline-block; - position: static; - box-shadow: none; -} -.xdsoft_datetimepicker *{ - -moz-box-sizing: border-box; - box-sizing: border-box; - padding:0px; - margin:0px; -} -.xdsoft_datetimepicker .xdsoft_datepicker, .xdsoft_datetimepicker .xdsoft_timepicker{ - display:none; -} -.xdsoft_datetimepicker .xdsoft_datepicker.active, .xdsoft_datetimepicker .xdsoft_timepicker.active{ - display:block; -} -.xdsoft_datetimepicker .xdsoft_datepicker{ - width: 224px; - float:left; - margin-left:8px; -} -.xdsoft_datetimepicker .xdsoft_timepicker{ - width: 58px; - float:left; - text-align:center; - margin-left:8px; - margin-top:0px; -} -.xdsoft_datetimepicker .xdsoft_datepicker.active+.xdsoft_timepicker{ - margin-top:8px; - margin-bottom:3px -} -.xdsoft_datetimepicker .xdsoft_mounthpicker{ - position: relative; - text-align: center; -} - -.xdsoft_datetimepicker .xdsoft_prev, .xdsoft_datetimepicker .xdsoft_next,.xdsoft_datetimepicker .xdsoft_today_button{ - background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFoAAAAeCAYAAACsYQl4AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA2ZpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMy1jMDExIDY2LjE0NTY2MSwgMjAxMi8wMi8wNi0xNDo1NjoyNyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDozQjRCQjRGREU4MkNFMzExQjRDQkIyRDJDOTdBRUI1MCIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDpCQjg0OUYyNTZDODAxMUUzQjMwM0IwMERBNUU0ODQ5NSIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDpCQjg0OUYyNDZDODAxMUUzQjMwM0IwMERBNUU0ODQ5NSIgeG1wOkNyZWF0b3JUb29sPSJBZG9iZSBQaG90b3Nob3AgQ1M2IChXaW5kb3dzKSI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOkI5NzE3MjFBN0E2Q0UzMTFBQjJEQjgzMDk5RTNBNTdBIiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOjNCNEJCNEZERTgyQ0UzMTFCNENCQjJEMkM5N0FFQjUwIi8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+aQvATgAAAfVJREFUeNrsmr1OwzAQxzGtkPjYEAuvVGAvfQIGRKADE49gdLwDDwBiZ2RhQUKwICQkWLsgFiRQuIBTucFJ/XFp4+hO+quqnZ4uvzj2nV2RpukCW/22yAgYNINmc7du7DcghCjrkqgOKjF1znpt6rZ0AGWQj7TvCU8d9UM+QAGDrhdyc2Bnc1WVVPBev9V8lBnY+rDwncWZThG4xk4lmxtJy2AHgoY/FySgbSBPwPZ8mEXbQx3aDERb0EbYAYFC7pcAtAvkMWwC0D3NX58S9D/YnoGC7nPWr3Dg9JTbtuHhDShBT8D2CBSK/iIEvVXxpuxSgh7DdgwUTL4iA92zmJb6lKB/YTsECmV+IgK947AGDIqgQ/LojsO135Hn51l2cWlov0JdGNrPUceueXRwilSVgkUyom9Rd6gbLfYTDeO+1v6orn0InTogYDGUkYLO3/wc9BdqqTCKP1Tfi+oTIaCBIL2TES+GTyruT9S61p6BHam+99DFEAgLFklYsIBHwSI9QY80H5ta+1rB/6ovaKihBJeEJbgLbBlQgl+j3lDPqA2tfQV1j3pVn8s+oKHGTSVJ+FqDLeR5bCqJ2E/BCycsoLZETXaKGs7rhKVt+9HZScrZNMi88V8P7LlDbvOZYaJVpMMmBCT4n0o8dTBoNgbdWPsRYACs3r7XyNfbnAAAAABJRU5ErkJggg=='); -} -.xdsoft_datetimepicker .xdsoft_prev{ - float: left; - background-position:-20px 0px; -} -.xdsoft_datetimepicker .xdsoft_today_button{ - float: left; - background-position:-70px 0px; - margin-left:5px; -} - -.xdsoft_datetimepicker .xdsoft_next{ - float: right; - background-position:0px 0px; -} -.xdsoft_datetimepicker .xdsoft_next:active,.xdsoft_datetimepicker .xdsoft_prev:active{ -} -.xdsoft_datetimepicker .xdsoft_next,.xdsoft_datetimepicker .xdsoft_prev ,.xdsoft_datetimepicker .xdsoft_today_button{ - background-color: transparent; - background-repeat: no-repeat; - border: 0px none currentColor; - cursor: pointer; - display: block; - height: 30px; - opacity: 0.5; - outline: medium none currentColor; - overflow: hidden; - padding: 0px; - position: relative; - text-indent: 100%; - white-space: nowrap; - width: 20px; -} -.xdsoft_datetimepicker .xdsoft_timepicker .xdsoft_prev, -.xdsoft_datetimepicker .xdsoft_timepicker .xdsoft_next{ - float:none; - background-position:-40px -15px; - height: 15px; - width: 30px; - display: block; - margin-left:14px; - margin-top:7px; -} -.xdsoft_datetimepicker .xdsoft_timepicker .xdsoft_prev{ - background-position:-40px 0px; - margin-bottom:7px; - margin-top:0px; -} -.xdsoft_datetimepicker .xdsoft_timepicker .xdsoft_time_box{ - height:151px; - overflow:hidden; - border-bottom:1px solid #DDDDDD; -} -.xdsoft_datetimepicker .xdsoft_timepicker .xdsoft_time_box >div >div{ - background: #F5F5F5; - border-top:1px solid #DDDDDD; - color: #666666; - font-size: 12px; - text-align: center; - border-collapse:collapse; - cursor:pointer; - border-bottom-width:0px; - height:25px; - line-height:25px; -} - -.xdsoft_datetimepicker .xdsoft_timepicker .xdsoft_time_box >div > div:first-child{ - border-top-width:0px; -} -.xdsoft_datetimepicker .xdsoft_today_button:hover, -.xdsoft_datetimepicker .xdsoft_next:hover, -.xdsoft_datetimepicker .xdsoft_prev:hover { - opacity: 1; -} -.xdsoft_datetimepicker .xdsoft_label{ - display: inline; - position: relative; - z-index: 9999; - margin: 0; - padding: 5px 3px; - font-size: 14px; - line-height: 20px; - font-weight: bold; - background-color: #fff; - float:left; - width:182px; - text-align:center; - cursor:pointer; -} -.xdsoft_datetimepicker .xdsoft_label:hover{ - text-decoration:underline; -} -.xdsoft_datetimepicker .xdsoft_label > .xdsoft_select{ - border:1px solid #ccc; - position:absolute; - display:block; - right:0px; - top:30px; - z-index:101; - display:none; - background:#fff; - max-height:160px; - overflow-y:hidden; -} -.xdsoft_datetimepicker .xdsoft_label > .xdsoft_select.xdsoft_monthselect{right:-7px;} -.xdsoft_datetimepicker .xdsoft_label > .xdsoft_select.xdsoft_yearselect{right:2px;} -.xdsoft_datetimepicker .xdsoft_label > .xdsoft_select > div > .xdsoft_option:hover{ - color: #fff; - background: #ff8000; -} -.xdsoft_datetimepicker .xdsoft_label > .xdsoft_select > div > .xdsoft_option{ - padding:2px 10px 2px 5px; -} -.xdsoft_datetimepicker .xdsoft_label > .xdsoft_select > div > .xdsoft_option.xdsoft_current{ - background: #33AAFF; - box-shadow: #178FE5 0px 1px 3px 0px inset; - color:#fff; - font-weight: 700; -} -.xdsoft_datetimepicker .xdsoft_month{ - width:90px; - text-align:right; -} -.xdsoft_datetimepicker .xdsoft_calendar{ - clear:both; -} -.xdsoft_datetimepicker .xdsoft_year{ - width:56px; -} -.xdsoft_datetimepicker .xdsoft_calendar table{ - border-collapse:collapse; - width:100%; - -} -.xdsoft_datetimepicker .xdsoft_calendar td > div{ - padding-right:5px; -} -.xdsoft_datetimepicker .xdsoft_calendar th{ - height: 25px; -} -.xdsoft_datetimepicker .xdsoft_calendar td,.xdsoft_datetimepicker .xdsoft_calendar th{ - width:14.2857142%; - text-align:center; - background: #F5F5F5; - border:1px solid #DDDDDD; - color: #666666; - font-size: 12px; - text-align: right; - padding:0px; - border-collapse:collapse; - cursor:pointer; - height: 25px; -} -.xdsoft_datetimepicker .xdsoft_calendar th{ - background: #F1F1F1; -} -.xdsoft_datetimepicker .xdsoft_calendar td.xdsoft_today{ - color:#33AAFF; -} -.xdsoft_datetimepicker .xdsoft_calendar td.xdsoft_default, -.xdsoft_datetimepicker .xdsoft_calendar td.xdsoft_current, -.xdsoft_datetimepicker .xdsoft_timepicker .xdsoft_time_box >div >div.xdsoft_current{ - background: #33AAFF; - box-shadow: #178FE5 0px 1px 3px 0px inset; - color:#fff; - font-weight: 700; -} -.xdsoft_datetimepicker .xdsoft_calendar td.xdsoft_other_month, -.xdsoft_datetimepicker .xdsoft_calendar td.xdsoft_disabled, -.xdsoft_datetimepicker .xdsoft_time_box >div >div.xdsoft_disabled{ - opacity:0.5; -} -.xdsoft_datetimepicker .xdsoft_calendar td.xdsoft_other_month.xdsoft_disabled{ - opacity:0.2; -} -.xdsoft_datetimepicker .xdsoft_calendar td:hover, -.xdsoft_datetimepicker .xdsoft_timepicker .xdsoft_time_box >div >div:hover{ - color: #fff !important; - background: #ff8000 !important; - box-shadow: none !important; -} -.xdsoft_datetimepicker .xdsoft_calendar td.xdsoft_disabled:hover, -.xdsoft_datetimepicker .xdsoft_timepicker .xdsoft_time_box >div >div.xdsoft_disabled:hover{ - color: inherit !important; - background: inherit !important; - box-shadow: inherit !important; -} -.xdsoft_datetimepicker .xdsoft_calendar th{ - font-weight: 700; - text-align: center; - color: #999; - cursor:default; -} -.xdsoft_datetimepicker .xdsoft_copyright{ color:#ccc !important; font-size:10px;clear:both;float:none;margin-left:8px;} -.xdsoft_datetimepicker .xdsoft_copyright a{ color:#eee !important;} -.xdsoft_datetimepicker .xdsoft_copyright a:hover{ color:#aaa !important;} - - -.xdsoft_time_box{ - position:relative; - border:1px solid #ccc; -} -.xdsoft_scrollbar >.xdsoft_scroller{ - background:#ccc !important; - height:20px; - border-radius:3px; -} -.xdsoft_scrollbar{ - position:absolute; - width:7px; - width:7px; - right:0px; - top:0px; - bottom:0px; - cursor:pointer; -} -.xdsoft_scroller_box{ -position:relative; -} \ No newline at end of file diff --git a/wagtail/wagtailadmin/templates/wagtailadmin/admin_base.html b/wagtail/wagtailadmin/templates/wagtailadmin/admin_base.html index 160853aca..8ec8efa05 100644 --- a/wagtail/wagtailadmin/templates/wagtailadmin/admin_base.html +++ b/wagtail/wagtailadmin/templates/wagtailadmin/admin_base.html @@ -4,7 +4,6 @@ {% block css %} {% compress css %} - {% endcompress %}