diff --git a/src/Umbraco.Web.UI.Client/bower.json b/src/Umbraco.Web.UI.Client/bower.json index 0ae1e2f214..439febb63d 100644 --- a/src/Umbraco.Web.UI.Client/bower.json +++ b/src/Umbraco.Web.UI.Client/bower.json @@ -30,6 +30,7 @@ "angular-local-storage": "~0.2.3", "moment": "~2.10.3", "ace-builds": "^1.2.3", - "clipboard": "1.7.1" + "clipboard": "1.7.1", + "angular-moment": "^1.0.1" } } diff --git a/src/Umbraco.Web.UI.Client/gruntFile.js b/src/Umbraco.Web.UI.Client/gruntFile.js index 5170fddcba..f0b3ae96b2 100644 --- a/src/Umbraco.Web.UI.Client/gruntFile.js +++ b/src/Umbraco.Web.UI.Client/gruntFile.js @@ -560,7 +560,11 @@ module.exports = function (grunt) { 'clipboard': { keepExpandedHierarchy: false, files: ['dist/clipboard.min.js'] - } + }, + 'angular-moment': { + keepExpandedHierarchy: false, + files: ['angular-moment.min.js'] + } } } }, diff --git a/src/Umbraco.Web.UI.Client/src/app.js b/src/Umbraco.Web.UI.Client/src/app.js index e7b7288f43..bf25b1fab9 100644 --- a/src/Umbraco.Web.UI.Client/src/app.js +++ b/src/Umbraco.Web.UI.Client/src/app.js @@ -11,7 +11,8 @@ var app = angular.module('umbraco', [ 'ngMobile', 'tmh.dynamicLocale', 'ngFileUpload', - 'LocalStorageModule' + 'LocalStorageModule', + 'angularMoment' ]); var packages = angular.module("umbraco.packages", []); diff --git a/src/Umbraco.Web.UI.Client/src/common/directives/components/content/edit.controller.js b/src/Umbraco.Web.UI.Client/src/common/directives/components/content/edit.controller.js index 076872b503..1ca42f20c1 100644 --- a/src/Umbraco.Web.UI.Client/src/common/directives/components/content/edit.controller.js +++ b/src/Umbraco.Web.UI.Client/src/common/directives/components/content/edit.controller.js @@ -402,6 +402,35 @@ }); }; + + $scope.datePickerConfig = { + pickDate: true, + pickTime: true, + useSeconds: false, + format: "YYYY-MM-DD HH:mm", + icons: { + time: "icon-time", + date: "icon-calendar", + up: "icon-chevron-up", + down: "icon-chevron-down" + } + }; + + $scope.datePickerChange = function(event, type) { + if(type === 'publish') { + setPublishDate(event.date.format("YYYY-MM-DD HH:mm")); + } else if( type === 'unpublish') { + setUnpublishDate(event.date.format("YYYY-MM-DD HH:mm")); + } + }; + + $scope.clearPublishDate = function() { + clearPublishDate(); + }; + + $scope.clearUnpublishDate = function() { + clearUnpublishDate(); + }; function setAuditTrailActionColor(auditTrail) { angular.forEach(auditTrail, function (item) { @@ -452,6 +481,70 @@ } + function setPublishDate(date) { + + // update publish value + $scope.content.releaseDate = date; + + // update template value on the correct tab + angular.forEach($scope.content.tabs, function(tab){ + angular.forEach(tab.properties, function(property){ + if(property.alias === "_umb_releasedate") { + property.value = date; + } + }); + }); + + } + + function clearPublishDate() { + + // update publish value + $scope.content.releaseDate = null; + + // update template value on the correct tab + angular.forEach($scope.content.tabs, function (tab) { + angular.forEach(tab.properties, function (property) { + if (property.alias === "_umb_releasedate") { + property.value = null; + } + }); + }); + + } + + function setUnpublishDate(date) { + + // update publish value + $scope.content.removeDate = date; + + // update template value on the correct tab + angular.forEach($scope.content.tabs, function (tab) { + angular.forEach(tab.properties, function (property) { + if (property.alias === "_umb_expiredate") { + property.value = date; + } + }); + }); + + } + + function clearUnpublishDate() { + + // update publish value + $scope.content.removeDate = null; + + // update template value on the correct tab + angular.forEach($scope.content.tabs, function (tab) { + angular.forEach(tab.properties, function (property) { + if (property.alias === "_umb_expiredate") { + property.value = null; + } + }); + }); + + } + } function createDirective() { diff --git a/src/Umbraco.Web.UI.Client/src/common/directives/components/umbdatetimepicker.directive.js b/src/Umbraco.Web.UI.Client/src/common/directives/components/umbdatetimepicker.directive.js index d7e44df113..7047fdb0a2 100644 --- a/src/Umbraco.Web.UI.Client/src/common/directives/components/umbdatetimepicker.directive.js +++ b/src/Umbraco.Web.UI.Client/src/common/directives/components/umbdatetimepicker.directive.js @@ -84,7 +84,13 @@ Use this directive to render a date time picker function link(scope, element, attrs, ctrl) { + scope.hasTranscludedContent = false; + function onInit() { + + // check for transcluded content so we can hide the defualt markup + scope.hasTranscludedContent = element.find('.js-datePicker__transcluded-content')[0].children.length > 0; + // load css file for the date picker assetsService.loadCss('lib/datetimepicker/bootstrap-datetimepicker.min.css'); @@ -148,7 +154,7 @@ Use this directive to render a date time picker .on("dp.show", onShow) .on("dp.change", onChange) .on("dp.error", onError) - .on("dp.update", onUpdate); + .on("dp.update", onUpdate); } onInit(); @@ -158,6 +164,7 @@ Use this directive to render a date time picker var directive = { restrict: 'E', replace: true, + transclude: true, templateUrl: 'views/components/umb-date-time-picker.html', scope: { options: "=", diff --git a/src/Umbraco.Web.UI.Client/src/less/properties.less b/src/Umbraco.Web.UI.Client/src/less/properties.less index 39422eb2ea..87a0857b57 100644 --- a/src/Umbraco.Web.UI.Client/src/less/properties.less +++ b/src/Umbraco.Web.UI.Client/src/less/properties.less @@ -18,17 +18,25 @@ } .date-wrapper__number{ - font-size: 48px; + font-size: 40px; line-height: 50px; color: @gray-2; font-weight: 900; } -.date-wrapper__title { +.date-container__title { font-size: 16px; - font-weight: 700; + font-weight: bold; color: @gray-3; - margin: 0 0 15px 0; + margin-bottom: 5px; +} + +.date-container__date { + padding: 0 10px; +} +.date-container__date:hover { + background-color: @gray-10; + cursor: pointer; } .date-wrapper__date{ @@ -46,9 +54,7 @@ } .date-separate { - height: 120px; - margin: 15px 0 0 0; - width: 2px; + width: 1px; background-color: @gray-8; } diff --git a/src/Umbraco.Web.UI.Client/src/views/components/content/edit.html b/src/Umbraco.Web.UI.Client/src/views/components/content/edit.html index 4d4f92ce80..77d76c6a5c 100644 --- a/src/Umbraco.Web.UI.Client/src/views/components/content/edit.html +++ b/src/Umbraco.Web.UI.Client/src/views/components/content/edit.html @@ -35,7 +35,7 @@ - + @@ -97,26 +97,78 @@ +
-
-
Publish date
-
October 2016
-
17
-
Wednesday 10:43 PM
+ +
+ + + + +
+ +
Publish date
+ +
+
{{content.releaseDate | amDateFormat:'MMMM'}} {{content.releaseDate | amDateFormat:'YYYY'}}
+
{{content.releaseDate | amDateFormat:'DD'}}
+
{{content.releaseDate | amDateFormat:'dddd'}} {{content.releaseDate | amDateFormat:'HH:mm'}}
+
+ + Set date + +
+ + + + + Clear date + +
+
-
-
Unpublish date
-
-
ADD
+ +
+ + +
+ +
Unpublish date
+ +
+
{{content.removeDate | amDateFormat:'MMMM'}} {{content.removeDate | amDateFormat:'YYYY'}}
+
{{content.removeDate | amDateFormat:'DD'}}
+
{{content.removeDate | amDateFormat:'dddd'}} {{content.removeDate | amDateFormat:'HH:mm'}}
+
+ + Set date + +
+ + + + + Clear date +
+
+ + - + + + Created {{ content.createDate }} by {{ content.owner.name }} +
-
+
- + +
- - - - diff --git a/src/Umbraco.Web.UI.Client/src/views/components/umb-date-time-picker.html b/src/Umbraco.Web.UI.Client/src/views/components/umb-date-time-picker.html index 6b37381113..2d12673a1f 100644 --- a/src/Umbraco.Web.UI.Client/src/views/components/umb-date-time-picker.html +++ b/src/Umbraco.Web.UI.Client/src/views/components/umb-date-time-picker.html @@ -1,6 +1,12 @@ -
- - - - +
+ +
+ + + + +
+ +
+
\ No newline at end of file diff --git a/src/Umbraco.Web/UI/JavaScript/JsInitialize.js b/src/Umbraco.Web/UI/JavaScript/JsInitialize.js index 3be8a58983..cff8c1aa2b 100644 --- a/src/Umbraco.Web/UI/JavaScript/JsInitialize.js +++ b/src/Umbraco.Web/UI/JavaScript/JsInitialize.js @@ -3,6 +3,9 @@ 'lib/angular/1.1.5/angular.min.js', 'lib/underscore/underscore-min.js', + 'lib/moment/moment.js', + 'lib/angular-moment/angular-moment.min.js', + 'lib/jquery-ui/jquery-ui.min.js', 'lib/jquery-ui-touch-punch/jquery.ui.touch-punch.js', @@ -14,7 +17,7 @@ 'lib/angular-dynamic-locale/tmhDynamicLocale.min.js', 'lib/ng-file-upload/ng-file-upload.min.js', - 'lib/angular-local-storage/angular-local-storage.min.js', + 'lib/angular-local-storage/angular-local-storage.min.js', //"lib/ace-builds/src-min-noconflict/ace.js",