Changeset 484

Show
Ignore:
Timestamp:
27-05-10 11:36:22 (4 years ago)
Author:
duh
Message:

- grouping page version 0.2 (tooltips working, headers, help feedback)
- made sure field name show with the first letter as uppercase in the wizard

Location:
trunk
Files:
5 modified

Legend:

Unmodified
Added
Removed
  • trunk/grails-app/taglib/dbnp/studycapturing/WizardTagLib.groovy

    r457 r484  
    727727                        // render template fields 
    728728                        entity.giveFields().each() { 
    729                                 out << '<div class="' + attrs.get('class') + '">' + it.name + (it.unit ? " (${it.unit})" : '') 
     729                                def ucName              = it.name[0].toUpperCase() + it.name.substring(1) 
     730 
     731                                out << '<div class="' + attrs.get('class') + '">' + ucName + (it.unit ? " (${it.unit})" : '') 
    730732                                if (it.comment) { 
    731733                                        out << '<div class="helpIcon"></div>' 
     
    767769                                def fieldValue  = entity.getFieldValue(it.name) 
    768770                                def helpText    = (it.comment && renderType == 'element') ? it.comment : '' 
     771                                def ucName              = it.name[0].toUpperCase() + it.name.substring(1) 
    769772 
    770773                                // output column opening element? 
     
    777780                                                inputElement = (renderType == 'element') ? 'textFieldElement' : 'textField' 
    778781                                                out << "$inputElement"( 
    779                                                         description: it.name, 
     782                                                        description: ucName, 
    780783                                                        name: prependName + it.escapedName(), 
    781784                                                        value: fieldValue 
     
    786789                                                if (!it.listEntries.isEmpty()) { 
    787790                                                        out << "$inputElement"( 
    788                                                                 description: it.name, 
     791                                                                description: ucName, 
    789792                                                                name: prependName + it.escapedName(), 
    790793                                                                from: it.listEntries, 
     
    802805                                                if (it.ontologies) { 
    803806                                                        out << "$inputElement"( 
    804                                                                 description     : it.name, 
     807                                                                description     : ucName, 
    805808                                                                name            : prependName + it.escapedName(), 
    806809                                                                value           : fieldValue.toString(), 
     
    809812                                                } else { 
    810813                                                        out << "$inputElement"( 
    811                                                                 description     : it.name, 
     814                                                                description     : ucName, 
    812815                                                                name            : prependName + it.escapedName(), 
    813816                                                                value           : fieldValue.toString() 
     
    854857                                                // render element 
    855858                                                out << "$inputElement"( 
    856                                                         description: it.name, 
     859                                                        description: ucName, 
    857860                                                        name: prependName + it.escapedName(), 
    858861                                                        value: fieldValue, 
  • trunk/grails-app/views/wizard/pages/_groups.gsp

    r469 r484  
    1919<div class="table"> 
    2020        <div class="header"> 
    21                 <div class="column"></div> 
    22                 <div class="column"></div> 
     21                <div class="column">Template</div> 
     22                <div class="column">Subjects</div> 
    2323                <g:if test="${eventGroups}"><g:each var="eventGroup" status="g" in="${eventGroups}"> 
    24                 <div class="column">${eventGroup.name}</div> 
     24                <div class="column"> 
     25                        ${eventGroup.name} 
     26                        <div class="helpIcon"></div> 
     27                        <div class="helpContent"> 
     28                                <h1>${eventGroup.name}</h1> 
     29                                <g:each var="event" status="e" in="${eventGroup.events}"> 
     30                                        <h2>${event.template}</h2> 
     31                                        <g:each var="field" status="f" in="${event.giveFields()}"> 
     32                                                ${field.name}: ${event.getFieldValue(field.name)}<br/> 
     33                                        </g:each> 
     34                                </g:each> 
     35                        </div> 
     36                </div> 
    2537                </g:each></g:if> 
    2638        </div> 
     
    3446                        <g:if test="${showHeader}"> 
    3547                                <g:set var="showHeader" value="${false}" /> 
    36                                 ${subjectTemplate.name} template 
     48                                ${subjectTemplate.name} 
     49                                <div class="helpIcon"></div> 
     50                                <div class="helpContent"> 
     51                                        <h2>Template Fields:</h2> 
     52                                        <g:each var="field" status="f" in="${subjects[ subjectId ].giveFields()}"> 
     53                                                ${field.name[0].toUpperCase() + field.name.substring(1)}<br/> 
     54                                        </g:each> 
     55                                </div> 
    3756                        </g:if> 
    3857                </div> 
  • trunk/web-app/css/default_style.css

    r382 r484  
    1515    margin: .8em 0 .3em 0; 
    1616} 
     17h2 { 
     18    color: #006dba; 
     19    font-weight: normal; 
     20    font-size: 12px; 
     21    margin: .8em 0 .3em 0; 
     22} 
    1723/** START :: container **/ 
    1824.container { 
  • trunk/web-app/css/wizard.css

    r477 r484  
    190190    display: none; 
    191191} 
    192  
    193 .wizard .element .help { 
    194     vertical-align: top; 
    195     display: inline-block; 
    196     zoom: 1; /* IE 6 & 7 hack */ 
    197     *display: inline; /* IE 6 & 7 hack */ 
    198 } 
    199  
    200 .wizard .element .help .icon { 
    201     margin-top: 4px; 
    202     background: url(../images/icons/famfamfam/help.png) no-repeat left top; 
    203     width: 16px; 
    204     height: 16px; 
    205 } 
    206  
    207 .wizard .element .help .content { 
    208     display: none; 
    209 } 
    210  
    211192/** END :: HELP **/ 
    212193 
     
    220201    overflow: hidden; 
    221202    white-space: nowrap; 
     203} 
     204 
     205.wizard .table b { 
     206    color: #006dba; 
     207    font-weight: bold; 
    222208} 
    223209 
     
    233219} 
    234220 
    235 .wizard .header .helpIcon { 
     221.wizard .column .helpIcon { 
    236222    display: inline-block; 
    237223    margin-top: 4px; 
     
    303289} 
    304290 
    305 .wizard .table .highlight, .wizard .table .highlight input, .wizard .table .highlight select { 
     291.wizard .table .highlight, .wizard .table .highlight input, .wizard .table .highlight select, .wizard .table .highlight b { 
    306292    background-color: #006DBA; 
    307293    color: #fff; 
  • trunk/web-app/css/wizard.min.css

    r477 r484  
    1 .wizard{display:block;padding-top:10px;}.wizard .info{display:block;border:1px solid #006DBA;background-color:#f8feff;padding:10px;font-size:10px;margin:10px 0 10px 0;}.wizard .info .title{color:#006DBA;font-size:14px;font-weight:normal;display:block;margin-bottom:5px;padding-left:20px;background:url(../images/icons/famfamfam/information.png) no-repeat center left;}.wizard .info .todo{color:#006DBA;font-size:14px;font-weight:normal;display:block;margin-bottom:5px;padding-left:20px;background:url(../images/icons/famfamfam/wrench.png) no-repeat center left;}.wizard .info .known{color:#006DBA;font-size:14px;font-weight:normal;display:block;margin-bottom:5px;padding-left:20px;background:url(../images/icons/famfamfam/eye.png) no-repeat center left;}.wizard .famfamfam{width:16px;height:16px;}.wizard .spinner{background:url(../images/spinner.gif) no-repeat left top;width:16px;height:16px;display:none;}.wizard .sliderContainer{display:block;margin-top:10px;width:150px;}.wizard .tabs{display:block;padding-bottom:2px;border-bottom:2px solid #006DBA;width:100%;}.wizard .tabs ul{list-style-type:none;padding:0;font-size:10px;margin:0;font-family:Verdana,Arial,Helvetica,sans-serif;font-size:10px;height:20px;width:100%;}.wizard .tabs img{border:0;}.wizard .tabs li{float:left;margin:0;height:20px;float:left;display:block;text-align:center;text-decoration:none;color:#006DBA;background:#CCC;font-weight:bold;}.wizard .tabs .content{padding:0 10px 0 10px;display:inline;border:0;}.wizard .tabs .active{background-color:#006DBA!important;color:#fff!important;text-shadow:0 0 1px #333;}.wizard .tabs .arrow{position:inherit;margin-top:0;margin-bottom:0;display:inline;}.wizard .content{display:block;padding-bottom:10px;border-bottom:2px solid #006DBA;}.wizard .navigation{display:block;color:#666;font-size:10px;}.wizard .prevnext{cursor:pointer;color:#006DBA;background-color:transparent;border:none;}.wizard .element .input .isExample{color:#006DBA;background-color:transparent;border:0;input:disabled;}.wizard .element{display:block;}.wizard .element .description{display:inline-block;font-size:11px;width:250px;word-wrap:break-word;zoom:1;*display:inline;}.wizard .element .input{display:inline;font-size:11px;word-wrap:break-word;}.wizard .element .input input[type="radio"]{margin-top:10px;margin-right:5px;}.wizard .error{background:url(../images/icons/famfamfam/exclamation.png) no-repeat 230px 4px;}.wizard .element .input input{vertical-align:top;border:1px solid #CCC;margin:2px 0;padding:2px 4px;}.wizard .element .input input:focus,select:focus,textarea:focus{border:1px solid #B2D1FF;}.wizard .element .helpIcon{display:inline-block;margin-top:4px;background:url(../images/icons/famfamfam/help.png) no-repeat left top;width:16px;height:16px;zoom:1;*display:inline;}.wizard .element .helpContent{display:none;}.wizard .element .help{vertical-align:top;display:inline-block;zoom:1;*display:inline;}.wizard .element .help .icon{margin-top:4px;background:url(../images/icons/famfamfam/help.png) no-repeat left top;width:16px;height:16px;}.wizard .element .help .content{display:none;}.wizard .table{display:block;border:1px solid #575a5d;background-color:#ebf7fc;margin-top:10px;font-size:11px;overflow:hidden;white-space:nowrap;}.wizard .table .header{display:block;background-color:#006DBA;color:#fff;font-weight:bold;width:auto;height:32px;line-height:32px;text-shadow:0 0 1px #333;}.wizard .header .helpIcon{display:inline-block;margin-top:4px;background:url(../images/icons/famfamfam/help.png) no-repeat left top;width:16px;height:16px;zoom:1;*display:inline;}.wizard .column{display:inline-block;padding:2px 4px;min-width:120px;zoom:1;*display:inline;}.wizard .firstColumn{display:inline-block;padding:2px 4px;width:20px;zoom:1;*display:inline;}.wizard .table .row{display:block;height:32px;border-top:1px solid #8e908f;width:auto;}.wizard .table .row input,.wizard .table .row select{background-color:#fff;}.wizard .table .ui-selected{background-color:#ffab7b;}.wizard .table .ui-selecting{background-color:#f2e3bc;}.wizard .table .row .warning{color:red;font-size:8px;height:10px;}.wizard .table .row .error{background-color:#ffb0b7;}.wizard .table input[type=text],.wizard .table select{border:1px solid #8e908f;margin:2px 0;padding:2px 4px;background-color:transparent;width:100px;}.wizard .table .header input[type=text],.wizard .table .header select,.wizard .table .header button{border:1px solid #8e908f;margin:2px 0;padding:2px 4px;background-color:#fff;width:75px;}.wizard .table .highlight,.wizard .table .highlight input,.wizard .table .highlight select{background-color:#006DBA;color:#fff;}.wizard .table .highlight input,.wizard .table .highlight select{background-color:#6e99d4;color:#fff;}.wizard .bigbutton{background:url(../images/wizard/big-button.jpg) no-repeat left top;border:0;width:454px;height:53px;color:#fff;font-size:18pt;}.wizard .bigbutton:hover{color:#000;}.wizard .bigtext{color:#006dba;font-weight:normal;font-size:24px;margin:.8em 0 .3em 0;display:block;width:100%;text-align:center;}.vertical{writing-mode:tb-rl;-webkit-transform:rotate(90deg);-moz-transform:rotate(90deg);-o-transform:rotate(90deg);white-space:nowrap;display:block;bottom:0;width:20px;height:100px;text-shadow:0 0 1px #333;border:1px solid red;} 
     1.wizard{display:block;padding-top:10px;}.wizard .info{display:block;border:1px solid #006DBA;background-color:#f8feff;padding:10px;font-size:10px;margin:10px 0 10px 0;}.wizard .info .title{color:#006DBA;font-size:14px;font-weight:normal;display:block;margin-bottom:5px;padding-left:20px;background:url(../images/icons/famfamfam/information.png) no-repeat center left;}.wizard .info .todo{color:#006DBA;font-size:14px;font-weight:normal;display:block;margin-bottom:5px;padding-left:20px;background:url(../images/icons/famfamfam/wrench.png) no-repeat center left;}.wizard .info .known{color:#006DBA;font-size:14px;font-weight:normal;display:block;margin-bottom:5px;padding-left:20px;background:url(../images/icons/famfamfam/eye.png) no-repeat center left;}.wizard .famfamfam{width:16px;height:16px;}.wizard .spinner{background:url(../images/spinner.gif) no-repeat left top;width:16px;height:16px;display:none;}.wizard .sliderContainer{display:block;margin-top:10px;width:150px;}.wizard .tabs{display:block;padding-bottom:2px;border-bottom:2px solid #006DBA;width:100%;}.wizard .tabs ul{list-style-type:none;padding:0;font-size:10px;margin:0;font-family:Verdana,Arial,Helvetica,sans-serif;font-size:10px;height:20px;width:100%;}.wizard .tabs img{border:0;}.wizard .tabs li{float:left;margin:0;height:20px;float:left;display:block;text-align:center;text-decoration:none;color:#006DBA;background:#CCC;font-weight:bold;}.wizard .tabs .content{padding:0 10px 0 10px;display:inline;border:0;}.wizard .tabs .active{background-color:#006DBA!important;color:#fff!important;text-shadow:0 0 1px #333;}.wizard .tabs .arrow{position:inherit;margin-top:0;margin-bottom:0;display:inline;}.wizard .content{display:block;padding-bottom:10px;border-bottom:2px solid #006DBA;}.wizard .navigation{display:block;color:#666;font-size:10px;}.wizard .prevnext{cursor:pointer;color:#006DBA;background-color:transparent;border:none;}.wizard .element .input .isExample{color:#006DBA;background-color:transparent;border:0;input:disabled;}.wizard .element{display:block;}.wizard .element .description{display:inline-block;font-size:11px;width:250px;word-wrap:break-word;zoom:1;*display:inline;}.wizard .element .input{display:inline;font-size:11px;word-wrap:break-word;}.wizard .element .input input[type="radio"]{margin-top:10px;margin-right:5px;}.wizard .error{background:url(../images/icons/famfamfam/exclamation.png) no-repeat 230px 4px;}.wizard .element .input input{vertical-align:top;border:1px solid #CCC;margin:2px 0;padding:2px 4px;}.wizard .element .input input:focus,select:focus,textarea:focus{border:1px solid #B2D1FF;}.wizard .element .helpIcon{display:inline-block;margin-top:4px;background:url(../images/icons/famfamfam/help.png) no-repeat left top;width:16px;height:16px;zoom:1;*display:inline;}.wizard .element .helpContent{display:none;}.wizard .table{display:block;border:1px solid #575a5d;background-color:#ebf7fc;margin-top:10px;font-size:11px;overflow:hidden;white-space:nowrap;}.wizard .table b{color:#006dba;font-weight:bold;}.wizard .table .header{display:block;background-color:#006DBA;color:#fff;font-weight:bold;width:auto;height:32px;line-height:32px;text-shadow:0 0 1px #333;}.wizard .column .helpIcon{display:inline-block;margin-top:4px;background:url(../images/icons/famfamfam/help.png) no-repeat left top;width:16px;height:16px;zoom:1;*display:inline;}.wizard .column{display:inline-block;padding:2px 4px;min-width:120px;zoom:1;*display:inline;}.wizard .firstColumn{display:inline-block;padding:2px 4px;width:20px;zoom:1;*display:inline;}.wizard .table .row{display:block;height:32px;border-top:1px solid #8e908f;width:auto;}.wizard .table .row input,.wizard .table .row select{background-color:#fff;}.wizard .table .ui-selected{background-color:#ffab7b;}.wizard .table .ui-selecting{background-color:#f2e3bc;}.wizard .table .row .warning{color:red;font-size:8px;height:10px;}.wizard .table .row .error{background-color:#ffb0b7;}.wizard .table input[type=text],.wizard .table select{border:1px solid #8e908f;margin:2px 0;padding:2px 4px;background-color:transparent;width:100px;}.wizard .table .header input[type=text],.wizard .table .header select,.wizard .table .header button{border:1px solid #8e908f;margin:2px 0;padding:2px 4px;background-color:#fff;width:75px;}.wizard .table .highlight,.wizard .table .highlight input,.wizard .table .highlight select,.wizard .table .highlight b{background-color:#006DBA;color:#fff;}.wizard .table .highlight input,.wizard .table .highlight select{background-color:#6e99d4;color:#fff;}.wizard .bigbutton{background:url(../images/wizard/big-button.jpg) no-repeat left top;border:0;width:454px;height:53px;color:#fff;font-size:18pt;}.wizard .bigbutton:hover{color:#000;}.wizard .bigtext{color:#006dba;font-weight:normal;font-size:24px;margin:.8em 0 .3em 0;display:block;width:100%;text-align:center;}.vertical{writing-mode:tb-rl;-webkit-transform:rotate(90deg);-moz-transform:rotate(90deg);-o-transform:rotate(90deg);white-space:nowrap;display:block;bottom:0;width:20px;height:100px;text-shadow:0 0 1px #333;border:1px solid red;}