PKP Bugzilla – Bug 7660
UI: Modals
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 https://github.com/pkp/pkp-lib/commit/ba8df553eb369f3fbd7549032eb1c892e1ea3f22
style modal corner close icon as per Evoke spec https://github.com/pkp/pkp-lib/commit/b4ea890253f8e2df3e9d12fc440cf324d353babf
Make sure navigation is beneath modal overlay https://github.com/pkp/omp/commit/c9fe111f44e86a3d045420df23870c0bd6bbd4b0
(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 https://github.com/pkp/pkp-lib/commit/7fc16f7dbe2f06fbbddd1826b9b5405ec7eb96e4
adapt modal titles to Evoke spec https://github.com/pkp/pkp-lib/commit/d2af2f77f23ac5d020ddec7855b84120fe243da7
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: add_user add_role add_file (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) email delete 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 https://github.com/pkp/pkp-lib/commit/789f1a28a7aebfc0befc21ffa18e4a9c7f6ef637
begin modal icon cleanup https://github.com/pkp/omp/commit/94ea2d1883b822a15f8a04694ee475e99077e547
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) https://github.com/pkp/pkp-lib/commit/43cb4fa9724bca3a13acfd5197c6e300697fb6e4
tweak modal title position https://github.com/pkp/pkp-lib/commit/e021730b821d87d3d58f40571da04b024a473987
missed one https://github.com/pkp/omp/commit/f238d707ce27a7a8692a1fb76fcaeb09a96773e6
add modal icons to (most?) modals https://github.com/pkp/omp/commit/2227172d8bf4473ca97e2b48eca4496eceeb017a
Add modal icon for stage participants grid https://github.com/pkp/omp/commit/6a86be4a29dee01773091f0425bc58d6fe870943
add modal icon for approve proofs https://github.com/pkp/omp/commit/e8118c95087e6477425e5574c1372855e38a0686
add delete titles, icons to 'delete' confirmation modals https://github.com/pkp/omp/commit/c2293f81f988f9e4f71e9338722d55f025d4ead2
set defaults for icons and titles for confirmation modals https://github.com/pkp/pkp-lib/commit/69de93854922548d6a663b23fc7c8b00cac4a9c4
add icon to email reset modal https://github.com/pkp/omp/commit/921cb7baa29008e20472e8aeacfe8e76aa0338b6
add parameter for setting the width of modals https://github.com/pkp/pkp-lib/commit/6fb426ceaf00944dc261e998ac4a137db74c2f2a
prevent 'review guidelines' modal from being too wide https://github.com/pkp/omp/commit/c35843d3f746443ba377646a7d4cf431ccbe3d78
add icon, set width of modal https://github.com/pkp/omp/commit/3ac5fc64a297bf0a602ce582ef0f3c3bd82dcf90
reposition modals if they are resized https://github.com/pkp/pkp-lib/commit/c4d02b7f1a98f233b285deb8d52921c03f279b9c
(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 https://github.com/pkp/omp/commit/5c95c86b7d85bb85c2abee431cde0ff7c60bb519
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 https://github.com/pkp/pkp-lib/commit/38c2cd4b959eb4353df7550fed085f342cbc159e
let confirmation link actions accept a modal icon parameter https://github.com/pkp/pkp-lib/commit/67c27529a83c99347f5cacd82244cf521ec6e7e8
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 https://github.com/pkp/omp/commit/a684888100f5ce419b761d9b632741e6ab47a2c0
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) https://github.com/pkp/pkp-lib/commit/87d43651e48ac546f54548c7a8cdcb5232f93164
modal icon tweaks https://github.com/pkp/omp/commit/0ec3ed15f01dbcb6418689f4ad64b69add8b86eb
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 - http://cl.ly/Irw6
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) https://github.com/pkp/pkp-lib/commit/68fbde80f0dd317ddb9465b7c2df821dd6b5aaab
fix title for notes modal, icons for manage catalog entry modal https://github.com/pkp/omp/commit/23bf3348ca435cfcaee20eb2d975a17a5fcb6d62
change modal title for upload/select files grid, improve form, allow those linkactions to have optional titles https://github.com/pkp/omp/commit/1294e1b899368a71ab0b60af7eef21323271ec67
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 https://github.com/pkp/omp/commit/15596992475aa59c11937e61eb6ed2e73f20550a
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. Cheers, Jason