Changeset 22768

Show
Ignore:
Timestamp:
24.08.2010 17:14:44 (9 years ago)
Author:
sjb48
Message:

Few changes to look and feel

Location:
main/trunk/greenstone3/web/interfaces/oran
Files:
3 modified

Legend:

Unmodified
Added
Removed
  • main/trunk/greenstone3/web/interfaces/oran/js/gui_div.js

    r22676 r22768  
    1 //jQuery( function($) { 
    2 //$('div.blockWrapper').iNestedSortable( 
    3 //  { 
    4 //    accept: 'block', 
    5 //  } 
    6 //); 
    7 //}); 
    81 
    92console.log("Loading gui_div.js\n"); 
     
    109102  
    110103    $('div.gsf_template').children(".block,.table").slideUp(300);  
    111     //$('div.gsf_template .table').hide();   
    112     //$('div.block').click(function() {     
    113         //alert("I was clicked!"); 
    114     //    $(this).children(".block").slideToggle('fast'); 
    115     //    return false; 
    116     //}); 
    117  
    118   
    119     //hide the all of the element with class msg_body 
    120   //$(".gsf_template > table").hide(); 
    121   //toggle the componenet with class msg_body 
    122   //$(".gsf_template").click(function() 
    123   //{ 
    124     //alert("You clicked? " + $("this > .table")); 
    125     //$(this).getElementsByTagName("table")[0].slideToggle(600); 
    126   //}); 
    127  
    128     //$(".resizable").resizable({containment: 'parent', alsoResize:'parent'}); 
    129  
    130     //$('.tr').equalHeights(); 
    131  
    132     //$(".td").resizable({ 
    133     //            alsoResize: 'parent', 
    134                 //containment: 'parent', 
    135     //            handles: 'e,s', 
    136     //            stop: function(event, ui) { 
    137     //                    $(this).parent().parent().equalHeights(); 
    138     //            }, }); 
    139  
    140104});  
    141105 
    142106/*******************************************************************************/ 
    143107 
    144 function minimize_templates() 
    145 { 
    146     //$(".msg_body").hide(); 
    147     //var targetContent = $('.table'); 
    148     //targetContent.hide(); 
    149     //targetContent.parent().css('display','none'); 
    150     //targetContent.slideUp(300); 
    151     //targetContent.parent().html('[+]'); 
    152  
    153 } 
    154  
    155108function bind_all_sortables() 
    156109{ 
     110    console.log('function bind_all_sortables()'); 
    157111    bind_template_sortable(); 
    158112    //bind_table_sortable(); 
     
    173127function bind_tables() 
    174128{ 
    175     $('.tr').equalHeights(); 
     129    console.log('function bind_tables()'); 
     130    //$('.tr').resize_tables($(this)); //equalHeights(); 
     131 
     132     
     133    $('td').click(function () { 
     134         console.log('td click'); 
     135         return false; 
     136    }); 
    176137 
    177138    $(".td").resizable({ 
     
    180141                handles: 'w,e', 
    181142                stop: function(event, ui) { 
    182                         $(this).parent().parent().equalHeights(); 
     143                        console.log('Resize table on stop'); 
     144                        resize_tables($(this)); 
     145                        //$(this).parent().parent().equalHeights(); 
    183146                }, }); 
    184147 
     
    186149            accept: '.element_type_td', 
    187150            tolerance: 'pointer',  
    188             activate: function(event, ui) { $(this).addClass("droppable_hl"); console.log("droppable activated")}, 
    189             deactivate: function(event, ui) { $(this).removeClass("droppable_hl"); console.log("droppable deactivated")}, 
     151            activate: function(event, ui) { $(this).addClass("droppable_hl");}, // console.log("droppable activated")}, 
     152            deactivate: function(event, ui) { $(this).removeClass("droppable_hl"); }, // console.log("droppable deactivated")}, 
    190153            drop: function(event, ui) { 
    191                 //alert("Something has been dropped on me!!"); 
    192                 //$(this).addClass('ui-state-highlight').find('p').html('Dropped!'); 
    193                  //var tr = this.parentNode.parentNode; //$(this).getElementsByTagName("tr")[0]; 
     154                 var span = document.createElement("div"); 
     155                 span.setAttribute("class","td"); 
     156                 span.setAttribute("style","height:50px"); 
     157                 span.setAttribute("style","display:block"); 
    194158                 var td = document.createElement("td"); 
    195159                 var div = document.createElement("div"); // class=\"td block\" title=\"td-div\""); 
    196160                 div.setAttribute("title","td-div"); 
    197161                 div.setAttribute("class","td block"); 
     162                 div.setAttribute("style","margin-left:0px"); 
    198163                 div.setAttribute("width","25px"); 
    199164                 td.appendChild(div); 
     165                 div.appendChild(span); 
    200166                 var sep = document.createElement("td"); 
    201167                 sep.setAttribute("class","droppable"); 
     
    204170                 $(this).after(td);                 
    205171                 bind_tables(); 
    206                  //bind_td_sortable(); 
     172                 resize_tables($(this)); 
     173                 bind_td_sortable(); 
    207174                 //bind_all_sortables(); 
    208175            } 
     
    213180function replace_with(item, me) 
    214181{ 
    215 /* 
    216     (item.parents('.table')).each(function(index) {  
    217         $(this).children().children().children('td').each(function() { 
    218             var sum = 0; 
    219             $(this).children('.block').each(function() { sum = sum + $(this).height(); } ); 
    220             console.log("My height is " + $(this).height() + ", sum height is " + sum); 
    221         }); 
    222     }); 
    223 */ 
    224     /* 
    225     alert(item.parents('.td').length); 
    226  
    227     (item.parents('.td')).each(function(index) {  
    228         $(this).children.each(function() 
    229         alert(index + " height is " + $(this).height()); // + $(this).style('height') + $(this).offsetHeight);  
    230         var h = $(this).height();  
    231         var a = 0; 
    232         // if we are now the maximum then set to h otherwise ignore? 
    233         $(this).parents('.table').each(function() {$(this).children().children().children().each(function() { if($(this).height() > a) a = $(this).height(); } ) } ); 
    234         alert("A is " + a); 
    235         if( h > a) 
    236         { 
    237             h = h + 25;  
    238             alert("Increasing height to " + h); 
    239             $(this).height(h); 
    240             alert("height is now " + $(this).height()); 
    241         } 
    242         else 
    243             alert("height did not need increasing (h=" + h + ",a=" + a + ")"); 
    244     }); //forEach().css('height')); 
    245     */ 
    246      
     182    console.log('function replace_with(item, me)'); 
    247183    item.replaceWith(me); //'<div class="element element-txt">This text box has been added!</div>'); 
    248184 
     185    resize_tables(item); 
     186 
     187    bind_all_sortables(); 
     188} 
     189 
     190function resize_tables(item) 
     191{ 
     192    console.log('function resize_tables(item)'); 
     193    var max_height = 0; 
    249194    (item.parents('.table')).each(function(index) { 
    250195        $(this).children().children().children().each(function() { 
    251             var sum = 0; 
    252             $(this).children('.block').each(function() { sum = sum + $(this).height(); } ); 
    253             console.log("My height is " + $(this).height() + ", sum height is " + sum); 
     196            var sum_one = 0; 
     197            var sum_two = 0; 
     198            $(this).children('.block').each(function() { sum_one = sum_one + $(this).height();   
     199                $(this).children('.block').each(function() { sum_two = sum_two + $(this).height(); } ); 
     200                console.log("My height is " + $(this).height() + ", sum height 2 is " + sum_two); 
     201            }); 
     202            console.log("My height is " + $(this).height() + ", sum height 1 is " + sum_one); 
     203            if (sum_two > max_height) 
     204                max_height = sum_two; 
    254205        }); 
    255206    }); 
    256  
    257     bind_all_sortables(); 
     207    equalHeights(item,max_height); 
    258208} 
    259209 
    260210function bind_template_sortable() 
    261211{ 
     212    console.log('function bind_template_sortable()'); 
    262213    $('.gsf_template').sortable({ 
    263214            'cursor':'pointer', 
    264             'tolerance': 'fit', 
    265215            'items':'.table, .gsf_choose_metadata, .gsf_metadata', 
    266216            'placeholder':'placeholder', 
     
    276226    }); 
    277227 
    278 } 
    279  
    280 /* 
    281 function bind_table_sortable() 
    282 { 
    283     $('.table').sortable({ 
     228    $('.gsf_template').click(function () { 
     229         console.log('gsf_template class click'); 
     230         return false; 
     231    }); 
     232 
     233} 
     234 
     235function bind_td_sortable() 
     236{ 
     237    console.log('function bind_td_sortable()'); 
     238    $('.td').sortable({ 
    284239            'cursor':'pointer', 
    285240            'tolerance': 'pointer', 
    286             'items':'.tr', 
    287             'placeholder':'placeholder', 
    288             //'nested':'.gsf:metadata' 
    289             stop: function(event, ui) { 
    290                 if (ui.item.hasClass("ui-draggable") && ui.item.hasClass('element_type_tr')) { replace_with(ui.item, "<tr class=\"tr\"></tr>"); } 
    291             } 
    292  
    293     }); 
    294 } 
    295  
    296 function bind_tr_sortable() 
    297 { 
    298     $('.tr').sortable({ 
    299             'cursor':'pointer', 
    300             'tolerance': 'pointer', 
    301             'items':'.td', 
    302             'placeholder':'placeholder', 
    303             //'nested':'.gsf:metadata' 
    304             stop: function(event, ui) { 
    305                 if (ui.item.hasClass("ui-draggable") && ui.item.hasClass('element_type_td')) { replace_with(ui.item, "<td class=\"td\"></td>"); } 
    306             } 
    307  
    308     }); 
    309 } 
    310  
    311 */ 
    312  
    313 function bind_td_sortable() 
    314 { 
    315     $('.td').sortable({ 
    316             'cursor':'pointer', 
    317             'containment':'parent', 
    318             'tolerance': 'pointer', 
    319             'items':'.gsf_metadata, .gsf_choose_metadata, .gsf_link, .gsf_switch, .td', 
     241            'items':'.gsf_metadata, .gsf_choose_metadata, .gsf_link, .gsf_switch', 
    320242            'placeholder':'placeholder', 
    321243            //'nested':'.gsf:metadata' 
     
    323245            stop: function(event, ui) { 
    324246                if (ui.item.hasClass("ui-draggable") && ui.item.hasClass('element_type_gsf_metadata')) { replace_with(ui.item, gsf_metadata_element); } 
    325                 /*if (ui.item.hasClass("ui-draggable") && ui.item.hasClass('element_type_td')) {  
    326                     alert("Inserting td " + this.parentNode.parentNode + " " + $('.td').sortable( "widget" ));  
    327                     var tr = this.parentNode.parentNode; //$(this).getElementsByTagName("tr")[0]; 
    328                     var td = document.createElement("td");  
    329                     var div = document.createElement("div"); // class=\"td block\" title=\"td-div\""); 
    330                     //var cls = document.createAttribute("class"); 
    331                     div.setAttribute("title","td-div"); 
    332                     div.setAttribute("class","td block"); 
    333                     var span = document.createElement("div"); 
    334                     span.setAttribute("class", "block gsf_metadata"); 
    335                     span.setAttribute("style","height:50px"); 
    336                     //div.setAttribute(cls,"block"); 
    337                     div.appendChild(span); 
    338                     td.appendChild(div); 
    339                     tr.appendChild(td);  
    340                     ui.item.remove();  
    341                     bind_all_sortables(); 
    342                 }*/ 
    343247                 
    344248            } 
    345249 
    346250    }); 
     251 
     252    $('.td').click(function () {     
     253         console.log('td class click'); 
     254         return false; 
     255    }); 
     256 
     257 
     258 
    347259} 
    348260 
    349261function bind_choose_metadata_sortable() 
    350262{ 
     263    console.log('function bind_choose_metadata_sortable()'); 
    351264    $('.gsf_choose_metadata').sortable({ 
    352265            'cursor':'pointer', 
     
    364277function bind_link_sortable() 
    365278{ 
     279    console.log('function bind_link_sortable()'); 
    366280    $('.gsf_link').sortable({ 
    367281            'cursor':'pointer', 
     
    378292function bind_switch_sortable() 
    379293{ 
     294    console.log('function bind_switch_sortable()'); 
    380295    $('.gsf_switch').sortable({ 
    381296            'cursor':'pointer', 
     
    393308function bind_when_sortable() 
    394309{ 
     310    console.log('function bind_when_sortable()'); 
    395311    $('.gsf_when').sortable({ 
    396312            'cursor':'pointer', 
     
    407323function bind_otherwise_sortable() 
    408324{ 
     325    console.log('function bind_otherwise_sortable()'); 
    409326    $('.gsf_otherwise').sortable({ 
    410327            'cursor':'pointer', 
     
    422339function bind_block_mouseover() 
    423340{ 
     341    console.log('function bind_block_mouseover()'); 
    424342    $(".block").mouseover(function() 
    425343    { 
    426         //alert("Mouse over event"); 
    427344        $(this).parents().css("border", ""); 
    428345        $(this).css("border", "1px solid blue"); 
     
    436353function bind_minmax_remove() 
    437354{ 
     355    console.log('function bind_minmax_remove()'); 
    438356    $('a.minmax').bind('click', toggleContent); 
    439357    $('a.remove').bind('click', removeContent); 
     
    441359 
    442360var removeContent = (function () { 
    443         //var parentTag = $(this).parent().get(0).titleName; 
    444         //alert("Removing div " + parentTag); 
    445         $(this).parent().remove(); 
     361    console.log('var removeContent = (function ()'); 
     362        // this -> a -> td -> tr -> tbody -> table -> div 
     363        $(this).parent().parent().parent().parent().parent().remove(); 
    446364    }); 
    447365 
     
    449367var toggleContent = function(e) 
    450368{ 
    451     //var targetContent = $('div.block', this.parentNode); 
    452     //$(".msg_head").click(function() 
    453   //{ 
    454     //$(this).next(".block").slideToggle(600); 
    455   //}); 
    456     //alert($(this).html() + " " + $(this).css('display') + " " + targetContent.css('display')); 
     369    console.log('var toggleContent = function(e)'); 
     370    console.log('parent: ' + $(this).html()); 
    457371    if ($(this).html() == '[+]'){ //targetContent.css('display') == 'none') { 
    458     //if ($(this).css('display') == 'none') { 
    459    //     var targetContent2 = $('.table'); 
    460    //     targetContent2.show(); 
    461  
    462    //     targetContent.show(); 
    463    //     targetContent.slideDown(300); 
    464    //     alert("I should be sliding down! " + $(this).parent()); 
    465         $(this).parent().children(".block,.table").slideDown(300); 
     372        $(this).parent().parent().parent().parent().parent().children(".block,.table").slideDown(300); 
    466373        $(this).html('[-]'); 
     374        $(this).removeClass("ui-icon-plusthick"); 
     375        $(this).addClass("ui-icon-minusthick"); 
    467376    } else { 
    468     //    targetContent.slideUp(300); 
    469         $(this).parent().children(".block,.table").slideUp(300); 
     377        $(this).parent().parent().parent().parent().parent().children(".block,.table").slideUp(300); 
    470378        $(this).html('[+]'); 
     379        $(this).removeClass("ui-icon-minusthick"); 
     380        $(this).addClass("ui-icon-plusthick"); 
    471381    } 
    472     //$(this).children(".block, .table").slideToggle('fast'); 
    473382    return false; 
    474383}; 
     
    480389}; 
    481390 
    482 /*--------------------------------------------------------------------  
    483  * JQuery Plugin: "EqualHeights" 
    484  * by:  Scott Jehl, Todd Parker, Maggie Costello Wachs (http://www.filamentgroup.com) 
    485  * 
    486  * Copyright (c) 2008 Filament Group 
    487  * Licensed under GPL (http://www.opensource.org/licenses/gpl-license.php) 
    488  * 
    489  * Description: Compares the heights or widths of the top-level children of a provided element  
    490         and sets their min-height to the tallest height (or width to widest width). Sets in em units  
    491         by default if pxToEm() method is available. 
    492  * Dependencies: jQuery library, pxToEm method  (article:  
    493         http://www.filamentgroup.com/lab/retaining_scalable_interfaces_with_pixel_to_em_conversion/)                               
    494  * Usage Example: $(element).equalHeights(); 
    495         Optional: to set min-height in px, pass a true argument: $(element).equalHeights(true); 
    496  * Version: 2.0, 08.01.2008 
    497 --------------------------------------------------------------------*/ 
    498  
    499 // Modified to get children of children ie. tr -> td -> div 
    500  
    501 $.fn.equalHeights = function(px) { 
    502     //console.log("EQUAL HEIGHTS"); 
    503     $(this).each(function(){ 
    504         var currentTallest = 0; 
    505         //console.log($(this).children()); 
    506         //console.log($(this).children().children()); 
    507         //$(this).children().children().each(function(i){ 
    508         //    console.log($(this)); 
    509         //    console.log("THIS HEIGHT="+$(this).height()+ " CURRENT TALLEST="+ currentTallest); 
    510             //if ($(this).height() > currentTallest) { currentTallest = $(this).height(); } 
    511             //if ($(this).height() > currentTallest) { currentTallest = $(this).height(); } 
    512         //}); 
    513         //if (!px || !Number.prototype.pxToEm) currentTallest = currentTallest.pxToEm(); //use ems unless px is specified 
    514         // for ie6, set height since min-height isn't supported 
    515         //if ($.browser.msie && $.browser.version == 6.0) { $(this).children().children().css({'height': $(this).currentTallest}); } 
    516         $(this).children().children().css({'height': $(this).height()}); //currentTallest});  
    517     }); 
    518     return this; 
     391function equalHeights(item, height) { 
     392    console.log('function equalHeights(item, height)'); 
     393    (item.parents('.table')).each(function(index) { 
     394        $(this).children().children().children().each(function() { 
     395            $(this).height(height); 
     396            $(this).children().height(height); 
     397        }); 
     398    }); 
    519399}; 
    520400 
  • main/trunk/greenstone3/web/interfaces/oran/transform/layouts/main.xsl

    r22676 r22768  
    3535                <!-- <script type="text/javascript" src="interfaces/oran/js/jquery.js"><xsl:text> </xsl:text></script> -->  
    3636                <script type="text/javascript" src="interfaces/oran/js/jquery-1.4.2.js"><xsl:text> </xsl:text></script> 
    37                 <script type="text/javascript" src="interfaces/oran/js/jquery-ui-1.8.2.custom.min.js"><xsl:text> </xsl:text></script> 
     37                <!-- <script type="text/javascript" src="interfaces/oran/js/jquery-ui-1.8.2.custom.min.js"><xsl:text> </xsl:text></script> --> 
     38                <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.4/jquery-ui.js"><xsl:text> </xsl:text></script> 
    3839                <!-- <script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js"><xsl:text> </xsl:text></script> --> 
    3940                <!-- <script type="text/javascript" src="interfaces/oran/js/jquery-ui-1.8rc1/jquery-1.4.1.js"><xsl:text> </xsl:text></script> --> 
     
    147148            height:20px; 
    148149        } 
     150 
     151        .header { background-color: #AFCCAF; border: solid 1px #117711;} 
    149152 
    150153        .resizable { width: 150px; height: 150px; padding: 0.5em; }  
  • main/trunk/greenstone3/web/interfaces/oran/transform/layouts/xml-to-gui.xsl

    r22676 r22768  
    119119 
    120120        <div class="gsf_choose_metadata css_gsf_choose_metadata block" title="gsf:choose-metadata"> 
    121                 CHOOSE <a href="#" class="minmax">[-]</a><a href="#" class="remove">[x]</a> 
     121        <table class="header"><tbody><tr><td>CHOOSE</td><td><a href="#" class="minmax ui-icon ui-icon-minusthick" title="Click me to expand">[-]</a></td><td><a href="#" class="remove ui-icon ui-icon-closethick" title="Click me to remove"/></td></tr></tbody></table> 
    122122                <xsl:apply-templates mode="xml-to-gui"> 
    123123                    <xsl:with-param name="depth" select="$depth"/> 
     
    133133        <xsl:param name="metadataSets"/> 
    134134 
    135         <div class="gsf_metadata css_gsf_metadata block leaf" title="gsf:metadata"><xsl:call-template name="meta-to-combo"> 
     135        <div class="gsf_metadata css_gsf_metadata block leaf" title="gsf:metadata"> 
     136            <xsl:variable name="combo"> 
     137                <xsl:call-template name="meta-to-combo"> 
    136138                        <xsl:with-param name="metadataSets" select="$metadataSets"/> 
    137139                        <xsl:with-param name="current" select="@name"/> 
    138                      </xsl:call-template><a href="#" class="remove">[x]</a> 
     140                     </xsl:call-template> 
     141            </xsl:variable> 
     142        <table class="header"><tbody><tr><td><xsl:copy-of select="$combo"/></td><td><a href="#" class="remove ui-icon ui-icon-closethick" title="Click me to remove"/></td></tr></tbody></table> 
    139143        </div> 
    140144    </xsl:template> 
     
    147151 
    148152        <div class="gsf_link css_gsf_link block" title="gsf:link"> 
     153        <xsl:variable name="link"> 
    149154                LINK[type= 
    150155                <select> 
     
    172177                        </xsl:when> 
    173178                  </xsl:choose> 
    174                 </select>]<a href="#" class="minmax">[-]</a><a href="#" class="remove">[x]</a> 
     179                </select>] 
     180        </xsl:variable> 
     181        <table class="header"><tbody><tr><td><xsl:copy-of select="$link"/></td><td><a href="#" class="minmax ui-icon ui-icon-minusthick" title="Click me to expand">[-]</a></td><td><a href="#" class="remove ui-icon ui-icon-closethick" title="Click me to remove"/></td></tr></tbody></table> 
    175182                <xsl:apply-templates mode="xml-to-gui"> 
    176183                    <xsl:with-param name="depth" select="$depth"/> 
     
    196203 
    197204        <div class="gsf_template css_gsf_template block" title="gsf:template"> 
    198                 MATCH=<input type="text" name="rawtextinput" size="10" value="{@match}"/><xsl:choose> 
     205            <xsl:variable name="mode"> 
     206                <xsl:choose> 
    199207                    <xsl:when test="not(@mode)"> <!-- parameter has not been supplied --> 
    200208                    </xsl:when> 
    201209                    <xsl:otherwise>MODE=<input type="text" name="rawtextinput" size="10" value="{@mode}"/></xsl:otherwise> 
    202                     </xsl:choose><a href="#" class="minmax">[+]</a><a href="#" class="remove">[x]</a> 
     210                </xsl:choose> 
     211            </xsl:variable> 
     212     
     213                    <!-- <a href="#" class="minmax">[+]</a><a href="#" class="remove">[x]</a><a href="#" class="remove"><img src="interfaces/oran/images/green_button_close.png" alt="[x]" title="Click me to remove"/></a><a href="[myhref]" class="ui-state-default ui-corner-all"><span class="ui-icon ui-icon-home" style="float:left;"></span>Home</a> --> 
     214            <table class="header"><tbody><tr><td>MATCH=<input type="text" name="rawtextinput" size="10" value="{@match}"/></td><td><xsl:copy-of select="$mode"/></td><td><a href="#" class="minmax ui-icon ui-icon-plusthick" title="Click me to expand">[+]</a></td><td><a href="#" class="remove ui-icon ui-icon-closethick" title="Click me to remove"/></td></tr></tbody></table> 
     215 
    203216                <table class="table" border="1"> 
    204217                <tbody> 
     
    221234 
    222235        <div class="gsf_switch css_gsf_switch block" title="gsf:switch"> 
    223                 SWITCH <a href="#" class="minmax">[-]</a><a href="#" class="remove">[x]</a> 
     236                <table class="header"><tbody><tr><td>SWITCH</td><td><a href="#" class="minmax ui-icon ui-icon-minusthick">[-]</a></td><td><a href="[myhref]" class="ui-icon ui-icon-closethick"/></td></tr></tbody></table> 
    224237                <xsl:apply-templates mode="xml-to-gui"> 
    225238                    <xsl:with-param name="depth" select="$depth"/> 
     
    236249 
    237250        <div class="gsf_when css_gsf_when block" title="gsf:when">  
    238                 WHEN[test=<xsl:value-of select="@test"/>]<a href="#" class="minmax">[-]</a><a href="#" class="remove">[x]</a> 
     251                <table class="header"><tbody><tr><td>WHEN[test=<xsl:value-of select="@test"/>]</td><td><a href="#" class="minmax ui-icon ui-icon-minusthick">[-]</a></td><td><a href="[myhref]" class="ui-icon ui-icon-closethick"/></td></tr></tbody></table> 
    239252                <xsl:apply-templates mode="xml-to-gui"> 
    240253                  <xsl:with-param name="depth" select="$depth"/> 
     
    251264 
    252265        <div class="gsf_otherwise css_gsf_otherwise block" title="gsf:otherwise"> 
    253                 OTHERWISE <br/><a href="#" class="minmax">[-]</a><a href="#" class="remove">[x]</a> 
     266                <table><tbody><tr><td>OTHERWISE</td><td><a href="#" class="minmax ui-icon ui-icon-minusthick">[-]</a></td><td><a href="#" class="remove">[x]</a></td><td><a href="[myhref]" class="ui-icon ui-icon-closethick"/></td></tr></tbody></table> 
    254267                <xsl:apply-templates mode="xml-to-gui"> 
    255268                    <xsl:with-param name="depth" select="$depth"/> 
     
    266279 
    267280        <div class="gsf_icon css_gsf_icon block leaf" title="gsf:icon"> 
     281            <xsl:variable name="icon"> 
    268282                ICON[type= 
    269283                <select> 
     
    285299                        </xsl:when> 
    286300                  </xsl:choose> 
    287                 </select>]<a href="#" class="minmax">[-]</a><a href="#" class="remove">[x]</a> 
     301                </select>] 
     302                </xsl:variable> 
     303            <table class="header"><tbody><tr><td><xsl:copy-of select="$icon"/></td><td><a href="#" class="remove ui-icon ui-icon-closethick" title="Click me to remove"/></td></tr></tbody></table> 
    288304        </div> 
    289305    </xsl:template> 
     
    296312 
    297313        <div class="block" title="gsf:default"> 
    298                 DEFAULT <a href="#" class="minmax">[-]</a><a href="#" class="remove">[x]</a> 
     314                <table class="header"><tbody><tr><td>DEFAULT</td><td><a href="#" class="minmax ui-icon ui-icon-minusthick" title="Click me to expand">[-]</a></td><td><a href="[myhref]" class="ui-icon ui-icon-closethick"/></td></tr></tbody></table> 
    299315                <xsl:apply-templates mode="xml-to-gui"> 
    300316                    <xsl:with-param name="depth" select="$depth"/> 
     
    312328        <div class="block leaf" title="gsf:text"> 
    313329                <xsl:variable name="rawtext"><xsl:value-of select="."/></xsl:variable> 
    314                 TEXT = <input type="text" name="rawtextinput" size="10" value="{$rawtext}"/><a href="#" class="minmax">[-]</a><a href="#" class="remove">[x]</a> 
     330                <table class="header"><tbody><tr><td><input type="text" name="rawtextinput" size="10" value="{$rawtext}"/></td><td><a href="[myhref]" class="ui-icon ui-icon-closethick"/></td></tr></tbody></table> 
    315331        </div> 
    316332    </xsl:template> 
     
    334350            </div> 
    335351        </td> 
    336         <td class="droppable" width="10px"/> 
     352        <td class="droppable" width="10px" title="Drag a new column on to me"/> 
    337353    </xsl:template> 
    338354