Andal.LND/edx-platform
6
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Studio: re-implemeting visual styling for drag and drop:

Browse Source 
* adding back in drag and drop indicators to outline DOM
* correcting visual display of drag action in outline UI
* adjusting styling of outline drag and drop indicators
* adjusting styling of drag and drop was-dropped state
This commit is contained in:
Brian Talbot
2014-07-24 12:19:25 -04:00
committed by cahrens
parent 650bdc2fe7
commit 988324d0a0
4 changed files with 102 additions and 53 deletions
Download Patch File Download Diff File Expand all files Collapse all files

19
cms/static/sass/_shame.scss
View File

@@ -25,15 +25,18 @@
// ====================
// needed to override ui-window styling for dragging state (outline selectors get too specific)
.courseware-section.is-dragging {
box-shadow: 0 1px 2px 0 $shadow-d1 !important;
border: 1px solid $gray-d3 !important;
}
// overriding outline styling for general drag and drop cases
.outline-section, .outline-subsection {
.courseware-section.is-dragging.valid-drop {
border-color: $blue-s1 !important;
box-shadow: 0 1px 2px 0 $blue-t2 !important;
// STATE: is dragging
&.is-dragging {
border-color: $gray-d3;
}
// STATE: is dragging + valid drop
&.valid-drop {
border-color: $ui-action-primary-color-focus;
}
}
// ====================

23
cms/static/sass/assets/_anims.scss
View File

@@ -271,3 +271,26 @@
%anim-pulse {
@include animation(pulse $tmg-f1 ease-in-out 1);
}
// ====================
// was-dropped
@include keyframes(was-dropped) {
0% {
opacity: 1.0;
}
50% {
opacity: 0.5;
}
100% {
opacity: 1.0;
}
}
// canned animation - use if you want out of the box/non-customized anim
%anim-was-dropped {
@include animation(was-dropped $tmg-f1 ease-in-out 1);
}

20
cms/static/sass/elements/_controls.scss
View File

@@ -1,8 +1,6 @@
// studio - elements - UI controls
// ====================
// ====================
// general actions
%action {
@extend %ui-fake-link;
@@ -350,7 +348,7 @@
// UI: elem is draggable
.is-draggable {
@include transition(border-color $tmg-f2 ease-in-out 0, box-shadow $tmg-f2 ease-in-out 0);
@include transition(border-color $tmg-f2 ease-in-out 0, box-shadow $tmg-f2 ease-in-out 0, margin $tmg-f2 ease-in-out 0);
position: relative;
.draggable-drop-indicator {
@@ -390,13 +388,10 @@
// UI: condition - valid drop
&.valid-drop {
border-color: $blue-s1;
box-shadow: 0 1px 2px 0 $blue-t2;
border-color: $ui-action-primary-color-focus;
box-shadow: 0 1px 2px 0 rgba($ui-action-primary-color-focus, 0.50);
}
}
.was-dragging {
@include transition(transform $tmg-f2 ease-in-out 0);
}
// UI: drag state - was dragging
.was-dragging {
@@ -407,6 +402,7 @@
.drop-target {
&.drop-target-before {
margin-top: ($baseline*1.5);
> .draggable-drop-indicator-before {
opacity: 1.0;
@@ -414,9 +410,17 @@
}
&.drop-target-after {
margin-bottom: ($baseline*1.5);
> .draggable-drop-indicator-after {
opacity: 1.0;
}
}
}
// UI: drop state - was dropped
.was-dropped {
@include animation(was-dropped $tmg-avg ease-in-out 1);
border-color: $ui-action-primary-color-focus;
box-shadow: 0 1px 2px 0 rgba($ui-action-primary-color-focus, 0.50);
}

93
cms/static/sass/views/_outline.scss
View File

@@ -246,6 +246,16 @@
}
}
}
// STATE: drag and drop
.drop-target-prepend .draggable-drop-indicator-initial {
opacity: 1.0;
}
// STATE: was dropped
&.was-dropped {
border-color: $blue;
}
}
// outline: sections
@@ -320,6 +330,11 @@
@extend %outline-item-content-hidden;
}
}
// STATE: drag and drop - was dropped
&.was-dropped {
border-left-color: $ui-action-primary-color-focus;
}
}
// outline: subsections
@@ -439,49 +454,36 @@
// --------------------
.outline-section {
.ui-splint-indicator {
height: ($baseline/10);
margin-left: ($baseline/4);
}
.draggable-drop-indicator-before {
top: -($baseline/2);
top: -($baseline*0.75);
left: 0;
}
.draggable-drop-indicator-after {
bottom: -13px;
bottom: -($baseline*0.75);
left: 0;
}
// CASE: DnD - empty subsection with unit dropping
.drop-target-prepend .draggable-drop-indicator-initial {
opacity: 1.0;
}
// STATE: was dropped
&.was-dropped {
background-color: $ui-update-color;
}
}
// UI: drag and drop: subsection
.outline-subsection {
.ui-splint-indicator {
height: ($baseline/10);
margin-left: ($baseline*1.25);
}
.draggable-drop-indicator-before {
top: 0;
top: -($baseline*0.75);
}
.draggable-drop-indicator-after {
bottom: 0;
}
// CASE: DnD - empty subsection with unit dropping
.drop-target-prepend .draggable-drop-indicator-initial {
opacity: 1.0;
}
// STATE: was dropped
&.was-dropped {
> .section-item {
background-color: $ui-update-color !important; // nasty, but needed for specificity
}
bottom: -($baseline*0.75);
}
}
@@ -489,24 +491,41 @@
.outline-unit {
.draggable-drop-indicator-before {
top: 0;
top: -($baseline*0.75);
}
.draggable-drop-indicator-after {
bottom: 0;
}
// STATE: was dropped
&.was-dropped {
> .section-item {
background-color: $ui-update-color !important; // nasty, but needed for specificity
}
bottom: -($baseline*0.75);
}
}
// UI: drag and drop: splints
.ui-splint-indicator {
position: relative;
.draggable-drop-indicator {
@extend %ui-depth3;
@include transition(opacity $tmg-f2 linear 0s);
@include size(100%, auto);
position: absolute;
border-top: 1px solid $blue-l1;
opacity: 0.0;
*[class^="icon-caret"] {
@extend %t-icon5;
position: absolute;
top: -12px;
left: -($baseline/4);
color: $blue-s1;
}
}
.draggable-drop-indicator-before {
top: -($baseline/2);
}
.draggable-drop-indicator-after {
bottom: -($baseline/2);
}
}
}