Skip to content

Loading…

ENHANCEMENT: Rightlick submenu styles and ability to add page with paget... #277

Closed
wants to merge 2 commits into from

2 participants

@wolfv

...ype

Hey,

I did some work on the rightclick-submenu. Hope you like it and I'm very happy if you have any suggestions!

Cheers, Wolf

(Main Pull Request is in the cms)

@chillu chillu commented on an outdated diff
admin/scss/_tree.scss
((6 lines not shown))
border: 1px solid silver;
z-index: 10000; *width:180px;
+ @include box-shadow(0 0 10px #CCC);
+ &::before {
+ content:"";
+ display:block; /* reduce the damage in FF3.0 */
+ position:absolute;
+ top: -10px;
+ left: 24px;
@chillu SilverStripe Ltd. member
chillu added a note

"magic numbers" like this need documentation - why is it 10px and not 11px, for example?

@wolfv
wolfv added a note

It's the little, double bordered, top arrow. I should have added a comment ...

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
@chillu chillu commented on an outdated diff
admin/scss/_tree.scss
@@ -24,14 +24,8 @@
min-height: 18px;
@chillu SilverStripe Ltd. member
chillu added a note

I'd prefer to keep customizations to this file low, as it'll make upgrading the library an absolute pain.
We've already converted the whole thing from CSS to SCSS, so will need to look over changes manually anyway,
but any customization we add causes us more of this manual work. Cna you describe why its necessary?

@wolfv
wolfv added a note

I could move the customizsations to the generic .cms ... stylesheet. Probably a better solution.

It's just for the look and feel ;)

@wolfv
wolfv added a note

Hey Ingo,

I wasn't able to get the customizations out entirely. It's not even possible, since the file is already somehow customized with the .cms prefix. I put the "old" contextmenu styles outside the .cms {} and put mine inside.

I cannot see any other method, except for adding a custom class with javascript to the contextmenu. However, i didn't find a hook for it in the contextmenu source, so i went with this.

If you know of anything better, i'd be glad to hear it :)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
@chillu
SilverStripe Ltd. member

Hey mate, good work!

So it respects allowed_children and can_be_root, right? I guess we can ignore default_parent and default_child for this one, as there's no preselection in the context menu.

Have you cross-browser tested this? I guess the flyout should be fairly generic (and tested by the library), but as you're adding your own markup its worth a sanity check.

BTW, for other interested parties: Here's a screenshot of the feature in action - https://skitch.com/chillu/8p2et/screen-shot-2012-03-28-at-11.10.56-am

@wolfv

Can be root is respected, because there is no root node to right-click on ;)
Allowed children is respected, for sure. Default children would still be something, I could somehow merge in (like, sort the default child to the top, or make the font bold or something)

I will do some crossbrowser testing when i'm on windows later :) But it's more or less the generic behaviour of the jstree.

@chillu
SilverStripe Ltd. member

OK, got Felipe's usability endorsement, so all good on that front :) Now just waiting for you do confirm it works cross browser, and extract the CSS customizations.

@wolfv

Well, i have to write to exams in the next two days but I'll be giving it the finishing touches on wednesday or thursday :)

@chillu
SilverStripe Ltd. member

Awesome - good luck with your exams! :)

@chillu
SilverStripe Ltd. member

Thanks man, and sorry for the long delay! The main reason this pull request hung around unmerged for so long was mixing two separate aspects in your followup commit: Some bugfixes (margins etc), as well as moving a large piece of SCSS around. While I recommended that, its best placed in a separate commit which just moves code, without any edits. Otherwise its really hard to untangle, particularly as time progresses and other people change the moved piece of code - which in this case actually happened. So in the end, I didn't merge this move, as it was very hard to determine how to reapply changes from core.

I'm not 100% sure the merge went correctly because of this, can you please check if whatever style fixes you've done (particularly around margins) might need to be re-done? Thanks!

@chillu chillu closed this
@wolfv

Hi,

I already spotted the submenu in the master and as far as I can tell the only "bigger" thing i changed in my later version (apart from decoupling it from some stylesheets) was that I made the upwards arrow a little less high. But I think it's already looking pretty decent. Idk what your plans are on some finishing CSS touches, so ...

BTW: I'm really happy to see the feature merged!

@chillu
SilverStripe Ltd. member

"Idk what your plans are on some finishing CSS touches, so ..."
Not quite sure what you're asking. If you're keen to polish the CSS further in a new pull request, sure thing! :)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Commits on Mar 27, 2012
  1. @wolfv
Commits on Apr 5, 2012
  1. @wolfv
Showing with 254 additions and 130 deletions.
  1. +1 −1 admin/code/LeftAndMain.php
  2. +78 −52 admin/css/screen.css
  3. BIN admin/images/btn-icon-sc495ceeeca.png
  4. +175 −77 admin/scss/_tree.scss
View
2 admin/code/LeftAndMain.php
@@ -589,7 +589,7 @@ function getSiteTreeFor($className, $rootID = null, $childrenMethod = null, $num
// getChildrenAsUL is a flexible and complex way of traversing the tree
$titleEval = '
- "<li id=\"record-$child->ID\" data-id=\"$child->ID\" class=\"" . $child->CMSTreeClasses($extraArg) . "\">" .
+ "<li id=\"record-$child->ID\" data-id=\"$child->ID\" data-pagetype=\"$child->ClassName\" class=\"" . $child->CMSTreeClasses($extraArg) . "\">" .
"<ins class=\"jstree-icon\">&nbsp;</ins>" .
"<a href=\"" . Controller::join_links($extraArg->Link("show"), $child->ID) . "\" title=\"'
. _t('LeftAndMain.PAGETYPE','Page type: ')
View
130 admin/css/screen.css
@@ -35,49 +35,49 @@ If more variables exist in the future, consider creating a variables file.*/
/** ---------------------------------------------------- Double tone borders http://daverupert.com/2011/06/two-tone-borders-with-css3/ ----------------------------------------------------- */
/** ----------------------------- Sprite images ----------------------------- */
/** Helper SCSS file for generating sprites for the interface. */
-.btn-icon-sprite, .ui-state-default .btn-icon-accept, .ui-state-default .btn-icon-accept_disabled, .ui-state-default .btn-icon-add, .ui-state-default .btn-icon-add_disabled, .ui-state-default .btn-icon-addpage, .ui-state-default .btn-icon-addpage_disabled, .ui-state-default .btn-icon-arrow-circle-135-left, .ui-state-default .btn-icon-back, .ui-state-default .btn-icon-back_disabled, .ui-state-default .btn-icon-chain--arrow, .ui-state-default .btn-icon-chain--exclamation, .ui-state-default .btn-icon-chain--minus, .ui-state-default .btn-icon-chain--pencil, .ui-state-default .btn-icon-chain--plus, .ui-state-default .btn-icon-chain-small, .ui-state-default .btn-icon-chain-unchain, .ui-state-default .btn-icon-chain, .ui-state-default .btn-icon-cross-circle, .ui-state-default .btn-icon-cross-circle_disabled, .ui-state-default .btn-icon-decline, .ui-state-default .btn-icon-decline_disabled, .ui-state-default .btn-icon-download-csv, .ui-state-default .btn-icon-drive-upload, .ui-state-default .btn-icon-drive-upload_disabled, .ui-state-default .btn-icon-magnifier, .ui-state-default .btn-icon-minus-circle, .ui-state-default .btn-icon-minus-circle_disabled, .ui-state-default .btn-icon-navigation, .ui-state-default .btn-icon-navigation_disabled, .ui-state-default .btn-icon-network-cloud, .ui-state-default .btn-icon-network-cloud_disabled, .ui-state-default .btn-icon-pencil, .ui-state-default .btn-icon-pencil_disabled, .ui-state-default .btn-icon-plug-disconnect-prohibition, .ui-state-default .btn-icon-plug-disconnect-prohibition_disabled, .ui-state-default .btn-icon-preview, .ui-state-default .btn-icon-preview_disabled, .ui-state-default .btn-icon-settings, .ui-state-default .btn-icon-settings_disabled, .ui-state-default .btn-icon-unpublish, .ui-state-default .btn-icon-unpublish_disabled { background: url('../images/btn-icon-sc495ceeeca.png') no-repeat; }
+.btn-icon-sprite, .ui-state-default .btn-icon-accept, .ui-state-default .btn-icon-accept_disabled, .ui-state-default .btn-icon-add, .ui-state-default .btn-icon-add_disabled, .ui-state-default .btn-icon-addpage, .ui-state-default .btn-icon-addpage_disabled, .ui-state-default .btn-icon-arrow-circle-135-left, .ui-state-default .btn-icon-back, .ui-state-default .btn-icon-back_disabled, .ui-state-default .btn-icon-chain--arrow, .ui-state-default .btn-icon-chain--exclamation, .ui-state-default .btn-icon-chain--minus, .ui-state-default .btn-icon-chain--pencil, .ui-state-default .btn-icon-chain--plus, .ui-state-default .btn-icon-chain-small, .ui-state-default .btn-icon-chain-unchain, .ui-state-default .btn-icon-chain, .ui-state-default .btn-icon-cross-circle, .ui-state-default .btn-icon-cross-circle_disabled, .ui-state-default .btn-icon-decline, .ui-state-default .btn-icon-decline_disabled, .ui-state-default .btn-icon-download-csv, .ui-state-default .btn-icon-drive-upload, .ui-state-default .btn-icon-drive-upload_disabled, .ui-state-default .btn-icon-magnifier, .ui-state-default .btn-icon-minus-circle, .ui-state-default .btn-icon-minus-circle_disabled, .ui-state-default .btn-icon-navigation, .ui-state-default .btn-icon-navigation_disabled, .ui-state-default .btn-icon-network-cloud, .ui-state-default .btn-icon-network-cloud_disabled, .ui-state-default .btn-icon-pencil, .ui-state-default .btn-icon-pencil_disabled, .ui-state-default .btn-icon-plug-disconnect-prohibition, .ui-state-default .btn-icon-plug-disconnect-prohibition_disabled, .ui-state-default .btn-icon-preview, .ui-state-default .btn-icon-preview_disabled, .ui-state-default .btn-icon-settings, .ui-state-default .btn-icon-settings_disabled, .ui-state-default .btn-icon-unpublish, .ui-state-default .btn-icon-unpublish_disabled { background: url('../images/btn-icon-s41050dc384.png') no-repeat; }
.ui-state-default .btn-icon-accept { background-position: 0 0; }
.ui-state-default .btn-icon-accept_disabled { background-position: 0 -17px; }
.ui-state-default .btn-icon-add { background-position: 0 -34px; }
.ui-state-default .btn-icon-add_disabled { background-position: 0 -52px; }
.ui-state-default .btn-icon-addpage { background-position: 0 -70px; }
-.ui-state-default .btn-icon-addpage_disabled { background-position: 0 -88px; }
-.ui-state-default .btn-icon-arrow-circle-135-left { background-position: 0 -104px; }
-.ui-state-default .btn-icon-back { background-position: 0 -120px; }
-.ui-state-default .btn-icon-back_disabled { background-position: 0 -136px; }
-.ui-state-default .btn-icon-chain--arrow { background-position: 0 -151px; }
-.ui-state-default .btn-icon-chain--exclamation { background-position: 0 -167px; }
-.ui-state-default .btn-icon-chain--minus { background-position: 0 -183px; }
-.ui-state-default .btn-icon-chain--pencil { background-position: 0 -199px; }
-.ui-state-default .btn-icon-chain--plus { background-position: 0 -215px; }
-.ui-state-default .btn-icon-chain-small { background-position: 0 -231px; }
-.ui-state-default .btn-icon-chain-unchain { background-position: 0 -247px; }
-.ui-state-default .btn-icon-chain { background-position: 0 -263px; }
-.ui-state-default .btn-icon-cross-circle { background-position: 0 -279px; }
-.ui-state-default .btn-icon-cross-circle_disabled { background-position: 0 -295px; }
-.ui-state-default .btn-icon-decline { background-position: 0 -311px; }
-.ui-state-default .btn-icon-decline_disabled { background-position: 0 -328px; }
-.ui-state-default .btn-icon-download-csv { background-position: 0 -345px; }
-.ui-state-default .btn-icon-drive-upload { background-position: 0 -363px; }
-.ui-state-default .btn-icon-drive-upload_disabled { background-position: 0 -379px; }
-.ui-state-default .btn-icon-magnifier { background-position: 0 -395px; }
-.ui-state-default .btn-icon-minus-circle { background-position: 0 -411px; }
-.ui-state-default .btn-icon-minus-circle_disabled { background-position: 0 -427px; }
-.ui-state-default .btn-icon-navigation { background-position: 0 -443px; }
-.ui-state-default .btn-icon-navigation_disabled { background-position: 0 -459px; }
-.ui-state-default .btn-icon-network-cloud { background-position: 0 -475px; }
-.ui-state-default .btn-icon-network-cloud_disabled { background-position: 0 -491px; }
-.ui-state-default .btn-icon-pencil { background-position: 0 -507px; }
-.ui-state-default .btn-icon-pencil_disabled { background-position: 0 -523px; }
-.ui-state-default .btn-icon-plug-disconnect-prohibition { background-position: 0 -539px; }
-.ui-state-default .btn-icon-plug-disconnect-prohibition_disabled { background-position: 0 -555px; }
-.ui-state-default .btn-icon-preview { background-position: 0 -571px; }
-.ui-state-default .btn-icon-preview_disabled { background-position: 0 -588px; }
-.ui-state-default .btn-icon-settings { background-position: 0 -605px; }
-.ui-state-default .btn-icon-settings_disabled { background-position: 0 -621px; }
-.ui-state-default .btn-icon-unpublish { background-position: 0 -637px; }
-.ui-state-default .btn-icon-unpublish_disabled { background-position: 0 -655px; }
+.ui-state-default .btn-icon-addpage_disabled { background-position: 0 -86px; }
+.ui-state-default .btn-icon-arrow-circle-135-left { background-position: 0 -102px; }
+.ui-state-default .btn-icon-back { background-position: 0 -118px; }
+.ui-state-default .btn-icon-back_disabled { background-position: 0 -134px; }
+.ui-state-default .btn-icon-chain--arrow { background-position: 0 -149px; }
+.ui-state-default .btn-icon-chain--exclamation { background-position: 0 -165px; }
+.ui-state-default .btn-icon-chain--minus { background-position: 0 -181px; }
+.ui-state-default .btn-icon-chain--pencil { background-position: 0 -197px; }
+.ui-state-default .btn-icon-chain--plus { background-position: 0 -213px; }
+.ui-state-default .btn-icon-chain-small { background-position: 0 -229px; }
+.ui-state-default .btn-icon-chain-unchain { background-position: 0 -245px; }
+.ui-state-default .btn-icon-chain { background-position: 0 -261px; }
+.ui-state-default .btn-icon-cross-circle { background-position: 0 -277px; }
+.ui-state-default .btn-icon-cross-circle_disabled { background-position: 0 -293px; }
+.ui-state-default .btn-icon-decline { background-position: 0 -309px; }
+.ui-state-default .btn-icon-decline_disabled { background-position: 0 -326px; }
+.ui-state-default .btn-icon-download-csv { background-position: 0 -343px; }
+.ui-state-default .btn-icon-drive-upload { background-position: 0 -361px; }
+.ui-state-default .btn-icon-drive-upload_disabled { background-position: 0 -377px; }
+.ui-state-default .btn-icon-magnifier { background-position: 0 -393px; }
+.ui-state-default .btn-icon-minus-circle { background-position: 0 -409px; }
+.ui-state-default .btn-icon-minus-circle_disabled { background-position: 0 -425px; }
+.ui-state-default .btn-icon-navigation { background-position: 0 -441px; }
+.ui-state-default .btn-icon-navigation_disabled { background-position: 0 -457px; }
+.ui-state-default .btn-icon-network-cloud { background-position: 0 -473px; }
+.ui-state-default .btn-icon-network-cloud_disabled { background-position: 0 -489px; }
+.ui-state-default .btn-icon-pencil { background-position: 0 -505px; }
+.ui-state-default .btn-icon-pencil_disabled { background-position: 0 -521px; }
+.ui-state-default .btn-icon-plug-disconnect-prohibition { background-position: 0 -537px; }
+.ui-state-default .btn-icon-plug-disconnect-prohibition_disabled { background-position: 0 -553px; }
+.ui-state-default .btn-icon-preview { background-position: 0 -569px; }
+.ui-state-default .btn-icon-preview_disabled { background-position: 0 -586px; }
+.ui-state-default .btn-icon-settings { background-position: 0 -603px; }
+.ui-state-default .btn-icon-settings_disabled { background-position: 0 -619px; }
+.ui-state-default .btn-icon-unpublish { background-position: 0 -635px; }
+.ui-state-default .btn-icon-unpublish_disabled { background-position: 0 -653px; }
.icon { text-indent: -9999px; border: none; outline: none; }
.icon.icon-24 { width: 24px; height: 24px; background: url('../images/menu-icons/24x24-s546fcae8fd.png'); }
@@ -536,7 +536,9 @@ form.import-form label.left { width: 250px; }
/** This file defines the jstree base styling (see http://jstree.com), as well as any customizations (see bottom of file). The styles are usually added through jstree.js on DOM load, but we need it earlier in order to correctly display the uninitialized tree. */
.cms .jstree ul, .TreeDropdownField .treedropdownfield-panel .jstree ul { display: block; margin: 0; padding: 0; background: none; list-style-type: none; }
-.cms .jstree li, .TreeDropdownField .treedropdownfield-panel .jstree li { display: block; margin: 0; padding: 0; list-style-type: none; display: block; min-height: 18px; line-height: 18px; white-space: nowrap; margin-left: 18px; min-width: 18px; }
+.cms .jstree li, .TreeDropdownField .treedropdownfield-panel .jstree li { display: block; margin: 0; padding: 0; list-style-type: none; display: block; min-height: 18px; line-height: 18px; white-space: nowrap; min-width: 18px; }
+.cms .jstree li li, .TreeDropdownField .treedropdownfield-panel .jstree li li { margin: 0; }
+.cms .jstree li li li, .TreeDropdownField .treedropdownfield-panel .jstree li li li { margin-left: 10px; }
.cms .jstree ins, .TreeDropdownField .treedropdownfield-panel .jstree ins { display: inline-block; text-decoration: none; width: 18px; height: 18px; margin: 0 0 0 0; padding: 0; float: left; }
.cms .jstree a, .TreeDropdownField .treedropdownfield-panel .jstree a { display: inline-block; line-height: 16px; height: 16px; color: black; white-space: nowrap; text-decoration: none; padding: 1px 2px; margin: 0; border: 1px solid #fff; }
.cms .jstree a:focus, .cms .jstree a:active, .cms .jstree a:hover, .TreeDropdownField .treedropdownfield-panel .jstree a:focus, .TreeDropdownField .treedropdownfield-panel .jstree a:active, .TreeDropdownField .treedropdownfield-panel .jstree a:hover { outline: none; text-decoration: none; cursor: pointer; text-shadow: none; }
@@ -550,17 +552,6 @@ form.import-form label.left { width: 250px; }
.cms .jstree-rtl > ul > li, .TreeDropdownField .treedropdownfield-panel .jstree-rtl > ul > li { margin-right: 0px; }
.cms .jstree > ul > li, .TreeDropdownField .treedropdownfield-panel .jstree > ul > li { margin-left: 0px; }
.cms #vakata-dragged, .TreeDropdownField .treedropdownfield-panel #vakata-dragged { display: block; margin: 0 0 0 0; padding: 4px 4px 4px 24px; position: absolute; top: -2000px; line-height: 16px; z-index: 10000; }
-.cms #vakata-contextmenu, .TreeDropdownField .treedropdownfield-panel #vakata-contextmenu { display: block; visibility: hidden; left: 0; top: -200px; position: absolute; margin: 0; padding: 0; min-width: 180px; background: #ebebeb; border: 1px solid silver; z-index: 10000; *width: 180px; }
-.cms #vakata-contextmenu ul, .TreeDropdownField .treedropdownfield-panel #vakata-contextmenu ul { min-width: 180px; *width: 180px; }
-.cms #vakata-contextmenu ul, .cms #vakata-contextmenu li, .TreeDropdownField .treedropdownfield-panel #vakata-contextmenu ul, .TreeDropdownField .treedropdownfield-panel #vakata-contextmenu li { margin: 0; padding: 0; list-style-type: none; display: block; }
-.cms #vakata-contextmenu li, .TreeDropdownField .treedropdownfield-panel #vakata-contextmenu li { line-height: 20px; min-height: 20px; position: relative; padding: 0px; }
-.cms #vakata-contextmenu li a, .TreeDropdownField .treedropdownfield-panel #vakata-contextmenu li a { padding: 1px 6px; line-height: 17px; display: block; text-decoration: none; margin: 1px 1px 0 1px; }
-.cms #vakata-contextmenu li ins, .TreeDropdownField .treedropdownfield-panel #vakata-contextmenu li ins { float: left; width: 16px; height: 16px; text-decoration: none; margin-right: 2px; }
-.cms #vakata-contextmenu li a:hover, .cms #vakata-contextmenu li.vakata-hover > a, .TreeDropdownField .treedropdownfield-panel #vakata-contextmenu li a:hover, .TreeDropdownField .treedropdownfield-panel #vakata-contextmenu li.vakata-hover > a { background: gray; color: white; }
-.cms #vakata-contextmenu li ul, .TreeDropdownField .treedropdownfield-panel #vakata-contextmenu li ul { display: none; position: absolute; top: -2px; left: 100%; background: #ebebeb; border: 1px solid gray; }
-.cms #vakata-contextmenu .right, .TreeDropdownField .treedropdownfield-panel #vakata-contextmenu .right { right: 100%; left: auto; }
-.cms #vakata-contextmenu .bottom, .TreeDropdownField .treedropdownfield-panel #vakata-contextmenu .bottom { bottom: -1px; top: auto; }
-.cms #vakata-contextmenu li.vakata-separator, .TreeDropdownField .treedropdownfield-panel #vakata-contextmenu li.vakata-separator { min-height: 0; height: 1px; line-height: 1px; font-size: 1px; overflow: hidden; margin: 0 2px; background: silver; /* border-top:1px solid #fefefe; */ padding: 0; }
.cms .jstree ul, .cms .jstree li, .TreeDropdownField .treedropdownfield-panel .jstree ul, .TreeDropdownField .treedropdownfield-panel .jstree li { display: block; margin: 0 0 0 0; padding: 0 0 0 0; list-style-type: none; }
.cms .jstree li, .TreeDropdownField .treedropdownfield-panel .jstree li { display: block; min-height: 18px; line-height: 18px; white-space: nowrap; margin-left: 18px; min-width: 18px; }
.cms .jstree-rtl li, .TreeDropdownField .treedropdownfield-panel .jstree-rtl li { margin-left: 0; margin-right: 18px; }
@@ -572,7 +563,7 @@ form.import-form label.left { width: 250px; }
.cms .jstree a > ins, .TreeDropdownField .treedropdownfield-panel .jstree a > ins { height: 16px; width: 16px; }
.cms .jstree a > .jstree-icon, .TreeDropdownField .treedropdownfield-panel .jstree a > .jstree-icon { margin-right: 3px; }
.cms .jstree-rtl a > .jstree-icon, .TreeDropdownField .treedropdownfield-panel .jstree-rtl a > .jstree-icon { margin-left: 3px; margin-right: 0; }
-.cms li.jstree-open > ul, .TreeDropdownField .treedropdownfield-panel li.jstree-open > ul { display: block; margin-left: -13px; }
+.cms li.jstree-open > ul, .TreeDropdownField .treedropdownfield-panel li.jstree-open > ul { display: block; }
.cms li.jstree-open > ul li ul, .TreeDropdownField .treedropdownfield-panel li.jstree-open > ul li ul { margin-left: 2px; }
.cms li.jstree-closed > ul, .TreeDropdownField .treedropdownfield-panel li.jstree-closed > ul { display: none; }
.cms #vakata-dragged ins, .TreeDropdownField .treedropdownfield-panel #vakata-dragged ins { display: block; text-decoration: none; width: 16px; height: 16px; margin: 0 0 0 0; padding: 0; position: absolute; top: 4px; left: 4px; -moz-border-radius: 4px; border-radius: 4px; -webkit-border-radius: 4px; }
@@ -605,6 +596,41 @@ form.import-form label.left { width: 250px; }
.jstree-apple .jstree-checked > a > .jstree-checkbox { margin-right: 3px; }
.jstree-apple .jstree-undetermined > a > .jstree-checkbox { margin-right: 3px; }
+#vakata-contextmenu { display: block; visibility: hidden; left: 0; top: -200px; position: absolute; margin: 0; padding: 0; min-width: 180px; background: #ebebeb; border: 1px solid silver; z-index: 10000; *width: 180px; }
+
+#vakata-contextmenu ul { min-width: 180px; *width: 180px; }
+
+#vakata-contextmenu ul, #vakata-contextmenu li { margin: 0; padding: 0; list-style-type: none; display: block; }
+
+#vakata-contextmenu li { line-height: 20px; min-height: 20px; position: relative; padding: 0px; }
+
+#vakata-contextmenu li a { padding: 1px 6px; line-height: 17px; display: block; text-decoration: none; margin: 1px 1px 0 1px; }
+
+#vakata-contextmenu li ins { float: left; width: 16px; height: 16px; text-decoration: none; margin-right: 2px; }
+
+#vakata-contextmenu li a:hover, #vakata-contextmenu li.vakata-hover > a { background: gray; color: white; }
+
+#vakata-contextmenu li ul { display: none; position: absolute; top: -2px; left: 100%; background: #ebebeb; border: 1px solid gray; }
+
+#vakata-contextmenu .right { right: 100%; left: auto; }
+
+#vakata-contextmenu .bottom { bottom: -1px; top: auto; }
+
+#vakata-contextmenu li.vakata-separator { min-height: 0; height: 1px; line-height: 1px; font-size: 1px; overflow: hidden; margin: 0 2px; background: silver; /* border-top:1px solid #fefefe; */ padding: 0; }
+
+.cms #vakata-contextmenu { display: block; visibility: hidden; left: 0; top: -200px; position: absolute; margin: 0; padding: 0; min-width: 180px; background: #FFF; border: 1px solid silver; z-index: 10000; *width: 180px; -moz-box-shadow: 0 0 10px #cccccc; -webkit-box-shadow: 0 0 10px #cccccc; -o-box-shadow: 0 0 10px #cccccc; box-shadow: 0 0 10px #cccccc; }
+.cms #vakata-contextmenu::before { content: ""; display: block; /* reduce the damage in FF3.0 */ position: absolute; top: -8px; left: 24px; width: 0; border-width: 0 6px 8px 6px; border-color: #FFF transparent; border-style: solid; z-index: 10000; }
+.cms #vakata-contextmenu::after { content: ""; display: block; /* reduce the damage in FF3.0 */ position: absolute; top: -9px; left: 23px; width: 0; border-width: 0 7px 9px 7px; border-color: #CCC transparent; border-style: solid; }
+.cms #vakata-contextmenu ul { min-width: 180px; *width: 180px; }
+.cms #vakata-contextmenu ul, .cms #vakata-contextmenu li { margin: 0; padding: 0; list-style-type: none; display: block; }
+.cms #vakata-contextmenu li { line-height: 20px; min-height: 23px; position: relative; padding: 0px; }
+.cms #vakata-contextmenu li:last-child { margin-bottom: 1px; }
+.cms #vakata-contextmenu li a { padding: 1px 10px; line-height: 23px; display: block; text-decoration: none; margin: 1px 1px 0 1px; border: 0; }
+.cms #vakata-contextmenu li ins { float: left; width: 0; height: 0; text-decoration: none; margin-right: 2px; }
+.cms #vakata-contextmenu li .jstree-pageicon { margin-top: 3px; margin-right: 5px; }
+.cms #vakata-contextmenu li a:hover, .cms #vakata-contextmenu li.vakata-hover > a { padding: 1px 10px; background: #3875d7; background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjUwJSIgeTE9IjAlIiB4Mj0iNTAlIiB5Mj0iMTAwJSI+PHN0b3Agb2Zmc2V0PSIyMCUiIHN0b3AtY29sb3I9IiMzODc1ZDciLz48c3RvcCBvZmZzZXQ9IjkwJSIgc3RvcC1jb2xvcj0iIzJhNjJiYyIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA=='); background-size: 100%; background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(20%, #3875d7), color-stop(90%, #2a62bc)); background-image: -webkit-linear-gradient(top, #3875d7 20%, #2a62bc 90%); background-image: -moz-linear-gradient(top, #3875d7 20%, #2a62bc 90%); background-image: -o-linear-gradient(top, #3875d7 20%, #2a62bc 90%); background-image: -ms-linear-gradient(top, #3875d7 20%, #2a62bc 90%); background-image: linear-gradient(top, #3875d7 20%, #2a62bc 90%); color: #FFF; border: none; }
+.cms #vakata-contextmenu li ul { display: none; position: absolute; top: -2px; left: 100%; background: #FFF; border: 1px solid silver; -moz-box-shadow: 0 0 10px #cccccc; -webkit-box-shadow: 0 0 10px #cccccc; -o-box-shadow: 0 0 10px #cccccc; box-shadow: 0 0 10px #cccccc; }
+
.tree-holder.jstree-apple, .cms-tree.jstree-apple { /* comment speech bubble - ccs3 only - source: http://nicolasgallagher.com/pure-css-speech-bubbles/demo/ */ }
.tree-holder.jstree-apple li.Root strong, .cms-tree.jstree-apple li.Root strong { font-weight: bold; padding-left: 1px; }
.tree-holder.jstree-apple li.Root > a .jstree-icon, .cms-tree.jstree-apple li.Root > a .jstree-icon { background-position: -56px -36px; }
@@ -622,8 +648,8 @@ form.import-form label.left { width: 250px; }
.tree-holder.jstree-apple li, .cms-tree.jstree-apple li { padding: 0px; clear: left; }
.tree-holder.jstree-apple ins, .cms-tree.jstree-apple ins { background-color: transparent; background-image: url(../images/sitetree_ss_default_icons.png); }
.tree-holder.jstree-apple li.jstree-checked > a, .tree-holder.jstree-apple li.jstree-checked > a:link, .cms-tree.jstree-apple li.jstree-checked > a, .cms-tree.jstree-apple li.jstree-checked > a:link { background-color: #efe999; }
-.tree-holder.jstree-apple .jstree-closed > ins, .cms-tree.jstree-apple .jstree-closed > ins { background-position: 0 0; cursor: pointer; }
-.tree-holder.jstree-apple .jstree-open > ins, .cms-tree.jstree-apple .jstree-open > ins { background-position: -20px 0; cursor: pointer; }
+.tree-holder.jstree-apple .jstree-closed > ins, .cms-tree.jstree-apple .jstree-closed > ins { background-position: 0 0; }
+.tree-holder.jstree-apple .jstree-open > ins, .cms-tree.jstree-apple .jstree-open > ins { background-position: -20px 0; }
a .jstree-pageicon { display: block; float: left; width: 16px; height: 16px; margin-right: 4px; background-color: transparent; background-image: url(../images/sitetree_ss_pageclass_icons_default.png); background-repeat: no-repeat; }
View
BIN admin/images/btn-icon-sc495ceeeca.png
Deleted file not rendered
View
252 admin/scss/_tree.scss
@@ -116,77 +116,6 @@
line-height: 16px;
z-index: 10000;
}
- #vakata-contextmenu {
- display: block;
- visibility: hidden;
- left: 0;
- top: -200px;
- position: absolute;
- margin: 0;
- padding: 0;
- min-width: 180px;
- background: #ebebeb;
- border: 1px solid silver;
- z-index: 10000; *width:180px;
- }
- #vakata-contextmenu ul {
- min-width: 180px; *width:180px;
- }
- #vakata-contextmenu ul, #vakata-contextmenu li {
- margin: 0;
- padding: 0;
- list-style-type: none;
- display: block;
- }
- #vakata-contextmenu li {
- line-height: 20px;
- min-height: 20px;
- position: relative;
- padding: 0px;
- }
- #vakata-contextmenu li a {
- padding: 1px 6px;
- line-height: 17px;
- display: block;
- text-decoration: none;
- margin: 1px 1px 0 1px;
- }
- #vakata-contextmenu li ins {
- float: left;
- width: 16px;
- height: 16px;
- text-decoration: none;
- margin-right: 2px;
- }
- #vakata-contextmenu li a:hover, #vakata-contextmenu li.vakata-hover > a {
- background: gray;
- color: white;
- }
- #vakata-contextmenu li ul {
- display: none;
- position: absolute;
- top: -2px;
- left: 100%;
- background: #ebebeb;
- border: 1px solid gray;
- }
- #vakata-contextmenu .right {
- right: 100%;
- left: auto;
- }
- #vakata-contextmenu .bottom {
- bottom: -1px;
- top: auto;
- }
- #vakata-contextmenu li.vakata-separator {
- min-height: 0;
- height: 1px;
- line-height: 1px;
- font-size: 1px;
- overflow: hidden;
- margin: 0 2px;
- background: silver; /* border-top:1px solid #fefefe; */ padding:0;
- }
.jstree ul, .jstree li {
display: block;
@@ -414,6 +343,177 @@
}
}
+#vakata-contextmenu {
+ display: block;
+ visibility: hidden;
+ left: 0;
+ top: -200px;
+ position: absolute;
+ margin: 0;
+ padding: 0;
+ min-width: 180px;
+ background: #ebebeb;
+ border: 1px solid silver;
+ z-index: 10000; *width:180px;
+}
+#vakata-contextmenu ul {
+ min-width: 180px; *width:180px;
+}
+#vakata-contextmenu ul, #vakata-contextmenu li {
+ margin: 0;
+ padding: 0;
+ list-style-type: none;
+ display: block;
+}
+#vakata-contextmenu li {
+ line-height: 20px;
+ min-height: 20px;
+ position: relative;
+ padding: 0px;
+}
+#vakata-contextmenu li a {
+ padding: 1px 6px;
+ line-height: 17px;
+ display: block;
+ text-decoration: none;
+ margin: 1px 1px 0 1px;
+}
+#vakata-contextmenu li ins {
+ float: left;
+ width: 16px;
+ height: 16px;
+ text-decoration: none;
+ margin-right: 2px;
+}
+#vakata-contextmenu li a:hover, #vakata-contextmenu li.vakata-hover > a {
+ background: gray;
+ color: white;
+}
+#vakata-contextmenu li ul {
+ display: none;
+ position: absolute;
+ top: -2px;
+ left: 100%;
+ background: #ebebeb;
+ border: 1px solid gray;
+}
+#vakata-contextmenu .right {
+ right: 100%;
+ left: auto;
+}
+#vakata-contextmenu .bottom {
+ bottom: -1px;
+ top: auto;
+}
+#vakata-contextmenu li.vakata-separator {
+ min-height: 0;
+ height: 1px;
+ line-height: 1px;
+ font-size: 1px;
+ overflow: hidden;
+ margin: 0 2px;
+ background: silver; /* border-top:1px solid #fefefe; */ padding:0;
+}
+
+
+
+// customizations of jstree-apple for CMS rightclick menu
+
+.cms {
+ #vakata-contextmenu {
+ display: block;
+ visibility: hidden;
+ left: 0;
+ top: -200px;
+ position: absolute;
+ margin: 0;
+ padding: 0;
+ min-width: 180px;
+ background: #FFF;
+ border: 1px solid silver;
+ z-index: 10000; *width:180px;
+ @include box-shadow(0 0 10px #CCC);
+ &::before {
+ content:"";
+ display:block; /* reduce the damage in FF3.0 */
+ position:absolute;
+ top: -8px;
+ left: 24px;
+ width:0;
+ border-width: 0 6px 8px 6px ;
+ border-color: #FFF transparent;
+ border-style: solid;
+ z-index: 10000;
+ }
+ &::after {
+ content:"";
+ display:block; /* reduce the damage in FF3.0 */
+ position:absolute;
+ top: -9px;
+ left: 23px;
+ width:0;
+ border-width: 0 7px 9px 7px ;
+ border-color: #CCC transparent;
+ border-style: solid;
+ }
+ }
+ #vakata-contextmenu ul {
+ min-width: 180px; *width:180px;
+ }
+ #vakata-contextmenu ul, #vakata-contextmenu li {
+ margin: 0;
+ padding: 0 ;
+ list-style-type: none;
+ display: block;
+ }
+ #vakata-contextmenu li {
+ line-height: 20px;
+ min-height: 23px;
+ position: relative;
+ padding: 0px;
+ &:last-child {
+ margin-bottom: 1px;
+ }
+ }
+ #vakata-contextmenu li a {
+ padding: 1px 10px;
+ line-height: 23px;
+ display: block;
+ text-decoration: none;
+ margin: 1px 1px 0 1px;
+ border: 0;
+ }
+ #vakata-contextmenu li ins {
+ float: left;
+ width: 0;
+ height: 0;
+ text-decoration: none;
+ margin-right: 2px;
+ }
+ #vakata-contextmenu li .jstree-pageicon {
+ margin-top: 3px;
+ margin-right: 5px;
+ }
+ #vakata-contextmenu li a:hover, #vakata-contextmenu li.vakata-hover > a {
+ padding: 1px 10px;
+ background: #3875d7;
+ @include background-image(linear-gradient(top, #3875d7 20%, #2a62bc 90%));
+ color: #FFF;
+ border: none;
+ }
+ #vakata-contextmenu li ul {
+ display: none;
+ position: absolute;
+ top: -2px;
+ left: 100%;
+ background: #FFF;
+ border: 1px solid silver;
+ @include box-shadow(0 0 10px #CCC);
+ }
+}
+
+
+
.tree-holder.jstree-apple, .cms-tree.jstree-apple {
& li.Root {
@@ -476,7 +576,7 @@
border: 1px solid #7C8816;
background-color: #DAE79A;
}
-
+
/* comment speech bubble - ccs3 only - source: http://nicolasgallagher.com/pure-css-speech-bubbles/demo/ */
& span.comment-count {
clear: both;
@@ -541,13 +641,11 @@
}
& .jstree-closed > ins {
- background-position:0 0;
- cursor:pointer;
+ background-position:0 0;
}
& .jstree-open > ins {
- background-position:-20px 0;
- cursor:pointer;
+ background-position:-20px 0;
}
}
@@ -594,4 +692,4 @@ li.class-ErrorPage > a .jstree-pageicon {
}
}
}
-}
+}
Something went wrong with that request. Please try again.