Short description
My name is Raffaele, I use MoinMoin as a personal wiki for note-taking and to collect my ideas. It is a great piece of software and, I'm sure, it will be even greater with the next major release.
Some days ago I installed MoinMoin2. I found the (wiki item) editor interface is a mess even more than the one from the previous version. Most of the screen space is wasted by the simultaneous presence of fields you don't need to care of during the editing stage and that only contribute to distract the author attention.
I think the editor page should be just made up of:
- the textarea for the editing
- a toolbar, above the textarea
Fields, like "Comment", "Metadata" etc., should be shown only on clicking the related button in the toolbar and hidden when another button is pressed.
I attached a patch to give you a more concrete idea of what I mean. It is absolutely not intended for real use: for example I didn't take into account the fact that parts of the interface are in common with editor for other kind of items. Nevertheless I hope it can be of some utility.
Thanks,
Raffaele
1 diff --git a/templates/modify_applet.html b/templates/modify_applet.html
2 index 1027961..0158e0f 100644
3 --- a/templates/modify_applet.html
4 +++ b/templates/modify_applet.html
5 @@ -1,22 +1,50 @@
6 {% extends theme("layout.html") %}
7 +{% block head_scripts %}
8 +{{ super() }}
9 +<script type="text/javascript">
10 +var selectedTab;
11 +
12 +selectTab = function(tabId) {
13 + if (selectedTab)
14 + $('#' + selectedTab).hide();
15 +
16 + if (selectedTab == tabId) {
17 + selectedTab = null;
18 + return;
19 + }
20 +
21 + $('#' + tabId).show();
22 + selectedTab = tabId;
23 +}
24 +</script>
25 +{% endblock %}
26 {% block content %}
27 <h1>{{ _("Modifying %(item_name)s", item_name=item_name) }}</h1>
28 <div class="moin-form">
29 <form action="" method="POST" enctype="multipart/form-data">
30 <input type="hidden" name="action" value="modify" />
31 <input type="hidden" name="rev" value="{{ revno }}" />
32 -{% block extra_form %}{% endblock %}
33 +{% block extra_form %}
34 +<input class="button tab-button" type="button" name="button_upload" value="{{ _("Upload") }}" onclick="selectTab('tab_upload');" />
35 +<input class="button tab-button" type="button" name="button_metadata" value="{{ _("Metadata") }}" onclick="selectTab('tab_metadata');" >
36 +<input class="button tab-button" type="button" name="button_help" value="{{ _("Help") }}" onclick="selectTab('tab_help');" />
37 +{% endblock %}
38 +<div id="tabs">
39 + {% block extra_tabs %}{% endblock %}
40 + <div id="tab_upload" style="display: none;">
41 + <dl>
42 + <label for="data_file">{{ _("Upload file:") }}</label>
43 + <input type="file" id="data_file" name="data_file" />
44 + </dl>
45 + </div>
46 + <div id="tab_metadata" style="display: none;">
47 + <textarea name="meta_text" lang="en" dir="ltr" rows="{{ rows_meta }}" cols="{{ cols }}">{{ meta_text }}</textarea>
48 + </div>
49 + <div id="tab_help" style="display: none;">
50 + <pre>{{ help }}</pre>
51 + </div>
52 +</div>
53 {% block data_editor %}{% endblock %}
54 - <dl>
55 - <dt>
56 - <label for="data_file">{{ _("Upload file:") }}</label>
57 - </dt>
58 - <dd>
59 - <input type="file" id="data_file" name="data_file" />
60 - </dd>
61 - </dl>
62 -<pre>{{ help }}</pre>
63 -<textarea name="meta_text" lang="en" dir="ltr" rows="{{ rows_meta }}" cols="{{ cols }}">{{ meta_text }}</textarea>
64 </form>
65 </div>
66 {% endblock %}
67 diff --git a/templates/modify_binary.html b/templates/modify_binary.html
68 index e3c06ca..a55dc39 100644
69 --- a/templates/modify_binary.html
70 +++ b/templates/modify_binary.html
71 @@ -3,8 +3,13 @@
72 {% block extra_form %}
73 <input class="button" type="submit" name="button_save" value="{{ _("Save") }}" />
74 <input class="button" type="submit" name="button_cancel" value="{{ _("Cancel") }}" />
75 +<input class="button" type="button" name="button_comment" value="{{ _("Comment") }}" onclick="selectTab('tab_comment');" />
76 +{{ super() }}
77 {{ forms.render_textcha(gen, form) }}
78 <br />
79 -<label for="comment">{{ _("Comment:") }}</label><input type="text" id="comment" name="comment" size="80" maxlength="200" value="{{ comment }}" />
80 -<br />
81 +{% endblock %}
82 +{% block extra_tabs %}
83 +<div id="tab_comment" style="display: none;">
84 + <label for="comment">{{ _("Comment:") }}</label><input type="text" id="comment" name="comment" size="80" maxlength="200" value="{{ comment }}" />
85 +</div>
86 {% endblock %}
You're definitely right that the UI needs improvement. Your patch looks good at first sight, but I'll need to have a closer look later.
BTW, feel invited to crate a homepage here and to hang out with us on MoinMoinChat.
Thanks so far. -- ThomasWaldmann 2011-03-29 07:31:43