activeadmin_addons_rails6 1.7.2

data/app/assets/stylesheets/activeadmin_addons/addons/interactive_select_tag.scss

@@ -0,0 +1,30 @@
+.tag-select-container {
+  max-width: 125px;
+  max-height: 50px;
+
+  .interactive-tag {
+    height: 28px;
+    width: 125px;
+
+    .status_tag {
+      cursor: pointer;
+    }
+  }
+
+  .interactive-tag-hidden {
+    display: none;
+  }
+
+  .select-container-hidden {
+    display: none;
+  }
+
+  .interactive-tag-select {
+    width: 100%;
+    height: 100%;
+  }
+}
+
+.select2-container {
+  margin: 0;
+}

data/app/assets/stylesheets/activeadmin_addons/addons/material-datepicker.scss

@@ -0,0 +1,173 @@
+$dt-bg-border-color: #fff;
+$dt-bg-button-color: #fff;
+$dt-header-bg-color: #fff;
+$dt-border-color: #fff;
+$dt-bg: #fff;
+
+$dt-primary-color: $am-theme-primary;
+$dt-label-color: rgba(0, 0, 0, .7);
+$dt-header-color: rgba(0, 0, 0, .54);
+
+$dt-selected-bg-color: $am-theme-primary;
+$dt-selected-color: #fff;
+$dt-hour-border-color: #ddd;
+
+li.input.date_time_picker .date-time-picker-input {
+  z-index: 2 !important;
+  background: $dt-selected-color asset-url('active_material/icons/event.svg') 10px no-repeat;
+  padding-left: 40px;
+}
+
+div.xdsoft_datetimepicker {
+  font-family: 'RobotoDraft', sans-serif;
+  background: $dt-bg-border-color;
+  border-radius: 2px;
+  box-shadow: 0 1px 2px rgba(0, 0, 0, .25), 0 -1px 1px rgba(0, 0, 0, .12);
+  padding: 0 12px 8px;
+  z-index: 1;
+  color: $dt-label-color;
+
+  .xdsoft_datepicker {
+    margin-top: 5px;
+    width: 250px;
+  }
+
+  .xdsoft_datepicker.active + .xdsoft_timepicker {
+    width: 68px;
+    padding-left: 10px;
+    margin-top: 30px;
+    border-left: 1px solid $dt-hour-border-color;
+  }
+
+  .xdsoft_timepicker .xdsoft_time_box {
+    border-bottom: 1px solid $dt-hour-border-color;
+  }
+
+  .xdsoft_timepicker .xdsoft_time_box>div>div {
+    background: $dt-bg-button-color;
+    border-top: 1px solid $dt-hour-border-color;
+    color: $dt-label-color;
+  }
+
+  .xdsoft_label {
+    background-color: $dt-bg-border-color;
+    font-weight: 600;
+
+    &.xdsoft_month {
+      width: 90px;
+      padding-right: 0;
+
+      i {
+        display: none;
+      }
+    }
+
+    &.xdsoft_year {
+      padding-left: 0;
+      margin-left: 0;
+
+      i {
+        display: none;
+      }
+    }
+
+    & > .xdsoft_select {
+      border: 1px solid $dt-border-color;
+      background: $dt-bg-border-color;
+    }
+
+    & > .xdsoft_select > div > .xdsoft_option {
+      font-weight: 400;
+
+      &:hover {
+        color: $dt-primary-color;
+        background: $dt-bg-border-color;
+      }
+
+      &.xdsoft_current {
+        background: $dt-selected-bg-color;
+        color: $dt-selected-color;
+        box-shadow: unset;
+      }
+    }
+  }
+
+  .xdsoft_calendar td,
+  .xdsoft_calendar th {
+    background: $dt-bg-button-color;
+    color: $dt-label-color;
+    border: 0;
+    width: 32px;
+    height: 32px;
+    border-radius: 50%;
+    text-align: center;
+
+    div {
+      padding: 0;
+    }
+  }
+
+  .xdsoft_calendar th {
+    background: $dt-header-bg-color;
+    font-weight: 500;
+    color: $dt-header-color;
+
+  }
+
+  .xdsoft_calendar td.xdsoft_default,
+  .xdsoft_calendar td.xdsoft_current,
+  .xdsoft_timepicker .xdsoft_time_box>div>div.xdsoft_current {
+    color: $dt-selected-bg-color;
+    background: $dt-bg;
+    box-shadow: unset;
+  }
+
+  .xdsoft_calendar td:hover,
+  .xdsoft_timepicker .xdsoft_time_box>div>div:hover {
+    color: $dt-primary-color !important;
+    background: $dt-bg-border-color !important;
+  }
+
+  .xdsoft_calendar td.xdsoft_today {
+    &,
+    &.xdsoft_current {
+      background: $dt-selected-bg-color !important;
+      color: $dt-selected-color !important;
+    }
+  }
+
+  .xdsoft_time_box {
+    border: 1px solid $dt-border-color;
+  }
+
+  .xdsoft_mounthpicker button {
+    width: 24px;
+    height: 24px;
+
+    &.xdsoft_prev {
+      background: asset-url('material/icons/keyboard_arrow_left.svg') no-repeat;
+    }
+
+    &.xdsoft_today_button {
+      background: asset-url('material/icons/today.svg') no-repeat;
+    }
+
+    &.xdsoft_next {
+      background: asset-url('material/icons/keyboard_arrow_right.svg') no-repeat;
+    }
+  }
+
+  .xdsoft_timepicker > button {
+    &.xdsoft_prev {
+      width: 24px;
+      height: 24px;
+      background: asset-url('material/icons/keyboard_arrow_up.svg') no-repeat;
+    }
+
+    &.xdsoft_next {
+      width: 24px;
+      height: 24px;
+      background: asset-url('material/icons/keyboard_arrow_down.svg') no-repeat;
+    }
+  }
+}

data/app/assets/stylesheets/activeadmin_addons/addons/material-toggle_bool.scss

@@ -0,0 +1,52 @@
+$inactive-button: #aaa;
+$inactive-bg: #ddd;
+$active-button: $am-theme-primary;
+$active-bg: rgba($active-button, .6);
+
+$box-shadow: 0 2px 1px -1px rgba(0, 0, 0, .2), 0 1px 1px 0 rgba(0, 0, 0, .14), 0 1px 3px 0 rgba(0, 0, 0, .12);
+
+.toggle-bool-switches-container {
+  text-align: center;
+
+  .toggle-bool-switch {
+    cursor: pointer;
+
+    background: $inactive-bg;
+    background-image: none;
+    box-shadow: $box-shadow;
+
+    width: 36px;
+    height: 14px;
+    display: inline-block;
+    position: relative;
+    border-radius: 9px;
+
+    &::before {
+      content: '';
+      background: $inactive-button;
+      background-image: none;
+      box-shadow: none;
+
+      display: inline-block;
+      width: 22px;
+      height: 22px;
+      border-radius: 50%;
+      position: absolute;
+      left: -3px;
+      top: -3px;
+
+      transition: all .25s linear;
+      transform: translateX(0);
+    }
+
+    &.on {
+      background: $active-bg;
+      background-image: none;
+
+      &::before {
+        left: calc(100% - 15px);
+        background: $active-button;
+      }
+    }
+  }
+}

data/app/assets/stylesheets/activeadmin_addons/addons/toggle_bool.scss

@@ -0,0 +1,52 @@
+$inactive-bg: #6a7176;
+$inactive-shadow: #4d5256;
+$active-bg: #4dbcff;
+$active-shadow: #2f749e;
+$button-bg: #fff;
+$button-shadow: #dfe1e2;
+
+$box-shadow: 0 1px 3px rgba(0, 0, 0, .12), 0 0 1px #fff inset;
+
+.toggle-bool-switches-container {
+  text-align: center;
+
+  .toggle-bool-switch {
+    cursor: pointer;
+
+    background: $inactive-bg;
+    background-image: linear-gradient(180deg, $inactive-bg, $inactive-shadow);
+    box-shadow: $box-shadow;
+
+    width: 40px;
+    height: 16px;
+    display: inline-block;
+    position: relative;
+
+    &::before {
+      content: '';
+
+      background: $button-bg;
+      background-image: linear-gradient(180deg, $button-bg, $button-shadow);
+      box-shadow: $box-shadow;
+
+      display: inline-block;
+      width: 20px;
+      height: 12px;
+      position: absolute;
+      left: 3px;
+      top: 2px;
+
+      transition: all .25s linear;
+      transform: translateX(0);
+    }
+
+    &.on {
+      background: $active-bg;
+      background-image: linear-gradient(180deg, $active-bg, $active-shadow);
+
+      &::before {
+        left: calc(100% - 23px);
+      }
+    }
+  }
+}

data/app/assets/stylesheets/activeadmin_addons/all.scss

@@ -0,0 +1,19 @@
+@import 'select2';
+@import 'imports/jquery-datepicker';
+@import 'vendor/palette-color-picker';
+
+@import 'inputs/numeric-range-filter';
+@import 'inputs/color-picker';
+@import 'inputs/date-time-picker';
+@import 'inputs/select2';
+@import 'inputs/selected-list';
+@import 'addons/toggle_bool';
+@import 'addons/interactive_select_tag';
+
+$error-color: #932419;
+
+li.error {
+  .select2-selection {
+    border-color: $error-color;
+  }
+}

data/app/assets/stylesheets/activeadmin_addons/imports/jquery-datepicker.scss

@@ -0,0 +1 @@
+@import 'jquery.xdan.datetimepicker';

data/app/assets/stylesheets/activeadmin_addons/imports/webpack/jquery-datepicker.scss

@@ -0,0 +1 @@
+@import 'jquery-datetimepicker/build/jquery.datetimepicker.min.css';

data/app/assets/stylesheets/activeadmin_addons/inputs/color-picker.scss

@@ -0,0 +1,4 @@
+.palette-color-picker-bubble {
+  padding: 14px 0 14px 16px;
+  z-index: 10;
+}

data/app/assets/stylesheets/activeadmin_addons/inputs/date-time-picker.scss

@@ -0,0 +1,5 @@
+input[type=text] {
+  &.date-time-picker-input {
+    width: 110px;
+  }
+}

data/app/assets/stylesheets/activeadmin_addons/inputs/numeric-range-filter.scss

@@ -0,0 +1,12 @@
+.filter_numeric_range_filter {
+  input[type=number] {
+    width: 96px;
+    padding-right: 0;
+  }
+
+  .separator {
+    display: inline-block;
+    width: 12px;
+    text-align: center;
+  }
+}

data/app/assets/stylesheets/activeadmin_addons/inputs/select2.scss

@@ -0,0 +1,3 @@
+.select2-search__field {
+  line-height: 20px;
+}

data/app/assets/stylesheets/activeadmin_addons/inputs/selected-list.scss

@@ -0,0 +1,27 @@
+$selected-list-btn-color: #aaa;
+$selected-list-btn-hover-color: #333;
+
+.selected-list-container {
+  display: inline-block;
+  width: 80%;
+
+  .selected-item {
+    height: 25px;
+  }
+}
+
+.selected-item {
+  display: table;
+  cursor: pointer;
+
+  &::before {
+    color: $selected-list-btn-color;
+    content: '\2716\00a0\00a0';
+  }
+
+  &:hover {
+    &::before {
+      color: $selected-list-btn-hover-color;
+    }
+  }
+}

data/app/assets/stylesheets/activeadmin_addons/material.scss

@@ -0,0 +1,53 @@
+@import 'active_material';
+@import './addons/material-datepicker';
+@import './addons/material-toggle_bool';
+
+// Select
+.filter_select,
+.search_select_filter {
+  .select2.select2-container.select2-container--default {
+    width: 100% !important;
+  }
+}
+
+.select2-container .select2-selection--single {
+  height: 42px;
+
+  .select2-selection__rendered {
+    line-height: 42px;
+  }
+
+  .select2-selection__arrow {
+    height: 40px;
+  }
+}
+
+// Date Range
+.input.date_range {
+  input.datepicker {
+    background: #fff asset-url('active_material/icons/event.svg') 10px no-repeat;
+    padding-left: 40px;
+  }
+}
+
+// Numeric Range Filter
+.filter_numeric_range_filter {
+  &.input.string input,
+  &.input.stringish input,
+  &.input.numberic input {
+    width: calc(50% - 6px);
+  }
+}
+
+// Errors
+li.error {
+  .select2-selection {
+    border-color: $am-theme-error;
+  }
+}
+
+.input.string.error input,
+.input.stringish.error input,
+.input.numberic.error input {
+  border-color: $am-theme-error;
+}