display segments in variant picker

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

@@ -107,6 +107,7 @@
 @import "components/overlays.less";
 @import "components/card.less";
 @import "components/editor/umb-editor.less";
+@import "components/editor/umb-variant-switcher.less";
 @import "components/umb-sub-views.less";
 @import "components/umb-editor-navigation.less";
 @import "components/umb-editor-navigation-item.less";

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

@@ -0,0 +1,321 @@
+/* variant switcher */
+.umb-variant-switcher__toggle {
+    position: relative;
+	display: flex;
+	align-items: center;
+	padding: 0 10px; 
+    margin: 1px 1px;
+    right: 0;
+    height: 30px;
+	text-decoration: none !important;
+	font-size: 13px;
+    color: @ui-action-discreet-type;
+    background: transparent;
+    border: none;
+    
+    max-width: 50%;
+    white-space: nowrap;
+    
+    user-select: none;
+    
+    span {
+        text-overflow: ellipsis;
+        overflow: hidden;
+    }
+}
+
+button.umb-variant-switcher__toggle {
+	transition: color 0.2s ease-in-out;
+	&:hover {
+		//background-color: @gray-10;
+        color: @ui-action-discreet-type-hover;
+        .umb-variant-switcher__expand {
+            color: @ui-action-discreet-type-hover;
+        }
+	}
+    
+    &.--error {
+        &::before {
+            content: '!';
+            position: absolute;
+            top: -8px;
+            right: -10px;
+            display: inline-flex;
+            align-items: center;
+            justify-content: center;
+            width: 20px;
+            height: 20px;
+            border-radius: 10px;
+            text-align: center;
+            font-weight: bold;
+            background-color: @errorBackground;
+            color: @errorText;
+        }
+    }
+}
+
+.umb-variant-switcher__expand {
+    color: @ui-action-discreet-type;
+	margin-top: 3px;
+	margin-left: 5px;
+	margin-right: -5px;
+    transition: color 0.2s ease-in-out;
+}
+
+
+.umb-variant-switcher {
+    min-width: 100%;
+    max-height: 80vh;
+    overflow-y: auto;
+    margin-top: 5px;
+    user-select: none;
+}
+
+.umb-variant-switcher__item {
+	display: flex;
+    justify-content: space-between;
+	align-items: center;
+	border-bottom: 1px solid @gray-9;
+    position: relative;
+    .umb-variant-switcher__name-wrapper:hover {
+        .umb-variant-switcher__name {
+            color: @blueMid;
+        }
+        .umb-variant-switcher__state {
+            color: @blueMid;
+        }
+    }
+}
+.umb-variant-switcher__item.--state-notCreated:not(.--active) {
+    .umb-variant-switcher__name-wrapper::before {
+        content: "+";
+        display: block;
+        float: left;
+        font-size: 15px;
+        font-weight: 900;
+        padding: 8px 16px 8px 6px;
+        color: @gray-5;
+    }
+    .umb-variant-switcher__item-expand-button + .umb-variant-switcher__name-wrapper::before {
+        padding: 8px 16px 8px 20px;
+    }
+    .umb-variant-switcher__name {
+        color: @gray-5;
+    }
+    .umb-variant-switcher__state {
+        color: @gray-6;
+    }
+    .umb-variant-switcher__name-wrapper::after {
+        content: "";
+        position: absolute;
+        z-index: 1;
+        border: 1px dashed @gray-9;
+        top: 7px;
+        bottom: 7px;
+        left: 7px;
+        right: 7px;
+        border-radius: 3px;
+        pointer-events: none;
+    }
+    
+    .umb-variant-switcher__name-wrapper:hover {
+        &::before {
+            color: @blueMid;
+        }
+        .umb-variant-switcher__name {
+            color: @blueMid;
+        }
+        .umb-variant-switcher__state {
+            color: @blueMid;
+        }
+    }
+}
+/*
+.umb-variant-switcher__item.--state-draft {
+    .umb-variant-switcher__name {
+        color: @gray-5;
+    }
+    &:hover {
+        .umb-variant-switcher__name {
+            color: @blueMid;
+        }
+    }
+}
+*/
+
+.umb-variant-switcher.--has-sub-variants {
+    .umb-variant-switcher__item {
+        
+    }
+}
+
+.umb-variant-switcher__item-expand-button {
+    text-decoration: none;
+    display: inline-block;
+    flex: 0;
+    align-self: stretch;
+
+    padding-left: 22px !important;
+    padding-right: 14px !important;
+
+    font-size: 12px;
+
+    * {
+        pointer-events: none;
+    }
+}
+
+.umb-variant-switcher__item:last-child {
+	border-bottom: none;
+}
+
+.umb-variant-switcher__item.--current {
+    //color: @ui-light-active-type;
+    //background-color: @pinkExtraLight;
+    .umb-variant-switcher__name {
+        //color: @ui-light-active-type;
+        font-weight: 700;
+    }
+    &::before {
+        content: '';
+        position: absolute;
+        border-radius: 0 4px 4px 0;
+        background-color: @ui-active-border;
+        width: 4px;
+        top:8px;
+        bottom: 8px;
+        left:0;
+        z-index:1;
+        pointer-events: none;
+    }
+}
+
+.umb-variant-switcher__item:hover {
+	outline: none;
+}
+
+.umb-variant-switcher__item.--active:not(.--current) .umb-variant-switcher__name-wrapper:hover {
+	//background-color: @white !important;
+	cursor: default;
+}
+
+.umb-variant-switcher__item:hover .umb-variant-switcher__split-view {
+	display: block;
+	cursor: pointer;
+}
+
+.umb-variant-switcher__item.--error {
+    .umb-variant-switcher__name {
+        color: @red;
+        &::after {
+            content: '!';
+            position: relative;
+            display: inline-flex;
+            align-items: center;
+            justify-content: center;
+            margin-left: 5px;
+            top: -3px;
+            width: 14px;
+            height: 14px;
+            border-radius: 7px;
+            font-size: 8px;
+            text-align: center;
+            font-weight: bold;
+            background-color: @errorBackground;
+            color: @errorText;
+        }
+    }
+}
+
+.umb-variant-switcher__name-wrapper {
+    font-size: 14px;
+    text-align: left;
+	flex: 1;
+	cursor: pointer;
+    background-color: transparent;
+    border: none;
+}
+.dropdown-menu>li {
+    > .umb-variant-switcher__name-wrapper {
+        padding-top: 10px;
+        padding-bottom: 10px;
+    }
+
+    > .umb-variant-switcher__item-expand-button + .umb-variant-switcher__name-wrapper {
+        padding-left: 5px;
+    }
+}
+
+
+.umb-variant-switcher__name {
+    display: block;
+    font-weight: 600;
+    margin-bottom: -2px;
+}
+
+.umb-variant-switcher__state {
+	font-size: 12px;
+	color: @gray-4;
+}
+
+.umb-variant-switcher__split-view {
+    font-size: 12px;
+    display: none;
+    padding: 18px 20px;
+    position: absolute;
+    right: 0;
+    top: 0;
+    bottom: 0;
+    background-color: @white;
+
+    &:hover {
+        background-color: @ui-option-hover;
+        color: @ui-option-type-hover;
+    }
+}
+
+
+.umb-variant-switcher__sub-variants {
+
+    position: relative;
+    border-bottom: 1px solid @gray-9;
+    background-color: @gray-13;
+    /*
+    &::before {
+        content: "";
+        position: absolute;
+        z-index: 1;
+        top: 0px;
+        left: 20px;
+        width: 4px;
+        bottom: 14px;
+        border-bottom-left-radius: 2px;
+        border-bottom-right-radius: 2px;
+        background-color: @gray-8;
+    }
+    */
+    .umb-variant-switcher__item {
+        border-bottom-color: @gray-10;
+    }
+
+    .umb-variant-switcher__name-wrapper {
+
+        margin-left: 48px;
+        padding-left: 20px;
+        
+        padding-top: 10px;
+        padding-bottom: 10px;
+
+        &:hover {
+            color: @ui-option-type-hover;
+            background-color: @ui-option-hover;
+        }
+
+        .umb-variant-switcher__name {
+            //margin-right: 20px;
+        }
+        .umb-variant-switcher__state {
+            //flex: 0 0 200px;
+        }
+    }
+}

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

@@ -36,7 +36,8 @@
                                required
                                aria-required="true"
                                aria-invalid="{{contentForm.headerNameForm.headerName.$invalid ? true : false}}"
-                               autocomplete="off" maxlength="255" />
+                               autocomplete="off"
+                               maxlength="255" />
                     </ng-form>
 
                     <button type="button" ng-if="vm.hasVariants === true && hideChangeVariant !== true" class="umb-variant-switcher__toggle umb-outline" ng-click="vm.dropdownOpen = !vm.dropdownOpen" ng-class="{'--error': vm.errorsOnOtherVariants}">
@@ -48,18 +49,39 @@
                         <span ng-bind="getVariantDisplayName(editor.content)"></span>
                     </span>
 
-                    <umb-dropdown ng-if="vm.dropdownOpen" style="min-width: 100%; max-height: 250px; overflow-y: auto; margin-top: 5px;" on-close="vm.dropdownOpen = false" umb-keyboard-list>
+                    <umb-dropdown ng-if="vm.dropdownOpen" class="umb-variant-switcher" ng-class="{'--has-sub-variants': vm.hasSegment === true}" on-close="vm.dropdownOpen = false" umb-keyboard-list>
                         <umb-dropdown-item
-                            ng-repeat="variant in content.variants track by $index"
+                            ng-repeat-start="entry in vm.variantMenu track by $index"
                             class="umb-variant-switcher__item"
-                            ng-class="{'--current': variant === editor.content, '--not-allowed': variant.active && vm.dropdownOpen, '--error': variantHasError(variant)}"
+                            ng-class="{'--current': entry.variant === editor.content, '--active': entry.variant.active && vm.dropdownOpen, '--error': variantHasError(entry.variant), '--state-notCreated':entry.variant.state==='NotCreated', '--state-draft':entry.variant.state==='Draft'}"
                         >
-                            <button type="button" class="umb-variant-switcher__name-wrapper" ng-click="selectVariant($event, variant)" prevent-default>
-                                <span class="umb-variant-switcher__name" ng-bind="getVariantDisplayName(variant)"></span>
-                                <umb-variant-state variant="variant" class="umb-variant-switcher__state"></umb-variant-state>
+                            <button type="button" ng-if="entry.subVariants && entry.subVariants.length > 0" class="umb-variant-switcher__item-expand-button umb-outline" ng-click="entry.open = !entry.open">
+                                <i class="icon icon-navigation-down" ng-if="entry.open"></i>
+                                <i class="icon icon-navigation-right" ng-if="!entry.open"></i>
                             </button>
-                            <div ng-if="splitViewOpen !== true && !variant.active" class="umb-variant-switcher__split-view" ng-click="openInSplitView($event, variant)">Open in split view</div>
+                            <button type="button" class="umb-variant-switcher__name-wrapper umb-outline" ng-click="selectVariant($event, entry.variant)" prevent-default>
+                                <span class="umb-variant-switcher__name" ng-bind="entry.variant.language ? entry.variant.language.name : entry.variant.segment"></span>
+                                <umb-variant-state variant="entry.variant" class="umb-variant-switcher__state"></umb-variant-state>
+                            </button>
+                            <div ng-if="splitViewOpen !== true && !entry.variant.active" class="umb-variant-switcher__split-view" ng-click="openInSplitView($event, entry.variant)">Open in split view</div>
                         </umb-dropdown-item>
+                        <div
+                            ng-repeat-end
+                            ng-if="entry.open === true && entry.subVariants && entry.subVariants.length > 0"
+                            class="umb-variant-switcher__sub-variants umb-outline"
+                        >
+                            <umb-dropdown-item
+                                ng-repeat="subVariant in entry.subVariants track by $index"
+                                class="umb-variant-switcher__item"
+                                ng-class="{'--current': subVariant === editor.content, '--active': subVariant.active && vm.dropdownOpen, '--error': variantHasError(subVariant), '--state-notCreated':subVariant.state==='NotCreated', '--state-draft':subVariant.state==='Draft'}"
+                            >
+                                <button type="button" class="umb-variant-switcher__name-wrapper umb-outline" ng-click="selectVariant($event, subVariant)" prevent-default>
+                                    <span class="umb-variant-switcher__name" ng-bind="subVariant.segment"></span>
+                                    <umb-variant-state variant="subVariant" class="umb-variant-switcher__state"></umb-variant-state>
+                                </button>
+                                <div ng-if="splitViewOpen !== true && !subVariant.active" class="umb-variant-switcher__split-view" ng-click="openInSplitView($event, subVariant)">Open in split view</div>
+                            </umb-dropdown-item>
+                        </div>
                     </umb-dropdown>
 
                 </div>