CS-14010

Add 'about' dialog to the CloudStack top header, showing current verison
information.

Patch submitted by: oyla.smola@gmail.com
Reviewed-by: brian

ui/css/cloudstack3.css

@@ -351,6 +351,68 @@ body.login {
   background: #FFFFFF;
 }
 
+/*About dialog*/
+.dialog-about .ui-widget-content {
+  padding-left: 0;
+  padding-right: 0;
+  width: 100% !important;
+}
+
+.dialog-about .logo {
+  font-size: 26px;
+  color: #636363;
+  padding-top: 20px;
+}
+
+.dialog-about .version {
+  font-size: 12px;
+  padding-top: 10px;
+}
+
+.dialog-about .ui-button {
+  float: none;
+  margin: 0 auto;
+}
+
+#browser div.panel div.detail-view .toolbar {
+  width: 594px;
+}
+
+div.list-view table tbody td span {
+  display: block;
+  float: left;
+  max-width: 210px;
+  word-wrap: break-word;
+  text-indent: 0;
+  margin-left: 12px;
+  line-height: 15px;
+  overflow: auto;
+  overflow-x: hidden;
+}
+
+div.list-view div.toolbar div.section-switcher div.section-select label {
+  margin: 0 9px 0 0;
+}
+
+.loading-overlay {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  left: 0px;
+  top: 0px;
+  background: #F2F2F2 url(../images/ajax-loader.gif) no-repeat center;
+  z-index: 500;
+  /*+opacity:70%;*/
+  filter: alpha(opacity=70);
+  -ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=70);
+  -moz-opacity: 0.7;
+  opacity: 0.7;
+}
+
+.detail-view .ui-tabs-panel .loading-overlay {
+  background-position: 50% 250px;
+}
+
 /*Install wizard*/
 .install-wizard {
   width: 1024px;
@@ -1579,45 +1641,6 @@ div.details div.detail-group td.value input[type=text] {
   width: 93%;
 }
 
-#browser div.panel div.detail-view .toolbar {
-  width: 594px;
-}
-
-div.list-view table tbody td span {
-  display: block;
-  float: left;
-  max-width: 210px;
-  word-wrap: break-word;
-  text-indent: 0;
-  margin-left: 12px;
-  line-height: 15px;
-  overflow: auto;
-  overflow-x: hidden;
-}
-
-div.list-view div.toolbar div.section-switcher div.section-select label {
-  margin: 0 9px 0 0;
-}
-
-.loading-overlay {
-  position: absolute;
-  width: 100%;
-  height: 100%;
-  left: 0px;
-  top: 0px;
-  background: #F2F2F2 url(../images/ajax-loader.gif) no-repeat center;
-  z-index: 500;
-  /*+opacity:70%;*/
-  filter: alpha(opacity=70);
-  -ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=70);
-  -moz-opacity: 0.7;
-  opacity: 0.7;
-}
-
-.detail-view .ui-tabs-panel .loading-overlay {
-  background-position: 50% 250px;
-}
-
 /*** Actions*/
 div.detail-group.actions {
   padding: 0;

ui/scripts/cloudStack.js

@@ -132,6 +132,8 @@
 						
 						g_userProjectsEnabled = json.listcapabilitiesresponse.capability.allowusercreateprojects;
             $.cookie('userProjectsEnabled', g_userProjectsEnabled, { expires: 1 });
+			
+            g_cloudstackversion = json.listcapabilitiesresponse.capability.cloudstackversion;
 						
             userValid = true;
           },
@@ -243,6 +245,8 @@
 
                 g_userProjectsEnabled = json.listcapabilitiesresponse.capability.allowusercreateprojects;
                 $.cookie('userProjectsEnabled', g_userProjectsEnabled, { expires: 1 });
+				
+                g_cloudstackversion = json.listcapabilitiesresponse.capability.cloudstackversion;
 
                 args.response.success({
                   data: {

ui/scripts/sharedFunctions.js

@@ -21,6 +21,7 @@ var g_timezoneoffset = null;
 var g_timezone = null;
 var g_supportELB = null;
 var g_userPublicTemplateEnabled = "true";
+var g_cloudstackversion = null;
 
 //keyboard keycode
 var keycode_Enter = 13;

ui/scripts/ui/core.js

@@ -257,7 +257,7 @@
     // User options
     var $options = $('<div>').attr({ id: 'user-options' })
           .appendTo($('#header'));
-    $(['label.logout', 'label.help']).each(function() {
+    $(['label.logout', 'label.help', 'About']).each(function() {
       var $link = $('<a>')
             .attr({ href: '#' })
             .html(_l(this.toString()))
@@ -268,6 +268,28 @@
           var helpURL = 'http://docs.cloud.com/CloudStack_Documentation';
 
           window.open(helpURL, '_blank');
+          
+          return false;
+        });
+      }
+      if (this == 'About') {
+        $link.click(function() {
+          var $logo = $('<div>').addClass('logo').html('CloudStack'),
+          $version = $('<div>').addClass('version').html(g_cloudstackversion),
+          $about = $('<div>').addClass('about').append($logo).append($version);
+          $about.dialog({
+            modal: true,
+            width: 300,
+            title: 'About CloudStack',
+            closeOnEscape: false,
+            dialogClass: 'dialog-about',
+            buttons: {
+              'Close': function() {
+                $( this ).dialog( "close" );
+                $(':ui-dialog, .overlay').remove();
+              }
+            }
+          }).closest('.ui-dialog').overlay();
 
           return false;
         });