Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
Browse files

Merge pull request #2329 from adobe/nj/extract-about-dialog

Extract About dialog from main HTML file so that we can override it easily in Edge Code
  • Loading branch information...
commit cc7e4c912ec5c538ec7af4bb544493df42d6f57d 2 parents d731d69 + 46385c0
@jasonsanjose jasonsanjose authored
View
8 src/brackets.js
@@ -313,13 +313,7 @@ define(function (require, exports, module) {
});
// Localize MainViewHTML and inject into <BODY> tag
- var templateVars = $.extend({
- ABOUT_ICON : brackets.config.about_icon,
- APP_NAME_ABOUT_BOX : brackets.config.app_name_about,
- VERSION : brackets.metadata.version
- }, Strings);
-
- $("body").html(Mustache.render(MainViewHTML, templateVars));
+ $("body").html(Mustache.render(MainViewHTML, Strings));
// Update title
$("title").text(brackets.config.app_title);
View
16 src/help/HelpCommandHandlers.js
@@ -23,7 +23,7 @@
/*jslint vars: true, plusplus: true, devel: true, nomen: true, indent: 4, maxerr: 50 */
-/*global define, $, brackets, window */
+/*global define, $, brackets, window, Mustache */
define(function (require, exports, module) {
"use strict";
@@ -37,7 +37,8 @@ define(function (require, exports, module) {
UpdateNotification = require("utils/UpdateNotification"),
FileUtils = require("file/FileUtils"),
NativeApp = require("utils/NativeApp"),
- StringUtils = require("utils/StringUtils");
+ StringUtils = require("utils/StringUtils"),
+ AboutDialogTemplate = require("text!htmlContent/about-dialog.html");
var buildInfo;
@@ -55,11 +56,12 @@ define(function (require, exports, module) {
}
function _handleAboutDialog() {
- if (buildInfo) {
- $("#about-build-number").text(" (" + buildInfo + ")");
- }
-
- Dialogs.showModalDialog(Dialogs.DIALOG_ID_ABOUT);
+ var templateVars = $.extend({
+ ABOUT_ICON : brackets.config.about_icon,
+ APP_NAME_ABOUT_BOX : brackets.config.app_name_about,
+ BUILD_INFO : buildInfo
+ }, Strings);
+ Dialogs.showModalDialogUsingTemplate(Mustache.render(AboutDialogTemplate, templateVars));
}
function _handleForum() {
View
18 src/htmlContent/about-dialog.html
@@ -0,0 +1,18 @@
+<div class="about-dialog modal">
+ <div class="modal-header">
+ <h1 class="dialog-title">{{ABOUT}}</h1>
+ </div>
+ <div class="modal-body">
+ <img class="about-icon" src="{{ABOUT_ICON}}">
+ <div class="about-text">
+ <h2>{{APP_NAME_ABOUT_BOX}}</h2>
+ <p class="dialog-message">{{ABOUT_TEXT_LINE1}} <span id="about-build-number">({{BUILD_INFO}})</span></p>
+ <p class="dialog-message"><!-- $NON-NLS$ -->Copyright 2012 Adobe Systems Incorporated and its licensors. All rights reserved.</p>
+ <p class="dialog-message">{{{ABOUT_TEXT_LINE3}}}</p>
+ <p class="dialog-message">{{{ABOUT_TEXT_LINE4}}}</p>
+ </div>
+ </div>
+ <div class="modal-footer">
+ <a href="#" class="dialog-button btn primary" data-button-id="ok">{{CLOSE}}</a>
+ </div>
+</div>
View
49 src/htmlContent/main-view.html
@@ -180,55 +180,6 @@ <h1 class="dialog-title">Title goes here</h1>
<a href="#" class="dialog-button btn primary" data-button-id="ok">{{RELAUNCH_CHROME}}</a>
</div>
</div>
- <div class="about-dialog template modal hide">
- <div class="modal-header">
- <h1 class="dialog-title">{{ABOUT}}</h1>
- </div>
- <div class="modal-body">
- <img class="about-icon" src="{{ABOUT_ICON}}">
- <div class="about-text">
- <h2>{{APP_NAME_ABOUT_BOX}}</h2>
- <p class="dialog-message">{{ABOUT_TEXT_LINE1}}<span id="about-build-number"><!-- populated programmatically --></span></p>
- <p class="dialog-message"><!-- $NON-NLS$ -->Copyright 2012 Adobe Systems Incorporated and its licensors. All rights reserved.</p>
- <p class="dialog-message">{{{ABOUT_TEXT_LINE3}}}</p>
- <p class="dialog-message">{{{ABOUT_TEXT_LINE4}}}</p>
- </div>
- </div>
- <div class="modal-footer">
- <a href="#" class="dialog-button btn primary" data-button-id="ok">{{CLOSE}}</a>
- </div>
- </div>
- <div class="update-dialog template modal hide">
- <div class="modal-header">
- <h1 class="dialog-title">{{UPDATE_AVAILABLE_TITLE}}</h1>
- </div>
- <div class="modal-body">
- <img class="update-icon" src="styles/images/update_large_icon.svg">
- <div class="update-text">
- <p class="dialog-message">{{UPDATE_MESSAGE}}</p>
- <div class="update-info">
- </div>
- </div>
- </div>
- <div class="modal-footer">
- <a href="#" class="dialog-button btn left" data-button-id="cancel">{{CANCEL}}</a>
- <a href="#" class="dialog-button btn primary" data-button-id="download">{{GET_IT_NOW}}</a>
- </div>
- </div>
- <div class="project-settings-dialog template modal hide">
- <div class="modal-header">
- <h1 class="dialog-title"></h1>
- </div>
- <div class="modal-body">
- <div class="settings-list">
- <label>{{PROJECT_SETTING_BASE_URL}}: <input type="text" placeholder="{{PROJECT_SETTING_BASE_URL_HINT}}" class="base-url" /></label>
- </div>
- </div>
- <div class="modal-footer">
- <a href="#" class="dialog-button btn left" data-button-id="cancel">{{CANCEL}}</a>
- <a href="#" class="dialog-button btn primary" data-button-id="ok">{{OK}}</a>
- </div>
- </div>
<div id="context-menu-bar">
<ul data-dropdown="dropdown"></ul>
</div>
View
14 src/htmlContent/project-settings-dialog.html
@@ -0,0 +1,14 @@
+<div class="project-settings-dialog modal">
+ <div class="modal-header">
+ <h1 class="dialog-title"></h1>
+ </div>
+ <div class="modal-body">
+ <div class="settings-list">
+ <label>{{PROJECT_SETTING_BASE_URL}}: <input type="text" placeholder="{{PROJECT_SETTING_BASE_URL_HINT}}" class="base-url" /></label>
+ </div>
+ </div>
+ <div class="modal-footer">
+ <a href="#" class="dialog-button btn left" data-button-id="cancel">{{CANCEL}}</a>
+ <a href="#" class="dialog-button btn primary" data-button-id="ok">{{OK}}</a>
+ </div>
+</div>
View
17 src/htmlContent/update-dialog.html
@@ -0,0 +1,17 @@
+<div class="update-dialog modal">
+ <div class="modal-header">
+ <h1 class="dialog-title">{{UPDATE_AVAILABLE_TITLE}}</h1>
+ </div>
+ <div class="modal-body">
+ <img class="update-icon" src="styles/images/update_large_icon.svg">
+ <div class="update-text">
+ <p class="dialog-message">{{UPDATE_MESSAGE}}</p>
+ <div class="update-info">
+ </div>
+ </div>
+ </div>
+ <div class="modal-footer">
+ <a href="#" class="dialog-button btn left" data-button-id="cancel">{{CANCEL}}</a>
+ <a href="#" class="dialog-button btn primary" data-button-id="download">{{GET_IT_NOW}}</a>
+ </div>
+</div>
View
15 src/preferences/PreferencesDialogs.js
@@ -23,7 +23,7 @@
/*jslint vars: true, plusplus: true, devel: true, nomen: true, indent: 4, maxerr: 50 */
-/*global define, $, PathUtils */
+/*global define, $, PathUtils, Mustache */
/**
* PreferencesDialogs
@@ -34,11 +34,12 @@ define(function (require, exports, module) {
require("thirdparty/path-utils/path-utils.min");
- var Dialogs = require("widgets/Dialogs"),
- PreferencesManager = require("preferences/PreferencesManager"),
- ProjectManager = require("project/ProjectManager"),
- StringUtils = require("utils/StringUtils"),
- Strings = require("strings");
+ var Dialogs = require("widgets/Dialogs"),
+ PreferencesManager = require("preferences/PreferencesManager"),
+ ProjectManager = require("project/ProjectManager"),
+ StringUtils = require("utils/StringUtils"),
+ Strings = require("strings"),
+ SettingsDialogTemplate = require("text!htmlContent/project-settings-dialog.html");
/**
* Validate that text string is a valid base url which should map to a server folder
@@ -85,7 +86,7 @@ define(function (require, exports, module) {
$baseUrlControl,
promise;
- promise = Dialogs.showModalDialog(Dialogs.DIALOG_ID_PROJECT_SETTINGS)
+ promise = Dialogs.showModalDialogUsingTemplate(Mustache.render(SettingsDialogTemplate, Strings))
.done(function (id) {
if (id === Dialogs.DIALOG_BTN_OK) {
var baseUrlValue = $baseUrlControl.val();
View
15 src/utils/UpdateNotification.js
@@ -31,12 +31,13 @@
define(function (require, exports, module) {
"use strict";
- var Dialogs = require("widgets/Dialogs"),
- NativeApp = require("utils/NativeApp"),
- PreferencesManager = require("preferences/PreferencesManager"),
- Strings = require("strings"),
- StringUtils = require("utils/StringUtils"),
- Global = require("utils/Global");
+ var Dialogs = require("widgets/Dialogs"),
+ NativeApp = require("utils/NativeApp"),
+ PreferencesManager = require("preferences/PreferencesManager"),
+ Strings = require("strings"),
+ StringUtils = require("utils/StringUtils"),
+ Global = require("utils/Global"),
+ UpdateDialogTemplate = require("text!htmlContent/update-dialog.html");
// Extract current build number from package.json version field 0.0.0-0
var _buildNumber = Number(/-([0-9]+)/.exec(brackets.metadata.version)[1]);
@@ -186,7 +187,7 @@ define(function (require, exports, module) {
* Show a dialog that shows the update
*/
function _showUpdateNotificationDialog(updates) {
- Dialogs.showModalDialog(Dialogs.DIALOG_ID_UPDATE)
+ Dialogs.showModalDialogUsingTemplate(Mustache.render(UpdateDialogTemplate, Strings))
.done(function (id) {
if (id === Dialogs.DIALOG_BTN_DOWNLOAD) {
// The first entry in the updates array has the latest download link
View
66 src/widgets/Dialogs.js
@@ -50,10 +50,7 @@ define(function (require, exports, module) {
DIALOG_ID_SAVE_CLOSE = "save-close-dialog",
DIALOG_ID_EXT_CHANGED = "ext-changed-dialog",
DIALOG_ID_EXT_DELETED = "ext-deleted-dialog",
- DIALOG_ID_LIVE_DEVELOPMENT = "live-development-error-dialog",
- DIALOG_ID_ABOUT = "about-dialog",
- DIALOG_ID_UPDATE = "update-dialog",
- DIALOG_ID_PROJECT_SETTINGS = "project-settings-dialog";
+ DIALOG_ID_LIVE_DEVELOPMENT = "live-development-error-dialog";
function _dismissDialog(dlg, buttonId) {
dlg.data("buttonId", buttonId);
@@ -114,13 +111,11 @@ define(function (require, exports, module) {
};
/**
- * General purpose modal dialog. Assumes that:
- * -- the root tag of the dialog is marked with a unique class name (passed as dlgClass), as well as the
- * classes "template modal hide".
- * -- the HTML for the dialog contains elements with "title" and "message" classes, as well as a number
- * of elements with "dialog-button" class, each of which has a "data-button-id".
+ * Like showModalDialog(), but takes a template as a parameter rather than assuming the template is embedded
+ * in the current DOM. The template can either be a string or a jQuery object representing a DOM node that is
+ * *not* in the current DOM.
*
- * @param {string} dlgClass The class of the dialog node in the HTML.
+ * @param {string} template A string template or jQuery object to use as the dialog HTML.
* @param {string=} title The title of the error dialog. Can contain HTML markup. If unspecified, title in
* the HTML template is used unchanged.
* @param {string=} message The message to display in the error dialog. Can contain HTML markup. If
@@ -128,24 +123,14 @@ define(function (require, exports, module) {
* @return {$.Promise} a promise that will be resolved with the ID of the clicked button when the dialog
* is dismissed. Never rejected.
*/
- function showModalDialog(dlgClass, title, message) {
+ function showModalDialogUsingTemplate(template, title, message) {
var result = $.Deferred(),
promise = result.promise();
- // We clone the HTML rather than using it directly so that if two dialogs of the same
- // type happen to show up, they can appear at the same time. (This is an edge case that
- // shouldn't happen often, but we can't prevent it from happening since everything is
- // asynchronous.)
- var $dlg = $("." + dlgClass + ".template")
- .clone()
- .removeClass("template")
+ var $dlg = $(template)
.addClass("instance")
.appendTo(window.document.body);
- if ($dlg.length === 0) {
- throw new Error("Dialog id " + dlgClass + " does not exist");
- }
-
// Save the dialog promise for unit tests
$dlg.data("promise", promise);
@@ -215,6 +200,35 @@ define(function (require, exports, module) {
}
/**
+ * General purpose modal dialog. Assumes that:
+ * -- the root tag of the dialog is marked with a unique class name (passed as dlgClass), as well as the
+ * classes "template modal hide".
+ * -- the HTML for the dialog contains elements with "title" and "message" classes, as well as a number
+ * of elements with "dialog-button" class, each of which has a "data-button-id".
+ *
+ * @param {string} dlgClass The class of the dialog node in the HTML.
+ * @param {string=} title The title of the error dialog. Can contain HTML markup. If unspecified, title in
+ * the HTML template is used unchanged.
+ * @param {string=} message The message to display in the error dialog. Can contain HTML markup. If
+ * unspecified, body in the HTML template is used unchanged.
+ * @return {$.Promise} a promise that will be resolved with the ID of the clicked button when the dialog
+ * is dismissed. Never rejected.
+ */
+ function showModalDialog(dlgClass, title, message) {
+ // We clone the HTML rather than using it directly so that if two dialogs of the same
+ // type happen to show up, they can appear at the same time. (This is an edge case that
+ // shouldn't happen often, but we can't prevent it from happening since everything is
+ // asynchronous.)
+ var $template = $("." + dlgClass + ".template")
+ .clone()
+ .removeClass("template");
+ if ($template.length === 0) {
+ throw new Error("Dialog id " + dlgClass + " does not exist");
+ }
+ return showModalDialogUsingTemplate($template, title, message);
+ }
+
+ /**
* Immediately closes any dialog instances with the given class. The dialog callback for each instance will
* be called with the special buttonId DIALOG_CANCELED (note: callback is run asynchronously).
*/
@@ -238,10 +252,8 @@ define(function (require, exports, module) {
exports.DIALOG_ID_EXT_CHANGED = DIALOG_ID_EXT_CHANGED;
exports.DIALOG_ID_EXT_DELETED = DIALOG_ID_EXT_DELETED;
exports.DIALOG_ID_LIVE_DEVELOPMENT = DIALOG_ID_LIVE_DEVELOPMENT;
- exports.DIALOG_ID_ABOUT = DIALOG_ID_ABOUT;
- exports.DIALOG_ID_UPDATE = DIALOG_ID_UPDATE;
- exports.DIALOG_ID_PROJECT_SETTINGS = DIALOG_ID_PROJECT_SETTINGS;
- exports.showModalDialog = showModalDialog;
- exports.cancelModalDialogIfOpen = cancelModalDialogIfOpen;
+ exports.showModalDialog = showModalDialog;
+ exports.showModalDialogUsingTemplate = showModalDialogUsingTemplate;
+ exports.cancelModalDialogIfOpen = cancelModalDialogIfOpen;
});

0 comments on commit cc7e4c9

Please sign in to comment.
Something went wrong with that request. Please try again.