diff --git a/css/main.css b/css/main.css index b77f81b697e2410c3703095cce3da8e7fdbe9e1e..44df274ce99a796f872693bc64a02e0d741274be 100644 --- a/css/main.css +++ b/css/main.css @@ -570,6 +570,7 @@ label { width: 100%; position: absolute; background-color: clear; + display:none; } #console>div{ @@ -580,7 +581,12 @@ label { border-radius: 0; } #consoleOutput{ - min-height:30px; + min-height:35px; background-color: #ddd; opacity: 0.9; + border: 2px solid #bdc3c7; + border-bottom-width: 0; + border-top-width: 0; + overflow: auto; + resize: vertical; } \ No newline at end of file diff --git a/js/menus/MenuWrapperView.js b/js/menus/MenuWrapperView.js index cae227bf16e2080ed3662e9a12ce8d2ebae1055c..06f8233684f586a8c205c0a14454fb6ab7ff7a39 100644 --- a/js/menus/MenuWrapperView.js +++ b/js/menus/MenuWrapperView.js @@ -359,13 +359,11 @@ define(['jquery', 'underscore', 'plist', 'backbone', 'lattice', 'appState', 'tex _hide: function(callback, suppressModelUpdate){ this.$el.animate({right: "-430"}, {done: callback}); - $("#console").animate({"padding-right":"0"}); if (!suppressModelUpdate) this.model.set("menuIsVisible", false); }, _show: function(){ this.$el.animate({right: "0"}); - $("#console").animate({"padding-right":"430px"}); this.model.set("menuIsVisible", true); }, diff --git a/js/menus/otherUI/Console.js b/js/menus/otherUI/Console.js index c7ee225e02393be9ff7e08e3b589e74a960a0813..dfe2f7ca3d04ab094a6209a978c622e737eed16d 100644 --- a/js/menus/otherUI/Console.js +++ b/js/menus/otherUI/Console.js @@ -3,9 +3,45 @@ */ -define(['jquery'], function($){ +define(['jquery', 'underscore', 'backbone', 'appState'], function($, _, Backbone, appState){ -// $( ".selector" ).resizable({ handles: "n, e, s, w" }); + var Console = Backbone.View.extend({ + el: "#console", + + events: { + + }, + + initialize: function(){ + + this.listenTo(appState, "change:consoleIsVisible", this._setVisibility); + this._setWidth(); + this._setVisibility(); + }, + + _setWidth: function(immediately){ + var padding = "0"; + if (appState.get("menuIsVisible")) padding = "430px"; + if (immediately) this.$el.css({"padding-right":padding}); + else this.$el.animate({"padding-right":padding}); + }, + + _setVisibility: function(){ + if (appState.get("consoleIsVisible")) this.show(); + else this.hide(); + }, + + show: function(){ + this.$el.fadeIn(); + }, + + hide: function(){ + this.$el.fadeOut(); + } + + }); + + return new Console(); }); \ No newline at end of file diff --git a/js/menus/templates/NavViewMenu.html b/js/menus/templates/NavViewMenu.html index af4595ddcceec10d9d4316d8ae60c9e3e922a994..0569b3d1288824e85144c2c4b3b21fa1fe1d6a10 100644 --- a/js/menus/templates/NavViewMenu.html +++ b/js/menus/templates/NavViewMenu.html @@ -3,7 +3,7 @@ <ul class="dropdown-menu"> <li><a class="appState boolProperty" data-property="menuIsVisible" href="#">Menu</a></li> <li><a class="appState boolProperty" data-property="scriptIsVisible" href="#">Script</a></li> - <!--<li><a class="appState boolProperty" data-property="consoleIsVisible" href="#">Console</a></li>--> + <li><a class="appState boolProperty" data-property="consoleIsVisible" href="#">Console</a></li> <li><a class="appState boolProperty" data-property="ribbonIsVisible" href="#">Ribbon</a></li> </ul> </li> diff --git a/js/models/AppState.js b/js/models/AppState.js index 83806596d3f9fcfbf617e9bc25db73ec125fbf95..400314e89861afedea6f079bee7c0634a4db9530 100644 --- a/js/models/AppState.js +++ b/js/models/AppState.js @@ -19,7 +19,7 @@ define(['underscore', 'backbone', 'threeModel', 'three', 'plist', 'globals'], menuIsVisible: true, scriptIsVisible: false, - consoleIsVisible: false, + consoleIsVisible: true, ribbonIsVisible: true, turnOffRendering: false,