This is an automated email from the ASF dual-hosted git repository. carlosrovira pushed a commit to branch feature/jewel-ui-set in repository https://gitbox.apache.org/repos/asf/royale-asjs.git
commit f1283ac45f62e7207f9a9bb6be53a81e5afbd67c Author: Carlos Rovira <[email protected]> AuthorDate: Fri Mar 23 00:13:36 2018 +0100 - Change slider to input range (but still is unfinished , no events), and CSS compilation give problem (reported as issues) - CheckBox and Radio Button still need more progress, but still fins problems in CSS compilation that needs to be solved --- .../src/main/royale/TextInputPlayGround.mxml | 2 +- .../projects/Jewel/src/main/resources/defaults.css | 4 +- .../Jewel/src/main/resources/jewel-manifest.xml | 1 + .../projects/Jewel/src/main/royale/JewelClasses.as | 4 +- .../royale/org/apache/royale/jewel/CheckBox.as | 4 +- .../royale/org/apache/royale/jewel/RadioButton.as | 1 + .../main/royale/org/apache/royale/jewel/Slider.as | 145 +++++++++- .../royale/org/apache/royale/jewel/TextField.as | 23 +- .../org/apache/royale/jewel/beads/SliderView.as | 5 +- .../beads/controllers/SliderMouseController.as | 307 +++++++++++++++++++++ .../jewel/beads/layouts/HorizontalSliderLayout.as | 144 ++++++++++ .../royale/jewel/supportClasses/TextFieldBase.as | 38 ++- .../Jewel/src/main/sass/components/_slider.sass | 4 +- .../JewelTheme/src/main/resources/defaults.css | 95 +++++-- .../src/main/sass/components/_button.sass | 2 + .../src/main/sass/components/_checkbox.sass | 26 +- .../src/main/sass/components/_radiobutton.sass | 24 +- .../src/main/sass/components/_slider.sass | 32 ++- .../src/main/sass/components/_textbutton.sass | 1 + .../src/main/sass/components/_textfield.sass | 54 ++-- 20 files changed, 816 insertions(+), 100 deletions(-) diff --git a/examples/royale/JewelExample/src/main/royale/TextInputPlayGround.mxml b/examples/royale/JewelExample/src/main/royale/TextInputPlayGround.mxml index e5a1021..6880431 100644 --- a/examples/royale/JewelExample/src/main/royale/TextInputPlayGround.mxml +++ b/examples/royale/JewelExample/src/main/royale/TextInputPlayGround.mxml @@ -34,7 +34,7 @@ limitations under the License. <j:HorizontalLayoutWithPaddingAndGap gap="10"/> </js:beads> <j:TextButton text="Check it!" primary="true"/> - <j:TextField text="A TextField"/> + <j:TextField text="A TextField" primary="true"/> </js:Group> <js:Group> diff --git a/frameworks/projects/Jewel/src/main/resources/defaults.css b/frameworks/projects/Jewel/src/main/resources/defaults.css index 627c8e3..ed036f4 100644 --- a/frameworks/projects/Jewel/src/main/resources/defaults.css +++ b/frameworks/projects/Jewel/src/main/resources/defaults.css @@ -53,8 +53,8 @@ Label { Slider { IBeadModel: ClassReference("org.apache.royale.html.beads.models.RangeModel"); IBeadView: ClassReference("org.apache.royale.jewel.beads.SliderView"); - IBeadLayout: ClassReference("org.apache.royale.html.beads.layouts.HorizontalSliderLayout"); - IBeadController: ClassReference("org.apache.royale.html.beads.controllers.HSliderMouseController"); + IBeadLayout: ClassReference("org.apache.royale.jewel.beads.layouts.HorizontalSliderLayout"); + IBeadController: ClassReference("org.apache.royale.jewel.beads.controllers.SliderMouseController"); } .SliderTrack { diff --git a/frameworks/projects/Jewel/src/main/resources/jewel-manifest.xml b/frameworks/projects/Jewel/src/main/resources/jewel-manifest.xml index 7799373..029c767 100644 --- a/frameworks/projects/Jewel/src/main/resources/jewel-manifest.xml +++ b/frameworks/projects/Jewel/src/main/resources/jewel-manifest.xml @@ -37,6 +37,7 @@ <component id="HorizontalLayoutWithPaddingAndGap" class="org.apache.royale.jewel.beads.layouts.HorizontalLayoutWithPaddingAndGap"/> <component id="VerticalLayoutWithPaddingAndGap" class="org.apache.royale.jewel.beads.layouts.VerticalLayoutWithPaddingAndGap"/> + <component id="HorizontalSliderLayout" class="org.apache.royale.jewel.beads.layouts.HorizontalSliderLayout" /> <!-- <component id="JewelLabelViewBead" class="org.apache.royale.jewel.beads.views.JewelLabelViewBead"/> --> </componentPackage> diff --git a/frameworks/projects/Jewel/src/main/royale/JewelClasses.as b/frameworks/projects/Jewel/src/main/royale/JewelClasses.as index 41f586d..3860218 100644 --- a/frameworks/projects/Jewel/src/main/royale/JewelClasses.as +++ b/frameworks/projects/Jewel/src/main/royale/JewelClasses.as @@ -28,7 +28,9 @@ package internal class JewelClasses { import org.apache.royale.jewel.beads.SliderView; SliderView; - + import org.apache.royale.jewel.beads.controllers.SliderMouseController; SliderMouseController; + import org.apache.royale.jewel.beads.layouts.HorizontalSliderLayout; HorizontalSliderLayout; + COMPILE::SWF { import org.apache.royale.html.beads.TextFieldView; TextFieldView; diff --git a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/CheckBox.as b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/CheckBox.as index ee8dbff..3eb4807 100644 --- a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/CheckBox.as +++ b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/CheckBox.as @@ -84,11 +84,11 @@ package org.apache.royale.jewel input = document.createElement('input') as HTMLInputElement; input.type = 'checkbox'; - //input.className = 'input'; + input.className = 'input'; label.appendChild(input); checkbox = document.createElement('span') as HTMLSpanElement; - //checkbox.className = 'label'; + checkbox.className = 'span'; label.appendChild(checkbox); (input as WrappedHTMLElement).royale_wrapper = this; diff --git a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/RadioButton.as b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/RadioButton.as index fd9f037..e77196e 100644 --- a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/RadioButton.as +++ b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/RadioButton.as @@ -102,6 +102,7 @@ package org.apache.royale.jewel labelFor = addElementToWrapper(this,'label') as HTMLLabelElement; labelFor.appendChild(icon.element); labelFor.appendChild(textNode); + icon.element.className = "input"; (textNode as WrappedHTMLElement).royale_wrapper = this; (icon.element as WrappedHTMLElement).royale_wrapper = this; 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 8d52a61..817efe8 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 @@ -18,16 +18,43 @@ //////////////////////////////////////////////////////////////////////////////// package org.apache.royale.jewel { - import org.apache.royale.html.Slider; + import org.apache.royale.core.IRangeModel; + import org.apache.royale.core.UIBase; + import org.apache.royale.events.Event; COMPILE::JS { import org.apache.royale.core.WrappedHTMLElement; import org.apache.royale.html.util.addElementToWrapper; + import org.apache.royale.utils.cssclasslist.addStyles; } + //-------------------------------------- + // Events + //-------------------------------------- + [Event(name="valueChange", type="org.apache.royale.events.Event")] + /** + * Dispatched when Slider ends its change from one position to another. + * + * @langversion 3.0 + * @playerversion Flash 10.2 + * @playerversion AIR 2.6 + * @productversion Royale 0.8 + */ + [Event(name="change", type="org.apache.royale.events.Event")] + + /** + * Dispatched each time user moves the slider thumb from one position to another + * + * @langversion 3.0 + * @playerversion Flash 10.2 + * @playerversion AIR 2.6 + * @productversion Royale 0.8 + */ + [Event(name="input", type="org.apache.royale.events.Event")] + /** * The Slider class is a component that displays a range of values using a * track and a thumb control. The Slider uses the following bead types: @@ -44,7 +71,7 @@ package org.apache.royale.jewel * @playerversion AIR 2.6 * @productversion Royale 0.9.2 */ - public class Slider extends org.apache.royale.html.Slider + public class Slider extends UIBase { /** * constructor. @@ -61,13 +88,125 @@ package org.apache.royale.jewel typeNames = "jewel slider" } + /** + * The current value of the Slider. + * + * @langversion 3.0 + * @playerversion Flash 10.2 + * @playerversion AIR 2.6 + * @productversion Royale 0.8 + */ + public function get value():Number + { + return IRangeModel(model).value; + } + public function set value(newValue:Number):void + { + IRangeModel(model).value = newValue; + } + + /** + * The minimum value of the Slider. + * + * @langversion 3.0 + * @playerversion Flash 10.2 + * @playerversion AIR 2.6 + * @productversion Royale 0.8 + */ + public function get minimum():Number + { + return IRangeModel(model).minimum; + } + public function set minimum(value:Number):void + { + IRangeModel(model).minimum = value; + } + + /** + * The maximum value of the Slider. + * + * @langversion 3.0 + * @playerversion Flash 10.2 + * @playerversion AIR 2.6 + * @productversion Royale 0.8 + */ + public function get maximum():Number + { + return IRangeModel(model).maximum; + } + public function set maximum(value:Number):void + { + IRangeModel(model).maximum = value; + } + + /** + * The amount to move the thumb when the track is selected. This value is + * adjusted to fit the nearest snapInterval. + * + * @langversion 3.0 + * @playerversion Flash 10.2 + * @playerversion AIR 2.6 + * @productversion Royale 0.8 + */ + public function get stepSize():Number + { + return IRangeModel(model).stepSize; + } + + public function set stepSize(value:Number):void + { + IRangeModel(model).stepSize = value; + } + + COMPILE::JS + private var _positioner:WrappedHTMLElement; + + COMPILE::JS + override public function get positioner():WrappedHTMLElement + { + return _positioner; + } + + COMPILE::JS + override public function set positioner(value:WrappedHTMLElement):void + { + _positioner = value; + } + + /** * @royaleignorecoercion org.apache.royale.core.WrappedHTMLElement */ COMPILE::JS override protected function createElement():WrappedHTMLElement { - return addElementToWrapper(this,'div'); + var div:HTMLDivElement = document.createElement('div') as HTMLDivElement; + div.className = typeNames; + + var input:HTMLInputElement = addElementToWrapper(this,'input') as HTMLInputElement; + input.setAttribute('type', 'range'); + input.className = "slider"; + + //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; + _positioner.royale_wrapper = this; + + return element; + } + + /** + * since we have a div surronding the main input, we need to + * route the class assignaments to div + */ + COMPILE::JS + override protected function setClassName(value:String):void + { + addStyles(positioner, value); } } } diff --git a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/TextField.as b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/TextField.as index fa795ef..0a49aeb 100644 --- a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/TextField.as +++ b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/TextField.as @@ -53,27 +53,6 @@ package org.apache.royale.jewel typeNames = "jewel textfield"; } - COMPILE::JS - private var _positioner:WrappedHTMLElement; - - COMPILE::JS - /** - * The HTMLElement used to position the component. - */ - override public function get positioner():WrappedHTMLElement - { - return _positioner; - } - - COMPILE::JS - /** - * @private - */ - override public function set positioner(value:WrappedHTMLElement):void - { - _positioner = value; - } - /** * @royaleignorecoercion org.apache.royale.core.WrappedHTMLElement * @royaleignorecoercion HTMLDivElement @@ -106,7 +85,7 @@ package org.apache.royale.jewel positioner = div as WrappedHTMLElement; //(label as WrappedHTMLElement).royale_wrapper = this; - _positioner.royale_wrapper = this; + positioner.royale_wrapper = this; return element; } diff --git a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/SliderView.as b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/SliderView.as index c62a3fc..f7ceec2 100644 --- a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/SliderView.as +++ b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/SliderView.as @@ -61,6 +61,7 @@ package org.apache.royale.jewel.beads */ public function SliderView() { + super(); } private var rangeModel:IRangeModel; @@ -98,7 +99,7 @@ package org.apache.royale.jewel.beads s.addElement(_thumb); } - COMPILE::JS { + /*COMPILE::JS { _track = new Button(); _track.className = "SliderTrack"; host.addElement(_track); @@ -107,7 +108,7 @@ package org.apache.royale.jewel.beads _thumb.className = "SliderThumb"; _thumb.text = '\u29BF'; host.addElement(_thumb); - } + }*/ rangeModel = _strand.getBeadByType(IBeadModel) as IRangeModel; 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 new file mode 100644 index 0000000..7dfe805 --- /dev/null +++ b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/controllers/SliderMouseController.as @@ -0,0 +1,307 @@ +//////////////////////////////////////////////////////////////////////////////// +// +// Licensed to the Apache Software Foundation (ASF) under one or more +// contributor license agreements. See the NOTICE file distributed with +// this work for additional information regarding copyright ownership. +// The ASF licenses this file to You under the Apache License, Version 2.0 +// (the "License"); you may not use this file except in compliance with +// the License. You may obtain a copy of the License at +// +// http://www.apache.org/licenses/LICENSE-2.0 +// +// Unless required by applicable law or agreed to in writing, software +// distributed under the License is distributed on an "AS IS" BASIS, +// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. +// See the License for the specific language governing permissions and +// limitations under the License. +// +//////////////////////////////////////////////////////////////////////////////// +package org.apache.royale.jewel.beads.controllers +{ + import org.apache.royale.collections.parsers.JSONInputParser; + import org.apache.royale.core.IBead; + import org.apache.royale.core.IBeadController; + import org.apache.royale.core.IRangeModel; + import org.apache.royale.core.IStrand; + import org.apache.royale.core.UIBase; + import org.apache.royale.events.Event; + import org.apache.royale.events.IEventDispatcher; + import org.apache.royale.events.MouseEvent; + import org.apache.royale.events.ValueChangeEvent; + import org.apache.royale.geom.Point; + import org.apache.royale.html.beads.ISliderView; + + COMPILE::JS + { + import goog.events; + import goog.events.EventType; + import org.apache.royale.events.BrowserEvent; + import org.apache.royale.html.Slider; + } + + /** + * The SliderMouseController class bead handles mouse events on the + * org.apache.royale.html.Slider's component parts (thumb and track) and + * dispatches change events on behalf of the Slider (as well as co-ordinating visual + * changes (such as moving the thumb when the track has been tapped or clicked). Use + * this controller for horizontally oriented Sliders. + * + * @langversion 3.0 + * @playerversion Flash 10.2 + * @playerversion AIR 2.6 + * @productversion Royale 0.0 + */ + public class SliderMouseController implements IBead, IBeadController + { + /** + * constructor. + * + * @langversion 3.0 + * @playerversion Flash 10.2 + * @playerversion AIR 2.6 + * @productversion Royale 0.0 + */ + public function SliderMouseController() + { + } + + private var rangeModel:IRangeModel; + + private var _strand:IStrand; + + private var oldValue:Number; + + /** + * @copy org.apache.royale.core.IBead#strand + * + * @langversion 3.0 + * @playerversion Flash 10.2 + * @playerversion AIR 2.6 + * @productversion Royale 0.0 + */ + public function set strand(value:IStrand):void + { + _strand = value; + + rangeModel = UIBase(value).model as IRangeModel; + + COMPILE::SWF + { + var sliderView:ISliderView = value.getBeadByType(ISliderView) as ISliderView; + sliderView.thumb.addEventListener(MouseEvent.MOUSE_DOWN, thumbDownHandler); + + // add handler to detect click on track + sliderView.track.addEventListener(MouseEvent.CLICK, trackClickHandler, false, 99999); + + } + /*COMPILE::JS + { + var sliderView:ISliderView = value.getBeadByType(ISliderView) as ISliderView; + track = sliderView.track as UIBase; + thumb = sliderView.thumb as UIBase; + + goog.events.listen(track.element, goog.events.EventType.CLICK, + handleTrackClick, false, this); + + goog.events.listen(thumb.element, goog.events.EventType.MOUSEDOWN, + handleThumbDown, false, this); + + }*/ + } + + /*COMPILE::JS + private var track:UIBase; + + COMPILE::JS + private var thumb:UIBase; + */ + /** + * @private + */ + COMPILE::SWF + private function thumbDownHandler( event:MouseEvent ) : void + { + UIBase(_strand).topMostEventDispatcher.addEventListener(MouseEvent.MOUSE_MOVE, thumbMoveHandler); + UIBase(_strand).topMostEventDispatcher.addEventListener(MouseEvent.MOUSE_UP, thumbUpHandler); + + var sliderView:ISliderView = _strand.getBeadByType(ISliderView) as ISliderView; + + origin = new Point(event.screenX, event.screenY); + thumb = new Point(sliderView.thumb.x,sliderView.thumb.y); + oldValue = rangeModel.value; + } + + /** + * @private + */ + COMPILE::SWF + private function thumbUpHandler( event:MouseEvent ) : void + { + UIBase(_strand).topMostEventDispatcher.removeEventListener(MouseEvent.MOUSE_MOVE, thumbMoveHandler); + UIBase(_strand).topMostEventDispatcher.removeEventListener(MouseEvent.MOUSE_UP, thumbUpHandler); + + var vce:ValueChangeEvent = ValueChangeEvent.createUpdateEvent(_strand, "value", oldValue, rangeModel.value); + IEventDispatcher(_strand).dispatchEvent(vce); + } + + COMPILE::SWF + private var origin:Point; + COMPILE::SWF + private var thumb:Point; + + /** + * @private + */ + COMPILE::SWF + private function thumbMoveHandler( event:MouseEvent ) : void + { + var sliderView:ISliderView = _strand.getBeadByType(ISliderView) as ISliderView; + + var deltaX:Number = event.screenX - origin.x; + var thumbW:Number = sliderView.thumb.width/2; + var newX:Number = thumb.x + deltaX; + + var p:Number = newX/sliderView.track.width; + var n:Number = p*(rangeModel.maximum - rangeModel.minimum) + rangeModel.minimum; + + var vce:ValueChangeEvent = ValueChangeEvent.createUpdateEvent(_strand, "value", rangeModel.value, n); + rangeModel.value = n; + + IEventDispatcher(_strand).dispatchEvent(vce); + } + + /** + * @private + */ + COMPILE::SWF + private function trackClickHandler( event:MouseEvent ) : void + { + event.stopImmediatePropagation(); + + var sliderView:ISliderView = _strand.getBeadByType(ISliderView) as ISliderView; + + var xloc:Number = event.localX; + var p:Number = xloc/sliderView.track.width; + var n:Number = p*(rangeModel.maximum - rangeModel.minimum) + rangeModel.minimum; + + var vce:ValueChangeEvent = ValueChangeEvent.createUpdateEvent(_strand, "value", rangeModel.value, n); + rangeModel.value = n; + + IEventDispatcher(_strand).dispatchEvent(vce); + } + + /** + * @royaleignorecoercion org.apache.royale.events.BrowserEvent + */ + /*COMPILE::JS + private function handleTrackClick(event:MouseEvent):void + { + var bevent:BrowserEvent = event["wrappedEvent"] as BrowserEvent; + var host:Slider = _strand as Slider; + var xloc:Number = bevent.offsetX; + var useWidth:Number = parseInt(track.element.style.width, 10) * 1.0; + var p:Number = xloc / useWidth; + var n:Number = p*(rangeModel.maximum - rangeModel.minimum) + rangeModel.minimum; + + var vce:ValueChangeEvent = ValueChangeEvent.createUpdateEvent(_strand, "value", rangeModel.value, n); + rangeModel.value = n; + + host.dispatchEvent(vce); + }*/ + + + /** + * @royaleignorecoercion org.apache.royale.events.BrowserEvent + */ + // COMPILE::JS + // private function handleThumbDown(event:MouseEvent):void + // { + // var bevent:BrowserEvent = event["wrappedEvent"] as BrowserEvent; + // var host:Slider = _strand as Slider; + // goog.events.listen(host.element, goog.events.EventType.MOUSEUP, + // handleThumbUp, false, this); + // goog.events.listen(host.element, goog.events.EventType.MOUSEMOVE, + // handleThumbMove, false, this); + // goog.events.listen(host.element, goog.events.EventType.MOUSELEAVE, + // handleThumbLeave, false, this); + + // mouseOrigin = bevent.screenX; //.clientX; + // thumbOrigin = parseInt(thumb.element.style.left, 10); + // oldValue = rangeModel.value; + // } + + // COMPILE::JS + // private var mouseOrigin:Number; + // COMPILE::JS + // private var thumbOrigin:int; + + /** + * @royaleignorecoercion org.apache.royale.events.BrowserEvent + */ + // COMPILE::JS + // private function handleThumbUp(event:MouseEvent):void + // { + // var bevent:BrowserEvent = event["wrappedEvent"] as BrowserEvent; + // var host:Slider = _strand as Slider; + // goog.events.unlisten(host.element, goog.events.EventType.MOUSEUP, + // handleThumbUp, false, this); + // goog.events.unlisten(host.element, goog.events.EventType.MOUSEMOVE, + // handleThumbMove, false, this); + // goog.events.unlisten(host.element, goog.events.EventType.MOUSELEAVE, + // handleThumbLeave, false, this); + + // calcValFromMousePosition(bevent, false); + // var vce:ValueChangeEvent = ValueChangeEvent.createUpdateEvent(_strand, "value", oldValue, rangeModel.value); + + // host.dispatchEvent(vce); + // } + + + /** + * @royaleignorecoercion org.apache.royale.events.BrowserEvent + */ + // COMPILE::JS + // private function handleThumbMove(event:MouseEvent):void + // { + // var bevent:BrowserEvent = event["wrappedEvent"] as BrowserEvent; + // var host:Slider = _strand as Slider; + // var lastValue:Number = rangeModel.value; + // calcValFromMousePosition(bevent, false); + + // var vce:ValueChangeEvent = ValueChangeEvent.createUpdateEvent(_strand, "value", lastValue, rangeModel.value); + + // host.dispatchEvent(vce); + // } + + // COMPILE::JS + // private function handleThumbLeave(event:MouseEvent):void + // { + // var host:Slider = _strand as Slider; + // goog.events.unlisten(host.element, goog.events.EventType.MOUSEUP, + // handleThumbUp, false, this); + // goog.events.unlisten(host.element, goog.events.EventType.MOUSEMOVE, + // handleThumbMove, false, this); + // goog.events.unlisten(host.element, goog.events.EventType.MOUSELEAVE, + // handleThumbLeave, false, this); + // } + + + /** + */ + // COMPILE::JS + // private function calcValFromMousePosition(event:BrowserEvent, useOffset:Boolean):void + // { + // var deltaX:Number = event.screenX - mouseOrigin; + // if (deltaX == 0) return; + + // var thumbW:int = parseInt(thumb.element.style.width, 10) / 2; + // var newPointX:Number = thumbOrigin + deltaX; + + // var useWidth:Number = parseInt(track.element.style.width,10) * 1.0; + // var p:Number = newPointX / useWidth; + // var n:Number = p*(rangeModel.maximum - rangeModel.minimum) + rangeModel.minimum; + + // rangeModel.value = n; + // } + } +} diff --git a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/layouts/HorizontalSliderLayout.as b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/layouts/HorizontalSliderLayout.as new file mode 100644 index 0000000..320a81b --- /dev/null +++ b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/layouts/HorizontalSliderLayout.as @@ -0,0 +1,144 @@ +//////////////////////////////////////////////////////////////////////////////// +// +// Licensed to the Apache Software Foundation (ASF) under one or more +// contributor license agreements. See the NOTICE file distributed with +// this work for additional information regarding copyright ownership. +// The ASF licenses this file to You under the Apache License, Version 2.0 +// (the "License"); you may not use this file except in compliance with +// the License. You may obtain a copy of the License at +// +// http://www.apache.org/licenses/LICENSE-2.0 +// +// Unless required by applicable law or agreed to in writing, software +// distributed under the License is distributed on an "AS IS" BASIS, +// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. +// See the License for the specific language governing permissions and +// limitations under the License. +// +//////////////////////////////////////////////////////////////////////////////// +package org.apache.royale.jewel.beads.layouts +{ + import org.apache.royale.core.IBeadLayout; + import org.apache.royale.core.IRangeModel; + import org.apache.royale.core.IStrand; + import org.apache.royale.core.IUIBase; + import org.apache.royale.core.UIBase; + import org.apache.royale.events.Event; + import org.apache.royale.events.IEventDispatcher; + import org.apache.royale.html.beads.ISliderView; + + /** + * Use the HorizontalSliderLayout with a Slider to orient the Slider + * horizontally. + * + * @langversion 3.0 + * @playerversion Flash 10.2 + * @playerversion AIR 2.6 + * @productversion Royale 0.9 + */ + public class HorizontalSliderLayout implements IBeadLayout + { + /** + * Constructor + * + * @langversion 3.0 + * @playerversion Flash 10.2 + * @playerversion AIR 2.6 + * @productversion Royale 0.9 + */ + public function HorizontalSliderLayout() + { + } + + private var _strand:IStrand; + + /** + * @see org.apache.royale.core.IStrand + * + * @langversion 3.0 + * @playerversion Flash 10.2 + * @playerversion AIR 2.6 + * @productversion Royale 0.9 + */ + public function set strand(value:IStrand):void + { + _strand = value; + + host.addEventListener("layoutNeeded", performLayout); + + host.addEventListener("widthChanged",performLayout); + host.addEventListener("heightChanged",performLayout); + } + + /** + * @private + */ + private function performLayout(event:Event):void + { + layout(); + } + + /** + * @private + */ + public function get host():UIBase + { + return _strand as UIBase; + } + + /** + * Performs the layout (size and positioning) of the elements of the slider. + * + * @langversion 3.0 + * @playerversion Flash 10.2 + * @playerversion AIR 2.6 + * @productversion Royale 0.9 + */ + public function layout():Boolean + { + var viewBead:ISliderView = host.view as ISliderView; + if (viewBead == null) { + return false; + } + + var useWidth:Number = host.width; + if (isNaN(useWidth)) { + useWidth = 100; + } + var useHeight:Number = host.height; + if (isNaN(useHeight)) { + useHeight = 25; + } + var square:Number = Math.min(useWidth, useHeight); + var trackHeight:Number = useHeight / 3; + + // determine the thumb position from the model information + var model:IRangeModel = host.model as IRangeModel; + var value:Number = model.value; + if (value < model.minimum) value = model.minimum; + if (value > model.maximum) value = model.maximum; + var p:Number = (value-model.minimum)/(model.maximum-model.minimum); + var xloc:Number = p * (useWidth - square); + + var thumb:IUIBase = viewBead.thumb as IUIBase; + if(thumb != null) { + thumb.width = square; + thumb.height = square; + + thumb.x = xloc; + thumb.y = 0; + } + + var track:IUIBase = viewBead.track as IUIBase; + if(track != null) + { + track.x = square/2; + track.y = trackHeight; // 1/3 of the totalHeight + track.width = useWidth - square; + track.height = trackHeight; + } + + return true; + } + } +} \ No newline at end of file diff --git a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/supportClasses/TextFieldBase.as b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/supportClasses/TextFieldBase.as index 06a8d63..5977727 100644 --- a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/supportClasses/TextFieldBase.as +++ b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/supportClasses/TextFieldBase.as @@ -25,7 +25,9 @@ package org.apache.royale.jewel.supportClasses COMPILE::JS { import goog.events; - import org.apache.royale.core.WrappedHTMLElement; + import org.apache.royale.core.WrappedHTMLElement; + import org.apache.royale.utils.cssclasslist.toggleStyle; + import org.apache.royale.utils.cssclasslist.addStyles; } /** @@ -122,9 +124,40 @@ package org.apache.royale.jewel.supportClasses */ override protected function setClassName(value:String):void { - positioner.className = value; + //positioner.className = value; + addStyles(positioner, value); } + private var _primary:Boolean = false; + + /** + * A boolean flag to activate "primary" effect selector. + * Applies primary color display effect. + * Colors are defined in royale-jewel.css + * + * @langversion 3.0 + * @playerversion Flash 10.2 + * @playerversion AIR 2.6 + * @productversion Royale 0.9.2 + */ + public function get primary():Boolean + { + return _primary; + } + + public function set primary(value:Boolean):void + { + if (_primary != value) + { + _primary = value; + + COMPILE::JS + { + toggleStyle(positioner, "primary", _primary); + } + } + } + private var _isInvalid:Boolean = false; /** * A boolean flag to activate "is-invalid" effect selector. @@ -146,6 +179,7 @@ package org.apache.royale.jewel.supportClasses COMPILE::JS { + toggleStyle(positioner, "is-invalid", _isInvalid); //positioner.classList.toggle("is-invalid", _isInvalid); //typeNames = positioner.className; } diff --git a/frameworks/projects/Jewel/src/main/sass/components/_slider.sass b/frameworks/projects/Jewel/src/main/sass/components/_slider.sass index b61e110..7633733 100644 --- a/frameworks/projects/Jewel/src/main/sass/components/_slider.sass +++ b/frameworks/projects/Jewel/src/main/sass/components/_slider.sass @@ -25,8 +25,8 @@ Slider IBeadModel: ClassReference("org.apache.royale.html.beads.models.RangeModel") IBeadView: ClassReference("org.apache.royale.jewel.beads.SliderView") - IBeadLayout: ClassReference("org.apache.royale.html.beads.layouts.HorizontalSliderLayout") - IBeadController: ClassReference("org.apache.royale.html.beads.controllers.HSliderMouseController") + IBeadLayout: ClassReference("org.apache.royale.jewel.beads.layouts.HorizontalSliderLayout") + IBeadController: ClassReference("org.apache.royale.jewel.beads.controllers.SliderMouseController") .SliderTrack position: absolute diff --git a/frameworks/themes/JewelTheme/src/main/resources/defaults.css b/frameworks/themes/JewelTheme/src/main/resources/defaults.css index c4286da..bf22702 100644 --- a/frameworks/themes/JewelTheme/src/main/resources/defaults.css +++ b/frameworks/themes/JewelTheme/src/main/resources/defaults.css @@ -173,16 +173,13 @@ span { cursor: unset; } -.jewel.checkbox > input[type="checkbox"] { - width: 50px; - height: 50px; +.jewel.checkbox .span { + padding-left: 5px; } -.jewel.checkbox > label { - cursor: auto; - position: relative; - display: block; - padding-left: 20px; - outline: none; +.jewel.checkbox .input { + width: 15px; + height: 15px; + border: 1px solid; } .jewel.label { @@ -190,16 +187,44 @@ span { font-size: 14px; } -.jewel.radiobutton > input[type="radio"] { - width: 50px; - height: 50px; +.jewel.radiobutton { + padding-left: 5px; } -.jewel.radiobutton > label { - cursor: auto; - position: relative; - display: block; - padding-left: 20px; +.jewel.radiobutton .input { + width: 15px; + height: 15px; + border: 1px solid; +} + +.jewel.slider .slider { + -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; +} +.jewel.slider .slider:hover { + opacity: 1; +} +.jewel.slider .slider::-webkit-slider-thumb { + -webkit-appearance: none; + appearance: none; + width: 25px; + height: 25px; + border-radius: 50%; + background: #4CAF50; + cursor: pointer; +} +.jewel.slider .slider::-moz-range-thumb { + width: 25px; + height: 25px; + border-radius: 50%; + background: #4CAF50; + cursor: pointer; } .jewel.textbutton { @@ -367,24 +392,46 @@ span { .jewel.textfield { position: relative; - font-size: 14px; - font-weight: normal; display: inline-flex; } .jewel.textfield .input { - margin: 0em; + margin: 0; + padding: 0.67em 1em; max-width: 100%; flex: 1 0 auto; outline: none; -webkit-tap-highlight-color: rgba(255, 255, 255, 0); text-align: left; - line-height: 1.2em; + line-height: 1.4em; font-family: "Lato", sans-serif; font-size: 14px; + font-weight: normal; + background: linear-gradient(white, #f3f3f3); + border: 1px solid #b3b3b3; + color: #808080; + border-radius: 3px; + box-shadow: none; +} + +.jewel.textfield.primary { + position: relative; + display: inline-flex; +} +.jewel.textfield.primary .input { + margin: 0; padding: 0.67em 1em; - background: #ffffff; - border: 1px solid rgba(34, 36, 38, 0.15); - color: rgba(0, 0, 0, 0.87); + max-width: 100%; + flex: 1 0 auto; + outline: none; + -webkit-tap-highlight-color: rgba(255, 255, 255, 0); + text-align: left; + line-height: 1.4em; + font-family: "Lato", sans-serif; + font-size: 14px; + font-weight: normal; + background: linear-gradient(white, #f3f3f3); + border: 1px solid #0f88d1; + color: #FFFFFF; border-radius: 3px; box-shadow: none; } diff --git a/frameworks/themes/JewelTheme/src/main/sass/components/_button.sass b/frameworks/themes/JewelTheme/src/main/sass/components/_button.sass index 6b8551f..6afddb2 100644 --- a/frameworks/themes/JewelTheme/src/main/sass/components/_button.sass +++ b/frameworks/themes/JewelTheme/src/main/sass/components/_button.sass @@ -17,6 +17,8 @@ // //////////////////////////////////////////////////////////////////////////////// +// Jewel Button + // Button variables $button-margin: 0 !default $button-padding: 10px 16px !default diff --git a/frameworks/themes/JewelTheme/src/main/sass/components/_checkbox.sass b/frameworks/themes/JewelTheme/src/main/sass/components/_checkbox.sass index da62df3..485b972 100644 --- a/frameworks/themes/JewelTheme/src/main/sass/components/_checkbox.sass +++ b/frameworks/themes/JewelTheme/src/main/sass/components/_checkbox.sass @@ -18,13 +18,21 @@ //////////////////////////////////////////////////////////////////////////////// .jewel.checkbox - > input[type="checkbox"] - width: 50px - height: 50px - > label - cursor: auto - position: relative - display: block - padding-left: 20px - outline: none + + .span + padding-left: 5px + .input + width: 15px + height: 15px + border: 1px solid + + // > input[type="checkbox"] + // width: 50px + // height: 50px + // > label + // cursor: auto + // position: relative + // display: block + // padding-left: 20px + // outline: none //font-size: @labelFontSize \ No newline at end of file diff --git a/frameworks/themes/JewelTheme/src/main/sass/components/_radiobutton.sass b/frameworks/themes/JewelTheme/src/main/sass/components/_radiobutton.sass index eb1cdf6..0bba0f1 100644 --- a/frameworks/themes/JewelTheme/src/main/sass/components/_radiobutton.sass +++ b/frameworks/themes/JewelTheme/src/main/sass/components/_radiobutton.sass @@ -18,13 +18,19 @@ //////////////////////////////////////////////////////////////////////////////// .jewel.radiobutton - > input[type="radio"] - width: 50px - height: 50px - > label - cursor: auto - position: relative - display: block - padding-left: 20px - outline: none + padding-left: 5px + .input + width: 15px + height: 15px + border: 1px solid + + // > input[type="radio"] + // width: 50px + // height: 50px + // > label + // cursor: auto + // position: relative + // display: block + // padding-left: 20px + // outline: none //font-size: @labelFontSize \ No newline at end of file diff --git a/frameworks/themes/JewelTheme/src/main/sass/components/_slider.sass b/frameworks/themes/JewelTheme/src/main/sass/components/_slider.sass index 1d72a04..6e8d491 100644 --- a/frameworks/themes/JewelTheme/src/main/sass/components/_slider.sass +++ b/frameworks/themes/JewelTheme/src/main/sass/components/_slider.sass @@ -17,4 +17,34 @@ // //////////////////////////////////////////////////////////////////////////////// -.jewel.slider \ No newline at end of file +.jewel.slider + + .slider + -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 + + &::-webkit-slider-thumb + -webkit-appearance: none + appearance: none + width: 25px + height: 25px + border-radius: 50% + background: #4CAF50 + cursor: pointer + + &::-moz-range-thumb + width: 25px + height: 25px + border-radius: 50% + background: #4CAF50 + cursor: pointer diff --git a/frameworks/themes/JewelTheme/src/main/sass/components/_textbutton.sass b/frameworks/themes/JewelTheme/src/main/sass/components/_textbutton.sass index 03b66da..d10fb6e 100644 --- a/frameworks/themes/JewelTheme/src/main/sass/components/_textbutton.sass +++ b/frameworks/themes/JewelTheme/src/main/sass/components/_textbutton.sass @@ -17,6 +17,7 @@ // //////////////////////////////////////////////////////////////////////////////// +// Jewel TextButton // Note: Use Button variables =textbutton-theme($button-color, $text-color) diff --git a/frameworks/themes/JewelTheme/src/main/sass/components/_textfield.sass b/frameworks/themes/JewelTheme/src/main/sass/components/_textfield.sass index 0a606f8..81feb03 100644 --- a/frameworks/themes/JewelTheme/src/main/sass/components/_textfield.sass +++ b/frameworks/themes/JewelTheme/src/main/sass/components/_textfield.sass @@ -18,40 +18,54 @@ //////////////////////////////////////////////////////////////////////////////// // Jewel Textfield -.jewel.textfield + +// Textfield variables +$textfield-margin: 0 !default +$textfield-padding: .67em 1em !default +//10px 16px +$textfield-min-height: 34px !default +$textfield-min-width: 74px !default + +$textfield-border-radius: 3px + +=textfield-theme($textfield-color, $text-color) position: relative - font: - //family: $font-stack - size: $font-size - weight: normal display: inline-flex .input - margin: 0em + margin: $textfield-margin + padding: $textfield-padding + max-width: 100% + flex: 1 0 auto outline: none -webkit-tap-highlight-color: rgba(255, 255, 255, 0) + text-align: left - line-height: 1.2em + line-height: 1.4em font: family: $font-stack size: $font-size - padding: .67em 1em - - background: #ffffff - border: 1px solid rgba(34, 36, 38, .15) - color: rgba(0, 0, 0, .87) - border-radius: 3px + weight: normal + + background: linear-gradient(lighten($default-color, 15%), lighten($default-color, 10%)) + border: 1px solid darken($textfield-color, 15%) + color: $text-color + border-radius: $textfield-border-radius //transition: transition box-shadow: none -// padding: 5px; -// border: solid 1px #666666; -// border-radius: 6px; -// color: #333333; -//:hover -// padding: 5px; -// background-color: #DFDFDF; + //:hover + // padding: 5px; + // background-color: #DFDFDF; + + +.jewel.textfield + +textfield-theme($default-color, $default-font-color) + +.jewel.textfield.primary + +textfield-theme($primary-color, $font-theme-color) + -- To stop receiving notification emails like this one, please contact [email protected].
