Skip to content
This repository has been archived by the owner on Sep 6, 2021. It is now read-only.

Commit

Permalink
Merge pull request #11732 from adobe/abose/noDistractions
Browse files Browse the repository at this point in the history
Toggle panels and no-Distraction mode
  • Loading branch information
nethip committed Nov 18, 2015
2 parents f51dc7f + d35ebb0 commit 3cec328
Show file tree
Hide file tree
Showing 20 changed files with 296 additions and 47 deletions.
2 changes: 1 addition & 1 deletion src/base-config/keyboard.json
Original file line number Diff line number Diff line change
Expand Up @@ -217,7 +217,7 @@
"platform": "mac"
}
],
"view.hideSidebar": [
"view.toggleSidebar": [
{
"key" : "Ctrl-Alt-H"
},
Expand Down
6 changes: 5 additions & 1 deletion src/command/Commands.js
Original file line number Diff line number Diff line change
Expand Up @@ -104,7 +104,7 @@ define(function (require, exports, module) {

// VIEW
exports.CMD_THEMES_OPEN_SETTINGS = "view.themesOpenSetting"; // MenuCommands.js Settings.open()
exports.VIEW_HIDE_SIDEBAR = "view.hideSidebar"; // SidebarView.js toggle()
exports.VIEW_HIDE_SIDEBAR = "view.toggleSidebar"; // SidebarView.js toggle()
exports.VIEW_INCREASE_FONT_SIZE = "view.increaseFontSize"; // ViewCommandHandlers.js _handleIncreaseFontSize()
exports.VIEW_DECREASE_FONT_SIZE = "view.decreaseFontSize"; // ViewCommandHandlers.js _handleDecreaseFontSize()
exports.VIEW_RESTORE_FONT_SIZE = "view.restoreFontSize"; // ViewCommandHandlers.js _handleRestoreFontSize()
Expand Down Expand Up @@ -172,6 +172,10 @@ define(function (require, exports, module) {
// ADD_TO_WORKING_SET is deprectated but we need a handler for it because the new command doesn't return the same result as the legacy command
exports.FILE_ADD_TO_WORKING_SET = "file.addToWorkingSet"; // Deprecated through DocumentCommandHandlers.js handleFileAddToWorkingSet

// Show or Hide sidebar
exports.HIDE_SIDEBAR = "view.hideSidebar"; // SidebarView.js hide()
exports.SHOW_SIDEBAR = "view.showSidebar"; // SidebarView.js show()

// DEPRECATED: Working Set Commands
DeprecationWarning.deprecateConstant(exports, "SORT_WORKINGSET_BY_ADDED", "CMD_WORKINGSET_SORT_BY_ADDED");
DeprecationWarning.deprecateConstant(exports, "SORT_WORKINGSET_BY_NAME", "CMD_WORKINGSET_SORT_BY_NAME");
Expand Down
168 changes: 168 additions & 0 deletions src/extensions/default/NoDistractions/main.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,168 @@
/*
* Copyright (c) 2015 Adobe Systems Incorporated. All rights reserved.
*
* Permission is hereby granted, free of charge, to any person obtaining a
* copy of this software and associated documentation files (the "Software"),
* to deal in the Software without restriction, including without limitation
* the rights to use, copy, modify, merge, publish, distribute, sublicense,
* and/or sell copies of the Software, and to permit persons to whom the
* Software is furnished to do so, subject to the following conditions:
*
* The above copyright notice and this permission notice shall be included in
* all copies or substantial portions of the Software.
*
* THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
* IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
* FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
* AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
* LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
* FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER
* DEALINGS IN THE SOFTWARE.
*
*/

/*jslint vars: true, indent: 4, maxerr: 50 */
/*global define, brackets */

define(function (require, exports, module) {
"use strict";

var Menus = brackets.getModule("command/Menus"),
CommandManager = brackets.getModule("command/CommandManager"),
Commands = brackets.getModule("command/Commands"),
Strings = brackets.getModule("strings"),
PreferencesManager = brackets.getModule("preferences/PreferencesManager"),
ViewUtils = brackets.getModule("utils/ViewUtils"),
KeyBindingManager = brackets.getModule("command/KeyBindingManager"),
HealthLogger = brackets.getModule("utils/HealthLogger"),
WorkspaceManager = brackets.getModule("view/WorkspaceManager");

// Constants
var PREFS_PURE_CODE = "noDistractions",
CMD_TOGGLE_PURE_CODE = "view.togglePureCode",
CMD_TOGGLE_PANELS = "view.togglePanels",
HEALTH_NO_DISTRACTION = "noDistractionModeUsed",
HEALTH_TOGGLE_PANELS = "togglePanels";

//key binding keys
var togglePureCodeKey = "Ctrl-Shift-2",
togglePureCodeKeyMac = "Cmd-Shift-2",
togglePanelsKey = "Ctrl-Shift-`",
togglePanelsKeyMac = "Cmd-Shift-`";

//locals
var _previouslyOpenPanelIDs = [],
panelsToggled = false,
layoutUpdated = false;

/**
* @private
* Updates the command checked status based on the preference for noDestraction mode
*/
function _updateCheckedState() {
CommandManager.get(CMD_TOGGLE_PURE_CODE).setChecked(PreferencesManager.get(PREFS_PURE_CODE));
}

/**
* @private
* toggles noDisraction preference
*/
function _togglePureCode() {
PreferencesManager.set(PREFS_PURE_CODE, !PreferencesManager.get(PREFS_PURE_CODE));
HealthLogger.setHealthDataLog(HEALTH_NO_DISTRACTION, true);
}

/**
* hide all open panels
*/
function _hidePanelsIfRequired() {
var panelIDs = WorkspaceManager.getAllPanelIDs();
_previouslyOpenPanelIDs = [];
panelIDs.forEach(function (panelID) {
var panel = WorkspaceManager.getPanelForID(panelID);
if (panel && panel.isVisible()) {
panel.hide();
_previouslyOpenPanelIDs.push(panelID);
}
});
}

/**
* show all open panels that was previously hidden by _hidePanelsIfRequired()
*/
function _showPanelsIfRequired() {
var panelIDs = _previouslyOpenPanelIDs;
panelIDs.forEach(function (panelID) {
var panel = WorkspaceManager.getPanelForID(panelID);
if (panel) {
panel.show();
}
});
_previouslyOpenPanelIDs = [];
}

function _updateLayout() {
layoutUpdated = true;
panelsToggled = false;
}

/**
* We toggle panels in certain cases only :
* 1. if a panel is shown, toggle can hide it, and successive toggle can show the panel and repeat.
* 2. if a panel is hidden by toggle, and say the workspace changed making another panel visible by some operation;
* we reset toggle states so that toggle would hide the panel already present in the workspace.
* The already hidden panel should not be shown in the specific case for better UX.
*/
function _togglePanels() {
var togglePanelCount;
panelsToggled = !panelsToggled;
if (panelsToggled) {
_hidePanelsIfRequired();
layoutUpdated = false;
panelsToggled = true;
} else if (!layoutUpdated) {
_showPanelsIfRequired();
}

//log health data
togglePanelCount = HealthLogger.getHealthDataLog(HEALTH_TOGGLE_PANELS);
togglePanelCount = (typeof togglePanelCount === 'number') ? togglePanelCount + 1 : 0;
HealthLogger.setHealthDataLog(HEALTH_TOGGLE_PANELS, togglePanelCount);
}

PreferencesManager.definePreference(PREFS_PURE_CODE, "boolean", false, {
description: Strings.DESCRIPTION_PURE_CODING_SURFACE
});

PreferencesManager.on("change", PREFS_PURE_CODE, function () {
if (PreferencesManager.get(PREFS_PURE_CODE)) {
ViewUtils.hideMainToolBar();
CommandManager.execute(Commands.HIDE_SIDEBAR);
_hidePanelsIfRequired();
} else {
ViewUtils.showMainToolBar();
CommandManager.execute(Commands.SHOW_SIDEBAR);
_showPanelsIfRequired();
}
_updateCheckedState();
});

WorkspaceManager.on(WorkspaceManager.EVENT_WORKSPACE_PANEL_SHOWN, _updateLayout);

/**
* Register the Commands , add the Menu Items and key bindings
*/
function initializeCommands() {
CommandManager.register(Strings.CMD_TOGGLE_PURE_CODE, CMD_TOGGLE_PURE_CODE, _togglePureCode);
CommandManager.register(Strings.CMD_TOGGLE_PANELS, CMD_TOGGLE_PANELS, _togglePanels);

Menus.getMenu(Menus.AppMenuBar.VIEW_MENU).addMenuItem(CMD_TOGGLE_PANELS, "", Menus.AFTER, Commands.VIEW_HIDE_SIDEBAR);
Menus.getMenu(Menus.AppMenuBar.VIEW_MENU).addMenuItem(CMD_TOGGLE_PURE_CODE, "", Menus.AFTER, CMD_TOGGLE_PANELS);

KeyBindingManager.addBinding(CMD_TOGGLE_PURE_CODE, [ {key: togglePureCodeKey}, {key: togglePureCodeKeyMac, platform: "mac"} ]);
KeyBindingManager.addBinding(CMD_TOGGLE_PANELS, [ {key: togglePanelsKey}, {key: togglePanelsKeyMac, platform: "mac"} ]);
}

initializeCommands();

});
2 changes: 1 addition & 1 deletion src/htmlContent/main-view.html
Original file line number Diff line number Diff line change
Expand Up @@ -85,7 +85,7 @@
</div>

<!-- Vertical toolbar docked to right -->
<div id="main-toolbar" class="toolbar no-focus">
<div id="main-toolbar" class="toolbar no-focus collapsible">
<!-- Top-aligned buttons -->
<div class="buttons">
<a id="toolbar-go-live" href="#"></a> <!-- tooltip for this is set in JS -->
Expand Down
6 changes: 5 additions & 1 deletion src/nls/root/strings.js
Original file line number Diff line number Diff line change
Expand Up @@ -380,6 +380,9 @@ define({
"VIEW_MENU" : "View",
"CMD_HIDE_SIDEBAR" : "Hide Sidebar",
"CMD_SHOW_SIDEBAR" : "Show Sidebar",
"CMD_TOGGLE_SIDEBAR" : "Toggle Sidebar",
"CMD_TOGGLE_PANELS" : "Toggle Panels",
"CMD_TOGGLE_PURE_CODE" : "No Distractions",
"CMD_INCREASE_FONT_SIZE" : "Increase Font Size",
"CMD_DECREASE_FONT_SIZE" : "Decrease Font Size",
"CMD_RESTORE_FONT_SIZE" : "Restore Font Size",
Expand Down Expand Up @@ -773,5 +776,6 @@ define({
"DESCRIPTION_MERGE_PANES_WHEN_LAST_FILE_CLOSED" : "true to collapse panes after the last file from the pane is closed via pane header close button",
"DESCRIPTION_SHOW_PANE_HEADER_BUTTONS" : "Toggle when to show the close and flip-view buttons on the header.",
"DEFAULT_PREFERENCES_JSON_HEADER_COMMENT" : "/*\n * This is a read-only file with the preferences supported\n * by {APP_NAME}.\n * Use this file as a reference to modify your preferences\n * file \"brackets.json\" opened in the other pane.\n * For more information on how to use preferences inside\n * {APP_NAME}, refer to the web page at https://github.com/adobe/brackets/wiki/How-to-Use-Brackets#preferences\n */",
"DEFAULT_PREFERENCES_JSON_DEFAULT" : "Default"
"DEFAULT_PREFERENCES_JSON_DEFAULT" : "Default",
"DESCRIPTION_PURE_CODING_SURFACE" : "true to enable code only mode and hide all other UI elements in {APP_NAME}"
});
5 changes: 3 additions & 2 deletions src/project/SidebarView.js
Original file line number Diff line number Diff line change
Expand Up @@ -271,8 +271,9 @@ define(function (require, exports, module) {
_cmdSplitVertical = CommandManager.register(Strings.CMD_SPLITVIEW_VERTICAL, Commands.CMD_SPLITVIEW_VERTICAL, _handleSplitViewVertical);
_cmdSplitHorizontal = CommandManager.register(Strings.CMD_SPLITVIEW_HORIZONTAL, Commands.CMD_SPLITVIEW_HORIZONTAL, _handleSplitViewHorizontal);

CommandManager.register(Strings.CMD_HIDE_SIDEBAR, Commands.VIEW_HIDE_SIDEBAR, toggle);

CommandManager.register(Strings.CMD_TOGGLE_SIDEBAR, Commands.VIEW_HIDE_SIDEBAR, toggle);
CommandManager.register(Strings.CMD_SHOW_SIDEBAR, Commands.SHOW_SIDEBAR, show);
CommandManager.register(Strings.CMD_HIDE_SIDEBAR, Commands.HIDE_SIDEBAR, hide);

// Define public API
exports.toggle = toggle;
Expand Down
4 changes: 4 additions & 0 deletions src/styles/brackets.less
Original file line number Diff line number Diff line change
Expand Up @@ -140,6 +140,10 @@ a, img {
display: none !important;
}

.force-right-zero {
right: 0 !important;
}

.busyCursor {
cursor: wait !important;
}
Expand Down
17 changes: 14 additions & 3 deletions src/utils/Resizer.js
Original file line number Diff line number Diff line change
Expand Up @@ -54,19 +54,21 @@ define(function (require, exports, module) {
var POSITION_BOTTOM = "bottom";
var POSITION_LEFT = "left";
var POSITION_RIGHT = "right";
var PREFS_PURE_CODE = "noDistractions";

// Minimum size (height or width) for autodiscovered resizable panels
var DEFAULT_MIN_SIZE = 100;

// Load dependent modules
var AppInit = require("utils/AppInit"),
EventDispatcher = require("utils/EventDispatcher"),
ViewUtils = require("utils/ViewUtils"),
PreferencesManager = require("preferences/PreferencesManager");

var $mainView;

var isResizing = false;

/**
* Shows a resizable element.
* @param {DOMNode} element Html element to show if possible
Expand Down Expand Up @@ -223,6 +225,10 @@ define(function (require, exports, module) {
resizerCSSPosition = direction === DIRECTION_HORIZONTAL ? "left" : "top",
contentSizeFunction = direction === DIRECTION_HORIZONTAL ? $resizableElement.width : $resizableElement.height;

if (PreferencesManager.get(PREFS_PURE_CODE)) {
elementPrefs.visible = false;
}

if (!elementID) {
console.error("Resizable panels must have a DOM id to use as a preferences key:", element);
return;
Expand Down Expand Up @@ -527,6 +533,11 @@ define(function (require, exports, module) {
makeResizable(element, DIRECTION_HORIZONTAL, POSITION_RIGHT, minSize, $(element).hasClass("collapsible"), $(element).data().forceleft);
}
});

// The main toolbar is only collapsible.
if ($("#main-toolbar").hasClass("collapsible") && PreferencesManager.get(PREFS_PURE_CODE)) {
ViewUtils.hideMainToolBar();
}
});

/**
Expand All @@ -544,9 +555,9 @@ define(function (require, exports, module) {

return null;
}

PreferencesManager.convertPreferences(module, {"panelState": "user"}, true, _isPanelPreferences);

EventDispatcher.makeEventDispatcher(exports);

exports.makeResizable = makeResizable;
Expand Down
20 changes: 18 additions & 2 deletions src/utils/ViewUtils.js
Original file line number Diff line number Diff line change
Expand Up @@ -28,8 +28,8 @@
define(function (require, exports, module) {
"use strict";

var _ = require("thirdparty/lodash"),
LanguageManager = require("language/LanguageManager");
var _ = require("thirdparty/lodash"),
LanguageManager = require("language/LanguageManager");

var SCROLL_SHADOW_HEIGHT = 5;

Expand Down Expand Up @@ -501,6 +501,20 @@ define(function (require, exports, module) {
return null;
}

function hideMainToolBar() {
$("#main-toolbar").addClass("forced-hidden");
$(".main-view .content").each(function (index, element) {
$(element).addClass("force-right-zero");
});
}

function showMainToolBar() {
$("#main-toolbar").removeClass("forced-hidden");
$(".main-view .content").each(function (index, element) {
$(element).removeClass("force-right-zero");
});
}

// handle all resize handlers in a single listener
$(window).resize(_handleResize);

Expand All @@ -509,6 +523,8 @@ define(function (require, exports, module) {
exports.addScrollerShadow = addScrollerShadow;
exports.removeScrollerShadow = removeScrollerShadow;
exports.sidebarList = sidebarList;
exports.showMainToolBar = showMainToolBar;
exports.hideMainToolBar = hideMainToolBar;
exports.scrollElementIntoView = scrollElementIntoView;
exports.getElementClipSize = getElementClipSize;
exports.getFileEntryDisplay = getFileEntryDisplay;
Expand Down
Loading

1 comment on commit 3cec328

@seehup
Copy link

@seehup seehup commented on 3cec328 Oct 5, 2018

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Comment on 3cec328

Please sign in to comment.