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 75b759b tour-de-jewel: latest fixes. - Jewel CheckBox look change to
mimic todomvc style - toggleAll change style if all items is marked/unmaked -
Item edit mode now exits with "click outside" - Item edit mode now removes the
item if user removes all text - Finish little style things through all example
to match todomvc as much as possible
75b759b is described below
commit 75b759b808544dc4a0a4462aab4399a7c2842c6b
Author: Carlos Rovira <[email protected]>
AuthorDate: Sat Feb 1 02:18:29 2020 +0100
tour-de-jewel: latest fixes.
- Jewel CheckBox look change to mimic todomvc style
- toggleAll change style if all items is marked/unmaked
- Item edit mode now exits with "click outside"
- Item edit mode now removes the item if user removes all text
- Finish little style things through all example to match todomvc as much
as possible
---
.../todomvc/src/main/resources/todomvc-styles.css | 36 ++++++++------------
.../jewel/todomvc/controllers/TodoController.as | 24 +++++++++-----
.../main/royale/jewel/todomvc/events/TodoEvent.as | 2 +-
.../main/royale/jewel/todomvc/models/TodoModel.as | 4 +--
.../jewel/todomvc/renderers/TodoItemRenderer.mxml | 38 +++++++++++++++++-----
.../royale/jewel/todomvc/views/TodoHeader.mxml | 12 +++----
6 files changed, 67 insertions(+), 49 deletions(-)
diff --git a/examples/jewel/todomvc/src/main/resources/todomvc-styles.css
b/examples/jewel/todomvc/src/main/resources/todomvc-styles.css
index 3b6d078..61da97c 100644
--- a/examples/jewel/todomvc/src/main/resources/todomvc-styles.css
+++ b/examples/jewel/todomvc/src/main/resources/todomvc-styles.css
@@ -128,8 +128,9 @@ todomvc|TodoListSection
box-shadow: none;
}
-.jewel.togglebutton.toggleAll {
-
+/* Toggle All */
+.jewel.togglebutton.toggleAll .fonticon {
+ font-size: 1.8em;
}
.jewel.togglebutton.toggleAll:hover, .jewel.togglebutton.toggleAll:hover:focus
{
border: 1px solid transparent;
@@ -144,10 +145,10 @@ todomvc|TodoListSection
border: 1px solid transparent;
}
.jewel.togglebutton.toggleAll .fonticon {
- color: #737373;
+ color: #e6e6e6;
}
.jewel.togglebutton.toggleAll.selected .fonticon {
- color: #e6e6e6;
+ color: #737373;
}
/* TextInput */
@@ -218,7 +219,7 @@ todomvc|TodoListSection
/* ItemRenderer */
.jewel.item {
padding: 0px;
- min-height: 55px;
+ min-height: 59px;
}
.todo-list li {
@@ -242,41 +243,30 @@ todomvc|TodoListSection
}
.jewel.checkbox input + span::before {
- background: none;
- border: 1px solid #b3b3b3;
+ background: url("data:image/svg+xml,%3Csvg viewBox='0 -18 100 135'
xmlns='http://www.w3.org/2000/svg' width='40' height='40'%3E%3Ccircle cx='50'
cy='50' r='50' fill='none' stroke='%23ededed' stroke-width='3'/%3E%3C/svg%3E")
no-repeat center center;
+ /* background: none; */
+ border: none;
border-radius: 50%;
}
.jewel.checkbox input + span::after {
- background: url("data:image/svg+xml,%3Csvg viewBox='0 0 22 22'
version='1.1' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='0' y='0'
width='22' height='22' fill-opacity='0'/%3E%3Cpolygon fill='%233CADF1'
points='3.50018311 12.4854126 8.48547363 17.4989624 18.4641113 7.47589111
15.5010376 4.51739502 8.48547363 11.5650024 6.52087402
9.47265625'/%3E%3C/svg%3E") no-repeat center center;
+ background: url("data:image/svg+xml,%3Csvg viewBox='0 -18 100 135'
xmlns='http://www.w3.org/2000/svg' width='40' height='40'%3E%3Ccircle cx='50'
cy='50' r='50' fill='none' stroke='%23bddad5' stroke-width='3'/%3E%3Cpath
fill='%235dc2af' d='M72 25L42 71 27 56l-4 4 20 20 34-52z'/%3E%3C/svg%3E")
no-repeat center center;
border: 1px solid transparent;
border-radius: 50%;
transition: none;
- transform: none;
+ transform: none;
}
.jewel.checkbox input:checked + span::after, .jewel.checkbox
input:checked:active + span::after {
transform: none;
}
.jewel.checkbox input:focus + span::before, .jewel.checkbox
input:checked:focus + span::before, .jewel.checkbox input:checked:active:focus
+ span::before {
background: none;
- border: 1px solid #0f88d1;
+ border: none;
border-radius: 50%;
}
.jewel.checkbox span {
- padding-left: 8px;
+ padding-left: 3px;
font-size: 16px;
}
-/*
- content: url("data:image/svg+xml,%3Csvg viewBox='-10 -18 100 135'
version='1.1' xmlns='http://www.w3.org/2000/svg' width='40'
height='40'%3E%3Ccircle cx='50' cy='50' r='50' fill='none' stroke='%23ededed'
stroke-width='3'/%3E%3C/svg%3E") no-repeat center center;
- background: url("data:image/svg+xml,%3Csvg viewBox='0 0 22 22'
version='1.1' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='0' y='0'
width='22' height='22' fill-opacity='0'/%3E%3Cpolygon fill='%233CADF1'
points='3.50018311 12.4854126 8.48547363 17.4989624 18.4641113 7.47589111
15.5010376 4.51739502 8.48547363 11.5650024 6.52087402
9.47265625'/%3E%3C/svg%3E") no-repeat center center;
-
- content: url("data:image/svg+xml,%3Csvg viewBox='-10 -18 100 135'
version='1.1' xmlns='http://www.w3.org/2000/svg' width='40'
height='40'%3E%3Ccircle cx='50' cy='50' r='50' fill='none' stroke='%23ededed'
stroke-width='3'/%3E%3C/svg%3E") no-repeat center center;
- background: url('data:image/svg+xml;utf8,<svg
xmlns="http://www.w3.org/2000/svg"; width="40" height="40" viewBox="-10 -18 100
135"><circle cx="50" cy="50" r="50" fill="none" stroke="#bddad5"
stroke-width="3"/><path fill="#5dc2af" d="M72 25L42 71 27 56l-4 4 20 20
34-52z"/></svg>');
- */
-
-/* ItemRenderer label */
-.todolabel {
- padding-left: 13px;
-}
.completed {
color: #d9d9d9;
diff --git
a/examples/jewel/todomvc/src/main/royale/jewel/todomvc/controllers/TodoController.as
b/examples/jewel/todomvc/src/main/royale/jewel/todomvc/controllers/TodoController.as
index a8c6343..304f64f 100644
---
a/examples/jewel/todomvc/src/main/royale/jewel/todomvc/controllers/TodoController.as
+++
b/examples/jewel/todomvc/src/main/royale/jewel/todomvc/controllers/TodoController.as
@@ -55,7 +55,7 @@ package jewel.todomvc.controllers
public function set strand(value:IStrand):void {
_strand = value;
IEventDispatcher(_strand).addEventListener(TodoEvent.ADD_TODO_ITEM,
addTodoItem);
-
IEventDispatcher(_strand).addEventListener(TodoEvent.MARK_ALL_COMPLETE,
markAllComplete);
+
IEventDispatcher(_strand).addEventListener(TodoEvent.TOGGLE_ALL_COMPLETE,
toggleAllComplete);
IEventDispatcher(_strand).addEventListener(TodoEvent.REMOVE_COMPLETED,
removeCompleted);
IEventDispatcher(_strand).addEventListener(TodoEvent.REFRESH_LIST,
refreshList);
IEventDispatcher(_strand).addEventListener(TodoEvent.REFRESH_LIST_BY_USER,
refreshListByUser);
@@ -108,16 +108,16 @@ package jewel.todomvc.controllers
/**
- * Mark all todo items as completed, save data and update the
interface accordingly
+ * Mark all todo items as completed or uncompleted, save data and
update the interface accordingly
*/
- protected function markAllComplete(event:TodoEvent):void {
- model.toggleAllSelectedState =
!model.toggleAllSelectedState;
+ protected function toggleAllComplete(event:TodoEvent):void {
+ model.toggleAllToCompletedState =
!model.toggleAllToCompletedState;
var len:int = model.allItems.length;
var item:TodoVO;
for(var i:int = 0; i < len; i++) {
item = TodoVO(model.allItems.getItemAt(i));
- item.done = model.toggleAllSelectedState;
+ item.done = model.toggleAllToCompletedState;
}
saveDataToLocal();
@@ -202,11 +202,16 @@ package jewel.todomvc.controllers
/**
* Commit the label changes to the item and save data
+ * if label is empty, remove todo item
*/
public function itemLabelChangedHandler(event:TodoEvent = null):void {
- event.todo.label = event.label;
+ if(event.label != "")
+ event.todo.label = event.label;
+ else
+ model.allItems.removeItem(event.todo);
saveDataToLocal();
+ updateInterface();
}
/**
@@ -226,9 +231,10 @@ package jewel.todomvc.controllers
setListState();
model.itemsLeftLabel = model.activeItems.length + "
item left";
- model.clearCompletedVisibility = model.completedItems.length != 0
? true : false;
- model.footerVisibility = model.allItems.length != 0 ?
true : false;
- model.toogleAllVisibility = model.allItems.length != 0
? true : false;
+ model.clearCompletedVisibility = model.completedItems.length != 0;
+ model.footerVisibility = model.allItems.length != 0;
+ model.toogleAllVisibility = model.allItems.length != 0;
+ model.toggleAllToCompletedState =
model.activeItems.length == 0;
}
}
}
diff --git
a/examples/jewel/todomvc/src/main/royale/jewel/todomvc/events/TodoEvent.as
b/examples/jewel/todomvc/src/main/royale/jewel/todomvc/events/TodoEvent.as
index 5e869fc..1c4ba4e 100644
--- a/examples/jewel/todomvc/src/main/royale/jewel/todomvc/events/TodoEvent.as
+++ b/examples/jewel/todomvc/src/main/royale/jewel/todomvc/events/TodoEvent.as
@@ -31,7 +31,7 @@ package jewel.todomvc.events
* Actions
*/
public static const ADD_TODO_ITEM:String = "add_Todo_Item";
- public static const MARK_ALL_COMPLETE:String =
"mark_all_complete";
+ public static const TOGGLE_ALL_COMPLETE:String =
"toggle_all_complete";
public static const REMOVE_COMPLETED:String =
"remove_completed";
public static const REFRESH_LIST:String = "refresh_list";
public static const REFRESH_LIST_BY_USER:String =
"refresh_list_by_user";
diff --git
a/examples/jewel/todomvc/src/main/royale/jewel/todomvc/models/TodoModel.as
b/examples/jewel/todomvc/src/main/royale/jewel/todomvc/models/TodoModel.as
index 2d449fc..79ddef6 100644
--- a/examples/jewel/todomvc/src/main/royale/jewel/todomvc/models/TodoModel.as
+++ b/examples/jewel/todomvc/src/main/royale/jewel/todomvc/models/TodoModel.as
@@ -130,9 +130,9 @@ package jewel.todomvc.models
public var filterState:String = TodoModel.ALL_FILTER;
/**
- * toggleAll button selected state
+ * true, toggle all todo items to completed state, false to all
uncompleted
*/
- public var toggleAllSelectedState:Boolean = false;
+ public var toggleAllToCompletedState:Boolean = false;
/**
* how many items left to do
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 83f1218..6cd6f26 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
@@ -31,7 +31,7 @@ limitations under the License.
import org.apache.royale.events.Event;
import org.apache.royale.events.MouseEvent;
-
+
/**
* Used to know if mouse is over this render in order to
* show destroy button when exit editing state
@@ -57,18 +57,18 @@ limitations under the License.
* Destroy this todo item
*/
public function removeItemClickHandler(event:MouseEvent):void {
+ COMPILE::JS
+ {
+ window.removeEventListener('click', commitLabelChanges, false);
+ }
dispatchEvent(new TodoEvent(TodoEvent.ITEM_REMOVED, item));
}
/**
- * If user made changes to label, commit changes to the todo item
and exit 'editing' state
+ * commit changes to the todo item and exit 'editing' state
*/
public function updateLabelAndExit(event:Event):void {
- if(item.label != event.target.text)
- dispatchEvent(new TodoEvent(TodoEvent.ITEM_LABEL_CHANGED,
item, event.target.text));
- currentState = 'normal';
- if(mouseIsOverRenderer)
- destroy_btn.visible = true;
+ commitLabelChanges();
}
/**
@@ -80,6 +80,28 @@ limitations under the License.
currentState = "editing";
destroy_btn.visible = false;
editfield.setFocus();
+
+ COMPILE::JS
+ {
+ window.addEventListener('click', commitLabelChanges, false);
+ }
+ }
+
+ /**
+ * remove window listener to stop listening click events. If user
made changes to label, commit
+ * changes to the todo item and exit 'editing' state.
+ * Make destroy button visible if mouse is over renderer.
+ */
+ public function commitLabelChanges():void {
+ COMPILE::JS
+ {
+ window.removeEventListener('click', commitLabelChanges, false);
+ }
+ if(item.label != editfield.text)
+ dispatchEvent(new TodoEvent(TodoEvent.ITEM_LABEL_CHANGED,
item, editfield.text));
+ currentState = 'normal';
+ if(mouseIsOverRenderer)
+ destroy_btn.visible = true;
}
/**
@@ -114,7 +136,7 @@ limitations under the License.
<js:ItemRendererDataBinding />
</j:beads>
- <j:CheckBox selected="{item ? (item.done ? true : false) : false }"
+ <j:CheckBox selected="{item ? item.done : false }" checkWidth="40"
checkHeight="40"
visible.normal="true" visible.editing="false"
click="changeItemState(event);"/>
diff --git
a/examples/jewel/todomvc/src/main/royale/jewel/todomvc/views/TodoHeader.mxml
b/examples/jewel/todomvc/src/main/royale/jewel/todomvc/views/TodoHeader.mxml
index 877742e..aa67df4 100644
--- a/examples/jewel/todomvc/src/main/royale/jewel/todomvc/views/TodoHeader.mxml
+++ b/examples/jewel/todomvc/src/main/royale/jewel/todomvc/views/TodoHeader.mxml
@@ -20,7 +20,7 @@ limitations under the License.
<j:Group xmlns:fx="http://ns.adobe.com/mxml/2009";
xmlns:j="library://ns.apache.org/royale/jewel"
xmlns:js="library://ns.apache.org/royale/basic"
- height="61">
+ height="60">
<fx:Script>
<![CDATA[
@@ -45,10 +45,10 @@ limitations under the License.
}
/**
- * Mark all todo items complete
+ * Toggle all todo items complete or uncomplete
*/
- public function markAllComplete(event:Event):void {
- dispatchEvent(new
TodoEvent(TodoEvent.MARK_ALL_COMPLETE));
+ public function toggleAllComplete(event:Event):void {
+ dispatchEvent(new
TodoEvent(TodoEvent.TOGGLE_ALL_COMPLETE));
}
]]>
</fx:Script>
@@ -65,8 +65,8 @@ limitations under the License.
</j:TextInput>
<j:ToggleButton localId="toogleAll"
visible="{todoModel.toogleAllVisibility}"
- width="34" height="55" className="toggleAll"
- click="markAllComplete(event)">
+ width="50" height="55" className="toggleAll"
selected="{todoModel.toggleAllToCompletedState}"
+ click="toggleAllComplete(event)">
<j:icon>
<js:FontIcon
text="{MaterialIconType.KEYBOARD_ARROW_DOWN}" material="true"/>
</j:icon>
