add bootstrap-select

lib/views/_form.html

@@ -48,7 +48,7 @@
       {% if forceGrant %}
       <input type="hidden" name="pageForm[grant]" value="{{ forceGrant }}">
       {% else %}
-      <select name="pageForm[grant]" class="form-control input-sm m-r-5">
+      <select name="pageForm[grant]" class="m-r-5 selectpicker btn-group-sm">
         {% for grantId, grantLabel in consts.pageGrants %}
         <option value="{{ grantId }}" {% if pageForm.grant|default(page.grant) == grantId %}selected{% endif %}>{{ t(grantLabel) }}</option>
         {% endfor %}

lib/views/admin/external-accounts.html

@@ -48,7 +48,7 @@
 
       <h2>外部アカウント一覧</h2>
 
-      <table class="table table-hover table-striped table-bordered table-user-list">
+      <table class="table table-bordered table-user-list">
         <thead>
           <tr>
             <th width="120px">Authentication Provider</th>

lib/views/admin/security.html

@@ -61,7 +61,7 @@
           <div class="form-group">
             <label for="settingForm[security:restrictGuestMode]" class="col-xs-3 control-label">{{ t('Guest users access') }}</label>
             <div class="col-xs-6">
-              <select class="form-control" name="settingForm[security:restrictGuestMode]" value="{{ settingForm['security:restrictGuestMode'] }}">
+              <select class="form-control selectpicker" name="settingForm[security:restrictGuestMode]" value="{{ settingForm['security:restrictGuestMode'] }}">
                 {% for modeValue, modeLabel in consts.restrictGuestMode %}
                 <option value="{{ modeValue }}" {% if modeValue == settingForm['security:restrictGuestMode'] %}selected{% endif %} >{{ modeLabel }}</option>
                 {% endfor %}
@@ -72,7 +72,7 @@
           <div class="form-group">
             <label for="settingForm[security:registrationMode]" class="col-xs-3 control-label">{{ t('Register limitation') }}</label>
             <div class="col-xs-6">
-              <select class="form-control" name="settingForm[security:registrationMode]" value="{{ settingForm['security:registrationMode'] }}">
+              <select class="form-control selectpicker" name="settingForm[security:registrationMode]" value="{{ settingForm['security:registrationMode'] }}">
                 {% for modeValue, modeLabel in consts.registrationMode %}
                 <option value="{{ modeValue }}" {% if modeValue == settingForm['security:registrationMode'] %}selected{% endif %} >{{ modeLabel }}</option>
                 {% endfor %}

package.json

@@ -60,6 +60,7 @@
     "basic-auth-connect": "~1.0.0",
     "body-parser": "^1.18.2",
     "bootstrap-sass": "~3.3.6",
+    "bootstrap-select": "^1.12.4",
     "check-node-version": "^3.1.1",
     "codemirror": "^5.33.0",
     "connect-flash": "~0.1.1",

resource/js/components/PageEditor/OptionsSelector.js

@@ -81,10 +81,12 @@ export default class OptionsSelector extends React.Component {
       return <option key={theme} value={theme}>{theme}</option>;
     });
 
+    const bsClassName = 'form-control-dummy'; // set form-control* to shrink width
+
     return (
       <FormGroup controlId="formControlsSelect">
         <ControlLabel>Theme:</ControlLabel>
-        <FormControl componentClass="select" placeholder="select" className="input-sm"
+        <FormControl componentClass="select" placeholder="select" bgSize="sm" bsClass={bsClassName} className="btn-group-sm selectpicker"
             onChange={this.onChangeTheme}
             inputRef={ el => this.themeSelectorInputEl=el }>
 

resource/js/legacy/crowi-admin.js

@@ -1,3 +1,5 @@
+require('bootstrap-select');
+
 $(function() {
   var UpdatePost = {};
 

resource/js/legacy/crowi-form.js

@@ -1,6 +1,7 @@
   var pageId = $('#content-main').data('page-id');
   var pagePath= $('#content-main').data('path');
 
+  require('bootstrap-select');
   require('bootstrap-sass');
 
   // show/hide

resource/styles/scss/_vendor.scss

@@ -10,3 +10,6 @@ $bootstrap-sass-asset-helper: true;
 
 // import metismenu styles
 @import '~metismenu/dist/metisMenu';
+
+// import bootstrap-select styles
+@import '~bootstrap-select/sass/bootstrap-select';

resource/styles/scss/theme/_override-agileadmin.scss

@@ -56,7 +56,8 @@
 .input-sm,
 .input-group-sm > .form-control,
 .input-group-addon.input-sm,
-.input-group-sm > .input-group-addon {
+.input-group-sm > .input-group-addon,
+.btn-sm, .btn-group-sm > .btn {
   border-radius: $radius;
 }
 

yarn.lock

@@ -1130,6 +1130,12 @@ bootstrap-sass@~3.3.6:
   version "3.3.7"
   resolved "https://registry.yarnpkg.com/bootstrap-sass/-/bootstrap-sass-3.3.7.tgz#6596c7ab40f6637393323ab0bc80d064fc630498"
 
+bootstrap-select@^1.12.4:
+  version "1.12.4"
+  resolved "https://registry.yarnpkg.com/bootstrap-select/-/bootstrap-select-1.12.4.tgz#7f15d3c0ce978868d9c09c70f96624f55fa02ee1"
+  dependencies:
+    jquery ">=1.8"
+
 brace-expansion@^1.1.7:
   version "1.1.8"
   resolved "https://registry.yarnpkg.com/brace-expansion/-/brace-expansion-1.1.8.tgz#c07b211c7c952ec1f8efd51a77ef0d1d3990a292"
@@ -3566,7 +3572,7 @@ jquery.cookie@~1.4.1:
   version "1.4.1"
   resolved "https://registry.yarnpkg.com/jquery.cookie/-/jquery.cookie-1.4.1.tgz#d63dce209eab691fe63316db08ca9e47e0f9385b"
 
-"jquery@>= 1.7":
+"jquery@>= 1.7", jquery@>=1.8:
   version "3.3.1"
   resolved "https://registry.yarnpkg.com/jquery/-/jquery-3.3.1.tgz#958ce29e81c9790f31be7792df5d4d95fc57fbca"