diff --git a/css/area_nav-breadcrumb.less b/css/area_nav-breadcrumb.less index 16ef4ad..bcbce80 100755 --- a/css/area_nav-breadcrumb.less +++ b/css/area_nav-breadcrumb.less @@ -85,54 +85,4 @@ padding: .1em .1em 0; } } - - -/* + + + + + icon list + + + + + */ - .page-attributes { - list-style: none; - float: right; - display: inline-block; - max-width: 30%; - margin: -.45em 0 0; - padding: 0; - - @media @screen_max-xs{ - max-width: 90%; - } - - > li { - .btn-usertools-wrapper(); // uniform li - .btn-usertools-num(); - - float: left; - - > strong, - > a { - display: block; - width: auto; - min-height: @toggle-size; - border: 1px solid @wikiicons-border; - border-radius: @ini_default_border_radius; // @ini_default_border_radius vs. @fix_border-radius - text-align: center; - margin: 0; - } - - .prefix { - .btn-prefix (); - .icon-clipboard(); - - display: block; - font-size: 1.2rem; - line-height: 1; - } - } // li - - a { - .btn-hover(); - - &[aria-expanded="false"] + #plugin__qc__wrapper { - display: none; - } - } - } } diff --git a/css/area_nav-page-attributes.less b/css/area_nav-page-attributes.less new file mode 100644 index 0000000..b7ab433 --- /dev/null +++ b/css/area_nav-page-attributes.less @@ -0,0 +1,75 @@ +/** + * Page Attribute Icons in the breadcrumb bar + */ + + +/* + + + + + icons in breadcrumb area + + + + + */ + +.page-attributes { + list-style: none; + float: right; + display: inline-block; + max-width: 30%; + margin: -.45em 0 0; + padding: 0; + + @media @screen_max-xs { + max-width: 90%; + } + + > li { + .btn-usertools-wrapper(); // uniform li + .btn-usertools-num(); + + position: relative; + float: left; + display: block; + width: auto; + min-height: @toggle-size; + text-align: center; + margin: 0 .25rem; + + strong { + display: block; + min-height: 1.64rem; + border: 1px solid @wikiicons-border; + border-radius: @ini_default_border_radius; + } + + a { + display: block; + width: auto; + min-height: 1.64rem; + background-color: @ini_nav_menu_hover_bg; + border: 1px solid @wikiicons-border; + border-radius: @ini_default_border_radius; + transition: @transition background-color, @transition border-color, @transition color; + + &:hover, + &:focus, + &:active { + background-color: @ini_nav_menu_hover_color; + border-color: @ini_nav_menu_hover_color; + color: @ini_nav_menu_hover_bg; + + span { + fill: @ini_nav_menu_hover_bg; + color: @ini_nav_menu_hover_bg; + } + } + } + + .prefix { + .btn-prefix(.26rem); + .icon-clipboard(); + + display: block; + font-size: 1.2rem; + line-height: 1; + } + + .num { + top: -.6em; + } + } +} diff --git a/css/base.less b/css/base.less index 4c4352f..a9446ab 100755 --- a/css/base.less +++ b/css/base.less @@ -455,18 +455,7 @@ nav > ul { padding: 0; } - html, body, div, span, applet, object, iframe, - h1, h2, h3, h4, h5, h6, p, blockquote, - a, abbr, acronym, address, big, cite, del, dfn, em, img, ins, kbd, q, s, samp, - small, strike, strong, sub, sup, tt, var, - b, u, i, center, - dl, dt, dd, ol, ul, li, - fieldset, form, label, legend, - table, caption, tbody, tfoot, thead, tr, th, td, - article, aside, canvas, details, embed, - figure, figcaption, footer, header, - menu, nav, output, ruby, section, summary, - time, mark, audio, video { + html, body { font-family: @font_family_screen; color: @ini_text; } diff --git a/css/base_mixins.less b/css/base_mixins.less index 82a5291..4f7428b 100755 --- a/css/base_mixins.less +++ b/css/base_mixins.less @@ -175,7 +175,7 @@ } } -.btn-usertools-num () { +.btn-usertools-num() { .num { position: absolute; right: -.4rem; @@ -192,7 +192,7 @@ } } -.btn-prefix () { +.btn-prefix(@margin-top:.3rem) { .fontello(); .hide-text-show-before(); @@ -200,15 +200,15 @@ font-size: @font-size-default; @media @screen_min-xxlg { - margin-top: .25rem; + margin-top: .22rem; } @media @screen_max-xxlg { - margin-top: .3rem; + margin-top: @margin-top; } @media @screen_max-md { - margin-top: .25rem; + margin-top: .2rem; } } diff --git a/css/plugins/do_tasks.less b/css/plugins/do_tasks.less index 261f5de..6b66253 100755 --- a/css/plugins/do_tasks.less +++ b/css/plugins/do_tasks.less @@ -19,7 +19,6 @@ ul.page-attributes { } .num { - margin-top: 1px; background-color: @noopentasks-border; // fix color: @noopentasks-color; // fix } diff --git a/css/plugins/qc.less b/css/plugins/qc.less index aaf152a..25688b9 100644 --- a/css/plugins/qc.less +++ b/css/plugins/qc.less @@ -1,79 +1,89 @@ /** - * This file provides styles for qc plugin + * Styles for the QC plugin */ -/* + + + + + global + + + + + */ +/* + + + + + icon in breadcrumb + + + + + */ -#dokuwiki__site { - .plugin__qc { - display: inline-block; - overflow: visible; - position: static; - } +.page-attributes .plugin_qc { + .qc_icon { + margin: 0; - #plugin__qc__icon { - display: none; - } - - #plugin__qc__link { - position: relative; - - .prefix { - .icon-emo-happy(); - - width: 100%; - font-size: @font-size-default; - - &::before { - width: 100%; - margin: 0; - } - } - } - - #plugin__qc__wrapper { - position: absolute; - right: 0; - z-index: 2000; - width: auto; - box-shadow: @box-shadow-bottom; - background: @ini_background_page_header; - background: -webkit-linear-gradient(top, @ini_background_page_header, @ini_background_content); - background: linear-gradient(top, @ini_background_page_header, @ini_background_content); - border: 0 none; - font-size: @font-size-default; - - p { - font-size: @font-size-default; - } - - #plugin__qc__out { - h1 { - font-size: @font-size-head3; - } - - h2 { - margin-top: 1.6em; - font-size: @font-size-head5; - } - > h1, - > h2, - > p, - > dl, - > div { - padding-left: 1rem; - margin-left: 0; - } - - > div p { - padding-left: 0; - margin-left: 0; - } - } - - &[aria-hidden="false"] { - margin-top: .5rem; + svg { + margin-top: .1em; + width: 1.6em; + height: 1.6em; + font-size: (@font-size-small - .06); } } } + + +/* + + + + + slideout output + + + + + */ +.qc-output { + min-width: 100%; + width: auto; + font-size: 90%; + box-shadow: @box-shadow-bottom; + margin-bottom: 0; + + h2 { + font-size: 1.3rem; + } + h3 { + font-size: 1.1rem; + } + h4, h5, h6 { + font-size: 1rem; + } + + + @media @screen_min-xxs { + margin-top: -(@margin-default + 1); + margin-right: -(@margin-default); + margin-left: -(@margin-default); + padding-left: @margin-default; + padding-right: @margin-default; + } + + @media @screen_max-md { + margin-top: -(@page_padding-top + 2); + margin-right: -(@margin-default * 1.6); + margin-left: -(@margin-default); + padding-top: @margin-default; + } + + @media @screen_max-xxs { + margin-left: -(@margin-small); + padding-left: @margin-small; + padding-right: @margin-default; + } + + div, + p { + margin-left: 0; + } + + dl { + dt, + dd { + padding-bottom: @small-spacing; + + @media @screen_max-xxs { + float: none; + display: inline-block; + width: 49%; + max-width: 10em; + vertical-align: top; + margin-left: 0; + } + } + } + + .qc_icon { + background-color: #fff; + border-radius: @fix_border-radius; + vertical-align: top; + padding: .1rem; + } +} diff --git a/js/plugins/do_tasks.js b/js/plugins/do_tasks.js index 78a8f34..1ff8717 100755 --- a/js/plugins/do_tasks.js +++ b/js/plugins/do_tasks.js @@ -1,47 +1,49 @@ -( function( $, spc ) { - - var togglePageAnalysis = function(){ - var $this = $('.page-attributes').find('.plugin__qc'); - try{ - var $link = $this.find('#plugin__qc__link'), - $container = $this.find('#plugin__qc__wrapper'); - - if($container.length < 1){ - $this.remove(); - }else{ - $container.attr('aria-hidden','true'); - var $icon = $container.find('#plugin__qc__icon'); - $container.find('#plugin__qc__out').removeAttr('style'); - $link.on( 'click', function(e){ - e.preventDefault(); - $icon.trigger('click'); - var oldState = ($link.attr('aria-expanded')=== "true" ); - $container.attr('aria-hidden',oldState); - $(this).attr('aria-expanded',!oldState); - - }); - - if($container.length > 0){ - var num = $container.attr('data-errors'); - if(num){ - $link.find('.num').empty().append(num); - $link.closest('li').removeClass('do_none'); - } - } - - } - - }catch(err){ - $this.remove(); - } - }; - - $(function(){ - togglePageAnalysis(); - }); - -} )( jQuery, spc ); - - - +// FIXME figure out what this did and why +// ( function( $, spc ) { +// +// var togglePageAnalysis = function(){ +// var $this = $('.page-attributes').find('.plugin__qc'); +// try{ +// var $link = $this.find('#plugin__qc__link'), +// $container = $this.find('#plugin__qc__wrapper'); +// +// if($container.length < 1){ +// $this.remove(); +// }else{ +// $container.attr('aria-hidden','true'); +// var $icon = $container.find('#plugin__qc__icon'); +// $container.find('#plugin__qc__out').removeAttr('style'); +// $link.on( 'click', function(e){ +// e.preventDefault(); +// $icon.trigger('click'); +// var oldState = ($link.attr('aria-expanded')=== "true" ); +// $container.attr('aria-hidden',oldState); +// $(this).attr('aria-expanded',!oldState); +// +// }); +// +// if($container.length > 0){ +// var num = $container.attr('data-errors'); +// if(num){ +// $link.find('.num').empty().append(num); +// $link.closest('li').removeClass('do_none'); +// } +// } +// +// } +// +// }catch(err){ +// $this.remove(); +// } +// }; +// +// $(function(){ +// togglePageAnalysis(); +// }); +// +// } )( jQuery, spc ); +// +// +// +// diff --git a/js/plugins/qc.js b/js/plugins/qc.js new file mode 100644 index 0000000..5a0de75 --- /dev/null +++ b/js/plugins/qc.js @@ -0,0 +1,37 @@ +/** + * Add custom QC functionality instead of using the plugin's mechanism + */ +jQuery(function () { + var $panel = jQuery('div.qc-output').hide(); + + // load summary + jQuery('.page-attributes .plugin_qc a').load( + DOKU_BASE + 'lib/exe/ajax.php', + { + call: 'plugin_qc_short', + id: JSINFO['id'] + }, + function () { + jQuery(this).find('span span').addClass('num'); + } + ).click(function (e) { + e.preventDefault(); + + if ($panel.html() == '') { + // load output + $panel.load( + DOKU_BASE + 'lib/exe/ajax.php', + { + call: 'plugin_qc_long', + id: JSINFO['id'] + }, + function () { + $panel.dw_show(); + } + ); + } else { + $panel.dw_toggle(); + } + }); + +}); diff --git a/main.php b/main.php index ea4794e..2dfb9b5 100755 --- a/main.php +++ b/main.php @@ -288,7 +288,7 @@ $classWideContent = ($ACT === "show") ? "": "wide-content "; /* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */ /* page quality / page tasks */ /* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */ - include('tpl/nav-page-quality-tasks.php'); + include('tpl/nav-page-attributes.php'); ?> <?php @@ -324,6 +324,7 @@ $classWideContent = ($ACT === "show") ? "": "wide-content "; include('tpl/nav-meta-box.php'); ?> </div> + <div class="qc-output"></div> <div class="msg-area"><?php html_msgarea();/*msg('Information.', 0);msg('Success', 1);msg('Notification', 2);msg('Fehler', -1);*/ ?></div> <?php diff --git a/script.js b/script.js index 0636fe1..ed8b13e 100755 --- a/script.js +++ b/script.js @@ -2,6 +2,7 @@ /* DOKUWIKI:include js/base/spc.js */ /* DOKUWIKI:include js/plugins/do_tasks.js */ +/* DOKUWIKI:include js/plugins/qc.js */ /* DOKUWIKI:include js/meta-box.js */ /* DOKUWIKI:include js/sidebar.js */ diff --git a/style.ini b/style.ini index bb136a1..e65c476 100755 --- a/style.ini +++ b/style.ini @@ -66,6 +66,7 @@ css/area_footer.less = all css/area_msg.less = all css/area_nav-direct.less = all css/area_nav-breadcrumb.less = all +css/area_nav-page-attributes.less = all css/area_nav-usertools.less = all css/area_sidebar-search.less = all css/area_nav-pagetools.less = all diff --git a/tpl/nav-meta-box.php b/tpl/nav-meta-box.php index c83145d..d8b9e5c 100755 --- a/tpl/nav-meta-box.php +++ b/tpl/nav-meta-box.php @@ -12,7 +12,7 @@ $tabs = \dokuwiki\template\sprintdoc\Template::getInstance()->getMetaBoxTabs(); if (empty($tab['tab']) || trim($tab['tab']) === '') { continue; } - echo '<li>'; + echo '<li class="' . $tab['id'] . '">'; echo '<a href="#' . $tab['id'] . '" aria-expanded="false">'; echo '<span class="prefix">'; echo $tab['label']; diff --git a/tpl/nav-page-attributes.php b/tpl/nav-page-attributes.php new file mode 100755 index 0000000..6fceac4 --- /dev/null +++ b/tpl/nav-page-attributes.php @@ -0,0 +1,57 @@ +<?php +if(!defined('DOKU_INC')) die(); + +/** @var \helper_plugin_do $doPlugin */ +$doPlugin = plugin_load('helper', 'do'); +/** @var \helper_plugin_qc $qcPlugin */ +$qcPlugin = plugin_load('helper', 'qc'); + + +if($doPlugin !== null || $qcPlugin !== null) { + echo '<ul class="page-attributes">'; +} + + +if($qcPlugin && $qcPlugin->shouldShow()) { + echo '<li class="plugin_qc"><a href="#">…</a></li>'; // filled by javascript +} + + +if($doPlugin !== null) { + $count = $doPlugin->getPageTaskCount(); + $num = $count['count']; + $title = ""; + + if($num == 0) { // no tasks - does not exist do in plug-in + $class = "do_none"; + $title = tpl_getLang('tasks_page_none'); + } elseif($count['undone'] == 0) { // all tasks done + $class = 'do_done'; + $title = $this->getLang('title_alldone'); + } elseif($count['late'] == 0) { // open tasks but none late + $class = 'do_undone'; + $title = sprintf(tpl_getLang('title_intime'), $count['undone']); + } else { // late tasks + $class = 'do_late'; + $title = sprintf(tpl_getLang('title_late'), $count['undone'], $count['late']); + } + $markup = "<li class=\"plugin__do_pagetasks " . $class . "\" title=\"'.$title.'\"><strong><span class=\"prefix\">" . tpl_getLang('prefix_tasks_page') . " </span><span class=\"num\">" . $num . "</span></strong></li>"; + + echo $markup; +} + +if($doPlugin !== null || $qcPlugin !== null) { + echo "</ul>"; +} + + + +/* + + +$out = '<div class="plugin__do_pagetasks" title="' . $title . '"><span class="' . $class . '">'; +$out .= $count['undone']; +$out .= '</span></div>'; + +if($return) return $out; +echo $out;*/ diff --git a/tpl/nav-page-quality-tasks.php b/tpl/nav-page-quality-tasks.php deleted file mode 100755 index 2a1977c..0000000 --- a/tpl/nav-page-quality-tasks.php +++ /dev/null @@ -1,54 +0,0 @@ -<?php - if (!defined('DOKU_INC')) die(); -?> - -<?php - /** @var \helper_plugin_do $doPlugin */ - $doPlugin = plugin_load('helper','do'); - - /** @var \helper_plugin_qc $qc */ - $qc = plugin_load('helper','qc'); - if ($doPlugin !== null ||$qc ) { - echo "<ul class=\"page-attributes\">"; - } - if ($qc) { - echo "<li class=\"plugin__qc do_none\"><a id=\"plugin__qc__link\" aria-expanded=\"false\" href=\"#plugin__qc__wrapper\"><span class=\"prefix\">".tpl_getLang('quality_trigger')."</span><span class=\"num\">0</span></strong></a>"; - $qc->tplErrorCount(); - echo "</li>"; - } - if ($doPlugin !== null ) { - $count = $doPlugin->getPageTaskCount(); - $num = $count['count']; - $title = ""; - - if($num == 0){ // no tasks - does not exist do in plug-in - $class = "do_none"; - $title = tpl_getLang('tasks_page_none'); - } elseif($count['undone'] == 0){ // all tasks done - $class = 'do_done'; - $title = $this->getLang('title_alldone'); - }elseif($count['late'] == 0) { // open tasks but none late - $class = 'do_undone'; - $title = sprintf($this->getLang('title_intime'), $count['undone']); - } else { // late tasks - $class = 'do_late'; - $title = sprintf($this->getLang('title_late'), $count['undone'], $count['late']); - } - $markup = "<li class=\"plugin__do_pagetasks ".$class."\" title=\"'.$title.'\"><strong><span class=\"prefix\">".tpl_getLang('prefix_tasks_page')." </span><span class=\"num\">".$num."</span></strong></li>"; - - echo $markup; - } - - if ($doPlugin !== null ||$qc ) { - echo "</ul>"; - } - -/* - - -$out = '<div class="plugin__do_pagetasks" title="' . $title . '"><span class="' . $class . '">'; -$out .= $count['undone']; -$out .= '</span></div>'; - -if($return) return $out; -echo $out;*/