I personally find the off center quickicons a bit weird but I'm not a designer. Otherwise its a great yet subtle improvement.

/me deletes all the joomla 4 training videos for the second time

It looks much better. But I will support the opinion of @brianteeman, the elements lack centering.

Good morning all. It seems very nice to me. But how do you download this new Joomla 4 administrator template and try it out without the NPM environment?

I personally find the off center quickicons a bit weird but I'm not a designer.

I'm not a designer either but I just want to point out that this part is probably based on the rule of thirds https://en.wikipedia.org/wiki/Rule_of_thirds, Eg spice up monotonous things by altering their position/focus. This is speculation I never asked @ciar4n on this so don't @ me

how do you download this new Joomla 4 administrator template

@Magnytu2 the drone needs a restart here, maybe @HLeithner or @richard67 can help here

@dgrammatiko If that branch is already up to date with latest 4.0-dev there isn't much I can do to retrigger drone. If it's not up to date, you or Ciaran can update the branch to trigger that. It seems to be necessary anyway because appveyor checks all fail with:

Warning: The lock file is not up to date with the latest changes in composer.json.
You may be getting outdated dependencies.
It is recommended that you run `composer update` or `composer update <package name>`.

So there seems to be some inconsistency between composer.json and composer.lock.

Is it safe to run composer update?

Is it safe to run composer update?

@dgrammatiko Why should you do that? Does this PR update dependencies or add new ones? As far as I see not. So maybe it just needs to revert the nchanges in either composer.json and composer.lock or both?

Does this PR update dependencies or add new ones?

The PR removes one composer dependency (colour something)

@richard67 it seems that drone is dead for this PR

@dgrammatiko Maybe the rate limit, I don't know. Let's wait a bit, maybe it gets queued.

Will investigate why Drone isn't working properly.

Ugh... I think I know why there is an issue... The initial PR description contains an emoji, which Drone seems to stumble on. Please remove that and then do a minor change to trigger it again.

Ugh... I think I know why there is an issue... The initial PR description contains an emoji, which Drone seems to stumble on.

Ah, I should have remembered and noticed that.

Upload & Update a new installation using launch.joomla.org by prebuilt package at administrator/index.php?option=com_joomlaupdate:

Button Check for Updates disappear on hover:

Button Options disappear on hover:

Button Help is shown on hover:

Button Upload & Install hard to read without hover:

without hover	hover

I guess i'm doing something wrong as similar is on sidemenu on hover:

Can someone confirm the issues or is it on my side (what i think comparing the screenshots by @ciar4n)? Thanks.

System Information

@ciar4n ciar4n#8 fixes some of the reported issues

Thank you @dgrammatiko 👍

@sandramay0905 This should be resolved with.. 356d37b

Thank you @Quy. All mentioned issues should be largely resolved.

Click Multilingual Status button.
Also the button should be disabled when in edit mode.

@Quy all the status related problems should be fixed with 1109e5a

In base.sql files, the params column has to be updated with default values to fix @sandramay0905 issue.

(10, 'atum', 1, '1', 'atum - Default', 0, '', ''),

{"hue":"hsl(214, 63%, 20%)","bg-light":"#f0f4fb","text-dark":"#495057","text-light":"#ffffff","link-color":"#2a69b8","special-color":"#001b4c","monochrome":"0","loginLogo":"","loginLogoAlt":"","logoBrandLarge":"","logoBrandLargeAlt":"","logoBrandSmall":"","logoBrandSmallAlt":""}

This should be resolved with.. 356d37b

@ciar4n I think the prebuilt packages are not updated, full- and update-package shows same issues as shown in #33100 (comment). After installation i cleared the browser-cache. Same issues are shown in safari.

Applied #33100 (comment)

Thoughts after testing:
Mostly a lack of contrast generally speaking for backgrounds and borders.

Lang badges Before pr

After PR
Badge secondary was modified and contrast is not good

Lang badges Hover has to be corrected as text becomes unlegible.

Searchtools Fields are hardly differentiated because of var(--atum-bg-dark-5) background and/or svg color + too pale border color.

(fields border color are too pale generally speaking with border: 1px solid var(--atum-bg-dark-10);). Using var(--atum-bg-dark-40) would help. Same when border is var(--atum-bg-dark-5)

EDIT: borders color were fine before PR

body .container-main::after, body .container-main::before

Still lack of contrast:

Hope this helps.

Safari MacOS joomla logo

EDIT: This can be solved by using
<object type="image/svg+xml" data="<?php echo $logoBrandLarge; ?>"></object>
instead of
<img src="<?php echo $logoBrandLarge; ?>" <?php echo $logoBrandLargeAlt; ?>>

(don't know what to do with the alt)

my2cent: Do we need a "+" on the module screen? Or could you make the whole box a link? As there is nothing else what a user can do there than click on a module, the "+" is no information.

The "+" provides the info if there is a link to create a new item or not. We don't have it on all "buttons". If you remove it, we need another a11y conforming way to visualize that there is a link.

@chmst Main area goes to the list of modules. + button goes to the new module page
http://localhost/joomla-cms/administrator/index.php?option=com_modules&view=modules&client_id=0
http://localhost/joomla-cms/administrator/index.php?option=com_modules&view=select&client_id=0

@brianteeman I think @chmst was talking about the add new module modal view, where the + is the only action:

@brianteeman I think @chmst was talking about the add new module modal view, where the + is the only action:

Ah, yes, that makes sense. There we don't need the "+".

Safari MacOS joomla logo

@infograf768 fixed with 7408bd1

That PR fixes issue #32627. Screenshot is attached below.

I will close my issue, when this PR will be merged to 4.0-dev branch and I re-test it once again.

But I see some other problems, tabs like "Live update" or "Pre-Update Checker" doesn't highlight in blue colour if user doesn't click on it, like in latest nightly build.

And settings button has white colour, while it should be highlighted when moving the page down. All problems are visible in attached screenshot.
Maybe that problems are fixed already, I update Joomla test site with latest prebuilt package.

Or it's a feature, not a bug?

@Bond97 can't replicate here:

@dgrammatiko please set update server to https://ci.joomla.org/artifacts/joomla/joomla-cms/4.0-dev/33100/downloads/41885/pr_list.xml
Then tap to settings button and "Check for updates"
And you might replicate this.

Well, as I said I can't replicate this here:

Make sure that you clear your browser's cache

@Bond97 For a temporary fix:

• Go to System > Administrator Template Styles
• Edit atum-Default
• Click Save button

@dgrammatiko i have same issues reported #33100 (comment) and before as @Bond97 which is caused by not updated prebuild package?

@sandramay0905 See #33100 (comment)

In base.sql files, the params column has to be updated with default values to fix @sandramay0905 issue.

Fixed with 168c9ab

@dgrammatiko clearing browser cache has been helped to fixed problem with tabs.

But problem with settings button label didn't disappear.
When user scroll down page, that button label should not blend into the background, isn't it?

Background is white and search button label is white.

@dgrammatiko

On screenshot search button label is disappeared, when I scroll down a little.
But it's displayed ok, when background is not white or some light colours.

On screenshot search button label is disappeared, when I scroll down a little.

Right, that's because the cogs icon is positioned with fixed. @ciar4n some refactoring here?

@Bond97 Mobile toolbar issue should be resolved with 2dfc02e

Missing view background added, fixed media info-closed position, and some contrast improvements

@ciar4n Mobile toolbar issue fixed.

I see other problem - when I update Joomla with new prebuilt package, text "Joomla Version Update Status" must not have any css styles like borders or something else. It is ok or not?

@Bond97 afaik the test packages don’t have the gzipped static assets thus you’re always getting confusing results. Also these packages are meant to be used locally!!!

Not sure what I am doing wrong but all the links and hovers are wrong

I have reset everything and I believe its now working as designed.

In the installer there is a weird width bug. Watch the animation

Links - is this intended as for my aged eyes I couldnt see that it was a link at all and I certainly can see any difference when I hover

Unable to install blog sample data

sampledata-process.min.js?4ef56133ebb504be850215e526022ee0:1 Uncaught TypeError: Cannot read property 'appendChild' of null
    at Object.a.sampledataAjax (sampledata-process.min.js?4ef56133ebb504be850215e526022ee0:1)
    at Object.a.sampledataApply (sampledata-process.min.js?4ef56133ebb504be850215e526022ee0:1)
    at HTMLButtonElement.<anonymous> (sampledata-process.min.js?4ef56133ebb504be850215e526022ee0:1)

@brianteeman Fixed colors. Please reinstall.

It is almost impossible to distinguish a difference in button between btn-primary and btn-secondary. So they look the same and therefore as they both have very different background on hover its odd.

before

after

It is almost impossible to distinguish a difference in button between btn-primary and btn-secondary

You can use the classes btn-sucsess for create and btn-danger for clear to have more consistent colours there but I don't think Ciaran changed this part

I commit today a change on the secondary color in response to a comment. I'll have another look tomorrow and find a more thought out solution.

You can use the classes btn-sucsess for create and btn-danger for clear to have more consistent colours there but I don't think Ciaran changed this part

Then there would be zero point in having two separate classes ;)

I commit today a change on the secondary color in response to a comment.

Less haste more speed ;)

@brianteeman @ciar4n I just changed the related classes, now looks like:

If it's undesired roll back the last commit

Thats not a solution

Thats not a solution

Why???? These are the defaults from bootstrap and used all over the place in Joomla. I don't understand...

Edit: obviously I.'m talking about the given screenshot not the fact that primary/secondary are not very different...

Your edit is the reason why not

Your edit is the reason why not

Setting aside the primary/secondary thing for a moment, new and delete are always green and red all across the backend, so although it's not the solution to the other problem might be a good thing for consistency. See the bright side here...

Look at the actual code. There are multiple buttons

• select btn-primary
• create btn-secondary
• edit btn-primary
• clear btn-secondary

61ed6ec reverts the button classes

Personally speaking I find it much more pleasing on the eye when the sidebar is a similar colour to the main area of the screen.

@ciar4n i do a discusion about size modal
#32039
can you intergrate it your pr ?

@Quy

• Remaining nested cards removed
• Added missing tab background (eg. updates)
• I'll look into the header/title issue. There is a general markup inconsistency across the codebase for these elements so no easy fix.

@brianteeman Secondary color change reverted globally and scoped to just the sidebar

@brianteeman Personally I prefer the distinction between the sidebar and the content using contrasting colors however I'm happy to go with the majority on this....

Dark sidebar...

Light sidebar....

Please keep the sidebar dark, some of us already suffer from the light theme already...

@ciar4n i do a discusion about size modal
#32039
can you intergrate it your pr ?

@micker As there is no guarantee that this PR will get merged, it may be best to resolve this issue in a separate PR.

@ciar4n That's 2 times the same image with dark sidebar.

@richard67 My bad... amended with the correct screenshot

My personal taste is dark sidebar.

But after a while using it I will get used to anything.

Maybe it will be better to make button to change light sidebar to dark sidebar in Atum settings?
I mean in System-Administrative template styles.

If user like light sidebar- it will give him a choice to use light or dark version.

But default settings will be dark, I think.
What do you think about this? Or it will be better to use dark sidebar by default without any buttons to change?

I know, that user can make changes by css in template, it's just my suggestion about button.

Maybe it will be better to make button to change light sidebar to dark sidebar in Atum settings?

NOOOO.
So me and @ciar4n had a little chat and decided that if this gets merged and also the other PR for com_templates (enabling basically the use of child templates) we could do a child template with dark mode. But this is a big IF...

@dgrammatiko ok, got it :) I saw issue one month or two ago about dark theme in Atum and think, it will be useful.
But you are think right, because no one want child template with own issues and bugs.

@ciar4n There is a display issue with menu items.

There is a display issue with menu items.

@Quy fixed with 9f4211f

Unable to install Sample Data.

Uncaught TypeError: document.querySelector(...) is null sampledata-process.js:30:14

@Quy I already reported that ;)

Sampledata fixes with a2eb7fb

FYI the script probably wasn't broken by this PR

Edit: there's a dot in the li elements

I'll leave this for @ciar4n

Maybe remove the left/right borders and no shadow?

Maybe remove the left/right borders and no shadow?

Those left/right borders serve an essential role - they are not just eye candy. When you are scanning a row horizontally they tell your eyes that they have reached the end/beginning.

I wish this pr only contained the changes required for the painting and not additional changes that could be their own pr.

and not additional changes that could be their own pr.

which ones are you referring to here?

Should there be borders here?

There are several Issues that have been closed because of this PR that should have been resolved independently.

Contrast Issue with borders for media and image modal

Comes from : $border-color: #f0f4fb;

Sample data install:
Whatever the kind of sample data installed, we get the same message when installed. Possible to sprintf here?

Also, it would be nice to refresh the page at the same time as it is not obvious that it is necessary to manually refresh it to see the changes for the menus. Adding a document.location.reload(); without losing the success message would be a plus.

All these sample data issues should be fixed in their own PR and not here - most already have open issues. They are not specific to a UI repaint and this PR might not get accepted.

FYI: "Sample data installed" is NOT present in 4.0-dev, as well as the modifications of sampledata-process. js file. Therefore these concern ONLY this PR, whether it is accepted or not.
This is not to say that what we have in 4.0-dev should not be improved based on some of the changes here.

Adding a document.location.reload(); without losing the success message would be a plus.

There's no such mechanism in Joomla (you can do it with cookies or storageSession but this is getting way out of scope of this PR)

I am well aware of the code that is changed here and the non-related issues that are being closed because of the code

@dgrammatiko
can't we use something like

 } else {
            const bar = document.querySelector(`.sampledata-progress-${type}`);
            bar.parentNode.removeChild(bar);
            Joomla.renderMessages({
              message: [Joomla.Text._('MOD_SAMPLEDATA_COMPLETED')]
            });
            setTimeout(function(){
            window.parent.location.reload(); // or document etc.
            }, 3000);
            window.scroll({
              top: 0,
              left: 0,
              behavior: 'smooth'
            });
            SampleData.inProgress = false;
          }

can't we use something like

Personally, I wouldn't do it like that as users expect navigation will happen on a response to an action and not randomly due to a timeout. We could use the event on the alert close to fire the reload of the page...

There are several Issues that have been closed because of this PR that should have been resolved independently.

Only 1 issue was closed regarding the sample data progress bar that could have been done independently.
The other was a PR that became obsolete because of this PR.

And that should have been done separately and the other one is only obsolete if this PR is accepted

Those left/right borders serve an essential role - they are not just eye candy. When you are scanning a row horizontally they tell your eyes that they have reached the end/beginning.

@brianteeman @Quy These borders have been inadvertently added by this PR and do not exist in 4.0-dev. I'll probably remove them for now as they are only partially (and incorrectly) added. If it's something indeed required then they should be added in a separate pr.

Hello everyone, I'm testing this PR on Safari. There are areas where color is lacking. The hover buttons disappear. But it's the same problem on Firefox.
And I find can visible black text on a blue background.

@Magnytu2 These issues have been fixed. Please install the latest version. https://ci.joomla.org/artifacts/joomla/joomla-cms/4.0-dev/33100/downloads/41962/

@Quy I did a new installation and not an update of PR41962. Problems with black text buttons are fixed. But I still have the white blank under the admin panel buttons.

I don't know if this is the right place. But as you touch once again the administration template. Are you going to put the fields back into two or three columns? The user experience is really nagative to build and extend all the fields to use Joomla !. For example, even with a 32" 4k screen, I cannot have the image and the settings on the same view.

I don't know if this is the right place. But as you touch once again the administration template. Are you going to put the fields back into two or three columns? The user experience is really nagative to build and extend all the fields to use Joomla !. For example, even with a 32" 4k screen, I cannot have the image and the settings on the same view.

See #32874

@Quy Mentioned style issues should be now resolved. 👍

As suggested by @Magnytu2, I have amended the media manager edit layout to 2 columns and fixed up the styling.

@infograf768 I plan to fix up the modal styling in general. I just haven't gotten around to it yet. Next on the list 😄

@infograf768 My preference would be to keep tab border-colors relatively light. Regardless I have increased their darkness slightly as suggested.

@ciar4n Thank you so much. Since the time that I ask for this change. Thank you that's great. Can we already try it?

@ciar4n @brianteeman Can we use the class of field to build all options view ? Maybe de can appli a 50% width in all fields and keep it in a one column ? But maybe need a clarification about accessibility team
Can use column display or its not recommanded ?

@dgrammatiko You have added back an empty file, but it had content before it was deleted:

<!DOCTYPE html><title></title>

@Magnytu2 Scroll to the bottom of the page and click the Download link.

@Quy Thanks, but I didn't know when the function would be in the download folder. It's super cool! Thank you all.

@chmst are you happy with the text-decoration underline being removed from the links. I'm not sure myself that this satisfies the a11y requirements for links but I wasn't the one who added this originally

With this PR

I'm not sure myself that this satisfies the a11y requirements for links but I wasn't the one who added this originally

I'm also against the removal of the underline on the links. This is a huge antipattern

@Magnytu2 Is this still an issue reported here? #33100 (comment)

@Quy Yes !

I am not convinced that the Joomla Version should be styled the same as the other buttons - makes it look like a broken button

To my eyesight the left menu is not as crisp (and almost looks out of focus) to me.

I'm not sure if its the change to white on blue or the change to font-weight: 700

Current

Repaint

About #33100 (comment) well, this is a Safari bug and it's already fixed in the latest tech preview

@brianteeman

I am not convinced that the Joomla Version should be styled the same as the other buttons - makes it look like a broken button

Fair point, I'll fix next time im sitting down on this.

To my eyesight the left menu is not as crisp (and almost looks out of focus) to me.
I'm not sure if its the change to white on blue or the change to font-weight: 70

It would be easy enough to extend this PR to include an option for a light/dark sidebar in the template style settings. Would this be suitable?

It would be easy enough to extend this PR to include an option for a light/dark sidebar in the template style settings. Would this be suitable?

That would depend if its the color or the weight that is causing the problem and if its just my eyesight or others feel the same.

Go to Media Manager.
Display issue with modal of rename/share/delete.

Filename not readable. Should be white.

Display issue with modal of rename/share/delete.

Should be fixed with 2673837

Filename not readable. Should be white.

Fixed with d68fbe2

Is it properly rendered - some more space between "Update" block and "User Permissions", than between other blocks? Maybe it will be better to make same size space between all blocks?

Or it is global Joomla 4 issue and doesn't fix in this PR?
Browser: Firefox Beta 88. But this render issue has been visible in Chromium browsers too.

Maybe it will be better to make same size space between all blocks?

Fixed with b67a7bf @ciaran you might want to check this one

Issue fix confirmed, thanks @dgrammatiko

System > Administrator Templates
Click Manage Folders

System > Redirects
Click Bulk Import

Home Dashboard
Click Add module to the dashboard

Home Dashboard
Click Add module to the dashboard

Fixed with c207de8

System > Redirects
Click Bulk Import

Fixed with 870b5cc

Installation pages shouldn't have horizontal scrollbar.

Home Dashboard
Click Add module to the dashboard

Fixed with c207de8

Now there is no contrast on the Modules selection page as reported here:
#33100 (comment)

Thanks @Quy. Above issues should be now resolved.

The test and download links seem broken.

Plugins - Settings button, becomes invisible on mouseover.

After updating J4 to a patch with this PR, the link to the module for checking multilingualism parameters turned into gibberish.

Plugins - Settings button, becomes invisible on mouseover.

You need to reinstall as it is obvious you just upgraded from earlier beta and that won't work. Use the install package at the bottom of the Github repo

You need to reinstall as it is obvious you just upgraded from earlier beta and that won't work. Use the install package at the bottom of the Github repo

@dgrammatiko Why so? Updating from previous Betas has to work , see the release notes of each beta release. There is an exception when updating from Beta 3 or earlier, where it needs an extra SQL step, but that is not the problem here.

@richard67 There is also extra sql data that needs to be updated here: https://github.com/joomla/joomla-cms/pull/33100/files?file-filters%5B%5D=.sql#diff-3a9a51c74db65d66b70dbd56c86e63882cfaa26701ef6ff3f88bd0ea2682bb9f

Also if they ever saved the default Atum style that won't work as well

@dgrammatiko That's why drone also builds update packages. You can update a current 4.0-dev or latest 4.0 nightly build with that package, using the Joomla Update component, and then the SQL will run. Of course after that you can throw away that installation, i.e. when changes are made in the PR, you can't update again, you have to start again with a clean 4.0-dev or nightly without the PR, because there will not be a new version and so no update will be found. I know, this can be confusing, so maybe it's really easier to use the full installation package.

The reason why I commented was that people could misunderstand your comment and think we don't support updates between Betas.

Also if they ever saved the default Atum style that won't work as well

This has to be fixed because as said, we want to support updating from previous Beta versions.

This has to be fixed because as said, we want to support updating from previous Beta versions.

It's an easy fix but I'll keep it on hold till there's a decision. It's worthless to spend so much time here if it won't be accepted at the end

It's an easy fix but I'll keep it on hold till there's a decision. It's worthless to spend so much time here if it won't be accepted at the end

That's ok for me, we should just not forget it at the end, and we should not release a new beta (or RC) with this PR merged but without that fix. If this PR gets merged, we should wait with a new beta (or RC) until that fix has been made, too.

To me it seems the majority of people like the changes made by this PR, so I see no reason why it shouldn't be accepted if it works well. I don't think this PR falls under the "new feature" policy. But that's just my opinion, maybe I am missing something.

Users > Mass Mail Users

System > Administrator Modules

@Kostelano No need to reinstall. Do the following to fix:

Go to System > Administrator Template Styles
Edit atum-Default
Click Save button

@dgrammatiko Composer is not happy: https://ci.joomla.org/joomla/joomla-cms/42284/1/5

Edit Menu Item

4.0-dev

repaint

@Quy @infograf768 Thank you. Fixed.

I've allowed myself to solve the merge conflict here.

@ciar4n Please review all batch modals as they need top padding.

Edit a menu item of type Category Blog.
Click Select button.
See horizontal scrollbar.
See shadows.

System->System Information->PHP information must be non-responsive? Or it's ok and depends on user server and current version of PHP?

I've allowed myself to solve the merge conflict here.

Thank you @richard67 👍

Please review all batch modals as they need top padding.

@Quy I think I got them all

System->System Information->PHP information must be non-responsive? Or it's ok and depends on user server and current version of PHP?

I've partly resolved this. I could go further however it would require breaking words which will make some info hard to read.

@ciar4n Will you be styling the Joomla version button differently? Otherwise, I think we are good to go except for the upgrade sql files. Thank you!!!

Lack of contrast for the borders. Please darken.

.custom-select, .form-select {
    max-width: 100%;
    cursor: pointer;
    background: url(../images/select-bg.svg) no-repeat 100%/116rem;
        background-color: rgba(0, 0, 0, 0);
    background-color: var(--atum-bg-light);
    border: 1px solid var(--atum-bg-dark-10);  // Please change to -20
}

.form-control {
    max-width: 100%;
    background-color: #fff;
    border: 1px solid var(--atum-bg-dark-10);  // Please change to -20
    border-radius: .25rem;
        border-top-right-radius: 0.25rem;
        border-bottom-right-radius: 0.25rem;
}

Before

After

Can the Lists have same Look (i prefer "Extensions Categories"):

Global Components	Extensions Categories

Check boxes are different in padding:

Template style	Module assignment

@infograf768 Increased border color to --atum-bg-dark-15

Can the Lists have same Look (i prefer "Extensions Categories"):

Unfortunately nothing I can really do here as this element is pulled from outside of the codebase

Check boxes are different in padding:

The template style assignment probably needs a rewrite as it has completely different markup to the module assignment. For now I have made some minor adjustment to match style with module assignment

@ciar4n Will you be styling the Joomla version button differently?

@Quy @brianteeman Joomla version dimmed slightly. If you think it needs something more obvious, feel free to let me know.

@ciar4n I just want to know if this will actually get merged as I have a set of training videos on hold because of it

Media manager is completely not responsive at mobile view, I think it needs fix.

Maybe that PR #31140 helps for it, because it's don't update for long time.

@ciar4n I just want to know if this will actually get merged as I have a set of training videos on hold because of it

Honestly, I haven't heard anything but I assume we would have heard from PLT by now if it wasn't.

Thank you @Bond97. I'll fix next chance I get.

@wilsonge @ciar4n @brianteeman @Quy @infograf768 Hello, sorry, but I no longer understand. Or not ... Won't all your work be part of the next version of Joomla 4? Which should be soon (and hopefully very soon) Joomla 4 beta 8 or Joomla 4 RC.
I know I'm annoying, but now we have to move forward and offer something to the community or everyone will end up changing CMS.

@Magnytu2 as far as I know, that PR doesn't introduce new features, it's just Atum administrative template repaint for easier interaction with Joomla4 backend.

All new features will merged to 4.1 release branch. Now all dev's are prepare Joomla 4.0 for release and fixing bugs/errors.
You can correct me, if I'm wrong :) I'm not coder or dev, just testing some PR's and nightly Joomla 4.0

@Bond97 The responsiveness of media manager is a separate issue that PR #31140 attempts to fix, however, it is not being worked on so hopefully @ciar4n will give it some care/magic.

I have tested this item ✅ successfully on 81fa64f

@ciar4n Maybe you can improve the look of the alerts to match the new design.

System > Update > Joomla

Message

to match the following (background color + border):

I have tested this item ✅ successfully on 81fa64f

@ciar4n Due to the recently merged PR #33389 , this PR here has a conflict now in file administrator/components/com_users/tmpl/user/edit.php. Do you think you can solve that without reverting what that PR does?

Update: Meanwhile it has also conflicts in file administrator/modules/mod_sampledata/tmpl/default.php.

Hi @_ciar4n,
I have not tested PR , but
I took a look at your code-changes.
It looks like a good job.

Dear @ciar4n,

I have now installed your branch. I have noticed some problems. But this is lamenting on a high level.
I think the input fields look very elegant with the thin border, but because of accessibility they should be highlighted a bit more.
In the dashboard, the icons stay dark when hovering.
The contrast when hovering in the navigation is also a bit low.
For a later date, it would be great to visually highlight the focus when tabbing.
Example:
:focus-within // :focus {
outline: solid 2px dashed #cc000
}
Other than that, really good work.

@Quy I've added a quick fix for the media browsing on smaller screens. It will probably need further work but will suffice for this PR...

@richard67 Conflicts fixed ensuring not to overwrite #33389. Thanks for the heads up 👍

Thank you @angieradtke

I have applied some of your suggestions (input border & nav hover color).. I'll try and get the rest when I sit at this next.

@Quy Nice suggestion on the alerts. I'll also make this amendment over the weekend.

Edit a module.
Click Menu Assignment.

(a11y) [JAT] Links must be underlined (colourblind cannot see the links)

Filter fields seem to have different sizes.
Articles -> Select max level is smaller

Categories -> Select tag is bigger

privacy request module fixed

tabs - hard to tell which tab you are on

links - impossible to tell they are links [a11y] and onhover change is almost identical fixed

dropdown merges into background fixed

width? fixed

lack of visual "border" between columns fixed

@brianteeman @ciar4n

Hi Brian,
I have installed Ciar4ns branch directly , there I do not have these color issues.
strange

@angieradtke What means "installed the branch directly"? Pulled into a git clone? Or downloaded the zip with the branch from GitHub or the issue tracker? In both cases it needs to run "composer install" and "npm ci" after that to update external dependencies and rebuild css and js. If you don't do that and have the build results there from a previous installation, your site will still use old css and js.

@richard67 download zip .-)

I did composer install and npm ci

@richard67 download zip .-)

I did composer install and npm ci

Then it should be ok. Strange.

Then it should be ok. Strange.

@richard67 we had this talk again a week ago (or so). The problem is that this PR is not applying (in the db) the settings so if someone saved the atum's default style they have to go and save it after applying the patch.

@richard67 we had this talk again a week ago (or so). The problem is that this PR is not applying (in the db) the settings so if someone saved the atum's default style they have to go and save it after applying the patch.

@dgrammatiko But @angieradtke made a new installation with it, so the DB should be fine, or not?

@dgrammatiko But @angieradtke made a new installation with it, so the DB should be fine, or not?

So the installation is fine as the SQL is fixed there. Brian probably applied the patch on an existing instance and for this case, there is no SQL file to update the db record.

So the installation is fine as the SQL is fixed there. Brian probably applied the patch on an existing instance and for this case, there is no SQL file to update the db record.

@dgrammatiko Ah, now I understand. For Angie it went right, and for Brian not. I thought it was vice versa 😄

thanks @dgrammatiko that was indeed the problem that does need to be fixed.

Going to go back through each of the issues I posted now and delete as necessary

Updated the post now. Most were still valid. Removed the invalid ones

My eyes are still really struggling to focus on the bold white items in the sidebar

@brianteeman @ciar4n @dgrammatiko (in alphabetical order): I will provide an update SQL soon. Will make PR for Ciaran's branch.

@brianteeman @ciar4n @dgrammatiko Question: Should an update SQL script set the params of that template style only if the params values is empty, i.e. the parameters haven't been edited and saved before? Or should it also replace any existing params value? In the latter case I only can provide a complete replacement, i.e. any previously made changes e.g. on a 4 Beta 7 completely replaced by what comes with base.sql for new installations when updating to Beta 8.

At this point I think it has to be a complete replacement

At this point I think it has to be a complete replacement

I think I can start with that. If it turns out it should not be, then it is easy to extend the WHERE clause of the statement by an AND params = '' (with correct names quoting of course).

I also think it can be a complete replacement because I don't think many people are keen on keeping any changed params of that template style when updating from e.g. Beta 7 to Beta 8 and getting the enhancements from this PR here.

accessibility issue FIXED

The height of the items in the top right dropdown menu is much too low and so it is far too easy to select the wrong item. The guidelines say 44pixels.

The easy way to test is to use the bookmarklet at the bottom of this blog post which is also a great explainer for the problem.

Current template

Repaint template

accessibility issue

The lack of hard borders makes it difficult for people to scan lines as the eye has no focus point to use for the end and beginning

example 1 current template

example 1 repaint template

example 2 current template

example 2 repaint template

Select new module fixed

The entire point of adding the search to that page was to make it the "preferred" way to find a module. Now that is lost with the search moved off to the side

current template

repaint template

Select new module accessibility fixed

Changing the heading from H2 to H4 breaks the rule that heading levels should be in sequence

The Algorithm... in English
A heading level is skipped (e.g., an h1 is followed by an h3, with no intermediate h2). Note that an h1 is not required to be the first heading within the document.

Select new module click target fixed

This has been changed from the entire card to just the area with the plus icon

PR for update SQL scripts is ciar4n#9 .

If that is merged, the description of this PR should be updated by the information that when updating a previous 4.0 version, the parameters of any template style of the Atum template (also copied template styles) will be overwritten, and maybe the release announcement of the next Beta or RC where this PR here will be included should also contain that information.

Thank you @richard67 ... very much appreciated 😄

Retesting previous reported issues after latest updates.

When searching for a module you now get a javascript error

admin-module-search.…19631d5b364a48f47:1 Uncaught TypeError: Cannot read property 'classList' of null
    at HTMLInputElement.<anonymous> (admin-module-search.…19631d5b364a48f47:1)
    at admin-module-search.…19631d5b364a48f47:1
    at admin-module-search.…19631d5b364a48f47:1

and you dont get a message when there are no results

When searching for a module you now get a javascript error

Just by looking at the error I see that there is a hash in URL so maybe you're loading the .gz (eg the old version)?
Try removing the media folder and run npm ci

if I am then there is a bug in the build system as I just ran npm before testing

but just to be complete I deleted the media folder and did it again and the same problem

@brianteeman

The lack of hard borders makes it difficult for people to scan lines as the eye has no focus point to use for the end and beginning

Is the card itself not considered the 'hard border' as it is on list pages?

It's kind of a trick of the eyes and hard to give an exact answer. It could be better in the original because there is a gap between the start/end of the line and the edge of the card or because the original card has a much stronger border. Or a combination of both

For example this looks immediately better. the eye stops when it gets to the end of the line instead of it bleeding into the background

When you have a dashboard that has both a menu and a module you can see that the row heights are different

At patchtester on hover:

@brianteeman

It's kind of a trick of the eyes and hard to give an exact answer. It could be better in the original because there is a gap between the start/end of the line and the edge of the card or because the original card has a much stronger border. Or a combination of both

I think this is very much personal taste. For me, I find the extra borders and table spacing is adding unnecessary noice to the UI. The cleaner style makes it easier for me to focus on the content. But, that's just me.

Regardless we should have consistency across views which is lacking on the current template. Eg. if adding space around tables on the dashboard, should also be added in the list views.

@ciar4n I updated my test environment to latest prebuilt package - it has HTTP 500 when I click to "modules" menu.

Link is administrator/index.php?option=com_modules&view=modules&client_id=0

And doesn't work this link

Note: new installation doesn't solve this issue.

@Bond97 This issue occurs in the J4 branch and not related to this PR. Thank you for the report!!!

@Bond97 This issue occurs in the J4 branch and not related to this PR.

This is urgently fixed by #33519 Please test.

Please make the first column equal wdith. Thanks.

@Quy @PhilETaylor Issue with 500 error has been fixed. Latest changes in branch 4.0 doesn't merge to this PR yet, so I tested latest nightly build new installation :)

Text should be white.

How about making the background color one color instead dark/light?

@Quy I will look in to it. There is no quick solution considering the following info blocks which look to require a separation from left to right...

I see it as a heading and should be above the paragraph instead next to it in a separate column.

This PR should be kept to repainting. Anything not directly related to that should be in its own issue/pr.

In mobile view pagination block, that contain 1...10 pages will cause non-responsive issue

Note: you must create 50+ articles and set list limit to 5. My request to set 1...5 pages or 1...7 pages, and articles list will be responsive, when user create more than 50+ articles.

This issue requires separate issue or might be fixed in this PR?

This issue requires separate issue or might be fixed in this PR?

@Bond97 That depends on if this issue only happens with this PR here or if it also happens with a the "normal" 4.0-dev branch or nightly. If it only happens with this PR here, it has to be fixed here, but if it's also an issue without this PR, it might be better to make a separate issue.

@richard67 thank you for explaining, I have searching for this problem and found issue #32674. It hasn't fixed yet :)

Thank you @ciar4n for your awesome work here. Could you please check the scss style if you can fix this: https://ci.joomla.org/joomla/joomla-cms/43084/1/20
The plan is to merge this PR in the next two days. Is there anything important which is still a show stopper for merging?

Especially @joomla/joomla-accessibility-team-jat is there anything open?

lol

working on #33296 with @chmst right now

thats nothing really to do with the repaint

Currently 4 out of these 5 are buttons, yet all 5 look the same. This is not optimal. Why look like a button if you are unclickable.

Either the version number needs to look different or needs to be linked as a clickable button, maybe linking to the update page?

Currently 4 out of these 5 are buttons, yet all 5 look the same. This is not optimal. Why look like a button if you are unclickable.

Either the version number needs to look different or needs to be linked as a clickable button, maybe linking to the update page?

@PhilETaylor As far as I remember, @ciar4n had changed that so the version button looked a bit different. Either you haven't compiled the css after having updated your branch for testing, or that change got lost somehow by subsequent changes.

I was just looking at the screenshots in this issue.

I was just looking at the screenshots in this issue.

@PhilETaylor Due to the very long comment history, GitHub hides the older ones by default, so you won't see the one which shows the change if not expanding all and going through it. You should get some coffee first before you do that, it is really long ;-)

@PhilETaylor screenshot of today:

I'll just review what I see.

After a npm ci and a cache clear I see black text

ok its "different" for me with 20/20 vision... but I doubt its "different" for everyone that doesn't have 20/20 vision....

Joomla installer has two different blues in the header

Black icon instead of white icon

After a npm ci and a cache clear I see black text

A complete reinstall of Joomla fixed this - so this means there is no upgrade path for those who already have Joomla 4 installed and there should be.

After a complete reinstall the green boxes do not extend in height to fill the space, no padding of text at top and generally not looking good

Are we keeping the clicked border on tabs?

@PhilETaylor Sure there is an upgrade path, see files 4.0.0-2021-05-01.sql in this PR. Just the DB fixer will not do anything because it handles only structural changes. So you either have to apply the SQL e.g. in phpMyAdmin, or you have to update e.g. a Joomla 4 Beta 7 to the update package which drone has build for this PR and which can be found when following the "Details" link at the right side of the "Downloads" step of the CI checks at the bottom of the PR.

@ciar4n In case if you need to do or already have done some changes on the template style params in the base.sql files, don't forget to update the 4.0.0-2021-05-01.sql files in the same way.

I still hate the background pattern effect, but that's personal.

The left menu is also too bold white for my 27" iMac retina screen. It looks out of place.

For the add module to dashboard, why not have it as a split like all the other places we add modules?

instead of this:

Something like this (random screenshot, showing split button):

Other than the comments I have made so far, it looks good. I've done some random pokes in places people normally forget and it looks good there too.

@PhilETaylor Your comment about the update path is clarified with my later comment?

If you are happy Im happy, Ive ran out of coffee time and have to go back to the day job :)

If you need that upgrade path tested, then I can do that tonight for you. The black text was the first thing that suck out after switching branches and npm-ing.

The left menu is also too bold white for my 27" iMac retina screen. It looks out of place.

100% agree and I am not on a retina

@ciar4n @dgrammatiko please see https://ci.joomla.org/joomla/joomla-cms/43084/1/20

I see no featured symbol in article and contact:

I see no featured symbol in article and contact:

please hold your horses fixing this... I'm working on changing this in #33557

/administrator/index.php?option=com_cpanel&view=cpanel&dashboard=help

after PR

before PR

How is it supposed to look like in this new situation?

@hans2103 Be sure to npm run build:css or install with the prebuilt download package.

The plan is to merge this PR in the next two days. Is there anything important which is still a show stopper for merging?

@bembelimen I think its more or less there. There has been some suggestions and some mention of already existing issues, however nothing that cant wait till another PR.

@ciar4n In case if you need to do or already have done some changes on the template style params in the base.sql files, don't forget to update the 4.0.0-2021-05-01.sql files in the same way.

@richard67 Thanks for mentioning. To my knowledge there hasnt been any changes to the base.sql so should be good to go.

however nothing that cant wait till another PR.

really?

Are these boxes not meant to fill the whole space and be padded then?

@PhilETaylor Can you detail your enviroment as I am unable to replicate this issue?

Checking...

Firefox on mac - note the article categories and Joomla is up to date and cache boxes look dreadful.

Chrome on mac

Safari on mac - the worse

Also now the patterned background (a personal dislike of mine) is visual and messes with my head on empty states, and bleeds into the learn more button

ok its "different" for me with 20/20 vision... but I doubt its "different" for everyone that doesn't have 20/20 vision....

Maybe make the background color transparent.

Thanks @PhilETaylor I'll fix this up later this eve.

Maybe make the background color transparent.

Much better, but does the version number even need to be on the header of each and every page... just a thought. waster real estate, if it needs to be on every page then the footer of the left sidebar is the proper place for it.

Probably not a "admin ui repaint" question though but a more general thought

at one point in j4 lifetime thats where it was - dont know why it was changed

at one point in j4 lifetime thats where it was - dont know why it was changed

You can be sure as hell that 3pd will want to start putting their own icons in this top toolbar... it will become abused.

/me bookmarks this comment...

You can be sure as hell that 3pd will want to start putting their own icons in this top toolbar... it will become abused.

/me bookmarks this comment...

Happy to report I mighty be the first one that did it already: https://jinvalidate.netlify.app/

added 930 packages, and audited 931 packages in 39s

8 high severity vulnerabilities

npm audit report

merge  <2.1.1
Severity: high
Prototype Pollution - https://npmjs.com/advisories/1666
fix available via `npm audit fix --force`
Will install watch@0.13.0, which is a breaking change
node_modules/merge
  exec-sh  <=0.3.1
  Depends on vulnerable versions of merge
  node_modules/exec-sh
    watch  >=0.14.0
    Depends on vulnerable versions of exec-sh
    node_modules/watch

xmlhttprequest-ssl  <1.6.2
Severity: high
Arbitrary Code Injection - https://npmjs.com/advisories/1665
fix available via `npm audit fix --force`
Will install karma@6.3.2, which is a breaking change
node_modules/xmlhttprequest-ssl
  engine.io-client  1.6.0 - 4.1.3
  Depends on vulnerable versions of xmlhttprequest-ssl
  node_modules/engine.io-client
    socket.io-client  1.4.0 - 3.1.3
    Depends on vulnerable versions of engine.io-client
    node_modules/socket.io-client
      socket.io  1.0.0-pre - 1.0.0 || 1.4.0 - 3.0.0-rc4
      Depends on vulnerable versions of socket.io-client
      node_modules/socket.io
        karma  0.13.19 - 5.2.3
        Depends on vulnerable versions of socket.io
        node_modules/karma

8 high severity vulnerabilities

unrelated to this pr

Cog not in middle of header on mobile

admin login screen on mobile needs work.

Filter arrow always pointing wrong on mobile

4.0-dev before this PR

ciar4n:paint this PR

That should be everything mentioned 🤞 Thank you @PhilETaylor @Quy

@ciar4n Please investigate the missing Featured icon reported here: #33100 (comment)

@ciar4n Please investigate the missing Featured icon reported here: #33100 (comment)

@Quy 👍

@bembelimen can we merge this now please. There will of course be tweaks that will be needed but this is 99% of the way there and its becoming unmanageable/untestable. Sadly people keep reporting unrelated issues here so lets just merge and then test and fix as we move on

@ciar4n are you still on tweaking things or are we good to go?

All done. You're good to go 👍

Thanks all for your awesome work!

Thank you @ciar4n

Thank you!!

Nice. Thanks to everyone who tested, contributed and offered suggestions. 👍 👍

Great

thanks for your hard works !!!!

Thank you

Great
Thanks for your hard work.
It looks awesome now

Am just exploring the result and am impressed. Good work, guys.

And it was again nice to see how people worked together.

This is what makes Joomla! great, and this is what makes me love it.

Hello, I just downloaded the latest nightly version of Joomla 4 beta 8. I just want to thank you all for your hard work. A big thank you!