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
