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/18 17:32:01 UTC
[royale-asjs] branch develop updated: jewel icon sizes
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 8a1d929 jewel icon sizes
8a1d929 is described below
commit 8a1d929cf5e3e595e65be6d61ee106ebad492ef0
Author: Carlos Rovira <ca...@apache.org>
AuthorDate: Wed Jul 18 19:31:56 2018 +0200
jewel icon sizes
---
.../JewelExample/src/main/royale/MainContent.mxml | 1 +
.../src/main/royale/MiscelaneaPlayGound.mxml | 43 ++++++++++++++++++++++
.../src/main/royale/models/MainNavigationModel.as | 23 ++++++------
.../royale/org/apache/royale/icons/FontIconBase.as | 36 +++++++++++++++++-
.../projects/Jewel/src/main/resources/defaults.css | 16 ++++++++
.../Jewel/src/main/sass/components/_icons.sass | 32 ++++++++++++++++
.../projects/Jewel/src/main/sass/defaults.sass | 1 +
7 files changed, 139 insertions(+), 13 deletions(-)
diff --git a/examples/royale/JewelExample/src/main/royale/MainContent.mxml b/examples/royale/JewelExample/src/main/royale/MainContent.mxml
index 8b777af..8bd7567 100644
--- a/examples/royale/JewelExample/src/main/royale/MainContent.mxml
+++ b/examples/royale/JewelExample/src/main/royale/MainContent.mxml
@@ -113,6 +113,7 @@ limitations under the License.
<local:ButtonPlayGround id="button_panel"/>
<local:DropDownListPlayGround id="dropdownlist_panel"/>
<local:CheckBoxPlayGround id="checkbox_panel"/>
+ <local:MiscelaneaPlayGound id="miscelanea_panel"/>
<local:HeadingsAndText id="text_panel"/>
<local:LabelPlayGround id="label_panel"/>
<local:ListPlayGround id="list_panel"/>
diff --git a/examples/royale/JewelExample/src/main/royale/MiscelaneaPlayGound.mxml b/examples/royale/JewelExample/src/main/royale/MiscelaneaPlayGound.mxml
new file mode 100644
index 0000000..ab9456f
--- /dev/null
+++ b/examples/royale/JewelExample/src/main/royale/MiscelaneaPlayGound.mxml
@@ -0,0 +1,43 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!--
+
+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.
+
+-->
+<j:SectionContent xmlns:fx="http://ns.adobe.com/mxml/2009"
+ xmlns:j="library://ns.apache.org/royale/jewel"
+ xmlns:js="library://ns.apache.org/royale/basic"
+ xmlns:html="library://ns.apache.org/royale/html">
+
+ <j:beads>
+ <js:ContainerDataBinding/>
+ </j:beads>
+
+ <j:Card width="350">
+ <html:H3 text="Jewel Icons Sizes"/>
+
+ <js:FontIcon text="{MaterialIconType.FACE}" material="true" size="18"/>
+ <j:Label text="18px"/>
+ <js:FontIcon text="{MaterialIconType.FACE}" material="true" size="24"/>
+ <j:Label text="24px (default)"/>
+ <js:FontIcon text="{MaterialIconType.FACE}" material="true" size="36"/>
+ <j:Label text="36px"/>
+ <js:FontIcon text="{MaterialIconType.FACE}" material="true" size="48"/>
+ <j:Label text="48px"/>
+ </j:Card>
+
+
+</j:SectionContent>
diff --git a/examples/royale/JewelExample/src/main/royale/models/MainNavigationModel.as b/examples/royale/JewelExample/src/main/royale/models/MainNavigationModel.as
index 450022b..45dd3e0 100644
--- a/examples/royale/JewelExample/src/main/royale/models/MainNavigationModel.as
+++ b/examples/royale/JewelExample/src/main/royale/models/MainNavigationModel.as
@@ -24,17 +24,18 @@ package models
public class MainNavigationModel
{
- private var _controlsDrawerNavigation:ArrayList = new ArrayList([
- new NavigationLinkVO("Alert", "alert_panel", "web_asset"),
- new NavigationLinkVO("Button", "button_panel", "crop_7_5"),
- new NavigationLinkVO("DropDownList", "dropdownlist_panel", "credit_card"),
- new NavigationLinkVO("CheckBox", "checkbox_panel", "check_box"),
- new NavigationLinkVO("Label", "label_panel", "label"),
- new NavigationLinkVO("List", "list_panel", "list_alt"),
- new NavigationLinkVO("RadioButton", "radiobutton_panel", "radio_button_checked"),
- new NavigationLinkVO("Slider", "slider_panel", "storage"),
- new NavigationLinkVO("Text", "text_panel", "subject"),
- new NavigationLinkVO("TextInput", "textinput_panel", "text_fields")
+ private var _controlsDrawerNavigation:ArrayList = new ArrayList([
+ new NavigationLinkVO("Alert", "alert_panel", MaterialIconType.WEB_ASSET),
+ new NavigationLinkVO("Button", "button_panel", MaterialIconType.CROP_7_5),
+ new NavigationLinkVO("DropDownList", "dropdownlist_panel", MaterialIconType.CREDIT_CARD),
+ new NavigationLinkVO("CheckBox", "checkbox_panel", MaterialIconType.CHECK_BOX),
+ new NavigationLinkVO("Icon", "miscelanea_panel", MaterialIconType.FACE),
+ new NavigationLinkVO("Label", "label_panel", MaterialIconType.LABEL),
+ new NavigationLinkVO("List", "list_panel", MaterialIconType.LIST_ALT),
+ new NavigationLinkVO("RadioButton", "radiobutton_panel", MaterialIconType.RADIO_BUTTON_CHECKED),
+ new NavigationLinkVO("Slider", "slider_panel", MaterialIconType.STORAGE),
+ new NavigationLinkVO("Text", "text_panel", MaterialIconType.SUBJECT),
+ new NavigationLinkVO("TextInput", "textinput_panel", MaterialIconType.TEXT_FIELDS)
// new NavigationLinkVO("Menu", "menus_panel"),
// new NavigationLinkVO("Loading", "loading_panel"),
diff --git a/frameworks/projects/Icons/src/main/royale/org/apache/royale/icons/FontIconBase.as b/frameworks/projects/Icons/src/main/royale/org/apache/royale/icons/FontIconBase.as
index 008a9d3..4440f35 100644
--- a/frameworks/projects/Icons/src/main/royale/org/apache/royale/icons/FontIconBase.as
+++ b/frameworks/projects/Icons/src/main/royale/org/apache/royale/icons/FontIconBase.as
@@ -18,7 +18,7 @@
////////////////////////////////////////////////////////////////////////////////
package org.apache.royale.icons
{
- import org.apache.royale.core.UIBase;
+ import org.apache.royale.core.StyledUIBase;
import org.apache.royale.core.IIcon;
import org.apache.royale.utils.StringUtil;
@@ -37,7 +37,7 @@ package org.apache.royale.icons
* @playerversion AIR 2.6
* @productversion Royale 0.9.3
*/
- public class FontIconBase extends UIBase implements IIcon
+ public class FontIconBase extends StyledUIBase implements IIcon
{
/**
* constructor.
@@ -69,6 +69,9 @@ package org.apache.royale.icons
textNode = document.createTextNode(iconText) as Text;
i.appendChild(textNode);
+
+ positioner = element;
+
return i;
}
@@ -119,5 +122,34 @@ package org.apache.royale.icons
}
}
+ private var _size:Number = 24;
+ /**
+ * Activate "size-XX" size class selector. Although the icons in the
+ * font can be scaled to any size, recommended sizes are 18, 24, 36 or 48px.
+ *
+ * The default being 24px.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.8
+ */
+ public function get size():Number
+ {
+ return _size;
+ }
+ public function set size(value:Number):void
+ {
+ if (_size != value)
+ {
+ COMPILE::JS
+ {
+ removeClass("size-" + _size);
+ _size = value;
+ addClass("size-" + _size);
+ }
+ }
+ }
+
}
}
diff --git a/frameworks/projects/Jewel/src/main/resources/defaults.css b/frameworks/projects/Jewel/src/main/resources/defaults.css
index 08bdc84..d8db7d2 100644
--- a/frameworks/projects/Jewel/src/main/resources/defaults.css
+++ b/frameworks/projects/Jewel/src/main/resources/defaults.css
@@ -338,6 +338,22 @@ 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;
+}
+.fonticon.size-24 {
+ font-size: 24px;
+}
+.fonticon.size-36 {
+ font-size: 36px;
+}
+.fonticon.size-48 {
+ font-size: 48px;
+}
.jewel.item, .jewel.navigationlink {
display: flex;
cursor: pointer;
diff --git a/frameworks/projects/Jewel/src/main/sass/components/_icons.sass b/frameworks/projects/Jewel/src/main/sass/components/_icons.sass
new file mode 100644
index 0000000..67e6072
--- /dev/null
+++ b/frameworks/projects/Jewel/src/main/sass/components/_icons.sass
@@ -0,0 +1,32 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+// 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.
+//
+////////////////////////////////////////////////////////////////////////////////
+
+// Jewel Icons
+
+// Icons variables
+.fonticon
+ &.size-18
+ font-size: 18px
+ &.size-24
+ font-size: 24px
+ &.size-36
+ font-size: 36px
+ &.size-48
+ font-size: 48px
+
diff --git a/frameworks/projects/Jewel/src/main/sass/defaults.sass b/frameworks/projects/Jewel/src/main/sass/defaults.sass
index cc93ae3..5736237 100644
--- a/frameworks/projects/Jewel/src/main/sass/defaults.sass
+++ b/frameworks/projects/Jewel/src/main/sass/defaults.sass
@@ -31,6 +31,7 @@
@import "components/drawer"
@import "components/divider"
@import "components/dropdownlist"
+@import "components/icons"
@import "components/itemRenderer"
@import "components/label"
@import "components/layout"