day 1 progress

Author: T-Dynamos

examples/search.py

@@ -0,0 +1,38 @@
+from kivy.lang import Builder
+from kivymd.app import MDApp
+from examples.common_app import CommonApp
+from faker import Faker
+
+MAIN_KV = """
+#: import images_path kivymd.images_path
+
+MDScreen:
+    md_bg_color:app.theme_cls.backgroundColor
+    BoxLayout:
+        padding:[dp(10), dp(10)]
+        orientation:"vertical"
+        
+        MDSearchBar:
+            id:bar
+            supporting_text: "Search in text"
+            # if you want it to be of fixed size
+            # adaptive_width:True
+            MDSearchTrailingIcon:
+                icon:"microphone"
+            MDSearchTrailingAvatar:
+                source:f"{images_path}/logo/kivymd-icon-128.png"
+
+        Widget:
+        MDSwitch:
+            on_active:app.theme_cls.theme_style = "Dark" if app.theme_cls.theme_style == "Light" else "Light"
+        Widget:
+    
+
+"""
+
+class Example(MDApp, CommonApp):
+    fake = Faker()
+    def build(self):
+        return Builder.load_string(MAIN_KV)
+
+Example().run()

kivymd/factory_registers.py

@@ -132,3 +132,7 @@
 register("MDCircularLayout", module="kivymd.uix.circularlayout")
 register("MDHeroFrom", module="kivymd.uix.hero")
 register("MDHeroTo", module="kivymd.uix.hero")
+register("MDSearchBar", module="kivymd.uix.search")
+register("MDSearchView", module="kivymd.uix.search")
+register("MDSearchTrailingAvatar", module="kivymd.uix.search")
+register("MDSearchTrailingIcon", module="kivymd.uix.search")

kivymd/uix/search/__init__.py

@@ -0,0 +1,6 @@
+from .search import (
+    MDSearchBar,
+    MDSearchTrailingAvatar,
+    MDSearchTrailingIcon,
+    MDSearchView,
+)

kivymd/uix/search/search.kv

@@ -0,0 +1,76 @@
+#: import images_path kivymd.images_path
+
+<MDSearchTrailingAvatar>:
+    size_hint_x: None
+    width: dp(30)
+
+<MDSearchTrailingIcon>:
+    size_hint: [None, 1]
+    width: dp(24)
+    theme_icon_color: "Custom"
+    icon_color: app.theme_cls.onSurfaceColor
+
+<MDSearchView>:
+    overlay_color: [0] * 4
+    background: f"{images_path}/transparent.png"
+    boder: [0] * 4
+    _anim_duration: 0
+    FloatLayout
+        MDBoxLayout:
+            id: root_container
+            orientation: 'vertical'
+            md_bg_color: app.theme_cls.surfaceContainerHighColor
+            adaptive_height: True
+            size_hint_x: None
+            canvas:
+                Color:
+                    rgba: app.theme_cls.outlineColor
+                Line:
+                    points:
+                        [[self.x,self.y-root._header_height+self.height],
+                        [self.x+self.width, self.y-root._header_height+self.height]]
+            BoxLayout:
+                size_hint_y: None
+                height: root._header_height
+                spacing: dp(16)
+                padding: [dp(16), 0]
+                MDIconButton:
+                    icon: "arrow-left"
+                    size_hint: [None, 1]
+                    width: dp(24)
+                    on_release: root.close_view()
+                    theme_icon_color: "Custom"
+                    icon_color: app.theme_cls.onSurfaceColor
+
+            BoxLayout:
+                size_hint: [None, None]
+                size:[ dp(360), dp(240)]
+
+<MDSearchBar>:
+    size_hint_y: None
+    height: dp(56)
+    md_bg_color: app.theme_cls.surfaceContainerHighColor
+    radius: dp(28)
+    spacing: dp(16)
+    padding: [dp(16), 0]
+    adaptive_width: False
+    on_release: self._search_view.open_view()
+    MDIconButton:
+        icon: root.leading_icon
+        size_hint: [None, 1]
+        width: dp(24)
+        on_release: root.on_leading_icon_release()
+        on_press: root.on_leading_icon_press()
+        theme_icon_color: "Custom"
+        icon_color: app.theme_cls.onSurfaceColor
+    MDLabel:
+        text: root.supporting_text
+        theme_text_color: "Custom"
+        text_color: app.theme_cls.onSurfaceVariantColor
+        theme_font_size: "Custom"
+        font_style: "Title"
+        role: "medium"
+        size_hint_x: None
+        padding: root._supporting_text_padding if root.adaptive_width else 0
+        adaptive_width:root.adaptive_width
+        size_hint_x: 1 if not root.adaptive_width else None

kivymd/uix/search/search.py

@@ -0,0 +1,78 @@
+from __future__ import annotations
+
+__all__ = (
+    "MDSearchView",
+    "MDSearchBar",
+    "MDSearchTrailingIcon",
+    "MDSearchTrailingAvatar",
+)
+
+import os
+
+from kivy.lang import Builder
+from kivy.metrics import dp
+from kivy.properties import StringProperty, ListProperty
+from kivy.uix.behaviors import ButtonBehavior
+from kivy.uix.image import Image
+from kivy.uix.modalview import ModalView
+
+from kivymd import uix_path
+from kivymd.uix.behaviors import RectangularRippleBehavior
+from kivymd.uix.boxlayout import MDBoxLayout
+from kivymd.uix.button import MDIconButton
+
+with open(
+    os.path.join(uix_path, "search", "search.kv"), encoding="utf-8"
+) as kv_file:
+    Builder.load_string(kv_file.read())
+
+
+class MDSearchTrailingAvatar(ButtonBehavior, Image):
+    pass
+
+
+class MDSearchTrailingIcon(MDIconButton):
+    pass
+
+class MDSearchView(ModalView):
+
+    _header_height = dp(70)
+    def __init__(self, search_bar, *args, **kwargs):
+        super().__init__(*args, **kwargs)
+        self.search_bar = search_bar
+        
+    def open_view(self):
+        self.ids.root_container.width = self.search_bar.width
+        self.ids.root_container.pos = [
+            self.search_bar.pos[0],
+            self.search_bar.pos[1] - self.ids.root_container.height + self.search_bar.height
+        ]
+        # TODO: make it like animating from that view
+        self.open()
+
+    def close_view(self):
+        self.dismiss()
+
+
+class MDSearchBar(ButtonBehavior, MDBoxLayout):
+
+    leading_icon = StringProperty("magnify")
+    supporting_text = StringProperty("Hinted search text")
+
+    # internal
+    _supporting_text_padding = ListProperty([0, 0, dp(30), 0])
+    _search_view = None
+    def __init__(self, *args, **kwargs):
+        super().__init__(*args, **kwargs)
+        self.register_event_type("on_leading_icon_release")
+        self.register_event_type("on_leading_icon_press")
+        self._search_view = MDSearchView(self)
+
+    def on_leading_icon_release(self):
+        pass
+
+    def on_leading_icon_press(self):
+        pass
+
+    def on_release(self):
+        pass