Changeset 13729


Ignore:
Timestamp:
Mar 25, 2012, 9:20:13 PM (9 years ago)
Author:
Zaphod
Message:

feature 2588: template modification for v2.4

-> new class .switchBox for all boxes (sortOrder, derivative, etc...)
-> new classes to help layout in switchBoxes:

  • .switchCheck for the check character
  • .switchSelected for the selected option
  • .switchUnselected for all other options

-> new menubar.tpl with empty div #menuSwitcher

Location:
trunk/themes
Files:
8 edited

Legend:

Unmodified
Added
Removed
  • trunk/themes/Sylvia/theme.css

    r13697 r13729  
    477477}
    478478
    479 #derivativeSwitchBox, #sortOrderBox {
     479.switchBox {
    480480    background-color: #222222;
    481481    border: 1px solid #FF3363;
  • trunk/themes/clear/theme.css

    r13697 r13729  
    1515}
    1616
    17 #menubar DL, .content, #imageToolBar, #derivativeSwitchBox, #sortOrderBox, .header_notes {
     17#menubar DL, .content, #imageToolBar, .switchBox, .header_notes {
    1818  background-color: #eeeeee;
    1919}
    2020
    2121/* borders */
    22 #menubar DL, .content, #imageToolBar, #derivativeSwitchBox, #sortOrderBox {
     22#menubar DL, .content, #imageToolBar, .switchBox {
    2323  border: 1px solid #d3d3d3;
    2424}
  • trunk/themes/dark/theme.css

    r13697 r13729  
    1818}
    1919
    20 #menubar DL, .content, #imageToolBar, #imageHeaderBar, #derivativeSwitchBox, #sortOrderBox, .header_notes {
     20#menubar DL, .content, #imageToolBar, #imageHeaderBar, .switchBox, .header_notes {
    2121        background-color: #505050;
    2222}
     
    3131
    3232/* borders */
    33 #menubar DL, .content, #derivativeSwitchBox, #sortOrderBox{
     33#menubar DL, .content, .switchBox {
    3434        border: 1px solid #000;
    3535}
  • trunk/themes/default/template/index.tpl

    r13683 r13729  
    88                        <span class="pwg-icon pwg-icon-sort">&nbsp;</span><span class="pwg-button-text">{'Sort order'|@translate}</span>
    99                </a>
    10                 <div id="sortOrderBox" style="display:none; text-align:left" onclick="toggleSortOrderBox()" onmouseout="e=event.toElement||event.relatedTarget;e.parentNode==this||e==this||toggleSortOrderBox()">
     10                <div id="sortOrderBox" class="switchBox" style="display:none; text-align:left" onclick="toggleSortOrderBox()" onmouseout="e=event.toElement||event.relatedTarget;e.parentNode==this||e==this||toggleSortOrderBox()">
    1111                        <div class="switchBoxTitle">{'Sort order'|@translate}</div>
    1212                        {foreach from=$image_orders item=image_order name=loop}{if !$smarty.foreach.loop.first}<br>{/if}
    1313                        {if $image_order.SELECTED}
    14                         <span>&#x2714; {$image_order.DISPLAY}</span>
     14                        <span class="switchCheck">&#x2714; </span><span class="switchSelected">{$image_order.DISPLAY}</span>
    1515                        {else}
    16                         <a href="{$image_order.URL}" rel="nofollow">{$image_order.DISPLAY}</a>
     16                        <a href="{$image_order.URL}" class="switchUnselected" rel="nofollow">{$image_order.DISPLAY}</a>
    1717                        {/if}
    1818                        {/foreach}
     
    3939                        <span class="pwg-icon pwg-icon-sizes">&nbsp;</span><span class="pwg-button-text">{'Photo sizes'|@translate}</span>
    4040                </a>
    41                 <div id="derivativeSwitchBox" style="display:none; text-align:left" onclick="toggleImageDerivativesBox()" onmouseout="e=event.toElement||event.relatedTarget;e.parentNode==this||e==this||toggleImageDerivativesBox()">
     41                <div id="derivativeSwitchBox" class="switchBox" style="display:none; text-align:left" onclick="toggleImageDerivativesBox()" onmouseout="e=event.toElement||event.relatedTarget;e.parentNode==this||e==this||toggleImageDerivativesBox()">
    4242                        <div class="switchBoxTitle">{'Photo sizes'|@translate}</div>
    4343                        {foreach from=$image_derivatives item=image_derivative name=loop}{if !$smarty.foreach.loop.first}<br>{/if}
    4444                        {if $image_derivative.SELECTED}
    45                         <span>&#x2714; {$image_derivative.DISPLAY}</span>
     45                        <span class="switchCheck">&#x2714; </span><span class="switchSelected">{$image_derivative.DISPLAY}</span>
    4646                        {else}
    47                         <a href="{$image_derivative.URL}" rel="nofollow">{$image_derivative.DISPLAY}</a>
     47                        <a href="{$image_derivative.URL}" class="switchUnselected" rel="nofollow">{$image_derivative.DISPLAY}</a>
    4848                        {/if}
    4949                        {/foreach}
  • trunk/themes/default/template/menubar.tpl

    r5095 r13729  
    1010        </dl>
    1111        {/foreach}
    12 </div>
     12</div><div id="menuSwitcher"></div>
    1313{/if}
  • trunk/themes/default/template/picture.tpl

    r13683 r13729  
    3232  jQuery('.derivativeChecked').hide();
    3333  jQuery('#derivativeChecked'+typeSave).show();
    34         document.cookie = 'picture_deriv='+typeSave+';path={/literal}{$COOKIE_PATH}{literal}';
     34  jQuery('#derivativeSiwtchBox .switchSelected').addClass('switchUnselected').removeClass('switchSelected');
     35  jQuery('#derivativeName'+typeSave).addClass('switchSelected').removeClass('switchUnselected');
     36    document.cookie = 'picture_deriv='+typeSave+';path={/literal}{$COOKIE_PATH}{literal}';
    3537}
    3638
     
    4244        {
    4345                elt.style.position = "absolute";
    44                 elt.style.left = (ePos.offsetLeft+10)+"px";
     46                elt.style.left = (ePos.offsetLeft)+"px";
    4547                elt.style.top = (ePos.offsetTop+ePos.offsetHeight)+"px";
    4648                elt.style.display="";
     
    5254{strip}<a id="derivativeSwitchLink" href="javascript:toggleDerivativeSwitchBox()" title="{'Photo sizes'|@translate}" class="pwg-state-default pwg-button" rel="nofollow">
    5355<span class="pwg-icon pwg-icon-sizes">&nbsp;</span><span class="pwg-button-text">{'Photo sizes'|@translate}</span></a>
    54 <div id="derivativeSwitchBox" onclick="toggleDerivativeSwitchBox()" style="display:none">
     56<div id="derivativeSwitchBox" class="switchBox" onclick="toggleDerivativeSwitchBox()" style="display:none" onmouseout="e=event.toElement||event.relatedTarget;e.parentNode==this||e==this||toggleDerivativeSwitchBox()">
    5557<div class="switchBoxTitle">{'Photo sizes'|@translate}</div>
    5658{foreach from=$current.unique_derivatives item=derivative key=derivative_type}
    57 <span class="derivativeChecked" id="derivativeChecked{$derivative->get_type()}" {if $derivative->get_type() ne $current.selected_derivative->get_type()}style="display:none"{/if}>&#x2714;</span> <a href="javascript:changeImgSrc('{$derivative->get_url()|@escape:javascript}','{$derivative_type}','{$derivative->get_type()}')">{$derivative->get_type()|@translate}<span class="derivativeSizeDetails"> ({$derivative->get_size_hr()})</span></a><br>
     59<span class="derivativeChecked switchCheck"
     60 id="derivativeChecked{$derivative_type}" {if $derivative->get_type() ne $current.selected_derivative->get_type()}style="display:none"{/if}>&#x2714; </span>
     61<a href="javascript:changeImgSrc('{$derivative->get_url()|@escape:javascript}','{$derivative_type}','{$derivative->get_type()}')"
     62 id="derivativeName{$derivative_type}"
     63 class="{if $derivative->get_type() == $current.selected_derivative->get_type()}switchSelected{else}switchUnselected{/if}">
     64        {$derivative->get_type()|@translate}<span class="derivativeSizeDetails"> ({$derivative->get_size_hr()})</span>
     65</a><br>
    5866{/foreach}
    5967{if isset($U_ORIGINAL)}
  • trunk/themes/default/template/picture_nav_buttons.tpl

    r11579 r13729  
    3131        </a>
    3232{/if}
    33 {strip}{if isset($first)}
     33<!--{strip}{if isset($first)}
    3434        <a href="{$first.U_IMG}" title="{'First'|@translate} : {$first.TITLE}" class="pwg-state-default pwg-button">
    3535                <span class="pwg-icon pwg-icon-arrowstop-w">&nbsp;</span><span class="pwg-button-text">{'First'|@translate}</span>
     
    3939                <span class="pwg-icon pwg-icon-arrowstop-w">&nbsp;</span><span class="pwg-button-text">{'First'|@translate}</span>
    4040        </span>
    41 {/if}{/strip}
     41{/if}{/strip}-->
    4242{strip}{if isset($previous)}
    4343        <a href="{$previous.U_IMG}" title="{'Previous'|@translate} : {$previous.TITLE}" class="pwg-state-default pwg-button">
     
    7373        </span>
    7474{/if}{/strip}
    75 {strip}{if isset($last)}
     75<!--{strip}{if isset($last)}
    7676        <a href="{$last.U_IMG}" title="{'Last'|@translate} : {$last.TITLE}" class="pwg-state-default pwg-button pwg-button-icon-right">
    7777                <span class="pwg-icon pwg-icon-arrowstop-e"></span><span class="pwg-button-text">{'Last'|@translate}</span>
     
    8181                <span class="pwg-icon pwg-icon-arrowstop-e">&nbsp;</span><span class="pwg-button-text">{'Last'|@translate}</span>
    8282        </span>
    83 {/if}{/strip}
     83{/if}{/strip}-->
    8484{/if}
    8585</div>
  • trunk/themes/default/theme.css

    r13697 r13729  
    382382#imageToolBar .pwg-button {width:42px;}
    383383
    384 #derivativeSwitchBox, #sortOrderBox {
     384.switchBox {
    385385        padding: 0.5em 10px;
    386386        border-radius: 4px;
Note: See TracChangeset for help on using the changeset viewer.