afMoncao - Better default sizing

diff --git a/ext/afform/html/ang/afMoncao.css b/ext/afform/html/ang/afMoncao.css
index 1abf4a2fed96d40d92aac0dcdb112e2c155cbd47..58ed3679e4c005ce39f09de874ee4c908a4dac18 100644 (file)
--- a/ext/afform/html/ang/afMoncao.css
+++ b/ext/afform/html/ang/afMoncao.css
@@ -1 +1,4 @@
 /* Add any CSS rules for Angular module "afMoncao" */
+.af-monaco-container {
+    border:1px solid grey;
+}
\ No newline at end of file

diff --git a/ext/afform/html/ang/afMoncao.js b/ext/afform/html/ang/afMoncao.js
index 142dba8f6660f9d420da63b14a46ce85b21d7213..6d47f4ea078997acd022d8c8e3b8e03a652bf00a 100644 (file)
--- a/ext/afform/html/ang/afMoncao.js
+++ b/ext/afform/html/ang/afMoncao.js
@@ -7,19 +7,23 @@
     return {
       restrict: 'AE',
       require: 'ngModel',
-      template: '<div class="af-monaco-container" style="width:800px;height:600px;border:1px solid grey"></div>',
+      template: '<div class="af-monaco-container"></div>',
       link: function($scope, $el, $attr, ngModel) {
+        var heightPct = 0.70;
         var editor;
         require.config({paths: CRM.afMoncao.paths});
         require(['vs/editor/editor.main'], function() {
           var editorEl = $el.find('.af-monaco-container');
+          editorEl.css({height: Math.round(heightPct * $(window).height())});
           editor = monaco.editor.create(editorEl[0], {
             value: ngModel.$modelValue,
             language: 'html',
-            theme: 'vs-dark',
+            // theme: 'vs-dark',
+            theme: 'vs',
             minimap: {
               enabled: false
             },
+            automaticLayout: true,
             scrollbar: {
               useShadows: false,
               verticalHasArrows: true,