Opened 6 years ago

Closed 6 years ago

Last modified 6 years ago

#1655 closed enhancement (fixed)

GUI improvements

Reported by: nicklas Owned by: nicklas
Priority: major Milestone: BASE 3.1
Component: web Version:
Keywords: Cc:

Description

There are several minor things that have annoying me for some time. For example:

  • Some popup dialogs automatically resize their content when the dialog is resized but some don't.
  • Difficulties to use the entire area of a popup dialog and nothing more. Some dialogs have lots of unused space, some get scrollbars because the content is too big.
  • #160: List pages should be able to list subset of items
  • Space is wasted due to borders, space between borders, a secondary border, etc.

Attachments (7)

login.png (114.4 KB) - added by nicklas 6 years ago.
Login page
home.png (140.6 KB) - added by nicklas 6 years ago.
Home page
sample-view.png (101.6 KB) - added by nicklas 6 years ago.
Sample view page
sample-overview.png (155.6 KB) - added by nicklas 6 years ago.
Sample overview page
sample-edit.png (68.4 KB) - added by nicklas 6 years ago.
Sample edit dialog
job-view.png (82.1 KB) - added by nicklas 6 years ago.
Job dialog
logout.png (33.3 KB) - added by nicklas 6 years ago.
Logout dialog

Download all attachments as: .zip

Change History (87)

comment:1 Changed 6 years ago by nicklas

  • Owner changed from everyone to nicklas
  • Status changed from new to assigned

comment:2 Changed 6 years ago by nicklas

(In [5900]) References #1655: GUI improvements

  • Added a CacheControlFilter which can be configured to disable caching for certain file types. This is very useful in a development environment, but not recommended in production.
  • Redesigned buttons with rounded corners.

  • Use more modern css rules for buttons and button groups. Got rid of "align" attribute that is deprecated in html.

  • Place buttons in popup dialogs using coordinates

relative to the bottom of the dialog so that they follow along if the dialog is resized. Only the popups in the "BASE" menu has been fixed so far.

Due to changes in css files, some other layout is now really "ugly", but this will be fixed later...

comment:3 Changed 6 years ago by nicklas

(In [5901]) References #1655: GUI improvements

  • Changed style of the header in popup dialog.

  • Use PNG instead of GIF for help icon.

comment:4 Changed 6 years ago by nicklas

(In [5902]) References #1655: GUI improvements

  • Make sure content on dialog can be placed so that it fills the free space between the title and buttons.

  • The 'Logout' dialog is easy and provides the simple case where everything is centered in the remaining space. Should also work when resizing the dialog.

  • The 'Reset filters' and 'Broadcast message' dialogs need a bit more work. The look ok now, but there are some minor things to fix yet.

comment:5 Changed 6 years ago by nicklas

(In [5903]) References #1655: GUI improvements

  • Switch to PNG for some more icons.
  • Changed background and border colors to a brighter gray
  • Re-designed buttons again using a blue-ish border to indicate hovering.
  • Finalized the "Broadcast message" and "Reset filters" popups.

comment:6 Changed 6 years ago by nicklas

(In [5904]) References #1655: GUI improvements

  • Started on tabcontrol re-design. It does look good on popup windows with tabs at bottom, but there are optimizations to be made still.

  • Started working on a few more dialogs in the BASE menu. The look good, but there is more optimizations to be made.

comment:7 Changed 6 years ago by nicklas

(In [5905]) References #1655: GUI improvements

  • Use relative font sizes (em and %) instead of pixel values. This should make it possible to use relative values for everything and we don't have to split up into size_*.css

  • Removed "valign" attribute from lots of tables.

  • Removed "wrap" attribute from lots of texarea fields.

comment:8 Changed 6 years ago by nicklas

(In [5906]) References #1655: GUI improvements

  • Implement vertical button groups.
  • Replaced some gif icons with png variants.

comment:9 Changed 6 years ago by nicklas

(In [5907]) References #1655: GUI improvements

New design on some more pages:

  • Impersonate
  • Switch user
  • Calendar
  • Close popup message
  • Configure columns
  • Manage lists contexts
  • View help
  • Set owner
  • Share items
  • About

comment:10 Changed 6 years ago by nicklas

(In [5908]) References #1655: GUI improvements

  • File manager dialogs
  • File server edit dialog
  • Changed zoom.gif to png

comment:11 Changed 6 years ago by nicklas

(In [5909]) References #1655: GUI improvements

  • Project dialog
  • Permission template dialog
  • Jobs dialog
  • Messages dialog
  • Session dialog

comment:12 Changed 6 years ago by nicklas

(In [5910]) References #1655: GUI improvements

  • Plugin wizards

comment:13 Changed 6 years ago by nicklas

(In [5911]) References #1655: GUI improvements

  • Plugin wizards
  • Dialogs on login page (forgot password, get account, broadcast message)
  • Select color dialog

comment:14 Changed 6 years ago by nicklas

(In [5912]) References #1655: GUI improvements

  • Table exporter

comment:15 Changed 6 years ago by nicklas

(In [5913]) References #1655: GUI improvements

  • Edit dialogs in Biomaterial LIMS

comment:16 Changed 6 years ago by nicklas

(In [5914]) References #1655: GUI improvements

  • Item overview (Validation options dialog)
  • Some minor changes to border placement

comment:17 Changed 6 years ago by nicklas

(In [5915]) References #1655: GUI improvements

  • Physical, derived and raw bioassay edit dialogs
  • Data files dialog tab
  • Spotimages and raw data dialogs
  • Some other minor size adjustments

comment:18 Changed 6 years ago by nicklas

(In [5916]) References #1655: GUI improvements

Edit dialogs for experiments, formulas, reporters and reporter lists.

comment:19 Changed 6 years ago by nicklas

(In [5917]) References #1655: GUI improvements

Edit dialogs for array lims.

comment:20 Changed 6 years ago by nicklas

(In [5918]) References #1655: GUI improvements

Started with the redesign of list and view pages. I am using the biosource and sample pages for testing. Changes affect more of the non-fixed pages since a lot of the contents is generated by taglibs. This means that the non-fixed pages doesn't look very good at the moment.

Table listings has only been fixed so that they display and can be used. Much more work is needed as part of #160.

I have also fixed the following pages:

  • The main menu
  • Login page + Home page
  • Item overview frameset
  • Plugins and extensions overview

Changed 6 years ago by nicklas

Login page

Changed 6 years ago by nicklas

Home page

Changed 6 years ago by nicklas

Sample view page

Changed 6 years ago by nicklas

Sample overview page

Changed 6 years ago by nicklas

Sample edit dialog

Changed 6 years ago by nicklas

Job dialog

Changed 6 years ago by nicklas

Logout dialog

comment:21 Changed 6 years ago by nicklas

(In [5919]) References #1655: GUI improvements

Fixes image alignment in several places.

comment:22 Changed 6 years ago by nicklas

(In [5920]) References #1655: GUI improvements

Edit dialogs in plates section of Array LIMS.

comment:23 Changed 6 years ago by nicklas

(In [5921]) References #1655: GUI improvements

Edit dialogs for all items in the first level under the Administrate menu.

comment:24 Changed 6 years ago by nicklas

(In [5922]) References #1655: GUI improvements

Edit dialog for the rest of the items in the administrate menu.

comment:25 Changed 6 years ago by nicklas

(In [5923]) References #1655: GUI improvements

  • Edit dialogs for bioassay set, bioassay, transformation and some other experiment related dialogs
  • Analysis plug-in that have special jsp forms
  • Change history

comment:26 Changed 6 years ago by nicklas

(In [5924]) References #1655: GUI improvements

Plot functions for spot data and in experiment explorer.

comment:27 Changed 6 years ago by nicklas

(In [5927]) References #1655: GUI improvements

Started with the bioplate event wizards. The 'place-on-plate' and 'move biomaterial' wizards are looking good so far, but there are a few more cases to test. The 'create child plate' remains and the bioplate view page should also be checked.

comment:28 Changed 6 years ago by nicklas

(In [5928]) References #1655: GUI improvements

The "create child plate" wizard.

comment:29 Changed 6 years ago by nicklas

(In [5929]) References #1655: GUI improvements

Started to re-design the table taglib.

comment:30 Changed 6 years ago by nicklas

(In [5935]) References #1655: GUI improvements

  • More changes to table and section taglibs. Simple item lists should now display ok (after using a different set of tags for the header row)
  • Hidable sections have been re-designed and should now look a bit better. However, in many of the places we use a section it is only used when there is data to list. The section should be used in all cases so we need to move the conditional test inside.
  • The code for listing "Shared to" information for items have been moved to an "include" page and the old code has been replaced in a lot of pages (may still be missing some).
  • The "Annotations & parameter" tab have been fixed with the new design.
  • The biosource, sample, extract and tag view pages have also been fixed.

comment:31 Changed 6 years ago by nicklas

(In [5936]) References #1655: GUI improvements

Adding file that should have been part of [5935]

comment:32 Changed 6 years ago by nicklas

(In [5937]) References #1655: GUI improvements

  • Fixes rest of view pages in biomaterials menu.
  • Use SVG filter to make disabled button images grayscale.

comment:33 Changed 6 years ago by nicklas

(In [5938]) References #1655: GUI improvements

  • Trashcan and file manager

comment:34 Changed 6 years ago by nicklas

(In [5939]) References #1655: GUI improvements

View pages for:

  • File server
  • Projects
  • Permission templates
  • Physical, derived and raw bioassays
  • Experiments, bioassay set
  • Formulas
  • Reporters
  • Reporter lists

comment:35 Changed 6 years ago by nicklas

(In [5940]) References #1655: GUI improvements

  • Transformations
  • Extra values
  • Bioassays
  • Experiment explorer

comment:36 Changed 6 years ago by nicklas

(In [5941]) References #1655: GUI improvements

View pages for all items in the Adminstrate menu.

comment:37 Changed 6 years ago by nicklas

(In [5942]) References #1655: GUI improvements

Modify lots of boolean taglib parameters.

comment:38 Changed 6 years ago by nicklas

(In [5943]) References #1655: GUI improvements

Plate section of Array LIMS.

comment:39 Changed 6 years ago by nicklas

(In [5944]) References #1655: GUI improvements

Array section of Array LIMS. This should complete the view pages for all items. Now, it is only the list pages left.

comment:40 Changed 6 years ago by nicklas

(In [5945]) References #1655: GUI improvements

Changes a few GIF to PNG. Remove all _disabled variants, since that should be CSS-controlled now.

comment:41 Changed 6 years ago by nicklas

(In [5946]) References #1655: GUI improvements

Replaces a lot of GIF images with PNG.

comment:42 Changed 6 years ago by nicklas

(In [5948]) References #1655: GUI improvements

Started with the list pages. So far the reporters and the biosurce, sample and extract list pages have been done. The other pages have just been modified to not cause any compilation problems and to display almost ok.

comment:43 Changed 6 years ago by nicklas

(In [5949]) References #1655: GUI improvements

  • Use correct width/height (1050/700) of popups for selecting items from a list.
  • Got rid of the <tbl:columns> tag.

comment:44 Changed 6 years ago by nicklas

(In [5950]) References #1655: GUI improvements

Fixes the "Disk usage" pages.

comment:45 Changed 6 years ago by nicklas

(In [5951]) References #1655: GUI improvements

  • Fixes rest of list pages in Biomaterial LIMS menu
  • Introduced an 'iframe' page type so that thos pages doesn't have to 'cannibalise' on the 'popup' page type (doesn't works well with absolutely positioned content).
  • Fixed subclass="dialogbuttons" on all list pages when used in popup form

comment:46 Changed 6 years ago by nicklas

(In [5952]) References #1655: GUI improvements

List page in the View menu

comment:47 Changed 6 years ago by nicklas

(In [5953]) References #1655: GUI improvements

Select file/directory and "save as" dialogs.

comment:48 Changed 6 years ago by nicklas

(In [5954]) References #1655: GUI improvements

List pages in Array LIMS and Administrate menus. This should complete all list pages.

comment:49 Changed 6 years ago by nicklas

(In [5955]) References #1655: GUI improvements

"Test with file" dialog.

comment:50 Changed 6 years ago by nicklas

(In [5956]) References #1655: GUI improvements

  • External program executor configuration dialog.
  • Exception dialogs.

comment:51 Changed 6 years ago by nicklas

(In [5957]) References #1655: GUI improvements

  • List of annotations and failures/warnings in the 'Item overview' details.
  • Bottom border in 'Inherit annotations' dialog.

comment:52 Changed 6 years ago by nicklas

(In [5958]) References #1655: GUI improvements

  • Some popup window sizes.
  • Activate project popup.

comment:53 Changed 6 years ago by nicklas

(In [5959]) References #1655: GUI improvements

  • Selection list for filtering tables
  • Minor issues with experiment explorer

comment:54 Changed 6 years ago by nicklas

(In [5960]) References #1655: GUI improvements

  • Icon sizes to 16x16
  • Catch 'missing image' event and display an error image instead for menu item and buttons.
  • Incorrectly wrapped <form> in plug-installation wizard (caused it to not display in IE).
  • Minor adjustments for displaying tables in different base font sizes.

comment:55 Changed 6 years ago by nicklas

(In [5961]) References #1655: GUI improvements

Add biomaterial to list dialog.

comment:56 Changed 6 years ago by nicklas

(In [5962]) References #1655: GUI improvements

Fixes some misplaced borders.

comment:57 Changed 6 years ago by nicklas

(In [5965]) References #1655: GUI improvements

Display item type in a smaller+grayer font.

comment:58 Changed 6 years ago by nicklas

(In [5967]) References #1655: GUI improvements

Slight adjustment to legend: can't be changed later

comment:59 Changed 6 years ago by nicklas

(In [5968]) References #1655: GUI improvements

Added note about incompatibility to the documentation.

comment:60 Changed 6 years ago by nicklas

(In [5970]) References #1655: GUI improvements

Avoid line-wrapping of message titles on home/login page. Reduce unused space in the menu.

comment:61 Changed 6 years ago by nicklas

(In [5971]) References #1655: GUI improvements

  • Started to create screen shots with the new design for the user documentation.
  • Got rid of old .gif icons in the documentation and replaced them with .png versions.
  • Fixed some issues with placement of 'required information' in two dialogs.

comment:62 Changed 6 years ago by nicklas

(In [5972]) References #1655: GUI improvements

  • More screen shots. Done to chapter 10 so far.

comment:63 Changed 6 years ago by nicklas

(In [5973]) References #1655: GUI improvements

  • More screen shots. Done to chapter 15 so far.

comment:64 Changed 6 years ago by nicklas

(In [5975]) References #1655: GUI improvements

  • More screen shots. Done to chapter 19 so far.

comment:65 Changed 6 years ago by nicklas

(In [5976]) References #1655: GUI improvements

  • All screen shots are now done.
  • Added a section about how to configure the computer to take nice-looking screen shots.

comment:66 Changed 6 years ago by nicklas

(In [5977]) References #1655: GUI improvements

  • Cleaning up css files
  • Getting rid of unuses code (taglibs, jsp, etc.)
  • Found a few places with error message not being properly formatted.

comment:67 Changed 6 years ago by nicklas

  • Resolution set to fixed
  • Status changed from assigned to closed

comment:68 Changed 6 years ago by nicklas

(In [5978]) References #1655: GUI improvements

Remove debug message.

comment:69 Changed 6 years ago by nicklas

(In [5984]) References #1655: GUI improvements

Show name of subtype if available in list with inherited annotations.

comment:70 Changed 6 years ago by nicklas

(In [6003]) References #1655: GUI improvements

  • Specified min column width for tables.
  • Fixed some issues with the "Test with file" display.

comment:71 Changed 6 years ago by nicklas

(In [6004]) References #1655: GUI improvements

  • Only the "Save and configure" buttons should continue with the plug-in configuration wizard.

comment:72 Changed 6 years ago by nicklas

(In [6005]) References #1655: GUI improvements

  • Use tree-like graphics when selecting platform+variant since IE doesn't use CSS on selection list options.

comment:73 Changed 6 years ago by nicklas

(In [6006]) References #1655: GUI improvements

  • Incorrect call for validating the form

comment:74 Changed 6 years ago by nicklas

(In [6007]) References #1655: GUI improvements

  • Do not use tabs when selecting items in a popup
  • Show the "Ok" and "Cancel" buttons when selecting items in a popup

comment:75 Changed 6 years ago by nicklas

(In [6008]) References #1655: GUI improvements

  • Get rid of scrollbar in annotations tab

comment:76 Changed 6 years ago by nicklas

(In [6010]) References #1655: GUI improvements

  • Use error-type message container for web exception.

comment:77 Changed 6 years ago by nicklas

(In [6011]) References #1655: GUI improvements

  • Revert to GIF for the filter icon.

comment:78 Changed 6 years ago by nicklas

(In [6012]) References #1655: GUI improvements

  • Overview and correction factor plots

comment:79 Changed 6 years ago by nicklas

(In [6013]) References #1655: GUI improvements

  • New plot examples

comment:80 Changed 6 years ago by nicklas

(In [6015]) References #1655: GUI improvements

  • Call to setOnClick(null) should make the icon disabled unless it has been explicitely enabled in the first place.
Note: See TracTickets for help on using tickets.