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 f403e82 slider styles initial changes and progressive track f403e82 is described below commit f403e8271ace17574ce1cae5b751111ba3cf77dc Author: Carlos Rovira <carlosrov...@apache.org> AuthorDate: Thu Apr 12 12:19:19 2018 +0200 slider styles initial changes and progressive track --- .../src/main/royale/SliderPlayGround.mxml | 18 ++- .../projects/Jewel/src/main/resources/defaults.css | 15 --- .../main/royale/org/apache/royale/jewel/Slider.as | 6 +- .../beads/controllers/SliderMouseController.as | 23 +++- .../apache/royale/jewel/beads/views/SliderView.as | 31 ++++- .../Jewel/src/main/sass/components/_slider.sass | 16 +-- .../JewelTheme/src/main/resources/defaults.css | 117 ++++++++++++++---- .../src/main/sass/components-primary/_slider.sass | 136 +++++++++++++++++---- 8 files changed, 268 insertions(+), 94 deletions(-) diff --git a/examples/royale/JewelExample/src/main/royale/SliderPlayGround.mxml b/examples/royale/JewelExample/src/main/royale/SliderPlayGround.mxml index d580c38..0886393 100644 --- a/examples/royale/JewelExample/src/main/royale/SliderPlayGround.mxml +++ b/examples/royale/JewelExample/src/main/royale/SliderPlayGround.mxml @@ -27,8 +27,9 @@ limitations under the License. <![CDATA[ private function onChange(event:Event):void { - button.width = slider.value; - button.height = slider_v.value; + button.width = slider_w.value; + button.height = slider_h.value; + button.text = slider_w.value + "x" + slider_h.value; } ]]> </fx:Script> @@ -39,10 +40,17 @@ limitations under the License. <html:H3 text="Jewel Slider"/> - <j:Slider id="slider" width="250" value="120" minimum="100" maximum="500" + <j:Slider id="slider_w" width="250" value="250" minimum="100" maximum="500" change="onChange(event)" input="onChange(event)"/> - <j:Slider id="slider_v" width="250" value="40" minimum="40" maximum="300" + <j:Slider id="slider_h" width="250" value="80" minimum="40" maximum="300" change="onChange(event)" input="onChange(event)"/> - <j:TextButton id="button" text="Button" width="120" height="40" primary="true"/> + + <j:Slider id="slider_dis" width="250" value="70" minimum="0" maximum="100"> + <j:beads> + <j:Disabled/> + </j:beads> + </j:Slider> + + <j:TextButton id="button" text="Button" width="250" height="140" primary="true"/> </js:Group> diff --git a/frameworks/projects/Jewel/src/main/resources/defaults.css b/frameworks/projects/Jewel/src/main/resources/defaults.css index 24ca12d..95addd9 100644 --- a/frameworks/projects/Jewel/src/main/resources/defaults.css +++ b/frameworks/projects/Jewel/src/main/resources/defaults.css @@ -136,27 +136,12 @@ j|Label { IBeadView: ClassReference("org.apache.royale.jewel.beads.views.RadioButtonView"); } } -.jewel.slider { - width: 100px; - height: 30px; - position: relative; -} - j|Slider { IBeadModel: ClassReference("org.apache.royale.jewel.beads.models.SliderRangeModel"); IBeadView: ClassReference("org.apache.royale.jewel.beads.views.SliderView"); IBeadController: ClassReference("org.apache.royale.jewel.beads.controllers.SliderMouseController"); } -.SliderTrack { - position: absolute; -} - -.SliderThumb { - position: absolute; - border-radius: 15px; -} - @media -royale-swf { j|Slider { iThumbView: ClassReference("org.apache.royale.jewel.beads.views.SliderThumbView"); diff --git a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/Slider.as b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/Slider.as index 6f32167..99b02a6 100644 --- a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/Slider.as +++ b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/Slider.as @@ -209,7 +209,7 @@ package org.apache.royale.jewel /** * @royaleignorecoercion org.apache.royale.core.WrappedHTMLElement * @royaleignorecoercion HTMLInputElement - * @royaleignorecoercion HTMLElement + * @royaleignorecoercion HTMLDivElement */ COMPILE::JS override protected function createElement():WrappedHTMLElement @@ -219,10 +219,6 @@ package org.apache.royale.jewel var input:HTMLInputElement = addElementToWrapper(this,'input') as HTMLInputElement; input.setAttribute('type', 'range'); - //attach input handler to dispatch royale change event when user write in textinput - //goog.events.listen(element, 'change', killChangeHandler); - //goog.events.listen(input, 'input', textChangeHandler); - div.appendChild(input); positioner = div as WrappedHTMLElement; diff --git a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/controllers/SliderMouseController.as b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/controllers/SliderMouseController.as index d917514..337b26f 100644 --- a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/controllers/SliderMouseController.as +++ b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/controllers/SliderMouseController.as @@ -36,6 +36,7 @@ package org.apache.royale.jewel.beads.controllers import goog.events.EventType; import org.apache.royale.events.BrowserEvent; import org.apache.royale.jewel.Slider; + import org.apache.royale.jewel.beads.views.SliderView; } /** @@ -94,7 +95,7 @@ package org.apache.royale.jewel.beads.controllers COMPILE::SWF { - var sliderView:ISliderView = value.getBeadByType(ISliderView) as ISliderView; + sliderView = value.getBeadByType(ISliderView) as ISliderView; sliderView.thumb.addEventListener(MouseEvent.MOUSE_DOWN, thumbDownHandler); // add handler to detect click on track @@ -103,13 +104,17 @@ package org.apache.royale.jewel.beads.controllers } COMPILE::JS { - var sliderView:ISliderView = value.getBeadByType(ISliderView) as ISliderView; + sliderView = value.getBeadByType(ISliderView) as ISliderView; goog.events.listen(UIBase(_strand).element, goog.events.EventType.CHANGE, handleChange, false, this); goog.events.listen(UIBase(_strand).element, goog.events.EventType.INPUT, handleInput, false, this); + + changeStyles(); } } - + + public var sliderView:ISliderView; + /** * Manages the change event to update the range model value * @@ -125,6 +130,8 @@ package org.apache.royale.jewel.beads.controllers rangeModel.value = Number((UIBase(_strand).element as HTMLInputElement).value); + changeStyles(); + //host.dispatchEvent(new org.apache.royale.events.Event('change')); --- This is not needed, the event is thrown in the main comp } @@ -144,8 +151,18 @@ package org.apache.royale.jewel.beads.controllers rangeModel.value = Number((UIBase(_strand).element as HTMLInputElement).value); host.dispatchEvent(new org.apache.royale.events.Event('input')); + + changeStyles(); } + COMPILE::JS + private function changeStyles():void + { + var barsize:Number = (rangeModel.value - rangeModel.minimum) / (rangeModel.maximum - rangeModel.minimum); + + SliderView(sliderView).sliderTrackFill.style.flex = "" + barsize; + SliderView(sliderView).sliderTrack.style.flex = "" + ( 1 - barsize ); + } COMPILE::SWF diff --git a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/views/SliderView.as b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/views/SliderView.as index d222b01..d41eccc 100644 --- a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/views/SliderView.as +++ b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/views/SliderView.as @@ -100,6 +100,7 @@ package org.apache.royale.jewel.beads.views * @playerversion Flash 10.2 * @playerversion AIR 2.6 * @productversion Royale 0.9.3 + * @royaleignorecoercion HTMLDivElement */ override public function set strand(value:IStrand):void { @@ -125,17 +126,37 @@ package org.apache.royale.jewel.beads.views { var htmlSliderElement:HTMLInputElement = host.element as HTMLInputElement; htmlSliderElement.value = String(rangeModel.value); + + var sliderTrackContainer:HTMLDivElement = document.createElement('div') as HTMLDivElement; + sliderTrackContainer.className="slider-track-container"; + + sliderTrackFill = document.createElement('div') as HTMLDivElement; + sliderTrackFill.className="slider-track-fill"; + + sliderTrack = document.createElement('div') as HTMLDivElement; + sliderTrack.className="slider-track"; + + sliderTrackContainer.appendChild(sliderTrackFill); + sliderTrackContainer.appendChild(sliderTrack); + + host.positioner.appendChild(sliderTrackContainer); } // listen for changes to the model and adjust the UI accordingly. - IEventDispatcher(rangeModel).addEventListener("valueChange", modelChangeHandler); + IEventDispatcher(rangeModel).addEventListener("stepSizeChange", modelChangeHandler); IEventDispatcher(rangeModel).addEventListener("minimumChange", modelChangeHandler); IEventDispatcher(rangeModel).addEventListener("maximumChange", modelChangeHandler); - IEventDispatcher(rangeModel).addEventListener("stepSizeChange", modelChangeHandler); - IEventDispatcher(rangeModel).addEventListener("snapIntervalChange", modelChangeHandler); + IEventDispatcher(rangeModel).addEventListener("valueChange", modelChangeHandler); + //IEventDispatcher(rangeModel).addEventListener("snapIntervalChange", modelChangeHandler); modelChangeHandler(null); } + + COMPILE::JS + public var sliderTrackFill:HTMLDivElement; + + COMPILE::JS + public var sliderTrack:HTMLDivElement; /** * @private @@ -150,10 +171,10 @@ package org.apache.royale.jewel.beads.views COMPILE::JS { var inputElement:HTMLInputElement = (UIBase(_strand).element as HTMLInputElement); - inputElement.value = rangeModel.value.toString(); + inputElement.step = String(rangeModel.stepSize); inputElement.min = String(rangeModel.minimum); inputElement.max = String(rangeModel.maximum); - inputElement.step = String(rangeModel.stepSize); + inputElement.value = rangeModel.value.toString(); } //(_strand as IEventDispatcher).dispatchEvent(new Event("layoutNeeded")); diff --git a/frameworks/projects/Jewel/src/main/sass/components/_slider.sass b/frameworks/projects/Jewel/src/main/sass/components/_slider.sass index cd89aa4..122bbbb 100644 --- a/frameworks/projects/Jewel/src/main/sass/components/_slider.sass +++ b/frameworks/projects/Jewel/src/main/sass/components/_slider.sass @@ -18,9 +18,9 @@ //////////////////////////////////////////////////////////////////////////////// .jewel.slider - width: 100px - height: 30px - position: relative + //width: 100px + //height: 30px + //position: relative j|Slider IBeadModel: ClassReference("org.apache.royale.jewel.beads.models.SliderRangeModel") @@ -28,12 +28,12 @@ j|Slider //IBeadLayout: ClassReference("org.apache.royale.html.beads.layouts.HorizontalSliderLayout") IBeadController: ClassReference("org.apache.royale.jewel.beads.controllers.SliderMouseController") -.SliderTrack - position: absolute +//.SliderTrack +// position: absolute -.SliderThumb - position: absolute - border-radius: 15px +//.SliderThumb +// position: absolute +// border-radius: 15px @media -royale-swf j|Slider diff --git a/frameworks/themes/JewelTheme/src/main/resources/defaults.css b/frameworks/themes/JewelTheme/src/main/resources/defaults.css index a9849b5..ff93b93 100644 --- a/frameworks/themes/JewelTheme/src/main/resources/defaults.css +++ b/frameworks/themes/JewelTheme/src/main/resources/defaults.css @@ -56,7 +56,7 @@ div { padding: 20px; } -::-moz-focus-inner { +::-moz-focus-inner, ::-moz-focus-outer { border: 0; } @@ -230,7 +230,7 @@ j|Alert { border-radius: 3px; } .jewel.checkbox input:checked, .jewel.checkbox input:checked:active { - background: url("data:image/svg+xml;utf8,<svg viewBox='0 0 16 13' version='1.1' xmlns='http://www.w3.org/2000/svg'><g transform='translate(-763, -290)'><g transform='translate(760, 285)'><polygon fill='%233CADF1' points='3 13 9 18 19 7 16 5 9 13 6 10'></polygon></g></g></svg>"), #d9d9d9; + background: url("data:image/svg+xml;utf8,<svg viewBox='0 0 16 13' version='1.1' xmlns='http://www.w3.org/2000/svg'><g transform='translate(-763, -290)'><g transform='translate(760, 285)'><polygon fill='%233CADF1' points='3 13 9 18 19 7 16 5 9 13 6 10'></polygon></g></g></svg>"), #f8f8f8; background-repeat: no-repeat; background-size: 90%; background-position: center; @@ -304,7 +304,7 @@ j|Alert { border-radius: 50%; } .jewel.radiobutton input:checked, .jewel.radiobutton input:checked:active { - background: url("data:image/svg+xml;utf8,<svg viewBox='0 0 12 12' version='1.1' xmlns='http://www.w3.org/2000/svg'><g transform='translate(-616, -350)'><g transform='translate(611, 345)'><circle fill='%233CADF1' cx='11' cy='11' r='6'></circle></g></g></svg>"), #d9d9d9; + background: url("data:image/svg+xml;utf8,<svg viewBox='0 0 12 12' version='1.1' xmlns='http://www.w3.org/2000/svg'><g transform='translate(-616, -350)'><g transform='translate(611, 345)'><circle fill='%233CADF1' cx='11' cy='11' r='6'></circle></g></g></svg>"), #f8f8f8; background-repeat: no-repeat; background-size: 60%; background-position: center; @@ -348,38 +348,103 @@ j|Alert { line-height: 22px; } +.jewel.slider { + position: relative; + height: 18px; + display: flex !important; + flex-direction: row; + background: none; +} .jewel.slider input { + outline: 0; + cursor: pointer; -webkit-appearance: none; - width: 100%; - height: 15px; - border-radius: 5px; - background: #d3d3d3; - outline: none; - opacity: 0.7; - -webkit-transition: 0.2s; - transition: opacity 0.2s; + -moz-appearance: none; + -o-appearance: none; + appearance: none; + margin: 0 20px; + padding: 0; + width: calc(100% - 40px); + height: 2px; + background: transparent; + user-select: none; + color: #3CADF1; + align-self: center; + z-index: 1; +} +.jewel.slider input::-webkit-slider-runnable-track { + background: transparent; +} +.jewel.slider input::-moz-range-track { + background: transparent; + border: none; +} +.jewel.slider input::-webkit-slider-thumb, .jewel.slider input::-moz-range-thumb { + -webkit-appearance: none; + -moz-appearance: none; + -o-appearance: none; + appearance: none; + width: 12px; + height: 12px; + border-radius: 50%; + background: #3CADF1; + border: none; +} +.jewel.slider input:focus:not(:active)::-webkit-slider-thumb, .jewel.slider input:focus:not(:active)::-moz-range-thumb { + box-shadow: 0 0 0 10px rgba(60, 173, 241, 0.26); } -.jewel.slider input:hover { - opacity: 1; +.jewel.slider input:active::-webkit-slider-thumb, .jewel.slider input:active::-moz-range-thumb { + background-image: none; + transform: scale(1.5); } .jewel.slider input:focus { outline: none; } -.jewel.slider input::-webkit-slider-thumb { - -webkit-appearance: none; - appearance: none; - width: 15px; - height: 15px; - border-radius: 50%; - background: #3CADF1; - cursor: pointer; +.jewel.slider input[disabled] { + cursor: unset; } -.jewel.slider input::-moz-range-thumb { - width: 15px; - height: 15px; - border-radius: 50%; +.jewel.slider input[disabled]::-webkit-slider-thumb, .jewel.slider input[disabled]::-moz-range-thumb { + background: #d9d9d9; +} +.jewel.slider input[disabled]:active::-webkit-slider-thumb, .jewel.slider input[disabled]:active::-moz-range-thumb { + transform: scale(1); +} +.jewel.slider input[disabled] + .slider-track-container > .slider-track-fill { + background: #d9d9d9; +} +.jewel.slider input[disabled] + .slider-track-container > .slider-track { + background: #d9d9d9; +} + +.slider-track-container { + position: absolute; + display: flex; + overflow: hidden; + transform: translate(0, -1px); + margin: 0 26px; + padding: 0; + top: 50%; + left: 0; + width: calc(100% - 52px); + height: 2px; + background: transparent; + border: 0; +} + +.slider-track-fill { + position: relative; + flex: 0; + padding: 0; background: #3CADF1; - cursor: pointer; + border: 0; +} + +.slider-track { + position: relative; + flex: 0; + padding: 0; + background: #d9d9d9; + border: 0; } .jewel.textbutton { diff --git a/frameworks/themes/JewelTheme/src/main/sass/components-primary/_slider.sass b/frameworks/themes/JewelTheme/src/main/sass/components-primary/_slider.sass index 115df2c..de0c99b 100644 --- a/frameworks/themes/JewelTheme/src/main/sass/components-primary/_slider.sass +++ b/frameworks/themes/JewelTheme/src/main/sass/components-primary/_slider.sass @@ -17,37 +17,119 @@ // //////////////////////////////////////////////////////////////////////////////// +// Jewel Slider + +// Slider variables +$slider-margin: 0 20px +$slider-padding: 0 +$slider-min-width: calc(100% - 40px) +$slider-min-height: 2px +$slider-container-height: 18px +$slider-thumb-size: 12px +$slider-border-radius: 50% + .jewel.slider + position: relative + height: $slider-container-height + + display: flex !important + flex-direction: row + + background: none input - -webkit-appearance: none - width: 100% - height: 15px - border-radius: 5px - background: #d3d3d3 - outline: none - opacity: 0.7 - -webkit-transition: .2s - transition: opacity .2s - - &:hover - opacity: 1 + outline: 0 + cursor: pointer + +appear(none) + margin: $slider-margin + padding: $slider-padding + width: $slider-min-width + height: $slider-min-height + background: transparent + user-select: none + color: $primary-color + align-self: center + z-index: 1 - &:focus - outline: none + // TRACK + &::-webkit-slider-runnable-track + background: transparent + + &::-moz-range-track + background: transparent + border: none - &::-webkit-slider-thumb - -webkit-appearance: none - appearance: none - width: 15px - height: 15px - border-radius: 50% + // THUMB + &::-webkit-slider-thumb, &::-moz-range-thumb + +appear(none) + width: $slider-thumb-size + height: $slider-thumb-size + border-radius: $slider-border-radius background: $primary-color - cursor: pointer + border: none + + &:focus:not(:active)::-webkit-slider-thumb, &:focus:not(:active)::-moz-range-thumb + box-shadow: 0 0 0 10px rgba($primary-color, 0.26) - &::-moz-range-thumb - width: 15px - height: 15px - border-radius: 50% - background: $primary-color - cursor: pointer + &:active::-webkit-slider-thumb, &:active::-moz-range-thumb + background-image: none + transform: scale(1.5) + + //&:hover + // transform: scale(1.25) + + &:focus + outline: none + + &[disabled] + cursor: unset + + &::-webkit-slider-thumb, &::-moz-range-thumb + background: $disabled-border-color + + &:active::-webkit-slider-thumb, &:active::-moz-range-thumb + transform: scale(1.0) + + + .slider-track-container > .slider-track-fill + background: $disabled-border-color + + + .slider-track-container > .slider-track + background: $disabled-border-color + + +.slider-track-container + position: absolute + display: flex + + overflow: hidden + transform: translate(0, -1px) + + margin: 0 26px + padding: 0 + + top: $slider-border-radius + left: 0 + + width: calc(100% - 52px) + height: $slider-min-height + + background: transparent + border: 0 + +.slider-track-fill + position: relative + flex: 0 + + padding: 0 + + background: $primary-color + border: 0 + +.slider-track + position: relative + flex: 0 + + padding: 0 + + background: $default-color + border: 0 \ No newline at end of file -- To stop receiving notification emails like this one, please contact carlosrov...@apache.org.