This is an automated email from the ASF dual-hosted git repository. carlosrovira pushed a commit to branch develop in repository https://gitbox.apache.org/repos/asf/royale-asjs.git
The following commit(s) were added to refs/heads/develop by this push: new e3d0b54 integrating navigation buttons in the datechooser table e3d0b54 is described below commit e3d0b54202681359114d67d85175b4077f40c305 Author: Carlos Rovira <carlosrov...@apache.org> AuthorDate: Tue Aug 7 00:02:03 2018 +0200 integrating navigation buttons in the datechooser table --- .../projects/Jewel/src/main/resources/defaults.css | 7 + .../controllers/DateChooserMouseController.as | 11 +- .../itemRenderers/TableMapperForArrayListData.as | 25 ++- .../royale/jewel/beads/views/DateChooserView.as | 171 +++++++++------------ .../royale/jewel/beads/views/DateFieldView.as | 4 +- .../apache/royale/jewel/beads/views/TableView.as | 8 +- .../src/main/sass/components/_datechooser.sass | 27 +--- .../Jewel/src/main/sass/components/_datefield.sass | 3 + .../JewelTheme/src/main/resources/defaults.css | 5 + .../main/sass/components-primary/_datechooser.sass | 10 +- 10 files changed, 120 insertions(+), 151 deletions(-) diff --git a/frameworks/projects/Jewel/src/main/resources/defaults.css b/frameworks/projects/Jewel/src/main/resources/defaults.css index f4ee9d5..1ee8388 100644 --- a/frameworks/projects/Jewel/src/main/resources/defaults.css +++ b/frameworks/projects/Jewel/src/main/resources/defaults.css @@ -246,6 +246,9 @@ j|ControlBar { IMeasurementBead: ClassReference("org.apache.royale.html.beads.ControlBarMeasurementBead"); } } +.jewel.datechooser .jewel.table .jewel.tableheader.buttonsRow { + padding: 0px; +} .jewel.datechooser .jewel.table td { padding: 0px; } @@ -265,6 +268,10 @@ j|DateChooserTable { IItemRenderer: ClassReference("org.apache.royale.jewel.itemRenderers.DateItemRenderer"); } +.dateChooserPopUp { + position: absolute; +} + j|DateField { IBeadView: ClassReference("org.apache.royale.jewel.beads.views.DateFieldView"); IBeadModel: ClassReference("org.apache.royale.jewel.beads.models.DateChooserModel"); diff --git a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/controllers/DateChooserMouseController.as b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/controllers/DateChooserMouseController.as index 3d5e3ad..b62ec8a 100644 --- a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/controllers/DateChooserMouseController.as +++ b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/controllers/DateChooserMouseController.as @@ -18,17 +18,16 @@ //////////////////////////////////////////////////////////////////////////////// package org.apache.royale.jewel.beads.controllers { - import org.apache.royale.jewel.beads.views.DateChooserView; - import org.apache.royale.jewel.beads.models.DateChooserModel; - import org.apache.royale.jewel.supportClasses.datechooser.DateChooserTable; - import org.apache.royale.core.IBeadController; import org.apache.royale.core.IBeadModel; import org.apache.royale.core.IBeadView; import org.apache.royale.core.IStrand; import org.apache.royale.events.Event; - import org.apache.royale.events.MouseEvent; import org.apache.royale.events.IEventDispatcher; + import org.apache.royale.events.MouseEvent; + import org.apache.royale.jewel.beads.models.DateChooserModel; + import org.apache.royale.jewel.beads.views.DateChooserView; + import org.apache.royale.jewel.supportClasses.datechooser.DateChooserTable; /** * The DateChooserMouseController class is responsible for listening to @@ -74,7 +73,7 @@ package org.apache.royale.jewel.beads.controllers view.prevMonthButton.addEventListener("click", prevMonthClickHandler); view.nextMonthButton.addEventListener("click", nextMonthClickHandler); - IEventDispatcher(view.dayList).addEventListener("change", tableHandler); + IEventDispatcher(view.daysTable).addEventListener("change", tableHandler); } private var model:DateChooserModel; diff --git a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/itemRenderers/TableMapperForArrayListData.as b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/itemRenderers/TableMapperForArrayListData.as index 7bf9002..284256b 100644 --- a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/itemRenderers/TableMapperForArrayListData.as +++ b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/itemRenderers/TableMapperForArrayListData.as @@ -18,19 +18,14 @@ //////////////////////////////////////////////////////////////////////////////// package org.apache.royale.jewel.beads.itemRenderers { - import org.apache.royale.jewel.supportClasses.table.TableColumn; - import org.apache.royale.jewel.beads.models.TableModel; - import org.apache.royale.jewel.supportClasses.table.THead; - import org.apache.royale.jewel.supportClasses.table.TBody; - import org.apache.royale.jewel.supportClasses.table.TFoot; - import org.apache.royale.jewel.beads.views.TableView; - import org.apache.royale.collections.ArrayList; - import org.apache.royale.core.IItemRendererParent; import org.apache.royale.core.IBead; - import org.apache.royale.core.IChild; import org.apache.royale.core.IBeadModel; import org.apache.royale.core.IBeadView; + import org.apache.royale.core.IChild; + import org.apache.royale.core.IDataProviderItemRendererMapper; + import org.apache.royale.core.IItemRendererClassFactory; + import org.apache.royale.core.IItemRendererParent; import org.apache.royale.core.IStrand; import org.apache.royale.events.Event; import org.apache.royale.events.IEventDispatcher; @@ -39,10 +34,13 @@ package org.apache.royale.jewel.beads.itemRenderers import org.apache.royale.jewel.TableCell; import org.apache.royale.jewel.TableHeader; import org.apache.royale.jewel.TableRow; + import org.apache.royale.jewel.beads.models.TableModel; + import org.apache.royale.jewel.beads.views.TableView; import org.apache.royale.jewel.itemRenderers.TableItemRenderer; - import org.apache.royale.core.IDataProviderItemRendererMapper; - import org.apache.royale.core.IItemRendererClassFactory; - import org.apache.royale.utils.loadBeadFromValuesManager; + import org.apache.royale.jewel.supportClasses.table.TBody; + import org.apache.royale.jewel.supportClasses.table.THead; + import org.apache.royale.jewel.supportClasses.table.TableColumn; + import org.apache.royale.utils.loadBeadFromValuesManager; public class TableMapperForArrayListData implements IBead, IDataProviderItemRendererMapper { @@ -140,7 +138,8 @@ package org.apache.royale.jewel.beads.itemRenderers } if (createHeaderRow) { - thead = new THead(); + view.thead = new THead(); + thead = view.thead; headerRow = new TableRow(); for(c=0; c < model.columns.length; c++) diff --git a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/views/DateChooserView.as b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/views/DateChooserView.as index 683e027..f592604 100644 --- a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/views/DateChooserView.as +++ b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/views/DateChooserView.as @@ -18,26 +18,26 @@ //////////////////////////////////////////////////////////////////////////////// package org.apache.royale.jewel.beads.views { + import org.apache.royale.collections.ArrayList; + import org.apache.royale.core.ClassFactory; import org.apache.royale.core.IBeadModel; import org.apache.royale.core.IBeadView; import org.apache.royale.core.IStrand; - // import org.apache.royale.core.SimpleCSSStylesWithFlex; import org.apache.royale.core.UIBase; import org.apache.royale.events.Event; import org.apache.royale.events.IEventDispatcher; - import org.apache.royale.jewel.Group; - import org.apache.royale.jewel.beads.models.DateChooserModel; + import org.apache.royale.html.beads.GroupView; import org.apache.royale.jewel.Button; + import org.apache.royale.jewel.Group; import org.apache.royale.jewel.Table; + import org.apache.royale.jewel.TableRow; + import org.apache.royale.jewel.TableHeader; + import org.apache.royale.jewel.beads.models.DateChooserModel; + import org.apache.royale.jewel.beads.views.TableView; + import org.apache.royale.jewel.itemRenderers.DateItemRenderer; import org.apache.royale.jewel.supportClasses.datechooser.DateChooserTable; - // import org.apache.royale.jewel.supportClasses.datechooser.DateChooserHeader; - import org.apache.royale.utils.loadBeadFromValuesManager; - import org.apache.royale.html.beads.GroupView; - import org.apache.royale.collections.ArrayList; import org.apache.royale.jewel.supportClasses.table.TableColumn; - import org.apache.royale.jewel.itemRenderers.DateItemRenderer; - import org.apache.royale.core.ClassFactory; - // import org.apache.royale.html.beads.layouts.HorizontalFlexLayout; + import org.apache.royale.utils.loadBeadFromValuesManager; /** * The DateChooserView class is a view bead for the DateChooser. @@ -80,10 +80,6 @@ package org.apache.royale.jewel.beads.views private var model:DateChooserModel; - private var monthButtonsContainer:Group; - private var monthLabel:Button; - // private var dayNamesContainer:DateChooserHeader; - /** * @royaleignorecoercion org.apache.royale.core.UIBase */ @@ -92,6 +88,21 @@ package org.apache.royale.jewel.beads.views return _strand as UIBase; } + private var _monthLabel:Button; + /** + * The button to display month and year + * and select from a list of years + * + * @langversion 3.0 + * @playerversion Flash 10.2 + * @playerversion AIR 2.6 + * @productversion Royale 0.9.3 + */ + public function get monthLabel():Button + { + return _monthLabel; + } + private var _prevMonthButton:Button; /** * The button that causes the previous month to be displayed by the DateChooser. @@ -120,117 +131,72 @@ package org.apache.royale.jewel.beads.views return _nextMonthButton; } - private var _dayTable:DateChooserTable; + private var _daysTable:DateChooserTable; /** - * The List of days to display + * The Table of days to display * * @langversion 3.0 * @playerversion Flash 10.2 * @playerversion AIR 2.6 * @productversion Royale 0.9.3 */ - public function get dayList():Table + public function get daysTable():Table { - return _dayTable; + return _daysTable; } - // private const controlHeight:int = 26; - // private const commonButtonWidth:int = 40; - /** * @private */ private function createChildren():void { // HEADER BUTTONS - - monthButtonsContainer = new Group(); - - monthLabel = new Button(); - monthLabel.text = "Month Here"; - monthButtonsContainer.addElement(monthLabel); + _monthLabel = new Button(); + _monthLabel.text = "Month Here"; _prevMonthButton = new Button(); _prevMonthButton.text = "<"; - monthButtonsContainer.addElement(_prevMonthButton); _nextMonthButton = new Button(); _nextMonthButton.text = ">"; - monthButtonsContainer.addElement(_nextMonthButton); - - getHost().addElement(monthButtonsContainer, false); - - // DAY NAMES - - // dayNamesContainer = new DateChooserHeader(); - // //dayNamesContainer.id = "dateChooserDayNames"; - // COMPILE::SWF { - // dayNamesContainer.percentWidth = 100; - // } - - // getHost().addElement(dayNamesContainer, false); // DAYS createColumns(); - _dayTable = new DateChooserTable(); + + _daysTable = new DateChooserTable(); COMPILE::SWF { - _dayTable.percentWidth = 100; + _daysTable.percentWidth = 100; } - getHost().addElement(_dayTable, false); + getHost().addElement(_daysTable, false); - IEventDispatcher(_dayTable).dispatchEvent( new Event("itemsCreated") ); + IEventDispatcher(_daysTable).dispatchEvent( new Event("itemsCreated") ); model.addEventListener("selectedDateChanged", selectionChangeHandler); - // monthButtonsContainer.id = "dateChooserMonthButtons"; - // monthButtonsContainer.addBead(new HorizontalFlexLayout()); - // monthButtonsContainer.height = controlHeight; - // monthButtonsContainer.style = new SimpleCSSStylesWithFlex(); - // monthButtonsContainer.style.flexGrow = 0; - // COMPILE::JS { - // monthButtonsContainer.element.style["flex-grow"] = "0"; - // } - // _prevMonthButton.width = commonButtonWidth; - // if (_prevMonthButton.style == null) { - // _prevMonthButton.style = new SimpleCSSStylesWithFlex(); - // } - // _prevMonthButton.style.flexGrow = 0; - // COMPILE::JS { - // _prevMonthButton.element.style["flex-grow"] = "0"; - // } - - // if (monthLabel.style == null) { - // monthLabel.style = new SimpleCSSStylesWithFlex(); - // } - // monthLabel.style.flexGrow = 1; - // COMPILE::JS { - // monthLabel.element.style["flex-grow"] = "1"; - // } - - // _nextMonthButton.width = commonButtonWidth; - // if (_nextMonthButton.style == null) { - // _nextMonthButton.style = new SimpleCSSStylesWithFlex(); - // } - // COMPILE::JS { - // _nextMonthButton.element.style["flex-grow"] = "0"; - // } - //_nextMonthButton.style.flexGrow = 0; - - // dayNamesContainer.className = "DateChooserHeader"; - // dayNamesContainer.height = controlHeight; - // dayNamesContainer.style = new SimpleCSSStylesWithFlex(); - // dayNamesContainer.style.flexGrow = 0; - // COMPILE::JS { - // dayNamesContainer.element.style["flex-grow"] = "0"; - // dayNamesContainer.element.style["align-items"] = "center"; - // } + createButtonsRow(); + } + + private var buttonsRow:TableRow; + + private function createButtonsRow():void + { + var view:TableView = _daysTable.getBeadByType(IBeadView) as TableView; + buttonsRow = new TableRow(); + + var tableHeader:TableHeader = new TableHeader(); + tableHeader.className = "buttonsRow"; + tableHeader.addElement(_monthLabel); + tableHeader.expandColumns = 5; + buttonsRow.addElement(tableHeader); + + tableHeader= new TableHeader(); + tableHeader.className = "buttonsRow"; + tableHeader.addElement(_prevMonthButton); + buttonsRow.addElement(tableHeader); - // _dayTable.className = "DateChooserList"; - // _dayTable.id = "dateChooserList"; - // _dayTable.style = new SimpleCSSStylesWithFlex(); - // _dayTable.style.flexGrow = 1; - // COMPILE::JS { - // _dayTable.element.style["flex-grow"] = "1"; - // } + tableHeader= new TableHeader(); + tableHeader.className = "buttonsRow"; + tableHeader.addElement(_nextMonthButton); + buttonsRow.addElement(tableHeader); } private var columns:Array; @@ -260,8 +226,7 @@ package org.apache.royale.jewel.beads.views */ private function updateDisplay():void { - monthLabel.text = model.monthNames[model.displayedMonth] + " " + - String(model.displayedYear); + _monthLabel.text = model.monthNames[model.displayedMonth] + " " + String(model.displayedYear); var len:int = columns.length; for(var index:int = 0; index < len; index++) @@ -270,7 +235,8 @@ package org.apache.royale.jewel.beads.views column.label = model.dayNames[index]; } - _dayTable.columns = columns; + _daysTable.columns = columns; + var currrentMonth:Array = []; var dayIndex:int = 0; @@ -283,11 +249,14 @@ package org.apache.royale.jewel.beads.views dayIndex++; } } - trace("currrentMonth: " + currrentMonth); - _dayTable.dataProvider = new ArrayList(currrentMonth); - _dayTable.dispatchEvent( new Event("tableComplete") ); + _daysTable.dataProvider = new ArrayList(currrentMonth); + _daysTable.dispatchEvent( new Event("tableComplete") ); - _dayTable.selectedIndex = model.getIndexForSelectedDate(); + _daysTable.selectedIndex = model.getIndexForSelectedDate(); + + var view:TableView = _daysTable.getBeadByType(IBeadView) as TableView; + view.thead.addElementAt(buttonsRow, 0, false); + } /** diff --git a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/views/DateFieldView.as b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/views/DateFieldView.as index a3b4575..6f44261 100644 --- a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/views/DateFieldView.as +++ b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/views/DateFieldView.as @@ -216,9 +216,7 @@ package org.apache.royale.jewel.beads.views var p3:Point = PointUtils.globalToLocal(p2, host); _popUp.x = p3.x; _popUp.y = p3.y; - COMPILE::JS { - _popUp.element.style.position = "absolute"; - } + _popUp.className = "dateChooserPopUp"; host.popUpParent.addElement(_popUp); } diff --git a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/views/TableView.as b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/views/TableView.as index bd57dd6..c079aff 100644 --- a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/views/TableView.as +++ b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/views/TableView.as @@ -62,12 +62,18 @@ package org.apache.royale.jewel.beads.views createChildren(); } - // private var thead:THead; + /** + * This os created in the mapper + * @royalesuppresspublicvarwarning + */ + public var thead:THead; /** * @royalesuppresspublicvarwarning */ public var tbody:TBody; + + // private var tfoot:TFoot; /** diff --git a/frameworks/projects/Jewel/src/main/sass/components/_datechooser.sass b/frameworks/projects/Jewel/src/main/sass/components/_datechooser.sass index 9ea1676..80eaed0 100644 --- a/frameworks/projects/Jewel/src/main/sass/components/_datechooser.sass +++ b/frameworks/projects/Jewel/src/main/sass/components/_datechooser.sass @@ -25,8 +25,13 @@ .jewel.table + thead + th + + .jewel.tableheader.buttonsRow + padding: 0px tbody tr @@ -42,29 +47,7 @@ j|DateChooser IBeadView: ClassReference("org.apache.royale.jewel.beads.views.DateChooserView") IBeadLayout: ClassReference("org.apache.royale.jewel.beads.layouts.VerticalFlowLayout") IBeadController: ClassReference("org.apache.royale.jewel.beads.controllers.DateChooserMouseController") - // width: 280px - // height: 240px j|DateChooserTable IItemRenderer: ClassReference("org.apache.royale.jewel.itemRenderers.DateItemRenderer") -// j|DateChooserHeader -// IItemRenderer: ClassReference("org.apache.royale.jewel.itemRenderers.DayNameItemRenderer") -// IBeadLayout: ClassReference("org.apache.royale.jewel.beads.layouts.HorizontalLayout") - // height: 20px - // border-style: solid - // border-color: #000000 - // border-width: 1px - // background-color: #FFFFFF - -// j|DateChooserList - // IDataProviderItemRendererMapper: ClassReference("org.apache.royale.jewel.beads.itemRenderers.DataItemRendererFactoryForArrayData") - // IItemRendererClassFactory: ClassReference("org.apache.royale.core.ItemRendererClassFactory") - // IItemRenderer: ClassReference("org.apache.royale.jewel.itemRenderers.DateItemRenderer") - // IBeadLayout: ClassReference("org.apache.royale.jewel.beads.layouts.HorizontalFlowLayout") - // width: 280px - // height: 240px - // border-style: solid - // border-color: #000000 - // border-width: 1px - // background-color: #FFFFFF diff --git a/frameworks/projects/Jewel/src/main/sass/components/_datefield.sass b/frameworks/projects/Jewel/src/main/sass/components/_datefield.sass index 467c5ef..5e50bf7 100644 --- a/frameworks/projects/Jewel/src/main/sass/components/_datefield.sass +++ b/frameworks/projects/Jewel/src/main/sass/components/_datefield.sass @@ -22,6 +22,9 @@ // DateField variables .jewel.datefield + +.dateChooserPopUp + position: absolute j|DateField IBeadView: ClassReference("org.apache.royale.jewel.beads.views.DateFieldView") diff --git a/frameworks/themes/JewelTheme/src/main/resources/defaults.css b/frameworks/themes/JewelTheme/src/main/resources/defaults.css index 30b016f..2a5858f 100644 --- a/frameworks/themes/JewelTheme/src/main/resources/defaults.css +++ b/frameworks/themes/JewelTheme/src/main/resources/defaults.css @@ -242,6 +242,11 @@ j|Card { border: none; box-shadow: none; } +.jewel.datechooser .jewel.table .jewel.button { + background: white; + border: none; + box-shadow: none; +} .jewel.datechooser .jewel.table th { background: white; box-shadow: none; diff --git a/frameworks/themes/JewelTheme/src/main/sass/components-primary/_datechooser.sass b/frameworks/themes/JewelTheme/src/main/sass/components-primary/_datechooser.sass index dcb34b5..98b8e4f 100644 --- a/frameworks/themes/JewelTheme/src/main/sass/components-primary/_datechooser.sass +++ b/frameworks/themes/JewelTheme/src/main/sass/components-primary/_datechooser.sass @@ -25,16 +25,16 @@ background: lighten($default-color, 20%) width: 330px - // .jewel.button - // , .jewel.list - // background: white - // border: none - // box-shadow: none .jewel.table background: lighten($default-color, 20%) border: none box-shadow: none + + .jewel.button + background: white + border: none + box-shadow: none th @if $flat