Refactor editor

i) reduce dom element ii) apply new-zanata styling Affected area - glossary panel, TM panel, side menu, pager, document list, top bar of editor and document list
zanata · Oct 17, 2013 · c858ace · c858ace
1 parent cb96957
commit c858ace
Show file tree

Hide file tree

Showing 23 changed files with 392 additions and 655 deletions.
diff --git a/zanata-war/src/main/java/org/zanata/webtrans/client/resources/WebTransMessages.java b/zanata-war/src/main/java/org/zanata/webtrans/client/resources/WebTransMessages.java
@@ -431,6 +431,9 @@ String undoUnsuccessful(@PluralCount int unsuccessfulCount,
     @DefaultMessage("When unexpected error happens, a popup window will display and show it")
             String showErrorsTooltip();
 
+    @DefaultMessage("Show System Errors")
+    String showSystemErrors();
+
     @DefaultMessage("Switch between syntax highlightable Editor and plain textarea (no syntax highlight but support spell check in all browser)")
             String useCodeMirrorEditorTooltip();
 
@@ -568,4 +571,19 @@ String undoUnsuccessful(@PluralCount int unsuccessfulCount,
 
     @DefaultMessage("More details")
     String moreDetais();
+
+    @DefaultMessage("Editor Buttons")
+    String editorButtons();
+
+    @DefaultMessage("'Enter' key saves immediately")
+    String enterKeySaves();
+
+    @DefaultMessage("Use syntax highlighting Editor")
+    String useSyntaxHighlight();
+
+    @DefaultMessage("Show 'Save as Approved' warning")
+    String showSaveApproveWarning();
+
+    @DefaultMessage("Enable Spell Check")
+    String enabledSpellCheck();
 }
diff --git a/zanata-war/src/main/java/org/zanata/webtrans/client/ui/DocumentListTable.java b/zanata-war/src/main/java/org/zanata/webtrans/client/ui/DocumentListTable.java
@@ -24,6 +24,7 @@
 import java.util.List;
 import java.util.Map;
 
+import com.google.gwt.user.client.ui.HTMLPanel;
 import org.zanata.rest.dto.stats.ContainerTranslationStatistics;
 import org.zanata.rest.dto.stats.TranslationStatistics;
 import org.zanata.rest.dto.stats.TranslationStatistics.StatUnit;
@@ -402,20 +403,21 @@ private Widget getRemainingWidget(DocumentInfo docInfo) {
     }
 
     private Widget getActionWidget(final DocumentInfo docInfo) {
-        HorizontalPanel panel = new HorizontalPanel();
+        FlowPanel panel = new FlowPanel();
+
         for (Map.Entry<String, String> entry : docInfo.getDownloadExtensions()
                 .entrySet()) {
             Anchor anchor = new Anchor(entry.getKey());
+            anchor.addStyleName("l--push-right-half");
             anchor.setTitle(messages.downloadFileTitle(entry.getKey()));
-            anchor.setStyleName("downloadFileLink");
             anchor.setHref(Application.getFileDownloadURL(userWorkspaceContext
                     .getWorkspaceContext().getWorkspaceId(), entry.getValue()));
             anchor.setTarget("_blank");
             panel.add(anchor);
         }
-        InlineLabel upload = new InlineLabel();
+        Anchor upload = new Anchor();
         upload.setTitle(messages.uploadButtonTitle());
-        upload.setStyleName("icon-upload uploadButton");
+        upload.setStyleName("icon-upload txt--lead l--push-left-half");
         upload.addClickHandler(new ClickHandler() {
             @Override
             public void onClick(ClickEvent event) {

diff --git a/zanata-war/src/main/java/org/zanata/webtrans/client/ui/NotificationDetailsBox.ui.xml b/zanata-war/src/main/java/org/zanata/webtrans/client/ui/NotificationDetailsBox.ui.xml
@@ -28,11 +28,10 @@
     .container {
       min-width: 20em;
       max-height: 40em;
-      overflow: auto;
     }
   </ui:style>
 
-  <g:HTMLPanel styleName="new-zanata {style.container}">
+  <g:HTMLPanel styleName="new-zanata l--scroll-auto {style.container}">
     <z:DialogBoxCloseButton ui:field="closeButton" />
     <g:HTMLPanel styleName="l__wrapper l--pad-all-half" ui:field="messageWrapper">
       <g:HTMLPanel ui:field="message" styleName="l--push-bottom-half" />

diff --git a/zanata-war/src/main/java/org/zanata/webtrans/client/ui/Pager.ui.xml b/zanata-war/src/main/java/org/zanata/webtrans/client/ui/Pager.ui.xml
@@ -15,7 +15,6 @@
       opacity: 0.5;
       cursor: default !important;
     }
-
   </ui:style>
 
   <g:HTMLPanel styleName="new-zanata">
@@ -30,7 +29,7 @@
       </li>
       <li>
         <g:TextBox ui:field="gotoPage" maxLength="8"
-          styleName="{style.textBox}" />
+          styleName="{style.textBox} l--push-bottom-0" />
       </li>
       <li>
         <g:InlineLabel ui:field="pageCountLabel" />

diff --git a/zanata-war/src/main/java/org/zanata/webtrans/client/ui/UserPanel.java b/zanata-war/src/main/java/org/zanata/webtrans/client/ui/UserPanel.java
@@ -1,37 +1,36 @@
 package org.zanata.webtrans.client.ui;
 
-import com.google.gwt.user.client.ui.HorizontalPanel;
 import com.google.gwt.user.client.ui.Image;
 import com.google.gwt.user.client.ui.Label;
 
-public class UserPanel extends HorizontalPanel implements HasManageUserPanel {
+public class UserPanel extends ListItemWidget implements HasManageUserPanel {
     private static final long serialVersionUID = 1L;
-    private Image userImage;
-    private Label personNameLabel;
-    private String personName;
-    private Label colorLabel;
+    private final Image userImage;
+    private final String personName;
+    private final ListItemWidget colorLabel = new ListItemWidget();
 
     public UserPanel(String personName, String imgUrl) {
         super();
-        this.personName = personName;
 
+        UnorderedListWidget container = new UnorderedListWidget();
+
+        container.setStyleName("list--horizontal");
+        this.personName = personName;
         userImage = new Image(imgUrl);
-        personNameLabel = new Label(personName);
-        colorLabel = new Label();
 
-        this.add(userImage);
-        this.add(colorLabel);
-        this.add(personNameLabel);
+        container.add(new ListItemWidget(userImage));
+        container.add(new ListItemWidget(colorLabel));
+        container.add(new ListItemWidget(personName));
 
-        this.setCellWidth(userImage, "16px");
+        add(container);
     }
 
     @Override
     public void setColor(String color) {
         colorLabel.getElement().getStyle().setProperty("borderColor", color);
         colorLabel.getElement().getStyle().setProperty("borderWidth", "1px");
         colorLabel.getElement().getStyle().setProperty("borderStyle", "solid");
-        colorLabel.getElement().getStyle().setProperty("height", "16px");
+        colorLabel.getElement().getStyle().setProperty("height", "1.25em");
     }
 
     @Override

diff --git a/zanata-war/src/main/java/org/zanata/webtrans/client/view/AppView.java b/zanata-war/src/main/java/org/zanata/webtrans/client/view/AppView.java
@@ -45,10 +45,10 @@
 import com.google.gwt.uibinder.client.UiField;
 import com.google.gwt.uibinder.client.UiHandler;
 import com.google.gwt.user.client.Window;
+import com.google.gwt.user.client.ui.Anchor;
 import com.google.gwt.user.client.ui.Composite;
 import com.google.gwt.user.client.ui.HTMLPanel;
 import com.google.gwt.user.client.ui.InlineLabel;
-import com.google.gwt.user.client.ui.Label;
 import com.google.gwt.user.client.ui.LayoutPanel;
 import com.google.gwt.user.client.ui.TabLayoutPanel;
 import com.google.gwt.user.client.ui.Widget;
@@ -74,7 +74,7 @@ interface Styles extends CssResource {
     TransUnitCountBar translationStatsBar;
 
     @UiField
-    InlineLabel readOnlyLabel, keyShortcuts;
+    InlineLabel readOnlyLabel;
 
     @UiField(provided = true)
     Breadcrumb selectedDocumentSpan;
@@ -101,7 +101,7 @@ interface Styles extends CssResource {
     Styles style;
 
     @UiField
-    Label editorTab, searchAndReplaceTab, documentListTab;
+    Anchor editorTab, searchAndReplaceTab, documentListTab, keyShortcuts;
 
     @UiField
     UnorderedListWidget notifications;
@@ -240,25 +240,25 @@ public void setReadOnlyVisible(boolean visible) {
         readOnlyLabel.setVisible(visible);
     }
 
-    private final static double MIN_MENU_WIDTH = 24.0;
-    private final static double EXPENDED_MENU_RIGHT = 304.0;
+    private final static double MIN_MENU_WIDTH = 2;
+    private final static double EXPENDED_MENU_RIGHT = 23;
 
-    private final static double MINIMISED_EDITOR_RIGHT = 280.0;
-    private final static int ANIMATE_DURATION = 300;
+    private final static double MINIMISED_EDITOR_RIGHT = 21.5;
+    private final static int ANIMATE_DURATION = 100;
 
     @Override
     public void showSideMenu(boolean isShowing) {
         rootContainer.forceLayout();
         if (isShowing) {
-            rootContainer.setWidgetLeftRight(contentContainer, 0.0, Unit.PX,
-                    MINIMISED_EDITOR_RIGHT, Unit.PX);
+            rootContainer.setWidgetLeftRight(contentContainer, 0.0, Unit.EM,
+                    MINIMISED_EDITOR_RIGHT, Unit.EM);
             rootContainer.setWidgetRightWidth(sideMenuContainer, 0.0, Unit.PX,
-                    EXPENDED_MENU_RIGHT, Unit.PX);
+                    EXPENDED_MENU_RIGHT, Unit.EM);
         } else {
-            rootContainer.setWidgetLeftRight(contentContainer, 0.0, Unit.PX,
-                    0.0, Unit.PX);
-            rootContainer.setWidgetRightWidth(sideMenuContainer, 0.0, Unit.PX,
-                    MIN_MENU_WIDTH, Unit.PX);
+            rootContainer.setWidgetLeftRight(contentContainer, 0.0, Unit.EM,
+                    0.0, Unit.EM);
+            rootContainer.setWidgetRightWidth(sideMenuContainer, 0.0, Unit.EM,
+                    MIN_MENU_WIDTH, Unit.EM);
         }
         rootContainer.animate(ANIMATE_DURATION);
     }
@@ -322,7 +322,8 @@ public void setKeyboardShorcutColor(boolean aliasKeyListening) {
 
     public void showNotification(NotificationEvent notification) {
         notifications.clear();
-        notifications.add(new NotificationItem(messages, notification, this, false));
+        notifications.add(new NotificationItem(messages, notification, this,
+                false));
     }
 
     @Override

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
@@ -33,20 +33,10 @@
       display: inline-block;
     }
 
-    .topMenuButton {
-      cursor: pointer;
-      font-size: 20px;
-      color: #4E4E4E;
-    }
-
     .highlightedTab {
       color: #FF4500;
     }
 
-    .topMenuButton:hover {
-      color: #0085CC;
-    }
-
     .readonly_label {
       font-size: 14px;
       font-weight: bold;
@@ -55,14 +45,13 @@
     }
 
     .selectedTab, .selectedTab:hover {
-      color: #0085CC;
-      opacity: 1;
+      color: #416988 !important;
     }
 
     .disableTab, .disableTab:hover {
-      color: #777;
-      cursor: default;
-      opacity: 0.5;
+      color: #777 !important;
+      cursor: default !important;
+      opacity: 0.5 !important;
     }
 
     .content {
@@ -89,14 +78,14 @@
           <li class="{style.right-nav}">
             <fui:TransUnitCountBar ui:field="translationStatsBar"
               styleName="{style.translationStats}" />
-            <g:InlineLabel styleName="icon-list {style.topMenuButton}"
+            <g:Anchor styleName="icon-list txt--hero"
               ui:field="documentListTab" />
-            <g:InlineLabel styleName="icon-edit {style.topMenuButton}"
+            <g:Anchor styleName="icon-edit txt--hero"
               ui:field="editorTab" />
-            <g:InlineLabel styleName="icon-search {style.topMenuButton}"
+            <g:Anchor styleName="icon-search txt--hero"
               ui:field="searchAndReplaceTab" />
-            <g:InlineLabel ui:field="keyShortcuts"
-              styleName="icon-keyboard {style.topMenuButton}" />
+            <g:Anchor ui:field="keyShortcuts"
+              styleName="icon-keyboard txt--hero" />
           </li>
         </ul>
       </g:HTMLPanel>
@@ -113,8 +102,8 @@
       </g:HTMLPanel>
     </g:layer>
 
-    <g:layer right="0" width="24px" top="25px" bottom="10px">
-      <g:LayoutPanel ui:field="sideMenuContainer" />
+    <g:layer right="0" width="2em" top="25px" bottom="10px">
+      <g:LayoutPanel ui:field="sideMenuContainer" styleName="new-zanata" />
     </g:layer>
 
   </g:LayoutPanel>

diff --git a/zanata-war/src/main/java/org/zanata/webtrans/client/view/DocumentListOptionsView.java b/zanata-war/src/main/java/org/zanata/webtrans/client/view/DocumentListOptionsView.java
@@ -25,49 +25,34 @@
 
 import com.google.gwt.core.client.GWT;
 import com.google.gwt.event.dom.client.ClickEvent;
-import com.google.gwt.resources.client.CssResource;
 import com.google.gwt.uibinder.client.UiBinder;
 import com.google.gwt.uibinder.client.UiField;
 import com.google.gwt.uibinder.client.UiHandler;
+import com.google.gwt.user.client.ui.Anchor;
 import com.google.gwt.user.client.ui.Composite;
-import com.google.gwt.user.client.ui.InlineLabel;
-import com.google.gwt.user.client.ui.Label;
-import com.google.gwt.user.client.ui.VerticalPanel;
 import com.google.gwt.user.client.ui.Widget;
 import com.google.inject.Inject;
 
 public class DocumentListOptionsView extends Composite implements
         DocumentListOptionsDisplay {
     interface DocumentListOptionsUiBinder extends
-            UiBinder<VerticalPanel, DocumentListOptionsView> {
+            UiBinder<Widget, DocumentListOptionsView> {
     }
 
     private static DocumentListOptionsUiBinder uiBinder = GWT
             .create(DocumentListOptionsUiBinder.class);
 
     @UiField
-    Label pageSizeHeader;
+    Anchor twentyFiveDoc, fiftyDoc, hundredDoc, twoHundredFiftyDoc;
 
     @UiField
-    InlineLabel twentyFiveDoc, fiftyDoc, hundredDoc, twoHundredFiftyDoc;
-
-    @UiField
-    Styles style;
+    WebTransMessages messages;
 
     private Listener listener;
 
-    interface Styles extends CssResource {
-        String selectedPageSize();
-    }
-
     @Inject
-    public DocumentListOptionsView(WebTransMessages messages) {
+    public DocumentListOptionsView() {
         initWidget(uiBinder.createAndBindUi(this));
-        pageSizeHeader.setText(messages.pageSize());
-        twentyFiveDoc.setText("25");
-        fiftyDoc.setText("50");
-        hundredDoc.setText("100");
-        twoHundredFiftyDoc.setText("250");
     }
 
     @Override
@@ -78,34 +63,34 @@ public Widget asWidget() {
     @UiHandler("twentyFiveDoc")
     public void onTwentyFiveDocClicked(ClickEvent event) {
         listener.onPageSizeClick(25);
-        onPageSizeChanged(twentyFiveDoc, 25);
+        onPageSizeChanged(twentyFiveDoc);
     }
 
     @UiHandler("fiftyDoc")
     public void onFiftyDocClicked(ClickEvent event) {
         listener.onPageSizeClick(50);
-        onPageSizeChanged(fiftyDoc, 50);
+        onPageSizeChanged(fiftyDoc);
     }
 
     @UiHandler("hundredDoc")
     public void onHundredDocClicked(ClickEvent event) {
         listener.onPageSizeClick(100);
-        onPageSizeChanged(hundredDoc, 100);
+        onPageSizeChanged(hundredDoc);
     }
 
     @UiHandler("twoHundredFiftyDoc")
     public void onTwoHundredFiftyDocClicked(ClickEvent event) {
         listener.onPageSizeClick(250);
-        onPageSizeChanged(twoHundredFiftyDoc, 250);
+        onPageSizeChanged(twoHundredFiftyDoc);
     }
 
-    private void onPageSizeChanged(InlineLabel selectedWidget, int pageSize) {
-        twentyFiveDoc.removeStyleName(style.selectedPageSize());
-        fiftyDoc.removeStyleName(style.selectedPageSize());
-        hundredDoc.removeStyleName(style.selectedPageSize());
-        twoHundredFiftyDoc.removeStyleName(style.selectedPageSize());
+    private void onPageSizeChanged(Anchor selectedWidget) {
+        twentyFiveDoc.addStyleName("txt--invert");
+        fiftyDoc.addStyleName("txt--invert");
+        hundredDoc.addStyleName("txt--invert");
+        twoHundredFiftyDoc.addStyleName("txt--invert");
 
-        selectedWidget.addStyleName(style.selectedPageSize());
+        selectedWidget.removeStyleName("txt--invert");
     }
 
     @Override