integral 1.4.0 → 1.5.0

data/app/assets/stylesheets/integral/backend/devise.sass

@@ -34,7 +34,6 @@ body.devise
     margin-bottom: 0
     margin-left: -4em
 
-  .fa
-    color: white
+  i
+    color: $white
     width: 1rem
-

data/app/assets/stylesheets/integral/backend/materialize-tags.sass

@@ -9,6 +9,7 @@
     margin: 0.2em 0
     i
       cursor: pointer
+      padding-left: .25rem
 
   .tt-hint
     position: relative !important

data/app/assets/stylesheets/integral/backend/modules/dropdown_pane_notifications.scss

@@ -0,0 +1,150 @@
+.dropdown-pane--notifications {
+  width: 340px;
+  padding: 0;
+  padding-bottom: .5rem;
+  &:before {
+    content: ' ';
+    width: 2.5em;
+    height: 1.5em;
+    border-radius: 0 0 0.5em 0;
+    background: linear-gradient(-45deg, #1b8ecf 50%, transparent 50%);
+    position: absolute;
+    margin: 0;
+    right: 0.5em;
+    transform: rotate(225deg) skewX(8deg) skewY(8deg);
+  }
+  &:after {
+    content: ' ';
+    position: absolute;
+    right: 0;
+    top: -2.2em;
+    height: 2.2em;
+    width: 70%;
+  }
+  hr {
+    margin: .5rem 0;
+  }
+  ul {
+    li {
+      // &:last-of-type {
+      //   margin-bottom: 0 !important;
+      // }
+      a {
+        padding: 0;
+      }
+    }
+  }
+
+  .section {
+    padding: .5rem 0;
+    &:last-of-type {
+      max-height: 225px;
+      overflow: scroll;
+    }
+    &:first-of-type {
+      border-radius: 5px 5px 0 0;
+      background-color: $primary-color;
+      color: $white;
+      .title {
+        font-size: 1.3em;
+        display: block;
+      }
+      .subtitle {
+        font-size: 0.85em;
+        display: block;
+      }
+    }
+  }
+}
+
+.notification-list {
+  &::before {
+    background: $light-gray;
+    content: '';
+    height: 100%;
+    left: 1rem;
+    position: absolute;
+    top: 0;
+    width: 2px;
+  }
+  &-loader {
+    padding: .5rem 0;
+    text-align: center;
+  }
+}
+
+
+.notification {
+  position: relative;
+  padding: .4rem 0;
+  margin: 0 !important;
+
+  &.unread {
+    background-color: transparentize($primary-color, 0.95);
+
+    .notification-icon {
+      background-color: $primary-color;
+    }
+  }
+
+  &-icon {
+    background: $light-gray;
+    border-radius: 50%;
+    height: 6px;
+    width: 6px;
+    left: 1rem;
+    top: 15px;
+    margin-left: -2px;
+    overflow: hidden;
+    position: absolute;
+
+    i {
+      width: 100%;
+      font-size: 1.25rem;
+      color: $white;
+      position: absolute;
+      top: 50%;
+      transform: translateY(-50%);
+      text-align: center;
+    }
+
+    &.unread {
+      background: $primary-color;
+    }
+  }
+
+  &-content {
+    padding-left: 2rem;
+    padding-right: 1rem;
+  }
+
+  &-title {
+    display: block;
+    font-size: .9rem;
+  }
+  &-action {
+    text-transform: uppercase;
+    color: $primary-color;
+    font-size: .6rem;
+    padding-bottom: 5px;
+  }
+
+  &-created-at {
+    color: $dark-gray;
+    font-size: .8rem;
+  }
+
+  &-whodunnit {
+    display: block;
+    font-size: .8rem;
+    opacity: .5;
+    &:hover {
+      opacity: 1;
+    }
+    img {
+      width: 15px;
+      height: 15px;
+    }
+  }
+}
+

data/app/assets/stylesheets/integral/backend/modules/dropdown_pane_profile.scss

@@ -0,0 +1,59 @@
+.dropdown-pane--profile {
+  padding: 0;
+  &:before {
+    content: ' ';
+    width: 2.5em;
+    height: 1.5em;
+    border-radius: 0 0 0.5em 0;
+    background: linear-gradient(-45deg, #1b8ecf 50%, transparent 50%);
+    position: absolute;
+    margin: 0;
+    right: 0.5em;
+    transform: rotate(225deg) skewX(8deg) skewY(8deg);
+  }
+  &:after {
+    content: ' ';
+    position: absolute;
+    right: 0;
+    top: -2.2em;
+    height: 2.2em;
+    width: 70%;
+  }
+  .section {
+    padding: 1.5em 1.2em;
+    &:first-of-type {
+      border-radius: 5px 5px 0 0;
+      background-color: $primary-color;
+      color: $white;
+      .avatar {
+        float: left;
+        margin-right: 1em;
+        width: 60px;
+        height: 60px;
+      }
+      .name {
+        font-size: 1.3em
+      }
+      .email {
+        font-size: 0.85em
+      }
+    }
+    &:last-of-type {
+      .menu a {
+        padding-left: 0;
+        color: $secondary-color;
+        &:hover {
+          color: $primary-color;
+        }
+        i {
+          width: 30px;
+          text-align: center;
+        }
+      }
+      .button {
+        display: inline-block;
+        padding: 0.8em 2em;
+      }
+    }
+  }
+}

data/app/assets/stylesheets/integral/backend/shared.sass

@@ -47,6 +47,8 @@
 
 .button
   padding: 0.7em 1.5em
+  &.has-tip
+    cursor: pointer
   &.primary
     color: $white
   &.white
@@ -54,7 +56,6 @@
     background-color: $white
     color: $primary-color
     font-size: .8rem
-    margin: .5rem 0
     &:hover
       box-shadow: $card-shadow
       color: $secondary-color
@@ -71,12 +72,16 @@ span.label.clear
 input:disabled, input[readonly], textarea:disabled, textarea[readonly]
   border: none
 
+input[type='text'], textarea, select
+  margin-bottom: 0
+
 input[readonly].datepicker
   border: solid 0.5px #d4dfef
   background-color: transparent
   cursor: pointer
 
 .input.alternative
+  margin-bottom: 0.75rem
   label
     font-size: .9rem
     margin-bottom: 0
@@ -88,8 +93,8 @@ input[readonly].datepicker
   > select, > textarea, > input[type=text], > input[type=url], > input[type=number]
     border-radius: 0
     -webkit-appearance: none
+    margin-bottom: 0
     &.has-error
-      margin-bottom: 0
       color: $alert-color
       border-color: $alert-color
       background-color: transparentize($alert-color, 0.9)
@@ -100,6 +105,8 @@ input[readonly].datepicker
     margin: .5em 0
     font-size: .9rem
     color: $alert-color
+  .help-text
+    margin-top: 5px
 
 ul.accordion
   background-color: transparent
@@ -292,11 +299,14 @@ ul.tabs
         font-size: .75rem
 
 .record-selector.reveal
+  .create-button
+    margin-bottom: 0
   .loader
     margin: 3rem 0
     color: $primary-color
   .top-bar
     margin-top: 1em
+    margin-bottom: 1rem
     .filter.search
       max-width: 16em
       input
@@ -371,6 +381,8 @@ ul.tabs
 .card.list-management
   .top-bar
     @include top-bar-unstack
+    .input.alternative
+      margin-bottom: 0
     .top-bar-right .input.alternative
       display: flex
       align-items: center
@@ -485,6 +497,10 @@ ul.tabs
 
 
 /** Forms **/
+.input
+  .form-error
+    margin: 0
+
 .field-with-errors
   > input, > textarea, > select
     @include form-input-error
@@ -536,6 +552,12 @@ p.help-text
     &.collection_radio_buttons
       font-size: 0.7em
       color: $body-font-color-secondary
+
+.radio_buttons .radio label
+  font-size: 1rem
+  color: $body-font-color-secondary
+  margin-bottom: 0
+
 // Filters
 .filter.search
   position: relative
@@ -761,6 +783,7 @@ table
   transform: rotate(-135deg)
 
 .help-text
+  margin-top: 5px
   margin-bottom: 0
 
 .card-action-title
@@ -837,3 +860,19 @@ table
 
 .tr--clickable
   cursor: pointer
+
+.grid-x
+  > .cell
+    @include xy-cell-gutters($gutter-type: padding) //($gutters, $gutter-type, $gutter-position, $breakpoint, $vertical)
+
+.grid-y, .grid-x
+  > .input, > .image-select
+    @include card-container($card-background, $card-font-color, $card-margin-bottom, $card-border, $card-border-radius, $card-shadow)
+    @include card-section
+    overflow: initial
+
+.card
+  @include card-section
+
+.card-unpadded
+  @include card-container($card-background, $card-font-color, $card-margin-bottom, $card-border, $card-border-radius, $card-shadow)

data/app/assets/stylesheets/integral/frontend/layout.sass

@@ -64,3 +64,13 @@ main
     button
       margin-top: 1rem
 
+#admin-bar
+  @include top-bar-unstack
+  background-color: $white
+  z-index: 1000
+  position: relative
+  @include breakpoint(small down)
+    padding-left: 0
+    padding-right: 0
+  .menu
+    background-color: $white

data/app/assets/stylesheets/integral/support/media-query-indicator.sass

@@ -1,10 +1,10 @@
 /** Indicator used to display to developer what media query is currently active
   *
-  * Red: Small Screens
-  * Orange: Medium Screens
-  * Green: Large and above
+  * Red: Small screens
+  * Orange: Medium screens
+  * Green: Large screens
   * Blue: Xlarge Screens
-  * Black: XXlarge and above
+  * Black: XXlarge screens and above
   */
 .query-indicator
   display: block

data/app/controllers/integral/backend/activities_controller.rb

@@ -3,45 +3,35 @@ module Integral
     # Activity management
     class ActivitiesController < BaseController
       before_action :authorize_with_klass, except: [:widget]
-      before_action -> { set_grid }
 
       def widget
-        activities = cast_activities(@grid.assets.limit(10))
+        activities = cast_activities(resource_grid.assets.where.not(whodunnit: nil).limit(10))
         last_created_at = activities.last.created_at.utc if activities.present?
 
         render json: { content: render_to_string(partial: 'integral/backend/activities/activity', collection: activities), last_created_at: last_created_at }
       end
 
-      # POST /grid
-      # AJAX grid for activities
-      # TODO: Could move this grid action into index action and respond different if json request
-      def grid
-        render json: { content: render_to_string(partial: 'integral/backend/activities/grid',
-                                                 locals: { grid: @grid }) }
-      end
-
       # GET /
       # Lists all activities
-      def index; end
-
-      # TODO: Implement this or some particular versioned one through routes.
-      #
-      # /admin/pages/activity -> All Page activity
-      # /admin/pages/:id/activity -> Specific Page activity
-      #
-      # /admin/posts/activity -> All Page activity
-      # /admin/posts/:id/activity -> Specific Page activity
-      #
-      # etc
-      #
-      # # GET /activity:id
-      # # View an Activity
-      # def show
-      #   @activity = Integral::Version.find(params[:id])
-      # end
+      def index
+        respond_to do |format|
+          format.html
+          format.json do
+            render json: { content: render_to_string(partial: "integral/backend/shared/grid/grid") }
+          end
+        end
+      end
 
       private
 
+      def list_backend_resources_url
+        backend_activities_url
+      end
+
+      def backend_resource_url(resource)
+        resource.url
+      end
+
       def set_breadcrumbs
         add_breadcrumb I18n.t('integral.breadcrumbs.dashboard'), :backend_dashboard_url
         add_breadcrumb I18n.t('integral.breadcrumbs.activity'), :backend_activities_url
@@ -61,6 +51,10 @@ module Integral
         { 'order' => 'date', 'page' => 1, descending: true }.merge(grid_params)
       end
       helper_method :grid_options
+
+      def render_default_action_bar?
+        false
+      end
     end
   end
 end