New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Tidy up UI (Part I) #287

Closed
ypujante opened this Issue Apr 2, 2015 · 3 comments

Comments

Projects
None yet
2 participants
@ypujante
Member

ypujante commented Apr 2, 2015

  • Several pages like "Agents List", "Fabrics page" (admin) display tables that are too wide
  • Rows should alternate colors to be easier to read
  • Columns should be sortable
  • Revisit position of checkboxes as apparently right is not standard.

@ypujante ypujante added the feature label Apr 2, 2015

@sodul

This comment has been minimized.

Contributor

sodul commented Apr 3, 2015

For the checkboxes there is a very simple example here:
http://www.w3.org/wiki/HTML/Elements/input/checkbox

The basic is that the checkbox and the text are wrapped in a 'label' tag which makes the text clickable:
<label><input type="checkbox" name="ny"> New York</label>

In the current UI of Glu the checkboxes and text are usually in separate table cells so they should be moved together and the checkbox to the left.

@sodul

This comment has been minimized.

Contributor

sodul commented Apr 3, 2015

As an example here are the updated checkboxes for /console/plan/deployments:

<div>
    <label style="display:inline"><input type="checkbox" name="autoRefresh" checked="checked" id="autoRefresh" onclick="autoRefresh();"> Auto Refresh<input type="hidden" name="_autoRefresh"></label> <img src="/console/static/images/spinner.gif" alt="Spinner" id="autoRefreshSpinner" name="autoRefreshSpinner">
    |
    <label style="display:inline"><input type="checkbox" name="usernameFilter" checked="checked" id="usernameFilter" onclick="showHide();"> Username<input type="hidden" name="_usernameFilter"></label>
    |
    <label style="display:inline"><input type="checkbox" name="startTimeFilter" checked="checked" id="startTimeFilter" onclick="showHide();"> Start Time<input type="hidden" name="_startTimeFilter"></label>
    |
    <label style="display:inline"><input type="checkbox" name="endTimeFilter" checked="checked" id="endTimeFilter" onclick="showHide();"> End Time<input type="hidden" name="_endTimeFilter"></label>
    |
    <label style="display:inline"><input type="checkbox" name="durationFilter" checked="checked" id="durationFilter" onclick="showHide();"> Duration<input type="hidden" name="_durationFilter"></label>
    |
    <label style="display:inline"><input type="checkbox" name="statusFilter" checked="checked" id="statusFilter" onclick="showHide();"> Status<input type="hidden" name="_statusFilter"></label>
    |
    <label style="display:inline"><input type="checkbox" name="actionsFilter" checked="checked" id="actionsFilter" onclick="showHide();"> Actions<input type="hidden" name="_actionsFilter"></label>
</div>

@ypujante ypujante added the pending label Apr 6, 2015

@ypujante ypujante changed the title from Tidy up UI to Tidy up UI (Part I) Apr 30, 2015

ypujante added a commit that referenced this issue May 1, 2015

ypujante added a commit that referenced this issue May 1, 2015

@ypujante

This comment has been minimized.

Member

ypujante commented May 1, 2015

Implemented Part I in glu 5.5.6. Created Part II #294 for the remainder.

@ypujante ypujante closed this May 1, 2015

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment