Skip to:
Content

bbPress.org

Changeset 2107


Ignore:
Timestamp:
05/29/2009 12:19:01 AM (17 years ago)
Author:
sambauers
Message:

Installer prettiness. Fixes #1095. Props jjj for the inspiration.

Location:
trunk/bb-admin
Files:
3 edited

Legend:

Unmodified
Added
Removed

  • trunk/bb-admin/includes/class.bb-install.php

    r2078 r2107  
    329329        //$r .= '<form id="lang" action="install.php">' . "\n";
    330330        $r .= "\t" . '<fieldset>' . "\n";
    331         $r .= "\t\t" . '<label>' . "\n";
    332         $r .= "\t\t\t" . __( 'Installation language' ) . "\n";
    333         $r .= "\t\t\t" . '<select onchange="changeLanguage(this);" name="language">' . "\n";
     331        $r .= "\t\t" . '<label class="has-note has-label for-select">' . "\n";
     332        $r .= "\t\t\t" . '<span>' . __( 'Installation language' ) . '</span>' . "\n";
     333        $r .= "\t\t\t" . '<select class="has-note" onchange="changeLanguage(this);" name="language">' . "\n";
    334334        foreach ( $this->languages as $language ) {
    335335            $selected = '';
    … …  
    340340        }
    341341        $r .= "\t\t\t" . '</select>' . "\n";
    342         $r .= "\t\t\t" . '<p class="note">' . __( 'Sets the language to be used during the installation process only.' ) . '</p>' . "\n";
     342        $r .= "\t\t\t" . '<a class="note-toggle" href="javascript:void(0);" onclick="toggleNote(\'note-language\');">?</a>' . "\n";
     343        $r .= "\t\t\t" . '<p id="note-language" class="note" style="display:none">' . __( 'Sets the language to be used during the installation process only.' ) . '</p>' . "\n";
     344        $r .= "\t\t\t" . '<div class="clear"></div>' . "\n";
    343345        $r .= "\t\t" . '</label>' . "\n";
    344346        $r .= "\t" . '</fieldset>' . "\n";
    … …  
    21822184        $data = $this->data[$this->step]['form'][$key];
    21832185
     2186        $class = '';
     2187        $classes = array();
     2188        if ( isset( $data['note'] ) ) {
     2189            $classes[] = 'has-note';
     2190        }
     2191        if ( isset( $data['label'] ) ) {
     2192            $classes[] = 'has-label';
     2193        }
     2194
    21842195        if ( isset( $this->data[$this->step]['form'][$key]['type'] ) ) {
    21852196            $type = $this->data[$this->step]['form'][$key]['type'];
    … …  
    21872198            $type = 'text';
    21882199        }
     2200        $classes[] = 'for-input-' . $type;
    21892201
    21902202        if ( isset( $this->strings[$this->step]['form_errors'][$key] ) ) {
    2191             $class = ' class="error"';
     2203            $classes[] = 'error';
     2204        }
     2205        if ( count( $classes ) ) {
     2206            $class = ' class="' . join( ' ', $classes ) . '"';
    21922207        }
    21932208
    … …  
    21952210
    21962211        if ( isset( $data['label'] ) ) {
    2197             $r .= '<span>' . $data['label'] . '</span>' . "\n";
     2212            $r .= "\t\t" . '<span>' . $data['label'] . '</span>' . "\n";
    21982213        }
    21992214
    … …  
    22202235        }
    22212236
    2222         $r .= "\t\t" . '<input' . $direction . ' type="' . attribute_escape( $type ) . '" id="' . attribute_escape( $key ) . '" name="' . attribute_escape( $key ) . '" class="text" value="' . attribute_escape( $data['value'] ) . '"' . $maxlength . $autocomplete . ' />' . "\n";
     2237        $r .= "\t\t" . '<input' . $direction . ' type="' . attribute_escape( $type ) . '" id="' . attribute_escape( $key ) . '" name="' . attribute_escape( $key ) . '" class="text' . $has_note_class . '" value="' . attribute_escape( $data['value'] ) . '"' . $maxlength . $autocomplete . ' />' . "\n";
    22232238
    22242239        if ( isset( $data['note'] ) ) {
    2225             $r .= "\t" . '<p class="note">' . $data['note'] . '</p>' . "\n";
    2226         }
    2227 
     2240            $r .= "\t\t" . '<a class="note-toggle" href="javascript:void(0);" onclick="toggleNote(\'note-' . attribute_escape( $key ) . '\');">?</a>' . "\n";
     2241            $r .= "\t\t" . '<p id="note-' . attribute_escape( $key ) . '" class="note" style="display:none">' . $data['note'] . '</p>' . "\n";
     2242        }
     2243
     2244        $r .= "\t\t" . '<div class="clear"></div>' . "\n";
    22282245        $r .= "\t" . '</label>' . "\n";
    22292246
    … …  
    22552272        $data = $this->data[$this->step]['form'][$key];
    22562273
    2257         $r = "\t" . '<label id="label-' . attribute_escape( $key ) . '" for="' . attribute_escape( $key ) . '">' . "\n";
    2258 
     2274        $class = '';
     2275        $classes = array( 'for-textarea' );
     2276        if ( isset( $data['note'] ) ) {
     2277            $classes[] = 'has-note';
     2278        }
    22592279        if ( isset( $data['label'] ) ) {
    2260             $r .= $data['label'] . "\n";
     2280            $classes[] = 'has-label';
     2281        }
     2282        if ( count( $classes ) ) {
     2283            $class = ' class="' . join( ' ', $classes ) . '"';
     2284        }
     2285
     2286        $r = "\t" . '<label id="label-' . attribute_escape( $key ) . '"' . $class . ' for="' . attribute_escape( $key ) . '">' . "\n";
     2287
     2288        if ( isset( $data['label'] ) ) {
     2289            $r .= "\t\t" . '<span>' . $data['label'] . '</span>' . "\n";
     2290        }
     2291
     2292        if ( isset( $data['note'] ) ) {
     2293            $r .= "\t\t" . '<a class="note-toggle" href="javascript:void(0);" onclick="toggleNote(\'note-' . attribute_escape( $key ) . '\');">?</a>' . "\n";
     2294            $r .= "\t\t" . '<p id="note-' . attribute_escape( $key ) . '" class="note" style="display:none">' . $data['note'] . '</p>' . "\n";
    22612295        }
    22622296
    … …  
    22652299        }
    22662300
    2267         $r .= "\t\t" . '<textarea' . $direction . ' id="' . attribute_escape( $key ) . '" rows="5" cols="30">' . wp_specialchars( $data['value'] ) . '</textarea>' . "\n";
    2268 
    2269         if ( isset( $data['note'] ) ) {
    2270             $r .= "\t" . '<p class="note">' . $data['note'] . '</p>' . "\n";
    2271         }
     2301        $r .= "\t\t" . '<textarea id="' . attribute_escape( $key ) . '" rows="5" cols="30"' . $direction . '>' . wp_specialchars( $data['value'] ) . '</textarea>' . "\n";
    22722302
    22732303        $r .= "\t" . '</label>' . "\n";
    … …  
    22862316        $data = $this->data[$this->step]['form'][$key];
    22872317
    2288         $r = "\t" . '<label id="label-' . attribute_escape( $key ) . '" for="' . attribute_escape( $key ) . '">' . "\n";
    2289 
     2318        $class = '';
     2319        $classes = array( 'for-select' );
     2320        if ( isset( $data['note'] ) ) {
     2321            $classes[] = 'has-note';
     2322        }
    22902323        if ( isset( $data['label'] ) ) {
    2291             $r .= $data['label'] . "\n";
     2324            $classes[] = 'has-label';
     2325        }
     2326        if ( count( $classes ) ) {
     2327            $class = ' class="' . join( ' ', $classes ) . '"';
     2328        }
     2329
     2330        $r = "\t" . '<label id="label-' . attribute_escape( $key ) . '"' . $class . ' for="' . attribute_escape( $key ) . '">' . "\n";
     2331
     2332        if ( isset( $data['label'] ) ) {
     2333            $r .= "\t\t" . '<span>' . $data['label'] . '</span>' . "\n";
    22922334        }
    22932335
    22942336        if ( isset( $data['options'] ) ) {
    22952337            $r .= "\t\t" . '<select id="' . attribute_escape( $key ) . '" name="' . attribute_escape( $key ) . '"';
    2296 
    22972338            if ( isset( $data['onchange'] ) ) {
    22982339                $r .= ' onchange="' . attribute_escape( $data['onchange'] ) . '"';
    22992340            }
    2300 
    23012341            $r .= '>' . "\n";
    23022342
    … …  
    23112351            }
    23122352
    2313             $r .= "\t\t" . '</select>' . "\n";
     2353            $r .= "\t\t" . '</select>';
    23142354        }
    23152355
    23162356        if ( isset( $data['note'] ) ) {
    2317             $r .= "\t" . '<p class="note">' . $data['note'] . '</p>' . "\n";
    2318         }
    2319 
     2357            $r .= "\t\t" . '<a class="note-toggle" href="javascript:void(0);" onclick="toggleNote(\'note-' . attribute_escape( $key ) . '\');">?</a>' . "\n";
     2358            $r .= "\t\t" . '<p id="note-' . attribute_escape( $key ) . '" class="note" style="display:none">' . $data['note'] . '</p>' . "\n";
     2359        }
     2360
     2361        $r .= "\t\t" . '<div class="clear"></div>' . "\n";
    23202362        $r .= "\t" . '</label>' . "\n";
    23212363
    … …  
    23502392        $data = $this->data[$this->step]['form'][$key];
    23512393
     2394        $class = '';
     2395        $classes = array( 'for-toggle' );
     2396        if ( isset( $data['note'] ) ) {
     2397            $classes[] = 'has-note';
     2398        }
     2399        if ( isset( $data['label'] ) ) {
     2400            $classes[] = 'has-label';
     2401        }
     2402
    23522403        $onclick = 'toggleBlock(this, \'' . js_escape( $key . '_target' ) . '\' );';
    23532404        if ( isset( $data['toggle_value'] ) ) {
    … …  
    23582409
    23592410        if ( isset( $this->strings[$this->step]['form_errors'][$key] ) ) {
    2360             $class = ' class="error"';
    2361         }
    2362 
    2363         $r = "\t" . '<label id="label-' . attribute_escape( $key ) . '" for="' . attribute_escape( $key ) . '"' . $class . '>' . "\n";
    2364 
     2411            $classes[] = 'error';
     2412        }
     2413        if ( count( $classes ) ) {
     2414            $class = ' class="' . join( ' ', $classes ) . '"';
     2415        }
     2416
     2417        $r = "\t" . '<label id="label-' . attribute_escape( $key ) . '"' . $class . ' for="' . attribute_escape( $key ) . '">' . "\n";
     2418
     2419        $r .= "\t\t" . '<span>' . "\n";
    23652420        if ( isset( $data['label'] ) ) {
    2366             $r .= $data['label'] . "\n";
    2367         }
    2368 
    2369         $r .= "\t\t" . '<input type="checkbox" id="' . attribute_escape( $key ) . '" name="' . attribute_escape( $key ) . '" class="checkbox" onclick="' . attribute_escape( $onclick ) . '"' . $checked . ' value="1" />' . "\n";
     2421            $r .= "\t\t\t" . $data['label'] . "\n";
     2422        }
     2423
     2424        $r .= "\t\t\t" . '<input type="checkbox" id="' . attribute_escape( $key ) . '" name="' . attribute_escape( $key ) . '" class="checkbox" onclick="' . attribute_escape( $onclick ) . '"' . $checked . ' value="1" />' . "\n";
     2425        $r .= "\t\t" . '</span>' . "\n";
    23702426
    23712427        if ( isset( $data['note'] ) ) {
    2372             $r .= "\t" . '<p class="note">' . $data['note'] . '</p>' . "\n";
    2373         }
    2374 
     2428            $r .= "\t\t" . '<a class="note-toggle" href="javascript:void(0);" onclick="toggleNote(\'note-' . attribute_escape( $key ) . '\');">?</a>' . "\n";
     2429            $r .= "\t\t" . '<p id="note-' . attribute_escape( $key ) . '" class="note" style="display:none">' . $data['note'] . '</p>' . "\n";
     2430        }
     2431
     2432        $r .= "\t\t" . '<div class="clear"></div>' . "\n";
    23752433        $r .= "\t" . '</label>' . "\n";
    23762434

  • trunk/bb-admin/install.css

    r2049 r2107  
    5151    background-color: rgb(255, 255, 255);
    5252    text-align: left;
     53    -moz-border-radius: 11px;
    5354    -khtml-border-radius: 11px;
    5455    -webkit-border-radius: 11px;
    … …  
    147148div.closed {
    148149    border: 1px solid rgb(223, 223, 223);
     150    -moz-border-radius: 6px;
    149151    -khtml-border-radius: 6px;
    150152    -webkit-border-radius: 6px;
    … …  
    156158div.open div {
    157159    padding: 1em;
     160    margin: 1px 0;
    158161}
    159162
    160163div.closed div {
    161164    position: relative;
    162 }
    163 
    164 div.open div {
    165     margin: 1px 0;
    166165}
    167166
    … …  
    170169    background-color: rgb(255, 235, 232);
    171170    padding: 0.6em;
    172     -khtml-border-radius: 3px;
    173     -webkit-border-radius: 3px;
    174     border-radius: 3px;
     171    -moz-border-radius: 4px;
     172    -khtml-border-radius: 4px;
     173    -webkit-border-radius: 4px;
     174    border-radius: 4px;
    175175}
    176176
    … …  
    187187    background-color: rgb(255, 251, 204);
    188188    padding: 0.6em;
    189     -khtml-border-radius: 3px;
    190     -webkit-border-radius: 3px;
    191     border-radius: 3px;
     189    -moz-border-radius: 4px;
     190    -khtml-border-radius: 4px;
     191    -webkit-border-radius: 4px;
     192    border-radius: 4px;
    192193}
    193194
    … …  
    205206    border: 1px solid rgb(223, 223, 223);
    206207    background-color: rgb(255, 255, 255);
    207     -webkit-border-radius: 3px;
     208    -moz-border-radius: 4px;
     209    -khtml-border-radius: 4px;
     210    -webkit-border-radius: 4px;
     211    border-radius: 4px;
    208212    padding: 1em 1em 1em 1em;
    209213}
    210214
    211215legend {
    212     font-size: 0.75em;
     216    font-size: 0.9em;
    213217    font-weight: bold;
    214218    padding-bottom: 0.5em;
    215     font-style: italic;
    216219}
    217220
    … …  
    222225    color: rgb(34, 34, 34);
    223226    cursor: pointer;
     227    clear: both;
     228}
     229
     230label span {
     231    display: block;
     232    margin-bottom: 5px;
    224233}
    225234
    … …  
    228237    background-color: rgb(255, 235, 232);
    229238    padding: 0.6em;
    230     -khtml-border-radius: 3px;
    231     -webkit-border-radius: 3px;
    232     border-radius: 3px;
     239    -moz-border-radius: 4px;
     240    -khtml-border-radius: 4px;
     241    -webkit-border-radius: 4px;
     242    border-radius: 4px;
     243}
     244
     245label.forward {
     246    clear: none;
     247}
     248
     249label a.note-toggle {
     250    background-color: rgb(223, 223, 223);
     251    color: rgb(255, 255, 255);
     252    display: block;
     253    text-align: center;
     254    float: left;
     255    font-weight: bold;
     256    font-size: 1.2em;
     257    padding-top: 1px;
     258    padding-left: 1px;
     259    width: 18px;
     260    height: 18px;
     261    line-height: 18px;
     262    margin-left: 6px;
     263    margin-top: 4px;
     264    -moz-border-radius: 9px;
     265    -khtml-border-radius: 9px;
     266    -webkit-border-radius: 9px;
     267    border-radius: 9px;
     268}
     269
     270label a.note-toggle:hover {
     271    text-decoration: none;
     272    background-color: rgb(50, 140, 0);
     273}
     274
     275label.has-note.for-textarea a.note-toggle {
     276    margin-top: -2px;
     277    margin-left: 6px;
     278}
     279
     280label.has-note.for-select a.note-toggle {
     281    margin-top: 3px;
     282    margin-left: 4px;
     283}
     284
     285label.has-note.for-toggle a.note-toggle {
     286    margin-top: -2px;
     287    margin-left: 8px;
     288}
     289
     290label.for-textarea span,
     291label.for-toggle span {
     292    float: left;
    233293}
    234294
    235295label span.error {
     296    color: rgb(204, 0, 0);
    236297    display: block;
    237298    margin: 0.4em 0.4em 0.4em 3em;
    … …  
    255316    margin: 0 0 0 2.5em;
    256317    color: rgb(102, 102, 102);
    257     border-left: 1px solid rgb(223, 223, 223);
     318    border-left: 1px solid rgb(50, 140, 0);
    258319    padding: 0.6em;
    259320    font-size: 0.9em;
    260321    font-style: italic;
     322    clear: both;
    261323}
    262324
    … …  
    268330    width: 400px;
    269331    display: block;
    270     margin-top: 0.4em;
     332    float: left;
     333    xmargin-top: 0.4em;
     334    -moz-border-radius: 4px;
     335    -khtml-border-radius: 4px;
     336    -webkit-border-radius: 4px;
     337    border-radius: 4px;
     338    clear: both;
    271339}
    272340
    … …  
    277345    border: 1px solid rgb(187, 187, 187);
    278346    display: block;
    279     margin-top: 0.4em;
     347    float: left;
    280348}
    281349
    … …  
    289357    height: 38em;
    290358    display: block;
    291     margin-top: 0.4em;
     359    -moz-border-radius: 4px;
     360    -khtml-border-radius: 4px;
     361    -webkit-border-radius: 4px;
     362    border-radius: 4px;
     363    clear: both;
    292364}
    293365
    … …  
    312384input.button {
    313385    background: url('images/white-grad.png') repeat-x scroll 0% 0% rgb(242, 242, 242);
     386    -moz-border-radius: 15px;
     387    -khtml-border-radius: 15px;
    314388    -webkit-border-radius: 15px;
     389    border-radius: 15px;
    315390    border: 1px solid rgb(187, 187, 187);
    316391    color: rgb(70, 70, 70);
    … …  
    336411}
    337412
     413label#label-toggle_4 span {
     414    margin-bottom: 0.4em;
     415}
     416
    338417label#label-error_log,
    339418label#label-installation_log {
    … …  
    341420    margin-bottom: 0;
    342421}
     422
     423div.clear {
     424    clear: both;
     425    height: 1px;
     426    line-height: 1px;
     427    font-size: 1px;
     428    margin: 0;
     429    padding: 0;
     430}

  • trunk/bb-admin/install.php

    r2090 r2107  
    1616?>
    1717        <script type="text/javascript" charset="utf-8">
     18            function toggleNote(target) {
     19                var targetObj = document.getElementById(target);
     20                if (targetObj.style.display == 'none') {
     21                    targetObj.style.display = 'block';
     22                } else {
     23                    targetObj.style.display = 'none';
     24                }
     25            }
    1826            function toggleBlock(toggleObj, target) {
    1927                var targetObj = document.getElementById(target);
Note: See TracChangeset for help on using the changeset viewer.