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 2020/01/27 21:59:08 UTC
[royale-asjs] branch develop updated: todomvc-jewel-example: fix
some functionality and add a bit some styles.
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 223763c todomvc-jewel-example: fix some functionality and add a bit some styles.
223763c is described below
commit 223763c834d494d5aa27d74f8a7604b705e4dca1
Author: Carlos Rovira <ca...@apache.org>
AuthorDate: Mon Jan 27 22:58:58 2020 +0100
todomvc-jewel-example: fix some functionality and add a bit some styles.
---
.../todomvc/src/main/resources/todomvc-styles.css | 181 +++++++++++++++++++++
.../jewel/todomvc/renderers/TodoItemRenderer.mxml | 20 +--
.../royale/jewel/todomvc/views/MainContent.mxml | 69 ++++----
.../TourDeJewel/src/main/royale/MainContent.mxml | 2 +-
4 files changed, 227 insertions(+), 45 deletions(-)
diff --git a/examples/jewel/todomvc/src/main/resources/todomvc-styles.css b/examples/jewel/todomvc/src/main/resources/todomvc-styles.css
index 77f1cc6..3e126a4 100644
--- a/examples/jewel/todomvc/src/main/resources/todomvc-styles.css
+++ b/examples/jewel/todomvc/src/main/resources/todomvc-styles.css
@@ -25,4 +25,185 @@
.todoItemRenderer
{
IItemRenderer: ClassReference("jewel.todomvc.renderers.TodoItemRenderer");
+}
+
+.jewel.application {
+ font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
+ font-size: 14px;
+ line-height: 1.4em;
+ background: #f5f5f5;
+ color: #4d4d4d;
+ min-width: 230px;
+ max-width: 550px;
+ margin: 0 auto;
+ -webkit-font-smoothing: antialiased;
+ -moz-osx-font-smoothing: grayscale;
+ font-weight: 300;
+}
+
+.new-todo,
+.edit {
+ position: relative;
+ margin: 0;
+ width: 100%;
+ font-size: 24px;
+ font-family: inherit;
+ font-weight: inherit;
+ line-height: 1.4em;
+ border: 0;
+ color: inherit;
+ padding: 6px;
+ border: 1px solid #999;
+ box-shadow: inset 0 -1px 5px 0 rgba(0, 0, 0, 0.2);
+ box-sizing: border-box;
+ -webkit-font-smoothing: antialiased;
+ -moz-osx-font-smoothing: grayscale;
+}
+
+.new-todo {
+ padding: 16px 16px 16px 60px;
+ border: none;
+ background: rgba(0, 0, 0, 0.003);
+ box-shadow: inset 0 -2px 1px rgba(0,0,0,0.03);
+}
+
+.todo-list {
+ margin: 0;
+ padding: 0;
+ list-style: none;
+}
+
+.todo-list li {
+ position: relative;
+ font-size: 24px;
+ border-bottom: 1px solid #ededed;
+}
+
+.todo-list li:last-child {
+ border-bottom: none;
+}
+
+.todo-list li.editing {
+ border-bottom: none;
+ padding: 0;
+}
+
+.todo-list li.editing .edit {
+ display: block;
+ width: 506px;
+ padding: 12px 16px;
+ margin: 0 0 0 43px;
+}
+
+.todo-list li.editing .view {
+ display: none;
+}
+
+.todo-list li .toggle {
+ text-align: center;
+ width: 40px;
+ /* auto, since non-WebKit browsers doesn't support input styling */
+ height: auto;
+ position: absolute;
+ top: 0;
+ bottom: 0;
+ margin: auto 0;
+ border: none; /* Mobile Safari */
+ -webkit-appearance: none;
+ appearance: none;
+}
+
+.todo-list li .toggle {
+ opacity: 0;
+}
+
+.todo-list li .toggle + label {
+ /*
+ Firefox requires `#` to be escaped - https://bugzilla.mozilla.org/show_bug.cgi?id=922433
+ IE and Edge requires *everything* to be escaped to render, so we do that instead of just the `#` - https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/7157459/
+ */
+ background-image: url('data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2240%22%20height%3D%2240%22%20viewBox%3D%22-10%20-18%20100%20135%22%3E%3Ccircle%20cx%3D%2250%22%20cy%3D%2250%22%20r%3D%2250%22%20fill%3D%22none%22%20stroke%3D%22%23ededed%22%20stroke-width%3D%223%22/%3E%3C/svg%3E');
+ background-repeat: no-repeat;
+ background-position: center left;
+}
+
+.todo-list li .toggle:checked + label {
+ background-image: url('data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2240%22%20height%3D%2240%22%20viewBox%3D%22-10%20-18%20100%20135%22%3E%3Ccircle%20cx%3D%2250%22%20cy%3D%2250%22%20r%3D%2250%22%20fill%3D%22none%22%20stroke%3D%22%23bddad5%22%20stroke-width%3D%223%22/%3E%3Cpath%20fill%3D%22%235dc2af%22%20d%3D%22M72%2025L42%2071%2027%2056l-4%204%2020%2020%2034-52z%22/%3E%3C/svg%3E');
+}
+
+.todo-list li label {
+ word-break: break-all;
+ padding: 15px 15px 15px 60px;
+ display: block;
+ line-height: 1.2;
+ transition: color 0.4s;
+}
+
+.todo-list li.completed label {
+ color: #d9d9d9;
+ text-decoration: line-through;
+}
+
+.todo-list li .destroy {
+ display: none;
+ position: absolute;
+ top: 0;
+ right: 10px;
+ bottom: 0;
+ width: 40px;
+ height: 40px;
+ margin: auto 0;
+ font-size: 30px;
+ color: #cc9a9a;
+ margin-bottom: 11px;
+ transition: color 0.2s ease-out;
+}
+
+.todo-list li .destroy:hover {
+ color: #af5b5e;
+}
+
+.todo-list li .destroy:after {
+ content: '×';
+}
+
+.todo-list li:hover .destroy {
+ display: block;
+}
+
+.todo-list li .edit {
+ display: none;
+}
+
+.todo-list li.editing:last-child {
+ margin-bottom: -1px;
+}
+
+.royale
+{
+ background: #fff;
+ margin: 130px 0 40px 0;
+ position: relative;
+ box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2), 0 25px 50px 0 rgba(0, 0, 0, 0.1);
+}
+
+.todoapp {
+ background: #fff;
+ margin: 130px 0 40px 0;
+ position: relative;
+ box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2),
+ 0 25px 50px 0 rgba(0, 0, 0, 0.1);
+}
+
+.todoapp h1 {
+ position: absolute;
+ top: -155px;
+ width: 100%;
+ font-size: 100px;
+ font-weight: 100;
+ text-align: center;
+ color: rgba(175, 47, 47, 0.15);
+ -webkit-text-rendering: optimizeLegibility;
+ -moz-text-rendering: optimizeLegibility;
+ text-rendering: optimizeLegibility;
}
\ No newline at end of file
diff --git a/examples/jewel/todomvc/src/main/royale/jewel/todomvc/renderers/TodoItemRenderer.mxml b/examples/jewel/todomvc/src/main/royale/jewel/todomvc/renderers/TodoItemRenderer.mxml
index d932755..a72a3d0 100644
--- a/examples/jewel/todomvc/src/main/royale/jewel/todomvc/renderers/TodoItemRenderer.mxml
+++ b/examples/jewel/todomvc/src/main/royale/jewel/todomvc/renderers/TodoItemRenderer.mxml
@@ -20,7 +20,9 @@ limitations under the License.
<j:ListItemRenderer 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="http://www.w3.org/1999/xhtml">
+ xmlns="http://www.w3.org/1999/xhtml"
+ rollOver="closeBtn.visible = true"
+ rollOut="closeBtn.visible = false">
<fx:Script>
<![CDATA[
@@ -34,27 +36,23 @@ limitations under the License.
public var host:List;
[Bindable("dataChange")]
- public function get item():TodoVO
- {
+ public function get item():TodoVO {
return data as TodoVO;
}
- public function clickCloseButton():void
- {
- var view:ListView = this.itemRendererParent as ListView;
+ public function clickCloseButton():void {
+ var view:ListView = itemRendererParent as ListView;
host = view.host as List;
(host.dataProvider as ArrayListView).removeItemAt(index);
dispatchEvent(new Event("itemStateChanged", true));
}
- public function edit(event:Event):void
- {
+ public function edit(event:Event):void {
item.label = event.target.text;
currentState = 'normal';
}
- public function changeItemState(event:Event):void
- {
+ public function changeItemState(event:Event):void {
item.done = event.target.selected;
dispatchEvent(new Event("itemStateChanged", true));
}
@@ -77,7 +75,7 @@ limitations under the License.
<j:TextInput localId="editfield" visible.normal="false" visible.editing="true" enter="edit(event)"/>
- <j:IconButton click="clickCloseButton()">
+ <j:IconButton localId="closeBtn" click="clickCloseButton()" visible="false">
<j:icon>
<js:FontIcon text="{MaterialIconType.CLOSE}" material="true"/>
</j:icon>
diff --git a/examples/jewel/todomvc/src/main/royale/jewel/todomvc/views/MainContent.mxml b/examples/jewel/todomvc/src/main/royale/jewel/todomvc/views/MainContent.mxml
index 5f369a5..a4d1678 100644
--- a/examples/jewel/todomvc/src/main/royale/jewel/todomvc/views/MainContent.mxml
+++ b/examples/jewel/todomvc/src/main/royale/jewel/todomvc/views/MainContent.mxml
@@ -21,7 +21,6 @@ limitations under the License.
xmlns:j="library://ns.apache.org/royale/jewel"
xmlns:js="library://ns.apache.org/royale/basic"
xmlns:html="library://ns.apache.org/royale/html"
- xmlns:local="*"
initComplete="setUp()">
<fx:Script>
@@ -32,24 +31,21 @@ limitations under the License.
import org.apache.royale.collections.ArrayListView;
import org.apache.royale.events.Event;
- public function setUp():void
- {
- list.addEventListener("itemStateChanged", itemStateChangedHandler)
+ [Bindable]
+ public var items:ArrayList = new ArrayList();
+
+ public function setUp():void {
+ list.addEventListener("itemStateChanged", itemStateChangedHandler);
}
- private function addItem(event:Event):void
- {
+ private function addItem(event:Event):void {
var newItem:TodoVO = new TodoVO(event.target.text);
items.addItem(newItem);
event.target.text = "";
itemStateChangedHandler();
}
-
- [Bindable]
- public var items:ArrayList = new ArrayList();
- public function itemsCompleted(listOfItems:ArrayList, filterFunction:Function = null):ArrayListView
- {
+ public function itemsCompleted(listOfItems:ArrayList, filterFunction:Function = null):ArrayListView {
var alv:ArrayListView = new ArrayListView(listOfItems);
alv.filterFunction = filterFunction;
alv.refresh();
@@ -68,11 +64,13 @@ limitations under the License.
return item && item.done == true;
}
- public function markAllDone():void {
- var l:uint = items.length;
+ //Mark all as complete
+ public function markAllAsComplete():void {
+ var len:int = items.length
var item:TodoVO;
- while(l--) {
- item = TodoVO(items.getItemAt(l));
+ for(var i:int = 0; i < len; i++)
+ {
+ item = TodoVO(items.getItemAt(i));
item.done = true;
}
}
@@ -83,14 +81,14 @@ limitations under the License.
while(l--) {
item = TodoVO(items.getItemAt(l));
if(item.done){
- items.removeItemAt(l);
+ items.removeItem(item);
}
}
}
- public function itemStateChangedHandler(event:Event = null):void
- {
+ public function itemStateChangedHandler(event:Event = null):void {
itemsLeft.text = itemsCompleted(items, isActive).length + " item left";
+ clearCompleted.visible = itemsCompleted(items, isCompleted).length != 0 ? true : false;
}
]]>
</fx:Script>
@@ -99,17 +97,16 @@ limitations under the License.
<js:ContainerDataBinding/>
</j:beads>
- <html:H1 text="todos"/>
-
- <j:Card>
+ <j:SectionContent className="todoapp" isSelected="true">
+ <html:H1 text="todos"/>
<j:HGroup>
- <j:IconButton click="markAllDone()">
+ <j:IconButton click="markAllAsComplete()">
<j:icon>
<js:FontIcon text="{MaterialIconType.ARROW_DOWNWARD}" material="true"/>
</j:icon>
</j:IconButton>
- <j:TextInput localId="need" enter="addItem(event)">
+ <j:TextInput localId="need" enter="addItem(event)" className="new-todo">
<j:beads>
<j:TextPrompt prompt="What needs to be done?"/>
</j:beads>
@@ -117,22 +114,28 @@ limitations under the License.
</j:HGroup>
<j:List localId="list" width="200" height="300" rowHeight="60"
- labelField="label" className="todoItemRenderer"
+ labelField="label" className="todoItemRenderer todo-list"
initComplete="list.dataProvider = itemsCompleted(items, null)">
<j:beads>
<j:AddListItemRendererForArrayListData/>
<j:RemoveListItemRendererForArrayListData/>
<j:UpdateListItemRendererForArrayListData/>
- <j:RemoveAllItemRendererForArrayListData/>
</j:beads>
</j:List>
- <j:HGroup gap="3">
- <j:Label localId="itemsLeft" text="0 items left"/>
- <j:Button text="All" click="list.dataProvider = itemsCompleted(items, null)"/>
- <j:Button text="Active" click="list.dataProvider = itemsCompleted(items, isActive)"/>
- <j:Button text="Completed" click="list.dataProvider = itemsCompleted(items, isCompleted)"/>
- <j:Button text="Clear Completed" click="removeCompleted()"/>
- </j:HGroup>
- </j:Card>
+ <j:BarRow>
+ <j:BarSection>
+ <j:Label localId="itemsLeft" text="0 items left"/>
+ </j:BarSection>
+ <j:BarSection>
+ <j:Button text="All" click="list.dataProvider = itemsCompleted(items, null)"/>
+ <j:Button text="Active" click="list.dataProvider = itemsCompleted(items, isActive)"/>
+ <j:Button text="Completed" click="list.dataProvider = itemsCompleted(items, isCompleted)"/>
+ </j:BarSection>
+ <j:BarSection>
+ <j:Button localId="clearCompleted" text="Clear Completed" click="removeCompleted()" visible="false"/>
+ </j:BarSection>
+ </j:BarRow>
+
+ </j:SectionContent>
</j:View>
\ No newline at end of file
diff --git a/examples/royale/TourDeJewel/src/main/royale/MainContent.mxml b/examples/royale/TourDeJewel/src/main/royale/MainContent.mxml
index a6c6e90..541b037 100644
--- a/examples/royale/TourDeJewel/src/main/royale/MainContent.mxml
+++ b/examples/royale/TourDeJewel/src/main/royale/MainContent.mxml
@@ -234,7 +234,7 @@ limitations under the License.
</j:BarSection>
<j:BarSection itemsHorizontalAlign="itemsCenter">
<html:H3 text="{orientation}" />
- </j:BarSection>
+ </Section>
<j:BarSection itemsHorizontalAlign="itemsRight">
<j:IconButton>
<j:beads>