Please resolve conflicting files so this PR can get tested at Worldwide Pizza, Bugs & Fun, October 19th

FontAwesome icons don't appear.

@Quy do you have the css file administrator/templates/atum/css/vendor/fontawesome-free/fontawesome.min.css ? If so do you also get the actual font?

Installed your branch. There is no vendor directory.

@Quy Did you run npm i?

Yes, both npm i and npm ci. Still no go.

@Quy what's your OS?

Testing locally with XAMPP on Windows 10 Home.

@Quy thanks, I'll check why the build tools are failing to generate the css for winDOS

@Quy can you give it another try?

Almost there. Here are a few more that don't appear.

@Quy thank you, should fine now

They show up but don't display properly.

It is still an issue. Please let me know when to test again. Thanks.

Did you run npm I and cleaned the browser cache? Works fine here...

Yes. Some display correctly and others don't.

what's your browser?

Tested with Firefox 69.0.3 and Chrome 77.0.3865.120. Icons with class icon- don't display properly.

@dgrammatiko

FontAwesome 5 now requires a font-weight of 900 on the pseudo class. Try adding the following to the start of the _icons.scss ...

[class*=" icon-"]::before,
[class^="icon-"]::before,
.btn::after {
  font-weight: 900;
}

@ciar4n It did the trick. A few more then we should be good.

hmm
I can't get npm ci to work here

Internal Error: File to read not found or unreadable: /Applications/MAMP/htdocs/newfolder/joomla40/administrator/templates/atum/scss/vendor/minicolors/minicolors.scss

sh: line 1: 25356 Segmentation fault: 11  node build.js --compile-css

If I redo, then I get

Internal Error: File to read not found or unreadable: /Applications/MAMP/htdocs/newfolder/joomla40/administrator/templates/atum/scss/vendor/choicesjs/choicesjs.scss

sh: line 1: 25484 Segmentation fault: 11  node build.js --compile-css

After applying patch and run npm i some icons are missing:

I have tested this item ? unsuccessfully on 0afab17

apply patch
run npm i
some icons are missing

@nadjak77 can you create a gist with the font awesome css?

I hope this is the right file you want to see:
https://gist.github.com/nadjak77/cc199b47dc8309c16341a3776c817048
this is the template.css with your patch

@nadjak77 thanks, but I was referring to the actually css for font awesome. Anyways I think I figure out what was missing here

I have tested this item ✅ successfully on bfd6ffe

I have tested this item ✅ successfully on bfd6ffe

RTC

I have tested this item ? unsuccessfully on df4929f

I have tested this item ? unsuccessfully on df4929f

Some choicesjs field styling is missing:

@SharkyKZ bandaid applied.
@wilsonge please check the assets code, they seem to ignore the overrides. Was that intentional?

Styling is still a little broken

About asset issues you'll have to ask @Fedik.

@wilsonge please check the assets code, they seem to ignore the overrides. Was that intentional?

need more details, what exactly problem,
what you do and what you get?

need more details, what exactly problem
what you do and what you get?

@Fedik should be easy to replicate:
using the 4.0-Dev branch, In the atum/css folder create create a folder vendor/fontawesome-free. In this newly created folder create a css file named font awesome.css with some dummy content. The expected behavior is that the newly created css should be delivered instead of the media/vendor/fontawesome-free/...
But it isn’t

All libs from /media/vendor has strict path in its own asset, see /media/vendor/joomla.asset.json

{
      "package": "@fortawesome/fontawesome-free",
      "name": "fontawesome-free",
      "version": "5.9.0",
      "css": [
        "media/vendor/fontawesome-free/css/fontawesome.min.css"
    ]
},

(btw it should be "name": "fontawesome",)

It can be overridden by overriding the asset.
that why you had:

{
      "name": "fontawesome",
      "css": [
        "fontawesome.min.css"
      ]
}

in the template. This override asset "fontawesome" to use another file(s).

There are still two instances of choices.css loaded.

There are still two instances of choices.css loaded.

I know! The problem is that the original is loaded with webAssets, that for some reason doesn't pick up the override. If I try to override the css then the JS ends up not loading. I think @Fedik already has a PR that gives more granular access but till that PR is merged the original (from media) css file is also loaded here.

well, it sounds like it better to allow to override vendor files in "old way" also, for j4
I try to update that PR some time later, or I will do another one, will see

@wilsonge is there any interest on this one or should I move on?

I have tested this item ✅ successfully on ab05717

I have tested this item ✅ successfully on ab05717

I have tested this item ✅ successfully on ab05717

RTC

Thanks!

@dgrammatiko
Looks like atum specific choice.css is not loaded in com_associations.

@infograf768 are the tags ok in that page?

Same.

@infograf768 in the atum/component.php
add
after line 17

$wa    = $this->getWebAssetManager();

and after line 30

// Enable assets
$wa->enableAsset('template.atum.' . ($this->direction === 'rtl' ? 'rtl' : 'ltr'));
$wa->enableAsset('fontawesome-free');

// TODO: remove the following line whenever the assets are fixed to respect the ovverides
HTMLHelper::_('stylesheet', 'vendor/choicesjs/choices.css', array('version' => 'auto', 'relative' => true));

On a more serious note the assets for the iframes need some attention (eg the component.php needs to reflect the index.php)

@infograf768 check #27187

$wa->enableAsset('fontawesome-free');

all you need:

$wa->enableAsset('fontawesome-free')->enableAsset('choices');

@Fedik this didn't work as it expects me to override both the css and the javascript. I wanted only the css from the choices to be overriden