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 2018/07/29 19:08:43 UTC
[royale-asjs] branch develop updated: Jewel SimpleTable component
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 80d4578 Jewel SimpleTable component
80d4578 is described below
commit 80d4578f50a92307efd9f1b2f24d1d6c10bf3e88
Author: Carlos Rovira <ca...@apache.org>
AuthorDate: Sun Jul 29 21:08:38 2018 +0200
Jewel SimpleTable component
---
.../JewelExample/src/main/royale/MainContent.mxml | 1 +
.../src/main/royale/TablePlayGround.mxml | 122 +++++++++++++++++++++
.../projects/Jewel/src/main/resources/defaults.css | 39 +++++++
.../Jewel/src/main/resources/jewel-manifest.xml | 9 ++
.../projects/Jewel/src/main/royale/JewelClasses.as | 11 ++
.../royale/org/apache/royale/jewel/SimpleTable.as | 64 +++++++++++
.../main/royale/org/apache/royale/jewel/Table.as | 64 +++++++++++
.../royale/org/apache/royale/jewel/TableCell.as | 63 +++++++++++
.../royale/org/apache/royale/jewel/TableHeader.as | 62 +++++++++++
.../royale/org/apache/royale/jewel/TableRow.as | 62 +++++++++++
.../apache/royale/jewel/beads/views/TableView.as | 84 ++++++++++++++
.../royale/jewel/supportClasses/table/TBody.as | 62 +++++++++++
.../royale/jewel/supportClasses/table/TFoot.as | 60 ++++++++++
.../royale/jewel/supportClasses/table/THead.as | 60 ++++++++++
.../Jewel/src/main/sass/components/_table.sass | 86 +++++++++++++++
.../projects/Jewel/src/main/sass/defaults.sass | 1 +
.../JewelTheme/src/main/resources/defaults.css | 24 ++++
.../src/main/sass/components-primary/_table.sass | 54 +++++++++
.../themes/JewelTheme/src/main/sass/defaults.sass | 1 +
19 files changed, 929 insertions(+)
diff --git a/examples/royale/JewelExample/src/main/royale/MainContent.mxml b/examples/royale/JewelExample/src/main/royale/MainContent.mxml
index 2aa1e26..d43f2ea 100644
--- a/examples/royale/JewelExample/src/main/royale/MainContent.mxml
+++ b/examples/royale/JewelExample/src/main/royale/MainContent.mxml
@@ -124,6 +124,7 @@ limitations under the License.
<local:TextInputPlayGround id="textinput_panel"/>
<local:GridPlayGround id="grid_panel"/>
<local:CardPlayGround id="card_panel"/>
+ <local:TablePlayGround id="tables_panel"/>
</j:ApplicationMainContent>
</j:ApplicationResponsiveView>
diff --git a/examples/royale/JewelExample/src/main/royale/TablePlayGround.mxml b/examples/royale/JewelExample/src/main/royale/TablePlayGround.mxml
new file mode 100644
index 0000000..f4d6ab4
--- /dev/null
+++ b/examples/royale/JewelExample/src/main/royale/TablePlayGround.mxml
@@ -0,0 +1,122 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!--
+
+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.
+
+-->
+<j:SectionContent 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:html="library://ns.apache.org/royale/html">
+
+ <j:beads>
+ <js:ContainerDataBinding/>
+ </j:beads>
+
+ <j:Card width="500">
+ <html:H3 text="Jewel Table"/>
+
+ <j:SimpleTable>
+ <j:THead>
+ <j:TableRow>
+ <j:TableHeader width="48">
+ <j:Label text="Icons" />
+ </j:TableHeader>
+ <j:TableHeader width="140">
+ <j:Label text="Text Column" />
+ </j:TableHeader>
+ <j:TableHeader>
+ <j:Label text="Number Column">
+ <j:beads>
+ <j:TextAlign align="right"/>
+ </j:beads>
+ </j:Label>
+ </j:TableHeader>
+ </j:TableRow>
+ </j:THead>
+ <j:TBody>
+ <j:TableRow>
+ <j:TableCell>
+ <js:FontIcon text="{MaterialIconType.INSERT_DRIVE_FILE}" material="true"/>
+ </j:TableCell>
+ <j:TableCell>
+ <j:Label text="Some Text" />
+ </j:TableCell>
+ <j:TableCell>
+ <j:Label text="71">
+ <j:beads>
+ <j:TextAlign align="right"/>
+ </j:beads>
+ </j:Label>
+ </j:TableCell>
+ </j:TableRow>
+ <j:TableRow>
+ <j:TableCell>
+ <js:FontIcon text="{MaterialIconType.INSERT_DRIVE_FILE}" material="true"/>
+ </j:TableCell>
+ <j:TableCell>
+ <j:Label text="More Text" />
+ </j:TableCell>
+ <j:TableCell>
+ <j:Label text="56">
+ <j:beads>
+ <j:TextAlign align="right"/>
+ </j:beads>
+ </j:Label>
+ </j:TableCell>
+ </j:TableRow>
+ <j:TableRow>
+ <j:TableCell>
+ <js:FontIcon text="{MaterialIconType.INSERT_DRIVE_FILE}" material="true"/>
+ </j:TableCell>
+ <j:TableCell>
+ <j:Label text="More Text 2" />
+ </j:TableCell>
+ <j:TableCell>
+ <j:Label text="346">
+ <j:beads>
+ <j:TextAlign align="right"/>
+ </j:beads>
+ </j:Label>
+ </j:TableCell>
+ </j:TableRow>
+ <j:TableRow>
+ <j:TableCell>
+ <js:FontIcon text="{MaterialIconType.INSERT_DRIVE_FILE}" material="true"/>
+ </j:TableCell>
+ <j:TableCell>
+ <!-- By using a Group within a cell you have better control of the
+ layout.
+ -->
+ <j:VGroup>
+ <j:Label text="Labels" />
+ <j:Label text="with" />
+ <j:Label text="Vertical" />
+ <j:Label text="Layout" />
+ </j:VGroup>
+ </j:TableCell>
+ <j:TableCell>
+ <j:Label text="240">
+ <j:beads>
+ <j:TextAlign align="right"/>
+ </j:beads>
+ </j:Label>
+ </j:TableCell>
+ </j:TableRow>
+ </j:TBody>
+ </j:SimpleTable>
+ </j:Card>
+</j:SectionContent>
diff --git a/frameworks/projects/Jewel/src/main/resources/defaults.css b/frameworks/projects/Jewel/src/main/resources/defaults.css
index 9e9c8ae..f125166 100644
--- a/frameworks/projects/Jewel/src/main/resources/defaults.css
+++ b/frameworks/projects/Jewel/src/main/resources/defaults.css
@@ -2778,6 +2778,45 @@ j|Slider {
iTrackView: ClassReference("org.apache.royale.jewel.beads.views.SliderTrackView");
}
}
+.jewel.table {
+ position: relative;
+ white-space: nowrap;
+ border-spacing: 0px;
+ overflow: hidden;
+}
+.jewel.table thead {
+ padding-bottom: 3px;
+}
+.jewel.table th:first-of-type, .jewel.table td:first-of-type {
+ padding-left: 20px;
+}
+.jewel.table th {
+ position: relative;
+ vertical-align: bottom;
+ text-overflow: ellipsis;
+ letter-spacing: 0;
+ height: 48px;
+ padding-bottom: 8px;
+ padding: 0 18px 12px 18px;
+ text-align: left;
+}
+.jewel.table tbody tr {
+ position: relative;
+ height: 48px;
+ transition-duration: 0.28s;
+ transition-property: background-color;
+}
+.jewel.table td {
+ position: relative;
+ height: 48px;
+ padding: 12px 18px;
+}
+
+j|SimpleTable {
+ IViewport: ClassReference("org.apache.royale.html.supportClasses.ScrollingViewport");
+ IViewportModel: ClassReference("org.apache.royale.html.beads.models.ViewportModel");
+}
+
.alignTextLeft {
text-align: left;
}
diff --git a/frameworks/projects/Jewel/src/main/resources/jewel-manifest.xml b/frameworks/projects/Jewel/src/main/resources/jewel-manifest.xml
index bf7a94b..f72cd5b 100644
--- a/frameworks/projects/Jewel/src/main/resources/jewel-manifest.xml
+++ b/frameworks/projects/Jewel/src/main/resources/jewel-manifest.xml
@@ -30,6 +30,15 @@
<component id="Grid" class="org.apache.royale.jewel.Grid"/>
<component id="GridCell" class="org.apache.royale.jewel.GridCell"/>
+ <component id="SimpleTable" class="org.apache.royale.jewel.SimpleTable"/>
+ <component id="Table" class="org.apache.royale.jewel.Table"/>
+ <component id="THead" class="org.apache.royale.jewel.supportClasses.table.THead"/>
+ <component id="TBody" class="org.apache.royale.jewel.supportClasses.table.TBody"/>
+ <component id="TFoot" class="org.apache.royale.jewel.supportClasses.table.TFoot"/>
+ <component id="TableRow" class="org.apache.royale.jewel.TableRow"/>
+ <component id="TableCell" class="org.apache.royale.jewel.TableCell"/>
+ <component id="TableHeader" class="org.apache.royale.jewel.TableHeader"/>
+
<component id="Button" class="org.apache.royale.jewel.Button"/>
<component id="IconButton" class="org.apache.royale.jewel.IconButton"/>
<component id="ToggleButton" class="org.apache.royale.jewel.ToggleButton"/>
diff --git a/frameworks/projects/Jewel/src/main/royale/JewelClasses.as b/frameworks/projects/Jewel/src/main/royale/JewelClasses.as
index 86dbfb4..5711595 100644
--- a/frameworks/projects/Jewel/src/main/royale/JewelClasses.as
+++ b/frameworks/projects/Jewel/src/main/royale/JewelClasses.as
@@ -49,6 +49,7 @@ package
import org.apache.royale.jewel.beads.views.AlertTitleBarView; AlertTitleBarView;
import org.apache.royale.jewel.beads.views.ListView; ListView;
import org.apache.royale.jewel.beads.views.DateChooserView; DateChooserView;
+ import org.apache.royale.jewel.beads.views.TableView; TableView;
import org.apache.royale.jewel.beads.models.SingleSelectionCollectionViewModel; SingleSelectionCollectionViewModel;
import org.apache.royale.jewel.beads.models.SingleSelectionArrayListModel; SingleSelectionArrayListModel;
@@ -82,11 +83,21 @@ package
import org.apache.royale.jewel.beads.layouts.VerticalLayout; VerticalLayout;
import org.apache.royale.jewel.beads.layouts.HorizontalLayoutSpaceBetween; HorizontalLayoutSpaceBetween;
+
+ // import org.apache.royale.html.beads.TableCellView; TableCellView;
+ // import org.apache.royale.html.beads.layouts.SimpleTableLayout; SimpleTableLayout;
+ // import org.apache.royale.html.beads.layouts.TableCellLayout; TableCellLayout;
+ // import org.apache.royale.html.beads.layouts.TableHeaderLayout; TableHeaderLayout;
+
import org.apache.royale.jewel.ResponsiveSizes; ResponsiveSizes;
import org.apache.royale.jewel.supportClasses.INavigationRenderer; INavigationRenderer;
import org.apache.royale.jewel.supportClasses.IActivable; IActivable;
import org.apache.royale.jewel.supportClasses.ITextInput; ITextInput;
+
+ import org.apache.royale.jewel.supportClasses.table.TBody;
+ import org.apache.royale.jewel.supportClasses.table.THead;
+ import org.apache.royale.jewel.supportClasses.table.TFoot;
//import org.apache.royale.jewel.beads.views.JewelLabelViewBead; JewelLabelViewBead;
import org.apache.royale.jewel.beads.controllers.ItemRendererMouseController; ItemRendererMouseController;
diff --git a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/SimpleTable.as b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/SimpleTable.as
new file mode 100644
index 0000000..afb8e06
--- /dev/null
+++ b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/SimpleTable.as
@@ -0,0 +1,64 @@
+
+////////////////////////////////////////////////////////////////////////////////
+//
+// 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
+{
+ COMPILE::JS
+ {
+ import org.apache.royale.core.WrappedHTMLElement;
+ import org.apache.royale.html.util.addElementToWrapper;
+ }
+
+ /**
+ * The SimpleTable class represents a simple HTML <table> element
+ *
+ *
+ * @toplevel
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.3
+ */
+ public class SimpleTable extends Container
+ {
+ /**
+ * constructor.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.3
+ */
+ public function SimpleTable()
+ {
+ super();
+
+ typeNames = "jewel table";
+ }
+
+ /**
+ * @royaleignorecoercion org.apache.royale.core.WrappedHTMLElement
+ */
+ COMPILE::JS
+ override protected function createElement():WrappedHTMLElement
+ {
+ return addElementToWrapper(this,'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
new file mode 100644
index 0000000..73491cb
--- /dev/null
+++ b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/Table.as
@@ -0,0 +1,64 @@
+
+////////////////////////////////////////////////////////////////////////////////
+//
+// 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
+{
+ COMPILE::JS
+ {
+ import org.apache.royale.core.WrappedHTMLElement;
+ import org.apache.royale.html.util.addElementToWrapper;
+ }
+
+ /**
+ * The Table class represents an HTML <table> element
+ *
+ *
+ * @toplevel
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.3
+ */
+ public class Table extends Group
+ {
+ /**
+ * constructor.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.3
+ */
+ public function Table()
+ {
+ super();
+
+ typeNames = "jewel table";
+ }
+
+ /**
+ * @royaleignorecoercion org.apache.royale.core.WrappedHTMLElement
+ */
+ COMPILE::JS
+ override protected function createElement():WrappedHTMLElement
+ {
+ return addElementToWrapper(this,'table');
+ }
+ }
+}
diff --git a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/TableCell.as b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/TableCell.as
new file mode 100644
index 0000000..8afa62a
--- /dev/null
+++ b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/TableCell.as
@@ -0,0 +1,63 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+// 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
+{
+ COMPILE::JS
+ {
+ import org.apache.royale.core.WrappedHTMLElement;
+ import org.apache.royale.html.util.addElementToWrapper;
+ }
+
+ /**
+ * The TableCell class defines a table data cell in the Table component. This element
+ * may have nearly any type of Royale component as children.
+ *
+ * @toplevel
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.3
+ */
+ public class TableCell extends Group
+ {
+ /**
+ * constructor.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.3
+ */
+ public function TableCell()
+ {
+ super();
+
+ typeNames = "jewel tablecell";
+ }
+
+ /**
+ * @royaleignorecoercion org.apache.royale.core.WrappedHTMLElement
+ */
+ COMPILE::JS
+ override protected function createElement():WrappedHTMLElement
+ {
+ return addElementToWrapper(this,'td');
+ }
+ }
+}
diff --git a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/TableHeader.as b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/TableHeader.as
new file mode 100644
index 0000000..a438d06
--- /dev/null
+++ b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/TableHeader.as
@@ -0,0 +1,62 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+// 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
+{
+ COMPILE::JS
+ {
+ import org.apache.royale.core.WrappedHTMLElement;
+ import org.apache.royale.html.util.addElementToWrapper;
+ }
+
+ /**
+ * The TableHeader class defines a table header cell in the Table component.
+ *
+ * @toplevel
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.3
+ */
+ public class TableHeader extends TableCell
+ {
+ /**
+ * constructor.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.3
+ */
+ public function TableHeader()
+ {
+ super();
+
+ typeNames = "jewel tableheader";
+ }
+
+ /**
+ * @royaleignorecoercion org.apache.royale.core.WrappedHTMLElement
+ */
+ COMPILE::JS
+ override protected function createElement():WrappedHTMLElement
+ {
+ return addElementToWrapper(this,'th');
+ }
+ }
+}
diff --git a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/TableRow.as b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/TableRow.as
new file mode 100644
index 0000000..74e8d13
--- /dev/null
+++ b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/TableRow.as
@@ -0,0 +1,62 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+// 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
+{
+ COMPILE::JS
+ {
+ import org.apache.royale.core.WrappedHTMLElement;
+ import org.apache.royale.html.util.addElementToWrapper;
+ }
+
+ /**
+ * The TableRow class defines a row of a Table. This will translate to a <tr> elemement
+ *
+ * @toplevel
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.3
+ */
+ public class TableRow extends Group
+ {
+ /**
+ * constructor.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.3
+ */
+ public function TableRow()
+ {
+ super();
+
+ typeNames = "jewel tablerow";
+ }
+
+ /**
+ * @royaleignorecoercion org.apache.royale.core.WrappedHTMLElement
+ */
+ COMPILE::JS
+ override protected function createElement():WrappedHTMLElement
+ {
+ return addElementToWrapper(this,'tr');
+ }
+ }
+}
diff --git a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/views/TableView.as b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/views/TableView.as
new file mode 100644
index 0000000..3f3e445
--- /dev/null
+++ b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/views/TableView.as
@@ -0,0 +1,84 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+// 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.views
+{
+ import org.apache.royale.core.BeadViewBase;
+ import org.apache.royale.core.UIBase;
+ import org.apache.royale.core.IStrand;
+ import org.apache.royale.jewel.supportClasses.table.TBody;
+ import org.apache.royale.jewel.supportClasses.table.THead;
+ import org.apache.royale.jewel.supportClasses.table.TFoot;
+
+ /**
+ * The TableView class creates the visual elements of the org.apache.royale.jewel.Table component.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.3
+ */
+ public class TableView extends BeadViewBase
+ {
+ /**
+ * constructor.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.3
+ */
+ public function TableView()
+ {
+ }
+
+ /**
+ * @royaleignorecoercion org.apache.royale.core.UIBase
+ */
+ private function get host():UIBase
+ {
+ return _strand as UIBase;
+ }
+
+ override public function set strand(value:IStrand):void
+ {
+ super.strand = value;
+
+ //createChildren();
+ }
+
+ private var thead:THead;
+ private var tbody:TBody;
+ private var tfoot:TFoot;
+
+ /**
+ * @private
+ */
+ private function createChildren():void
+ {
+ thead = new THead();
+ host.addElement(thead);
+
+ tbody = new TBody();
+ host.addElement(tbody);
+
+ tfoot = new TFoot();
+ host.addElement(tfoot);
+ }
+ }
+}
diff --git a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/supportClasses/table/TBody.as b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/supportClasses/table/TBody.as
new file mode 100644
index 0000000..2dd6a4a
--- /dev/null
+++ b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/supportClasses/table/TBody.as
@@ -0,0 +1,62 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+// 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.supportClasses.table
+{
+ import org.apache.royale.jewel.Group;
+
+ COMPILE::JS
+ {
+ import org.apache.royale.core.WrappedHTMLElement;
+ import org.apache.royale.html.util.addElementToWrapper;
+ }
+
+ /**
+ * The TBody class is a building block of Jewel Table, is used in TableView
+ * and represents an HTML <tbody> element
+ *
+ * @toplevel
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.3
+ */
+ public class TBody extends Group
+ {
+ /**
+ * constructor.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.3
+ */
+ public function TBody()
+ {
+ super();
+
+ typeNames = "jewel tbody";
+ }
+
+ COMPILE::JS
+ override protected function createElement():WrappedHTMLElement
+ {
+ return addElementToWrapper(this,'tbody');
+ }
+ }
+}
diff --git a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/supportClasses/table/TFoot.as b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/supportClasses/table/TFoot.as
new file mode 100644
index 0000000..0ac9b78
--- /dev/null
+++ b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/supportClasses/table/TFoot.as
@@ -0,0 +1,60 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+// 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.supportClasses.table
+{
+ import org.apache.royale.jewel.Group;
+
+ COMPILE::JS
+ {
+ import org.apache.royale.core.WrappedHTMLElement;
+ import org.apache.royale.html.util.addElementToWrapper;
+ }
+
+ /**
+ * The TFoot class is a building block of Jewel Table, is used in TableView
+ * and represents an HTML <tfoot> element
+ *
+ * @toplevel
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.3
+ */
+ public class TFoot extends Group
+ {
+ /**
+ * constructor.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.3
+ */
+ public function TFoot()
+ {
+ super();
+ }
+
+ COMPILE::JS
+ override protected function createElement():WrappedHTMLElement
+ {
+ return addElementToWrapper(this,'tfoot');
+ }
+ }
+}
diff --git a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/supportClasses/table/THead.as b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/supportClasses/table/THead.as
new file mode 100644
index 0000000..4f756e0
--- /dev/null
+++ b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/supportClasses/table/THead.as
@@ -0,0 +1,60 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+// 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.supportClasses.table
+{
+ import org.apache.royale.jewel.Group;
+
+ COMPILE::JS
+ {
+ import org.apache.royale.core.WrappedHTMLElement;
+ import org.apache.royale.html.util.addElementToWrapper;
+ }
+
+ /**
+ * The THead class is a building block of Jewel Table, is used in TableView
+ * and represents an HTML <thead> element
+ *
+ * @toplevel
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.3
+ */
+ public class THead extends Group
+ {
+ /**
+ * constructor.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.3
+ */
+ public function THead()
+ {
+ super();
+ }
+
+ COMPILE::JS
+ override protected function createElement():WrappedHTMLElement
+ {
+ return addElementToWrapper(this,'thead');
+ }
+ }
+}
diff --git a/frameworks/projects/Jewel/src/main/sass/components/_table.sass b/frameworks/projects/Jewel/src/main/sass/components/_table.sass
new file mode 100644
index 0000000..b367b5c
--- /dev/null
+++ b/frameworks/projects/Jewel/src/main/sass/components/_table.sass
@@ -0,0 +1,86 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+// 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.
+//
+////////////////////////////////////////////////////////////////////////////////
+
+// Jewel Table
+
+// Table variables
+
+.jewel.table
+ position: relative
+ white-space: nowrap
+ // border-collapse: collapse
+ border-spacing: 0px
+ overflow: hidden
+
+ thead
+ padding-bottom: 3px
+
+ th:first-of-type, td:first-of-type
+ padding-left: 20px
+
+ th
+ position: relative
+ vertical-align: bottom
+ text-overflow: ellipsis
+ letter-spacing: 0
+ height: 48px
+ padding-bottom: 8px
+ padding: 0 18px 12px 18px
+ text-align: left
+
+ tbody
+ tr
+ position: relative
+ height: 48px
+ transition-duration: .28s
+ // transition-timing-function: cubic-bezier(.4,0,.2,1)
+ transition-property: background-color
+
+ td
+ position: relative
+ height: 48px
+ padding: 12px 18px
+ // text-align: right
+
+j|SimpleTable
+ IViewport: ClassReference("org.apache.royale.html.supportClasses.ScrollingViewport")
+ IViewportModel: ClassReference("org.apache.royale.html.beads.models.ViewportModel")
+
+j|Table
+ // IBeadLayout: ClassReference("org.apache.royale.html.beads.layouts.SimpleTableLayout")
+ // IBeadView: ClassReference("org.apache.royale.jewel.beads.views.TableView")
+
+ // mimic SWF version which does not support border-collapse
+
+j|TableHeader
+
+j|TableCell
+
+@media -royale-swf
+ j|Table
+ // IBorderBead: ClassReference("org.apache.royale.html.beads.SingleLineBorderBead")
+ // IBackgroundBead: ClassReference("org.apache.royale.html.beads.SolidBackgroundBead")
+
+ j|TableCell
+ // IBeadLayout: ClassReference("org.apache.royale.html.beads.layouts.TableCellLayout")
+ // IBeadView: ClassReference("org.apache.royale.html.beads.TableCellView")
+
+ j|TableHeader
+ // IBeadLayout: ClassReference("org.apache.royale.html.beads.layouts.TableHeaderLayout")
+ // IBeadView: ClassReference("org.apache.royale.html.beads.TableCellView")
\ No newline at end of file
diff --git a/frameworks/projects/Jewel/src/main/sass/defaults.sass b/frameworks/projects/Jewel/src/main/sass/defaults.sass
index d5aa50b..065a751 100644
--- a/frameworks/projects/Jewel/src/main/sass/defaults.sass
+++ b/frameworks/projects/Jewel/src/main/sass/defaults.sass
@@ -42,6 +42,7 @@
@import "components/radiobutton"
@import "components/sectioncontent"
@import "components/slider"
+@import "components/table"
@import "components/text"
@import "components/textinput"
@import "components/titlebar"
diff --git a/frameworks/themes/JewelTheme/src/main/resources/defaults.css b/frameworks/themes/JewelTheme/src/main/resources/defaults.css
index 810ed3c..d829f85 100644
--- a/frameworks/themes/JewelTheme/src/main/resources/defaults.css
+++ b/frameworks/themes/JewelTheme/src/main/resources/defaults.css
@@ -527,6 +527,30 @@ j|Card {
border-radius: 3px;
}
+.jewel.table {
+ background: linear-gradient(white, #f3f3f3);
+ border: 1px solid #b3b3b3;
+ box-shadow: inset 0 1px 0 white;
+ border-radius: 0.25rem;
+}
+.jewel.table th:first-of-type {
+ border-left: 0px;
+}
+.jewel.table th {
+ font-weight: 700;
+ line-height: 24px;
+ font-size: 1em;
+ color: #808080;
+ border-left: 1px solid #d9d9d9;
+}
+.jewel.table td:first-of-type {
+ border-left: 0px;
+}
+.jewel.table td {
+ border-top: 1px solid #d9d9d9;
+ border-left: 1px solid #d9d9d9;
+}
+
.jewel.textinput {
font-weight: 400;
color: #808080;
diff --git a/frameworks/themes/JewelTheme/src/main/sass/components-primary/_table.sass b/frameworks/themes/JewelTheme/src/main/sass/components-primary/_table.sass
new file mode 100644
index 0000000..adefed3
--- /dev/null
+++ b/frameworks/themes/JewelTheme/src/main/sass/components-primary/_table.sass
@@ -0,0 +1,54 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+// 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.
+//
+////////////////////////////////////////////////////////////////////////////////
+
+// Jewel Table
+
+// Table variables
+$table-border-radius: $border-radius
+
+.jewel.table
+
+ @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: $table-border-radius
+
+ th:first-of-type
+ border-left: 0px
+ th
+ font-weight: 700
+ line-height: 24px
+ font-size: $font-size
+ color: $default-font-color
+ border-left: 1px solid $default-color
+
+ td:first-of-type
+ border-left: 0px
+ td
+ border-top: 1px solid $default-color
+ border-left: 1px solid $default-color
+
+ // border-bottom: 1px solid darken($light-color, 20%)
+
+// .jewel.tableheader
+// border: 1px solid black
\ 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 5e23041..de61c8a 100644
--- a/frameworks/themes/JewelTheme/src/main/sass/defaults.sass
+++ b/frameworks/themes/JewelTheme/src/main/sass/defaults.sass
@@ -43,6 +43,7 @@
@import "components-primary/navigation"
@import "components-primary/radiobutton"
@import "components-primary/slider"
+@import "components-primary/table"
@import "components-primary/textinput"
@import "components-primary/titlebar"
@import "components-primary/topappbar"