Changeset 5530

Timestamp:

08/06/14 15:47:14 (10 years ago)

Author:

Twan Goosen

Message:

Changed static notes into an 'extra' info icon that toggles the presence of additional help/instructions. TODO: also for creators, resources, generatedby
Refs #584

Location:

VirtualCollectionRegistry/trunk/VirtualCollectionRegistry/src/main

Files:

• java/eu/clarin/cmdi/virtualcollectionregistry/gui/wizard/CreateVirtualCollectionWizard$GeneralStep.html (modified) (1 diff)
• java/eu/clarin/cmdi/virtualcollectionregistry/gui/wizard/CreateVirtualCollectionWizard.java (modified) (1 diff)
• java/eu/clarin/cmdi/virtualcollectionregistry/gui/wizard/wizardhelp.js (moved) (moved from VirtualCollectionRegistry/trunk/VirtualCollectionRegistry/src/main/java/eu/clarin/cmdi/virtualcollectionregistry/gui/wizard/tooltips.js) (2 diffs)
• webapp/css/about-128.png (added)
• webapp/css/vcr.css (modified) (1 diff)

VirtualCollectionRegistry/trunk/VirtualCollectionRegistry/src/main/java/eu/clarin/cmdi/virtualcollectionregistry/gui/wizard/CreateVirtualCollectionWizard$GeneralStep.html

@@ -9 +9 @@
             <div style="display: none" wicket:id="deleteKeywordDialog"></div>
             <fieldset>
-                <div class="notes">
-                    <h4>Provide general information</h4>
-                    <p>
-                        Use the form to fill in the general information for this virtual collection.
-                        Name and type are mandatory. It is highly recommended to write a short description,
-                        add one or more keywords and select a purpose and a reproducibility indication.
-                    </p>
-                    <p class="last">
-                        Hover over the labels of the individual fields to get more information.
-                    </p>
+                <div class="extrainfo">
+                    <a href="#" class="extrainfotoggle"><span>[info]</span></a>
+                    <div class="notes">
+                        <h4>Provide general information</h4>
+                        <p>
+                            Use the form to fill in the general information for this virtual collection.
+                            Name and type are mandatory. It is highly recommended to write a short description,
+                            add one or more keywords and select a purpose and a reproducibility indication.
+                        </p>
+                        <p class="last">
+                            Hover over the labels of the individual fields to get more information.
+                        </p>
+                    </div>
                 </div>
                 <div class="required">

VirtualCollectionRegistry/trunk/VirtualCollectionRegistry/src/main/java/eu/clarin/cmdi/virtualcollectionregistry/gui/wizard/CreateVirtualCollectionWizard.java

@@ -66 +66 @@
     
     private final static ResourceReference TOOLTIP_JAVASCRIPT_REFERENCE = 
-            new JavascriptResourceReference(CreateVirtualCollectionWizard.class, "tooltips.js");
+            new JavascriptResourceReference(CreateVirtualCollectionWizard.class, "wizardhelp.js");
 
     @Override

VirtualCollectionRegistry/trunk/VirtualCollectionRegistry/src/main/java/eu/clarin/cmdi/virtualcollectionregistry/gui/wizard/wizardhelp.js

@@ -16 +16 @@
  */
 
-/* jQuery script to activate tooltip on annotated labels */
 $(document).ready(function() {
+    /* activate tooltip on annotated labels */
     $(".tooltipparent").each(function() {
         var tooltip = '#' + $(this).attr('id') + ' .tooltip';
@@ -27 +27 @@
         $(".tooltip", this).hide();
     });
+
+    /* toggle extra help information*/
+    $(".extrainfotoggle").click(function(event) {
+        event.preventDefault();
+        $(this).parent(".extrainfo").children(".notes").slideToggle();
+    });
+    $(".extrainfo .notes").hide();
+    $(".extrainfotoggle").qtip({
+        content: 'Help',
+        show: 'mouseover',
+        hide: 'mouseout'
+    });
 });

VirtualCollectionRegistry/trunk/VirtualCollectionRegistry/src/main/webapp/css/vcr.css

@@ -262 +262 @@
 }
 
+form.wizard .extrainfo {
+    margin-left: 50px;
+}
+
+form.wizard .extrainfo a.extrainfotoggle {
+    display: inline-block;
+    float: right;
+    vertical-align: top;
+    width: 16px;
+    height: 16px;
+    background-image: url(about-128.png); /* from http://www.iconsdb.com/ */
+    background-size: 16px 16px;
+    background-repeat: no-repeat;
+}
+
+form.wizard .extrainfo a.extrainfotoggle span {
+    display: none;
+}
+
 form.wizard div.notes {
-  float: right;
-  width: 198px;
+  display: inline-block;
+  width: 80%;
   height: auto;
-  margin: 0 0 10px 10px;
+  margin: 0 0 10px 70px;
   padding: 5px;
   border: 1px solid #666666;