added dots to website/language selector

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

@@ -1,10 +1,13 @@
 (function() {
     'use strict';
 
-    function EditorHeaderDirective(iconHelper) {
+    function EditorHeaderDirective(iconHelper, variationsHelper) {
 
         function link(scope, el, attr, ctrl) {
 
+            scope.showVariationsQuickSwitch = false;
+            scope.variations = variationsHelper.getVariations();
+
             scope.openIconPicker = function() {
                 scope.dialogModel = {
                     view: "iconpicker",
@@ -24,6 +27,10 @@
                     }
                 };
             };
+
+            scope.toggleVariationsQuickSwitch = function() {
+                scope.showVariationsQuickSwitch = !scope.showVariationsQuickSwitch;
+            };
         }
 
         var directive = {

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

@@ -0,0 +1,76 @@
+(function() {
+    'use strict';
+
+    function WebsiteSelector() {
+
+        function link(scope, el, attr, ctrl) {
+
+            scope.showWebsiteDropdown = false;
+            scope.selectedWebsite = {};
+
+            function activate() {
+                for(var i = 0; i < scope.websites.length; i++) {
+                    var website = scope.websites[i];
+                    if(website.selected) {
+                        scope.selectedWebsite = website;
+                    }
+                }
+            }
+
+            scope.toggleWebsiteDropDown = function() {
+                scope.showWebsiteDropdown = !scope.showWebsiteDropdown;
+            };
+
+            scope.closeWebsiteDropDown = function() {
+                scope.showWebsiteDropdown = false;
+            };
+
+            scope.createWebsite = function() {
+                if(scope.onCreateWebsite) {
+                    scope.onCreateWebsite();
+                    scope.closeWebsiteDropDown();
+                }
+            };
+
+            scope.clickWebsite = function(website) {
+                if(scope.onClickWebsite) {
+                    scope.onClickWebsite(website);
+                    setSelectedWebsite(website, scope.websites);
+                    scope.closeWebsiteDropDown();
+                }
+            };
+
+            function setSelectedWebsite(selectedWebsite, websites) {
+                for(var i = 0; i < websites.length; i++) {
+                    var website = websites[i];
+                    website.selected = false;
+                }
+                selectedWebsite.selected = true;
+                scope.selectedWebsite = selectedWebsite;
+            }
+
+            scope.$watch('websites', function(newValue, oldValue){
+                activate();
+            }, true);
+
+
+        }
+
+        var directive = {
+            restrict: 'E',
+            replace: true,
+            templateUrl: 'views/components/umb-website-selector.html',
+            link: link,
+            scope: {
+                websites: "=",
+                onCreateWebsite: "=",
+                onClickWebsite: "="
+            }
+        };
+
+        return directive;
+    }
+
+    angular.module('umbraco.directives').directive('umbWebsiteSelector', WebsiteSelector);
+
+})();

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/controllers/navigation.controller.js

@@ -155,6 +155,53 @@ function NavigationController($scope, $rootScope, $location, $log, $routeParams,
         }
     };
 
+    $scope.websites = [
+        {
+            name: "English",
+            language: "en-UK",
+            selected: true
+        },
+        {
+            name: "Dansk",
+            language: "da-DK",
+            selected: false
+        }
+    ];
+
+    $scope.createWebsite = function() {
+
+        $scope.createWebsiteOverlay = {
+            view: "createwebsite",
+            title: "Create website",
+            submitButtonLabel: "Create website",
+            show: true,
+            submit: function(model) {
+
+                // deselct all current sites
+                for(var i = 0; i < $scope.websites.length; i++) {
+                    var website = $scope.websites[i];
+                    website.selected = false;
+                }
+
+                // set new site to selected and push to scope
+                model.website.selected = true;
+                $scope.websites.push(model.website);
+
+                // clsoe overlay
+                $scope.createWebsiteOverlay.show = false;
+                $scope.createWebsiteOverlay = null;
+            },
+            close: function() {
+                $scope.createWebsiteOverlay.show = false;
+                $scope.createWebsiteOverlay = null;
+            }
+        };
+
+    };
+
+    $scope.clickWebsite = function(website) {
+    };
+
     //ensure to unregister from all events!
     $scope.$on('$destroy', function () {
         for (var e in evts) {

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

@@ -108,7 +108,8 @@
 @import "components/umb-empty-state.less";
 @import "components/umb-property-editor.less";
 @import "components/umb-iconpicker.less";
-
+@import "components/umb-website-selector.less";
+@import "components/umb-dots.less";
 @import "components/buttons/umb-button.less";
 @import "components/buttons/umb-button-group.less";
 

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

@@ -152,6 +152,30 @@
     }
 }
 
+/* ---------- OVERLAY TREE ---------- */
+.umb-overlay.umb-overlay-tree {
+    position: absolute;
+    width: 500px;
+    top: 0;
+    left: 100%;
+    bottom: 0;
+    border: none;
+    //box-shadow: 0 0 20px rgba(0,0,0,0.19), 0 0 6px rgba(0,0,0,0.23);
+    box-shadow: 3px 0 7px #dbdbdb;
+    display: inline-block;
+}
+
+.umb-overlay.umb-overlay-tree .umb-overlay-header {
+    flex-basis: 100px;
+    padding: 20px;
+    box-sizing: border-box;
+}
+
+.umb-overlay.umb-overlay-tree .umb-overlay-container {
+    padding: 20px;
+}
+
+
 /* ---------- OVERLAY ITEM DETAILS ---------- */
 .umb-overlay__item-details {
     position: absolute;

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

@@ -0,0 +1,26 @@
+.umb-dots {
+    position: relative;
+    width: 5px;
+    height: 5px;
+    background-color: @gray;
+    border-radius: 50%;
+}
+
+.umb-dots:before,
+.umb-dots:after {
+    display: block;
+    position: absolute;
+	content: '';
+    width: 5px;
+    height: 5px;
+    background-color: @gray;
+    border-radius: 50%;
+}
+
+.umb-dots:before {
+    transform: translateX(-8px);
+}
+
+.umb-dots:after {
+    transform: translateX(8px);
+}

src/Umbraco.Web.UI.Client/src/less/components/umb-website-selector.less

@@ -0,0 +1,109 @@
+.umb-website-selector {
+    border-bottom: 1px solid #d9d9d9;
+    display: flex;
+    align-items: stretch;
+    height: 50px;
+    position: relative;
+}
+
+
+.umb-website-selector__create-website {
+    display: flex;
+    width: 100%;
+    justify-content: center;
+    align-items: center;
+    color: @blue;
+}
+
+.umb-website-selector__dropdown-toggle {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: space-between;
+    width: 100%;
+    box-sizing: border-box;
+    padding-left: 20px;
+    padding-right: 20px;
+    font-weight: bold;
+}
+
+.umb-website-selector__dropdown-toggle:hover,
+.umb-website-selector__dropdown-toggle:focus {
+    text-decoration: none;
+}
+
+.umb-website-selector__dropdown-toggle-content {
+    display: flex;
+    align-items: center;
+}
+
+.umb-website-selector__dropdown-toggle-name {
+    margin-right: 5px;
+}
+
+.umb-website-selector__dropdown {
+    position: absolute;
+    top: 50px;
+    left: 0;
+    right: 0;
+    z-index: 1;
+    background: #ffffff;
+}
+
+.umb-website-selector__websites {
+    margin-left: 0;
+    margin-bottom: 0;
+    list-style: none;
+    max-height: 300px;
+    overflow-y: auto;
+}
+
+.umb-website-selector__website-link {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding-top: 10px;
+    padding-right: 20px;
+    padding-bottom: 10px;
+    padding-left: 38px;
+}
+
+.umb-website-selector__website-link:hover,
+.umb-website-selector__website-link.-selected {
+    background-color: @grayLighter;
+    text-decoration: none;
+}
+
+.umb-website-selector__dropdown-action {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    padding-top: 10px;
+    padding-bottom: 10px;
+    color: @blue;
+    font-size: 12px;
+}
+
+.umb-website-selector__dropdown-arrow {
+    width: 0;
+	height: 0;
+    margin-right: 10px;
+}
+
+.umb-website-selector__dropdown-arrow.-down {
+    border-left: 4px solid transparent;
+    border-right: 4px solid transparent;
+    border-top: 4px solid @gray;
+}
+
+.umb-website-selector__dropdown-arrow.-up {
+    border-left: 4px solid transparent;
+    border-right: 4px solid transparent;
+    border-bottom: 4px solid @gray;
+}
+
+.umb-website-selector__dropdown-action:hover {
+    text-decoration: none;
+    background: @blue;
+    color: #ffffff;
+}

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

@@ -493,3 +493,66 @@ input.umb-panel-header-description {
 .umb-editor-drawer-content__left-side {
 	margin-right: auto;
 }
+
+
+
+/* --- VARIATIONS --- */
+.umb-variations-quick-switcher__toggle {
+	position: absolute;
+    top: 6px;
+    right: 10px;
+	font-size: 16px;
+}
+
+.umb-variations-quick-switcher_variations {
+	position: absolute;
+	top: 40px;
+	left: 0;
+	right: 0;
+	z-index: 20;
+	background-color: #ffffff;
+	max-height: 200px;
+	overflow-y: scroll;
+}
+
+.umb-variations-quick-switcher__variation {
+	display: flex;
+	flex-direction: row;
+	align-items: center;
+	padding: 10px 15px;
+}
+
+.umb-variations-quick-switcher__variation:last-child {
+	border-bottom: none;
+}
+
+.umb-variations-quick-switcher__variation:hover,
+.umb-variations-quick-switcher__variation:focus {
+	background-color: @grayLighter;
+	text-decoration: none;
+	outline: none;
+}
+
+.umb-variations-quick-switcher__variation-published-state {
+	display: block;
+	width: 8px;
+	height: 8px;
+	border-radius: 50%;
+	background-color: @grayLight;
+	margin-right: 10px;
+}
+
+.umb-variations-quick-switcher__variation-published-state.-published {
+	background-color: @green;
+}
+
+.umb-variations-quick-switcher__variation-name {
+	font-size: 12px;
+	font-weight: bold;
+}
+
+.umb-variations-quick-switcher__variation-description {
+	font-size: 12px;
+	color: @gray;
+	margin-left: 10px;
+}

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

@@ -0,0 +1,15 @@
+(function() {
+    "use strict";
+
+    function CreateWebsiteOverlay($scope) {
+
+        var vm = this;
+
+        $scope.model.website = {};
+
+
+    }
+
+    angular.module("umbraco").controller("Umbraco.Overlay.CreateWebsiteOverlay", CreateWebsiteOverlay);
+
+})();

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

@@ -0,0 +1,26 @@
+<div ng-controller="Umbraco.Overlay.CreateWebsiteOverlay as vm">
+
+    <div class="umb-control-group control-group">
+        <label>Website name</label>
+        <input type="text" ng-model="model.website.name" />
+    </div>
+
+    <div class="umb-control-group control-group">
+        <label>Website language</label>
+        <select ng-model="model.website.language">
+            <option value="aa-DJ">Afar (Djinouti) [aa-DJ]</option>
+            <option value="aa-ER">Afar (Eritrea) [aa-ER]</option>
+            <option value="aa-ET">Afar (Ethiopia) [aa-ET]</option>
+        </select>
+    </div>
+
+    <div class="umb-control-group control-group">
+        <label>Create blank</label>
+        <input type="checkbox" ng-model="model.website.blank" />
+        <label>Copy all</label>
+        <input type="checkbox" ng-model="model.website.copyAll" />
+        <label>Copy selected</label>
+        <input type="checkbox" ng-model="model.website.copySelected" />
+    </div>
+
+</div>

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

@@ -65,8 +65,14 @@
 
             </div>
 
+            <umb-website-selector
+                websites="websites"
+                on-create-website="createWebsite"
+                on-click-website="clickWebsite">
+            </umb-website-selector>
+
             <!-- the tree -->
-            <div id="tree" class="umb-modalcolumn-body" ng-if="authenticated">
+            <div id="tree" ng-if="authenticated && websites.length > 0">
                 <umb-tree
                     cachekey="_"
                     eventhandler="treeEventHandler"
@@ -87,6 +93,12 @@
                 </umb-context-menu>
             </div>
 
+            <umb-overlay
+                ng-if="createWebsiteOverlay.show"
+                model="createWebsiteOverlay"
+                view="createWebsiteOverlay.view"
+                position="tree">
+            </umb-overlay>
 
             <!-- Tree dialogs -->
             <div id="dialog" class='umb-modalcolumn fill shadow'

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

@@ -31,10 +31,14 @@
 
                   <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" 
+                  <a class="umb-variations-quick-switcher__toggle" href="" ng-click="toggleVariationsQuickSwitch()">
+                      <i class="icon-documents"></i>
+                  </a>
+
+                  <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>
 

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

@@ -0,0 +1,32 @@
+<div class="umb-website-selector" on-outside-click="closeWebsiteDropDown()">
+
+    <a class="umb-website-selector__create-website" ng-if="websites.length === 0" href="" ng-click="createWebsite()">
+        Create website
+    </span>
+
+    <a class="umb-website-selector__dropdown-toggle" ng-if="websites.length > 0" href="" ng-click="toggleWebsiteDropDown()">
+        <div class="umb-website-selector__dropdown-toggle-content">
+            <span ng-if="showWebsiteDropdown" class="umb-website-selector__dropdown-arrow -up"></span>
+            <span ng-if="!showWebsiteDropdown" class="umb-website-selector__dropdown-arrow -down"></span>
+            <span class="umb-website-selector__dropdown-toggle-name">{{ selectedWebsite.name }}</span>
+            <small>({{ selectedWebsite.language }})</small>
+        </div>
+        <div class="umb-dots"></div>
+    </a>
+
+    <div class="umb-website-selector__dropdown shadow-depth-3" ng-show="showWebsiteDropdown">
+        <ul class="umb-website-selector__websites">
+            <li class="umb-website-selector__website" ng-repeat="website in websites | filter:{ selected: '!'+true }">
+                <a class="umb-website-selector__website-link" ng-click="clickWebsite(website)" href="" ng-class="{'-selecetd': website.selected}">
+                    <div>
+                        <span class="umb-website-selector__website-name">{{ website.name}}</span>
+                        <small>({{ website.language }})</small>
+                    </div>
+                    <div class="umb-dots"></div>
+                </a>
+            </li>
+        </ul>
+        <a class="umb-website-selector__dropdown-action" ng-click="createWebsite()" href="">Create website</a>
+    </div>
+
+</div>