Changeset 3040


Ignore:
Timestamp:
Dec 18, 2006, 3:53:38 PM (15 years ago)
Author:
Martin Svensson
Message:

References #146 Finished with making the help-text writing more easy.
Buttons to insert some useful tags to the helptext have been added to the helptext edit/zoom windows

Location:
trunk/www
Files:
4 edited

Legend:

Unmodified
Added
Removed
  • trunk/www/admin/clients/help/edit_help.jsp

    r3036 r3040  
    189189    <m:menu
    190190      id="listtype"
     191      style="display: none;">     
     192    <m:menuitem
     193      title="Ordered list"
     194      onclick="encloseSelection('&lt;ol&gt&lt;li&gt;', '&lt;/li&gt;&lt;/ol&gt;')"
     195      tooltip="Insert an ordered list"
     196    />
     197    <m:menuitem
     198      title="Unordered list"
     199      onclick="encloseSelection('&lt;ul&gt;&lt;li&gt;', '&lt;/li&gt;&lt;/ul&gt;')"
     200      tooltip="Insert an unordered list"
     201    />     
     202    </m:menu>
     203    <%
     204    String tableInsert = "encloseSelection('&lt;table class=&quot;explanation&quot;&gt;', '&lt;/table&gt;')";
     205    %>
     206    <m:menu
     207      id="tableitem"
    191208      style="display: none;">
    192      
    193     <m:menuitem
    194       title="Organized&nbsp;list"
    195       onclick="encloseSelection('&lt;ol&gt;', '&lt;/ol&gt;')"
    196       tooltip="Insert a numeric list"
     209    <m:menuitem
     210      title="Table"
     211      onclick="<%=tableInsert%>"
     212      tooltip="Insert a table"
     213    />
     214    <m:menuitem
     215      title="Row"
     216      onclick="encloseSelection('&lt;tr&gt;', '&lt;/tr&gt;')"
     217      tooltip="Insert a row in a table"
     218    />
     219    <m:menuitem
     220      title="Cell"
     221      onclick="encloseSelection('&lt;td&gt;', '&lt;/td&gt;')"
     222      tooltip="Insert a cell in a table row"
    197223    />
    198224    </m:menu>
     225    <m:menu
     226      id="textformats"
     227      style="display: none;">
     228    <m:menuitem
     229      title="Important"
     230      onclick="encloseSelection('&lt;imp&gt;', '&lt/imp&gt;')"
     231      tooltip="Mark text as important"
     232    />
     233    <m:menuitem
     234      title="User input"
     235      onclick="encloseSelection('&lt;ui&gt;', '&lt/ui&gt;')"
     236      tooltip="Mark text as user input."
     237    />
     238    <m:menuitem
     239      title="Required"
     240      onclick="encloseSelection('&lt;req&gt;', '&lt/req&gt;')"
     241      tooltip="Mark text as required user input"
     242    />
     243    </m:menu>   
    199244    <p>
    200245    <form action="index.jsp?ID=<%=ID%>" method="post" name="help" onsubmit="return false;">
     
    203248
    204249    <h3 class="docked"><%=title%> <base:help tabcontrol="settings" /></h3>
    205     <t:tabcontrol id="settings" contentstyle="<%="height: "+(int)(scale*260)+"px;"%>"
     250    <t:tabcontrol id="settings" contentstyle="<%="height: "+(int)(scale*360)+"px;"%>"
    206251      position="bottom" remember="<%=help != null%>">
    207252    <t:tab id="info" title="Help text" validate="validateHelp()" helpid="help.edit">
     
    219264          size="40" maxlength="<%=Help.MAX_EXTERNAL_ID_LENGTH%>"></td>
    220265      </tr>   
    221       <tr>
    222         <td></td>
    223         <td>
    224266         
    225         </td>
    226       </tr>       
    227267      <tr valign=top>
    228268        <td class="prompt">Help text</td>
     
    265305              tooltip="Textstyle"
    266306              clazz="buttonclass"
    267               style="border-right: 0px;"
    268307              image="text_style_edit.gif"
    269               onclick="Menu.toggleTopMenu(document.getElementById('textstyles'), event.clientX, event.clientY); event.cancelBubble = true;"
     308              onclick="Menu.toggleTopMenu(document.getElementById('textformats'), event.clientX, event.clientY); event.cancelBubble = true;"
    270309            />           
    271310            <tbl:button
    272311              tooltip="Table"
    273312              clazz="buttonclass"
    274               style="border-right: 0px;"
    275313              image="text_table.png"
    276314              onclick="Menu.toggleTopMenu(document.getElementById('tableitem'), event.clientX, event.clientY); event.cancelBubble = true;"
    277315            />
    278316            <tbl:button
    279               clazz="buttonclass"
    280               style="border-right: 0px;"
     317              tooltip="List"
     318              clazz="buttonclass"
    281319              image="text_list.gif"
    282320              onclick="Menu.toggleTopMenu(document.getElementById('listtype'), event.clientX, event.clientY); event.cancelBubble = true;"
     
    284322            <tbl:button
    285323              tooltip="New line"
    286               style="padding: 1px;"
    287324              image="text_newline.gif"
    288325              clazz="buttonclass"
     
    297334          </tbl:toolbar>
    298335          </div>
    299           <textarea <%=clazz%> rows="12" cols="60" name="description" wrap="virtual"
     336          <textarea <%=clazz%> rows="16" cols="60" name="description" wrap="virtual"
    300337            ><%=HTML.encodeTags(help == null ? cc.getPropertyValue("description") : help.getDescription())%></textarea>
    301338          <a href="javascript:Main.zoom('Help text', 'help', 'description')"
  • trunk/www/common/zoom.jsp

    r2978 r3040  
    3535%>
    3636<%@ taglib prefix="base" uri="/WEB-INF/base.tld" %>
     37<%@ taglib prefix="tbl" uri="/WEB-INF/table.tld" %>
     38<%@ taglib prefix="m" uri="/WEB-INF/menu.tld" %>
    3739<%
    3840  String title = request.getParameter("title");
     
    4345%>
    4446<base:page type="popup" title="<%=title%>">
    45 <base:head>
     47<base:head scripts="menu.js" styles="menu.css,help.css">
    4648  <script language="JavaScript">
    4749  function getText()
     
    6769    window.close();
    6870  }
     71 
     72  /*
     73    Enclose the selected text with prefix and suffix. Code taken
     74    from Trac: http://projects.edgewall.com/trac/
     75  */
     76  function encloseSelection(prefix, suffix)
     77  {
     78    var frm = document.forms['zoom'];
     79    var textarea = frm.zoom;
     80    textarea.focus();
     81      var start, end, sel, scrollPos, subst;
     82      if (typeof(document["selection"]) != "undefined")
     83      {
     84        sel = document.selection.createRange().text;
     85      }
     86      else if (typeof(textarea["setSelectionRange"]) != "undefined")
     87      {
     88        start = textarea.selectionStart;
     89        end = textarea.selectionEnd;
     90        scrollPos = textarea.scrollTop;
     91        sel = textarea.value.substring(start, end);
     92      }
     93      if (sel.match(/ $/))
     94      {
     95        // exclude ending space char, if any
     96          sel = sel.substring(0, sel.length - 1);
     97          suffix = suffix + " ";
     98      }
     99      subst = prefix + sel + suffix;
     100      if (typeof(document["selection"]) != "undefined")
     101      {
     102        var range = document.selection.createRange().text = subst;
     103        textarea.caretPos -= suffix.length;
     104      }
     105      else if (typeof(textarea["setSelectionRange"]) != "undefined")
     106      {
     107        textarea.value = textarea.value.substring(0, start) + subst +
     108                         textarea.value.substring(end);
     109        if (sel)
     110        {
     111          textarea.setSelectionRange(start + subst.length, start + subst.length);
     112        }
     113        else
     114        {
     115          textarea.setSelectionRange(start + prefix.length, start + prefix.length);
     116        }
     117        textarea.scrollTop = scrollPos;
     118      }
     119  }
    69120  </script>
    70121</base:head>
    71122<base:body onload="getText()">
     123  <m:menu
     124    id="listtype"
     125    style="display: none;">     
     126  <m:menuitem
     127    title="Ordered list"
     128    onclick="encloseSelection('&lt;ol&gt&lt;li&gt;', '&lt;/li&gt;&lt;/ol&gt;')"
     129    tooltip="Insert an ordered list"
     130  />
     131  <m:menuitem
     132    title="Unordered list"
     133    onclick="encloseSelection('&lt;ul&gt;&lt;li&gt;', '&lt;/li&gt;&lt;/ul&gt;')"
     134    tooltip="Insert an unordered list"
     135  />     
     136  </m:menu>
     137  <%
     138  String tableInsert = "encloseSelection('&lt;table class=&quot;explanation&quot;&gt;', '&lt;/table&gt;')";
     139  %>
     140  <m:menu
     141    id="tableitem"
     142    style="display: none;">
     143  <m:menuitem
     144    title="Table"
     145    onclick="<%=tableInsert%>"
     146    tooltip="Insert a table"
     147  />
     148  <m:menuitem
     149    title="Row"
     150    onclick="encloseSelection('&lt;tr&gt;', '&lt;/tr&gt;')"
     151    tooltip="Insert a row in a table"
     152  />
     153  <m:menuitem
     154    title="Cell"
     155    onclick="encloseSelection('&lt;td&gt;', '&lt;/td&gt;')"
     156    tooltip="Insert a cell in a table row"
     157  />
     158  </m:menu>
     159  <m:menu
     160    id="textformats"
     161    style="display: none;">
     162  <m:menuitem
     163    title="Important"
     164    onclick="encloseSelection('&lt;imp&gt;', '&lt/imp&gt;')"
     165    tooltip="Mark text as important"
     166  />
     167  <m:menuitem
     168    title="User input"
     169    onclick="encloseSelection('&lt;ui&gt;', '&lt/ui&gt;')"
     170    tooltip="Mark text as user input."
     171  />
     172  <m:menuitem
     173    title="Required"
     174    onclick="encloseSelection('&lt;req&gt;', '&lt/req&gt;')"
     175    tooltip="Mark text as required user input"
     176  />
     177  </m:menu>   
    72178  <form name="zoom" onsubmit="return false;">
    73179    <table align="center">
     
    75181    <td>
    76182      <h3 class="docked"><%=title%> <base:help helpid="zoom.edit" /></h3>
     183      <%
     184      if (form.equals("help"))
     185      {
     186      %>
     187        <tbl:toolbar clazz="edditbar">                       
     188          <tbl:button
     189            tooltip="Bold"
     190            clazz="buttonclass"
     191            image="text_bold.png"
     192            onclick="encloseSelection('&lt;b&gt;', '&lt;/b&gt;')"
     193          />
     194          <tbl:button
     195            tooltip="Italic"             
     196            clazz="buttonclass"
     197            image="text_italic.png"
     198            onclick="encloseSelection('&lt;i&gt;', '&lt;/i&gt;')"
     199          />
     200          <tbl:button
     201            tooltip="Underline"
     202            clazz="buttonclass"
     203            image="text_underline.png"
     204            onclick="encloseSelection('&lt;u&gt;', '&lt;/u&gt;')"
     205          />                     
     206          <tbl:button
     207            tooltip="Header 3"
     208            clazz="buttonclass"
     209            style="padding: 1px;"
     210            image="text_h3.png"
     211            onclick="encloseSelection('&lt;h3&gt;', '&lt;/h3&gt;')"
     212          />
     213          <tbl:button
     214            tooltip="Header 4"
     215            clazz="buttonclass"
     216            style="padding: 1px;"
     217            image="text_h4.png"
     218            onclick="encloseSelection('&lt;h4&gt;', '&lt;/h4&gt;')"
     219          />
     220          <tbl:button
     221            tooltip="Textstyle"
     222            clazz="buttonclass"
     223            image="text_style_edit.gif"
     224            onclick="Menu.toggleTopMenu(document.getElementById('textformats'), event.clientX, event.clientY); event.cancelBubble = true;"
     225          />           
     226          <tbl:button
     227            tooltip="Table"
     228            clazz="buttonclass"
     229            image="text_table.png"
     230            onclick="Menu.toggleTopMenu(document.getElementById('tableitem'), event.clientX, event.clientY); event.cancelBubble = true;"
     231          />
     232          <tbl:button
     233            tooltip="List"
     234            clazz="buttonclass"
     235            image="text_list.gif"
     236            onclick="Menu.toggleTopMenu(document.getElementById('listtype'), event.clientX, event.clientY); event.cancelBubble = true;"
     237          />
     238          <tbl:button
     239            tooltip="New line"
     240            image="text_newline.gif"
     241            clazz="buttonclass"
     242            onclick="encloseSelection('&lt;br&gt;', '')"
     243          />
     244          <tbl:button
     245            tooltip="New paragraph"
     246            clazz="buttonclass"
     247            image="text_paragraph.gif"
     248            onclick="encloseSelection('&lt;p&gt;', '&lt;/p&gt;')"
     249          />           
     250        </tbl:toolbar>
     251        <%
     252      }
     253      %>
    77254      <textarea name="zoom" rows="30" cols="80" wrap="soft"
    78255        <%=disabled ? "class=\"disabled\" disabled readonly" : ""%>></textarea>
  • trunk/www/include/scripts/main.js

    r2942 r3040  
    9595    url += '&ID='+this.getIdFromLocation();
    9696    if (callback) url += '&callback='+callback;
    97     Main.openPopup(url, title.replace(/[^\w]/g, ''), 640, 550);
     97    Main.openPopup(url, title.replace(/[^\w]/g, ''), 640, 600);
    9898  }
    9999 
     
    386386    this.controllers['ANNOTATIONTYPECATEGORY'] = { url:'admin/annotationtypecategories/index.jsp', width:540, height:400 };
    387387    this.controllers['CLIENT'] = { url:'admin/clients/index.jsp', width:500, height:340 };
    388     this.controllers['HELP'] = { url:'admin/clients/help/index.jsp', width:600, height:400 };
     388    this.controllers['HELP'] = { url:'admin/clients/help/index.jsp', width:600, height:500 };
    389389    this.controllers['FILETYPE'] = { url:'admin/filetypes/index.jsp', width:440, height:280 };
    390390    this.controllers['GROUP'] = { url:'admin/groups/index.jsp', width:540, height:400 };
  • trunk/www/include/styles/help.css

    r3036 r3040  
    8181}
    8282
     83.edditbar {
     84  border-top: thin solid #999999;
     85  border-left: thin solid #999999;
     86  border-right: thin solid #999999;
     87  border-bottom: thin solid #000000;
     88  width:100%;
     89  padding-bottom:0px
     90}
     91
    8392.explanation { 
    8493  border: 2px ridge #999999;
Note: See TracChangeset for help on using the changeset viewer.