From 90b8d1fd03afe62f3edbad24cb34193f65f3a901 Mon Sep 17 00:00:00 2001 From: danielamram Date: Thu, 28 Dec 2017 06:20:08 +0200 Subject: [PATCH] - Added favorites feature for containers. (#3419) - Fixed side-bar width css, added cursor: pointer to containers. Signed-off-by: Daniel Amram - Added favorites feature for containers. - Fixed side-bar width css, added cursor: pointer to containers. Signed-off-by: Daniel Amram --- src/actions/ContainerActions.js | 12 ++++++++++++ src/actions/ContainerServerActions.js | 3 ++- src/components/ContainerListItem.react.js | 12 +++++------- src/components/Containers.react.js | 16 +++++++++++----- src/stores/ContainerStore.js | 10 ++++++++++ src/utils/DockerUtil.js | 2 ++ styles/left-panel.less | 20 +++++++++++++++++++- styles/variables.less | 2 +- 8 files changed, 62 insertions(+), 15 deletions(-) diff --git a/src/actions/ContainerActions.js b/src/actions/ContainerActions.js index ae22e71a..ad2fbac6 100644 --- a/src/actions/ContainerActions.js +++ b/src/actions/ContainerActions.js @@ -1,5 +1,6 @@ import alt from '../alt'; import dockerUtil from '../utils/DockerUtil'; +import _ from "underscore"; class ContainerActions { @@ -42,6 +43,17 @@ class ContainerActions { active (name) { dockerUtil.active(name); } + + toggleFavorite (name) { + let favorites = JSON.parse(localStorage.getItem('containers.favorites')); + if (favorites.includes(name)) { + favorites = favorites.filter(favoriteName => favoriteName !== name); + } else { + favorites = [...favorites, name]; + } + localStorage.setItem('containers.favorites', JSON.stringify(favorites)); + this.dispatch({name}); + } } export default alt.createActions(ContainerActions); diff --git a/src/actions/ContainerServerActions.js b/src/actions/ContainerServerActions.js index 59acb37c..632d625d 100644 --- a/src/actions/ContainerServerActions.js +++ b/src/actions/ContainerServerActions.js @@ -17,7 +17,8 @@ class ContainerServerActions { 'kill', 'stopped', 'log', - 'logs' + 'logs', + 'toggleFavorite' ); } } diff --git a/src/components/ContainerListItem.react.js b/src/components/ContainerListItem.react.js index 1e6af7a9..c57f7031 100644 --- a/src/components/ContainerListItem.react.js +++ b/src/components/ContainerListItem.react.js @@ -9,13 +9,10 @@ import {OverlayTrigger, Tooltip} from 'react-bootstrap'; import containerActions from '../actions/ContainerActions'; var ContainerListItem = React.createClass({ - handleItemMouseEnter: function () { - var $action = $(this.getDOMNode()).find('.action'); - $action.show(); - }, - handleItemMouseLeave: function () { - var $action = $(this.getDOMNode()).find('.action'); - $action.hide(); + toggleFavoriteContainer: function (e) { + e.preventDefault(); + e.stopPropagation(); + containerActions.toggleFavorite(this.props.container.Name); }, handleDeleteContainer: function (e) { e.preventDefault(); @@ -108,6 +105,7 @@ var ContainerListItem = React.createClass({
+
diff --git a/src/components/Containers.react.js b/src/components/Containers.react.js index d201c61b..310140d9 100644 --- a/src/components/Containers.react.js +++ b/src/components/Containers.react.js @@ -32,17 +32,23 @@ var Containers = React.createClass({ sorted: function (containers) { return _.values(containers).sort(function (a, b) { - if (a.State.Downloading && !b.State.Downloading) { + if (a.Favorite && !b.Favorite) { return -1; - } else if (!a.State.Downloading && b.State.Downloading) { + } else if (!a.Favorite && b.Favorite) { return 1; } else { - if (a.State.Running && !b.State.Running) { + if (a.State.Downloading && !b.State.Downloading) { return -1; - } else if (!a.State.Running && b.State.Running) { + } else if (!a.State.Downloading && b.State.Downloading) { return 1; } else { - return a.Name.localeCompare(b.Name); + if (a.State.Running && !b.State.Running) { + return -1; + } else if (!a.State.Running && b.State.Running) { + return 1; + } else { + return a.Name.localeCompare(b.Name); + } } } }); diff --git a/src/stores/ContainerStore.js b/src/stores/ContainerStore.js index 6e6eeee0..aa95ef5f 100644 --- a/src/stores/ContainerStore.js +++ b/src/stores/ContainerStore.js @@ -191,6 +191,16 @@ class ContainerStore { this.emitChange(); } + toggleFavorite ({name}) { + let containers = this.containers; + + if (containers[name]) { + containers[name].Favorite = !containers[name].Favorite; + } + + this.setState({containers}); + } + static generateName (repo) { const base = _.last(repo.split('/')); const names = _.keys(this.getState().containers); diff --git a/src/utils/DockerUtil.js b/src/utils/DockerUtil.js index d16a8221..aff6f08f 100644 --- a/src/utils/DockerUtil.js +++ b/src/utils/DockerUtil.js @@ -262,6 +262,8 @@ var DockerUtil = { return; } containerServerActions.allUpdated({containers: _.indexBy(containers.concat(_.values(this.placeholders)), 'Name')}); + let favorites = JSON.parse(localStorage.getItem('containers.favorites')) || []; + favorites.forEach(name => containerServerActions.toggleFavorite({name})); this.logs(); this.fetchAllImages(); }); diff --git a/styles/left-panel.less b/styles/left-panel.less index 8e2e0976..f6fbe2f0 100644 --- a/styles/left-panel.less +++ b/styles/left-panel.less @@ -137,8 +137,14 @@ height: 45px; border-top: 1px solid transparent; border-bottom: 1px solid transparent; + & { + cursor: pointer; + } &:hover { background-color: @color-box-button; + .action .btn { + visibility: visible; + } } .info { margin-left: 1rem; @@ -163,17 +169,29 @@ } } .action { - display: none; + display: block; flex: 1; position: relative; top: 0.4rem; text-align: right; .btn { + visibility: hidden; + cursor: pointer; border: 1px solid @gray-lighter; + margin-left: 2px; .icon { color: @gray-lighter; } } + .favorite { + visibility: visible; + } + .btn:hover { + border: 1px solid @gray-normal; + .icon { + color: @gray-normal; + } + } } .state { margin-top: 0.6rem; diff --git a/styles/variables.less b/styles/variables.less index 9e873d58..a0af395d 100644 --- a/styles/variables.less +++ b/styles/variables.less @@ -28,7 +28,7 @@ @border-radius: 0.2rem; -@sidebar-width: 220px; +@sidebar-width: 230px; @sidebar-text-overflow-width: 140px; @container-state-size: 20px;