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
Status: RESOLVED FIXED
Product: OMP
Classification: Unclassified
Component: User Interface
1.0b
All All
: P3 normal
Assigned To: Juan Pablo Alperin
: 7592 7675 (view as bug list)
Depends on:
Blocks:
  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:


Attachments
Sprites with included larger icons (20.59 KB, image/png)
2012-07-19 10:51 PDT, Chris MacDonald
Details
Adds CSS elements for new large icons (873 bytes, application/octet-stream)
2012-07-19 10:57 PDT, Chris MacDonald
Details
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
Details

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
https://github.com/pkp/pkp-lib/commit/ba8df553eb369f3fbd7549032eb1c892e1ea3f22
Comment 5 Jason Nugent 2012-07-18 07:00:02 PDT
style modal corner close icon as per Evoke spec
https://github.com/pkp/pkp-lib/commit/b4ea890253f8e2df3e9d12fc440cf324d353babf
Comment 6 Jason Nugent 2012-07-18 10:30:02 PDT
Make sure navigation is beneath modal overlay
https://github.com/pkp/omp/commit/c9fe111f44e86a3d045420df23870c0bd6bbd4b0
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
https://github.com/pkp/pkp-lib/commit/7fc16f7dbe2f06fbbddd1826b9b5405ec7eb96e4
Comment 9 Jason Nugent 2012-07-19 03:45:02 PDT
adapt modal titles to Evoke spec
https://github.com/pkp/pkp-lib/commit/d2af2f77f23ac5d020ddec7855b84120fe243da7
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:

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?
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
https://github.com/pkp/pkp-lib/commit/789f1a28a7aebfc0befc21ffa18e4a9c7f6ef637
Comment 16 Jason Nugent 2012-07-19 07:55:02 PDT
begin modal icon cleanup
https://github.com/pkp/omp/commit/94ea2d1883b822a15f8a04694ee475e99077e547
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)
https://github.com/pkp/pkp-lib/commit/43cb4fa9724bca3a13acfd5197c6e300697fb6e4
Comment 20 Jason Nugent 2012-07-19 12:25:02 PDT
tweak modal title position
https://github.com/pkp/pkp-lib/commit/e021730b821d87d3d58f40571da04b024a473987
Comment 22 Jason Nugent 2012-07-19 12:30:02 PDT
add modal icons to (most?) modals
https://github.com/pkp/omp/commit/2227172d8bf4473ca97e2b48eca4496eceeb017a
Comment 23 Jason Nugent 2012-07-19 13:05:02 PDT
Add modal icon for stage participants grid
https://github.com/pkp/omp/commit/6a86be4a29dee01773091f0425bc58d6fe870943
Comment 24 Jason Nugent 2012-07-20 03:55:03 PDT
add modal icon for approve proofs
https://github.com/pkp/omp/commit/e8118c95087e6477425e5574c1372855e38a0686
Comment 25 Jason Nugent 2012-07-24 09:20:03 PDT
add delete titles, icons to 'delete' confirmation modals
https://github.com/pkp/omp/commit/c2293f81f988f9e4f71e9338722d55f025d4ead2
Comment 26 Jason Nugent 2012-07-24 10:50:03 PDT
set defaults for icons and titles for confirmation modals
https://github.com/pkp/pkp-lib/commit/69de93854922548d6a663b23fc7c8b00cac4a9c4
Comment 27 Jason Nugent 2012-07-25 03:40:04 PDT
add icon to email reset modal
https://github.com/pkp/omp/commit/921cb7baa29008e20472e8aeacfe8e76aa0338b6
Comment 28 Jason Nugent 2012-07-25 06:50:03 PDT
add parameter for setting the width of modals
https://github.com/pkp/pkp-lib/commit/6fb426ceaf00944dc261e998ac4a137db74c2f2a
Comment 29 Jason Nugent 2012-07-25 06:55:02 PDT
prevent 'review guidelines' modal from being too wide
https://github.com/pkp/omp/commit/c35843d3f746443ba377646a7d4cf431ccbe3d78
Comment 30 Jason Nugent 2012-07-25 06:55:02 PDT
add icon, set width of modal
https://github.com/pkp/omp/commit/3ac5fc64a297bf0a602ce582ef0f3c3bd82dcf90
Comment 31 Jason Nugent 2012-07-25 10:35:02 PDT
reposition modals if they are resized
https://github.com/pkp/pkp-lib/commit/c4d02b7f1a98f233b285deb8d52921c03f279b9c
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
https://github.com/pkp/omp/commit/5c95c86b7d85bb85c2abee431cde0ff7c60bb519
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
https://github.com/pkp/pkp-lib/commit/38c2cd4b959eb4353df7550fed085f342cbc159e
Comment 38 Jason Nugent 2012-08-01 07:05:03 PDT
let confirmation link actions accept a modal icon parameter
https://github.com/pkp/pkp-lib/commit/67c27529a83c99347f5cacd82244cf521ec6e7e8
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
https://github.com/pkp/omp/commit/a684888100f5ce419b761d9b632741e6ab47a2c0
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)
https://github.com/pkp/pkp-lib/commit/87d43651e48ac546f54548c7a8cdcb5232f93164
Comment 45 Jason Nugent 2012-08-11 07:30:02 PDT
modal icon tweaks
https://github.com/pkp/omp/commit/0ec3ed15f01dbcb6418689f4ad64b69add8b86eb
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)
https://github.com/pkp/pkp-lib/commit/68fbde80f0dd317ddb9465b7c2df821dd6b5aaab
Comment 53 Jason Nugent 2012-08-22 06:15:02 PDT
fix title for notes modal, icons for manage catalog entry modal
https://github.com/pkp/omp/commit/23bf3348ca435cfcaee20eb2d975a17a5fcb6d62
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
https://github.com/pkp/omp/commit/1294e1b899368a71ab0b60af7eef21323271ec67
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
https://github.com/pkp/omp/commit/15596992475aa59c11937e61eb6ed2e73f20550a
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.

Cheers,
Jason