NPM Resource Changed ? ? ? Pending

User tests: Successful: Unsuccessful:

avatar N6REJ
N6REJ
15 Oct 2020

Pull Request for Issue # .

Summary of Changes

adds back the ability to use fontawesome regular fonts into core.

Testing Instructions

go to /administrator/index.php
inspect eye.
do the same for front end login
apply pr
using the inspector, change "fas fa-eye fa-fw" to "far fa-eye fa-fw"
notice the icon changed.

Actual result BEFORE applying this Pull Request

image

Expected result AFTER applying this Pull Request

image

Documentation Changes Required

Our implementation of "Fontawesome Regular icons" is a limited 151 icon set from the 1852 icons included in their "pro" version. This is by design from FA. They don't mention that ANY regular icons are included in the free set at all on their site. Only the icons listed here are included.

avatar N6REJ N6REJ - open - 15 Oct 2020
avatar N6REJ N6REJ - change - 15 Oct 2020
Status New Pending
avatar joomla-cms-bot joomla-cms-bot - change - 15 Oct 2020
Category Administration Templates (admin) NPM Change Repository Installation Front End Templates (site)
avatar adj9 adj9 - test_item - 15 Oct 2020 - Tested successfully
avatar adj9
adj9 - comment - 15 Oct 2020

I have tested this item successfully on 8a17b03

There is the modify in HTML.


This comment was created with the J!Tracker Application at issues.joomla.org/tracker/joomla-cms/31096.

avatar richard67
richard67 - comment - 15 Oct 2020

@adj9 How can you mark a PR with a successful test when there is a discussion on it about an obvious mistake in it?

Maybe the discussion is not visible in the issue tracker because it was a code review comment. But please always check a PR on GitHub, too, not only in the issue tracker, because only on GitHub you can see which files were changed and if there are unresolved review comments.

Thanks in advance.

avatar N6REJ N6REJ - change - 15 Oct 2020
Labels Added: NPM Resource Changed ?
avatar joomla-cms-bot joomla-cms-bot - change - 15 Oct 2020
Category Administration Templates (admin) NPM Change Repository Installation Front End Templates (site) Administration Templates (admin) NPM Change Installation Front End Templates (site)
avatar richard67
richard67 - comment - 15 Oct 2020

@adj9 Please repeat your test. Thanks in advance.

avatar ceford
ceford - comment - 16 Oct 2020

I tested this but did not see any change in the source code and the diff only shows changes to files processed by npm.

avatar richard67
richard67 - comment - 16 Oct 2020

@ceford As far as I understood the testing instructions, you will only see a difference if you change the code in the html markup from "fas fa-eye fa-fw" to "far fa-eye fa-fw" e.g. by manipulating the markup in your browser's developer tools or by editing the PHP file. The icon should then visibly change it's look from solid to regular.

The changes of this PR here do not change the html markup, they only change the scss and so the compiled css so that the icon still is shown when far is used instead of fas.

@N6REJ Correct me if my understanding is wrong.

avatar ceford
ceford - comment - 16 Oct 2020

Baffled again! I now see the eye icon change appearance in atum. But it does not make any difference whether or not I have the patch applied. This last part of the dif looks odd:

 // Backend Template stuff
 @import "../../../administrator/templates/atum/scss/mixin";
diff --git a/templates/cassiopeia/scss/template.scss b/templates/cassiopeia/scss/template.scss
index 896fb521bf09..1544b8a27a1f 100644
--- a/templates/cassiopeia/scss/template.scss
+++ b/templates/cassiopeia/scss/template.scss
@@ -14,8 +14,9 @@
 
 // "Font Awesome 5 Free"
 @import "../../../media/vendor/fontawesome-free/scss/fontawesome";
-@import "../../../media/vendor/fontawesome-free/scss/solid";
 @import "../../../media/vendor/fontawesome-free/scss/brands";
+@import "../../../media/vendor/fontawesome-free/scss/regular";
+@import "../../../media/vendor/fontawesome-free/scss/solid";
 

There is no mention of import into atum.


This comment was created with the J!Tracker Application at issues.joomla.org/tracker/joomla-cms/31096.

avatar N6REJ
N6REJ - comment - 16 Oct 2020

@richard67 100% on the money
@ceford for some reason it was never removed in atum ( which turned out to be a good thing )

@import "../../../../../../media/vendor/fontawesome-free/scss/regular";

the diff probably looks odd to you because I put the imports in alphabetical order.
which brings up that atum was NOT in proper order at all. So thanks for that.

avatar N6REJ N6REJ - change - 16 Oct 2020
The description was changed
avatar N6REJ N6REJ - edited - 16 Oct 2020
avatar N6REJ N6REJ - change - 16 Oct 2020
The description was changed
avatar N6REJ N6REJ - edited - 16 Oct 2020
avatar particthistle particthistle - test_item - 17 Oct 2020 - Tested successfully
avatar particthistle
particthistle - comment - 17 Oct 2020

I have tested this item successfully on fb5cc3e

Swapping fas for far when inspecting code on the administrator area after applying the patch changed the icon from solid to regular as expected as the result.

Handy to know Font Awesome's Regular free icons are now included in the backend.

@N6REJ can you replicate this PR over into Cassiopeia, as seeing if it carried over to the front end didn't repeat the backend behaviour.


This comment was created with the J!Tracker Application at issues.joomla.org/tracker/joomla-cms/31096.

avatar N6REJ
N6REJ - comment - 17 Oct 2020

@particthistle not sure how to do that but I can try.

avatar particthistle
particthistle - comment - 17 Oct 2020

@particthistle not sure how to do that but I can try.

Looking at it more this afternoon it might be a little more difficult as the fonts are currently in the atum template, and not a library loading on it's own.

As mentioned though in #30793 once you know where the files are you could reference them when building a template.

avatar degobbis degobbis - test_item - 17 Oct 2020 - Tested unsuccessfully
avatar degobbis
degobbis - comment - 17 Oct 2020

I have tested this item 🔴 unsuccessfully on fb5cc3e

Tested unsuccessfully with 4.0-dev after run npm run build:css
The icon far fa-eye fa-fw looks equal before and after the patch.


This comment was created with the J!Tracker Application at issues.joomla.org/tracker/joomla-cms/31096.

avatar particthistle
particthistle - comment - 17 Oct 2020

@degobbis The PR doesn't actually change the class to far fa-eye fa-fw, you need to do that with a manual code inspection.

Here's what the login page fa-eye looks like after my test...
31096

avatar degobbis
degobbis - comment - 17 Oct 2020

@particthistle This is exactly what I did, before and after the patch.
The icon far fa-eye fa-fw looks the same before and after the patch.

avatar N6REJ
N6REJ - comment - 17 Oct 2020

@particthistle This is exactly what I did, before and after the patch.
The icon far fa-eye fa-fw looks the same before and after the patch.

it's a VERY subtle change. if you want something more dramatic a shift use envelope.. https://fontawesome.com/icons?d=gallery&q=envelope&m=free
so, 'far fa-envelope fa-fw" & "fas fa-envelope fa-fw"

avatar N6REJ N6REJ - change - 20 Oct 2020
The description was changed
avatar N6REJ N6REJ - edited - 20 Oct 2020
avatar jwaisner jwaisner - test_item - 23 Oct 2020 - Tested successfully
avatar jwaisner
jwaisner - comment - 23 Oct 2020

I have tested this item successfully on fb5cc3e

Confirmed after patch that changing to "far fa-eye fa-fw" on eye image results in the new eye icon. This was confirmed on front end, backend, and installation.


This comment was created with the J!Tracker Application at issues.joomla.org/tracker/joomla-cms/31096.

avatar jwaisner jwaisner - change - 23 Oct 2020
Status Pending Ready to Commit
avatar jwaisner
jwaisner - comment - 23 Oct 2020

RTC


This comment was created with the J!Tracker Application at issues.joomla.org/tracker/joomla-cms/31096.

avatar N6REJ N6REJ - change - 24 Oct 2020
Labels Added: ? ?
avatar rdeutz rdeutz - change - 27 Oct 2020
Labels Added: ?
Removed: ?
avatar rdeutz rdeutz - change - 27 Oct 2020
Status Ready to Commit Fixed in Code Base
Closed_Date 0000-00-00 00:00:00 2020-10-27 13:49:42
Closed_By rdeutz
Labels Added: ?
Removed: ?
avatar rdeutz rdeutz - close - 27 Oct 2020
avatar rdeutz rdeutz - merge - 27 Oct 2020

Add a Comment

Login with GitHub to post a comment