diff --git a/css/area_nav-pagetools.less b/css/area_nav-pagetools.less index 89f75a2..6586eaf 100755 --- a/css/area_nav-pagetools.less +++ b/css/area_nav-pagetools.less @@ -27,9 +27,8 @@ } } - nav#dokuwiki__pagetools { - @toolbox-width: 32px; + @toolbox-size: 30px; top: 3.05rem; z-index: 100; @@ -42,25 +41,65 @@ nav#dokuwiki__pagetools { right: 8px; } - &:hover { - ul { - li { - a { - box-shadow: none; - background-image: none; - border-color: transparent; - } - } - } - } - ul { li { + @page-tools_svg-size: 25px; + @page-tools_svg-space: (@toolbox-size - @page-tools_svg-size) / 2; + * { font-size: @font-size-default; } - &.plugin_move_page { + a { + .fontello-double(); + + position: relative; + height: auto; + min-height: @toolbox-size; // for nav:hover + width: @toolbox-size; // for nav:hover + opacity: .6; + color: @color-nav; + font-size: @font-size-default; + padding: 2px @toolbox-size 2px 2px; + + * { + color: inherit; + } + + &::before { + display: none; + } + + &:hover, + &:focus, + &:active { + opacity: 1; + color: @color-nav-hover; + background-color: #FFF; + } + + span { + .sr-only(); + + padding-right: .5rem; + padding-left: .3rem; + } + + svg { + display: inline-block; + width: @page-tools_svg-size; + height: @page-tools_svg-size; + vertical-align: middle; + fill: @color-nav; + margin: @page-tools_svg-space; + } + + &.top { + margin-top: 1em; + } + } + + &.plugin_move_page {background-color: deeppink !important; a { opacity: .6; color: @color-nav; @@ -78,136 +117,9 @@ nav#dokuwiki__pagetools { } } } - - a { - .fontello-double(); - - position: relative; - min-height: @toolbox-width; // for nav:hover - opacity: .6; - color: @color-nav; - font-size: @font-size-default; - - * { - color: inherit; - } - - &::before { - display: none; - } - - &::after { - position: absolute; - top: 0; - right: 0; - width: @toolbox-width; - height: 100%; - box-sizing: border-box; - font-size: @font-size-big; - margin: 0; - padding-top: .2rem; - - @media @screen_min-md { - background-color: @color-site-bg; - } - - @media @screen_max-xlg { - padding-top: .25rem; - } - - @media @screen_max-lg { - padding-top: .4rem; - } - - @media @screen_max-md { - background-color: #FFF; - padding-top: 0; - } - } - - &:hover, - &:focus, - &:active { - opacity: 1; - color: @color-nav-hover; - background-color: #FFF; - } - - &.source { - .icon-code(); - - &::after { - @media @screen_min-xlg { - padding-top: .25rem; - } - - @media @screen_max-xlg { - padding-top: .35rem; - } - - @media @screen_max-md { - padding-top: .05rem; - } - } - } - - &.edit { - .icon-pencil(); - } - - &.revs { - .icon-revisions-history(); - } - - &.backlink { - .icon-link(); - } - - &.top { - .icon-up-bold(); - margin-top: 1em; - - &::after { - @media @screen_min-lg { - padding-top: .15rem; - } - - @media @screen_max-lg { - padding-top: .25rem; - } - - @media @screen_max-md { - padding-top: .05rem; - } - } - } - - &.plugin_bookcreator_addtobook { - .icon-book-open(); - } - - &.export_pdf { - .icon-file-pdf(); - } - - &.show { - .icon-file-text(); - } - } } } -/* - -*/ + &:hover { ul { background-color: #fff; @@ -215,16 +127,27 @@ nav#dokuwiki__pagetools { li { a { + box-shadow: none; + background-image: none; opacity: .8; - - &::after { - background-color: #FFF; - } + border-color: transparent; + padding: 2px 0 2px 2px; &:hover, &:focus, &:active { opacity: 1; + + svg { + fill: @color-nav-hover; + } + } + + span { + position: static; + width: auto; + height: auto; + margin: auto; } } } diff --git a/images/tools/00-default_checkbox-blank-circle-outline.svg b/images/tools/00-default_checkbox-blank-circle-outline.svg new file mode 100644 index 0000000..22f76f2 --- /dev/null +++ b/images/tools/00-default_checkbox-blank-circle-outline.svg @@ -0,0 +1 @@ + diff --git a/images/tools/01-edit_pencil.svg b/images/tools/01-edit_pencil.svg new file mode 100644 index 0000000..31cb7be --- /dev/null +++ b/images/tools/01-edit_pencil.svg @@ -0,0 +1 @@ + diff --git a/images/tools/02-create_pencil.svg b/images/tools/02-create_pencil.svg new file mode 100644 index 0000000..eddb11a --- /dev/null +++ b/images/tools/02-create_pencil.svg @@ -0,0 +1 @@ + diff --git a/images/tools/03-draft_android-studio.svg b/images/tools/03-draft_android-studio.svg new file mode 100644 index 0000000..c270f1a --- /dev/null +++ b/images/tools/03-draft_android-studio.svg @@ -0,0 +1 @@ + diff --git a/images/tools/04-show_file-document.svg b/images/tools/04-show_file-document.svg new file mode 100644 index 0000000..b6de9db --- /dev/null +++ b/images/tools/04-show_file-document.svg @@ -0,0 +1 @@ + diff --git a/images/tools/05-source_file-xml.svg b/images/tools/05-source_file-xml.svg new file mode 100644 index 0000000..f6e5848 --- /dev/null +++ b/images/tools/05-source_file-xml.svg @@ -0,0 +1 @@ + diff --git a/images/tools/06-revert_replay.svg b/images/tools/06-revert_replay.svg new file mode 100644 index 0000000..21c93de --- /dev/null +++ b/images/tools/06-revert_replay.svg @@ -0,0 +1 @@ + diff --git a/images/tools/07-revisions_history.svg b/images/tools/07-revisions_history.svg new file mode 100644 index 0000000..75b8d13 --- /dev/null +++ b/images/tools/07-revisions_history.svg @@ -0,0 +1 @@ + diff --git a/images/tools/08-backlink_link-variant.svg b/images/tools/08-backlink_link-variant.svg new file mode 100644 index 0000000..4b665bd --- /dev/null +++ b/images/tools/08-backlink_link-variant.svg @@ -0,0 +1 @@ + diff --git a/images/tools/09-subscribe_email-outline.svg b/images/tools/09-subscribe_email-outline.svg new file mode 100644 index 0000000..27d9515 --- /dev/null +++ b/images/tools/09-subscribe_email-outline.svg @@ -0,0 +1 @@ + diff --git a/images/tools/10-top_arrow-up.svg b/images/tools/10-top_arrow-up.svg new file mode 100644 index 0000000..50967f7 --- /dev/null +++ b/images/tools/10-top_arrow-up.svg @@ -0,0 +1 @@ + diff --git a/images/tools/11-mediamanager_folder-image.svg b/images/tools/11-mediamanager_folder-image.svg new file mode 100644 index 0000000..8602b4c --- /dev/null +++ b/images/tools/11-mediamanager_folder-image.svg @@ -0,0 +1 @@ + diff --git a/images/tools/12-back_arrow-left.svg b/images/tools/12-back_arrow-left.svg new file mode 100644 index 0000000..c0cf75b --- /dev/null +++ b/images/tools/12-back_arrow-left.svg @@ -0,0 +1 @@ + diff --git a/tpl.php b/tpl.php new file mode 100644 index 0000000..cfb3231 --- /dev/null +++ b/tpl.php @@ -0,0 +1,100 @@ + '00-default_checkbox-blank-circle-outline.svg', + 'edit' => '01-edit_pencil.svg', + 'create' => '02-create_pencil.svg', + 'draft' => '03-draft_android-studio.svg', + 'show' => '04-show_file-document.svg', + 'source' => '05-source_file-xml.svg', + 'revert' => '06-revert_replay.svg', + 'revs' => '07-revisions_history.svg', + 'backlink' => '08-backlink_link-variant.svg', + 'subscribe' => '09-subscribe_email-outline.svg', + 'top' => '10-top_arrow-up.svg', + 'mediaManager' => '11-mediamanager_folder-image.svg', + 'img_backto' => '12-back_arrow-left.svg', + ); + +/** + * Return the HTML for one of the default actions + * + * Reimplements parts of tpl_actionlink + * + * @param string $action + * @return string + */ + static public function pageToolAction($action) { + $data = tpl_get_action($action); + if(!is_array($data)) return ''; + global $lang; + + if($data['id'][0] == '#') { + $linktarget = $data['id']; + } else { + $linktarget = wl($data['id'], $data['params']); + } + $caption = $lang['btn_' . $data['type']]; + if(strpos($caption, '%s')) { + $caption = sprintf($caption, $data['replacement']); + } + + $svg = __DIR__ . '/images/tools/' . self::$icons[$data['type']]; + + return self::pageToolItem( + $linktarget, + $caption, + $svg, + array('accesskey' => $data['accesskey']) + ); + } + +/** + * Return the HTML for a page action + * + * Plugins may use this in TEMPLATE_PAGETOOLS_DISPLAY + * + * @param string $link The link + * @param string $caption The label of the action + * @param string $svg The icon to show + * @param string[] $args HTML attributes for the item + * @return string + */ + static public function pageToolItem($link, $caption, $svg, $args = array()) { + if(blank($args['title'])) { + $args['title'] = $caption; + } + + if(!blank($args['accesskey'])) { + $args['title'] .= ' [' . strtoupper($args['accesskey']) . ']'; + } + + if(blank($args['rel'])) { + $args['rel'] = 'nofollow'; + } + + $args['href'] = $link; + + $svg = inlineSVG($svg); + if(!$svg) $svg = inlineSVG(__DIR__ . '/images/tools/' . self::$icons['default']); + + $attributes = buildAttributes($args, true); + + $out = ""; + $out .= '' . hsc($caption) . ''; + $out .= $svg; + $out .= ''; + + return $out; + } +} diff --git a/tpl/nav-page-tools.php b/tpl/nav-page-tools.php index fbf4f0c..477879b 100755 --- a/tpl/nav-page-tools.php +++ b/tpl/nav-page-tools.php @@ -7,16 +7,32 @@
- +