Changeset 12797 for trunk/themes

Timestamp:

Dec 27, 2011, 9:26:49 PM (13 years ago)

Author:

rvelices

Message:

feature 2541 multisize

• nicer presentation on picture.php
• added a maintenance purge derivatives action

Location:

trunk/themes

Files:

• clear/theme.css (modified) (1 diff)
• dark/theme.css (modified) (2 diffs)
• default/template/picture_content.tpl (modified) (2 diffs)
• default/theme.css (modified) (1 diff)

trunk/themes/clear/theme.css

@@ -15 +15 @@
 }
 
-#menubar DL, .content, #imageToolBar, .header_notes {
+#menubar DL, .content, #imageToolBar, #derivativeSwitchLink, #derivativeSwitchBox, .header_notes {
   background-color: #eeeeee;
 }
 
 /* borders */
-#menubar DL, .content, #imageToolBar {
+#menubar DL, .content, #imageToolBar, #derivativeSwitchLink, #derivativeSwitchBox {
   border: 1px solid #d3d3d3;
 }

trunk/themes/dark/theme.css

@@ -17 +17 @@
 }
 
-#menubar DL, .content, #imageToolBar, #imageHeaderBar, .header_notes {
+#menubar DL, .content, #imageToolBar, #imageHeaderBar, #derivativeSwitchLink, #derivativeSwitchBox, .header_notes {
         background-color: #505050;
 }
@@ -35 +35 @@
 
 /* borders */
-#menubar DL, .content{
+#menubar DL, .content, #derivativeSwitchLink, #derivativeSwitchBox{
         border: 1px solid #000;
 }

trunk/themes/default/template/picture_content.tpl

@@ -5 +5 @@
 {if count($current.available_derivative_types)>1}
 {footer_script}{literal}
-function changeImgSrc(url,type)
+function changeImgSrc(url,type,display)
 {
         var theImg = document.getElementById("theMainImage");
@@ -12 +12 @@
                 theImg.removeAttribute("width");theImg.removeAttribute("height");
                 theImg.src = url;
+                var elt = document.getElementById("derivativeSwitchLink");
+                if (elt) elt.innerHTML = display;
         }
         document.cookie = 'picture_deriv=' + type;
 }
+
+function toggleDerivativeSwitchBox()
+{
+        var elt = document.getElementById("derivativeSwitchBox"),
+                ePos = document.getElementById("derivativeSwitchLink");
+        if (elt.style.display==="none")
+        {
+                elt.style.position = "absolute";
+                elt.style.left = (ePos.offsetLeft + 10) + "px";
+                elt.style.top = (ePos.offsetTop + ePos.offsetHeight) + "px";
+                elt.style.display="";
+        }
+        else
+                elt.style.display="none";
+}
 {/literal}{/footer_script}
-<p>
+<a id="derivativeSwitchLink" onclick="toggleDerivativeSwitchBox()" style="cursor:pointer">{$current.selected_derivative->get_type()|@translate}</a>
+<div id="derivativeSwitchBox" onclick="toggleDerivativeSwitchBox()" style="display:none">
 {foreach from=$current.available_derivative_types item=derivative_type}
-<a onclick="changeImgSrc('{$current.derivatives[$derivative_type]->get_url()|@escape:javascript}', '{$derivative_type}')" title="{$current.derivatives[$derivative_type]->get_size_hr()}">{$derivative_type}</a>
+<a onclick="changeImgSrc('{$current.derivatives[$derivative_type]->get_url()|@escape:javascript}', '{$derivative_type}', '{$derivative_type|@translate|@escape:javascript}')" style="cursor:pointer">{$derivative_type|@translate} ({$current.derivatives[$derivative_type]->get_size_hr()})</a><br>
 {/foreach}
-</p>
+</div>
 {/if}

trunk/themes/default/theme.css

@@ -338 +338 @@
 #imageToolBar .pwg-button {width:42px;}
 
+
+#derivativeSwitchLink {
+        padding: 0.2em;
+        position: absolute;
+        left: 5px;
+        top: 100px;
+}
+
+#derivativeSwitchBox {
+        padding: 0.5em;
+        border-radius: 4px;
+        z-index: 100;
+}
 
 #theImage {