Last modified: 2012-09-27 01:10:50 UTC

Wikimedia Bugzilla is closed!

Wikimedia migrated from Bugzilla to Phabricator. Bug reports are handled in Wikimedia Phabricator.
This static website is read-only and for historical purposes. It is not possible to log in and except for displaying bug reports and their history, links might be broken. See T30690, the corresponding Phabricator task for complete and up-to-date bug report information.
Bug 28690 - Vector dialog styling causes problems with links
Vector dialog styling causes problems with links
Status: RESOLVED FIXED
Product: MediaWiki
Classification: Unclassified
Interface (Other open bugs)
1.18.x
All All
: Normal normal (vote)
: 1.20.0 release
Assigned To: Krinkle
http://laxstrom.name/vector-dialog.png
:
: 29615 (view as bug list)
Depends on:
Blocks:
  Show dependency treegraph
 
Reported: 2011-04-25 08:03 UTC by Niklas Laxström
Modified: 2012-09-27 01:10 UTC (History)
8 users (show)

See Also:
Web browser: ---
Mobile Platform: ---
Assignee Huggle Beta Tester: ---


Attachments
Reproduced the bug: Non-modal dialog. Bug: No border, no visisble edge, bad accessibility/usability/ (83.42 KB, image/png)
2011-05-03 18:32 UTC, Krinkle
Details
Proposed fix: Adding back the 0.2em padding and the border for dialog (86.55 KB, image/png)
2011-05-03 18:33 UTC, Krinkle
Details
Example of what a modal dialog looks like in this context (proposed work-around) (93.43 KB, image/png)
2011-05-03 18:34 UTC, Krinkle
Details
new suggestion for dialog styling (26.12 KB, image/png)
2011-05-03 20:22 UTC, Ryan Kaldari
Details
Patch for above implementation (1.28 KB, patch)
2011-05-03 20:27 UTC, Ryan Kaldari
Details
It now has a proper border. (35.90 KB, image/png)
2012-08-24 14:07 UTC, Krinkle
Details

Description Niklas Laxström 2011-04-25 08:03:27 UTC
I have to issues here, see the image.
* Dialog borders blend into the background color and makes it difficult to see where the dialog ends
* Link color is forced to color that is indistinguishable from black. This prevents users from discovering links in my dialog. For some reason my more specific rule does not override it: http://laxstrom.name/wtf-css.png Does it have to do with loading order?
Comment 1 Ryan Kaldari 2011-05-02 19:28:33 UTC
Just need to tweak the CSS in:
resources/jquery.ui/themes/vector/jquery.ui.dialog.css
Comment 2 Ryan Kaldari 2011-05-02 19:48:28 UTC
I noticed the link color got changed from blue to black recently. We should probably change that back.
Comment 3 Ryan Kaldari 2011-05-02 20:19:59 UTC
It looks like the border issue might be a bit deeper than I thought. We're actually removing the border around all jQuery UI elements, not just dialogs. This seems to be an actual design choice (rather than an oversight), but probably needs to be rethought. Simply adding the border back isn't good since we're also removing the padding, so this could cause stacked borders. A temporary workaround you could use would be to set the dialog to be modal.
Comment 4 Mark A. Hershberger 2011-05-03 13:25:48 UTC
Bumping this up to highest so I remember to ping Krinkle on this bug this week.
Comment 5 Krinkle 2011-05-03 18:32:15 UTC
Created attachment 8487 [details]
Reproduced the bug: Non-modal dialog. Bug: No border, no visisble edge, bad accessibility/usability/

Reproduced the bug: Non-modal dialog. Bug: No border, no visisble edge, bad accessibility/usability/
Comment 6 Krinkle 2011-05-03 18:33:48 UTC
Created attachment 8488 [details]
Proposed fix: Adding back the 0.2em padding and the border for dialog
Comment 7 Krinkle 2011-05-03 18:34:26 UTC
Created attachment 8489 [details]
Example of what a modal dialog looks like in this context (proposed work-around)

Example of what a modal dialog looks like in this context (proposed work-around)
Comment 8 Ryan Kaldari 2011-05-03 19:01:39 UTC
Meh. Doesn't look as clean, in my opinion. What if we added the outside border (without padding) and changed the title border to be border-bottom only?

Are you planning on adding the styling to ui-widget or ui-dialog? We need the same fix for datepicker, so might make sense to apply to ui-widget. I haven't investigated this thoroughly, however.
Comment 9 DieBuche 2011-05-03 19:12:31 UTC
Link color fixed in r87345. No idea what the original motivation behind this was.
Comment 10 Ryan Kaldari 2011-05-03 20:22:02 UTC
Created attachment 8490 [details]
new suggestion for dialog styling

Just added a new attachment based on my ideas above. What do you guys think of this implementation?
Comment 11 Ryan Kaldari 2011-05-03 20:27:14 UTC
Created attachment 8491 [details]
Patch for above implementation

Here's the patch for the implementation above, if that seems good.
Comment 12 DieBuche 2011-05-03 21:27:38 UTC
(In reply to comment #9)
> Link color fixed in r87345. No idea what the original motivation behind this
> was.

I now do ;) Links are used many places (menus) where they shouldn't look like links. Reverted
Comment 13 Ryan Kaldari 2011-05-03 21:35:50 UTC
What do the regular jQuery UI skins do for link coloring? Maybe we should just match one of them (I think our skin is very loosely based on the Cupertino skin, BTW).
Comment 14 Niklas Laxström 2011-05-04 07:34:58 UTC
(In reply to comment #12)
> I now do ;) Links are used many places (menus) where they shouldn't look like
> links. Reverted

Can the menus be fixed then instead of breaking everything else?


I don't think regular jQuery skins do anything to link colours, as it should be.
Comment 15 DieBuche 2011-05-04 10:25:21 UTC
(In reply to comment #14)
> I don't think regular jQuery skins do anything to link colours, as it should
> be.

They do. But obviously only for links inside jui stuff
Comment 16 Krinkle 2011-05-18 19:19:55 UTC
Applied in r88382.
Comment 17 Niklas Laxström 2011-05-19 08:24:55 UTC
Link color issue remains (sorry for having to issues in the same bug). Dialog border problem is fixed.
Comment 18 Ryan Kaldari 2011-06-15 20:15:31 UTC
I would suggest that we do whatever the jQuery UI skins do regarding link styling. Unfortunately, I'm full time on fundraising now, so I don't have any time to work on this.
Comment 19 Ryan Kaldari 2011-06-29 07:58:26 UTC
*** Bug 29615 has been marked as a duplicate of this bug. ***
Comment 20 Krinkle 2012-01-02 15:42:26 UTC
Reminder for after this bug is fixed:

(Citing bug 29615 comment #4)
> We overrode the black to blue in the WikiLove CSS. I'm going to go ahead and
> mark this as a duplicate, but we need to remember to remove the override after
> 28690 is fixed.


(Citing to bug 29615 comment #5)
> Yes, I added a CSS line to at least make links blue, otherwise things looked
> really weird. But that's a crappy fix, obviously, the real solution is to fix
> bug 28690 by removing the link colour inside dialogs, and then fix stuff that
> gets broken by that. After that the CSS line making stuff blue can be removed
> from WikiLove.
Comment 21 Sumana Harihareswara 2012-08-17 10:58:38 UTC
I'm aesthetically impaired so I can't make the judgment of whether this problem is still reproducible. :-) Is it?
Comment 22 Mark A. Hershberger 2012-08-18 16:02:46 UTC
According to the screenshots  posted by krinkle, this dialog now looks like  attachment 8489 [details] in comment 7 -- so, fixed?  Kind of looks like wikilove is fixed, too, but I'm not sure.
Comment 23 Krinkle 2012-08-24 14:07:19 UTC
Created attachment 10995 [details]
It now has a proper border.

Fixed indeed.

Note You need to log in before you can comment on or make changes to this bug.


Navigation
Links