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 cefe81b making firstDayOfWeek work, and provide an example of a DateChooser and DateField configured for Spanish to test changing defaults in Jewel Example cefe81b is described below commit cefe81b8aa581c105212a4657052212aa376887b Author: Carlos Rovira <carlosrov...@apache.org> AuthorDate: Mon Aug 20 17:44:28 2018 +0200 making firstDayOfWeek work, and provide an example of a DateChooser and DateField configured for Spanish to test changing defaults in Jewel Example --- .../src/main/royale/DateComponentsPlayGround.mxml | 116 ++++++++++++++++----- .../main/royale/org/apache/royale/core/UIBase.as | 12 +++ .../royale/jewel/beads/models/DateChooserModel.as | 3 +- .../royale/jewel/beads/views/DateChooserView.as | 7 +- .../JewelTheme/src/main/resources/defaults.css | 2 +- .../main/sass/components-primary/_datefield.sass | 3 +- 6 files changed, 112 insertions(+), 31 deletions(-) diff --git a/examples/royale/JewelExample/src/main/royale/DateComponentsPlayGround.mxml b/examples/royale/JewelExample/src/main/royale/DateComponentsPlayGround.mxml index 2d4beb9..b5ad0d5 100644 --- a/examples/royale/JewelExample/src/main/royale/DateComponentsPlayGround.mxml +++ b/examples/royale/JewelExample/src/main/royale/DateComponentsPlayGround.mxml @@ -24,48 +24,110 @@ limitations under the License. <fx:Script> <![CDATA[ - private function dateChooserChanged():void + import org.apache.royale.core.IFormatBead; + import org.apache.royale.html.accessories.DateFormatDDMMYYYY; + + private function dateChooserDefaultChanged():void + { + dateChooserDefaultSelectedDate.html = "<strong>DateChooser selected date:</strong> " + dateChooserDefault.selectedDate; + dateFieldDefault.selectedDate = dateChooserDefault.selectedDate; + } + + private function dateFieldDefaultChanged():void { - dateChooserSelectedDate.html = "<strong>DateChooser selected date:</strong> " + dateChooser.selectedDate; - dateField.selectedDate = dateChooser.selectedDate; + dateFieldDefaultSelectedDate.html = "<strong>DateField selected date:</strong> " + dateFieldDefault.selectedDate; + dateChooserDefault.selectedDate = dateFieldDefault.selectedDate; } - private function dateFieldChanged():void + private function dateFieldToToday():void + { + dateFieldDefault.selectedDate = new Date(); + } + + // -- DateChooser Spanish + + private function dateChooserESChanged():void { - dateFieldSelectedDate.html = "<strong>DateField selected date:</strong> " + dateField.selectedDate; - dateChooser.selectedDate = dateField.selectedDate; + dateChooserESSelectedDate.html = "<strong>DateChooser fecha seleccionada:</strong> " + dateChooserES.selectedDate; + dateFieldES.selectedDate = dateChooserES.selectedDate; + } + + private function dateFieldESChanged():void + { + dateFieldESSelectedDate.html = "<strong>DateField fecha seleccionada:</strong> " + dateFieldES.selectedDate; + dateChooserES.selectedDate = dateFieldES.selectedDate; } - private function toToday():void + private function dateFieldESToToday():void + { + dateFieldES.selectedDate = new Date(); + } + + private function configDateChooserToES():void { - dateChooser.selectedDate = new Date(); + dateChooserES.model.dayNames = ['D','L','M','X','J','V','S']; + dateChooserES.model.firstDayOfWeek = 1; } - private function dateChooserInit():void + + private function configDateFieldToES():void { - dateChooser.model.firstDayOfWeek = 1; - dateChooser.model.dayNames = ['S','M','T','W','T','F','S']; + //dateFieldES.removeBead(dateFieldES.getBeadByType(IFormatBead)); + dateFieldES.addBead(new DateFormatDDMMYYYY()); + + dateFieldES.model.dayNames = ['D','L','M','X','J','V','S']; + dateFieldES.model.firstDayOfWeek = 1; } ]]> </fx:Script> - <j:beads> - <j:HorizontalCenteredLayout gap="3"/> - </j:beads> + <j:Grid gap="true"> + <j:GridCell desktopNumerator="1" desktopDenominator="2" + tabletNumerator="1" tabletDenominator="2" + phoneNumerator="1" phoneDenominator="1"> + <j:Card> + <html:H3 text="Jewel DateChooser (Default)"/> + <j:DateChooser id="dateChooserDefault" change="dateChooserDefaultChanged()"/> + <j:Label id="dateChooserDefaultSelectedDate" multiline="true" html="<strong>DateChooser selected date:</strong> " width="275"/> + </j:Card> + </j:GridCell> + <j:GridCell desktopNumerator="1" desktopDenominator="2" + tabletNumerator="1" tabletDenominator="2" + phoneNumerator="1" phoneDenominator="1"> + <j:Card> + <html:H3 text="Jewel DateField (Default)"/> - <j:Card> - <html:H3 text="Jewel DateChooser"/> - <j:DateChooser id="dateChooser" change="dateChooserChanged()" initComplete="dateChooserInit()"/> - <j:Label id="dateChooserSelectedDate" multiline="true" html="<strong>DateChooser selected date:</strong> " width="275"/> - </j:Card> + <j:HGroup gap="3"> + <j:DateField id="dateFieldDefault" change="dateFieldDefaultChanged()"/> + <j:Button text="Select today" click="dateFieldToToday()" emphasis="primary"/> + </j:HGroup> + <j:Label id="dateFieldDefaultSelectedDate" multiline="true" html="<strong>DateField selected date:</strong> "/> + </j:Card> + </j:GridCell> + </j:Grid> - <j:Card width="400"> - <html:H3 text="Jewel DateField"/> + <j:Grid gap="true"> + <j:GridCell desktopNumerator="1" desktopDenominator="2" + tabletNumerator="1" tabletDenominator="2" + phoneNumerator="1" phoneDenominator="1"> + <j:Card> + <html:H3 text="Jewel DateChooser (Spanish)"/> + <j:DateChooser id="dateChooserES" change="dateChooserESChanged()" initComplete="configDateChooserToES()"/> + <j:Label id="dateChooserESSelectedDate" multiline="true" html="<strong>DateChooser fecha seleccionada:</strong> " width="275"/> + </j:Card> + </j:GridCell> + <j:GridCell desktopNumerator="1" desktopDenominator="2" + tabletNumerator="1" tabletDenominator="2" + phoneNumerator="1" phoneDenominator="1"> + <j:Card> + <html:H3 text="Jewel DateField (Spanish)"/> - <j:HGroup gap="3"> - <j:DateField id="dateField" change="dateFieldChanged()"/> - <j:Button text="Today!" click="toToday()" emphasis="primary"/> - </j:HGroup> - <j:Label id="dateFieldSelectedDate" multiline="true" html="<strong>DateField selected date:</strong> "/> - </j:Card> + <j:HGroup gap="3"> + <j:DateField id="dateFieldES" change="dateFieldESChanged()" beadsAdded="configDateFieldToES()"/> + <j:Button text="¡Selecciona Hoy!" click="dateFieldESToToday()" emphasis="primary"/> + </j:HGroup> + <j:Label id="dateFieldESSelectedDate" multiline="true" html="<strong>DateField fecha seleccionada:</strong> "/> + </j:Card> + </j:GridCell> + </j:Grid> </j:SectionContent> diff --git a/frameworks/projects/Core/src/main/royale/org/apache/royale/core/UIBase.as b/frameworks/projects/Core/src/main/royale/org/apache/royale/core/UIBase.as index 5863904..492e33f 100644 --- a/frameworks/projects/Core/src/main/royale/org/apache/royale/core/UIBase.as +++ b/frameworks/projects/Core/src/main/royale/org/apache/royale/core/UIBase.as @@ -160,6 +160,18 @@ package org.apache.royale.core [Event(name="doubleClick", type="org.apache.royale.events.MouseEvent")] /** + * Set a different class for doubleClick events so that + * there aren't dependencies on the flash classes + * on the JS side. + * + * @langversion 3.0 + * @playerversion Flash 10.2 + * @playerversion AIR 2.6 + * @productversion Royale 0.0 + */ + [Event(name="beadsAdded", type="org.apache.royale.events.Event")] + + /** * The UIBase class is the base class for most composite user interface * components. For the Flash Player, Buttons and Text controls may * have a different base class and therefore may not extend UIBase. diff --git a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/models/DateChooserModel.as b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/models/DateChooserModel.as index b9219bd..92b34ba 100644 --- a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/models/DateChooserModel.as +++ b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/models/DateChooserModel.as @@ -162,6 +162,7 @@ package org.apache.royale.jewel.beads.models { if (value != _firstDayOfWeek) { _firstDayOfWeek = value; + updateCalendar(); dispatchEvent( new Event("firstDayOfWeekChanged") ); } } @@ -225,7 +226,7 @@ package org.apache.royale.jewel.beads.models _days = new Array(42); // skip to the first day and renumber to the last day of the month - var i:int = firstDay.getDay(); + var i:int = firstDay.getDay() - firstDayOfWeek; var dayNumber:int = 1; var numDays:Number = numberOfDaysInMonth(displayedMonth, displayedYear); 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 1344f0c..908a3ce 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 @@ -227,6 +227,11 @@ package org.apache.royale.jewel.beads.views } } + // cycle days array for offsetting when change firstDayOfWeek + private function cycleArray(array:Array, index:Number, n:Number):Number + { + return ((index + n) % array.length + array.length) % array.length; + } /** * @private */ @@ -239,7 +244,7 @@ package org.apache.royale.jewel.beads.views { var column:TableColumn = columns[index]; column.columnLabelAlign = "center"; - column.label = model.dayNames[index]; + column.label = model.dayNames[cycleArray(model.dayNames, index, model.firstDayOfWeek)]; } _daysTable.columns = columns; diff --git a/frameworks/themes/JewelTheme/src/main/resources/defaults.css b/frameworks/themes/JewelTheme/src/main/resources/defaults.css index 29a0f88..87b97c4 100644 --- a/frameworks/themes/JewelTheme/src/main/resources/defaults.css +++ b/frameworks/themes/JewelTheme/src/main/resources/defaults.css @@ -292,7 +292,7 @@ j|Card { } .jewel.datefield .jewel.textinput input { - width: 8rem; + width: 8em; background: linear-gradient(white, #f3f3f3); border-radius: 0.25rem 0px 0px 0.25rem; } diff --git a/frameworks/themes/JewelTheme/src/main/sass/components-primary/_datefield.sass b/frameworks/themes/JewelTheme/src/main/sass/components-primary/_datefield.sass index cbe8e4a..64b8686 100644 --- a/frameworks/themes/JewelTheme/src/main/sass/components-primary/_datefield.sass +++ b/frameworks/themes/JewelTheme/src/main/sass/components-primary/_datefield.sass @@ -20,13 +20,14 @@ // Jewel DateField // DateField variables +$datefield-input-width: 8em $datefield-border-radius: $border-radius .jewel.datefield .jewel.textinput input - width: 8rem + width: $datefield-input-width @if $flat background: $default-color border: 0px solid