Changeset 2017


Ignore:
Timestamp:
Sep 12, 2011, 6:05:43 PM (12 years ago)
Author:
tjeerd@…
Message:

New fancy interface update l33t! w00t!

Location:
trunk
Files:
3 edited

Legend:

Unmodified
Added
Removed

  • trunk/grails-app/views/visualize/index.gsp

    r2014 r2017  
    2121        /** NEEDED FOR RESOURCES PLUGIN **/
    2222        .menu_arrow {background-image: url(${resource(dir: 'images/visualization', file: 'down_arrow.png')}); }
    23         .error { background: #ffe0e0 url(${fam.icon( name: 'exclamation' )}) 10px 10px no-repeat; }
    24         .warning{ background: #eee url(${fam.icon( name: 'information' )}) 10px 10px no-repeat; }
     23        .message_error { background: #ffe0e0 url(${fam.icon( name: 'exclamation' )}) 10px 5px no-repeat; }
     24        .message_warning { background: #eee url(${fam.icon( name: 'information' )}) 10px 5px no-repeat; }
    2525    </style>
    2626       
    … …  
    8080            <h1>Visualize your study</h1>
    8181
    82             <div id="message" class="error">
     82            <div id="message_counter" onclick="errorDiv(); return false;">0</div>
     83
     84            <div id="message_container">
    8385                <g:if test="${flash.error}">
    84                     ${flash.error.toString().encodeAsHTML()}
     86                    <div class="message_box message_error">
     87                        ${flash.error.toString().encodeAsHTML()}
     88                    </div>
    8589                </g:if>
    8690                <g:if test="${flash.message}">
    87                     ${flash.message.toString().encodeAsHTML()}
     91                    <div class="message_box message_warning">
     92                        ${flash.message.toString().encodeAsHTML()}
     93                    </div>
    8894                </g:if>
    8995            </div>

  • trunk/web-app/css/visualization.css

    r2014 r2017  
    1111/** START :: MESSAGES**/
    1212
    13 #message {
    14     width: 840px;
    15     height: 40px;
    16     overflow: hidden;
     13#message_container {
    1714    display: none;
    1815}
    1916
    20 .error {
    21         border: 1px solid #f99; /* #006dba; */
    22         margin-bottom: 10px;
    23         margin-top: 10px;
    24         padding: 10px 10px 10px 33px;
     17.message_box {
     18    width: 750px;
     19    padding: 5px 35px;
     20    margin: 2px 10px;
     21    display: none;
    2522}
    2623
    27 .warning {
    28         border: 1px solid #06C; /* #006dba; */
    29         margin-bottom: 10px;
    30         margin-top: 10px;
    31     padding: 10px 10px 10px 33px;
     24.message_error {
     25        border: 1px solid #f99;
     26}
     27
     28.message_warning {
     29        border: 1px solid #06C;
     30
     31}
     32
     33#message_counter {
     34    position: absolute;
     35    top: 0px;
     36    right: 0px;
     37    padding: 3px;
     38    width: 18px;
     39    height: 18px;
     40    border: 2px solid gray;
     41    text-align: center;
     42    vertical-align: middle;
     43}
     44
     45#message_counter:hover {
     46    text-decoration: underline;
     47    background: #87cefa;
     48}
     49
     50div#message_counter.message_newmessage {
     51    width: 150px;
     52    height: 150px;
     53    background-color: pink;
    3254}
    3355

  • trunk/web-app/js/visualization.js

    r2014 r2017  
    33 */
    44var visualization = null;
     5var visType = null;
    56
    67$(document).ready(function() {
    … …  
    3334            "success": function( data, textStatus, jqXHR ) {
    3435                // Remove all previous entries from the list
    35                 $( '#rows, #columns' ).empty();
     36                $( '#rows, #columns, #types' ).empty();
     37
     38                if( visualization )
     39                    visualization.destroy();
    3640
    3741                if(data.infoMessage) {
    38                     showError(data.infoMessage,"warning");
     42                    showError(data.infoMessage,"message_warning");
    3943                }
    4044
    … …  
    4852                        $.each( returnData, function( idx, field ) {
    4953                        if(field.category!=prevCat) {
    50                             $( '#rows, #columns' )
    51                                     .append( $( "<option>" )
    52                                     .val( "" )
    53                                     .text( field.source+": "+field.category )
    54                                     .attr("disabled","disabled")
    55                                     .css("font-weight","bold")
    56                                     .css("color","white")
    57                                     .css("background-color","#333") );
     54                            if(prevCat.length>0) $( '#rows, #columns' ).append( "</optgroup>" );
     55                            $( '#rows, #columns' ).append( "<optgroup label='"+field.source+": "+field.category+"' onClick='return false;'>" );
    5856                            prevCat = field.category;
    5957                        }
    6058                            $( '#rows, #columns' ).append( $( "<option>" ).val( field.id ).text( field.name ) );
    6159                        });
     60                    $( '#rows, #columns' ).append( "</optgroup>" );
    6261                       
    6362                        $( "#menu_study" ).find("div.menu_item_info").html("<br />"+$( '#study option:selected' ).text());
    … …  
    6867        },'menu_study');
    6968    } else {
    70         $( '#rows, #columns' ).empty();
     69        $( '#rows, #columns, #types' ).empty();
    7170        clearStep(".menu_item");
     71
    7272        $( "#menu_study" ).addClass("menu_item_fill");
    7373    }
    … …  
    9494
    9595                if(data.infoMessage!=null) {
    96                     showError(data.infoMessage,"warning");
     96                    showError(data.infoMessage,"message_warning");
    9797                } else {
    9898
    … …  
    102102                    $.each( returnData, function( idx, field ) {
    103103                        $( '#types' ).append( $( "<option>" ).val( field.id ).text( field.name ) );
     104                        if(field.name==visType) {$( '#types option:last' ).attr("selected","selected");};
    104105                    });
    105106
    … …  
    117118                    clearStep("#menu_vis");
    118119                    $( "#menu_vis" ).addClass("menu_item_fill");
     120                    if( visualization )
     121                        visualization.destroy();
     122                   
    119123                    if($( '#types option' ).length==1) {
    120124                        $( '#types :first-child' ).attr("selected","selected");
     125                    }
     126                    if($( '#types option:selected' ).length>0) {
    121127                        changeVis();
    122128                    }
    … …  
    139145    if($( '#types option:selected' ).val()!="") {
    140146        $( "#menu_vis" ).removeClass().addClass("menu_item menu_item_done");
    141         $( "#menu_vis" ).find("div.menu_item_info").html("<br />"+$( '#types option:selected' ).text());
     147        visType = $( '#types option:selected' ).text();
     148        $( "#menu_vis" ).find("div.menu_item_info").html("<br />"+visType);
    142149    } else {
    143150        $( "#menu_vis" ).find("div.menu_item_info").html("");
    … …  
    175182
    176183                if(data.infoMessage!=null) {
    177                     showError(data.infoMessage,"warning");
     184                    showError(data.infoMessage,"message_warning");
    178185                }
    179186                // Handle erroneous data
    180187                /*if( !checkCorrectData( data.returnData ) ) {
    181                     showError( "Unfortunately the server returned data in a format that we did not expect.", "error" );
     188                    showError( ["Unfortunately the server returned data in a format that we did not expect."], "message_error" );
    182189                    return;
    183190                }*/
    … …  
    238245/**
    239246 * Shows an error message in a proper way
    240  * @param message       String  Message to show
    241  */
    242 function showError( message, strClass ) {
    243         $( '#message' ).html( message );
    244     $( '#message' ).removeClass().addClass(strClass);
    245         $( '#message' ).fadeIn();
    246     $(document).bind('click',function() {
    247         $( '#message' ).removeClass();
    248         $( '#message' ).html("");
    249         $(document).unbind('click');
    250     });
     247 * @param messages      array of Strings
     248 * @param strClass  the Class the messages get
     249 */
     250function showError( messages, strClass ) {
     251    for (index in messages) {
     252        var newClose = $( "<div>" ).css("position","absolute").css("top","3px").css("right","10px").html("<a href='#' onclick='removeError(this); return false;'>x</a>");
     253            $( '#message_container' ).prepend( $( "<div>" ).addClass("message_box "+strClass).html( messages[index] ).css("position","relative").fadeIn().append(newClose) );
     254    }
     255    $( '#message_counter' ).addClass("message_newmessage");
     256    $( '#message_counter' ).switchClass("message_newmessage","",2000);
     257    $( '#message_counter' ).html($('.message_box').length);
     258}
     259
     260function errorDiv() {
     261    if($( '#message_container' ).css("display")=="none") {
     262        $( '#message_container' ).show("fast");
     263    } else {
     264        $( '#message_container' ).hide("fast");
     265    }
     266}
     267
     268function removeError(strSelector) {
     269    $( strSelector ).closest(".message_box").remove();
     270    $( "#message_counter" ).html($(".message_box").length);
     271    if($(".message_box").length==0) {
     272        errorDiv();
     273    }
    251274}
    252275
    … …  
    323346                ajaxParameters[ "error" ] = function( jqXHR, textStatus, errorThrown ) {
    324347                        // An error occurred while retrieving fields from the server
    325                         showError( "An error occurred while retrieving variables from the server. Please try again or contact a system administrator.<br />"+textStatus, "error" );
     348                        showError( ["An error occurred while retrieving variables from the server. Please try again or contact a system administrator.<br />"+textStatus], "message_error" );
    326349            $( "#"+divid ).removeClass().addClass('menu_item menu_item_error');
    327350            $( "#"+divid ).find("img.spinner").hide();
Note: See TracChangeset for help on using the changeset viewer.