Template Style Dialog Plugin #1163

splitbrain · 2015-05-19T18:58:55Z

This plugin allows administrators to adjust the style.ini settings. Works fine for me but should be tested by others for usability.

I'm not too hapy with it

chang-zhao · 2015-05-20T16:37:07Z

1: The doc page https://www.dokuwiki.org/plugin:styler is about another plugin called styler (2007).

2: "Template Style Settings" popover appears to me empty and partly off-screen, and jumps down when I try to resize it. Firefox 31.

splitbrain · 2015-05-20T18:53:11Z

Ah I guess we have to find a different name then.

Are you sure you're running a fresh cache? Try touching conf/local.php. Can you provide any error messages?

chang-zhao · 2015-05-20T19:53:23Z

It seems the problem is here:
jQuery.post(
DOKU_BASE + '/lib/exe/ajax.php',
...
$dialog.load(
DOKU_BASE + '/lib/exe/ajax.php',

Because DOKU_BASE = '/'
the call goes to http://lib/exe/ajax.php

chang-zhao · 2015-05-21T09:17:13Z

Yes, removing first slash from '/lib/exe/ajax.php' helps.
The rest:

When JS works, it makes double && in the address:
http://test/doku.php?id=start&do=admin&page=styler
=>
http://test/doku.php?id=start&&page=styler
- Popover positioning is strange. Initially its top is behind my upper screen border; when I try to resize it it jumps to the bottom of my screen (though the position at the bottom is probably intended (?) - not interfering with a usual page layout).
- (Also I don't see "Preview your changes" button in a popover, but that's probably intended).
- In general, color picker and so on seems OK to me, at least when using a mouse.
  Using keyboard might cause some inconveniencies with scrolling to the GUI of the current color picker.

styler was already taken

splitbrain · 2015-05-23T13:35:12Z

good catches. I fixed them.

Regarding the positioning. That's weird. It's supposed to be in the lower left corner. What template do you use and what browsers?

This commit consists of patches automatically generated for this project on https://scrutinizer-ci.com

chang-zhao · 2015-05-24T05:43:45Z

Standard template, Firefox 31.
Firebug inspection shows positioning with some negative numbers in "top", for example:

<div class="ui-dialog ui-widget ui-widget-content ui-corner-all ui-front ui-draggable ui-resizable" style="position: relative; height: auto; width: 500px; top: -706.567px; left: -8px; display: block;" tabindex="-1" role="dialog" aria-describedby="ui-id-1" aria-labelledby="ui-id-2">

I use zooming FF plugins such as NoSquint, but maybe the problem is somewhere else.

Scrutinizer Auto-Fixes

selfthinker · 2015-05-24T22:38:38Z

.gitignore

@@ -47,6 +47,7 @@
 !/lib/plugins/popularity
 !/lib/plugins/revert
 !/lib/plugins/safefnrecode
+!/lib/plugins/styler


You forgot to swap the name here as well.

I personally don't like either "styler" or "styling". Those names are far too generic and sound like they would do something else. What was wrong with its original name "templatestyler"?

The name is in spirit with "config" and "extension". There was never a "original name". I started with styler which was taken.

With "original name" I mean the one I gave the prototype which you based this on. The folder was called "templatestyler".

The problem I have with calling it "styling" is that it's not clear what it is styling. And it is not even "styling" a lot. It is changing existing styles based on a handful of variables.
It is not the same as "config" or "extension".

splitbrain · 2015-06-26T12:05:58Z

@selfthinker @chang-zhao can you have a look at this again? I completely removed the jQuery UI dialog in favor of a real popup (new browser window). This simplifies the whole handling a lot and has the advantage that we can display the popup with a sane style even if a user (temporarily) breaks the styles.

I reintroduced the preview button because preview is relatively slow. A simple loading screen takes care of informing the user that something is happeing.

Since I no longer use the cookie, a user needs to press "preview" whenever she browses to a different page. Is that okay or should I reintroduce the cookie?

chang-zhao · 2015-06-26T13:48:30Z

If there is a reason to not use cookie, then it's OK. We just give a user warning about that, and (s)he presses "Preview" each time. Shouldn't be a big problem IMHO.

There is still that thing with Color pickers: if you focus on a numeric input field, located near the bottom of a viewport, then a picker panel can appear (in most part) below the bottom of the window. Then choosing a color by arrow keys etc can happen in the invisible part.
Don't know, maybe keyboard users know well how to handle such situations. (I use mouse). At least it's possible to Tab to next fields and then Shift-Tab back. Though it might be clumsy. So maybe it's cool to scroll a bit via Javascript when a picker panel opens, to get it all in a window.

Generally I'm very happy with the plugin, it is a very good solution to an important problem.

Yes, generally, OK.

selfthinker · 2015-06-28T22:46:24Z

Sorry, I couldn't find the time to look at those changes yet. I will have time at the end of next week at the latest.

selfthinker · 2015-07-07T10:51:17Z

lib/plugins/styling/script.js

+    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);


Why is the button part of the h1?
I think it would make more sense after the intro paragraph (or before the form as that is easier to hook into).

* 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

selfthinker · 2015-07-07T12:05:28Z

I have fixed a few minor things.
I also looked into why a previously opened color picker wouldn't close. That seems to be how Iris works and they don't provide a way to overwrite this. So, there's nothing we can do, and it's not very important anyway.

I have tested this but not extensively. From my point of view this is good to go. 👍

Re: cookie and preview. I would prefer to have the cookie back and be able to browse the wiki with a persistent preview style. But that is not a must-have and can be done in a separate PR.

The icon does not match the others because the NuvolaX icon theme seems to have vanished from the Internet. Ideally all those admin icons could use a replacement. But that should be a different PR I guess.

splitbrain · 2015-07-18T10:52:29Z

I readded the cookie and moved the plugin to the bundled plugins. The icon sucks but is the best I could come up with right now.

@selfthinker good to merge?

selfthinker · 2015-07-19T22:00:07Z

Further testing...

I just opened my test wiki in IE 11, am not logged in and can see the changes plus the preview message with every reload. I can even see those when the other browser has closed the admin section and the styling popup.
As I had tested the plugin before, I think this is because the cookie is still set. Playing around further, i.e. opening and closing the styling admin section (i.e. unsetting the cookie) "fixes" it.

Testing the plugin itself in IE 11 shows that the popup is not working at all (no CSS is loading and when you navigate to a different page and "preview changes" the CSS is gone again). But there are JS errors:

SCRIPT5022: SyntaxError
File: js.php, Line: 36701, Column: 13

That is target.jQuery('body').append($loader);

Quickly tested in IE 8, that seems to have very similar issues.

From playing around in Chrome and Firefox, I only found that the caching should be improved. When one browser saves the settings (or reverts to template's default), the other only sees them after a hard refresh.

IE doesn't like it when you create a DOM element in one window and try to insert it in another window.

splitbrain · 2015-07-24T07:55:16Z

Okay IE problem should be fixed. I also added the style.ini to the things that makes the browser recheck for fresh css.

selfthinker · 2015-07-25T20:26:49Z

This is still not working for me in IE11. When I open the popup, the page in the background doesn't load the CSS and is only showing the "Preview is loading" message which doesn't go away. But I don't get an error message this time.
Weirdly enough, it is working in IE8.

And master needs to be merged into this branch.

Conflicts: lib/exe/css.php

selfthinker · 2015-07-25T22:15:34Z

Merged master into this and fixed the merge conflict.

hopefully doesn't break in the other browsers

scrutinizer-notifier · 2015-07-26T09:53:39Z

The inspection completed: 1 new issues, 18 updated code elements

selfthinker · 2015-07-26T11:55:33Z

Tested in IE11, 10, 9 and 8 and all working fine now. :)
👍

Template Style Dialog Plugin

splitbrain added 12 commits May 16, 2015 18:20

allow preview style replacements

4d6524b

a first very basic implementation of the preview mechanism

6ea007c

we have working save and revert buttons

0f5e709

more improvements

fb7685f

make styler plugin work without javascript as well (partly done)

aae321f

make styler work without JS as well

831864d

started to localize the styler plugin

82f9aff

added color picker support

e422a60

I'm not too hapy with it

added more localization

9fb9909

fix keeping the current page

b1a864f

allow resizing the dialog

a93f9a7

autopreview in styler plugin

d071b66

splitbrain added Feature Needs Feedback/Discussion Category: Template Category: Customization/Extensions Category: Design labels May 19, 2015

splitbrain added 3 commits May 23, 2015 15:29

renamed plugin from styler to styling

123bc81

styler was already taken

fixed ajax endpoint for styling plugin

4f2e8bf

avoid double ampersand in url

49f1113

Scrutinizer Auto-Fixes

e4632ba

This commit consists of patches automatically generated for this project on https://scrutinizer-ci.com

Merge pull request #1168 from splitbrain/scrutinizer-patch-2

91c6cd8

Scrutinizer Auto-Fixes

selfthinker reviewed May 24, 2015
View reviewed changes

splitbrain added 4 commits June 26, 2015 12:57

changed the whole thing to a real popup

6667cd8

added a simple loading screen for the JavaScript preview

3e2beab

removed no longer needed ajax action components

bcea9d6

reset page back to normal on closing dialog

c2f2ded

selfthinker reviewed Jul 7, 2015
View reviewed changes

selfthinker added 2 commits July 7, 2015 12:39

improved various minor frontend issues in styling plugin

d634152

* 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

added labels to form entries

147d8f4

splitbrain added 3 commits July 18, 2015 12:23

readded cookie to styling plugin

75c8c6f

added styler into default plugin section

8d4151d

The icon does not match the others because the NuvolaX icon theme seems to have vanished from the Internet. Ideally all those admin icons could use a replacement. But that should be a different PR I guess.

added plugin to list of bundled extensions

b28801b

splitbrain added 2 commits July 24, 2015 09:46

fixed styling preview in IE

1dd04f9

IE doesn't like it when you create a DOM element in one window and try to insert it in another window.

make personal style ini to cause cache reloads

84e76a7

selfthinker added 2 commits July 25, 2015 22:58

changed input submits to buttons, fixed small RTL issue

cf2c8e7

Merge remote-tracking branch 'origin/master' into styler

0bfc8d5

Conflicts: lib/exe/css.php

fix problem with IE11

ec2b4ba

hopefully doesn't break in the other browsers

selfthinker added a commit that referenced this pull request Jul 26, 2015

Merge pull request #1163 from splitbrain/styler

6439cee

Template Style Dialog Plugin

selfthinker merged commit 6439cee into master Jul 26, 2015

selfthinker deleted the styler branch July 26, 2015 14:06

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Template Style Dialog Plugin #1163

Template Style Dialog Plugin #1163

splitbrain commented May 19, 2015

chang-zhao commented May 20, 2015

splitbrain commented May 20, 2015

chang-zhao commented May 20, 2015

chang-zhao commented May 21, 2015

splitbrain commented May 23, 2015

chang-zhao commented May 24, 2015

selfthinker May 24, 2015

splitbrain May 25, 2015

selfthinker Jul 7, 2015

splitbrain commented Jun 26, 2015

chang-zhao commented Jun 26, 2015

selfthinker commented Jun 28, 2015

selfthinker Jul 7, 2015

selfthinker commented Jul 7, 2015

splitbrain commented Jul 18, 2015

selfthinker commented Jul 19, 2015

splitbrain commented Jul 24, 2015

selfthinker commented Jul 25, 2015

selfthinker commented Jul 25, 2015

scrutinizer-notifier commented Jul 26, 2015

selfthinker commented Jul 26, 2015

Template Style Dialog Plugin #1163

Template Style Dialog Plugin #1163

Conversation

splitbrain commented May 19, 2015

chang-zhao commented May 20, 2015

splitbrain commented May 20, 2015

chang-zhao commented May 20, 2015

chang-zhao commented May 21, 2015

splitbrain commented May 23, 2015

chang-zhao commented May 24, 2015

selfthinker May 24, 2015

Choose a reason for hiding this comment

splitbrain May 25, 2015

Choose a reason for hiding this comment

selfthinker Jul 7, 2015

Choose a reason for hiding this comment

splitbrain commented Jun 26, 2015

chang-zhao commented Jun 26, 2015

selfthinker commented Jun 28, 2015

selfthinker Jul 7, 2015

Choose a reason for hiding this comment

selfthinker commented Jul 7, 2015

splitbrain commented Jul 18, 2015

selfthinker commented Jul 19, 2015

splitbrain commented Jul 24, 2015

selfthinker commented Jul 25, 2015

selfthinker commented Jul 25, 2015

scrutinizer-notifier commented Jul 26, 2015

selfthinker commented Jul 26, 2015