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/07/19 16:56:41 UTC
[royale-asjs] branch develop updated: IconTextInput and examples
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 bcd0e24 IconTextInput and examples
bcd0e24 is described below
commit bcd0e24f2686fee198b4ba398707b0136296e515
Author: Carlos Rovira <ca...@apache.org>
AuthorDate: Thu Jul 19 18:56:36 2018 +0200
IconTextInput and examples
---
.../src/main/royale/TextInputPlayGround.mxml | 58 ++++++++++-
.../projects/Jewel/src/main/resources/defaults.css | 44 +++++----
.../Jewel/src/main/resources/jewel-manifest.xml | 1 +
.../org/apache/royale/jewel/IconTextInput.as | 108 +++++++++++++++++++++
.../royale/org/apache/royale/jewel/TextArea.as | 3 +-
.../royale/org/apache/royale/jewel/TextInput.as | 3 +-
.../royale/jewel/supportClasses/TextInputBase.as | 10 ++
.../Jewel/src/main/sass/components/_textinput.sass | 93 +++++++++++-------
.../JewelTheme/src/main/resources/defaults.css | 23 +++--
.../themes/JewelTheme/src/main/sass/_global.sass | 13 ++-
.../src/main/sass/components-primary/_icons.sass | 4 +-
.../main/sass/components-primary/_textinput.sass | 23 +++--
12 files changed, 299 insertions(+), 84 deletions(-)
diff --git a/examples/royale/JewelExample/src/main/royale/TextInputPlayGround.mxml b/examples/royale/JewelExample/src/main/royale/TextInputPlayGround.mxml
index f6ca313..f87fac6 100644
--- a/examples/royale/JewelExample/src/main/royale/TextInputPlayGround.mxml
+++ b/examples/royale/JewelExample/src/main/royale/TextInputPlayGround.mxml
@@ -22,6 +22,10 @@ limitations under the License.
xmlns:js="library://ns.apache.org/royale/basic"
xmlns:html="library://ns.apache.org/royale/html">
+ <j:beads>
+ <js:ContainerDataBinding/>
+ </j:beads>
+
<j:Grid gap="true">
<j:GridCell desktopNumerator="1" desktopDenominator="3"
tabletNumerator="1" tabletDenominator="1"
@@ -64,6 +68,7 @@ limitations under the License.
</j:TextInput>
</j:Card>
</j:GridCell>
+
<j:GridCell desktopNumerator="1" desktopDenominator="3"
tabletNumerator="1" tabletDenominator="2"
phoneNumerator="1" phoneDenominator="1">
@@ -108,7 +113,7 @@ limitations under the License.
tabletNumerator="1" tabletDenominator="2"
phoneNumerator="1" phoneDenominator="1">
<j:Card width="100%">
- <html:H4 text="Jewell TextArea"/>
+ <html:H4 text="Jewel TextArea"/>
<j:TextArea text="A TextArea with 5 rows" rows="5"/>
@@ -128,4 +133,55 @@ limitations under the License.
</j:GridCell>
</j:Grid>
+ <j:Grid>
+ <j:GridCell desktopNumerator="1" desktopDenominator="3"
+ tabletNumerator="1" tabletDenominator="1"
+ phoneNumerator="1" phoneDenominator="1">
+ <j:Card>
+ <html:H3 text="Jewel IconTextInput"/>
+
+ <j:IconTextInput text="Searching something">
+ <j:icon>
+ <js:FontIcon text="{MaterialIconType.SEARCH}" material="true"/>
+ </j:icon>
+ </j:IconTextInput>
+
+ <j:IconTextInput rightPosition="true">
+ <j:beads>
+ <j:TextPrompt prompt="Search..."/>
+ </j:beads>
+ <j:icon>
+ <js:FontIcon text="{MaterialIconType.SEARCH}" material="true"/>
+ </j:icon>
+ </j:IconTextInput>
+
+ <j:IconTextInput>
+ <j:beads>
+ <j:TextPrompt prompt="Search Disabled..."/>
+ <j:Disabled/>
+ </j:beads>
+ <j:icon>
+ <js:FontIcon text="{MaterialIconType.SEARCH}" material="true"/>
+ </j:icon>
+ </j:IconTextInput>
+
+ <j:IconTextInput rightPosition="true">
+ <j:beads>
+ <j:TextPrompt prompt="Search Disabled..."/>
+ <j:Disabled/>
+ </j:beads>
+ <j:icon>
+ <js:FontIcon text="{MaterialIconType.SEARCH}" material="true"/>
+ </j:icon>
+ </j:IconTextInput>
+
+ <!-- <j:IconTextInput text="Searching something">
+ <j:icon>
+ <js:FontIcon text="{MaterialIconType.SEARCH}" material="true" size="48"/>
+ </j:icon>
+ </j:IconTextInput> -->
+ </j:Card>
+ </j:GridCell>
+ </j:Grid>
+
</j:SectionContent>
diff --git a/frameworks/projects/Jewel/src/main/resources/defaults.css b/frameworks/projects/Jewel/src/main/resources/defaults.css
index 82e9a4b..00060b5 100644
--- a/frameworks/projects/Jewel/src/main/resources/defaults.css
+++ b/frameworks/projects/Jewel/src/main/resources/defaults.css
@@ -338,10 +338,6 @@ j|ControlBar {
IItemRendererClassFactory: ClassReference("org.apache.royale.core.ItemRendererClassFactory");
}
}
-.fonticon {
- /* Rules for using icons as black on a light background. */
- /* Rules for using icons as white on a dark background. */
-}
.fonticon.size-18 {
font-size: 18px;
}
@@ -354,18 +350,6 @@ j|ControlBar {
.fonticon.size-48 {
font-size: 48px;
}
-.fonticon.dark {
- color: rgba(0, 0, 0, 0.54);
-}
-.fonticon.dark.inactive {
- color: rgba(0, 0, 0, 0.26);
-}
-.fonticon.light {
- color: white;
-}
-.fonticon.light.inactive {
- color: rgba(255, 255, 255, 0.3);
-}
.jewel.item, .jewel.navigationlink {
display: flex;
@@ -2741,7 +2725,7 @@ j|Slider {
position: relative;
display: inline-flex;
}
-.jewel.textinput > input {
+.jewel.textinput input {
-webkit-appearance: none;
-moz-appearance: none;
-o-appearance: none;
@@ -2755,9 +2739,29 @@ j|Slider {
text-align: left;
line-height: normal !important;
}
-.jewel.textinput > input[disabled] {
+.jewel.textinput input[disabled] {
cursor: unset;
}
+.jewel.textinput.icon input {
+ padding-left: 2.62em;
+}
+.jewel.textinput.icon i.fonticon {
+ position: absolute;
+ left: 12px;
+ right: auto;
+ top: 7px;
+ cursor: default;
+ pointer-events: none;
+ text-align: center;
+}
+.jewel.textinput.icon.right input {
+ padding-right: 2.62em;
+ padding-left: 1.12em;
+}
+.jewel.textinput.icon.right i.fonticon {
+ left: auto;
+ right: 12px;
+}
j|TextInput {
IBeadModel: ClassReference("org.apache.royale.jewel.beads.models.TextModel");
@@ -2767,7 +2771,7 @@ j|TextInput {
position: relative;
display: inline-flex;
}
-.jewel.textarea > textarea {
+.jewel.textarea textarea {
-webkit-appearance: none;
-moz-appearance: none;
-o-appearance: none;
@@ -2781,7 +2785,7 @@ j|TextInput {
text-align: left;
line-height: normal !important;
}
-.jewel.textarea > textarea[disabled] {
+.jewel.textarea textarea[disabled] {
cursor: unset;
}
diff --git a/frameworks/projects/Jewel/src/main/resources/jewel-manifest.xml b/frameworks/projects/Jewel/src/main/resources/jewel-manifest.xml
index d2852d0..d770110 100644
--- a/frameworks/projects/Jewel/src/main/resources/jewel-manifest.xml
+++ b/frameworks/projects/Jewel/src/main/resources/jewel-manifest.xml
@@ -35,6 +35,7 @@
<component id="ToggleButton" class="org.apache.royale.jewel.ToggleButton"/>
<component id="Label" class="org.apache.royale.jewel.Label"/>
<component id="TextInput" class="org.apache.royale.jewel.TextInput"/>
+ <component id="IconTextInput" class="org.apache.royale.jewel.IconTextInput"/>
<component id="TextArea" class="org.apache.royale.jewel.TextArea"/>
<component id="Slider" class="org.apache.royale.jewel.Slider"/>
<component id="RadioButton" class="org.apache.royale.jewel.RadioButton"/>
diff --git a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/IconTextInput.as b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/IconTextInput.as
new file mode 100644
index 0000000..beea1ec
--- /dev/null
+++ b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/IconTextInput.as
@@ -0,0 +1,108 @@
+//
+// 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
+{
+ import org.apache.royale.core.IIconSupport;
+ import org.apache.royale.core.IIcon;
+ import org.apache.royale.core.IUIBase;
+
+ /**
+ * The IconTextInput class implements is a TextInput that supports
+ * an icon that can be positionend to the left or to the right of text
+ * content
+ *
+ * @toplevel
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.3
+ */
+ public class IconTextInput extends TextInput implements IIconSupport
+ {
+ /**
+ * Constructor.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.3
+ */
+ public function IconTextInput()
+ {
+ super();
+
+ //typeNames = "jewel textinput";
+ }
+
+ private var _icon:IIcon;
+ /**
+ * The icon to use with the button.
+ * Optional
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.3
+ */
+ public function get icon():IIcon
+ {
+ return _icon;
+ }
+ public function set icon(value:IIcon):void
+ {
+ _icon = value;
+
+ toggleClass("icon", (_icon != null));
+
+ COMPILE::JS
+ {
+ // insert the icon before the text
+ if(rightPosition)
+ {
+ div.insertBefore(_icon.positioner, null);
+ } else
+ {
+ div.insertBefore(_icon.positioner, element);
+ }
+ (_icon as IUIBase).addedToParent();
+ }
+ }
+
+ private var _rightPosition:Boolean;
+ /**
+ * icon's position regarding the text content
+ * Can be "left" or "right". defaults to "left"
+ * Optional
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.3
+ */
+ public function get rightPosition():Boolean
+ {
+ return _rightPosition;
+ }
+ public function set rightPosition(value:Boolean):void
+ {
+ _rightPosition = value;
+
+ toggleClass("right", _rightPosition);
+ }
+ }
+}
diff --git a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/TextArea.as b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/TextArea.as
index 9f64aa9..cc6217f 100644
--- a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/TextArea.as
+++ b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/TextArea.as
@@ -18,7 +18,6 @@
package org.apache.royale.jewel
{
import org.apache.royale.jewel.supportClasses.TextInputBase;
- import org.apache.royale.utils.ClassSelectorList;
COMPILE::JS
{
@@ -117,7 +116,7 @@ package org.apache.royale.jewel
COMPILE::JS
override protected function createElement():WrappedHTMLElement
{
- var div:HTMLDivElement = document.createElement('div') as HTMLDivElement;
+ div = document.createElement('div') as HTMLDivElement;
input = addElementToWrapper(this,'textarea') as HTMLInputElement;
input.setAttribute('type', 'text');
diff --git a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/TextInput.as b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/TextInput.as
index fd6dd2a..de51225 100644
--- a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/TextInput.as
+++ b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/TextInput.as
@@ -18,7 +18,6 @@
package org.apache.royale.jewel
{
import org.apache.royale.jewel.supportClasses.TextInputBase;
- import org.apache.royale.utils.ClassSelectorList;
COMPILE::JS
{
@@ -64,7 +63,7 @@ package org.apache.royale.jewel
COMPILE::JS
override protected function createElement():WrappedHTMLElement
{
- var div:HTMLDivElement = document.createElement('div') as HTMLDivElement;
+ div = document.createElement('div') as HTMLDivElement;
input = addElementToWrapper(this,'input') as HTMLInputElement;
input.setAttribute('type', 'text');
diff --git a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/supportClasses/TextInputBase.as b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/supportClasses/TextInputBase.as
index 9951828..46d1686 100644
--- a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/supportClasses/TextInputBase.as
+++ b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/supportClasses/TextInputBase.as
@@ -229,6 +229,16 @@ package org.apache.royale.jewel.supportClasses
_label = value;
}
+ COMPILE::JS
+ /**
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.3
+ * @royalesuppresspublicvarwarning
+ */
+ public var div:HTMLDivElement;
+
private var _isInvalid:Boolean = false;
/**
* A boolean flag to activate "is-invalid" effect selector.
diff --git a/frameworks/projects/Jewel/src/main/sass/components/_textinput.sass b/frameworks/projects/Jewel/src/main/sass/components/_textinput.sass
index 4046656..bc9b096 100644
--- a/frameworks/projects/Jewel/src/main/sass/components/_textinput.sass
+++ b/frameworks/projects/Jewel/src/main/sass/components/_textinput.sass
@@ -21,28 +21,54 @@
// TextInput variables
$textinput-margin: 0 !default
-$textinput-padding: .72em 1.12em !default
+$textinput-padding-vertical: .72em !default
+$textinput-padding-horizontal: 1.12em !default
-.jewel.textinput
- position: relative
- display: inline-flex
+.jewel
+ &.textinput
+ position: relative
+ display: inline-flex
- > input
- +appear(none)
- margin: $textinput-margin
- padding: $textinput-padding
+ input
+ +appear(none)
+ margin: $textinput-margin
+ padding: $textinput-padding-vertical $textinput-padding-horizontal
- max-width: 100%
+ max-width: 100%
- flex: 1 0 auto
- outline: none
+ flex: 1 0 auto
+ outline: none
+
+ text:
+ align: left
+ line-height: normal !important
+
+ &[disabled]
+ cursor: unset
- text:
- align: left
- line-height: normal !important
+ &.icon
+ input
+ padding-left: $textinput-padding-horizontal + 1.5
+
+ i
+ &.fonticon
+ position: absolute
+ left: 12px
+ right: auto
+ top: 7px
+ cursor: default
+ pointer-events: none
+ text-align: center
- &[disabled]
- cursor: unset
+ &.right
+ input
+ padding-right: $textinput-padding-horizontal + 1.5
+ padding-left: $textinput-padding-horizontal
+
+ i
+ &.fonticon
+ left: auto
+ right: 12px
j|TextInput
IBeadModel: ClassReference("org.apache.royale.jewel.beads.models.TextModel")
@@ -56,26 +82,27 @@ j|TextInput
$textarea-margin: 0 !default
$textarea-padding: .72em 1.12em !default
-.jewel.textarea
- position: relative
- display: inline-flex
+.jewel
+ &.textarea
+ position: relative
+ display: inline-flex
- > textarea
- +appear(none)
- margin: $textarea-margin
- padding: $textarea-padding
+ textarea
+ +appear(none)
+ margin: $textarea-margin
+ padding: $textarea-padding
- max-width: 100%
+ max-width: 100%
- flex: 1 0 auto
- outline: none
-
- text:
- align: left
- line-height: normal !important
-
- &[disabled]
- cursor: unset
+ flex: 1 0 auto
+ outline: none
+
+ text:
+ align: left
+ line-height: normal !important
+
+ &[disabled]
+ cursor: unset
j|TextArea
IBeadModel: ClassReference("org.apache.royale.jewel.beads.models.TextModel")
diff --git a/frameworks/themes/JewelTheme/src/main/resources/defaults.css b/frameworks/themes/JewelTheme/src/main/resources/defaults.css
index 7c48dfc..230ecd0 100644
--- a/frameworks/themes/JewelTheme/src/main/resources/defaults.css
+++ b/frameworks/themes/JewelTheme/src/main/resources/defaults.css
@@ -25,23 +25,27 @@ j|Application {
}
h1 {
- font-size: 2em;
+ font-size: 2.5em;
}
h2 {
- font-size: 1.5em;
+ font-size: 2em;
}
h3 {
- font-size: 1.17em;
+ font-size: 1.5em;
}
h4 {
- font-size: 15px;
+ font-size: 1.25em;
+}
+
+h5 {
+ font-size: 1em;
}
span {
- font-size: 14px;
+ font-size: 1em;
}
div {
@@ -332,10 +336,6 @@ j|Card {
text-shadow: unset;
}
-.fonticon {
- /* Rules for using icons as black on a light background. */
- /* Rules for using icons as white on a dark background. */
-}
.fonticon.dark {
color: #676767;
}
@@ -511,7 +511,7 @@ j|Card {
font-weight: 400;
color: #808080;
}
-.jewel.textinput > input {
+.jewel.textinput input {
font-family: "Lato", sans-serif;
}
.jewel.textinput > input {
@@ -536,6 +536,9 @@ j|Card {
.jewel.textinput > input[disabled]::placeholder, .jewel.textinput > input[disabled]:-ms-input-placeholder {
color: silver;
}
+.jewel.textinput > input[disabled] + i {
+ color: silver;
+}
.jewel.textarea {
font-weight: 400;
diff --git a/frameworks/themes/JewelTheme/src/main/sass/_global.sass b/frameworks/themes/JewelTheme/src/main/sass/_global.sass
index 02b0eee..9959a19 100644
--- a/frameworks/themes/JewelTheme/src/main/sass/_global.sass
+++ b/frameworks/themes/JewelTheme/src/main/sass/_global.sass
@@ -29,19 +29,22 @@ j|Application
margin: 0px
h1
- font-size: 2em
+ font-size: 2.5em
h2
- font-size: 1.5em
+ font-size: 2em
h3
- font-size: 1.17em
+ font-size: 1.5em
h4
- font-size: 15px
+ font-size: 1.25em
+
+h5
+ font-size: 1em
span
- font-size: 14px
+ font-size: 1em
div
font-size: 14px
diff --git a/frameworks/themes/JewelTheme/src/main/sass/components-primary/_icons.sass b/frameworks/themes/JewelTheme/src/main/sass/components-primary/_icons.sass
index 95a312e..4a638da 100644
--- a/frameworks/themes/JewelTheme/src/main/sass/components-primary/_icons.sass
+++ b/frameworks/themes/JewelTheme/src/main/sass/components-primary/_icons.sass
@@ -21,14 +21,14 @@
// Icons variables
.fonticon
- /* Rules for using icons as black on a light background. */
+ // icons black on light background
&.dark
color: rgba(darken($font-light-color, 10%), 1)
&.dark
&.inactive
color: rgba($font-light-color, 0.3)
- /* Rules for using icons as white on a dark background. */
+ // icons white on dark background
&.light
color: rgba(lighten($font-dark-color, 20%), 1)
&.light
diff --git a/frameworks/themes/JewelTheme/src/main/sass/components-primary/_textinput.sass b/frameworks/themes/JewelTheme/src/main/sass/components-primary/_textinput.sass
index 30e8e1b..9846f56 100644
--- a/frameworks/themes/JewelTheme/src/main/sass/components-primary/_textinput.sass
+++ b/frameworks/themes/JewelTheme/src/main/sass/components-primary/_textinput.sass
@@ -65,18 +65,23 @@ $textinput-border-radius: $border-radius
&::placeholder, &:-ms-input-placeholder
color: $disabled-font-color
-.jewel.textinput
- font:
- weight: $font-weight-normal
+ + i
+ color: $disabled-font-color
- > input
+.jewel
+ &.textinput
font:
- family: $font-stack
+ weight: $font-weight-normal
+
+ input
+ font:
+ family: $font-stack
+
+ @if $dark
+ +textinput-theme($font-dark-color)
+ @else
+ +textinput-theme($font-light-color)
- @if $dark
- +textinput-theme($font-dark-color)
- @else
- +textinput-theme($font-light-color)
// Jewel TextArea