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

have new tab implementation working with backwards compat with bootstrap tabs. For our own editors, we will use the new tabs, this gives us more control and should be a bit quicker, perhaps in v8 we can remove bootstrap tabs entirely.

Browse Source
This commit is contained in:
Shannon
2015-07-31 10:50:33 +02:00
parent cfa2a30006
commit 5775984730
14 changed files with 83 additions and 49 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
src/Umbraco.Web.UI.Client/src/common/directives/editors/umbAutoResize.directive.js
View File

@@ -23,8 +23,9 @@ angular.module("umbraco.directives")
//I hate bootstrap tabs
//TODO: This is legacy since we aren't using bootstrap tabs anymore
$('a[data-toggle="tab"]').on('shown', update);
scope.$on('$destroy', function() {
$('a[data-toggle="tab"]').unbind("shown", update);
});

2
src/Umbraco.Web.UI.Client/src/common/directives/editors/umbtabs.js
View File

@@ -47,7 +47,7 @@ angular.module("umbraco.directives")
$scope.$watch(function() {
return tabsValueGet($scope);
}, function (newValue, oldValue) {
if (newValue !== oldValue || (angular.isArray(newValue) && angular.isArray(oldValue) && newValue.length !== oldValue.length)) {
if ((angular.isArray(newValue) && angular.isArray(oldValue) && newValue.length !== oldValue.length|| (newValue !== undefined && oldValue === undefined))) {
tabs = []; //reset first
for (var val in newValue) {

3
src/Umbraco.Web.UI.Client/src/common/directives/html/umbheader.directive.js
View File

@@ -50,7 +50,8 @@ angular.module("umbraco.directives")
});
$('.nav-pills, .nav-tabs').tabdrop();
//TODO: We'll need to destroy this I'm assuming!
iElement.find('.nav-pills, .nav-tabs').tabdrop();
}
scope.showTabs = iAttrs.tabs ? true : false;

23
src/Umbraco.Web.UI.Client/src/common/directives/html/umbtab.directive.js
View File

@@ -4,7 +4,7 @@
* @restrict E
**/
angular.module("umbraco.directives")
.directive('umbTab', function ($parse) {
.directive('umbTab', function ($parse, $timeout) {
return {
require: "?^umbTabs",
restrict: 'E',
@@ -16,26 +16,33 @@ angular.module("umbraco.directives")
transclude: 'true',
templateUrl: 'views/directives/umb-tab.html',
link: function(scope, elem, attrs, tabsCtrl) {
function toggleVisibility(tabId) {
if (scope.tabId === String(tabId)) {
elem.show();
//default if there are no tabs
if (tabId === null) {
elem.addClass("active");
}
else {
elem.hide();
if (scope.tabId === String(tabId)) {
elem.addClass("active");
}
else {
elem.removeClass("active");
}
}
}
//need to make this optional for backwards compat since before we used to
// use bootstrap tabs and now we use our own faster implementation which
// use bootstrap tabs and now we use our own better implementation which
// gives us far more control but will still support the old way.
if (tabsCtrl != null) {
if (tabsCtrl) {
tabsCtrl.onActiveTabChanged(function (tabId) {
toggleVisibility(tabId);
});
toggleVisibility(tabsCtrl.getActiveTab());
toggleVisibility(tabsCtrl.getActiveTab());
}
}
};

31
src/Umbraco.Web.UI.Client/src/common/directives/html/umbtabheader.directive.js
View File

@@ -8,7 +8,7 @@
**/
angular.module("umbraco.directives").directive('umbTabHeader', function($parse, $timeout) {
return {
require: "^umbTabs",
require: "?^umbTabs",
restrict: 'E',
replace: true,
transclude: 'true',
@@ -19,23 +19,24 @@ angular.module("umbraco.directives").directive('umbTabHeader', function($parse,
scope.activeTabId = null;
scope.tabs = [];
tabsCtrl.onTabCollectionChanged(function (tabs) {
scope.tabs = tabs;
scope.showTabs = scope.tabs.length > 0;
});
if (tabsCtrl) {
tabsCtrl.onTabCollectionChanged(function (tabs) {
scope.tabs = tabs;
scope.showTabs = scope.tabs.length > 0;
});
tabsCtrl.onActiveTabChanged(function (tabId) {
scope.activeTabId = tabId;
});
scope.changeTab = function(tabId) {
tabsCtrl.setActiveTab(tabId);
};
tabsCtrl.onActiveTabChanged(function (tabId) {
scope.activeTabId = tabId;
});
scope.changeTab = function (tabId) {
tabsCtrl.setActiveTab(tabId);
};
$timeout(function() {
//TODO: We'll need to destroy this I'm assuming!
$('.nav-pills, .nav-tabs').tabdrop();
}, 500);
iElement.find('.nav-pills, .nav-tabs').tabdrop();
}
}
};
});

25
src/Umbraco.Web.UI.Client/src/common/directives/html/umbtabview.directive.js
View File

@@ -5,10 +5,31 @@
**/
angular.module("umbraco.directives")
.directive('umbTabView', function($timeout, $log){
return {
return {
require: "?^umbTabs",
restrict: 'E',
replace: true,
transclude: 'true',
templateUrl: 'views/directives/umb-tab-view.html'
templateUrl: 'views/directives/umb-tab-view.html',
compile: function () {
return {
pre: function (scope, iElement, iAttrs, tabsCtrl) {
//if we have our custom tab directive it means we are not using bootstrap
// tabs, however if there isn't a directive we'll continue using bootsrap tabs
// this is done by adding 'tab-content' class for bootstrap or 'umb-tab-content'
// for our custom tabs.
//We also MUST do this on pre-linking because the tab-content class needs to be there
// before it hits the DOM so that bootstrap can do whatever it is that it does.
if (tabsCtrl) {
iElement.children("div:first").addClass("umb-tab-content");
}
else {
iElement.children("div:first").addClass("tab-content");
}
}
};
}
};
});

9
src/Umbraco.Web.UI.Client/src/less/navs.less
View File

@@ -330,7 +330,8 @@
.tabbable {
.clearfix();
}
.tab-content {
.tab-content,
.umb-tab-content {
overflow: auto; // prevent content from running below tabs
}
@@ -343,11 +344,13 @@
// Show/hide tabbable areas
.tab-content > .tab-pane,
.pill-content > .pill-pane {
.pill-content > .pill-pane,
.umb-tab-content > .tab-pane {
display: none;
}
.tab-content > .active,
.pill-content > .active {
.pill-content > .active,
.umb-tab-content > .active {
display: block;
}

6
src/Umbraco.Web.UI.Client/src/views/common/dashboard.html
View File

@@ -1,10 +1,10 @@
<form ng-controller="Umbraco.DashboardController" class="umb-dashboard" val-form-manager>
<umb-panel>
<umb-header tabs="dashboard.tabs">
<umb-panel umb-tabs="dashboard.tabs">
<umb-tab-header>
<div class="umb-headline-editor-wrapper span12">
<h1>{{dashboard.name}}</h1>
</div>
</umb-header>
</umb-tab-header>
<umb-tab-view>
<umb-tab id="tab{{tab.id}}" rel="{{tab.id}}" ng-repeat="tab in dashboard.tabs">
<div class="umb-pane">

6
src/Umbraco.Web.UI.Client/src/views/content/recyclebin.html
View File

@@ -1,9 +1,9 @@
<umb-panel ng-controller="Umbraco.Editors.Content.RecycleBinController">
<umb-header>
<umb-panel ng-controller="Umbraco.Editors.Content.RecycleBinController" umb-tabs>
<umb-tab-header>
<div class="umb-headline-editor-wrapper span12">
<h1><localize key="general_recycleBin">Recycle Bin</localize></h1>
</div>
</umb-header>
</umb-tab-header>
<umb-tab-view>
<umb-tab id="tabRecycleBin" rel="RecycleBin">
<umb-pane>

4
src/Umbraco.Web.UI.Client/src/views/datatype/edit.html
View File

@@ -5,7 +5,7 @@
val-form-manager>
<umb-panel>
<umb-header>
<umb-tab-header>
<div class="span7">
<umb-content-name
@@ -22,7 +22,7 @@
</umb-options-menu>
</div>
</div>
</umb-header>
</umb-tab-header>
<div class="umb-panel-body umb-scrollable row-fluid">
<div class="tab-content form-horizontal" style="padding-bottom: 90px">

2
src/Umbraco.Web.UI.Client/src/views/directives/umb-tab-view.html
View File

@@ -1,5 +1,5 @@
<div class="umb-panel-body umb-scrollable row-fluid">
<div class="tab-content form-horizontal" ng-transclude>
<div class="form-horizontal" ng-transclude>
</div>
</div>

6
src/Umbraco.Web.UI.Client/src/views/media/edit.html
View File

@@ -3,8 +3,8 @@
ng-show="loaded"
ng-submit="save()"
val-form-manager>
<umb-panel ng-class="{'editor-breadcrumb': ancestors && ancestors.length > 0}">
<umb-header tabs="content.tabs">
<umb-panel umb-tabs="content.tabs" ng-class="{'editor-breadcrumb': ancestors && ancestors.length > 0}">
<umb-tab-header>
<div class="span7">
<umb-content-name placeholder="@placeholders_entername"
@@ -23,7 +23,7 @@
</umb-options-menu>
</div>
</div>
</umb-header>
</umb-tab-header>
<umb-tab-view>
<umb-tab id="tab{{tab.id}}" rel="{{tab.id}}" ng-repeat="tab in content.tabs">

6
src/Umbraco.Web.UI.Client/src/views/media/recyclebin.html
View File

@@ -1,9 +1,9 @@
<umb-panel ng-controller="Umbraco.Editors.Media.RecycleBinController">
<umb-header>
<umb-panel ng-controller="Umbraco.Editors.Media.RecycleBinController" umb-tabs>
<umb-tab-header>
<div class="umb-headline-editor-wrapper span12">
<h1><localize key="general_recycleBin">Recycle Bin</localize></h1>
</div>
</umb-header>
</umb-tab-header>
<umb-tab-view>
<umb-tab id="tabRecycleBin" rel="RecycleBin">
<umb-pane>

6
src/Umbraco.Web.UI.Client/src/views/member/edit.html
View File

@@ -3,8 +3,8 @@
ng-show="loaded"
ng-submit="save()"
val-form-manager>
<umb-panel>
<umb-header tabs="content.tabs">
<umb-panel umb-tabs="content.tabs">
<umb-tab-header>
<div class="span7" ng-if="content.membershipScenario == 0">
<umb-content-name
@@ -28,7 +28,7 @@
</div>
</div>
</umb-header>
</umb-tab-header>
<umb-tab-view>
<umb-tab id="tab{{tab.id}}" rel="{{tab.id}}" ng-repeat="tab in content.tabs">