prototype apps for media section

This commit is contained in:
Mads Rasmussen
2017-12-19 13:07:22 +01:00
parent 62954b4d7d
commit 760d7897d8
8 changed files with 139 additions and 25 deletions

View File

@@ -1,4 +1,4 @@
<umb-content-node-info
ng-if="model"
node="model">
</umb-content-node-info>
</umb-content-node-info>

View File

@@ -0,0 +1,19 @@
(function () {
"use strict";
function MediaAppContentController($scope) {
var vm = this;
function onInit() {
angular.forEach($scope.model.tabs, function(group){
group.open = true;
});
}
onInit();
}
angular.module("umbraco").controller("Umbraco.Editors.Media.Apps.ContentController", MediaAppContentController);
})();

View File

@@ -0,0 +1,17 @@
<div class="form-horizontal" ng-controller="Umbraco.Editors.Media.Apps.ContentController as vm">
<div class="umb-expansion-panel" ng-repeat="group in model.tabs | filter: { hide : '!' + true }">
<div class="umb-expansion-panel__header" ng-click="group.open = !group.open">
<div>{{ group.label }}</div>
<ins class="umb-expansion-panel__expand" ng-class="{'icon-navigation-down': !group.open, 'icon-navigation-up': group.open}" class="icon-navigation-right">&nbsp;</ins>
</div>
<div class="umb-expansion-panel__content" ng-show="group.open">
<umb-property data-element="property-{{group.alias}}" ng-repeat="property in group.properties" property="property">
<umb-editor model="property"></umb-editor>
</umb-property>
</div>
</div>
</div>

View File

@@ -0,0 +1,4 @@
<umb-media-node-info
ng-if="model"
node="model">
</umb-media-node-info>

View File

@@ -0,0 +1,23 @@
(function () {
"use strict";
function MediaAppListViewController($scope) {
var vm = this;
vm.listViewGroup = {};
function onInit() {
angular.forEach($scope.model.tabs, function(group){
if(group.alias === "Contents") {
vm.listViewGroup = group;
}
});
}
onInit();
}
angular.module("umbraco").controller("Umbraco.Editors.Media.Apps.ListViewController", MediaAppListViewController);
})();

View File

@@ -0,0 +1,8 @@
<div ng-controller="Umbraco.Editors.Media.Apps.ListViewController as vm">
<umb-property ng-repeat="property in vm.listViewGroup.properties" property="property">
<umb-editor model="property"></umb-editor>
</umb-property>
</div>

View File

@@ -10,35 +10,22 @@
<umb-editor-header
name="content.name"
tabs="content.tabs"
menu="page.menu"
hide-icon="true"
hide-description="true"
hide-alias="true">
hide-alias="true"
navigation="content.apps"
on-back="backToListView()"
show-back-button="{{page.listViewPath}}">
</umb-editor-header>
<umb-editor-container>
<umb-tabs-content view="true" class="form-horizontal">
<umb-tab id="tab{{tab.id}}" rel="{{tab.id}}" ng-repeat="tab in content.tabs">
<!-- Other tabs than info -->
<div ng-if="tab.id !== -1 && tab.alias !== '_umb_infoTab'">
<umb-property data-element="property-{{property.alias}}" property="property" ng-repeat="property in tab.properties">
<umb-editor model="property"></umb-editor>
</umb-property>
</div>
<!-- Info tab -->
<div ng-if="tab.id === -1 && tab.alias === '_umb_infoTab'">
<umb-media-node-info
ng-if="content"
node="content">
</umb-media-node-info>
</div>
</umb-tab>
</umb-tabs-content>
<umb-editor-sub-views
ng-if="!page.loading"
sub-views="content.apps"
model="content">
</umb-editor-sub-views>
</umb-editor-container>

View File

@@ -54,7 +54,9 @@ function mediaEditController($scope, $routeParams, appState, mediaResource, enti
editorState.set($scope.content);
// We don't get the info tab from the server from version 7.8 so we need to manually add it
contentEditingHelper.addInfoTab($scope.content.tabs);
//contentEditingHelper.addInfoTab($scope.content.tabs);
init($scope.content);
$scope.page.loading = false;
@@ -94,12 +96,62 @@ function mediaEditController($scope, $routeParams, appState, mediaResource, enti
}
// We don't get the info tab from the server from version 7.8 so we need to manually add it
contentEditingHelper.addInfoTab($scope.content.tabs);
//contentEditingHelper.addInfoTab($scope.content.tabs);
init($scope.content);
$scope.page.loading = false;
});
}
function init(content) {
// prototype content and info apps
var contentApp = {
"name": "Content",
"alias": "content",
"icon": "icon-document",
"view": "views/media/apps/content/content.html"
};
var infoApp = {
"name": "Info",
"alias": "info",
"icon": "icon-info",
"view": "views/media/apps/info/info.html"
};
var listview = {
"name": "Child items",
"alias": "childItems",
"icon": "icon-list",
"view": "views/media/apps/listview/listview.html"
};
$scope.content.apps = [];
if($scope.content.contentType.alias === "Folder") {
// add list view app
$scope.content.apps.push(listview);
// remove the list view tab
angular.forEach($scope.content.tabs, function(tab, index){
if(tab.alias === "Contents") {
tab.hide = true;
}
});
} else {
$scope.content.apps.push(contentApp);
}
$scope.content.apps.push(infoApp);
// set first app to active
$scope.content.apps[0].active = true;
}
$scope.save = function () {
@@ -152,6 +204,10 @@ function mediaEditController($scope, $routeParams, appState, mediaResource, enti
};
$scope.backToListView = function() {
$location.path($scope.page.listViewPath);
};
}
angular.module("umbraco")