fix: impl of toggle switch for admin pages

lib/views/admin/app.html

@@ -277,11 +277,11 @@
           <label for="settingForm[plugin:isEnabledPlugins]" class="col-xs-3 control-label">プラグインを読み込む</label>
           <div class="col-xs-6">
             <div class="btn-group btn-toggle" data-toggle="buttons">
-              <label class="btn {% if settingForm['plugin:isEnabledPlugins'] %}btn-primary active{% else %}btn-default{% endif %}">
+              <label class="btn btn-default {% if settingForm['plugin:isEnabledPlugins'] %}active{% endif %}" data-active-class="primary">
                 <input name="settingForm[plugin:isEnabledPlugins]" value="true" type="radio"
                     {% if true === settingForm['plugin:isEnabledPlugins'] %}checked{% endif %}> 有効
               </label>
-              <label class="btn {% if !settingForm['plugin:isEnabledPlugins'] %}btn-primary active{% else %}btn-default{% endif %}">
+              <label class="btn btn-default {% if !settingForm['plugin:isEnabledPlugins'] %}active{% endif %}" data-active-class="primary">
                 <input name="settingForm[plugin:isEnabledPlugins]" value="false" type="radio"
                     {% if !settingForm['plugin:isEnabledPlugins'] %}checked{% endif %}> 無効
               </label>
@@ -351,26 +351,6 @@
       });
     });
 
-    // Bootstrap 3 Toggle Switch Snippet
-    // http://www.bootply.com/92189
-    $('.btn-toggle').click(function() {
-      $(this).find('.btn').toggleClass('active');
-
-      if ($(this).find('.btn-primary').length>0) {
-        $(this).find('.btn').toggleClass('btn-primary');
-      }
-      if ($(this).find('.btn-danger').length>0) {
-        $(this).find('.btn').toggleClass('btn-danger');
-      }
-      if ($(this).find('.btn-success').length>0) {
-        $(this).find('.btn').toggleClass('btn-success');
-      }
-      if ($(this).find('.btn-info').length>0) {
-        $(this).find('.btn').toggleClass('btn-info');
-      }
-
-      $(this).find('.btn').toggleClass('btn-default');
-    });
   </script>
 
 </div>

lib/views/admin/customize.html

@@ -153,11 +153,11 @@
           <label for="settingForm[customize:isEnabledTimeline]" class="col-xs-3 control-label">タイムライン表示機能</label>
           <div class="col-xs-9">
             <div class="btn-group btn-toggle" data-toggle="buttons">
-              <label class="btn {% if settingForm['customize:isEnabledTimeline'] %}btn-primary active{% else %}btn-default{% endif %}">
+              <label class="btn btn-default {% if settingForm['customize:isEnabledTimeline'] %}active{% endif %}" data-active-class="primary">
                 <input name="settingForm[customize:isEnabledTimeline]" value="true" type="radio"
                     {% if true === settingForm['customize:isEnabledTimeline'] %}checked{% endif %}> 有効
               </label>
-              <label class="btn {% if !settingForm['customize:isEnabledTimeline'] %}btn-primary active{% else %}btn-default{% endif %}">
+              <label class="btn btn-default {% if !settingForm['customize:isEnabledTimeline'] %}active{% endif %}" data-active-class="primary">
                 <input name="settingForm[customize:isEnabledTimeline]" value="false" type="radio"
                     {% if !settingForm['customize:isEnabledTimeline'] %}checked{% endif %}> 無効
               </label>
@@ -290,26 +290,6 @@
       }
     });
 
-    // Bootstrap 3 Toggle Switch Snippet
-    // http://www.bootply.com/92189
-    $('.btn-toggle').click(function() {
-      $(this).find('.btn').toggleClass('active');
-
-      if ($(this).find('.btn-primary').length>0) {
-        $(this).find('.btn').toggleClass('btn-primary');
-      }
-      if ($(this).find('.btn-danger').length>0) {
-        $(this).find('.btn').toggleClass('btn-danger');
-      }
-      if ($(this).find('.btn-success').length>0) {
-        $(this).find('.btn').toggleClass('btn-success');
-      }
-      if ($(this).find('.btn-info').length>0) {
-        $(this).find('.btn').toggleClass('btn-info');
-      }
-
-      $(this).find('.btn').toggleClass('btn-default');
-    });
   </script>
 
 </div>

lib/views/admin/markdown.html

@@ -47,11 +47,11 @@
           </label>
           <div class="col-xs-5">
             <div class="btn-group btn-toggle" data-toggle="buttons">
-              <label class="btn {% if markdownSetting['markdown:isEnabledLinebreaks'] %}btn-primary active{% else %}btn-default{% endif %}">
+              <label class="btn btn-default {% if markdownSetting['markdown:isEnabledLinebreaks'] %}active{% endif %}" data-active-class="primary">
                 <input name="markdownSetting[markdown:isEnabledLinebreaks]" value="true" type="radio"
                     {% if true === markdownSetting['markdown:isEnabledLinebreaks'] %}checked{% endif %}> 有効
               </label>
-              <label class="btn {% if !markdownSetting['markdown:isEnabledLinebreaks'] %}btn-primary active{% else %}btn-default{% endif %}">
+              <label class="btn btn-default {% if !markdownSetting['markdown:isEnabledLinebreaks'] %}active{% endif %}" data-active-class="primary">
                 <input name="markdownSetting[markdown:isEnabledLinebreaks]" value="false" type="radio"
                     {% if !markdownSetting['markdown:isEnabledLinebreaks'] %}checked{% endif %}> 無効
               </label>
@@ -66,11 +66,11 @@
           </label>
           <div class="col-xs-5">
             <div class="btn-group btn-toggle" data-toggle="buttons">
-              <label class="btn {% if markdownSetting['markdown:isEnabledLinebreaksInComments'] %}btn-primary active{% else %}btn-default{% endif %}">
+              <label class="btn btn-default {% if markdownSetting['markdown:isEnabledLinebreaksInComments'] %}active{% endif %}" data-active-class="primary">
                 <input name="markdownSetting[markdown:isEnabledLinebreaksInComments]" value="true" type="radio"
                     {% if true === markdownSetting['markdown:isEnabledLinebreaksInComments'] %}checked{% endif %}> 有効
               </label>
-              <label class="btn {% if !markdownSetting['markdown:isEnabledLinebreaksInComments'] %}btn-primary active{% else %}btn-default{% endif %}">
+              <label class="btn btn-default {% if !markdownSetting['markdown:isEnabledLinebreaksInComments'] %}active{% endif %}" data-active-class="primary">
                 <input name="markdownSetting[markdown:isEnabledLinebreaksInComments]" value="false" type="radio"
                     {% if !markdownSetting['markdown:isEnabledLinebreaksInComments'] %}checked{% endif %}> 無効
               </label>
@@ -91,29 +91,6 @@
     </div>
   </div>
 
-  <script>
-    // Bootstrap 3 Toggle Switch Snippet
-    // http://www.bootply.com/92189
-    $('.btn-toggle').click(function() {
-      $(this).find('.btn').toggleClass('active');
-
-      if ($(this).find('.btn-primary').length>0) {
-        $(this).find('.btn').toggleClass('btn-primary');
-      }
-      if ($(this).find('.btn-danger').length>0) {
-        $(this).find('.btn').toggleClass('btn-danger');
-      }
-      if ($(this).find('.btn-success').length>0) {
-        $(this).find('.btn').toggleClass('btn-success');
-      }
-      if ($(this).find('.btn-info').length>0) {
-        $(this).find('.btn').toggleClass('btn-info');
-      }
-
-      $(this).find('.btn').toggleClass('btn-default');
-    });
-  </script>
-
 </div>
 {% endblock content_main %}
 

resource/css/_admin.scss

@@ -1,3 +1,6 @@
+// import crowi variable
+@import 'utilities';
+
 .crowi { // {{{
 
   .admin-user-menu {
@@ -14,4 +17,18 @@
     }
   }
 
+  // Toggle Twitter Bootstrap button class when active
+  // https://jsfiddle.net/ms040m01/3/
+  .btn-group.btn-toggle {
+    .btn.active[data-active-class="primary"] {
+      color: $btn-primary-color;
+      background-color: darken($btn-primary-bg, 10%);
+      border-color: $btn-primary-border;
+
+      &:hover {
+        background-color: darken($btn-primary-bg, 15%);
+      }
+    }
+  }
+
 } // }}}