diff options
| -rw-r--r-- | images/down.gif | bin | 0 -> 58 bytes | |||
| -rw-r--r-- | images/up.gif | bin | 0 -> 58 bytes | |||
| -rw-r--r-- | index.html | 1 | ||||
| -rw-r--r-- | js/wwwsqldesigner.js | 30 | ||||
| -rw-r--r-- | styles/style.css | 23 |
5 files changed, 53 insertions, 1 deletions
diff --git a/images/down.gif b/images/down.gif Binary files differnew file mode 100644 index 0000000..3c188e6 --- /dev/null +++ b/images/down.gif diff --git a/images/up.gif b/images/up.gif Binary files differnew file mode 100644 index 0000000..1ac1a4c --- /dev/null +++ b/images/up.gif @@ -23,6 +23,7 @@ <div id="controls"> <div id="bar"> + <div id="toggle"></div> <input type="button" id="saveload" /> <hr/> diff --git a/js/wwwsqldesigner.js b/js/wwwsqldesigner.js index c5f94b1..f4df04c 100644 --- a/js/wwwsqldesigner.js +++ b/js/wwwsqldesigner.js @@ -2152,6 +2152,35 @@ SQL.Options.prototype.click = function() { this.dom.optionvector.checked = this.owner.getOption("vector"); } +/* ------------------ minimize/restore bar ----------- */ + +SQL.Toggle = OZ.Class(); + +SQL.Toggle.prototype.init = function(elm) { + this._state = null; + this._elm = elm; + OZ.Event.add(elm, "click", this._click.bind(this)); + + var defaultState = true; + if (document.location.href.match(/toolbar=hidden/)) { defaultState = false; } + this._switch(defaultState); +} + +SQL.Toggle.prototype._click = function(e) { + this._switch(!this._state); +} + +SQL.Toggle.prototype._switch = function(state) { + this._state = state; + if (this._state) { + OZ.$("bar").style.height = ""; + } else { + OZ.$("bar").style.overflow = "hidden"; + OZ.$("bar").style.height = this._elm.offsetHeight + "px"; + } + this._elm.className = (this._state ? "on" : "off"); +} + /* --------------------- www sql designer ------------ */ SQL.Designer = OZ.Class().extend(SQL.Visual); @@ -2164,6 +2193,7 @@ SQL.Designer.prototype.init = function() { this.title = document.title; SQL.Visual.prototype.init.apply(this); + new SQL.Toggle(OZ.$("toggle")); this.dom.container = this.dom.content = OZ.$("area"); this.minSize = [ diff --git a/styles/style.css b/styles/style.css index da7ab72..6c07a34 100644 --- a/styles/style.css +++ b/styles/style.css @@ -26,7 +26,7 @@ body { top: 0px; right: 0px; width: 150px; - padding: 5px; + padding: 0px 5px 5px; -moz-box-shadow: -4px 4px 8px #888; /* FF 3.5+ */ -webkit-box-shadow: -4px 4px 8px #888; /* Safari 3.0+, Chrome */ box-shadow: -4px 4px 8px #888; /* Opera 10.5, IE 9.0 */ @@ -45,6 +45,27 @@ body { display: inline; } +#toggle { + padding: 5px 0px; + margin-bottom: 5px; + cursor: pointer; + background-position: 50% 5px; + background-repeat: no-repeat; + height: 5px; +} + +#toggle:hover { + background-color: #bbb; +} + +#toggle.on { + background-image: url(../images/up.gif); +} + +#toggle.off { + background-image: url(../images/down.gif); +} + #minimap { position: fixed; width: 100px; |
