get the create date from the variant

src/Umbraco.Web.UI.Client/src/common/directives/components/content/edit.controller.js

@@ -158,6 +158,10 @@
             });
             contentApp.viewModel = variant;
 
+            // emit variant change event so content apps can update content
+            var args = { "node": $scope.content, "variant": variant };
+            eventsService.emit("editors.content.changeVariant", args);
+
             return variant;
         }
 

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

@@ -6,7 +6,7 @@
         function link(scope, element, attrs, ctrl) {
 
             var evts = [];
-            var isInfoTab = false;
+            var isInfoApp = false;
             var labels = {};
             scope.publishStatus = [];
 
@@ -16,6 +16,11 @@
             
             function onInit() {
 
+                //get the current variant
+                scope.activeVariant = _.find(scope.node.variants, function (variant) {
+                    return variant.active;
+                });
+
                 userService.getCurrentUser().then(function(user){
                         // only allow change of media type if user has access to the settings sections
                         angular.forEach(user.sections, function(section){
@@ -42,7 +47,7 @@
                         labels.publishedPendingChanges = data[3];
                         labels.notCreated = data[4];
 
-                        setNodePublishStatus(scope.node);
+                        setPublishState(scope.node, scope.activeVariant);
 
                     });
 
@@ -172,49 +177,40 @@
                 });
             }
 
-            function setNodePublishStatus(node) {
+            function setPublishState(node, variant) {
 
-                // deleted node
+                var state = {};
-                if (node.trashed === true) {
+
-                    scope.publishStatus.push({
+                if (node.trashed) {
-                        label: labels.deleted,
+                    // deleted node
-                        color: "danger"
+                    state.label = labels.deleted;
-                    });
+                    state.color = "danger";
                     return;
                 }
 
-                if (node.variants) {
+                if (variant.state === "NotCreated") {
-                    for (var i = 0; i < node.variants.length; i++) {
+                    // not created variant
-
+                    state.label = labels.notCreated;
-                        var variant = node.variants[i];
+                    state.color = "gray";
-
-                        var status = {
-                            culture: variant.language ? variant.language.culture : null
-                        };
-
-                        if (variant.state === "NotCreated") {
-                            status.label = labels.notCreated;
-                            status.color = "gray";
-                        }
-                        else if (variant.state === "Draft") {
-                            // draft node
-                            status.label = labels.unpublished;
-                            status.color = "gray";
-                        }
-                        else if (variant.state === "Published") {
-                            // published node
-                            status.label = labels.published;
-                            status.color = "success";
-                        }
-                        else if (variant.state === "PublishedPendingChanges") {
-                            // published node with pending changes
-                            status.label = labels.publishedPendingChanges;
-                            status.color = "success";
-                        }
-                        
-                        scope.publishStatus.push(status);
-                    }
                 }
+                else if (variant.state === "Draft") {
+                    // draft variant
+                    state.label = labels.unpublished;
+                    state.color = "gray";
+                }
+                else if (variant.state === "Published") {
+                    // published variant
+                    state.label = labels.published;
+                    state.color = "success";
+                }
+                else if (variant.state === "PublishedPendingChanges") {
+                    // published variant with pending changes
+                    state.label = labels.publishedPendingChanges;
+                    state.color = "success";
+                }
+
+                scope.variantState = state;
+
             }
 
             function setPublishDate(date) {
@@ -292,7 +288,7 @@
             function formatDatesToLocal() {
                 // get current backoffice user and format dates
                 userService.getCurrentUser().then(function (currentUser) {
-                    scope.node.createDateFormatted = dateHelper.getLocalDate(scope.node.createDate, currentUser.locale, 'LLL');
+                    scope.activeVariant.createDateFormatted = dateHelper.getLocalDate(scope.activeVariant.createDate, currentUser.locale, 'LLL');
                     
                     scope.node.releaseDateYear = scope.node.releaseDate ? ucfirst(dateHelper.getLocalDate(scope.node.releaseDate, currentUser.locale, 'YYYY')) : null;
                     scope.node.releaseDateMonth = scope.node.releaseDate ? ucfirst(dateHelper.getLocalDate(scope.node.releaseDate, currentUser.locale, 'MMMM')) : null;
@@ -312,24 +308,30 @@
             evts.push(eventsService.on("app.tabChange", function (event, args) {
                 $timeout(function(){
                     if (args.alias === "info") {
-                        isInfoTab = true;
+                        isInfoApp = true;
                         loadAuditTrail();
                     } else {
-                        isInfoTab = false;
+                        isInfoApp = false;
                     }
                 });
             }));
 
+            // listen for variant change so we can update the content
+            evts.push(eventsService.on("editors.content.changeVariant", function (event, args) {
+                setPublishState(args.node, args.variant);
+                formatDatesToLocal();
+            }));
+
             // watch for content updates - reload content when node is saved, published etc.
             scope.$watch('node.updateDate', function(newValue, oldValue){
 
                 if(!newValue) { return; }
-                if(newValue === oldValue) { return; }             
+                if(newValue === oldValue) { return; }
                 
                 if(isInfoTab) {
                     loadAuditTrail();
                     formatDatesToLocal();
-                    setNodePublishStatus(scope.node);
+                    setPublishState(scope.node);
                 }
             });
 

src/Umbraco.Web.UI.Client/src/views/components/content/umb-content-node-info.html

@@ -169,16 +169,11 @@
             <umb-box-content class="block-form">
 
                 <umb-control-group data-element="node-info-status" label="@general_status">
-                    <div ng-repeat="status in publishStatus" style="margin-bottom: 5px;">
+                    <umb-badge size="xs" color="{{variantState.color}}">{{variantState.label}}</umb-badge>
-                        <span ng-if="status.culture"><em>{{status.culture}}: </em></span>
-                        <umb-badge size="xs" color="{{status.color}}">
-                            {{status.label}}
-                        </umb-badge>
-                    </div>
                 </umb-control-group>
 
                 <umb-control-group data-element="node-info-create-date" label="@template_createdDate">
-                    {{node.createDateFormatted}} <localize key="general_by">by</localize> {{ node.owner.name }}
+                    {{activeVariant.createDateFormatted}} <localize key="general_by">by</localize> {{ node.owner.name }}
                 </umb-control-group>
 
                 <umb-control-group data-element="node-info-document-type" label="@content_documentType">