simple button text border for menu panel

MKelm · Aug 8, 2013 · 28e5a41 · 28e5a41
1 parent 7db2f94
commit 28e5a41
Show file tree

Hide file tree

Showing 2 changed files with 22 additions and 2 deletions.
diff --git a/lib/MCT/Display/Object.js b/lib/MCT/Display/Object.js
@@ -187,6 +187,20 @@ MCT.DisplayObject.prototype.createButton = function(options) {
   if (typeof options.interaction != "undefined") {
     this.setInteraction(sprite, options.interaction);
   }
+  if (typeof options.text != "undefined" && typeof options.text.borderSize != "undefined") {
+    // just a simple logic to get a fixed border space inside a button with text
+    // text buttons in different languages have different sizes
+    // the logic does not correct the button position on size change yet
+    // and it has no dependencies to other layout logic yet
+    if (typeof options.text.borderSize.vertical != "undefined") {
+      var space = options.text.borderSize.vertical * options.text.style[0];
+      sprite.width = text.width + space + space;
+    }
+    if (typeof options.text.borderSize.horizontal != "undefined") {
+      var space = options.text.borderSize.horizontal * options.text.style[0];
+      sprite.height = text.height + space + space;
+    }
+  }
   button.addChild(sprite);
 
   if (typeof text != "undefined") {

diff --git a/lib/MCT/Display/UI/Panel/Menu.js b/lib/MCT/Display/UI/Panel/Menu.js
@@ -72,7 +72,10 @@ MCT.DisplayUIPanelMenu = function() {
   this.layout.addDisplayObjectToPart(
     partName,
     this.layout.displayObjects.add(
-      "menuButtonStart", 'button', { image: "mct_menu_button", text: { value: "lt.menuButtonStart", style: "menubutton1" } }
+      "menuButtonStart", 'button',
+      { image: "mct_menu_button",
+        text: { value: "lt.menuButtonStart", style: "menubutton1", borderSize : { vertical: 1 } }
+      }
     )
   );
 
@@ -86,7 +89,10 @@ MCT.DisplayUIPanelMenu = function() {
   this.layout.addDisplayObjectToPart(
     partName,
     this.layout.displayObjects.add(
-      "menuButtonQuit", 'button', { image: "mct_menu_button", text: { value: "lt.menuButtonQuit", style: "menubutton1" } }
+      "menuButtonQuit", 'button',
+      { image: "mct_menu_button",
+        text: { value: "lt.menuButtonQuit", style: "menubutton1", borderSize : { vertical: 1 } }
+      }
     )
   );
 }