You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@royale.apache.org by ca...@apache.org on 2018/08/20 14:00:13 UTC
[royale-asjs] branch develop updated: more style changes on
datefield
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 <ca...@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)