Revert "update content when changing variation"

This reverts commit b487436d93.

src/Umbraco.Core/Models/PublishedContent/PublishedContentType.cs

@@ -1,9 +1,6 @@
 using System;
-using System.Collections.Concurrent;
 using System.Collections.Generic;
 using System.Linq;
-using System.Web.Caching;
-using System.Web.UI;
 using Umbraco.Core.Cache;
 
 namespace Umbraco.Core.Models.PublishedContent
@@ -16,6 +13,7 @@ namespace Umbraco.Core.Models.PublishedContent
     public class PublishedContentType
     {
         private readonly PublishedPropertyType[] _propertyTypes;
+        private readonly HashSet<string> _compositionAliases;
 
         // fast alias-to-index xref containing both the raw alias and its lowercase version
         private readonly Dictionary<string, int> _indexes = new Dictionary<string, int>();
@@ -27,6 +25,7 @@ namespace Umbraco.Core.Models.PublishedContent
         {
             Id = contentType.Id;
             Alias = contentType.Alias;
+            _compositionAliases = new HashSet<string>(contentType.CompositionAliases(), StringComparer.InvariantCultureIgnoreCase);
             _propertyTypes = contentType.CompositionPropertyTypes
                 .Select(x => new PublishedPropertyType(this, x))
                 .ToArray();
@@ -34,10 +33,11 @@ namespace Umbraco.Core.Models.PublishedContent
         }
 
         // internal so it can be used for unit tests
-        internal PublishedContentType(int id, string alias, IEnumerable<PublishedPropertyType> propertyTypes)
+        internal PublishedContentType(int id, string alias, IEnumerable<string> compositionAliases, IEnumerable<PublishedPropertyType> propertyTypes)
         {
             Id = id;
             Alias = alias;
+            _compositionAliases = new HashSet<string>(compositionAliases, StringComparer.InvariantCultureIgnoreCase);
             _propertyTypes = propertyTypes.ToArray();
             foreach (var propertyType in _propertyTypes)
                 propertyType.ContentType = this;
@@ -45,8 +45,8 @@ namespace Umbraco.Core.Models.PublishedContent
         }
 
         // create detached content type - ie does not match anything in the DB
-        internal PublishedContentType(string alias, IEnumerable<PublishedPropertyType> propertyTypes)
-            : this (0, alias, propertyTypes)
+        internal PublishedContentType(string alias, IEnumerable<string> compositionAliases, IEnumerable<PublishedPropertyType> propertyTypes)
+            : this(0, alias, compositionAliases, propertyTypes)
         { }
 
         private void InitializeIndexes()
@@ -63,6 +63,7 @@ namespace Umbraco.Core.Models.PublishedContent
 
         public int Id { get; private set; }
         public string Alias { get; private set; }
+        public HashSet<string> CompositionAliases { get { return _compositionAliases; } }
 
         #endregion
 

src/Umbraco.Core/Persistence/SqlSyntax/MySqlSyntaxProvider.cs

@@ -28,6 +28,8 @@ namespace Umbraco.Core.Persistence.SqlSyntax
             GuidColumnDefinition = "char(36)";
             
             DefaultValueFormat = "DEFAULT {0}";
+
+            InitColumnTypeMap();
         }
 
         public override IEnumerable<string> GetTablesInSchema(Database db)

src/Umbraco.Tests/Persistence/SyntaxProvider/MySqlSyntaxProviderTests.cs

@@ -1,17 +1,20 @@
 using System;
-
+using System.Linq;
 using Moq;
 using NUnit.Framework;
 using Umbraco.Core.Logging;
 using Umbraco.Core.Models.Rdbms;
+using Umbraco.Core.Persistence;
 using Umbraco.Core.Persistence.DatabaseModelDefinitions;
+using Umbraco.Core.Persistence.Migrations;
 using Umbraco.Core.Persistence.SqlSyntax;
+using Umbraco.Tests.TestHelpers;
 
 namespace Umbraco.Tests.Persistence.SyntaxProvider
 {
-    [NUnit.Framework.Ignore("This doesn't actually test anything")]
+    //[NUnit.Framework.Ignore("This doesn't actually test anything")]
     [TestFixture]
-    public class MySqlSyntaxProviderTests
+    public class MySqlSyntaxProviderTests : BaseUsingSqlCeSyntax
     {
         [SetUp]
         public void SetUp()
@@ -20,6 +23,7 @@ namespace Umbraco.Tests.Persistence.SyntaxProvider
         }
 
         [Test]
+        [NUnit.Framework.Ignore]
         public void Can_Generate_Create_Table_Statement()
         {
             var type = typeof(TagRelationshipDto);
@@ -48,5 +52,40 @@ namespace Umbraco.Tests.Persistence.SyntaxProvider
         {
             SqlSyntaxContext.SqlSyntaxProvider = null;
         }
+
+        [Test]
+        public void U4_8017()
+        {
+            var logger = Mock.Of<ILogger>();
+            var migration = new TestMigration(SqlSyntaxContext.SqlSyntaxProvider, logger);
+            var context = new MigrationContext(DatabaseProviders.MySql, null, logger);
+            migration.Context = context;
+            migration.Up();
+            var x = context.Expressions;
+            Assert.AreEqual(1, x.Count);
+            var e = x.First().ToString();
+
+            // SQLCE provider *does* use UniqueIdentifier
+            // MySql using GUID...? because InitColumnTypeMap() missing in provider, fixed
+
+            Assert.AreEqual("ALTER TABLE `cmsPropertyTypeGroup` ADD COLUMN `uniqueID` char(36) NOT NULL", e);
+        }
+
+        [Migration("1.0.0", 0, "Test")]
+        private class TestMigration : MigrationBase
+        {
+            public TestMigration(ISqlSyntaxProvider sqlSyntax, ILogger logger) : base(sqlSyntax, logger)
+            {}
+
+            public override void Up()
+            {
+                Create.Column("uniqueID").OnTable("cmsPropertyTypeGroup").AsGuid().NotNullable().WithDefault(SystemMethods.NewGuid);
+            }
+
+            public override void Down()
+            {
+                throw new NotImplementedException();
+            }
+        }
     }
 }

src/Umbraco.Tests/Persistence/SyntaxProvider/SqlCeSyntaxProviderTests.cs

@@ -9,11 +9,12 @@ using Umbraco.Core.Persistence.DatabaseModelDefinitions;
 using Umbraco.Core.Persistence.Migrations.Syntax.Create.Index;
 using Umbraco.Core.Persistence.Migrations.Syntax.Expressions;
 using Umbraco.Core.Persistence.SqlSyntax;
+using Umbraco.Tests.TestHelpers;
 
 namespace Umbraco.Tests.Persistence.SyntaxProvider
 {
     [TestFixture]
-    public class SqlCeSyntaxProviderTests
+    public class SqlCeSyntaxProviderTests : BaseUsingSqlCeSyntax
     {
 
         [Test]

src/Umbraco.Tests/PublishedContent/PublishedContentMoreTests.cs

@@ -234,9 +234,9 @@ namespace Umbraco.Tests.PublishedContent
                         new PublishedPropertyType("prop1", 1, "?"), 
                     };
 
-            var contentType1 = new PublishedContentType(1, "ContentType1", props);
-            var contentType2 = new PublishedContentType(2, "ContentType2", props);
-            var contentType2s = new PublishedContentType(3, "ContentType2Sub", props);
+            var contentType1 = new PublishedContentType(1, "ContentType1", Enumerable.Empty<string>(), props);
+            var contentType2 = new PublishedContentType(2, "ContentType2", Enumerable.Empty<string>(), props);
+            var contentType2s = new PublishedContentType(3, "ContentType2Sub", Enumerable.Empty<string>(), props);
 
             cache.Add(new SolidPublishedContent(contentType1)
                 {

src/Umbraco.Tests/PublishedContent/PublishedContentTestElements.cs

@@ -355,7 +355,11 @@ namespace Umbraco.Tests.PublishedContent
         private static readonly PublishedPropertyType Default = new PublishedPropertyType("*", 0, "?");
 
         public AutoPublishedContentType(int id, string alias, IEnumerable<PublishedPropertyType> propertyTypes)
-            : base(id, alias, propertyTypes)
+            : base(id, alias, Enumerable.Empty<string>(), propertyTypes)
+        { }
+
+        public AutoPublishedContentType(int id, string alias, IEnumerable<string> compositionAliases, IEnumerable<PublishedPropertyType> propertyTypes)
+            : base(id, alias, compositionAliases, propertyTypes)
         { }
 
         public override PublishedPropertyType GetPropertyType(string alias)

src/Umbraco.Tests/PublishedContent/PublishedContentTests.cs

@@ -50,7 +50,8 @@ namespace Umbraco.Tests.PublishedContent
                     new PublishedPropertyType("content", 0, Constants.PropertyEditors.TinyMCEAlias), 
                     new PublishedPropertyType("testRecursive", 0, "?"), 
                 };
-            var type = new AutoPublishedContentType(0, "anything", propertyTypes);
+            var compositionAliases = new[] {"MyCompositionAlias"};
+            var type = new AutoPublishedContentType(0, "anything", compositionAliases, propertyTypes);
             PublishedContentType.GetPublishedContentTypeCallback = (alias) => type;
         }
 
@@ -468,6 +469,16 @@ namespace Umbraco.Tests.PublishedContent
 			Assert.IsNull(doc.FirstChild<IPublishedContent>());
 		}
 
+        [Test]
+        public void IsComposedOf()
+        {
+            var doc = GetNode(1173);
+
+            var isComposedOf = doc.IsComposedOf("MyCompositionAlias");
+
+            Assert.IsTrue(isComposedOf);
+        }
+
 		[Test]
 		public void HasProperty()
 		{
@@ -475,8 +486,7 @@ namespace Umbraco.Tests.PublishedContent
 
 			var hasProp = doc.HasProperty(Constants.Conventions.Content.UrlAlias);
 
-			Assert.AreEqual(true, (bool)hasProp);
-
+            Assert.IsTrue(hasProp);
 		}
 
 		[Test]

src/Umbraco.Tests/Umbraco.Tests.csproj

@@ -758,7 +758,7 @@
 xcopy "$(ProjectDir)"..\packages\SqlServerCE.4.0.0.1\x86\*.* "$(TargetDir)x86\" /Y /F /E /I /C /D</PreBuildEvent>
   </PropertyGroup>
   <Import Project="$(SolutionDir)\.nuget\nuget.targets" />
-  <!-- To modify your build process, add your task inside one of the targets below and uncomment it. 
+  <!-- To modify your build process, add your task inside one of the targets below and uncomment it.
        Other similar extension points exist, see Microsoft.Common.targets.
   <Target Name="BeforeBuild">
   </Target>

src/Umbraco.Web.UI.Client/.eslintrc

@@ -1,5 +1,5 @@
 {
-	"env": {
+    "env": {
         "browser": true
     },
 
@@ -8,7 +8,7 @@
     ],
 
     "rules": {
-    	"eqeqeq": 2,
+        "eqeqeq": 2,
         "curly": 2,
 
         "no-unused-vars": 1,
@@ -18,8 +18,8 @@
         "dot-notation": 1,
 
         "no-use-before-define": 0,
-        "angular/ng_controller_as": 1,    
-        "angular/ng_controller_as_vm": 1,   
+        "angular/ng_controller_as": 1,
+        "angular/ng_controller_as_vm": 1,
 
 
         "strict": 0,
@@ -32,8 +32,8 @@
         "comma-spacing": 0,
         "no-trailing-spaces": 0,
         "eol-last": 0,
-		"no-underscore-dangle": 0,
-		"camelcase": 0
+        "no-underscore-dangle": 0,
+        "camelcase": 0
     },
 
     "globals": {
@@ -50,4 +50,4 @@
         "Bloodhound", false
     }
 
-}
+}

src/Umbraco.Web.UI.Client/package.json

@@ -37,7 +37,7 @@
     "grunt-ngdocs": "~0.1.2",
     "grunt-open": "~0.2.0",
     "grunt-postcss": "~0.6.0",
-    "grunt-recess": "~0.3",
+    "grunt-recess": "~1.0.1",
     "karma": "~0.9",
     "karma-chrome-launcher": "0.0.2",
     "karma-coffee-preprocessor": "0.0.1",

src/Umbraco.Web.UI.Client/src/common/directives/components/application/umbnavigation.directive.js

@@ -3,11 +3,93 @@
 * @name umbraco.directives.directive:umbNavigation
 * @restrict E
 **/
-function umbNavigationDirective() {
+function umbNavigationDirective(appState, $location) {
     return {
         restrict: "E",    // restrict to an element
         replace: true,   // replace the html element with the template
-        templateUrl: 'views/components/application/umb-navigation.html'
+        templateUrl: 'views/components/application/umb-navigation.html',
+        link: function (scope, element, attr, ctrl) {
+
+            scope.showTreeNavigation = appState.getGlobalState("showNavigation");
+
+            scope.searchClick = function() {
+                scope.searchOverlay = {
+                    view: "search",
+                    show: true,
+                    submit: function(model) {
+                        $location.path(model.selectedItem.editorPath);
+                        scope.searchOverlay.show = false;
+                        scope.searchOverlay = null;
+                    },
+                    close: function(oldModel) {
+                        scope.searchOverlay.show = false;
+                        scope.searchOverlay = null;
+                    }
+                };
+            };
+
+            scope.avatarClick = function(){
+
+                if(scope.helpDialog) {
+                    closeHelpDialog();
+                }
+
+                if(!scope.userDialog) {
+                    scope.userDialog = {
+                        view: "user",
+                        show: true,
+                        close: function(oldModel) {
+                            closeUserDialog();
+                        }
+                    };
+                } else {
+                    closeUserDialog();
+                }
+
+            };
+
+            function closeUserDialog() {
+                scope.userDialog.show = false;
+                scope.userDialog = null;
+            }
+
+            scope.helpClick = function(){
+
+                if(scope.userDialog) {
+                    closeUserDialog();
+                }
+
+                if(!scope.helpDialog) {
+                    scope.helpDialog = {
+                        view: "help",
+                        show: true,
+                        close: function(oldModel) {
+                            closeHelpDialog();
+                        }
+                    };
+                } else {
+                    closeHelpDialog();
+                }
+
+            };
+
+
+            function closeHelpDialog() {
+                scope.helpDialog.show = false;
+                scope.helpDialog = null;
+            }
+
+
+            scope.showTree = function () {
+                scope.showTreeNavigation = appState.getGlobalState("showNavigation");
+                if(scope.showTreeNavigation === true) {
+                    appState.setGlobalState("showNavigation", false);
+                } else {
+                    appState.setGlobalState("showNavigation", true);
+                }
+			};
+
+        }
     };
 }
 

src/Umbraco.Web.UI.Client/src/common/directives/components/application/umbsections.directive.js

@@ -11,7 +11,7 @@ function sectionsDirective($timeout, $window, navigationService, treeService, se
         link: function (scope, element, attr, ctrl) {
 
             //setup scope vars
-			scope.maxSections = 7;
+			scope.maxSections = 5;
 			scope.overflowingSections = 0;
             scope.sections = [];
             scope.currentSection = appState.getSectionState("currentSection");
@@ -34,16 +34,25 @@ function sectionsDirective($timeout, $window, navigationService, treeService, se
 				sectionResource.getSections()
 					.then(function (result) {
 						scope.sections = result;
-						calculateHeight();
+
+                        // hide overflowing sections
+                        scope.totalSections = scope.sections.length;
+
+                        if(scope.totalSections > scope.maxSections){
+                            scope.needTray = true;
+                            scope.overflowingSections = scope.maxSections - scope.totalSections;
+                        }
+
+						// calculateHeight();
 					});
 			}
 
 			function calculateHeight(){
 				$timeout(function(){
 					//total height minus room for avatar and help icon
-					var height = $(window).height()-200;
+					var height = $(window).width();
 					scope.totalSections = scope.sections.length;
-					scope.maxSections = Math.floor(height / 70);
+					scope.maxSections = Math.floor(width / 70);
 					scope.needTray = false;
 
 					if(scope.totalSections > scope.maxSections){
@@ -84,57 +93,7 @@ function sectionsDirective($timeout, $window, navigationService, treeService, se
 			});
 
 			//on page resize
-			window.onresize = calculateHeight;
-
-			scope.avatarClick = function(){
-
-                if(scope.helpDialog) {
-                    closeHelpDialog();
-                }
-
-                if(!scope.userDialog) {
-                    scope.userDialog = {
-                        view: "user",
-                        show: true,
-                        close: function(oldModel) {
-                            closeUserDialog();
-                        }
-                    };
-                } else {
-                    closeUserDialog();
-                }
-
-			};
-
-            function closeUserDialog() {
-                scope.userDialog.show = false;
-                scope.userDialog = null;
-            }
-
-			scope.helpClick = function(){
-
-                if(scope.userDialog) {
-                    closeUserDialog();
-                }
-
-                if(!scope.helpDialog) {
-                    scope.helpDialog = {
-                        view: "help",
-                        show: true,
-                        close: function(oldModel) {
-                            closeHelpDialog();
-                        }
-                    };
-                } else {
-                    closeHelpDialog();
-                }
-
-			};
-
-            function closeHelpDialog() {
-                scope.helpDialog.show = false;
-                scope.helpDialog = null;
-            }
+			// window.onresize = calculateHeight;
 
 			scope.sectionClick = function (event, section) {
 

src/Umbraco.Web.UI.Client/src/common/directives/components/application/umbtreenavigation.directive.js

@@ -0,0 +1,30 @@
+(function() {
+    'use strict';
+
+    function TreeNavigation(appState) {
+
+        function link(scope, el, attr, ctrl) {
+            scope.showTreeNavigation = false;
+            scope.currentSection = appState.getSectionState("currentSection");
+
+            scope.$watch(function(){
+               return appState.getGlobalState("showNavigation");
+            }, function (newValue) {
+                scope.showTreeNavigation = newValue;
+            });
+
+        }
+
+        var directive = {
+            restrict: 'E',
+            replace: true,
+            templateUrl: 'views/components/application/umb-tree-navigation.html',
+            link: link
+        };
+
+        return directive;
+    }
+
+    angular.module('umbraco.directives').directive('umbTreeNavigation', TreeNavigation);
+
+})();

src/Umbraco.Web.UI.Client/src/common/directives/components/editor/subview/umbeditorsubview.directive.js

@@ -0,0 +1,18 @@
+(function() {
+   'use strict';
+
+   function EditorSubView() {
+
+      var directive = {
+         transclude: true,
+         restrict: 'E',
+         replace: true,
+         templateUrl: 'views/components/editor/subview/umb-editor-sub-view.html'
+      };
+
+      return directive;
+   }
+
+   angular.module('umbraco.directives').directive('umbEditorSubView', EditorSubView);
+
+})();

src/Umbraco.Web.UI.Client/src/common/directives/components/editor/subview/umbeditorsubviewcontainer.directive.js

@@ -0,0 +1,18 @@
+(function() {
+   'use strict';
+
+   function EditorSubViewContainer() {
+
+      var directive = {
+         transclude: true,
+         restrict: 'E',
+         replace: true,
+         templateUrl: 'views/components/editor/subview/umb-editor-sub-view-container.html'
+      };
+
+      return directive;
+   }
+
+   angular.module('umbraco.directives').directive('umbEditorSubViewContainer', EditorSubViewContainer);
+
+})();

src/Umbraco.Web.UI.Client/src/common/directives/components/editor/subview/umbeditorsubviewcontent.directive.js

@@ -0,0 +1,18 @@
+(function() {
+   'use strict';
+
+   function EditorSubViewContent() {
+
+      var directive = {
+         transclude: true,
+         restrict: 'E',
+         replace: true,
+         templateUrl: 'views/components/editor/subview/umb-editor-sub-view-content.html'
+      };
+
+      return directive;
+   }
+
+   angular.module('umbraco.directives').directive('umbEditorSubViewContent', EditorSubViewContent);
+
+})();

src/Umbraco.Web.UI.Client/src/common/directives/components/editor/subview/umbeditorsubviewheader.directive.js

@@ -0,0 +1,18 @@
+(function() {
+   'use strict';
+
+   function EditorSubViewHeader() {
+
+      var directive = {
+         transclude: true,
+         restrict: 'E',
+         replace: true,
+         templateUrl: 'views/components/editor/subview/umb-editor-sub-view-header.html'
+      };
+
+      return directive;
+   }
+
+   angular.module('umbraco.directives').directive('umbEditorSubViewHeader', EditorSubViewHeader);
+
+})();

src/Umbraco.Web.UI.Client/src/common/directives/components/editor/subview/umbeditorsubviewsidebar.directive.js

@@ -0,0 +1,18 @@
+(function() {
+   'use strict';
+
+   function EditorSubViewSidebar() {
+
+      var directive = {
+         transclude: true,
+         restrict: 'E',
+         replace: true,
+         templateUrl: 'views/components/editor/subview/umb-editor-sub-view-sidebar.html'
+      };
+
+      return directive;
+   }
+
+   angular.module('umbraco.directives').directive('umbEditorSubViewSidebar', EditorSubViewSidebar);
+
+})();

src/Umbraco.Web.UI.Client/src/common/directives/components/editor/umbeditorheader.directive.js

@@ -1,10 +1,25 @@
 (function() {
     'use strict';
 
-    function EditorHeaderDirective(iconHelper) {
+    function EditorHeaderDirective(iconHelper, variationsHelper) {
 
         function link(scope, el, attr, ctrl) {
 
+            scope.showVariationsQuickSwitchToggle = false;
+            scope.showVariationsQuickSwitch = false;
+
+            function activate() {
+                showVariationsQuickSwitch(scope.variations);
+            }
+
+            function showVariationsQuickSwitch(variations) {
+                if(variations && variations.length > 1 || variations && variations.length === 1 && variations[0].variations && variations[0].variations.length > 0) {
+                    scope.showVariationsQuickSwitchToggle = true;
+                } else {
+                    scope.showVariationsQuickSwitchToggle = false;
+                }
+            }
+
             scope.openIconPicker = function() {
                 scope.dialogModel = {
                     view: "iconpicker",
@@ -24,6 +39,62 @@
                     }
                 };
             };
+
+            scope.toggleVariationsQuickSwitch = function() {
+                scope.showVariationsQuickSwitch = !scope.showVariationsQuickSwitch;
+            };
+
+            scope.hideVariationsQuickSwitch = function() {
+                scope.showVariationsQuickSwitch = false;
+            };
+
+            scope.toggleSubItems = function(item, $event) {
+                item.showSubItems = !item.showSubItems;
+                $event.preventDefault();
+                $event.stopPropagation();
+
+            };
+
+            scope.selectItem = function(item) {
+                if(scope.onSelectItem) {
+                    
+                    for(var i = 0; i < scope.variations.length; i++) {
+                        var language = scope.variations[i];
+                        language.active = false;
+
+                        if(language.variations && language.variations.length > 0) {
+                            for(var variationIndex = 0; variationIndex < language.variations.length; variationIndex++) {
+                                var variation = language.variations[variationIndex];
+                                variation.active = false;
+                            }
+
+                        }
+                    }
+
+                    // set selected item to active
+                    item.active = true;
+
+                    scope.onSelectItem(item);
+                    scope.showVariationsQuickSwitch = false;
+
+                }
+            };
+
+            scope.openInSplitView = function(item, $event) {
+                if(scope.onOpenInSplitView) {
+                    scope.onOpenInSplitView(item);
+                    scope.showVariationsQuickSwitch = false;
+                    $event.preventDefault();
+                    $event.stopPropagation();
+                }
+            };
+
+            scope.$watch('variations', function(newValue, oldValue){
+                showVariationsQuickSwitch(newValue);
+            }, true);
+
+            activate();
+
         }
 
         var directive = {
@@ -37,6 +108,11 @@
                 actions: "=",
                 name: "=",
                 nameLocked: "=",
+                variation: "=",
+                language: "=",
+                variations: "=",
+                onSelectItem: "=",
+                onOpenInSplitView: "=",
                 menu: "=",
                 icon: "=",
                 hideIcon: "@",

src/Umbraco.Web.UI.Client/src/common/directives/components/editor/umbeditornavigation.directive.js

@@ -6,10 +6,21 @@
       function link(scope, el, attr, ctrl) {
 
          scope.showNavigation = true;
+         scope.showDropdown = false;
+         scope.maxNavigationItems = 5;
+         scope.overflowingNavigationsItems = 0;
+         scope.needDropdown = false;
 
          scope.clickNavigationItem = function(selectedItem) {
+
             setItemToActive(selectedItem);
+
             runItemAction(selectedItem);
+
+            if(scope.showDropdown) {
+                scope.closeDropdown();
+            }
+
          };
 
          function runItemAction(selectedItem) {
@@ -40,8 +51,29 @@
                scope.showNavigation = false;
             }
 
+            hideOverflowingNavigationItems();
+
          }
 
+         function hideOverflowingNavigationItems() {
+
+             scope.totalNavigationItems = scope.navigation.length;
+
+             if(scope.totalNavigationItems > scope.maxNavigationItems){
+                 scope.needDropdown = true;
+                 scope.overflowingNavigationsItems = scope.maxNavigationItems - scope.totalNavigationItems;
+             }
+
+         }
+
+         scope.toggleDropdown = function() {
+             scope.showDropdown = !scope.showDropdown;
+         };
+
+         scope.closeDropdown = function() {
+             scope.showDropdown = false;
+         };
+
          activate();
 
       }

src/Umbraco.Web.UI.Client/src/common/directives/components/editor/umbeditorsubviews.directive.js

@@ -3,32 +3,6 @@
 
    function EditorSubViewsDirective() {
 
-      function link(scope, el, attr, ctrl) {
-
-         scope.activeView = {};
-
-         // set toolbar from selected navigation item
-         function setActiveView(items) {
-
-            for (var index = 0; index < items.length; index++) {
-
-               var item = items[index];
-
-               if (item.active && item.view) {
-                  scope.activeView = item;
-               }
-            }
-         }
-
-         // watch for navigation changes
-         scope.$watch('subViews', function(newValue, oldValue) {
-            if (newValue) {
-               setActiveView(newValue);
-            }
-         }, true);
-
-      }
-
       var directive = {
          restrict: 'E',
          replace: true,
@@ -36,8 +10,7 @@
          scope: {
             subViews: "=",
             model: "="
-         },
-         link: link
+         }
       };
 
       return directive;

src/Umbraco.Web.UI.Client/src/common/directives/components/editor/umbeditortoolbar.directive.js

@@ -0,0 +1,19 @@
+(function() {
+    'use strict';
+
+    function EditorToolbar() {
+
+        var directive = {
+            restrict: 'E',
+            replace: true,
+            transclude: true,
+            templateUrl: 'views/components/editor/umb-editor-toolbar.html'
+        };
+
+        return directive;
+
+    }
+
+    angular.module('umbraco.directives').directive('umbEditorToolbar', EditorToolbar);
+
+})();

src/Umbraco.Web.UI.Client/src/common/directives/components/imaging/umbimagegravity.directive.js

@@ -14,7 +14,8 @@ angular.module("umbraco.directives")
 				templateUrl: 'views/components/imaging/umb-image-gravity.html',
 				scope: {
 					src: '=',
-					center: "="
+					center: "=",
+					onImageLoaded: "="
 				},
 				link: function(scope, element, attrs) {
 
@@ -26,6 +27,8 @@ angular.module("umbraco.directives")
 						top: 0
 					};
 
+					scope.loaded = false;
+
 					//elements
 					var $viewport = element.find(".viewport");
 					var $image = element.find("img");
@@ -42,6 +45,19 @@ angular.module("umbraco.directives")
 						};
 					};
 
+					scope.setFocalPoint = function(event) {
+
+						scope.$emit("imageFocalPointStart");
+
+						var offsetX = event.offsetX - 10;
+						var offsetY = event.offsetY - 10;
+
+						calculateGravity(offsetX, offsetY);
+
+						lazyEndEvent();
+
+					};
+
 					var setDimensions = function(){
 						scope.dimensions.width = $image.width();
 						scope.dimensions.height = $image.height();
@@ -54,9 +70,9 @@ angular.module("umbraco.directives")
 						}
 					};
 
-					var calculateGravity = function(){
-						scope.dimensions.left = $overlay[0].offsetLeft;
-						scope.dimensions.top =  $overlay[0].offsetTop;
+					var calculateGravity = function(offsetX, offsetY){
+						scope.dimensions.left = offsetX;
+						scope.dimensions.top =  offsetY;
 
 						scope.center.left =  (scope.dimensions.left+10) / scope.dimensions.width;
 						scope.center.top =  (scope.dimensions.top+10) / scope.dimensions.height;
@@ -80,7 +96,9 @@ angular.module("umbraco.directives")
 						},
 						stop: function() {
 							scope.$apply(function(){
-								calculateGravity();
+								var offsetX = $overlay[0].offsetLeft;
+								var offsetY = $overlay[0].offsetTop;
+								calculateGravity(offsetX, offsetY);
 							});
 
 							lazyEndEvent();
@@ -91,8 +109,26 @@ angular.module("umbraco.directives")
 					$image.load(function(){
 						$timeout(function(){
 							setDimensions();
+							scope.loaded = true;
+							scope.onImageLoaded();
 						});
 					});
+
+					$(window).on('resize.umbImageGravity', function(){
+                        scope.$apply(function(){
+                            $timeout(function(){
+                                setDimensions();
+                            });
+							var offsetX = $overlay[0].offsetLeft;
+							var offsetY = $overlay[0].offsetTop;
+                            calculateGravity(offsetX, offsetY);
+                        });
+                    });
+
+					scope.$on('$destroy', function() {
+						$(window).off('.umbImageGravity');
+					});
+
 				}
 			};
 		});

src/Umbraco.Web.UI.Client/src/common/directives/components/imaging/umbimagethumbnail.directive.js

@@ -26,6 +26,7 @@ angular.module("umbraco.directives")
 				link: function(scope, element, attrs) {
 					//// INIT /////
 					var $image = element.find("img");
+					scope.loaded = false;
 
 					$image.load(function(){
 						$timeout(function(){
@@ -52,6 +53,7 @@ angular.module("umbraco.directives")
 							}
 
 							setPreviewStyle();
+							scope.loaded = true;
 						});
 					});
 

src/Umbraco.Web.UI.Client/src/common/directives/components/property/umbproperty.directive.js

@@ -11,22 +11,88 @@ angular.module("umbraco.directives")
             },
             transclude: true,
             restrict: 'E',
-            replace: true,        
+            replace: true,
             templateUrl: 'views/components/property/umb-property.html',
             link: function(scope) {
                 scope.propertyAlias = Umbraco.Sys.ServerVariables.isDebuggingEnabled === true ? scope.property.alias : null;
+                scope.showDropdown = false;
+                scope.selectedVariation = {};
+                scope.variations = [
+                    {
+                        name: "Danish",
+                        master: true,
+                        selected: true
+                    },
+                    {
+                        name: "German"
+                    },
+                    {
+                        name: "Spanish"
+                    },
+                    {
+                        name: "Finnish"
+                    },
+                    {
+                        name: "Albanian"
+                    },
+                    {
+                        name: "Russian"
+                    },
+                    {
+                        name: "Norwegian"
+                    },
+                    {
+                        name: "Swedish"
+                    }
+                ];
+
+                function activate() {
+
+                    for(var i = 0; i < scope.variations.length; i++ ) {
+                        var variation = scope.variations[i];
+                        if(variation.selected) {
+                            scope.property.variation = variation;
+                        }
+                    }
+                }
+
+                scope.toggleDropdown = function() {
+                    scope.showDropdown = !scope.showDropdown;
+                };
+
+                scope.closeDropdown = function() {
+                    scope.showDropdown = false;
+                };
+
+                scope.editContent = function() {
+                    scope.property.variation = null;
+                    scope.showDropdown = false;
+                };
+
+                scope.syncContent = function(selectedVariation) {
+                    for(var i = 0; i < scope.variations.length; i++ ) {
+                        var variation = scope.variations[i];
+                        variation.selected = false;
+                    }
+                    selectedVariation.selected = true;
+                    scope.property.variation = selectedVariation;
+                    scope.showDropdown = false;
+                };
+
+                activate();
+
             },
             //Define a controller for this directive to expose APIs to other directives
             controller: function ($scope, $timeout) {
-               
+
                 var self = this;
 
                 //set the API properties/methods
-                
+
                 self.property = $scope.property;
                 self.setPropertyError = function(errorMsg) {
                     $scope.property.propertyErrorMessage = errorMsg;
                 };
             }
         };
-    });
+    });

src/Umbraco.Web.UI.Client/src/common/directives/components/property/umbpropertyeditor.directive.js

@@ -1,7 +1,7 @@
 /**
 * @ngdoc directive
 * @function
-* @name umbraco.directives.directive:umbPropertyEditor 
+* @name umbraco.directives.directive:umbPropertyEditor
 * @requires formController
 * @restrict E
 **/
@@ -14,10 +14,10 @@ var _umbPropertyEditor = function (umbPropEditorHelper) {
                 isPreValue: "@",
                 preview: "@"
             },
-            
+
             require: "^form",
             restrict: 'E',
-            replace: true,      
+            replace: true,
             templateUrl: 'views/components/property/umb-property-editor.html',
             link: function (scope, element, attrs, ctrl) {
 
@@ -33,6 +33,7 @@ var _umbPropertyEditor = function (umbPropEditorHelper) {
                 scope.$watch("model.view", function(val){
                     scope.propertyEditorView = umbPropEditorHelper.getViewPath(scope.model.view, scope.isPreValue);
                 });
+
             }
         };
     };

src/Umbraco.Web.UI.Client/src/common/directives/components/tabs/umbtabsnav.directive.js

@@ -13,7 +13,7 @@
           el.find("a:first").tab('show');
 
           //enable the tab drop
-          el.tabdrop();
+          //el.tabdrop();
 
         });
 
@@ -29,7 +29,7 @@
       scope.$on('$destroy', function () {
 
           //ensure to destroy tabdrop (unbinds window resize listeners)
-          el.tabdrop("destroy");
+          //el.tabdrop("destroy");
 
           unbindModelWatch();
 

src/Umbraco.Web.UI.Client/src/common/directives/components/umbvariations.directive.js

@@ -0,0 +1,112 @@
+(function() {
+    'use strict';
+
+    function Variations(iconHelper) {
+
+        function link(scope, el, attr, ctrl) {
+
+            scope.newVariation = {};
+
+            scope.segments = [
+                {
+                    name: "Mobile",
+                    id: 1
+                },
+                {
+                    name: "Tablet",
+                    id: 2
+                },
+                {
+                    name: "Email Subscriber",
+                    id: 3
+                },
+                {
+                    name: "Email Campagin March 2016",
+                    id: 4
+                },
+                {
+                    name: "Codegarden Attendees",
+                    id: 5
+                },
+                {
+                    name: "Codegarden Attendees from abroad",
+                    id: 6
+                }
+            ];
+
+            scope.variationsSortableOptions = {
+                distance: 10,
+                tolerance: "pointer",
+                opacity: 0.7,
+                scroll: true,
+                cursor: "move",
+                zIndex: 6000
+            };
+
+            scope.showNewVariation = function(language) {
+                language.showNewVariation = true;
+            };
+
+            scope.hideNewVariation = function(language) {
+                language.showNewVariation = false;
+            };
+
+            scope.toggleEditVariation = function(selectedVariation) {
+                selectedVariation.editVariation = !selectedVariation.editVariation;
+            };
+
+            scope.createNewVariation = function(newVariation, language) {
+
+                var variation = angular.copy(language);
+                variation.variationName = newVariation.name;
+                variation.variationDescription = newVariation.description;
+                variation.segments = newVariation.segments;
+                variation.active = false;
+
+                language.variations.unshift(variation);
+
+                language.showNewVariation = false;
+
+                scope.newVariation = {
+                    name: "",
+                    description: "",
+                    segments: []
+                };
+
+            };
+
+            scope.saveVariation = function(variation, language) {
+                variation.editVariation = false;
+            };
+
+            scope.deleteVariation = function(variation, language) {
+                var index  = language.variations.indexOf(variation);
+                language.variations.splice(index, 1);
+            };
+
+            scope.hideEditVariation = function(variation) {
+                variation.editVariation = false;
+            };
+
+        }
+
+        var directive = {
+            restrict: 'E',
+            replace: true,
+            templateUrl: 'views/components/umb-variations.html',
+            scope: {
+                variations: "=",
+                onClickVariation: "=",
+                onSaveVariation: "=",
+                onCloneVariation: "=",
+                onDeleteVariation: "="
+            },
+            link: link
+        };
+
+        return directive;
+    }
+
+    angular.module('umbraco.directives').directive('umbVariations', Variations);
+
+})();

src/Umbraco.Web.UI.Client/src/common/services/contenteditinghelper.service.js

@@ -55,7 +55,7 @@ function contentEditingHelper(fileManager, $q, $location, $routeParams, notifica
 
             var deferred = $q.defer();
 
-            if (!args.scope.busy && formHelper.submitForm({ scope: args.scope, statusMessage: args.statusMessage })) {
+            if (!args.scope.busy && formHelper.submitForm({ scope: args.scope, statusMessage: args.statusMessage, action: args.action })) {
 
                 args.scope.busy = true;
 

src/Umbraco.Web.UI.Client/src/common/services/formhelper.service.js

@@ -50,7 +50,7 @@ function formHelper(angularHelper, serverValidationManager, $timeout, notificati
             }
             
             //the first thing any form must do is broadcast the formSubmitting event
-            args.scope.$broadcast("formSubmitting", { scope: args.scope });
+            args.scope.$broadcast("formSubmitting", { scope: args.scope, action: args.action });
 
             //then check if the form is valid
             if (!args.skipValidation) {                

src/Umbraco.Web.UI.Client/src/common/services/variationsHelper.service.js

@@ -0,0 +1,154 @@
+(function() {
+    'use strict';
+
+    function variationsHelper() {
+
+        var variations = [];
+
+        /*
+        var variations = [
+            {
+                language: "Danish",
+                master: true,
+                published: true,
+                variations: [
+                    {
+                        name: "Mobile",
+                        description: "Danish content for mobile",
+                        published: true,
+                        segments: [
+                            {
+                                name: "Mobile"
+                            }
+                        ]
+                    }
+                ]
+            },
+            {
+                language: "Dutch",
+                published: true,
+                variations: [
+                    {
+                        name: "Mobile",
+                        description: "Dutch content for mobile",
+                        segments: [
+                            {
+                                name: "Mobile"
+                            }
+                        ]
+                    }
+                ]
+            },
+            {
+                language: "English (United States)",
+                published: true,
+                variations: [
+                    {
+                        name: "Mobile",
+                        description: "English content for mobile",
+                        published: true,
+                        segments: [
+                            {
+                                name: "Mobile"
+                            }
+                        ]
+                    },
+                    {
+                        name: "Job campaign: Front-end developer",
+                        description: "Landing page for job thing 1",
+                        published: true,
+                        segments: [
+                            {
+                                name: "Front-end developer"
+                            }
+                        ]
+                    },
+                    {
+                        name: "Job campaign: Back-end developer",
+                        description: "Landing page for job thing 2",
+                        published: true,
+                        segments: [
+                            {
+                                name: "Back-end developer"
+                            }
+                        ]
+                    }
+                ]
+            },
+            {
+                language: "German",
+                published: true
+            },
+            {
+                language: "Italian",
+                published: true
+            },
+            {
+                language: "Spanish",
+                published: false
+            },
+            {
+                language: "Swedish",
+                published: false
+            }
+        ];
+        */
+
+        function setMaster(master) {
+            variations = [];
+            master.master = true;
+            variations.push(master);
+        }
+
+        function getVariations() {
+            return variations;
+        }
+
+        function createVariation(variation) {
+            var newVariation = angular.copy(variation);
+            newVariation.master = false;
+            variations.push(newVariation);
+        }
+
+        function saveVariation(updatedVariation) {
+
+            for(var i = 0; i < variations.length; i++) {
+
+                var variation = variations[i];
+
+                if(variation.id === updatedVariation) {
+                    variation.name = updatedVariation.name;
+                    variation.description = updatedVariation.description;
+                }
+            }
+
+        }
+
+        function cloneVariation(variation) {
+            var variationClone = angular.copy(variation);
+            variationClone.master = false;
+            variationClone.published = false;
+            variations.push(variationClone);
+        }
+
+        function deleteVariation(variation, event, index) {
+            variations.splice(index, 1);
+        }
+
+        var service = {
+            setMaster: setMaster,
+            getVariations: getVariations,
+            createVariation: createVariation,
+            saveVariation: saveVariation,
+            cloneVariation: cloneVariation,
+            deleteVariation: deleteVariation
+        };
+
+        return service;
+
+    }
+
+
+    angular.module('umbraco.services').factory('variationsHelper', variationsHelper);
+
+})();

src/Umbraco.Web.UI.Client/src/controllers/main.controller.js

@@ -8,7 +8,7 @@
  * The main application controller
  * 
  */
-function MainController($scope, $rootScope, $location, $routeParams, $timeout, $http, $log, appState, treeService, notificationsService, userService, navigationService, historyService, updateChecker, assetsService, eventsService, umbRequestHelper, tmhDynamicLocale) {
+function MainController($scope, $rootScope, $location, $routeParams, $timeout, $http, $log, appState, treeService, notificationsService, userService, navigationService, historyService, updateChecker, assetsService, eventsService, umbRequestHelper, tmhDynamicLocale, $templateCache) {
 
     //the null is important because we do an explicit bool check on this in the view
     //the avatar is by default the umbraco logo    
@@ -19,7 +19,7 @@ function MainController($scope, $rootScope, $location, $routeParams, $timeout, $
         { value: "assets/img/application/logo@3x.png" }
     ];
     $scope.touchDevice = appState.getGlobalState("touchDevice");
-    
+    $scope.splitView = {};
 
     $scope.removeNotification = function (index) {
         notificationsService.remove(index);
@@ -126,6 +126,28 @@ function MainController($scope, $rootScope, $location, $routeParams, $timeout, $
         };
     }));
 
+    evts.push(eventsService.on("splitView.open", function(name, view) {
+
+        var updateTime = Date.now();
+
+        $scope.splitView = {
+            id: view.id,
+            view: view.view + "?updated=" + updateTime,
+            show: true
+        };
+
+    }));
+
+    $rootScope.$on('$routeChangeSuccess', function(event, current, previous) {
+        $scope.closeSplitView();
+    });
+
+    $scope.closeSplitView = function() {
+        $scope.splitView.show = false;
+        $scope.splitView.id = null;
+        $scope.splitView.view = null;
+    };
+
     //ensure to unregister from all events!
     $scope.$on('$destroy', function () {
         for (var e in evts) {
@@ -141,4 +163,4 @@ angular.module('umbraco').controller("Umbraco.MainController", MainController).
         config(function (tmhDynamicLocaleProvider) {
             //Set url for locale files
             tmhDynamicLocaleProvider.localeLocationPattern('lib/angular/1.1.5/i18n/angular-locale_{{locale}}.js');
-        });
+        });

src/Umbraco.Web.UI.Client/src/less/application/grid.less

@@ -41,14 +41,10 @@ body {
 }
 
 #contentwrapper, #contentcolumn {
-  position: absolute;
-  top: 0px; bottom: 0px; right: 0px; left: 80px;
-  z-index: 10;
-  margin: 0
-}
-
-#umb-notifications-wrapper {
-    left: 80px;
+  // position: absolute;
+  // top: 0px; bottom: 0px; right: 0px; left: 80px;
+  // z-index: 10;
+  // margin: 0
 }
 
 #contentcolumn {
@@ -63,24 +59,6 @@ body {
   border: none;
 }
 
-#leftcolumn {
-  height: 100%;
-  z-index: 20;
-  width: 80px;
-  float: left;
-  position: absolute;
-}
-
-#applications {
-  z-index: 1000;
-  height: 100%;
-  left: 0px;
-  top: 0;
-  bottom: 0;
-  position: absolute;
-  text-align: center
-}
-
 #applications-tray {
   z-index: 900;
   left: 80px;
@@ -91,6 +69,7 @@ body {
   text-align: center;
 }
 
+/*
 #search-form {
     display: block;
     margin: 0;
@@ -102,21 +81,37 @@ body {
     overflow: hidden;
 
     .form-search {
-        display: -ms-flexbox;
-        display: -webkit-box;
-        display: -webkit-flex;
         display: flex;
         margin-top: 17px;
 
         .umb-search-field {
             width: auto;
             min-width: 160px;
-            -webkit-flex: 1;
-            -ms-flex: 1;
             flex: 1;
+            border-left: none;
+            border-right: none;
+            border-top: none;
         }
     }
 }
+*/
+
+.form-search {
+    display: flex;
+    //margin-top: 17px;
+
+    .umb-search-field {
+        width: auto;
+        min-width: 160px;
+        flex: 1;
+        border-left: none;
+        border-right: none;
+        border-top: none;
+        height: 60px;
+        box-sizing: border-box;
+        padding-left: 40px !important;
+    }
+}
 
 #navigation {
   left: 80px;
@@ -199,10 +194,10 @@ body {
     z-index:9999 !important;
 }
 
-@media (min-width: 1101px) {
-  #contentwrapper, #umb-notifications-wrapper {left: 440px;}
-  #speechbubble {left: 360px;}
-}
+// @media (min-width: 1101px) {
+//   #contentwrapper, #umb-notifications-wrapper {left: 440px;}
+//   #speechbubble {left: 360px;}
+// }
 
 //empty section modification
 .emptySection #contentwrapper, .emptySection #umb-notifications-wrapper {left: 80px;}

src/Umbraco.Web.UI.Client/src/less/application/umb-navigation.less

@@ -0,0 +1,228 @@
+.umb-navigation {
+    display: flex;
+    flex: 0 0 @navigationBarHeight;
+    align-items: center;
+    border-bottom: 1px solid @grayLight;
+    box-sizing: border-box;
+}
+
+
+.umb-navigation-link {
+    display: flex;
+    align-items: center;
+
+    padding: 0 20px;
+    height: 49px;
+    font-size: 13px;
+
+    cursor: pointer;
+
+    &:hover {
+        text-decoration: none;
+        background: @grayLighter;
+    }
+
+    &:focus {
+        text-decoration: none;
+    }
+}
+
+
+.umb-navigation-link.-current {
+    color: @blue;
+}
+
+.umb-navigation-link.open {
+    background: @grayLighter;
+}
+
+
+.umb-navigation__right {
+    display: flex;
+    align-items: center;
+
+    margin-left: auto;
+}
+
+
+#avatar-img {
+    border-radius: 50%;
+    margin: 0 0 0 10px;
+}
+
+
+
+.umb-sections__tray {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+
+    position: absolute;
+    z-index: 1;
+
+    width: 220px;
+    top: @navigationBarHeight;
+
+    background: white;
+
+    transform: translate(-42px, 0px);
+}
+
+.umb-sections__tray .umb-navigation-link {
+    width: 100%;
+    box-sizing: border-box;
+}
+
+.umb-sections__tray .umb-navigation-link:hover {
+    background: #ececec;
+}
+
+
+.umb-navigation-more {
+    width: 22px;
+    height: auto;
+}
+
+.umb-navigation-more__path {
+    fill: @black;
+}
+
+
+// Tree Doors Downu
+#mainwrapper {
+    display: flex;
+    flex-direction: column;
+}
+
+#contentwrapper {
+    display: flex;
+    flex-direction: row;
+    flex: 1 1 auto;
+}
+
+#contentcolumn {
+    flex: 1 1 100%;
+    position: relative;
+}
+
+
+// Editor blocks
+.umb-editor-wrapper {
+    display: flex;
+    flex-direction: column;
+    height: ~"(calc(~'100vh' - ~'@{navigationBarHeight}'))";
+}
+
+.umb-editor-header {
+    flex: 0 0 @editorHeaderHeight;
+    display: flex;
+    align-items: center;
+    box-sizing: border-box;
+}
+
+.umb-editor-container {
+    flex: 1 1 auto;
+    box-sizing: border-box;
+    overflow-y: auto;
+    //display: flex;
+    //flex-direction: row;
+}
+
+.umb-editor-content {
+    padding: 30px 20px;
+}
+
+.umb-editor-container-test {
+    flex: 1 1 auto;
+    padding: 30px 20px;
+    overflow-y: auto;
+}
+
+.umb-editor-container-sidebar {
+    flex: 0 0 400px;
+    padding: 30px 20px;
+    border-left: 1px solid @grayLight;
+    overflow-y: auto;
+}
+
+.umb-editor-drawer {
+    flex: 0 0 31px;
+}
+
+.umb-tree-navigation {
+    display: flex;
+    flex-direction: column;
+    flex: 0 0 300px;
+    border-right: 1px solid @grayLight;
+    overflow-y: auto;
+    padding-bottom: 20px;
+}
+
+
+
+.umb-panel-header-content-wrapper {
+    width: 100%;
+}
+
+
+
+.umb-toggle-tree {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    height: 49px;
+    width: 20px;
+    padding: 0 20px;
+
+    cursor: pointer;
+
+    transition: background-color 80ms ease;
+}
+
+.umb-toggle-icon {
+    margin: 0 auto 0 0;
+    width: 20px;
+    height: 2px;
+    background-color: @grayLight;
+    transition: all 80ms ease;
+    display: block;
+}
+
+.umb-toggle-icon:before,
+.umb-toggle-icon:after {
+    content: '';
+    width: 20px;
+    height: 2px;
+    display: block;
+    background-color: @grayLight;
+    transition: all 80ms ease;
+}
+
+.umb-toggle-icon:before {
+    transform: translate(0, -5px);
+    width: 15px;
+}
+
+.umb-toggle-icon:after {
+    transform: translate(0, 3px);
+    width: 9px;
+}
+
+.umb-toggle-tree:hover,
+.umb-toggle-tree.-open {
+    background: @grayLighter;
+}
+
+.umb-toggle-tree:hover .umb-toggle-icon,
+.umb-toggle-tree:hover .umb-toggle-icon:before,
+.umb-toggle-tree:hover .umb-toggle-icon:after {
+    background-color: @grayMed;
+}
+
+.umb-toggle-tree.-open .umb-toggle-icon,
+.umb-toggle-tree.-open .umb-toggle-icon:before,
+.umb-toggle-tree.-open .umb-toggle-icon:after {
+    width: 20px;
+    background-color: @grayMed;
+}

src/Umbraco.Web.UI.Client/src/less/belle.less

@@ -59,6 +59,7 @@
 @import "application/grid.less";
 @import "application/shadows.less";
 @import "application/animations.less";
+@import "application/umb-navigation.less";
 
 // Belle styles
 @import "buttons.less";
@@ -84,6 +85,8 @@
 @import "components/umb-sub-views.less";
 @import "components/umb-editor-navigation.less";
 @import "components/umb-editor-sub-views.less";
+@import "components/editor/subviews/umb-editor-sub-view.less";
+@import "components/editor/umb-editor-toolbar.less";
 @import "components/editor/subheader/umb-editor-sub-header.less";
 @import "components/umb-grid-selector.less";
 @import "components/umb-child-selector.less";
@@ -107,6 +110,9 @@
 @import "components/umb-grid.less";
 @import "components/umb-empty-state.less";
 @import "components/umb-property-editor.less";
+@import "components/umb-iconpicker.less";
+@import "components/umb-variations.less";
+@import "components/umb-splitview.less";
 
 @import "components/buttons/umb-button.less";
 @import "components/buttons/umb-button-group.less";

src/Umbraco.Web.UI.Client/src/less/components/editor.less

@@ -4,30 +4,29 @@
 
 .umb-editor-wrapper{
 	background: white;
-	position: absolute;
-	top: 0px; bottom: 0px; left: 0px; right: 0px;
+	// position: absolute;
+	// top: 0px; bottom: 0px; left: 0px; right: 0px;
 }
 
 
-.umb-editor-header{
-	background: @grayLighter;
+.umb-editor-header {
+	//background: @grayLighter;
 	border-bottom: 1px solid @grayLight;
-	position: absolute;
-	height: 99px;
-	top: 0px;
-	right: 0px;
-	left: 0px;
+	//position: absolute;
+	// height: 99px;
+	//top: 0px;
+	//right: 0px;
+	//left: 0px;
 }
 
-
 .umb-editor-container {
-	top: 101px;
-	left: 0px;
-	right: 0px;
-	bottom: 52px;
-	position: absolute;
-	clear: both;
-	overflow: auto;
+	// top: 101px;
+	// left: 0px;
+	// right: 0px;
+	// bottom: 52px;
+	// position: absolute;
+	// clear: both;
+	// overflow: auto;
 }
 
 .umb-editor-wrapper.-no-footer .umb-editor-container {
@@ -39,17 +38,18 @@
 }
 
 .umb-editor-drawer{
-	margin: 0;
+	//margin: 0;
 	padding: 10px 20px;
-	z-index: 999;
-	position: absolute;
-	bottom: 0px;
-	left: 0px;
-	right: 0px;
-	height: 31px;
+	//z-index: 999;
+	//position: absolute;
+	//bottom: 0px;
+	//left: 0px;
+	//right: 0px;
 
-	background: @grayLighter;
+	//background: @grayLighter;
 	border-top: 1px solid @grayLight;
+	flex: 0 0 @editorFooterHeight;
+	box-sizing: border-box;
 }
 
 
@@ -61,3 +61,187 @@
 .umb-editor-actions li{
 	display: inline-block;
 }
+
+.umb-editor-header__published-state {
+	width: 10px;
+	height: 10px;
+}
+
+/* ----- LANGUAGE AND VARIATION */
+.umb-editor-header__selected-variations {
+	display: flex;
+	flex-direction: row;
+	margin-top: 6px;
+	margin-bottom: -4px;
+}
+
+.umb-editor-header__selected-variation {
+	display: flex;
+	flex-direction: row;
+	font-size: 12px;
+	color: #9e9ea6;
+}
+
+.umb-editor-header__selected-variation:first-child {
+	margin-right: 10px;
+}
+
+.umb-editor-header__selected-variation-icon {
+	margin-right: 5px;
+}
+
+/* --- VARIATIONS --- */
+.umb-variations-quick-switcher__toggle {
+	position: absolute;
+    top: 0;
+    right: 0;
+	display: flex;
+	align-items: center;
+	border: 1px solid #ECECEC;
+	padding-left: 20px;
+	padding-right: 20px;
+	height: 30px;
+
+	box-sizing: border-box;
+}
+
+.umb-variations-quick-switcher__toggle.-active,
+.umb-variations-quick-switcher__toggle.-active:hover {
+	background: @blue;
+	border-color: @blue;
+	color: @white;
+}
+
+
+.umb-variations-quick-switcher__toggle:hover {
+	background-color: @grayLighter;
+	border-color: @grayLight;
+}
+
+.umb-variations-quick-switcher__toggle:hover,
+.umb-variations-quick-switcher__toggle:focus {
+	text-decoration: none;
+}
+
+.umb-variations-quick-switcher__toggle-icon {
+	margin-right: 5px;
+}
+
+.umb-variations-quick-switcher__toggle-arrow {
+
+}
+
+.umb-variations-quick-switcher_variations {
+	position: absolute;
+	top: 30px;
+	left: 0;
+	right: 0;
+	z-index: 6200;
+	background-color: #ffffff;
+	max-height: 300px;
+	overflow-y: auto;
+	list-style: none;
+	margin-left: 0;
+	margin-bottom: 0;
+}
+
+.umb-variations-quick-switcher_variation > li {
+	border-left: 4px solid transparent;
+	box-sizing: border-box;
+}
+
+.umb-variations-quick-switcher_variation > li:hover {
+	border-color: @grayLighter;
+}
+
+.umb-variations-quick-switcher_variation > li.-active,
+.umb-variations-quick-switcher_variation > li.-active:hover {
+	border-left-color: @blue;
+}
+
+.umb-variations-quick-switcher_variation li.-active,
+.umb-variations-quick-switcher_variation li.-active:hover {
+	background-color: fade(@blueDark, 4%);
+}
+
+
+.umb-variations-quick-switcher__variation {
+	display: flex;
+	flex-direction: row;
+	align-items: center;
+	height: 60px;
+	padding: 0 15px;
+}
+
+.umb-variations-quick-switcher__variation-stroke {
+	border-left: 1px solid @grayLight;
+	padding-left: 10px;
+}
+
+.umb-variations-quick-switcher__subnav {
+	list-style: none;
+	margin-left: 0;
+	margin-bottom: 0;
+}
+
+.umb-variations-quick-switcher__variation:last-child {
+	border-bottom: none;
+}
+
+.umb-variations-quick-switcher__variation:hover,
+.umb-variations-quick-switcher__variation:focus {
+	text-decoration: none;
+	outline: none;
+}
+
+.umb-variations-quick-switcher__variation:hover,
+.umb-variations-quick-switcher__variation.-active {
+	background-color: @grayLighter;
+}
+
+.umb-variations-quick-switcher__variation.-active {
+	background-color: rgb(238, 246, 254);
+}
+
+.umb-variations-quick-switcher__variation-published-state {
+	display: block;
+	width: 6px;
+	height: 6px;
+	border-radius: 50%;
+	background-color: @grayLight;
+	margin-right: 10px;
+}
+
+.umb-variations-quick-switcher__variation-toggle {
+	font-size: 13px;
+	margin-left: auto;
+
+	opacity: .5;
+
+	padding: 5px 10px;
+}
+
+.umb-variations-quick-switcher__variation-toggle:hover {
+	opacity: 1;
+}
+
+
+.umb-variations-quick-switcher__variation-published-state.-published {
+	background-color: @green;
+}
+
+.umb-variations-quick-switcher__variation-name {
+	font-size: 13px;
+	font-weight: bold;
+}
+
+.umb-variations-quick-switcher__variation-icon {
+	color: @grayLight;
+	margin-right: 5px;
+}
+
+.umb-variations-quick-switcher__variation-description {
+	font-size: 11px;
+	color: @gray;
+	margin-left: 5px;
+}

src/Umbraco.Web.UI.Client/src/less/components/editor/subviews/umb-editor-sub-view.less

@@ -0,0 +1,107 @@
+.umb-editor-sub-view {
+    display: flex;
+    flex-direction: column;
+    height: ~"(calc(~'100vh' - ~'@{navigationBarHeight}' - ~'@{editorHeaderHeight}' - ~'@{editorFooterHeight}'))";
+}
+
+.umb-editor-sub-view-header {
+    display: flex;
+    flex-direction: row;
+    border-bottom: 1px solid rgba(217,217,217, .6);
+    flex: 0 0 @editorSubViewHeaderHeight;
+    padding: 0 20px;
+    align-items: center;
+    box-sizing: border-box;
+
+    background: @grayLighter;
+}
+
+.umb-editor-sub-view-header__content-left {
+    margin-right: auto;
+}
+
+.umb-editor-sub-view-header__content-right {
+    margin-left: auto;
+}
+
+.umb-editor-sub-view-container {
+    flex: 1 1 auto;
+    display: flex;
+    flex-direction: row;
+
+    background: #F9F9F9;
+}
+
+.umb-editor-sub-view-content {
+    flex: 1 1 auto;
+    padding: 30px 20px;
+    overflow-y: auto;
+    position: relative;
+}
+
+.umb-editor-sub-view-sidebar {
+    flex: 0 0 400px;
+    border-left: 1px solid @grayLight;
+    display: flex;
+    flex-direction: column;
+    background: @white;
+}
+
+
+
+.umb-editor-sub-view-sidebar-header {
+    flex: 0 0 auto;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: flex-start;
+
+    padding: 20px 0;
+}
+
+.umb-editor-sub-view-sidebar-header i {
+    margin-left: auto;
+    cursor: pointer;
+    color: @grayMed;
+}
+
+.umb-editor-sub-view-sidebar-header i:hover {
+    color: @black;
+}
+
+.umb-editor-sub-view-sidebar-title {
+    font-size: 16px;
+    font-weight: bold;
+    color: @black;
+
+    display: flex;
+    width: 100%;
+}
+
+
+.umb-editor-sub-view-sidebar-container {
+    overflow-y: auto;
+    flex: 1 1 auto;
+    box-sizing: border-box;
+
+    padding-top: 20px;
+    padding-bottom: 20px;
+}
+
+
+.umb-editor-sub-view-sidebar-footer {
+    flex: 0 0 @editorFooterHeight;
+    background: @grayLighter;
+
+    display: flex;
+    align-items: center;
+}
+
+
+
+.umb-editor-sub-view-sidebar-header,
+.umb-editor-sub-view-sidebar-container,
+.umb-editor-sub-view-sidebar-footer {
+    padding-right: 20px;
+    padding-left: 20px;
+}

src/Umbraco.Web.UI.Client/src/less/components/editor/umb-editor-toolbar.less

@@ -0,0 +1,19 @@
+.umb-editor-toolbar {
+    padding: 0 20px;
+    flex: 0 0 50px;
+    display: flex;
+    align-items: center;
+    border-bottom: 1px solid @grayLight;
+    justify-content: space-between;
+}
+
+.editor-toolbar-properties {
+    font-size: 20px;
+    color: @grayMed;
+}
+
+.editor-toolbar-properties:hover,
+.editor-toolbar-properties:focus {
+    color: @grayDark !important;
+    text-decoration: none;
+}

src/Umbraco.Web.UI.Client/src/less/components/notifications/umb-notifications.less

@@ -1,7 +1,7 @@
 .umb-notifications {
    z-index: 1000;
    position: absolute;
-   bottom: 52px;
+   bottom: @editorFooterHeight;
    left: 0;
    right: 0;
    border-bottom: none;

src/Umbraco.Web.UI.Client/src/less/components/overlays.less

@@ -152,6 +152,19 @@
     }
 }
 
+/* ---------- OVERLAY FULL ---------- */
+
+.umb-overlay.umb-overlay-full {
+    left: 0;
+    right: 0;
+    top: @navigationBarHeight;
+    bottom: 0;
+}
+
+.umb-overlay.umb-overlay-full .umb-overlay-header {
+    display: none;
+}
+
 /* ---------- OVERLAY ITEM DETAILS ---------- */
 .umb-overlay__item-details {
     position: absolute;

src/Umbraco.Web.UI.Client/src/less/components/umb-editor-navigation.less

@@ -1,14 +1,41 @@
 .umb-sub-views-nav {
   list-style: none;
-  display: flex;
   margin: 0;
+
+  display: flex;
+  flex-wrap: wrap;
+
+  align-items: flex-end;
+  justify-content: flex-end;
+}
+
+.umb-sub-views-nav-items {
+    display: flex;
+    justify-content: center;
+
+    height: 61px;
+}
+
+.umb-sub-views-nav-items .umb-navigation-more {
+    height: 20px;
+    margin: 0;
 }
 
 .umb-sub-views-nav-item {
   text-align: center;
-  margin-left: 20px;
+  padding: 10px;
   cursor: pointer;
-  display: block;
+
+  display: flex;
+  flex-direction: column;
+  flex-wrap: wrap;
+
+  align-items: center;
+
+  max-width: 100%;
+  text-overflow: ellipsis;
+
+  box-sizing: border-box;
 }
 
 .umb-sub-views-nav-item:focus {
@@ -35,5 +62,23 @@
 }
 
 .umb-sub-views-nav-item-text {
-  font-size: 11px;
+    font-size: 11px;
+    vertical-align: baseline;
+    margin: 10px 0 0 0;
+    line-height: 1;
+
+    white-space: nowrap;
+}
+
+// drop down
+.umb-sub-views-nav__dropdown {
+    position: absolute;
+    right: 20px;
+    background: #fff;
+    margin-top: 10px;
+    z-index: 1;
+    padding: 10px 20px;
+    display: flex;
+    justify-content: flex-end;
+    width: auto;
 }

src/Umbraco.Web.UI.Client/src/less/components/umb-file-dropzone.less

@@ -4,9 +4,8 @@
   // drop zone
   // tall and small version - animate height
   .dropzone {
-    height: 400px;
+    height: 500px;
     width: 100%;
-    padding: 50px 0;
     border: 1px dashed @grayLight;
     text-align: center;
     color: @gray;
@@ -15,11 +14,12 @@
     -webkit-transition: height 0.8s;
     -moz-transition: height 0.8s;
     transition: height 0.8s;
+    box-sizing: border-box;
     .illustration {
       width: 300px;
     }
     &.is-small {
-      height: 100px;
+      height: 200px;
       .illustration {
         width: 200px;
       }

src/Umbraco.Web.UI.Client/src/less/components/umb-iconpicker.less

@@ -0,0 +1,46 @@
+.umb-iconpicker {
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+
+    margin: 0;
+}
+
+.umb-iconpicker-item {
+    display: flex;
+    flex-direction: row;
+    flex: 0 0 14.28%;
+    justify-content: center;
+    align-items: center;
+
+    margin-bottom: 0;
+
+    overflow: hidden;
+}
+
+.umb-iconpicker-item a {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+
+    width: 100%;
+    height: 100%;
+
+    padding: 15px 0;
+
+    text-decoration: none;
+}
+
+.umb-iconpicker-item a:hover,
+.umb-iconpicker-item a:focus{
+    background: darken(@grayLighter, 1%);
+    outline: none;
+}
+
+.umb-iconpicker-item a:active {
+    background: darken(@grayLighter, 4%);
+}
+
+.umb-iconpicker-item i {
+    font-size: 30px;
+}

src/Umbraco.Web.UI.Client/src/less/components/umb-keyboard-shortcuts-overview.less

@@ -16,8 +16,23 @@
 
 .umb-keyboard-shortcuts-overview__overlay-close {
   position: absolute;
-  top: 10px;
-  right: 10px;
+  top: 20px;
+  right: 20px;
+  font-size: 25px;
+  border-radius: 20px;
+  width: 35px;
+  height: 35px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  background-color: transparent;
+  line-height: 1em;
+}
+
+.umb-keyboard-shortcuts-overview__overlay-close:hover {
+    background-color: @blue;
+    color: #ffffff;
+    text-decoration: none;
 }
 
 .umb-keyboard-shortcuts-overview__overlay-content {

src/Umbraco.Web.UI.Client/src/less/components/umb-property-editor.less

@@ -1,3 +1,146 @@
 .umb-property-editor.-not-clickable {
     pointer-events: none;
 }
+
+.umb-property-editor {
+    position: relative;
+}
+
+.umb-property-editor__overlay {
+    background-color: rgba(255,255,255, .65);
+    display: block;
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    z-index: 1;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+
+.umb-property-editor__overlay-label {
+    font-size: 16px;
+    font-weight: bold;
+    color: #;
+    background: #ffffff;
+    padding: 10px 20px;
+    color: @grayLight;
+}
+
+
+.umb-property .control-label {
+    font-size: 14px;
+}
+
+.umb-property .control-label small {
+    font-size: 11px;
+    line-height: 17px;
+    margin-top: 5px;
+    margin-bottom: 10px;
+}
+
+
+
+.umb-property-editor__dropdown-toggling {
+    z-index: 1;
+    position: relative;
+}
+
+
+
+.umb-property-editor__dropdown-toggling.-active {
+    z-index: 10;
+}
+
+.umb-property-editor__dropdown-toggling.-active .umb-property-editor__dropdown-toggle {
+    color: @blue;
+}
+
+.umb-property-editor__dropdown-toggle {
+    display: inline-flex;
+    align-items: center;
+
+    width: auto;
+
+    box-sizing: border-box;
+
+    font-weight: bold;
+    font-size: 12px;
+
+    cursor: pointer;
+
+    margin-top: 5px;
+}
+
+.umb-property-editor__dropdown-toggle:hover {
+    color: @blue;
+}
+
+.umb-property-editor__dropdown-toggle i,
+.umb-property-editor__dropdown-link i {
+    margin-right: 5px;
+    font-size: 12px;
+}
+
+
+
+.umb-property-editor__dropdown {
+    position: absolute;
+    z-index: 10;
+
+    min-width: 250px;
+
+    background: #ffffff;
+
+    margin-top: 5px;
+}
+
+.umb-property-editor__dropdown-items {
+    list-style: none;
+
+    margin-bottom: 0;
+    margin-left: 0;
+
+    font-size: 12px;
+    font-weight: normal;
+
+    max-height: 165px;
+    overflow-y: auto;
+}
+
+
+.umb-property-editor__dropdown-filter {
+    padding: 5px;
+}
+
+.umb-property-editor__dropdown-filter input[type="search"] {
+    font-size: 12px;
+}
+
+.umb-property-editor__dropdown-link.-sync-off {
+    border-bottom: 1px solid @grayLight;
+    padding: 10px;
+    font-size: 12px;
+}
+
+
+.umb-property-editor__dropdown-link.-sync-off:hover {
+    background: rgba(217,217,217, .35);
+}
+
+
+
+.umb-property-editor__dropdown-link {
+    padding: 5px 10px;
+    display: flex;
+    align-items: center;
+
+    box-sizing: border-box;
+}
+
+.umb-property-editor__dropdown-link:hover {
+    background-color: @grayLighter;
+    text-decoration: none;
+}

src/Umbraco.Web.UI.Client/src/less/components/umb-splitview.less

@@ -0,0 +1,41 @@
+/* split view */
+.splitview--views {
+    display: flex;
+}
+
+.splitview--view {
+    position: relative;
+    flex: 1 1 100%;
+}
+
+.splitview--divider {
+    flex: 0 0 8px;
+    background: @white;
+    border-right: 1px solid @grayLight;
+    border-left: 1px solid @grayLight;
+
+    box-shadow: 0 0 4px rgba(0,0,0,0.1);
+    position: relative;
+    z-index: 1;
+}
+
+.splitview--close {
+    position: absolute;
+    bottom: 50px;
+    left: 50%;
+    transform: translate3d(-50%, -50%, 0);
+    z-index: 100;
+
+    font-size: 14px;
+    font-weight: bold;
+
+    padding: 8px 18px;
+    background: rgba(0,0,0,0.05);
+    border-radius: 6px;
+
+    cursor: pointer;
+
+    &:hover {
+        background: rgba(0,0,0,0.1);
+    }
+}

src/Umbraco.Web.UI.Client/src/less/components/umb-table.less

@@ -198,6 +198,7 @@ input.umb-table__input {
     padding: 6px 2px;
 
     text-align: left;
+    overflow:hidden;
 }
 
 .umb-table-cell > * {

src/Umbraco.Web.UI.Client/src/less/components/umb-tabs.less

@@ -1,15 +1,119 @@
-.umb-nav-tabs {
-  position: absolute;
-  z-index: 10;
+.umb-tabs-nav {
+    list-style: none;
+    margin: 0;
 }
 
-.umb-nav-tabs.-padding-left {
-  padding-left: 20px;
+
+// Sub view header tabs
+.umb-editor-sub-view-header .umb-tabs-nav {
+    display: flex;
+    flex-wrap: wrap;
 }
 
-.umb-tab-content {
-  padding-top: 20px;
-  position: relative;
-  top: 22px;
-  border-top: 1px solid @grayLight;
+.umb-editor-sub-view-header .umb-tabs-nav__tab a  {
+    padding: 4px 10px;
+    font-size: 12px;
+    font-weight: bold;
+    border-radius: 6px;
+    margin-right: 15px;
+}
+
+.umb-editor-sub-view-header .umb-tabs-nav__tab a:hover,
+.umb-editor-sub-view-header .umb-tabs-nav__tab a:active,
+.umb-editor-sub-view-header .umb-tabs-nav__tab a:focus {
+    text-decoration: none !important;
+    background: rgba(0,0,0,0.05);
+}
+
+.umb-editor-sub-view-header .umb-tabs-nav__tab.active a {
+    background: @blue;
+    color: white;
+    text-decoration: none;
+}
+
+
+
+// Sidebar tabs
+.umb-editor-sub-view-sidebar .umb-tabs-nav {
+    display: flex;
+    width: 100%;
+    border-bottom: 1px solid @grayLight;
+    padding-top: 25px;
+}
+
+.umb-editor-sub-view-sidebar .umb-tabs-nav__tab {
+    border-bottom: 3px solid transparent;
+    padding-bottom: 8px;
+    margin-right: 0;
+    flex: 1 1 100%;
+
+    font-size: 14px;
+    color: @grayMed;
+}
+
+.umb-editor-sub-view-sidebar .umb-tabs-nav__tab:hover,
+.umb-editor-sub-view-sidebar .umb-tabs-nav__tab.-active {
+    text-decoration: none !important;
+    border-color: @blue;
+    color: @black;
+}
+
+.umb-editor-sub-view-sidebar .umb-tabs-nav__tab:focus,
+.umb-editor-sub-view-sidebar .umb-tabs-nav__tab:active {
+    text-decoration: none !important;
+}
+
+
+
+// Umb activity demo css
+.umb-activity {
+    padding: 0;
+    margin: 0;
+}
+
+
+
+.umb-activity-item {
+    border: 1px solid transparent;
+    padding: 10px;
+
+    list-style: none;
+
+    font-weight: bold;
+
+    cursor: pointer;
+}
+
+
+
+.umb-activity-item:hover {
+    border-color: @grayLight;
+}
+
+.umb-activity-item:hover .umb-activity-item-rollback {
+    color: @blue;
+    text-decoration: none;
+}
+
+.umb-activity-item-name {
+    display: block;
+    width: 100%;
+    font-size: 15px;
+    margin-bottom: 5px;
+}
+
+.umb-activity-item-rollback {
+    font-size: 13px;
+    color: @grayMed;
+    font-weight: normal;
+}
+
+.umb-activity-item .umb-activity-item-rollback:hover {
+    color: @blueDark;
+}
+
+
+
+.umb-activity-item + .umb-activity-item {
+    margin-top: 5px;
 }

src/Umbraco.Web.UI.Client/src/less/components/umb-variations.less

@@ -0,0 +1,356 @@
+.umb-variations {
+    max-width: 100%;
+    padding: 0 20px;
+    margin-right: auto;
+    margin-left: auto;
+}
+
+.umb-variations__title-wrapper {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    margin-bottom: 20px;
+}
+
+.umb-variations__title {
+    font-size: 16px;
+    font-weight: bold;
+    color: @black;
+}
+
+.umb-variations__help-text {
+    line-height: 1.6em;
+    display: block;
+    color: @grayMed;
+    margin-bottom: 20px;
+}
+
+.umb-variations__filter {
+    margin-bottom: 10px;
+}
+
+.umb-varations__published-state {
+    width: 6px;
+    height: 6px;
+    border-radius: 50%;
+    background-color: @grayLight;
+    margin-right: 10px;
+}
+
+.umb-varations__published-state.-published {
+    background-color: @green;
+}
+
+/* ---------- VARIATIONS LANG GROUP ---------- */
+
+.umb-varations__lang-group {
+    background: @white;
+    border: 1px solid @grayLight;
+    margin-bottom: 30px;
+}
+
+.umb-varations__lang-group-info {
+    padding: 20px 15px;
+    display: flex;
+}
+
+.umb-varations__lang-group-info__name {
+    font-size: 15px;
+    font-weight: bold;
+
+    display: flex;
+    align-items: center;
+    flex-direction: row;
+
+    flex: 1 1 auto;
+}
+
+.umb-varations__lang-group-info__link:hover {
+    text-decoration: underline;
+    cursor: pointer;
+}
+
+.umb-varations__lang-group-info__name i {
+    margin-right: 5px;
+}
+
+.umb-varations__lang-group-info__name small {
+    margin-left: 5px;
+    color: @grayMed;
+    font-weight: normal;
+    font-size: 13px;
+}
+
+.umb-varations__lang-group .umb-variations__action span {
+    font-size: 13px;
+    margin-left: 5px;
+    font-weight: bold;
+}
+
+
+.umb-varations__lang-group-info .umb-variations__action {
+    color: @blue;
+    display: flex;
+}
+
+.umb-varations__lang-group-info .umb-variations__action:hover {
+    color: @blueDark;
+}
+
+.umb-variations__no-variations {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+
+    padding: 0 20px 40px;
+}
+
+.umb-variations__no-variations-message {
+    display: block;
+    margin-bottom: 20px;
+    font-size: 14px;
+    line-height: 22px;
+    color: #999;
+}
+
+/* ---------- VARIATIONS LIST ---------- */
+
+.umb-variations__list {
+    list-style: none;
+    margin: 0;
+}
+
+.umb-variations__list-item-wrapper {
+    display: flex;
+    flex-direction: column;
+}
+
+.umb-variations__list-item {
+    padding: 15px;
+    flex: 3 1 auto;
+    border-top: 1px solid @grayLight;
+    background: #ffffff;
+}
+
+
+.umb-variations__list-item.-edit-mode {
+    background: @grayLighter;
+    border-top-color: #e7e7e7;
+}
+
+.umb-variations__list-item.-edit-mode + .umb-variations__edit-list-item {
+    border-top-color: @grayLighter;
+}
+
+
+.umb-variations__list-item__edit {
+    padding: 4px 10px;
+    border-radius: 6px;
+    font-size: 12px;
+    font-weight: bold;
+    background: rgba(0, 0, 0, 0.05);
+}
+
+.umb-variations__list-item__edit:hover {
+    background: rgba(0, 0, 0, 0.09);
+    cursor: pointer;
+}
+
+
+
+.umb-variations__variation-top-bar {
+    display: flex;
+    flex-direction: row;
+    flex-wrap: nowrap;
+    justify-content: space-between;
+    align-items: center;
+}
+
+.umb-variations__published-state {
+    width: 10px;
+    height: 10px;
+    border-radius: 20px;
+    background-color: @grayLight;
+    margin-right: 10px;
+}
+
+.umb-variations__published-state.-published {
+    background-color: @green;
+}
+
+.umb-variations__name-wrapper {
+    display: flex;
+    align-items: center;
+    flex-direction: row;
+    flex: 1 1 auto;
+}
+
+.umb-variations__name {
+    font-size: 13px;
+    font-weight: bold;
+    color: @black;
+}
+
+.umb-variations__name:hover {
+    text-decoration: underline;
+    cursor: pointer;
+}
+
+.umb-variations__name-icon {
+    margin-right: 5px;
+}
+
+.umb-variations__edit-form {
+    width: 100%;
+}
+
+.umb-variations__name-input:focus,
+.umb-variations__name-input:active {
+    outline: none;
+}
+
+.umb-variations__description {
+    margin-bottom: 0;
+    margin-left: 5px;
+    resize: none;
+    font-size: 12px;
+    color: @grayMed;
+}
+
+.umb-variations__description-input {
+    resize: none;
+}
+
+.umb-variations__actions {
+    display: flex;
+    flex-direction: row;
+    justify-content: flex-end;
+}
+
+.umb-variations__action {
+    font-size: 18px;
+    cursor: pointer;
+
+    display: flex;
+    align-items: center;
+    flex-direction: row;
+}
+
+.umb-variations__action + .umb-variations__action {
+    margin-left: 20px;
+}
+
+.umb-variations__action:hover {
+    color: @blue;
+}
+
+/* --- CREATE VARIATION --- */
+
+.umb-variation__create-title {
+	color: @black;
+	font-weight: bold;
+	font-size: 24px;
+	margin-bottom: 10px;
+}
+
+.umb-variation__create-form-description {
+    resize: none;
+    min-height: 100px;
+}
+
+.umb-variation__create-form {
+	display: flex;
+	flex-direction: column;
+}
+
+.umb-variation__create-form label,
+.umb-variations__edit-form label {
+	font-weight: bold;
+}
+
+.umb-variation__create-form-actions {
+	display: flex;
+	justify-content: flex-end;
+}
+
+.umb-variations__edit-form + .umb-variations__actions {
+    margin-top: 30px;
+}
+
+/* */
+
+.form-group-actions {
+    margin-top: 10px;
+    margin-bottom: 0;
+}
+
+.umb-variations__edit-list-item {
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+    padding: 20px 30px;
+    box-sizing: border-box;
+    background-color: @white;
+    border-top: 1px solid @grayLight;
+}
+
+/* MATCHES */
+
+.umb-variations__matches {
+    list-style: none;
+    margin-bottom: 0;
+    margin-left: 0;
+}
+
+.umb-variations__match {
+    background: @grayLighter;
+    padding: 10px 15px;
+    cursor: grab;
+    border-left: 2px solid @blue;
+    margin-bottom: 5px;
+}
+
+/* TAGS */
+
+.umb-variations__tags {
+    display: flex;
+    flex-wrap: wrap;
+}
+
+.umb-variations__tag {
+    display: flex;
+    flex: 0 0 100%;
+
+    overflow: hidden;
+    box-sizing: border-box;
+    text-overflow: ellipsis;
+
+    font-size: 13px;
+}
+
+.umb-variations__tag + .umb-variations__tag {
+    margin-top: 5px;
+}
+
+.umb-variations__tag .checkbox {
+    margin-right: 5px;
+}
+
+.umb-variations__tag .checkbox:checked + span {
+    font-weight: bold;
+}
+
+/* FORM */
+.umb-variations__form-group {
+    margin-bottom: 10px;
+}
+
+
+.umb-variations__label {
+    font-weight: bold;
+    color: @black;
+}
+
+.umb-variations__label + .umb-variations__tags {
+    margin-top: 10px;
+}

src/Umbraco.Web.UI.Client/src/less/forms.less

@@ -49,6 +49,7 @@ label.control-label {
 .form-search {
   position: relative;
   padding: 0;
+  margin-bottom: 0;
 }
 .form-search a{
     text-decoration:none;
@@ -65,8 +66,8 @@ label.control-label {
 }
 .form-search .icon, .form-search .icon-search {
   position: absolute;
-  top: 6px;
-  left: 4px;
+  top: 23px;
+  left: 20px;
   color: @grayLight;
 }
 
@@ -207,6 +208,11 @@ input.-full-width-input {
    height: 30px;
 }
 
+textarea.-full-width-textarea {
+    width: 100%;
+    box-sizing: border-box;
+}
+
 // Reset appearance properties for textual inputs and textarea
 // Declare width for legacy (can't be on input[type=*] selectors or it's too specific)
 input,

src/Umbraco.Web.UI.Client/src/less/pages/login.less

@@ -9,13 +9,41 @@
     color: @white;
     position: absolute;
     z-index: 10000;
-    top: 0px;
-    left: 0px;
-    margin: 0 !Important;
+    top: 0;
+    left: 0;
+    margin: 0 !important;
     padding: 0;
     border-radius: 0;
 }
 
+
+@media only screen and (-webkit-min-device-pixel-ratio: 1.5),
+       only screen and (min-resolution: 144dpi)
+{
+    .login-overlay {
+        background-image: url(../img/application/logo@2x.png) !important;
+    }
+}
+
+
+@media only screen and (-webkit-min-device-pixel-ratio: 2),
+       only screen and (min-resolution: 192dpi)
+{
+    .login-overlay {
+        background-image: url(../img/application/logo@2x.png) !important;
+    }
+}
+
+
+@media only screen and (-webkit-min-device-pixel-ratio: 3),
+       only screen and (min-resolution: 3dppx),
+       only screen and (min-resolution: 350dpi)
+{
+    .login-overlay {
+        background-image: url(../img/application/logo@3x.png) !important;
+    }
+}
+
 .login-overlay .umb-modalcolumn {
     background: none;
     border: none;
@@ -62,7 +90,7 @@
 }
 
 #hrOr hr {
-    margin: 0px;
+    margin: 0;
     border: none;
     background-color: @gray;
     height: 1px;

src/Umbraco.Web.UI.Client/src/less/panel.less

@@ -2,11 +2,11 @@
 // -------------------------
 .umb-panel {
     background: white;
-    position: absolute;
-    top: 0px;
-    bottom: 0px;
-    left: 0px;
-    right: 0px;
+    // position: absolute;
+    // top: 0px;
+    // bottom: 0px;
+    // left: 0px;
+    // right: 0px;
 }
 
 .umb-panel-nobody {
@@ -17,21 +17,21 @@
 .umb-panel-header {
     background: @grayLighter;
     border-bottom: 1px solid @grayLight;
-    position: absolute;
-    height: 99px;
-    top: 0px;
-    right: 0px;
-    left: 0px;
+    // position: absolute;
+    // height: 99px;
+    // top: 0px;
+    // right: 0px;
+    // left: 0px;
 }
 
 .umb-panel-body {
-    top: 101px;
-    left: 0px;
-    right: 0px;
-    bottom: 0px;
-    position: absolute;
-    clear: both;
-    overflow: auto;
+    // top: 101px;
+    // left: 0px;
+    // right: 0px;
+    // bottom: 0px;
+    // position: absolute;
+    // clear: both;
+    // overflow: auto;
 }
 
 .umb-panel-body.no-header {
@@ -356,7 +356,7 @@
 .umb-panel-header-content-wrapper {
   display: flex;
   flex-direction: column;
-  height: 100px;
+  // height: 100px;
   padding: 0 20px;
 }
 
@@ -366,15 +366,18 @@
   flex: 1;
 }
 
+/*
 .umb-panel-header-content.-top-position {
   position: relative;
   top: -12px;
 }
+*/
 
 .umb-panel-header-left-side {
    display: flex;
    flex: 1;
    flex-direction: row;
+   align-items: center;
 }
 
 .umb-panel-header-icon {
@@ -493,3 +496,71 @@ input.umb-panel-header-description {
 .umb-editor-drawer-content__left-side {
 	margin-right: auto;
 }
+
+
+
+// Large Search
+.large-search {
+    font-size: 18px;
+    padding-top: 20px;
+    padding-bottom: 10px;
+    border-bottom: 1px solid @grayLight;
+
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+}
+
+
+.large-search,
+.umb-tree.large-search-results {
+    width: 100%;
+    max-width: 960px;
+    min-width: auto;
+
+    margin: 0 auto;
+}
+
+.large-search .umb-search-field {
+    border-bottom: none;
+    font-size: 22px;
+    text-indent: 10px;
+    padding-left: 0 !important;
+    line-height: 60px;
+}
+
+.large-search .icon-search {
+    color: @black;
+    position: static;
+    font-size: 22px;
+}
+
+.umb-tree.large-search-results .umb-search-group-item-link {
+    padding: 10px 0;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    min-height: 60px;
+}
+
+.umb-tree.large-search-results .umb-search-group-item-info {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+
+    position: relative;
+    overflow: visible;
+}
+
+.umb-tree.large-search-results .umb-search-group-item-link .icon {
+    font-size: 24px;
+}
+
+.umb-tree.large-search-results .umb-search-group-item-name {
+    font-size: 16px;
+    font-weight: bold;
+}
+
+.umb-tree.large-search-results .search-subtitle {
+    padding-left: 0;
+}

src/Umbraco.Web.UI.Client/src/less/property-editors.less

@@ -196,7 +196,6 @@ ul.color-picker li a  {
     flex-wrap: wrap;
     padding: 2px;
     margin: 5px;
-    background: white;
     border: 1px solid #f8f8f8;
 }
 
@@ -275,11 +274,12 @@ ul.color-picker li a  {
 
 .umb-cropper{
   position: relative;
-  padding: 10px;
 }
 
 .umb-cropper img, .umb-cropper-gravity img{
-   position: absolute;
+   position: relative;
+   max-width: 100%;
+   height: auto;
    top: 0;
    left: 0;
  }
@@ -293,19 +293,22 @@ ul.color-picker li a  {
   left: 0;
   cursor: move;
   z-index: 6001;
+  position: absolute;
 }
 
 .umb-cropper .viewport{
     overflow: hidden;
     position: relative;
     margin: auto;
+    max-width: 100%;
+    height: auto;
  }
 
 .umb-cropper-gravity .viewport{
    overflow: hidden;
    position: relative;
-   width: 400px;
-   height: 300px
+   width: 100%;
+   height: 100%;
 }
 
 
@@ -335,27 +338,45 @@ ul.color-picker li a  {
   opacity: 0.8;
 }
 
-.umb-cropper-gravity .overlay i{
+.umb-cropper-gravity .overlay i {
   font-size: 26px;
   line-height: 26px;
   opacity: 0.8 !important;
 }
 
-.umb-cropper .crop-container{
+.umb-cropper .crop-container {
     text-align: center;
 }
 
-.umb-cropper .crop-slider{
-   vertical-align: middle;
-   padding: 10px 50px 10px 50px;
+.umb-cropper .crop-slider {
+   padding: 10px;
    border-top: 1px solid @grayLighter;
    margin-top: 10px;
+
+   display: flex;
+   align-items: center;
+   justify-content: center;
+
+   flex-wrap: wrap;
+
+   @media (min-width: 769px) {
+        padding: 10px 50px 10px 50px;
+   }
 }
 
-.umb-cropper .crop-slider i{color: @gray;}
-.umb-cropper .crop-slider input{
-   margin-top: 7px;
-   width: 320px;
+.umb-cropper .crop-slider i {
+    color: @gray;
+    flex: 0 0 25px;
+    padding: 0 5px;
+    box-sizing: border-box;
+}
+
+.umb-cropper .crop-slider i:first-of-type {
+    text-align: right;
+}
+
+.umb-cropper .crop-slider input {
+    flex: 0 1 auto;
 }
    .umb-cropper-gravity .viewport, .umb-cropper-gravity, .umb-cropper-imageholder {
         display: inline-block;
@@ -372,55 +393,98 @@ ul.color-picker li a  {
     }
 
     .gravity-container .viewport {
-        width: 494px;
+        max-width: 600px;
+    }
+
+    .gravity-container .viewport:hover {
+        cursor: pointer;
+    }
+
+    .imagecropper {
+        display: flex;
+        align-items: flex-start;
+        flex-direction: row;
+
+        @media (max-width: 768px) {
+            flex-direction: column;
+            float: left;
+            max-width: 100%;
+        }
+    }
+
+    .imagecropper .umb-cropper__container {
+        position: relative;
+        margin-bottom: 10px;
+        max-width: 100%;
+        border: 1px solid #f8f8f8;
+
+        @media (min-width: 769px) {
+            width: 600px;
+        }
+    }
+
+    .umb-close-cropper {
+        position: absolute;
+        top: 3px;
+        right: 3px;
+        cursor: pointer;
+    }
+
+    .umb-close-cropper:hover {
+        opacity: .9;
+        background: @grayLighter;
     }
 
     .imagecropper .umb-sortable-thumbnails {
-        border-left: 2px solid #f8f8f8;
-        margin-left: 4px;
-        padding-left: 2px;
-        float: left;
-        width: 100px;
+        display: flex;
+        flex-direction: row;
+        flex-wrap: wrap;
     }
 
     .imagecropper .umb-sortable-thumbnails li {
-        display: block;
-    }
+        display: flex;
+        flex-direction: column;
+        justify-content: space-between;
 
-    .imagecropper .umb-sortable-thumbnails li.current a, .imagecropper .umb-sortable-thumbnails li.current a:hover {
-        background: #eeeeee;
-        text-decoration: none;
-    }
-
-    .imagecropper .umb-sortable-thumbnails li:first-of-type {
+        padding: 8px;
         margin-top: 0;
-        padding-top: 0;
     }
 
-    .imagecropper .umb-sortable-thumbnails li .crop-name, .imagecropper .umb-sortable-thumbnails li .crop-size {
+    .imagecropper .umb-sortable-thumbnails li.current {
+        border-color: @grayLight;
+        background: @grayLighter;
+        color: @black;
+        cursor: pointer;
+    }
+
+    .imagecropper .umb-sortable-thumbnails li:hover,
+    .imagecropper .umb-sortable-thumbnails li.current:hover {
+        border-color: @grayLight;
+        background: @grayLighter;
+        color: @black;
+
+        cursor: pointer;
+
+        opacity: .95;
+    }
+
+    .imagecropper .umb-sortable-thumbnails li .crop-name,
+    .imagecropper .umb-sortable-thumbnails li .crop-size {
         display: block;
         text-align: left;
-        font-size: 11px;
+        font-size: 13px;
+        line-height: 1;
+    }
+
+    .imagecropper .umb-sortable-thumbnails li .crop-name {
+        font-weight: bold;
+        margin: 10px 0 5px;
     }
 
     .imagecropper .umb-sortable-thumbnails li .crop-size {
         font-size: 10px;
         font-style: italic;
-        color: #666;
-    }
-
-    .imagecropper .umb-sortable-thumbnails li a {
-        display: block;
-        padding: 5px;
-    }
-
-    .imagecropper .umb-sortable-thumbnails li a:hover {
-        background: #f8f8f8;
-        text-decoration: none;
-    }
-
-    .imagecropper .umb-sortable-thumbnails li a:hover .crop-text {
-        text-decoration: none;
+        margin: 0 0 5px;
     }
 
     .btn-crop-delete {
@@ -428,20 +492,6 @@ ul.color-picker li a  {
         text-align: left;
     }
 
-    .imagecropper .umb-sortable-thumbnails.many {
-        width: 210px;
-    }
-
-    .imagecropper .umb-sortable-thumbnails.many li {
-        width: 85px;
-        float: left;
-    }
-
-    .imagecropper .umb-sortable-thumbnails.many li:nth-child(2) {
-        margin-top: 0;
-        padding-top: 0;
-    }
-
 //
 // folder-browser
 // --------------------------------------------------

src/Umbraco.Web.UI.Client/src/less/sections.less

@@ -1,24 +1,38 @@
 // Sections
 // -------------------------
-
-ul.sections {
-	margin: 0;
-	display: block;
-	background: @blackLight;
-	height: 100%;
-	width: 80px;
-    border-right: 1px solid @grayDark;
+.umb-sections {
+	//margin: 0;
+	//display: block;
+	//background: @blackLight;
+	display: flex;
+	flex-direction: row;
+	flex-wrap: wrap;
+	//height: 100%;
+	//width: 80px;
+    //border-right: 1px solid @grayDark;
 }
 
-ul.sections li {
-	display: block;
-	border-left: 4px @blackLight solid;
-	-webkit-transition: all .3s linear;
-	-moz-transition: all .3s linear;
-	transition: all .3s linear;
+.umb-sections__section {
+	//border-left: 4px @blackLight solid;
+	//-webkit-transition: all .3s linear;
+	//-moz-transition: all .3s linear;
+	//transition: all .3s linear;
 }
 
-ul.sections li [class^="icon-"]:before, 
+.umb-sections__section:hover {
+	background: #E2E2E2;
+	text-decoration: none;
+}
+
+.umb-sections__section.-current,
+.umb-sections__section:focus {
+	outline: none;
+	text-decoration: none;
+	color: @blue;
+}
+
+/*
+ul.sections li [class^="icon-"]:before,
 ul.sections li [class*=" icon-"]:before{
 	font-size: 30px;
 	margin: 1px 0 0 0;
@@ -27,12 +41,15 @@ ul.sections li [class*=" icon-"]:before{
 	-moz-transition: all .3s linear;
 	transition: all .3s linear;
 }
+*/
 
-ul.sections:hover li [class^="icon-"]:before, 
+/*
+ul.sections:hover li [class^="icon-"]:before,
 ul.sections:hover li [class*=" icon-"]:before {
 	opacity: 1
 }
-
+*/
+/*
 ul.sections li a {
 	display: block;
 	text-decoration: none;
@@ -43,7 +60,7 @@ ul.sections li a {
 	width: 100%;
 	height: 100%;
 	margin: 0 0 0 -4px;
-    cursor: pointer; // make sure IE10 displays pointer cursor for expand and help sections. 
+    cursor: pointer; // make sure IE10 displays pointer cursor for expand and help sections.
 }
 
 ul.sections a span {
@@ -59,11 +76,12 @@ ul.sections a span {
 ul.sections:hover a span {
 	opacity: 1
 }
-
+*/
 
 // Avatar, Section & Help icons
 // -------------------------
 
+/*
 ul.sections li.avatar {
 	height: 75px;
 	padding: 22px 0 2px 0;
@@ -84,7 +102,8 @@ ul.sections li.avatar a img {
 	border-radius: 50%;
 	width: 30px;
 }
-
+*/
+/*
 .faded ul.sections li {
 	opacity: 0.4
 }
@@ -101,7 +120,7 @@ ul.sections li.current a{
     padding-left: 0px;
 }
 
-ul.sections li.help {	
+ul.sections li.help {
 	margin: 0;
 	position: absolute;
 	bottom: 0;
@@ -113,9 +132,11 @@ ul.sections li.help {
 ul.sections li.help a {
 	border-bottom: none;
 }
+*/
 
 // Section slide-out tray for additional apps
 // -------------------------
+
 li.expand a, li.expand{border: none !Important;}
 
 li.expand {
@@ -125,7 +146,7 @@ li.expand {
         -o-transition: all 1s !important;
         -moz-transition: all 1s !important;
         transition: all 1s !important;
-        
+
         &:before {
             -ms-transform: rotate(180deg) !important; /* IE 9 */
             -webkit-transform: rotate(180deg) !important; /* Chrome, Safari, Opera */
@@ -147,7 +168,7 @@ ul.sections-tray {
     & > li {
         // 5px (instead of 4px) because of vertical border
         border-left-width: 5px;
-        
+
         &.current, &:hover {
             border-left-width: 5px;
         }

src/Umbraco.Web.UI.Client/src/less/variables.less

@@ -7,6 +7,15 @@
 // --------------------------------------------------
 
 
+//
+// -------------------------
+
+@navigationBarHeight: 50px;
+@editorHeaderHeight: 80px;
+@editorFooterHeight: 50px;
+@editorSubViewHeaderHeight: 50px;
+
+
 // Grays
 // -------------------------
 @black:                 #000;

src/Umbraco.Web.UI.Client/src/views/common/dashboard.html

@@ -20,28 +20,36 @@
             hide-alias="true">
          </umb-editor-header>
 
+         <umb-editor-toolbar umb-tabs>
+             <umb-tabs-nav ng-if="dashboard.tabs" model="dashboard.tabs"></umb-tabs-nav>
+         </umb-editor-toolbar>
+
          <umb-editor-container>
 
-            <umb-tabs-content view="true">
-               <umb-tab id="tab{{tab.id}}" ng-repeat="tab in dashboard.tabs" rel="{{tab.id}}">
+             <div class="umb-editor-content">
 
-                  <div ng-repeat="property in tab.properties" ng-switch on="property.serverSide">
+                 <umb-tabs-content view="true">
+                    <umb-tab id="tab{{tab.id}}" ng-repeat="tab in dashboard.tabs" rel="{{tab.id}}">
 
-                     <div class="span12 clearfix" ng-switch-when="false">
-                        <h3 ng-show="property.caption">{{property.caption}}</h3>
-                        <div ng-include="property.path"></div>
-                     </div>
+                       <div ng-repeat="property in tab.properties" ng-switch on="property.serverSide">
 
-                     <div class="span12 umb-dashboard-control clearfix" ng-switch-when="true">
-                        <h3 ng-show="property.caption">{{property.caption}}</h3>
+                          <div ng-switch-when="false">
+                             <h3 ng-show="property.caption">{{property.caption}}</h3>
+                             <div ng-include="property.path"></div>
+                          </div>
 
-                        <iframe ng-src="dashboard/usercontrolproxy.aspx?ctrl={{ property.path}}"></iframe>
-                     </div>
+                          <div class="span12 umb-dashboard-control clearfix" ng-switch-when="true">
+                             <h3 ng-show="property.caption">{{property.caption}}</h3>
 
-                  </div>
+                             <iframe ng-src="dashboard/usercontrolproxy.aspx?ctrl={{ property.path}}"></iframe>
+                          </div>
 
-               </umb-tab>
-            </umb-tabs-content>
+                       </div>
+
+                    </umb-tab>
+                 </umb-tabs-content>
+
+             </div>
 
          </umb-editor-container>
 

src/Umbraco.Web.UI.Client/src/views/common/dialogs/iconpicker.html

@@ -2,55 +2,48 @@
 	<div class="umb-panel-header">
 		<div class="umb-el-wrap umb-panel-buttons">
 	        <div class="form-search">
-                <i class="icon-search"></i>	                    
+                <i class="icon-search"></i>
                 <input type="text"
-                	   style="width: 100%" 
-                       ng-model="searchTerm" 
-                       class="umb-search-field search-query input-block-level" 
+                	   style="width: 100%"
+                       ng-model="searchTerm"
+                       class="umb-search-field search-query input-block-level"
                        placeholder="Filter...">
             </div>
     	</div>
 	</div>
 
 	<div class="umb-panel-body with-footer">
-        
+
         <div class="umb-control-group">
         	<select ng-model="color" class="input-block-level">
         		<option value="">Black</option>
-        		<option value="color-green">Green</option>	
-        		<option value="color-yellow">Yellow</option>	
+        		<option value="color-green">Green</option>
+        		<option value="color-yellow">Yellow</option>
         		<option value="color-orange">Orange</option>
-        		<option value="color-blue">Blue</option>	
+        		<option value="color-blue">Blue</option>
         		<option value="color-red">Red</option>
         	</select>
-<!--
-        	<select class="input-block-level">
-        		<option value="">Black</option>
-        		<option value="color-green">Green</option>	
-        		<option value="color-blue">Turquoise</option>	
-        		<option value="color-purple">Purple</option>	
-        		<option value="color-red">Red</option>	
-        		<option value="color-orange">Orange</option>	
-        		<option value="color-sky-blue">Sky blue</option>	
-        		<option value="color-yellow">Yellow</option>		
-        	</select>-->
-
         </div>
 
-        <div class="umb-loader" ng-hide="icons"></div>
+        <umb-load-indicator ng-if="loading"></umb-load-indicator>
 
-        <div class="umb-control-group">
-	        <ul class="umb-thumbnails thumbnails" ng-class="color">
-		        <li class="span1" ng-repeat="icon in icons|filter: searchTerm">
-				    <a href="#" title="{{icon}}" class="thumbnail" ng-click="submitClass(icon)" prevent-default>
-						<i class="{{icon}} large" style="font-size: 32px"></i>
+        <div class="umb-control-group" ng-show="!loading">
+	        <ul class="umb-iconpicker" ng-class="color" ng-show="icons">
+		        <li class="umb-iconpicker-item" ng-repeat="icon in filtered = (icons | filter: searchTerm) track by $id(icon)">
+				    <a href="#" title="{{icon}}" ng-click="submitClass(icon)" prevent-default>
+						<i class="{{icon}} large"></i>
 		            </a>
 		        </li>
 		    </ul>
 		</div>
 
+		<umb-empty-state
+			ng-if="filtered.length === 0"
+			position="center">
+			<localize key="defaultdialogs_noIconsFound">No icons were found.</localize>
+		</umb-empty-state>
 	</div>
-	
+
 	<div class="umb-panel-footer" >
 		<div class="umb-el-wrap umb-panel-buttons">
 	        <div class="btn-toolbar umb-btn-toolbar pull-right">

src/Umbraco.Web.UI.Client/src/views/common/overlays/iconpicker/iconpicker.html

@@ -38,14 +38,19 @@
 
     <umb-load-indicator ng-if="loading"></umb-load-indicator>
 
-    <div class="umb-control-group" ng-show="!loading">
-        <ul class="umb-thumbnails thumbnails" ng-class="color">
-            <li class="span1" ng-repeat="icon in icons|filter: searchTerm">
-                <a href="#" title="{{icon}}" class="thumbnail" ng-click="selectIcon(icon, color)" prevent-default>
-                    <i class="{{icon}} large" style="font-size: 32px"></i>
+    <div class="umb-control-group" ng-show="!loading && filtered.length > 0 ">
+        <ul class="umb-iconpicker" ng-class="color" ng-show="icons">
+            <li class="umb-iconpicker-item" ng-repeat="icon in filtered = (icons | filter: searchTerm) track by $id(icon)">
+                <a href="#" title="{{icon}}" ng-click="selectIcon(icon, color)" prevent-default>
+                    <i class="{{icon}} large"></i>
                 </a>
             </li>
         </ul>
     </div>
 
+    <umb-empty-state
+        ng-if="filtered.length === 0"
+        position="center">
+        <localize key="defaultdialogs_noIconsFound">No icons were found.</localize>
+    </umb-empty-state>
 </div>

src/Umbraco.Web.UI.Client/src/views/common/overlays/search/search.controller.js

@@ -0,0 +1,132 @@
+(function() {
+    "use strict";
+
+    function SearchOverlay($scope, searchService, $log, $location, navigationService, $q) {
+
+
+        $scope.searchTerm = null;
+        $scope.searchResults = [];
+        $scope.isSearching = false;
+        $scope.selectedResult = -1;
+
+
+        $scope.navigateResults = function(ev) {
+            //38: up 40: down, 13: enter
+
+            switch (ev.keyCode) {
+                case 38:
+                    iterateResults(true);
+                    break;
+                case 40:
+                    iterateResults(false);
+                    break;
+                case 13:
+                    if ($scope.model.selectedItem) {
+                        $scope.selectItem($scope.model.selectedItem);
+                    }
+                    break;
+            }
+        };
+
+        $scope.selectItem = function(selectedItem) {
+            $scope.model.selectedItem = selectedItem;
+            $scope.model.submit($scope.model);
+        };
+
+
+        var group = undefined;
+        var groupIndex = -1;
+        var itemIndex = -1;
+        $scope.model.selectedItem = undefined;
+
+
+        function iterateResults(up) {
+            //default group
+            if (!group) {
+                group = $scope.groups[0];
+                groupIndex = 0;
+            }
+
+            if (up) {
+                if (itemIndex === 0) {
+                    if (groupIndex === 0) {
+                        gotoGroup($scope.groups.length - 1, true);
+                    } else {
+                        gotoGroup(groupIndex - 1, true);
+                    }
+                } else {
+                    gotoItem(itemIndex - 1);
+                }
+            } else {
+                if (itemIndex < group.results.length - 1) {
+                    gotoItem(itemIndex + 1);
+                } else {
+                    if (groupIndex === $scope.groups.length - 1) {
+                        gotoGroup(0);
+                    } else {
+                        gotoGroup(groupIndex + 1);
+                    }
+                }
+            }
+        }
+
+        function gotoGroup(index, up) {
+            groupIndex = index;
+            group = $scope.groups[groupIndex];
+
+            if (up) {
+                gotoItem(group.results.length - 1);
+            } else {
+                gotoItem(0);
+            }
+        }
+
+        function gotoItem(index) {
+            itemIndex = index;
+            $scope.model.selectedItem = group.results[itemIndex];
+        }
+
+        //used to cancel any request in progress if another one needs to take it's place
+        var canceler = null;
+
+        $scope.$watch("searchTerm", _.debounce(function(newVal, oldVal) {
+            $scope.$apply(function() {
+                if ($scope.searchTerm) {
+                    if (newVal !== null && newVal !== undefined && newVal !== oldVal) {
+                        $scope.isSearching = true;
+                        //navigationService.showSearch();
+                        $scope.model.selectedItem = undefined;
+
+                        //a canceler exists, so perform the cancelation operation and reset
+                        if (canceler) {
+                            console.log("CANCELED!");
+                            canceler.resolve();
+                            canceler = $q.defer();
+                        } else {
+                            canceler = $q.defer();
+                        }
+
+                        searchService.searchAll({
+                            term: $scope.searchTerm,
+                            canceler: canceler
+                        }).then(function(result) {
+                            $scope.groups = _.filter(result, function(group) {
+                                return group.results.length > 0;
+                            });
+                            //set back to null so it can be re-created
+                            canceler = null;
+                        });
+                    }
+                } else {
+                    $scope.isSearching = false;
+                    //navigationService.hideSearch();
+                    $scope.model.selectedItem = undefined;
+                }
+            });
+        }, 200));
+
+    }
+
+    angular.module("umbraco").controller("Umbraco.Overlays.SearchOverlay", SearchOverlay);
+
+})();

src/Umbraco.Web.UI.Client/src/views/common/overlays/search/search.html

@@ -0,0 +1,50 @@
+<div ng-controller="Umbraco.Overlays.SearchOverlay">
+
+    <!-- Search form -->
+    <form class="form-search large-search" novalidate>
+        <i class="icon-search"></i>
+        <input type="text"
+            id="search-field"
+            ng-model="searchTerm"
+            class="umb-search-field search-query search-input"
+            localize="placeholder"
+            placeholder="@placeholders_search"
+            ng-keydown="navigateResults($event)"
+            umb-auto-focus
+            autocomplete="off" />
+    </form>
+
+    <!-- Search results --->
+    <ul class="umb-tree large-search-results">
+        <li class="root">
+            <div>
+                <h5 class="umb-tree-header"><localize key="general_searchResults">Search results</localize></h5>
+            </div>
+
+            <ul class="umb-search-group" ng-repeat="group in groups">
+                <li ng-repeat="result in group.results" ng-class="{'current':model.selectedItem == result}">
+                    <div class="umb-search-group-item">
+                        <a class="umb-search-group-item-link" ng-class="{'first':$first}" ng-click="selectItem(result)">
+
+                            <i class="icon umb-tree-icon sprTree {{result.icon}}"></i>
+
+                            <div class="umb-search-group-item-info">
+                                <div class="umb-search-group-item-name">
+                                    {{result.name}}
+                                </div>
+
+                                <small class="search-subtitle" ng-show="result.subTitle">
+                                    {{result.subTitle}}
+                                </small>
+                            </div>
+
+                        </a>
+
+                    </div>
+                </li>
+            </ul>
+
+        </li>
+    </ul>
+
+</div>

src/Umbraco.Web.UI.Client/src/views/components/application/umb-navigation.html

@@ -1,104 +1,66 @@
-<div id="leftcolumn" ng-controller="Umbraco.NavigationController"
-    ng-mouseleave="leaveTree($event)" ng-mouseenter="enterTree($event)">
+<div
+    class="umb-navigation"
+    ng-controller="Umbraco.NavigationController"
+    ng-mouseleave="leaveTree($event)"
+    ng-mouseenter="enterTree($event)">
 
-    <umb-sections sections="sections" ng-if="authenticated">
-    </umb-sections>
+    <div  class="umb-toggle-tree"
+          ng-click="showTree()"
+          ng-class="{'-open':showTreeNavigation}">
 
-    <!-- navigation container -->
-    <div id="navigation" ng-show="showNavigation" class="fill umb-modalcolumn" ng-animate="'slide'" nav-resize>
-
-        <div ng-swipe-left="nav.hideNavigation()" class="navigation-inner-container span6">
-
-            <!-- the search -->
-            <div ng-controller="Umbraco.SearchController" ng-if="authenticated">
-
-                <!-- Search form -->
-                <div id="search-form">
-                    <div class="umb-modalcolumn-header">
-
-                        <form class="form-search" novalidate>
-                            <i class="icon-search"></i>
-                            <input type="text"
-                                hotkey="ctrl+space"
-                                id="search-field"
-                                ng-model="searchTerm"
-                                class="umb-search-field search-query search-input"
-                                localize="placeholder"
-                                placeholder="@placeholders_search"
-                                ng-keydown="navigateResults($event)"/>
-                        </form>
-                    </div>
-                </div>
-
-                <!-- Search results -->
-                <div id="search-results" class="umb-modalcolumn-body" ng-show="showSearchResults">
-
-                    <ul class="umb-tree">
-                        <li class="root">
-                            <div>
-                                <h5 class="umb-tree-header"><localize key="general_searchResults">Search results</localize></h5>
-                            </div>
-
-                            <ul class="umb-search-group" ng-repeat="group in groups">
-                                <li ng-repeat="result in group.results" ng-class="{'current':selectedItem == result}">
-                                    <div class="umb-search-group-item">
-                                        <a class="umb-search-group-item-link" ng-class="{'first':$first}" ng-click="searchHide()" ng-href="#/{{result.editorPath}}">
-
-                                            <div class="umb-search-group-item-name">
-                                                <i class="icon umb-tree-icon sprTree {{result.icon}}"></i>
-                                                {{result.name}}
-                                            </div>
-
-                                            <small class="search-subtitle" ng-show="result.subTitle">
-                                                {{result.subTitle}}
-                                            </small>
-                                        </a>
-
-                                        <a href ng-click="searchShowMenu($event, {node: result})" class="umb-options"><i></i><i></i><i></i></a>
-                                    </div>
-                                </li>
-                            </ul>
-
-                        </li>
-                    </ul>
-                </div>
-
-            </div>
-
-            <!-- the tree -->
-            <div id="tree" class="umb-modalcolumn-body" ng-if="authenticated">
-                <umb-tree
-                    cachekey="_"
-                    eventhandler="treeEventHandler"
-                    section="{{currentSection}}" >
-                </umb-tree>
-            </div>
-        </div>
-
-        <div class="offset6" id="navOffset" style="z-index: 10">
-
-            <!-- The context menu -->
-            <div id='contextMenu' class="umb-modalcolumn fill shadow" ng-swipe-left="nav.hideMenu()" ng-show="showContextMenu" ng-animate="'slide'">
-                <umb-context-menu
-                    menu-dialog-title="{{menuDialogTitle}}"
-                    current-section="{{currentSection}}"
-                    current-node="menuNode"
-                    menu-actions="menuActions">
-                </umb-context-menu>
-            </div>
-
-
-            <!-- Tree dialogs -->
-            <div id="dialog" class='umb-modalcolumn fill shadow'
-                ng-swipe-left="nav.hideDialog()"
-                ng-show="showContextMenuDialog" ng-animate="'slide'">
-                <div class='umb-modalcolumn-header'>
-                    <h1>{{menuDialogTitle}}</h1>
-                </div>
-                <div class='umb-modalcolumn-body'>
-                </div>
-            </div>
-        </div>
+        <div class="umb-toggle-icon"></div>
     </div>
 
+    <umb-sections
+        ng-if="authenticated"
+        sections="sections">
+    </umb-sections>
+
+    <div class="umb-navigation__right">
+
+        <div class="search">
+            <a class="umb-navigation-link" href class="help" hotkey="ctrl+shift+s" ng-click="searchClick()" prevent-default>
+                <span>Search</span>
+            </a>
+        </div>
+
+        <div class="help">
+            <a class="umb-navigation-link" href class="help" hotkey="ctrl+shift+h" ng-click="helpClick()" prevent-default>
+                <span><localize key="sections_help">Help</localize></span>
+            </a>
+        </div>
+
+        <div>
+            <a class="umb-navigation-link" href="#" ng-click="avatarClick()" hotkey="ctrl+shift+u" title="{{user.name}}" prevent-default>
+                <span>{{user.name}}</span>
+                <img id="avatar-img" ng-src="{{avatar[0].value}}" ng-srcset="{{avatar[1].value}} 2x, {{avatar[2].value}} 3x" />
+            </a>
+        </div>
+
+    </div>
+
+
+    <!-- navigation container -->
+
+    <umb-overlay
+        ng-if="searchOverlay.show"
+        model="searchOverlay"
+        view="searchOverlay.view"
+        position="full">
+    </umb-overlay>
+
+    <umb-overlay
+      ng-if="helpDialog.show"
+      model="helpDialog"
+      view="helpDialog.view"
+      position="right">
+    </umb-overlay>
+
+    <umb-overlay
+      ng-if="userDialog.show"
+      model="userDialog"
+      view="userDialog.view"
+      position="right">
+    </umb-overlay>
+
 </div>

src/Umbraco.Web.UI.Client/src/views/components/application/umb-sections.html

@@ -1,62 +1,45 @@
-<div>
-    <div id="applications" ng-class="{faded:stickyNavigation}"> 
-        <ul class="sections">
-            <li class="avatar">
-                <a href="#" ng-click="avatarClick()" hotkey="ctrl+shift+u" title="{{user.name}}" prevent-default>
-                    <img id="avatar-img" ng-src="{{avatar[0].value}}" ng-srcset="{{avatar[1].value}} 2x, {{avatar[2].value}} 3x" />
-                </a>
-            </li>
-            <li ng-repeat="section in sections | limitTo: maxSections" ng-class="{current: section.alias == currentSection}">
-                <a href="#/{{section.alias}}"
-                   ng-dblclick="sectionDblClick(section)"
-                   ng-click="sectionClick($event, section)"
-                   prevent-default>
-                    <section-icon icon="{{section.cssclass}}"></section-icon>  
-                    <span>{{section.name}}</span>
-                </a>
-            </li>
-            
-            <li class="expand" ng-class="{ 'open': showTray === true }" ng-show="needTray">
-                <a href ng-click="trayClick()">
-                    <i class="icon icon-arrow-right"></i>
-                </a>
-            </li>
-
-            <li class="help">
-                <a href class="help" hotkey="ctrl+shift+h" ng-click="helpClick()" prevent-default>
-                    <i class="icon-help-alt"></i>
-                    <span><localize key="sections_help">Help</localize></span>
-                </a>
-            </li>
-        </ul>
-    </div>
-
-    <div id="applications-tray" ng-show="showTray" ng-animate="trayAnimation()">
-        <ul class="sections sections-tray">
-            <li ng-repeat="section in sections | limitTo: overflowingSections" ng-class="{current: section.alias == currentSection}">
-                <a href="#/{{section.alias}}"
-                   ng-dblclick="sectionDblClick(section)"
-                   ng-click="sectionClick($event, section)"
-                   prevent-default>
-                    <section-icon icon="{{section.cssclass}}"></section-icon>
-                    <span>{{section.name}}</span>
-                </a>
-            </li>
-        </ul>
-    </div>
-
-    <umb-overlay
-      ng-if="helpDialog.show"
-      model="helpDialog"
-      view="helpDialog.view"
-      position="left">
-    </umb-overlay>
-
-    <umb-overlay
-      ng-if="userDialog.show"
-      model="userDialog"
-      view="userDialog.view"
-      position="left">
-    </umb-overlay>
-
-</div>
+<div>
+    <nav class="umb-sections">
+
+        <a
+            class="umb-navigation-link"
+            href="#/{{section.alias}}"
+            ng-repeat="section in sections | limitTo: maxSections"
+            ng-class="{'-current': section.alias == currentSection}"
+            ng-dblclick="sectionDblClick(section)"
+            ng-click="sectionClick($event, section)"
+            prevent-default>
+            <span class="umb-sections__section-name">{{section.name}}</span>
+        </a>
+
+        <span  class="umb-navigation-link expand"
+            ng-class="{ 'open': showTray === true }"
+            ng-show="needTray"
+            href ng-click="trayClick()">
+
+            <svg class="umb-navigation-more" viewBox="0 0 24 6" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+                <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+                    <path class="umb-navigation-more__path" d="M2.76923077,5.53846154 C4.29863469,5.53846154 5.53846154,4.29863469 5.53846154,2.76923077 C5.53846154,1.23982685 4.29863469,0 2.76923077,0 C1.23982685,0 0,1.23982685 0,2.76923077 C0,4.29863469 1.23982685,5.53846154 2.76923077,5.53846154 Z M12,5.53846154 C13.5294039,5.53846154 14.7692308,4.29863469 14.7692308,2.76923077 C14.7692308,1.23982685 13.5294039,0 12,0 C10.4705961,0 9.23076923,1.23982685 9.23076923,2.76923077 C9.23076923,4.29863469 10.4705961,5.53846154 12,5.53846154 Z M21.2307692,5.53846154 C22.7601732,5.53846154 24,4.29863469 24,2.76923077 C24,1.23982685 22.7601732,0 21.2307692,0 C19.7013653,0 18.4615385,1.23982685 18.4615385,2.76923077 C18.4615385,4.29863469 19.7013653,5.53846154 21.2307692,5.53846154 Z"></path>
+                </g>
+            </svg>
+
+            <div class="umb-sections__tray shadow-depth-2"
+                ng-show="showTray">
+
+                <a class="umb-navigation-link"
+                   ng-repeat="section in sections | limitTo: overflowingSections"
+                   ng-class="{'-current': section.alias == currentSection}"
+                   href="#/{{section.alias}}"
+                   ng-dblclick="sectionDblClick(section)"
+                   ng-click="sectionClick($event, section)"
+                   prevent-default>
+
+                    <span>{{section.name}}</span>
+                </a>
+
+            </div>
+        </span>
+
+    </nav>
+
+</div>

src/Umbraco.Web.UI.Client/src/views/components/application/umb-tree-navigation.html

@@ -0,0 +1,74 @@
+<div class="umb-tree-navigation" ng-show="showTreeNavigation">
+
+    <!-- the search
+    <div ng-controller="Umbraco.SearchController" ng-if="authenticated">
+    -->
+
+        <!-- Search form
+        <form class="form-search" novalidate>
+            <i class="icon-search"></i>
+            <input type="text"
+                hotkey="ctrl+space"
+                id="search-field"
+                ng-model="searchTerm"
+                class="umb-search-field search-query search-input"
+                localize="placeholder"
+                placeholder="@placeholders_search"
+                ng-keydown="navigateResults($event)"/>
+        </form>
+        -->
+
+        <!-- Search results
+        <div ng-show="showSearchResults">
+
+            <ul class="umb-tree">
+                <li class="root">
+                    <div>
+                        <h5 class="umb-tree-header"><localize key="general_searchResults">Search results</localize></h5>
+                    </div>
+
+                    <ul class="umb-search-group" ng-repeat="group in groups">
+                        <li ng-repeat="result in group.results" ng-class="{'current':selectedItem == result}">
+                            <div class="umb-search-group-item">
+                                <a class="umb-search-group-item-link" ng-class="{'first':$first}" ng-click="searchHide()" ng-href="#/{{result.editorPath}}">
+
+                                    <div class="umb-search-group-item-name">
+                                        <i class="icon umb-tree-icon sprTree {{result.icon}}"></i>
+                                        {{result.name}}
+                                    </div>
+
+                                    <small class="search-subtitle" ng-show="result.subTitle">
+                                        {{result.subTitle}}
+                                    </small>
+                                </a>
+
+                                <a href ng-click="searchShowMenu($event, {node: result})" class="umb-options"><i></i><i></i><i></i></a>
+                            </div>
+                        </li>
+                    </ul>
+
+                </li>
+            </ul>
+        </div>
+        -->
+    <!--
+    </div>
+    --->
+
+    <!--
+    <div ng-show="!showSearchResults">
+        <umb-tree
+            cachekey="_"
+            eventhandler="treeEventHandler"
+            section="{{currentSection}}" >
+        </umb-tree>
+    </div>
+    --->
+
+    <umb-tree
+        cachekey="_"
+        eventhandler="treeEventHandler"
+        section="{{currentSection}}" >
+    </umb-tree>
+
+</div>

src/Umbraco.Web.UI.Client/src/views/components/editor/subview/umb-editor-sub-view-container.html

@@ -0,0 +1 @@
+<div class="umb-editor-sub-view-container" ng-transclude></div>

src/Umbraco.Web.UI.Client/src/views/components/editor/subview/umb-editor-sub-view-content.html

@@ -0,0 +1 @@
+<div class="umb-editor-sub-view-content" ng-transclude></div>

src/Umbraco.Web.UI.Client/src/views/components/editor/subview/umb-editor-sub-view-header.html

@@ -0,0 +1 @@
+<div class="umb-editor-sub-view-header" ng-transclude></div>

src/Umbraco.Web.UI.Client/src/views/components/editor/subview/umb-editor-sub-view-sidebar.html

@@ -0,0 +1 @@
+<div class="umb-editor-sub-view-sidebar" ng-transclude></div>

src/Umbraco.Web.UI.Client/src/views/components/editor/subview/umb-editor-sub-view.html

@@ -0,0 +1 @@
+<div class="umb-editor-sub-view" ng-transclude></div>

src/Umbraco.Web.UI.Client/src/views/components/editor/umb-editor-container.html

@@ -1,6 +1,8 @@
- <div class="umb-editor-container umb-panel-body umb-scrollable row-fluid" ng-class="{'-stop-scrolling': numberOfOverlays > 0}">
-     <umb-overlay-backdrop></umb-overlay-backdrop>
-     <div class="umb-pane">
-        <div ng-transclude></div>
-     </div>
- </div>
+<div
+    class="umb-editor-container"
+    ng-class="{'-stop-scrolling': numberOfOverlays > 0}"
+    ng-transclude>
+    <!--
+    <umb-overlay-backdrop></umb-overlay-backdrop>
+    -->
+</div>

src/Umbraco.Web.UI.Client/src/views/components/editor/umb-editor-header.html

@@ -1,4 +1,4 @@
-<div class="umb-panel-header">
+<div class="umb-editor-header">
 
     <div class="umb-panel-header-content-wrapper">
 
@@ -15,6 +15,10 @@
 
                <div class="umb-panel-header-title-wrapper">
 
+                   <!--
+                   <div class="umb-editor-header__published-state"></div>
+                   --->
+
                    <ng-form name="headerNameForm">
                        <input
                         type="text"
@@ -25,16 +29,74 @@
                         ng-show="!nameLocked"
                         ng-model="name"
                         ng-class="{'name-is-empty': $parent.name===null || $parent.name===''}"
+                        ng-disabled="variation"
                         umb-auto-focus
+                        autocomplete="off"
                         required />
+
+                        <div class="umb-editor-header__selected-variations" ng-if="language || variation">
+
+                            <div class="umb-editor-header__selected-variation" ng-if="language && variations.length > 1">
+                                <i class="umb-editor-header__selected-variation-icon icon-umb-translation"></i>
+                                <div>{{ language }}</div>
+                            </div>
+
+                            <div class="umb-editor-header__selected-variation" ng-if="variation">
+                                <i class="umb-editor-header__selected-variation-icon icon-documents"></i>
+                                <div>{{ variation }}</div>
+                            </div>
+
+                        </div>
+
                    </ng-form>
 
+                   <a class="umb-variations-quick-switcher__toggle" href="" ng-if="showVariationsQuickSwitchToggle" ng-click="toggleVariationsQuickSwitch()" ng-class="{'-active' : showVariationsQuickSwitch}">
+                       <span class="umb-variations-quick-switcher__toggle-arrow">&dtrif;</span>
+                   </a>
+
+                   <ul class="umb-variations-quick-switcher_variations shadow-depth-2" ng-if="showVariationsQuickSwitch" on-outside-click="hideVariationsQuickSwitch()">
+
+                       <!-- Multiple languages -->
+                       <li ng-repeat="variation in variations" ng-class="{'-active' : variation.showSubItems}">
+
+                           <a class="umb-variations-quick-switcher__variation" href ng-if="variations.length === 1" ng-click="selectItem(variation)" ng-class="{'-active': variation.active}">
+                               <span class="umb-variations-quick-switcher__variation-published-state" ng-class="{'-published': variation.published}"></span>
+                               <span class="umb-variations-quick-switcher__variation-name">{{variation.name}}</span>
+                               <span class="umb-variations-quick-switcher__variation-description">(Original)</span>
+                           </a>
+
+                           <a class="umb-variations-quick-switcher__variation" href ng-if="variations.length > 1" ng-click="selectItem(variation)" ng-class="{'-active': variation.active}">
+                               <span class="umb-variations-quick-switcher__variation-published-state" ng-class="{'-published': variation.published}"></span>
+                               <i class="umb-variations-quick-switcher__variation-icon icon-umb-translation"></i>
+                               <span class="umb-variations-quick-switcher__variation-name">{{variation.language}}</span>
+                               <!--
+                               <span class="umb-variations-quick-switcher__variation-toggle" ng-if="variation.variations" ng-click="toggleSubItems(variation, $event)">variations &dtrif;</span>
+                               --->
+                               <span class="umb-variations-quick-switcher__variation-toggle" ng-if="onOpenInSplitView && !variation.active" ng-click="openInSplitView(variation, $event)">Open in splitview</span>
+                           </a>
+
+                           <ul class="umb-variations-quick-switcher__subnav">
+                               <li ng-repeat="test in variation.variations">
+                                   <a class="umb-variations-quick-switcher__variation" href ng-click="selectItem(test)" ng-class="{'-active': test.active}">
+                                       <span class="umb-variations-quick-switcher__variation-published-state" ng-class="{'-published': test.published}"></span>
+                                       <i class="umb-variations-quick-switcher__variation-icon icon-documents"></i>
+                                       <span class="umb-variations-quick-switcher__variation-name">{{ test.variationName }}</span>
+                                       <span class="umb-variations-quick-switcher__variation-description" ng-if="test.variationDescription">({{ test.variationDescription }})</span>
+                                       <span class="umb-variations-quick-switcher__variation-toggle" ng-if="onOpenInSplitView && !test.active" ng-click="openInSplitView(test, $event)">Open in splitview</span>
+                                   </a>
+                               </li>
+                           </ul>
+
+                       </li>
+
+                   </ul>
+
                   <div class="umb-panel-header-name" ng-if="nameLocked">{{ name }}</div>
 
-                  <umb-generate-alias class="umb-panel-header-alias" 
-                                      ng-if="!hideAlias" 
-                                      alias="$parent.alias" 
-                                      alias-from="$parent.name" 
+                  <umb-generate-alias class="umb-panel-header-alias"
+                                      ng-if="!hideAlias"
+                                      alias="$parent.alias"
+                                      alias-from="$parent.name"
                                       enable-lock="true"
                                       server-validation-field="Alias"></umb-generate-alias>
 
@@ -55,7 +117,7 @@
 
         </div>
 
-        <umb-tabs-nav ng-if="tabs" model="tabs"></umb-tabs-nav>
+        <!-- <umb-tabs-nav ng-if="tabs" model="tabs"></umb-tabs-nav> -->
 
     </div>
 

src/Umbraco.Web.UI.Client/src/views/components/editor/umb-editor-navigation.html

@@ -1,15 +1,37 @@
 <div>
-  <ul class="umb-sub-views-nav" ng-if="showNavigation">
-      <li ng-repeat="item in navigation">
-         <a tabindex="-1"
-         class="umb-sub-views-nav-item"
-         href=""
-         ng-click="clickNavigationItem(item)"
-         hotkey="{{$index+1}}"
-         ng-class="{'is-active': item.active, '-has-error': item.hasError}">
-            <i class="icon {{ item.icon }}"></i>
-            <span class="umb-sub-views-nav-item-text">{{ item.name }}</span>
-         </a>
-      </li>
-  </ul>
+    <ul class="umb-sub-views-nav" ng-if="showNavigation">
+
+        <li ng-repeat="item in navigation | limitTo: maxNavigationItems" class="umb-sub-views-nav-items">
+            <a tabindex="-1" class="umb-sub-views-nav-item" href="" ng-click="clickNavigationItem(item)" hotkey="{{$index+1}}" ng-class="{'is-active': item.active, '-has-error': item.hasError}">
+                <i class="icon {{ item.icon }}"></i>
+                <span class="umb-sub-views-nav-item-text">{{ item.name }}</span>
+            </a>
+        </li>
+
+        <li class="umb-sub-views-nav-items" ng-if="needDropdown" ng-click="toggleDropdown()">
+            <a href="" class="umb-sub-views-nav-item">
+                <svg class="umb-navigation-more" viewBox="0 0 24 6" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+                    <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+                        <path class="umb-navigation-more__path" d="M2.76923077,5.53846154 C4.29863469,5.53846154 5.53846154,4.29863469 5.53846154,2.76923077 C5.53846154,1.23982685 4.29863469,0 2.76923077,0 C1.23982685,0 0,1.23982685 0,2.76923077 C0,4.29863469 1.23982685,5.53846154 2.76923077,5.53846154 Z M12,5.53846154 C13.5294039,5.53846154 14.7692308,4.29863469 14.7692308,2.76923077 C14.7692308,1.23982685 13.5294039,0 12,0 C10.4705961,0 9.23076923,1.23982685 9.23076923,2.76923077 C9.23076923,4.29863469 10.4705961,5.53846154 12,5.53846154 Z M21.2307692,5.53846154 C22.7601732,5.53846154 24,4.29863469 24,2.76923077 C24,1.23982685 22.7601732,0 21.2307692,0 C19.7013653,0 18.4615385,1.23982685 18.4615385,2.76923077 C18.4615385,4.29863469 19.7013653,5.53846154 21.2307692,5.53846154 Z"></path>
+                    </g>
+                </svg>
+                <span class="umb-sub-views-nav-item-text">More</span>
+            </a>
+        </li>
+
+    </ul>
+
+    <div class="umb-sub-views-nav__dropdown shadow-depth-2" ng-if="showDropdown" on-outside-click="closeDropdown()">
+
+        <ul class="umb-sub-views-nav">
+            <li ng-repeat="item in navigation | limitTo: overflowingNavigationsItems" class="umb-sub-views-nav-items">
+                <a tabindex="-1" class="umb-sub-views-nav-item" href="" ng-click="clickNavigationItem(item)" hotkey="{{$index+1}}" ng-class="{'is-active': item.active, '-has-error': item.hasError}">
+                    <i class="icon {{ item.icon }}"></i>
+                    <span class="umb-sub-views-nav-item-text">{{ item.name }}</span>
+                </a>
+            </li>
+        </ul>
+
+    </div>
+
 </div>

src/Umbraco.Web.UI.Client/src/views/components/editor/umb-editor-sub-views.html

@@ -3,7 +3,7 @@
        id="sub-view-{{$index}}"
        ng-repeat="subView in subViews"
        ng-include="subView.view"
-       ng-show="activeView.name == subView.name"
+       ng-show="subView.active"
        ng-class="'sub-view-' + subView.name"
        val-sub-view>
     </div>

src/Umbraco.Web.UI.Client/src/views/components/editor/umb-editor-toolbar.html

@@ -0,0 +1 @@
+<div class="umb-editor-toolbar" ng-transclude></div>

src/Umbraco.Web.UI.Client/src/views/components/editor/umb-editor-view.html

@@ -1,4 +1,4 @@
-<div class="umb-panel umb-editor-wrapper animated -half-second fadeIn"
+<div class="umb-panel umb-editor-wrapper"
     ng-class="{
         '-no-footer': footer === 'false'
     }"

src/Umbraco.Web.UI.Client/src/views/components/imaging/umb-image-gravity.html

@@ -1,12 +1,12 @@
 <div class="umb-cropper-gravity">
-	<div class="gravity-container">
+	<div class="gravity-container" ng-show="loaded">
 		<div class="viewport">
-			<img ng-src="{{src}}" style="max-width: 100%; max-height: 100%" />
+			<img ng-src="{{src}}" style="max-width: 100%; max-height: 100%" ng-click="setFocalPoint($event)" draggable="false" />
 
 			<div class="overlay" ng-style="style()">
-				
+
 			</div>
-			
+
 		</div>
 	</div>
-</div>
+</div>

src/Umbraco.Web.UI.Client/src/views/components/imaging/umb-image-thumbnail.html

@@ -1,4 +1,5 @@
-<div class="umb-crop-thumbnail-container" 
-	ng-style="{height: height, width: width, overflow: 'hidden', position: 'relative'}">
+<div class="umb-crop-thumbnail-container"
+	ng-style="{height: height, width: width, overflow: 'hidden', position: 'relative'}"
+	ng-show="loaded">
 	<img ng-src="{{src}}" alt="{{}}" ng-style="preview" class="noScale" />
-</div>
+</div>

src/Umbraco.Web.UI.Client/src/views/components/overlays/umb-overlay.html

@@ -1,5 +1,5 @@
 <div class="umb-overlay umb-overlay-{{position}}" on-outside-click="closeOverLay()">
-    <form class="umb-overlay__form" name="overlayForm" ng-submit="submitForm(model)" novalidate val-form-manager>
+    <ng-form class="umb-overlay__form" name="overlayForm" novalidate val-form-manager>
 
         <div class="umb-overlay-header">
             <h4 class="umb-overlay__title">{{model.title}}</h4>
@@ -44,8 +44,9 @@
                     <umb-button
                         button-style="success"
                         label="Confirm"
-                        type="submit"
-                        disabled="!directive.enableConfirmButton">
+                        type="button"
+                        disabled="!directive.enableConfirmButton"
+                        action="submitForm(model)">
                     </umb-button>
                 </div>
             </div>
@@ -64,10 +65,11 @@
                     label-key="{{model.submitButtonLabelKey}}"
                     label="{{model.submitButtonLabel}}"
                     ng-if="model.submit && model.hideSubmitButton !== true"
-                    type="submit">
+                    type="button"
+                    action="submitForm(model)">
                 </umb-button>
             </div>
 
         </div>
-    </form>
+    </ng-form>
 </div>

src/Umbraco.Web.UI.Client/src/views/components/property/umb-property-editor.html

@@ -1,3 +1,8 @@
 <div class="umb-property-editor" ng-class="{'-not-clickable': preview}">
+    <!--
+    <div class="umb-property-editor__overlay" ng-if="model.variation">
+        <div class="umb-property-editor__overlay-label">Gets content from {{model.variation.name}}</div>
+    </div>
+    --->
     <div ng-include="propertyEditorView"></div>
 </div>

src/Umbraco.Web.UI.Client/src/views/components/property/umb-property.html

@@ -1,14 +1,46 @@
 <div class="umb-property">
     <ng-form name="propertyForm">
         <div class="control-group umb-control-group" ng-class="{hidelabel:property.hideLabel}" >
-            
+
             <val-property-msg property="property"></val-property-msg>
-            
+
             <div class="umb-el-wrap">
-                
+
                 <label class="control-label" ng-hide="property.hideLabel" for="{{property.alias}}" ng-attr-title="{{propertyAlias}}">
                     {{property.label}}
-                    <small ng-bind-html="property.description"></small>
+
+                    <small ng-if="property.description" ng-bind-html="property.description"></small>
+
+                    <!--
+                    <div class="umb-property-editor__dropdown-toggling" ng-class="{'-active' : showDropdown}">
+
+                        <div class="umb-property-editor__dropdown-toggle" ng-click="toggleDropdown()">
+                            <div ng-if="property.variation"><i class="icon-sync"></i>from {{ property.variation.name }} &dtrif;</div>
+                            <div ng-if="!property.variation"><i class="icon-sync"></i>from &dtrif;</div>
+                        </div>
+
+                        <div class="umb-property-editor__dropdown shadow-depth-2" ng-if="showDropdown" on-outside-click="closeDropdown()">
+
+                            <div class="umb-property-editor__dropdown-item">
+                                <a class="umb-property-editor__dropdown-link -sync-off" ng-click="editContent()" href="">
+                                    <i class="icon-sync"></i>Off
+                                </a>
+                            </div>
+                            <div class="umb-property-editor__dropdown-filter" ng-if="variations.length > 9">
+                                <input type="search"class="-full-width-input" placeholder="Search for variants" ng-model="searchTerm" umb-auto-focus>
+                            </div>
+
+                            <ul class="umb-property-editor__dropdown-items">
+
+                                <li class="umb-property-editor__dropdown-item" ng-repeat="variation in variations | filter:searchTerm">
+                                    <a class="umb-property-editor__dropdown-link" ng-click="syncContent(variation)" href="">{{ variation.name }}</a>
+                                </li>
+                            </ul>
+                        </div>
+
+                    </div>
+                    --->
+
                 </label>
 
                 <div class="controls" ng-transclude>
@@ -16,4 +48,4 @@
             </div>
         </div>
     </ng-form>
-</div>
+</div>

src/Umbraco.Web.UI.Client/src/views/components/tabs/umb-tabs-nav.html

@@ -1,5 +1,5 @@
-<ul class="nav nav-tabs umb-nav-tabs">
-  <li ng-class="{'tab-error': tabHasError}" ng-repeat="tab in model" val-tab>
-    <a data-toggle="tab" href="#tab{{tab.id}}">{{ tab.label }}</a>
-  </li>
+<ul class="umb-tabs-nav">
+    <li class="umb-tabs-nav__tab" ng-class="{'tab-error': tabHasError}" ng-repeat="tab in model" val-tab>
+        <a data-toggle="tab" href="#tab{{tab.id}}">{{ tab.label }}</a>
+    </li>
 </ul>

src/Umbraco.Web.UI.Client/src/views/components/umb-keyboard-shortcuts-overview.html

@@ -19,8 +19,8 @@
 
   <div class="umb-keyboard-shortcuts-overview__overlay" ng-if="shortcutOverlay">
 
-    <a href="" ng-click="toggleShortcutsOverlay()" data-hotkey="esc">
-      <i class="umb-keyboard-shortcuts-overview__overlay-close icon-delete"></i>
+    <a href="" class="umb-keyboard-shortcuts-overview__overlay-close" ng-click="toggleShortcutsOverlay()" data-hotkey="esc" hotkey-when-hidden="true">
+      <i class="icon-delete"></i>
     </a>
 
     <div class="umb-keyboard-shortcuts-overview__overlay-content">

src/Umbraco.Web.UI.Client/src/views/components/umb-variations.html

@@ -0,0 +1,174 @@
+<div class="umb-variations">
+
+    <umb-empty-state
+        ng-if="(variations | filter:{active:true}).length === 0"
+        position="center">
+        It is not possible to make variations of a variation
+    </umb-empty-state>
+
+    <div ng-if="(variations | filter:{active:true}).length > 0">
+
+        <div class="umb-variations__title-wrapper">
+            <div class="umb-variations__title">Variations</div>
+        </div>
+
+        <p class="umb-variations__help-text">Manage multiple variations of your content here. Create, duplicate or delete variations.</p>
+
+        <!-- VARIATIONS LANG GROUP -->
+        <div class="umb-varations__lang-group" ng-repeat="language in variations | filter:{active:true}">
+            <div class="umb-varations__lang-group-info">
+
+                <div class="umb-varations__lang-group-info__name" ng-click="clickVariation(variation, $event, $index)">
+                    <div class="umb-varations__published-state" ng-class="{'-published': language.published}"></div>
+                    <div ng-if="variations.length === 1">
+                    <a href="" class="umb-varations__lang-group-info__link">{{ language.name }}</a>
+                        <small>(Original)</small>
+                    </div>
+                    <div ng-if="variations.length > 1">
+                        <i class="icon-globe-alt" ng-if="variations.length > 1"></i>
+                        {{ language.language }}
+                    </div>
+                </div>
+
+                <div class="umb-variations__actions" ng-if="language.published">
+                    <div class="umb-variations__action" ng-click="showNewVariation(language)">
+                        <span>Create variation</span>
+                    </div>
+                </div>
+
+            </div>
+
+            <!-- CREATE -->
+            <div class="umb-variations__edit-list-item" ng-if="language.showNewVariation">
+
+                <div class="umb-variations__form-group">
+                    <label class="umb-variations__label">Name</label>
+                    <input class="-full-width-input" type="text" ng-model="newVariation.name" umb-auto-focus />
+                </div>
+
+                <div class="umb-variations__form-group">
+                    <label class="umb-variations__label">Description</label>
+                    <input class="-full-width-input" type="text" ng-model="newVariation.description" />
+                </div>
+
+                <div class="umb-variations__form-group">
+                    <label class="umb-variations__label">Segments</label>
+                    <div class="umb-variations__tags">
+                        <label class="umb-variations__tag" ng-repeat="segment in segments">
+                            <input
+                                type="checkbox"
+                                class="checkbox"
+                                checklist-model="newVariation.segments"
+                                checklist-value="segment.id">
+                            <span>{{segment.name}}</span>
+                        </label>
+                    </div>
+                </div>
+
+                <div class="umb-variations__form-group form-group-actions">
+
+                    <umb-button
+                        action="createNewVariation(newVariation, language)"
+                        button-style="success"
+                        label="Create variation"
+                        type="button">
+                    </umb-button>
+
+                    <umb-button
+                        action="hideNewVariation(language)"
+                        button-style="link"
+                        label="Cancel"
+                        type="button">
+                    </umb-button>
+
+                </div>
+
+            </div>
+
+            <!-- VARIATIONS LIST -->
+            <ul class="umb-variations__list" ui-sortable="variationsSortableOptions" ng-model="language.variations">
+
+                <li class="umb-variations__list-item-wrapper" ng-repeat="variation in language.variations">
+
+                    <!-- VIEW -->
+                    <div class="umb-variations__list-item"  ng-class="{'-edit-mode': variation.editVariation}">
+
+                        <div class="umb-variations__variation-top-bar">
+
+                            <div class="umb-varations__published-state" ng-class="{'-published': variation.published}"></div>
+
+                            <div class="umb-variations__name-wrapper">
+                                <i class="umb-variations__name-icon icon-documents"></i>
+                                <div class="umb-variations__name">{{ variation.variationName }}</div>
+                                <div class="umb-variations__description" ng-if="variation.variationDescription">({{ variation.variationDescription }})</div>
+                            </div>
+
+                            <div class="umb-variations__list-item__edit" ng-click="toggleEditVariation(variation)">
+                                Edit
+                            </div>
+
+                        </div>
+
+                    </div>
+
+                    <!-- EDIT -->
+                    <div class="umb-variations__edit-list-item" ng-if="variation.editVariation">
+
+                        <div class="umb-variations__form-group">
+                            <label class="umb-variations__label">Name</label>
+                            <input class="-full-width-input" type="text" ng-model="variation.variationName" umb-auto-focus/>
+                        </div>
+
+                        <div class="umb-variations__form-group">
+                            <label class="umb-variations__label">Description</label>
+                            <input class="-full-width-input" type="text" ng-model="variation.variationDescription" />
+                        </div>
+
+                        <div class="umb-variations__form-group">
+                            <label class="umb-variations__label">Segments</label>
+                            <div class="umb-variations__tags">
+                                <label class="umb-variations__tag" ng-repeat="segment in segments">
+                                    <input
+                                        type="checkbox"
+                                        class="checkbox"
+                                        checklist-model="variation.segments"
+                                        checklist-value="segment.id">
+                                    <span>{{segment.name}}</span>
+                                </label>
+                            </div>
+                        </div>
+
+                        <div class="umb-variations__form-group form-group-actions">
+
+                            <umb-button
+                                action="saveVariation(variation, language)"
+                                button-style="success"
+                                label="Save variation"
+                                type="button">
+                            </umb-button>
+
+                            <umb-button
+                                action="deleteVariation(variation, language)"
+                                label="Delete variation"
+                                type="button">
+                            </umb-button>
+
+                            <umb-button
+                                action="hideEditVariation(variation)"
+                                button-style="link"
+                                label="Cancel"
+                                type="button">
+                            </umb-button>
+
+                        </div>
+
+                    </div>
+
+                </li>
+            </ul>
+
+        </div>
+
+    </div>
+
+</div>

src/Umbraco.Web.UI.Client/src/views/content/content.edit.controller.js

@@ -2,11 +2,11 @@
  * @ngdoc controller
  * @name Umbraco.Editors.Content.EditController
  * @function
- * 
+ *
  * @description
  * The controller for the content editor
  */
-function ContentEditController($scope, $rootScope, $routeParams, $q, $timeout, $window, appState, contentResource, entityResource, navigationService, notificationsService, angularHelper, serverValidationManager, contentEditingHelper, treeService, fileManager, formHelper, umbRequestHelper, keyboardService, umbModelMapper, editorState, $http) {
+function ContentEditController($scope, $rootScope, $routeParams, $q, $timeout, $window, $filter, appState, contentResource, entityResource, navigationService, notificationsService, angularHelper, serverValidationManager, contentEditingHelper, treeService, fileManager, formHelper, umbRequestHelper, keyboardService, umbModelMapper, editorState, $http, variationsHelper, eventsService) {
 
     //setup scope vars
     $scope.defaultButton = null;
@@ -47,8 +47,88 @@ function ContentEditController($scope, $rootScope, $routeParams, $q, $timeout, $
                });
             }
         }
+
+        // fake variations
+        // set up English locale as master
+        var english = angular.copy(content);
+        english.language = "English (United States)";
+        english.active = true;
+        english.variations = [];
+        variationsHelper.setMaster(english);
+
+        var danish = angular.copy(content);
+        danish.language = "Danish";
+        danish.variations = [];
+        variationsHelper.createVariation(danish);
+
+        var spanish = angular.copy(content);
+        spanish.language = "Spanish";
+        spanish.variations = [];
+        variationsHelper.createVariation(spanish);
+
+        $scope.variations = variationsHelper.getVariations();
+
+        // fake apps
+        $scope.page.navigation = [
+            {
+                "name": "Variations",
+                "icon": "icon-documents",
+                "view": "views/content/views/variations/variations.html"
+            },
+            {
+                "name": "Activity",
+                "icon": "icon-activity",
+                "view": "views/content/views/activity/activity.html"
+            },
+            {
+                "name": "Permissions",
+                "icon": "icon-keychain",
+                "view": "views/content/views/permissions/permissions.html"
+            },
+            {
+                "name": "Notifications",
+                "icon": "icon-megaphone",
+                "view": "views/content/views/notifications/notifications.html"
+            }
+        ];
+
+        for(var i = 0; i < content.tabs.length; i++) {
+            var tab = content.tabs[i];
+            var app = {
+                "name": tab.label,
+                "icon": "icon-document",
+                "view": "views/content/views/default/default.html",
+                "properties": tab.properties,
+                "sortOrder": i + 1
+            };
+            $scope.page.navigation.push(app);
+        }
+
+        $scope.page.navigation = $filter('orderBy')($scope.page.navigation, 'sortOrder');
+        $scope.page.navigation[0].active = true;
+
+        if($scope.variations && $scope.variations.length > 0) {
+            $scope.content = null;
+            $scope.content = $scope.variations[0];
+        }
+
     }
 
+    $scope.changeVariation = function(variation) {
+        $scope.content = null;
+        $scope.content = variation;
+    };
+
+    $scope.openInSplitView = function(variation) {
+
+        var view = {
+            id: variation.id,
+            view: "views/content/edit.html"
+        };
+
+        eventsService.emit("splitView.open", view);
+    };
+
     /** Syncs the content item to it's tree node - this occurs on first load and after saving */
     function syncTreeNode(content, path, initialLoad) {
 
@@ -82,7 +162,8 @@ function ContentEditController($scope, $rootScope, $routeParams, $q, $timeout, $
             statusMessage: args.statusMessage,
             saveMethod: args.saveMethod,
             scope: $scope,
-            content: $scope.content
+            content: $scope.content,
+            action: args.action
         }).then(function (data) {
             //success            
             init($scope.content);
@@ -195,15 +276,15 @@ function ContentEditController($scope, $rootScope, $routeParams, $q, $timeout, $
     };
 
     $scope.sendToPublish = function () {
-        return performSave({ saveMethod: contentResource.sendToPublish, statusMessage: "Sending..." });
+        return performSave({ saveMethod: contentResource.sendToPublish, statusMessage: "Sending...", action: "sendToPublish" });
     };
 
     $scope.saveAndPublish = function () {
-        return performSave({ saveMethod: contentResource.publish, statusMessage: "Publishing..." });
+        return performSave({ saveMethod: contentResource.publish, statusMessage: "Publishing...", action: "publish" });
     };
 
     $scope.save = function () {
-        return performSave({ saveMethod: contentResource.save, statusMessage: "Saving..." });
+        return performSave({ saveMethod: contentResource.save, statusMessage: "Saving...", action: "save" });
     };
 
     $scope.preview = function (content) {

src/Umbraco.Web.UI.Client/src/views/content/edit.html

@@ -7,29 +7,28 @@
       novalidate
       val-form-manager>
 
-      <umb-editor-view ng-if="!page.loading" umb-tabs>
+      <umb-editor-view ng-if="!page.loading">
 
          <umb-editor-header
-            menu="page.menu"
             name="content.name"
-            tabs="content.tabs"
+            variation="content.variationName"
+            language="content.language"
+            variations="variations"
+            on-open-in-split-view="openInSplitView"
+            on-select-item="changeVariation"
+            navigation="page.navigation"
             hide-icon="true"
             hide-description="true"
             hide-alias="true">
          </umb-editor-header>
 
-
          <umb-editor-container>
 
-            <umb-tabs-content class="form-horizontal" view="true">
-               <umb-tab id="tab{{tab.id}}" ng-repeat="tab in content.tabs" rel="{{tab.id}}">
-
-                  <umb-property ng-repeat="property in tab.properties" property="property">
-                     <umb-editor model="property"></umb-editor>
-                  </umb-property>
-
-               </umb-tab>
-            </umb-tabs-content>
+             <umb-editor-sub-views
+                ng-if="!page.loading"
+                 sub-views="page.navigation"
+                 model="content">
+             </umb-editor-sub-views>
 
          </umb-editor-container>
 

src/Umbraco.Web.UI.Client/src/views/content/views/activity/activity.html

@@ -0,0 +1 @@
+Activity view

src/Umbraco.Web.UI.Client/src/views/content/views/content/content.controller.js

@@ -0,0 +1,73 @@
+(function() {
+    'use strict';
+
+    function ContentController($scope) {
+
+        var vm = this;
+
+        vm.showGenericProperties = false;
+        vm.genericProperties = {};
+
+        vm.sidebarTabs = [{
+            active: true,
+            id: 1,
+            label: "Details",
+            alias: "details"
+        }, {
+            active: false,
+            id: 2,
+            label: "Activity",
+            alias: "activity"
+        }
+    ];
+
+        vm.toggleGenericProperties = toggleGenericProperties;
+
+        function activate() {
+            setGenericProperties($scope.model.tabs);
+            hideGenericPropertiesTab($scope.model.tabs);
+            setUniqueTabId($scope.model.tabs);
+        }
+
+        function hideGenericPropertiesTab(tabs) {
+
+            for(var i = 0; i < tabs.length; i++) {
+                var tab = tabs[i];
+                if(tab.alias === "Generic properties") {
+                    tab.hidden = true;
+                }
+            }
+        }
+
+        function toggleGenericProperties() {
+            if(vm.showGenericProperties === true) {
+                vm.showGenericProperties = false;
+            } else {
+                vm.showGenericProperties = true;
+            }
+        }
+
+        function setGenericProperties(tabs) {
+            for(var i = 0; i < tabs.length; i++) {
+                var tab = tabs[i];
+                if(tab.alias === "Generic properties") {
+                    vm.genericProperties = tab;
+                }
+            }
+        }
+
+        function setUniqueTabId(tabs) {
+            for(var i = 0; i < tabs.length; i++) {
+                var tab = tabs[i];
+                if(tab.alias !== "Generic properties") {
+                    tab.id = Math.floor(Math.random() * 10000000000) + 1;
+                }
+            }
+        }
+
+        activate();
+
+    }
+
+    angular.module("umbraco").controller("Umbraco.Editors.Content.ContentController", ContentController);
+})();

src/Umbraco.Web.UI.Client/src/views/content/views/content/content.html

@@ -0,0 +1,137 @@
+<umb-editor-sub-view ng-controller="Umbraco.Editors.Content.ContentController as vm">
+
+    <umb-editor-sub-view-header umb-tabs>
+
+        <div class="umb-editor-sub-view-header__content-left">
+            <umb-tabs-nav ng-if="model.tabs" model="model.tabs"></umb-tabs-nav>
+        </div>
+
+        <div class="umb-editor-sub-view-header__content-right">
+            <a href="" ng-repeat="tool in editorToolbar" ng-click="tool.action()">
+                <i ng-class="tool.icon"></i>
+            </a>
+
+            <a class="editor-toolbar-properties" href="" ng-click="vm.toggleGenericProperties()">
+                <i class="icon-info"></i>
+            </a>
+        </div>
+
+    </umb-editor-sub-view-header>
+
+    <umb-editor-sub-view-container>
+
+        <umb-editor-sub-view-content>
+
+            <umb-tabs-content class="form-horizontal" view="true">
+                <umb-tab id="tab{{tab.id}}" ng-repeat="tab in model.tabs" rel="{{tab.id}}" ng-hide="tab.hidden">
+
+                    <umb-property ng-repeat="property in tab.properties" property="property">
+                        <umb-editor model="property"></umb-editor>
+                    </umb-property>
+
+                </umb-tab>
+            </umb-tabs-content>
+
+            <umb-empty-state position="center" ng-if="model.tabs.length - 1 === 0">
+                Some text here about no content can be added
+            </umb-empty-state>
+
+        </umb-editor-sub-view-content>
+
+        <umb-editor-sub-view-sidebar ng-if="vm.showGenericProperties">
+
+            <div class="umb-editor-sub-view-sidebar-header">
+                <div class="umb-editor-sub-view-sidebar-title">
+                    Document Information
+
+                    <i class="icon-wrong" ng-click="vm.toggleGenericProperties()"></i>
+                </div>
+
+                <umb-tabs-nav ng-if="vm.sidebarTabs" model="vm.sidebarTabs"></umb-tabs-nav>
+            </div>
+
+            <div class="umb-editor-sub-view-sidebar-container">
+
+                <umb-tabs-content>
+
+                    <umb-tab id="tab{{tab.id}}" ng-repeat="tab in vm.sidebarTabs" rel="{{tab.id}}">
+
+                        <div ng-if="tab.alias==='details'">
+                            <umb-property ng-repeat="property in vm.genericProperties.properties" property="property">
+                                <umb-editor model="property"></umb-editor>
+                            </umb-property>
+                        </div>
+
+                        <div ng-if="tab.alias==='activity'">
+                            <ul class="umb-activity">
+                                <li class="umb-activity-item">
+                                    <span class="umb-activity-item-name">
+                                        Activity item 1
+                                    </span>
+                                    <a class="umb-activity-item-rollback" href="">
+                                        Rollback
+                                        <i class="icon-refresh"></i>
+                                    </a>
+                                </li>
+                                <li class="umb-activity-item">
+                                    <span class="umb-activity-item-name">
+                                        Activity item 2
+                                    </span>
+                                    <a class="umb-activity-item-rollback" href="">
+                                        Rollback
+                                        <i class="icon-refresh"></i>
+                                    </a>
+                                </li>
+                                <li class="umb-activity-item">
+                                    <span class="umb-activity-item-name">
+                                        Activity item 3
+                                    </span>
+                                    <a class="umb-activity-item-rollback" href="">
+                                        Rollback
+                                        <i class="icon-refresh"></i>
+                                    </a>
+                                </li>
+                                <li class="umb-activity-item">
+                                    <span class="umb-activity-item-name">
+                                        Activity item 4
+                                    </span>
+                                    <a class="umb-activity-item-rollback" href="">
+                                        Rollback
+                                        <i class="icon-refresh"></i>
+                                    </a>
+                                </li>
+                                <li class="umb-activity-item">
+                                    <span class="umb-activity-item-name">
+                                        Activity item 5
+                                    </span>
+                                    <a class="umb-activity-item-rollback" href="">
+                                        Rollback
+                                        <i class="icon-refresh"></i>
+                                    </a>
+                                </li>
+                                <li class="umb-activity-item">
+                                    <span class="umb-activity-item-name">
+                                        Activity item 6
+                                    </span>
+                                    <a class="umb-activity-item-rollback" href="">
+                                        Rollback
+                                        <i class="icon-refresh"></i>
+                                    </a>
+                                </li>
+                            </ul>
+                        </div>
+
+                    </umb-tab>
+
+                </umb-tabs-content>
+            </div>
+
+            <!-- <div class="umb-editor-sub-view-sidebar-footer">
+                flax
+            </div> -->
+
+        </umb-editor-sub-view-sidebar>
+
+    </umb-editor-sub-view-container>
+
+</umb-editor-sub-view>

src/Umbraco.Web.UI.Client/src/views/content/views/default/default.html

@@ -0,0 +1,15 @@
+<umb-editor-sub-view>
+
+    <umb-editor-sub-view-container>
+
+        <umb-editor-sub-view-content class="form-horizontal">
+
+            <umb-property ng-repeat="property in subView.properties" property="property">
+                <umb-editor model="property"></umb-editor>
+            </umb-property>
+
+        </umb-editor-sub-view-content>
+
+    </umb-editor-sub-view-container>
+
+</umb-editor-sub-view>

src/Umbraco.Web.UI.Client/src/views/content/views/notifications/notifications.html

@@ -0,0 +1,13 @@
+<umb-editor-sub-view>
+
+    <umb-editor-sub-view-container>
+
+        <umb-editor-sub-view-content>
+
+            Notifications
+
+        </umb-editor-sub-view-content>
+
+    </umb-editor-sub-view-container>
+
+</umb-editor-sub-view>

src/Umbraco.Web.UI.Client/src/views/content/views/permissions/permissions.html

@@ -0,0 +1,13 @@
+<umb-editor-sub-view>
+
+    <umb-editor-sub-view-container>
+
+        <umb-editor-sub-view-content>
+
+            Permissions
+
+        </umb-editor-sub-view-content>
+
+    </umb-editor-sub-view-container>
+
+</umb-editor-sub-view>

src/Umbraco.Web.UI.Client/src/views/content/views/variations/variations.controller.js

@@ -0,0 +1,49 @@
+(function() {
+    'use strict';
+
+    function VariationsController($scope, variationsHelper) {
+
+        var vm = this;
+
+        vm.variations = [];
+
+        vm.clickVariation = clickVariation;
+        vm.saveVariation = saveVariation;
+        vm.cloneVariation = cloneVariation;
+        vm.deleteVariation = deleteVariation;
+
+        function activate() {
+            vm.variations = variationsHelper.getVariations();
+        }
+
+        function clickVariation(variation, event, index) {
+            $scope.model = null;
+            $scope.model = variation;
+
+            for(var i = 0; i < $scope.subViews; i++) {
+                var subView = scope.subViews[i];
+                subView.active = false;
+            }
+
+            $scope.subViews[0].active = true;
+
+        }
+
+        function saveVariation(variation, event, index) {
+            variationsHelper.saveVariation(variation);
+        }
+
+        function cloneVariation(variation, event, index) {
+            variationsHelper.cloneVariation(variation, event, index);
+        }
+
+        function deleteVariation(variation, event, index) {
+            variationsHelper.deleteVariation(variation, event, index);
+        }
+
+        activate();
+
+    }
+
+    angular.module("umbraco").controller("Umbraco.Editors.Content.VariationsController", VariationsController);
+})();

src/Umbraco.Web.UI.Client/src/views/content/views/variations/variations.html

@@ -0,0 +1,19 @@
+<umb-editor-sub-view ng-controller="Umbraco.Editors.Content.VariationsController as vm">
+
+    <umb-editor-sub-view-container>
+
+        <umb-editor-sub-view-content>
+
+            <umb-variations
+                variations="vm.variations"
+                on-save-variation="vm.saveVariation"
+                on-click-variation="vm.clickVariation"
+                on-clone-variation="vm.cloneVariation"
+                on-delete-variation="vm.deleteVariation">
+            </umb-variations>
+
+        </umb-editor-sub-view-content>
+
+    </umb-editor-sub-view-container>
+
+</umb-editor-sub-view>

src/Umbraco.Web.UI.Client/src/views/datatypes/edit.html

@@ -21,28 +21,32 @@
 
          <umb-editor-container class="form-horizontal">
 
-            <umb-property property="properties.selectedEditor">
-                <div>
-                    <select name="selectedEditor"
-                           ng-model="content.selectedEditor"
-                           required
-                           ng-options="e.alias as e.name for e in content.availableEditors"></select>
-                    <span class="help-inline" val-msg-for="selectedEditor" val-toggle-msg="required">Required</span>
-                </div>
+             <div class="umb-editor-content">
 
-            </umb-property>
+                 <umb-property property="properties.selectedEditor">
+                     <div>
+                         <select name="selectedEditor"
+                                ng-model="content.selectedEditor"
+                                required
+                                ng-options="e.alias as e.name for e in content.availableEditors"></select>
+                         <span class="help-inline" val-msg-for="selectedEditor" val-toggle-msg="required">Required</span>
+                     </div>
 
-            <umb-property property="properties.selectedEditorId">
-                <div>{{content.selectedEditor}}</div>
-            </umb-property>
+                 </umb-property>
+
+                 <umb-property property="properties.selectedEditorId">
+                     <div>{{content.selectedEditor}}</div>
+                 </umb-property>
 
 
-            <umb-property
-                property="preValue"
-                ng-repeat="preValue in preValues">
+                 <umb-property
+                     property="preValue"
+                     ng-repeat="preValue in preValues">
 
-                <umb-editor model="preValue" is-pre-value="true"></umb-editor>
-            </umb-property>
+                     <umb-editor model="preValue" is-pre-value="true"></umb-editor>
+                 </umb-property>
+
+             </div>
 
          </umb-editor-container>
 

src/Umbraco.Web.UI.Client/src/views/documenttypes/edit.html

@@ -16,12 +16,14 @@
 
             <umb-editor-container class="editors-document-type-container">
 
-                <div class="editors-document-type-canvas">
-                    <umb-editor-sub-views
-                        ng-if="!vm.page.loading"
-                        sub-views="vm.page.navigation"
-                        model="vm.contentType">
-                    </umb-editor-sub-views>
+                <div class="umb-editor-content">
+                    <div class="editors-document-type-canvas">
+                        <umb-editor-sub-views
+                            ng-if="!vm.page.loading"
+                            sub-views="vm.page.navigation"
+                            model="vm.contentType">
+                        </umb-editor-sub-views>
+                    </div>
                 </div>
 
             </umb-editor-container>
@@ -40,7 +42,7 @@
 
                     <umb-button
                         ng-if="!vm.page.modelsBuilder"
-                        type="button" 
+                        type="button"
                         action="vm.save()"
                         state="vm.page.saveButtonState"
                         button-style="success"

src/Umbraco.Web.UI.Client/src/views/media/edit.html

@@ -17,17 +17,25 @@
             hide-alias="true">
          </umb-editor-header>
 
-         <umb-editor-container>
+         <umb-editor-toolbar umb-tabs>
+             <umb-tabs-nav ng-if="content.tabs" model="content.tabs"></umb-tabs-nav>
+         </umb-editor-toolbar>
 
-            <umb-tabs-content view="true" class="form-horizontal">
-               <umb-tab id="tab{{tab.id}}" rel="{{tab.id}}" ng-repeat="tab in content.tabs">
+         <umb-editor-container umb-tabs>
 
-                  <umb-property property="property" ng-repeat="property in tab.properties">
-                     <umb-editor model="property"></umb-editor>
-                  </umb-property>
+             <div class="umb-editor-content">
 
-               </umb-tab>
-            </umb-tabs-content>
+                 <umb-tabs-content view="true" class="form-horizontal">
+                    <umb-tab id="tab{{tab.id}}" rel="{{tab.id}}" ng-repeat="tab in content.tabs">
+
+                       <umb-property property="property" ng-repeat="property in tab.properties">
+                          <umb-editor model="property"></umb-editor>
+                       </umb-property>
+
+                    </umb-tab>
+                 </umb-tabs-content>
+
+             </div>
 
          </umb-editor-container>
 

src/Umbraco.Web.UI.Client/src/views/mediatypes/edit.html

@@ -16,12 +16,16 @@
 
             <umb-editor-container class="editors-document-type-container">
 
-                <div class="editors-document-type-canvas">
-                    <umb-editor-sub-views
-                        ng-if="!vm.page.loading"
-                        sub-views="vm.page.navigation"
-                        model="vm.contentType">
-                    </umb-editor-sub-views>
+                <div class="umb-editor-content">
+
+                    <div class="editors-document-type-canvas">
+                        <umb-editor-sub-views
+                            ng-if="!vm.page.loading"
+                            sub-views="vm.page.navigation"
+                            model="vm.contentType">
+                        </umb-editor-sub-views>
+                    </div>
+
                 </div>
 
             </umb-editor-container>

src/Umbraco.Web.UI.Client/src/views/member/edit.html

@@ -19,15 +19,19 @@
 
          <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">
+             <div class="umb-editor-content">
 
-                  <umb-property property="property" ng-repeat="property in tab.properties">
-                     <umb-editor model="property"></umb-editor>
-                  </umb-property>
+                 <umb-tabs-content view="true" class="form-horizontal">
+                    <umb-tab id="tab{{tab.id}}" rel="{{tab.id}}" ng-repeat="tab in content.tabs">
 
-               </umb-tab>
-            </umb-tabs-content>
+                       <umb-property property="property" ng-repeat="property in tab.properties">
+                          <umb-editor model="property"></umb-editor>
+                       </umb-property>
+
+                    </umb-tab>
+                 </umb-tabs-content>
+
+             </div>
 
          </umb-editor-container>
 

src/Umbraco.Web.UI.Client/src/views/membertypes/edit.html

@@ -16,12 +16,16 @@
 
             <umb-editor-container class="editors-document-type-container">
 
-                <div class="editors-document-type-canvas">
-                    <umb-editor-sub-views
-                        ng-if="!vm.page.loading"
-                        sub-views="vm.page.navigation"
-                        model="vm.contentType">
-                    </umb-editor-sub-views>
+                <div class="umb-editor-content">
+
+                    <div class="editors-document-type-canvas">
+                        <umb-editor-sub-views
+                            ng-if="!vm.page.loading"
+                            sub-views="vm.page.navigation"
+                            model="vm.contentType">
+                        </umb-editor-sub-views>
+                    </div>
+                    
                 </div>
 
             </umb-editor-container>

src/Umbraco.Web.UI.Client/src/views/propertyeditors/boolean/boolean.controller.js

@@ -4,6 +4,11 @@ function booleanEditorController($scope, $rootScope, assetsService) {
         $scope.renderModel = {
             value: false
         };
+
+        if($scope.model.config.default.toString() === "1" && $scope.model && !$scope.model.value) {
+            $scope.renderModel.value = true;
+        }
+
         if ($scope.model && $scope.model.value && ($scope.model.value.toString() === "1" || angular.lowercase($scope.model.value) === "true")) {
             $scope.renderModel.value = true;
         }
@@ -14,7 +19,7 @@ function booleanEditorController($scope, $rootScope, assetsService) {
     $scope.$watch("renderModel.value", function (newVal) {
         $scope.model.value = newVal === true ? "1" : "0";
     });
-    
+
     //here we declare a special method which will be called whenever the value has changed from the server
     //this is instead of doing a watch on the model.value = faster
     $scope.model.onValueChanged = function (newVal, oldVal) {
@@ -23,4 +28,4 @@ function booleanEditorController($scope, $rootScope, assetsService) {
     };
 
 }
-angular.module("umbraco").controller("Umbraco.PropertyEditors.BooleanController", booleanEditorController);
+angular.module("umbraco").controller("Umbraco.PropertyEditors.BooleanController", booleanEditorController);

src/Umbraco.Web.UI.Client/src/views/propertyeditors/imagecropper/imagecropper.controller.js

@@ -5,6 +5,7 @@ angular.module('umbraco')
     function ($rootScope, $routeParams, $scope, $log, mediaHelper, cropperHelper, $timeout, editorState, umbRequestHelper, fileManager, angularHelper) {
 
         var config = angular.copy($scope.model.config);
+        $scope.imageIsLoaded = false;
 
         //move previously saved value to the editor
         if ($scope.model.value) {
@@ -71,6 +72,10 @@ angular.module('umbraco')
             }
         };
 
+        $scope.imageLoaded = function() {
+            $scope.imageIsLoaded = true;
+        };
+
         //on image selected, update the cropper
         $scope.$on("filesSelected", function (ev, args) {
             $scope.model.value = config;