Elastic: Use pretty selects

plugins/calendar/calendar.php

@@ -322,7 +322,7 @@ class calendar extends rcube_plugin
     $this->rc->output->set_env('identities-selector', $this->ui->identity_select(array(
         'id'         => 'edit-identities-list',
         'aria-label' => $this->gettext('roleorganizer'),
-        'class'      => 'form-control',
+        'class'      => 'custom-select',
     )));
 
     $view = rcube_utils::get_input_value('view', rcube_utils::INPUT_GPC);
@@ -2621,7 +2621,7 @@ class calendar extends rcube_plugin
       && ($response['action'] == 'rsvp' || $response['action'] == 'import')
     ) {
       $calendars = $this->driver->list_calendars($mode);
-      $calendar_select = new html_select(array('name' => 'calendar', 'id' => 'itip-saveto', 'is_escaped' => true, 'class' => 'form-control'));
+      $calendar_select = new html_select(array('name' => 'calendar', 'id' => 'itip-saveto', 'is_escaped' => true, 'class' => 'custom-select'));
       $calendar_select->add('--', '');
       $numcals = 0;
       foreach ($calendars as $calendar) {

plugins/calendar/calendar_ui.js

@@ -1868,7 +1868,7 @@ function rcube_calendar_ui(settings)
       if (organizer && !readonly)
         dispname = rcmail.env['identities-selector'];
 
-      var select = '<select class="edit-attendee-role form-control"'
+      var select = '<select class="edit-attendee-role custom-select"'
         + (organizer || readonly ? ' disabled="true"' : '')
         + ' aria-label="' + rcmail.gettext('role','calendar') + '">';
       for (var r in opts)
@@ -1939,8 +1939,10 @@ function rcube_calendar_ui(settings)
       }
 
       // Make Elastic checkboxes pretty
-      if (window.UI && UI.pretty_checkbox)
+      if (window.UI && UI.pretty_checkbox) {
         $(tr).find('input[type=checkbox]').each(function() { UI.pretty_checkbox(this); });
+        $(tr).find('select').each(function() { UI.pretty_select(this); });
+      }
 
       event_attendees.push(data);
       return true;
@@ -3902,14 +3904,14 @@ function rcube_calendar_ui(settings)
           ignore_click = true;
           var d = minical.datepicker('getDate'); //parse_datetime('0:0', dateText);
           fc.fullCalendar('gotoDate', d).fullCalendar('select', d, d, true);
-          setTimeout(function() { $('select', minical).addClass('form-control'); }, 25);
+          setTimeout(function() { $('select', minical).addClass('custom-select'); }, 25);
         },
         onChangeMonthYear: function(year, month, inst) {
           minical.data('year', year).data('month', month);
-          setTimeout(function() { $('select', minical).addClass('form-control'); }, 25);
+          setTimeout(function() { $('select', minical).addClass('custom-select'); }, 25);
         },
         beforeShowDay: function(date) {
-          setTimeout(function() { $('select', minical).addClass('form-control'); }, 25);
+          setTimeout(function() { $('select', minical).addClass('custom-select'); }, 25);
           var view = fc.fullCalendar('getView');
           var active = view.visStart && date.getTime() >= view.visStart.getTime() && date.getTime() < view.visEnd.getTime();
           return [ true, (active ? 'ui-datepicker-activerange ui-datepicker-active-' + view.name : ''), ''];
@@ -3937,7 +3939,7 @@ function rcube_calendar_ui(settings)
               date = new Date(base_date.getTime() - day_off * DAY_MS + wdiff * 7 * DAY_MS);
             fc.fullCalendar('gotoDate', date).fullCalendar('setDate', date).fullCalendar('changeView', 'agendaWeek');
             minical.datepicker('setDate', date);
-            setTimeout(function() { $('select', minical).addClass('form-control'); }, 25);
+            setTimeout(function() { $('select', minical).addClass('custom-select'); }, 25);
           }
         });
 

plugins/calendar/lib/calendar_ui.php

@@ -343,7 +343,7 @@ class calendar_ui
     $attrib += array('id' => 'agendaoptions');
     $attrib['style'] .= 'display:none';
 
-    $select_range = new html_select(array('name' => 'listrange', 'id' => 'agenda-listrange', 'class' => 'form-control'));
+    $select_range = new html_select(array('name' => 'listrange', 'id' => 'agenda-listrange', 'class' => 'custom-select'));
     $select_range->add(1 . ' ' . preg_replace('/\(.+\)/', '', $this->cal->lib->gettext('days')), $days);
     foreach (array(2,5,7,14,30,60,90,180,365) as $days)
       $select_range->add($days . ' ' . preg_replace('/\(|\)/', '', $this->cal->lib->gettext('days')), $days);
@@ -354,7 +354,7 @@ class calendar_ui
         . $select_range->show($this->rc->config->get('calendar_agenda_range', $this->cal->defaults['calendar_agenda_range']))
     );
 
-    $select_sections = new html_select(array('name' => 'listsections', 'id' => 'agenda-listsections', 'class' => 'form-control'));
+    $select_sections = new html_select(array('name' => 'listsections', 'id' => 'agenda-listsections', 'class' => 'custom-select'));
     $select_sections->add('---', '');
     foreach (array('day' => 'libcalendaring.days', 'week' => 'libcalendaring.weeks', 'month' => 'libcalendaring.months', 'smart' => 'calendar.smartsections') as $val => $label)
       $select_sections->add(preg_replace('/\(|\)/', '', ucfirst($this->rc->gettext($label))), $val);
@@ -592,9 +592,9 @@ class calendar_ui
 
     $html = html::div('form-section form-group row',
       html::label(array('for' => 'event-export-calendar', 'class' => 'col-sm-4 col-form-label'), $this->cal->gettext('calendar'))
-        . html::div('col-sm-8', $this->calendar_select(array('name' => 'calendar', 'id' => 'event-export-calendar', 'class' => 'form-control'))));
+        . html::div('col-sm-8', $this->calendar_select(array('name' => 'calendar', 'id' => 'event-export-calendar', 'class' => 'custom-select'))));
 
-    $select = new html_select(array('name' => 'range', 'id' => 'event-export-range', 'class' => 'form-control'));
+    $select = new html_select(array('name' => 'range', 'id' => 'event-export-range', 'class' => 'custom-select'));
     $select->add(array(
         $this->cal->gettext('all'),
         $this->cal->gettext('onemonthback'),