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 2018/03/27 08:32:31 UTC
[royale-asjs] 36/49: - 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
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 <ca...@apache.org>
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
carlosrovira@apache.org.