Changeset 72e33c5a76ed4892b7d3ee3268a85b915d8dd529

Show
Ignore:
Timestamp:
10/14/08 19:33:38 (6 years ago)
Author:
Theo Schlossnagle <jesus@omniti.com>
git-committer:
Theo Schlossnagle <jesus@omniti.com> 1224012818 +0000
git-parent:

[700dfceaa31efe8bb899e093bbbba840e89b5542]

git-author:
Theo Schlossnagle <jesus@omniti.com> 1224012818 +0000
Message:

color chooser, still need transparency selection, refs #22

Files:

Legend:

Unmodified
Added
Removed
Modified
Copied
Moved
  • ui/web/htdocs/css/colorpicker.css

    r5f2ddc8 r72e33c5  
    1 .cp { 
    2         position:relative; 
    3         display:block; 
    4         height:15px; 
    5         white-space:ignore; 
     1.colorpicker { 
     2        width: 356px; 
     3        height: 176px; 
     4        overflow: hidden; 
     5        position: absolute; 
     6        background: url(../images/colorpicker_background.png); 
     7        font-family: Arial, Helvetica, sans-serif; 
     8        display: none; 
    69} 
    7  
    8 .cp a { text-decoration:none; } 
    9  
    10 .cp input { display:block; float:left; } 
    11  
    12 .cp a.cpb { 
    13         border:1px solid #CCC; 
    14         background:url(../images/btn_cp.png) right 0px  no-repeat; 
    15         /*margin-left:10px;*/ 
    16         line-height:13px; 
    17         padding-right:10px; 
    18         width:18px; 
    19         height:13px; 
    20         overflow:none; 
    21         display:block; 
    22         float:left; 
    23         vertical-align:middle; 
     10.colorpicker_color { 
     11        width: 150px; 
     12        height: 150px; 
     13        left: 14px; 
     14        top: 13px; 
     15        position: absolute; 
     16        background: #f00; 
     17        overflow: hidden; 
     18        cursor: crosshair; 
    2419} 
    25  
    26 .cp a.cpb:hover { 
    27         border:1px solid #9baac1; 
    28         background:url(../images/btn_cp.png) right -17px  no-repeat; 
     20.colorpicker_color div { 
     21        position: absolute; 
     22        top: 0; 
     23        left: 0; 
     24        width: 150px; 
     25        height: 150px; 
     26        background: url(../images/colorpicker_overlay.png); 
    2927} 
    30  
    31 .cp .ct { 
    32         display:block; 
    33         position:absolute; 
    34         top:0; 
    35         left:30px; 
    36         float:left; 
    37         width:208px; 
    38         height:104px; 
    39         /*background:url(cp_bg.gif) top left no-repeat;*/ 
    40         background:#FFF; 
    41         overflow:none; 
    42         padding:5px; 
    43         border:1px solid #CCC; 
     28.colorpicker_color div div { 
     29        position: absolute; 
     30        top: 0; 
     31        left: 0; 
     32        width: 11px; 
     33        height: 11px; 
     34        overflow: hidden; 
     35        background: url(../images/colorpicker_select.gif); 
     36        margin: -5px 0 0 -5px; 
    4437} 
    45  
    46 .cp .ct a { 
    47         display:block; 
    48         float:left; 
    49         width:13px; 
    50         height:13px; 
    51         line-height:13px; 
    52         overflow:none; 
    53         font-size:13px; 
     38.colorpicker_hue { 
     39        position: absolute; 
     40        top: 13px; 
     41        left: 171px; 
     42        width: 35px; 
     43        height: 150px; 
     44        cursor: n-resize; 
    5445} 
    55  
    56 .cp .ct a img { 
    57         border:none; 
     46.colorpicker_hue div { 
     47        position: absolute; 
     48        width: 35px; 
     49        height: 9px; 
     50        overflow: hidden; 
     51        background: url(../images/colorpicker_indic.gif) left top; 
     52        margin: -4px 0 0 0; 
     53        left: 0px; 
    5854} 
     55.colorpicker_new_color { 
     56        position: absolute; 
     57        width: 60px; 
     58        height: 30px; 
     59        left: 213px; 
     60        top: 13px; 
     61        background: #f00; 
     62} 
     63.colorpicker_current_color { 
     64        position: absolute; 
     65        width: 60px; 
     66        height: 30px; 
     67        left: 283px; 
     68        top: 13px; 
     69        background: #f00; 
     70} 
     71.colorpicker input { 
     72        background-color: transparent; 
     73        border: 1px solid transparent; 
     74        position: absolute; 
     75        font-size: 10px; 
     76        font-family: Arial, Helvetica, sans-serif; 
     77        color: #898989; 
     78        top: 4px; 
     79        right: 11px; 
     80        text-align: right; 
     81        margin: 0; 
     82        padding: 0; 
     83        height: 11px; 
     84} 
     85.colorpicker_hex { 
     86        position: absolute; 
     87        width: 72px; 
     88        height: 22px; 
     89        background: url(../images/colorpicker_hex.png) top; 
     90        left: 212px; 
     91        top: 142px; 
     92} 
     93.colorpicker_hex input { 
     94        right: 6px; 
     95} 
     96.colorpicker_field { 
     97        height: 22px; 
     98        width: 62px; 
     99        background-position: top; 
     100        position: absolute; 
     101} 
     102.colorpicker_field span { 
     103        position: absolute; 
     104        width: 12px; 
     105        height: 22px; 
     106        overflow: hidden; 
     107        top: 0; 
     108        right: 0; 
     109        cursor: n-resize; 
     110} 
     111.colorpicker_rgb_r { 
     112        background-image: url(../images/colorpicker_rgb_r.png); 
     113        top: 52px; 
     114        left: 212px; 
     115} 
     116.colorpicker_rgb_g { 
     117        background-image: url(../images/colorpicker_rgb_g.png); 
     118        top: 82px; 
     119        left: 212px; 
     120} 
     121.colorpicker_rgb_b { 
     122        background-image: url(../images/colorpicker_rgb_b.png); 
     123        top: 112px; 
     124        left: 212px; 
     125} 
     126.colorpicker_hsb_h { 
     127        background-image: url(../images/colorpicker_hsb_h.png); 
     128        top: 52px; 
     129        left: 282px; 
     130} 
     131.colorpicker_hsb_s { 
     132        background-image: url(../images/colorpicker_hsb_s.png); 
     133        top: 82px; 
     134        left: 282px; 
     135} 
     136.colorpicker_hsb_b { 
     137        background-image: url(../images/colorpicker_hsb_b.png); 
     138        top: 112px; 
     139        left: 282px; 
     140} 
     141.colorpicker_submit { 
     142        position: absolute; 
     143        width: 22px; 
     144        height: 22px; 
     145        background: url(../images/colorpicker_submit.png) top; 
     146        left: 322px; 
     147        top: 142px; 
     148        overflow: hidden; 
     149} 
     150.colorpicker_focus { 
     151        background-position: center; 
     152} 
     153.colorpicker_hex.colorpicker_focus { 
     154        background-position: bottom; 
     155} 
     156.colorpicker_submit.colorpicker_focus { 
     157        background-position: bottom; 
     158} 
     159.colorpicker_slider { 
     160        background-position: bottom; 
     161} 
  • ui/web/htdocs/css/style.css

    r700dfce r72e33c5  
    556556padding:0 3px; 
    557557} 
    558 #graphlist p.graph-search-summary { 
    559 margin-bottom:0; 
    560 } 
    561558#graphlist p.paginate { 
    562559text-align:right; 
     
    609606} 
    610607#graphlist ul li ul li a.editgraph { 
    611 background:transparent url(../images/icon-addws.png) no-repeat scroll 0 0; 
    612 display:inline; 
    613 } 
    614 #graphlist ul li ul li a.editgraph { 
    615608background:transparent url(../images/icon-editgraph.png) no-repeat scroll 0 0; 
    616609display:inline; 
     610padding-left:25px; 
    617611} 
    618612#graphlist ul li ul li a.deletegraph { 
    619613background:transparent url(../images/icon-deletegraph.png) no-repeat scroll 0 0; 
    620614display:inline; 
     615padding-left:25px; 
    621616} 
    622617div.plot-area { 
     
    739734vertical-align:middle; 
    740735} 
     736 
     737.colorPicker { position: relative; height: 14px; } 
     738.colorPicker .colorSelector { 
     739  position: absolute; 
     740  border: 1px solid #aaa; 
     741  top: 0; 
     742  left: 0; 
     743  width: 16px; 
     744  height: 12px; 
     745} 
     746.colorPicker .colorSelector div { 
     747  position: absolute; 
     748  background: #fff; 
     749  top: 1px; 
     750  left: 1px; 
     751  width: 14px; 
     752  height: 10px; 
     753} 
     754.colorPicker .colorPickerHolder { 
     755  top: 16px; 
     756  left: -340px; 
     757  width: 356px; 
     758  height: 0; 
     759  z-index: 6000; 
     760  overflow: hidden; 
     761  position: absolute; 
     762} 
     763.colorPicker .colorPickerHolder .colorpicker { 
     764  background-image: url(../images/custom_background.png); 
     765  position: absolute; 
     766  bottom: 0; 
     767  left: 0; 
     768} 
     769 
    741770table#gtool th.data, table#gtool td.data { 
    742771text-align:left; 
     
    831860float:left; 
    832861} 
     862 
    833863.zoom dl dd a { 
    834864border-color:#CDD4E0 #CDD4E0 #CDD4E0 -moz-use-text-color; 
  • ui/web/htdocs/graph_panel.inc

    re13244c r72e33c5  
    11<script type="text/javascript" src="js/eye/datepicker.js"></script> 
     2<script type="text/javascript" src="js/eye/colorpicker.js"></script> 
    23<script type="text/javascript" src="js/eye/eye.js"></script> 
    34<script type="text/javascript" src="js/eye/utils.js"></script> 
     
    89var graphinfo; 
    910var displayinfo = { start : 14*86400, cnt: '', end: '' }; 
     11var color_pool = Array('#33aa33','#4a00dc','#caac00','#3377cc','#00acfa','#cc3333') 
     12var color_sel = 0; 
     13 
    1014function set_current_graph_id(id) { 
    1115  current_graph_id = id; 
     
    109113  } 
    110114  recurse++; 
     115  
     116  if(d.color == null) { 
     117    d.color = color_pool[color_sel]; 
     118    color_sel = (color_sel + 1) % color_pool.length; 
     119  } 
     120  o.find('.colorPickerHolder').ColorPicker({ 
     121    flat: true, 
     122    color: '#ffffff', 
     123    onSubmit: (function(dpo,dp) { 
     124      var cs = dpo.find('.colorSelector'); 
     125      return function(hsb, hex, rgb) { 
     126        dp.color = '#' + hex; 
     127        cs.css('border', '1px solid ' + dp.color); 
     128        cs.find('div').css('backgroundColor', dp.color) 
     129                      .css('opacity', 0.2); 
     130        cs.parent().find('.colorPickerHolder').stop().animate({height:0},500); 
     131        update_current_graph(true); 
     132      } 
     133    })(o,d) 
     134  }); 
     135  o.find('.colorPickerHolder > div').css('position', 'absolute'); 
     136  o.find('.colorSelector').css('border', '1px solid ' + d.color); 
     137  o.find('.colorSelector div').css('backgroundColor', d.color) 
     138                              .css('opacity', 
     139                                   (d.opacity == null) ? 0.2 : d.opacity); 
     140  o.find('.colorSelector').bind('click', function() { 
     141    var activecp = $(this).parent().find('.colorPickerHolder'); 
     142    var h = activecp.height(); 
     143    $("#gtool #dataPoints .colorPickerHolder").filter(function(index) { 
     144      return ($(this) != activecp); 
     145    }).stop().animate({height:0}, 0);; 
     146    $(this).parent().find('.colorPickerHolder').stop().animate({height: h != 0 ? 0 : 173}, 500); 
     147  }); 
    111148 
    112149  o.find(d.axis == "l" ? ".axisl" : ".axisr").addClass("axison"); 
     
    337374                <td><input name="view" type="checkbox" value="1"/></td> 
    338375                <td class="data datatitle"></td> 
    339                 <td></td> 
     376                <td><div class="colorPicker"><div class="colorSelector"><div style="background-color: #fff"></div></div><div class="colorPickerHolder"></div></div></td> 
    340377                <td></td> 
    341378                <td></td> 
     
    358395                <td><input name="view" type="checkbox" value="1"/></td> 
    359396                <td class="data datatitle"></td> 
    360                 <td></td> 
     397                <td><div class="colorPicker"><div class="colorSelector"><div style="background-color: #fff"></div></div><div class="colorPickerHolder"></div></div></td> 
    361398                <td><select name="derive"><option value="false">no</option><option value="derive">derive</option><option value="counter">counter</option></select></td> 
    362399                <td><span class="axis axisl"> L</span> <span class="axis axisr"> R</span></td> 
  • ui/web/htdocs/index.php

    rf2fcde0 r72e33c5  
    66<link href="css/style.css" rel="stylesheet" type="text/css" /> 
    77<link href="css/datepicker.css" rel="stylesheet" type="text/css" /> 
     8<link href="css/colorpicker.css" rel="stylesheet" type="text/css" /> 
    89<script src="js/htmlentities.js"></script> 
    910<script src="js/json2.js"></script> 
  • ui/web/htdocs/json_graph_flot.php

    r6e38cf9 r72e33c5  
    3535  else { 
    3636    $settings = $graph_settings[$i++]; 
     37    $settings['color'] = isset($d['color']) ? $d['color'] : $settings['color']; 
    3738    if($d['hidden'] == "true") $settings['hidden'] = "true"; 
    3839    if($d['math1']) $settings['expression'] = $d['math1']; 
  • ui/web/htdocs/search_saved_graphs.inc

    re13244c r72e33c5  
    6666                li.append($('<a/>').html(g.title)) 
    6767                  .append($('<ul/>').append($('<li/>').html(g.last_update)) 
    68                                     .append($('<li/>').append(a) 
    69                                                       .append(del))); 
     68                                    .append($('<li/>').append(a)) 
     69                                    .append($('<li/>').append(del))); 
    7070                $("#graph-searchresults").append(li); 
    7171              }