From d6fc3f9010e5fc06e9805bcad884045a086b673d Mon Sep 17 00:00:00 2001
From: Brian Federle <brian.federle@citrix.com>
Date: Wed, 22 Feb 2012 17:31:51 -0800
Subject: [PATCH] Localizaton fixes

-Add conditional CSS for Japanese version

-Fix font wrapping in JA CSS for header bar, system dashboard

-Add some missing localization labels
---
 .../classes/resources/messages.properties     |  2 ++
 ui/css/cloudstack3.css                        | 12 ++++---
 ui/css/cloudstack3.ja.css                     | 34 +++++++++++++++++++
 ui/index.jsp                                  |  7 ++++
 ui/scripts/ui-custom/zoneChart.js             | 30 ++++++++--------
 5 files changed, 65 insertions(+), 20 deletions(-)
 create mode 100644 ui/css/cloudstack3.ja.css

diff --git a/client/WEB-INF/classes/resources/messages.properties b/client/WEB-INF/classes/resources/messages.properties
index ff7a39b30e1..363f1d500f0 100644
--- a/client/WEB-INF/classes/resources/messages.properties
+++ b/client/WEB-INF/classes/resources/messages.properties
@@ -1,4 +1,6 @@
 #new labels (begin) **********************************************************************************************
+label.system.wide.capacity=System-wide capacity
+label.network.service.providers=Network Service Providers
 message.launch.zone=Zone is ready to launch; please proceed to the next step.
 label.add.compute.offering=Add compute offering
 label.compute.offering=Compute offering
diff --git a/ui/css/cloudstack3.css b/ui/css/cloudstack3.css
index 109505c7919..8489e94f745 100644
--- a/ui/css/cloudstack3.css
+++ b/ui/css/cloudstack3.css
@@ -3381,8 +3381,10 @@ Dialogs*/
 }
 
 .dashboard.admin .dashboard-container .stats ul li .name {
-  width: 135px;
+  width: 178px;
   float: left;
+  font-size: 11px;
+  font-weight: bold;
   margin: 15px 15px 0 0;
 }
 
@@ -3946,7 +3948,7 @@ Dialogs*/
 }
 
 .system-chart.dashboard.admin .dashboard-container .stats .chart {
-  width: 286px;
+  width: 242px;
 }
 
 /** Compute*/
@@ -7375,7 +7377,7 @@ div.panel.ui-dialog div.list-view div.fixed-header {
   position: relative;
   left: 0px;
   top: -10px;
-  margin-right: 10px;
+  margin-right: 9px;
 }
 
 #header div.view-switcher.alt {
@@ -7386,9 +7388,9 @@ div.panel.ui-dialog div.list-view div.fixed-header {
   float: left;
   /*[empty]display:;*/
   width: 126px;
-  padding: 12px 0 0;
+  padding: 13px 0 0;
   margin: 0;
-  text-indent: 21px;
+  text-indent: 17px;
   position: relative;
   /*+text-shadow:0px -1px 1px #2D2D2D;*/
   -moz-text-shadow: 0px -1px 1px #2D2D2D;
diff --git a/ui/css/cloudstack3.ja.css b/ui/css/cloudstack3.ja.css
new file mode 100644
index 00000000000..8535f25d489
--- /dev/null
+++ b/ui/css/cloudstack3.ja.css
@@ -0,0 +1,34 @@
+/*[fmt]1C20-1C0D-E*/
+#header div.view-switcher {
+  font-size: 9px;
+}
+
+.dashboard.admin .dashboard-container .stats ul li .name {
+  font-size: 10px;
+}
+
+.dashboard.admin .dashboard-container .stats ul li .percentage {
+  float: left;
+  font-size: 15px;
+  font-weight: bold;
+  margin: 13px 0 0;
+  /*+text-shadow:0px -2px 1px #FFFFFF;*/
+  -moz-text-shadow: 0px -2px 1px #FFFFFF;
+  -webkit-text-shadow: 0px -2px 1px #FFFFFF;
+  -o-text-shadow: 0px -2px 1px #FFFFFF;
+  text-shadow: 0px -2px 1px #FFFFFF;
+}
+
+.dashboard.admin .dashboard-container .stats ul li .value .content {
+  font-size: 10px;
+}
+
+div.toolbar div.filters label {
+  font-size: 9px;
+}
+
+div.toolbar div.filters select {
+  width: 82px;
+  font-size: 11px;
+}
+
diff --git a/ui/index.jsp b/ui/index.jsp
index b3f42709b79..ae54805a23e 100644
--- a/ui/index.jsp
+++ b/ui/index.jsp
@@ -14,6 +14,9 @@
     <title>CloudStack</title>
     <link type="text/css" rel="stylesheet" href="lib/reset.css"/>
     <link type="text/css" rel="stylesheet" href="css/cloudstack3.css" />
+    <c:if test="${!empty cookie.lang && cookie.lang.value != 'en'}">
+      <link type="text/css" rel="stylesheet" href="css/cloudstack3.${cookie.lang.value}.css" />
+    </c:if>
 
     <!--[if IE 7]>
     <link type="text/css" rel="stylesheet" href="css/cloudstack3-ie7.css" />
@@ -1614,6 +1617,10 @@
 
 <script language="javascript">
 dictionary = {
+'label.system.wide.capacity': '<fmt:message key="label.system.wide.capacity"/>',
+'label.management': '<fmt:message key="label.management"/>',
+'label.guest': '<fmt:message key="label.guest"/>',
+'label.network.service.providers': '<fmt:message key="label.network.service.providers"/>',
 'message.launch.zone': '<fmt:message key="message.launch.zone"/>',
 'label.compute.offering': '<fmt:message key="label.compute.offering"/>',
 'label.add.compute.offering': '<fmt:message key="label.add.compute.offering"/>',
diff --git a/ui/scripts/ui-custom/zoneChart.js b/ui/scripts/ui-custom/zoneChart.js
index 70e0da1f3c9..c8e8671e292 100644
--- a/ui/scripts/ui-custom/zoneChart.js
+++ b/ui/scripts/ui-custom/zoneChart.js
@@ -186,35 +186,35 @@
 
                 var trafficTypes = {
                   'public': {
-                    label: 'Public',
+                    label: _l('label.public'),
                     configure: {
                       action: actions.trafficTypeDetails('public', targetContext)
                     }
                   },
 
                   'guest': {
-                    label: 'Guest',
+                    label: _l('label.guest'),
                     configure: {
                       action: actions.trafficTypeDetails('guest', targetContext)
                     }
                   },
 
                   'management': {
-                    label: 'Management',
+                    label: _l('label.management'),
                     configure: {
                       action: actions.trafficTypeDetails('management', targetContext)
                     }
                   },
 
                   'storage': {
-                    label: 'Storage',
+                    label: _l('label.storage'),
                     configure: {
                       action: actions.trafficTypeDetails('storage', targetContext)
                     }
                   },
 
                   'providers': {
-                    label: 'Network Service Providers',
+                    label: _l('label.network.service.providers'),
                     ignoreChart: true,
 										dependsOn: 'guest',
                     configure: {
@@ -245,7 +245,7 @@
                   var $li = $('<li>').addClass(id);
                   var $label = $('<span>').addClass('label').html(trafficType.label);
                   var $configureButton = viewAllButton($.extend(trafficType.configure, {
-                    label: 'Configure',
+                    label: _l('label.configure'),
                     title: trafficType.label,
                     $browser: $browser,
                     targetContext: targetContext
@@ -325,19 +325,19 @@
         var $stats = $('<div>').addClass('stats');
         var $container = $('<div>').addClass('dashboard-container head');
         var $top = $('<div>').addClass('top');
-        var $title = $('<div>').addClass('title').append($('<span>').html('System-wide capacity'));
+        var $title = $('<div>').addClass('title').append($('<span>').html(_l('label.system.wide.capacity')));
 
         var chartItems = {
           // The keys are based on the internal type ID associated with each capacity
-          0: { name: 'Memory' },
+          0: { name: _l('label.memory') },
           1: { name: 'CPU' },
-          2: { name: 'Storage' },
-          3: { name: 'Allocated Storage' },
-          6: { name: 'Secondary Storage' },
-          9: { name: 'Local Storage' },
-          4: { name: 'Public IP' },
-          5: { name: 'Private IP' },
-          8: { name: 'Direct Public IP' },
+          2: { name: _l('label.storage') },
+          3: { name: _l('label.primary.allocated') },
+          6: { name: _l('label.secondary.storage') },
+          9: { name: _l('label.local.storage') },
+          4: { name: _l('label.public.ip') },
+          5: { name: _l('label.private.ip') },
+          8: { name: _l('label.direct.ips') },
           7: { name: 'VLAN' }
         };