Ops, sorry, I saw you already did it :) thanks! El mar., 5 nov. 2019 a las 20:08, Carlos Rovira (<[email protected]>) escribió:
> Hi Greg, > thanks for adding this. I'll try to see SASS things on week end. > Can you add example(s) to Slider page in Tour de Jewel? > thanks! > > El mar., 5 nov. 2019 a las 6:21, <[email protected]> escribió: > >> This is an automated email from the ASF dual-hosted git repository. >> >> gregdove 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 40c6997 Still figuring out the sass stuff... refactor setup for >> VSlider into Jewel. TBC via Carlos... >> 40c6997 is described below >> >> commit 40c69978b58ee5dd41e2d1aa52f5d724f997717e >> Author: greg-dove <[email protected]> >> AuthorDate: Tue Nov 5 18:21:20 2019 +1300 >> >> Still figuring out the sass stuff... refactor setup for VSlider into >> Jewel. TBC via Carlos... >> --- >> .../projects/Jewel/src/main/resources/defaults.css | 36 ++++++++++++ >> .../Jewel/src/main/sass/components}/_vslider.sass | 68 >> ++++++++++++---------- >> .../projects/Jewel/src/main/sass/defaults.sass | 3 +- >> .../JewelTheme/src/main/resources/defaults.css | 39 ------------- >> .../themes/JewelTheme/src/main/sass/defaults.sass | 1 - >> 5 files changed, 75 insertions(+), 72 deletions(-) >> >> diff --git a/frameworks/projects/Jewel/src/main/resources/defaults.css >> b/frameworks/projects/Jewel/src/main/resources/defaults.css >> index bc02538..cf86acc 100644 >> --- a/frameworks/projects/Jewel/src/main/resources/defaults.css >> +++ b/frameworks/projects/Jewel/src/main/resources/defaults.css >> @@ -3446,6 +3446,42 @@ j|Slider { >> iTrackView: >> ClassReference("org.apache.royale.jewel.beads.views.SliderTrackView"); >> } >> } >> +.vslider { >> + min-width: 27px; >> + min-height: 150px; >> + position: relative; >> + display: inline-block; >> +} >> +.vslider .transform-container { >> + height: 100%; >> + display: inline-block; >> + position: absolute; >> + margin-left: calc(50% - 13.5px); >> +} >> +.vslider .sizer { >> + height: 100%; >> + visibility: hidden; >> +} >> +.vslider .jewel.slider { >> + transform: "translate(-50%, -50%) rotate(270deg) translate(-50%, 50%)"; >> + left: 0; >> + right: 0; >> + top: 0; >> + height: 27px; >> + position: absolute; >> +} >> +.vslider .jewel.slider input { >> + margin-left: 0; >> + margin-right: 0; >> + width: 100%; >> +} >> +.vslider .slider-track-container { >> + margin: 0; >> + width: 100%; >> + padding-left: 5px; >> + padding-right: 5px; >> +} >> + >> .jewel.snackbar { >> bottom: 0; >> position: fixed; >> diff --git >> a/frameworks/themes/JewelTheme/src/main/sass/components-primary/_vslider.sass >> b/frameworks/projects/Jewel/src/main/sass/components/_vslider.sass >> similarity index 58% >> rename from >> frameworks/themes/JewelTheme/src/main/sass/components-primary/_vslider.sass >> rename to frameworks/projects/Jewel/src/main/sass/components/_vslider.sass >> index 35437a9..94dd970 100644 >> --- >> a/frameworks/themes/JewelTheme/src/main/sass/components-primary/_vslider.sass >> +++ b/frameworks/projects/Jewel/src/main/sass/components/_vslider.sass >> @@ -19,39 +19,45 @@ >> >> // Jewel VSlider >> >> +// VSlider variables >> +@import "slider" >> +//I could not get "$slider-container-height / 2" , so recalculating from >> components : >> +$vslider-half-width: #{($slider-thumb-size + >> round($slider-thumb-size/2))/2} >> +$vslider-margin-left: calc(50% - #{$vslider-half-width}) >> +$vslider-container-min-height: 150px >> + >> +// Jewel VSlider >> + >> //mainly uses the base (horizontal) 'slider' styles, but has various >> extras to override or set styles to support the >> //layout via internal rotation transform of the original component >> approach in nested div elements >> //there is some tricky use of a non-visual img element to get layout >> working with the css transform approach >> .vslider >> - min-width: 27px >> - min-height: 150px >> - position: relative >> - display: inline-block >> - .transform-container >> - height: 100% >> - display: inline-block >> - position: absolute >> - margin-left: calc(50% - 13.5px) >> - .sizer >> - height: 100% >> - visibility: hidden >> - .jewel.slider >> - transform: 'translate(-50%, -50%) rotate(270deg) translate(-50%, >> 50%)' >> - left: 0 >> - right: 0 >> - top: 0 >> - height: 27px >> - position: absolute >> - input >> - margin-left: 0 >> - margin-right: 0 >> - width: 100% >> - .slider-track-container >> - margin-top: 0 >> - margin-right: 0 >> - padding-left: 5px >> - margin-bottom: 0 >> - margin-left: 0px >> - width: 100% >> - padding-right: 5px >> + min-width: $slider-container-height >> + min-height: $vslider-container-min-height >> + position: relative >> + display: inline-block >> + .transform-container >> + height: 100% >> + display: inline-block >> + position: absolute >> + margin-left: $vslider-margin-left >> + .sizer >> + height: 100% >> + visibility: hidden >> + .jewel.slider >> + transform: 'translate(-50%, -50%) rotate(270deg) >> translate(-50%, 50%)' >> + left: 0 >> + right: 0 >> + top: 0 >> + height: $slider-container-height >> + position: absolute >> + input >> + margin-left: 0 >> + margin-right: 0 >> + width: 100% >> + .slider-track-container >> + margin: 0 >> + width: 100% >> + padding-left: 5px >> + padding-right: 5px >> >> diff --git a/frameworks/projects/Jewel/src/main/sass/defaults.sass >> b/frameworks/projects/Jewel/src/main/sass/defaults.sass >> index 6195246..d17b721 100644 >> --- a/frameworks/projects/Jewel/src/main/sass/defaults.sass >> +++ b/frameworks/projects/Jewel/src/main/sass/defaults.sass >> @@ -49,7 +49,8 @@ >> @import "components/popup" >> @import "components/radiobutton" >> @import "components/sectioncontent" >> -@import "components/slider" >> +//vslider imports slider as well here: >> +@import "components/vslider" >> @import "components/snackbar" >> @import "components/tabbar" >> @import "components/table" >> diff --git a/frameworks/themes/JewelTheme/src/main/resources/defaults.css >> b/frameworks/themes/JewelTheme/src/main/resources/defaults.css >> index a2fd038..b0ed671 100644 >> --- a/frameworks/themes/JewelTheme/src/main/resources/defaults.css >> +++ b/frameworks/themes/JewelTheme/src/main/resources/defaults.css >> @@ -816,45 +816,6 @@ j|FormItem { >> border-radius: 3px; >> } >> >> -.vslider { >> - min-width: 27px; >> - min-height: 150px; >> - position: relative; >> - display: inline-block; >> -} >> -.vslider .transform-container { >> - height: 100%; >> - display: inline-block; >> - position: absolute; >> - margin-left: calc(50% - 13.5px); >> -} >> -.vslider .sizer { >> - height: 100%; >> - visibility: hidden; >> -} >> -.vslider .jewel.slider { >> - transform: "translate(-50%, -50%) rotate(270deg) translate(-50%, 50%)"; >> - left: 0; >> - right: 0; >> - top: 0; >> - height: 27px; >> - position: absolute; >> -} >> -.vslider .jewel.slider input { >> - margin-left: 0; >> - margin-right: 0; >> - width: 100%; >> -} >> -.vslider .slider-track-container { >> - margin-top: 0; >> - margin-right: 0; >> - padding-left: 5px; >> - margin-bottom: 0; >> - margin-left: 0px; >> - width: 100%; >> - padding-right: 5px; >> -} >> - >> .jewel.snackbar { >> will-change: transform; >> transform: translate(0, 100%); >> diff --git a/frameworks/themes/JewelTheme/src/main/sass/defaults.sass >> b/frameworks/themes/JewelTheme/src/main/sass/defaults.sass >> index 80b9bbd..9d6257b 100644 >> --- a/frameworks/themes/JewelTheme/src/main/sass/defaults.sass >> +++ b/frameworks/themes/JewelTheme/src/main/sass/defaults.sass >> @@ -50,7 +50,6 @@ >> @import "components-primary/popup" >> @import "components-primary/radiobutton" >> @import "components-primary/slider" >> -@import "components-primary/vslider" >> @import "components-primary/snackbar" >> @import "components-primary/tabbar" >> @import "components-primary/table" >> >> > > -- > Carlos Rovira > http://about.me/carlosrovira > > -- Carlos Rovira http://about.me/carlosrovira
