EH22/dokuwiki-template-sprintdoc-modified
0
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

SPR-837: page tools -> material design icons, default size - php from pullrequest included

Browse source
This commit is contained in:
Silke Pisulla 2017-03-16 15:29:03 +01:00
commit 02dbc7fa49
16 changed files with 209 additions and 157 deletions
Download patch file Download diff file Expand all files Collapse all files

217
css/area_nav-pagetools.less
View file

@ -27,9 +27,8 @@
} }
} }
nav#dokuwiki__pagetools { nav#dokuwiki__pagetools {
@toolbox-width: 32px; @toolbox-size: 30px;
top: 3.05rem; top: 3.05rem;
z-index: 100; z-index: 100;
@ -42,25 +41,65 @@ nav#dokuwiki__pagetools {
right: 8px; right: 8px;
} }
&:hover {
ul {
li {
a {
box-shadow: none;
background-image: none;
border-color: transparent;
}
}
}
}
ul { ul {
li { li {
@page-tools_svg-size: 25px;
@page-tools_svg-space: (@toolbox-size - @page-tools_svg-size) / 2;
* { * {
font-size: @font-size-default; 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 { a {
opacity: .6; opacity: .6;
color: @color-nav; 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();
}
}
} }
} }
/*
<ul>
<li><a href="#" class="action edit" title="Diese Seite bearbeiten [E]">Diese Seite bearbeiten</a></li>
<li><a href="#" class="action revs" title="Ältere Versionen [O]">Ältere Versionen</a></li>
<li><a href="#" class="action backlink" title="Links hierher">Links hierher</a></li>
<li><a href="#" class="action export_pdf" title="PDF exportieren"><span>PDF exportieren</span></a></li>
<li><a href="#" class="action source" title="PDF exportieren"><span>source</span></a></li>
<li><a href="#" class="action show" title="PDF exportieren"><span>show</span></a></li>
<li><a href="#" class="action plugin_bookcreator_addtobook" title="PDF exportieren"><span>was auch immer</span></a></li>
<li><a href="#" class="action top" title="Nach oben [T]">Nach oben</a></li>
</ul>
*/
&:hover { &:hover {
ul { ul {
background-color: #fff; background-color: #fff;
@ -215,16 +127,27 @@ nav#dokuwiki__pagetools {
li { li {
a { a {
box-shadow: none;
background-image: none;
opacity: .8; opacity: .8;
border-color: transparent;
&::after { padding: 2px 0 2px 2px;
background-color: #FFF;
}
&:hover, &:hover,
&:focus, &:focus,
&:active { &:active {
opacity: 1; opacity: 1;
svg {
fill: @color-nav-hover;
}
}
span {
position: static;
width: auto;
height: auto;
margin: auto;
} }
} }
} }

1
images/tools/00-default_checkbox-blank-circle-outline.svg Normal file
View file

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M12 20a8 8 0 0 1-8-8 8 8 0 0 1 8-8 8 8 0 0 1 8 8 8 8 0 0 1-8 8m0-18A10 10 0 0 0 2 12a10 10 0 0 0 10 10 10 10 0 0 0 10-10A10 10 0 0 0 12 2z"/></svg>
Side by side

After

Width:  |  Height:  |  Size: 240 B

1
images/tools/01-edit_pencil.svg Normal file
View file

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M20.71 7.04c.39-.39.39-1.04 0-1.41l-2.34-2.34c-.37-.39-1.02-.39-1.41 0l-1.84 1.83 3.75 3.75M3 17.25V21h3.75L17.81 9.93l-3.75-3.75L3 17.25z"/></svg>
Side by side

After

Width:  |  Height:  |  Size: 240 B

1
images/tools/02-create_pencil.svg Normal file
View file

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" height="24" width="24"><path d="M13.118 16.118h3v-3h2v3h3v2h-3v3h-2v-3h-3zM20.71 7.04c.39-.39.39-1.04 0-1.41l-2.34-2.34c-.37-.39-1.02-.39-1.41 0l-1.84 1.83 3.75 3.75M3 17.25V21h3.75L17.81 9.93l-3.75-3.75z"/></svg>
Side by side

After

Width:  |  Height:  |  Size: 274 B

1
images/tools/03-draft_android-studio.svg Normal file
View file

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M11 2h2v2h.5A1.5 1.5 0 0 1 15 5.5V9l-.44.44 1.64 2.84C17.31 11.19 18 9.68 18 8h2c0 2.42-1.07 4.59-2.77 6.06l3.14 5.44.13 2.22-1.87-1.22-3.07-5.33c-1.06.53-2.28.83-3.56.83-1.28 0-2.5-.3-3.56-.83L5.37 20.5 3.5 21.72l.13-2.22L9.44 9.44 9 9V5.5A1.5 1.5 0 0 1 10.5 4h.5V2M9.44 13.43c.78.37 1.65.57 2.56.57.91 0 1.78-.2 2.56-.57L13.1 10.9h-.01c-.62.6-1.56.6-2.18 0h-.01l-1.46 2.53M12 6a1 1 0 0 0-1 1 1 1 0 0 0 1 1 1 1 0 0 0 1-1 1 1 0 0 0-1-1z"/></svg>
Side by side

After

Width:  |  Height:  |  Size: 538 B

1
images/tools/04-show_file-document.svg Normal file
View file

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M13 9h5.5L13 3.5V9M6 2h8l6 6v12a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V4c0-1.11.89-2 2-2m9 16v-2H6v2h9m3-4v-2H6v2h12z"/></svg>
Side by side

After

Width:  |  Height:  |  Size: 210 B

1
images/tools/05-source_file-xml.svg Normal file
View file

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M13 9h5.5L13 3.5V9M6 2h8l6 6v12a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V4c0-1.11.89-2 2-2m.12 13.5l3.74 3.74 1.42-1.41-2.33-2.33 2.33-2.33-1.42-1.41-3.74 3.74m11.16 0l-3.74-3.74-1.42 1.41 2.33 2.33-2.33 2.33 1.42 1.41 3.74-3.74z"/></svg>
Side by side

After

Width:  |  Height:  |  Size: 320 B

1
images/tools/06-revert_replay.svg Normal file
View file

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M12 5V1L7 6l5 5V7a6 6 0 0 1 6 6 6 6 0 0 1-6 6 6 6 0 0 1-6-6H4a8 8 0 0 0 8 8 8 8 0 0 0 8-8 8 8 0 0 0-8-8z"/></svg>
Side by side

After

Width:  |  Height:  |  Size: 206 B

1
images/tools/07-revisions_history.svg Normal file
View file

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M11 7v5.11l4.71 2.79.79-1.28-4-2.37V7m0-5C8.97 2 5.91 3.92 4.27 6.77L2 4.5V11h6.5L5.75 8.25C6.96 5.73 9.5 4 12.5 4a7.5 7.5 0 0 1 7.5 7.5 7.5 7.5 0 0 1-7.5 7.5c-3.27 0-6.03-2.09-7.06-5h-2.1c1.1 4.03 4.77 7 9.16 7 5.24 0 9.5-4.25 9.5-9.5A9.5 9.5 0 0 0 12.5 2z"/></svg>
Side by side

After

Width:  |  Height:  |  Size: 359 B

1
images/tools/08-backlink_link-variant.svg Normal file
View file

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M10.59 13.41c.41.39.41 1.03 0 1.42-.39.39-1.03.39-1.42 0a5.003 5.003 0 0 1 0-7.07l3.54-3.54a5.003 5.003 0 0 1 7.07 0 5.003 5.003 0 0 1 0 7.07l-1.49 1.49c.01-.82-.12-1.64-.4-2.42l.47-.48a2.982 2.982 0 0 0 0-4.24 2.982 2.982 0 0 0-4.24 0l-3.53 3.53a2.982 2.982 0 0 0 0 4.24m2.82-4.24c.39-.39 1.03-.39 1.42 0a5.003 5.003 0 0 1 0 7.07l-3.54 3.54a5.003 5.003 0 0 1-7.07 0 5.003 5.003 0 0 1 0-7.07l1.49-1.49c-.01.82.12 1.64.4 2.43l-.47.47a2.982 2.982 0 0 0 0 4.24 2.982 2.982 0 0 0 4.24 0l3.53-3.53a2.982 2.982 0 0 0 0-4.24.973.973 0 0 1 0-1.42z"/></svg>
Side by side

After

Width:  |  Height:  |  Size: 641 B

1
images/tools/09-subscribe_email-outline.svg Normal file
View file

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M20 4H4a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V6a2 2 0 0 0-2-2m0 14H4V8l8 5 8-5v10m0-12l-8 5-8-5h16z"/></svg>
Side by side

After

Width:  |  Height:  |  Size: 211 B

1
images/tools/10-top_arrow-up.svg Normal file
View file

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M13 20h-2V8l-5.5 5.5-1.42-1.42L12 4.16l7.92 7.92-1.42 1.42L13 8v12z"/></svg>
Side by side

After

Width:  |  Height:  |  Size: 169 B

1
images/tools/11-mediamanager_folder-image.svg Normal file
View file

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M5 17l4.5-6 3.5 4.5 2.5-3L19 17m1-11h-8l-2-2H4a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2z"/></svg>
Side by side

After

Width:  |  Height:  |  Size: 213 B

1
images/tools/12-back_arrow-left.svg Normal file
View file

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M20 11v2H8l5.5 5.5-1.42 1.42L4.16 12l7.92-7.92L13.5 5.5 8 11h12z"/></svg>
Side by side

After

Width:  |  Height:  |  Size: 166 B

100
tpl.php Normal file
View file

@ -0,0 +1,100 @@
<?php
namespace dokuwiki\template\sprintdoc;
/**
* Class tpl
*
* Provides additional template functions for the dokuwiki template
* @package dokuwiki\tpl\dokuwiki
*/
class tpl {
static $icons = array(
'default' => '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 = "<a $attributes>";
$out .= '<span>' . hsc($caption) . '</span>';
$out .= $svg;
$out .= '</a>';
return $out;
}
}

36
tpl/nav-page-tools.php
View file

@ -7,16 +7,32 @@
<div class="tools"> <div class="tools">
<?php include('nav-status.php');?> <?php include('nav-status.php');?>
<ul> <ul>
<?php tpl_toolsevent('pagetools', array( <?php
'edit' => tpl_action('edit', 1, 'li', 1), $data = array(
'revisions' => tpl_action('revisions', 1, 'li', 1), 'view' => 'main-svg',
'backlink' => tpl_action('backlink', 1, 'li', 1), 'items' => array(
'subscribe' => tpl_action('subscribe', 1, 'li', 1), 'edit' => dokuwiki\template\sprintdoc\tpl::pageToolAction('edit'),
'revert' => tpl_action('revert', 1, 'li', 1), 'revert' => dokuwiki\template\sprintdoc\tpl::pageToolAction('revert'),
'top' => tpl_action('top', 1, 'li', 1), 'revisions' => dokuwiki\template\sprintdoc\tpl::pageToolAction('revisions'),
)); ?> 'backlink' => dokuwiki\template\sprintdoc\tpl::pageToolAction('backlink'),
</ul> 'subscribe' => dokuwiki\template\sprintdoc\tpl::pageToolAction('subscribe'),
'top' => dokuwiki\template\sprintdoc\tpl::pageToolAction('top'),
)
);
// the page tools can be amended through a custom plugin hook
$evt = new Doku_Event('TEMPLATE_PAGETOOLS_DISPLAY', $data);
if($evt->advise_before()){
foreach($evt->data['items'] as $k => $html) {
if($html)
echo "<li>$html</li>";
}
}
$evt->advise_after();
unset($data);
?>
</ul>
</div> </div>
</nav> </nav>
<?php endif; ?> <?php endif; ?>