Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Wishlist and suggestions for the Craft 3 control panel #2883

Closed
marflow opened this issue May 14, 2018 · 46 comments
Closed

Wishlist and suggestions for the Craft 3 control panel #2883

marflow opened this issue May 14, 2018 · 46 comments
Assignees
Milestone

Comments

@marflow
Copy link

@marflow marflow commented May 14, 2018

So somebody is nagging about the Craft CP again …

Comparing Craft 2 and 3 CPs – I think we have lost quite a bit of friendliness and „softer“ design details. Craft 3 makes better use of available space, but with the narrow head area, the main content area framed by the dark blue main nav and a still dark right details sidebar, it looks more technical and a less welcoming (at least to me).

Here´s a short list of suggestions. I´ve put this together using the great Control Panel CSS plugin (thank you for making this @lindseydiloreto!).

craft3_cp_suggestions

Head area / Details sidebar

The head area would benefit from some extra vertical space I think. Also, there are many different baselines for Site name, user, breadcrumbs, and entry title. Maybe that could be cleaned up so that Site name and user on the left and breadcrumbs and entry title on the right share the same top line and baseline respectively. (Or the user could be moved to the bottom like in Craft 2, which would also make it less busy at the top.)

Also, I am missing the red title and wonder if we can get it back? It´s a small splash of color but makes the header or titles stand out and the CP less monochromatic but richer and more pleasant.

This is my major issue: I am at odds with the position of the revision button right after the title, and the centered Live Preview and Share buttons. All three are jumping around from title to title. I think it would be much cleaner and spacious if Preview and Share sat next to the Save button on the right. As for the Revision button – would that not belong somewhere inside the right details bar next to the various entry dates? I would definitly prefer it there. Also it should not show up at all, if I don´t make revisions available to clients.

Lastly, I find the layout even calmer, if the head area and details sidebar are white for the most part. With the current blue, the sidebar looks like a „read-only“ area on total, when in fact clients are supposed to make edits. The vertical line would be enough separation for me.

Main container

If using the white background, changing the font weight to bold adds attention to active tab.

For input, text area and redactor fields, adopting the 2px border radius from the buttons would make the design a little softer. Also the focus for input and text area is a black outline, for Redactor it is blue. Maybe a blue focus border for all fields would be friendly. (Blue is already the hover color for the tabs.)

Redactor also should use the system typeface to make it look like the original Craft fields.

The matrix button group for adding matrix blocks has a high top margin so it sits too far way from the matrix field label. Setting the margin to 0 looks right and in accordance with the (first) added matrix block.

Finally, to me the asset field type when set to large thumbnails is not ideal. The distance from the image to the label and its file name and the left and right border changes depending on the image orientation, since the thumbnails is loaded in a square 100px box. With only one image loaded, this looks a bit off. Maybe a light grey border would „explain“ what´s going on, or the thumb and asset name could move up for landscape, and assets left for portrait images?

Another question regardiing this field: If the thumbnails are large, the file names are shortened because of the 100px „wide" col. Does the file name then make sense at all, or should it dropped completely and be replaced by two buttons („x" Delete and „i“ Info?). The info could open the image element editor with file name, etc.

Final peanut

The Craft version in black does looks a bit harsh to me. A lighter or darker blue would melt it in more.

What do people think – if this is just me I´ll shut up ;)

And If somebody wants to try the suggestions it easy to do with the free Control Panel CSS plugin and the attached css file. (If you would like to see it with the original light blue header and tabs area you can comment out the white background for „body“ and "#main-container #main #header“.)

craft-cp-modifications.css.zip

@croxton

This comment has been minimized.

Copy link

@croxton croxton commented May 14, 2018

A noticeable improvement I think. I added this rule to give the details sidebar a light background grey, which I think helps keep it separate from the main content editing area:

#main-container #main #main-content #details {
    background: #F1F5F8 !important;
}
@lindseydiloreto

This comment has been minimized.

Copy link
Contributor

@lindseydiloreto lindseydiloreto commented May 14, 2018

I love this suggestion...

I think it would be much cleaner and spacious if Preview and Share sat next to the Save button on the right.

And these are nice too...

If using the white background, changing the font weight to bold adds attention to active tab.

Redactor also should use the system typeface to make it look like the original Craft fields.

@philipboomy

This comment has been minimized.

Copy link
Contributor

@philipboomy philipboomy commented May 14, 2018

Styling is very subjective (believe thats the right term) but I prefer the cleaner look as shown in the example above over the current look in the admin panel in Craft 3

@marflow

This comment has been minimized.

Copy link
Author

@marflow marflow commented May 15, 2018

@croxton Maybe some contrast would not hurt. If a light one would be enough, in the left sidebar in /admin/entries there is one that could be used to unify things (s. below).

Thanks everybody for taking the time and look at this, and thank you P&T team for considering what´s in line with your plans!

craft_sidebars_light_blue

@carlcs

This comment has been minimized.

Copy link
Contributor

@carlcs carlcs commented May 16, 2018

The details pane already got a lighter color in Craft 3.0.8, and Redactor fields now use the CP’s font stack as of version 2.1.0 of the Redactor plugin.

@KatieMFritz

This comment has been minimized.

Copy link
Contributor

@KatieMFritz KatieMFritz commented May 21, 2018

I would love to see more contrast in the control panel, to meet WCAG 2.0 contrast requirements. Maybe a high-contrast theme option, if you don't want to change the default. 🙂

@KatieMFritz

This comment has been minimized.

Copy link
Contributor

@KatieMFritz KatieMFritz commented Jun 15, 2018

@brandonkelly Would you be interested in a PR for a AA-compliant CP theme? Maybe @lindseydiloreto could help too.

@brandonkelly

This comment has been minimized.

Copy link
Member

@brandonkelly brandonkelly commented Jun 15, 2018

Sure!

@lindseydiloreto

This comment has been minimized.

Copy link
Contributor

@lindseydiloreto lindseydiloreto commented Jun 17, 2018

Sounds great! But don't bank on a contribution from me, unfortunately... I'm very much a programmer, with little to no design skills. I also know nothing about AA compliance.

Perhaps @carlcs or @marflow want to lend their expertise?

To be honest, it sounds like you could just release "AA Compliance" as a theme-only plugin. That way, folks who care about compliance can just download the plugin and get their theme adjusted automatically.

@brandonkelly

This comment has been minimized.

Copy link
Member

@brandonkelly brandonkelly commented Jun 18, 2018

We do want Craft to be as AA-compliant as possible out of the box, so the PR would be welcome. If aspects of it seem like they’d be undesired, we could consider adding a user preference(s) to toggle it.

brandonkelly added a commit that referenced this issue Jun 18, 2018
- Text inputs: 2px border radius, blue hover border
- Global sidebar: dark hover BGs, lightened edition logo
- Global header: increased height, increased crumb font size, darkened BG
- Tabs: no more hairlines in between each tab
- Details pane: same BG as background, increased top padding

Inspired by some suggestions in #2883
@brandonkelly brandonkelly added this to the 3.4 milestone Nov 17, 2019
brandonkelly added a commit that referenced this issue Nov 17, 2019
@brandonkelly

This comment has been minimized.

Copy link
Member

@brandonkelly brandonkelly commented Nov 17, 2019

👀 Update: The input styles have changed. See #2883 (comment) for updated screenshots.


Excited to say that this is now resolved for the upcoming 3.4 release, which will introduce lots of visual refinements across the whole Control Panel.

  • There is now a consistent color palette to work from, and the (blue-)greys are now a bit more saturated than before.
  • Added a new global header, and moved page breadcrumbs and the user account menu into it.
  • Added gaps between/around the main content area and the details pane, more like Craft 2.x.
  • Page sidebars no longer have any chrome.
  • The full page is scrollable now, and the page header, sidebar, and details pane will get fixed-positioned on scroll.
  • Built-in tables no longer collapse for smaller screens; they just scroll horizontally now. (#2731)
  • Tabs no longer shrink to fit; now any excess tabs will be placed in an overflow menu. (#3073)
  • Improved browser performance and responsiveness.
  • Fixed a couple browser bugs including #3874.

The Entries index page in Craft 3.4

An Edit Entry page in Craft 3.4

A tab bar with an expanded overflow menu

To help test, change your craftcms/cms requirement in composer.json to:

"require": {
  "craftcms/cms": "3.4.x-dev",
  "...": "..."
}

Then run composer update.

Plugin devs: If your plugin has any custom styling, you will probably need to adjust some things to make it feel right. (We have some work to do on Redactor, as you can tell from the screenshot:) I’ve just pushed v3.4.0-alpha.1 to our craftcms-sass npm package, which you can use to pull in all the latest colors and component styles. If something looks visually broken to you, please let me know and I’ll try to address it in core.

@aaronbushnell

This comment has been minimized.

Copy link
Contributor

@aaronbushnell aaronbushnell commented Nov 17, 2019

This looks great, @brandonkelly! Really like the tab ellipses addition.

One request: Some of the input fields look like they’re in a “disabled” state. The search input and Title field, for instance, appear like they may not allow input.

I think those ought to remain white but that’s just my two cents. Changes are looking great though! 😊

@tomdeleu

This comment has been minimized.

Copy link

@tomdeleu tomdeleu commented Nov 17, 2019

The details page design is a nice improvement, minus some UX issues like @aaronbushnell says (fields look disabled)

But not the biggest fan of the area between the main nav left and the white panel in the new list page design. Looks a bit "unfinished" to me. I do understand the need to make it look a bit less "technical" but that area could use some extra love in my opinion.

(my 2 cents, as design can be highly personal of course)

@timkelty

This comment has been minimized.

Copy link
Contributor

@timkelty timkelty commented Nov 17, 2019

One request: Some of the input fields look like they’re in a “disabled” state. The search input and Title field, for instance, appear like they may not allow input.

FWIW, I'm a fan for totally moving the title field to avoid the awkward behavior that currently exists with the title remaining as you change tabs:

@baronetto

This comment has been minimized.

Copy link

@baronetto baronetto commented Nov 17, 2019

Overall this is a great improvement over the previous iteration. The end result feels cleaner and easier to navigate visually! If I may humbly add a couple of comments:

  • +1 for What @aaronbushnell mentioned. Coloring the inputs is strongly tied to a "disabled state"
  • The padding around the list of entries seems unnecessary and makes the header of the table appear somewhat "detached". This visually results in a container within a container look that looks unintentional. Perhaps the header of the table shouldn't have a background fill since the typography can sufficiently make it visually distinct from the entries?
@marflow

This comment has been minimized.

Copy link
Author

@marflow marflow commented Nov 17, 2019

Really happy with the re-design! Overall it looks less technical, more light-weight and friendly.

Also, I would like to add another +1 to the comment form @aaronbushnell on the background color of the fields. They seem disabled already on the login screen. Also, the background from text fields of revisions are turning from white to blue, which means disabled in that context.

@mattstein

This comment has been minimized.

Copy link
Contributor

@mattstein mattstein commented Nov 17, 2019

One request: Some of the input fields look like they’re in a “disabled” state. The search input and Title field, for instance, appear like they may not allow input.

I agree with this being problematic, but also wonder if it could be solved by bringing back the thin shadows that visually lift those elements. (Just like the Redactor buttons in the second screenshot.)

@brandonkelly

This comment has been minimized.

Copy link
Member

@brandonkelly brandonkelly commented Nov 17, 2019

I agree with this being problematic, but also wonder if it could be solved by bringing back the thin shadows that visually lift those elements.

There are some very subtle inner shadows in the text fields already, and I wonder whether darkening them will help.

Username and Password fields on the Login page

A search input

A Title field input

(Keep in mind too that both the Search input and Title input are focussed when these pages are initially loaded, so the focused state + blinking text cursor should also help avoid the impression that the fields are disabled.)

The darker shadow change has been pushed up (c6eefc4). Follow the instructions in my previous comment to update to Craft 3.4, and if you already did, just run composer update again to pull in that change.

(BTW these screenshots can be a little deceiving so please hold your judgement until you’ve updated ;)

The padding around the list of entries seems unnecessary and makes the header of the table appear somewhat "detached". This visually results in a container within a container look that looks unintentional. Perhaps the header of the table shouldn't have a background fill since the typography can sufficiently make it visually distinct from the entries?

@baronetto Yeah… I did play with removing the padding but couldn’t get it to look right, especially since there’s also the thumb view to consider when viewing users and assets. And the BG color in the table header makes more sense when the results are being sorted by one of the columns. I felt the sorted heading looks a lot better when the other headings have a slight background to them.

A table heading row with the Post Date column selected as the sort option

@mattstein

This comment has been minimized.

Copy link
Contributor

@mattstein mattstein commented Nov 17, 2019

I commented too quickly and meant to respond to the flattened menus and buttons.

The "sunken" text inputs (with darkened focus) seem clear; I'm wondering if menus/buttons (Current, Preview, Share) are immediately identifiable as interactive elements compared to the visually-similar entry timestamp panel. A thin sliver of shadow used to more clearly distinguish between the two, and it seems like they're nearly identical except for a hover state.

@timeverts

This comment has been minimized.

Copy link

@timeverts timeverts commented Nov 18, 2019

I miss the dotted bottom borders on the element/entry index listings. This was a big help, particularly when viewing on high resolution screens where you had lots of listing columns. But rather than add borders back, perhaps tiger striping might be a more suitable technique to fit with the new style?

@alexjcollins

This comment has been minimized.

Copy link

@alexjcollins alexjcollins commented Nov 18, 2019

Really fond of these updates 👏! Especially the entry edit page returning to a more pre-Craft 3 feel.
I agree with the comments above about the potential for the buttons and inputs to be interpreted as disabled. I also think that the controls should sit within the table element on the element index, for the following reasons;

  • better context to the UI it is affecting
  • simply updating the dropdown elements to white (or any other colour) is less visually jarring (screenshot for comparison) and;
  • Bonus: the checkboxes line up

Based on that, maybe something like the below would work?
Element Index

Comparison screenshot:
Element Index Alt

@jan-dh

This comment has been minimized.

Copy link

@jan-dh jan-dh commented Nov 18, 2019

First of all: Great job!

Some feedback:
I don't like the dark input fields and for these reasons:

  • The don't look & feel like input fields (to me at least), don't really see any reason to make these fields "harder" to scan for authors? They look more like disabled fields (again, to me).

A thought:

  • While I like the design a lot more then the current one and I do think it's more clean, I'm a bit worried of dropping some of the usability in favour of styling.

Edit: will take this for a spin tonight to try and adjust some of these points.

@kaspar-allenbach

This comment has been minimized.

Copy link
Contributor

@kaspar-allenbach kaspar-allenbach commented Nov 18, 2019

Bildschirmfoto 2019-11-18 um 09 55 18

I really like that the meta content panels on the right are toned down and therfore the main content fields stand out much more.

Great job!

@croxton

This comment has been minimized.

Copy link

@croxton croxton commented Nov 18, 2019

Overall, loving the changes. My only reservation would be the text input field background grey looks a little dark, and for consistency the same background colour and border radius should also be used for the WYSIWYG editor field. How about this?

craft34-mock

@jan-dh

This comment has been minimized.

Copy link

@jan-dh jan-dh commented Nov 18, 2019

Installed it locally

  • everything looks way to dark (and blue!) imo
  • entries are "floating" into space
@mattstein

This comment has been minimized.

Copy link
Contributor

@mattstein mattstein commented Nov 18, 2019

@alexjcollins I was thinking similarly to your first mockup, but only using that thin sliver of shadow without changes to the button color or stroke. That way the visual balance of each layout could be maintained but there'd be some indication (without hover) that the element is interactive.

Screen Shot 2019-11-18 at 9 11 14 AM

@jan-dh

This comment has been minimized.

Copy link

@jan-dh jan-dh commented Nov 18, 2019

Tried something with a little lighter tone and a little less blue:
entry

@brandonkelly

This comment has been minimized.

Copy link
Member

@brandonkelly brandonkelly commented Nov 18, 2019

Here’s where I ended up with the input styles:

The Entries index page

An Edit Entry page

What’s changed:

  • Text inputs and checkboxes now have identical styling, with a border, light background color, and light inner shadow; and a darker border on focus. (Similar to what @croxton suggested.)
  • Checkboxes are a bit larger now.
  • Button backgrounds and text inputs’ borders are now semitransparent so they look pretty good on both white and lightly colored backgrounds (whereas previously I was redefining their colors for different backgrounds).
  • I’ve updated Redactor locally with the new styling.

I also think that the controls should sit within the table element on the element index

@alexjcollins Yeah I toyed with both options, but decided I like the look of the toolbar separated from the main content area better, as it is more of a heading for the content.

@timeverts

This comment has been minimized.

Copy link

@timeverts timeverts commented Nov 19, 2019

@brandonkelly , would you consider using tiger striping (i.e. alternate row background colours) on the items in the element index listing? Perhaps rotating between white and a very light grey or something like that.

@brandonkelly

This comment has been minimized.

Copy link
Member

@brandonkelly brandonkelly commented Nov 19, 2019

@timeverts Shouldn’t be necessary; the rows get a light background color as you hover over them.

@RoOLeary

This comment has been minimized.

Copy link

@RoOLeary RoOLeary commented Nov 19, 2019

@brandonkelly looks awesome, can't wait

@huelabs

This comment has been minimized.

Copy link

@huelabs huelabs commented Nov 19, 2019

From a designer's perspective, this UI feels way more focused. My eye is led to all the right places so I believe this is a major improvement. I do like the contrast values, however, I have to say the blue tone does make the UI feel cold and slightly uninviting. I think converting this theme to gray values would be the safest bet. Overall, excellent work!

@KatieMFritz

This comment has been minimized.

Copy link
Contributor

@KatieMFritz KatieMFritz commented Nov 19, 2019

Nice work, @brandonkelly! How are the contrast ratios compared to WCAG 2.1 AA?

I know I offered a high-contrast PR long ago, when I was young and innocent, and then never delivered... 😬

@brandonkelly

This comment has been minimized.

Copy link
Member

@brandonkelly brandonkelly commented Nov 21, 2019

@KatieMFritz Contrast ratios are about the same as before. We are planning a High Contrast Mode for Craft 4 though ;) Follow #3293 for updates on that.

@baronetto

This comment has been minimized.

Copy link

@baronetto baronetto commented Nov 21, 2019

@brandonkelly Thank you for the reply! I just wanted to post a screenshot regarding my comments about the container. It would also allow the header to stay pinned at the top and allow the checkbox to stay aligned with the rest.

69087897-d1d41580-09fb-11ea-9a1c-db1c4c0f65de

@brandonkelly

This comment has been minimized.

Copy link
Member

@brandonkelly brandonkelly commented Nov 22, 2019

@baronetto How do you envision that to look when viewing users or assets in thumbnail view?

@baronetto

This comment has been minimized.

Copy link

@baronetto baronetto commented Nov 22, 2019

@brandonkelly In thumbnail view the table header would have to hide, leaving only the checkbox that allows the user to select all items. In the table view I posted, the position of that checkbox inside the table header would be enough to imply its functionality but in the thumbnail view there would be a need for a text label. I'm posting a couple of screenshots for the suggested layout:

thumbs

@baronetto

This comment has been minimized.

Copy link

@baronetto baronetto commented Nov 22, 2019

@brandonkelly In the first layout, the header could also be used for additional view options such as changing the size of the thumbnail, toggling additional metadata (image size, volume type, user group etc.)

@brandonkelly

This comment has been minimized.

Copy link
Member

@brandonkelly brandonkelly commented Nov 23, 2019

@baronetto Good call. Just made those changes (83d27a3). Other table panes in the CP have been updated as well.

The Entries index page

The Assets index page

The Sections index page

@bencroker

This comment has been minimized.

Copy link

@bencroker bencroker commented Nov 23, 2019

@brandonkelly You probably already know this, but the element index header is no longer sticky, meaning that it disappears out of view when you scroll down the list of elements. Otherwise I'm loving the UI improvements!!

@brandonkelly

This comment has been minimized.

Copy link
Member

@brandonkelly brandonkelly commented Nov 24, 2019

Yeah I’m aware, but it didn’t really feel necessary anymore since there’s not as much scrolling these days thanks to pagination.

@baronetto

This comment has been minimized.

Copy link

@baronetto baronetto commented Nov 24, 2019

@brandonkelly Wow! I'm so glad these changes made it to the next version 🎉 +1 for the sticky header :) It's true pagination makes less it necessary but it can be often useful in case the columns display similar values and the same space could be used as a toolbar in thumbnail views.

@brandonkelly

This comment has been minimized.

Copy link
Member

@brandonkelly brandonkelly commented Nov 24, 2019

Alright… I just moved the page toolbar into the page header, which both looks better and brings back the fixed toolbar.

The Entries index page

The Entries index page, scrolled down a bit

@rynpsc

This comment has been minimized.

Copy link
Contributor

@rynpsc rynpsc commented Nov 25, 2019

I think the padding around the select all checkbox looks a little unbalanced when in its hover state or when the proceeding column is highlighted. Either padding-right could be increased to match padding-left (24px) or set both padding-left and padding-right to 16px which would make th.checkbox-cell.selectallcontainer.orderable equal in width and height.

The spacing between the table rows and footer also could be reduced from 24px to 1px to tighten things up.

element-table-current
element-table-new

@narration-sd

This comment has been minimized.

Copy link
Contributor

@narration-sd narration-sd commented Nov 25, 2019

just some kudos -- the result is looking noticeably nicer, on my non-ips ok-but-not-better laptop screen.

@brandonkelly

This comment has been minimized.

Copy link
Member

@brandonkelly brandonkelly commented Nov 26, 2019

@rynpsc Appreciate the feedback but both of those were intentional.

@narration-sd Glad you’re liking it!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
You can’t perform that action at this time.