Commit d3198f0e authored by gijs's avatar gijs

Renabled D&D, added indicator of new position

parent b2d414b2
......@@ -176,10 +176,10 @@ input {
}
button, submit, reset {
font-size: 95%;
font-size: 90%;
color: var(--text-color);
border: none;
padding: .4em 1em .3em 1em;
padding: .3em 1em .2em 1em;
background: transparent;
margin-top: .15em;
}
......@@ -732,7 +732,7 @@ li li { padding-left: var(--row-indent); }
cursor: move;
visibility: hidden;
position: absolute;
left: -10px;
left: -5px;
}
.axis-row:hover .icon--handle { visibility: visible; }
......@@ -840,7 +840,7 @@ li + li .alt-symbol { display: none; }
text-decoration: line-through;
} */
[data-contingent="true"]>.axis-row>.axis-row--body>.axis-title:after{
[data-contingent="true"]>.axis-row>.axis-row--body>.axis-title:before{
position: absolute;
top: 50%;
left: 0;
......@@ -850,7 +850,7 @@ li + li .alt-symbol { display: none; }
content: "";
}
.axis[data-sublines="true"][data-collapsed="true"] .axis-title:after {
.axis[data-sublines="true"][data-collapsed="true"] .axis-row--body:after {
/* color: rgb(196, 196, 196); */
content: "…";
display: inline-block;
......@@ -983,6 +983,16 @@ li form { color: var(--color-01); }
.permission-list label { display: inline; }
/* Lines connection the axis
==========================================================================
The lines are drawn using background gradients.
The li's draw the vertical line, the last li draws it only partly: 1em.
The axis-row headers drow the horizontal lines.
The axis-row header in the first and last li also block the vertical line
partially.
*/
.axis > header .axis-row--header {
background:
linear-gradient(to right,
......@@ -998,46 +1008,46 @@ li form { color: var(--color-01); }
.axis:first-child > header .axis-row--header {
background:
linear-gradient(to right,
var(--background-color) calc(var(--row-indent) * .5 - calc(var(--axis-line-width) * .5)),
var(--background-color) calc((var(--row-indent) - var(--axis-line-width)) / 2),
transparent calc((var(--row-indent) - var(--axis-line-width)) / 2)),
linear-gradient(to bottom,
var(--background-color) calc((50% - calc(var(--axis-bottom-padding) * .5)) - calc(var(--axis-line-width) * .5)),
var(--row-color) calc((50% - calc(var(--axis-bottom-padding) * .5)) - calc(var(--axis-line-width) * .5)),
var(--row-color) calc((50% - calc(var(--axis-bottom-padding) * .5)) + calc(var(--axis-line-width) * .5)),
transparent calc((50% - calc(var(--axis-bottom-padding) * .5)) + calc(var(--axis-line-width) * .5)));
var(--background-color) calc((100% - var(--axis-bottom-padding) - var(--axis-line-width)) / 2),
var(--row-color) calc((100% - var(--axis-bottom-padding) - var(--axis-line-width)) / 2),
var(--row-color) calc((100% - var(--axis-bottom-padding) + var(--axis-line-width)) / 2),
transparent calc((100% - var(--axis-bottom-padding) + var(--axis-line-width)) / 2));
}
.axis:last-child > header .axis-row--header {
background:
linear-gradient(to right,
var(--background-color) calc(var(--row-indent) * .5 - calc(var(--axis-line-width) * .5)),
var(--background-color) calc((var(--row-indent) - var(--axis-line-width)) / 2),
transparent calc((var(--row-indent) - var(--axis-line-width)) / 2)),
linear-gradient(to bottom,
transparent calc((50% - calc(var(--axis-bottom-padding) * .5)) - calc(var(--axis-line-width) * .5)),
var(--row-color) calc((50% - calc(var(--axis-bottom-padding) * .5)) - calc(var(--axis-line-width) * .5)),
var(--row-color) calc((50% - calc(var(--axis-bottom-padding) * .5)) + calc(var(--axis-line-width) * .5)),
var(--background-color) calc((50% - calc(var(--axis-bottom-padding) * .5)) + calc(var(--axis-line-width) * .5)));
transparent calc((100% - var(--axis-bottom-padding) - var(--axis-line-width)) / 2),
var(--row-color) calc((100% - var(--axis-bottom-padding) - var(--axis-line-width)) / 2),
var(--row-color) calc((100% - var(--axis-bottom-padding) + var(--axis-line-width)) / 2),
var(--background-color) calc((100% - var(--axis-bottom-padding) + var(--axis-line-width)) / 2)));
}
.axis:only-child > header .axis-row--header {
.axis:only-child > header .axis-row--header, .axis.ui-sortable-helper > header .axis-row--header {
background:
linear-gradient(to right,
var(--background-color) calc(var(--row-indent) * .5 - calc(var(--axis-line-width) * .5)),
var(--background-color) calc((var(--row-indent) - var(--axis-line-width)) / 2),
transparent calc((var(--row-indent) - var(--axis-line-width)) / 2)),
linear-gradient(to bottom,
var(--background-color) calc((50% - calc(var(--axis-bottom-padding) * .5)) - calc(var(--axis-line-width) * .5)),
var(--row-color) calc((50% - calc(var(--axis-bottom-padding) * .5)) - calc(var(--axis-line-width) * .5)),
var(--row-color) calc((50% - calc(var(--axis-bottom-padding) * .5)) + calc(var(--axis-line-width) * .5)),
var(--background-color) calc((50% - calc(var(--axis-bottom-padding) * .5)) + calc(var(--axis-line-width) * .5)));
var(--background-color) calc((100% - var(--axis-bottom-padding) - var(--axis-line-width)) / 2),
var(--row-color) calc((100% - var(--axis-bottom-padding) - var(--axis-line-width)) / 2),
var(--row-color) calc((100% - var(--axis-bottom-padding) + var(--axis-line-width)) / 2),
var(--background-color) calc((100% - var(--axis-bottom-padding) + var(--axis-line-width)) / 2));
}
.axis {
background: linear-gradient(to right,
transparent calc(var(--row-indent) * .5 - calc(var(--axis-line-width) * .5)),
var(--row-color) calc(var(--row-indent) * .5 - calc(var(--axis-line-width) * .5)),
var(--row-color) calc(var(--row-indent) * .5 + calc(var(--axis-line-width) * .5)),
transparent calc(var(--row-indent) * .5 + calc(var(--axis-line-width) * .5)));
transparent calc((var(--row-indent) - var(--axis-line-width)) / 2),
var(--row-color) calc((var(--row-indent) - var(--axis-line-width)) / 2),
var(--row-color) calc((var(--row-indent) + var(--axis-line-width)) / 2),
transparent calc((var(--row-indent) + var(--axis-line-width)) / 2));
}
.axis:last-child {
......@@ -1046,14 +1056,21 @@ li form { color: var(--color-01); }
var(--background-color) 1em
),
linear-gradient(to right,
transparent calc(var(--row-indent) * .5 - calc(var(--axis-line-width) * .5)),
var(--row-color) calc(var(--row-indent) * .5 - calc(var(--axis-line-width) * .5)),
var(--row-color) calc(var(--row-indent) * .5 + calc(var(--axis-line-width) * .5)),
transparent calc(var(--row-indent) * .5 + calc(var(--axis-line-width) * .5)));
transparent calc((var(--row-indent) - var(--axis-line-width)) / 2),
var(--row-color) calc((var(--row-indent) - var(--axis-line-width)) / 2),
var(--row-color) calc((var(--row-indent) + var(--axis-line-width)) / 2),
transparent calc((var(--row-indent) + var(--axis-line-width)) / 2));
}
#axis-wrapper > ol > li > header .axis-row--header{
background: none;
}
.axis:nth-child(n + 2) .icon--tag { display: none; }
\ No newline at end of file
.axis:nth-child(n + 2) .icon--tag { display: none; }
.axis.placeholder:before {
content: "▶";
color: var(--row-color);
position: absolute;
left: 0;
}
\ No newline at end of file
......@@ -1575,31 +1575,31 @@ window.W = window.W || {};
var permissionView = new W.PermissionView({ collection: permissions });
this.showChildView('permissions', permissionView);
// this.getRegion('mainline').$el.nestedSortable({
// placeholder: 'placeholder',
// forcePlaceholderSize: true,
// helper: 'clone',
// handle: '.icon--handle',
// isTree: true,
// items: 'li',
// toleranceElement: '> section',
// protectRoot: true,
// rootID: 'foo',
// isAllowed: function (placeholder, placeholderParent, currentItem) {
// return true;
// },
// relocate: function (event, ui) {
// /*
// * When the sort action is over:
// * 1. trigger an event "relocate" on the item beeing sorted, along with its index
// * 2. listen and catch event "relocate" on the view that is responsible for the item
// * 3. trigger an event "relocateChild" on the parent element, along with the index, and the item model
// * 4. listen and catch event "relocateChild" on the view that is responsible for the parent item
// * 5. console.log that
// */
// ui.item.trigger("relocate", ui);
// },
// });
this.getRegion('mainline').$el.nestedSortable({
placeholder: 'axis placeholder',
forcePlaceholderSize: true,
helper: 'clone',
handle: '.icon--handle',
isTree: true,
items: 'li',
toleranceElement: '> header',
protectRoot: true,
rootID: 'foo',
isAllowed: function (placeholder, placeholderParent, currentItem) {
return true;
},
relocate: function (event, ui) {
/*
* When the sort action is over:
* 1. trigger an event "relocate" on the item beeing sorted, along with its index
* 2. listen and catch event "relocate" on the view that is responsible for the item
* 3. trigger an event "relocateChild" on the parent element, along with the index, and the item model
* 4. listen and catch event "relocateChild" on the view that is responsible for the parent item
* 5. console.log that
*/
ui.item.trigger("relocate", ui);
},
});
},
onBeforeDestroy: function () {
......
......@@ -99,9 +99,9 @@
<!-- <button name="toggle"></button> -->
<% } %>
</section>
<form></form>
</header>
<form></form>
<% if (sublines.length) { %>
<ol></ol>
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment