Issue #9 - Add timeout when closing a group

Changelog.md

@@ -1,5 +1,9 @@
 # 0.6.0
 
+## Features
+
+* Added a timeout when closing a group to restore a group when closed by accident (PR [34](https://github.com/denschub/firefox-tabgroups/pull/34))
+
 ## Bug fixes
 
 * Show the correct icon when using the dark compact theme

src/data/action_creators.js

@@ -4,5 +4,12 @@ const ActionCreators = {
       type: "TABGROUPS_RECEIVE",
       tabgroups: tabgroups
     };
+  },
+
+  setGroupCloseTimeout: function(timeout) {
+    return {
+      type: "GROUP_CLOSE_TIMEOUT_RECIEVE",
+      closeTimeout: timeout
+    };
   }
 };

src/data/assets/css/groupspanel.css

@@ -117,6 +117,18 @@ ul, li {
     top: 6px;
   }
 
+  .group.closing .group-controls .group-close,
+  .group.closing:hover .group-controls .group-close,
+  .group.closing .group-controls .fa-chevron-down,
+  .group.closing .group-controls .group-edit {
+    display: none;
+  }
+
+  .group.closing .group-title {
+    color: #ccc;
+    text-decoration: line-through;
+  }
+
 .group:hover .group-title {
   padding-right: 55px;
 }

src/data/components/group.js

@@ -1,5 +1,6 @@
 const Group = React.createClass({
   propTypes: {
+    closeTimeout: React.PropTypes.number,
     group: React.PropTypes.object.isRequired,
     onGroupClick: React.PropTypes.func,
     onGroupDrop: React.PropTypes.func,
@@ -13,6 +14,7 @@ const Group = React.createClass({
 
   getInitialState: function() {
     return {
+      closing: false,
       editing: false,
       expanded: false,
       draggingOverCounter: 0,
@@ -54,6 +56,7 @@ const Group = React.createClass({
     let groupClasses = classNames({
       active: this.props.group.active,
       editing: this.state.editing,
+      closing: this.state.closing,
       draggingOver: this.state.draggingOverCounter !== 0,
       dragSourceGroup: this.state.dragSourceGroup,
       expanded: this.state.expanded,
@@ -78,13 +81,15 @@ const Group = React.createClass({
           React.createElement(
             GroupControls,
             {
+              closing: this.state.closing,
               editing: this.state.editing,
               expanded: this.state.expanded,
               onClose: this.handleGroupCloseClick,
               onEdit: this.handleGroupEditClick,
               onEditAbort: this.handleGroupEditAbortClick,
               onEditSave: this.handleGroupEditSaveClick,
-              onExpand: this.handleGroupExpandClick
+              onExpand: this.handleGroupExpandClick,
+              onUndoCloseClick: this.handleGroupCloseAbortClick
             }
           )
         ),
@@ -104,7 +109,19 @@ const Group = React.createClass({
 
   handleGroupCloseClick: function(event) {
     event.stopPropagation();
-    this.props.onGroupCloseClick(this.props.group.id);
+    this.setState({editing: false});
+    this.setState({closing: true});
+
+    let group = this;
+
+    if (this.props.closeTimeout == 0) {
+      group.props.onGroupCloseClick(group.props.group.id);
+      return;
+    }
+
+    setTimeout(function() {
+      group.props.onGroupCloseClick(group.props.group.id);
+    }, this.props.closeTimeout * 1000);
   },
 
   handleGroupClick: function(event) {
@@ -184,5 +201,11 @@ const Group = React.createClass({
     }
 
     return false;
+  },
+
+  handleGroupCloseAbortClick: function(event) {
+    event.stopPropagation();
+
+    this.setState({closing: false});
   }
 });

src/data/components/groupcontrols.js

@@ -5,13 +5,14 @@ const GroupControls = React.createClass({
     onEdit: React.PropTypes.func,
     onEditAbort: React.PropTypes.func,
     onEditSave: React.PropTypes.func,
-    onExpand: React.PropTypes.func
+    onExpand: React.PropTypes.func,
+    onUndoCloseClick: React.PropTypes.func
   },
 
-  render: function() {
-    let editControls;
+  getEditControls: function() {
+    let controls;
     if (this.props.editing) {
-      editControls = [
+      controls = [
         React.DOM.i({
           className: "group-edit fa fa-fw fa-check",
           onClick: this.props.onEditSave
@@ -22,12 +23,32 @@ const GroupControls = React.createClass({
         })
       ];
     } else {
-      editControls = React.DOM.i({
+      controls = React.DOM.i({
         className: "group-edit fa fa-fw fa-pencil",
         onClick: this.props.onEdit
       });
     }
 
+    return controls;
+  },
+
+  getClosingControls: function() {
+    return [
+      React.DOM.i({
+        className: "group-close-undo fa fa-fw fa-undo",
+        onClick: this.props.onUndoCloseClick
+      })
+    ];
+  },
+
+  render: function() {
+    let groupControls;
+    if (this.props.closing) {
+      groupControls = this.getClosingControls();
+    } else {
+      groupControls = this.getEditControls();
+    }
+
     let expanderClasses = classNames({
       "group-expand": true,
       "fa": true,
@@ -40,7 +61,7 @@ const GroupControls = React.createClass({
       {
         className: "group-controls"
       },
-      editControls,
+      groupControls,
       React.DOM.i({
         className: "group-close fa fa-fw fa-times",
         onClick: this.props.onClose

src/data/components/grouplist.js

@@ -2,6 +2,7 @@ const GroupList = (() => {
   const GroupListStandalone = React.createClass({
     propTypes: {
       groups: React.PropTypes.object.isRequired,
+      closeTimeout: React.PropTypes.number,
       onGroupAddClick: React.PropTypes.func,
       onGroupAddDrop: React.PropTypes.func,
       onGroupClick: React.PropTypes.func,
@@ -25,6 +26,7 @@ const GroupList = (() => {
           return React.createElement(Group, {
             key: group.id,
             group: group,
+            closeTimeout: this.props.closeTimeout,
             onGroupClick: this.props.onGroupClick,
             onGroupDrop: this.props.onGroupDrop,
             onGroupCloseClick: this.props.onGroupCloseClick,
@@ -48,7 +50,8 @@ const GroupList = (() => {
 
   return ReactRedux.connect((state) => {
     return {
-      groups: state.get("tabgroups")
+      groups: state.get("tabgroups"),
+      closeTimeout: state.get("closeTimeout")
     };
   }, ActionCreators)(GroupListStandalone);
 })();

src/data/groupspanel.js

@@ -70,3 +70,7 @@ document.addEventListener("DOMContentLoaded", () => {
 addon.port.on("Groups:Changed", (tabgroups) => {
   store.dispatch(ActionCreators.setTabgroups(tabgroups));
 });
+
+addon.port.on("Groups:CloseTimeoutChanged", (timeout) => {
+  store.dispatch(ActionCreators.setGroupCloseTimeout(timeout));
+});

src/data/reducer.js

@@ -1,12 +1,14 @@
 const INITIAL_STATE = Immutable.fromJS({
-  tabgroups: []
+  tabgroups: [],
+  closeTimeout: 0
 });
 
 const Reducer = function(state = INITIAL_STATE, action) {
   switch (action.type) {
     case "TABGROUPS_RECEIVE":
       return state.set("tabgroups", Immutable.fromJS(action.tabgroups));
+    case "GROUP_CLOSE_TIMEOUT_RECIEVE":
+      return state.set("closeTimeout", action.closeTimeout);
   }
-
   return state;
 };

src/index.js

@@ -37,6 +37,7 @@ TabGroups.prototype = {
 
   bindEvents: function() {
     this.bindHotkeyPreference();
+    this.bindGroupPreference();
     this.bindPanelButtonEvents();
     this.bindPanelEvents();
     this.bindTabEvents();
@@ -50,7 +51,8 @@ TabGroups.prototype = {
         l10n: Utils.getL10nStrings([
           "add_group",
           "unnamed_group"
-        ])
+        ]),
+        groupCloseTimeout: Prefs.prefs.groupCloseTimeout
       }
     });
   },
@@ -161,6 +163,16 @@ TabGroups.prototype = {
     });
   },
 
+  bindGroupPreference: function() {
+    let emitCloseTimeoutChange = () => {
+      this._groupsPanel.port.emit("Groups:CloseTimeoutChanged", Prefs.prefs.groupCloseTimeout);
+    };
+
+    Prefs.on("groupCloseTimeout", emitCloseTimeoutChange);
+
+    emitCloseTimeoutChange();
+  },
+
   bindPanelButtonEvents: function() {
     this._panelButton.on("change", (state) => {
       if (!state.checked) {

src/locale/en-US.properties

@@ -1,6 +1,10 @@
 bindPanoramaShortcut_title = Listen to Ctrl/Cmd-Shift-E
 enableAlphabeticSort_title = Enable alphabetic sorting
+groupUndoCloseTimeout_title = Closing group delay
+groupUndoCloseTimeout_description = Delay in seconds to wait before the group gets actually closed.
 
 add_group = Create new group
 panelButton_label = Group Tabs
 unnamed_group = Unnamed Group
+close_group_prompt_title = Close group
+close_group_prompt_message = Do you want to close this group?

src/package.json

@@ -29,6 +29,13 @@
       "title": "Enable alphabetic sorting",
       "type": "bool",
       "value": false
+    },
+    {
+      "name": "groupCloseTimeout",
+      "title": "Closing group delay",
+      "description": "Delay in seconds to wait before the group gets actually closed.",
+      "type": "integer",
+      "value": 3
     }
   ]
 }