diff --git a/client/source/sass/components/_context-menu.scss b/client/source/sass/components/_context-menu.scss new file mode 100644 index 00000000..3c547ed7 --- /dev/null +++ b/client/source/sass/components/_context-menu.scss @@ -0,0 +1,6 @@ +.context-menu { + font-size: 0.9em; + padding: $spacing-unit * 2/5 0; + position: fixed; + z-index: 10; +} diff --git a/client/source/sass/components/_dropdown.scss b/client/source/sass/components/_dropdown.scss index 56bd4520..86346deb 100644 --- a/client/source/sass/components/_dropdown.scss +++ b/client/source/sass/components/_dropdown.scss @@ -18,15 +18,8 @@ } &__content { - background: $dropdown--background; - border-radius: 3px; - box-shadow: - 0 0 0 1px $dropdown--container--border, - 0 0 35px $dropdown--container--shadow; - color: $dropdown--foreground; left: 0; position: absolute; - text-align: left; top: 0; z-index: 2; } @@ -100,26 +93,6 @@ flex: 1; } - &__item { - padding: 5px 15px; - - &.is-selectable { - cursor: pointer; - display: block; - font-size: 0.9em; - transition: background 0.25s, color 0.25s; - - &:hover { - background: $dropdown--item--background--hover; - color: $dropdown--item--foreground--hover; - } - - &.is-selected { - color: $dropdown--item--foreground--active; - } - } - } - &--align-right & { left: auto; right: 0; diff --git a/client/source/sass/components/_menu.scss b/client/source/sass/components/_menu.scss new file mode 100644 index 00000000..892cba53 --- /dev/null +++ b/client/source/sass/components/_menu.scss @@ -0,0 +1,29 @@ +.menu { + background: $dropdown--background; + border-radius: 3px; + box-shadow: + 0 0 0 1px $dropdown--container--border, + 0 0 35px $dropdown--container--shadow; + color: $dropdown--foreground; + text-align: left; + + &__item { + padding: 5px 15px; + + &.is-selectable { + cursor: pointer; + display: block; + font-size: 0.9em; + transition: background 0.25s, color 0.25s; + + &:hover { + background: $dropdown--item--background--hover; + color: $dropdown--item--foreground--hover; + } + + &.is-selected { + color: $dropdown--item--foreground--active; + } + } + } +} diff --git a/client/source/sass/style.scss b/client/source/sass/style.scss index e81e1a77..00bdf9a7 100644 --- a/client/source/sass/style.scss +++ b/client/source/sass/style.scss @@ -19,12 +19,14 @@ @import "components/application-content"; @import "components/badge"; @import "components/client-stats"; +@import "components/context-menu"; @import "components/directory-tree"; @import "components/dropdown"; @import "components/dropzone"; @import "components/floating-action"; @import "components/icons"; @import "components/loading-indicator"; +@import "components/menu"; @import "components/modals"; @import "components/priority-meter"; @import "components/progress-bar"; diff --git a/client/source/scripts/actions/UIActions.js b/client/source/scripts/actions/UIActions.js index b4f83b79..1c708b1e 100644 --- a/client/source/scripts/actions/UIActions.js +++ b/client/source/scripts/actions/UIActions.js @@ -4,6 +4,13 @@ import AppDispatcher from '../dispatcher/AppDispatcher'; import ActionTypes from '../constants/ActionTypes'; const UIActions = { + displayContextMenu: function(data) { + AppDispatcher.dispatchUIAction({ + type: ActionTypes.UI_DISPLAY_CONTEXT_MENU, + data + }); + }, + displayModal: function(data) { AppDispatcher.dispatchUIAction({ type: ActionTypes.UI_DISPLAY_MODAL, @@ -11,7 +18,14 @@ const UIActions = { }); }, - dismissModal: function(data) { + dismissContextMenu: function() { + AppDispatcher.dispatchUIAction({ + type: ActionTypes.UI_DISPLAY_CONTEXT_MENU, + data: null + }); + }, + + dismissModal: function() { AppDispatcher.dispatchUIAction({ type: ActionTypes.UI_DISPLAY_MODAL, data: null diff --git a/client/source/scripts/app.js b/client/source/scripts/app.js index 4eab3285..8368b1ba 100644 --- a/client/source/scripts/app.js +++ b/client/source/scripts/app.js @@ -8,10 +8,14 @@ import Sidebar from './components/panels/Sidebar'; import TorrentActions from './actions/TorrentActions'; import TorrentDetailsView from './components/panels/TorrentDetailsView'; import TorrentListView from './components/panels/TorrentListView'; +import UIActions from './actions/UIActions'; class FloodApp extends React.Component { componentDidMount() { TorrentActions.fetchLatestTorrentLocation(); + window.addEventListener('click', function () { + UIActions.dismissContextMenu(); + }); } render() { diff --git a/client/source/scripts/components/forms/Dropdown.js b/client/source/scripts/components/forms/Dropdown.js index 3140c5bc..e5f84788 100644 --- a/client/source/scripts/components/forms/Dropdown.js +++ b/client/source/scripts/components/forms/Dropdown.js @@ -90,7 +90,7 @@ export default class Dropdown extends React.Component { }, this); return ( -