Improved drag&drop handler rendering as suggested by Roberto Pasini

master-GE
Giulio Cesare Solaroli 2015-08-03 17:32:35 +02:00
parent b8abf8aea4
commit c99e8bcd71
3 changed files with 97 additions and 19 deletions

View File

@ -3215,7 +3215,7 @@ div.cardList.narrow {
font-size: 20pt; }
.content .cardField .fieldEditAction .removeField:hover {
color: #9b0000; }
.content .cardField .fieldEditAction .dragHandler {
.content .cardField .fieldEditAction .dragHandler3 {
cursor: grab;
cursor: -moz-grab;
cursor: -webkit-grab;
@ -3223,19 +3223,52 @@ div.cardList.narrow {
width: 28px;
height: 20px;
margin-left: 6px;
display: block; }
.content .cardField .fieldEditAction .dragHandler3:active {
cursor: grabbing;
cursor: -moz-grabbing;
cursor: -webkit-grabbing; }
.content .cardField .fieldEditAction .dragHandler {
display: block;
/*
@include icon-font();
color: #aaa;
font-size: 15pt;
margin: $iconMargin;
margin-left: 10px;
*/ }
box-sizing: border-box;
width: 5px;
height: 24px;
margin-left: 15px;
border: 1px solid #E8E8E8;
border-top: 0;
border-bottom: 0;
cursor: grab;
cursor: -moz-grab;
cursor: -webkit-grab; }
.content .cardField .fieldEditAction .dragHandler:active {
cursor: grabbing;
cursor: -moz-grabbing;
cursor: -webkit-grabbing; }
.content .cardField .fieldEditAction .dragHandler:before {
display: block;
box-sizing: border-box;
content: '';
position: relative;
left: -1px;
right: -2px;
height: 100%;
width: 5px;
border: 2px dotted #FFF;
border-top: 0;
border-bottom: 0;
z-index: 2; }
.content .cardField .fieldEditAction .dragHandler:after {
display: block;
box-sizing: border-box;
content: '';
position: relative;
top: -24px;
left: 0px;
right: 0px;
height: 100%;
border: 1px solid #EEE;
border-top: 0;
border-bottom: 0; }
.content .cardField .fieldValues {
-webkit-box-flex: 1;
-webkit-flex: 1;

File diff suppressed because one or more lines are too long

View File

@ -437,7 +437,9 @@ $cardViewBasePadding: 10px;
};
}
.dragHandler {
.dragHandler3 {
// @include dotted-background();
@include cursor-grab();
@ -453,19 +455,62 @@ $cardViewBasePadding: 10px;
height: 20px;
margin-left: 6px;
display: block;
/*
@include icon-font();
color: #aaa;
font-size: 15pt;
margin: $iconMargin;
margin-left: 10px;
*/
&:active {
@include cursor-grabbing();
};
}
$dragHandlerHeight: 24px;
$dragHandlerWidth: 5px;
.dragHandler {
display: block;
box-sizing: border-box;
width: $dragHandlerWidth;
height: $dragHandlerHeight;
margin-left: 15px;
border:1px solid #E8E8E8;
// border:1px solid red;
border-top:0;
border-bottom:0;
@include cursor-grab();
&:active {
@include cursor-grabbing();
}
&:before {
display: block;
box-sizing: border-box;
content:'';
position: relative;
left:-1px;
right:-2px;
height: 100%;
width: $dragHandlerWidth;
border:2px dotted #FFF;
// border:2px dotted blue;
border-top:0;
border-bottom:0;
z-index:2;
}
&:after {
display: block;
box-sizing: border-box;
content:'';
position: relative;
top: -$dragHandlerHeight;
left:0px;
right:0px;
height:100%;
border:1px solid #EEE;
// border:1px solid green;
border-top:0;
border-bottom:0;
}
}
}
.fieldValues {