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/04/14 15:17:28 UTC
[royale-asjs] branch develop updated: item renderer working
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 2064dfb item renderer working
2064dfb is described below
commit 2064dfbb39a3b2cd4bd2c499a78bccaf072d3b48
Author: Carlos Rovira <ca...@apache.org>
AuthorDate: Sat Apr 14 17:17:23 2018 +0200
item renderer working
---
.../src/main/royale/ListPlayGround.mxml | 10 +-
.../src/main/royale/models/ListsModel.as | 2 -
.../projects/Jewel/src/main/resources/defaults.css | 6 +-
.../Jewel/src/main/resources/jewel-manifest.xml | 2 +
.../projects/Jewel/src/main/royale/JewelClasses.as | 1 +
.../controllers/ItemRendererMouseController.as | 221 +++++++++++++++++++++
.../royale/jewel/itemRenderers/ListItemRenderer.as | 195 ++++++++++++++++++
.../src/main/sass/components/_itemRenderer.sass} | 6 +-
.../Jewel/src/main/sass/components/_list.sass | 2 +-
.../projects/Jewel/src/main/sass/defaults.sass | 1 +
.../JewelTheme/src/main/resources/defaults.css | 99 +++++----
.../_itemRenderer.sass} | 4 +-
.../src/main/sass/components-emphasized/_list.sass | 3 -
.../_itemRenderer.sass} | 20 +-
.../src/main/sass/components-primary/_list.sass | 21 +-
.../_itemRenderer.sass} | 4 +-
.../themes/JewelTheme/src/main/sass/defaults.sass | 3 +
17 files changed, 539 insertions(+), 61 deletions(-)
diff --git a/examples/royale/JewelExample/src/main/royale/ListPlayGround.mxml b/examples/royale/JewelExample/src/main/royale/ListPlayGround.mxml
index 93536fa..821fa3e 100644
--- a/examples/royale/JewelExample/src/main/royale/ListPlayGround.mxml
+++ b/examples/royale/JewelExample/src/main/royale/ListPlayGround.mxml
@@ -24,6 +24,14 @@ limitations under the License.
xmlns:models="models.*"
className="container" width="350">
+ <fx:Script>
+ <![CDATA[
+ private function onChange(event:Event):void {
+ trace("change");
+ }
+ ]]>
+ </fx:Script>
+
<mdl:model>
<models:ListsModel/>
</mdl:model>
@@ -34,7 +42,7 @@ limitations under the License.
<html:H3 text="Jewel List"/>
- <j:List id="list" x="20" y="40" width="200" height="300">
+ <j:List id="list" width="200" height="300" change="onChange(event)">
<js:beads>
<js:ConstantBinding
sourceID="model"
diff --git a/examples/royale/JewelExample/src/main/royale/models/ListsModel.as b/examples/royale/JewelExample/src/main/royale/models/ListsModel.as
index 3299359..7f93d19 100644
--- a/examples/royale/JewelExample/src/main/royale/models/ListsModel.as
+++ b/examples/royale/JewelExample/src/main/royale/models/ListsModel.as
@@ -18,8 +18,6 @@
////////////////////////////////////////////////////////////////////////////////
package models
{
- import vos.ActorVO;
-
public class ListsModel
{
/**
diff --git a/frameworks/projects/Jewel/src/main/resources/defaults.css b/frameworks/projects/Jewel/src/main/resources/defaults.css
index 1d9ab78..c622be1 100644
--- a/frameworks/projects/Jewel/src/main/resources/defaults.css
+++ b/frameworks/projects/Jewel/src/main/resources/defaults.css
@@ -122,6 +122,10 @@ j|ControlBar {
IBorderBead: ClassReference("org.apache.royale.html.beads.SingleLineBorderBead");
}
}
+j|ListItemRenderer {
+ IBeadController: ClassReference("org.apache.royale.jewel.beads.controllers.ItemRendererMouseController");
+}
+
.jewel.label {
white-space: nowrap;
}
@@ -137,7 +141,7 @@ j|List {
IBeadLayout: ClassReference("org.apache.royale.html.beads.layouts.VerticalLayout");
IDataProviderItemRendererMapper: ClassReference("org.apache.royale.html.beads.DataItemRendererFactoryForArrayData");
IItemRendererClassFactory: ClassReference("org.apache.royale.core.ItemRendererClassFactory");
- IItemRenderer: ClassReference("org.apache.royale.html.supportClasses.StringItemRenderer");
+ IItemRenderer: ClassReference("org.apache.royale.jewel.itemRenderers.ListItemRenderer");
IViewport: ClassReference("org.apache.royale.html.supportClasses.ScrollingViewport");
IViewportModel: ClassReference("org.apache.royale.html.beads.models.ViewportModel");
}
diff --git a/frameworks/projects/Jewel/src/main/resources/jewel-manifest.xml b/frameworks/projects/Jewel/src/main/resources/jewel-manifest.xml
index fd0475e..2ab9c16 100644
--- a/frameworks/projects/Jewel/src/main/resources/jewel-manifest.xml
+++ b/frameworks/projects/Jewel/src/main/resources/jewel-manifest.xml
@@ -42,6 +42,8 @@
<component id="VerticalLayoutWithPaddingAndGap" class="org.apache.royale.jewel.beads.layouts.VerticalLayoutWithPaddingAndGap"/>
<component id="HorizontalLayoutSpaceBetween" class="org.apache.royale.jewel.beads.layouts.HorizontalLayoutSpaceBetween"/>
+ <component id="ListItemRenderer" class="org.apache.royale.jewel.itemRenderers.ListItemRenderer"/>
+
<!-- <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 996f82a..0cf5a45 100644
--- a/frameworks/projects/Jewel/src/main/royale/JewelClasses.as
+++ b/frameworks/projects/Jewel/src/main/royale/JewelClasses.as
@@ -30,6 +30,7 @@ package
import org.apache.royale.jewel.beads.models.SliderRangeModel; SliderRangeModel;
import org.apache.royale.jewel.beads.controllers.SliderMouseController; SliderMouseController;
import org.apache.royale.jewel.beads.controllers.AlertController; AlertController;
+ import org.apache.royale.jewel.beads.controllers.ItemRendererMouseController; ItemRendererMouseController;
import org.apache.royale.jewel.beads.views.SliderView; SliderView;
import org.apache.royale.jewel.beads.views.AlertView; AlertView;
diff --git a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/controllers/ItemRendererMouseController.as b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/controllers/ItemRendererMouseController.as
new file mode 100644
index 0000000..ca4634f
--- /dev/null
+++ b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/controllers/ItemRendererMouseController.as
@@ -0,0 +1,221 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+// 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.core.IBeadController;
+ import org.apache.royale.core.ISelectableItemRenderer;
+ import org.apache.royale.core.IStrand;
+ import org.apache.royale.events.ItemClickedEvent;
+
+ COMPILE::SWF {
+ import org.apache.royale.events.Event;
+ import org.apache.royale.events.MouseEvent;
+ }
+
+ COMPILE::JS {
+ import org.apache.royale.core.UIBase;
+ import org.apache.royale.core.WrappedHTMLElement;
+ import org.apache.royale.events.BrowserEvent;
+ import goog.events.Event;
+ import goog.events.EventType;
+ import goog.events;
+ }
+
+ /**
+ * The ItemRendererMouseController class can mouse events in itemRenderers. This
+ * includes roll-overs, mouse down, and mouse up. These platform-specific events are then
+ * re-dispatched as Royale events.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.3
+ * @royaleignoreimport goog.events.Event
+ */
+ public class ItemRendererMouseController implements IBeadController
+ {
+ /**
+ * constructor.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.3
+ */
+ public function ItemRendererMouseController()
+ {
+ }
+
+ private var renderer:ISelectableItemRenderer;
+ private var _strand:IStrand;
+
+ /**
+ * @copy org.apache.royale.core.IBead#strand
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.3
+ * @royaleignorecoercion org.apache.royale.core.ISelectableItemRenderer
+ * @royaleignorecoercion org.apache.royale.core.UIBase
+ */
+ public function set strand(value:IStrand):void
+ {
+ _strand = value;
+ renderer = value as ISelectableItemRenderer;
+
+ COMPILE::SWF {
+ renderer.addEventListener(MouseEvent.ROLL_OVER, rollOverHandler);
+ renderer.addEventListener(MouseEvent.ROLL_OUT, rollOutHandler);
+ renderer.addEventListener(MouseEvent.MOUSE_DOWN, mouseDownHandler);
+ renderer.addEventListener(MouseEvent.MOUSE_UP, mouseUpHandler);
+ }
+
+ COMPILE::JS {
+ var element:WrappedHTMLElement = (_strand as UIBase).element;
+
+ goog.events.listen(element, goog.events.EventType.MOUSEOVER, this.handleMouseOver);
+ goog.events.listen(element, goog.events.EventType.MOUSEOUT, this.handleMouseOut);
+ goog.events.listen(element, goog.events.EventType.MOUSEDOWN, this.handleMouseDown);
+ goog.events.listen(element, goog.events.EventType.MOUSEUP, this.handleMouseUp);
+ }
+ }
+
+ /**
+ * @private
+ */
+ COMPILE::SWF
+ protected function rollOverHandler(event:MouseEvent):void
+ {
+ var target:ISelectableItemRenderer = event.currentTarget as ISelectableItemRenderer;
+ if (target)
+ {
+ target.dispatchEvent(new Event("itemRollOver",true));
+ }
+ }
+
+ /**
+ * @royaleemitcoercion org.apache.royale.core.ISelectableItemRenderer
+ */
+ COMPILE::JS
+ protected function handleMouseOver(event:BrowserEvent):void
+ {
+ var target:ISelectableItemRenderer = event.currentTarget as ISelectableItemRenderer;
+ if (target) {
+ target.dispatchEvent(new Event("itemRollOver",true));
+ }
+ }
+
+ /**
+ * @private
+ */
+ COMPILE::SWF
+ protected function rollOutHandler(event:MouseEvent):void
+ {
+ var target:ISelectableItemRenderer = event.currentTarget as ISelectableItemRenderer;
+ if (target)
+ {
+ target.dispatchEvent(new Event("itemRollOut",true));
+ }
+ }
+
+ /**
+ * @royaleemitcoercion org.apache.royale.core.ISelectableItemRenderer
+ */
+ COMPILE::JS
+ protected function handleMouseOut(event:BrowserEvent):void
+ {
+ var target:ISelectableItemRenderer = event.currentTarget as ISelectableItemRenderer;
+ if (target)
+ {
+ target.dispatchEvent(new Event("itemRollOut",true));
+ }
+ }
+
+ /**
+ * @private
+ */
+ COMPILE::SWF
+ protected function mouseDownHandler(event:MouseEvent):void
+ {
+ var target:ISelectableItemRenderer = event.currentTarget as ISelectableItemRenderer;
+ if (target)
+ {
+ target.down = true;
+ target.addEventListener(MouseEvent.MOUSE_UP, mouseUpHandler);
+ }
+ }
+
+ /**
+ * @private
+ * @royaleemitcoercion org.apache.royale.core.ISelectableItemRenderer
+ */
+ COMPILE::JS
+ protected function handleMouseDown(event:BrowserEvent):void
+ {
+ var target:ISelectableItemRenderer = event.currentTarget as ISelectableItemRenderer;
+ if (target)
+ {
+ target.down = true;
+ target.hovered = false;
+ }
+ }
+
+ /**
+ * @private
+ */
+ COMPILE::SWF
+ protected function mouseUpHandler(event:MouseEvent):void
+ {
+ event.stopImmediatePropagation();
+ var target:ISelectableItemRenderer = event.currentTarget as ISelectableItemRenderer;
+ if (target)
+ {
+ var newEvent:ItemClickedEvent = new ItemClickedEvent("itemClicked");
+ newEvent.data = target.data;
+ newEvent.multipleSelection = event.shiftKey;
+ newEvent.index = target.index;
+
+ target.removeEventListener(MouseEvent.MOUSE_UP, mouseUpHandler);
+ target.dispatchEvent(newEvent);
+ }
+ }
+
+ /**
+ * @private
+ * @royaleemitcoercion org.apache.royale.core.ISelectableItemRenderer
+ */
+ COMPILE::JS
+ protected function handleMouseUp(event:BrowserEvent):void
+ {
+ event.stopImmediatePropagation();
+ var target:ISelectableItemRenderer = event.currentTarget as ISelectableItemRenderer;
+ if (target)
+ {
+ var newEvent:ItemClickedEvent = new ItemClickedEvent("itemClicked");
+ newEvent.data = target.data;
+ newEvent.multipleSelection = event.shiftKey;
+ newEvent.index = target.index;
+
+ target.dispatchEvent(newEvent);
+ }
+ }
+
+ }
+}
diff --git a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/itemRenderers/ListItemRenderer.as b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/itemRenderers/ListItemRenderer.as
new file mode 100644
index 0000000..ae2eabe
--- /dev/null
+++ b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/itemRenderers/ListItemRenderer.as
@@ -0,0 +1,195 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+// 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.itemRenderers
+{
+ COMPILE::JS
+ {
+ import org.apache.royale.core.WrappedHTMLElement;
+ import org.apache.royale.html.util.addElementToWrapper;
+ import org.apache.royale.utils.cssclasslist.toggleStyle;
+ }
+
+ import org.apache.royale.html.supportClasses.MXMLItemRenderer;
+
+ /**
+ * The ListItemRenderer defines the basic Item Renderer for a Jewel List Component.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.3
+ */
+ public class ListItemRenderer extends MXMLItemRenderer
+ {
+ /**
+ * constructor.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.3
+ */
+ public function ListItemRenderer()
+ {
+ super();
+
+ typeNames = "jewel item";
+ }
+
+ private var _text:String = "";
+
+ /**
+ * The text of the renderer
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.3
+ */
+ public function get text():String
+ {
+ return _text;
+ }
+
+ public function set text(value:String):void
+ {
+ _text = value;
+ }
+
+ COMPILE::JS
+ private var textNode:Text;
+
+ /**
+ * Sets the data value and uses the String version of the data for display.
+ *
+ * @param Object data The object being displayed by the itemRenderer instance.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.3
+ */
+ override public function set data(value:Object):void
+ {
+ super.data = value;
+
+ var text:String;
+ if (labelField || dataField) {
+ text = String(value[labelField]);
+ } else {
+ text = String(value);
+ }
+
+ COMPILE::JS
+ {
+ if(textNode != null)
+ {
+ textNode.nodeValue = text;
+ }
+ }
+ }
+
+ /**
+ * @royaleignorecoercion org.apache.royale.core.WrappedHTMLElement
+ * @royaleignorecoercion Text
+ */
+ COMPILE::JS
+ override protected function createElement():WrappedHTMLElement
+ {
+ addElementToWrapper(this,'li');
+
+ if(MXMLDescriptor == null)
+ {
+ textNode = document.createTextNode('') as Text;
+ element.appendChild(textNode);
+ }
+ return element;
+ }
+
+ /**
+ * @private
+ */
+ override public function updateRenderer():void
+ {
+ // if (down)
+ // useColor = downColor;
+ // else if (hovered)
+ // useColor = highlightColor;
+ // else
+ //if (selected)
+ // useColor = selectedColor;
+ //else
+ // useColor = backgroundColor;
+
+ COMPILE::JS
+ {
+ //element.className = "jewel item selected";
+ toggleStyle(element, "selected", selected);
+ }
+ }
+
+ private var _twoLine:Boolean;
+ /**
+ * Activate "twoline" class selector, for use in list item.
+ * Optional Two Line List Variant
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.3
+ */
+ public function get twoLine():Boolean
+ {
+ return _twoLine;
+ }
+ public function set twoLine(value:Boolean):void
+ {
+ _twoLine = value;
+
+ COMPILE::JS
+ {
+ element.classList.toggle("twoline", _twoLine);
+ }
+ }
+
+ private var _threeLine:Boolean;
+ /**
+ * Activate "threeline" class selector, for use in list item.
+ * Optional Three Line List Variant
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.3
+ */
+ public function get threeLine():Boolean
+ {
+ return _threeLine;
+ }
+ public function set threeLine(value:Boolean):void
+ {
+ _threeLine = value;
+
+ COMPILE::JS
+ {
+ element.classList.toggle("threeline", _threeLine);
+ }
+ }
+ }
+}
diff --git a/frameworks/themes/JewelTheme/src/main/sass/components-primary/_list.sass b/frameworks/projects/Jewel/src/main/sass/components/_itemRenderer.sass
similarity index 84%
copy from frameworks/themes/JewelTheme/src/main/sass/components-primary/_list.sass
copy to frameworks/projects/Jewel/src/main/sass/components/_itemRenderer.sass
index a028768..9263be3 100644
--- a/frameworks/themes/JewelTheme/src/main/sass/components-primary/_list.sass
+++ b/frameworks/projects/Jewel/src/main/sass/components/_itemRenderer.sass
@@ -17,6 +17,8 @@
//
////////////////////////////////////////////////////////////////////////////////
-// Jewel List
+// Jewel ListItemRenderer
-// List variables
\ No newline at end of file
+// ListItemRenderer variables
+j|ListItemRenderer
+ IBeadController: ClassReference("org.apache.royale.jewel.beads.controllers.ItemRendererMouseController")
\ No newline at end of file
diff --git a/frameworks/projects/Jewel/src/main/sass/components/_list.sass b/frameworks/projects/Jewel/src/main/sass/components/_list.sass
index 3268aff..29426ac 100644
--- a/frameworks/projects/Jewel/src/main/sass/components/_list.sass
+++ b/frameworks/projects/Jewel/src/main/sass/components/_list.sass
@@ -28,7 +28,7 @@ j|List
IBeadLayout: ClassReference("org.apache.royale.html.beads.layouts.VerticalLayout")
IDataProviderItemRendererMapper: ClassReference("org.apache.royale.html.beads.DataItemRendererFactoryForArrayData")
IItemRendererClassFactory: ClassReference("org.apache.royale.core.ItemRendererClassFactory")
- IItemRenderer: ClassReference("org.apache.royale.html.supportClasses.StringItemRenderer")
+ IItemRenderer: ClassReference("org.apache.royale.jewel.itemRenderers.ListItemRenderer")
IViewport: ClassReference("org.apache.royale.html.supportClasses.ScrollingViewport")
IViewportModel: ClassReference("org.apache.royale.html.beads.models.ViewportModel")
diff --git a/frameworks/projects/Jewel/src/main/sass/defaults.sass b/frameworks/projects/Jewel/src/main/sass/defaults.sass
index e9c3b9a..67d553c 100644
--- a/frameworks/projects/Jewel/src/main/sass/defaults.sass
+++ b/frameworks/projects/Jewel/src/main/sass/defaults.sass
@@ -25,6 +25,7 @@
@import "components/button"
@import "components/checkbox"
@import "components/controlbar"
+@import "components/itemRenderer"
@import "components/label"
@import "components/list"
@import "components/radiobutton"
diff --git a/frameworks/themes/JewelTheme/src/main/resources/defaults.css b/frameworks/themes/JewelTheme/src/main/resources/defaults.css
index a630c5f..fb9d647 100644
--- a/frameworks/themes/JewelTheme/src/main/resources/defaults.css
+++ b/frameworks/themes/JewelTheme/src/main/resources/defaults.css
@@ -146,18 +146,18 @@ j|Alert {
padding: 8px;
min-width: 34px;
min-height: 34px;
- border: 1px solid #b3b3b3;
background: linear-gradient(#e6e6e6, #cccccc);
+ border: 1px solid #b3b3b3;
box-shadow: inset 0 1px 0 white;
border-radius: 3px;
}
.jewel.button:hover, .jewel.button:hover:focus {
- border: 1px solid #a6a6a6;
background: linear-gradient(#d9d9d9, silver);
+ border: 1px solid #a6a6a6;
}
.jewel.button:active, .jewel.button:active:focus {
- border: 1px solid #8d8d8d;
background: linear-gradient(silver, #a6a6a6);
+ border: 1px solid #8d8d8d;
box-shadow: inset 0px 1px 3px 0px rgba(50, 50, 50, 0.5);
}
.jewel.button:focus {
@@ -167,8 +167,8 @@ j|Alert {
}
.jewel.button[disabled] {
cursor: unset;
- border: 1px solid #d9d9d9;
background: #f3f3f3;
+ border: 1px solid #d9d9d9;
box-shadow: none;
}
@@ -179,18 +179,18 @@ j|Alert {
padding: 8px;
min-width: 34px;
min-height: 34px;
- border: 1px solid #0f88d1;
background: linear-gradient(#54b7f3, #24a3ef);
+ border: 1px solid #0f88d1;
box-shadow: inset 0 1px 0 #9bd5f8;
border-radius: 3px;
}
.jewel.button.primary:hover, .jewel.button.primary:hover:focus {
- border: 1px solid #0d79ba;
background: linear-gradient(#3CADF1, #1198e9);
+ border: 1px solid #0d79ba;
}
.jewel.button.primary:active, .jewel.button.primary:active:focus {
- border: 1px solid #0a5a8a;
background: linear-gradient(#1198e9, #0d79ba);
+ border: 1px solid #0a5a8a;
box-shadow: inset 0px 1px 3px 0px rgba(50, 50, 50, 0.5);
}
.jewel.button.primary:focus {
@@ -200,8 +200,8 @@ j|Alert {
}
.jewel.button.primary[disabled] {
cursor: unset;
- border: 1px solid #d9d9d9;
background: #f3f3f3;
+ border: 1px solid #d9d9d9;
box-shadow: none;
}
@@ -274,11 +274,33 @@ j|Alert {
line-height: 22px;
}
+.jewel.item {
+ cursor: pointer;
+ padding: 8px;
+ flex-shrink: 0;
+ flex-grow: 1;
+}
+.jewel.item:hover {
+ color: #FFFFFF;
+ background: #24a3ef;
+}
+.jewel.item:active, .jewel.item.selected {
+ color: #FFFFFF;
+ background: #0f88d1;
+}
+
.jewel.label {
font-family: "Lato", sans-serif;
font-size: 14px;
}
+.jewel.list {
+ background: linear-gradient(white, #f3f3f3);
+ border: 1px solid #b3b3b3;
+ box-shadow: inset 0 1px 0 white;
+ border-radius: 3px;
+}
+
.jewel.radiobutton {
display: inline-block;
margin: 0;
@@ -457,8 +479,8 @@ j|Alert {
padding: 10px 16px;
min-width: 74px;
min-height: 34px;
- border: 1px solid #b3b3b3;
background: linear-gradient(#e6e6e6, #cccccc);
+ border: 1px solid #b3b3b3;
box-shadow: inset 0 1px 0 white;
border-radius: 3px;
font-family: "Lato", sans-serif;
@@ -469,12 +491,12 @@ j|Alert {
text-decoration: none;
}
.jewel.textbutton:hover, .jewel.textbutton:hover:focus {
- border: 1px solid #a6a6a6;
background: linear-gradient(#d9d9d9, silver);
+ border: 1px solid #a6a6a6;
}
.jewel.textbutton:active, .jewel.textbutton:active:focus {
- border: 1px solid #8d8d8d;
background: linear-gradient(silver, #a6a6a6);
+ border: 1px solid #8d8d8d;
box-shadow: inset 0px 1px 3px 0px rgba(50, 50, 50, 0.5);
}
.jewel.textbutton:focus {
@@ -484,8 +506,8 @@ j|Alert {
}
.jewel.textbutton[disabled] {
cursor: unset;
- border: 1px solid #d9d9d9;
background: #f3f3f3;
+ border: 1px solid #d9d9d9;
box-shadow: none;
color: silver;
font-weight: normal;
@@ -499,8 +521,8 @@ j|Alert {
padding: 10px 16px;
min-width: 74px;
min-height: 34px;
- border: 1px solid #0f88d1;
background: linear-gradient(#54b7f3, #24a3ef);
+ border: 1px solid #0f88d1;
box-shadow: inset 0 1px 0 #9bd5f8;
border-radius: 3px;
font-family: "Lato", sans-serif;
@@ -512,12 +534,12 @@ j|Alert {
text-shadow: 0 -1px 0 rgba(10, 90, 138, 0.7);
}
.jewel.textbutton.primary:hover, .jewel.textbutton.primary:hover:focus {
- border: 1px solid #0d79ba;
background: linear-gradient(#3CADF1, #1198e9);
+ border: 1px solid #0d79ba;
}
.jewel.textbutton.primary:active, .jewel.textbutton.primary:active:focus {
- border: 1px solid #0a5a8a;
background: linear-gradient(#1198e9, #0d79ba);
+ border: 1px solid #0a5a8a;
box-shadow: inset 0px 1px 3px 0px rgba(50, 50, 50, 0.5);
}
.jewel.textbutton.primary:focus {
@@ -527,8 +549,8 @@ j|Alert {
}
.jewel.textbutton.primary[disabled] {
cursor: unset;
- border: 1px solid #d9d9d9;
background: #f3f3f3;
+ border: 1px solid #d9d9d9;
box-shadow: none;
color: silver;
font-weight: normal;
@@ -586,18 +608,18 @@ j|Alert {
padding: 8px;
min-width: 34px;
min-height: 34px;
- border: 1px solid #be390e;
background: linear-gradient(#f16c42, #ed4812);
+ border: 1px solid #be390e;
box-shadow: inset 0 1px 0 #f6a389;
border-radius: 3px;
}
.jewel.button.secondary:hover, .jewel.button.secondary:hover:focus {
- border: 1px solid #a6320d;
background: linear-gradient(#EF5A2A, #d64010);
+ border: 1px solid #a6320d;
}
.jewel.button.secondary:active, .jewel.button.secondary:active:focus {
- border: 1px solid #772409;
background: linear-gradient(#d64010, #a6320d);
+ border: 1px solid #772409;
box-shadow: inset 0px 1px 3px 0px rgba(50, 50, 50, 0.5);
}
.jewel.button.secondary:focus {
@@ -607,8 +629,8 @@ j|Alert {
}
.jewel.button.secondary[disabled] {
cursor: unset;
- border: 1px solid #d9d9d9;
background: #f3f3f3;
+ border: 1px solid #d9d9d9;
box-shadow: none;
}
@@ -619,8 +641,8 @@ j|Alert {
padding: 10px 16px;
min-width: 74px;
min-height: 34px;
- border: 1px solid #be390e;
background: linear-gradient(#f16c42, #ed4812);
+ border: 1px solid #be390e;
box-shadow: inset 0 1px 0 #f6a389;
border-radius: 3px;
font-family: "Lato", sans-serif;
@@ -632,12 +654,12 @@ j|Alert {
text-shadow: 0 -1px 0 rgba(119, 36, 9, 0.7);
}
.jewel.textbutton.secondary:hover, .jewel.textbutton.secondary:hover:focus {
- border: 1px solid #a6320d;
background: linear-gradient(#EF5A2A, #d64010);
+ border: 1px solid #a6320d;
}
.jewel.textbutton.secondary:active, .jewel.textbutton.secondary:active:focus {
- border: 1px solid #772409;
background: linear-gradient(#d64010, #a6320d);
+ border: 1px solid #772409;
box-shadow: inset 0px 1px 3px 0px rgba(50, 50, 50, 0.5);
}
.jewel.textbutton.secondary:focus {
@@ -647,8 +669,8 @@ j|Alert {
}
.jewel.textbutton.secondary[disabled] {
cursor: unset;
- border: 1px solid #d9d9d9;
background: #f3f3f3;
+ border: 1px solid #d9d9d9;
box-shadow: none;
color: silver;
font-weight: normal;
@@ -662,18 +684,18 @@ j|Alert {
padding: 8px;
min-width: 34px;
min-height: 34px;
- border: 1px solid #638c29;
background: linear-gradient(#98cc50, #7eb435);
+ border: 1px solid #638c29;
box-shadow: inset 0 1px 0 #bbdd8b;
border-radius: 3px;
}
.jewel.button.emphasized:hover, .jewel.button.emphasized:hover:focus {
- border: 1px solid #557923;
background: linear-gradient(#8CC63C, #71a02f);
+ border: 1px solid #557923;
}
.jewel.button.emphasized:active, .jewel.button.emphasized:active:focus {
- border: 1px solid #395118;
background: linear-gradient(#71a02f, #557923);
+ border: 1px solid #395118;
box-shadow: inset 0px 1px 3px 0px rgba(50, 50, 50, 0.5);
}
.jewel.button.emphasized:focus {
@@ -683,16 +705,11 @@ j|Alert {
}
.jewel.button.emphasized[disabled] {
cursor: unset;
- border: 1px solid #d9d9d9;
background: #f3f3f3;
+ border: 1px solid #d9d9d9;
box-shadow: none;
}
-.jewel.list {
- border: 1px solid;
- background: #d9d9d9;
-}
-
.jewel.textbutton {
cursor: pointer;
display: inline-block;
@@ -700,8 +717,8 @@ j|Alert {
padding: 10px 16px;
min-width: 74px;
min-height: 34px;
- border: 1px solid #b3b3b3;
background: linear-gradient(#e6e6e6, #cccccc);
+ border: 1px solid #b3b3b3;
box-shadow: inset 0 1px 0 white;
border-radius: 3px;
font-family: "Lato", sans-serif;
@@ -712,12 +729,12 @@ j|Alert {
text-decoration: none;
}
.jewel.textbutton:hover, .jewel.textbutton:hover:focus {
- border: 1px solid #a6a6a6;
background: linear-gradient(#d9d9d9, silver);
+ border: 1px solid #a6a6a6;
}
.jewel.textbutton:active, .jewel.textbutton:active:focus {
- border: 1px solid #8d8d8d;
background: linear-gradient(silver, #a6a6a6);
+ border: 1px solid #8d8d8d;
box-shadow: inset 0px 1px 3px 0px rgba(50, 50, 50, 0.5);
}
.jewel.textbutton:focus {
@@ -727,8 +744,8 @@ j|Alert {
}
.jewel.textbutton[disabled] {
cursor: unset;
- border: 1px solid #d9d9d9;
background: #f3f3f3;
+ border: 1px solid #d9d9d9;
box-shadow: none;
color: silver;
font-weight: normal;
@@ -742,8 +759,8 @@ j|Alert {
padding: 10px 16px;
min-width: 74px;
min-height: 34px;
- border: 1px solid #638c29;
background: linear-gradient(#98cc50, #7eb435);
+ border: 1px solid #638c29;
box-shadow: inset 0 1px 0 #bbdd8b;
border-radius: 3px;
font-family: "Lato", sans-serif;
@@ -755,12 +772,12 @@ j|Alert {
text-shadow: 0 -1px 0 rgba(57, 81, 24, 0.7);
}
.jewel.textbutton.emphasized:hover, .jewel.textbutton.emphasized:hover:focus {
- border: 1px solid #557923;
background: linear-gradient(#8CC63C, #71a02f);
+ border: 1px solid #557923;
}
.jewel.textbutton.emphasized:active, .jewel.textbutton.emphasized:active:focus {
- border: 1px solid #395118;
background: linear-gradient(#71a02f, #557923);
+ border: 1px solid #395118;
box-shadow: inset 0px 1px 3px 0px rgba(50, 50, 50, 0.5);
}
.jewel.textbutton.emphasized:focus {
@@ -770,8 +787,8 @@ j|Alert {
}
.jewel.textbutton.emphasized[disabled] {
cursor: unset;
- border: 1px solid #d9d9d9;
background: #f3f3f3;
+ border: 1px solid #d9d9d9;
box-shadow: none;
color: silver;
font-weight: normal;
diff --git a/frameworks/themes/JewelTheme/src/main/sass/components-primary/_list.sass b/frameworks/themes/JewelTheme/src/main/sass/components-emphasized/_itemRenderer.sass
similarity index 94%
copy from frameworks/themes/JewelTheme/src/main/sass/components-primary/_list.sass
copy to frameworks/themes/JewelTheme/src/main/sass/components-emphasized/_itemRenderer.sass
index a028768..54cc067 100644
--- a/frameworks/themes/JewelTheme/src/main/sass/components-primary/_list.sass
+++ b/frameworks/themes/JewelTheme/src/main/sass/components-emphasized/_itemRenderer.sass
@@ -17,6 +17,6 @@
//
////////////////////////////////////////////////////////////////////////////////
-// Jewel List
+// Jewel ListItemRenderer
-// List variables
\ No newline at end of file
+// ListItemRenderer variables
\ No newline at end of file
diff --git a/frameworks/themes/JewelTheme/src/main/sass/components-emphasized/_list.sass b/frameworks/themes/JewelTheme/src/main/sass/components-emphasized/_list.sass
index c5ec699..f5cd85c 100644
--- a/frameworks/themes/JewelTheme/src/main/sass/components-emphasized/_list.sass
+++ b/frameworks/themes/JewelTheme/src/main/sass/components-emphasized/_list.sass
@@ -20,6 +20,3 @@
// Jewel List
// List variables
-.jewel.list
- border: 1px solid
- background: $default-color
\ No newline at end of file
diff --git a/frameworks/themes/JewelTheme/src/main/sass/components-emphasized/_list.sass b/frameworks/themes/JewelTheme/src/main/sass/components-primary/_itemRenderer.sass
similarity index 74%
copy from frameworks/themes/JewelTheme/src/main/sass/components-emphasized/_list.sass
copy to frameworks/themes/JewelTheme/src/main/sass/components-primary/_itemRenderer.sass
index c5ec699..f80cb27 100644
--- a/frameworks/themes/JewelTheme/src/main/sass/components-emphasized/_list.sass
+++ b/frameworks/themes/JewelTheme/src/main/sass/components-primary/_itemRenderer.sass
@@ -17,9 +17,19 @@
//
////////////////////////////////////////////////////////////////////////////////
-// Jewel List
+// Jewel ListItemRenderer
-// List variables
-.jewel.list
- border: 1px solid
- background: $default-color
\ No newline at end of file
+// ListItemRenderer variables
+.jewel.item
+ cursor: pointer
+ padding: 8px
+ flex-shrink: 0
+ flex-grow: 1
+
+ &:hover
+ color: $font-theme-color
+ background: darken($primary-color, 5%)
+
+ &:active, &.selected
+ color: $font-theme-color
+ background: darken($primary-color, 15%)
diff --git a/frameworks/themes/JewelTheme/src/main/sass/components-primary/_list.sass b/frameworks/themes/JewelTheme/src/main/sass/components-primary/_list.sass
index a028768..c3ce9cd 100644
--- a/frameworks/themes/JewelTheme/src/main/sass/components-primary/_list.sass
+++ b/frameworks/themes/JewelTheme/src/main/sass/components-primary/_list.sass
@@ -19,4 +19,23 @@
// Jewel List
-// List variables
\ No newline at end of file
+// List variables
+$list-border-radius: 3px
+
+.jewel.list
+ @if $flat
+ background: $default-color
+ border: 1px solid transparent
+ @else
+ background: linear-gradient(lighten($default-color, 15%), lighten($default-color, 10%))
+ border: 1px solid darken($default-color, 15%)
+ box-shadow: inset 0 1px 0 lighten($default-color, 20%)
+ border-radius: $list-border-radius
+
+ // &:focus
+ // @if $flat
+ // background: lighten($default-color, 5%)
+ // border: 0px solid $primary-color
+ // @else
+ // box-shadow: inset 0px 0px 0px 1px rgba(lighten($default-color, 50%), .5), inset 0 1px 0 rgba(lighten($default-color, 55%), .6)
+ // border: 1px solid darken($primary-color, 15%)
\ No newline at end of file
diff --git a/frameworks/themes/JewelTheme/src/main/sass/components-primary/_list.sass b/frameworks/themes/JewelTheme/src/main/sass/components-secondary/_itemRenderer.sass
similarity index 94%
copy from frameworks/themes/JewelTheme/src/main/sass/components-primary/_list.sass
copy to frameworks/themes/JewelTheme/src/main/sass/components-secondary/_itemRenderer.sass
index a028768..54cc067 100644
--- a/frameworks/themes/JewelTheme/src/main/sass/components-primary/_list.sass
+++ b/frameworks/themes/JewelTheme/src/main/sass/components-secondary/_itemRenderer.sass
@@ -17,6 +17,6 @@
//
////////////////////////////////////////////////////////////////////////////////
-// Jewel List
+// Jewel ListItemRenderer
-// List variables
\ No newline at end of file
+// ListItemRenderer variables
\ No newline at end of file
diff --git a/frameworks/themes/JewelTheme/src/main/sass/defaults.sass b/frameworks/themes/JewelTheme/src/main/sass/defaults.sass
index ac2dc0c..01226fb 100644
--- a/frameworks/themes/JewelTheme/src/main/sass/defaults.sass
+++ b/frameworks/themes/JewelTheme/src/main/sass/defaults.sass
@@ -30,6 +30,7 @@
@import "components-primary/button"
@import "components-primary/checkbox"
@import "components-primary/controlbar"
+@import "components-primary/itemRenderer"
@import "components-primary/label"
@import "components-primary/list"
@import "components-primary/radiobutton"
@@ -42,6 +43,7 @@
@import "components-secondary/button"
@import "components-secondary/checkbox"
@import "components-secondary/controlbar"
+@import "components-secondary/itemRenderer"
@import "components-secondary/label"
@import "components-secondary/list"
@import "components-secondary/radiobutton"
@@ -54,6 +56,7 @@
@import "components-emphasized/button"
@import "components-emphasized/checkbox"
@import "components-emphasized/controlbar"
+@import "components-emphasized/itemRenderer"
@import "components-emphasized/label"
@import "components-emphasized/list"
@import "components-emphasized/radiobutton"
--
To stop receiving notification emails like this one, please contact
carlosrovira@apache.org.