Skip to content
This repository has been archived by the owner on Nov 9, 2017. It is now read-only.

Commit

Permalink
Redesign pager component, TU Nav button, TM and glossary divider, edi…
Browse files Browse the repository at this point in the history
…tor border
  • Loading branch information
alex-sl-eng committed Sep 10, 2012
1 parent cf614a6 commit ef32375
Show file tree
Hide file tree
Showing 14 changed files with 96 additions and 114 deletions.
Expand Up @@ -10,7 +10,7 @@
border-radius: 3px;
outline: none;
padding: 4px;
width:98%;
width:388px;
}

.transFilterTextBoxEmpty {
Expand Down
18 changes: 6 additions & 12 deletions zanata-war/src/main/java/org/zanata/webtrans/client/ui/Pager.java
Expand Up @@ -17,25 +17,24 @@
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.Button;
import com.google.gwt.user.client.ui.Composite;
import com.google.gwt.user.client.ui.HorizontalPanel;
import com.google.gwt.user.client.ui.Image;
import com.google.gwt.user.client.ui.Label;
import com.google.gwt.user.client.ui.PushButton;
import com.google.gwt.user.client.ui.TextBox;
import com.google.gwt.user.client.ui.Widget;

public class Pager extends Composite implements HasPager
{

private static PagerUiBinder uiBinder = GWT.create(PagerUiBinder.class);

interface PagerUiBinder extends UiBinder<HorizontalPanel, Pager>
interface PagerUiBinder extends UiBinder<Widget, Pager>
{
}


@UiField(provided = true)
PushButton firstPage, lastPage, nextPage, prevPage;
@UiField
Button firstPage, lastPage, nextPage, prevPage;

@UiField
TextBox gotoPage;
Expand All @@ -54,11 +53,6 @@ interface PagerUiBinder extends UiBinder<HorizontalPanel, Pager>

public Pager(final WebTransMessages messages, final Resources resources)
{
firstPage = new PushButton(new Image(resources.firstPageImage()));
lastPage = new PushButton(new Image(resources.lastPageImage()));
nextPage = new PushButton(new Image(resources.nextPageImage()));
prevPage = new PushButton(new Image(resources.prevPageImage()));

this.resources = resources;
initWidget(uiBinder.createAndBindUi(this));

Expand Down Expand Up @@ -193,7 +187,7 @@ else if (event.getSource() == prevPage)
}
};

private void setEnabled(PushButton button, boolean enabled)
private void setEnabled(Button button, boolean enabled)
{
button.setEnabled(enabled);
}
Expand Down
69 changes: 15 additions & 54 deletions zanata-war/src/main/java/org/zanata/webtrans/client/ui/Pager.ui.xml
Expand Up @@ -5,74 +5,35 @@
<ui:with field="resources" type="org.zanata.webtrans.client.resources.Resources"/>

<ui:style>
.buttonImage {
cursor: pointer;
}
.link_disabled {
color: #e0e0e0;
display: inline;
cursor: default;

}

.divider {
color: #e0e0e0;
}

.inline-label {
margin-top:1px;
margin-right:3px;
margin-left:2px;

}

.link {
cursor: pointer;
margin-right:5px;
}

.nav-button {
width:16px;
height:10px;
border-radius:3px;
-moz-border-radius:3px;
margin-right:3px;
border-style:solid;
outline:none;
}

.nav-button img {
padding-bottom:2px;

padding:0 8px;
font-size:15px;
margin:0;
}

.rootContainer {
margin:auto;
padding-top:5px;
text-align:center;
margin-top:3px;
}

.textBox {
border:1px inset #CCC;
outline:none;
border-radius:3px;
-moz-border-radius:3px;
border:1px solid #CCC;
border-radius:2px;
width:40px;
height:14px;
height:16px;
}


</ui:style>

<g:HorizontalPanel styleName="{style.rootContainer}">

<g:PushButton ui:field="firstPage" addStyleNames="{style.nav-button}"/>
<g:PushButton ui:field="prevPage" addStyleNames="{style.nav-button}"/>
<g:HTMLPanel styleName="{style.rootContainer}">
<g:Button ui:field="firstPage" addStyleNames="{style.nav-button} icon-to-start"/>
<g:Button ui:field="prevPage" addStyleNames="{style.nav-button} icon-left-open"/>

<g:TextBox ui:field="gotoPage" maxLength="8" styleName="{style.textBox}" />
<g:Label ui:field="pageCountLabel" styleName="{style.inline-label}">of 0</g:Label>
<g:InlineLabel ui:field="pageCountLabel"/>

<g:PushButton ui:field="nextPage" addStyleNames="{style.nav-button}"/>
<g:PushButton ui:field="lastPage" addStyleNames="{style.nav-button}"/>
<g:Button ui:field="nextPage" addStyleNames="{style.nav-button} icon-right-open-1"/>
<g:Button ui:field="lastPage" addStyleNames="{style.nav-button} icon-to-end"/>

</g:HorizontalPanel>
</g:HTMLPanel>
</ui:UiBinder>
Expand Up @@ -110,9 +110,8 @@ public GlossaryDetailsView(UiMessages messages, Resources resources)
saveButton.setText(messages.save());
sourceComment.setVisibleItemCount(VISIBLE_COMMENTS);

sourceComment.setEnabled(false);
sourceText.setEnabled(false);
srcRef.setEnabled(false);
sourceText.setReadOnly(true);
srcRef.setReadOnly(true);

targetCommentsTable.setCellPadding(0);
targetCommentsTable.setCellSpacing(1);
Expand Down Expand Up @@ -168,7 +167,7 @@ private FlowPanel getTargetCommentRow(String comment)

if (!hasGlossaryUpdateAccess)
{
commentArea.setEnabled(false);
commentArea.setReadOnly(true);
}
panel.add(commentArea);

Expand Down Expand Up @@ -312,8 +311,8 @@ public void showLoading(boolean visible)
public void setHasUpdateAccess(boolean hasGlossaryUpdateAccess)
{
saveButton.setEnabled(hasGlossaryUpdateAccess);
newTargetComment.setEnabled(hasGlossaryUpdateAccess);
targetText.setEnabled(hasGlossaryUpdateAccess);
newTargetComment.setReadOnly(!hasGlossaryUpdateAccess);
targetText.setReadOnly(!hasGlossaryUpdateAccess);
addNewCommentButton.setVisible(hasGlossaryUpdateAccess);
this.hasGlossaryUpdateAccess = hasGlossaryUpdateAccess;
}
Expand Down
Expand Up @@ -14,6 +14,11 @@
resize:none;
}

.textArea[readonly]
{
background:lightgray;
}

.listBox
{
width:285px;
Expand Down Expand Up @@ -47,6 +52,11 @@
.targetCommentTextArea
{
width:240px;
}

.targetCommentTextArea[readonly]
{
background:lightgray;
}

.newTargetCommentTextArea
Expand All @@ -56,6 +66,11 @@
resize:none;
}

.newTargetCommentTextArea[readonly]
{
background:lightgray;
}

.buttonDiv
{
text-align:right;
Expand Down
Expand Up @@ -20,18 +20,27 @@
padding:2px;
}

.topBar
{
color:#C35817;
padding-left:10px;
background:#D3D3D3;
}

</ui:style>

<g:ScrollPanel>
<g:VerticalPanel styleName="{style.rootContainer}">
<g:cell height="30px">
<g:HorizontalPanel>
<g:Label ui:field="headerLabel" styleName="{style.headerLabel}"/>
<g:TextBox ui:field="glossaryTextBox" styleName="{style.searchBox}" />
<g:ValueListBox ui:field="searchType" />
<g:Button ui:field="searchButton" />
<g:Button ui:field="clearButton" />
</g:HorizontalPanel>
<g:cell height="30px" verticalAlignment="ALIGN_MIDDLE">
<g:HTMLPanel styleName="{style.topBar}">
<g:HorizontalPanel>
<g:Label ui:field="headerLabel" styleName="{style.headerLabel}"/>
<g:TextBox ui:field="glossaryTextBox" styleName="{style.searchBox}" />
<g:ValueListBox ui:field="searchType" />
<g:Button ui:field="searchButton" />
<g:Button ui:field="clearButton" />
</g:HorizontalPanel>
</g:HTMLPanel>
</g:cell>
<g:cell>
<g:HTMLPanel ui:field="container" />
Expand Down
Expand Up @@ -22,6 +22,11 @@
resize:none;
}

.textArea[readonly]
{
background:lightgray;
}

.button
{
float:right;
Expand Down
Expand Up @@ -35,6 +35,7 @@
import com.google.gwt.user.client.ui.Label;
import com.google.gwt.user.client.ui.TextBox;
import com.google.gwt.user.client.ui.ValueListBox;
import com.google.gwt.user.client.ui.VerticalPanel;
import com.google.gwt.user.client.ui.Widget;
import com.google.inject.Inject;

Expand Down
Expand Up @@ -22,19 +22,28 @@
width:100%;
}

.topBar
{
color:#C35817;
padding-left:10px;
background:#D3D3D3;
}

</ui:style>

<g:ScrollPanel>
<g:VerticalPanel styleName="{style.rootContainer}">
<g:cell height="30px">
<g:HorizontalPanel>
<g:Label ui:field="headerLabel" styleName="{style.headerLabel}"/>
<g:TextBox ui:field="tmTextBox" styleName="{style.searchBox}"/>
<g:ValueListBox ui:field="searchType"/>
<g:Button ui:field="searchButton"/>
<g:Button ui:field="clearButton"/>
<g:Button ui:field="mergeTMButton"/>
</g:HorizontalPanel>
<g:cell height="30px" verticalAlignment="ALIGN_MIDDLE">
<g:HTMLPanel styleName="{style.topBar}">
<g:HorizontalPanel>
<g:Label ui:field="headerLabel" styleName="{style.headerLabel}"/>
<g:TextBox ui:field="tmTextBox" styleName="{style.searchBox}"/>
<g:ValueListBox ui:field="searchType"/>
<g:Button ui:field="searchButton"/>
<g:Button ui:field="clearButton"/>
<g:Button ui:field="mergeTMButton"/>
</g:HorizontalPanel>
</g:HTMLPanel>
</g:cell>

<g:cell>
Expand Down
Expand Up @@ -5,16 +5,17 @@
<ui:style>

.nav-button {
width:30px;
height:10px;
border-radius:5px;
margin-right:5px;
width:34px;
height:12px;
border-radius:2px;
margin-right:1px;
border-style:solid;
outline:none;
}

.nav-button img {
padding-bottom:3px;
margin-bottom:2px;
margin-left:2px;
}


Expand Down
Expand Up @@ -9,8 +9,7 @@

.editor {
background-color: #ffffff;
border-top: 2px solid #e0e8ee;
border-bottom: 2px solid #e0e8ee;
border-bottom: 1px solid #E5E5E5;
}

.unitStatus {
Expand All @@ -27,11 +26,6 @@
text-align: center;
}

.pager {
text-align: center;
display: inline;
}

.filterPanelContainer
{

Expand All @@ -49,8 +43,8 @@
<g:layer top="25px" bottom="2em">
<g:LayoutPanel ui:field="editor" styleName="{style.editor}"/>
</g:layer>
<g:layer bottom="0px" height="2em" left="30px" right="30px">
<g:FlowPanel styleName="{style.pager}">
<g:layer bottom="0px" height="2em" left="0" right="0">
<g:FlowPanel>
<fui:Pager ui:field="pager"/>
</g:FlowPanel>
</g:layer>
Expand Down
Expand Up @@ -73,9 +73,9 @@ public TranslationView(Resources resources, WebTransMessages messages, Translati
StyleInjector.inject(resources.style().getText(), true);
southPanelContainer = new LayoutPanel();

tmGlossaryPanel = new SplitLayoutPanel(5);
tmGlossaryPanel = new SplitLayoutPanel(2);

mainSplitPanel = new SplitLayoutPanel(5);
mainSplitPanel = new SplitLayoutPanel(2);

initWidget(uiBinder.createAndBindUi(this));
mainSplitPanel.setWidgetMinSize(southPanelContainer, (int) MIN_SOUTH_PANEL_HEIGHT);
Expand Down
Expand Up @@ -6,7 +6,7 @@
<ui:style>
.southPanel
{
border-bottom:2px solid #E0E8EE;
border-bottom:1px solid #E5E5E5;
}
</ui:style>

Expand Down

0 comments on commit ef32375

Please sign in to comment.