Changeset 6478 for qesdi


Ignore:
Timestamp:
03/02/10 11:48:53 (9 years ago)
Author:
pnorton
Message:

Improved the appearance of the selection list elements.

Location:
qesdi/graphplotter/trunk
Files:
1 added
4 edited

Legend:

Unmodified
Added
Removed
  • qesdi/graphplotter/trunk/development.ini

    r6464 r6478  
    1313[server:main] 
    1414use = egg:Paste#http 
    15 host = 127.0.0.1 
     15#host = 127.0.0.1 
     16host = 0.0.0.0 
    1617port = 5006 
    1718 
  • qesdi/graphplotter/trunk/graphplotter/public/css/buildplot.css

    r6472 r6478  
    33    background-color: #86DEF4; 
    44    min-width:800px; 
     5} 
     6 
     7.clear { 
     8        height:1px; 
     9        clear:both; 
     10} 
     11 
     12 
     13select { 
     14    margin-left: 2px; 
     15    margin-right:2px; 
     16    padding:2px;         
     17} 
     18 
     19input { 
     20        padding:2px; 
     21} 
     22 
     23.selection_control { 
     24    margin:10px; 
     25    padding:5px; 
     26    background-color:#33FFCC;    
     27} 
     28 
     29.selection_heading { 
     30    background-color:#00E6AC; 
     31    padding-bottom:2px; 
     32    margin-bottom:5px; 
     33    text-align:center;   
     34} 
     35 
     36.selection_content { 
     37    margin:5px;  
    538} 
    639 
     
    2558} 
    2659 
    27 fieldset#data_selection_controls { 
    28         margin:10px; 
    29         padding:15px; 
    30 /*      background-color:#DEF486; */ 
    31 } 
     60/*** data selection controls ***/ 
     61 
    3262 
    3363.data_input_item { 
     
    3666} 
    3767 
    38 fieldset#data_selection_controls label { 
    39         float:left; 
     68div#data_selection_controls label { 
     69         
    4070        width:150px; 
    4171        line-height:26px; 
    4272        text-align:right; 
     73    float:left; 
    4374         
    4475} 
    45 fieldset#data_selection_controls label:after { 
     76div#data_selection_controls label:after { 
    4677   content:    ":";  
    47 } 
    48 fieldset#data_selection_controls select { 
    49     margin-left: 2px; 
    50     padding:2px; 
    51 } 
    52  
    53 fieldset#line_selection_controls { 
    54         margin:10px; 
    55         padding:15px; 
    56 /*      background-color:#DEF486; */ 
    5778} 
    5879 
    5980 
     81/*** line selection control ***/ 
    6082 
     83div#line_selection_controls { 
     84        width:450px; 
     85} 
     86 
     87.axis_select_item label { 
     88        float:left; 
     89        line-height:26px; 
     90        text-align:right; 
     91    width:100px; 
     92} 
     93 
     94.axis_select_item label:after { 
     95   content:    ":";  
     96} 
     97 
     98.axis_select_item select { 
     99    float:left; 
     100} 
     101 
     102.select_all_button{ 
     103    float:right; 
     104} 
     105 
     106.axis_select_units { 
     107        line-height:26px; 
     108} 
    61109 
    62110/*** the selection list ***/ 
    63111 
     112#selection_list_wrapper { 
     113        width:400px; 
     114        border:1px solid black; 
     115        padding-top: 5px; 
     116        padding-bottom: 5px; 
     117        padding-left: 5px; 
     118        padding-right: 7px; 
     119} 
     120 
    64121#selection_list { 
    65     width:400px; 
    66     border:1px solid black; 
    67     padding:10px; 
     122    padding:0px; 
    68123    margin:0; 
    69124} 
     
    72127        list-style-type: none; 
    73128    background-color:#D1E6EC; 
    74     border:1px solid #7EA6B2; 
    75129    margin-top:1px; 
    76130    margin-bottom:1px; 
     131    width:100%; 
     132    overflow:auto; 
     133    border:1px solid #7EA6B2; 
    77134 
    78135} 
     136 
     137 
     138#selection_list li span{ 
     139        margin-left:2px; 
     140    display:inline-block; 
     141    float:left; 
     142} 
     143 
    79144 
    80145#selection_list li.selected { 
  • qesdi/graphplotter/trunk/graphplotter/public/js/axisSelectionList.js

    r6472 r6478  
    6262     
    6363    _addSelectionToList: function (sel) { 
    64         var li = this._buildLIFromSelection(sel); 
     64        var li = document.createElement('li'); 
     65        li.id = sel.id; 
    6566         
     67        var span = document.createElement('span'); 
     68        span.innerHTML = sel.getDescription(); 
     69        li.appendChild(span); 
    6670 
    6771        var div = document.createElement('div'); 
    6872        div.className = 'close_box'; 
    69         div.href = ''; 
    7073         
    7174        Utils.addEventListener(div, 'click', this._closeBoxClick, this) 
    7275        li.appendChild(div); 
     76         
     77//        var div = document.createElement('div'); 
     78//        div.className = 'clear'; 
     79//        li.appendChild(div); 
    7380         
    7481        this.selectionList.appendChild(li); 
     
    110117    }, 
    111118     
    112     _buildLIFromSelection: function (sel) { 
    113         var li = document.createElement('li'); 
    114         li.innerHTML = sel.getDescription(); 
    115         li.id = sel.id; 
    116          
    117         return li; 
    118     }, 
    119119     
    120120//    selectItem: function (selectionId) { 
  • qesdi/graphplotter/trunk/graphplotter/templates/buildplot.html

    r6472 r6478  
    3030    $("#data_selection_controls").corner(); 
    3131    $("#line_selection_controls").corner(); 
     32    $('#data_selection_heading').corner("round top"); 
     33    $('#line_selection_heading').corner("round top"); 
    3234}); 
    3335 
     
    7880        height:17px; 
    7981        position:relative; 
    80         top:3px; 
     82        top:1px; 
    8183        cursor:pointer;cursor:hand; 
    82         margin-left: 3px; 
     84        float:right; 
    8385    } 
    8486 
     
    9698            <form id='buildplot'> 
    9799             
    98                 <fieldset id="data_selection_controls"> 
     100                <div id="data_selection_controls" class="selection_control"> 
    99101                 
    100                     <legend>Data Selection</legend> 
    101                  
    102                     <div class="data_input_item"> 
    103                         <label for="datafile"> Select Data File </label> 
    104                         ${ h.select('datafile', c.selectedDataFile, c.dataFiles, onChange='onRefreshClick()')} 
    105                     </div> 
     102                    <div id="data_selection_heading"  class="selection_heading">Data Selection</div> 
    106103                     
    107                      <py:if test="c.selectedDataFile != ''"> 
     104                    <div id="data_selection_content"  class="selection_content"> 
     105                     
     106                        <div class="data_input_item"> 
     107                            <label for="datafile"> Select Data File </label> 
     108                            ${ h.select('datafile', c.selectedDataFile, c.dataFiles, onChange='onRefreshClick()')} 
     109                        </div> 
    108110                         
    109                      <div class="data_input_item"> 
    110                         <label for="variable"> Select Variable </label> 
    111                         ${ h.select('variable', c.selectedVariable, c.variables, onChange='onRefreshClick()')} 
     111                         <py:if test="c.selectedDataFile != ''"> 
     112                             
     113                         <div class="data_input_item"> 
     114                            <label for="variable"> Select Variable </label> 
     115                            ${ h.select('variable', c.selectedVariable, c.variables, onChange='onRefreshClick()')} 
     116                         </div> 
     117                          
     118                         </py:if> 
     119                          
     120                         <py:if test="c.selectedVariable != ''"> 
     121                             
     122                         <div class="data_input_item"> 
     123                            <label for="axis"> Select Plotting Axis </label> 
     124                            ${ h.select('axis', c.selectedAxis, c.axis, onChange='onRefreshClick()')} 
     125                         </div> 
     126                          
     127                         </py:if> 
    112128                     </div> 
    113                       
    114                      </py:if> 
    115                       
    116                      <py:if test="c.selectedVariable != ''"> 
    117                          
    118                      <div class="data_input_item"> 
    119                         <label for="axis"> Select Plotting Axis </label> 
    120                         ${ h.select('axis', c.selectedAxis, c.axis, onChange='onRefreshClick()')} 
    121                      </div> 
    122                       
    123                      </py:if> 
    124                   
    125                 </fieldset> 
     129                </div> 
    126130                  
    127131                 <py:if test="c.selectedAxis != ''"> 
    128132                  
    129                  <fieldset id="line_selection_controls"> 
     133                 <div id="line_selection_controls" class="selection_control"> 
    130134         
    131                     <legend>Line Selection</legend> 
     135                    <div id="line_selection_heading" class="selection_heading"> 
     136                        <span>Line Selection</span> 
     137                    </div> 
    132138                     
    133                     <div id='selection_input_container'> 
    134                      
    135                     <py:for each="axSelect in c.axisSelect.keys()"> 
    136                         <div class="axis_select_item"> 
    137                         <label for="${'sel_' + axSelect}">${axSelect}</label> 
    138                         ${h.select('sel_' + axSelect, getattr(c, 'sel_' + axSelect), c.axisSelect[axSelect])} 
    139                         ${c.axisSelectUnits.get(axSelect, '')} 
    140                         <input class="select_all_button" type="button" value="Select All" onClick="onSelectAll('${'sel_' + axSelect}')" /> 
     139                    <div id="line_selection_content"  class="selection_content"> 
     140                        <div id='selection_input_container'> 
     141                         
     142                        <py:for each="axSelect in c.axisSelect.keys()"> 
     143                            <div class="axis_select_item"> 
     144                            <label for="${'sel_' + axSelect}">${axSelect} </label> 
     145                            ${h.select('sel_' + axSelect, getattr(c, 'sel_' + axSelect), c.axisSelect[axSelect])} 
     146                            <span class="axis_select_units">${c.axisSelectUnits.get(axSelect, '')}</span> 
     147                            <input class="select_all_button" type="button" value="Select All" onClick="onSelectAll('${'sel_' + axSelect}')" /> 
     148                            <div class="clear"></div> 
     149                            </div> 
     150                            <br /> 
     151                        </py:for> 
     152                         
     153                        </div>                 
     154                      
     155                        <input id="add_selection_btn" type="button" value="Add Selection" onClick="onAddSelectionClick();"></input>          
     156                         
     157                        <div> 
     158                            Selections: 
     159                            <div id="selection_list_wrapper"> 
     160                                <ul id="selection_list"> 
     161                                    <li class="empty_item"> Empty </li> 
     162                                </ul> 
     163                            </div> 
     164                             
     165                            <div id="hidden_input_container" style="display:none;"></div> 
    141166                        </div> 
    142                         <br /> 
    143                     </py:for> 
    144                      
    145                     </div>                 
    146                   
    147                     <br /> 
    148                     <input type="button" value="Add Selection" onClick="onAddSelectionClick();"></input>          
    149                     <br /> 
    150                      
    151                     <div> 
    152                         Selections: 
    153                         <br /> 
    154                         <ul id="selection_list"> 
    155                             <li class="empty_item"> Empty </li> 
    156                         </ul> 
    157167                         
    158                         <div id="hidden_input_container" style="display:none;"></div> 
    159168                    </div> 
    160169                  
    161                  </fieldset> 
     170                 </div> 
    162171                  
    163172                 </py:if> 
     
    166175             
    167176            <div id="page_buttons"> 
    168                 <input type="button" value="Remove Selection" onClick=""></input> 
    169177                <input type="button" value="Clear Selections" onClick="onRefreshClick();"></input> 
    170178                <input type="button" value="Plot" onClick="onPlotClick();"></input> 
Note: See TracChangeset for help on using the changeset viewer.