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/06/20 13:54:38 UTC
[royale-asjs] branch develop updated: jewel-table: make
"fixedHeader" property work. So now we have table content scrolling right
on all browsers
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 32b5f62 jewel-table: make "fixedHeader" property work. So now we have table content scrolling right on all browsers
32b5f62 is described below
commit 32b5f62541d80ab4c92401f9601cc92c77bc8b56
Author: Carlos Rovira <ca...@apache.org>
AuthorDate: Sat Jun 20 15:54:24 2020 +0200
jewel-table: make "fixedHeader" property work. So now we have table content scrolling right on all browsers
---
.../projects/Jewel/src/main/resources/defaults.css | 23 ++++--------
.../main/royale/org/apache/royale/jewel/Table.as | 43 ++++++++++++++++++++--
.../royale/jewel/beads/layouts/TableLayout.as | 1 -
.../Jewel/src/main/sass/components/_layout.sass | 3 +-
.../Jewel/src/main/sass/components/_table.sass | 32 +++++++---------
.../JewelTheme/src/main/resources/defaults.css | 10 ++---
.../src/main/sass/components-primary/_table.sass | 15 +++++++-
7 files changed, 79 insertions(+), 48 deletions(-)
diff --git a/frameworks/projects/Jewel/src/main/resources/defaults.css b/frameworks/projects/Jewel/src/main/resources/defaults.css
index dc0c32e..129c32b 100644
--- a/frameworks/projects/Jewel/src/main/resources/defaults.css
+++ b/frameworks/projects/Jewel/src/main/resources/defaults.css
@@ -3184,7 +3184,7 @@ j|Label {
.layout.vertical.itemsRight {
align-items: flex-end;
}
-.layout.table {
+.layout.table table {
display: table;
}
@@ -3785,11 +3785,9 @@ j|SimpleTable {
IBeadLayout: ClassReference("org.apache.royale.jewel.beads.layouts.NullLayout");
}
-.jewel.table {
- position: relative;
- white-space: nowrap;
+.jewel.table table {
+ width: 100%;
border-spacing: 0px;
- overflow: hidden;
}
.jewel.table .jewel.tableheadercell {
position: relative;
@@ -3808,17 +3806,12 @@ j|SimpleTable {
position: relative;
}
.jewel.table.fixedHeader {
- table-layout: fixed;
-}
-.jewel.table.fixedHeader .jewel.tbody {
- display: block;
- overflow: auto;
-}
-.jewel.table.fixedHeader .jewel.tbody .jewel.tablerow {
- display: block;
+ overflow-y: auto;
}
-.jewel.table.fixedHeader .jewel.tablecell {
- display: inline-block;
+.jewel.table.fixedHeader .jewel.tableheadercell {
+ position: sticky;
+ top: 0;
+ z-index: 1;
}
j|Table {
diff --git a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/Table.as b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/Table.as
index 1371ddc..33228b0 100644
--- a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/Table.as
+++ b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/Table.as
@@ -106,7 +106,7 @@ package org.apache.royale.jewel
private var _fixedHeader:Boolean;
/**
* Makes the header of the table fixed so the data rows will scroll
- * behind it.
+ * behind it. In this case height must be defined.
*
* The default value is false.
*
@@ -121,9 +121,14 @@ package org.apache.royale.jewel
}
public function set fixedHeader(value:Boolean):void
{
- _fixedHeader = value;
+ if(_fixedHeader !== value)
+ {
+ _fixedHeader = value;
+
+
- toggleClass("fixedHeader", _fixedHeader);
+ toggleClass("fixedHeader", _fixedHeader);
+ }
}
// private var _tableDataHeight:Boolean;
@@ -235,14 +240,44 @@ package org.apache.royale.jewel
{
TableModel(model).selectedItemProperty = value;
}
+
+ COMPILE::JS
+ private var table:HTMLTableElement;
/**
* @royaleignorecoercion org.apache.royale.core.WrappedHTMLElement
+ * @royaleignorecoercion HTMLTableElement
*/
COMPILE::JS
override protected function createElement():WrappedHTMLElement
{
- return addElementToWrapper(this, 'table');
+ table = addElementToWrapper(this, 'table') as HTMLTableElement;
+ positioner = document.createElement('div') as WrappedHTMLElement;
+ return element;
}
+
+ COMPILE::JS
+ private var _positioner:WrappedHTMLElement;
+ /**
+ * @copy org.apache.royale.core.IUIBase#positioner
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.10.0
+ */
+ COMPILE::JS
+ override public function get positioner():WrappedHTMLElement
+ {
+ return _positioner;
+ }
+
+ COMPILE::JS
+ override public function set positioner(value:WrappedHTMLElement):void
+ {
+ _positioner = value;
+ _positioner.royale_wrapper = this;
+ _positioner.appendChild(table);
+ }
}
}
diff --git a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/layouts/TableLayout.as b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/layouts/TableLayout.as
index 557768a..0276213 100644
--- a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/layouts/TableLayout.as
+++ b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/layouts/TableLayout.as
@@ -195,7 +195,6 @@ package org.apache.royale.jewel.beads.layouts
COMPILE::JS
{
-
return true;
}
}
diff --git a/frameworks/projects/Jewel/src/main/sass/components/_layout.sass b/frameworks/projects/Jewel/src/main/sass/components/_layout.sass
index d45e448..fa0981e 100644
--- a/frameworks/projects/Jewel/src/main/sass/components/_layout.sass
+++ b/frameworks/projects/Jewel/src/main/sass/components/_layout.sass
@@ -237,7 +237,8 @@ $gap-size: 10px !default
align-items: flex-end
&.table
- display: table
+ table
+ display: table
@each $size in $size-names
@if index($size-names, $size) == 1
diff --git a/frameworks/projects/Jewel/src/main/sass/components/_table.sass b/frameworks/projects/Jewel/src/main/sass/components/_table.sass
index d7a106f..4b67548 100644
--- a/frameworks/projects/Jewel/src/main/sass/components/_table.sass
+++ b/frameworks/projects/Jewel/src/main/sass/components/_table.sass
@@ -57,10 +57,13 @@ j|SimpleTable
// Table variables
$tableitem-min-height: 34px
.jewel.table
- position: relative
- white-space: nowrap
- border-spacing: 0px
- overflow: hidden
+ //position: relative
+ //white-space: nowrap
+ // overflow: hidden
+
+ table
+ width: 100%
+ border-spacing: 0px
// th
.jewel.tableheadercell
@@ -85,21 +88,12 @@ $tableitem-min-height: 34px
// padding: 12px
&.fixedHeader
- table-layout: fixed
-
- // .jewel.thead tr
- // display: block
-
- .jewel.tbody
- display: block
- overflow: auto
- // width must be table width
-
- .jewel.tablerow
- display: block
-
- .jewel.tablecell
- display: inline-block
+ overflow-y: auto
+
+ .jewel.tableheadercell
+ position: sticky
+ top: 0
+ z-index: 1
j|Table
IBeadLayout: ClassReference("org.apache.royale.jewel.beads.layouts.TableLayout")
diff --git a/frameworks/themes/JewelTheme/src/main/resources/defaults.css b/frameworks/themes/JewelTheme/src/main/resources/defaults.css
index 6d109fd..77b4e64 100644
--- a/frameworks/themes/JewelTheme/src/main/resources/defaults.css
+++ b/frameworks/themes/JewelTheme/src/main/resources/defaults.css
@@ -1208,9 +1208,6 @@ j|FormItem {
box-shadow: inset 0 1px 0 white;
border-radius: 0.25rem;
}
-.jewel.simpletable .jewel.thead tr {
- border-bottom: 1px solid #d9d9d9;
-}
.jewel.simpletable .jewel.tableheadercell:first-of-type {
border-left: 0px;
}
@@ -1242,9 +1239,6 @@ j|FormItem {
box-shadow: inset 0 1px 0 white;
border-radius: 0.25rem;
}
-.jewel.table .jewel.thead tr {
- border-bottom: 1px solid #d9d9d9;
-}
.jewel.table .jewel.tableheadercell:first-of-type {
border-left: 0px;
}
@@ -1256,6 +1250,10 @@ j|FormItem {
font-size: 1em;
color: #808080;
border-left: 1px solid #d9d9d9;
+ border-bottom: 1px solid #d9d9d9;
+}
+.jewel.table .jewel.tablerow:first-child .jewel.tablecell {
+ border-top: 1px solid transparent;
}
.jewel.table .jewel.tablecell:first-of-type {
border-left: 0px;
diff --git a/frameworks/themes/JewelTheme/src/main/sass/components-primary/_table.sass b/frameworks/themes/JewelTheme/src/main/sass/components-primary/_table.sass
index f02dc3c..981a13e 100644
--- a/frameworks/themes/JewelTheme/src/main/sass/components-primary/_table.sass
+++ b/frameworks/themes/JewelTheme/src/main/sass/components-primary/_table.sass
@@ -34,7 +34,7 @@ $simpletable-border-radius: $border-radius
border-radius: $simpletable-border-radius
.jewel.thead tr
- border-bottom: 1px solid $default-color
+ // border-bottom: 1px solid $default-color
// th
.jewel.tableheadercell:first-of-type
@@ -53,6 +53,9 @@ $simpletable-border-radius: $border-radius
border-left: 1px solid $default-color
// td
+ // .jewel.tablerow:first-child
+ // .jewel.tablecell
+ // border-top: 1px solid transparent
.jewel.tablecell:first-of-type
border-left: 0px
.jewel.tablecell
@@ -88,7 +91,7 @@ $table-border-radius: $border-radius
border-radius: $table-border-radius
.jewel.thead tr
- border-bottom: 1px solid $default-color
+ //border-bottom: 1px solid $default-color
// th
.jewel.tableheadercell:first-of-type
@@ -105,8 +108,12 @@ $table-border-radius: $border-radius
font-size: $font-size
color: $default-font-color
border-left: 1px solid $default-color
+ border-bottom: 1px solid $default-color
// td
+ .jewel.tablerow:first-child
+ .jewel.tablecell
+ border-top: 1px solid transparent
.jewel.tablecell:first-of-type
border-left: 0px
.jewel.tablecell
@@ -123,6 +130,10 @@ $table-border-radius: $border-radius
background: linear-gradient(lighten($default-color, 15%), lighten($default-color, 20%))
box-shadow: inset 0 1px 0 lighten($default-color, 30%)
+ &.fixedHeader
+ .jewel.tableheadercell
+ // border-bottom: 1px solid $default-color
+
// .jewel.tableheadercell
// border: 1px solid black