Add prototype for template section
This commit is contained in:
Mads Rasmussen
@@ -598,23 +598,59 @@
|
||||
|
||||
}
|
||||
|
||||
/* ---------- SUB VIEWS COLUMNS ----------- */
|
||||
/* ---------- TEMPLATES GRID ------------ */
|
||||
|
||||
.sub-view-columns {
|
||||
.templates-grid {
|
||||
display: flex;
|
||||
margin-bottom: 40px;
|
||||
h5 {
|
||||
margin-top: 0;
|
||||
}
|
||||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.sub-view-column-left {
|
||||
flex: 0 0 250px;
|
||||
margin-right: 70px;
|
||||
.template {
|
||||
width: 125px;
|
||||
height: 150px;
|
||||
padding: 20px;
|
||||
background: #f8f8f8;
|
||||
border: 1px solid #CCCCCC;
|
||||
text-align: center;
|
||||
margin: 0 20px 20px 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border-radius: 5px;
|
||||
animation: fadeIn 0.5s;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.sub-view-column-right {
|
||||
flex: 1;
|
||||
.template .template-content .icon {
|
||||
font-size: 50px;
|
||||
color: #d9d9d9;
|
||||
}
|
||||
|
||||
.template .remove-template {
|
||||
position: absolute;
|
||||
top: 5px;
|
||||
right: 5px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.template .template-default-label {
|
||||
font-size: 11px;
|
||||
color: #d9d9d9;
|
||||
}
|
||||
|
||||
.template .link-blue {
|
||||
color: @blue;
|
||||
}
|
||||
|
||||
.template.template-default {
|
||||
border-width: 2px;
|
||||
}
|
||||
|
||||
.template.template-placeholder {
|
||||
border: 1px dashed #d9d9d9;
|
||||
background: none;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
/* ---------- CHILD NODE TREE ---------- */
|
||||
|
||||
@@ -0,0 +1,14 @@
|
||||
/**
|
||||
* @ngdoc controller
|
||||
* @name Umbraco.Editors.DocumentType.PropertyController
|
||||
* @function
|
||||
*
|
||||
* @description
|
||||
* The controller for the content type editor property dialog
|
||||
*/
|
||||
function AvailableTemplatesController($scope) {
|
||||
|
||||
|
||||
}
|
||||
|
||||
angular.module("umbraco").controller("Umbraco.Editors.DocumentType.AvailableTemplatesController", AvailableTemplatesController);
|
||||
@@ -0,0 +1,10 @@
|
||||
<div ng-controller="Umbraco.Editors.DocumentType.AvailableTemplatesController">
|
||||
<div class="dialog-grid">
|
||||
<div class="dialog-grid-element" ng-repeat="availableTemplate in model.templates | filter:{show:true} | orderBy:'name'">
|
||||
<a href="" ng-click="model.chooseTemplate(availableTemplate)">
|
||||
<i class="icon icon-newspaper-alt"></i>
|
||||
{{ availableTemplate.name }}
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -46,7 +46,7 @@ function DocumentTypeEditController($scope, $rootScope, $routeParams, $log, cont
|
||||
},
|
||||
{
|
||||
"name": "Templates",
|
||||
"icon": "article",
|
||||
"icon": "newspaper-alt",
|
||||
"view": "views/documentType/views/templates/templates.html"
|
||||
}
|
||||
];
|
||||
|
||||
@@ -0,0 +1,109 @@
|
||||
/**
|
||||
* @ngdoc controller
|
||||
* @name Umbraco.Editors.DocumentType.TemplatesController
|
||||
* @function
|
||||
*
|
||||
* @description
|
||||
* The controller for the content type editor templates sub view
|
||||
*/
|
||||
function TemplatesController($scope, contentTypeResource) {
|
||||
|
||||
/* ----------- SCOPE VARIABLES ----------- */
|
||||
|
||||
$scope.templates = {};
|
||||
$scope.templates.availableTemplates = [];
|
||||
|
||||
|
||||
/* ---------- INIT ---------- */
|
||||
|
||||
init();
|
||||
|
||||
function init() {
|
||||
|
||||
contentTypeResource.getAll().then(function(contentTypes){
|
||||
$scope.templates.availableTemplates = contentTypes;
|
||||
|
||||
// we should be able to move this to a custom filter
|
||||
angular.forEach($scope.templates.availableTemplates, function(template){
|
||||
|
||||
var exists = false;
|
||||
|
||||
angular.forEach($scope.contentType.allowedTemplates, function(allowedTemplate){
|
||||
|
||||
if( template.alias === allowedTemplate.alias ) {
|
||||
exists = true;
|
||||
}
|
||||
|
||||
});
|
||||
|
||||
if(exists) {
|
||||
template.show = false;
|
||||
} else {
|
||||
template.show = true;
|
||||
}
|
||||
|
||||
});
|
||||
|
||||
});
|
||||
|
||||
}
|
||||
|
||||
$scope.removeTemplate = function(selectedTemplate) {
|
||||
|
||||
// splice from array
|
||||
var selectedTemplateIndex = $scope.contentType.allowedTemplates.indexOf(selectedTemplate);
|
||||
$scope.contentType.allowedTemplates.splice(selectedTemplateIndex, 1);
|
||||
|
||||
// show content type in content types array
|
||||
for (var templateIndex = 0; templateIndex < $scope.templates.availableTemplates.length; templateIndex++) {
|
||||
|
||||
var template = $scope.templates.availableTemplates[templateIndex];
|
||||
|
||||
if( selectedTemplate.alias === template.alias ) {
|
||||
template.show = true;
|
||||
}
|
||||
}
|
||||
|
||||
};
|
||||
|
||||
$scope.openTemplatesPicker = function($event){
|
||||
$scope.showDialog = false;
|
||||
$scope.dialogModel = {};
|
||||
$scope.dialogModel.title = "Choose template";
|
||||
$scope.dialogModel.templates = $scope.templates.availableTemplates;
|
||||
$scope.dialogModel.event = $event;
|
||||
$scope.dialogModel.view = "views/documentType/dialogs/templates/templates.html";
|
||||
$scope.showDialog = true;
|
||||
|
||||
$scope.dialogModel.chooseTemplate = function(selectedTemplate) {
|
||||
|
||||
$scope.contentType.allowedTemplates.push(selectedTemplate);
|
||||
|
||||
for (var templateIndex = 0; templateIndex < $scope.templates.availableTemplates.length; templateIndex++) {
|
||||
|
||||
var template = $scope.templates.availableTemplates[templateIndex];
|
||||
|
||||
if( selectedTemplate.alias === template.alias ) {
|
||||
template.show = false;
|
||||
}
|
||||
}
|
||||
|
||||
$scope.showDialog = false;
|
||||
$scope.dialogModel = null;
|
||||
};
|
||||
|
||||
$scope.dialogModel.close = function(){
|
||||
$scope.showDialog = false;
|
||||
$scope.dialogModel = null;
|
||||
};
|
||||
|
||||
};
|
||||
|
||||
$scope.setAsDefaultTemplate = function(template) {
|
||||
$scope.contentType.defaultTemplate = {};
|
||||
$scope.contentType.defaultTemplate = template;
|
||||
};
|
||||
|
||||
}
|
||||
|
||||
angular.module("umbraco").controller("Umbraco.Editors.DocumentType.TemplatesController", TemplatesController);
|
||||
@@ -1 +1,49 @@
|
||||
templates
|
||||
<div class="sub-view-columns" ng-controller="Umbraco.Editors.DocumentType.TemplatesController">
|
||||
|
||||
<div class="sub-view-column-left">
|
||||
<h5>Allowed Templates</h5>
|
||||
<small>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec vulputate velit a velit consectetur luctus.</small>
|
||||
</div>
|
||||
|
||||
<div class="sub-view-column-right">
|
||||
|
||||
<div class="templates-grid">
|
||||
|
||||
<div class="template template-default">
|
||||
<div class="template-content">
|
||||
<i class="icon icon-newspaper-alt"></i>
|
||||
<div class="template-name">{{ contentType.defaultTemplate.name }}</div>
|
||||
<span class="template-default-label">(Default)</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="template" ng-repeat="template in contentType.allowedTemplates | filter: { id:'!'+contentType.defaultTemplate.id }">
|
||||
<div class="template-content">
|
||||
<i class="icon icon-newspaper-alt"></i>
|
||||
<div class="template-name">{{ template.name }}</div>
|
||||
<a href="" class="template-default-label link-blue" ng-click="setAsDefaultTemplate(template)">Set as default</a>
|
||||
</div>
|
||||
<i class="icon icon-trash remove-template" ng-click="removeTemplate(template)"></i>
|
||||
</div>
|
||||
|
||||
<div class="template template-placeholder">
|
||||
<div class="template-content">
|
||||
<div class="template-name" ng-click="openTemplatesPicker($event)">Choose template</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<umb-overlay
|
||||
ng-style=""
|
||||
ng-if="showDialog"
|
||||
model="dialogModel"
|
||||
animation="slide-in-right"
|
||||
position="target"
|
||||
view="dialogModel.view">
|
||||
</umb-overlay>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user