From af4dac82d2e76fe90191d6c085740d855bf961f3 Mon Sep 17 00:00:00 2001 From: Eric Guzman Date: Tue, 8 May 2012 09:43:57 -0700 Subject: Style sheets - Added default stylesheet selection --- js/panels/css-panel/css-panel.reel/css-panel.css | 6 ++- .../css-panel/style-sheet.reel/style-sheet.css | 4 ++ .../css-panel/style-sheet.reel/style-sheet.html | 1 + .../css-panel/style-sheet.reel/style-sheet.js | 29 ++++++++++++++ .../style-sheets-view.reel/style-sheets-view.css | 10 +++-- .../style-sheets-view.reel/style-sheets-view.js | 44 ++++++++++++++++++++++ 6 files changed, 89 insertions(+), 5 deletions(-) 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 7a4191b9..8ef5ec27 100644 --- a/js/panels/css-panel/css-panel.reel/css-panel.css +++ b/js/panels/css-panel/css-panel.reel/css-panel.css @@ -31,12 +31,14 @@ } .css-panel .style-sheets-view-container { - -webkit-box-flex: 0; + display: -webkit-box; min-height: 41px; + -webkit-box-flex: 0; + -webkit-box-orient: vertical; } .css-panel .styles-view-container { - -webkit-box-flex: 1; display: -webkit-box; + -webkit-box-flex: 1; -webkit-box-orient: vertical; } .panel-message { diff --git a/js/panels/css-panel/style-sheet.reel/style-sheet.css b/js/panels/css-panel/style-sheet.reel/style-sheet.css index 9ea03be8..1d26b041 100644 --- a/js/panels/css-panel/style-sheet.reel/style-sheet.css +++ b/js/panels/css-panel/style-sheet.reel/style-sheet.css @@ -127,6 +127,10 @@ margin-right: 25px; } +.default-style-sheet > span { + font-weight: bold; +} + .ss-invisible { display: none; } \ No newline at end of file diff --git a/js/panels/css-panel/style-sheet.reel/style-sheet.html b/js/panels/css-panel/style-sheet.reel/style-sheet.html index 6a9dee65..ca24487d 100644 --- a/js/panels/css-panel/style-sheet.reel/style-sheet.html +++ b/js/panels/css-panel/style-sheet.reel/style-sheet.html @@ -29,6 +29,7 @@ No rights, expressed or implied, whatsoever to this software are provided by Mot "name": "DynamicText", "properties": { "element": {"#": "sheet-name"}, + "identifier": "nameText", "defaultText": "Style sheet" }, "bindings": { diff --git a/js/panels/css-panel/style-sheet.reel/style-sheet.js b/js/panels/css-panel/style-sheet.reel/style-sheet.js index 9ad48a62..3ddd8454 100644 --- a/js/panels/css-panel/style-sheet.reel/style-sheet.js +++ b/js/panels/css-panel/style-sheet.reel/style-sheet.js @@ -12,6 +12,12 @@ exports.StyleSheet = Montage.create(Component, { value: null }, + prepareForDraw : { + value: function() { + this.nameText.element.addEventListener('click', this, false); + } + }, + willDraw : { value: function() { if(this.editing) { @@ -45,6 +51,12 @@ exports.StyleSheet = Montage.create(Component, { this.importButton.element.classList.add('ss-invisible'); } + if(this.default) { + this._element.classList.add('default-style-sheet'); + } else { + this._element.classList.remove('default-style-sheet'); + } + } }, @@ -66,6 +78,12 @@ exports.StyleSheet = Montage.create(Component, { } }, + handleClick : { + value: function(e) { + this.parentComponent.parentComponent.defaultStyleSheet = this.source; + } + }, + handleEditButtonAction: { value: function(e) { this.editing = true; @@ -130,6 +148,17 @@ exports.StyleSheet = Montage.create(Component, { } }, + _default : { value: null }, + default : { + get: function() { + return this._default; + }, + set: function(value) { + this._default = value; + this.needsDraw = true; + } + }, + _disabled : { value: null }, 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 a3e13c77..a6e83a2c 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 @@ -12,7 +12,10 @@ .style-sheets-view-container .sheet-list { margin: 0; padding: 0; - min-height: 55px; + min-height: 35px; + -webkit-box-flex: 1; + overflow-y: auto; + overflow-x: hidden; } .style-sheets-view-container .sheet-list li { list-style-type: none; @@ -30,10 +33,11 @@ ------------------- */ .style-sheets-toolbar-container { - bottom: 0; + /*bottom: 0;*/ height: 24px; - position: absolute; + /*position: absolute;*/ width: 100%; + -webkit-box-flex: 0; } /* ------------------ 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 2d6e18ed..b2d2c0fb 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 @@ -13,6 +13,7 @@ exports.StyleSheetsView = Montage.create(Component, { stylesController : { value: null }, styleSheets : { value: [] }, _initView : { value: false }, + _needsScroll : { value: false }, documentNameLabel : { value: null }, noDocumentLabelClass : { value: "no-document" }, @@ -28,6 +29,29 @@ exports.StyleSheetsView = Montage.create(Component, { this.needsDraw = true; } }, + _defaultStyleSheet: { value: null }, + defaultStyleSheet: { + get: function() { + return this._defaultStyleSheet; + }, + set: function(sheet) { + if(sheet === this._defaultStyleSheet) { return false; } + + var sheetComponent, oldDefaultSheet; + + if(this.styleSheetList) { + sheetComponent = this.styleSheetList.childComponents[this.styleSheets.indexOf(sheet)]; + sheetComponent.default = true; + if(this._defaultStyleSheet) { + oldDefaultSheet = this.styleSheetList.childComponents[this.styleSheets.indexOf(this._defaultStyleSheet)]; + oldDefaultSheet.default = false; + } + } + + this._defaultStyleSheet = sheet; + this.needsDraw = true; + } + }, /// Toolbar Button Actions /// -------------------------------- @@ -36,6 +60,8 @@ exports.StyleSheetsView = Montage.create(Component, { handleAddAction : { value: function(e) { this.stylesController.createStylesheet(); + this.needsDraw = this._needsScroll = true; + } }, @@ -46,6 +72,13 @@ exports.StyleSheetsView = Montage.create(Component, { value: function(e) { this.documentName = this.stylesController.activeDocument.name; this.styleSheets = this.stylesController.userStyleSheets; + + Object.defineBinding(this, 'defaultStyleSheet', { + 'boundObject': this.stylesController, + 'boundObjectPropertyPath': 'defaultStylesheet', + 'oneway': false + }); + this._initView = this.needsDraw = true; } }, @@ -81,6 +114,17 @@ exports.StyleSheetsView = Montage.create(Component, { } else { this.documentNameLabel.classList.add(this.noDocumentLabelClass); } + + if(this._needsScroll) { + + setTimeout(function() { + console.log('setting scroll top to:', this.styleSheetList.element.scrollHeight); + //debugger; + this.styleSheetList.element.scrollTop = this.styleSheetList.element.scrollHeight; + }.bind(this), 50); + + this._needsScroll = false; + } } }, didDraw: { -- cgit v1.2.3