Item12952: a try to improve the look and feel

lots of usability problems still persist that can't be fixed without a deeper change to the way configure.js works (see discussion on ReleaseMeeting01x02_20140915)
foswiki · Sep 16, 2014 · 0ace70b · 0ace70b
1 parent 0908aa0
commit 0ace70b
Show file tree

Hide file tree

Showing 10 changed files with 502 additions and 81 deletions.
diff --git a/ConfigurePlugin/.gitignore b/ConfigurePlugin/.gitignore
@@ -1,5 +1,6 @@
 *.gz
 pub/System/ConfigurePlugin/resig.js
 pub/System/ConfigurePlugin/types.js
+pub/System/ConfigurePlugin/reset.css
 pub/System/ConfigurePlugin/configure.css
 pub/System/ConfigurePlugin/configure.js
diff --git a/ConfigurePlugin/lib/Foswiki/Plugins/ConfigurePlugin/JQuery.pm b/ConfigurePlugin/lib/Foswiki/Plugins/ConfigurePlugin/JQuery.pm
@@ -23,7 +23,7 @@ sub new {
         javascript    => [ 'resig.js', 'types.js', 'configure.js' ],
         css           => ['configure.css'],
         dependencies  => [
-            'JQUERYPLUGIN', 'UI', 'JsonRpc', 'UI::Tabs',
+            'JQUERYPLUGIN', 'UI', 'JsonRpc', 'UI::Tabs', "pnotify",
             'UI::Tooltip',  'UI::Dialog'
         ]
     );

diff --git a/ConfigurePlugin/lib/Foswiki/Plugins/ConfigurePlugin/MANIFEST b/ConfigurePlugin/lib/Foswiki/Plugins/ConfigurePlugin/MANIFEST
@@ -9,7 +9,14 @@ lib/Foswiki/Plugins/ConfigurePlugin/JQuery.pm 0444 Configuration
 lib/Foswiki/Plugins/ConfigurePlugin/DependencyReport.pm 0444 Configuration
 pub/System/ConfigurePlugin/checkWhirly.gif 0444
 pub/System/ConfigurePlugin/configure.css 0444
+pub/System/ConfigurePlugin/configure.css.gz 0444
+pub/System/ConfigurePlugin/configure.uncompressed.css 0444
 pub/System/ConfigurePlugin/configure.js 0444
+pub/System/ConfigurePlugin/configure.js.gz 0444
+pub/System/ConfigurePlugin/configure.uncompressed.js 0444
+pub/System/ConfigurePlugin/reset.css 0444
+pub/System/ConfigurePlugin/reset.css.gz 0444
+pub/System/ConfigurePlugin/reset.uncompressed.css 0444
 pub/System/ConfigurePlugin/errorsIcon.png 0444
 pub/System/ConfigurePlugin/expert.png 0444
 pub/System/ConfigurePlugin/foswiki-icon.ico 0444

diff --git a/ConfigurePlugin/pub/System/ConfigurePlugin/Makefile b/ConfigurePlugin/pub/System/ConfigurePlugin/Makefile
@@ -1,5 +1,5 @@
 FOSWIKI_ROOT?=~/foswiki/core
-TARGET= configure.js resig.js types.js configure.css
+TARGET= configure.js resig.js types.js reset.css configure.css
 
 -include $(FOSWIKI_ROOT)/pub/System/JQueryPlugin/Makefile.include
 

diff --git a/ConfigurePlugin/pub/System/ConfigurePlugin/configure.uncompressed.css b/ConfigurePlugin/pub/System/ConfigurePlugin/configure.uncompressed.css
@@ -1,6 +1,42 @@
 html body {
-	font-family: Arial, sans-serif;
-	font-size: 13px;
+  color:#444;
+  font-family: Arial, 'Liberation Sans', FreeSans, sans-serif;
+  font-size:14px;
+  line-height:1.5em;
+  padding:1em;
+}
+
+.header {
+  margin:-1em -1em 2em;
+  padding:2em;
+  background-color:#eee;
+  position:relative;
+}
+
+.top_level_buttons {
+  float: right;
+  margin-top:0.5em;
+}
+
+.clearfix:after,
+.foswikiClearFix:after {
+  clear: both;
+  content: ' ';
+  display: block;
+  font-size: 0;
+  line-height: 0;
+  visibility: hidden;
+  width: 0;
+  height: 0;
+}
+.clearfix,
+.foswikiClearFix {
+  *zoom:1; /* IE7 hack */
+}
+
+* html .clearfix,
+* html .foswikiClearFix {
+  height: 1%;
 }
 
 .whirly {
@@ -10,29 +46,31 @@ html body {
     background-image:url(loader-bars.gif);
     background-repeat:no-repeat;
     background-position:bottom left;
-    position:fixed;
-    top:5px;
-    right:5px;
+    position:absolute;
+    bottom:-32px;
+    right:1em;
 }
 
-.top_level_buttons {
-    float: right;
-    margin:1em;
-}
 
 /* A node in the spec tree */
-div.node {
-    padding: 0.5em;
+.node .node {
+    padding-bottom: 0.5em;
+    margin-bottom:1em;
+    border-bottom:1px solid #eee;
 }
-
-.keys {
-    font-family: "Courier New", Courier, monospacecourier;
-    font-weight: bold;
-    margin-right: 1em;
+.node .keys {
+  margin-right:0.5em;
+  display:inline-block;
+}
+.node .description,
+.node .reports {
+  color:gray;
+  margin:0.5em 0;
 }
 
 .value_modified {
-    background: khaki;
+  background-color:#DEEBFA;
+  color:#005884;
 }
 
 .closed > .description {
@@ -62,36 +100,46 @@ td {
 div.information {
 }
 
+.reports > .warnings,
+.reports > .errors {
+  margin:1em 0;
+  padding:0.5em 1em 0.5em 3em;
+  background-repeat:no-repeat;
+  background-position:1em 0.8em;
+  border:1px solid;
+  font-weight:bold;
+
+  -webkit-border-radius: 4px; 
+     -moz-border-radius: 4px; 
+          border-radius: 4px; 
+}
+
 .reports > .warnings {
-    background-image: url(warningsIcon.png);
-    padding-left: 22px;
-    background-position: left 45%;
-    background-repeat: no-repeat;
-    color: #AA0;
+  background-image: url(warningsIcon.png);
+  background-color:#FFF6BF;
+  border-color:#FDD845;
+  color:#c09853;
 }
 
 .reports > .errors {
-    background-image: url(errorsIcon.png);
-    padding-left: 22px;
-    background-position: left 45%;
-    background-repeat: no-repeat;
-    color: #A00;
+  background-image: url(errorsIcon.png);
+  background-color:#FBE3E4;
+  border-color:#FBC7C9;
+  color:#b22222;
 }
 
 .tab.warnings {
     background-image: url(warningsIcon.png);
     padding-right: 22px;
     background-position: right 45%;
     background-repeat: no-repeat;
-    color: #AA0;
 }
 
 .tab.errors {
     background-image: url(errorsIcon.png);
     padding-right: 22px;
     background-position: right 45%;
     background-repeat: no-repeat;
-    color: #A00;
 }
 
 .tab.warnings.errors {

diff --git a/ConfigurePlugin/pub/System/ConfigurePlugin/configure.uncompressed.js b/ConfigurePlugin/pub/System/ConfigurePlugin/configure.uncompressed.js
@@ -46,7 +46,7 @@ function _id_ify(id) {
     function init_whirly() {
         var $whirly, whirlyTimer;
 
-        $whirly = $("<div class='whirly' />").appendTo("body");
+        $whirly = $(".whirly");
         $(document).ajaxSend(function() {
             if (typeof(whirlyTimer) !== 'undefined') {
               window.clearTimeout(whirlyTimer);
@@ -137,7 +137,8 @@ function _id_ify(id) {
                       type: "error",
                       hide: false,
                       sticker: false,
-                      closer_hover: false
+                      closer_hover: false,
+                      icon: false
                     });
                 },
                 success: function(jsonResponse, textStatus, xhr) {
@@ -491,7 +492,7 @@ function _id_ify(id) {
                 update_modified_default($node);
                 check_current_value($node);
             });
-        $node.append($ui);
+        $node.find(".ui-placeholder").replaceWith($ui);
 
         // Check for a pending value change from a wizard
         var pendid = 'pending' + _id_ify(spec.keys);
@@ -531,7 +532,7 @@ function _id_ify(id) {
             } else {
                 $butt.attr("checked", "checked");
             }
-            $ui.before($butt);
+            $ui.after($butt);
         }
 
         $button = $('<button class="undo_button control_button"></button>');
@@ -545,7 +546,7 @@ function _id_ify(id) {
             },
             text: false
         }).hide();
-        $node.append($button);
+        $ui.after($button);
 
         $button = $('<button class="default_button control_button"></button>');
         $button.attr('title', 'Reset to default value: ' + spec['default']);
@@ -558,7 +559,7 @@ function _id_ify(id) {
             },
             text: false
         }).hide();
-        $node.append($button);
+        $ui.after($button);
 
         if (spec.FEEDBACK) {
             $.each(spec.FEEDBACK, function(index, fb) {
@@ -686,13 +687,13 @@ function _id_ify(id) {
             created = {};
 
         $.each(entries, function(index, entry) {
-            var label, $node, id, $head, $infob, $report;
+            var label, $node, id, $infob, $report;
 
             if (entry.typename != "SECTION") {
                 // It's a key
 
                 // the load_ui class will trigger load_ui() later
-                $node = $('<div class="node load_ui closed"></div>');
+                $node = $('<div class="node load_ui"></div>');
                 $node.data('spec.entry', entry);
                 if (entry.EXPERT && entry.EXPERT == 1) {
                     $node.addClass('expert');
@@ -731,8 +732,9 @@ function _id_ify(id) {
                     if (!label) {
                         label = entry.keys;
                     }
-                    $head = $('<div class="keys">' + label + '</div>');
-                    $node.append($head);
+                    label = label.replace(/\}\{/g, "::").replace(/\{|\}/g, "");
+                    $node.append('<b class="keys">' + label + "</b><span class='ui-placeholder'></span>");
+/*
                     if (entry.desc) {
                         $infob = $('<button class="control_button"></button>');
                         $head.prepend($infob);
@@ -745,6 +747,7 @@ function _id_ify(id) {
                             text: false
                         });
                     }
+*/
                 } else if (entry.headline !== null) {
                     // unkeyed type e.g. BUTTON
                     id = _id_ify(entry.headline);
@@ -965,12 +968,14 @@ function _id_ify(id) {
             },
             $root, 'load');
     });
+/*
 
     $(window).on('beforeunload', function() {
         if ($('.value_modified').length > 0) {
             return "You have unsaved changes";
         }
         return 'Are you really sure?';
     });
+*/
 
 })(jQuery);