activeadmin 0.6.6 → 1.0.0.pre1

data/app/assets/javascripts/active_admin/{components/jquery.aa.table-checkbox-toggler.js.coffee → lib/table-checkbox-toggler.js.coffee}

@@ -1,4 +1,4 @@
-window.ActiveAdmin.TableCheckboxToggler = class ActiveAdmin.TableCheckboxToggler extends ActiveAdmin.CheckboxToggler
+class ActiveAdmin.TableCheckboxToggler extends ActiveAdmin.CheckboxToggler
   _init: ->
     super
 
@@ -21,5 +21,4 @@ window.ActiveAdmin.TableCheckboxToggler = class ActiveAdmin.TableCheckboxToggler
   _didClickCell: (cell) ->
     $(cell).parent('tr').find(':checkbox').click()
 
-jQuery ($)->
-  $.widget.bridge 'tableCheckboxToggler', ActiveAdmin.TableCheckboxToggler
+$.widget.bridge 'tableCheckboxToggler', ActiveAdmin.TableCheckboxToggler

data/app/assets/stylesheets/active_admin/{_base.css.scss → _base.scss}

@@ -12,6 +12,7 @@
 @import "active_admin/components/popovers";
 @import "active_admin/components/tables";
 @import "active_admin/components/batch_actions";
+@import "active_admin/components/modal_dialog";
 @import "active_admin/components/blank_slates";
 @import "active_admin/components/breadcrumbs";
 @import "active_admin/components/dropdown_menu";
@@ -25,6 +26,8 @@
 @import "active_admin/components/status_tags";
 @import "active_admin/components/table_tools";
 @import "active_admin/components/index_list";
+@import "active_admin/components/unsupported_browser";
+@import "active_admin/components/tabs";
 @import "active_admin/pages/logged_out";
 @import "active_admin/structure/footer";
 @import "active_admin/structure/main_structure";

data/app/assets/stylesheets/active_admin/{_forms.css.scss → _forms.scss}

@@ -1,3 +1,4 @@
+//= depend_on_asset "active_admin/datepicker/datepicker-input-icon.png"
 // -------------------------------------- Active Admin Forms
 form {
   /* Reset margins & Padding */
@@ -32,12 +33,13 @@ form {
       }
     }
 
-    ol > div.has_many {
+    ol > li.has_many_container {
       padding: 20px 10px;
       h3 {
         font-size: 12px;
         font-weight: bold;
       }
+      .has_many_fields { margin: 10px 0 }
     }
 
     ol > li > li label {
@@ -51,7 +53,34 @@ form {
     }
   }
 
+  // relative so the absolutely-positioned handle will fit
+  .has_many_fields { position: relative }
+
+  .has_many_container {
+    .handle {
+      position: absolute;
+      @include icon-size(3em);
+      top: calc(50% - 3em / 2);
+      right: 2px;
+      padding: 0;
+      cursor: move;
+    }
+
+    // If a sortable is nested in a sortable, give the parent handle space!
+    &.ui-sortable .has_many_container {
+      margin-right: 2em;
+    }
+  }
+
+  .ui-sortable {
+    // give the handle space!
+    input[type=text], input[type=password], input[type=email], input[type=number], input[type=url], input[type=tel], textarea {
+      width: calc(80% - #{$text-input-total-padding} - 2em - 1px);
+    }
+  }
+
   /* Nested Fieldsets and Legends */
+
   fieldset > ol > li {
     fieldset {
       position:relative;
@@ -69,24 +98,30 @@ form {
         &.label label { position:absolute; }
       }
 
-      ol {
-        float:left;
-        width:74%;
-        margin:0;
-        padding:0 0 0 20%;
+      &:not(.has_many_fields) ol {
+        float: left;
+        width: 74%;
+        margin: 0;
+        padding: 0 0 0 20%;
 
         li {
-          padding:0;
-          border:0;
+          padding: 0;
+          border: 0;
         }
       }
+
+      &.has_many_fields ol {
+        float: left;
+        width: 100%;
+        margin: 0;
+      }
     }
   }
 
   /* Text Fields */
   input[type=text], input[type=password], input[type=email], input[type=number], input[type=url], input[type=tel], textarea {
-    width: 76%;
-    border: 1px solid #c9d0d6;
+    width: calc(80% - #{$text-input-total-padding});
+    border: $border-width solid #c9d0d6;
     @include rounded;
     font-size: 0.95em;
     @include sans-family;
@@ -94,7 +129,7 @@ form {
     padding: 8px $text-input-horizontal-padding 7px;
 
     &:focus {
-      border: 1px solid #99a2aa;
+      border: $border-width solid #99a2aa;
       @include shadow(0,0,4px,#99a2aa);
     }
   }
@@ -110,7 +145,7 @@ form {
     }
 
     /* Date and Time Fields */
-    &.date, &.time, &.datetime, &.date_select {
+    &.date_select, &.time_select, &.datetime_select {
       fieldset ol li {
         float:left; width:auto; margin:0 0.5em 0 0;
         label { display: none; }
@@ -146,6 +181,11 @@ form {
       }
     }
 
+    /* Hidden fields */
+    &.hidden {
+      padding: 0;
+    }
+
     /* Errors */
     p.inline-errors {
       color: $error-color;
@@ -160,8 +200,8 @@ form {
     }
 
     &.error {
-      input[type=text], input[type=password], input[type=email], input[type=url], input[type=tel], textarea {
-        border: 1px solid $error-color;
+      input[type=text], input[type=password], input[type=email], input[type=number], input[type=url], input[type=tel], textarea {
+        border: $border-width solid $error-color;
       }
     }
   }
@@ -180,7 +220,7 @@ form {
 
   /* Buttons */
 
-  input[type=submit] {
+  input[type=submit], input[type=button], button {
     @include dark-button;
     cursor: pointer;
 
@@ -188,7 +228,7 @@ form {
 
   .buttons, .actions {
     margin-top: 15px;
-    input[type=submit] { margin-right: 10px; }
+    input[type=submit], input[type=button], button { margin-right: 10px; }
   }
 
   fieldset.buttons li, fieldset.actions li {
@@ -256,6 +296,10 @@ form.filter_form {
 
     &.filter_check_boxes {
       label { margin-bottom: 3px; }
+      fieldset {
+        margin-bottom: 0px;
+        padding-bottom: 0px;
+      }
       .check_boxes_wrapper label {
         font-weight: normal;
         margin-bottom: 3px;
@@ -273,7 +317,7 @@ form.filter_form {
       }
 
       input[type=text] {
-        background: #fff url(active_admin_image_path('datepicker/datepicker-input-icon.png')) no-repeat 100% 7px;
+        background: #fff image-url('active_admin/datepicker/datepicker-input-icon.png') no-repeat 100% 7px;
         padding-right: $date-range-filter-input-right-padding;
         width: $date-range-filter-input-width;
       }

data/app/assets/stylesheets/active_admin/{_header.css.scss → _header.scss}

@@ -1,3 +1,5 @@
+//= depend_on_asset "active_admin/nested_menu_arrow.gif"
+//= depend_on_asset "active_admin/nested_menu_arrow_dark.gif"
 // ----------------------------------- Header
 #header {
   @include primary-gradient;
@@ -73,13 +75,12 @@
       }
 
       &.has_nested > a {
-        background: url(active_admin_image_path('nested_menu_arrow.gif')) no-repeat 89% 50%;
+        background: image-url('active_admin/nested_menu_arrow.gif') no-repeat calc(100% - 7px) 50%;
         padding-right: 20px;
-        z-index: 1050;
       }
 
       &.has_nested.current > a {
-        background: $current-menu-item-background url(active_admin_image_path('nested_menu_arrow_dark.gif')) no-repeat 89% 50%;
+        background: $current-menu-item-background image-url('active_admin/nested_menu_arrow_dark.gif') no-repeat calc(100% - 7px) 50%;
         padding-right: 20px;
       }
 
@@ -91,7 +92,8 @@
       &.has_nested:hover > a {
         @include rounded-top(10px);
         border-bottom: 5px solid $hover-menu-item-background;
-        background: $hover-menu-item-background url(active_admin_image_path('nested_menu_arrow_dark.gif')) no-repeat 89% 50%;
+        background: $hover-menu-item-background image-url('active_admin/nested_menu_arrow_dark.gif') no-repeat calc(100% - 7px) 50%;
+        z-index: 1020;
       }
 
 
@@ -103,7 +105,9 @@
         @include rounded-all(0,10px,10px,10px);
         @include shadow(0, 1px, 3px, #444);
         position: absolute;
-        width: 175px;
+        width: 120%;
+        min-width: 175px;
+        max-width: calc(100% + 20px);
         margin-top: 5px;
         float: left;
         display: none;

data/app/assets/stylesheets/active_admin/components/_batch_actions.scss

@@ -0,0 +1,11 @@
+#collection_selection_toggle_panel {
+  @include clearfix;
+  >.resource_selection_toggle_cell {
+    float:left;
+  }
+  #collection_selection_toggle_explaination {
+    float:left;
+    margin-left:5px;
+    font-style:italic;
+  }
+}

data/app/assets/stylesheets/active_admin/components/_blank_slates.scss

@@ -4,7 +4,6 @@
 
   .blank_slate {
     @include rounded;
-    -webkit-font-smoothing: antialiased;
     border:  $blank-slate-border;
     color: $blank-slate-primary-color;
     display: inline-block;

data/app/assets/stylesheets/active_admin/components/_buttons.scss

@@ -8,4 +8,4 @@ a.member_link {
   white-space: nowrap;
 }
 
-a.button, a:link.button, a:visited.button, input[type=submit] { @include dark-button; }
+a.button, a:link.button, a:visited.button, input[type=submit], input[type=button], button { @include dark-button; }

data/app/assets/stylesheets/active_admin/components/{_date_picker.css.scss → _date_picker.scss}

@@ -1,8 +1,6 @@
 // -------------------------------------- Date Picker
 .ui-datepicker {
   background: #fff;
-  -webkit-background-clip: padding-box;
-  -moz-background-clip: padding-box;
   background-clip: padding-box;
   color: #fff;
   display: none;
@@ -11,8 +9,6 @@
   text-align: center;
   width: 160px;
 
-  background: url(active_admin_image_path('datepicker/datepicker-nipple.png')) no-repeat 0 -40px;
-
   a {
     text-decoration: none;
     &:hover {
@@ -21,12 +17,28 @@
   }
 
   .ui-datepicker-header {
-    background: url(active_admin_image_path('datepicker/datepicker-header-bg.png')) no-repeat 0px 0px;
-    height: 12px;
-    padding: 16px 7px 8px;
+    height: 14px;
+    @include primary-gradient;
+    padding: 12px 5px 7px 4px;
+    margin: 0px 0px 2px 2px;
+    width: 147px;
+    border-top-left-radius: 7px;
+    border-top-right-radius: 7px;
     position: relative;
     z-index: 2000;
 
+    &:before {
+       content: "";
+       position: absolute;
+       right: 45%;
+       top: -6px;
+       width: 0px;
+       height: 0px;
+       border-left: 8.5px solid rgba(0, 0, 0, 0);
+       border-right: 8.5px solid rgba(0, 0, 0, 0);
+       border-bottom: 10px solid #676e73;
+    }
+
     .ui-datepicker-title {
       @include text-shadow(#000);
       color: #fff;
@@ -35,26 +47,40 @@
       font-weight: bold;
       line-height: 0.8em;
       text-align: center;
+
+      .ui-datepicker-month {
+        margin: -4px 0 0 0;
+      }
+      .ui-datepicker-year {
+        margin: -4px 0 0 0;
+      }
     }
 
+
     a {
       color: #fff;
       display: block;
       height: 19px;
       margin-top: -4px;
-      width: 20px;
+      width: 10px;
 
       &.ui-datepicker-prev {
         float: left;
-        background: url(active_admin_image_path('datepicker/datepicker-prev-link-icon.png')) no-repeat 2px 5px;
+        width: 0;
+        height: 0;
+        margin: 0px 0px 0px 4px;
+        border-top: 5px solid transparent;
+        border-right: 5px solid white;
+        border-bottom: 5px solid transparent;
       }
       &.ui-datepicker-next {
         float: right;
-        background: url(active_admin_image_path('datepicker/datepicker-next-link-icon.png')) no-repeat 12px 5px;
-      }
-      &:active {
-        margin-top: -3px;
-        height: 18px;
+        width: 0;
+        height: 0;
+        margin: 0px 4px 0px 0px;
+        border-top: 5px solid transparent;
+        border-left: 5px solid white;
+        border-bottom: 5px solid transparent;
       }
 
       span {

data/app/assets/stylesheets/active_admin/components/_dropdown_menu.scss

@@ -86,8 +86,9 @@
     border: solid 1px darken($primary-color, 10%);
     border-top-color: darken($primary-color, 4%);
     border-bottom-color: darken($primary-color, 17%);
-
     border-radius: 4px;
+    z-index: 2000;
+    display: none;
 
     .dropdown_menu_list {
       display: block;
@@ -105,17 +106,17 @@
       li {
         display: block;
         border-bottom: solid 1px #ebebeb;
-        @include box-sizing(border-box);
+        box-sizing: border-box;
 
         a {
           display: block;
-          @include box-sizing(padding-box);
+          box-sizing: padding-box;
           font-size: 0.95em;
           font-weight: bold;
           padding: 7px 16px 5px;
           text-decoration: none;
           text-align: center;
-          -webkit-font-smoothing: antialiased;
+          white-space: nowrap;
 
           &:hover {
             @include highlight-gradient;

data/app/assets/stylesheets/active_admin/components/_flash_messages.scss

@@ -0,0 +1,37 @@
+body.logged_in {
+  .flash {
+    @include gradient(#f7f1d3, #f5edc5);
+    @include text-shadow(#fafafa);
+    border-bottom: 1px solid #eee098;
+    color: #cb9810;
+    font-weight: bold;
+    font-size: 1.1em;
+    line-height: 1.0em;
+    padding: 13px 30px 11px;
+    position: relative;
+
+    &.flash_notice {
+      @include gradient(#dce9dd, #ccdfcd);
+      border-bottom: 1px solid #adcbaf;
+      color: #416347;
+    }
+    &.flash_error {
+      @include gradient(#f5e4e4, #f1dcdc);
+      border-bottom: 1px solid #e0c2c0;
+      color: #b33c33;
+    }
+  }
+}
+
+body.logged_out {
+  .flash {
+    @include no-shadow;
+    @include text-shadow(#fff);
+    background: none;
+    color: #666;
+    font-weight: bold;
+    line-height: 1.0em;
+    padding: 0;
+    margin-bottom: 8px;
+  }
+}

data/app/assets/stylesheets/active_admin/components/_modal_dialog.scss

@@ -0,0 +1,34 @@
+.ui-widget-overlay {
+  position: fixed;
+  background: rgba(0,0,0,.2);
+  top: 0; left: 0; right: 0; bottom: 0;
+  z-index: 1001;
+}
+
+.ui-dialog {
+  position: fixed;
+  z-index: 1002;
+  @include section-background;
+  box-shadow: rgba(0,0,0,0.5) 0 0 10px;
+
+  .ui-dialog-titlebar {
+    @include section-header;
+    span { font-size: 1.1em }
+  }
+
+  ul { list-style-type: none }
+  li { margin: 10px 0 }
+  label { margin-right: 10px }
+
+  .ui-dialog-buttonpane, form {
+    padding: 7px 15px 13px
+  }
+  .ui-dialog-buttonpane button {
+    & { @include dark-button } // OK
+    &:last-child { @include light-button } // Cancel
+  }
+}
+
+.active_admin_dialog.ui-dialog {
+  .ui-dialog-titlebar-close { display: none }
+}