Make pagination on list screens more obvious

When there are more results than can be displayed on one page, users
sometimes miss that there are more results, because the links to
navigate between the pages are really small. Make it more obvious that
there are more results by increasing the font for the prev/next links.
Also add some vertical space above and below them so that they can be
found easier.

For the ProjectBranchesScreen, some spacing has been added to the
delete button so that it aligns with the page navigation links.

Change-Id: I389147d5bf141de5f0aa3d12db596ebe9ff41402
Signed-off-by: Edwin Kempin <ekempin@google.com>
This commit is contained in:
Edwin Kempin
2015-10-21 11:30:31 +02:00
parent ff473bb345
commit 4c96d76e32
7 changed files with 60 additions and 8 deletions

View File

@@ -29,6 +29,7 @@ public interface GerritCss extends CssResource {
String addWatchPanel();
String avatarInfoPanel();
String bottomheader();
String branchTableDeleteButton();
String branchTablePrevNextLinks();
String cAPPROVAL();
String cLastUpdate();
@@ -141,6 +142,7 @@ public interface GerritCss extends CssResource {
String needsReview();
String negscore();
String noborder();
String pagingLink();
String patchBrowserPopup();
String patchBrowserPopupBody();
String patchCellReverseDiff();

View File

@@ -20,6 +20,7 @@ import com.google.gerrit.client.Gerrit;
import com.google.gerrit.client.groups.GroupMap;
import com.google.gerrit.client.rpc.GerritCallback;
import com.google.gerrit.client.ui.Hyperlink;
import com.google.gerrit.client.ui.PagingHyperlink;
import com.google.gerrit.client.ui.Screen;
import com.google.gerrit.common.PageLinks;
import com.google.gwt.event.dom.client.KeyCodes;
@@ -97,10 +98,10 @@ public class GroupListScreen extends Screen {
setPageTitle(Util.C.groupListTitle());
initPageHeader();
prev = new Hyperlink(Util.C.pagedListPrev(), true, "");
prev = PagingHyperlink.createPrev();
prev.setVisible(false);
next = new Hyperlink(Util.C.pagedListNext(), true, "");
next = PagingHyperlink.createNext();
next.setVisible(false);
groups = new GroupTable(PageLinks.ADMIN_GROUPS);

View File

@@ -37,6 +37,7 @@ import com.google.gerrit.client.ui.HintTextBox;
import com.google.gerrit.client.ui.Hyperlink;
import com.google.gerrit.client.ui.NavigationTable;
import com.google.gerrit.client.ui.OnEditEnabler;
import com.google.gerrit.client.ui.PagingHyperlink;
import com.google.gerrit.common.PageLinks;
import com.google.gerrit.reviewdb.client.Branch;
import com.google.gerrit.reviewdb.client.Project;
@@ -121,10 +122,10 @@ public class ProjectBranchesScreen extends PaginatedProjectScreen {
super.onInitUI();
initPageHeader();
prev = new Hyperlink(Util.C.pagedListPrev(), true, "");
prev = PagingHyperlink.createPrev();
prev.setVisible(false);
next = new Hyperlink(Util.C.pagedListNext(), true, "");
next = PagingHyperlink.createNext();
next.setVisible(false);
addPanel = new FlowPanel();
@@ -174,6 +175,7 @@ public class ProjectBranchesScreen extends PaginatedProjectScreen {
branchTable = new BranchesTable();
delBranch = new Button(Util.C.buttonDeleteBranch());
delBranch.setStyleName(Gerrit.RESOURCES.css().branchTableDeleteButton());
delBranch.addClickHandler(new ClickHandler() {
@Override
public void onClick(final ClickEvent event) {

View File

@@ -26,6 +26,7 @@ import com.google.gerrit.client.rpc.GerritCallback;
import com.google.gerrit.client.rpc.Natives;
import com.google.gerrit.client.ui.HighlightingInlineHyperlink;
import com.google.gerrit.client.ui.Hyperlink;
import com.google.gerrit.client.ui.PagingHyperlink;
import com.google.gerrit.client.ui.ProjectSearchLink;
import com.google.gerrit.client.ui.ProjectsTable;
import com.google.gerrit.common.PageLinks;
@@ -76,10 +77,10 @@ public class ProjectListScreen extends PaginatedProjectScreen {
setPageTitle(Util.C.projectListTitle());
initPageHeader();
prev = new Hyperlink(Util.C.pagedListPrev(), true, "");
prev = PagingHyperlink.createPrev();
prev.setVisible(false);
next = new Hyperlink(Util.C.pagedListNext(), true, "");
next = PagingHyperlink.createNext();
next.setVisible(false);
projects = new ProjectsTable() {

View File

@@ -23,6 +23,7 @@ import com.google.gerrit.client.rpc.Natives;
import com.google.gerrit.client.rpc.ScreenLoadCallback;
import com.google.gerrit.client.ui.Hyperlink;
import com.google.gerrit.client.ui.NavigationTable;
import com.google.gerrit.client.ui.PagingHyperlink;
import com.google.gerrit.common.PageLinks;
import com.google.gerrit.reviewdb.client.Project;
import com.google.gwt.core.client.JsArray;
@@ -56,10 +57,10 @@ public class ProjectTagsScreen extends PaginatedProjectScreen {
protected void onInitUI() {
super.onInitUI();
initPageHeader();
prev = new Hyperlink(Util.C.pagedListPrev(), true, "");
prev = PagingHyperlink.createPrev();
prev.setVisible(false);
next = new Hyperlink(Util.C.pagedListNext(), true, "");
next = PagingHyperlink.createNext();
next.setVisible(false);
tagsTable = new TagsTable();

View File

@@ -1258,6 +1258,10 @@ a:hover.downloadLink {
cursor: pointer;
}
.branchTableDeleteButton {
margin-top: 5px;
}
.branchTablePrevNextLinks {
position: relative;
}
@@ -1310,3 +1314,10 @@ a:hover.downloadLink {
font-size: 7pt;
padding: 1px;
}
/* List Screens */
.pagingLink {
font-size: 18px;
margin-top: 5px;
margin-bottom: 15px;
}

View File

@@ -0,0 +1,34 @@
// Copyright (C) 2015 The Android Open Source Project
//
// Licensed under the Apache License, Version 2.0 (the "License");
// you may not use this file except in compliance with the License.
// You may obtain a copy of the License at
//
// http://www.apache.org/licenses/LICENSE-2.0
//
// Unless required by applicable law or agreed to in writing, software
// distributed under the License is distributed on an "AS IS" BASIS,
// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
// See the License for the specific language governing permissions and
// limitations under the License.
package com.google.gerrit.client.ui;
import com.google.gerrit.client.Gerrit;
import com.google.gerrit.client.admin.Util;
public class PagingHyperlink extends Hyperlink {
public static PagingHyperlink createPrev() {
return new PagingHyperlink(Util.C.pagedListPrev());
}
public static PagingHyperlink createNext() {
return new PagingHyperlink(Util.C.pagedListNext());
}
private PagingHyperlink(String text) {
super(text, true, "");
setStyleName(Gerrit.RESOURCES.css().pagingLink());
}
}