fakes variations

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

@@ -0,0 +1,32 @@
+(function() {
+    'use strict';
+
+    function EditorBackdrop() {
+
+        function link(scope, el, attr, ctrl) {
+
+            scope.closeBackdrop = function() {
+                if(scope.onCloseBackdrop) {
+                    scope.onCloseBackdrop();
+                }
+            };
+
+        }
+
+        var directive = {
+            transclude: true,
+            restrict: 'E',
+            replace: true,
+            templateUrl: 'views/components/editor/umb-editor-backdrop.html',
+            scope: {
+                onCloseBackdrop: "="
+            },
+            link: link
+        };
+
+        return directive;
+    }
+
+    angular.module('umbraco.directives').directive('umbEditorBackdrop', EditorBackdrop);
+
+})();

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

@@ -24,6 +24,7 @@
                     }
                 };
             };
+
         }
 
         var directive = {
@@ -44,7 +45,9 @@
                 hideAlias: "@",
                 description: "=",
                 hideDescription: "@",
-                navigation: "="
+                navigation: "=",
+                published: "=",
+                variationName: "=",
             },
             link: link
         };

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

@@ -0,0 +1,95 @@
+(function() {
+    'use strict';
+
+    function Variations(iconHelper) {
+
+        function link(scope, el, attr, ctrl) {
+
+            scope.showNewVariation = function() {
+                scope.newVariationIsVisible = true;
+            };
+
+            scope.hideNewVariation = function() {
+                scope.newVariationIsVisible = false;
+            };
+
+            scope.createVariation = function(newVariation, event, index) {
+                if(scope.onCreateVariation) {
+                    scope.onCreateVariation(newVariation, event, index);
+                    scope.newVariationIsVisible = false;
+                    scope.cloneVariationIsVisible = false;
+                }
+            };
+
+            scope.clickVariation = function(variation, event, index) {
+                if(scope.onClickVariation && !variation.editMode) {
+                    scope.onClickVariation(variation, event, index);
+                }
+            };
+
+            scope.openEditVariation = function(variation, event, index) {
+                scope.selectedVariation = variation;
+                scope.selectedVariation.variatonNameCopy = angular.copy(variation.variatonNameCopy);
+                scope.editVariationIsVisible = true;
+                event.stopPropagation();
+            };
+
+            scope.hideEditVariation = function(event) {
+                scope.editVariationIsVisible = false;
+            };
+
+            scope.saveVariation = function(variation, event, index) {
+                if(scope.onSaveVariation) {
+                    scope.onSaveVariation(variation, event, index);
+                    scope.editVariationIsVisible = false;
+                }
+            };
+
+            scope.openCloneVariation = function(variation, event) {
+                scope.selectedVariation = angular.copy(variation);
+                scope.selectedVariation.nameCopy = angular.copy(variation.name);
+                scope.cloneVariationIsVisible = true;
+                event.stopPropagation();
+            };
+
+            scope.hideCloneVariation = function() {
+                scope.cloneVariationIsVisible = false;
+            };
+
+            scope.cloneVariation = function(variation) {
+                if(scope.onCloneVariation) {
+                    scope.onCloneVariation(variation);
+                    scope.cloneVariationIsVisible = false;
+                }
+            };
+
+            scope.deleteVariation = function(variation, event, index) {
+                if(scope.onDeleteVariation) {
+                    scope.onDeleteVariation(variation, event, index);
+                    event.stopPropagation();
+                }
+            };
+
+        }
+
+        var directive = {
+            restrict: 'E',
+            replace: true,
+            templateUrl: 'views/components/umb-variations.html',
+            scope: {
+                variations: "=",
+                onClickVariation: "=",
+                onSaveVariation: "=",
+                onCreateVariation: "=",
+                onCloneVariation: "=",
+                onDeleteVariation: "="
+            },
+            link: link
+        };
+
+        return directive;
+    }
+
+    angular.module('umbraco.directives').directive('umbVariations', Variations);
+
+})();

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

@@ -0,0 +1,65 @@
+(function() {
+    'use strict';
+
+    function variationsHelper() {
+
+        var variations = [];
+
+        function setMaster(master) {
+            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);
+            console.log(variations);
+        }
+
+        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/less/belle.less

@@ -108,6 +108,8 @@
 @import "components/umb-empty-state.less";
 @import "components/umb-property-editor.less";
 @import "components/umb-iconpicker.less";
+@import "components/umb-editor-backdrop.less";
+@import "components/umb-variations.less";
 
 @import "components/buttons/umb-button.less";
 @import "components/buttons/umb-button-group.less";

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

@@ -0,0 +1,39 @@
+.umb-editor-backdrop {
+    position: fixed;
+    width: 100%;
+    height: 100%;
+    top: 0;
+    left: 0;
+    background: rgb(255, 255, 255);
+    z-index: 1000;
+    animation: fadeIn 0.2s;
+    box-sizing: border-box;
+    overflow: scroll;
+    padding-left: 60px;
+
+    @media (min-width: 1100px) {
+        padding-left: 440px;
+    }
+}
+
+.umb-editor-backdrop__close {
+    position: absolute;
+    top: 20px;
+    right: 20px;
+    width: 40px;
+    height: 40px;
+    border-radius: 50%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    cursor: pointer;
+}
+
+.umb-editor-backdrop__close:hover {
+    background-color: @blue;
+    color: #ffffff;
+}
+
+.umb-editor-backdrop__close-icon {
+    font-size: 20px;
+}

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

@@ -11,7 +11,11 @@
   z-index: 1000;
   animation: fadeIn 0.2s;
   box-sizing: border-box;
-  padding-left: 440px;
+  padding-left: 60px;
+
+  @media (min-width: 1100px) {
+      padding-left: 440px;
+  }
 }
 
 .umb-keyboard-shortcuts-overview__overlay-close {

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

@@ -0,0 +1,165 @@
+.umb-variations {
+    width: 550px;
+    max-width: 100%;
+    margin-left: auto;
+    margin-right: auto;
+    margin-top: 150px;
+
+    padding: 0 20px;
+}
+
+.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-variations__create-new {
+    font-size: 13px;
+    color: @blue;
+}
+
+.umb-variations__create-new:hover {
+    color: @blue;
+}
+
+/* ---------- VARIATIONS LIST ---------- */
+
+.umb-variations__list {
+    list-style: none;
+    margin-left: 0;
+    margin-bottom: 150px;
+}
+
+.umb-variations__list-item {
+    padding: 25px;
+    background-color: @grayLighter;
+    margin-bottom: 10px;
+}
+
+.umb-variations__list-item:hover {
+    background-color: darken(@grayLighter, 2%);
+    cursor: pointer;
+}
+
+.umb-variations__list-item.-active {
+    background-color: @blue;
+}
+
+.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-weight: bold;
+}
+
+.umb-variations__edit-form {
+    width: 100%;
+}
+
+.umb-variations__name-input:focus,
+.umb-variations__name-input:active {
+    outline: none;
+}
+
+.umb-variations__description {
+    font-size: 13px;
+    margin-bottom: 0;
+    margin-top: 10px;
+    resize: none;
+}
+
+.umb-variations__description-input {
+    resize: none;
+}
+
+.umb-variations__actions {
+    display: flex;
+    flex-direction: row;
+    justify-content: flex-end;
+}
+
+.umb-variations__action {
+    margin-left: 10px;
+    font-size: 18px;
+    cursor: pointer;
+}
+
+.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;
+}

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

@@ -207,6 +207,12 @@ input.-full-width-input {
    height: 30px;
 }
 
+textarea.-full-width-textarea {
+    width: 100%;
+    box-sizing: border-box;
+    padding: 4px 6px;
+}
+
 // 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/main.less

@@ -114,6 +114,9 @@ h5.-black {
   border: none;
 }
 
+.umb-control-group.-no-padding-bottom {
+	padding-bottom: 0;
+}
 
 /*COMPACT MODE */
 .compact .umb-pane{margin: 0px 0px 15px 0px;}

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

@@ -391,8 +391,8 @@
 }
 
 .umb-panel-header-title-wrapper {
-   position: relative;
-   width: 80%;
+    flex: 1 1 auto;
+    margin-right: 15px;
 }
 
 .umb-panel-header-alias {

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

@@ -0,0 +1,5 @@
+<div class="umb-editor-backdrop" ng-transclude>
+    <div class="umb-editor-backdrop__close" ng-click="closeBackdrop()" hotkey="esc" hotkey-when-hidden="true">
+        <i class="umb-editor-backdrop__close-icon icon-wrong"></i>
+    </div>
+</div>

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

@@ -15,6 +15,8 @@
 
                <div class="umb-panel-header-title-wrapper">
 
+                   <div class="umb-panel-header__variation-name" ng-if="variationName">{{ variationName }}</div>
+
                    <ng-form name="headerNameForm">
                        <input
                         type="text"
@@ -31,10 +33,10 @@
 
                   <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-aliasclass="umb-panel-header-alias"
+                                      ng-if="!hideAlias"
+                                      alias="$parent.alias"
+                                      alias-from="$parent.name"
                                       enable-lock="true"
                                       server-validation-field="Alias"></umb-generate-alias>
 

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

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

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

@@ -0,0 +1,160 @@
+<div class="umb-variations">
+
+    <div ng-if="!newVariationIsVisible && !editVariationIsVisible && !cloneVariationIsVisible">
+        <div class="umb-variations__title-wrapper">
+            <div class="umb-variations__title">Variations ({{ variations.length }})</div>
+            <a href="" class="umb-variations__create-new" ng-click="showNewVariation()">Create new variation</a>
+        </div>
+
+        <p class="umb-variations__help-text">Manage multiple variations of your content here. Create, duplicate or delete variations.</p>
+
+        <input class="umb-variations__filter -full-width-input" ng-show="variations.length > 4" ng-model="searchTerm" placeholder="Filter variations"></input>
+
+        <!-- VARIATIONS LIST -->
+        <ul class="umb-variations__list">
+
+            <li class="umb-variations__list-item" ng-repeat="variation in variations | filter:searchTerm" ng-click="clickVariation(variation, $event, $index)">
+
+                <div class="umb-variations__variation-top-bar">
+
+                    <div class="umb-variations__name-wrapper">
+                        <div class="umb-variations__published-state" ng-class="{'-published': variation.published}"></div>
+                        <div class="umb-variations__name" ng-if="!variation.master">{{ variation.variationName }}</div>
+                        <div class="umb-variations__name" ng-if="variation.master">{{ variation.name }} (Original)</div>
+                    </div>
+
+                    <div class="umb-variations__actions">
+                        <div class="umb-variations__action" ng-if="!variation.master" ng-click="openEditVariation(variation, $event, $index)">
+                            <i class="icon-edit"></i>
+                        </div>
+                        <div class="umb-variations__action" ng-click="openCloneVariation(variation, $event, $index)">
+                            <i class="icon-documents"></i>
+                        </div>
+                        <div class="umb-variations__action" ng-if="!variation.master" ng-click="deleteVariation(variation, $event, $index)">
+                            <i class="icon-trash"></i>
+                        </div>
+                    </div>
+
+                </div>
+
+                <div class="umb-variations__description" ng-if="variation.variationDescription">{{ variation.variationDescription }}</div>
+
+            </li>
+        </ul>
+    </div>
+
+    <div class="umb-variation__create" ng-if="newVariationIsVisible">
+        <div class="umb-variation__create-title">
+            Create new variation
+        </div>
+        <div class="umb-variations__help-text">
+            Create new variation of your original content. For great examples go to umbraco.com/documentation
+        </div>
+
+        <div class="umb-variation__create-form">
+
+            <div class="umb-control-group -no-border -no-padding-bottom">
+                <label for="umb-variation__create-form-title">Title</label>
+                <input id="umb-variation-create-form-title" class="umb-variation__create-form-title -full-width-input" ng-model="newVariation.variationName" type="text" placeholder="Give a title to your variation" focus-when="{{newVariationIsVisible}}" />
+            </div>
+
+            <div class="umb-control-group -no-border -no-padding-bottom">
+                <label for="umb-variation-create-form-description">Description</label>
+                <textarea class="umb-variation__create-form-description -full-width-textarea" ng-model="newVariation.variationDescription" name="" id="umb-variation-create-form-description" placeholder="Add a description to your variation" umb-auto-resize></textarea>
+            </div>
+
+            <div class="umb-variation__create-form-actions">
+                <umb-button
+                    type="link"
+                    button-style="link"
+                    action="hideNewVariation()"
+                    label="Close">
+                </umb-button>
+                <umb-button
+                   type="button"
+                   button-style="success"
+                   action="createVariation(newVariation)"
+                   label="Create variation">
+                </umb-button>
+            </div>
+
+        </div>
+    </div>
+
+    <div class="umb-variation__create" ng-if="editVariationIsVisible">
+        <div class="umb-variation__create-title">
+            Edit "{{ selectedVariation.nameCopy }}"
+        </div>
+        <div class="umb-variations__help-text">
+            Edit variation of "{{ selectedVariation.nameCopy }}". For great examples go to umbraco.com/documentation
+        </div>
+
+        <div class="umb-variation__create-form">
+
+            <div class="umb-control-group -no-border -no-padding-bottom">
+                <label for="umb-variation__create-form-title">Title</label>
+                <input id="umb-variation-create-form-title" class="umb-variation__create-form-title -full-width-input" ng-model="selectedVariation.variationName" type="text" placeholder="Give a title to your variation" focus-when="{{editVariationIsVisible}}"/>
+            </div>
+
+            <div class="umb-control-group -no-border -no-padding-bottom">
+                <label for="umb-variation-create-form-description">Description</label>
+                <textarea class="umb-variation__create-form-description -full-width-textarea" ng-model="selectedVariation.variationDescription" name="" id="umb-variation-create-form-description" placeholder="Add a description to your variation" umb-auto-resize></textarea>
+            </div>
+
+            <div class="umb-variation__create-form-actions">
+                <umb-button
+                    type="link"
+                    button-style="link"
+                    action="hideEditVariation()"
+                    label="Close">
+                </umb-button>
+                <umb-button
+                   type="button"
+                   button-style="success"
+                   action="saveVariation(selectedVariation)"
+                   label="Save variation">
+                </umb-button>
+            </div>
+
+        </div>
+    </div>
+
+    <div class="umb-variation__create" ng-if="cloneVariationIsVisible">
+        <div class="umb-variation__create-title">
+            Copy "{{ selectedVariation.nameCopy }}"
+        </div>
+        <div class="umb-variations__help-text">
+            Copy variation of "{{ selectedVariation.nameCopy }}". For great examples go to umbraco.com/documentation
+        </div>
+
+        <div class="umb-variation__create-form">
+
+            <div class="umb-control-group -no-border -no-padding-bottom">
+                <label for="umb-variation__create-form-title">Title</label>
+                <input id="umb-variation-create-form-title" class="umb-variation__create-form-title -full-width-input" ng-model="selectedVariation.variationName" type="text" placeholder="Give a title to your variation" focus-when="{{cloneVariationIsVisible}}"/>
+            </div>
+
+            <div class="umb-control-group -no-border -no-padding-bottom">
+                <label for="umb-variation-create-form-description">Description</label>
+                <textarea class="umb-variation__create-form-description -full-width-textarea" ng-model="selectedVariation.variationDescription" name="" id="umb-variation-create-form-description" placeholder="Add a description to your variation" umb-auto-resize></textarea>
+            </div>
+
+            <div class="umb-variation__create-form-actions">
+                <umb-button
+                    type="link"
+                    button-style="link"
+                    action="hideCloneVariation($event)"
+                    label="Close">
+                </umb-button>
+                <umb-button
+                   type="button"
+                   button-style="success"
+                   action="cloneVariation(selectedVariation)"
+                   label="Make copy">
+                </umb-button>
+            </div>
+
+        </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, appState, contentResource, entityResource, navigationService, notificationsService, angularHelper, serverValidationManager, contentEditingHelper, treeService, fileManager, formHelper, umbRequestHelper, keyboardService, umbModelMapper, editorState, $http, variationsHelper, localizationService) {
 
     //setup scope vars
     $scope.defaultButton = null;
@@ -20,6 +20,23 @@ function ContentEditController($scope, $rootScope, $routeParams, $q, $timeout, $
     $scope.page.listViewPath = null;
     $scope.page.isNew = $routeParams.create;
     $scope.page.buttonGroupState = "init";
+    $scope.page.variations = [];
+    $scope.page.navigation = [
+        {
+            name: "Variations",
+            icon: "icon-documents",
+            action: function() {
+                $scope.showVariations();
+            }
+        },
+        {
+            name: "Actions",
+            icon: "icon-list",
+            action: function() {
+                alert("actions");
+            }
+        }
+    ];
 
     function init(content) {
 
@@ -44,6 +61,7 @@ function ContentEditController($scope, $rootScope, $routeParams, $q, $timeout, $
                 entityResource.getAncestors(content.id, "document")
                .then(function (anc) {
                    $scope.ancestors = anc;
+                   variationsHelper.setMaster($scope.content);
                });
             }
         }
@@ -61,8 +79,8 @@ function ContentEditController($scope, $rootScope, $routeParams, $q, $timeout, $
 
             //it's a child item, just sync the ui node to the parent
             navigationService.syncTree({ tree: "content", path: path.substring(0, path.lastIndexOf(",")).split(","), forceReload: initialLoad !== true });
-            
-            //if this is a child of a list view and it's the initial load of the editor, we need to get the tree node 
+
+            //if this is a child of a list view and it's the initial load of the editor, we need to get the tree node
             // from the server so that we can load in the actions menu.
             umbRequestHelper.resourcePromise(
                 $http.get(content.treeNodeUrl),
@@ -85,7 +103,7 @@ function ContentEditController($scope, $rootScope, $routeParams, $q, $timeout, $
             content: $scope.content,
             action: args.action
         }).then(function (data) {
-            //success            
+            //success
             init($scope.content);
             syncTreeNode($scope.content, data.path);
 
@@ -125,7 +143,7 @@ function ContentEditController($scope, $rootScope, $routeParams, $q, $timeout, $
 
                 $scope.content = data;
 
-                init($scope.content);                
+                init($scope.content);
 
                 resetLastListPageNumber($scope.content);
 
@@ -212,9 +230,9 @@ function ContentEditController($scope, $rootScope, $routeParams, $q, $timeout, $
 
         if (!$scope.busy) {
 
-            // Chromes popup blocker will kick in if a window is opened 
+            // Chromes popup blocker will kick in if a window is opened
             // outwith the initial scoped request. This trick will fix that.
-            //  
+            //
             var previewWindow = $window.open('preview/?id=' + content.id, 'umbpreview');
             $scope.save().then(function (data) {
                 // Build the correct path so both /#/ and #/ work.
@@ -227,6 +245,40 @@ function ContentEditController($scope, $rootScope, $routeParams, $q, $timeout, $
 
     };
 
+    $scope.variationsAreVisible = false;
+
+    $scope.showVariations = function() {
+        $scope.page.variations = variationsHelper.getVariations();
+        console.log($scope.page.variations);
+        $scope.variationsAreVisible = true;
+    };
+
+    $scope.hideVariations = function() {
+        $scope.variationsAreVisible = false;
+    };
+
+    $scope.createVariation = function(variation) {
+        variationsHelper.createVariation(variation);
+    };
+
+    $scope.clickVariation = function(variation, event, index) {
+        $scope.content = null;
+        $scope.content = variation;
+        $scope.hideVariations();
+    };
+
+    $scope.saveVariation = function(variation, event, index) {
+        variationsHelper.saveVariation(variation);
+    };
+
+    $scope.cloneVariation = function(variation, event, index) {
+        variationsHelper.cloneVariation(variation, event, index);
+    };
+
+    $scope.deleteVariation = function(variation, event, index) {
+        variationsHelper.deleteVariation(variation, event, index);
+    };
+
 }
 
 angular.module("umbraco").controller("Umbraco.Editors.Content.EditController", ContentEditController);

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

@@ -10,12 +10,13 @@
       <umb-editor-view ng-if="!page.loading" umb-tabs>
 
          <umb-editor-header
-            menu="page.menu"
             name="content.name"
             tabs="content.tabs"
+            navigation="page.navigation"
             hide-icon="true"
             hide-description="true"
-            hide-alias="true">
+            hide-alias="true"
+            variation-name="content.variationName">
          </umb-editor-header>
 
 
@@ -81,5 +82,21 @@
 
       </umb-editor-view>
 
+      <umb-editor-backdrop
+        ng-if="variationsAreVisible"
+        on-close-backdrop="hideVariations">
+
+          <umb-variations
+            variations="page.variations"
+            on-create-variation="createVariation"
+            on-save-variation="saveVariation"
+            on-click-variation="clickVariation"
+            on-clone-variation="cloneVariation"
+            on-delete-variation="deleteVariation">
+          </umb-variations>
+
+
+      </umb-editor-backdrop>
+
    </form>
 </div>

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

@@ -0,0 +1,15 @@
+(function() {
+    'use strict';
+
+    function VariationsController() {
+
+        var vm = this;
+
+        alert("hello from my controller");
+
+
+
+    }
+
+    angular.module("umbraco").controller("Umbraco.Editors.Content.VariationsController", VariationsController);
+})();

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

@@ -0,0 +1 @@
+This is my view