transplant waves

src/client/js/legacy/crowi.js

@@ -7,7 +7,7 @@ const escapeStringRegexp = require('escape-string-regexp');
 require('jquery.cookie');
 require('bootstrap-select');
 
-require('./thirdparty-js/agile-admin');
+require('./thirdparty-js/waves');
 
 const Crowi = {};
 

src/client/js/legacy/thirdparty-js/agile-admin.js

@@ -1,235 +0,0 @@
-require('metismenu');
-require('jquery-slimscroll');
-
-require('./waves');
-
-let aaSettings = undefined;
-
-function loadSettings() {
-  const settingsStr = sessionStorage.getItem('agile-admin') || '{}';
-  aaSettings = JSON.parse(settingsStr);
-}
-
-function saveSettings() {
-  sessionStorage.setItem('agile-admin', JSON.stringify(aaSettings));
-}
-
-// load settings from sessionStorage
-loadSettings();
-
-//Loads the correct sidebar on window load,
-//collapses the sidebar on window resize.
-// Sets the min-height of #page-wrapper to window size
-$(window).on("load resize", function () {
-    let topOffset = $('.navbar-header').outerHeight();
-    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");
-    }
-});
-// This is for resize window
-$(window).on("load resize", function () {
-    const width = (this.window.innerWidth > 0) ? this.window.innerWidth : this.screen.width;
-    if (!aaSettings.isSidebarOpened || 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");
-    }
-    else {
-        $('body').removeClass('content-wrapper');
-        $(".open-close i").addClass('ti-angle-left');
-        $(".open-close i").removeClass('ti-menu');
-    }
-});
-
-$(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);
-      }
-  });
-  */
-  /*
-   * comment out because 'a.active' breaks bootstrap tab -- 2018.03.10 Yuki Takei
-   *
-  $(function () {
-    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 click on open close button
-  // Sidebar open close
-  $(".open-close").on('click', function () {
-      if ($("body").hasClass("content-wrapper")) {
-          aaSettings.isSidebarOpened = true;
-          saveSettings();
-          $("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 {
-          aaSettings.isSidebarOpened = false;
-          saveSettings();
-          $("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

src/client/styles/scss/_waves.scss

@@ -0,0 +1,149 @@
+/*Wave Effeects*/
+$gradient: rgba(255, 255, 255, 0.2) 0, rgba(255, 255, 255, 0.3) 40%, rgba(255, 255, 255, 0.4) 50%, rgba(255, 255, 255, 0.5) 60%, rgba(255, 255, 255, 0) 70%;
+
+@mixin waves-transition($transition) {
+  -webkit-transition: $transition;
+  -moz-transition: $transition;
+  -o-transition: $transition;
+  transition: $transition;
+}
+
+@mixin waves-transform($string) {
+  -webkit-transform: $string;
+  -moz-transform: $string;
+  -ms-transform: $string;
+  -o-transform: $string;
+  transform: $string;
+}
+
+@mixin waves-box-shadow($shadow) {
+  -webkit-box-shadow: $shadow;
+  box-shadow: $shadow;
+}
+
+.waves-effect {
+  position: relative;
+  display: inline-block;
+  overflow: hidden;
+  cursor: pointer;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+  -webkit-tap-highlight-color: transparent;
+
+  .waves-ripple {
+    position: absolute;
+    width: 20px;
+    height: 20px;
+    margin-top: -10px;
+    margin-left: -10px;
+    pointer-events: none;
+    background: rgba(0, 0, 0, 0.08);
+    border-radius: 50%;
+    opacity: 0;
+    -webkit-transition-property: -webkit-transform, opacity;
+    -moz-transition-property: -moz-transform, opacity;
+    -o-transition-property: -o-transform, opacity;
+    transition-property: transform, opacity;
+    -webkit-transform: scale(0);
+    -moz-transform: scale(0);
+    -ms-transform: scale(0);
+    -o-transform: scale(0);
+    transform: scale(0);
+    @include waves-transition(all 0.5s ease-out);
+    @include waves-transform(scale(0) translate(0, 0));
+  }
+
+  &.waves-light .waves-ripple {
+    background: rgba(255, 255, 255, 0.4);
+    background: -webkit-radial-gradient($gradient);
+    background: -o-radial-gradient($gradient);
+    background: -moz-radial-gradient($gradient);
+    background: radial-gradient($gradient);
+  }
+
+  &.waves-classic .waves-ripple {
+    background: rgba(0, 0, 0, 0.2);
+  }
+
+  &.waves-classic.waves-light .waves-ripple {
+    background: rgba(255, 255, 255, 0.4);
+  }
+}
+
+.waves-notransition {
+  @include waves-transition(none '!important');
+}
+
+.waves-button,
+.waves-circle {
+  @include waves-transform(translateZ(0));
+  -webkit-mask-image: -webkit-radial-gradient(circle, white 100%, black 100%);
+}
+
+.waves-button,
+.waves-button:hover,
+.waves-button:visited,
+.waves-button-input {
+  z-index: 1;
+  font-size: 1em;
+  line-height: 1em;
+  color: inherit;
+  text-align: center;
+  text-decoration: none;
+  white-space: nowrap;
+  vertical-align: middle;
+  cursor: pointer;
+  background-color: rgba(0, 0, 0, 0);
+  border: none;
+  outline: none;
+}
+
+.waves-button {
+  padding: 0.85em 1.1em;
+  border-radius: 0.2em;
+}
+
+.waves-button-input {
+  padding: 0.85em 1.1em;
+  margin: 0;
+}
+
+.waves-input-wrapper {
+  vertical-align: bottom;
+  border-radius: 0.2em;
+
+  &.waves-button {
+    padding: 0;
+  }
+
+  .waves-button-input {
+    position: relative;
+    top: 0;
+    left: 0;
+    z-index: 1;
+  }
+}
+
+.waves-circle {
+  width: 2.5em;
+  height: 2.5em;
+  line-height: 2.5em;
+  text-align: center;
+  border-radius: 50%;
+}
+
+.waves-float {
+  mask-image: none;
+  @include waves-box-shadow(0px 1px 1.5px 1px rgba(0, 0, 0, 0.12));
+  @include waves-transition(all 300ms);
+
+  &:active {
+    @include waves-box-shadow(0px 8px 20px 1px rgba(0, 0, 0, 0.3));
+  }
+}
+
+.waves-block {
+  display: block;
+}

src/client/styles/scss/style-app.scss

@@ -23,11 +23,12 @@
 @import 'comment_crowi';
 @import 'comment_growi';
 @import 'comment_kibela';
-@import 'navbar_kibela';
 @import 'create-page';
 @import 'create-template';
+@import 'draft';
 @import 'editor-attachment';
 @import 'editor-navbar';
+@import 'handsontable';
 @import 'layout';
 @import 'layout_crowi';
 @import 'layout_crowi_sidebar';
@@ -36,6 +37,7 @@
 @import 'layout_variable';
 @import 'login';
 @import 'navbar';
+@import 'navbar_kibela';
 @import 'notification';
 @import 'on-edit';
 @import 'page_list';
@@ -43,14 +45,12 @@
 @import 'page_growi';
 @import 'search';
 @import 'shortcuts';
+@import 'tag';
 @import 'user';
 @import 'user_growi';
-@import 'handsontable';
-@import 'wiki';
-@import 'staff_credit';
-@import 'tag';
 @import 'staff_credit';
-@import 'draft';
+@import 'waves';
+@import 'wiki';
 
 /*
  * for Guest User Mode