Pixrael

Admin Breadcrumb Dropdown Idea

Recommended Posts

Hi guys!

What do you think about something like this? Because I use this option regularly in the Windows File Explorer breadcrumb and it's very useful. The drop-down menu can display only published/visible child pages. I've tried to find how to do it as a module, but I'm not a coder with enough skills for that ... or I don't know if I can use hooks to do that ...

breadcrumb-paths.gif.f9940179324ffbbb81a0b32f600af264.gif

  • Like 12

Share this post


Link to post
Share on other sites

Actually, that's quite similar to the breadcrumb dropdown I built for our new intranet layout, so I totally agree :). I don't think there's a good place to hook into, but making AdminThemeUikit::renderBreadcrumb hookable shouldn't be too expensive. It might be worth adding a feature request in the issue tracker.

  • Like 5

Share this post


Link to post
Share on other sites

Wouldn't mind having this feature in the core either. Just saying :)

Admittedly my first impression was "oh man, not again". Some sites (Basecamp, Dropbox) have recently implemented their own flavors of "breadcrumb dropdowns", and in my opinion both get it wrong. In Basecamp clicking what seems like a link to the previous item actually opens a dropdown with that item and its children, while in Dropbox deeper down all but the last two levels are removed from the breadcrumbs and the first item turns into a dropdown.

Both make sense in their own ways, but a) break the "open this link in a new tab" feature and b) are totally unexpected and confusing, at least to me. Your approach makes use of the spacer items, which not only makes more sense in this context, but also doesn't break the familiar breadcrumb pattern. Thumbs up for this :)

  • Like 4

Share this post


Link to post
Share on other sites

Great concept. Im not sure its obvious wnough to click on the arrows since these almost never have any functions associated eithout a more visual indication... in this regard i think a dropdown on a link would increase the usability for an average user.

 

btw, what theme (opetions) arre you using here?

Share this post


Link to post
Share on other sites

Good point about usability, maybe something like a outlined button could work. I would not like to replace the current link with a dropdown menu because it would be better to preserve the function of the current link and add the new function. The theme is the regular Reno that comes with PW installation, you can access it in the admin profile.

 

drop.png

  • Like 1

Share this post


Link to post
Share on other sites

Looks a bit too much for me, how about a dotted underline only?

Share this post


Link to post
Share on other sites

 

I would say keep the interface the same as other comboboxes for consistency. Adding sub-menu options to an existing breadcrumb is in effect a combobox. So why not change the breadcrumbs to a sequence of comboboxes separating each as you would normally. The visual ques remain the same for the user. Just a thought. 

Share this post


Link to post
Share on other sites

I use this hook to inject edit icons into the breadcrumb. Unfortunately the options exposed by $this->wire('breadcrumbs') are not great, no page id's etc… so it's kind of a hack…

634830168_ScreenShot2018-06-06at17_24_29.png.925b18bb089f37750c7a5a7b30585abd.png

	public function init()
	{
		wire()->addHookAfter('AdminThemeUikit::renderBreadcrumbs', $this, 'renderBreadcrumbs');
	}


	/**
	 * Render a list of breadcrumbs (list items), excluding the containing <ul>.
	 *
	 * @return string
	 */
	public function renderBreadcrumbs(HookEvent $event)
	{
		if (!$event->return) {
			return;
		}

		$process = $this->wire('page')->process;
		if ($process == 'ProcessPageList') {
			return '';
		}
		$breadcrumbs = $this->wire('breadcrumbs');
		$out = '';

		// don't show breadcrumbs if only one of them (subjective)
		if (count($breadcrumbs) < 2 && $process != 'ProcessPageEdit') {
			return '';
		}

		if (strpos($this->layout, 'sidenav') === false) {
			$out = '<li>'.$event->object->renderQuickTreeLink().'</li>';
		}

		foreach ($breadcrumbs as $breadcrumb) {
			$title = $breadcrumb->get('titleMarkup');
			if (!$title) {
				$title = $this->wire('sanitizer')->entities1($this->_($breadcrumb->title));
			}

			$edit = '';
			$icon = $event->object->renderIcon('pencil');
			if (strpos($breadcrumb->url, 'open=') > 0) {
				$pageid = explode('open=', $breadcrumb->url);
				$pageid = end($pageid);
				if (wire('pages')->get($pageid)->editable()) {
					$edit = "&nbsp;&nbsp;<a href='../edit/?id=$pageid'>$icon</a>";
				}
			} elseif (strpos($breadcrumb->url, '../') !== false && wire('process')) {
				$pageid = wire('process')->getPage()->parent->id;
				if (wire('pages')->get($pageid)->editable()) {
					$edit = "&nbsp;&nbsp;<a href='../edit/?id=$pageid'>$icon</a>";
				}
				// modify open
				$breadcrumb->url = "../?open=$pageid";
			}
			$out .= "<li><a href='$breadcrumb->url'>$title</a>$edit</li>";
		}

		if ($out) {
			$out = "<ul class='uk-breadcrumb'>$out</ul>";
		}

		$event->return = $out;
	}

@ryan maybe this would be a useful addition to AdminThemeUikit?

 

  • Like 2

Share this post


Link to post
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.

  • Similar Content

    • By matsn0w
      Hey all,
      I am working on a website and I want to style the login page, but I'm a bit confused. 
      I want either the existing login page styled in my own way using some CSS (I guess I prefer that) or I want to create a custom page with a form to login. (Which I could style too).
      I used the code from Ryan and Renobird posted here - which works great - but that doesn't replace the original login page. 
      Is there a way to some sort of 'disable' the original login?
      I hope my question is clear and thanks in advance,
      matsn0w
    • By msavard
      Is the UIKit admin theme supposed to look like this when editing fields and templates? It seems like I did something wrong.
       

    • By Jimmie Bragdon
      Wondering if anyone can help me get past a sticking point.  
      I'm setting up a Processwire instance in a multiple site setup (using Soma's multisite) to run several related websites.  I am getting stuck on the tagging system that I am using (adapted from a standalone PW site I'm running).  I have the tags themselves set up as Pages, and the Tags field on the related pages is and ASMselect field that populates based on the pages underneath /tags/ in the tree.  This system works fine on the standalone site.
      Where I am running into issues, is with trying to use them with the multisite setup.  Specifically, choosing the proper subset of pages for tags on the ASMselect input tab.  I want to choose only the tag pages for the site in question.  
      My tree is laid out like this:
      Multisite / 
                | site1.com
                     | subsections
                | site2.com
                     | subsections
                | Tags
                     | site1.com
                          | tagA
                          | tagB
                     | site2.com
                           | tagC
      So far, the best I've been able to do is to use  'parent.has_parent=/tags/' in the Custom Find or Selector String portion of the Selectable Pages section of the input.  This gives me the options of choosing tagA, tagB, or tagC on a page under site1.com.  What I'd like to find is a selector that allows me to only see tagA, tagB as options from a page under site1.com and only tagC on a page under site2.com.
      Elsewhere in my php templates, I'm using $page->rootParent->title to set the proper scope and URLs for things, but I have not found a way to get that to work in this field input setup.  I am trying to avoid creating specific fields and templates for each site, as unified templates were part of the purpose of going with a multisite install.
       
      Thanks in advance for any ideas.
    • By sebr
      Hi
      I just publish a new website in production environnement and I cannot anymore access to the admin URL... Automatically redirect to root URL.
      Example : www.test.com/gestion ==> www.test.com
      I disabled all HTTPS and www redirection in .htaccess but nothing changed.
      Is someone can help me ?
      Thanks in advance
      ......................................
      This is my htaccess content :
      ################################################################################################# # START PROCESSWIRE HTACCESS DIRECTIVES # @version 3.0 # @indexVersion 300 ################################################################################################# # ----------------------------------------------------------------------------------------------- # 1. Don't show directory indexes, but do follow symbolic links # 500 NOTE: Some cloud hosting companies don't allow +FollowSymLinks. # Uncomment +SymLinksifOwnerMatch and comment +FollowSymLinks if you have 500 errors. # If that doesn't resolve the error, then set it back to +FollowSymLinks. # ----------------------------------------------------------------------------------------------- Options -Indexes Options +FollowSymLinks # Options +SymLinksifOwnerMatch # ----------------------------------------------------------------------------------------------- # 2. Let ProcessWire handle 404s # ----------------------------------------------------------------------------------------------- ErrorDocument 404 /index.php # ----------------------------------------------------------------------------------------------- # 3. Handle request for missing favicon.ico/robots.txt files (no ending quote for Apache 1.3) # ----------------------------------------------------------------------------------------------- <Files favicon.ico> ErrorDocument 404 "The requested file favicon.ico was not found. </Files> <Files robots.txt> ErrorDocument 404 "The requested file robots.txt was not found. </Files> # ----------------------------------------------------------------------------------------------- # 4. Protect from XSS with Apache headers # ----------------------------------------------------------------------------------------------- <IfModule mod_headers.c> # prevent site from being loaded in an iframe on another site # you will need to remove this one if you want to allow external iframes Header always append X-Frame-Options SAMEORIGIN # to prevent cross site scripting (IE8+ proprietary) Header set X-XSS-Protection "1; mode=block" # prevent mime-based attacks via content sniffing (IE+Chrome) # Header set X-Content-Type-Options "nosniff" </IfModule> # ----------------------------------------------------------------------------------------------- # 5. Protect ProcessWire system files # ----------------------------------------------------------------------------------------------- <FilesMatch "\.(inc|info|info\.json|module|sh|sql)$|^\..*$|composer\.(json|lock)$"> <IfModule mod_authz_core.c> Require all denied </IfModule> <IfModule !mod_authz_core.c> Order allow,deny </IfModule> </FilesMatch> # ----------------------------------------------------------------------------------------------- # 6. Override a few PHP settings that can't be changed at runtime (not required) # 500 NOTE: Try commenting out this entire section below if getting Apache 500 errors. # ----------------------------------------------------------------------------------------------- <IfModule mod_php5.c> php_flag magic_quotes_gpc off php_flag magic_quotes_sybase off php_flag register_globals off </IfModule> # ----------------------------------------------------------------------------------------------- # 7. Set default directory index files # ----------------------------------------------------------------------------------------------- DirectoryIndex index.php index.html index.htm # ----------------------------------------------------------------------------------------------- # 8. ProcessWire requires mod_rewrite # ----------------------------------------------------------------------------------------------- <IfModule mod_rewrite.c> RewriteEngine On AddDefaultCharset UTF-8 # ----------------------------------------------------------------------------------------------- # 9. If you only want to allow HTTPS, uncomment the RewriteCond and RewriteRule lines below. # ----------------------------------------------------------------------------------------------- # RewriteCond %{HTTPS} off # RewriteRule (.*) https://%{HTTP_HOST}%{REQUEST_URI} [L,R=301] # If using an AWS load balancer, use these two lines below instead of those above: # RewriteCond %{HTTP:X-Forwarded-Proto} =http # RewriteRule (.*) https://%{HTTP_HOST}%{REQUEST_URI} [L,R=301] # ----------------------------------------------------------------------------------------------- # 10. Set an environment variable so the installer can detect that mod_rewrite is active. # Note that some web hosts don't support this. If you get a 500 error, you might try # commenting out this SetEnv line below. # ----------------------------------------------------------------------------------------------- <IfModule mod_env.c> SetEnv HTTP_MOD_REWRITE On </IfModule> # ----------------------------------------------------------------------------------------------- # 11. OPTIONAL: Set a rewrite base if rewrites aren't working properly on your server. # And if your site directory starts with a "~" you will most likely have to use this. # ----------------------------------------------------------------------------------------------- # RewriteBase / # RewriteBase /pw/ # RewriteBase /~user/ # ----------------------------------------------------------------------------------------------- # 12. Access Restrictions: Keep web users out of dirs that begin with a period, # but let services like Lets Encrypt use the webroot authentication method. # ----------------------------------------------------------------------------------------------- RewriteRule "(^|/)\.(?!well-known)" - [F] # ----------------------------------------------------------------------------------------------- # 13. OPTIONAL: Redirect users to the 'www.' version of the site (uncomment to enable). # For example: http://processwire.com/ would be redirected to http://www.processwire.com/ # ----------------------------------------------------------------------------------------------- # RewriteCond %{HTTP_HOST} !^www\. [NC] # RewriteRule ^ http://www.%{HTTP_HOST}%{REQUEST_URI} [L,R=301] # ----------------------------------------------------------------------------------------------- # 14. OPTIONAL: Send URLs with non-ASCII name-format characters to 404 page (optimization) # ----------------------------------------------------------------------------------------------- # RewriteCond %{REQUEST_URI} "[^-_.a-zA-Z0-9/~]" # RewriteCond %{REQUEST_FILENAME} !-f # RewriteCond %{REQUEST_FILENAME} !-d # RewriteRule ^(.*)$ index.php?it=/http404/ [L,QSA] # ----------------------------------------------------------------------------------------------- # 15. Access Restrictions: Protect ProcessWire system files # ----------------------------------------------------------------------------------------------- # Allow screenshot files (for install.php only: this 1 line below may be removed after install) RewriteCond %{REQUEST_URI} !(^|/)site-[^/]+/install/[^/]+\.(jpg|jpeg|png|gif)$ # Block access to any htaccess files RewriteCond %{REQUEST_URI} (^|/)\.htaccess$ [NC,OR] # Block access to protected assets directories RewriteCond %{REQUEST_URI} (^|/)(site|site-[^/]+)/assets/(cache|logs|backups|sessions|config|install|tmp)($|/.*$) [OR] # Block acceess to the /site/install/ directory RewriteCond %{REQUEST_URI} (^|/)(site|site-[^/]+)/install($|/.*$) [OR] # Block dirs in /site/assets/ dirs that start with a hyphen RewriteCond %{REQUEST_URI} (^|/)(site|site-[^/]+)/assets.*/-.+/.* [OR] # Block access to /wire/config.php, /site/config.php, /site/config-dev.php, and /wire/index.config.php RewriteCond %{REQUEST_URI} (^|/)(wire|site|site-[^/]+)/(config|index\.config|config-dev)\.php$ [OR] # Block access to any PHP-based files in /templates-admin/ RewriteCond %{REQUEST_URI} (^|/)(wire|site|site-[^/]+)/templates-admin($|/|/.*\.(php|html?|tpl|inc))$ [OR] # Block access to any PHP or markup files in /site/templates/ RewriteCond %{REQUEST_URI} (^|/)(site|site-[^/]+)/templates($|/|/.*\.(php|html?|tpl|inc))$ [OR] # Block access to any PHP files in /site/assets/ RewriteCond %{REQUEST_URI} (^|/)(site|site-[^/]+)/assets($|/|/.*\.php)$ [OR] # Block access to any PHP files in core or core module directories RewriteCond %{REQUEST_URI} (^|/)wire/(core|modules)/.*\.(php|inc|tpl|module|info\.json)$ [OR] # Block access to any PHP files in /site/modules/ RewriteCond %{REQUEST_URI} (^|/)(site|site-[^/]+)/modules/.*\.(php|inc|tpl|module|info\.json)$ [OR] # Block access to any software identifying txt files RewriteCond %{REQUEST_URI} (^|/)(COPYRIGHT|INSTALL|README|htaccess)\.(txt|md|textile)$ [OR] # Block all http access to the default/uninstalled site-default directory RewriteCond %{REQUEST_URI} (^|/)site-default/ # If any conditions above match, issue a 403 forbidden RewriteRule ^.*$ - [F,L] # PW-PAGENAME # ----------------------------------------------------------------------------------------------- # 16a. Ensure that the URL follows the name-format specification required by PW # See also directive 16b below, you should choose and use either 16a or 16b. # ----------------------------------------------------------------------------------------------- RewriteCond %{REQUEST_URI} "^/~?[-_.a-zA-Z0-9/]*$" # ----------------------------------------------------------------------------------------------- # 16b. Alternative name-format specification for UTF8 page name support. # If used, comment out section 16a above and uncomment the directive below. If you have updated # your $config->pageNameWhitelist make the characters below consistent with that. # ----------------------------------------------------------------------------------------------- # RewriteCond %{REQUEST_URI} "^/~?[-_./a-zA-Z0-9æåäßöüđжхцчшщюяàáâèéëêěìíïîõòóôøùúûůñçčćďĺľńňŕřšťýžабвгдеёзийклмнопрстуфыэęąśłżź]*$" # END-PW-PAGENAME # ----------------------------------------------------------------------------------------------- # 17. If the request is for a file or directory that physically exists on the server, # then don't give control to ProcessWire, and instead load the file # ----------------------------------------------------------------------------------------------- RewriteCond %{REQUEST_FILENAME} !-f RewriteCond %{REQUEST_FILENAME} !-d RewriteCond %{REQUEST_FILENAME} !(favicon\.ico|robots\.txt) # ----------------------------------------------------------------------------------------------- # 18. OPTIONAL: Prevent ProcessWire from attempting to serve images or anything in /site/assets/. # Both of these lines are optional, but can help to reduce server load. However, they # are not compatible with the $config->pagefileSecure option (if enabled) and they # may produce an Apache 404 rather than your regular 404. You may uncomment the two lines # below if you don't need to use the $config->pagefileSecure option. After uncommenting, test # a URL like domain.com/site/assets/files/test.jpg to make sure you are getting a 404 and not # your homepage. If getting your homepage, then either: do not use this option, or comment out # section #2 above that makes ProcessWire the 404 handler. # ----------------------------------------------------------------------------------------------- # RewriteCond %{REQUEST_FILENAME} !\.(jpg|jpeg|gif|png|ico)$ [NC] # RewriteCond %{REQUEST_FILENAME} !(^|/)site/assets/ # ----------------------------------------------------------------------------------------------- # 19. Pass control to ProcessWire if all the above directives allow us to this point. # For regular VirtualHosts (most installs) # ----------------------------------------------------------------------------------------------- RewriteRule ^(.*)$ index.php?it=$1 [L,QSA] # ----------------------------------------------------------------------------------------------- # 20. If using VirtualDocumentRoot (500 NOTE): comment out the one above and use this one instead # ----------------------------------------------------------------------------------------------- # RewriteRule ^(.*)$ /index.php?it=$1 [L,QSA] </IfModule> ################################################################################################# # END PROCESSWIRE HTACCESS DIRECTIVES #################################################################################################  
    • By louisstephens
      So I recently upgraded my sandbox environment to the latest master version from .62(?). I logged in and received the following error:
      "There appear to be multiple copies of module "AdminThemeUikit" on the file system."
      Unfortunately, in my haste, I removed the theme from site->modules so it doesnt exist anymore, and the theme has defaulted somewhat to the old theme. Is there a way to restore UIkit as the theme for processwire natively, or do I need to completely re-install?