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 021aa4f more style changes on datefield 021aa4f is described below commit 021aa4f906fe177451883300a51f4180d562ec64 Author: Carlos Rovira <carlosrov...@apache.org> AuthorDate: Mon Aug 20 16:00:00 2018 +0200 more style changes on datefield --- .../src/main/royale/DateComponentsPlayGround.mxml | 7 +++-- .../projects/Jewel/src/main/resources/defaults.css | 2 +- .../royale/jewel/beads/views/DateFieldView.as | 2 +- .../Jewel/src/main/sass/components/_datefield.sass | 6 ++-- .../JewelTheme/src/main/resources/defaults.css | 33 +++++++++++----------- .../src/main/resources/svgs/checkbox-tick.svg | 11 +++++++- .../main/sass/components-primary/_datefield.sass | 19 +++++++++---- .../main/sass/components-primary/_textinput.sass | 25 ++++++++-------- 8 files changed, 63 insertions(+), 42 deletions(-) diff --git a/examples/royale/JewelExample/src/main/royale/DateComponentsPlayGround.mxml b/examples/royale/JewelExample/src/main/royale/DateComponentsPlayGround.mxml index c52ce87..2d4beb9 100644 --- a/examples/royale/JewelExample/src/main/royale/DateComponentsPlayGround.mxml +++ b/examples/royale/JewelExample/src/main/royale/DateComponentsPlayGround.mxml @@ -60,9 +60,12 @@ limitations under the License. <j:Card width="400"> <html:H3 text="Jewel DateField"/> - <j:DateField id="dateField" change="dateFieldChanged()"/> + + <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:Button text="Today!" click="toToday()"/> </j:Card> </j:SectionContent> diff --git a/frameworks/projects/Jewel/src/main/resources/defaults.css b/frameworks/projects/Jewel/src/main/resources/defaults.css index 39bc320..d2c9e30 100644 --- a/frameworks/projects/Jewel/src/main/resources/defaults.css +++ b/frameworks/projects/Jewel/src/main/resources/defaults.css @@ -320,7 +320,7 @@ j|DateField { IBeadView: ClassReference("org.apache.royale.jewel.beads.views.DateFieldView"); IBeadModel: ClassReference("org.apache.royale.jewel.beads.models.DateChooserModel"); IBeadController: ClassReference("org.apache.royale.jewel.beads.controllers.DateFieldMouseController"); - IFormatBead: ClassReference("org.apache.royale.html.accessories.DateFormatDDMMYYYY"); + IFormatBead: ClassReference("org.apache.royale.html.accessories.DateFormatMMDDYYYY"); } .jewel.divider { 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 ee64e4a..ecad494 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 @@ -124,7 +124,7 @@ package org.apache.royale.jewel.beads.views getHost().addElement(_textInput); _button = new Button(); - _button.text = "⬇︎"; + _button.text = "↓"; getHost().addElement(_button); COMPILE::SWF { diff --git a/frameworks/projects/Jewel/src/main/sass/components/_datefield.sass b/frameworks/projects/Jewel/src/main/sass/components/_datefield.sass index 2b0d6ab..7c5c20d 100644 --- a/frameworks/projects/Jewel/src/main/sass/components/_datefield.sass +++ b/frameworks/projects/Jewel/src/main/sass/components/_datefield.sass @@ -27,8 +27,8 @@ $datefield-button-yoffset: calc(50% - #{$datefield-button-size/2}) .jewel.datefield display: inline-flex - .jewel.textinput - input + // .jewel.textinput + // input .jewel.button @@ -64,7 +64,7 @@ j|DateField IBeadView: ClassReference("org.apache.royale.jewel.beads.views.DateFieldView") IBeadModel: ClassReference("org.apache.royale.jewel.beads.models.DateChooserModel") IBeadController: ClassReference("org.apache.royale.jewel.beads.controllers.DateFieldMouseController") - IFormatBead: ClassReference("org.apache.royale.html.accessories.DateFormatDDMMYYYY") + IFormatBead: ClassReference("org.apache.royale.html.accessories.DateFormatMMDDYYYY") @media -royale-swf diff --git a/frameworks/themes/JewelTheme/src/main/resources/defaults.css b/frameworks/themes/JewelTheme/src/main/resources/defaults.css index bb9c435..29a0f88 100644 --- a/frameworks/themes/JewelTheme/src/main/resources/defaults.css +++ b/frameworks/themes/JewelTheme/src/main/resources/defaults.css @@ -292,10 +292,9 @@ j|Card { } .jewel.datefield .jewel.textinput input { - border-bottom-right-radius: 0px; - border-top-right-radius: 0px; - border-right-color: transparent; - width: 8em; + width: 8rem; + background: linear-gradient(white, #f3f3f3); + border-radius: 0.25rem 0px 0px 0.25rem; } .jewel.datefield .jewel.button { color: transparent; @@ -303,7 +302,7 @@ j|Card { border-top-left-radius: 0px; } .jewel.datefield .jewel.button::after { - background-size: 75%; + background-size: 66%; background: url("data:image/svg+xml,%3Csvg viewBox='0 0 22 22' version='1.1' xmlns='http://www.w3.org/2000/svg'%3E%3Cg stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'%3E%3Crect x='0' y='0' width='22' height='22'%3E%3C/rect%3E%3Cpath d='M18.3333333,2.75 L17.4166667,2.75 L17.4166667,0.916666667 L15.5833333,0.916666667 L15.5833333,2.75 L6.41666667,2.75 L6.41666667,0.916666667 L4.58333333,0.916666667 L4.58333333,2.75 L3.66666667,2.75 C2.65833333,2.75 1.83333333,3.575 1.83333 [...] } @@ -657,29 +656,29 @@ j|Card { .jewel.textinput input { font-family: "Lato", sans-serif; } -.jewel.textinput > input { +.jewel.textinput input { background: linear-gradient(white, #f3f3f3); border: 1px solid #b3b3b3; border-radius: 0.25rem; transition-duration: 0.3s; transition-timing-function: easein; } -.jewel.textinput > input:focus { +.jewel.textinput input:focus { border: 1px solid #0f88d1; } -.jewel.textinput > input::placeholder, .jewel.textinput > input:-ms-input-placeholder { +.jewel.textinput input::placeholder, .jewel.textinput input:-ms-input-placeholder { color: #a6a6a6; } -.jewel.textinput > input[disabled] { +.jewel.textinput input[disabled] { background: #f3f3f3; border: 1px solid #d9d9d9; box-shadow: none; color: silver; } -.jewel.textinput > input[disabled]::placeholder, .jewel.textinput > input[disabled]:-ms-input-placeholder { +.jewel.textinput input[disabled]::placeholder, .jewel.textinput input[disabled]:-ms-input-placeholder { color: silver; } -.jewel.textinput > input[disabled] + i { +.jewel.textinput input[disabled] + i { color: silver; } @@ -687,29 +686,29 @@ j|Card { font-weight: 400; color: #808080; } -.jewel.textarea > textarea { +.jewel.textarea textarea { font-family: "Lato", sans-serif; } -.jewel.textarea > textarea { +.jewel.textarea textarea { background: linear-gradient(white, #f3f3f3); border: 1px solid #b3b3b3; border-radius: 0.25rem; transition-duration: 0.3s; transition-timing-function: easein; } -.jewel.textarea > textarea:focus { +.jewel.textarea textarea:focus { border: 1px solid #0f88d1; } -.jewel.textarea > textarea::placeholder, .jewel.textarea > textarea:-ms-input-placeholder { +.jewel.textarea textarea::placeholder, .jewel.textarea textarea:-ms-input-placeholder { color: #a6a6a6; } -.jewel.textarea > textarea[disabled] { +.jewel.textarea textarea[disabled] { background: #f3f3f3; border: 1px solid #d9d9d9; box-shadow: none; color: silver; } -.jewel.textarea > textarea[disabled]::placeholder, .jewel.textarea > textarea[disabled]:-ms-input-placeholder { +.jewel.textarea textarea[disabled]::placeholder, .jewel.textarea textarea[disabled]:-ms-input-placeholder { color: silver; } diff --git a/frameworks/themes/JewelTheme/src/main/resources/svgs/checkbox-tick.svg b/frameworks/themes/JewelTheme/src/main/resources/svgs/checkbox-tick.svg index 2c7ca9c..976947c 100644 --- a/frameworks/themes/JewelTheme/src/main/resources/svgs/checkbox-tick.svg +++ b/frameworks/themes/JewelTheme/src/main/resources/svgs/checkbox-tick.svg @@ -19,4 +19,13 @@ <svg viewBox="0 0 22 22" version="1.1" xmlns="http://www.w3.org/2000/svg"> <rect x="0" y="0" width="22" height="22" fill-opacity="0"/> <polygon fill="#{$primary-color}" points="3.50018311 12.4854126 8.48547363 17.4989624 18.4641113 7.47589111 15.5010376 4.51739502 8.48547363 11.5650024 6.52087402 9.47265625"/> -</svg> \ No newline at end of file +</svg> + + +<svg viewBox='0 0 8 12' version='1.1' xmlns='http://www.w3.org/2000/svg'><g stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'><g transform='translate(-7.000000, -5.000000)'><rect x='0' y='0' width='22' height='22'></rect><path d='M14.9911518,6.4116803 C14.9876664,5.88503401 14.7746504,5.53560917 14.5762939,5.35284424 C14.3779375,5.17007931 14.0808684,5.04951371 13.4608967,5.00170898 L7.01066011,11.0034834 L13.4822102,17.0014648 C14.1196233,16.9113382 14.3962441,16.8099967 14 [...] + + +<svg viewBox='0 0 8 12' version='1.1' xmlns='http://www.w3.org/2000/svg'><g stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'><g transform='translate(-7.000000, -5.000000)'><rect x='0' y='0' width='22' height='22'></rect><path d='M14.9911518,6.4116803 C14.9876664,5.88503401 14.7746504,5.53560917 14.5762939,5.35284424 C14.3779375,5.17007931 14.0808684,5.04951371 13.4608967,5.00170898 L7.01066011,11.0034834 L13.4822102,17.0014648 C14.1196233,16.9113382 14.3962441,16.8099967 14 [...] + + +<svg viewBox='0 0 22 22' version='1.1' xmlns='http://www.w3.org/2000/svg'><g stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'><rect x='0' y='0' width='22' height='22'></rect><path d='M18.3333333,2.75 L17.4166667,2.75 L17.4166667,0.916666667 L15.5833333,0.916666667 L15.5833333,2.75 L6.41666667,2.75 L6.41666667,0.916666667 L4.58333333,0.916666667 L4.58333333,2.75 L3.66666667,2.75 C2.65833333,2.75 1.83333333,3.575 1.83333333,4.58333333 L1.83333333,19.25 C1.83333333,20.2583333 [...] \ No newline at end of file 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 852862b..cbe8e4a 100644 --- a/frameworks/themes/JewelTheme/src/main/sass/components-primary/_datefield.sass +++ b/frameworks/themes/JewelTheme/src/main/sass/components-primary/_datefield.sass @@ -20,15 +20,24 @@ // Jewel DateField // DateField variables +$datefield-border-radius: $border-radius .jewel.datefield .jewel.textinput input - border-bottom-right-radius: 0px - border-top-right-radius: 0px - border-right-color: transparent - width: 8em + width: 8rem + @if $flat + background: $default-color + border: 0px solid + @else + background: linear-gradient(lighten($default-color, 15%), lighten($default-color, 10%)) + //border: 1px solid darken($default-color, 15%) + border-radius: $datefield-border-radius 0px 0px $datefield-border-radius + + // &:focus + // border-right: 1px + // border-right-color: darken($default-color, 15%) .jewel.button color: transparent border-bottom-left-radius: 0px @@ -37,5 +46,5 @@ &::before &::after - background-size: 75% + background-size: 66% background: encodeSVG("<svg viewBox='0 0 22 22' version='1.1' xmlns='http://www.w3.org/2000/svg'><g stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'><rect x='0' y='0' width='22' height='22'></rect><path d='M18.3333333,2.75 L17.4166667,2.75 L17.4166667,0.916666667 L15.5833333,0.916666667 L15.5833333,2.75 L6.41666667,2.75 L6.41666667,0.916666667 L4.58333333,0.916666667 L4.58333333,2.75 L3.66666667,2.75 C2.65833333,2.75 1.83333333,3.575 1.83333333,4.58333333 L1.833 [...] diff --git a/frameworks/themes/JewelTheme/src/main/sass/components-primary/_textinput.sass b/frameworks/themes/JewelTheme/src/main/sass/components-primary/_textinput.sass index 9846f56..7abb7bb 100644 --- a/frameworks/themes/JewelTheme/src/main/sass/components-primary/_textinput.sass +++ b/frameworks/themes/JewelTheme/src/main/sass/components-primary/_textinput.sass @@ -26,7 +26,7 @@ $textinput-border-radius: $border-radius color: $textinput-text-color - > input + input @if $flat background: $default-color border: 0px solid @@ -92,7 +92,7 @@ $textarea-border-radius: $border-radius color: $textarea-text-color - > textarea + textarea @if $flat background: $default-color border: 0px solid @@ -131,16 +131,17 @@ $textarea-border-radius: $border-radius &::placeholder, &:-ms-input-placeholder color: $disabled-font-color -.jewel.textarea - font: - weight: $font-weight-normal - - > textarea +.jewel + &.textarea font: - family: $font-stack + weight: $font-weight-normal + + textarea + font: + family: $font-stack - @if $dark - +textarea-theme($font-dark-color) - @else - +textarea-theme($font-light-color) + @if $dark + +textarea-theme($font-dark-color) + @else + +textarea-theme($font-light-color)