move design view logic from edit.controller to design.controller
This commit is contained in:
Mads Rasmussen
@@ -349,7 +349,7 @@
|
||||
/* ---------- SORTING ---------- */
|
||||
|
||||
// sorting tabs
|
||||
.editors-document-type-canvas.is-in-sorting-mode {
|
||||
.is-in-sorting-mode {
|
||||
.edt-tab {
|
||||
min-height: 0;
|
||||
cursor: move;
|
||||
@@ -367,7 +367,7 @@
|
||||
|
||||
// sorting properties
|
||||
|
||||
.editors-document-type-canvas.is-in-sorting-mode {
|
||||
.is-in-sorting-mode {
|
||||
|
||||
.edt-property {
|
||||
height: 40px;
|
||||
|
||||
@@ -9,7 +9,6 @@
|
||||
function DocumentTypeEditController($scope, $rootScope, $routeParams, $log, contentTypeResource, entityResource, dataTypeResource, editorState, contentEditingHelper, formHelper, navigationService, iconHelper, contentTypeHelper, dataTypeHelper) {
|
||||
|
||||
$scope.page = {actions: [], menu: [], subViews: [] };
|
||||
$scope.sortingMode = false;
|
||||
$scope.currentNode = null; //the editors affiliated node
|
||||
|
||||
$scope.page.navigation = [
|
||||
@@ -23,14 +22,14 @@ function DocumentTypeEditController($scope, $rootScope, $routeParams, $log, cont
|
||||
"name": "Compositions",
|
||||
"icon": "merge",
|
||||
"action": function() {
|
||||
$scope.openCompositionsDialog();
|
||||
$scope.page.openCompositionsDialog();
|
||||
}
|
||||
},
|
||||
{
|
||||
"name": "Reorder",
|
||||
"icon": "navigation",
|
||||
"action": function() {
|
||||
$scope.toggleSortingMode();
|
||||
$scope.page.toggleSortingMode();
|
||||
}
|
||||
}
|
||||
]
|
||||
@@ -92,77 +91,6 @@ function DocumentTypeEditController($scope, $rootScope, $routeParams, $log, cont
|
||||
});
|
||||
};
|
||||
|
||||
/* ---------- TOOLBAR ---------- */
|
||||
|
||||
$scope.toggleSortingMode = function() {
|
||||
$scope.sortingMode = !$scope.sortingMode;
|
||||
};
|
||||
|
||||
$scope.openCompositionsDialog = function() {
|
||||
$scope.dialogModel = {};
|
||||
$scope.dialogModel.title = "Compositions";
|
||||
$scope.dialogModel.availableCompositeContentTypes = $scope.contentType.availableCompositeContentTypes;
|
||||
$scope.dialogModel.compositeContentTypes = $scope.contentType.compositeContentTypes;
|
||||
$scope.dialogModel.view = "views/documentType/dialogs/compositions/compositions.html";
|
||||
$scope.showDialog = true;
|
||||
|
||||
$scope.dialogModel.close = function(){
|
||||
$scope.showDialog = false;
|
||||
$scope.dialogModel = null;
|
||||
};
|
||||
|
||||
$scope.dialogModel.selectCompositeContentType = function(compositeContentType) {
|
||||
|
||||
if( $scope.contentType.compositeContentTypes.indexOf(compositeContentType.alias) === -1 ) {
|
||||
|
||||
//merge composition with content type
|
||||
contentTypeHelper.mergeCompositeContentType($scope.contentType, compositeContentType);
|
||||
|
||||
} else {
|
||||
|
||||
// split composition from content type
|
||||
contentTypeHelper.splitCompositeContentType($scope.contentType, compositeContentType);
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
};
|
||||
|
||||
/* ---------- TABS ---------- */
|
||||
|
||||
$scope.addTab = function(tab){
|
||||
|
||||
$scope.activateTab(tab);
|
||||
|
||||
// push new init tab to the scope
|
||||
contentTypeHelper.addInitTab($scope.contentType);
|
||||
|
||||
};
|
||||
|
||||
$scope.removeTab = function(tabIndex) {
|
||||
$scope.contentType.groups.splice(tabIndex, 1);
|
||||
};
|
||||
|
||||
$scope.activateTab = function(tab) {
|
||||
|
||||
// set all other tabs that are inactive to active
|
||||
angular.forEach($scope.contentType.groups, function(group){
|
||||
// skip init tab
|
||||
if(group.tabState !== "init") {
|
||||
group.tabState = "inActive";
|
||||
}
|
||||
});
|
||||
|
||||
tab.tabState = "active";
|
||||
|
||||
};
|
||||
|
||||
$scope.updateTabTitle = function(tab) {
|
||||
if(tab.properties.length === 0) {
|
||||
contentTypeHelper.addInitProperty(tab);
|
||||
}
|
||||
};
|
||||
|
||||
function init(contentType){
|
||||
|
||||
@@ -230,155 +158,7 @@ function DocumentTypeEditController($scope, $rootScope, $routeParams, $log, cont
|
||||
}
|
||||
}
|
||||
|
||||
/* ---------- PROPERTIES ---------- */
|
||||
|
||||
$scope.toggleGroupSize = function(group){
|
||||
if(group.columns !== 12){
|
||||
group.columns = 12;
|
||||
}else{
|
||||
group.columns = 6;
|
||||
}
|
||||
};
|
||||
|
||||
$scope.editPropertyTypeSettings = function(property) {
|
||||
|
||||
if(!property.inherited) {
|
||||
|
||||
$scope.dialogModel = {};
|
||||
$scope.dialogModel.title = "Edit property type settings";
|
||||
$scope.dialogModel.property = property;
|
||||
$scope.dialogModel.view = "views/documentType/dialogs/editPropertySettings/editPropertySettings.html";
|
||||
$scope.showDialog = true;
|
||||
|
||||
// set indicator on property to tell the dialog is open - is used to set focus on the element
|
||||
property.dialogIsOpen = true;
|
||||
|
||||
// set property to active
|
||||
property.propertyState = "active";
|
||||
|
||||
$scope.dialogModel.changePropertyEditor = function(property) {
|
||||
$scope.choosePropertyType(property);
|
||||
};
|
||||
|
||||
$scope.dialogModel.editDataType = function(property) {
|
||||
$scope.configDataType(property);
|
||||
};
|
||||
|
||||
$scope.dialogModel.submit = function(model){
|
||||
|
||||
property.dialogIsOpen = false;
|
||||
|
||||
$scope.showDialog = false;
|
||||
$scope.dialogModel = null;
|
||||
|
||||
// push new init property to scope
|
||||
contentTypeHelper.addInitPropertyOnActiveTab($scope.contentType);
|
||||
|
||||
};
|
||||
|
||||
$scope.dialogModel.close = function(model){
|
||||
$scope.showDialog = false;
|
||||
$scope.dialogModel = null;
|
||||
|
||||
// push new init property to scope
|
||||
contentTypeHelper.addInitPropertyOnActiveTab($scope.contentType);
|
||||
};
|
||||
|
||||
}
|
||||
};
|
||||
|
||||
$scope.choosePropertyType = function(property) {
|
||||
|
||||
$scope.dialogModel = {};
|
||||
$scope.dialogModel.title = "Choose property type";
|
||||
$scope.dialogModel.view = "views/documentType/dialogs/property.html";
|
||||
$scope.showDialog = true;
|
||||
|
||||
property.dialogIsOpen = true;
|
||||
|
||||
$scope.dialogModel.selectDataType = function(selectedDataType) {
|
||||
|
||||
contentTypeResource.getPropertyTypeScaffold(selectedDataType.id).then(function(propertyType){
|
||||
|
||||
property.config = propertyType.config;
|
||||
property.editor = propertyType.editor;
|
||||
property.view = propertyType.view;
|
||||
property.dataTypeId = selectedDataType.id;
|
||||
property.dataTypeIcon = selectedDataType.icon;
|
||||
property.dataTypeName = selectedDataType.name;
|
||||
|
||||
property.propertyState = "active";
|
||||
|
||||
console.log(property);
|
||||
|
||||
// open data type configuration
|
||||
$scope.editPropertyTypeSettings(property);
|
||||
|
||||
// push new init tab to scope
|
||||
contentTypeHelper.addInitTab($scope.contentType);
|
||||
|
||||
});
|
||||
|
||||
};
|
||||
|
||||
$scope.dialogModel.close = function(model){
|
||||
$scope.editPropertyTypeSettings(property);
|
||||
};
|
||||
|
||||
};
|
||||
|
||||
$scope.configDataType = function(property) {
|
||||
|
||||
$scope.dialogModel = {};
|
||||
$scope.dialogModel.title = "Edit data type";
|
||||
$scope.dialogModel.dataType = {};
|
||||
$scope.dialogModel.property = property;
|
||||
$scope.dialogModel.view = "views/documentType/dialogs/editDataType/editDataType.html";
|
||||
$scope.dialogModel.multiActions = [
|
||||
{
|
||||
label: "Save",
|
||||
action: function(dataType) {
|
||||
saveDataType(dataType, false);
|
||||
}
|
||||
},
|
||||
{
|
||||
label: "Save as new",
|
||||
action: function(dataType) {
|
||||
saveDataType(dataType, true);
|
||||
}
|
||||
}
|
||||
];
|
||||
$scope.showDialog = true;
|
||||
|
||||
function saveDataType(dataType, isNew) {
|
||||
|
||||
var preValues = dataTypeHelper.createPreValueProps(dataType.preValues);
|
||||
|
||||
dataTypeResource.save(dataType, preValues, isNew).then(function(dataType) {
|
||||
|
||||
contentTypeResource.getPropertyTypeScaffold(dataType.id).then(function(propertyType){
|
||||
|
||||
property.config = propertyType.config;
|
||||
property.editor = propertyType.editor;
|
||||
property.view = propertyType.view;
|
||||
property.dataTypeId = dataType.id;
|
||||
property.dataTypeIcon = dataType.icon;
|
||||
property.dataTypeName = dataType.name;
|
||||
|
||||
// open settings dialog
|
||||
$scope.editPropertyTypeSettings(property);
|
||||
|
||||
});
|
||||
|
||||
});
|
||||
|
||||
}
|
||||
|
||||
$scope.dialogModel.close = function(model){
|
||||
$scope.editPropertyTypeSettings(property);
|
||||
};
|
||||
|
||||
};
|
||||
|
||||
/** Syncs the content type to it's tree node - this occurs on first load and after saving */
|
||||
function syncTreeNode(dt, path, initialLoad) {
|
||||
@@ -389,49 +169,6 @@ function DocumentTypeEditController($scope, $rootScope, $routeParams, $log, cont
|
||||
|
||||
}
|
||||
|
||||
$scope.deleteProperty = function(tab, propertyIndex) {
|
||||
tab.properties.splice(propertyIndex, 1);
|
||||
};
|
||||
|
||||
/* ---------- SORTING OPTIONS ---------- */
|
||||
|
||||
$scope.sortableOptionsTab = {
|
||||
distance: 10,
|
||||
tolerance: "pointer",
|
||||
opacity: 0.7,
|
||||
scroll: true,
|
||||
cursor: "move",
|
||||
placeholder: "ui-sortable-tabs-placeholder",
|
||||
zIndex: 6000,
|
||||
handle: ".edt-tab-handle",
|
||||
items: ".edt-tab-sortable",
|
||||
start: function (e, ui) {
|
||||
ui.placeholder.height(ui.item.height());
|
||||
},
|
||||
stop: function(e, ui){
|
||||
|
||||
}
|
||||
};
|
||||
|
||||
$scope.sortableOptionsEditor = {
|
||||
distance: 10,
|
||||
tolerance: "pointer",
|
||||
connectWith: ".edt-property-list",
|
||||
opacity: 0.7,
|
||||
scroll: true,
|
||||
cursor: "move",
|
||||
placeholder: "ui-sortable-properties-placeholder",
|
||||
zIndex: 6000,
|
||||
handle: ".edt-property-handle",
|
||||
items: ".edt-property-sortable",
|
||||
start: function (e, ui) {
|
||||
ui.placeholder.height(ui.item.height());
|
||||
},
|
||||
stop: function(e, ui){
|
||||
|
||||
}
|
||||
};
|
||||
|
||||
}
|
||||
|
||||
angular.module("umbraco").controller("Umbraco.Editors.DocumentType.EditController", DocumentTypeEditController);
|
||||
|
||||
@@ -15,7 +15,7 @@
|
||||
|
||||
<umb-editor-container class="editors-document-type-container">
|
||||
|
||||
<div class="editors-document-type-canvas" ng-class="{'is-in-sorting-mode': sortingMode}">
|
||||
<div class="editors-document-type-canvas">
|
||||
|
||||
<umb-editor-sub-views></umb-editor-sub-views>
|
||||
|
||||
@@ -36,13 +36,4 @@
|
||||
|
||||
</form>
|
||||
|
||||
<!-- overlay for change property editor -->
|
||||
<umb-overlay
|
||||
ng-style="{'width': '500px'}"
|
||||
ng-if="showDialog"
|
||||
model="dialogModel"
|
||||
animation="slide-in-right"
|
||||
position="right"
|
||||
view="dialogModel.view">
|
||||
</umb-overlay>
|
||||
</div>
|
||||
@@ -0,0 +1,282 @@
|
||||
/**
|
||||
* @ngdoc controller
|
||||
* @name Umbraco.Editors.DocumentType.ListViewController
|
||||
* @function
|
||||
*
|
||||
* @description
|
||||
* The controller for the content type editor list view section
|
||||
*/
|
||||
function DesignController($scope, contentTypeResource, dataTypeResource, contentTypeHelper, dataTypeHelper) {
|
||||
|
||||
$scope.sortingMode = false;
|
||||
|
||||
/* ---------- TOOLBAR ---------- */
|
||||
|
||||
$scope.page.toggleSortingMode = function() {
|
||||
$scope.sortingMode = !$scope.sortingMode;
|
||||
};
|
||||
|
||||
$scope.page.openCompositionsDialog = function() {
|
||||
$scope.dialogModel = {};
|
||||
$scope.dialogModel.title = "Compositions";
|
||||
$scope.dialogModel.availableCompositeContentTypes = $scope.contentType.availableCompositeContentTypes;
|
||||
$scope.dialogModel.compositeContentTypes = $scope.contentType.compositeContentTypes;
|
||||
$scope.dialogModel.view = "views/documentType/dialogs/compositions/compositions.html";
|
||||
$scope.showDialog = true;
|
||||
|
||||
$scope.dialogModel.close = function(){
|
||||
$scope.showDialog = false;
|
||||
$scope.dialogModel = null;
|
||||
};
|
||||
|
||||
$scope.dialogModel.selectCompositeContentType = function(compositeContentType) {
|
||||
|
||||
if( $scope.contentType.compositeContentTypes.indexOf(compositeContentType.alias) === -1 ) {
|
||||
|
||||
//merge composition with content type
|
||||
contentTypeHelper.mergeCompositeContentType($scope.contentType, compositeContentType);
|
||||
|
||||
} else {
|
||||
|
||||
// split composition from content type
|
||||
contentTypeHelper.splitCompositeContentType($scope.contentType, compositeContentType);
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
};
|
||||
|
||||
/* ---------- TABS ---------- */
|
||||
|
||||
$scope.addTab = function(tab){
|
||||
|
||||
$scope.activateTab(tab);
|
||||
|
||||
// push new init tab to the scope
|
||||
contentTypeHelper.addInitTab($scope.contentType);
|
||||
|
||||
};
|
||||
|
||||
$scope.removeTab = function(tabIndex) {
|
||||
$scope.contentType.groups.splice(tabIndex, 1);
|
||||
};
|
||||
|
||||
$scope.activateTab = function(tab) {
|
||||
|
||||
// set all other tabs that are inactive to active
|
||||
angular.forEach($scope.contentType.groups, function(group){
|
||||
// skip init tab
|
||||
if(group.tabState !== "init") {
|
||||
group.tabState = "inActive";
|
||||
}
|
||||
});
|
||||
|
||||
tab.tabState = "active";
|
||||
|
||||
};
|
||||
|
||||
$scope.updateTabTitle = function(tab) {
|
||||
if(tab.properties.length === 0) {
|
||||
contentTypeHelper.addInitProperty(tab);
|
||||
}
|
||||
};
|
||||
|
||||
/* ---------- PROPERTIES ---------- */
|
||||
|
||||
$scope.toggleGroupSize = function(group){
|
||||
if(group.columns !== 12){
|
||||
group.columns = 12;
|
||||
}else{
|
||||
group.columns = 6;
|
||||
}
|
||||
};
|
||||
|
||||
$scope.editPropertyTypeSettings = function(property) {
|
||||
|
||||
if(!property.inherited) {
|
||||
|
||||
$scope.dialogModel = {};
|
||||
$scope.dialogModel.title = "Edit property type settings";
|
||||
$scope.dialogModel.property = property;
|
||||
$scope.dialogModel.view = "views/documentType/dialogs/editPropertySettings/editPropertySettings.html";
|
||||
$scope.showDialog = true;
|
||||
|
||||
// set indicator on property to tell the dialog is open - is used to set focus on the element
|
||||
property.dialogIsOpen = true;
|
||||
|
||||
// set property to active
|
||||
property.propertyState = "active";
|
||||
|
||||
$scope.dialogModel.changePropertyEditor = function(property) {
|
||||
$scope.choosePropertyType(property);
|
||||
};
|
||||
|
||||
$scope.dialogModel.editDataType = function(property) {
|
||||
$scope.configDataType(property);
|
||||
};
|
||||
|
||||
$scope.dialogModel.submit = function(model){
|
||||
|
||||
property.dialogIsOpen = false;
|
||||
|
||||
$scope.showDialog = false;
|
||||
$scope.dialogModel = null;
|
||||
|
||||
// push new init property to scope
|
||||
contentTypeHelper.addInitPropertyOnActiveTab($scope.contentType);
|
||||
|
||||
};
|
||||
|
||||
$scope.dialogModel.close = function(model){
|
||||
$scope.showDialog = false;
|
||||
$scope.dialogModel = null;
|
||||
|
||||
// push new init property to scope
|
||||
contentTypeHelper.addInitPropertyOnActiveTab($scope.contentType);
|
||||
};
|
||||
|
||||
}
|
||||
};
|
||||
|
||||
$scope.choosePropertyType = function(property) {
|
||||
|
||||
$scope.dialogModel = {};
|
||||
$scope.dialogModel.title = "Choose property type";
|
||||
$scope.dialogModel.view = "views/documentType/dialogs/property.html";
|
||||
$scope.showDialog = true;
|
||||
|
||||
property.dialogIsOpen = true;
|
||||
|
||||
$scope.dialogModel.selectDataType = function(selectedDataType) {
|
||||
|
||||
contentTypeResource.getPropertyTypeScaffold(selectedDataType.id).then(function(propertyType){
|
||||
|
||||
property.config = propertyType.config;
|
||||
property.editor = propertyType.editor;
|
||||
property.view = propertyType.view;
|
||||
property.dataTypeId = selectedDataType.id;
|
||||
property.dataTypeIcon = selectedDataType.icon;
|
||||
property.dataTypeName = selectedDataType.name;
|
||||
|
||||
property.propertyState = "active";
|
||||
|
||||
console.log(property);
|
||||
|
||||
// open data type configuration
|
||||
$scope.editPropertyTypeSettings(property);
|
||||
|
||||
// push new init tab to scope
|
||||
contentTypeHelper.addInitTab($scope.contentType);
|
||||
|
||||
});
|
||||
|
||||
};
|
||||
|
||||
$scope.dialogModel.close = function(model){
|
||||
$scope.editPropertyTypeSettings(property);
|
||||
};
|
||||
|
||||
};
|
||||
|
||||
$scope.configDataType = function(property) {
|
||||
|
||||
$scope.dialogModel = {};
|
||||
$scope.dialogModel.title = "Edit data type";
|
||||
$scope.dialogModel.dataType = {};
|
||||
$scope.dialogModel.property = property;
|
||||
$scope.dialogModel.view = "views/documentType/dialogs/editDataType/editDataType.html";
|
||||
$scope.dialogModel.multiActions = [
|
||||
{
|
||||
label: "Save",
|
||||
action: function(dataType) {
|
||||
saveDataType(dataType, false);
|
||||
}
|
||||
},
|
||||
{
|
||||
label: "Save as new",
|
||||
action: function(dataType) {
|
||||
saveDataType(dataType, true);
|
||||
}
|
||||
}
|
||||
];
|
||||
$scope.showDialog = true;
|
||||
|
||||
function saveDataType(dataType, isNew) {
|
||||
|
||||
var preValues = dataTypeHelper.createPreValueProps(dataType.preValues);
|
||||
|
||||
dataTypeResource.save(dataType, preValues, isNew).then(function(dataType) {
|
||||
|
||||
contentTypeResource.getPropertyTypeScaffold(dataType.id).then(function(propertyType){
|
||||
|
||||
property.config = propertyType.config;
|
||||
property.editor = propertyType.editor;
|
||||
property.view = propertyType.view;
|
||||
property.dataTypeId = dataType.id;
|
||||
property.dataTypeIcon = dataType.icon;
|
||||
property.dataTypeName = dataType.name;
|
||||
|
||||
// open settings dialog
|
||||
$scope.editPropertyTypeSettings(property);
|
||||
|
||||
});
|
||||
|
||||
});
|
||||
|
||||
}
|
||||
|
||||
$scope.dialogModel.close = function(model){
|
||||
$scope.editPropertyTypeSettings(property);
|
||||
};
|
||||
|
||||
};
|
||||
|
||||
$scope.deleteProperty = function(tab, propertyIndex) {
|
||||
tab.properties.splice(propertyIndex, 1);
|
||||
};
|
||||
|
||||
|
||||
/* ---------- SORTING OPTIONS ---------- */
|
||||
|
||||
$scope.sortableOptionsTab = {
|
||||
distance: 10,
|
||||
tolerance: "pointer",
|
||||
opacity: 0.7,
|
||||
scroll: true,
|
||||
cursor: "move",
|
||||
placeholder: "ui-sortable-tabs-placeholder",
|
||||
zIndex: 6000,
|
||||
handle: ".edt-tab-handle",
|
||||
items: ".edt-tab-sortable",
|
||||
start: function (e, ui) {
|
||||
ui.placeholder.height(ui.item.height());
|
||||
},
|
||||
stop: function(e, ui){
|
||||
|
||||
}
|
||||
};
|
||||
|
||||
$scope.sortableOptionsEditor = {
|
||||
distance: 10,
|
||||
tolerance: "pointer",
|
||||
connectWith: ".edt-property-list",
|
||||
opacity: 0.7,
|
||||
scroll: true,
|
||||
cursor: "move",
|
||||
placeholder: "ui-sortable-properties-placeholder",
|
||||
zIndex: 6000,
|
||||
handle: ".edt-property-handle",
|
||||
items: ".edt-property-sortable",
|
||||
start: function (e, ui) {
|
||||
ui.placeholder.height(ui.item.height());
|
||||
},
|
||||
stop: function(e, ui){
|
||||
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
}
|
||||
|
||||
angular.module("umbraco").controller("Umbraco.Editors.DocumentType.DesignController", DesignController);
|
||||
@@ -1,147 +1,159 @@
|
||||
<!-- TABS -->
|
||||
<ul ui-sortable="sortableOptionsTab" ng-model="contentType.groups" class="content-type-groups-list no-style-list">
|
||||
<div ng-controller="Umbraco.Editors.DocumentType.DesignController" ng-class="{'is-in-sorting-mode': sortingMode}">
|
||||
<ul ui-sortable="sortableOptionsTab" ng-model="contentType.groups" class="content-type-groups-list no-style-list">
|
||||
|
||||
<li ng-repeat="tab in contentType.groups" ng-class="{'edt-tab-sortable': sortingMode && !tab.inherited}">
|
||||
<li ng-repeat="tab in contentType.groups" ng-class="{'edt-tab-sortable': sortingMode && !tab.inherited}">
|
||||
|
||||
<!-- TAB INIT STATE -->
|
||||
<div class="edt-tab umb-card edt-tab-placeholder" ng-click="addTab(tab)" ng-show="tab.tabState=='init' && !sortingMode" ng-class="{'tab-state-init animated fadeIn': tab.tabState=='init'}">
|
||||
<!-- TAB INIT STATE -->
|
||||
<div class="edt-tab umb-card edt-tab-placeholder" ng-click="addTab(tab)" ng-show="tab.tabState=='init' && !sortingMode" ng-class="{'tab-state-init animated fadeIn': tab.tabState=='init'}">
|
||||
|
||||
<div class="tab-title-wrapper">
|
||||
<div class="tab-title">
|
||||
<span class="tab-title-text"></span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="edt-tab-center-text">
|
||||
<span ng-if="contentType.groups.length === 1">Add new tab</span>
|
||||
<span ng-if="contentType.groups.length > 1">Add another tab</span>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<!-- TAB ACTIVE OR INACTIVE STATE -->
|
||||
<div class="edt-tab umb-card" ng-class="{'tab-state-active':tab.tabState=='active', 'tab-state-inactive': tab.tabState=='inActive', 'tab-is-inherited': tab.inherited, 'edt-tab-handle': sortingMode && !tab.inherited}" ng-click="activateTab(tab)" ng-if="tab.tabState !== 'init'">
|
||||
|
||||
<div class="tab-remove" ng-if="!sortingMode && tab.properties.length <= 1">
|
||||
<i class="icon icon-trash" ng-click="removeTab($index)"></i>
|
||||
</div>
|
||||
|
||||
<div class="tab-title-wrapper">
|
||||
|
||||
<div class="tab-title">
|
||||
<i class="icon icon-navigation" ng-if="sortingMode && !tab.inherited"></i>
|
||||
<input class="tab-title-input" type="text" placeholder="Enter name..." ng-model="tab.name" ng-class="{'tab-title-placeholder': tab.name == ''}" ng-change="updateTabTitle(tab)" umb-blur="updateTabTitle(tab)" ng-disabled="tab.inherited" umb-auto-focus umb-auto-resize />
|
||||
<div class="tab-title-wrapper">
|
||||
<div class="tab-title">
|
||||
<span class="tab-title-text"></span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="edt-tab-inherited-from" ng-if="tab.inherited">
|
||||
<i class="icon icon-merge"></i> Inherited from {{ tab.inheritedFromName }}
|
||||
<span ng-repeat="contentTypeName in tab.parentTabContentTypeNames">
|
||||
{{ contentTypeName }}
|
||||
<span ng-if="!$last">, </span>
|
||||
</span>
|
||||
<div class="edt-tab-center-text">
|
||||
<span ng-if="contentType.groups.length === 1">Add new tab</span>
|
||||
<span ng-if="contentType.groups.length > 1">Add another tab</span>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="edt-property-group">
|
||||
<ul class="edt-property-list no-style-list" ui-sortable="sortableOptionsEditor"
|
||||
ng-model="tab.properties" class="no-style-list">
|
||||
<li ng-class="{'edt-property-sortable': sortingMode && !property.inherited}" ng-repeat="property in tab.properties">
|
||||
<!-- TAB ACTIVE OR INACTIVE STATE -->
|
||||
<div class="edt-tab umb-card" ng-class="{'tab-state-active':tab.tabState=='active', 'tab-state-inactive': tab.tabState=='inActive', 'tab-is-inherited': tab.inherited, 'edt-tab-handle': sortingMode && !tab.inherited}" ng-click="activateTab(tab)" ng-if="tab.tabState !== 'init'">
|
||||
|
||||
<!-- Init property / Property placeholder / add new property -->
|
||||
<div class="edt-property" ng-show="property.propertyState=='init'" ng-class="{'property-state-init animated fadeIn': property.propertyState=='init'}" ng-click="editPropertyTypeSettings(property)">
|
||||
<div class="tab-remove" ng-if="!sortingMode && tab.properties.length <= 1">
|
||||
<i class="icon icon-trash" ng-click="removeTab($index)"></i>
|
||||
</div>
|
||||
|
||||
<div class="edt-property-meta">
|
||||
<div class="placeholder-input-small"></div>
|
||||
<div class="placeholder-input"></div>
|
||||
<div class="placeholder-text-group">
|
||||
<div class="placeholder-text-line-full"></div>
|
||||
<div class="placeholder-text-line-full"></div>
|
||||
<div class="placeholder-text-line-short"></div>
|
||||
<div class="tab-title-wrapper">
|
||||
|
||||
<div class="tab-title">
|
||||
<i class="icon icon-navigation" ng-if="sortingMode && !tab.inherited"></i>
|
||||
<input class="tab-title-input" type="text" placeholder="Enter name..." ng-model="tab.name" ng-class="{'tab-title-placeholder': tab.name == ''}" ng-change="updateTabTitle(tab)" umb-blur="updateTabTitle(tab)" ng-disabled="tab.inherited" umb-auto-focus umb-auto-resize />
|
||||
</div>
|
||||
|
||||
<div class="edt-tab-inherited-from" ng-if="tab.inherited">
|
||||
<i class="icon icon-merge"></i> Inherited from {{ tab.inheritedFromName }}
|
||||
<span ng-repeat="contentTypeName in tab.parentTabContentTypeNames">
|
||||
{{ contentTypeName }}
|
||||
<span ng-if="!$last">, </span>
|
||||
</span>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="edt-property-group">
|
||||
<ul class="edt-property-list no-style-list" ui-sortable="sortableOptionsEditor"
|
||||
ng-model="tab.properties" class="no-style-list">
|
||||
<li ng-class="{'edt-property-sortable': sortingMode && !property.inherited}" ng-repeat="property in tab.properties">
|
||||
|
||||
<!-- Init property / Property placeholder / add new property -->
|
||||
<div class="edt-property" ng-show="property.propertyState=='init'" ng-class="{'property-state-init animated fadeIn': property.propertyState=='init'}" ng-click="editPropertyTypeSettings(property)">
|
||||
|
||||
<div class="edt-property-meta">
|
||||
<div class="placeholder-input-small"></div>
|
||||
<div class="placeholder-input"></div>
|
||||
<div class="placeholder-text-group">
|
||||
<div class="placeholder-text-line-full"></div>
|
||||
<div class="placeholder-text-line-full"></div>
|
||||
<div class="placeholder-text-line-short"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="edt-property-preview">
|
||||
<span class="placeholder-text">Add property</span>
|
||||
</div>
|
||||
|
||||
<div class="edt-property-actions"></div>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="edt-property-preview">
|
||||
<span class="placeholder-text">Add property</span>
|
||||
</div>
|
||||
<div class="edt-property" ng-show="property.propertyState!=='init'" ng-class="{'active': property.dialogIsOpen, 'property-state-active animated fadeIn': property.propertyState=='active', 'property-is-inherited': property.inherited, 'edt-property-handle': sortingMode && !property.inherited}">
|
||||
|
||||
<div class="edt-property-actions"></div>
|
||||
<!-- property meta text -->
|
||||
<div class="edt-property-meta">
|
||||
|
||||
</div>
|
||||
<div class="edt-property-inherited-from" ng-if="property.inherited"><i class="icon icon-merge"></i> Inherited from {{property.contentTypeName}}</div>
|
||||
|
||||
<div class="edt-property" ng-show="property.propertyState!=='init'" ng-class="{'active': property.dialogIsOpen, 'property-state-active animated fadeIn': property.propertyState=='active', 'property-is-inherited': property.inherited, 'edt-property-handle': sortingMode && !property.inherited}">
|
||||
<div ng-if="!sortingMode">
|
||||
|
||||
<!-- property meta text -->
|
||||
<div class="edt-property-meta">
|
||||
<div class="edt-property-meta-alias">{{ property.alias }}</div>
|
||||
|
||||
<div class="edt-property-inherited-from" ng-if="property.inherited"><i class="icon icon-merge"></i> Inherited from {{property.contentTypeName}}</div>
|
||||
<div class="edt-property-meta-label invisible-field">
|
||||
<textarea placeholder="Label..." ng-model="property.label" ng-disabled="property.inherited" umb-auto-resize></textarea>
|
||||
</div>
|
||||
|
||||
<div ng-if="!sortingMode">
|
||||
<div class="edt-property-meta-description invisible-field">
|
||||
<textarea ng-model="property.description" placeholder="Enter your description..." ng-disabled="property.inherited" umb-auto-resize></textarea>
|
||||
</div>
|
||||
|
||||
<div class="edt-property-meta-alias">{{ property.alias }}</div>
|
||||
|
||||
<div class="edt-property-meta-label invisible-field">
|
||||
<textarea placeholder="Label..." ng-model="property.label" ng-disabled="property.inherited" umb-auto-resize></textarea>
|
||||
</div>
|
||||
|
||||
<div class="edt-property-meta-description invisible-field">
|
||||
<textarea ng-model="property.description" placeholder="Enter your description..." ng-disabled="property.inherited" umb-auto-resize></textarea>
|
||||
<div ng-if="sortingMode">
|
||||
<i class="icon icon-navigation"></i>
|
||||
<span class="property-name">{{ property.label }}</span>
|
||||
<span class="item-alias">({{ property.alias }})</span>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div ng-if="sortingMode">
|
||||
<i class="icon icon-navigation"></i>
|
||||
<span class="property-name">{{ property.label }}</span>
|
||||
<span class="item-alias">({{ property.alias }})</span>
|
||||
|
||||
<div tabindex="-1" class="edt-property-preview" ng-click="editPropertyTypeSettings(property)">
|
||||
|
||||
<span class="edt-property-preview-overlay"></span>
|
||||
|
||||
<span class="edt-property-preview-label">
|
||||
<span ng-if="property.dataTypeName !== undefined">{{property.dataTypeName}}</span>
|
||||
<span ng-if="property.dataTypeName == undefined">Preview</span>
|
||||
</span>
|
||||
|
||||
<umb-property-editor model="property" ng-if="property.view !== undefined"></umb-property-editor>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<!-- row tools -->
|
||||
<div tabindex="-1" class="edt-property-actions">
|
||||
|
||||
<div ng-if="!property.inherited">
|
||||
|
||||
<div tabindex="-1" class="edt-property-preview" ng-click="editPropertyTypeSettings(property)">
|
||||
<!-- delete property -->
|
||||
<a href="" class="property-action property-action-delete" ng-click="deleteProperty(tab, $index)">
|
||||
<i class="icon icon-trash"></i>
|
||||
</a>
|
||||
|
||||
<span class="edt-property-preview-overlay"></span>
|
||||
<!-- settings for property -->
|
||||
<a href="" class="property-action property-action-edit" ng-click="editPropertyTypeSettings(property)">
|
||||
<i class="icon icon-settings"></i>
|
||||
</a>
|
||||
|
||||
<span class="edt-property-preview-label">
|
||||
<span ng-if="property.dataTypeName !== undefined">{{property.dataTypeName}}</span>
|
||||
<span ng-if="property.dataTypeName == undefined">Preview</span>
|
||||
</span>
|
||||
|
||||
<umb-property-editor model="property" ng-if="property.view !== undefined"></umb-property-editor>
|
||||
|
||||
</div>
|
||||
|
||||
<!-- row tools -->
|
||||
<div tabindex="-1" class="edt-property-actions">
|
||||
|
||||
<div ng-if="!property.inherited">
|
||||
|
||||
<!-- delete property -->
|
||||
<a href="" class="property-action property-action-delete" ng-click="deleteProperty(tab, $index)">
|
||||
<i class="icon icon-trash"></i>
|
||||
</a>
|
||||
|
||||
<!-- settings for property -->
|
||||
<a href="" class="property-action property-action-edit" ng-click="editPropertyTypeSettings(property)">
|
||||
<i class="icon icon-settings"></i>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</li>
|
||||
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<br>
|
||||
|
||||
<br>
|
||||
</li>
|
||||
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
</ul>
|
||||
<!-- overlay for change property editor -->
|
||||
<umb-overlay
|
||||
ng-style="{'width': '500px'}"
|
||||
ng-if="showDialog"
|
||||
model="dialogModel"
|
||||
animation="slide-in-right"
|
||||
position="right"
|
||||
view="dialogModel.view">
|
||||
</umb-overlay>
|
||||
|
||||
</div>
|
||||
Reference in New Issue
Block a user