Accommodate the "Full HTML skeleton" description

le717 · Feb 22, 2014 · 3d99dc3 · 3d99dc3
1 parent 8f480af
commit 3d99dc3
Show file tree

Hide file tree

Showing 6 changed files with 30 additions and 24 deletions.
diff --git a/css/style.css b/css/style.css
@@ -28,7 +28,16 @@
 /* Do not place the labels on a new line */
 .html-skeleton > label { display: inline; }
 
+/* Accommodate the "Full HTML skeleton" description */
+#full-skelly-description {
+    font-size: 12px;
+    display: inline-block;
+    position: relative;
+    bottom: 5px;
+}
+
+/* Enlarge the "x" between image dimensions */
 .html-skeleton #img-size-x {
-    font-weight: bold;
+    font-weight: 900;
     font-size: 17px;
 }
diff --git a/htmlContent/mainDialog.html b/htmlContent/mainDialog.html
@@ -1,28 +1,23 @@
 <div class="html-skeleton-dialog template modal hide">
-    <!-- Dialog title -->
     <div class="modal-header">
         <h1 class="dialog-title">{{DIALOG_TITLE}}</h1>
     </div>
 
     <div class="modal-body html-skeleton-modal-body">
-        <!-- What does this extension do? -->
         <p class="dialog-message">
             {{DIALOG_EXTENSION_DESCRIPTION}}
         </p>
 
-        <!-- HTML Skeleton logo by http://rioforce.WordPress.com
-        The `src` attribute is added through JavaScript -->
+        <!-- HTML Skeleton logo by http://rioforce.WordPress.com -->
         <img class="html-skeleton" id="html-skeleton-figure" width="150" alt="HTML Skeleton logo" />
 
-        <!--- Usage directions -->
         <h3>{{USAGE}}</h3>
         <ol>
             <li>{{PLACE_CURSOR}}</li>
             <li>{{SELECT_ELEMENTS}}</li>
             <li>{{CLICK_DONE}}</li>
         </ol>
 
-        <!-- Element options -->
         <h3>{{ELEMENTS}}</h3>
             <form class="html-skeleton">
                 <input type="checkbox" id="head-body" />
@@ -40,22 +35,21 @@ <h3>{{ELEMENTS}}</h3>
                 <input type="checkbox" id="inline-script-tag" />
                 <label for="inline-script-tag">{{INLINE_SCRIPT}}<br></label>
 
-                <!-- Image and image size input boxes -->
                 <input type="checkbox" id="img-tag" />
                 <label for="img-tag">{{PICTURE_IMAGE}}<br></label>
 
                 <input type="number" id="img-width" min="0" placeholder="{{WIDTH}}" /> <span class="html-skeleton" id="img-size-x">x</span>
                 <input type="number" id="img-height" min="0" placeholder="{{HEIGHT}}" />
 
-                <!-- Add the entire HTML skeleton -->
                 <br>
                 <input type="checkbox" id="full-skelly" />
+
                 <label for="full-skelly">{{FULL_SKELETON}}<br>
-                {{FULL_SKELETON_DESCRIPTION}}</label>
+                    <span id="full-skelly-description">{{FULL_SKELETON_DESCRIPTION}}</span>
+                </label>
         </form>
     </div>
 
-    <!-- Done button -->
     <div class="modal-footer">
         <a href="#" class="dialog-button btn" data-button-id="cancel">{{BTN_CANCEL}}</a>
         <a href="#" class="dialog-button btn primary" data-button-id="ok">{{BTN_DONE}}</a>

diff --git a/main.js b/main.js
@@ -23,14 +23,17 @@ define(function (require, exports, module) {
         Document        = brackets.getModule("document/Document"),
         EditorManager   = brackets.getModule("editor/EditorManager"),
         ExtensionUtils  = brackets.getModule("utils/ExtensionUtils"),
+        ImageViewer     = brackets.getModule("editor/ImageViewer"),
         Menus           = brackets.getModule("command/Menus"),
+        ProjectManager  = brackets.getModule("project/ProjectManager"),
 
+        // Import dialog localization
         Strings         = require("strings"),
 
-        // Pull in the entire dialog
+        // Pull in the extension dialog
         skellyDialogHtml    = require("text!htmlContent/mainDialog.html"),
 
-        // Grab our logo to display in the dialog
+        // Grab the logo to display in the dialog
         skellyLogo      = require.toUrl("img/HTML-Skeleton.svg"),
 
         // The extension ID
@@ -52,7 +55,7 @@ define(function (require, exports, module) {
     var skellyBones = [
             // Only the head and body tags + title and meta
             '<!DOCTYPE html>\n<html lang="">\n<head>\n' + fourSpaceIndent +
-                '<meta charset="utf-8">\n' + fourSpaceIndent + '<title></title>\n' +
+                '<meta charset="UTF-8">\n' + fourSpaceIndent + '<title></title>\n' +
                 '\n</head>\n\n<body>\n' + fourSpaceIndent + '\n</body>\n</html>\n',
 
             // External stylesheet
@@ -69,7 +72,7 @@ define(function (require, exports, module) {
 
             // Full HTML skeleton
             '<!DOCTYPE html>\n<html lang="">\n<head>\n' + fourSpaceIndent +
-                '<meta charset="utf-8">\n' + fourSpaceIndent + '<title></title>\n' +
+                '<meta charset="UTF-8">\n' + fourSpaceIndent + '<title></title>\n' +
                 fourSpaceIndent + '<link rel="stylesheet" type="text/css" href="">' + '\n</head>\n\n<body>\n' +
                 fourSpaceIndent + '<script src=""></script>\n</body>\n</html>\n'
         ];
@@ -155,6 +158,7 @@ define(function (require, exports, module) {
             // Add the image tag to `finalElements` for addition in document,
             // replacing the default size with the the new values
             finalElements.push(
+                //FIXME regex
                 imageCode.replace('<img width="0" height="0"',
                                       '<img width="' + $imgWidth +
                                       '" height="' + $imgHeight + '"')
@@ -211,7 +215,7 @@ define(function (require, exports, module) {
     AppInit.appReady(function () {
         /* Load the extension after Brackets itself has finished loading */
 
-        // Load any required CSS
+        // Load extension CSS
         ExtensionUtils.loadStyleSheet(module, "css/style.css");
 
         // Assign a keyboard shortcut and item in Edit menu

diff --git a/nls/de/strings.js b/nls/de/strings.js
@@ -25,10 +25,10 @@
 /*global define */
 
 define({
-    // menu
+    // Menu item
     "INSERT_HTML_ELEMENTS" : "HTML Elemente einfügen\u2026",
 
-    // mainDialog
+    // mainDialog.html
     "DIALOG_TITLE" : "HTML Skeleton",
     "DIALOG_EXTENSION_DESCRIPTION" : "HTML Skeleton erlaubt Ihnen, verschiedene HTML-Elemente schnell und einfach in Ihr Dokument einzufügen.",
     "USAGE" : "Benutzung",
@@ -43,7 +43,7 @@ define({
     "INLINE_SCRIPT" : "Inline-Script",
     "PICTURE_IMAGE" : "Grafik/Bild",
     "WIDTH" : "Breite",
-    "HEIGHT"  : "Höhe",
+    "HEIGHT" : "Höhe",
     "FULL_SKELETON" : "Komplettes HTML Grundgerüst",
     "FULL_SKELETON_DESCRIPTION" : "Enthält alle obigen Elemente, außer Inline-Stylesheet, Inline-Script und Grafik/Bild",
     "BTN_CANCEL" : "Abbrechen",

diff --git a/nls/root/strings.js b/nls/root/strings.js
@@ -25,10 +25,10 @@
 /*global define */
 
 define({
-    // menu
+    // Menu item
     "INSERT_HTML_ELEMENTS" : "Insert HTML elements\u2026",
 
-    // mainDialog
+    // mainDialog.html
     "DIALOG_TITLE" : "HTML Skeleton",
     "DIALOG_EXTENSION_DESCRIPTION" : "HTML Skeleton allows you to add various HTML elements straight into your document, freeing you from typing it yourself.",
     "USAGE" : "Usage",
@@ -43,7 +43,7 @@ define({
     "INLINE_SCRIPT" : "Inline Script",
     "PICTURE_IMAGE" : "Picture/Image",
     "WIDTH" : "Width",
-    "HEIGHT"  : "Height",
+    "HEIGHT" : "Height",
     "FULL_SKELETON" : "Full HTML skeleton",
     "FULL_SKELETON_DESCRIPTION" : "Includes all elements above except inline stylesheet, inline script, and image",
     "BTN_CANCEL" : "Cancel",

diff --git a/nls/strings.js b/nls/strings.js
@@ -25,8 +25,7 @@
 /*global define */
 
 define(function (require, exports, module) {
-
-    'use strict';
+    "use strict";
 
     // Code that needs to display user strings should call require("strings") to load
     // strings.js. This file will dynamically load strings.js for the specified by bracketes.locale.