Save

Kajabi · Oct 23, 2020 · ffb20ea · ffb20ea
1 parent c24e590
commit ffb20ea
Show file tree

Hide file tree

Showing 3 changed files with 39 additions and 32 deletions.
diff --git a/lib/sage-frontend/stylesheets/system/patterns/elements/_button.scss b/lib/sage-frontend/stylesheets/system/patterns/elements/_button.scss
@@ -105,6 +105,7 @@ $-btn-subtle-styles: (
   position: relative;
   min-height: ($-padding-block * 2 + sage-line-height(md));
   padding: $-padding-block sage-spacing(sm);
+  text-align: left; // Prevents text alignment issue when inner text is truncated
   border: 0;
   border-radius: $-btn-border-radius;
   transition: $-btn-transition;
@@ -229,7 +230,7 @@ $-btn-subtle-styles: (
       // Shadow appears on Primary by default but can be toggled off with `--no-shadow`
       @if ($-style-name == primary) {
         box-shadow: $-btn-shadow-base;
-        
+
         &.sage-btn--no-shadow {
           box-shadow: none;
         }
@@ -264,13 +265,13 @@ $-btn-subtle-styles: (
         color: map-get($-styles, hover);
         background-color: transparent;
       }
-    
+
       &:focus,
       &:active {
         color: map-get($-styles, focus);
         background-color: transparent;
       }
-    
+
       &:disabled,
       &[aria-disabled="true"] {
         color: map-get($-styles, disabled);

diff --git a/lib/sage-frontend/stylesheets/system/patterns/objects/_outline_item.scss b/lib/sage-frontend/stylesheets/system/patterns/objects/_outline_item.scss
@@ -21,10 +21,10 @@ $-collapse-breakpoint-key: md-max;
   display: grid;
   align-items: stretch;
   grid-template-rows: repeat(auto-fit, auto);
-  grid-column-gap: sage-spacing(sm);
+  grid-column-gap: sage-spacing(xs);
+  padding: 0 sage-spacing(sm);
   background: sage-color(white);
   will-change: background, box-shadow;
-  padding: 0 sage-spacing(sm);
   border-left: sage-border();
   border-right: sage-border();
 
@@ -37,9 +37,8 @@ $-collapse-breakpoint-key: md-max;
   //       small datasets, Categories have a larger height than
   //       regular Outline Items
   //
-  // stylelint-disable order/properties-order
+  // stylelint-disable-next-line order/properties-order
   height: 100%;
-  // stylelint-enable order/properties-order
 
   @media (min-width: sage-breakpoint($-collapse-breakpoint-key)) {
     // Using static column values to ensure alignment
@@ -55,11 +54,9 @@ $-collapse-breakpoint-key: md-max;
       ". actions-primary . handle-collapse";
   }
 
-// ------------------------------------------------------------------
-
-  // ------------------ TOP LEVEL CATEGORY
+  // ------------------ ( /Category )
   &.sage-outline-item--depth-0.sage-outline-item--category {
-    margin-top: sage-spacing(sm);
+    margin-top: sage-spacing(xs);
     border-top-right-radius: sage-border(radius);
     border-top-left-radius: sage-border(radius);
     border-top: sage-border();
@@ -71,7 +68,7 @@ $-collapse-breakpoint-key: md-max;
     }
   }
 
-  // ------------------ TOP LEVEL POST
+  // ------------------ ( /Category/Post )
   &.sage-outline-item--depth-1:not(.sage-outline-item--category) {
     border-bottom: sage-border(light);
 
@@ -82,20 +79,20 @@ $-collapse-breakpoint-key: md-max;
     }
   }
 
-  // ------------------ 2ND LEVEL CATEGORY
+  // ------------------ ( /Category/Category )
   &.sage-outline-item--depth-1.sage-outline-item--category {
     padding-left: sage-spacing(lg);
+    margin-top: rem(-1px);
     border-top: sage-border();
     border-bottom: sage-border();
-    margin-top: rem(-1px);
 
     &.sage-outline-item--last-child:not(.sage-outline-item--expanded) {
       border-bottom-right-radius: sage-border(radius);
       border-bottom-left-radius: sage-border(radius);
     }
   }
 
-  // ------------------ 2ND LEVEL POST
+  // ------------------ ( /Category/Category/Post )
   &.sage-outline-item--depth-2:not(.sage-outline-item--category) {
     padding-left: sage-spacing(xl);
     border-bottom: sage-border(light);
@@ -105,12 +102,14 @@ $-collapse-breakpoint-key: md-max;
     }
   }
 
-  // ------------------------------------------------------------------
-
   &.sage-outline-item--is-dragging,
   &.sage-outline-item--is-dragging-descendant {
     margin: 0;
+
+    // stylelint-disable-next-line declaration-no-important
     border: 1px solid sage-color(grey) !important;
+
+    // stylelint-disable-next-line declaration-no-important
     border-radius: unset !important;
 
     // NOTE: Forces hardware acceleration, this resolves issue with HTML5 Drag & Drop
@@ -126,7 +125,7 @@ $-collapse-breakpoint-key: md-max;
     }
 
     > * {
-      opacity: 0.75;
+      opacity: 0.5;
     }
   }
 
@@ -135,23 +134,18 @@ $-collapse-breakpoint-key: md-max;
   }
 
   &.sage-outline-item--is-droptarget-invalid {
-    box-shadow: 0 -4px 0 0 sage-color(red, 300), inset 0 0 0 2px sage-color(red, 300);
+    box-shadow: 0 -4px 0 0 sage-color(red, 300);
   }
 }
 
 .sage-outline-item__title {
+  display: flex;
   grid-area: title;
-  color: sage-color(charcoal, 400);
   align-items: center;
-  display: flex;
-  @include truncate;
+  min-width: 0;
 
-  .sage-outline-item--category & {
-    @extend %t-sage-body-semi;
-  }
-
-  :not(.sage-outline-item--category) & {
-    @extend %t-sage-body;
+  > * {
+    max-width: 100%;
   }
 }
 
@@ -161,6 +155,10 @@ $-collapse-breakpoint-key: md-max;
   flex-direction: row;
   align-items: center;
 
+  > * {
+    margin-right: sage-spacing();
+  }
+
   @media (min-width: sage-breakpoint($-collapse-breakpoint-key)) {
     display: none;
     visibility: hidden;
@@ -175,9 +173,9 @@ $-collapse-breakpoint-key: md-max;
 }
 
 .sage-outline-item__actions-primary {
+  display: flex;
   grid-area: actions-primary;
   align-items: center;
-  display: flex;
 }
 
 .sage-outline-item__status {
@@ -189,9 +187,9 @@ $-collapse-breakpoint-key: md-max;
 }
 
 .sage-outline-item__handle-drag {
+  display: flex;
   grid-area: handle-drag;
   align-items: center;
-  display: flex;
   cursor: grab;
 
   &:active {
@@ -223,6 +221,7 @@ $-collapse-breakpoint-key: md-max;
   display: flex;
   grid-area: handle-collapse;
   justify-content: flex-end;
+  align-items: center;
 }
 
 .sage-outline-item__children {

diff --git a/lib/sage_rails/app/views/sage_components/_sage_outline_item.html.erb b/lib/sage_rails/app/views/sage_components/_sage_outline_item.html.erb
@@ -1,4 +1,6 @@
-<section class="
+<section
+  style="height: 64px;" <%# This height is handled dynamically in React by a containing element %>
+  class="
     sage-outline-item
     <%= "sage-outline-item--category" if component.category %>
     <%= "sage-outline-item--depth-#{component.depth}" if component.depth %>
@@ -12,7 +14,12 @@
     title="Click to drag"
   ></div>
   <h1 class="sage-outline-item__title">
-    <%= component.title %>
+    <%= sage_component SageButton, {
+      value: component.title,
+      style: "secondary",
+      subtle: true,
+      small: !component.category
+    } %>
   </h1>
   <% if component.actions_primary %>
     <div class="sage-outline-item__actions-primary">