Tidy up UI (Part I) - Githubissues

ypujante commented 9 years ago

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.

sodul commented 9 years ago

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 commented 9 years ago

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 commented 9 years ago

Implemented Part I in glu 5.5.6. Created Part II https://github.com/pongasoft/glu/issues/294 for the remainder.

pongasoft / glu

Tidy up UI (Part I) #287