WIP: apply bootstrap theme

lib/views/layout/layout.html

@@ -88,6 +88,8 @@ gh/highlightjs/cdn-release@9.12.0/build/languages/yaml.min.js
   <link href='https://fonts.googleapis.com/css?family=Lato:400,700' rel='stylesheet' type='text/css'>
   <!-- Font Awesome -->
   <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css">
+  <!-- Themify Icons -->
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/cd-themify-icons@0.0.1/index.min.css">
   <!-- emojione -->
   <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/emojione@3.1.2/extras/css/emojione.min.css">
   <!-- highlight.js -->
@@ -137,8 +139,8 @@ gh/highlightjs/cdn-release@9.12.0/build/languages/yaml.min.js
 
       <ul class="nav navbar-top-links navbar-left hidden-xs">
         <li>
-          <a href="javascript:void(0)" class="open-close hidden-xs waves-effect waves-light">
-            <i class="icon-arrow-left-circle ti-menu"></i>
+          <a class="open-close hidden-xs waves-effect waves-light">
+            <i class="ti-angle-left"></i>
           </a>
         </li>
         <li>

package.json

@@ -90,6 +90,7 @@
     "i18next-express-middleware": "^1.0.5",
     "i18next-node-fs-backend": "^1.0.0",
     "i18next-sprintf-postprocessor": "^0.2.2",
+    "jquery-slimscroll": "^1.3.8",
     "jquery-ui": "^1.12.1",
     "jquery.cookie": "~1.4.1",
     "lodash-webpack-plugin": "^0.11.4",
@@ -103,6 +104,7 @@
     "markdown-it-toc-and-anchor-with-slugid": "^1.1.2",
     "md5": "^2.2.1",
     "method-override": "^2.3.10",
+    "metismenu": "^2.7.4",
     "mkdirp": "~0.5.1",
     "mongoose": "^5.0.0",
     "mongoose-paginate": "^5.0.0",

resource/js/legacy/crowi.js

@@ -14,6 +14,8 @@ const escapeStringRegexp = require('escape-string-regexp');
 require('bootstrap-sass');
 require('jquery.cookie');
 
+require('./thirdparty-js/agile-admin');
+
 var Crowi = {};
 
 if (!window) {

resource/js/legacy/thirdparty-js/agile-admin.js

@@ -0,0 +1,212 @@
+require('metismenu');
+require('jquery-slimscroll');
+
+require('./waves');
+
+$(document).ready(function () {
+  $(function () {
+      $(".preloader").fadeOut();
+      $('#side-menu').metisMenu();
+  });
+  // Theme settings
+  //Open-Close-right sidebar
+  $(".right-side-toggle").click(function () {
+      $(".right-sidebar").slideDown(50);
+      $(".right-sidebar").toggleClass("shw-rside");
+      // Fix header
+      $(".fxhdr").click(function () {
+          $("body").toggleClass("fix-header");
+      });
+      // Fix sidebar
+      $(".fxsdr").click(function () {
+          $("body").toggleClass("fix-sidebar");
+      });
+      // Service panel js
+      if ($("body").hasClass("fix-header")) {
+          $('.fxhdr').attr('checked', true);
+      }
+      else {
+          $('.fxhdr').attr('checked', false);
+      }
+      if ($("body").hasClass("fix-sidebar")) {
+          $('.fxsdr').attr('checked', true);
+      }
+      else {
+          $('.fxsdr').attr('checked', false);
+      }
+  });
+  //Loads the correct sidebar on window load,
+  //collapses the sidebar on window resize.
+  // Sets the min-height of #page-wrapper to window size
+  $(function () {
+      $(window).bind("load resize", function () {
+          let topOffset = 60;
+          const width = (this.window.innerWidth > 0) ? this.window.innerWidth : this.screen.width;
+          if (width < 768) {
+              $('div.navbar-collapse').addClass('collapse');
+              topOffset = 100; // 2-row-menu
+          }
+          else {
+              $('div.navbar-collapse').removeClass('collapse');
+          }
+          let height = ((this.window.innerHeight > 0) ? this.window.innerHeight : this.screen.height) - 1;
+          height = height - topOffset;
+          if (height < 1) height = 1;
+          if (height > topOffset) {
+              $("#page-wrapper").css("min-height", (height) + "px");
+          }
+      });
+      var url = window.location;
+      var element = $('ul.nav a').filter(function () {
+          return this.href == url || url.href.indexOf(this.href) == 0;
+      }).addClass('active').parent().parent().addClass('in').parent();
+      if (element.is('li')) {
+          element.addClass('active');
+      }
+  });
+  // This is for resize window
+  $(function () {
+      $(window).bind("load resize", function () {
+          const width = (this.window.innerWidth > 0) ? this.window.innerWidth : this.screen.width;
+          if (width < 1170) {
+              $('body').addClass('content-wrapper');
+              $(".open-close i").addClass('ti-menu');
+              $(".open-close i").removeClass('ti-angle-left');
+              $(".sidebar-nav, .slimScrollDiv").css("overflow-x", "visible").parent().css("overflow", "visible");
+              $(".logo span").hide();
+          }
+          else {
+              $('body').removeClass('content-wrapper');
+              $(".open-close i").addClass('ti-angle-left');
+              $(".open-close i").removeClass('ti-menu');
+              $(".logo span").show();
+          }
+      });
+  });
+  // This is for click on open close button
+  // Sidebar open close
+  $(".open-close").on('click', function () {
+      if ($("body").hasClass("content-wrapper")) {
+          $("body").trigger("resize");
+          $(".sidebar-nav, .slimScrollDiv").css("overflow", "hidden").parent().css("overflow", "visible");
+          $("body").removeClass("content-wrapper");
+          $(".open-close i").addClass("ti-angle-left");
+          $(".open-close i").removeClass("ti-menu");
+          $(".logo span").show();
+      }
+      else {
+          $("body").trigger("resize");
+          $(".sidebar-nav, .slimScrollDiv").css("overflow-x", "visible").parent().css("overflow", "visible");
+          $("body").addClass("content-wrapper");
+          $(".open-close i").addClass("ti-menu");
+          $(".open-close i").removeClass("ti-angle-left");
+          $(".logo span").hide();
+      }
+  });
+  // Collapse Panels
+  (function ($, window, document) {
+      var panelSelector = '[data-perform="panel-collapse"]';
+      $(panelSelector).each(function () {
+          var $this = $(this)
+              , parent = $this.closest('.panel')
+              , wrapper = parent.find('.panel-wrapper')
+              , collapseOpts = {
+                  toggle: false
+              };
+          if (!wrapper.length) {
+              wrapper = parent.children('.panel-heading').nextAll().wrapAll('<div/>').parent().addClass('panel-wrapper');
+              collapseOpts = {};
+          }
+          wrapper.collapse(collapseOpts).on('hide.bs.collapse', function () {
+              $this.children('i').removeClass('ti-minus').addClass('ti-plus');
+          }).on('show.bs.collapse', function () {
+              $this.children('i').removeClass('ti-plus').addClass('ti-minus');
+          });
+      });
+      $(document).on('click', panelSelector, function (e) {
+          e.preventDefault();
+          var parent = $(this).closest('.panel');
+          var wrapper = parent.find('.panel-wrapper');
+          wrapper.collapse('toggle');
+      });
+  }(jQuery, window, document));
+  // Remove Panels
+  (function ($, window, document) {
+      var panelSelector = '[data-perform="panel-dismiss"]';
+      $(document).on('click', panelSelector, function (e) {
+          e.preventDefault();
+          var parent = $(this).closest('.panel');
+          removeElement();
+
+          function removeElement() {
+              var col = parent.parent();
+              parent.remove();
+              col.filter(function () {
+                  var el = $(this);
+                  return (el.is('[class*="col-"]') && el.children('*').length === 0);
+              }).remove();
+          }
+      });
+  }(jQuery, window, document));
+  //tooltip
+  $(function () {
+          $('[data-toggle="tooltip"]').tooltip()
+      })
+      //Popover
+  $(function () {
+          $('[data-toggle="popover"]').popover()
+      })
+      // Task
+  $(".list-task li label").click(function () {
+      $(this).toggleClass("task-done");
+  });
+  $(".settings_box a").click(function () {
+      $("ul.theme_color").toggleClass("theme_block");
+  });
+});
+//Colepsible toggle
+$(".collapseble").click(function () {
+  $(".collapseblebox").fadeToggle(350);
+});
+// Sidebar
+$('.slimscrollright').slimScroll({
+  height: '100%'
+  , position: 'right'
+  , size: "5px"
+  , color: '#dcdcdc'
+, });
+$('.slimscrollsidebar').slimScroll({
+  height: '100%'
+  , position: 'right'
+  , size: "0px"
+  , color: '#dcdcdc'
+, });
+$('.chat-list').slimScroll({
+  height: '100%'
+  , position: 'right'
+  , size: "0px"
+  , color: '#dcdcdc'
+, });
+// Resize all elements
+$("body").trigger("resize");
+// visited ul li
+$('.visited li a').click(function (e) {
+  $('.visited li').removeClass('active');
+  var $parent = $(this).parent();
+  if (!$parent.hasClass('active')) {
+      $parent.addClass('active');
+  }
+  e.preventDefault();
+});
+// Login and recover password
+$('#to-recover').click(function () {
+  $("#loginform").slideUp();
+  $("#recoverform").fadeIn();
+});
+// Update 1.5
+// this is for close icon when navigation open in mobile view
+$(".navbar-toggle").click(function () {
+  $(".navbar-toggle i").toggleClass("ti-menu");
+  $(".navbar-toggle i").addClass("ti-close");
+});
+// Update 1.6

resource/styles/agile-admin/inverse/style.scss

@@ -1,3 +1,6 @@
+// import metismenu styles
+@import '~metismenu/dist/metisMenu';
+
 @import "variables.scss";
 @import "eliteadmin.scss";
 // @import "widgets.scss";

yarn.lock

@@ -3199,6 +3199,12 @@ jmespath@0.15.0:
   version "0.15.0"
   resolved "https://registry.yarnpkg.com/jmespath/-/jmespath-0.15.0.tgz#a3f222a9aae9f966f5d27c796510e28091764217"
 
+jquery-slimscroll@^1.3.8:
+  version "1.3.8"
+  resolved "https://registry.yarnpkg.com/jquery-slimscroll/-/jquery-slimscroll-1.3.8.tgz#8481c44e7a47687653908a28f7f70aed64c84e36"
+  dependencies:
+    jquery ">= 1.7"
+
 jquery-ui@^1.12.1:
   version "1.12.1"
   resolved "https://registry.yarnpkg.com/jquery-ui/-/jquery-ui-1.12.1.tgz#bcb4045c8dd0539c134bc1488cdd3e768a7a9e51"
@@ -3207,6 +3213,10 @@ 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":
+  version "3.3.1"
+  resolved "https://registry.yarnpkg.com/jquery/-/jquery-3.3.1.tgz#958ce29e81c9790f31be7792df5d4d95fc57fbca"
+
 jquery@>=1.12.0:
   version "3.2.1"
   resolved "https://registry.yarnpkg.com/jquery/-/jquery-3.2.1.tgz#5c4d9de652af6cd0a770154a631bba12b015c787"
@@ -3843,6 +3853,10 @@ methods@~1.1.2:
   version "1.1.2"
   resolved "https://registry.yarnpkg.com/methods/-/methods-1.1.2.tgz#5529a4d67654134edcc5266656835b0f851afcee"
 
+metismenu@^2.7.4:
+  version "2.7.4"
+  resolved "https://registry.yarnpkg.com/metismenu/-/metismenu-2.7.4.tgz#06e75a4dc0150ad5f60ebb0c7cd4e569bf52f519"
+
 micromatch@^2.1.5:
   version "2.3.11"
   resolved "https://registry.yarnpkg.com/micromatch/-/micromatch-2.3.11.tgz#86677c97d1720b363431d04d0d15293bd38c1565"