Thanks so much for taking this on.

@dgrammatiko @Hackwar @wilsonge @HLeithner more conversation here :-)

Welcome and congratulations for your first PR :-)

.com_login .sidebar-wrapper .main-brand

change from atum-text-light

.quick-icons .quickicon a.success

change from color: fff

.header .fa-angle-down ==> increase margin-left

Stop Brian, it is work in progress. Robert told me I have to make that pull-request now. I'm not finished.
Please take an overview first and tell me if I go in the right direction

OK. will do
Looks awesome so far - I am only seeing very minor tweaks

So the only real things that are not "tweaks" would be the box-shadow on the inputs and the delay on the transitions for the buttons - see below - otherwise keep up the good work

Now

Better???

Animation/hover looks off - maybe the icon and the button should change at the same time

Thank you @angieradtke for your work.

The width of the input fields border is important for accessibillty. Shall we make them and the boxshadow configurable? Can be a nice accessibility-feature with less effort.

Animation/hover looks off - maybe the icon and the button should change at the same time

Transitions should have the same value, something like:

  transition: opacity 0.2s ease;

Another trick I do on the clickable items is:

/* Normal state */
  transform: scale(1);

/* Clicked state */
  transform: scale(0.95);

The width of the input fields border is important for accessibillty. Shall we make them and the boxshadow configurable? Can be a nice accessibility-feature with less effort.

I agree when you have focus on the input that it should have some clear highlighting but I dont see the need for it on everything all the time. Plus currently the shadow changes from blue to grey on focus so that is failing a11y ;)

Do we need the sidebar on the login-screen?

Personally not and the links are silly. But others were very insistent on that

Personally not and the links are silly. But others were very insistent on that

I think we shouldn't give more infos as needed at that place, because it could be seen by not authorized persons

Where can I fix the missing cancel button at the new -article- view?

Do we need the sidebar on the login-screen?

Her's an idea:

• since for whatever reasons some people need those links add them in a detail element with a title Help or something similar after the login button. Clean approach

Where can I fix the missing cancel button at the new -article- view?

You put it in the "existing records" part of the if/else checking for new items

Where can I fix the missing cancel button at the new -article- view?

It's the if/else that needs patching

@angieradtke In future when we have to make a new admin template for J5, can we order that directly from you? That would save us a lot of time ;-)

@angieradtke Since PR #27687 has been merged, some files have moved to other place (subdirectory "src"), e.g. file administrator/components/com_content/View/Article/HtmlView.php has bee moved to administrator/components/com_content/src/View/Article/HtmlView.php. So this PR here can't be easily applied on the current 4.0-dev branch.

Do you think you can fix that? It might not be easy due to merge conflicts. In this case let us know here and I am sure everybody who is able to and reads it and has a bit time will do all to suport you.

Do you think you can fix that? It might not be easy due to merge conflicts. In this case let us know here and I am sure everybody who is able to and reads it and has a bit time will do all to suport you.

Tomorrow Robert will help me to make all these fixes, so that I have more time to care about the things I know about .-) For every help I'm thankful

We have to be thankful to you.

Where can I move the filter options in front of the search?

Where can I move the filter options in front of the search?

Either
https://github.com/joomla/joomla-cms/blob/4.0-dev/layouts/joomla/searchtools/default.php
or any of the files in the subdirectory (don't remember from head)

What do you think?

and where to change if you like System-Template or Autum?

@angieradtke Do you mean adding &tmpl=component to the url or like here

@astridx
no we can change it here: \build\media_source\system\scss\fields\switcher.scss
or override this in the template

@astridx sorry I'm talking about the switcher

If we agree to use it anywhere than it should be changed in \build\media_source\system\scss\fields\switcher.scss maybe make a seperate PR for this change

#27926 (comment)

@angieradtke see this my sketch sketches.

I also suggest making switches (Yes/No)

I absolutely agree that the top status bar should be blue.
My drafts are slightly different. Since all the styles I did in the Internet browser panel. After changing the status, the page reloads to the default styles and my modifications disappear.
I don't know how to use SASS, I can offer my own styles in CSS.

Do we need the sidebar on the login-screen?

Personally not and the links are silly. But others were very insistent on that

For example me :) The sidebar is not about the links, it's about the possibility to add content there. Giving advices for your customers etc. The links are just placeholders so to speak (which could help anyways)

I also suggest making switches (Yes/No)

The problem with included texts (which was a benefit from, I guess Brian did it, the current solution) is, that you're very limited in text length.

The problem with included texts (which was a benefit from, I guess Brian did it, the current solution) is, that you're very limited in text length.

The button itself should not have long texts anyway. The "what" should be in the label, the button should be simple "yes/no".

Included texts is not going to be realistically possible in a multilanguage system. It places too great a restriction on the use.

In the example above I would make a group with label "Notify before" and then for the particular buttons use lables "day", "5 days" and so on, and use "yes" and "no" for the values.

The values should be so that not only the color gives the information if on or off but also some change of text. The position of the handle left or right is in my opinion also not enough info in addition to the color. I.e. if in the example above you are color blind and don't know about the meaning of the position of the handle, you don't know if it is on or off.

"Notify before" would not be a label - it would be part of a sentence. That is not good

Your comments about the use of color to convey meaning are also correct. We should not.

@brianteeman

Notify before ...
... day:
... 5 days:

would complete the sentence.

But I agree, it's not nice.

which does not work if you are using a screen reader - therefore it is wrong ;)

Before making changes to the switcher to make it look like button groups, we could as well just use button groups: #27952 ?

#27918 (comment)

@angieradtke see this my sketch sketches.

the border-radius ist located in a variable and so easy to change .-)

@angieradtke I've just made PR angieradtke#1 to your repo to update this branch to latest 4.0-dev including solve merge conflicts. Check the description and my comment there about how to proceed. If all ok, merge, else ping me here or in that PR there or by email.

@brianteeman I have helped @angieradtke with solving merge conflicts to 4.0-dev so this PR is up to date now. One of these conflicts was between changes for a[role=tab] and those your recently merged PR #27860 in file administrator/templates/atum/scss/vendor/joomla-custom-elements/joomla-tab.scss. Could you check if I have solved this conflict in the right way, i.e. if this PR here is right now or if your change from #27860 has to be applied again, and if necessary make a PR to Angie's branch of this PR? Thanks in advance for helping.

@infograf768 I have helped @angieradtke with solving merge conflicts to 4.0-dev so this PR is up to date now. One of these conflicts was between changes for .custom-select and those your recently merged PR #27864 in file administrator/templates/atum/scss/vendor/bootstrap/_custom-forms.scss. Could you check if I have solved this conflict in the right way, i.e. if this PR here is right now or if your change from #27864 has to be applied again, and if necessary make a PR to Angie's branch of this PR? Thanks in advance for helping.

@angieradtke The font size of the Update Check quick-icons on the admin panel is too big for the button and also too big compared with the other icons, e.g. System icons at the top:

Maybe some selector needs to be modified in file administrator/templates/atum/scss/blocks/_quickicons.scss to get the sasme, smaller .875rem font size (I think its variable value $quickicon-icon-size), but I haven't already found the right one.

Do you think you can fix that?

@richard67 This is a proof of concept - work in progress and as stated

Most changes made in the edit-article-view and at the sidenav.

So please help @angieradtke out by not commenting on anything other than that she asks for feedback on

  Thanks a lot guys  .-)
  At the moment 'm fighting with my local installation. It is broken
after I  took the pull request.

Error: Class 'Joomla\Module\Menu\Site\Helper\MenuHelper' not found:
Class 'Joomla\Component\Actionlogs\Administrator\Plugin\ActionLogPlugin'
not found

I'm not sure what  to do best  solve this issue issue.

Am 16.02.2020 um 17:23 schrieb Brian Teeman:

@richard67 https://github.com/richard67 This is a proof of concept -
work in progress and as stated

Most changes made in the edit-article-view and at the sidenav.

So please help @angieradtke https://github.com/angieradtke out by
not commenting on anything other than that she asks for feedback on

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
https://github.com/joomla/joomla-cms/pull/27918?email_source=notifications&email_token=AAI6HMYIYEEUFJK7BNH5JXDRDFR7TA5CNFSM4KURTI42YY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOEL4LN2Y#issuecomment-586725099,
or unsubscribe
https://github.com/notifications/unsubscribe-auth/AAI6HMZJHSBWWAJQMZOPOCLRDFR7TANCNFSM4KURTI4Q.

go to the libraries folder and delete autoload_psr4.php

Then refresh and it will be rebuilt

go to the libraries folder and delete autoload_psr4.php

Then refresh and it will be rebuilt

Confirmed. Brian was just 10 seconds faster than me.

Hallelujah .-)  thank you  Brian .-)

Am 16.02.2020 um 17:39 schrieb Brian Teeman:

go to the libraries folder and delete autoload_psr4.php

Then refresh and it will be rebuilt

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
https://github.com/joomla/joomla-cms/pull/27918?email_source=notifications&email_token=AAI6HMZI5NZQMQAKXOUKLELRDFT2VA5CNFSM4KURTI42YY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOEL4LZLI#issuecomment-586726573,
or unsubscribe
https://github.com/notifications/unsubscribe-auth/AAI6HM3Q7ICZQBAMBKW3MPTRDFT2VANCNFSM4KURTI4Q.

is your article-edit Layout broken as well?

not only that

Run npm i.

@angieradtke If Sharky's hint in previous comment is not enough let me know, then I can provide more steps to clean up.

supi, thank you  it works .-)

Time for CSS .-)

Am 16.02.2020 um 18:04 schrieb SharkyKZ:

Run |npm i|.

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
https://github.com/joomla/joomla-cms/pull/27918?email_source=notifications&email_token=AAI6HM73S3VFE3KUGE5MSGLRDFWYXA5CNFSM4KURTI42YY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOEL4MNEI#issuecomment-586729105,
or unsubscribe
https://github.com/notifications/unsubscribe-auth/AAI6HM27LOY3YQUEBGXNG7TRDFWYXANCNFSM4KURTI4Q.

@angieradtke
please correct atum template-rtl.scss

It should be

    [class*=' fa-'],
    [class^='fa-'],
    [class^='icon-'],
    [class*=' icon-'],
    [class^='#{$fa-css-prefix}-'],
    [class*=' #{$fa-css-prefix}-'] {
      margin: 0 -1.625rem 0 1rem;
    }

instead of

    [class*=' fa-'],
    [class^='fa-'],
    [class^='icon-'],
    [class*=' icon-'],
    [class^='#{$fa-css-prefix}-'],
    [class*=' #{$fa-css-prefix}-'] {
      margin: 0 -27px 0 27px;
    }

This will correct the Help and Options buttons (as well as other similar type of buttons)
from

to

Also, please modify _header.scss to

  .badge {
    position: absolute;
    top: 0.4rem;

    [dir=ltr] & {
      left: 50%;
      margin-left: 0.8rem;
    }

    [dir=rtl] & {
      right: 50%;
      margin-right: 0.8rem;
    }
  }

  .fa-angle-down {
    position: absolute;
    top: 0.9rem;

    [dir=ltr] & {
      left: 50%;
      margin-left: -1.8rem;
    }

    [dir=rtl] & {
      right: 50%;
      margin-right: -1.8rem;
    }
  }

in order to separate more the angle-down icon from the related icon and correct RTL

Before change

after change we will get for LTR

for RTL

Hi JM,

still the master of RTL .-)

 done - thank you .-)

Am 17.02.2020 um 08:29 schrieb infograf768:

@angieradtke https://github.com/angieradtke
please correct atum template-rtl.scss

It should be

|[class*=' fa-'], [class^='fa-'], [class^='icon-'], [class*=' icon-'],
[class^='#{$fa-css-prefix}-'], [class*=' #{$fa-css-prefix}-'] {
margin: 0 -1.625rem 0 1rem; } |

instead of

|[class*=' fa-'], [class^='fa-'], [class^='icon-'], [class*=' icon-'],
[class^='#{$fa-css-prefix}-'], [class*=' #{$fa-css-prefix}-'] {
margin: 0 -27px 0 27px; } |

This will correct the Help and Options buttons (as well as other
similar type of buttons)
from

Screen Shot 2020-02-17 at 07 29 03
https://user-images.githubusercontent.com/869724/74630514-08d0d900-515b-11ea-9700-08a8b5489806.png

to

Screen Shot 2020-02-17 at 07 57 10
https://user-images.githubusercontent.com/869724/74630585-2bfb8880-515b-11ea-94b6-9f3b0eb154f7.png

Also, please modify _header.scss to

|.badge { position: absolute; top: 0.4rem; [dir=ltr] & { left: 50%;
margin-left: 0.8rem; } [dir=rtl] & { right: 50%; margin-right: 0.8rem;
} } .fa-angle-down { position: absolute; top: 0.9rem; [dir=ltr] & {
left: 50%; margin-left: -1.8rem; } [dir=rtl] & { right: 50%;
margin-right: -1.8rem; } } |

in order to separate more the angle-down icon from the related icon
and correct RTL

Before change

Screen Shot 2020-02-17 at 08 24 34
https://user-images.githubusercontent.com/869724/74632166-0a040500-515f-11ea-9360-31ab4fece5f6.png

after change we will get for LTR

Screen Shot 2020-02-17 at 08 18 04
https://user-images.githubusercontent.com/869724/74631901-77fbfc80-515e-11ea-9e17-ae52d068bdd7.png

for RTL

Screen Shot 2020-02-17 at 08 17 40
https://user-images.githubusercontent.com/869724/74631924-84805500-515e-11ea-9ed4-06e212e06985.png

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
https://github.com/joomla/joomla-cms/pull/27918?email_source=notifications&email_token=AAI6HMZ6VGWE3ZNTRTD2BDLRDI4FTA5CNFSM4KURTI42YY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOEL5KWJA#issuecomment-586853156,
or unsubscribe
https://github.com/notifications/unsubscribe-auth/AAI6HM44UAJ6FBKGXLOIV5LRDI4FTANCNFSM4KURTI4Q.

?

adding gradients to the quickicons

changed side-nav

Probably not - what error are you getting

@infograf768 please let @angieradtke work on the template and leave the comments about code style until she is finished and then they can all be fixed in one go. Many automatically by the lint

Could you take a look at all the instances of transitions like .2s ease-in-out on the icons please

I find it very distracting that icons change on hover at a different time to the associated text. Either there should be no transition or the transition should be applied to the text as well as the icon

current

without any transition

That's great - thanks - can you look at the toolbar buttons as well please

@angieradtke to help make it clearer for people it's a draft you might change your title to
[4.0] [DRAFT] UX improvements admintemplate

thx @angieradtke

I spent a week working intensively with the autum-template.
At the beginning I had to understand the basic structure and setup.
I'm not very familiar with Git and I certainly made a lot of code style mistakes.
But I still hope that I could help.

I think the basis of the template is quite good, otherwise I wouldn't have been able to make so many adjustments so quickly.

I would like to finish this pull request by now, because otherwise it gets too big and I don't know if I marched in the right direction at all.

This is primarily a proposal for the visual design
There are still many views to be edited and adjusted.

It is certainly important for many uninvolved people to know that the color is controlled by variables and therefore customisable. The color of the header can be changed as well as the color of all links. etc. This should be communicated to steer the discussions about colors in the right direction.

It is important now to decide together on a basic colour concept that creates the broadest possible consensus. I think blue is always good.
However, when choosing the colour shade, we have to keep the colour contrasts ( Accessibilty) in mind. I have now made a proposal here, which is to be checked for approval.

When designing the input fields, I am not sure about the choice of borders and boxshadows. We need a good balance between lightness and enough contrast.
It's not that simple. To keep us flexible here, we find both values as variables.

I couldn't take a look at al views yet and have worked on the top level first. What bothers me now is the unsightly display of the error messages. But this can be changed first when the HTML output is unified. Sometimes the code comes from the php-File sometimes from the JS.
I would like the surrounding elements to be unified and only output when they are needed. Afterwards I think it would be very important to revise the media manager.

Basically all files should be checked for missing or unnecessary variables. This can become quite complex. I hope I could help for now and thank Brian for his input.

I want to merge this PR as fast as possible, I know there are issues and we might break things on other plances, but I do think that we can work better parallel when we merge the state we have now. So if someone sees big show stopper, we have to fix before I merge this, please let me know.

In the meantime I will have a look why the test are failing.

if someone sees big show stopper, we have to fix before I merge this, please let me know.

I am still not in favour of changing the switcher back to two buttons. I would be much happier if that was removed from here and dealt with as a separate issue.

I want to merge this PR as fast as possible, I know there are issues and we might break things on other plances, but I do think that we can work better parallel when we merge the state we have now. So if someone sees big show stopper, we have to fix before I merge this, please let me know.

The same was done with the last major update of this template. Atum CSS is full of redundant rules, with every iteration just adding more CSS with little consideration for the CSS codebase as a whole. I'm not saying this PR is the same but I know in the last major PR, a fraction of these made redundant rules were pointed out. The PR was merged regardless, using the same excuse, them same redundant rules are still there.

them same redundant rules are still there.

I wrote that as well and everybody would be thankful if you can clean it up with your expertise

As this template PR is 99% scss and not rewriting the php (again) there really isn't such a big rush to merge it. Anyone can take @angieradtke branch and submit pull requests there so that it is really great when it is merged here. (I know that's what I have been doing)

this

RTL bug:
The select-bg.svg has been modified, but not the select-bg-rtl.svg one.

Therefore we get for LTR

and for RTL

Here is a corrected rtl file

select-bg-rtl.svg.zip

we could add to the rtl.svg the code preserveAspectRatio="xMinYMin meet" which I forgot in the file above.

@infograf768 @brianteeman now I did something wrong merged what I don't want merge????

As this template PR is 99% scss and not rewriting the php (again) there really isn't such a big rush to merge it. Anyone can take @angieradtke branch and submit pull requests there so that it is really great when it is merged here. (I know that's what I have been doing)

I want to allow to work in parallel and not let anyone work on this branch, smaller changes are better to discuss and I belive we would processing faster.

All of that can be done on a different branch or on angie's fork

Not aligned.

its the padding on the selects being different when it is using choices.js

Hi Guys,

I don't know what do do now, waiting .....

Should we test this PR or will it merged direclty?

@angieradtke You mean you have finished works? If so, just remove the "[WIP]" from the title of this PR and post back here that it is ready for test, and then we test it.

Or is there still something to do and you wait for advise?

Ah and @rdeutz wanted to have a look why Drone tests are failing.

We talked about this PR in a meeeting about the Beta blockers and we decided to pull some things out of this PR, fix testing and merge it then. Plan is to do this over the weekend.

@rdeutz This weekend or next weekend?

this, so today or at least tomorrow

this, so today or at least tomorrow

Roberts weekend starts on Friday and ends on Monday ;-)

woohooo

?

No tests required anymore?

@rdeutz The changes of fas to fa class prefix for fontawesome should be reverted, see PR #27657 .

oh gawd PLEASE don't undo what I've started

@rdeutz The changes of fas to fa class prefix for fontawesome should be reverted, see PR #27657 .

oh gawd PLEASE don't undo what I've started

Could you point me to the change? didn't found it at a quick look

@rdeutz The changes of fas to fa class prefix for fontawesome should be reverted, see PR #27657 .

oh gawd PLEASE don't undo what I've started

Could you point me to the change? didn't found it at a quick look

@HLeithner Is resolved since a while.

Then I'm late to the party^^ thx richard

Why does the core backend template have template overrides? Surely the is the road towards a maintainers nightmare?

it is - and it really shouldnt - the searchtools one has already been pulled

@C-Lodder see #28052