diff --git a/dashboard-ui/css/contextmenu.css b/dashboard-ui/css/contextmenu.css new file mode 100644 index 0000000000..34a4a9f231 --- /dev/null +++ b/dashboard-ui/css/contextmenu.css @@ -0,0 +1,105 @@ +.itemContextMenu { + position: absolute; + background: #fff; + border: 1px solid #ddd; + color: #000; + font-size: 14px; + z-index: 10000; + background-color: #ffffff; + border: 1px solid #ccc; + border: 1px solid rgba(0, 0, 0, 0.2); + font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; + font-size: 14px; + *border-right-width: 2px; + *border-bottom-width: 2px; + -webkit-border-radius: 6px; + -moz-border-radius: 6px; + border-radius: 6px; + -webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2); + -moz-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2); + box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2); + -webkit-background-clip: padding-box; + -moz-background-clip: padding; + background-clip: padding-box; + text-align: left; +} + +.contextMenuInner { + padding: .5em 0; + width: 160px; +} + +.contextMenuOption { + display: block; + color: #000; + text-decoration: none; + font-weight: normal; + padding: .35em 1em; +} + + .contextMenuOption:hover { + color: #ffffff; + text-decoration: none; + background-color: #0088cc; + background-color: #0081c2; + background-image: -moz-linear-gradient(top, #0088cc, #0077b3); + background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#0088cc), to(#0077b3)); + background-image: -webkit-linear-gradient(top, #0088cc, #0077b3); + background-image: -o-linear-gradient(top, #0088cc, #0077b3); + background-image: linear-gradient(to bottom, #0088cc, #0077b3); + background-repeat: repeat-x; + } + +.contextMenuHeader { + font-weight: bold; + margin: .5em 0; + padding: 0 1em; + color: #999; + text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5); + text-transform: uppercase; +} + +.contextMenuDivider { + margin: .75em 0; + height: 1px; + background: #e5e5e5; +} + +.itemContextMenu:before, .dropdown-context-up:before { + position: absolute; + top: -7px; + left: 9px; + display: inline-block; + border-right: 7px solid transparent; + border-bottom: 7px solid #ccc; + border-left: 7px solid transparent; + border-bottom-color: rgba(0, 0, 0, 0.2); + content: ''; +} +.dropdown-context:after, .dropdown-context-up:after { + position: absolute; + top: -6px; + left: 10px; + display: inline-block; + border-right: 6px solid transparent; + border-bottom: 6px solid #ffffff; + border-left: 6px solid transparent; + content: ''; +} +.dropdown-context-up:before, .dropdown-context-up:after { + top: auto; + bottom: -7px; + z-index: 9999; +} +.dropdown-context-up:before { + border-right: 7px solid transparent; + border-top: 7px solid #ccc; + border-bottom: none; + border-left: 7px solid transparent; +} +.dropdown-context-up:after { + border-right: 6px solid transparent; + border-top: 6px solid #ffffff; + border-left: 6px solid transparent; + border-bottom: none; +} \ No newline at end of file diff --git a/dashboard-ui/css/librarybrowser.css b/dashboard-ui/css/librarybrowser.css index d0823ceef4..e8135f718b 100644 --- a/dashboard-ui/css/librarybrowser.css +++ b/dashboard-ui/css/librarybrowser.css @@ -1049,7 +1049,7 @@ a.itemTag:hover { .alphabetPicker { position: fixed; right: 2px; - bottom: 30px; + bottom: 10px; width: 27px; z-index: 1000; text-align: center; diff --git a/dashboard-ui/css/metadataeditor.css b/dashboard-ui/css/metadataeditor.css index f941fcb169..97bd17fcdc 100644 --- a/dashboard-ui/css/metadataeditor.css +++ b/dashboard-ui/css/metadataeditor.css @@ -171,12 +171,12 @@ margin: 5px; padding: 8px; border: 1px solid #444; - background-image: -webkit-gradient(linear,left top,left bottom,from(#444),to(#2d2d2d)); - background-image: -webkit-linear-gradient(#444,#2d2d2d); - background-image: -moz-linear-gradient(#444,#2d2d2d); - background-image: -ms-linear-gradient(#444,#2d2d2d); - background-image: -o-linear-gradient(#444,#2d2d2d); - background-image: linear-gradient(#444,#2d2d2d); + background-image: -webkit-gradient(linear,left top,left bottom,from(#333),to(#2d2d2d)); + background-image: -webkit-linear-gradient(#333,#2d2d2d); + background-image: -moz-linear-gradient(#333,#2d2d2d); + background-image: -ms-linear-gradient(#333,#2d2d2d); + background-image: -o-linear-gradient(#333,#2d2d2d); + background-image: linear-gradient(#333,#2d2d2d); } .imageEditorTile { diff --git a/dashboard-ui/scripts/contextmenu.js b/dashboard-ui/scripts/contextmenu.js new file mode 100644 index 0000000000..0abaaddbb8 --- /dev/null +++ b/dashboard-ui/scripts/contextmenu.js @@ -0,0 +1,116 @@ +(function () { + + function onDocumentMouseDown(e) { + + var $e = $(e.target); + + var isContextMenuOption = $e.is('.contextMenuOption'); + + if (!isContextMenuOption || $e.is('.contextMenuCommandOption')) { + if ($e.is('.itemContextMenu') || $e.parents('.itemContextMenu').length) { + return; + } + } + + if (isContextMenuOption) { + + setTimeout(closeContextMenus, 150); + + } else { + closeContextMenus(); + } + } + + function closeContextMenus() { + $('.itemContextMenu').hide().remove(); + $('.hasContextMenu').removeClass('hasContextMenu'); + } + + function getMenuOptionHtml(item) { + + var html = ''; + + if (item.type == 'divider') { + + html += '
'; + } + + if (item.type == 'header') { + + html += '' + item.text + '
'; + } + + if (item.type == 'link') { + + html += '' + item.text + ''; + } + + if (item.type == 'command') { + + html += '' + item.text + ''; + } + + return html; + } + + function getMenu(items) { + + var html = ''; + + html += '