Extend integration of approve plugin

css/plugins/approve.less

@@ -1,7 +1,36 @@
 /**
  * This file provides styles for approve plugin
  */
-#plugin__approve {
+
-    position: static;
+.page-attributes > li #plugin__approve {
-    display: inline;
+    display: none;
+}
+
+@media screen {
+    #plugin__approve {
+        display: none; // initial
+        padding: 2rem 1rem;
+        clear: both;
+    }
+
+    span.plugin_approve-icon.plugin__approve_draft {
+        background-color: #fdb1b1;
+        &:hover {
+            background-color: unset;
+        }
+    }
+
+    span.plugin_approve-icon.plugin__approve_ready {
+        background-color: #94bffb;
+        &:hover {
+            background-color: unset;
+        }
+    }
+
+    span.plugin_approve-icon.plugin__approve_approved {
+        background-color: #94fb94;
+        &:hover {
+            background-color: unset;
+        }
+    }
 }

css/print.less

@@ -557,3 +557,13 @@ form {
         border: 1pt solid @border-dark-print;
     }
 }
+
+/*
+ * Plugins
+ */
+
+/* * * * approve * * * */
+#plugin__approve {
+    // we hide the banner with JS, make it visible again in print
+    display: block !important;
+}

js/plugins/approve.js

@@ -0,0 +1,21 @@
+/**
+ * Approve plugin banner
+ */
+jQuery(function () {
+    const $icon = jQuery('span.plugin_approve-icon');
+    const $metaBox = jQuery('#spr__meta-box');
+    const $banner = jQuery('#plugin__approve');
+    const title = $banner.find('strong').text();
+
+    $icon.addClass($banner.attr('class'));
+    $icon.attr('title', title);
+
+    // anchor to the sprintdoc meta box
+    $metaBox.after($banner);
+
+    $icon.click(function (e) {
+        e.preventDefault();
+        $banner.dw_toggle();
+    });
+
+});

main.php

@@ -15,6 +15,9 @@ if (!defined('DOKU_INC')) die();                        /* must be run from with
 header('X-UA-Compatible: IE=edge,chrome=1');
 
 global $JSINFO;
+global $conf;
+global $lang;
+
 if (empty($JSINFO['template'])) {
     $JSINFO['template'] = array();
 }

script.js

@@ -1,3 +1,4 @@
+/* DOKUWIKI:include js/plugins/approve.js */
 /* DOKUWIKI:include js/plugins/do_tasks.js */
 /* DOKUWIKI:include js/plugins/qc.js */
 /* DOKUWIKI:include js/plugins/bookcreator.js */

tpl/nav-page-attributes.php

@@ -12,18 +12,18 @@ $quickSubPlugin = plugin_load('helper', 'quicksubscribe');
 /** @var \helper_plugin_approve_tpl $approvePlugin */
 $approvePlugin = plugin_load('helper', 'approve_tpl');
 
-if($doPlugin !== null || $qcPlugin !== null || $starredPlugin !== null) {
+if ($doPlugin !== null || $qcPlugin !== null || $starredPlugin !== null || $quickSubPlugin !== null || $approvePlugin !== null) {
     echo '<ul class="page-attributes">';
 }
 
 
-if($qcPlugin && $qcPlugin->shouldShow()) {
+if ($qcPlugin && $qcPlugin->shouldShow()) {
     $qcPrefix = tpl_getLang('quality_trigger');
     echo '<li class="plugin_qc"><strong class="sr-out">'.$qcPrefix.':</strong><a href="#"></a></li>'; // filled by javascript
 }
 
 
-if($doPlugin !== null) {
+if ($doPlugin !== null) {
     $count = $doPlugin->getPageTaskCount();
     $num = $count['count'];
     $title = "";
@@ -50,23 +50,28 @@ if($doPlugin !== null) {
     echo '</li>';
 }
 
-if($starredPlugin !== null) {
+if ($starredPlugin !== null) {
     echo '<li class="plugin_starred">';
     $starredPlugin->tpl_starred();
     echo '</li>';
 }
 
-if($quickSubPlugin !== null) {
+if ($quickSubPlugin !== null) {
     echo '<li class="plugin_quicksubscribe">';
     echo $quickSubPlugin->tpl_subscribe();
     echo '</li>';
 }
 
-if($doPlugin !== null || $qcPlugin !== null || $starredPlugin !== null) {
+if ($approvePlugin !== null && $approvePlugin->shouldDisplay()) {
-    echo "</ul>";
+    echo '<li class="plugin_approve">';
-}
+    echo '<span class="plugin_approve-icon">' . inlineSVG(DOKU_PLUGIN . 'approve/admin.svg') . '</span>';
-
+    echo '<div class="plugin_approve-banner-content">';
-if($approvePlugin !== null) {
     global $ACT;
     echo $approvePlugin->banner($ACT);
+    echo '</div>';
+    echo '</li>';
+}
+
+if ($doPlugin !== null || $qcPlugin !== null || $starredPlugin !== null || $quickSubPlugin !== null || $approvePlugin !== null) {
+    echo "</ul>";
 }