Repository: 12rambau/sepal_ui

Issue:
add posibility to add text in the map_btn 
The current implementation of the map_btn only authorize to use logos. It would be nice to let the opportunity to use letters as in the SEPAL main framework (3 letters only in capital)

Discussion:

Patch:
diff --git a/sepal_ui/mapping/aoi_control.py b/sepal_ui/mapping/aoi_control.py
index 01a6aa48..ae143d2c 100644
--- a/sepal_ui/mapping/aoi_control.py
+++ b/sepal_ui/mapping/aoi_control.py
@@ -36,7 +36,7 @@ class AoiControl(WidgetControl):
         kwargs["position"] = kwargs.pop("position", "topright")
 
         # create a hoverable btn
-        btn = MapBtn(logo="fas fa-search-location", v_on="menu.on")
+        btn = MapBtn(content="fas fa-search-location", v_on="menu.on")
         slot = {"name": "activator", "variable": "menu", "children": btn}
         self.aoi_list = sw.ListItemGroup(children=[], v_model="")
         w_list = sw.List(
diff --git a/sepal_ui/mapping/fullscreen_control.py b/sepal_ui/mapping/fullscreen_control.py
index 5e23c1d6..2855fa72 100644
--- a/sepal_ui/mapping/fullscreen_control.py
+++ b/sepal_ui/mapping/fullscreen_control.py
@@ -43,7 +43,7 @@ class FullScreenControl(WidgetControl):
         self.zoomed = fullscreen
 
         # create a btn
-        self.w_btn = MapBtn(logo=self.ICONS[self.zoomed])
+        self.w_btn = MapBtn(self.ICONS[self.zoomed])
 
         # overwrite the widget set in the kwargs (if any)
         kwargs["widget"] = self.w_btn
@@ -88,7 +88,7 @@ class FullScreenControl(WidgetControl):
         self.zoomed = not self.zoomed
 
         # change button icon
-        self.w_btn.logo.children = [self.ICONS[self.zoomed]]
+        self.w_btn.children[0].children = [self.ICONS[self.zoomed]]
 
         # zoom
         self.template.send({"method": self.METHODS[self.zoomed], "args": []})
diff --git a/sepal_ui/mapping/map_btn.py b/sepal_ui/mapping/map_btn.py
index ab55e1c8..0ea13364 100644
--- a/sepal_ui/mapping/map_btn.py
+++ b/sepal_ui/mapping/map_btn.py
@@ -7,26 +7,26 @@ from sepal_ui.frontend.styles import map_btn_style
 class MapBtn(v.Btn, sw.SepalWidget):
     """
     Btn specifically design to be displayed on a map. It matches all the characteristics of
-    the classic leaflet btn but as they are from ipyvuetify we can use them in combination with Menu to produce on-the-map. The MapBtn is responsive to theme changes.
-    Tiles. It only accept icon as children as the space is very limited.
+    the classic leaflet btn but as they are from ipyvuetify we can use them in combination with Menu to produce on-the-map tiles.
+    The MapBtn is responsive to theme changes. It only accept icon or 3 letters as children as the space is very limited.
 
     Args:
-        logo (str): a fas/mdi fully qualified name
+        content (str): a fas/mdi fully qualified name or a string name. If a string name is used, only the 3 first letters will be displayed.
     """
 
-    logo = None
-    "(sw.Icon): a sw.Icon"
-
-    def __init__(self, logo, **kwargs):
+    def __init__(self, content, **kwargs):
 
         # create the icon
-        self.logo = sw.Icon(small=True, children=[logo])
+        if content.startswith("mdi-") or content.startswith("fas fa-"):
+            content = sw.Icon(small=True, children=[content])
+        else:
+            content = content[: min(3, len(content))].upper()
 
         # some parameters are overloaded to match the map requirements
         kwargs["color"] = "text-color"
         kwargs["outlined"] = True
         kwargs["style_"] = " ".join([f"{k}: {v};" for k, v in map_btn_style.items()])
-        kwargs["children"] = [self.logo]
+        kwargs["children"] = [content]
         kwargs["icon"] = False
 
         super().__init__(**kwargs)
diff --git a/sepal_ui/mapping/value_inspector.py b/sepal_ui/mapping/value_inspector.py
index ecc52e72..96508ba3 100644
--- a/sepal_ui/mapping/value_inspector.py
+++ b/sepal_ui/mapping/value_inspector.py
@@ -54,7 +54,7 @@ class ValueInspector(WidgetControl):
         )
 
         # create a clickable btn
-        btn = MapBtn(logo="fas fa-crosshairs", v_on="menu.on")
+        btn = MapBtn("fas fa-crosshairs", v_on="menu.on")
         slot = {"name": "activator", "variable": "menu", "children": btn}
         close_btn = sw.Icon(children=["fas fa-times"], small=True)
         title = sw.Html(tag="h4", children=[ms.v_inspector.title])


Test patch:
diff --git a/tests/test_FullScreenControl.py b/tests/test_FullScreenControl.py
index 39141edf..148242b8 100644
--- a/tests/test_FullScreenControl.py
+++ b/tests/test_FullScreenControl.py
@@ -14,7 +14,7 @@ class TestFullScreenControl:
         assert isinstance(control, sm.FullScreenControl)
         assert control in map_.controls
         assert control.zoomed is False
-        assert "fas fa-expand" in control.w_btn.logo.children
+        assert "fas fa-expand" in control.w_btn.children[0].children
 
         return
 
@@ -29,12 +29,12 @@ class TestFullScreenControl:
         control.toggle_fullscreen(None, None, None)
 
         assert control.zoomed is True
-        assert "fas fa-compress" in control.w_btn.logo.children
+        assert "fas fa-compress" in control.w_btn.children[0].children
 
         # click again to reset to initial state
         control.toggle_fullscreen(None, None, None)
 
         assert control.zoomed is False
-        assert "fas fa-expand" in control.w_btn.logo.children
+        assert "fas fa-expand" in control.w_btn.children[0].children
 
         return
diff --git a/tests/test_MapBtn.py b/tests/test_MapBtn.py
index 0dd605b8..9a9d9c2f 100644
--- a/tests/test_MapBtn.py
+++ b/tests/test_MapBtn.py
@@ -1,11 +1,29 @@
 from sepal_ui import mapping as sm
+from sepal_ui import sepalwidgets as sw
 
 
 class TestMapBtn:
-    def test_map_btn(self):
+    def test_init(self):
 
+        # fas icon
         map_btn = sm.MapBtn("fas fa-folder")
-
         assert isinstance(map_btn, sm.MapBtn)
+        assert isinstance(map_btn.children[0], sw.Icon)
+        assert map_btn.children[0].children[0] == "fas fa-folder"
+
+        # mdi icon
+        map_btn = sm.MapBtn("mdi-folder")
+        assert isinstance(map_btn.children[0], sw.Icon)
+        assert map_btn.children[0].children[0] == "mdi-folder"
+
+        # small text
+        map_btn = sm.MapBtn("to")
+        assert isinstance(map_btn.children[0], str)
+        assert map_btn.children[0] == "TO"
+
+        # long text
+        map_btn = sm.MapBtn("toto")
+        assert isinstance(map_btn.children[0], str)
+        assert map_btn.children[0] == "TOT"
 
         return