From 946fae3acf8ca9f384b662e40f406506e8b90ea7 Mon Sep 17 00:00:00 2001 From: Eric Guzman Date: Mon, 23 Apr 2012 22:37:34 -0700 Subject: CSSPanel - Resizer --- js/panels/css-panel/css-panel.reel/css-panel.css | 8 --- js/panels/css-panel/css-panel.reel/css-panel.html | 1 - js/panels/css-panel/css-panel.reel/css-panel.js | 32 +----------- .../style-sheets-view.reel/style-sheets-view.css | 30 +++++++++++ .../style-sheets-view.reel/style-sheets-view.html | 28 ++++++++++- .../style-sheets-view.reel/style-sheets-view.js | 58 ++++++++++++++++++++++ 6 files changed, 115 insertions(+), 42 deletions(-) (limited to 'js/panels') diff --git a/js/panels/css-panel/css-panel.reel/css-panel.css b/js/panels/css-panel/css-panel.reel/css-panel.css index e525c08f..7bcfbc1a 100644 --- a/js/panels/css-panel/css-panel.reel/css-panel.css +++ b/js/panels/css-panel/css-panel.reel/css-panel.css @@ -48,12 +48,4 @@ -webkit-box-flex: 0; } -/* ------------------ - Resizer - ------------------ */ -.sub-panel-resizer { - width: 100%; - height: 3px; - background-color: red; -} diff --git a/js/panels/css-panel/css-panel.reel/css-panel.html b/js/panels/css-panel/css-panel.reel/css-panel.html index 4be4d6dd..8ee56086 100644 --- a/js/panels/css-panel/css-panel.reel/css-panel.html +++ b/js/panels/css-panel/css-panel.reel/css-panel.html @@ -40,7 +40,6 @@ No rights, expressed or implied, whatsoever to this software are provided by Mot

Style Sheets

-

Styles

diff --git a/js/panels/css-panel/css-panel.reel/css-panel.js b/js/panels/css-panel/css-panel.reel/css-panel.js index 21a466d5..b6e9613b 100644 --- a/js/panels/css-panel/css-panel.reel/css-panel.js +++ b/js/panels/css-panel/css-panel.reel/css-panel.js @@ -8,26 +8,6 @@ var Montage = require("montage/core/core").Montage, Component = require("montage/ui/component").Component; exports.CSSPanelNew = Montage.create(Component, { - _resizedHeight : { - value: null - }, - isResizing : { - value: null - }, - _height: { - value: null - }, - height: { - get: function() { - return this._height; - }, - set: function(val) { - if(this._height !== val) { - this._height = val; - this.needsDraw = true; - } - } - }, prepareForDraw : { @@ -39,17 +19,7 @@ exports.CSSPanelNew = Montage.create(Component, { value: function() { console.log("css panel : draw. height: ", this.height); -// if(this.height) { -// console.log("CSS Panel draw - resizing to", (this.height + this._resizedHeight) + "px"); -// this.styleSheetsView.element.style.height = (this.height + this._resizedHeight) + "px"; -// } - } - }, - didDraw: { - value: function() { - if(!this.isResizing) { - //this.height = this.element.offsetHeight; - } + } } }); diff --git a/js/panels/css-panel/style-sheets-view.reel/style-sheets-view.css b/js/panels/css-panel/style-sheets-view.reel/style-sheets-view.css index dfb67d13..7a46e387 100644 --- a/js/panels/css-panel/style-sheets-view.reel/style-sheets-view.css +++ b/js/panels/css-panel/style-sheets-view.reel/style-sheets-view.css @@ -3,9 +3,16 @@ No rights, expressed or implied, whatsoever to this software are provided by Motorola Mobility, Inc. hereunder.
(c) Copyright 2011 Motorola Mobility, Inc. All Rights Reserved. */ + +.style-sheets-view-container { + position: relative; + overflow: hidden; +} + .style-sheets-view-container ul { margin: 0; padding: 0; + min-height: 55px; } .style-sheets-view-container li { list-style-type: none; @@ -16,4 +23,27 @@ } .style-sheets-view-container li:last-child { margin-bottom: 5px; +} + +/* --------------- + Toolbar +------------------- */ + +.style-sheets-toolbar-container { + bottom: 0; + height: 24px; + position: absolute; + width: 100%; +} + +/* ------------------ + Resizer + ------------------ */ + +.sub-panel-resizer { + bottom: 0; + cursor: row-resize; + height: 4px; + position: absolute; + width: 100%; } \ No newline at end of file diff --git a/js/panels/css-panel/style-sheets-view.reel/style-sheets-view.html b/js/panels/css-panel/style-sheets-view.reel/style-sheets-view.html index 092b189f..09e2e3ce 100644 --- a/js/panels/css-panel/style-sheets-view.reel/style-sheets-view.html +++ b/js/panels/css-panel/style-sheets-view.reel/style-sheets-view.html @@ -14,7 +14,8 @@ No rights, expressed or implied, whatsoever to this software are provided by Mot "module" : "js/panels/css-panel/style-sheets-view.reel", "name" : "StyleSheetsView", "properties" : { - "element" : {"#" : "style-sheets-view-container"} + "element" : {"#" : "style-sheets-view-container"}, + "styleSheetList" : {"@" : "styleSheetList"} } }, "arrayController" : { @@ -85,6 +86,28 @@ No rights, expressed or implied, whatsoever to this software are provided by Mot "properties": { "element": {"#": "style-sheets-toolbar"} } + }, + "resizer": { + "module": "js/panels/resize-composer", + "name": "ResizeComposer", + "properties": { + "element": {"#": "resizeBar"}, + "component": {"@": "owner"} + }, + "listeners": [ + { + "type": "resizeStart", + "listener": {"@": "owner"} + }, + { + "type": "resizeMove", + "listener": {"@": "owner"} + }, + { + "type": "resizeEnd", + "listener": {"@": "owner"} + } + ] } } @@ -95,9 +118,10 @@ No rights, expressed or implied, whatsoever to this software are provided by Mot -
+
+
\ No newline at end of file diff --git a/js/panels/css-panel/style-sheets-view.reel/style-sheets-view.js b/js/panels/css-panel/style-sheets-view.reel/style-sheets-view.js index b1315311..95adddd0 100644 --- a/js/panels/css-panel/style-sheets-view.reel/style-sheets-view.js +++ b/js/panels/css-panel/style-sheets-view.reel/style-sheets-view.js @@ -14,6 +14,27 @@ exports.StyleSheetsView = Montage.create(Component, { showToolbar : { value: false }, + _resizedHeight : { + value: null + }, + isResizing : { + value: null + }, + _height: { + value: null + }, + height: { + get: function() { + return this._height; + }, + set: function(val) { + if(this._height !== val) { + this._height = val; + this.needsDraw = true; + } + } + }, + styleSheets : { value: [] }, @@ -33,6 +54,7 @@ exports.StyleSheetsView = Montage.create(Component, { _initView : { value: false }, + handleStyleSheetsReady : { value: function(e) { this._initView = this.needsDraw = true; @@ -48,6 +70,30 @@ exports.StyleSheetsView = Montage.create(Component, { this.styleSheets.push(e._event.detail); } }, + handleResizeStart: { + value:function(e) { + this.isResizing = true; + this.needsDraw = true; + } + }, + + handleResizeMove: { + value:function(e) { + this._resizedHeight = e._event.dY; + this.needsDraw = true; + } + }, + + handleResizeEnd: { + value: function(e) { + this.height += this._resizedHeight; + this._resizedHeight = 0; + this.isResizing = false; + this.needsDraw = true; + } + }, + + prepareForDraw : { value: function() { console.log("style sheet view - prepare for draw"); @@ -63,6 +109,18 @@ exports.StyleSheetsView = Montage.create(Component, { this.styleSheets = this.stylesController.userStyleSheets; this._initView = false; } + + if(this.height) { + console.log("StyleSheetsView draw - resizing to", (this.height + this._resizedHeight) + "px"); + this.styleSheetList.element.style.height = (this.height + this._resizedHeight) + "px"; + } + } + }, + didDraw: { + value: function() { + if(!this.isResizing) { + this.height = this.styleSheetList.element.offsetHeight; + } } } }); \ No newline at end of file -- cgit v1.2.3