We are moving to Git Issues for bug tracking in future releases. During transition, content will be in both tools. If you'd like to file a new bug, please create an issue.

Bug 7660 - UI: Modals
UI: Modals
Product: OMP
Classification: Unclassified
Component: User Interface
All All
: P3 normal
Assigned To: Juan Pablo Alperin
: 7592 7675 (view as bug list)
Depends on:
  Show dependency treegraph
Reported: 2012-07-05 13:40 PDT by Juan Pablo Alperin
Modified: 2012-09-10 11:08 PDT (History)
3 users (show)

See Also:
Version Reported In:
Also Affects:

Sprites with included larger icons (20.59 KB, image/png)
2012-07-19 10:51 PDT, Chris MacDonald
Adds CSS elements for new large icons (873 bytes, application/octet-stream)
2012-07-19 10:57 PDT, Chris MacDonald
CSS for new sprites (970 bytes, patch)
2012-08-10 13:37 PDT, Chris MacDonald
Details | Diff
Updated sprites file (21.53 KB, image/png)
2012-08-10 13:44 PDT, Chris MacDonald

Note You need to log in before you can comment on or make changes to this bug.
Description Juan Pablo Alperin 2012-07-05 13:40:46 PDT
1) modals should be of variable size (especially confirmation modals)
2) all modals missing icon on top left
3) Modals should look as per Evoke screenshots at: http://cl.ly/HoGp
Comment 1 Juan Pablo Alperin 2012-07-05 13:41:07 PDT
*** Bug 7592 has been marked as a duplicate of this bug. ***
Comment 2 Juan Pablo Alperin 2012-07-09 13:28:23 PDT
*** Bug 7675 has been marked as a duplicate of this bug. ***
Comment 3 Jason Nugent 2012-07-18 05:59:41 PDT
A few thoughts on this.

First, the reason why modals do not have icons is because we don't have the icons.  If you look at our sprite sheet, we only have two or three icons in the large size for modal windows, so if we add icons to modals we will need to create many more than we currently have.

Second, as for resizing.  It is possible to configure a modal to resize itself automatically and fit the contained content (even with AJAX modals), but we have modals that contain tabs that dynamically load when they are shown.  I have tested this and it results in a modal that resizes itself every time a tab is clicked.  In some cases it it is quite severe -- the Book Info modal has relatively narrow tabs like the notes tab, and very wide ones that contain grids for the submission metadata.  The result is that the modal resizes and also ends up very much off center.  Moving it back to center after doing a resize is very jarring.  

Confirmation modals are probably fine for resizing since they are pre-loaded with text and do not contain tabs.
Comment 4 Jason Nugent 2012-07-18 06:50:02 PDT
Let confirmation modals resize to content width
Comment 5 Jason Nugent 2012-07-18 07:00:02 PDT
style modal corner close icon as per Evoke spec
Comment 6 Jason Nugent 2012-07-18 10:30:02 PDT
Make sure navigation is beneath modal overlay
Comment 7 Juan Pablo Alperin 2012-07-18 10:44:42 PDT
(In reply to comment #3)

re: icons... I think a bunch of the ones we need are just bigger versions of existing icons. Can you specify them and ask Chris for them? 

re: resizing... the confirmation automatic resize looks great. Lets not automatically resize other modals, but add something so we can specify sizes from code. We have have a few standard sizes specified in code/CSS (a la small/medium/large)
Comment 8 Jason Nugent 2012-07-18 11:15:02 PDT
continue Evoke styling for modals
Comment 9 Jason Nugent 2012-07-19 03:45:02 PDT
adapt modal titles to Evoke spec
Comment 10 Jason Nugent 2012-07-19 03:47:45 PDT
Juan, a question for you - I've noticed that our confirmation modals do not have titles.  Should they?  Or is the message enough?
Comment 11 Jason Nugent 2012-07-19 06:57:03 PDT
I think the style elements are there. It's now a question of getting the large sprites into the sprites sheet.  We currently have four in the sprite sheet:

(and one other one, it looks like a piece of paper with a pen.  Not sure what it represents)

we need:
information (the open book, we use for the Catalog Entry)
more_info (the stylized 'i' we use for Book Info and More Information)
modal_title (I think this is supposed to be a generic one)

I have to fix up the CSS -- the :before pseudo selector is incorrect in this case, but Chris, how do you feel about creating larger versions of those sprites?
Comment 12 Jason Nugent 2012-07-19 07:15:56 PDT
A few others:

approve_proofs (a checkbox?  I have no idea)
edit (giant pencil)
confirm (I don't think we have something for this yet)
Comment 13 Jason Nugent 2012-07-19 07:40:43 PDT
modal_add_item (green plus sign)
Comment 14 Jason Nugent 2012-07-19 07:45:29 PDT
modal_manage (a larger version of our manage icon?)
Comment 15 Jason Nugent 2012-07-19 07:55:02 PDT
fix sprites psuedo selector
Comment 16 Jason Nugent 2012-07-19 07:55:02 PDT
begin modal icon cleanup
Comment 17 Chris MacDonald 2012-07-19 10:51:40 PDT
Created attachment 3823 [details]
Sprites with included larger icons
Comment 18 Chris MacDonald 2012-07-19 10:57:07 PDT
Created attachment 3824 [details]
Adds CSS elements for new large icons
Comment 19 Jason Nugent 2012-07-19 12:25:02 PDT
introduce modal icons (from Chris)
Comment 20 Jason Nugent 2012-07-19 12:25:02 PDT
tweak modal title position
Comment 22 Jason Nugent 2012-07-19 12:30:02 PDT
add modal icons to (most?) modals
Comment 23 Jason Nugent 2012-07-19 13:05:02 PDT
Add modal icon for stage participants grid
Comment 24 Jason Nugent 2012-07-20 03:55:03 PDT
add modal icon for approve proofs
Comment 25 Jason Nugent 2012-07-24 09:20:03 PDT
add delete titles, icons to 'delete' confirmation modals
Comment 26 Jason Nugent 2012-07-24 10:50:03 PDT
set defaults for icons and titles for confirmation modals
Comment 27 Jason Nugent 2012-07-25 03:40:04 PDT
add icon to email reset modal
Comment 28 Jason Nugent 2012-07-25 06:50:03 PDT
add parameter for setting the width of modals
Comment 29 Jason Nugent 2012-07-25 06:55:02 PDT
prevent 'review guidelines' modal from being too wide
Comment 30 Jason Nugent 2012-07-25 06:55:02 PDT
add icon, set width of modal
Comment 31 Jason Nugent 2012-07-25 10:35:02 PDT
reposition modals if they are resized
Comment 32 Juan Pablo Alperin 2012-07-26 14:49:44 PDT
(In reply to comment #4)
Jason: these shouldn't just go as wide as the text. It makes for some short fat modals. It should shrink in both directions, to wrap approximately around the text.
Comment 33 Juan Pablo Alperin 2012-07-26 15:16:13 PDT
add announcement type modal missing icon
Comment 34 Juan Pablo Alperin 2012-07-26 15:16:25 PDT
also add announcement
Comment 35 Jason Nugent 2012-07-27 10:20:03 PDT
add modal icons for announcement modals
Comment 36 Jason Nugent 2012-07-27 10:22:32 PDT
Juan, I've added a check to the handler for modals to prevent them from going too wide.  Can you have a look? (A good example would be the 'reset' modal for email templates in Settings) If it's still not quite right, a specific example of one that looks bad would be really helpful.  Thanks!
Comment 37 Jason Nugent 2012-07-27 10:25:02 PDT
prevent 'auto' modals from going too wide
Comment 38 Jason Nugent 2012-08-01 07:05:03 PDT
let confirmation link actions accept a modal icon parameter
Comment 39 Jason Nugent 2012-08-01 11:23:02 PDT
Care to have a peek, Juan?  Thanks!
Comment 40 Jason Nugent 2012-08-01 11:36:06 PDT
One other large modal icon, Chris -- we need something to represent an 'upgrade'.  Also, a stylized exclamation point for a general confirmation modal.  Thanks!
Comment 41 Jason Nugent 2012-08-01 11:45:01 PDT
more modal icons
Comment 42 Chris MacDonald 2012-08-10 13:37:32 PDT
Created attachment 3841 [details]
CSS for new sprites
Comment 43 Chris MacDonald 2012-08-10 13:44:47 PDT
Created attachment 3842 [details]
Updated sprites file

The two last attachments I think bring the icons up to date...

Add a large exclamation icon for modals, and upgrade icon both large and small, a wrench icon for modals (bug 7655) and gets rid of some superfluous icons mentioned in an email thread last month.
Comment 44 Jason Nugent 2012-08-10 14:05:02 PDT
introduce new modal icons (from Chris)
Comment 45 Jason Nugent 2012-08-11 07:30:02 PDT
modal icon tweaks
Comment 46 Juan Pablo Alperin 2012-08-20 18:59:49 PDT
editorial decision modals missing icons
Comment 47 Juan Pablo Alperin 2012-08-20 19:15:49 PDT
close button icon gone missing (it says "close" on top right corner instead of showing the X)
Comment 48 Juan Pablo Alperin 2012-08-20 19:30:55 PDT
nevermind last comment. must have been a cache issue.
Comment 49 Juan Pablo Alperin 2012-08-20 20:10:08 PDT
- grey shading on top missing (also posted this on info centre bug)

- jason, can  you make a list of missing modal icons? 

- what about programmable modal sizes? not automatic, but being able to specify on modal creation a small/medium/large? that kind fo thing?
Comment 50 Juan Pablo Alperin 2012-08-20 21:28:50 PDT
	- the one for selecting files (manage files) needs formatting
	- http://cl.ly/Irw6
Comment 51 Juan Pablo Alperin 2012-08-21 09:59:10 PDT
Change title of Notes modal. This is actually the information centre. 
- Make title: "Info: [file name]"
Comment 52 Jason Nugent 2012-08-22 06:10:03 PDT
re-enable grey background for widgets (for tops of modals)
Comment 53 Jason Nugent 2012-08-22 06:15:02 PDT
fix title for notes modal, icons for manage catalog entry modal
Comment 54 Jason Nugent 2012-08-22 07:10:02 PDT
change modal title for upload/select files grid, improve form, allow those linkactions to have optional titles
Comment 55 Jason Nugent 2012-08-22 07:12:31 PDT
Juan, I found one or two more modals that needed icons, but I haven't noticed any others.  I've cleaned up the upload/select files modal and grid.

This probably got lost in a commit, but I did add the ability for Modals to be created with optional widths.  The framework is there now, in Modal.inc.php -- you can either define a few common sized constants to give you some extra variety (there are two now, a 710px one and an 'auto' one for resizing), and then just pass them in to the constructor.  Alternatively, you can pass in a pixel size if you like.

It'd just be a matter of going through them and seeing which ones should be sized differently.  But that's in.
Comment 56 Jason Nugent 2012-08-22 15:10:02 PDT
use file name in info modal title
Comment 57 Jason Nugent 2012-08-25 06:49:39 PDT
Hey Juan and Chris,

I found a few more modals that may need icons.  During testing today I realized that our editorial decision action modals (internal review, external review, send to production,etc) do not have icons. They would be the large variety.
Comment 58 Jason Nugent 2012-09-06 06:25:14 PDT
Juan, I think that bug #7798 captures the remaining modal icons, and that the other UI elements for this bug are done.  If you can confirm and either close this or mark it as a duplicate, or let me know if there are any other modal improvements to be made, that'd be swell.