PKP Bugzilla – Bug 7660
Last modified: 2012-09-10 11:08:51 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
*** Bug 7592 has been marked as a duplicate of this bug. ***
*** Bug 7675 has been marked as a duplicate of this bug. ***
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.
Let confirmation modals resize to content width
style modal corner close icon as per Evoke spec
Make sure navigation is beneath modal overlay
(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)
continue Evoke styling for modals
adapt modal titles to Evoke spec
Juan, a question for you - I've noticed that our confirmation modals do not have titles. Should they? Or is the message enough?
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)
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?
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)
modal_add_item (green plus sign)
modal_manage (a larger version of our manage icon?)
fix sprites psuedo selector
begin modal icon cleanup
Created attachment 3823 [details]
Sprites with included larger icons
Created attachment 3824 [details]
Adds CSS elements for new large icons
introduce modal icons (from Chris)
tweak modal title position
add modal icons to (most?) modals
Add modal icon for stage participants grid
add modal icon for approve proofs
add delete titles, icons to 'delete' confirmation modals
set defaults for icons and titles for confirmation modals
add icon to email reset modal
add parameter for setting the width of modals
prevent 'review guidelines' modal from being too wide
add icon, set width of modal
reposition modals if they are resized
(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.
add announcement type modal missing icon
also add announcement
add modal icons for announcement modals
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!
prevent 'auto' modals from going too wide
let confirmation link actions accept a modal icon parameter
Care to have a peek, Juan? Thanks!
One other large modal icon, Chris -- we need something to represent an 'upgrade'. Also, a stylized exclamation point for a general confirmation modal. Thanks!
more modal icons
Created attachment 3841 [details]
CSS for new sprites
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.
introduce new modal icons (from Chris)
modal icon tweaks
editorial decision modals missing icons
close button icon gone missing (it says "close" on top right corner instead of showing the X)
nevermind last comment. must have been a cache issue.
- 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?
- the one for selecting files (manage files) needs formatting
Change title of Notes modal. This is actually the information centre.
- Make title: "Info: [file name]"
re-enable grey background for widgets (for tops of modals)
fix title for notes modal, icons for manage catalog entry modal
change modal title for upload/select files grid, improve form, allow those linkactions to have optional titles
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.
use file name in info modal title
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.
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.