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 <[email protected]>
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
[email protected].
