Merge pull request #3 from philippdaun/develop

Merge dev branch
daun · Jan 3, 2020 · 743033a · 743033a
2 parents 2db08d1 + 0969c8d
commit 743033a
Show file tree

Hide file tree

Showing 3 changed files with 164 additions and 19 deletions.
diff --git a/Dashboard.css b/Dashboard.css
@@ -10,7 +10,19 @@ body.Dashboard {
     background-color: #f0f3f7;
 }
 
-.AdminThemeUikit .Dashboard #pw-footer {
+.AdminThemeDefault.Dashboard #main,
+.AdminThemeDefault.Dashboard #breadcrumbs,
+.AdminThemeDefault.Dashboard #headline,
+.AdminThemeDefault.Dashboard #content,
+.AdminThemeDefault.Dashboard #footer {
+    background-color: #f0f3f7;
+}
+
+.AdminThemeDefault.Dashboard #breadcrumbs {
+    border-color: transparent;
+}
+
+.AdminThemeUikit.Dashboard #pw-footer {
     margin-bottom: 0;
 }
 

diff --git a/DashboardPanelShortcuts.module b/DashboardPanelShortcuts.module
@@ -27,20 +27,28 @@ class DashboardPanelShortcuts extends DashboardPanel {
         }
 
         $rows = array_map(function ($shortcut, $key) {
+            $page = null;
+            $url = '';
             if (is_object($shortcut) && $shortcut instanceof Page) {
                 $page = $shortcut;
             } else if (is_int($shortcut)) {
                 $page = $this->pages->get($shortcut);
             } else if (is_string($shortcut)) {
-                $page = $this->pages->get($shortcut);
+                if (Selectors::stringHasSelector($shortcut)) {
+                    $page = $this->pages->get($shortcut);
+                } else {
+                    $url = $shortcut;
+                }
             }
 
-            if (!$page) {
+            if ($page) {
+                $title = is_string($key) ? $key : $page->title;
+                $url = $page->url;
+            } else if ($url) {
+                $title = $key;
+            } else {
                 return;
             }
-
-            $title = is_string($key) ? $key : $page->title;
-            $url = $page->url;
             $icon = $this->renderPageIcon($page);
 
             return "<li><a href='{$url}'>{$icon} {$title}</a></li>";
@@ -50,12 +58,15 @@ class DashboardPanelShortcuts extends DashboardPanel {
         return "<ul>{$output}</ul>";
     }
 
-    protected function renderPageIcon($page) {
-        if ($this->icon === null) {
-            $icon = $page->getIcon() ?: $this->fallbackIcon;
-        } else if ($this->icon) {
+    protected function renderPageIcon($page = null) {
+        if ($this->icon !== null) {
             $icon = $this->icon;
+        } elseif ($page) {
+            $icon = $page->getIcon() ?: $this->fallbackIcon;
+        } else {
+            $icon = $this->fallbackIcon;
         }
+
         return $icon ? wireIconMarkup($icon, 'fw') : '';
     }
 

diff --git a/README.md b/README.md
@@ -93,7 +93,7 @@ $panels->add([
   'icon'   => 'newspaper-o',
 
   /* Options specific to each panel type */
-  'data'   => [
+  'data' => [
     'collection' => 'template=news-item, limit=10',
     'sortable'   => true,
   ],
@@ -123,85 +123,198 @@ Display a chart using [Chart.js](https://www.chartjs.org/).
 
 <img src="./assets/chart.png" width="400">
 
-Options:
+#### Options
 
 - `chart`: array of configuration options to pass to Chart.js (converted to JSON)
 
+#### Example
+
+```php
+[
+  'chart' => [
+    'type' => 'line',
+    'data' => [
+      'labels' => ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul'],
+      'datasets' => [
+        [
+          'label' => 'Lorem ipsum',
+          'data' => [7, 10, 8, 12, 4, 6, 3],
+        ],
+        [
+          'label' => 'Dolor sit amet',
+          'data' => [5, 6, 7, 8, 6, 8, 14],
+        ],
+      ],
+    ],
+    'options' => [
+      'aspectRatio' => 2.5,
+      'scales' => [
+        'xAxes' => [
+          ['gridLines' => ['display' => false]],
+        ],
+      ],
+    ],
+  ],
+]
+```
+
 ### Collection
 
 Display a collection of pages in a table. Supply either a PageArray or a selector string.
 
 <img src="./assets/collection.png" width="400">
 
-Options:
+#### Options
 
 - `collection`: PageArray or selector string (required)
-- `columns`: columns to display (`title` and `url` by default)
+- `columns`: columns to display (array, `title` and `url` by default)
 - `actions`: array of actions to allow, or `false` to disable Actions column (`edit` and `view` by default)
 - `pagination`: display pagination info if PageArray has a `limit` set? (bool, `true` by default)
 - `sortable`: make table columns sortable (bool, `false` by default)
 - `showHeaders`: show table headers? (bool, `true` by default)
 - `dateFormat`: date format to use for DateTime columns (`relative` by default)
 
+#### Example
+
+```php
+[
+  'collection' => 'template=news-item, limit=10',
+  'sortable' => true,
+  'columns' => [
+      'title' => 'Title',
+      'url' => 'URL',
+      'modified' => 'Modified',
+  ],
+]
+```
+
 ### Notice
 
 Display a notice with icon and actions. If set, the panel's `title` will be displayed inline and in bold instead of inside a panel header.
 
 <img src="./assets/notice.png" width="400">
 
-Options:
+#### Options
 
 - `message`: notice to display (string, required)
 - `status`: status of the notice (string: one of either `success`, `warning` or `error`; `notice` by default)
 - `actions`: additional links to display (array of format `['Label' => 'url']`)
 
+#### Example
+
+```php
+/* Plain with actions */
+[
+  'message' => 'You have <b>15</b> new messages.',
+  'actions' => [
+    'See all' => '/inbox/',
+  ],
+]
+
+/* With status */
+[
+  'message' => 'Something went wrong.',
+  'status' => 'error',
+]
+```
+
 ### Number
 
 Display a large number with trend indicator.
 
 <img src="./assets/number.png" width="300">
 
-Options:
+#### Options
 
 - `number`: the number to display (string or int/float, required)
 - `detail`: additional information to display below (string)
 - `trend`: trend to indicate with green/red arrows (string, either `up` or `down`)
 - `locale`: locale to use for formatting numbers (string)
 
+#### Example
+
+```php
+[
+  'number' => 484,
+  'detail' => 'up 5% from last week',
+  'trend' => 'up',
+]
+```
+
 ### PageList
 
 Display a ProcessPageList widget.
 
 <img src="./assets/page-list.png" width="400">
 
-Options:
+#### Options
 
 - `parent`: the root page ID to render the page list for (int, homepage by default)
 - `showRootPage`: whether to include the root page in the output (bool, `true` by default)
 
+#### Example
+
+```php
+[
+  'parent' => $this->pages->get('template=info')->id,
+  'showRootPage' => true,
+]
+```
+
 ### Shortcuts
 
 Display a list of shortcuts as links with icons.
 
 <img src="./assets/shortcuts.png" width="300">
 
-Options:
+#### Options
 
 - `shortcuts`: array of Pages or page IDs to display (array, required)
 - `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)
 
+#### Example
+
+```php
+[
+  'shortcuts' => [
+       304,  // Profile
+      1065,  // Settings
+      1026,  // Cache admin
+      1020,  // Upgrades
+      1016,  // Sessions
+  ],
+  'fallbackIcon' => 'star-o',
+]
+```
+
 ### Template
 
 Display the output of any file in your template folder. The file will receive all API variables and any additional view variables you specify.
 
 <img src="./assets/template.png" width="400">
 
-Options:
+#### Options
 
 - `template`: template file name, relative to `/site/templates/` and including extension (string, required)
 - `variables`: variables to pass into the template (array, empty by default)
 
+#### Example
+
+```php
+/* Panel config */
+[
+  'template' => 'dash.php',
+  'variables' => [
+    'text' => 'Lorem ipsum dolor ...',
+  ],
+]
+
+/* Template file: site/templates/dash.php */
+
+echo $text;
+```
+
 ## Creating Custom Panels
 
 To create custom panels, simply extend the DashboardPanel base class. See [DashboardPanelHelloWorld](./DashboardPanelHelloWorld.module) for an example implementation.
@@ -219,6 +332,15 @@ Every panel module **must** implement the `getContent()` method that returns the
 
 Module assets will be included automatically as long as they're named accordingly (`DashboardPanelHelloWorld.css` and `DashboardPanelHelloWorld.js` respectively).
 
+### Accessing Config & Data
+
+Every module derived from the DashboardPanel base class has a few properties populated automatically:
+
+- `$this->options`: Global panel options like title, icon, etc (array)
+- `$this->data`: Panel-specific configuration (array)
+- `$this->size`: Panel size (string, sanitized to one of allowed values)
+- `$this->layout`: Layout options of this panel instance (array)
+
 ### Helpers
 
 The panel base class has a few helpers for common tasks.