Config Controller and Template

Asset/css/shrink-vertically.css

@@ -13,8 +13,10 @@
  * breathing room). A fixed-px budget is more reliable than a proportional vh value
  * because that chrome is a fixed height regardless of screen size.
  *
- * Tune the single number below (240px) if the scrollbar is still clipped or if you
+ * The pixel budget is the --sv-shrink-offset CSS variable. It is injected in the
- * want the columns taller.
+ * page head from the plugin setting (Settings -> Shrink Vertically); when unset it
+ * falls back to 240px below. Increase it if the scrollbar is still clipped, or
+ * decrease it to make the columns taller.
  *
  * The selector is intentionally more specific than core's single-class rule, and
  * uses !important, so this override wins even alongside a theme (e.g. Essential).
@@ -27,6 +29,6 @@
  * (non-important) min-height, so we reset it to 0 and let max-height win.
  */
 #board td .board-task-list.board-task-list-compact {
-    max-height: calc(100vh - 240px) !important;
+    max-height: calc(100vh - var(--sv-shrink-offset, 240px)) !important;
     min-height: 0 !important;
 }

Controller/ConfigController.php

@@ -0,0 +1,45 @@
+<?php
+
+namespace Kanboard\Plugin\ShrinkVertically\Controller;
+
+use Kanboard\Controller\BaseController;
+
+/**
+ * Settings page for the ShrinkVertically plugin: configure how many pixels are
+ * reserved around the vertically collapsed board columns.
+ */
+class ConfigController extends BaseController
+{
+    const DEFAULT_OFFSET = 240;
+    const MIN_OFFSET = 0;
+    const MAX_OFFSET = 2000;
+
+    public function show()
+    {
+        $offset = (int) $this->configModel->get('shrink_vertically_offset', self::DEFAULT_OFFSET);
+
+        $this->response->html($this->helper->layout->config('shrinkVertically:config/show', array(
+            'title' => t('Settings').' &gt; '.t('Shrink Vertically'),
+            'values' => array(
+                'shrink_vertically_offset' => $offset,
+            ),
+            'errors' => array(),
+        )));
+    }
+
+    public function save()
+    {
+        $values = $this->request->getValues();
+
+        $offset = isset($values['shrink_vertically_offset']) ? (int) $values['shrink_vertically_offset'] : self::DEFAULT_OFFSET;
+        $offset = max(self::MIN_OFFSET, min(self::MAX_OFFSET, $offset));
+
+        if ($this->configModel->save(array('shrink_vertically_offset' => $offset))) {
+            $this->flash->success(t('Settings saved successfully.'));
+        } else {
+            $this->flash->failure(t('Unable to save your settings.'));
+        }
+
+        $this->response->redirect($this->helper->url->to('ConfigController', 'show', array('plugin' => 'ShrinkVertically')));
+    }
+}

Plugin.php

@@ -14,11 +14,17 @@ class Plugin extends Base
             'template' => 'plugins/ShrinkVertically/Asset/css/shrink-vertically.css',
         ));
 
+        // Inject the configured pixel offset as a CSS variable in the page head.
+        $this->template->hook->attach('template:layout:head', 'shrinkVertically:layout/variable');
+
         // Append a "+" to the two vertical-collapse menu labels so it is visible
         // that the behaviour is modified by this plugin.
         $this->hook->on('template:layout:js', array(
             'template' => 'plugins/ShrinkVertically/Asset/js/shrink-vertically.js',
         ));
+
+        // Add a "Shrink Vertically" entry to the Settings sidebar.
+        $this->template->hook->attach('template:config:sidebar', 'shrinkVertically:config/sidebar');
     }
 
     public function getPluginName()
@@ -38,7 +44,7 @@ class Plugin extends Base
 
     public function getPluginVersion()
     {
-        return '0.1.0';
+        return '0.4.0';
     }
 
     public function getPluginHomepage()

README.md

@@ -25,13 +25,19 @@ list:
 
 ```css
 #board td .board-task-list.board-task-list-compact {
-    max-height: calc(100vh - 240px) !important;
+    max-height: calc(100vh - var(--sv-shrink-offset, 240px)) !important;
+    min-height: 0 !important;
 }
 ```
 
-The `240px` reserves room for the page header, the board column header, the horizontal
+The offset reserves room for the page header, the board column header, the horizontal
 scrollbar, and a little breathing space. A fixed-pixel budget is more reliable than a
-proportional value because that chrome is a fixed height regardless of screen size.
+proportional value because that chrome is a fixed height regardless of screen size. It
+defaults to `240px` and is configurable (see Settings below).
+
+The `min-height: 0` is essential: Kanboard's drag-and-drop sets an inline `min-height` on
+each column equal to its full content height, and in CSS `min-height` beats `max-height`,
+so without this reset the tall columns would never shrink.
 
 The override only applies while columns are collapsed (when core adds the
 `board-task-list-compact` class). It changes no data and runs no database migration.
@@ -53,11 +59,12 @@ Copy this folder into your Kanboard installation as `plugins/ShrinkVertically/`.
 directory name must be exactly `ShrinkVertically` (Kanboard derives the plugin namespace
 from the folder name). Reload the board; no build step, no configuration.
 
-## Tuning
+## Settings
 
-Edit the single `240px` value in `Asset/css/shrink-vertically.css`. Increase it if the
+Go to "Settings -> Shrink Vertically" to set the pixel offset. The value is stored in the
-scrollbar is still clipped (for example with a taller theme header); decrease it to make
+Kanboard configuration and injected in the page head as the `--sv-shrink-offset` CSS
-the collapsed columns taller.
+variable. Increase it if the scrollbar is still clipped (for example with a taller theme
+header); decrease it to make the collapsed columns taller. Default: 240.
 
 ## License
 

Template/config/show.php

@@ -0,0 +1,19 @@
+<div class="page-header">
+    <h2><?= t('Shrink Vertically') ?></h2>
+</div>
+
+<form method="post" action="<?= $this->url->href('ConfigController', 'save', array('plugin' => 'ShrinkVertically')) ?>" autocomplete="off">
+    <?= $this->form->csrf() ?>
+
+    <fieldset>
+        <?= $this->form->label(t('Vertical offset in pixels'), 'shrink_vertically_offset') ?>
+        <?= $this->form->number('shrink_vertically_offset', $values, $errors) ?>
+        <p class="form-help">
+            <?= t('Pixels reserved above and below the vertically collapsed board columns (page header, column header and the horizontal scrollbar). A larger value makes the columns shorter. Default: 240.') ?>
+        </p>
+    </fieldset>
+
+    <div class="form-actions">
+        <button type="submit" class="btn btn-blue"><?= t('Save') ?></button>
+    </div>
+</form>

Template/config/sidebar.php

@@ -0,0 +1,3 @@
+<li <?= $this->app->checkMenuSelection('ConfigController', 'show', 'ShrinkVertically') ?>>
+    <?= $this->url->link(t('Shrink Vertically'), 'ConfigController', 'show', array('plugin' => 'ShrinkVertically')) ?>
+</li>

Template/layout/variable.php

@@ -0,0 +1,3 @@
+<style type="text/css">
+    :root { --sv-shrink-offset: <?= (int) $this->app->config('shrink_vertically_offset', 240) ?>px; }
+</style>

VERSION

@@ -0,0 +1 @@
+ShrinkVertically v0.4