Skip to:
Content

bbPress.org

Changeset 6834


Ignore:
Timestamp:
07/05/2018 06:03:38 PM (8 years ago)
Author:
johnjamesjacoby
Message:

Converter: UX improvements to import experience:

  • Move Monitor to upper-right
  • Move actions into Monitor
  • Make database fields read-only when importer is running
  • Add a spinner

See #3207 for inspiration.

Location:
trunk/src
Files:
4 edited

Legend:

Unmodified
Added
Removed

  • trunk/src/bbpress.php

    r6817 r6834  
    204204        /** Versions **********************************************************/
    205205
    206         $this->version    = '2.6-rc-6810';
     206        $this->version    = '2.6-rc-6831';
    207207        $this->db_version = '262';
    208208

  • trunk/src/includes/admin/assets/css/admin.css

    r6817 r6834  
    436436/* Converter */
    437437
     438.bbp-converter-settings-wrap {
     439    float: left;
     440    width: 55%;
     441}
     442
     443#poststuff.bbp-converter-monitor-wrap {
     444    float: right;
     445    width: 43%;
     446    margin-left: 2%;
     447    min-width: 200px;
     448}
     449
    438450#bbp-converter-monitor h2 {
    439451    position: relative;
    … …  
    442454#bbp-converter-monitor .inside {
    443455    margin-bottom: 0;
     456    border-bottom: 1px solid #e5e5e5;
     457}
     458
     459#bbp-converter-monitor div.actions {
     460    padding: 10px;
     461    background: #fafafa;
     462    clear: both;
     463}
     464
     465#bbp-converter-spinner {
     466    margin: 4px 0;
    444467}
    445468
    … …  
    541564button.bbp-db-pass-toggle {
    542565    border: none;
    543     background: #fff;
     566    background: transparent;
    544567    position: absolute;
    545568    right: 3px;
    … …  
    572595    }
    573596
     597    #poststuff.bbp-converter-monitor-wrap,
     598    .bbp-converter-settings-wrap {
     599        float: none;
     600        width: 100%;
     601        margin: 20px 0;
     602    }
     603
    574604    button.bbp-db-pass-toggle {
    575605        height: 35px;

  • trunk/src/includes/admin/assets/js/converter.js

    r6690 r6834  
    1010        restart  = $( '#_bbp_converter_restart' ),
    1111        status   = $( '#bbp-converter-status'   ),
     12        spinner  = $( '#bbp-converter-spinner'  ),
    1213        settings = $( '#bbp-converter-settings' ),
    1314        password = $( '#_bbp_converter_db_pass' ),
    1415        toggle   = $( '.bbp-db-pass-toggle'     ),
    1516        step_p   = $( '#bbp-converter-step-percentage'  ),
    16         total_p  = $( '#bbp-converter-total-percentage' );
     17        total_p  = $( '#bbp-converter-total-percentage' ),
     18        fields   = settings.find( 'table:first-of-type input, table:first-of-type select' );
    1719
    1820    /**
    … …  
    218220
    219221        message.addClass( 'started' );
     222
    220223        start.hide();
    221224        stop.show();
     225console.log( fields );
     226        spinner.css( 'visibility', 'visible' );
     227        fields.prop( 'readonly', true );
    222228
    223229        bbp_converter_post();
    … …  
    257263        start.show();
    258264        stop.hide();
     265
     266        spinner.css( 'visibility', 'hidden' );
     267        fields.prop( 'readonly', false );
    259268    }
    260269

  • trunk/src/includes/admin/settings.php

    r6780 r6834  
    493493                'callback'          => 'bbp_converter_setting_callback_platform',
    494494                'sanitize_callback' => 'sanitize_text_field',
    495                 'args'              => array()
     495                'args'              => array( 'label_for'=> '_bbp_converter_platform' )
    496496            ),
    497497
    … …  
    501501                'callback'          => 'bbp_converter_setting_callback_dbserver',
    502502                'sanitize_callback' => 'sanitize_text_field',
    503                 'args'              => array()
     503                'args'              => array( 'label_for'=> '_bbp_converter_db_server' )
    504504            ),
    505505
    … …  
    509509                'callback'          => 'bbp_converter_setting_callback_dbport',
    510510                'sanitize_callback' => 'intval',
    511                 'args'              => array()
     511                'args'              => array( 'label_for'=> '_bbp_converter_db_port' )
    512512            ),
    513513
    … …  
    517517                'callback'          => 'bbp_converter_setting_callback_dbname',
    518518                'sanitize_callback' => 'sanitize_text_field',
    519                 'args'              => array()
     519                'args'              => array( 'label_for'=> '_bbp_converter_db_name' )
    520520            ),
    521521
    … …  
    525525                'callback'          => 'bbp_converter_setting_callback_dbuser',
    526526                'sanitize_callback' => 'sanitize_text_field',
    527                 'args'              => array()
     527                'args'              => array( 'label_for'=> '_bbp_converter_db_user' )
    528528            ),
    529529
    … …  
    533533                'callback'          => 'bbp_converter_setting_callback_dbpass',
    534534                'sanitize_callback' => 'sanitize_text_field',
    535                 'args'              => array()
     535                'args'              => array( 'label_for'=> '_bbp_converter_db_pass' )
    536536            ),
    537537
    … …  
    541541                'callback'          => 'bbp_converter_setting_callback_dbprefix',
    542542                'sanitize_callback' => 'sanitize_text_field',
    543                 'args'              => array()
     543                'args'              => array( 'label_for'=> '_bbp_converter_db_prefix' )
    544544            )
    545545        ),
    … …  
    553553                'callback'          => 'bbp_converter_setting_callback_rows',
    554554                'sanitize_callback' => 'intval',
    555                 'args'              => array()
     555                'args'              => array( 'label_for'=> '_bbp_converter_rows' )
    556556            ),
    557557
    … …  
    561561                'callback'          => 'bbp_converter_setting_callback_delay_time',
    562562                'sanitize_callback' => 'intval',
    563                 'args'              => array()
     563                'args'              => array( 'label_for'=> '_bbp_converter_delay_time' )
    564564            ),
    565565
    … …  
    569569                'callback'          => 'bbp_converter_setting_callback_convert_users',
    570570                'sanitize_callback' => 'intval',
    571                 'args'              => array()
     571                'args'              => array( 'label_for'=> '_bbp_converter_convert_users' )
    572572            ),
    573573
    … …  
    577577                'callback'          => 'bbp_converter_setting_callback_halt',
    578578                'sanitize_callback' => 'intval',
    579                 'args'              => array()
     579                'args'              => array( 'label_for'=> '_bbp_converter_halt' )
    580580            ),
    581581
    … …  
    585585                'callback'          => 'bbp_converter_setting_callback_restart',
    586586                'sanitize_callback' => 'intval',
    587                 'args'              => array()
     587                'args'              => array( 'label_for'=> '_bbp_converter_restart' )
    588588            ),
    589589
    … …  
    593593                'callback'          => 'bbp_converter_setting_callback_clean',
    594594                'sanitize_callback' => 'intval',
    595                 'args'              => array()
     595                'args'              => array( 'label_for'=> '_bbp_converter_clean' )
    596596            )
    597597        )
    … …  
    15231523?>
    15241524
    1525     <p><?php _e( 'Information about your previous forums database so that they can be converted. <strong>Backup your database before proceeding.</strong>', 'bbpress' ); ?></p>
     1525    <p><?php _e( 'Information about the database for your previous forums so they can be converted.', 'bbpress' ); ?></p>
    15261526
    15271527<?php
    … …  
    15461546
    15471547    <select name="_bbp_converter_platform" id="_bbp_converter_platform"><?php echo $options ?></select>
    1548     <label for="_bbp_converter_platform"><?php esc_html_e( 'is the previous forum software', 'bbpress' ); ?></label>
     1548    <p class="description"><?php esc_html_e( 'The previous forum software', 'bbpress' ); ?></p>
    15491549
    15501550<?php
    … …  
    15601560
    15611561    <input name="_bbp_converter_db_server" id="_bbp_converter_db_server" type="text" class="code" value="<?php bbp_form_option( '_bbp_converter_db_server', 'localhost' ); ?>" <?php bbp_maybe_admin_setting_disabled( '_bbp_converter_db_server' ); ?> />
    1562     <label for="_bbp_converter_db_server"><?php esc_html_e( 'Use default "localhost" if on the same server, otherwise IP or hostname', 'bbpress' ); ?></label>
     1562    <p class="description"><?php printf( esc_html__( 'Use default %s if same server, or IP or hostname', 'bbpress' ), '<code>localhost</code>' ); ?></p>
    15631563
    15641564<?php
    … …  
    15741574
    15751575    <input name="_bbp_converter_db_port" id="_bbp_converter_db_port" type="text" class="code" value="<?php bbp_form_option( '_bbp_converter_db_port', '3306' ); ?>" <?php bbp_maybe_admin_setting_disabled( '_bbp_converter_db_port' ); ?> />
    1576     <label for="_bbp_converter_db_port"><?php esc_html_e( 'Use default "3306" if unsure', 'bbpress' ); ?></label>
     1576    <p class="description"><?php printf( esc_html__( 'Use default %s if unsure', 'bbpress' ), '<code>3306</code>' ); ?></p>
    15771577
    15781578<?php
    … …  
    15881588
    15891589    <input name="_bbp_converter_db_user" id="_bbp_converter_db_user" type="text" class="code" value="<?php bbp_form_option( '_bbp_converter_db_user' ); ?>" <?php bbp_maybe_admin_setting_disabled( '_bbp_converter_db_user' ); ?> />
    1590     <label for="_bbp_converter_db_user"><?php esc_html_e( 'User to access the database', 'bbpress' ); ?></label>
     1590    <p class="description"><?php esc_html_e( 'User to access the database', 'bbpress' ); ?></p>
    15911591
    15921592<?php
    … …  
    16081608        </button>
    16091609    </span>
    1610     <label for="_bbp_converter_db_pass"><?php esc_html_e( 'Password for the above database user', 'bbpress' ); ?></label>
     1610    <p class="description"><?php esc_html_e( 'Password for the above database user', 'bbpress' ); ?></p>
    16111611
    16121612<?php
    … …  
    16221622
    16231623    <input name="_bbp_converter_db_name" id="_bbp_converter_db_name" type="text" class="code" value="<?php bbp_form_option( '_bbp_converter_db_name' ); ?>" <?php bbp_maybe_admin_setting_disabled( '_bbp_converter_db_name' ); ?> />
    1624     <label for="_bbp_converter_db_name"><?php esc_html_e( 'Name of the database with your old forum data', 'bbpress' ); ?></label>
     1624    <p class="description"><?php esc_html_e( 'Name of the database with your old forum data', 'bbpress' ); ?></p>
    16251625
    16261626<?php
    … …  
    16491649
    16501650    <input name="_bbp_converter_db_prefix" id="_bbp_converter_db_prefix" type="text" class="code" value="<?php bbp_form_option( '_bbp_converter_db_prefix' ); ?>" <?php bbp_maybe_admin_setting_disabled( '_bbp_converter_db_prefix' ); ?> />
    1651     <label for="_bbp_converter_db_prefix"><?php esc_html_e( '(If converting from BuddyPress Forums, use "wp_bb_" or your custom prefix)', 'bbpress' ); ?></label>
     1651    <p class="description"><?php printf( esc_html__( 'Use %s if converting from BuddyPress Legacy', 'bbpress' ), '<code>wp_bb_</code>' ); ?></p>
    16521652
    16531653<?php
    … …  
    17781778        <h2 class="nav-tab-wrapper"><?php bbp_tools_admin_tabs( esc_html__( 'Import Forums', 'bbpress' ) ); ?></h2>
    17791779
    1780         <form action="#" method="post" id="bbp-converter-settings"><?php
    1781 
    1782             // Fields
    1783             settings_fields( 'converter' );
    1784 
    1785             // Sections
    1786             do_settings_sections( 'converter' );
    1787 
    1788             ?>
    1789 
    1790             <p class="submit">
    1791                 <input type="button" name="submit" class="button-primary" id="bbp-converter-start" value="<?php echo esc_attr( $start_text ); ?>" />
    1792                 <input type="button" name="submit" class="button-primary" id="bbp-converter-stop" value="<?php esc_attr_e( 'Pause', 'bbpress' ); ?>" />
    1793             </p>
    1794         </form>
    1795 
    1796         <div id="poststuff">
    1797             <div id="post-body" class="metabox-holder columns-1">
    1798                 <div id="postbox-container-1" class="postbox-container">
    1799                     <div id="normal-sortables" class="meta-box-sortables ui-sortable">
    1800                         <div id="bbp-converter-monitor" class="postbox">
    1801                             <button type="button" class="handlediv" aria-expanded="true">
    1802                                 <span class="screen-reader-text"><?php esc_html_e( 'Toggle panel: Import Status', 'bbpress' ); ?></span>
    1803                                 <span class="toggle-indicator" aria-hidden="true"></span>
    1804                             </button>
    1805                             <h2 class="hndle ui-sortable-handle">
    1806                                 <span><?php esc_html_e( 'Import Monitor', 'bbpress' ); ?></span>
    1807                                 <span id="bbp-converter-status"><?php echo esc_html( $status_text ); ?></span>
    1808                                 <span id="bbp-converter-step-percentage" class="bbp-progress-bar"></span>
    1809                                 <span id="bbp-converter-total-percentage" class="bbp-progress-bar"></span>
    1810                             </h2>
    1811                             <div class="inside">
    1812                                 <div id="bbp-converter-message" class="bbp-converter-log">
    1813                                     <p><?php echo esc_html( $progress_text ); ?></p>
     1780        <div class="bbp-converter-wrap">
     1781            <div id="poststuff" class="bbp-converter-monitor-wrap">
     1782                <div id="post-body" class="metabox-holder columns-1">
     1783                    <div id="postbox-container-1" class="postbox-container">
     1784                        <div id="normal-sortables" class="meta-box-sortables ui-sortable">
     1785                            <div id="bbp-converter-monitor" class="postbox">
     1786                                <button type="button" class="handlediv" aria-expanded="true">
     1787                                    <span class="screen-reader-text"><?php esc_html_e( 'Toggle panel: Import Status', 'bbpress' ); ?></span>
     1788                                    <span class="toggle-indicator" aria-hidden="true"></span>
     1789                                </button>
     1790                                <h2 class="hndle ui-sortable-handle">
     1791                                    <span><?php esc_html_e( 'Import Monitor', 'bbpress' ); ?></span>
     1792                                    <span id="bbp-converter-status"><?php echo esc_html( $status_text ); ?></span>
     1793                                    <span id="bbp-converter-step-percentage" class="bbp-progress-bar"></span>
     1794                                    <span id="bbp-converter-total-percentage" class="bbp-progress-bar"></span>
     1795                                </h2>
     1796                                <div class="inside">
     1797                                    <div id="bbp-converter-message" class="bbp-converter-log">
     1798                                        <p><?php echo esc_html( $progress_text ); ?></p>
     1799                                    </div>
     1800                                </div>
     1801                                <div class="actions">
     1802                                    <input type="button" name="submit" class="button-primary" id="bbp-converter-start" value="<?php echo esc_attr( $start_text ); ?>" />
     1803                                    <input type="button" name="submit" class="button-primary" id="bbp-converter-stop" value="<?php esc_attr_e( 'Pause', 'bbpress' ); ?>" />
     1804                                    <span class="spinner" id="bbp-converter-spinner"></span>
    18141805                                </div>
    18151806                            </div>
    … …  
    18181809                </div>
    18191810            </div>
     1811
     1812            <form action="#" method="post" id="bbp-converter-settings" class="bbp-converter-settings-wrap"><?php
     1813
     1814                // Fields
     1815                settings_fields( 'converter' );
     1816
     1817                // Sections
     1818                do_settings_sections( 'converter' );
     1819
     1820            ?></form>
    18201821        </div>
    18211822    </div>
Note: See TracChangeset for help on using the changeset viewer.