aboutsummaryrefslogtreecommitdiffstats
diff options
context:
space:
mode:
authorplegall <plg@piwigo.org>2008-12-21 20:45:12 +0000
committerplegall <plg@piwigo.org>2008-12-21 20:45:12 +0000
commit9330d8df50892938f4da44743588a958e83298c1 (patch)
tree5c664affdf50a75e08b0397b38f50271556ac6f6
parente6c2587e7cde30e338da121a22e943761b2ce7f4 (diff)
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
Diffstat (limited to '')
-rw-r--r--admin/template/goto/icon/collapse.pngbin0 -> 3599 bytes
-rw-r--r--admin/template/goto/icon/expand.pngbin0 -> 159 bytes
-rw-r--r--admin/template/goto/theme/roma/theme.css12
-rw-r--r--language/en_UK/help.html152
-rw-r--r--template-common/scripts.js18
5 files changed, 154 insertions, 28 deletions
diff --git a/admin/template/goto/icon/collapse.png b/admin/template/goto/icon/collapse.png
new file mode 100644
index 000000000..a2566d534
--- /dev/null
+++ b/admin/template/goto/icon/collapse.png
Binary files differ
diff --git a/admin/template/goto/icon/expand.png b/admin/template/goto/icon/expand.png
new file mode 100644
index 000000000..d4aa7b76b
--- /dev/null
+++ b/admin/template/goto/icon/expand.png
Binary files differ
diff --git a/admin/template/goto/theme/roma/theme.css b/admin/template/goto/theme/roma/theme.css
index 2b3a21cc1..5e4d1f1d2 100644
--- a/admin/template/goto/theme/roma/theme.css
+++ b/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; }
diff --git a/language/en_UK/help.html b/language/en_UK/help.html
index b585cb741..2de471858 100644
--- a/language/en_UK/help.html
+++ b/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>
-
-<h3>Adding elements</h3>
-
+ </div> <!-- quickStart_content -->
+</div> <!-- instructionQuickStart -->
+
+<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>
-
-<h3>Thumbnails</h3>
-
+ </div> <!-- addPhotos_content -->
+</div> <!-- instructionAddPhotos -->
+
+<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>
-
-<h3>Access authorization</h3>
-
+ </div> <!-- thumbnails_content -->
+</div> <!-- instructionThumbnails -->
+
+<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>
-
-<h3>Users Groups</h3>
-
+ </div> <!-- permissions_content -->
+</div> <!-- instructionPermissions -->
+
+<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>
-
-<h3>Files upload by users</h3>
-
+ </div> <!-- groups_content -->
+</div> <!-- instructionGroups -->
+
+<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>
-
-
-<h3>Links between elements and categories, virtual categories</h3>
-
+ </div> <!-- upload_content -->
+</div> <!-- instructionUpload -->
+
+<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>
-
-<h3>Miscellanous informations</h3>
-
+ </div> <!-- categoryLinks_content -->
+</div> <!-- instructionCategoryLinks -->
+
+<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> \ No newline at end of file
diff --git a/template-common/scripts.js b/template-common/scripts.js
index 519786ab7..f6b22b41c 100644
--- a/template-common/scripts.js
+++ b/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)