yv01p/Umbraco-CMS
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge branch 'v8/feature/reintroduce-tabs' of https://github.com/umbraco/Umbraco-CMS into v8/feature/reintroduce-tabs

Browse Source
This commit is contained in:
Niels Lyngsø
2021-08-03 14:47:17 +02:00
parent d4b9ce6648 a5eeee038a
commit 8791c8dcc5
4 changed files with 64 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
src/Umbraco.Web.UI.Client/src/views/components/content/umb-tabbed-content.html
View File

@@ -6,7 +6,7 @@
</umb-editor-tab-bar>
<umb-box ng-repeat="tab in tabs track by tab.key" ng-show="tab.alias === activeTabAlias && tab.properties.length > 0">
<umb-box-content data-element="{{tab.alias}}">
<umb-box-content data-element="tab-content-{{tab.alias}}">
<umb-property
data-element="property-{{property.alias}}"
ng-repeat="property in tab.properties track by property.alias"
@@ -27,7 +27,7 @@
<div class="umb-group-panel"
retrive-dom-element="registerPropertyGroup(element[0], attributes.appAnchor)"
data-app-anchor="{{group.id}}"
data-element="tab-content-{{group.alias}}"
data-element="group-{{group.alias}}"
ng-repeat="group in content.tabs track by group.key"
ng-show="(group.parentAlias === activeTabAlias && group.type === 0) || tabs.length === 0">
@@ -35,7 +35,7 @@
<div id="group-{{group.id}}">{{ group.label }}</div>
</div>
<div class="umb-group-panel__content">
<div class="umb-group-panel__content" data-element="tab-content-{{group.parentAlias}}">
<umb-property
data-element="property-{{property.alias}}"
ng-repeat="property in group.properties track by property.alias"

4
src/Umbraco.Web.UI.Client/src/views/components/elementeditor/umb-element-editor-content.component.html
View File

@@ -6,7 +6,7 @@
</umb-editor-tab-bar>
<umb-box ng-repeat="tab in vm.tabs" ng-show="tab.alias === vm.activeTabAlias && tab.properties.length > 0">
<umb-box-content data-element="tab-{{tab.alias}}">
<umb-box-content data-element="tab-content-{{tab.alias}}">
<umb-property
data-element="property-{{property.alias}}"
ng-repeat="property in tab.properties track by property.alias"
@@ -35,7 +35,7 @@
<div id="group-{{group.id}}">{{ group.label }}</div>
</div>
<div class="umb-group-panel__content" data-element="{{group.alias}}">
<div class="umb-group-panel__content" data-element="tab-content-{{group.parentAlias}}">
<umb-property
data-element="property-{{property.alias}}"
ng-repeat="property in group.properties track by property.alias"

32
src/Umbraco.Web.UI.Client/src/views/media/apps/content/content.controller.js
View File

@@ -1,10 +1,40 @@
(function () {
"use strict";
function MediaAppContentController($scope) {
function MediaAppContentController($scope, $filter, contentEditingHelper) {
var vm = this;
vm.tabs = [];
vm.activeTabAlias = null;
vm.setActiveTab = setActiveTab;
$scope.$watchCollection('content.tabs', () => {
// Add parentAlias property to all groups aka. tabs.
$scope.content.tabs.forEach((group) => {
group.parentAlias = contentEditingHelper.getParentAlias(group.alias);
});
vm.tabs = $filter("filter")($scope.content.tabs, (tab) => {
return tab.type === 1;
});
if (vm.tabs.length > 0) {
// if we have tabs and some groups that doesn't belong to a tab we need to render those on an "Other" tab.
contentEditingHelper.registerGenericTab($scope.content.tabs);
setActiveTab($scope.content.tabs[0]);
}
});
function setActiveTab (tab) {
vm.activeTabAlias = tab.alias;
vm.tabs.forEach(tab => tab.active = false);
tab.active = true;
}
}
angular.module("umbraco").controller("Umbraco.Editors.Media.Apps.ContentController", MediaAppContentController);

31
src/Umbraco.Web.UI.Client/src/views/media/apps/content/content.html
View File

@@ -1,12 +1,37 @@
<div class="form-horizontal" ng-controller="Umbraco.Editors.Media.Apps.ContentController as vm">
<div class="umb-group-panel" data-element="group-{{group.alias}}" ng-repeat="group in content.tabs | filter: { hide : '!' + true } track by group.id">
<umb-editor-tab-bar ng-if="vm.tabs.length > 0">
<umb-tabs-nav tabs="vm.tabs" on-tab-change="vm.setActiveTab(tab)"></umb-tabs-nav>
</umb-editor-tab-bar>
<umb-box ng-repeat="tab in vm.tabs track by tab.key" ng-show="tab.alias === vm.activeTabAlias && tab.properties.length > 0">
<umb-box-content data-element="tab-content-{{tab.alias}}">
<umb-property
data-element="property-{{property.alias}}"
ng-repeat="property in tab.properties track by property.alias"
property="property">
<umb-property-editor model="property"></umb-property-editor>
</umb-property>
</umb-box-content>
</umb-box>
<div
class="umb-group-panel"
data-element="group-{{group.alias}}"
ng-repeat="group in content.tabs | filter: { hide : '!' + true } track by group.id"
ng-show="(group.parentAlias === vm.activeTabAlias && group.type === 0) || vm.tabs.length === 0">
<div class="umb-group-panel__header">
<div>{{ group.label }}</div>
</div>
<div class="umb-group-panel__content">
<umb-property data-element="property-{{property.alias}}" ng-repeat="property in group.properties" property="property">
<div class="umb-group-panel__content" data-element="tab-content-{{group.parentAlias}}">
<umb-property
data-element="property-{{property.alias}}"
ng-repeat="property in group.properties"
property="property">
<umb-property-editor model="property"></umb-property-editor>
</umb-property>
</div>