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 9f7ae31 adding new items to Jewel Table
9f7ae31 is described below
commit 9f7ae310901ce2cb82c13579506cc0184894f4ba
Author: Carlos Rovira <carlosrov...@apache.org>
AuthorDate: Thu Aug 23 19:42:43 2018 +0200
adding new items to Jewel Table
---
.../src/main/royale/TablePlayGround.mxml | 40 ++--
.../TableCellCloseIconItemRenderer.mxml | 23 +-
.../src/main/royale/models/TablesModel.as | 16 +-
.../projects/Jewel/src/main/resources/defaults.css | 7 +-
.../Jewel/src/main/resources/jewel-manifest.xml | 1 +
.../AddTableItemRendererForArrayListData.as | 247 +++++++++++++++++++++
.../TableItemRendererFactoryForCollectionView.as | 25 +--
.../jewel/itemRenderers/TableItemRenderer.as | 6 +-
.../Jewel/src/main/sass/components/_table.sass | 7 +-
9 files changed, 307 insertions(+), 65 deletions(-)
diff --git a/examples/royale/JewelExample/src/main/royale/TablePlayGround.mxml
b/examples/royale/JewelExample/src/main/royale/TablePlayGround.mxml
index e905c3d..de9c76a 100644
--- a/examples/royale/JewelExample/src/main/royale/TablePlayGround.mxml
+++ b/examples/royale/JewelExample/src/main/royale/TablePlayGround.mxml
@@ -176,26 +176,29 @@ limitations under the License.
<html:H3 text="Jewel Table"/>
<j:Table id="table" width="440" change="onChange(event)">
+ <j:TableColumn dataField="icon" label="" align="center"
itemRenderer="itemRenderers.TableCellCloseIconItemRenderer"/>
<j:TableColumn dataField="guitarrist"
label="Guitarrist"/>
<j:TableColumn dataField="album" label="Album"
align="center" columnLabelAlign="center"/>
- <j:TableColumn dataField="year" label="Release Year"
align="right" columnLabelAlign="right"
-
itemRenderer="itemRenderers.TableCellCloseIconItemRenderer"/>
+ <j:TableColumn dataField="year" label="Release Year"
align="right" columnLabelAlign="right"/>
<!--item renderers can
be get from CSS or declared in column but must extend TableItemRenderer -->
<j:beads>
<js:ConstantBinding sourceID="tablesModel"
sourcePropertyName="guitarrists"
destinationPropertyName="dataProvider" />
-
<j:DynamicRemoveAllItemRendererForArrayListData/>
+ <j:AddTableItemRendererForArrayListData/>
+ <j:DynamicRemoveItemRendererForArrayListData/>
<j:DynamicUpdateItemRendererForArrayListData/>
+
<j:DynamicRemoveAllItemRendererForArrayListData/>
</j:beads>
</j:Table>
<j:Label id="selected"/>
<j:ControlBar>
<j:Button click="clearTable()" text="Change Data"
emphasis="primary"/>
- <j:Button text="Remove all data"
click="removeAllData()"/>
- <j:Button click="changeCell()" text="Change Cell"/>
+ <j:Button text="Add item" click="addItem()"/>
+ <j:Button text="Remove first item"
click="removeItemAt()"/>
<j:Button text="Update first item"
click="updateFirstItem()"/>
+ <j:Button text="Remove all data"
click="removeAllData()"/>
</j:ControlBar>
</j:Card>
@@ -204,9 +207,6 @@ limitations under the License.
<![CDATA[
import org.apache.royale.collections.ArrayList;
- private function changeCell():void
- {
- }
private function onChange(event:Event):void {
selected.text = "Selected: " + table.selectedItemProperty;
@@ -215,17 +215,22 @@ limitations under the License.
private function clearTable():void
{
table.dataProvider = new ArrayList([
- {guitarrist: "Ssi", album:
"Paasadasdssion & Warfare", year: "1990"},
- {guitarrist: "Steve Morse", album:
"Southern Steel", year: "1991"},
- {guitarrist: "Yngwie Malmsteen", album:
"sfsdf Force", year: "2984"},
- {guitarrist: "Joe sf", album: "Surfing
With The Alien", year: "1987"},
- {guitarrist: "Mark Knopfler", album:
"Local sf", year: "1983"}
+ {icon: MaterialIconType.CLOSE,
guitarrist: "Ssi", album: "Paasadasdssion & Warfare", year: "1990"},
+ {icon: MaterialIconType.CLOSE,
guitarrist: "Steve Morse", album: "Southern Steel", year: "1991"},
+ {icon: MaterialIconType.CLOSE,
guitarrist: "Yngwie Malmsteen", album: "sfsdf Force", year: "2984"},
+ {icon: MaterialIconType.CLOSE,
guitarrist: "Joe sf", album: "Surfing With The Alien", year: "1987"},
+ {icon: MaterialIconType.CLOSE,
guitarrist: "Mark Knopfler", album: "Local sf", year: "1983"}
]);
}
- public function removeAllData():void
+ private function addItem():void
{
- tablesModel.guitarrists.removeAll();
+ tablesModel.guitarrists.addItem({icon:
MaterialIconType.CLOSE, guitarrist: "Eric Johnson", album: "Venus Isle", year:
"1996"});
+ }
+
+ public function removeItemAt():void
+ {
+ tablesModel.guitarrists.removeItemAt(0);
}
public function updateFirstItem():void
@@ -234,6 +239,11 @@ limitations under the License.
item.guitarrist = "Mango";
tablesModel.guitarrists.itemUpdated(item);
}
+
+ public function removeAllData():void
+ {
+ tablesModel.guitarrists.removeAll();
+ }
]]>
</fx:Script>
diff --git
a/examples/royale/JewelExample/src/main/royale/itemRenderers/TableCellCloseIconItemRenderer.mxml
b/examples/royale/JewelExample/src/main/royale/itemRenderers/TableCellCloseIconItemRenderer.mxml
index 8ed5cad..484a466 100644
---
a/examples/royale/JewelExample/src/main/royale/itemRenderers/TableCellCloseIconItemRenderer.mxml
+++
b/examples/royale/JewelExample/src/main/royale/itemRenderers/TableCellCloseIconItemRenderer.mxml
@@ -21,24 +21,19 @@ limitations under the License.
xmlns:j="library://ns.apache.org/royale/jewel"
xmlns:js="library://ns.apache.org/royale/basic"
xmlns:html="library://ns.apache.org/royale/html"
- xmlns="http://www.w3.org/1999/xhtml";>
-
- <fx:Script>
- <![CDATA[
- [Bindable("dataChange")]
- public function get guitarrist():Object
- {
- return data;
- }
- ]]>
- </fx:Script>
-
+ xmlns="http://www.w3.org/1999/xhtml";
+ hoverable="false"
+ selectable="false">
+
<mdl:beads>
<js:ItemRendererDataBinding/>
</mdl:beads>
- <html:Span text="{guitarrist.year}"/>
- <js:FontIcon text="{MaterialIconType.CLOSE}" material="true"/>
+ <j:IconButton emphasis="primary" width="24" height="24" style="padding:
0px; border-radius: 50%">
+ <j:icon>
+ <js:FontIcon text="{data.icon}" material="true" size="18"/>
+ </j:icon>
+ </j:IconButton>
</j:TableItemRenderer>
diff --git a/examples/royale/JewelExample/src/main/royale/models/TablesModel.as
b/examples/royale/JewelExample/src/main/royale/models/TablesModel.as
index 02ce862..0f986e9 100644
--- a/examples/royale/JewelExample/src/main/royale/models/TablesModel.as
+++ b/examples/royale/JewelExample/src/main/royale/models/TablesModel.as
@@ -23,14 +23,14 @@ package models
public class TablesModel
{
private var _guitarrists:ArrayList = new ArrayList([
- {guitarrist: "Steve Vai", album: "Passion & Warfare",
year: "1990"},
- {guitarrist: "Joe Satriani", album: "Surfing With The
Alien", year: "1987"},
- {guitarrist: "Yngwie Malmsteen", album: "Rising Force",
year: "1984"},
- {guitarrist: "Steve Morse", album: "Southern Steel",
year: "1991"},
- {guitarrist: "Mark Knopfler", album: "Local Hero",
year: "1983"},
- {guitarrist: "Eric Sardinas", album: "Treat Me Right",
year: "1999"},
- {guitarrist: "Mike Oldfield", album: "Tubular Bells",
year: "1973"},
- {guitarrist: "Van Halen", album: "1984", year: "1984"}
+ {icon: MaterialIconType.CLOSE, guitarrist: "Steve Vai",
album: "Passion & Warfare", year: "1990"},
+ {icon: MaterialIconType.CLOSE, guitarrist: "Joe
Satriani", album: "Surfing With The Alien", year: "1987"},
+ {icon: MaterialIconType.CLOSE, guitarrist: "Yngwie
Malmsteen", album: "Rising Force", year: "1984"},
+ {icon: MaterialIconType.CLOSE, guitarrist: "Steve
Morse", album: "Southern Steel", year: "1991"},
+ {icon: MaterialIconType.CLOSE, guitarrist: "Mark
Knopfler", album: "Local Hero", year: "1983"},
+ {icon: MaterialIconType.CLOSE, guitarrist: "Eric
Sardinas", album: "Treat Me Right", year: "1999"},
+ {icon: MaterialIconType.CLOSE, guitarrist: "Mike
Oldfield", album: "Tubular Bells", year: "1973"},
+ {icon: MaterialIconType.CLOSE, guitarrist: "Van Halen",
album: "1984", year: "1984"}
]);
public function get guitarrists():ArrayList
diff --git a/frameworks/projects/Jewel/src/main/resources/defaults.css
b/frameworks/projects/Jewel/src/main/resources/defaults.css
index 014d0f1..1c29c4d 100644
--- a/frameworks/projects/Jewel/src/main/resources/defaults.css
+++ b/frameworks/projects/Jewel/src/main/resources/defaults.css
@@ -2941,9 +2941,6 @@ j|Slider {
.jewel.table .jewel.tablecell {
position: relative;
}
-.jewel.table .jewel.tablecell > * {
- padding: 12px;
-}
.jewel.table.fixedHeader {
table-layout: fixed;
}
@@ -2972,6 +2969,7 @@ j|Table {
}
.jewel.tableitem {
+ padding: 12px;
cursor: pointer;
text-decoration: none;
align-items: center;
@@ -2979,6 +2977,9 @@ j|Table {
line-height: normal !important;
overflow: hidden;
}
+.jewel.tableitem.with-childs {
+ padding: 6px;
+}
.jewel.tableitem.calendar {
border-radius: 10%;
}
diff --git a/frameworks/projects/Jewel/src/main/resources/jewel-manifest.xml
b/frameworks/projects/Jewel/src/main/resources/jewel-manifest.xml
index d460783..7820f6f 100644
--- a/frameworks/projects/Jewel/src/main/resources/jewel-manifest.xml
+++ b/frameworks/projects/Jewel/src/main/resources/jewel-manifest.xml
@@ -125,6 +125,7 @@
<component id="DynamicUpdateItemRendererForArrayListData"
class="org.apache.royale.jewel.beads.itemRenderers.DynamicUpdateItemRendererForArrayListData"
/>
<component id="DynamicRemoveAllItemRendererForArrayListData"
class="org.apache.royale.jewel.beads.itemRenderers.DynamicRemoveAllItemRendererForArrayListData"
/>
+ <component id="AddTableItemRendererForArrayListData"
class="org.apache.royale.jewel.beads.itemRenderers.AddTableItemRendererForArrayListData"
/>
<!-- <component id="JewelLabelViewBead"
class="org.apache.royale.jewel.beads.views.JewelLabelViewBead"/> -->
</componentPackage>
diff --git
a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/itemRenderers/AddTableItemRendererForArrayListData.as
b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/itemRenderers/AddTableItemRendererForArrayListData.as
new file mode 100644
index 0000000..eaee0cd
--- /dev/null
+++
b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/itemRenderers/AddTableItemRendererForArrayListData.as
@@ -0,0 +1,247 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+// 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.itemRenderers
+{
+ import org.apache.royale.core.IBead;
+ import org.apache.royale.core.IDataProviderModel;
+ import org.apache.royale.core.IItemRendererClassFactory;
+ import org.apache.royale.core.IItemRendererParent;
+ import org.apache.royale.core.IList;
+ import org.apache.royale.core.IListPresentationModel;
+ import org.apache.royale.core.ISelectableItemRenderer;
+ import org.apache.royale.core.ISelectionModel;
+ import org.apache.royale.core.IStrand;
+ import org.apache.royale.core.SimpleCSSStyles;
+ import org.apache.royale.core.UIBase;
+ import org.apache.royale.events.CollectionEvent;
+ import org.apache.royale.events.Event;
+ import org.apache.royale.events.IEventDispatcher;
+ import org.apache.royale.utils.loadBeadFromValuesManager;
+ import org.apache.royale.jewel.beads.models.TableModel;
+ import org.apache.royale.jewel.supportClasses.table.TableColumn;
+ import org.apache.royale.jewel.beads.itemRenderers.ITextItemRenderer;
+ import org.apache.royale.jewel.supportClasses.table.TBodyContentArea;
+ import org.apache.royale.html.supportClasses.DataItemRenderer;
+ import org.apache.royale.collections.ICollectionView;
+
+ /**
+ * Handles the adding of an itemRenderer in a Table component once the
corresponding datum has been added
+ * from the IDataProviderModel.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.0
+ */
+ public class AddTableItemRendererForArrayListData implements IBead
+ {
+ /**
+ * Constructor
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.0
+ */
+ public function AddTableItemRendererForArrayListData()
+ {
+ }
+
+ protected var _strand:IStrand;
+
+ protected var labelField:String;
+
+ /**
+ * @copy org.apache.royale.core.IStrand
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.0
+ */
+ public function set strand(value:IStrand):void
+ {
+ _strand = value;
+
IEventDispatcher(value).addEventListener("initComplete", initComplete);
+ }
+
+ /**
+ * finish setup
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.8
+ */
+ protected function initComplete(event:Event):void
+ {
+
IEventDispatcher(_strand).removeEventListener("initComplete", initComplete);
+
+ model = _strand.getBeadByType(ISelectionModel) as
TableModel;
+ labelField = model.labelField;
+
+ model.addEventListener("dataProviderChanged",
dataProviderChangeHandler);
+
+ // invoke now in case "dataProviderChanged" has already
been dispatched.
+ dataProviderChangeHandler(null);
+ }
+
+ /**
+ * @private
+ */
+ protected function dataProviderChangeHandler(event:Event):void
+ {
+ var dp:IEventDispatcher = model.dataProvider as
IEventDispatcher;
+ if (!dp)
+ return;
+
+ // listen for individual items being added in the
future.
+ dp.addEventListener(CollectionEvent.ITEM_ADDED,
handleItemAdded);
+ }
+
+ /**
+ * Handles the itemRemoved event by removing the item.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.0
+ */
+ protected function handleItemAdded(event:CollectionEvent):void
+ {
+ var presentationModel:IListPresentationModel =
_strand.getBeadByType(IListPresentationModel) as IListPresentationModel;
+ var column:TableColumn;
+ var tbody:TBodyContentArea = itemRendererParent as
TBodyContentArea;
+ var ir:ITextItemRenderer;
+
+ var index:int = event.index * model.columns.length;
+ var rowIndex:int = index;
+ for(var j:int = 0; j < model.columns.length; j++)
+ {
+ column = model.columns[j] as TableColumn;
+
+ if(column.itemRenderer != null)
+ {
+ ir = column.itemRenderer.newInstance()
as ITextItemRenderer;
+ } else
+ {
+ ir =
itemRendererFactory.createItemRenderer(tbody) as ITextItemRenderer;
+ }
+
+ labelField = column.dataField;
+
+ (ir as DataItemRenderer).dataField = labelField;
+ (ir as DataItemRenderer).rowIndex = event.index;
+ (ir as DataItemRenderer).columnIndex = j;
+
+ fillRenderer(index++, event.item, (ir as
ISelectableItemRenderer), presentationModel);
+
+ if(column.align != "")
+ {
+ ir.align = column.align;
+ }
+ }
+
+ // update the index values in the itemRenderers to
correspond to their shifted positions.
+ var n:int = tbody.numElements;
+ var d:DataItemRenderer;
+ index = event.index * model.columns.length;
+ for (var i:int = event.index; i < n; i++)
+ {
+ d = tbody.getItemRendererForIndex(i) as
DataItemRenderer;
+ d.index = i;
+ }
+
+ (_strand as IEventDispatcher).dispatchEvent(new
Event("layoutNeeded"));
+ }
+
+ private var _itemRendererParent: IItemRendererParent;
+
+ /**
+ * The org.apache.royale.core.IItemRendererParent used
+ * to generate instances of item renderers.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.0
+ */
+ public function get itemRendererParent():IItemRendererParent
+ {
+ if (_itemRendererParent == null) {
+ var list:IList = _strand as IList;
+ _itemRendererParent = list.dataGroup;
+ }
+ return _itemRendererParent;
+ }
+
+ private var _itemRendererFactory:IItemRendererClassFactory;
+
+ /**
+ * The org.apache.royale.core.IItemRendererClassFactory used
+ * to generate instances of item renderers.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.8
+ */
+ public function get itemRendererFactory():IItemRendererClassFactory
+ {
+ if(!_itemRendererFactory)
+ _itemRendererFactory =
loadBeadFromValuesManager(IItemRendererClassFactory,
"iItemRendererClassFactory", _strand) as IItemRendererClassFactory;
+
+ return _itemRendererFactory;
+ }
+
+ protected var model:TableModel;
+
+ /**
+ * @private
+ */
+ protected function fillRenderer(index:int,
+ item:Object,
+ itemRenderer:ISelectableItemRenderer,
+
presentationModel:IListPresentationModel):void
+ {
+ itemRendererParent.addItemRendererAt(itemRenderer, index);
+
+ itemRenderer.labelField = labelField;
+
+ if (presentationModel) {
+ var style:SimpleCSSStyles = new SimpleCSSStyles();
+ style.marginBottom = presentationModel.separatorThickness;
+ UIBase(itemRenderer).style = style;
+ UIBase(itemRenderer).height = presentationModel.rowHeight;
+ UIBase(itemRenderer).percentWidth = 100;
+ }
+
+ setData(itemRenderer, item, index);
+ }
+
+ /**
+ * @private
+ */
+ protected function setData(itemRenderer:ISelectableItemRenderer,
data:Object, index:int):void
+ {
+ itemRenderer.index = index;
+ itemRenderer.data = data;
+ }
+ }
+}
diff --git
a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/itemRenderers/TableItemRendererFactoryForCollectionView.as
b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/itemRenderers/TableItemRendererFactoryForCollectionView.as
index 6b42fee..2d0db87 100644
---
a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/itemRenderers/TableItemRendererFactoryForCollectionView.as
+++
b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/itemRenderers/TableItemRendererFactoryForCollectionView.as
@@ -105,25 +105,6 @@ package org.apache.royale.jewel.beads.itemRenderers
dataProviderChangeHandler(null);
}
- protected var _dataProviderModel:IDataProviderModel;
-
- /**
- * The model holding the dataProvider.
- *
- * @langversion 3.0
- * @playerversion Flash 10.2
- * @playerversion AIR 2.6
- * @productversion Royale 0.9
- * @royaleignorecoercion
org.apache.royale.core.IDataProviderModel
- */
- public function get dataProviderModel():IDataProviderModel
- {
- if (_dataProviderModel == null) {
- _dataProviderModel =
_strand.getBeadByType(IBeadModel) as IDataProviderModel;
- }
- return _dataProviderModel;
- }
-
protected var labelField:String;
private var _itemRendererFactory:IItemRendererClassFactory;
@@ -170,9 +151,9 @@ package org.apache.royale.jewel.beads.itemRenderers
protected function dataProviderChangeHandler(event:Event):void
{
// -- 1) CLEANING PHASE
- if (!dataProviderModel)
+ if (!model)
return;
- var dp:ICollectionView = dataProviderModel.dataProvider
as ICollectionView;
+ var dp:ICollectionView = model.dataProvider as
ICollectionView;
if (!dp)
return;
@@ -194,7 +175,7 @@ package org.apache.royale.jewel.beads.itemRenderers
// -- 2) CREATION PHASE
var presentationModel:IListPresentationModel =
_strand.getBeadByType(IListPresentationModel) as IListPresentationModel;
- labelField = dataProviderModel.labelField;
+ labelField = model.labelField;
var column:TableColumn;
var ir:ITextItemRenderer;
diff --git
a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/itemRenderers/TableItemRenderer.as
b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/itemRenderers/TableItemRenderer.as
index 83dfae5..76a2346 100644
---
a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/itemRenderers/TableItemRenderer.as
+++
b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/itemRenderers/TableItemRenderer.as
@@ -50,7 +50,11 @@ package org.apache.royale.jewel.itemRenderers
{
super();
- typeNames = "jewel tableitem";
+ typeNames = "jewel tableitem";
+ if(MXMLDescriptor != null)
+ {
+ typeNames += " with-childs";
+ }
textAlign = new TextAlign();
addBead(textAlign);
diff --git a/frameworks/projects/Jewel/src/main/sass/components/_table.sass
b/frameworks/projects/Jewel/src/main/sass/components/_table.sass
index daaa4da..732194e 100644
--- a/frameworks/projects/Jewel/src/main/sass/components/_table.sass
+++ b/frameworks/projects/Jewel/src/main/sass/components/_table.sass
@@ -81,8 +81,8 @@ $tableitem-min-height: 34px
// td
.jewel.tablecell
position: relative
- > *
- padding: 12px
+ // > *
+ // padding: 12px
&.fixedHeader
table-layout: fixed
@@ -115,6 +115,7 @@ j|Table
.jewel.tableitem
+ padding: 12px
cursor: pointer
text-decoration: none
align-items: center
@@ -122,6 +123,8 @@ j|Table
line-height: normal !important
overflow: hidden
+ &.with-childs
+ padding: 6px
&.calendar
border-radius: 10%
