modification: instructions are displayed by blocks that can be expanded

individually. The icon doesn't fit with roma theme currently.


git-svn-id: http://piwigo.org/svn/branches/2.0@3009 68402e56-0260-453c-a942-63ccdbb3a9ee

admin/template/goto/theme/roma/theme.css

@@ -47,10 +47,14 @@ text-transform:none; font-weight:bold; padding-left:20px; width:54%; }
 
 .content dl, dd { margin:5px; }
 .content div.titrePage { height:55px; }
-.instructions { height:450px; overflow:scroll; padding:0 20px 0; text-align:left; margin-bottom: 20px;
-font-size:14px; line-height:21px; }
-.instructions { overflow-y:scroll; overflow-x:hidden; }
-.instructions  h3 { text-align: center; margin: 30px 0 0 0; }
+
+.instructions { text-align:left;}
+.instructionBlock {border: 1px solid #666; margin: 5px; overflow: hidden;}
+.instructionBlockHeaderCollapsed, .instructionBlockHeaderExpanded {font-size:110%; cursor: pointer; overflow: hidden; background-repeat: no-repeat; background-position: left center; padding-left: 20px; background-color: #111; padding: 5px 20px; color: #ff3363;}
+.instructionBlockHeaderCollapsed { background-image: url(../../icon/expand.png);}
+.instructionBlockHeaderExpanded { background-image: url(../../icon/collapse.png);}
+.instructionBlockContent { padding:5px;}
+
 .content ul.thumbnails span.wrap2:hover { background-color:#111; border:1px solid #FF3363; color:#666; }
 .content ul.thumbnails span.wrap2 { border:1px solid #666; padding: 4px; }
 .content ul.thumbnails span.wrap2 { -moz-border-radius-bottomleft:4px; -moz-border-radius-bottomright:4px; -moz-border-radius-topleft:4px; -moz-border-radius-topright:4px; }

language/en_UK/help.html

@@ -1,8 +1,19 @@
 <div class="instructions">
 <h2>Help</h2>
 
-<h3>Quick start</h3>
-
+<div id="instructionQuickStart" class="instructionBlock">
+  <div
+    id="quickStart_header"
+    class="instructionBlockHeaderCollapsed"
+    onclick="blockToggleDisplay('quickStart_header', 'quickStart_content')"
+  >
+    Quick Start
+  </div>
+  <div
+    id="quickStart_content"
+    class="instructionBlockContent"
+    style="display:none"
+  >
 <ol>
   
   <li>Create a local directory "test_category".</li>
@@ -29,9 +40,22 @@
 your gallery.</li>
   
 </ol>
+  </div> <!-- quickStart_content -->
+</div> <!-- instructionQuickStart -->
 
-<h3>Adding elements</h3>
-
+<div id="instructionAddPhotos" class="instructionBlock">
+  <div
+    id="addPhotos_header"
+    class="instructionBlockHeaderCollapsed"
+    onclick="blockToggleDisplay('addPhotos_header', 'addPhotos_content')"
+  >
+    Adding elements
+  </div>
+  <div
+    id="addPhotos_content"
+    class="instructionBlockContent"
+    style="display:none"
+  >
 <ul>
 
   <li>
@@ -114,9 +138,22 @@ containing sub-categories.</li>
   Synchronize</span></li>
 
 </ul>
+  </div> <!-- addPhotos_content --> 
+</div> <!-- instructionAddPhotos -->
 
-<h3>Thumbnails</h3>
-
+<div id="instructionThumbnails" class="instructionBlock">
+  <div
+    id="thumbnails_header"
+    class="instructionBlockHeaderCollapsed"
+    onclick="blockToggleDisplay('thumbnails_header', 'thumbnails_content')"
+  >
+    Thumbnails
+  </div>
+  <div
+    id="thumbnails_content"
+    class="instructionBlockContent"
+    style="display:none"
+  >
 <ul>
 
   <li>As said earlier, each element of picture type must be associated with
@@ -143,9 +180,22 @@ containing sub-categories.</li>
   "thumbnail" for ugo (user, group, other).</li>
 
 </ul>
+  </div> <!-- thumbnails_content --> 
+</div> <!-- instructionThumbnails -->
 
-<h3>Access authorization</h3>
-
+<div id="instructionPermissions" class="instructionBlock">
+  <div
+    id="permissions_header"
+    class="instructionBlockHeaderCollapsed"
+    onclick="blockToggleDisplay('permissions_header', 'permissions_content')"
+  >
+    Permissions
+  </div>
+  <div
+    id="permissions_content"
+    class="instructionBlockContent"
+    style="display:none"
+  >
 <ul>
 
   <li>You can forbid access to categories. Categories can be "public" or
@@ -178,9 +228,22 @@ containing sub-categories.</li>
   </li>
 
 </ul>
+  </div> <!-- permissions_content --> 
+</div> <!-- instructionPermissions -->
 
-<h3>Users Groups</h3>
-
+<div id="instructionGroups" class="instructionBlock">
+  <div
+    id="groups_header"
+    class="instructionBlockHeaderCollapsed"
+    onclick="blockToggleDisplay('groups_header', 'groups_content')"
+  >
+    Groups
+  </div>
+  <div
+    id="groups_content"
+    class="instructionBlockContent"
+    style="display:none"
+  >
 <ul>
 
   <li>Piwigo is able to manage groups of users. It can be very useful
@@ -196,9 +259,22 @@ containing sub-categories.</li>
   "jack" will be able to see "Christmas 2003".</li>
 
 </ul>
+  </div> <!-- groups_content --> 
+</div> <!-- instructionGroups -->
 
-<h3>Files upload by users</h3>
-
+<div id="instructionUpload" class="instructionBlock">
+  <div
+    id="upload_header"
+    class="instructionBlockHeaderCollapsed"
+    onclick="blockToggleDisplay('upload_header', 'upload_content')"
+  >
+    Upload by users
+  </div>
+  <div
+    id="upload_content"
+    class="instructionBlockContent"
+    style="display:none"
+  >
 <p>Piwigo offers the possibility for users to upload images. in
 order to do it:</p>
 
@@ -217,10 +293,22 @@ must be validated by an administrator. For that purpose, an administrator
 must go in <span class="pwgScreen">Administration, Pictures, Waiting</span>
 in order to validate or to refuse the files proposed, then to synchronize
 filesystem with database.</p>
+  </div> <!-- upload_content --> 
+</div> <!-- instructionUpload -->
 
-
-<h3>Links between elements and categories, virtual categories</h3>
-
+<div id="instructionCategoryLinks" class="instructionBlock">
+  <div
+    id="categoryLinks_header"
+    class="instructionBlockHeaderCollapsed"
+    onclick="blockToggleDisplay('categoryLinks_header', 'categoryLinks_content')"
+  >
+    Links between elements and categories, virtual categories
+  </div>
+  <div
+    id="categoryLinks_content"
+    class="instructionBlockContent"
+    style="display:none"
+  >
 <ul>
 
   <li>Piwigo dissociates categories where elements are stored and
@@ -239,9 +327,22 @@ filesystem with database.</p>
   in <span class="pwgScreen">Administration, Categories, Manage</span>.</li>
 
 </ul>
+  </div> <!-- categoryLinks_content --> 
+</div> <!-- instructionCategoryLinks -->
 
-<h3>Miscellanous informations</h3>
-
+<div id="instructionMisc" class="instructionBlock">
+  <div
+    id="misc_header"
+    class="instructionBlockHeaderCollapsed"
+    onclick="blockToggleDisplay('misc_header', 'misc_content')"
+  >
+    Miscellanous informations
+  </div>
+  <div
+    id="misc_content"
+    class="instructionBlockContent"
+    style="display:none"
+  >
 <ul>
 
   <li>As soon as you created your gallery, modify default display properties
@@ -257,4 +358,7 @@ filesystem with database.</p>
   documentation</a> for further reading.</li>
 
 </ul>
+  </div> <!-- misc_content --> 
+</div> <!-- instructionMisc -->
+
 </div>

template-common/scripts.js

@@ -90,6 +90,24 @@ function PwgWS(urlRoot)
 	};
 };
 
+function blockToggleDisplay(headerId, contentId)
+{
+  var revHeader = document.getElementById(headerId);
+  var revContent = document.getElementById(contentId);
+
+  if (revContent.style.display == 'none')
+  {
+    revContent.style.display = 'block';
+    revHeader.className = 'instructionBlockHeaderExpanded';
+  }
+  else
+  {
+    revContent.style.display = 'none';
+    revHeader.className = 'instructionBlockHeaderCollapsed';
+  }
+}
+
+
 PwgWS.prototype = {
 
 	callService : function(method, parameters, options)