Admin Theme Canvas

[jploch]

Admin Theme Canvas

A minimal admin theme with optimised page editor UI, based on Uikit 3.
Currently this is close to stable, but users are advised to be cautious and test thoroughly.
This theme is tested in all major Browsers including IE 11, Edge (>85), Chrome (>85), Firefox (>81), Safari (>11).

If you find any bugs or have ideas for improvements, feel free to post your feedback.

Download from Github
Download from Modules Page

Features

• Minimal black and white admin theme
• Fixed masthead navigation
• Direct access to page tree navigation inside page dropdown
• Less distraction for editors (when editing a page, the tabs are displayed as a dropdown menu inside the main navigation)
• Options to customise the ui

Less distraction for editors

Direct access to page tree navigation inside dropdown

Page tree

Options to customise the ui

Login (inspired by AdminThemeBoss)

Requirements

Process Wire 3.0.100 or greater

Installation

1. Go to “Modules > Site > Add New“
2. Paste the Module Class Name “AdminThemeCanvas“ into the field “Add Module From Directory“
3. Click “Download And Install“
4. On the overview, click “Download And Install“ again…
5. On the following screen, click “Install Now“
6. Go to your user profile page and change the theme to Admin Theme Canvas

[adrian]

@jploch - this really does look very nice - much cleaner and more professional. I really appreciate the hard work that's gone into it and I would love to use it, but unfortunately for me it always comes back to the fact that themes in PW tend to end up out of date when Ryan applies fixes and new features so I find it's just not worth the risk. Am I the only one that feels this way?

[elabx]

34 minutes ago, adrian said:

Am I the only one that feels this way?

Feel a bit this way too. 

[jploch]

On 11/23/2020 at 8:07 PM, adrian said:

@jploch - this really does look very nice - much cleaner and more professional. I really appreciate the hard work that's gone into it and I would love to use it, but unfortunately for me it always comes back to the fact that themes in PW tend to end up out of date when Ryan applies fixes and new features so I find it's just not worth the risk. Am I the only one that feels this way?

My theme is still extending the default admin theme and updating uikit is not a big deal, however changes to admin theme uikit php files would need to be done manually. I cloned the admin theme uikit to have more control of the markup. I plan to support this if people are interested, Iam using it for all my new sites. 

A version that extends the uikit theme like admin theme boss does would then rely on Javascript and CSS to manipulate the dom right? Using a hook could be an option. Maybe someone better with hooks could colaborate ?

[adrian]

4 minutes ago, jploch said:

Using a hook could be an option

I don't honestly know if there are enough things hookable to make the changes you have implemented. tpr has changed a lot of functionality with the AOS module, so lots can be done, but I don't think it's necessarily easy. I expect it might be more JS than PHP to achieve what you want which seems a bit inefficient for this.

[jploch]

Thats a bummer. The changes to the orginal theme php files are minimal (2 files, and a few lines of code have actually changed), they enable me to change the main navigation into left and right with dopdown positions working (On the left the page related navigation and on the right the rest). The tree rendering in the page nav and all other changes are already done using jquery/js and css only (e.x. triggering the ajax button and moving the page tree inside the first level of the page navigation), Iam still using the same for each loops in php, the default theme is using.

With the dropdown problem solved (they need special classes to trigger javascript to set the positions) I think it would be possible to make this js/css only and just extend the original uikit theme like admin theme boss is doing it. But that would be a challenge

Edit: @adrian Does that mean you always stick with the default theme, because of potential compatibility issues? I'm just curious what the best practice is. I might go the route and make this js/css/less only and extent the original theme. But what would happen when Ryan applies changes to the original uikit theme php files, that could also break my theme. Having a copy of these files, at least makes sure my theme is not breaking when changes are applied to the original theme. These changes would have to be merged to my theme, but at least its still working. Also there is always the option to just change back to the original theme, when you are not happy with the features, with just a click on the admin profile page. So far I never had any compatibility issues with updating the core, thank to PWs well crafted architecture. But its a very valid point I want to make this as future proof as possible. My experience with PW is also that changes to the core admin themes are not that frequent, but of course it could happen.

[adrian]

22 hours ago, jploch said:

Does that mean you always stick with the default theme

Yes, I always stick with the default (Uikit theme). You're correct that things don't change that much in the theme files, so long as you're happy keeping track of those and updating then you should be fine - it's just an extra hassle that I am not willing to deal with, but that doesn't mean others shouldn't change themes if they're willing to deal with the possible downsides.

[flydev]

Super theme ?

A simple tips. If you are using - the must have module - BreadcrumbDropdowns from @Robin S, it will work with this theme once you put this config line in the module config :

AdminThemeCanvas::renderBreadcrumbs

?

[adrian]

4 hours ago, flydev ?? said:

the must have module - BreadcrumbDropdowns

Completely agree - it's a must on every site.

[d'Hinnisdaël]

Looks great! Thanks for releasing this as a public module.

Does this theme do away with all colors? How does it handle warnings and error states?

[jploch]

On 12/4/2020 at 11:30 PM, d'Hinnisdaël said:

Looks great! Thanks for releasing this as a public module.

Does this theme do away with all colors? How does it handle warnings and error states?

Thx! Warnings will display with a yellow (#ffe299) and errors wth a light red (#f8ada5) background

[flydev]

Just a small issue with TracyDebugger installed. 

[jploch]

22 hours ago, flydev ?? said:

Just a small issue with TracyDebugger installed. 

@flydev ?? you are right, I also noticed this. You can temporarily close tracy with the small arrow to make the save button visible again, but it's inconvinient. I might make the position of the save button configurable via the module settings. Since I also removed some of the save options (like save and next) for a simpler UI, this could also be an option. Not sure how others feel about the old save dropdown functionality, but I always felt it was to complicated and I never used it.

[flydev]

Yes thanks, and got his glitch too on ui-button :

[jploch]

40 minutes ago, flydev ?? said:

Yes thanks, and got his glitch too on ui-button :

I never used Padloper, so not sure what is causing this, but Iam happy to accept a pull request. Or you can post the css to fix this here and I will update as soon as I find some time.

[flydev]

1 hour ago, jploch said:

I never used Padloper

It's not tied to only PadLoper but to ProcessModule in general. For example, Profiler has the same issue with this theme.

[jploch]

@flydev ?? still can't reproduce this. The modules I tested so far seem to work. Where can I find this Profiler module you are talking about? Can you send me a classname or github link to a module with this bug?

[flydev]

No sorry, it's a pro module. I can try to something with the css to see if we can fix that.

 

[flydev]

/** this fix seem to fix everyting **/
.InputfieldContent .pw-table-responsive {
  margin: 0 0 10px;
}

 

 

 

 

@jploch @adrian 

About the Save button on the bottom right, if could TracyDebugger set a class on the body - 'has-tracy-on' - we could override the save button position only if TracyDebugger is present.

 

 

 

[jploch]

@flydev ?? I just pushed an update. Can you try the latest version (0.12) and see if it fixes the issue?

[flydev]

Thanks, can you force update the modules directory ? (I am lazy sorry)

[jploch]

30 minutes ago, flydev ?? said:

About the Save button on the bottom right, if could TracyDebugger set a class on the body - 'has-tracy-on' - we could override the save button position only if TracyDebugger is present.

that would be a good solution.
maybe @adrian can implement this in tracy someday ?

4 minutes ago, flydev ?? said:

Thanks, can you force update the modules directory ? (I am lazy sorry)

done ?

[flydev]

merci, it's fixed ??

[adrian]

6 hours ago, jploch said:

Not sure how others feel about the old save dropdown functionality, but I always felt it was to complicated and I never used it.

Personally I don't use it that often, but when the need arises, it's actually a really nice timesaver, so I wouldn't want to be without it.

[adrian]

1 hour ago, flydev ?? said:

About the Save button on the bottom right, if could TracyDebugger set a class on the body - 'has-tracy-on' - we could override the save button position only if TracyDebugger is present.

I haven't tried this theme yet, but I am assuming the issue is that the save button is floating? Wouldn't that put it on top of input fields sometimes meaning that you need to scroll to see everything? Sorry if I am not picturing how it works.

Anyway, if that's the case and you are planning on keeping that behavior, then I can add a class to the body like you suggest - let me know. One thing to note of course is that Tracy can sometimes have many bars down there - sometimes, the regular, a couple of redirects, plus three ajax bars. The number of ajax bars is also configurable so someone could potentially choose to show more than that - I just wonder if this will make positioning tricky?