[Django] #19900: Upgrade admin buttons

[Django]

#19900: Upgrade admin buttons
------------------------------------------------+--------------------------
Reporter: Pedro Mourelle <pedromagnus@…> | Owner: nobody
Type: Uncategorized | Status: new
Component: contrib.admin | Version:
Severity: Normal | Keywords: sprints-
Triage Stage: Unreviewed | django-ar
Easy pickings: 0 | Has patch: 0
| UI/UX: 1
------------------------------------------------+--------------------------
Top action buttons in admin are using an quite old approach. It still uses
GIFs to simulate rounded borders when css is completely capable of it
since years ago.

Rounded GIFs should be replaced by just css with border-radius setted.
The GIF used to render the '+' should be replaced by the real character
and really simple css.

Gains:
- Zoom in/out (scalability) renders smoothly perfect without the
limitation of actual image resolution because no image at all will be
used.
- Simplifies further button customization, and guess why! because no image
at all will be used.

[[Image(http://dl.dropbox.com/u/26036998/Captura%20de%20pantalla%202013-02-23%20a%20las%2016.19.05.png)]]

--
Ticket URL: <https://code.djangoproject.com/ticket/19900>
Django <https://code.djangoproject.com/>
The Web framework for perfectionists with deadlines.

[Django]

#19900: Upgrade admin buttons
-------------------------------------+-------------------------------------
Reporter: Pedro Mourelle | Owner: anonymous
<pedromagnus@…> | Status: assigned
Type: Uncategorized | Version:
Component: contrib.admin | Resolution:
Severity: Normal | Triage Stage:
Keywords: sprints-django-ar | Unreviewed
Has patch: 0 | Needs documentation: 0
Needs tests: 0 | Patch needs improvement: 0
Easy pickings: 0 | UI/UX: 1
-------------------------------------+-------------------------------------
Changes (by Pedro Mourelle <pedromagnus@…>):

* owner: nobody => anonymous
* needs_better_patch: => 0
* status: new => assigned
* needs_tests: => 0
* needs_docs: => 0

--
Ticket URL: <https://code.djangoproject.com/ticket/19900#comment:1>

[Django]

#19900: Upgrade admin buttons
-------------------------------------+-------------------------------------
Reporter: Pedro Mourelle | Owner: anonymous
<pedromagnus@…> | Status: assigned
Type: Uncategorized | Version:
Component: contrib.admin | Resolution:

Severity: Normal | Triage Stage: Accepted
Keywords: sprints-django-ar | Needs documentation: 0
Has patch: 0 | Patch needs improvement: 0
Needs tests: 0 | UI/UX: 1
Easy pickings: 0 |
-------------------------------------+-------------------------------------
Changes (by aaugustin):

* stage: Unreviewed => Accepted

Comment:

Absolutely — this defect is noticeable on hipster-displays (aka retina).

--
Ticket URL: <https://code.djangoproject.com/ticket/19900#comment:2>

[Django]

#19900: Upgrade admin buttons
-------------------------------------+-------------------------------------
Reporter: Pedro Mourelle | Owner: anonymous
<pedromagnus@…> | Status: assigned

Type: | Version:
Cleanup/optimization | Resolution:
Component: contrib.admin | Triage Stage: Accepted
Severity: Normal | Needs documentation: 0
Keywords: sprints-django-ar | Patch needs improvement: 0
Has patch: 1 | UI/UX: 1
Needs tests: 0 |
Easy pickings: 0 |
-------------------------------------+-------------------------------------

Changes (by Pedro Mourelle <pedromagnus@…>):

* has_patch: 0 => 1
* type: Uncategorized => Cleanup/optimization

Comment:

Patch in pull-request: https://github.com/django/django/pull/845

--
Ticket URL: <https://code.djangoproject.com/ticket/19900#comment:3>

[Django]

#19900: Upgrade admin buttons
-------------------------------------+-------------------------------------
Reporter: Pedro Mourelle | Owner: anonymous
<pedromagnus@…> | Status: assigned
Type: | Version:
Cleanup/optimization | Resolution:
Component: contrib.admin | Triage Stage: Accepted
Severity: Normal | Needs documentation: 0
Keywords: sprints-django-ar | Patch needs improvement: 0
Has patch: 1 | UI/UX: 1
Needs tests: 0 |
Easy pickings: 0 |
-------------------------------------+-------------------------------------

Comment (by claudep):

I'm not a IE fan, but still could we know how does the new code degrade on
IE < 9? Could someone make a screenshot? (I have no IE at hand).

--
Ticket URL: <https://code.djangoproject.com/ticket/19900#comment:4>

[Django]

#19900: Upgrade admin buttons
-------------------------------------+-------------------------------------
Reporter: Pedro Mourelle | Owner: anonymous
<pedromagnus@…> | Status: assigned
Type: | Version:
Cleanup/optimization | Resolution:
Component: contrib.admin | Triage Stage: Accepted
Severity: Normal | Needs documentation: 0
Keywords: sprints-django-ar | Patch needs improvement: 0
Has patch: 1 | UI/UX: 1
Needs tests: 0 |
Easy pickings: 0 |
-------------------------------------+-------------------------------------

Comment (by Pedro Mourelle <pedromagnus@…>):

To be honest, I didn't even considere IE on this (my bad). The thing is
that border-radius (and its prefixed versions) works really nice and
smooth. IE < 9 are the only exceptions, for those browsers the fallback
would be just to be squared :/
An (awful) alternative s to use a JS like curvycurves:
[https://code.google.com/p/curvycorners/source/browse/trunk/curvycorners.src.js]
just for those IE cases.

--
Ticket URL: <https://code.djangoproject.com/ticket/19900#comment:5>

[Django]

#19900: Upgrade admin buttons
-------------------------------------+-------------------------------------
Reporter: Pedro Mourelle | Owner: anonymous
<pedromagnus@…> | Status: assigned
Type: | Version:
Cleanup/optimization | Resolution:
Component: contrib.admin | Triage Stage: Accepted
Severity: Normal | Needs documentation: 0
Keywords: sprints-django-ar | Patch needs improvement: 0
Has patch: 1 | UI/UX: 1
Needs tests: 0 |
Easy pickings: 0 |
-------------------------------------+-------------------------------------

Comment (by aaugustin):

I do not care too much if the buttons are square under old IEs as long as
the layout doesn't break and the UI is usable.

--
Ticket URL: <https://code.djangoproject.com/ticket/19900#comment:6>

[Django]

#19900: Upgrade admin buttons
-------------------------------------+-------------------------------------
Reporter: Pedro Mourelle | Owner: anonymous
<pedromagnus@…> | Status: assigned
Type: | Version:
Cleanup/optimization | Resolution:
Component: contrib.admin | Triage Stage: Accepted
Severity: Normal | Needs documentation: 0
Keywords: sprints-django-ar | Patch needs improvement: 0
Has patch: 1 | UI/UX: 1
Needs tests: 0 |
Easy pickings: 0 |
-------------------------------------+-------------------------------------

Comment (by Pedro Mourelle <pedromagnus@…>):

Well, sadly for the example (but luckily for me) I have no IE at hand
either, but border-radius fallbacks simple to not understand it, so the
only difference is that corners remain squared.

--
Ticket URL: <https://code.djangoproject.com/ticket/19900#comment:7>

[Django]

#19900: Upgrade admin buttons
-------------------------------------+-------------------------------------
Reporter: Pedro Mourelle | Owner: anonymous
<pedromagnus@…> | Status: assigned
Type: | Version:
Cleanup/optimization | Resolution:

Component: contrib.admin | Triage Stage: Ready for
Severity: Normal | checkin

Keywords: sprints-django-ar | Needs documentation: 0

Has patch: 1 | Patch needs improvement: 0

Needs tests: 0 | UI/UX: 1

Easy pickings: 0 |
-------------------------------------+-------------------------------------
Changes (by ramiro):

* stage: Accepted => Ready for checkin

--
Ticket URL: <https://code.djangoproject.com/ticket/19900#comment:8>

[Django]

#19900: Upgrade admin buttons
-------------------------------------+-------------------------------------
Reporter: Pedro Mourelle | Owner: anonymous
<pedromagnus@…> | Status: assigned
Type: | Version:
Cleanup/optimization | Resolution:
Component: contrib.admin | Triage Stage: Ready for
Severity: Normal | checkin
Keywords: sprints-django-ar | Needs documentation: 0
Has patch: 1 | Patch needs improvement: 0
Needs tests: 0 | UI/UX: 1
Easy pickings: 0 |
-------------------------------------+-------------------------------------

Comment (by idangazit):

I'm fine with IE7/8 seeing cosmetic degradations and using CSS for rounded
corners.

Two suggestions for improvement, neither of which need to happen for this
to get checked in:

1. perhaps in lieu of images we could use :after with the rightwards black
arrow (➡, http://codepoints.net/U+27A1) and heavy greek cross (✚,
http://codepoints.net/U+271A). Cursory glance at the affected selectors
doesn't show an easy way to do this without changing markup, though.

2. include SVG images with PNG fallbacks, which is a cheap way to be
retina-friendly.

{{{
.object-tools a.viewsitelink, .object-tools a.golink {
background: #999 url(../img/tooltag-arrowright.png) 95% center no-
repeat;
background: none, #999 url(../img/tooltag-arrowright.svg) 95% center
no-repeat;
}
}}}

Because all browsers that support SVG also support multiple BG images, so
we can safely deliver SVGs using this technique.

--
Ticket URL: <https://code.djangoproject.com/ticket/19900#comment:9>

[Django]

#19900: Upgrade admin buttons
-------------------------------------+-------------------------------------
Reporter: Pedro Mourelle | Owner: anonymous
<pedromagnus@…> | Status: assigned
Type: | Version:
Cleanup/optimization | Resolution:
Component: contrib.admin | Triage Stage: Ready for
Severity: Normal | checkin
Keywords: sprints-django-ar | Needs documentation: 0
Has patch: 1 | Patch needs improvement: 0
Needs tests: 0 | UI/UX: 1
Easy pickings: 0 |
-------------------------------------+-------------------------------------

Comment (by pedromagnus):

Idan, great suggestions. Maybe second is easier to control when page is
zoomed, although I do like the idea of having a font-icon to scale
properly.
If you think one of that options should make it, then I can do it in this
same ticket.

--
Ticket URL: <https://code.djangoproject.com/ticket/19900#comment:10>

[Django]

#19900: Upgrade admin buttons
-------------------------------------+-------------------------------------
Reporter: Pedro Mourelle | Owner: anonymous
<pedromagnus@…> | Status: assigned
Type: | Version:
Cleanup/optimization | Resolution:
Component: contrib.admin | Triage Stage: Ready for
Severity: Normal | checkin
Keywords: sprints-django-ar | Needs documentation: 0
Has patch: 1 | Patch needs improvement: 0
Needs tests: 0 | UI/UX: 1
Easy pickings: 0 |
-------------------------------------+-------------------------------------

Comment (by loic84):

I've been toying around with `:after` and it works without changing the
markup. We do need to define how far back we want to support IE since in
that case, IE7 would be missing the icon as well as the rounded corner.

Also do we really want to keep a darker background color under the icon?
That bit I didn't manage yet.

Also the unicode characters that Idan suggested are rather ugly with the
current admin font, it's not as polished as the current icons. If we go
with this technique, could we adopt a nice graphic font such as GLYPHICONS
or Font Awesome and do away with a few more icons used by the admin?

--
Ticket URL: <https://code.djangoproject.com/ticket/19900#comment:11>

[Django]

#19900: Upgrade admin buttons
-------------------------------------+-------------------------------------
Reporter: Pedro Mourelle | Owner: anonymous
<pedromagnus@…> | Status: assigned
Type: | Version:
Cleanup/optimization | Resolution:
Component: contrib.admin | Triage Stage: Ready for
Severity: Normal | checkin
Keywords: sprints-django-ar | Needs documentation: 0
Has patch: 1 | Patch needs improvement: 0
Needs tests: 0 | UI/UX: 1
Easy pickings: 0 |
-------------------------------------+-------------------------------------

Comment (by aaugustin):

I'm not comfortable with dropping support for IE7 yet.

Can we try option 2 -- the SVG with PNG fallback?

--
Ticket URL: <https://code.djangoproject.com/ticket/19900#comment:12>

[Django]

#19900: Upgrade admin buttons
-------------------------------------+-------------------------------------
Reporter: Pedro Mourelle | Owner: anonymous
<pedromagnus@…> | Status: assigned
Type: | Version:
Cleanup/optimization | Resolution:

Component: contrib.admin | Triage Stage: Accepted
Severity: Normal | Needs documentation: 0

Keywords: sprints-django-ar | Patch needs improvement: 1

Has patch: 1 | UI/UX: 1
Needs tests: 0 |

Easy pickings: 0 |
-------------------------------------+-------------------------------------
Changes (by timo):

* needs_better_patch: 0 => 1
* stage: Ready for checkin => Accepted

Comment:

The discussion suggests that this is not actually RFC.

--
Ticket URL: <https://code.djangoproject.com/ticket/19900#comment:13>

[Django]

#19900: Upgrade admin buttons
-------------------------------------+-------------------------------------
Reporter: Pedro Mourelle | Owner: anonymous
<pedromagnus@…> | Status: assigned
Type: | Version:
Cleanup/optimization | Resolution:
Component: contrib.admin | Triage Stage: Accepted
Severity: Normal | Needs documentation: 0
Keywords: sprints-django-ar | Patch needs improvement: 1
Has patch: 1 | UI/UX: 1
Needs tests: 0 |
Easy pickings: 0 |
-------------------------------------+-------------------------------------

Comment (by timo):

I'd like to check this in. Can we defer the SVG/PNG issue to a separate
ticket?

According to [http://css-tricks.com/do-we-need-box-shadow-prefixes/ css
tricks], we can probably drop the vendor prefixes for border-radius. Any
objection to that?

--
Ticket URL: <https://code.djangoproject.com/ticket/19900#comment:14>

[Django]

#19900: Upgrade admin buttons
-------------------------------------+-------------------------------------
Reporter: Pedro Mourelle | Owner: anonymous
<pedromagnus@…> | Status: assigned
Type: | Version:
Cleanup/optimization | Resolution:
Component: contrib.admin | Triage Stage: Accepted
Severity: Normal | Needs documentation: 0
Keywords: sprints-django-ar | Patch needs improvement: 1
Has patch: 1 | UI/UX: 1
Needs tests: 0 |
Easy pickings: 0 |
-------------------------------------+-------------------------------------

Comment (by aaugustin):

Replying to [comment:14 timo]:

> I'd like to check this in. Can we defer the SVG/PNG issue to a separate
ticket?

Yes, better check-in the part that works rather than let it rot.

> According to [http://css-tricks.com/do-we-need-box-shadow-prefixes/ css
tricks], we can probably drop the vendor prefixes for border-radius. Any
objection to that?

I'm in favor of not including vendor prefixes when we have a sufficient
excuse to do so :) http://caniuse.com/#feat=css-boxshadow shows that
recent versions of browsers don't require vendor prefixes. At worst,
shadows aren't a big deal.

--
Ticket URL: <https://code.djangoproject.com/ticket/19900#comment:15>

[Django]

#19900: Update admin buttons to use CSS rounded corners

-------------------------------------+-------------------------------------
Reporter: Pedro Mourelle | Owner: anonymous
<pedromagnus@…> | Status: assigned
Type: | Version:
Cleanup/optimization | Resolution:
Component: contrib.admin | Triage Stage: Accepted
Severity: Normal | Needs documentation: 0

Keywords: sprints-django-ar | Patch needs improvement: 0

Has patch: 1 | UI/UX: 1
Needs tests: 0 |
Easy pickings: 0 |
-------------------------------------+-------------------------------------

Changes (by timo):

* needs_better_patch: 1 => 0

--
Ticket URL: <https://code.djangoproject.com/ticket/19900#comment:16>

[Django]

#19900: Update admin buttons to use CSS rounded corners
-------------------------------------+-------------------------------------
Reporter: Pedro Mourelle | Owner: anonymous

<pedromagnus@…> | Status: closed
Type: | Version:
Cleanup/optimization | Resolution: fixed

Component: contrib.admin | Triage Stage: Accepted
Severity: Normal | Needs documentation: 0
Keywords: sprints-django-ar | Patch needs improvement: 0
Has patch: 1 | UI/UX: 1
Needs tests: 0 |
Easy pickings: 0 |
-------------------------------------+-------------------------------------

Changes (by Tim Graham <timograham@…>):

* status: assigned => closed
* resolution: => fixed

Comment:

In [changeset:"fb052b528ad5f0a92f7420ab8ade16462b6435fd"]:
{{{
#!CommitTicketReference repository=""
revision="fb052b528ad5f0a92f7420ab8ade16462b6435fd"
Fixed #19900 -- Updated admin buttons to use CSS3 rounded corners.
}}}

--
Ticket URL: <https://code.djangoproject.com/ticket/19900#comment:17>