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/05/05 15:46:12 UTC
[royale-asjs] branch develop updated: jewel-datagrid: solve focus
issue between column and listArea
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 8315d0a jewel-datagrid: solve focus issue between column and listArea
8315d0a is described below
commit 8315d0a7474500fab3f817bd8c3ea8ae7399b912
Author: Carlos Rovira <ca...@apache.org>
AuthorDate: Tue May 5 17:46:06 2020 +0200
jewel-datagrid: solve focus issue between column and listArea
---
.../royale/jewel/beads/views/DataGridView.as | 4 +-
.../JewelTheme/src/main/resources/defaults.css | 6 +++
.../main/sass/components-primary/_datagrid.sass | 53 ++++++++++++++--------
3 files changed, 42 insertions(+), 21 deletions(-)
diff --git a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/views/DataGridView.as b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/views/DataGridView.as
index b89c96f..8197980 100644
--- a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/views/DataGridView.as
+++ b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/views/DataGridView.as
@@ -30,6 +30,7 @@ package org.apache.royale.jewel.beads.views
import org.apache.royale.core.IParent;
import org.apache.royale.core.IStrand;
import org.apache.royale.core.IUIBase;
+ import org.apache.royale.core.StyledUIBase;
import org.apache.royale.core.ValuesManager;
import org.apache.royale.events.CollectionEvent;
import org.apache.royale.events.Event;
@@ -124,6 +125,7 @@ package org.apache.royale.jewel.beads.views
// columns
var listAreaClass:Class = ValuesManager.valuesImpl.getValue(host, "listAreaClass") as Class;
_listArea = new listAreaClass() as IUIBase;
+ (_listArea as StyledUIBase).tabIndex = 0;
_dg.strandChildren.addElement(_listArea as IChild);
if (_sharedModel.columns)
@@ -173,7 +175,7 @@ package org.apache.royale.jewel.beads.views
list.labelField = dataGridColumn.dataField;
list.addEventListener('rollOverIndexChanged', handleColumnListRollOverChange);
list.addEventListener('selectionChanged', handleColumnListSelectionChange);
-
+ (list as StyledUIBase).tabIndex = -1;
(_listArea as IParent).addElement(list as IChild);
_lists.push(list);
diff --git a/frameworks/themes/JewelTheme/src/main/resources/defaults.css b/frameworks/themes/JewelTheme/src/main/resources/defaults.css
index f617506..81b286c 100644
--- a/frameworks/themes/JewelTheme/src/main/resources/defaults.css
+++ b/frameworks/themes/JewelTheme/src/main/resources/defaults.css
@@ -479,6 +479,12 @@ j|CardActions {
border-style: solid;
border-color: #b3b3b3;
}
+.jewel.datagrid .listarea:focus {
+ border: 1px solid #0f88d1;
+}
+.jewel.datagrid .jewel.list:focus {
+ border-color: inherit;
+}
.jewel.datagrid .jewel.list.column {
border-radius: 0px;
border-bottom-width: 0px;
diff --git a/frameworks/themes/JewelTheme/src/main/sass/components-primary/_datagrid.sass b/frameworks/themes/JewelTheme/src/main/sass/components-primary/_datagrid.sass
index e1a164e..616d80b 100644
--- a/frameworks/themes/JewelTheme/src/main/sass/components-primary/_datagrid.sass
+++ b/frameworks/themes/JewelTheme/src/main/sass/components-primary/_datagrid.sass
@@ -44,27 +44,40 @@
@else
border-color: darken($default-color, 15%)
- .jewel.list.column
- border-radius: 0px
- border-bottom-width: 0px
- @if not $flat
- box-shadow: inset 0px .5px 0px 0px rgba(0,0,0,0.25)
- @else
- box-shadow: none
+ &:focus
+ @if $flat
+ border: 1px solid $primary-color
+ @else
+ border: 1px solid darken($primary-color, 15%)
+ .jewel.list
+
+ &:focus
+ @if $flat
+ border-color: inherit
+ @else
+ border-color: inherit
+ &.column
+ border-radius: 0px
+ border-bottom-width: 0px
+ @if not $flat
+ box-shadow: inset 0px .5px 0px 0px rgba(0,0,0,0.25)
+ @else
+ box-shadow: none
- &.first
- border-bottom-left-radius: $border-radius
- &.middle
- &.last
- border-bottom-right-radius: $border-radius
-
- .jewel.item.datagrid
- border-bottom: 1px solid lighten($default-color, 8%)
+ &.first
+ border-bottom-left-radius: $border-radius
+ &.middle
+
+ &.last
+ border-bottom-right-radius: $border-radius
- &.primary
- &.hovered
- background: lighten($primary-color, 12%)
- &.selected, &.selectable:active
- background: lighten($primary-color, 7%)
\ No newline at end of file
+ .jewel.item.datagrid
+ border-bottom: 1px solid lighten($default-color, 8%)
+
+ &.primary
+ &.hovered
+ background: lighten($primary-color, 12%)
+ &.selected, &.selectable:active
+ background: lighten($primary-color, 7%)
\ No newline at end of file