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

Toggle panels and no-Distraction mode #11732

Merged
merged 12 commits into from
Nov 18, 2015
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
155 changes: 155 additions & 0 deletions src/extensions/default/NoDistractions/main.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,155 @@
/*
* Copyright (c) 2013 Adobe Systems Incorporated. All rights reserved.
Copy link
Contributor

Choose a reason for hiding this comment

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

Change copyright from 2013 to 2015

*
* 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, plusplus: true, devel: true, nomen: true, regexp: true, indent: 4, maxerr: 50 */
Copy link
Contributor

Choose a reason for hiding this comment

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

Please review if all of these params to jslint are valid for this file.

/*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"),
WorkspaceManager = brackets.getModule("view/WorkspaceManager");

// Constants
var PREFS_PURE_CODE = "noDistractions",
CMD_TOGGLE_PURE_CODE = "view.togglePureCode",
CMD_TOGGLE_PANELS = "view.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 name given.
*
* @param {string} name Name of preference that has changed
Copy link
Contributor

Choose a reason for hiding this comment

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

Should we update the documentation as I don't see any {string} parameter.

*/
function _updateCheckedState() {
CommandManager.get(CMD_TOGGLE_PURE_CODE).setChecked(PreferencesManager.get(PREFS_PURE_CODE));
Copy link
Contributor

Choose a reason for hiding this comment

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

A null check would be better here.

}

function _togglePureCode() {
PreferencesManager.set(PREFS_PURE_CODE, !PreferencesManager.get(PREFS_PURE_CODE));
}

/**
* hide all open panels
Copy link
Contributor

Choose a reason for hiding this comment

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

Since you are following adding "@Private" to the function documentation, let us be consistent with labeling all the private functions with "@Private"

*/
function _hidePanelsIfRequired() {
var panelIDs = WorkspaceManager.getAllPanelIDs(), i = 0;
_previouslyOpenPanelIDs = [];
for (i = 0; i < panelIDs.length; i++) {
Copy link
Contributor

Choose a reason for hiding this comment

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

forEach instead of for()?

if (WorkspaceManager.getPanelForID(panelIDs[i]).isVisible()) {
Copy link
Contributor

Choose a reason for hiding this comment

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

It is better to have a null check here.

Copy link
Contributor Author

Choose a reason for hiding this comment

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

As we just got the panel ID's from the above statement, this should never be null at this line. It would be better that a NULL access exception be raised here in that case, else will be hard to debug if things fails- which it should not 🔮 .

Copy link
Contributor

Choose a reason for hiding this comment

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

We will never know whether we are given a null panel or an actual panel as that entirely depends on the API that is getting called. A check is surely of no harm here.

WorkspaceManager.getPanelForID(panelIDs[i]).hide();
_previouslyOpenPanelIDs.push(panelIDs[i]);
}
}
}

/**
* show all open panels that was previously hidden by _hidePanelsIfRequired()
*/
function _showPanelsIfRequired() {
var panelIDs = _previouslyOpenPanelIDs, i = 0;
Copy link
Contributor

Choose a reason for hiding this comment

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

No need of an extra variable paneIDs here. You could further simplify this with forEach

for (i = 0; i < panelIDs.length; i++) {
if (WorkspaceManager.getPanelForID(panelIDs[i])) {
Copy link
Contributor

Choose a reason for hiding this comment

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

Store the result from getPanelForID instead of calling the same function below.

WorkspaceManager.getPanelForID(panelIDs[i]).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() {
panelsToggled = !panelsToggled;
if (panelsToggled) {
_hidePanelsIfRequired();
layoutUpdated = false;
panelsToggled = true;
} else if (!layoutUpdated) {
_showPanelsIfRequired();
}
}

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

PreferencesManager.on("change", PREFS_PURE_CODE, function () {
Copy link
Collaborator

Choose a reason for hiding this comment

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

_showPanelsIfRequired, _hidePanelsIfRequired

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("workspaceUpdateLayout", _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 @@ -768,5 +771,6 @@ define({
"DESCRIPTION_OPEN_PREFS_IN_SPLIT_VIEW" : "false to disable opening preferences file in split view",
"DESCRIPTION_OPEN_USER_PREFS_IN_SECOND_PANE" : "false to open user preferences file in left/top pane",
"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 view only mode, Every other UI element in brackets will be hidden"
Copy link
Contributor

Choose a reason for hiding this comment

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

can we rephrase this to "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"),
Copy link
Collaborator

Choose a reason for hiding this comment

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

nit: ViewUtils, in ProperCase

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
33 changes: 32 additions & 1 deletion src/view/WorkspaceManager.js
Original file line number Diff line number Diff line change
Expand Up @@ -56,6 +56,11 @@ define(function (require, exports, module) {
var $editorHolder;

/**
* A map from panel ID's to all reated panels
*/
var panelIDMap = {};

/**
* Have we already started listening for the end of the ongoing window resize?
* @type {boolean}
*/
Expand Down Expand Up @@ -221,9 +226,33 @@ define(function (require, exports, module) {
$panel.hide();
updateResizeLimits(); // initialize panel's max size

return new Panel($panel, minSize);
panelIDMap[id] = new Panel($panel, minSize);

return panelIDMap[id];
}

/**
* Returns an array of all panel ID's
* @returns {Array} List of ID's of all bottom panels
*/
function getAllPanelIDs() {
var property, panelIDs = [];
for (property in panelIDMap) {
if (panelIDMap.hasOwnProperty(property)) {
panelIDs.push(property);
}
}
return panelIDs;
}

/**
* Gets the Panel interface for the given ID. Can return undefined if no panel with the ID is found.
* @param {string} panelID
* @returns {Object} Panel object for the ID or undefined
*/
function getPanelForID(panelID) {
return panelIDMap[panelID];
}

/**
* Called when an external widget has appeared and needs some of the space occupied
Expand Down Expand Up @@ -263,5 +292,7 @@ define(function (require, exports, module) {
// Define public API
exports.createBottomPanel = createBottomPanel;
exports.recomputeLayout = recomputeLayout;
exports.getAllPanelIDs = getAllPanelIDs;
exports.getPanelForID = getPanelForID;
exports._setMockDOM = _setMockDOM;
});
Loading