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

Fonts api with Themes integrated #8492

Merged
merged 8 commits into from
Jul 22, 2014
Merged

Fonts api with Themes integrated #8492

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
f4d1e71
Fix #8481 by adding a newline to the light theme.
dangoor Jul 22, 2014
3681d92
Fonts api with themes integrated
MiguelCastillo Jul 22, 2014
da45d27
Fixed jslint complaints
MiguelCastillo Jul 22, 2014
8ce9221
Merge pull request #8282 from le717/issue-8216
TomMalbran Jul 22, 2014
86fa10f
Fonts api with themes integrated
MiguelCastillo Jul 22, 2014
8df039b
Fixed jslint complaints
MiguelCastillo Jul 22, 2014
2822783
Merge branch 'fonts' of https://github.com/MiguelCastillo/brackets in…
MiguelCastillo Jul 22, 2014
9c339f0
Corrected check if default settings have changed
MiguelCastillo Jul 22, 2014
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion src/extensions/default/ThorLightTheme/main.less
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,4 +18,4 @@
// FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER
// DEALINGS IN THE SOFTWARE.

// This is the default theme and doesn't need to do anything!
// This is the default theme and doesn't need to do anything!
9 changes: 9 additions & 0 deletions src/styles/brackets_codemirror_override.less
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -75,6 +75,15 @@
border-bottom: 2px solid #78B2F2;
}

/**
* These classes are set to inline-block because they are spans and they need block dimension properties when
* when calculation height and width.
*/
.CodeMirror-searching,
.CodeMirror-matchingtag,
.CodeMirror-matchingbracket {
display: inline-block;
}

span.cm-keyword {color: @accent-keyword;}
span.cm-atom {color: @accent-atom;}
Expand Down
37 changes: 0 additions & 37 deletions src/themes/FontCommandsManager.js
View file
Open in desktop

This file was deleted.

21 changes: 0 additions & 21 deletions src/view/ThemeManager.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -27,9 +27,6 @@
define(function (require, exports, module) {
"use strict";

// FontsCommandsManager will be going away soon when we add font size management in Brackets.
require("themes/FontCommandsManager");

var _ = require("thirdparty/lodash"),
FileSystem = require("filesystem/FileSystem"),
FileUtils = require("file/FileUtils"),
Expand Down Expand Up @@ -345,21 +342,6 @@ define(function (require, exports, module) {
ThemeView.updateScrollbars(getCurrentTheme());
});

prefs.on("change", "fontSize", function () {
refresh();
ThemeView.updateFontSize();
});

prefs.on("change", "lineHeight", function () {
refresh();
ThemeView.updateLineHeight();
});

prefs.on("change", "fontFamily", function () {
refresh();
ThemeView.updateFontFamily();
});

// Monitor file changes. If the file that has changed is actually the currently loaded
// theme, then we just reload the theme. This allows to live edit the theme
FileSystem.on("change", function (evt, file) {
Expand All @@ -377,9 +359,6 @@ define(function (require, exports, module) {
});


ThemeView.updateFonts();
ThemeView.updateScrollbars();

exports.refresh = refresh;
exports.loadFile = loadFile;
exports.loadPackage = loadPackage;
Expand Down
47 changes: 28 additions & 19 deletions src/view/ThemeSettings.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -27,12 +27,13 @@
define(function (require, exports, module) {
"use strict";

var _ = require("thirdparty/lodash"),
Dialogs = require("widgets/Dialogs"),
Strings = require("strings"),
PreferencesManager = require("preferences/PreferencesManager"),
settingsTemplate = require("text!htmlContent/themes-settings.html"),
prefs = PreferencesManager.getExtensionPrefs("themes");
var _ = require("thirdparty/lodash"),
Dialogs = require("widgets/Dialogs"),
Strings = require("strings"),
ViewCommandHandlers = require("view/ViewCommandHandlers"),
settingsTemplate = require("text!htmlContent/themes-settings.html"),
PreferencesManager = require("preferences/PreferencesManager"),
prefs = PreferencesManager.getExtensionPrefs("themes");

/**
* @type {Object}
Expand All @@ -44,9 +45,6 @@ define(function (require, exports, module) {
* Object with all default values that can be configure via the settings UI
*/
var defaults = {
"fontSize": 12,
"lineHeight": 1.25,
"fontFamily": "'SourceCodePro-Medium', ＭＳ ゴシック, 'MS Gothic', monospace",
"customScrollbars": true,
"theme": "thor-light-theme"
};
Expand All @@ -64,9 +62,16 @@ define(function (require, exports, module) {
* @return {Object} a collection with all the settings
*/
function getValues() {
return _.transform(defaults, function (result, value, key) {
var result = {};

Object.keys(defaults).forEach(function (key) {
result[key] = prefs.get(key);
});

result.fontFamily = ViewCommandHandlers.getFontFamily();
result.fontSize = ViewCommandHandlers.getFontSize();
result.lineHeight = ViewCommandHandlers.getLineHeight();
return result;
}

/**
Expand Down Expand Up @@ -109,9 +114,21 @@ define(function (require, exports, module) {
});

Dialogs.showModalDialogUsingTemplate($template).done(function (id) {
var setterFn;

if (id === "save") {
// Go through each new setting and apply it
Object.keys(newSettings).forEach(function (setting) {
prefs.set(setting, newSettings[setting]);
if (defaults.hasOwnProperty(setting)) {
prefs.set(setting, newSettings[setting]);
} else {
// Figure out if the setting is in the ViewCommandHandlers, which means it is
// a font setting
setterFn = "set" + setting[0].toLocaleUpperCase() + setting.substr(1);
if (typeof ViewCommandHandlers[setterFn] === 'function') {
ViewCommandHandlers[setterFn](newSettings[setting]);
}
}
});
} else if (id === "cancel") {
// Make sure we revert any changes to theme selection
Expand All @@ -133,21 +150,13 @@ define(function (require, exports, module) {
*/
function restore() {
Copy link
Contributor

Choose a reason for hiding this comment

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

I realize that restore is not new, but I wonder if it's actually useful? Maybe we should just delete it?

Copy link
Contributor Author

Choose a reason for hiding this comment

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

Yeah man, we can delete that for sure if nothing breaks

Copy link
Contributor Author

Choose a reason for hiding this comment

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

I remember now. I use that function in the extension because I have a reset button in the settings dialog. I am thinking that something like might actually be useful here too. What do you think?

Copy link
Contributor

Choose a reason for hiding this comment

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

Ahh, that makes sense. This does seem like a context in which a reset button could be useful.

Copy link
Contributor Author

Choose a reason for hiding this comment

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

Would you prefer we remove the function? It seems like we can add it back if/when a restore setttings button is added. I am happy either way.

Copy link
Contributor

Choose a reason for hiding this comment

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

Nope, let's leave it in.

prefs.set("theme", defaults.theme);
Copy link
Contributor

Choose a reason for hiding this comment

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

I forgot to mention this previously: the better way to restore the default is prefs.set("theme", undefined). That will delete the value from the preferences file.

Copy link
Contributor Author

Choose a reason for hiding this comment

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

Oh ok, cool. I will change that then

prefs.set("fontSize", defaults.fontSize + "px");
prefs.set("lineHeight", defaults.lineHeight);
prefs.set("fontFamily", defaults.fontFamily);
prefs.set("customScrollbars", defaults.customScrollbars);
}


prefs.definePreference("theme", "string", defaults.theme);
prefs.definePreference("fontSize", "string", defaults.fontSize + "px");
prefs.definePreference("lineHeight", "number", defaults.lineHeight);
prefs.definePreference("fontFamily", "string", defaults.fontFamily);
prefs.definePreference("customScrollbars", "boolean", defaults.customScrollbars);

exports._setThemes = setThemes;
exports._defaults = defaults;
exports.restore = restore;
exports.showDialog = showDialog;
});
51 changes: 3 additions & 48 deletions src/view/ThemeView.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -34,48 +34,7 @@ define(function (require, exports, module) {
PreferencesManager = require("preferences/PreferencesManager"),
prefs = PreferencesManager.getExtensionPrefs("themes");


var templates = {
$lineHeight: $("<style type='text/css' id='lineHeight'>").appendTo("head"),
$fontSize: $("<style type='text/css' id='fontSize'>").appendTo("head"),
$fontFamily: $("<style type='text/css' id='fontFamily'>").appendTo("head"),
$scrollbars: $("<style id='scrollbars'>").appendTo("head")
};


function clearFonts() {
// Remove this tag that is intefering with font settings set in this module
$("#codemirror-dynamic-fonts").remove();
}


function updateLineHeight() {
clearFonts();
var value = prefs.get("lineHeight");
templates.$lineHeight.text(".CodeMirror-lines{" + "line-height: " + value + "; }");
}


function updateFontSize() {
clearFonts();
var value = prefs.get("fontSize");
templates.$fontSize.text(".CodeMirror{" + "font-size: " + value + " !important; }");
}


function updateFontFamily() {
clearFonts();
var value = prefs.get("fontFamily");
templates.$fontFamily.text(".CodeMirror{" + "font-family: " + value + " !important; }");
}


function updateFonts() {
clearFonts();
updateLineHeight();
updateFontSize();
updateFontFamily();
}
var $scrollbars = $("<style id='scrollbars'>").appendTo("head");


/**
Expand All @@ -88,9 +47,9 @@ define(function (require, exports, module) {
theme = theme || {};
if (prefs.get("customScrollbars")) {
var scrollbar = (theme.scrollbar || []).join(" ");
templates.$scrollbars.text(scrollbar || "");
$scrollbars.text(scrollbar || "");
} else {
templates.$scrollbars.text("");
$scrollbars.text("");
}
}

Expand Down Expand Up @@ -130,10 +89,6 @@ define(function (require, exports, module) {
}


exports.updateFonts = updateFonts;
exports.updateLineHeight = updateLineHeight;
exports.updateFontSize = updateFontSize;
exports.updateFontFamily = updateFontFamily;
exports.updateScrollbars = updateScrollbars;
exports.updateThemes = updateThemes;
exports.setDocumentMode = setDocumentMode;
Expand Down
Loading