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 <carlosrov...@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 carlosrov...@apache.org.