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
new file mode 100644
index 0000000000..d7e44df113
--- /dev/null
+++ b/src/Umbraco.Web.UI.Client/src/common/directives/components/umbdatetimepicker.directive.js
@@ -0,0 +1,179 @@
+/**
+@ngdoc directive
+@name umbraco.directives.directive:umbDateTimePicker
+@restrict E
+@scope
+
+@description
+Added in Umbraco version 7.6
+This directive is a wrapper of the bootstrap datetime picker version 3.1.3. Use it to render a date time picker.
+For extra details about options and events take a look here: http://eonasdan.github.io/bootstrap-datetimepicker/
+
+Use this directive to render a date time picker
+
+Markup example
+
+
+
+
+
+
+
+
+
+Controller example
+
+ (function () {
+ "use strict";
+
+ function Controller() {
+
+ var vm = this;
+
+ vm.date = "";
+
+ vm.config = {
+ pickDate: true,
+ pickTime: true,
+ useSeconds: true,
+ format: "YYYY-MM-DD HH:mm:ss",
+ icons: {
+ time: "icon-time",
+ date: "icon-calendar",
+ up: "icon-chevron-up",
+ down: "icon-chevron-down"
+ }
+ };
+
+ vm.datePickerChange = datePickerChange;
+ vm.datePickerError = datePickerError;
+
+ function datePickerChange(event) {
+ // handle change
+ if(event.date && event.date.isValid()) {
+ var date = event.date.format(vm.datePickerConfig.format);
+ }
+ }
+
+ function datePickerError(event) {
+ // handle error
+ }
+
+ }
+
+ angular.module("umbraco").controller("My.Controller", Controller);
+
+ })();
+
+
+@param {object} options (binding): Config object for the date picker.
+@param {callback} onHide (callback): Hide callback.
+@param {callback} onShow (callback): Show callback.
+@param {callback} onChange (callback): Change callback.
+@param {callback} onError (callback): Error callback.
+@param {callback} onUpdate (callback): Update callback.
+**/
+
+(function () {
+ 'use strict';
+
+ function DateTimePickerDirective(assetsService) {
+
+ function link(scope, element, attrs, ctrl) {
+
+ function onInit() {
+ // load css file for the date picker
+ assetsService.loadCss('lib/datetimepicker/bootstrap-datetimepicker.min.css');
+
+ // load the js file for the date picker
+ assetsService.loadJs('lib/datetimepicker/bootstrap-datetimepicker.js').then(function () {
+ // init date picker
+ initDatePicker();
+ });
+ }
+
+ function onHide(event) {
+ if (scope.onHide) {
+ scope.$apply(function(){
+ // callback
+ scope.onHide({event: event});
+ });
+ }
+ }
+
+ function onShow() {
+ if (scope.onShow) {
+ scope.$apply(function(){
+ // callback
+ scope.onShow();
+ });
+ }
+ }
+
+ function onChange(event) {
+ if (scope.onChange && event.date && event.date.isValid()) {
+ scope.$apply(function(){
+ // callback
+ scope.onChange({event: event});
+ });
+ }
+ }
+
+ function onError(event) {
+ if (scope.onError) {
+ scope.$apply(function(){
+ // callback
+ scope.onError({event:event});
+ });
+ }
+ }
+
+ function onUpdate(event) {
+ if (scope.onUpdate) {
+ scope.$apply(function(){
+ // callback
+ scope.onUpdate({event: event});
+ });
+ }
+ }
+
+ function initDatePicker() {
+ // Open the datepicker and add a changeDate eventlistener
+ element
+ .datetimepicker(scope.options)
+ .on("dp.hide", onHide)
+ .on("dp.show", onShow)
+ .on("dp.change", onChange)
+ .on("dp.error", onError)
+ .on("dp.update", onUpdate);
+ }
+
+ onInit();
+
+ }
+
+ var directive = {
+ restrict: 'E',
+ replace: true,
+ templateUrl: 'views/components/umb-date-time-picker.html',
+ scope: {
+ options: "=",
+ onHide: "&",
+ onShow: "&",
+ onChange: "&",
+ onError: "&",
+ onUpdate: "&"
+ },
+ link: link
+ };
+
+ return directive;
+
+ }
+
+ angular.module('umbraco.directives').directive('umbDateTimePicker', DateTimePickerDirective);
+
+})();
diff --git a/src/Umbraco.Web.UI.Client/src/less/components/umb-querybuilder.less b/src/Umbraco.Web.UI.Client/src/less/components/umb-querybuilder.less
index fb6279608e..cf72c04b1b 100644
--- a/src/Umbraco.Web.UI.Client/src/less/components/umb-querybuilder.less
+++ b/src/Umbraco.Web.UI.Client/src/less/components/umb-querybuilder.less
@@ -23,4 +23,19 @@
.umb-querybuilder .row > div {
padding: 20px 0;
border-bottom: 1px solid @grayLighter;
+}
+
+.umb-querybuilder .datepicker input {
+ width: 90px;
+}
+
+.umb-querybuilder .query-items {
+ display: flex;
+ flex-wrap: wrap;
+ align-items: center;
+}
+
+.umb-querybuilder .query-items > * {
+ flex: 0 1 auto;
+ margin: 5px;
}
\ No newline at end of file
diff --git a/src/Umbraco.Web.UI.Client/src/views/common/overlays/querybuilder/querybuilder.controller.js b/src/Umbraco.Web.UI.Client/src/views/common/overlays/querybuilder/querybuilder.controller.js
index bc5bc10e13..d04b7f35a3 100644
--- a/src/Umbraco.Web.UI.Client/src/views/common/overlays/querybuilder/querybuilder.controller.js
+++ b/src/Umbraco.Web.UI.Client/src/views/common/overlays/querybuilder/querybuilder.controller.js
@@ -9,6 +9,12 @@
vm.contentTypes = [];
vm.conditions = [];
+ vm.datePickerConfig = {
+ pickDate: true,
+ pickTime: false,
+ format: "YYYY-MM-DD"
+ };
+
vm.query = {
contentType: {
name: "Everything"
@@ -41,6 +47,7 @@
vm.setFilterProperty = setFilterProperty;
vm.setFilterTerm = setFilterTerm;
vm.changeConstraintValue = changeConstraintValue;
+ vm.datePickerChange = datePickerChange;
function onInit() {
@@ -58,7 +65,7 @@
.then(function (conditions) {
vm.conditions = conditions;
});
-
+
throttledFunc();
}
@@ -134,18 +141,28 @@
function setFilterProperty(filter, property) {
filter.property = property;
- throttledFunc();
+ filter.term = {};
+ filter.constraintValue = "";
}
function setFilterTerm(filter, term) {
filter.term = term;
- throttledFunc();
+ if(filter.constraintValue) {
+ throttledFunc();
+ }
}
function changeConstraintValue() {
throttledFunc();
}
+ function datePickerChange(event, filter) {
+ if(event.date && event.date.isValid()) {
+ filter.constraintValue = event.date.format(vm.datePickerConfig.format);
+ throttledFunc();
+ }
+ }
+
var throttledFunc = _.throttle(function () {
templateQueryResource.postTemplateQuery(vm.query)
@@ -154,7 +171,6 @@
});
}, 200);
-
onInit();
diff --git a/src/Umbraco.Web.UI.Client/src/views/common/overlays/querybuilder/querybuilder.html b/src/Umbraco.Web.UI.Client/src/views/common/overlays/querybuilder/querybuilder.html
index 40fb909390..906bf0f84d 100644
--- a/src/Umbraco.Web.UI.Client/src/views/common/overlays/querybuilder/querybuilder.html
+++ b/src/Umbraco.Web.UI.Client/src/views/common/overlays/querybuilder/querybuilder.html
@@ -3,8 +3,9 @@
-
- I want
+
+
+
I want
@@ -30,7 +31,7 @@
-
-
+
- Order by
+
Order by
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
new file mode 100644
index 0000000000..aaf8cfe62d
--- /dev/null
+++ b/src/Umbraco.Web.UI.Client/src/views/components/umb-date-time-picker.html
@@ -0,0 +1,6 @@
+
+
+
+
\ No newline at end of file
diff --git a/src/Umbraco.Web.UI.Client/src/views/templates/edit.controller.js b/src/Umbraco.Web.UI.Client/src/views/templates/edit.controller.js
index beac32be95..3cf454c886 100644
--- a/src/Umbraco.Web.UI.Client/src/views/templates/edit.controller.js
+++ b/src/Umbraco.Web.UI.Client/src/views/templates/edit.controller.js
@@ -1,7 +1,7 @@
(function () {
"use strict";
- function TemplatesEditController($scope, $routeParams, templateResource, assetsService, notificationsService, editorState, navigationService, appState, macroService, treeService, angularHelper) {
+ function TemplatesEditController($scope, $routeParams, templateResource, assetsService, notificationsService, editorState, navigationService, appState, macroService, treeService, angularHelper, $timeout) {
var vm = this;
var oldMasterTemplateAlias = null;
@@ -104,6 +104,7 @@
// save state of master template to use for comparison when syncing the tree on save
oldMasterTemplateAlias = angular.copy(template.masterTemplateAlias);
+ // ace configuration
vm.aceOption = {
mode: "razor",
theme: "chrome",
@@ -114,15 +115,23 @@
onLoad: function(_editor) {
vm.editor = _editor;
- //initial cursor placement
- vm.editor.navigateFileEnd();
- persistCurrentLocation();
+ // initial cursor placement
+ // Keep cursor in name field if we are create a new template
+ // else set the cursor at the bottom of the code editor
+ if(!$routeParams.create) {
+ $timeout(function(){
+ vm.editor.navigateFileEnd();
+ vm.editor.focus();
+ persistCurrentLocation();
+ });
+ }
//change on blur, focus
vm.editor.on("blur", persistCurrentLocation);
vm.editor.on("focus", persistCurrentLocation);
}
}
+
};
vm.openPageFieldOverlay = openPageFieldOverlay;
@@ -174,8 +183,11 @@
},
close: function(oldModel) {
+ // close the dialog
vm.insertOverlay.show = false;
vm.insertOverlay = null;
+ // focus editor
+ vm.editor.focus();
}
};
@@ -197,6 +209,13 @@
vm.macroPickerOverlay.show = false;
vm.macroPickerOverlay = null;
+ },
+ close: function(oldModel) {
+ // close the dialog
+ vm.macroPickerOverlay.show = false;
+ vm.macroPickerOverlay = null;
+ // focus editor
+ vm.editor.focus();
}
};
}
@@ -214,8 +233,11 @@
vm.pageFieldOverlay = null;
},
close: function (model) {
+ // close the dialog
vm.pageFieldOverlay.show = false;
vm.pageFieldOverlay = null;
+ // focus editor
+ vm.editor.focus();
}
};
}
@@ -239,8 +261,11 @@
vm.dictionaryItemOverlay = null;
},
close: function (model) {
+ // close dialog
vm.dictionaryItemOverlay.show = false;
vm.dictionaryItemOverlay = null;
+ // focus editor
+ vm.editor.focus();
}
};
}
@@ -263,8 +288,11 @@
vm.partialItemOverlay = null;
},
close: function (model) {
+ // close dialog
vm.partialItemOverlay.show = false;
vm.partialItemOverlay = null;
+ // focus editor
+ vm.editor.focus();
}
};
}
@@ -293,8 +321,11 @@
},
close: function (model) {
+ // close dialog
vm.queryBuilderOverlay.show = false;
vm.queryBuilderOverlay = null;
+ // focus editor
+ vm.editor.focus();
}
};
}
@@ -326,10 +357,11 @@
},
close: function(model) {
-
+ // close dialog
vm.sectionsOverlay.show = false;
vm.sectionsOverlay = null;
-
+ // focus editor
+ vm.editor.focus();
}
}
}
@@ -367,8 +399,11 @@
vm.masterTemplateOverlay = null;
},
close: function(oldModel) {
+ // close dialog
vm.masterTemplateOverlay.show = false;
vm.masterTemplateOverlay = null;
+ // focus editor
+ vm.editor.focus();
}
};
@@ -441,6 +476,7 @@
vm.editor.clearSelection();
vm.editor.navigateFileStart();
+ vm.editor.focus();
// set form state to $dirty
setFormState("dirty");
diff --git a/src/Umbraco.Web.UI.Client/test/unit/app/templates/template-editor-controller.spec.js b/src/Umbraco.Web.UI.Client/test/unit/app/templates/template-editor-controller.spec.js
index aae0694876..7820beaf16 100644
--- a/src/Umbraco.Web.UI.Client/test/unit/app/templates/template-editor-controller.spec.js
+++ b/src/Umbraco.Web.UI.Client/test/unit/app/templates/template-editor-controller.spec.js
@@ -47,6 +47,7 @@
getCursorPosition: function() {},
getValue: function() {},
setValue: function() {},
+ focus: function() {},
clearSelection: function() {},
navigateFileStart: function() {}
};