Ignore:
Timestamp:
02/09/07 18:52:35 (13 years ago)
Author:
ray
Message:

HorizontalRule? update

  • use CSS for styling
  • use Xinha.colorPicker
  • removed note about double clicking to select hr (see #3)
File:
1 edited

Legend:

Unmodified
Added
Removed
  • trunk/plugins/HorizontalRule/popups/edit_horizontal_rule.html

    r677 r726  
    1 <html> 
     1<!DOCTYPE html 
     2     PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
     3    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
     4 
     5<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> 
    26<head> 
    37  <title>Insert/Edit Horizontal Rule</title> 
    48  <link rel="stylesheet" type="text/css" href="../../../popups/popup.css" /> 
    59  <script type="text/javascript" src="../../../popups/popup.js"></script> 
    6  
     10  <script type="text/javascript" src="../../../modules/ColorPicker/ColorPicker.js"></script> 
    711<script type="text/javascript"> 
    812editor = window.opener.editor; 
     
    1014function Init() { 
    1115        __dlg_translate("HorizontalRule"); 
    12         __dlg_init(); 
    13         window.resizeTo(300,320); 
     16        __dlg_init(null,{width:320,height:290}); 
    1417        var params = window.dialogArguments; 
    1518        if(params) { 
     
    2225                document.getElementById("f_noshade").checked = params.f_noshade; 
    2326        } 
     27         
     28        var colpick = document.getElementById('hrpv'); 
     29        var f_color = document.getElementById('f_color'); 
     30        var colPicker = new Xinha.colorPicker({cellsize:'5px',callback:selectColor}); 
     31        colpick.onclick = function() { colPicker.open('top,left',colpick, f_color.value ); } 
     32         
    2433        document.getElementById("f_width").focus(); 
    2534} 
     
    2736function onOK() { 
    2837  var fields = ["f_size", "f_width", "f_widthUnit", "f_align", "f_color", "f_noshade"]; 
    29   var param = new Object(); 
     38  var param = {}; 
    3039  for (var i in fields) { 
    3140    var id = fields[i]; 
     
    4251} 
    4352 
    44 function selectColor(id1,id2,color) { 
    45         Dialog(editor.popupURL("select_color.html"), function(color){ 
    46                 if (color) { 
    47                         document.getElementById(id1).style.backgroundColor="#"+color; 
    48                         document.getElementById(id2).value="#"+color; 
    49                 } 
    50         }, color); 
     53function selectColor(color) { 
     54        document.getElementById('hrpv').style.backgroundColor = color; 
     55        document.getElementById('f_color').value = color; 
    5156} 
    52 function Dialog(url, action, init) { 
    53         Dialog.openModal(url, action, init); 
    54 } 
    55 Dialog.openModal = function(url, action, init) { 
    56         var dlg2 = window.open(url, "hadialog2", 
    57                   "toolbar=no,menubar=no,personalbar=no,width=10,height=10," + 
    58                   "scrollbars=no,resizable=yes,modal=yes,dependable=yes"); 
    59         Dialog._modal = dlg2; 
    60         Dialog._arguments = init; 
    61         Dialog._return = function (val) { 
    62                 if (val && action) { 
    63                         action(val); 
    64                 } 
    65                 Dialog._modal = null; 
    66         }; 
    67 }; 
    68  
     57window.onload = Init; 
    6958</script> 
    7059 
     
    9685.buttonColor .nocolor-hilite { background-color: #fff; color: #f00; } 
    9786</style> 
    98 <style type="text/css"> 
    99 @import url(../../../popups/popupstyle.css); 
    100 </style> 
    10187 
    10288</head> 
    10389 
    104 <body class="dialog" onload="Init()"> 
     90<body class="dialog"> 
    10591<div class="title">Horizontal Rule</div> 
    10692<form action="" method="get"> 
     
    10894  <legend>Layout</legend> 
    10995    <div class="fr">Width:</div> 
    110     <input style="margin-right: 0.5em;" name="f_width" id="f_width" size="5" type="text"> 
     96    <input style="margin-right: 0.5em;" name="f_width" id="f_width" size="5" type="text" /> 
    11197    <select style="margin-right: 0.5em;" name="f_widthUnit" id="f_widthUnit"> 
    11298      <option value="%">percent</option> 
    11399      <option value="px">pixels</option> 
    114100    </select> 
    115     <p /> 
     101        <br /> 
    116102    <div class="fr">Height:</div> 
    117     <input style="margin-right: 0.5em;" name="f_size" id="f_size" size="5" type="text"> <span>pixels</span> 
    118     <p /> 
     103    <input style="margin-right: 0.5em;" name="f_size" id="f_size" size="5" type="text" /> <span>pixels</span> 
     104        <br /> 
    119105    <div class="fr">Alignment:</div> 
    120106    <select name="f_align" id="f_align"> 
     
    123109      <option value="right">Right</option> 
    124110    </select> 
    125     <p /> 
     111 
    126112  </fieldset> 
    127113  <fieldset> 
     
    131117    <tr> 
    132118      <td class="chooser" id="hrpv" 
    133           onMouseOver="document.getElementById('hrbtn').style.borderColor='black'" 
    134           onMouseOut="document.getElementById('hrbtn').style.borderColor='ButtonHighlight ButtonShadow ButtonShadow ButtonHighlight'" 
    135           onClick="selectColor('hrpv','f_color',document.getElementById('f_color').value)">&nbsp;</td> 
     119          onmouseover="document.getElementById('hrbtn').style.borderColor='black'" 
     120          onmouseout="document.getElementById('hrbtn').style.borderColor='ButtonHighlight ButtonShadow ButtonShadow ButtonHighlight'" 
     121          >&nbsp;</td> 
    136122      <td class="nocolor" id="hrclr" 
    137           onMouseOver="document.getElementById('hrclr').style.color='#f00'" 
    138           onMouseOut="document.getElementById('hrclr').style.color='#000'" 
    139           onClick="document.getElementById('f_color').value=''; document.getElementById('hrpv').style.backgroundColor=''">&#x00d7;</td> 
     123          onmouseover="document.getElementById('hrclr').style.color='#f00'" 
     124          onmouseout="document.getElementById('hrclr').style.color='#000'" 
     125          onclick="document.getElementById('f_color').value=''; document.getElementById('hrpv').style.backgroundColor=''">&#x00d7;</td> 
    140126    </tr> 
    141127    </table> 
    142     <p /> 
     128    <br /> 
    143129    <div class="fr"> </div> 
    144     <input type="hidden" name="f_color" id="f_color"> 
    145     <input type="checkbox" name="f_noshade" id="f_noshade" value="noshade"> 
     130    <input type="hidden" name="f_color" id="f_color" /> 
     131    <input type="checkbox" name="f_noshade" id="f_noshade" value="noshade" /> 
    146132    <span>No shading</span> 
    147     <p /> 
    148   </fieldset> 
    149   <fieldset> 
    150           <legend>Note:</legend> 
    151     <span>To select an existing horizontal rule, a double-click may be needed.</span> 
     133    <br /> 
    152134  </fieldset> 
    153135<div id="buttons"> 
Note: See TracChangeset for help on using the changeset viewer.