Merge branch 'develop'

Dashboard.version

@@ -1 +1 @@
-0.4.10
+0.4.11

DashboardPanelShortcuts.css

@@ -1,7 +1,5 @@
 .DashboardPanelShortcuts ul {
-  display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr));
-  grid-gap: 1.1em .7em;
+  margin: 0;
   padding: 0;
   list-style: none;
 }
@@ -28,3 +26,54 @@
 .DashboardPanelShortcuts a:hover .fa {
   color: inherit;
 }
+
+.DashboardPanelShortcuts a > span {
+  display: flex;
+  align-items: center;
+}
+
+.DashboardPanelShortcuts span + span {
+  min-width: 0px;
+}
+
+.DashboardPanelShortcuts .summary {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  color: #97aab4;
+  padding-left: 1em;
+  display: none;
+}
+
+/* Grid view */
+
+.DashboardPanelShortcuts--grid ul {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr));
+  grid-gap: 1.1em .7em;
+  margin-bottom: -1px; /* hide last row's border */
+}
+
+/* List view */
+
+.DashboardPanelShortcuts--list .uk-card-body {
+  padding: 0;
+}
+
+.DashboardPanelShortcuts--list a {
+  padding: 10px 20px;
+  border-bottom: 1px solid #e5e5e5;
+  white-space: nowrap;
+}
+
+.DashboardPanelShortcuts--list a:hover {
+  background: #fafbfc;
+}
+
+.DashboardPanelShortcuts--list .title {
+  font-weight: bold;
+}
+
+.DashboardPanelShortcuts--list .summary {
+  display: block;
+}

DashboardPanelShortcuts.module

@@ -13,6 +13,13 @@ class DashboardPanelShortcuts extends DashboardPanel {
         );
     }
 
+    const displayOptions = [
+        'grid',
+        'list',
+    ];
+
+    const defaultDisplayOption = 'grid';
+
     public function getIcon() {
         return 'flash';
     }
@@ -21,20 +28,31 @@ class DashboardPanelShortcuts extends DashboardPanel {
         return $this->_('Shortcuts');
     }
 
+    public function getClassNames() {
+        return ["{$this}--{$this->display}"];
+    }
+
     public function getContent() {
         if (!($this->shortcuts && count($this->shortcuts))) {
             return;
         }
 
         $rows = array_map(function ($shortcut, $key) {
             $page = null;
+            $pageIcon = '';
+            $title = '';
+            $summary = '';
             $url = '';
             $icon = '';
 
+            // Passed array? Extract to shortcut, icon and summary
+            // e.g. [1020, 'user', 'Edit your profile']
             if (is_array($shortcut)) {
-                list($shortcut, $icon) = $shortcut;
+                list($shortcut, $icon, $summary) = $shortcut;
             }
 
+            // Get URL from shortcut if page/id/selector given,
+            // otherwise treat shortcut as URL string
             if (is_object($shortcut) && $shortcut instanceof Page) {
                 $page = $shortcut;
             } else if (is_int($shortcut)) {
@@ -48,37 +66,91 @@ class DashboardPanelShortcuts extends DashboardPanel {
             }
 
             if ($page) {
-                $title = is_string($key) ? $key : $page->title;
+                if (!$page->viewable()) {
+                    return;
+                }
+                $info = $this->getPageInfo($page);
+                $title = is_string($key) ? $key : $info->title;
+                $summary = $summary ?: $info->summary;
+                $pageIcon = $info->icon;
                 $url = $page->url;
             } else if ($url) {
                 $title = $key;
             } else {
                 return;
             }
-            $icon = $icon ? $this->renderIcon($icon) : $this->renderPageIcon($page);
 
-            return "<li><a href='{$url}'>{$icon} {$title}</a></li>";
+            $icon = $this->renderPageIcon($icon ?: $pageIcon);
+            $title = $this->sanitizer->entities1($title);
+            $summary = $this->sanitizer->entities1($summary);
+            $linkClass = $summary && $this->display === 'grid' ? 'tooltip' : '';
+
+            return
+                "<li>
+                    <a href='{$url}' class='{$linkClass}' title='{$summary}'>
+                        <span>
+                            {$icon}
+                            <span class='title'>{$title}</span>
+                        </span>
+                        <span>
+                            <span class='summary' title='{$summary}'>{$summary}</span>
+                        </span>
+                    </a>
+                </li>";
         }, $this->shortcuts, array_keys($this->shortcuts));
 
         $output = join('', $rows);
-        return "<ul>{$output}</ul>";
+        return "<ul data-display='{$this->display}'>{$output}</ul>";
     }
 
-    protected function renderPageIcon($page = null) {
+    protected function renderPageIcon($icon) {
         if ($this->icon !== null) {
             $icon = $this->icon;
-        } elseif ($page) {
-            $icon = $page->getIcon() ?: $this->fallbackIcon;
-        } else {
-            $icon = $this->fallbackIcon;
         }
-
+        $icon = $icon ?: $this->fallbackIcon;
         return $icon ? wireIconMarkup($icon, 'fw') : '';
     }
 
+    protected function getPageInfo($page) {
+        $adminTheme = $this->wire('adminTheme');
+        $hasInfoMethods = ($adminTheme && $adminTheme instanceof AdminThemeFramework);
+
+        $title = '';
+        $icon = '';
+        $summary = '';
+
+        if ($page->template == 'admin') {
+            if ($page->process) {
+                $info = $this->modules->getModuleInfoVerbose($page->process);
+                $summary = $page->summary ?: ($info['summary'] ?? '');
+                $icon = $info['icon'] ?? '';
+            }
+            $icon = $page->getIcon() ?: $icon;
+            $title = $hasInfoMethods ? $adminTheme->getPageTitle($page) : '';
+            if (!$icon) switch($page->id) {
+                case 22: $icon = 'gears'; break; // Setup
+                case 21: $icon = 'plug'; break; // Modules
+                case 28: $icon = 'key'; break; // Access
+            }
+        }
+        if (!$title) {
+            $title = $page->get('title|name');
+        }
+        if (!$icon) {
+            $icon = $page->getIcon();
+        }
+
+        return (object) compact(
+            'title',
+            'summary',
+            'icon'
+        );
+    }
+
     public function setup() {
         parent::setup();
         $this->shortcuts = $this->data['shortcuts'] ?? [];
+        $this->display = $this->sanitizer->option($this->data['display'] ?? '', self::displayOptions) ?: self::defaultDisplayOption;
         $this->fallbackIcon = $this->data['fallbackIcon'] ?? 'bookmark-o';
         $this->icon = $this->data['icon'] ?? null;
     }

README.md

@@ -311,29 +311,31 @@ Display a ProcessPageList widget.
 
 ### Shortcuts
 
-Display a list of shortcuts as links with icons.
+Display a list of shortcuts as links with icons. In list view, the page summary is displayed next to the title.
 
-<img src="./assets/shortcuts.png" width="300">
+<img src="./assets/shortcuts-comparison.png" width="600">
 
 #### Options
 
 - `shortcuts`: array of shortcuts (Page, page ID, selector or URL; use key to override title) (required)
+- `display`: how to display the shortcuts: `grid` or `list` (`grid` by default)
 - `fallbackIcon`: icon to use if page doesn't have one (string, `bookmark-o` by default)
 - `icon`: force one icon for all pages (string, off by default)
 
-To use a custom icon for a shortcut, pass an array as shortcut where the first item is the shortcut and the second item is the icon code.
+To use a custom icon for a shortcut, pass an array as shortcut where the first item is the shortcut and the second item is the icon code. To set a custom summary, pass a third array item.
 
 #### Example
 
 ```php
 [
   'shortcuts' => [
-    1020,                       // Page ID
-    $this->pages->get(1132),    // Page
-    'template=news-item',       // Selector
-    'Backups' => '/backup/',    // URL
-    'Updates' => 1020,          // Override title
-    [304, 'user'],              // Override icon
+    1020,                          // Page ID
+    $this->pages->get(1132),       // Page
+    'template=news-item',          // Selector
+    'Backups' => '/backup/',       // URL
+    'Updates' => 1020,             // Override title
+    [304, 'user'],                 // Override icon
+    [304, 'user', 'Lorem ipsum'],  // Set summary
   ],
   'fallbackIcon' => 'star-o',
 ]