Skip to content
This repository has been archived by the owner on Aug 9, 2024. It is now read-only.

Commit

Permalink
Merge pull request #485 from Kajabi/ajm_outline_item_polish
Browse files Browse the repository at this point in the history 
SageOutlineItem Polish
  • Loading branch information
@AndrwM
AndrwM authored Oct 23, 2020
2 parents 69840ec + ffb20ea commit a5483f5
Show file tree
Hide file tree
Showing 3 changed files with 89 additions and 88 deletions.
7 changes: 4 additions & 3 deletions lib/sage-frontend/stylesheets/system/patterns/elements/_button.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down Expand Up @@ -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;
}
Expand Down Expand Up @@ -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);
Expand Down
159 changes: 76 additions & 83 deletions lib/sage-frontend/stylesheets/system/patterns/objects/_outline_item.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,11 +19,14 @@ $-collapse-breakpoint-key: md-max;

.sage-outline-item {
display: grid;
align-items: center;
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;
border-left: sage-border();
border-right: sage-border();

// NOTE: Height is governed by a parent React node to allow us
// to dynamically adjust the height of elements depending
Expand All @@ -34,14 +37,12 @@ $-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%;
max-height: rem(80px);
// stylelint-enable order/properties-order

@media (min-width: sage-breakpoint($-collapse-breakpoint-key)) {
// Using static column values to ensure alignment
grid-template-columns: min-content 1fr max-content rem(160px) rem(92px) rem(40px);
grid-template-columns: min-content 1fr max-content rem(140px) rem(140px) rem(24px);
grid-template-areas: "handle-drag title actions-secondary actions-primary status handle-collapse";
}

Expand All @@ -53,17 +54,63 @@ $-collapse-breakpoint-key: md-max;
". actions-primary . handle-collapse";
}

&:not(.sage-outline-item--category) {
// ------------------ ( /Category )
&.sage-outline-item--depth-0.sage-outline-item--category {
margin-top: sage-spacing(xs);
border-top-right-radius: sage-border(radius);
border-top-left-radius: sage-border(radius);
border-top: sage-border();
border-bottom: sage-border();

&:not(.sage-outline-item--expanded) {
border-bottom-right-radius: sage-border(radius);
border-bottom-left-radius: sage-border(radius);
}
}

// ------------------ ( /Category/Post )
&.sage-outline-item--depth-1:not(.sage-outline-item--category) {
border-bottom: sage-border(light);

&.sage-outline-item--last-child {
border-bottom: sage-border();
border-bottom-right-radius: sage-border(radius);
border-bottom-left-radius: sage-border(radius);
}
}

&.sage-outline-item--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();

&.sage-outline-item--last-child:not(.sage-outline-item--expanded) {
border-bottom-right-radius: sage-border(radius);
border-bottom-left-radius: sage-border(radius);
}
}

// ------------------ ( /Category/Category/Post )
&.sage-outline-item--depth-2:not(.sage-outline-item--category) {
padding-left: sage-spacing(xl);
border-bottom: sage-border(light);

&.sage-outline-item--last-child {
border-bottom: sage-border();
}
}

&.sage-outline-item--is-dragging {
border: unset;
box-shadow: inset 0 0 0 1px sage-color(white), inset 0 0 0 2px sage-color(grey, 300);
&.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
// API drag-preview 'capture' action in webkit browsers.
Expand All @@ -76,100 +123,41 @@ $-collapse-breakpoint-key: md-max;
.sage-outline-item__handle-collapse {
visibility: hidden;
}
}

&.sage-outline-item--is-dragging-descendant {
border: unset;
box-shadow: inset 0 0 0 1px sage-color(white), inset 0 0 0 2px sage-color(grey, 300);

.sage-outline-item__actions-primary,
.sage-outline-item__actions-secondary,
.sage-outline-item__handle-collapse {
visibility: hidden;
}

> * {
opacity: 0.5;
}
}

&.sage-outline-item--is-droptarget {
border-radius: sage-border(radius-large);
box-shadow: inset 0 0 0 1px sage-color(white), inset 0 0 0 2px sage-color(primary), inset 0 0 0 5px sage-color(white);
background: repeating-linear-gradient(
45deg,
sage-color(grey, 300) 0,
sage-color(grey, 300) 12px,
sage-color(white) 12px,
sage-color(white) 24px
);

> * {
visibility: hidden;
}
box-shadow: 0 -4px 0 0 sage-color(primary);
}

&.sage-outline-item--is-droptarget-invalid {
border-radius: sage-border(radius-large);
box-shadow: inset 0 0 0 1px sage-color(white), inset 0 0 0 2px sage-color(red, 200), inset 0 0 0 5px sage-color(white);
background: repeating-linear-gradient(
45deg,
sage-color(red, 200) 0,
sage-color(red, 200) 12px,
sage-color(white) 12px,
sage-color(white) 24px
);

> * {
visibility: hidden;
}
}

&.sage-outline-item--depth-0 {
padding: sage-spacing();
}

&.sage-outline-item--depth-1 {
&:not(.sage-outline-item--category) {
padding: sage-spacing(sm) sage-spacing();
}
&.sage-outline-item--category {
margin-left: sage-spacing(lg);
padding: sage-spacing();
}
}

&.sage-outline-item--depth-2 {

&:not(.sage-outline-item--category) {
margin-left: sage-spacing(lg);
padding: sage-spacing(sm) sage-spacing();
}
&.sage-outline-item--category {
margin-left: sage-spacing(xl);
padding: sage-spacing();
}
box-shadow: 0 -4px 0 0 sage-color(red, 300);
}
}

.sage-outline-item__title {
display: flex;
grid-area: title;
color: sage-color(charcoal, 400);
@include truncate;

.sage-outline-item--category & {
@extend %t-sage-body-semi;
}
align-items: center;
min-width: 0;

:not(.sage-outline-item--category) & {
@extend %t-sage-body;
> * {
max-width: 100%;
}
}

.sage-outline-item__actions-secondary {
display: flex;
grid-area: actions-secondary;
flex-direction: row;
align-items: center;

> * {
margin-right: sage-spacing();
}

@media (min-width: sage-breakpoint($-collapse-breakpoint-key)) {
display: none;
Expand All @@ -185,19 +173,23 @@ $-collapse-breakpoint-key: md-max;
}

.sage-outline-item__actions-primary {
display: flex;
grid-area: actions-primary;
align-items: center;
}

.sage-outline-item__status {
display: flex;
grid-area: status;
justify-content: flex-end;
transform: none;
align-items: center;
}

.sage-outline-item__handle-drag {
display: flex;
grid-area: handle-drag;
margin-right: -1 * sage-spacing(xs);
align-items: center;
cursor: grab;

&:active {
Expand Down Expand Up @@ -229,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 {
Expand Down
11 changes: 9 additions & 2 deletions lib/sage_rails/app/views/sage_components/_sage_outline_item.html.erb
View file
Original file line number Diff line number Diff line change
@@ -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 %>
Expand All @@ -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">
Expand Down

0 comments on commit a5483f5

Please sign in to comment.