From 779b91d4054b8575247bed26da9eb8f7e97c159c Mon Sep 17 00:00:00 2001 From: Gilles Dubuc Date: Thu, 10 Apr 2014 13:20:39 +0200 Subject: [PATCH] Fix commons icon to avoid pixelation The CSS to make the favico twice as big was looking horrible in Firefox and possibly other browsers. Since we're already special-casing commons, let's apply a proper SVG instead of the favico. Change-Id: Ie32302342eba7aa37bd310c013a9f4d7f9ae187e --- resources/mmv/ui/img/commons.svg | 25 +++++++++++++++++++ resources/mmv/ui/mmv.ui.metadataPanel.js | 2 +- resources/mmv/ui/mmv.ui.metadataPanel.less | 2 ++ .../qunit/mmv/ui/mmv.ui.metadataPanel.test.js | 23 +++++++++++++++++ 4 files changed, 51 insertions(+), 1 deletion(-) create mode 100644 resources/mmv/ui/img/commons.svg diff --git a/resources/mmv/ui/img/commons.svg b/resources/mmv/ui/img/commons.svg new file mode 100644 index 000000000..3d9c98e8d --- /dev/null +++ b/resources/mmv/ui/img/commons.svg @@ -0,0 +1,25 @@ + + + \ No newline at end of file diff --git a/resources/mmv/ui/mmv.ui.metadataPanel.js b/resources/mmv/ui/mmv.ui.metadataPanel.js index 270195883..09186baf2 100644 --- a/resources/mmv/ui/mmv.ui.metadataPanel.js +++ b/resources/mmv/ui/mmv.ui.metadataPanel.js @@ -430,7 +430,7 @@ this.$repo.text( repositoryMessage ); this.$repoLi.css( 'background-image', - repoInfo.favIcon ? 'url("' + repoInfo.favIcon + '")' : null ); + ( repoInfo.favIcon && !isCommons ) ? 'url("' + repoInfo.favIcon + '")' : '' ); this.$repoLi.toggleClass( 'commons', isCommons ); this.$repoSubtitle.text( diff --git a/resources/mmv/ui/mmv.ui.metadataPanel.less b/resources/mmv/ui/mmv.ui.metadataPanel.less index 6057e1e77..6b435c4fc 100644 --- a/resources/mmv/ui/mmv.ui.metadataPanel.less +++ b/resources/mmv/ui/mmv.ui.metadataPanel.less @@ -158,6 +158,8 @@ line-height: 1.3; &.commons { // there is an extra subtitle for Commons images, box should be larger + /* @embed */ + background-image: url(img/commons.svg); @icon-size: 32px; min-height: @icon-size; padding-left: @icon-size + 2 * @padding; diff --git a/tests/qunit/mmv/ui/mmv.ui.metadataPanel.test.js b/tests/qunit/mmv/ui/mmv.ui.metadataPanel.test.js index 53419f4ee..798e91267 100644 --- a/tests/qunit/mmv/ui/mmv.ui.metadataPanel.test.js +++ b/tests/qunit/mmv/ui/mmv.ui.metadataPanel.test.js @@ -275,4 +275,27 @@ $qf.removeClass( 'invited' ); } ); + + QUnit.test( 'Repo icon', 4, function ( assert ) { + var $qf = $( '#qunit-fixture' ), + panel = new mw.mmv.ui.MetadataPanel( $qf, $( '
' ).appendTo( $qf ) ), + favIcon = 'http://foo.com/bar', + repoData = { + favIcon: favIcon, + getArticlePath : function() { return 'Foo'; }, + isCommons: function() { return false; } + }; + + panel.setRepoDisplay( repoData ); + + assert.ok( panel.$repoLi.css( 'background-image' ).indexOf( favIcon ) !== -1, 'Repo favicon is correctly applied' ); + assert.ok( !panel.$repoLi.hasClass( 'commons' ), 'Repo does not have commons class' ); + + repoData.isCommons = function() { return true; }; + + panel.setRepoDisplay( repoData ); + + assert.ok( panel.$repoLi.css( 'background-image' ).indexOf( 'data:image/svg+xml' ) !== -1, 'Repo favicon is correctly replaced by svg for Commons' ); + assert.ok( panel.$repoLi.hasClass( 'commons' ), 'Repo has commons class' ); + } ); }( mediaWiki, jQuery ) );