Jump to content

New blog post: Continuing work on new admin theme framework


ryan
 Share

Recommended Posts

Last week we looked at progress on a new admin theme framework for ProcessWire. This week we’ll do the same, as development continues to move forward and we have a lot more screenshots to share (though keep in mind this is largely un-themed/stock).

https://processwire.com/blog/posts/continuing-work-on-new-admin-theme-framework/

  • Like 17
Link to comment
Share on other sites

Great to see uikit framework with processwire admin panel. Great job @ryan ! I have a question for you.

Do you think to write a (uikit) icon picker admin panel, like font-awesome icon picker ? if your answer is yes for this question, can you make it compatible to use this icon picker with page editor also ?

  • Like 2
Link to comment
Share on other sites

I definitely like the per-field border-control. Can't say I'm a fan of the card view, but that's because material design (and derivatives thereof) has never been my thing. The colour-control on a per-field basis also looks quite nice. I wonder if you could also add the option to only set the border colour, so that the background remains white.

Great to see a new admin 'framework' coming into the picture. :)

  • Like 1
Link to comment
Share on other sites

Quote

Do you think to write a (uikit) icon picker admin panel, like font-awesome icon picker ?

We're going to be sticking with Font Awesome as our icon set. While Uikit comes with its own SVG icon set (and one certainly can use those) the scope and quantity of them is pretty limited relative to Font Awesome. Previous versions of Uikit actually used Font Awesome as their icon set, but in Uikit 3 they switched to their own set. There just aren't enough of them to cover our needs, plus I'd prefer to stay consistent with icon usage. So not planning to implement any features specific to Uikit v3 icons at this stage. 

Quote

I definitely like the per-field border-control. Can't say I'm a fan of the card view, but that's because material design (and derivatives thereof) has 

As far as I know the Uikit cards aren't related to material design. They are a default styling that Uikit has for something that is visually offset in a different way. With the default styling that they've got, I've found the card view helpful when you get into nested Inputfield elements, as it makes it a little easier to visually identify the hierarchy vs. the completely flat look. I understand all-flat look is what's trendy right now, and my intention isn't to get into the design aspect at all. Though I appreciate that the Uikit folks recognize that there is a need for this kind of thing. So it'll be up to the people that get into the design side to interpret how one translates the card style in a Uikit theme. 

Quote

The colour-control on a per-field basis also looks quite nice. I wonder if you could also add the option to only set the border colour, so that the background remains white.

This one will also be open to interpretation in the actual theming process. I'm just trying to make the colors as obvious as possible at present. 

  • Like 4
Link to comment
Share on other sites

16 hours ago, ryan said:

As far as I know the Uikit cards aren't related to material design. They are a default styling that Uikit has for something that is visually offset in a different way. With the default styling that they've got, I've found the card view helpful when you get into nested Inputfield elements, as it makes it a little easier to visually identify the hierarchy vs. the completely flat look.

Sure, though I get the impression of material design as it seems to be popping up everywhere, which is why the association is made. I must say, though, the general impression of the docs site is 'material', but that's probably because of the colour they chose for the header -- so many administration framework themes are using colours similar to that.

The use of depth could well grow on me, but I would probably opt for smaller shadows. Perhaps this can be explored further down the line.

Link to comment
Share on other sites

Perhaps using indentation for nested fields could be more clear and space efficient instead including fields inside fields, what do you think? Or is such level of modification out of scope for now?

  • Like 1
Link to comment
Share on other sites

I like it, this new version of the admin theme is a step forward for Processwire. I'm a space fan in the design, I like when the user interface can breathe a lot, but I think it's too white or too "light" now, it's hard to see on a 27-inch monitor.

I would like the color of the header bar, buttons hover and other small details can be configured in the administration, as well as the logo (keeping the height) to match the brand of our customer, this will be a great advantage. Of course the Processwire identity is maintained in the footer. I think the default color may match the Processwire website that I like and it's refreshing. The developer can customize with parameters in the administration, this can be achieved using a small css file with color codes to override some elements and this file can be generated when the profile page is modified.

I was modifying some screens directly with the Chrome Inspector and this is the result. I made adjustments in the background tones, margins, colors, hiding elements like lines, etc. For example, the help paragraph that is always visible, it would be nice to display it on demand with help icon or directly by activating them in the VIEW menu. Because it is useful the first few times you use Processwire, but when you learn it only occupies an unnecessary space.

 

restyle.png

help-bubble.png

branding1.png

branding2.png

pages.png

pages-by.png

  • Like 5
Link to comment
Share on other sites

5 hours ago, Pixrael said:

I'm a space fan in the design

Me too, however, I'm not a fan of it in the case of administration interfaces. I do not like scrolling around, I prefer to see all stuff possible right in front of my face :) I'm not saying whitespace should be eliminated, but people often work on 11''-13'' laptop screens and not on 27" desktop monsters ;) 

It would be nice to have some sort of whitespace settings and/or whitespace could adapt to the viewport size.

  • Like 1
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

  • Recently Browsing   0 members

    No registered users viewing this page.

×
×
  • Create New...