WordPress.org

Making WordPress.org

Changeset 7267


Ignore:
Timestamp:
06/05/2018 06:27:30 PM (13 months ago)
Author:
vedjain
Message:

WordCamp-Payments: Add select2 to most select fields for better UX

In budget-tools.js, there was also an undetachted even handler, which was causing rendering of select box multiple times. That is also fixed in this commit. This is mostly a UX change.

Fixes #3241
Props vedanshu

Location:
sites/trunk/wordcamp.org/public_html/wp-content/plugins/wordcamp-payments
Files:
11 edited

Legend:

Unmodified
Added
Removed
  • sites/trunk/wordcamp.org/public_html/wp-content/plugins/wordcamp-payments/css/wordcamp-budgets.css

    r3859 r7267  
    5353    margin-left: 1em;
    5454    margin-bottom: 1em;
     55}
     56
     57.wcb-form li > .select2-container {
     58    margin-left: 1em;
     59    margin-bottom: 1em;
     60}
     61
     62.wcb-budget-container .select2-selection {
     63    border: none;
     64}
     65
     66.select2-currency-dropdown .select2-results {
     67    border-bottom: 1px solid #aaa;
    5568}
    5669
  • sites/trunk/wordcamp.org/public_html/wp-content/plugins/wordcamp-payments/includes/budget-tool.php

    r6067 r7267  
    8787    }
    8888
    89     public static function enqueue_scripts() {
    90         $screen = get_current_screen();
    91         if ( $screen->id == 'toplevel_page_wordcamp-budget' ) {
    92             wp_enqueue_script( 'wcb-budget-tool',
    93                 plugins_url( 'javascript/budget-tool.js', __DIR__ ),
    94                 array( 'backbone', 'jquery', 'jquery-ui-sortable', 'heartbeat', 'underscore' ), 3 , true );
    95         }
    96     }
     89    public static function enqueue_scripts() {
     90        $screen = get_current_screen();
     91
     92        wp_enqueue_script( 'select2' );
     93        wp_enqueue_style( 'select2' );
     94
     95        if ( $screen->id == 'toplevel_page_wordcamp-budget' ) {
     96            wp_enqueue_script( 'wcb-budget-tool',
     97                plugins_url( 'javascript/budget-tool.js', __DIR__ ),
     98                array( 'backbone', 'jquery', 'jquery-ui-sortable', 'heartbeat', 'underscore', 'select2' ), 3 , true );
     99        }
     100    }
    97101
    98102    private static function _get_budget() {
  • sites/trunk/wordcamp.org/public_html/wp-content/plugins/wordcamp-payments/includes/wordcamp-budgets.php

    r6717 r7267  
    665665    public static function get_currencies() {
    666666        $currencies = array (
    667             'EUR' => 'European Zone Euro',
    668             'USD' => 'United States Dollar',
    669 
    670             '' => '',
    671 
    672667            'AFN' => 'Afghan Afghani',
    673668            'ALL' => 'Albanian Lek',
     
    722717            'ERN' => 'Eritrean Nakfa',
    723718            'ETB' => 'Ethiopian Birr',
     719            'EUR' => 'European Zone Euro',
    724720            'FKP' => 'Falkland Islands Pound',
    725721            'FJD' => 'Fiji Dollar',
     
    822818            'AED' => 'United Arab Emirates Dirham',
    823819            'GBP' => 'United Kingdom Pound Sterling',
     820            'USD' => 'United States Dollar',
    824821            'UZS' => 'Uzbekistan Sum',
    825822            'VUV' => 'Vanuatu Vatu',
  • sites/trunk/wordcamp.org/public_html/wp-content/plugins/wordcamp-payments/javascript/budget-tool.js

    r4899 r7267  
    167167
    168168        initialize: function() {
    169             this.model.bind('change', this.render, this);
    170169            this.model.bind('destroy', this.remove, this);
    171170        },
     
    229228            this.$el.toggleClass('is-new', this.model.get('new'));
    230229            this.$el.data('wcb-cid', this.model.cid);
     230
     231            if( data.name === 'currency' && $.fn.hasOwnProperty( 'select2' ) ){
     232                var currSelect2Box = this.$el.find( 'select' ).select2( { width: '100%' } );
     233                currSelect2Box.data( 'select2' ).$dropdown.addClass( 'select2-currency-dropdown' );
     234            }
     235
    231236            return this;
    232237        },
     
    263268                    this.model.set('amount', amount || 0);
    264269                }
    265             }
     270                this.render.apply( this );
     271            }
    266272
    267273            this.clearSelection.apply(this);
    268             this.render.apply(this);
    269274            return false;
    270275        },
  • sites/trunk/wordcamp.org/public_html/wp-content/plugins/wordcamp-payments/javascript/payment-requests.js

    r2682 r7267  
    1111            try {
    1212                app.registerEventHandlers();
     13                wcb.setupSelect2( '#wcp_general_info select' );
     14                wcb.setupSelect2( '#vendor_country_iso3166' );
    1315                wcb.attachedFilesView = new wcb.AttachedFilesView( { el: $( '#row-files' ) } );
    1416                wcb.setupDatePicker( '#wcp_general_info' );
  • sites/trunk/wordcamp.org/public_html/wp-content/plugins/wordcamp-payments/javascript/reimbursement-requests.js

    r2715 r7267  
    2121                app.registerEventHandlers();
    2222                wcb.attachedFilesView = new wcb.AttachedFilesView( { el: $( '#wcbrr_general_information' ) } );
     23                wcb.setupSelect2( '#wcbrr_general_information select' );
     24                wcb.setupSelect2( '#wcbrr-expenses-container select' );
    2325            } catch ( exception ) {
    2426                wcb.log( exception );
  • sites/trunk/wordcamp.org/public_html/wp-content/plugins/wordcamp-payments/javascript/sponsor-invoices.js

    r3308 r7267  
    1111            try {
    1212                app.registerEventHandlers();
     13                wcb.setupSelect2( '#wcbsi_sponsor_invoice select' );
    1314                $( '#_wcbsi_sponsor_id' ).trigger( 'change' );  // Populate the initial sponsor information
    1415                $( '#wcbsi-sponsor-information' ).removeClass( 'loading-content' );
  • sites/trunk/wordcamp.org/public_html/wp-content/plugins/wordcamp-payments/javascript/wordcamp-budgets.js

    r3105 r7267  
    251251                console.log( 'WordCamp Budgets: ', error );
    252252            }
     253        },
     254
     255        /**
     256         * Setup select2 on select items.
     257         * @param {string} selector
     258         */
     259        setupSelect2 : function( selector ) {
     260            if ( ! $.fn.hasOwnProperty( 'select2' ) ) {
     261                return;
     262            }
     263
     264            $( selector ).select2();
    253265        }
    254266    };
  • sites/trunk/wordcamp.org/public_html/wp-content/plugins/wordcamp-payments/views/reimbursement-request/metabox-general-information.php

    r6067 r7267  
    4343                    <?php _e( '-- Select a Currency --', 'wordcamporg' ); ?>
    4444                </option>
    45                 <option value=""></option>
    4645
    4746                <?php foreach ( $available_currencies as $currency_key => $currency_name ) : ?>
  • sites/trunk/wordcamp.org/public_html/wp-content/plugins/wordcamp-payments/views/sponsor-invoice/metabox-general.php

    r6309 r7267  
    104104                <?php _e( '-- Select a Currency --', 'wordcamporg' ); ?>
    105105            </option>
    106             <option value=""></option>
    107106
    108107            <?php foreach ( $available_currencies as $currency_key => $currency_name ) : ?>
  • sites/trunk/wordcamp.org/public_html/wp-content/plugins/wordcamp-payments/views/sponsor-payment/main.php

    r7043 r7267  
    6262                    <select name="currency">
    6363                        <option value="" disabled selected><?php esc_html_e( 'Select a Currency', 'wordcamporg' ); ?></option>
    64                         <option value=""></option>
    6564
    6665                        <?php foreach ( $data['currencies'] as $currency_key => $currency_name ) : ?>
Note: See TracChangeset for help on using the changeset viewer.