css-template editor tweaks, more compat polish

This commit is contained in:
Per Ploug
2013-07-04 13:33:06 +02:00
parent a984bf0d68
commit d9e79666ca
25 changed files with 334 additions and 150 deletions

View File

@@ -114,7 +114,10 @@ module.exports = function (grunt) {
},
vs: {
files: [{ dest: '<%= vsdir %>', src : '**', expand: true, cwd: '<%= distdir %>' }]
files: [{ dest: '<%= vsdir %>/js', src : '**', expand: true, cwd: '<%= distdir %>/js/' }]
},
packages: {
files: [{ dest: '<%= vsdir %>/../App_Plugins', src : '**', expand: true, cwd: 'src/packages/' }]
}
},

View File

@@ -0,0 +1,22 @@
/* contains random bits and pieces we neede to make the U6 UI behave */
jQuery(document).ready(function () {
scaleScrollables("body");
jQuery(window).bind("resize", function () {
scaleScrollables("body");
});
});
function scaleScrollables(selector){
jQuery(".umb-scrollable").each(function () {
var el = jQuery(this);
var totalOffset = 0;
var offsety = el.data("offset-y");
if (offsety != undefined)
totalOffset += offsety;
el.height($(window).height() - (el.offset().top + totalOffset));
});
}

View File

@@ -12,103 +12,113 @@ angular.module('umbraco.services')
modalClass = options.modalClass || "umb-modalcolumn",
templateUrl = options.template || "views/common/notfound.html";
var callback = options.callback;
var $modal = $('<div class="modal umb-modal hide" data-backdrop="false" tabindex="-1"></div>');
var id = templateUrl.replace('.html', '').replace(/[\/|\.|:]/g, "-") + '-' + scope.$id;
$modal
.attr('id', id)
.addClass(animationClass)
.addClass(modalClass);
var callback = options.callback;
var $modal = $('<div class="modal umb-modal hide" data-backdrop="false" tabindex="-1"></div>');
var id = templateUrl.replace('.html', '').replace(/[\/|\.|:]/g, "-") + '-' + scope.$id;
$rootScope.$on("closeDialogs", function () {
$modal.modal("hide");
});
$modal
.attr('id', id)
.addClass(animationClass)
.addClass(modalClass);
$rootScope.$on("closeDialogs", function () {
$modal.modal("hide");
$modal.remove();
$("#" + $modal.attr("id")).remove();
});
if(options.iframe) {
var html = $("<iframe auto-scale='0' src='" + templateUrl + "' style='width: 100%; height: 100%;'></iframe>");
$modal.html(html);
$('body').append($modal);
if(width){
$modal.css("width", width);
}
if(options.iframe) {
var html = $("<iframe src='" + templateUrl + "' style='width: 100%; height: 100%;'></iframe>");
$modal.html(html);
$('body').append($modal);
//Autoshow
if (options.show) {
$modal.modal('show');
}
return $modal;
} else {
if (options.show) {
$modal.modal('show');
}
return $modal;
} else {
return $q.when($templateCache.get(templateUrl) || $http.get(templateUrl, { cache: true }).then(function (res) { return res.data; }))
.then(function onSuccess(template) {
.then(function onSuccess(template) {
// Build modal object
$modal
.html(template);
// Build modal object
$modal
.html(template);
$('body').append($modal);
$('body').append($modal);
// Compile modal content
$timeout(function () {
$compile($modal)(scope);
});
// Compile modal content
$timeout(function () {
$compile($modal)(scope);
});
//Scope to handle data from the modal form
scope.dialogData = {};
scope.dialogData.selection = [];
//Scope to handle data from the modal form
scope.dialogData = {};
scope.dialogData.selection = [];
// Provide scope display functions
scope.$modal = function (name) {
$modal.modal(name);
};
// Provide scope display functions
scope.$modal = function (name) {
$modal.modal(name);
};
scope.hide = function () {
$modal.modal('hide');
$('body').remove($modal);
};
scope.hide = function () {
$modal.modal('hide');
$modal.remove();
$("#" + $modal.attr("id")).remove();
};
scope.show = function () {
$modal.modal('show');
};
scope.show = function () {
$modal.modal('show');
};
scope.submit = function (data) {
$modal.modal('hide');
$('body').remove($modal);
scope.submit = function (data) {
if(callback){
callback(data);
}
callback(data);
};
$modal.modal('hide');
scope.select = function (item) {
if (scope.dialogData.selection.indexOf(item) < 0) {
scope.dialogData.selection.push(item);
}
};
$modal.remove();
$("#" + $modal.attr("id")).remove();
};
scope.dismiss = scope.hide;
scope.select = function (item) {
if (scope.dialogData.selection.indexOf(item) < 0) {
scope.dialogData.selection.push(item);
}
};
// Emit modal events
angular.forEach(['show', 'shown', 'hide', 'hidden'], function (name) {
$modal.on(name, function (ev) {
scope.$emit('modal-' + name, ev);
});
});
scope.dismiss = scope.hide;
// Support autofocus attribute
$modal.on('shown', function (event) {
$('input[autofocus]', $modal).first().trigger('focus');
});
// Emit modal events
angular.forEach(['show', 'shown', 'hide', 'hidden'], function (name) {
$modal.on(name, function (ev) {
scope.$emit('modal-' + name, ev);
});
});
// Support autofocus attribute
$modal.on('shown', function (event) {
$('input[autofocus]', $modal).first().trigger('focus');
});
//Autoshow
if (options.show) {
$modal.modal('show');
if (options.show) {
$modal.modal('show');
}
$rootScope.$on("closeDialogs", function () {
$modal.modal("hide");
});
//Return the modal object
return $modal;
});
return $modal;
});
}

View File

@@ -5,7 +5,6 @@
html, body {
height: 100%;
overflow: hidden
}
body {
@@ -13,7 +12,6 @@ body {
padding: 0;
height: 100%;
width: 100%;
overflow: hidden
}
.padded {

View File

@@ -3,6 +3,9 @@
/* CONTAINS ALL HACKS AND OTHER QUICK-FIXES THAT WE MUST HANDLE BEFORE A RELEASE */
/*ensures dialogs doesnt have side-by-side labels */
.umbracoDialog .controls-row{margin-left: 0px !important;}
.controls-row img {
max-width: none;
}

View File

@@ -0,0 +1,29 @@
<div class="searchPreview" ng-controller="Umbraco.Editors.SimpleEditorController">
<h3><a href="#">{{content.name}}</a></h3>
<a href="#">http://localhost/{{content.name}}</a>
<p>{{tab.properties[1].value}}</p>
</div>
<style>
.searchPreview h3{
font-size: 16px !Important;
line-height: 16px !Important;
padding: 0px; margin: 0px;
}
.searchPreview h3 a{
color: #12c; text-decoration: underline;}
.searchPreview a{
color: #009933;
font-size: 14px;
}
.searchPreview p{
color: #444;
font-size: 13px;
}
</style>

View File

@@ -0,0 +1,6 @@
(function () {
angular.module("umbraco").controller("Umbraco.Editors.SimpleEditorController",
function ($rootScope, $scope, notificationsService, dialogService) {
});
})();

View File

@@ -0,0 +1,14 @@
{
propertyEditors: [
{
id: "0BA0F832-D759-4526-9B3E-95BBFC98F82E",
name: "My Simple Editor",
editor: {
view: "~/App_Plugins/SimpleEditor/PropertyEditors/Views/simpleeditor.html"
}
}
],
javascript: [
'~/App_Plugins/SimpleEditor/PropertyEditors/Js/SimpleEditor.js'
]
}

View File

@@ -0,0 +1,18 @@
<div ng-controller="uComponents.Editors.MNTPController">
<ul class="nav nav-stacked">
<li ng-repeat="node in model.value">
<a href="#" prevent-default>
<i class="icon umb-tree-icon sprTree {{node.icon}}"></i>
{{node.name}}
</a>
</li>
<li>
<a href="#" ng-click="openContentPicker(model.value)" prevent-default>
<i class="icon icon-plus"></i> Add
</a>
</li>
</ul>
<br/><br/>
</div>

View File

@@ -0,0 +1,16 @@
//this controller simply tells the dialogs service to open a mediaPicker window
//with a specified callback, this callback will receive an object with a selection on it
angular.module('umbraco')
.controller("uComponents.Editors.MNTPController",
function($scope, dialogService){
alert("node!");
$scope.openContentPicker =function(value){
var d = dialogService.contentPicker({scope: $scope, callback: populate});
};
function populate(data){
$scope.model.value = data.selection;
}
});

View File

@@ -0,0 +1,15 @@
{
propertyEditors: [
{
id: "7e062c13-7c41-4ad9-b389-41d88aeef87c",
name: "Multinode treepicker",
editor: {
view: "~/App_Plugins/property editors/mntp/mntp.html"
}
}
]
,
javascript: [
'~/App_Plugins/property editors/mntp/mntp.js'
]
}

View File

@@ -33,10 +33,7 @@ angular.module("umbraco")
var imagePropVal = umbImageHelper.getImagePropertyVaue({imageModel: img, scope: $scope});
var data = {
src: (imagePropVal != null && imagePropVal != "")
? imagePropVal
: "nothing.jpg",
style: 'width: 100px; height: 100px',
src: (imagePropVal != null && imagePropVal != "") ? imagePropVal: "nothing.jpg",
id: '__mcenew'
};