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 2019/12/28 19:37:11 UTC
[royale-asjs] branch develop updated: jewel-datagrid: transfer
styles to themes and update to use variables to make SASS generate right
values for different colors schemes
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 42bad18 jewel-datagrid: transfer styles to themes and update to use variables to make SASS generate right values for different colors schemes
42bad18 is described below
commit 42bad18770d4b247c67df8ede412b7555dc187df
Author: Carlos Rovira <ca...@apache.org>
AuthorDate: Sat Dec 28 20:36:58 2019 +0100
jewel-datagrid: transfer styles to themes and update to use variables to make SASS generate right values for different colors schemes
---
.../projects/Jewel/src/main/resources/defaults.css | 32 +---------
.../Jewel/src/main/sass/components/_datagrid.sass | 73 +++-------------------
.../JewelTheme/src/main/resources/defaults.css | 55 ++++++++++++++++
.../main/sass/components-emphasized/_datagrid.sass | 28 +++++++++
.../main/sass/components-primary/_datagrid.sass | 65 +++++++++++++++++++
.../main/sass/components-secondary/_datagrid.sass | 28 +++++++++
.../themes/JewelTheme/src/main/sass/defaults.sass | 3 +
7 files changed, 188 insertions(+), 96 deletions(-)
diff --git a/frameworks/projects/Jewel/src/main/resources/defaults.css b/frameworks/projects/Jewel/src/main/resources/defaults.css
index 753cba1..4261373 100644
--- a/frameworks/projects/Jewel/src/main/resources/defaults.css
+++ b/frameworks/projects/Jewel/src/main/resources/defaults.css
@@ -493,45 +493,15 @@ j|ComboBoxPopUp {
}
.jewel.datagrid {
- width: 220px;
- height: 240px;
display: flex;
position: relative;
}
.jewel.datagrid .jewel.buttonbar.header {
width: 100%;
}
-.jewel.datagrid .jewel.buttonbar.header .jewel.button.first {
- border-bottom-left-radius: 0;
-}
-.jewel.datagrid .jewel.buttonbar.header .jewel.button.last {
- border-bottom-right-radius: 0;
-}
.jewel.datagrid .listarea {
- width: auto;
position: absolute;
- border-top-width: 0px;
- border-left-width: 0px;
- border-right-width: 0px;
- border-bottom-width: 1px;
- border-bottom-left-radius: 0.25rem;
- border-bottom-right-radius: 0.25rem;
- border-style: solid;
- border-color: #b3b3b3;
-}
-.jewel.datagrid .jewel.list.column {
- border-radius: 0px;
- border-bottom-width: 0px;
- box-shadow: inset 0px 1px 1px 0px rgba(0, 0, 0, 0.25);
-}
-.jewel.datagrid .jewel.list.column.first {
- border-bottom-left-radius: 0.25rem;
-}
-.jewel.datagrid .jewel.list.column.last {
- border-bottom-right-radius: 0.25rem;
-}
-.jewel.datagrid .jewel.list.column .jewel.item {
- border-bottom: 1px solid #efefef;
+ width: auto;
}
j|DataGrid {
diff --git a/frameworks/projects/Jewel/src/main/sass/components/_datagrid.sass b/frameworks/projects/Jewel/src/main/sass/components/_datagrid.sass
index 8707e0e..09ea479 100644
--- a/frameworks/projects/Jewel/src/main/sass/components/_datagrid.sass
+++ b/frameworks/projects/Jewel/src/main/sass/components/_datagrid.sass
@@ -22,59 +22,29 @@ $border-radius: .25rem
// DataGrid variables
.jewel.datagrid
- width: 220px
- height: 240px
display: flex
position: relative
- // overflow: hidden
- // border: 1px solid red
-
+
.jewel.buttonbar.header
width: 100%
- // height: 38px // button
+ // height: 38px --> button.height
- .jewel.button
- &.first
- border-bottom-left-radius: 0
-
- &.last
- border-bottom-right-radius: 0
-
.listarea
- width: auto
- //top: 38px
- //height: dg.height-header-height
position: absolute
- border-top-width: 0px
- border-left-width: 0px
- border-right-width: 0px
- border-bottom-width: 1px
- border-bottom-left-radius: $border-radius
- border-bottom-right-radius: $border-radius
- border-style: solid
- border-color: #b3b3b3
+ width: auto
+ //top: 38px -> header.height
+ //height: datagrid.height - header.height
.jewel.list.column
- border-radius: 0px
- // border-top-width: 0px
- border-bottom-width: 0px
- box-shadow: inset 0px 1px 1px 0px rgba(0,0,0,0.25)
-
+
&.first
- // border-left: 0px
- // border-right: 0px
- border-bottom-left-radius: $border-radius
+
&.middle
&.last
- // border-left: 0px
- // border-right: 0px
- border-bottom-right-radius: $border-radius
.jewel.item
- border-bottom: 1px solid #efefef
-
-
+
j|DataGrid
IDataGridPresentationModel: ClassReference("org.apache.royale.jewel.beads.models.DataGridPresentationModel")
IBeadView: ClassReference("org.apache.royale.jewel.beads.views.DataGridView")
@@ -93,30 +63,3 @@ j|DataGridListArea
//Nothing to change from j|ButtonBar
j|DataGridButtonBar
-// flex-grow: 1
-
-// DynamicDataGrid {
-// IChangePropagator: ClassReference("org.apache.royale.html.beads.DataGridColumnChangePropagator")
-// IDataGridPresentationModel: ClassReference("org.apache.royale.html.beads.models.DataGridPresentationModel")
-// IBeadView: ClassReference("org.apache.royale.html.beads.DataGridView")
-// IBeadModel: ClassReference("org.apache.royale.html.beads.models.DataGridCollectionViewModel")
-// IBeadLayout: ClassReference("org.apache.royale.html.beads.layouts.DataGridLayout")
-// ColumnClass: ClassReference("org.apache.royale.html.supportClasses.DynamicDataGridColumnList")
-
-// background-color: #FFFFFF
-// border: 1px solid #222222
-// }
-
-// DynamicDataGridColumnList {
-// IBeadModel: ClassReference("org.apache.royale.html.beads.models.DataGridCollectionViewModel")
-// IBeadView: ClassReference("org.apache.royale.html.beads.ListView")
-// IBeadController: ClassReference("org.apache.royale.html.beads.controllers.ListSingleSelectionMouseController")
-// IBeadLayout: ClassReference("org.apache.royale.html.beads.layouts.VerticalLayout")
-// IDataProviderItemRendererMapper: ClassReference("org.apache.royale.html.beads.DataItemRendererFactoryForCollectionView")
-// IItemRendererClassFactory: ClassReference("org.apache.royale.core.ItemRendererClassFactory")
-// IItemRenderer: ClassReference("org.apache.royale.html.supportClasses.StringItemRenderer")
-// IViewport: ClassReference("org.apache.royale.html.supportClasses.Viewport")
-// IViewportModel: ClassReference("org.apache.royale.html.beads.models.ViewportModel")
-// border-style: none
-// background-color: #FFFFFF
-// }
\ No newline at end of file
diff --git a/frameworks/themes/JewelTheme/src/main/resources/defaults.css b/frameworks/themes/JewelTheme/src/main/resources/defaults.css
index bd56731..8631b48 100644
--- a/frameworks/themes/JewelTheme/src/main/resources/defaults.css
+++ b/frameworks/themes/JewelTheme/src/main/resources/defaults.css
@@ -301,6 +301,47 @@ j|Card {
background: url("data:image/svg+xml,%3Csvg viewBox='0 0 12 8' version='1.1' xmlns='http://www.w3.org/2000/svg'%3E%3Cg stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'%3E%3Cg transform='translate(0.000000, -1.000000)' fill='%23cccccc' fill-rule='nonzero'%3E%3Cg transform='translate(-2.000000, 0.000000)'%3E%3Cpolygon transform='translate(8.000000, 4.705000) scale(1, -1) translate(-8.000000, -4.705000) ' points='3.41 8.41 8 3.83 12.59 8.41 14 7 8 1 2 7'%3E%3C/polygon%3E%3C/g [...]
}
+.jewel.datagrid {
+ width: 220px;
+ height: 240px;
+}
+.jewel.datagrid .jewel.buttonbar.header .jewel.button.first {
+ border-bottom-left-radius: 0;
+}
+.jewel.datagrid .jewel.buttonbar.header .jewel.button.last {
+ border-bottom-right-radius: 0;
+}
+.jewel.datagrid .listarea {
+ border-top-width: 0px;
+ border-left-width: 0px;
+ border-right-width: 0px;
+ border-bottom-width: 1px;
+ border-bottom-left-radius: 0.25rem;
+ border-bottom-right-radius: 0.25rem;
+ border-style: solid;
+ border-color: #b3b3b3;
+}
+.jewel.datagrid .jewel.list.column {
+ border-radius: 0px;
+ border-bottom-width: 0px;
+ box-shadow: inset 0px 1px 1px 0px rgba(0, 0, 0, 0.25);
+}
+.jewel.datagrid .jewel.list.column.first {
+ border-bottom-left-radius: 0.25rem;
+}
+.jewel.datagrid .jewel.list.column.last {
+ border-bottom-right-radius: 0.25rem;
+}
+.jewel.datagrid .jewel.list.column .jewel.item {
+ border-bottom: 1px solid #ededed;
+}
+.jewel.datagrid .jewel.list.column .jewel.item.primary.hovered {
+ background: #75c5f5;
+}
+.jewel.datagrid .jewel.list.column .jewel.item.primary.selected, .jewel.datagrid .jewel.list.column .jewel.item.primary.selectable:active {
+ background: #5dbbf3;
+}
+
.jewel.datechooser .jewel.table {
background: white;
border: 1px solid #d9d9d9;
@@ -1263,6 +1304,13 @@ j|Wizard {
text-shadow: unset;
}
+.jewel.datagrid .jewel.list.column .jewel.item.secondary.hovered {
+ background: #f38663;
+}
+.jewel.datagrid .jewel.list.column .jewel.item.secondary.selected, .jewel.datagrid .jewel.list.column .jewel.item.secondary.selectable:active {
+ background: #f1744b;
+}
+
.jewel.item.secondary.hovered {
background: #EF5A2A;
}
@@ -1366,6 +1414,13 @@ a:active {
text-shadow: unset;
}
+.jewel.datagrid .jewel.list.column .jewel.item.emphasized.hovered {
+ background: #a8d46b;
+}
+.jewel.datagrid .jewel.list.column .jewel.item.emphasized.selected, .jewel.datagrid .jewel.list.column .jewel.item.emphasized.selectable:active {
+ background: #9cce58;
+}
+
.jewel.item.emphasized.hovered {
background: #8CC63C;
}
diff --git a/frameworks/themes/JewelTheme/src/main/sass/components-emphasized/_datagrid.sass b/frameworks/themes/JewelTheme/src/main/sass/components-emphasized/_datagrid.sass
new file mode 100644
index 0000000..0b2d0d5
--- /dev/null
+++ b/frameworks/themes/JewelTheme/src/main/sass/components-emphasized/_datagrid.sass
@@ -0,0 +1,28 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+// 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 DataGrid
+.jewel.datagrid
+ .jewel.list.column
+ .jewel.item
+ &.emphasized
+ &.hovered
+ background: lighten($emphasized-color, 12%)
+ &.selected, &.selectable:active
+ background: lighten($emphasized-color, 7%)
\ No newline at end of file
diff --git a/frameworks/themes/JewelTheme/src/main/sass/components-primary/_datagrid.sass b/frameworks/themes/JewelTheme/src/main/sass/components-primary/_datagrid.sass
new file mode 100644
index 0000000..c9690b9
--- /dev/null
+++ b/frameworks/themes/JewelTheme/src/main/sass/components-primary/_datagrid.sass
@@ -0,0 +1,65 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+// 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 DataGrid
+
+// DataGrid variables
+.jewel.datagrid
+ width: 220px
+ height: 240px
+
+ .jewel.buttonbar.header
+
+ .jewel.button
+ &.first
+ border-bottom-left-radius: 0
+
+ &.last
+ border-bottom-right-radius: 0
+
+ .listarea
+ border-top-width: 0px
+ border-left-width: 0px
+ border-right-width: 0px
+ border-bottom-width: 1px
+ border-bottom-left-radius: $border-radius
+ border-bottom-right-radius: $border-radius
+ border-style: solid
+ border-color: darken($default-color, 15%)
+
+ .jewel.list.column
+ border-radius: 0px
+ border-bottom-width: 0px
+ box-shadow: inset 0px 1px 1px 0px rgba(0,0,0,0.25)
+
+ &.first
+ border-bottom-left-radius: $border-radius
+ &.middle
+
+ &.last
+ border-bottom-right-radius: $border-radius
+
+ .jewel.item
+ 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
diff --git a/frameworks/themes/JewelTheme/src/main/sass/components-secondary/_datagrid.sass b/frameworks/themes/JewelTheme/src/main/sass/components-secondary/_datagrid.sass
new file mode 100644
index 0000000..079fd36
--- /dev/null
+++ b/frameworks/themes/JewelTheme/src/main/sass/components-secondary/_datagrid.sass
@@ -0,0 +1,28 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+// 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 DataGrid
+.jewel.datagrid
+ .jewel.list.column
+ .jewel.item
+ &.secondary
+ &.hovered
+ background: lighten($secondary-color, 12%)
+ &.selected, &.selectable:active
+ background: lighten($secondary-color, 7%)
\ 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 9d6257b..88d23d1 100644
--- a/frameworks/themes/JewelTheme/src/main/sass/defaults.sass
+++ b/frameworks/themes/JewelTheme/src/main/sass/defaults.sass
@@ -33,6 +33,7 @@
@import "components-primary/checkbox"
@import "components-primary/combobox"
@import "components-primary/controlbar"
+@import "components-primary/datagrid"
@import "components-primary/datechooser"
@import "components-primary/datefield"
@import "components-primary/divider"
@@ -67,6 +68,7 @@
@import "components-secondary/card"
@import "components-secondary/checkbox"
@import "components-secondary/controlbar"
+@import "components-secondary/datagrid"
@import "components-secondary/dropdownlist"
@import "components-secondary/itemRenderer"
@import "components-secondary/label"
@@ -85,6 +87,7 @@
@import "components-emphasized/card"
@import "components-emphasized/checkbox"
@import "components-emphasized/controlbar"
+@import "components-emphasized/datagrid"
@import "components-emphasized/dropdownlist"
@import "components-emphasized/itemRenderer"
@import "components-emphasized/label"