Jump to content

Reno Theme


Peter Knight

Recommended Posts

Another question. I try to tanslate the theme, but with no luck. I did add AdminThemeRenoHelpers.php for translation and added translations for strings I needed - the strings still appear in English. I can easilly translate strings from the core files like admin.php. What can it be?

Link to comment
Share on other sites

Hallo, Tom!

Could you please hide the profile link in the avatar dropdown for users without profile-edit permission like you did in footer?

Hi Ivan, nice catch.

I made that change. I'll sent a PR to Ryan in the next few days so he can include an updated version of Reno in the core.

In the meantime, you can update your copy. Just swap out the renderTopNav() method in AdminThemeRenoHelpers.php

    public function renderTopNav() {

        $items = array();
        $class = '';
        $user = $this->wire('user');
        $config = wire("config");
        $adminTheme = $this->wire('adminTheme');
        $fieldName = "avatar_field_" . $user->template->name;
        $adminTheme->$fieldName != '' ?  $avatarField = $adminTheme->$fieldName : $avatarField = '';
        $avatarField != '' ?  $imgField = $user->get($avatarField) : $imgField = '';
        $avatar = "<i class='fa $adminTheme->profile'></i>";

        // View site
        $items[] = array(
            "class" => "",
            "label" => "<i class='fa {$adminTheme->home}'></i>",
            "link" => $config->urls->root
        );

        // Search toggle
        $items[] = array(
            "class" => "search-toggle",
            "label" => "<i class='fa fa-search'></i>",
            "link" => "#"
        );

        // Superuser quick links
        if ($this->user->isSuperuser()){
            $items[] = array(
                "class" => "superuser",
                "label" => "<i class='fa fa-bolt'></i>",
                "children" => array(
                    "<i class='fa fa-life-ring'></i> " . $this->_('Support Forums')  => array('http://processwire.com/talk/', 'target="_blank"'),
                    "<i class='fa fa-book'></i> " . $this->_('Documentation') => array('https://processwire.com/docs/', 'target="_blank"'),
                    "<i class='fa fa-github'></i> " . $this->_('Github Repo') => array('https://github.com/ryancramerdesign/ProcessWire/', 'target="_blank"'),
                    "<i class='fa fa-code'></i> " . $this->_('Cheatsheet')  => array('http://cheatsheet.processwire.com', 'target="_blank"'),
                    "<i class='fa fa-anchor'></i> " . $this->_('Captain Hook')  => array('http://processwire.com/api/hooks/captain-hook/', 'target="_blank"'),
                )
            );
        }

        // Avatar field for user information
        if ($imgField != '') {
            $class = 'avatar';
            count($imgField) ? $img = $imgField->first() : $img = $imgField;
            $userImg = $img->size(52,52); // render at 2x for hi-dpi (52x52 for 26x26)
            $avatar = "<img src='$userImg->url' alt='$user->name' />";
        }

        // User information and logout link. Check for profile-edit permission below.
        $userItem = array(
            "class" => "avatar",
            "label" => "$avatar <span>" . $this->getDisplayName($user) . "</span>",
            "children" => array(
                "<i class='fa $adminTheme->signout'></i> " . $this->_('Logout') => $config->urls->admin . "login/logout/"
            )
        );

        // if user has profile-edit permission add and edit link to the userItem['children'] array.
        if ($this->user->hasPermission('profile-edit')){
            $profileEditLink = array("<i class='fa fa-user'></i> " . $this->_('Profile') => $config->urls->admin . "profile/");
            $userItem['children'] = array_merge($profileEditLink, $userItem['children']);
        }

        // add the userItem to the menu
        $items[] = $userItem;

        return $this->topNavItems($items);

    }

I'm not sure about the translation issue. I will try to look into it later today.

  • Like 4
Link to comment
Share on other sites

Hi Sradesign, 

Welcome to the forums. I agree with Mike, I'm not really sure why you would need Bootstrap.

Hi is simple because is way faster to code and add elements standard based on bootstrap and also because anyway I load bootstrap in my template for datatables and etc so is better the reno it self be bootstrap ready.

Link to comment
Share on other sites

Hi is simple because is way faster to code and add elements standard based on bootstrap and also because anyway I load bootstrap in my template for datatables and etc so is better the reno it self be bootstrap ready.

Hmm, no - I don't think so. What do you need to add to Reno? I don't understand the purpose of your request at all... And your templates having nothing to do with the admin panel...

:mellow:

Link to comment
Share on other sites

@Sradesign: Those are wonderful examples of what a custom admin theme for PW could look like. I do not think though that Tom should change his theme or incorporate any of it's parts including bootstrap. I am sure if you or me shall spare some time and actually produce the theme, it can under certain circumstances be included in the main PW branch as a third alternative. But it will actually be even simplier for it to just be distributed through modules directory (and it will save us from the need to keep it up to date :)). I can see some troubles using bootstrap though as not only the chrome but all input's markup should be rewritten for that purpose.

@renobird: I would like to ask your for a favour for PW community to share your knowledge about custom admin theme creating. If you could find some time and produce a little post with a tutorial on this topic it would be incredibly valuable, as Ryan's tutorial on this is rather outdated and probably no longer accurate. Personally, I am even more interested in creating not a complete admin theme replacement, but a theme with a limited functionality for non-superuser site editors.

  • Like 1
Link to comment
Share on other sites

@Sradesign: Those are wonderful examples of what a custom admin theme for PW could look like. I do not think though that Tom should change his theme or incorporate any of it's parts including bootstrap. I am sure if you or me shall spare some time and actually produce the theme, it can under certain circumstances be included in the main PW branch as a third alternative. But it will actually be even simplier for it to just be distributed through modules directory (and it will save us from the need to keep it up to date :)). I can see some troubles using bootstrap though as not only the chrome but all input's markup should be rewritten for that purpose.

@renobird: I would like to ask your for a favour for PW community to share your knowledge about custom admin theme creating. If you could find some time and produce a little post with a tutorial on this topic it would be incredibly valuable, as Ryan's tutorial on this is rather outdated and probably no longer accurate. Personally, I am even more interested in creating not a complete admin theme replacement, but a theme with a limited functionality for non-superuser site editors.

Exactly Ivan I'm looking for the same thing, see my goal is too have different type of admin that they have different access they see some custom page which is inside processwire admin structure now for any custom page you need to make eaither a process or use admincustompage with admin custompage you are ok but you can not have different field for each page and also you can not assign differnt user to just see that page, also for example I made a custom admin page using admincustompage module but I can not remove it from navigation for specific user role.

  • Like 1
Link to comment
Share on other sites

I made a custom admin page using admincustompage module but I can not remove it from navigation for specific user role.

You can, but it need some additional scripting. The below could be inside the init() of an autoload module. That would hide the pages you wish for the role my-role. Ps, the code here is not tested.

$this->addHookAfter('Page::viewable', function($event) {
    if (!$this->user->hasRole('my-role')) return;

    $exclude_ids = array(
        1234,
        2345,
        2323,
    );
    
    if (in_array($event->object->id, $exclude_ids)) {
        $event->return = false;
    }
});
  • Like 4
Link to comment
Share on other sites

  • 1 month later...

Hey Reno, with the new update removing the tree. The only way to access the page tree is by clicking the ProcessWire logo. It took me a while to figure this one out as I always went to Pages > Tree. 

With Pages > Tree now missing it might be worth doing: 

pHFvXtO.png

I know it's not as visually appealing so you may have a better idea Reno.

  • Like 3
Link to comment
Share on other sites

  • 2 weeks later...

When I add a new admin tab (a new Page under the Admin section), it shows in the sidebar but it doesn't go anywhere when clicked. Setting the admin theme back to Default all works fine. I'm using 2.7.2 dev but as I remember it never worked.

Update:

Just discovered that it works on double-click, just like the items Setup, Module, Pages.

Link to comment
Share on other sites

I just noticed, that the field editor does not switch to those buttonized tabs on narrow screens, like the page editor does. Maybe this can be made uniform. 

Edit: Shoot, just had my window exactly at the small state after the media query but before all tabs had enough space in one line. 

Link to comment
Share on other sites

Hey Reno, with the new update removing the tree. The only way to access the page tree is by clicking the ProcessWire logo. 

I just updated and found this quite confusing (initially). I was thought it was a bug.

I think tree is more intuitive under the Pages menu and I know my clients are hard-wired now to expect it there.

I'm happy to un-wire them but I think the natural home for the tree link is under Pages and is most intuitive there.

Link to comment
Share on other sites

I just updated and found this quite confusing (initially). I was thought it was a bug.

I think tree is more intuitive under the Pages menu and I know my clients are hard-wired now to expect it there.

I'm happy to un-wire them but I think the natural home for the tree link is under Pages and is most intuitive there.

Hi Peter, 

I actually like the way it works at the moment. On the default theme - Pages goes to the Tree and also Pages > Tree goes to the tree. Usability wise, once you get use to how clicking pages goes to the tree, it actually feels weird that Pages > Tree. Most submenus take you to a new UI, so some users might believe that the page isn't loading.

However in Reno theme it made sense to have Tree because the top level isn't clickable (well it is with a double click, but that isn't immediately obvious to users). For now I think un-hiding the tree makes the most sense rather than re-adding it as while Reno has done an amazing job with the theme and it's the choice of most people. It isn't default.

Hey all,

I'm on this. I actually never noticed it worked that way because my installs had the page set to published, so it showed in the list of children.

For now, the temp fix is to un-hide the tree page.

Thank you very much :-) Keep up the great work Tom! 

Link to comment
Share on other sites

  • 3 weeks later...

Hey all,

I'm on this. I actually never noticed it worked that way because my installs had the page set to published, so it showed in the list of children.

For now, the temp fix is to un-hide the tree page.

Hi Tom,

Good fix. But any plan to fix this??

Gideon

Link to comment
Share on other sites

  • 4 months later...

I've set a custom image to replace the PW logo in the admin in "/site/modules/AdminTheme/AdminThemeReno/styles/images/logo.png". This worked fine until now, but since about v3.017 it doesn't show up, but the original PW logo. Is there a way to fix this?

I'm using the Roboto color variations as explained here:

https://processwire.com/blog/posts/processwire-2.6.8-brings-new-version-of-reno-admin-theme-and-more/#admin-theme-reno-roboto-colours

However, it's a bit out of date, eg. the new dropdown buttons don't show correctly and other minor glitches appear here and there. Could we get the source scss (or less?) files for the Reno style, to customize them? I'm interested mainly in colors, and it would be even better if we could have a "color customizer" in the admin interface for the Reno theme. I've made this manually and there are only a few main colors, and by tweaking them the admin can match the client's color scheme.

  • Like 2
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
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...