Fix link behaviour inconsistencies in change info panel

In the change info panel there are links on the project name, branch
name, and topic name.  They all behave differently:

 project: opens the project admin page
 branch: opens a query for changes on the branch and topic
 topic: opens a dialog to edit the topic name

Also, next to the project is a query icon that opens the project
default dashboard which is a query for recent changes.

These inconsistent links reduce the useability of the UI.  With this
change, they are made more consistent:

 project: opens the project default dashboard
 branch: opens a query for changes on the branch (without topic)
 topic: opens a query for changes on the topic

The project query icon is replaced with a settings icon that opens
the project admin page.  The topic can still be edited by clicking
on the edit icon.

Change-Id: I09c36bf80949efd8a6237669c8284275c3372d9c
This commit is contained in:
David Pursehouse
2014-04-07 23:33:01 +09:00
parent f1d8cfbe98
commit 7b83f59157
4 changed files with 36 additions and 27 deletions

View File

@@ -139,7 +139,7 @@ public class ChangeScreen2 extends Screen {
@UiField Reviewers reviewers;
@UiField InlineHyperlink ownerLink;
@UiField Element statusText;
@UiField Image projectQuery;
@UiField Image projectSettings;
@UiField InlineHyperlink projectLink;
@UiField InlineHyperlink branchLink;
@UiField Element strategy;
@@ -356,16 +356,16 @@ public class ChangeScreen2 extends Screen {
}
private void initProjectLinks(final ChangeInfo info) {
projectQuery.addDomHandler(new ClickHandler() {
projectSettings.addDomHandler(new ClickHandler() {
@Override
public void onClick(ClickEvent event) {
Gerrit.display(
PageLinks.toProjectDefaultDashboard(info.project_name_key()));
PageLinks.toProject(info.project_name_key()));
}
}, ClickEvent.getType());
projectLink.setText(info.project());
projectLink.setTargetHistoryToken(
PageLinks.toProject(info.project_name_key()));
PageLinks.toProjectDefaultDashboard(info.project_name_key()));
}
private void initBranchLink(ChangeInfo info) {
@@ -376,7 +376,7 @@ public class ChangeScreen2 extends Screen {
info.project_name_key(),
info.status(),
info.branch(),
info.topic())));
null)));
}
private void initEditMessageAction(ChangeInfo info, String revision) {

View File

@@ -161,7 +161,7 @@ limitations under the License.
padding: 0 5px 0 0;
}
.queryProject {
.projectSettings {
float: right;
cursor: pointer;
}
@@ -383,14 +383,14 @@ limitations under the License.
<tr>
<th><ui:msg>Project</ui:msg></th>
<td><x:InlineHyperlink ui:field='projectLink'
title='Go to project'>
title='Search for changes on this project'>
<ui:attribute name='title'/>
</x:InlineHyperlink>
<g:Image
ui:field='projectQuery'
resource='{ico.queryIcon}'
styleName='{style.queryProject}'
title='Search for changes on this project'>
ui:field='projectSettings'
resource='{ico.gear}'
styleName='{style.projectSettings}'
title='Go to project'>
<ui:attribute name='title'/>
</g:Image>
</td>

View File

@@ -18,6 +18,8 @@ import com.google.gerrit.client.Gerrit;
import com.google.gerrit.client.changes.ChangeApi;
import com.google.gerrit.client.changes.ChangeInfo;
import com.google.gerrit.client.rpc.GerritCallback;
import com.google.gerrit.client.ui.BranchLink;
import com.google.gerrit.client.ui.InlineHyperlink;
import com.google.gerrit.common.PageLinks;
import com.google.gerrit.reviewdb.client.PatchSet;
import com.google.gwt.core.client.GWT;
@@ -31,10 +33,8 @@ 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.FlowPanel;
import com.google.gwt.user.client.ui.HTMLPanel;
import com.google.gwt.user.client.ui.Image;
import com.google.gwt.user.client.ui.InlineLabel;
import com.google.gwt.user.client.ui.UIObject;
import com.google.gwtexpui.globalkey.client.NpTextBox;
@@ -46,8 +46,8 @@ class Topic extends Composite {
private PatchSet.Id psId;
private boolean canEdit;
@UiField FlowPanel show;
@UiField InlineLabel text;
@UiField Element show;
@UiField InlineHyperlink text;
@UiField Image editIcon;
@UiField Element form;
@@ -57,7 +57,7 @@ class Topic extends Composite {
Topic() {
initWidget(uiBinder.createAndBindUi(this));
show.addDomHandler(
editIcon.addDomHandler(
new ClickHandler() {
@Override
public void onClick(ClickEvent event) {
@@ -76,20 +76,30 @@ class Topic extends Composite {
info.legacy_id(),
info.revisions().get(revision)._number());
text.setText(info.topic());
initTopicLink(info);
editIcon.setVisible(canEdit);
if (!canEdit) {
show.setTitle(null);
}
}
private void initTopicLink(ChangeInfo info) {
text.setText(info.topic());
text.setTargetHistoryToken(
PageLinks.toChangeQuery(
BranchLink.query(
info.project_name_key(),
info.status(),
info.branch(),
info.topic())));
}
boolean canEdit() {
return canEdit;
}
void onEdit() {
if (canEdit) {
show.setVisible(false);
UIObject.setVisible(form, true);
input.setText(text.getText());
@@ -100,7 +110,6 @@ class Topic extends Composite {
@UiHandler("cancel")
void onCancel(ClickEvent e) {
input.setFocus(false);
show.setVisible(true);
UIObject.setVisible(form, false);
}

View File

@@ -17,7 +17,8 @@ limitations under the License.
<ui:UiBinder
xmlns:ui='urn:ui:com.google.gwt.uibinder'
xmlns:c='urn:import:com.google.gwtexpui.globalkey.client'
xmlns:g='urn:import:com.google.gwt.user.client.ui'>
xmlns:g='urn:import:com.google.gwt.user.client.ui'
xmlns:x='urn:import:com.google.gerrit.client.ui'>
<ui:with field='ico' type='com.google.gerrit.client.GerritResources'/>
<ui:with field='res' type='com.google.gerrit.client.change.Resources'/>
<ui:style>
@@ -25,15 +26,14 @@ limitations under the License.
.edit, .cancel { float: right; }
</ui:style>
<g:HTMLPanel>
<g:FlowPanel ui:field='show'
styleName='{style.show}'
title='Click to edit topic (Shortcut: t)'>
<ui:attribute name='title'/>
<g:InlineLabel ui:field='text'/>
<div ui:field='show' styleName='{style.show}'>
<x:InlineHyperlink ui:field='text'
title='Search for changes on this topic'/>
<g:Image ui:field='editIcon'
resource='{ico.edit}'
styleName='{style.edit}'/>
</g:FlowPanel>
styleName='{style.edit}'
title='Click to edit topic (Shortcut: t)'/>
</div>
<div ui:field='form' style='display: none' aria-hidden='true'>
<div>