improved various minor frontend issues in styling plugin

* improved spacing of popup
* made primary buttons clearer
* xhtml and validity fixes
* improved some lang strings
* moved 'open as popup' after intro
* fixed page reload after clicking 'open as popup' button

lib/plugins/styling/admin.php

@@ -43,7 +43,7 @@ class admin_plugin_styling extends DokuWiki_Admin_Plugin {
      */
     public function html() {
         $class = 'nopopup';
-        if($this->ispopup) $class = 'ispopup';
+        if($this->ispopup) $class = 'ispopup page';
 
         echo '<div id="plugin__styling" class="'.$class.'">';
         ptln('<h1>'.$this->getLang('menu').'</h1>');
@@ -75,7 +75,7 @@ class admin_plugin_styling extends DokuWiki_Admin_Plugin {
 
             echo '<form class="styling" method="post" action="'.$target.'">';
 
-            echo '<table>';
+            echo '<table><tbody>';
             foreach($replacements as $key => $value) {
                 $name = tpl_getLang($key);
                 if(empty($name)) $name = $this->getLang($key);
@@ -83,22 +83,22 @@ class admin_plugin_styling extends DokuWiki_Admin_Plugin {
 
                 echo '<tr>';
                 echo '<td>'.$name.'</td>';
-                echo '<td><input type="text" name="tpl['.hsc($key).']" value="'.hsc($value).'" '.$this->colorClass($key).' />';
+                echo '<td><input type="text" name="tpl['.hsc($key).']" value="'.hsc($value).'" '.$this->colorClass($key).' /></td>';
                 echo '</tr>';
             }
-            echo '</table>';
+            echo '</tbody></table>';
 
             echo '<p>';
-            echo '<input type="submit" name="run[preview]" class="btn_preview" value="'.$this->getLang('btn_preview').'">';
-            echo '<input type="submit" name="run[reset]" value="'.$this->getLang('btn_reset').'">'; #FIXME only if preview.ini exists
+            echo '<input type="submit" name="run[preview]" class="btn_preview primary" value="'.$this->getLang('btn_preview').'" /> ';
+            echo '<input type="submit" name="run[reset]" value="'.$this->getLang('btn_reset').'" />'; #FIXME only if preview.ini exists
             echo '</p>';
 
             echo '<p>';
-            echo '<input type="submit" name="run[save]" value="'.$this->getLang('btn_save').'">';
+            echo '<input type="submit" name="run[save]" class="primary" value="'.$this->getLang('btn_save').'" />';
             echo '</p>';
 
             echo '<p>';
-            echo '<input type="submit" name="run[revert]" value="'.$this->getLang('btn_revert').'">'; #FIXME only if local.ini exists
+            echo '<input type="submit" name="run[revert]" value="'.$this->getLang('btn_revert').'" />'; #FIXME only if local.ini exists
             echo '</p>';
 
             echo '</form>';

lib/plugins/styling/lang/en/lang.php

@@ -8,15 +8,15 @@
 // menu entry for admin plugins
 $lang['menu'] = 'Template Style Settings';
 
-$lang['js']['loader'] = 'Preview is loading...<br>if this does not goes away, your values may be faulty';
-$lang['js']['popup'] = 'Open as Popup';
+$lang['js']['loader'] = 'Preview is loading...<br />if this does not goes away, your values may be faulty';
+$lang['js']['popup'] = 'Open as a popup';
 
 // custom language strings for the plugin
 $lang['error'] = 'Sorry, this template does not support this functionality.';
 
-$lang['btn_preview'] = 'Preview your changes';
-$lang['btn_save']    = 'Save your changes';
-$lang['btn_reset']   = 'Reset your current changes';
+$lang['btn_preview'] = 'Preview changes';
+$lang['btn_save']    = 'Save changes';
+$lang['btn_reset']   = 'Reset current changes';
 $lang['btn_revert']  = 'Revert all styles back to the template\'s default';
 
 // default guaranteed placeholders

lib/plugins/styling/popup.php

@@ -4,6 +4,7 @@ require_once(DOKU_INC . 'inc/init.php');
 //close session
 session_write_close();
 header('Content-Type: text/html; charset=utf-8');
+header('X-UA-Compatible: IE=edge,chrome=1');
 
 /** @var admin_plugin_styling $plugin */
 $plugin = plugin_load('admin', 'styling');
@@ -14,15 +15,16 @@ $plugin->ispopup = true;
 $plugin->handle();
 
 // output plugin in a very minimal template:
-?>
-<html>
+?><!DOCTYPE html>
+<html lang="<?php echo $conf['lang'] ?>" dir="<?php echo $lang['direction'] ?>">
 <head>
+    <meta charset="utf-8" />
     <title><?php echo $plugin->getLang('menu') ?></title>
     <?php tpl_metaheaders(false) ?>
+    <meta name="viewport" content="width=device-width,initial-scale=1" />
+    <?php echo tpl_favicon(array('favicon')) ?>
 </head>
-<body>
-    <div class="dokuwiki page">
-        <?php $plugin->html() ?>
-    </div>
+<body class="dokuwiki">
+    <?php $plugin->html() ?>
 </body>
 </html>

lib/plugins/styling/script.js

@@ -12,14 +12,15 @@ jQuery(function () {
 
     // add button on main page
     if (!$styling_plugin.hasClass('ispopup')) {
-        var $hl = $styling_plugin.find('h1').first();
-        var $btn = jQuery('<button class="btn">' + LANG.plugins.styling.popup + '</button>');
-        $hl.append($btn);
+        var $form = $styling_plugin.find('form.styling').first();
+        var $btn = jQuery('<button>' + LANG.plugins.styling.popup + '</button>');
+        $form.prepend($btn);
 
         $btn.click(function (e) {
             var windowFeatures = "menubar=no,location=no,resizable=yes,scrollbars=yes,status=false,width=500,height=500";
             window.open(DOKU_BASE + 'lib/plugins/styling/popup.php', 'styling', windowFeatures)
-        });
+            e.preventDefault();
+        }).wrap('<p></p>');
         return;
     }
 
@@ -54,9 +55,10 @@ jQuery(function () {
             'background-color': '#fff',
             'opacity':          '0.7',
             'color':            '#000',
-            'font-size':        '40px',
+            'font-size':        '2.5em',
             'text-align':       'center',
-            'line-height':      '90px'
+            'line-height':      1.5,
+            'padding-top':       '2em'
         });
         window.opener.jQuery('body').append($loader);
     }

lib/plugins/styling/style.less

 #plugin__styling {
-
-    h1 button {
-        font-size: 12px;
-        line-height: 16px;
-        margin-left: 1em;
+    input.primary {
+        font-weight: bold;
     }
 }