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 2020/03/18 20:18:04 UTC
[royale-asjs] branch develop updated: jewel-datechooser: fix size
of button icons
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 9fc2964 jewel-datechooser: fix size of button icons
9fc2964 is described below
commit 9fc29644f133e907cdd06bd466b19f16b9343ec6
Author: Carlos Rovira <ca...@apache.org>
AuthorDate: Wed Mar 18 21:17:59 2020 +0100
jewel-datechooser: fix size of button icons
---
.../projects/Jewel/src/main/resources/defaults.css | 28 ----------------------
.../src/main/sass/components/_datechooser.sass | 23 +++++++-----------
.../JewelTheme/src/main/resources/defaults.css | 24 ++++++++++++++-----
.../main/sass/components-primary/_datechooser.sass | 28 ++++++++++++++++++----
4 files changed, 49 insertions(+), 54 deletions(-)
diff --git a/frameworks/projects/Jewel/src/main/resources/defaults.css b/frameworks/projects/Jewel/src/main/resources/defaults.css
index 99b0d86..3e27a64 100644
--- a/frameworks/projects/Jewel/src/main/resources/defaults.css
+++ b/frameworks/projects/Jewel/src/main/resources/defaults.css
@@ -554,9 +554,6 @@ j|DataGridColumnList {
min-width: 324px;
min-height: 364px;
}
-.jewel.datechooser .jewel.table .jewel.tableheadercell {
- padding: 12px 0px;
-}
.jewel.datechooser .jewel.table .jewel.tableheadercell.buttonsRow > .layout.horizontal {
float: right;
}
@@ -567,31 +564,6 @@ j|DataGridColumnList {
content: " ";
position: absolute;
}
-.jewel.datechooser .jewel.table .jewel.tableheadercell.buttonsRow .viewSelector::after {
- width: 22px;
- height: 16px;
-}
-.jewel.datechooser .jewel.table .jewel.tableheadercell.buttonsRow .previousButton::after, .jewel.datechooser .jewel.table .jewel.tableheadercell.buttonsRow .nextButton::after {
- width: 22px;
- height: 22px;
- top: calc(50% - 11px);
-}
-.jewel.datechooser .jewel.table .jewel.tableheadercell.buttonsRow .previousButton::after {
- left: calc(50% - 13px);
-}
-.jewel.datechooser .jewel.table .jewel.tableheadercell.buttonsRow .nextButton::after {
- left: calc(50% - 9px);
-}
-.jewel.datechooser .jewel.table .jewel.tableheadercell.buttonsRow {
- padding: 4px;
-}
-.jewel.datechooser .jewel.table .jewel.tableitem {
- height: 38px;
-}
-
-.calendar.item {
- padding: 10px;
-}
j|DateChooser {
IBeadModel: ClassReference("org.apache.royale.jewel.beads.models.DateChooserModel");
diff --git a/frameworks/projects/Jewel/src/main/sass/components/_datechooser.sass b/frameworks/projects/Jewel/src/main/sass/components/_datechooser.sass
index a5926a0..0e2cd07 100644
--- a/frameworks/projects/Jewel/src/main/sass/components/_datechooser.sass
+++ b/frameworks/projects/Jewel/src/main/sass/components/_datechooser.sass
@@ -20,7 +20,7 @@
// Jewel DateChooser
// DateChooser variables
-$datechooser-button-size: 22px
+// $datechooser-button-size: 22px
$datechooser-tableitem-size: 38px
.jewel.datechooser
@@ -30,8 +30,7 @@ $datechooser-tableitem-size: 38px
min-height: 364px
.jewel.tableheadercell
- padding: 12px 0px
-
+
.jewel.tableheadercell.buttonsRow
& > .layout.horizontal //makes the HGroup that holds prev and next btns align to right
@@ -43,29 +42,23 @@ $datechooser-tableitem-size: 38px
content: ' '
position: absolute
.viewSelector::after
- width: $datechooser-button-size
- height: $datechooser-button-size - 6px
+
.previousButton::after, .nextButton::after
- width: $datechooser-button-size
- height: $datechooser-button-size
-
- top: calc(50% - #{$datechooser-button-size/2})
+
.previousButton::after
- left: calc(50% - #{$datechooser-button-size/2 + 2px})
+
.nextButton::after
- left: calc(50% - #{$datechooser-button-size/2 - 2px})
-
+
.jewel.tableheadercell.buttonsRow
- padding: 4px
// td
.jewel.tableitem
// width: $datechooser-tableitem-size
- height: $datechooser-tableitem-size
+ // height: $datechooser-tableitem-size
.calendar
&.item
- padding: 10px
+
j|DateChooser
IBeadModel: ClassReference("org.apache.royale.jewel.beads.models.DateChooserModel")
diff --git a/frameworks/themes/JewelTheme/src/main/resources/defaults.css b/frameworks/themes/JewelTheme/src/main/resources/defaults.css
index 8537dbc..2df4b75 100644
--- a/frameworks/themes/JewelTheme/src/main/resources/defaults.css
+++ b/frameworks/themes/JewelTheme/src/main/resources/defaults.css
@@ -509,6 +509,7 @@ j|CardActions {
box-shadow: none;
}
.jewel.datechooser .jewel.table .jewel.tableheadercell {
+ padding: 12px 0px;
background: white;
box-shadow: none;
border-left: 0px;
@@ -527,20 +528,24 @@ j|CardActions {
background: #e6e6e6;
}
.jewel.datechooser .jewel.table .jewel.tableheadercell.buttonsRow .viewSelector::after {
- background-size: 54%;
-}
-.jewel.datechooser .jewel.table .jewel.tableheadercell.buttonsRow .previousButton::after, .jewel.datechooser .jewel.table .jewel.tableheadercell.buttonsRow .nextButton::after {
- background-size: 40%;
-}
-.jewel.datechooser .jewel.table .jewel.tableheadercell.buttonsRow .viewSelector::after {
+ width: 14px;
+ height: 8px;
+ padding-right: 8px;
background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 12 8' version='1.1' xmlns='http://www.w3.org/2000/svg'%3E%3Cg stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'%3E%3Cg transform='translate(0.000000, -1.000000)' fill='%233CADF1' fill-rule='nonzero'%3E%3Cg transform='translate(-2.000000, 0.000000)'%3E%3Cpolygon transform='translate(8.000000, 4.705000) scale(1, -1) translate(-8.000000, -4.705000) ' points='3.41 8.41 8 3.83 12.59 8.41 14 7 8 1 2 7'%3E%3C/polygon%3 [...]
background-position: right 0 center;
background-repeat: no-repeat;
}
+.jewel.datechooser .jewel.table .jewel.tableheadercell.buttonsRow .previousButton::after, .jewel.datechooser .jewel.table .jewel.tableheadercell.buttonsRow .nextButton::after {
+ width: 14px;
+ height: 14px;
+ top: calc(50% - 7px);
+}
.jewel.datechooser .jewel.table .jewel.tableheadercell.buttonsRow .previousButton::after {
+ left: calc(50% - 9px);
background: url("data:image/svg+xml,%3Csvg viewBox='0 0 8 12' version='1.1' xmlns='http://www.w3.org/2000/svg'%3E%3Cg stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'%3E%3Cg transform='translate(-7.000000, -5.000000)'%3E%3Crect x='0' y='0' width='22' height='22'%3E%3C/rect%3E%3Cpath 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.482210 [...]
}
.jewel.datechooser .jewel.table .jewel.tableheadercell.buttonsRow .nextButton::after {
+ left: calc(50% - 5px);
background: url("data:image/svg+xml,%3Csvg viewBox='0 0 8 12' version='1.1' xmlns='http://www.w3.org/2000/svg'%3E%3Cg stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'%3E%3Cg transform='translate(-7.000000, -5.000000)'%3E%3Crect x='0' y='0' width='22' height='22'%3E%3C/rect%3E%3Cpath 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.482210 [...]
}
.jewel.datechooser .jewel.table .jewel.tablecell {
@@ -548,6 +553,9 @@ j|CardActions {
border-left: 0px;
padding: 4px;
}
+.jewel.datechooser .jewel.table .jewel.tableheadercell.buttonsRow {
+ padding: 4px;
+}
.jewel.datechooser[disabled] {
pointer-events: none;
}
@@ -579,11 +587,15 @@ j|CardActions {
.jewel.datechooser[disabled] .jewel.table .jewel.tableheadercell.buttonsRow .nextButton::after {
background: url("data:image/svg+xml,%3Csvg viewBox='0 0 8 12' version='1.1' xmlns='http://www.w3.org/2000/svg'%3E%3Cg stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'%3E%3Cg transform='translate(-7.000000, -5.000000)'%3E%3Crect x='0' y='0' width='22' height='22'%3E%3C/rect%3E%3Cpath 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.482210 [...]
}
+.jewel.datechooser[disabled] .jewel.tableitem {
+ height: 38px;
+}
.jewel.datechooser[disabled] .jewel.tableitem.selected, .jewel.datechooser[disabled] .jewel.tableitem.selectable:active {
background: #cccccc;
}
.calendar.item {
+ padding: 10px;
font-size: 1em;
}
.calendar.item.dayName {
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 c164415..17f3853 100644
--- a/frameworks/themes/JewelTheme/src/main/sass/components-primary/_datechooser.sass
+++ b/frameworks/themes/JewelTheme/src/main/sass/components-primary/_datechooser.sass
@@ -20,6 +20,8 @@
// Jewel DateChooser
// DateChooser variables
+$datechooser-button-size: 14px
+$datechooser-tableitem-size: 38px
$datechooser-border-radius: $border-radius
$datechooser-buttons-border-radius: 50%
@@ -39,6 +41,8 @@ $datechooser-buttons-border-radius: 50%
box-shadow: none
.jewel.tableheadercell
+ padding: 12px 0px
+
@if $flat
background: lighten($default-color, 20%)
@else
@@ -58,17 +62,23 @@ $datechooser-buttons-border-radius: 50%
background: lighten($default-color, 5%)
.viewSelector::after
- background-size: 54%
- .previousButton::after, .nextButton::after
- background-size: 40%
-
- .viewSelector::after
+ // background-size: 54%
+ width: $datechooser-button-size
+ height: $datechooser-button-size - 6px
+ padding-right: 8px
background-image: encodeSVG("<svg viewBox='0 0 12 8' version='1.1' xmlns='http://www.w3.org/2000/svg'><g stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'><g transform='translate(0.000000, -1.000000)' fill='#{$primary-color}' fill-rule='nonzero'><g transform='translate(-2.000000, 0.000000)'><polygon transform='translate(8.000000, 4.705000) scale(1, -1) translate(-8.000000, -4.705000) ' points='3.41 8.41 8 3.83 12.59 8.41 14 7 8 1 2 7'></polygon></g></g></ [...]
background-position: right 0 center
background-repeat: no-repeat
+ .previousButton::after, .nextButton::after
+ // background-size: 40%
+ width: $datechooser-button-size
+ height: $datechooser-button-size
+ top: calc(50% - #{$datechooser-button-size/2})
.previousButton::after
+ left: calc(50% - #{$datechooser-button-size/2 + 2px})
background: encodeSVG("<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. [...]
.nextButton::after
+ left: calc(50% - #{$datechooser-button-size/2 - 2px})
background: encodeSVG("<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. [...]
.jewel.tablecell
@@ -76,6 +86,9 @@ $datechooser-buttons-border-radius: 50%
border-left: 0px
padding: 4px
+ .jewel.tableheadercell.buttonsRow
+ padding: 4px
+
&[disabled]
pointer-events: none
@@ -110,11 +123,16 @@ $datechooser-buttons-border-radius: 50%
background: encodeSVG("<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 [...]
.jewel.tableitem
+ // width: $datechooser-tableitem-size
+ height: $datechooser-tableitem-size
+
&.selected, &.selectable:active
background: darken($disabled-color, 15%)
.calendar
&.item
+ padding: 10px
+
font:
size: 1em
&.dayName