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 += '
'; + html += '
' + items.map(getMenuOptionHtml).join('') + '
'; + html += '
'; + + return $(html).appendTo(document.body); + } + + $.fn.createContextMenu = function (options) { + + return this.on('contextmenu', options.selector, function (e) { + + var elem = this; + var items = options.getOptions(elem); + + if (!items.length) { + return; + } + + var menu = getMenu(items); + + var autoH = menu.height() + 12; + + if ((e.pageY + autoH) > $('html').height()) { + + menu.addClass('dropdown-context-up').css({ + top: e.pageY - 20 - autoH, + left: e.pageX - 13 + + }).fadeIn(); + + } else { + + menu.css({ + top: e.pageY + 10, + left: e.pageX - 13 + + }).fadeIn(); + } + + $(this).addClass('hasContextMenu'); + $(document).off('mousedown.closecontextmenu').on('mousedown.closecontextmenu', onDocumentMouseDown); + + menu.on('click', '.contextMenuCommandOption', function() { + + closeContextMenus(); + + options.command(this.getAttribute('data-command'), elem); + + return false; + }); + + return false; + }); + }; + +})(); + diff --git a/dashboard-ui/scripts/librarybrowser.js b/dashboard-ui/scripts/librarybrowser.js index 471f9900bf..76eda9e4a0 100644 --- a/dashboard-ui/scripts/librarybrowser.js +++ b/dashboard-ui/scripts/librarybrowser.js @@ -662,7 +662,7 @@ cssClass += ' ' + options.shape + 'PosterItem'; - html += ''; + html += ''; // Ribbon if (item.MediaType == "Video" && item.Video3DFormat) { @@ -680,7 +680,7 @@ format = "3D"; ribbonColor = "ribbon-3d"; } - + html += '
'; html += '
'; html += format; @@ -2100,10 +2100,42 @@ return false; } + function onMenuCommand(command, elem) { + + var id = elem.getAttribute('data-itemid'); + } + + function getMenuOptions(elem) { + + var items = []; + + var id = elem.getAttribute('data-itemid'); + var mediatype = elem.getAttribute('data-mediatype'); + + items.push({ type: 'header', text: 'Edit' }); + + items.push({ type: 'link', text: 'Details', url: 'edititemmetadata.html?id=' + id }); + + items.push({ type: 'link', text: 'Images', url: 'edititemimages.html?id=' + id }); + + if (mediatype == 'Video' && elem.getAttribute('data-locationtype') == 'FileSystem') { + + items.push({ type: 'divider' }); + items.push({ type: 'header', text: 'Manage' }); + items.push({ type: 'command', text: 'Alternate Editions', name: 'AlternateEditions' }); + } + + return items; + } + $.fn.createPosterItemHoverMenu = function () { function onShowTimerExpired(elem) { + if ($(elem).hasClass('hasContextMenu')) { + return; + } + var innerElem = $('.posterItemOverlayTarget', elem); var id = elem.getAttribute('data-itemid'); @@ -2152,7 +2184,23 @@ return this; } - return this.on('mouseenter', '.backdropPosterItem,.smallBackdropPosterItem,.portraitPosterItem,.squarePosterItem', onHoverIn).on('mouseleave', '.backdropPosterItem,.smallBackdropPosterItem,.portraitPosterItem,.squarePosterItem', onHoverOut); + var sequence = this; + + Dashboard.getCurrentUser().done(function (user) { + + if (user.Configuration.IsAdministrator) { + + sequence.createContextMenu({ + getOptions: getMenuOptions, + command: onMenuCommand, + selector: '.posterItem' + }); + } + + }); + + return this.on('mouseenter', '.backdropPosterItem,.smallBackdropPosterItem,.portraitPosterItem,.squarePosterItem', onHoverIn) + .on('mouseleave', '.backdropPosterItem,.smallBackdropPosterItem,.portraitPosterItem,.squarePosterItem', onHoverOut); }; })(jQuery, document, window); \ No newline at end of file diff --git a/dashboard-ui/scripts/site.js b/dashboard-ui/scripts/site.js index e4a3ea3919..03818daba0 100644 --- a/dashboard-ui/scripts/site.js +++ b/dashboard-ui/scripts/site.js @@ -96,7 +96,7 @@ var Dashboard = { var userId; if (autoLoginUserId && autoLoginUserId != storedUserId) { - + localStorage.setItem("userId", autoLoginUserId); ApiClient.currentUserId(autoLoginUserId); }