Skip to content

Commit

Permalink
Merge pull request #124 from mbraak/jqtree_0.13
Browse files Browse the repository at this point in the history 
Moving a page in the tree is trigger-happy
  • Loading branch information
@dbunskoek
dbunskoek committed Oct 4, 2012
2 parents 2385aa7 + d704d3c commit a6c55e2
Show file tree
Hide file tree
Showing 8 changed files with 1,728 additions and 892 deletions.
288 changes: 131 additions & 157 deletions fiber/static/fiber/css/admin.css
View file
Expand Up @@ -545,223 +545,197 @@ span.nobr {
}

/* ---[ tree ] --- */
/* This is an (almost exact) copy of jqtree.css because styles are reset */
/* This is a copy of jqtree.css because styles are reset */

.ui-dialog-content ul.tree,
.ui-dialog-content ul.tree ul,
#df-wpr-sidebar ul.tree,
#df-wpr-sidebar ul.tree ul {
list-style: none outside;
margin-bottom: 0;
ul.jqtree-tree {
margin-left: 12px;
}

.ui-dialog-content ul.tree ul,
#df-wpr-sidebar ul.tree ul {
display: block;
margin-left: 12px;
ul.jqtree-tree,
ul.jqtree-tree ul {
list-style: none outside;
margin-bottom: 0;
padding: 0;
}

.ui-dialog-content ul.tree li.closed > ul,
#df-wpr-sidebar ul.tree li.closed > ul {
display: none;
ul.jqtree-tree ul {
display: block;
margin-left: 12px;
margin-right: 0;
}

.ui-dialog-content ul.tree li,
#df-wpr-sidebar ul.tree li {
clear: both;
white-space: nowrap;
ul.jqtree-tree li.jqtree-closed > ul {
display: none;
}

.ui-dialog-content ul.tree .toggler,
#df-wpr-sidebar ul.tree .toggler {
background: url(../js/jqtree/treeDownTriangleBlack.png) no-repeat 0 50%;
width: 12px;
display: block;
position: absolute;
left: -12px;
text-indent: -9999px;
ul.jqtree-tree li {
clear: both;
}

.ui-dialog-content ul.tree .toggler {
background-position: 0 6px;
ul.jqtree-tree .jqtree-toggler {
display: block;
position: absolute;
left: -1.5em;
top: 30%;
*top: 0; /* fix for ie7 */
font-size: 12px;
line-height: 12px;
font-family: arial; /* fix for ie9 */
border-bottom: none;
color: #333;
}

#df-wpr-sidebar ul.tree .toggler {
background-position: 0 8px;
ul.jqtree-tree .jqtree-toggler:hover {
color: #000;
}

.ui-dialog-content ul.tree div,
#df-wpr-sidebar ul.tree div {
cursor: pointer;
ul.jqtree-tree div {
cursor: pointer;
}

.ui-dialog-content ul.tree .title,
#df-wpr-sidebar ul.tree .title {
color: #333;
line-height: 18px;
vertical-align: baseline;
ul.jqtree-tree .jqtree-title {
color: #1C4257;
vertical-align: middle;
}

.ui-dialog-content ul.tree li.folder,
#df-wpr-sidebar ul.tree li.folder {
margin-bottom: 4px;
ul.jqtree-tree li.jqtree-folder {
margin-bottom: 4px;
}

.ui-dialog-content ul.tree li.folder.closed,
#df-wpr-sidebar ul.tree li.folder.closed {
margin-bottom: 1px;
ul.jqtree-tree li.jqtree-folder.jqtree-closed {
margin-bottom: 1px;
}

ul.tree li.folder .title,
#df-wpr-sidebar ul.tree li.folder .title {
margin-left: 0;
}

ul.tree .toggler.closed,
#df-wpr-sidebar ul.tree .toggler.closed {
background-image: url(../js/jqtree/treeRightTriangleBlack.png);
ul.jqtree-tree li.jqtree-folder .jqtree-title {
margin-left: 0;
}

ul.tree .toggler.closed {
background-position: 0 5px;
ul.jqtree-tree .jqtree-toggler.jqtree-closed {
background-position: 0 0;
}

#df-wpr-sidebar ul.tree .toggler.closed {
background-position: 0 7px;
span.jqtree-dragging {
color: #fff;
background: #000;
opacity: 0.6;
cursor: pointer;
padding: 2px 8px;
}

.ui-dialog-content span.tree-dragging,
#df-wpr-sidebar span.tree-dragging {
color: #fff;
background: #000;
opacity: 0.6;
cursor: pointer;
padding: 2px 8px;
white-space: nowrap;
ul.jqtree-tree li.jqtree-ghost {
position: relative;
z-index: 10;
margin-right: 10px;
}

.ui-dialog-content ul.tree li.ghost,
#df-wpr-sidebar ul.tree li.ghost {
position: relative;
z-index: 10;
ul.jqtree-tree li.jqtree-ghost span {
display: block;
}

.ui-dialog-content ul.tree li.ghost span,
#df-wpr-sidebar ul.tree li.ghost span {
display: block;
ul.jqtree-tree li.jqtree-ghost span.jqtree-circle {
background-image: url(../js/jqtree/jqtree-circle.png);
background-repeat: no-repeat;
height: 8px;
width: 8px;
position: absolute;
top: -4px;
left: 2px;
}

.ui-dialog-content ul.tree li.ghost span.circle,
#df-wpr-sidebar ul.tree li.ghost span.circle {
background: url(../js/jqtree/circle.png) no-repeat;
height: 8px;
width: 8px;
position: absolute;
top: -4px;
left: 2px;
ul.jqtree-tree li.jqtree-ghost span.jqtree-line {
background-color: #0000ff;
height: 2px;
padding: 0;
position: absolute;
top: -1px;
left: 10px;
width: 100%;
}

.ui-dialog-content ul.tree li.ghost span.line,
#df-wpr-sidebar ul.tree li.ghost span.line {
background-color: #0000ff;
height: 2px;
padding: 0;
position: absolute;
top: -1px;
left: 10px;
width: 100%;
ul.jqtree-tree li.jqtree-ghost.jqtree-inside {
margin-left: 48px;
}

.ui-dialog-content ul.tree li.ghost.inside,
#df-wpr-sidebar ul.tree li.ghost.inside {
margin-left: 48px;
ul.jqtree-tree span.jqtree-border {
position: absolute;
display: block;
left: -2px;
top: 0;
border: solid 2px #0000ff;
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px;
margin: 0;
}

.ui-dialog-content span.tree-hit,
#df-wpr-sidebar span.tree-hit {
position: absolute;
display: block;
ul.jqtree-tree div {
width: 100%; /* todo: why is this in here? */
*width: auto; /* ie7 fix; issue 41 */
position: relative;
}

.ui-dialog-content ul.tree span.border,
#df-wpr-sidebar ul.tree span.border {
position: absolute;
display: block;
left: -2px;
top: 0;
border: solid 2px #0000ff;
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px;
margin: 0;
ul.jqtree-tree li.jqtree-selected > div,
ul.jqtree-tree li.jqtree-selected > div:hover {
background-color: #97BDD6;
background: -webkit-gradient(linear, left top, left bottom, from(#BEE0F5), to(#89AFCA));
background: -moz-linear-gradient(top, #BEE0F5, #89AFCA);
background: -ms-linear-gradient(top, #BEE0F5, #89AFCA);
background: -o-linear-gradient(top, #BEE0F5, #89AFCA);
text-shadow: 0 1px 0 rgba(255, 255, 255, 0.7);
}

.ui-dialog-content ul.tree .page .icon,
#df-wpr-sidebar ul.tree .page .icon {
background-image: url(../images/icon-page.png);
background-repeat: no-repeat;
width: 16px;
height: 16px;
display: inline-block;
margin: -2px 4px 0 2px;
vertical-align: middle;
ul.jqtree-tree .jqtree-moving > div .jqtree-title {
outline: dashed 1px #0000ff;
}

.ui-dialog-content ul.tree .page.redirect .icon,
#df-wpr-sidebar ul.tree .page.redirect .icon {
background-image: url(../images/icon-page-redirect.png);
/* jqtree custom */
#df-wpr-sidebar .jqtree-tree {
margin-left: 12px;
}

.ui-dialog-content ul.tree .page.hidden-in-menu .icon,
#df-wpr-sidebar ul.tree .page.hidden-in-menu .icon {
background-image: url(../images/icon-page-hidden.png);
#df-wpr-sidebar .jqtree-tree .jqtree-folder {
margin-bottom: 4px;
}

.ui-dialog-content ul.tree .page.non-public .icon,
#df-wpr-sidebar ul.tree .page.non-public .icon {
background-image: url(../images/icon-page-non-public.png);
#df-wpr-sidebar .jqtree-tree .jqtree-toggler {
color: #666;
}

.ui-dialog-content ul.tree .page.non-editable .title,
#df-wpr-sidebar ul.tree .page.non-editable .title {
color: #999;
text-shadow: 0 1px 0 #fff;
filter: dropshadow(color=#fff, offx=0, offy=1);
#df-wpr-sidebar ul.jqtree-tree ul {
margin-left: 12px;
}

.ui-dialog-content ul.tree div,
#df-wpr-sidebar ul.tree div {
width: 100%;
position: relative;
.ui-dialog-content ul.jqtree-tree .page .icon,
#df-wpr-sidebar ul.jqtree-tree .page .icon {
background-image: url(../images/icon-page.png);
background-repeat: no-repeat;
width: 16px;
height: 16px;
display: inline-block;
margin: -2px 4px 0 2px;
vertical-align: middle;
}

.ui-dialog-content ul.tree li.selected > div.page,
.ui-dialog-content ul.tree li.selected > div.page:hover,
#df-wpr-sidebar ul.tree li.selected > div.page,
#df-wpr-sidebar ul.tree li.selected > div.page:hover {
background-color: #97BDD6;
background: -webkit-gradient(linear, left top, left bottom, from(#BEE0F5), to(#89AFCA));
background: -moz-linear-gradient(top, #BEE0F5, #89AFCA);
text-shadow: 0 1px 0 rgba(255, 255, 255, 0.7);
.ui-dialog-content ul.jqtree-tree .page.redirect .icon,
#df-wpr-sidebar ul.jqtree-tree .page.redirect .icon {
background-image: url(../images/icon-page-redirect.png);
}

.ui-dialog-content ul.tree div.page:hover,
#df-wpr-sidebar ul.tree div.page:hover {
background: #dfdfdf;
background: -webkit-gradient(linear, left top, left bottom, from(#eaeaea), to(#d3d3d3));
background: -moz-linear-gradient(top, #eaeaea, #d3d3d3);
color: #333;
text-shadow: 0 1px 0 rgba(255,255,255,0.7);
.ui-dialog-content ul.jqtree-tree .page.hidden-in-menu .icon,
#df-wpr-sidebar ul.jqtree-tree .page.hidden-in-menu .icon {
background-image: url(../images/icon-page-hidden.png);
}

.ui-dialog-content ul.tree div.page.non-editable:hover,
#df-wpr-sidebar ul.tree div.page.non-editable:hover {
background: none;
.ui-dialog-content ul.jqtree-tree .page.non-public .icon,
#df-wpr-sidebar ul.jqtree-tree .page.non-public .icon {
background-image: url(../images/icon-page-non-public.png);
}

#df-wpr-sidebar ul.tree .moving > div .title,
ul.tree .moving > div .title {
outline: 1px dashed #666;
.ui-dialog-content ul.jqtree-tree .page.non-editable .jqtree-title,
#df-wpr-sidebar ul.jqtree-tree .page.non-editable .jqtree-title {
color: #999;
text-shadow: 0 1px 0 #fff;
filter: dropshadow(color=#fff, offx=0, offy=1);
}

/* permissions-related styling */
Expand All @@ -771,16 +745,16 @@ ul.tree .moving > div .title {
}

/* page selection tree in dialog */
.ui-dialog-content ul.tree {
.ui-dialog-content ul.jqtree-tree {
margin-left: 20px;
margin-top: 4px;
}

.ui-dialog-content ul.tree ul {
.ui-dialog-content ul.jqtree-tree ul {
margin-bottom: 4px;
}

.ui-dialog-content ul.tree div {
.ui-dialog-content ul.jqtree-tree div {
padding: 1px 0;
}

Expand Down
4 changes: 2 additions & 2 deletions fiber/static/fiber/js/admin.js
View file
Expand Up @@ -973,7 +973,7 @@ Fiber.PageSelectDialog = AdminRESTDialog.extend({

function createLi(node, $li) {
if (node.change_url) {
$li.find('.title').before('<span class="icon"></span>');
$li.find('.jqtree-title').before('<span class="icon"></span>');
$li.find('div').addClass('page');
}
}
Expand Down Expand Up @@ -1419,7 +1419,7 @@ var adminPage = {
function createLi(node, $li) {
if (node.change_url) {
var $div = $li.find('div');
$li.find('.title').before('<span class="icon"></span>');
$li.find('.jqtree-title').before('<span class="icon"></span>');
$div.addClass('page');

if (!node.show_in_menu) {
Expand Down
Binary file removed fiber/static/fiber/js/jqtree/circle.png
View file
Binary file not shown.
Binary file added fiber/static/fiber/js/jqtree/jqtree-circle.png
View file
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.

0 comments on commit a6c55e2

Please sign in to comment.