From 91a5312110e14474f50bfa53b49fdd6ad44158be Mon Sep 17 00:00:00 2001
From: Alex Eng <aeng@redhat.com>
Date: Tue, 1 Oct 2013 11:58:15 +1000
Subject: [PATCH] Reduce dom element in appview

---
 .../webtrans/client/ui/Breadcrumb.ui.xml      |  21 +---
 .../webtrans/client/view/AppView.ui.xml       | 116 ++++++++++--------
 2 files changed, 73 insertions(+), 64 deletions(-)

diff --git a/zanata-war/src/main/java/org/zanata/webtrans/client/ui/Breadcrumb.ui.xml b/zanata-war/src/main/java/org/zanata/webtrans/client/ui/Breadcrumb.ui.xml
index aba5eadadd..31fcbb73b2 100644
--- a/zanata-war/src/main/java/org/zanata/webtrans/client/ui/Breadcrumb.ui.xml
+++ b/zanata-war/src/main/java/org/zanata/webtrans/client/ui/Breadcrumb.ui.xml
@@ -7,37 +7,28 @@
 
   <ui:style type="org.zanata.webtrans.client.ui.Breadcrumb.Styles">
     .container {
-      display: inline;
+      display: inline-block;
+      font-size: 1.1em;
     }
 
-    a.readOnlyLink {
-      font-size: 14px;
+    a.readOnlyLink, a.readOnlyLink:hover {
       font-weight: bold;
       color: #416988;
-      font-style: normal;
       text-decoration: none;
-    }
-
-    a.readOnlyLink:hover {
-      text-decoration: none;
-      color: #416988;
+      cursor: default;
     }
 
     a.link {
-      text-decoration: none;
-      cursor: pointer;
       font-weight: bold;
-      color: #4e9fdd;
     }
 
     a.link:hover {
       text-decoration: underline;
-      color: rgb(36, 121, 187);
     }
 
     .divider {
-      color: #000000;
-      font-size: 12px;
+      color: rgba(0, 0, 0, 0.8);
+      font-size: 0.75em;
     }
 
   </ui:style>
diff --git a/zanata-war/src/main/java/org/zanata/webtrans/client/view/AppView.ui.xml b/zanata-war/src/main/java/org/zanata/webtrans/client/view/AppView.ui.xml
index 29e0a6d5ea..81e9fdd0e9 100644
--- a/zanata-war/src/main/java/org/zanata/webtrans/client/view/AppView.ui.xml
+++ b/zanata-war/src/main/java/org/zanata/webtrans/client/view/AppView.ui.xml
@@ -15,23 +15,17 @@
       height: 100%;
     }
 
-    .contentBody {
-      margin: 5px 25px 3px 25px;
-    }
-
     .topPanel-Workspace {
-      font-size: 1.1em;
-      color: #595959;
-      padding: 2px;
       overflow: hidden;
       text-overflow: ellipsis;
     }
 
     .translationStats {
-      width: 140px;
+      width: 230px;
       height: 1.2em;
       color: #595959;
       cursor: pointer;
+      display: inline-block;
     }
 
     .topMenuButton {
@@ -66,50 +60,74 @@
       opacity: 0.5;
     }
 
-    .fixedLayout {
-      table-layout: fixed;
-    }
-
   </ui:style>
   <g:LayoutPanel stylePrimaryName="{style.rootContainer}"
     ui:field="rootContainer">
-    <g:layer top="0px" height="25px">
-      <g:LayoutPanel styleName="subHeader">
-        <g:layer left="5px" right="5px">
-          <g:HorizontalPanel width="100%" height="100%"
-            verticalAlignment="ALIGN_MIDDLE" styleName="{style.fixedLayout}">
-            <g:cell>
-              <g:HTMLPanel styleName="{style.topPanel-Workspace}">
-                <nobr>
-                  <g:InlineLabel ui:field="readOnlyLabel"
-                    styleName="{style.readonly_label}" />
-                  <fui:Breadcrumb ui:field="projectLink" />
-                  <fui:Breadcrumb ui:field="versionLink" />
-                  <fui:Breadcrumb ui:field="filesLink" />
-                  <fui:Breadcrumb ui:field="selectedDocumentSpan" />
-                </nobr>
-              </g:HTMLPanel>
-            </g:cell>
-            <g:cell width="250px">
-              <fui:TransUnitCountBar ui:field="translationStatsBar"
-                styleName="{style.translationStats}" />
-            </g:cell>
-            <g:cell verticalAlignment="ALIGN_MIDDLE" width="112px"
-              horizontalAlignment="ALIGN_RIGHT">
-              <g:HTMLPanel>
-                <g:InlineLabel styleName="icon-list {style.topMenuButton}"
-                  ui:field="documentListTab" />
-                <g:InlineLabel styleName="icon-edit {style.topMenuButton}"
-                  ui:field="editorTab" />
-                <g:InlineLabel styleName="icon-search {style.topMenuButton}"
-                  ui:field="searchAndReplaceTab" />
-                <g:InlineLabel ui:field="keyShortcuts"
-                  styleName="icon-keyboard {style.topMenuButton}" />
-              </g:HTMLPanel>
-            </g:cell>
-          </g:HorizontalPanel>
-        </g:layer>
-      </g:LayoutPanel>
+    <g:layer top="0px" height="25px" left="15px" right="15px">
+      <g:HTMLPanel styleName="new-zanata">
+        <ul class="list--horizontal">
+          <li class="{style.topPanel-Workspace}">
+            <nobr>
+              <g:InlineLabel ui:field="readOnlyLabel"
+                styleName="{style.readonly_label}" />
+              <fui:Breadcrumb ui:field="projectLink" />
+              <fui:Breadcrumb ui:field="versionLink" />
+              <fui:Breadcrumb ui:field="filesLink" />
+              <fui:Breadcrumb ui:field="selectedDocumentSpan" />
+            </nobr>
+          </li>
+          <li style="float:right">
+            <fui:TransUnitCountBar ui:field="translationStatsBar"
+              styleName="{style.translationStats}" />
+            <g:InlineLabel styleName="icon-list {style.topMenuButton}"
+              ui:field="documentListTab" />
+            <g:InlineLabel styleName="icon-edit {style.topMenuButton}"
+              ui:field="editorTab" />
+            <g:InlineLabel styleName="icon-search {style.topMenuButton}"
+              ui:field="searchAndReplaceTab" />
+            <g:InlineLabel ui:field="keyShortcuts"
+              styleName="icon-keyboard {style.topMenuButton}" />
+          </li>
+        </ul>
+      </g:HTMLPanel>
+
+
+      <!--<g:LayoutPanel>-->
+      <!--<g:layer left="5px" right="5px">-->
+      <!--<g:HorizontalPanel width="100%" height="100%"-->
+      <!--verticalAlignment="ALIGN_MIDDLE" styleName="{style.fixedLayout}">-->
+      <!--<g:cell>-->
+      <!--<g:HTMLPanel styleName="{style.topPanel-Workspace}">-->
+      <!--<nobr>-->
+      <!--<g:InlineLabel ui:field="readOnlyLabel"-->
+      <!--styleName="{style.readonly_label}" />-->
+      <!--<fui:Breadcrumb ui:field="projectLink" />-->
+      <!--<fui:Breadcrumb ui:field="versionLink" />-->
+      <!--<fui:Breadcrumb ui:field="filesLink" />-->
+      <!--<fui:Breadcrumb ui:field="selectedDocumentSpan" />-->
+      <!--</nobr>-->
+      <!--</g:HTMLPanel>-->
+      <!--</g:cell>-->
+      <!--<g:cell width="250px">-->
+      <!--<fui:TransUnitCountBar ui:field="translationStatsBar"-->
+      <!--styleName="{style.translationStats}" />-->
+      <!--</g:cell>-->
+      <!--<g:cell verticalAlignment="ALIGN_MIDDLE" width="112px"-->
+      <!--horizontalAlignment="ALIGN_RIGHT">-->
+      <!--<g:HTMLPanel>-->
+      <!--<g:InlineLabel styleName="icon-list {style.topMenuButton}"-->
+      <!--ui:field="documentListTab" />-->
+      <!--<g:InlineLabel styleName="icon-edit {style.topMenuButton}"-->
+      <!--ui:field="editorTab" />-->
+      <!--<g:InlineLabel styleName="icon-search {style.topMenuButton}"-->
+      <!--ui:field="searchAndReplaceTab" />-->
+      <!--<g:InlineLabel ui:field="keyShortcuts"-->
+      <!--styleName="icon-keyboard {style.topMenuButton}" />-->
+      <!--</g:HTMLPanel>-->
+      <!--</g:cell>-->
+      <!--</g:HorizontalPanel>-->
+      <!--</g:layer>-->
+      <!--</g:LayoutPanel>-->
     </g:layer>
 
     <g:layer top="25px" bottom="0px" left='0px' right='0px'>