Changeset 5902


Ignore:
Timestamp:
Dec 8, 2011, 3:01:38 PM (10 years ago)
Author:
Nicklas Nordborg
Message:

References #1655: GUI improvements

  • Make sure content on dialog can be placed so that it fills the free space between the title and buttons.


  • The 'Logout' dialog is easy and provides the simple case where everything is centered in the remaining space. Should also work when resizing the dialog.


  • The 'Reset filters' and 'Broadcast message' dialogs need a bit more work. The look ok now, but there are some minor things to fix yet.
Location:
trunk/www
Files:
6 edited

Legend:

Unmodified
Added
Removed
  • trunk/www/admin/server/broadcast.jsp

    r5900 r5902  
    7575  </base:head>
    7676  <base:body onload="init()">
     77    <h1>Broadcast message <base:help helpid="broadcast.message"/></h1>
    7778    <form name="broadcast" action="submit_server.jsp" method="post" onsubmit="return false;">
    7879    <input type="hidden" name="ID" value="<%=ID%>">
    7980    <input type="hidden" name="cmd" value="SetBroadcastMessage">
    8081 
    81     <h3 class="docked">Broadcast message <base:help helpid="broadcast.message"/></h3>
    82     <div class="boxedbottom">
     82    <div class="content">
    8383    <%
    8484    if (!writePermission)
    8585    {
    8686      %>
     87      <table class="fullcc"><tr><td>
    8788      <div class="error">You do not have permission to broadcast messages to users.</div>
     89      </td></tr></table>
    8890      <%
    8991    }
     
    9193    {
    9294      %>
    93       <table class="form">
     95      <table class="fullform smaller">
    9496      <tr>
    95         <td class="prompt">Title</td>
     97        <th>Title</td>
    9698        <td>
    97           <input class="text"
    98             type="text" name="title" value="<%=HTML.encodeTags(title)%>" size="60" maxlength="255">
     99          <input class="text" style="width: 98%;"
     100            type="text" name="title" value="<%=HTML.encodeTags(title)%>" maxlength="255">
    99101        </td>
     102        <td></td>
    100103      </tr>
    101       <tr valign=top>
    102         <td class="prompt">Disable login</td>
     104      <tr>
     105        <th>Disable login</td>
    103106        <td>
    104107          <input type="checkbox" name="denyLogin" <%=Boolean.TRUE.equals(denyLogin) ? "checked": ""%> value="1">
    105108        </td>
     109        <td></td>
    106110      </tr>
    107       <tr valign=top>
    108         <td class="prompt">Message</td>
     111      <t>
     112        <th>Message</td>
    109113        <td>
    110           <textarea class="text" rows="15" cols="60" name="message" wrap="virtual"><%=HTML.encodeTags(message)%></textarea>
     114          <textarea class="text" style="width: 98%;" rows="15" name="message" wrap="virtual"><%=HTML.encodeTags(message)%></textarea>
     115        </td>
     116        <td style="width: 20px;">
    111117          <a href="javascript:Main.zoom('Message', 'broadcast', 'message')" title="Edit in larger window"><base:icon image="zoom.gif" /></a>
    112118        </td>
     
    119125
    120126    </form>
    121     <base:buttongroup>
     127    <base:buttongroup subclass="dialogbuttons">
    122128      <base:button onclick="clearMessage()" image="remove.png" title="Clear message" />
    123129      <base:button onclick="saveSettings();" title="Ok" visible="<%=writePermission%>"/>
  • trunk/www/include/styles/main.css

    r5901 r5902  
    6363.basicbutton
    6464{
    65   background: #D0D0D0;
     65  background: #D8D8D8;
    6666  border: 1px solid #333333;
    6767  /* IE need a bigger radius to give the same effect as Firefox */
     
    102102  color: #666666;
    103103  border: 1px solid #666666;
    104   background: #D0D0D0;
     104  background: #D8D8D8;
    105105  cursor: default;
    106106}
     
    113113{
    114114  cursor: pointer;
     115}
     116
     117/*
     118  Form input fields
     119  -----------------
     120*/
     121
     122input[type="radio"], input[type="checkbox"]
     123{
     124  cursor: pointer;
     125  vertical-align: text-bottom;
     126  margin: 0px 3px 0px 3px;
     127  padding: 0px;
     128}
     129
     130select, input[type="text"], textarea
     131{
     132  border: 1px solid #999999;
     133  border-radius: 3px;
     134  -moz-border-radius: 2px;
     135  background: #ffffff;
     136  margin: 1px;
     137}
     138
     139select:hover, input[type="text"]:hover, textarea:hover
     140{
     141  border: 1px solid #2288aa;
     142}
     143
     144select:focus, input[type="text"]:focus, textarea:focus
     145{
     146  border: 2px solid #2288aa;
     147  margin: 0px;
    115148}
    116149
     
    224257}
    225258
    226 input.text, textarea, select {
    227   border-top: 2px groove #999999;
    228   border-left: 2px groove #999999;
    229   border-bottom: 2px ridge #FFFFFF;
    230   border-right: 2px ridge #FFFFFF;
    231 }
    232 
    233 input.button {
    234   background: #E0E0E0;
    235   border-top: 2px ridge #FFFFFF;
    236   border-left: 2px ridge #FFFFFF;
    237   border-bottom: 2px groove #999999;
    238   border-right: 2px groove #999999;
    239 }
    240 
    241 input.button:hover {
    242   background: #F0F0F0;
    243   border-color: #000000;
    244   cursor: pointer;
    245 }
    246259
    247260input.disabled, textarea.disabled {
     
    265278  background: #FFF0D0;
    266279}
    267 input[type="radio"], input[type="checkbox"] {
    268   cursor: pointer;
    269 }
     280
    270281a.disabled, label.disabled {
    271282  color: #666666;
  • trunk/www/include/styles/popup.css

    r5901 r5902  
    2727*/
    2828body.popup
    29 {}
     29{
     30  margin: 0px;
     31}
    3032
    3133/* Main title of a popup dialog */
     
    5355  padding-right: 4px;
    5456  color: #2288aa;
    55   xfont-size: smaller;
    5657}
    5758
     
    6162  position: absolute;
    6263  right: 6px;
     64}
     65
     66/* content should span between main title and buttons */
     67.popup .content
     68{
     69  position: absolute;
     70  left: 0px;
     71  right: 0px;
     72  /* top and bottom are specified in one of size_*.css */
     73  background: #D8D8D8;
     74  border-bottom: 1px solid #999999;
     75  overflow: auto;
     76}
     77
     78/* fullcc is used for 100% width+height content that is centered vertically+horizontally */
     79.popup .content table.fullcc
     80{
     81  height: 100%;
     82  width: 100%;
     83  vertical-align: middle;
     84  text-align: center;
     85  /* needed for scrollbars to appear if content is overflowing */
     86  min-height: 100px;
     87}
     88
     89/* Simply apply some padding to avoid hitting the border */
     90.popup .content .padded
     91{
     92  margin: 5px;
    6393}
    6494
     
    77107}
    78108
     109/*
     110  Table listings
     111*/
     112/* A 100%-wide table with two columns (prompt+value)*/
     113.popup .content table.fullform
     114{
     115  width: 100%;
     116  background: #f0f0f0;
     117}
     118
     119table.fullform tr
     120{
     121  /* height is really minimum height */
     122  height: 22px;
     123}
     124
     125/* The first column should be a header */
     126table.fullform th
     127{
     128  width: 150px;
     129  font-weight: bold;
     130  background-color: #d8d8d8;
     131  border-right: 1px solid #999999;
     132  white-space: nowrap;
     133  text-align: left;
     134  padding: 1px 2px 1px 6px;
     135  border-bottom: 1px dotted #999999;
     136}
     137
     138table.fullform td
     139{
     140  border-bottom: 1px dotted #999999;
     141  padding: 1px 2px 1px 2px;
     142}
     143
     144/* A smaller header column */
     145table.fullform.smaller th
     146{
     147  width: 100px;
     148}
     149
     150/* A larger header column */
     151table.fullform.larger th
     152{
     153  width: 200px;
     154}
  • trunk/www/include/styles/size_m.css

    r5901 r5902  
    6363}
    6464
     65.popup .content
     66{
     67  /* should fit between title and buttons */
     68  top: 28px;
     69  bottom: 40px;
     70}
     71
    6572/*
    6673  STYLES BELOW ARE OLD AND SHOULD BE VERIFIED
  • trunk/www/logout.jsp

    r5900 r5902  
    7272  {
    7373    Main.hide('confirm');
     74    Main.hide('dialogbuttons');
    7475    Main.show('logout');
    7576    setTimeout("document.forms['logout'].submit()", 800);
     
    7879</base:head>
    7980<base:body>
    80   <br>
    81   <form action="logout.jsp" method="post" name="logout" onsubmit="return false;">
     81  <h1><%=title%></h1>
     82  <div class="content">
     83  <table class="fullcc"><tr><td>
     84    <form action="logout.jsp" method="post" name="logout" onsubmit="return false;">
    8285    <input type="hidden" name="ID" value="<%=ID%>">
    8386    <input type="hidden" name="noconfirm" value="1">
    84  
    85   <div id="confirm">
    86     <base:note type="question" title="<%=title%>">
    87       Are you sure you want to logout? All unsaved data will be lost!
    88       <br>
    89     </base:note>
    90     <p>
    91     <table align="center">
    92     <tr>
    93       <td>
    94       <%
    95       if (sc.isImpersonated())
    96       {
    97         User originalUser = (User)sc.getSessionSetting("impersonate.originalUser");
    98         if (originalUser != null)
     87      <div id="confirm">
     88        <b>Are you sure you want to logout? </b>
     89        <br>
     90        All unsaved data will be lost!
     91        <%
     92        if (sc.isImpersonated())
    9993        {
    100           %>
    101           <input type="checkbox" name="revert" id="revert" value="1" checked><label for="revert">Revert to
    102           <%=HTML.encodeTags(originalUser.getName())%></label>
    103           <%
     94          User originalUser = (User)sc.getSessionSetting("impersonate.originalUser");
     95          if (originalUser != null)
     96          {
     97            %>
     98            <p>
     99            <input type="checkbox" name="revert" id="revert" value="1" checked><label for="revert">Revert to
     100            <%=HTML.encodeTags(originalUser.getName())%></label>
     101            <%
     102          }
    104103        }
    105       }
    106       %>
    107       </td>
    108     </tr>
    109     </table>
    110    
    111     <base:buttongroup subclass="dialogbuttons">
    112       <base:button onclick="beginLogout()" title="Yes" />
    113       <base:button onclick="window.close()" title="No" />
    114     </base:buttongroup>
    115    
     104        %>
     105      </div>
     106      <div id="logout" style="display: none;">
     107        <b>Logging out...</b>
     108      </div>
     109    </form>
     110  </td></tr></table>
    116111  </div>
    117  
    118   <div id="logout" style="display: none;">
    119     <base:note type="info" title="Logging out...">
    120     Logging out...
    121     </base:note>
    122   </div>
    123  
    124   </form>
    125 
     112  <base:buttongroup subclass="dialogbuttons" id="dialogbuttons">
     113    <base:button onclick="beginLogout()" title="Yes" />
     114    <base:button onclick="window.close()" title="No" />
     115  </base:buttongroup>
    126116</base:body>
    127117</base:page>
  • trunk/www/my_base/user/reset_filters.jsp

    r5901 r5902  
    5151{
    5252  final User user = User.getById(dc, sc.getLoggedInUserId());
     53  final String title = "Reset list settings for "+HTML.encodeTags(user.getName());
    5354  final List<ItemContext> inMemory = sc.getAllCurrentContexts(true, false);
    5455  final List<ItemContext> inDatabase = sc.getAllCurrentContexts(false, true);
     
    7172  }
    7273  %>
    73   <base:page type="popup" title="<%="Reset list settings for "+HTML.encodeTags(user.getName())%>">
     74  <base:page type="popup" title="<%=title%>">
    7475  <base:head>
    7576    <script language="JavaScript">
     
    8889  </base:head>
    8990  <base:body>
    90     <h1>Reset list settings for <%=HTML.encodeTags(user.getName())%>
    91       <base:help helpid="userpreferences.resetfilters" /></h1>
    92   <br><br>
     91    <h1><%=title%><base:help helpid="userpreferences.resetfilters" /></h1>
     92    <div class="content">
     93      <form action="submit_user.jsp?ID=<%=ID%>" method="post" name="preferences"
     94        onsubmit="return false;">
     95        <input type=hidden name="cmd" value="ResetFilters">
    9396
    94   <form action="submit_user.jsp?ID=<%=ID%>" method="post" name="preferences"
    95     onsubmit="return false;">
    96   <input type=hidden name="cmd" value="ResetFilters">
     97        <table class="fullform smaller">
     98        <tr>
     99          <th>Which list?</th>
     100          <td>
     101            <select name="item_type" onchange="itemTypeOnChange()" style="width: 100%;">
     102              <option value="">- all -
     103              <%
     104              for (Item item : items)
     105              {
     106                %>
     107                <option value="<%=item.name()%>"><%=dbOnly.contains(item) ? "* " : "" %><%=item%>
     108                <%
     109              }
     110              %>
     111            </select><br>
     112          </td>
     113        </tr>
     114        <tr>
     115          <th>Location</th>
     116          <td>
     117          <input type="checkbox" name="memory" id="memory" value="1" checked disabled>In-memory
     118          <input type="checkbox" name="database" id="database" value="1"><label for="database">In-database</label>
     119          </td>
     120        </tr>
     121        </table>
     122       
     123        <div class="padded">
     124        * = This setting is only in the database
     125        </div>
     126       
     127        <div class="padded">
     128        Use this functionality if you are experiencing problems when listing
     129        items on a list page. Try first with only the 'In-memory' option selected.
     130        If that doesn't help, try the 'In-database' option.
     131        </div>
     132      </form>
     133    </div>
    97134
    98  
    99   <div class="boxed">
    100 
    101     <table class="form" cellspacing=0>
    102     <tr>
    103       <td class="prompt">Which list?</td>
    104       <td>
    105         <select name="item_type" onchange="itemTypeOnChange()">
    106           <option value="">- all -
    107           <%
    108           for (Item item : items)
    109           {
    110             %>
    111             <option value="<%=item.name()%>"><%=dbOnly.contains(item) ? "* " : "" %><%=item%>
    112             <%
    113           }
    114           %>
    115         </select><br>
    116         * = This setting is only in the database
    117       </td>
    118     </tr>
    119     <tr>
    120       <td class="prompt">Location</td>
    121       <td>
    122       <input type="checkbox" name="memory" id="memory" value="1" checked disabled>In-memory<br>
    123       <input type="checkbox" name="database" id="database" value="1"><label for="database">In-database</label>
    124       </td>
    125     </tr>
    126     </table>
    127     <p>
    128     Use this functionality if you are experiencing problems when listing
    129     items on a list page. Try first with only the 'In-memory' option selected.
    130     If that doesn't help, try the 'In-database' option.
    131   </div>
    132   </form>
    133  
    134135    <base:buttongroup subclass="dialogbuttons">
    135136      <base:button onclick="resetFilters();" title="Ok" />
Note: See TracChangeset for help on using the changeset viewer.