WIP: apply agile-admin

* admin page

lib/locales/en-US/translation.json

@@ -250,8 +250,8 @@
     "Plugin settings": "Plugin settings",
     "Enable plugin loading": "Enable plugin loading",
     "Load plugins": "Load plugins",
-    "valid": "Valid",
-    "invalid": "Invalid"
+    "Enabled": "Enabled",
+    "Disabled": "Disabled"
 
   },
  "security_setting": {

lib/locales/ja/translation.json

@@ -265,8 +265,8 @@
     "Plugin settings": "プラグイン設定",
     "Enable plugin loading": "プラグインの読み込みを有効にします。",
     "Load plugins": "プラグインを読み込む",
-    "valid": "有効",
-    "invalid": "無効"
+    "Enabled": "有効",
+    "Disabled": "無効"
 
    },
 

lib/views/admin/app.html

@@ -183,14 +183,15 @@
         <div class="form-group">
           <label for="settingForm[plugin:isEnabledPlugins]" class="col-xs-3 control-label">{{ t('app_setting.Load plugins') }}</label>
           <div class="col-xs-6">
+
             <div class="btn-group btn-toggle" data-toggle="buttons">
-              <label class="btn btn-default {% if settingForm['plugin:isEnabledPlugins'] %}active{% endif %}" data-active-class="primary">
+              <label class="btn btn-default btn-rounded btn-outline {% 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 %}> {{ t('app_setting.valid') }}
+                    {% if true === settingForm['plugin:isEnabledPlugins'] %}checked{% endif %}> {{ t('app_setting.Enabled') }}
               </label>
-              <label class="btn btn-default {% if !settingForm['plugin:isEnabledPlugins'] %}active{% endif %}" data-active-class="primary">
+              <label class="btn btn-default btn-rounded btn-outline {% if !settingForm['plugin:isEnabledPlugins'] %}active{% endif %}" data-active-class="default">
                 <input name="settingForm[plugin:isEnabledPlugins]" value="false" type="radio"
-                    {% if !settingForm['plugin:isEnabledPlugins'] %}checked{% endif %}> {{ t('app_setting.invalid') }}
+                    {% if !settingForm['plugin:isEnabledPlugins'] %}checked{% endif %}> {{ t('app_setting.Disabled') }}
               </label>
             </div>
           </div>

lib/views/layout/admin.html

@@ -1,5 +1,9 @@
 {% extends '../layout-growi/base/layout.html' %}
 
+
+{% block main_css_class %}admin-page{% endblock %}
+
+
 {% block html_additional_headers %}
   {% parent %}
   <script src="{{ webpack_asset('legacy-admin').js }}" defer></script>

resource/styles/index.js

@@ -1,3 +1 @@
-import './scss/vendor.scss';
-
 import './scss/crowi.scss';

resource/styles/scss/_admin.scss

@@ -1,51 +1,63 @@
-.admin-user-menu {
-  .dropdown-menu {
-    left: auto;
-    right: 0;
-  }
-}
+.admin-page {
 
-.admin-customize {
-  .ss-container img {
-    padding: .5em;
-    background-color: #ddd;
+  .admin-user-menu {
+    .dropdown-menu {
+      left: auto;
+      right: 0;
+    }
   }
 
-  // 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;
+  .admin-customize {
+    .ss-container img {
+      padding: .5em;
+      background-color: #ddd;
+    }
 
-      &:hover {
-        background-color: darken($btn-primary-bg, 15%);
+    .table-user-list {
+      .label-admin {
+        margin-left: 1em;
       }
     }
-  }
 
-  .table-user-list {
-    .label-admin {
-      margin-left: 1em;
+    // override CodeMirror styles
+    .CodeMirror pre {
+      font-family: $font-family-monospace;
     }
   }
 
-  // override CodeMirror styles
-  .CodeMirror pre {
-    font-family: $font-family-monospace;
-  }
-}
+  .admin-security {
+    .passport-logo {
+      padding: 4px;
+      height: 32px;
+      background-color: black;
+    }
 
-.admin-security {
-  .passport-logo {
-    padding: 4px;
-    height: 32px;
-    background-color: black;
+    .auth-mechanism-configurations {
+      min-height: 800px;
+    }
   }
 
-  .auth-mechanism-configurations {
-    min-height: 800px;
+  // Toggle Twitter Bootstrap button class when active
+  // https://jsfiddle.net/ms040m01/3/
+  @mixin active-color($color, $bg-color, $border-color) {
+    color: $color;
+    background-color: darken($bg-color, 10%);
+    border-color: $border-color;
+
+    &:hover {
+      background-color: darken($bg-color, 15%);
+    }
+  }
+  .btn-group.btn-toggle {
+    .btn {
+      min-width: 90px;
+    }
+    .btn.active[data-active-class="default"] {
+      @include active-color($btn-default-color, $btn-default-bg, $btn-default-border);
+    }
+    .btn.active[data-active-class="primary"] {
+      @include active-color($btn-primary-color, $btn-primary-bg, $btn-primary-border);
+    }
   }
-}
 
+}

resource/styles/scss/crowi.scss

@@ -4,6 +4,9 @@
 // import crowi variables
 @import 'variables';
 
+// vendor
+@import 'vendor';
+
 // agile-admin theme
 @import '../agile-admin/inverse/style';
 @import '../agile-admin/inverse/colors/default.scss';