fix better system color + Swiper (not in ui.ALL)

Author: manatlan

README.md

@@ -336,6 +336,22 @@ This component should be embbeded in an element which have a constraint on its h
 
 Note that the list is a list of lambda (`List[Callable[[], Tag]]`) to create the rendering on-demand.
 
+
+## Object Swipper
+
+**IMPORTANT** : not included in default (`ui.ALL`). If you want to use it, you must include it, like that `imports=ui.ALL + [ui.Swiper] ` (because +170ko). TODO: need to find a clever soluce ;-)
+
+A component to use a Swiper (https://swiperjs.com/).
+
+```python
+
+ll=[lambda i=i: MyObject(i) for i in range(1,200_000)]  # slide created on demand
+# or ll=[MyObject(i) for i in range(1,20)]              # concrete slides
+self <= ui.Swiper(ll, default=0)
+
+```
+
+
 ## utilities methods
 
 ### hflex & vflex

htagui/all.py

@@ -17,7 +17,8 @@
 from .ifields import IText,ITextarea,IRange,IBool,ISelect,IRadios
 from .fileupload import FileUpload
 from .containers import VScroll,VScrollPager    
-from .sortables import Sortable                 
+from .sortables import Sortable
+from .swipers import Swiper
 class App(Tag.body):
     _ui=None
 
@@ -30,5 +31,10 @@ def ui(self):
 # global methods
 from .flex import hflex,vflex  # utilities (Htag contructor methods)
 
-
+# Swiper not inluded by default !!!!!
+# Swiper not inluded by default !!!!! (coz +170ko)
+# Swiper not inluded by default !!!!!
 ALL=[App,Form,Tabs,Dialog,HSplit,VSplit,IText,ITextarea,IRange,IBool,ISelect,IRadios,FileUpload,Sortable,VScroll,VScrollPager]
+# Swiper not inluded by default !!!!!
+# Swiper not inluded by default !!!!!
+# Swiper not inluded by default !!!!!

htagui/basics/bases.py

@@ -77,7 +77,7 @@
 .menu > div {
     padding:8px;
     cursor:pointer;
-    background:white;
+    background:Canvas;
 }
 .menu > div:hover {
     filter: brightness(0.95);
@@ -88,7 +88,7 @@
     border:0px;
     cursor:pointer;
     margin:2px;
-    background:white;
+    background:Canvas;
     padding:8px;
     font-family: ubuntu,'Helvetica';
 }
@@ -294,16 +294,16 @@ def init(self,metatag,obj):
         self["style"].set("right","0px")
         self["style"].set("left","0px")
         self["style"].set("z-index","500")
-        self["style"].set("background","white")
+        self["style"].set("background","Canvas")
         self <= obj
 
 
 class ModalAlert(ModalBlock):
     def __init__(self,metatag,obj,wsize:float=None):
         if wsize is None: wsize=0.6
         pwidth=f"{int(wsize*100)}%"
-        bc = Tag.button("X",_onclick=metatag.stepevent(),_style="float:right;border-radius:50%;border:0px;cursor:pointer;background:white")
-        box = Tag.div( [bc,obj],_style=f"width:{pwidth};max-height:80%;background:white;overflow-y: auto;background:white;border-radius:6px;box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;padding:10px",_onmousedown="event.stopPropagation();")
+        bc = Tag.button("X",_onclick=metatag.stepevent(),_style="float:right;border-radius:50%;border:0px;cursor:pointer;background:Canvas")
+        box = Tag.div( [bc,obj],_style=f"width:{pwidth};max-height:80%;background:Canvas;overflow-y: auto;border-radius:6px;box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;padding:10px",_onmousedown="event.stopPropagation();")
         ModalBlock.__init__(self,metatag,box)
         self.childs[1]["onmousedown"]=metatag.stepevent()
 
@@ -346,7 +346,7 @@ def init(self,metatag,obj,mode:str):
             t,r,b,l= ("0px","0px",f"{size}%","0px")
 
         self <= Voile(_onmousedown=metatag.stepevent())
-        self <= Tag.div( obj ,_style=f"position:fixed;top:{t};bottom:{b};left:{l};right:{r};background:white;border-radius:0px;box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;;z-index:1001;padding:10px")
+        self <= Tag.div( obj ,_style=f"position:fixed;top:{t};bottom:{b};left:{l};right:{r};background:Canvas;border-radius:0px;box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;;z-index:1001;padding:10px")
 
 class Pop(Tag.div):
     def init(self,metatag,obj,xy:tuple):
@@ -369,7 +369,7 @@ def init(self,metatag,obj,xy:tuple):
 
 class Toast(Tag.div):
     def init(self,main_non_used,obj,timeout=1000):
-        self <= Tag.div(obj,_style="position:fixed;right:10px;bottom:10px;z-index:1001;background:white;padding:10px;border:2px solid black;border-radius:10px;min-width:200px")
+        self <= Tag.div(obj,_style="position:fixed;right:10px;bottom:10px;z-index:1001;background:Canvas;padding:10px;border:2px solid black;border-radius:10px;min-width:200px")
         self.js="setTimeout( function() {self.remove()} , %s)" % timeout
 
 ######################################################################################

htagui/common.py

@@ -97,7 +97,7 @@ class Choose(Tag.div):
             def init(self,main):
                 " all the ui logic goes here "
                 for i in main.all:
-                    self <= Tag.button(i, _onclick = main.stepevent(select=i),_style="background:white;cursor:pointer;border:1px dotted #CCC")
+                    self <= Tag.button(i, _onclick = main.stepevent(select=i),_style="background:Canvas;cursor:pointer;border:1px dotted #CCC")
         class Current(Tag.div):
             def init(self,main,val):
                 " all the ui logic goes here "

htagui/fluent/bases.py

@@ -28,7 +28,7 @@
     border:0px;
     cursor:pointer;
     margin:2px;
-    background:white;
+    background:Canvas;
     padding:8px;
     font-family: ubuntu;
 }
@@ -138,7 +138,7 @@ def init(self,metatag,obj):
         self["style"].set("right","0px")
         self["style"].set("left","0px")
         self["style"].set("z-index","500")
-        self["style"].set("background","white")
+        self["style"].set("background","Canvas")
         self <= obj
 
 
@@ -147,8 +147,8 @@ def init(self,metatag,obj,wsize:float=None):
         if wsize is not None:
             self["style"].set("--dialog-width",f"{int(wsize*100)}%")
         self["style"].set("--dialog-height","auto")
-        bc = Tag.button("X",_onclick=metatag.stepevent(),_style="float:right;border-radius:50%;border:0px;cursor:pointer;background:white")
-        box = Tag.div( obj,_style=f"background:white;overflow-y:auto;background:white;margin:10px;",_onmousedown="event.stopPropagation();")
+        bc = Tag.button("X",_onclick=metatag.stepevent(),_style="float:right;border-radius:50%;border:0px;cursor:pointer;background:Canvas")
+        box = Tag.div( obj,_style=f"background:Canvas;overflow-y:auto;margin:10px;",_onmousedown="event.stopPropagation();")
         self <= bc+box
 
         #~ self.childs[1]["onmousedown"]=metatag.stepevent()
@@ -197,7 +197,7 @@ def init(self,metatag,obj,mode:str):
             t,r,b,l= ("0px","0px",f"{size}%","0px")
 
         self <= Voile(_onmousedown=metatag.stepevent())
-        self <= Tag.div( obj ,_style=f"position:fixed;top:{t};bottom:{b};left:{l};right:{r};background:white;border-radius:0px;box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;;z-index:1001;padding:10px")
+        self <= Tag.div( obj ,_style=f"position:fixed;top:{t};bottom:{b};left:{l};right:{r};background:Canvas;border-radius:0px;box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;;z-index:1001;padding:10px")
 
 
 class Pop(Tag.div):
@@ -222,7 +222,7 @@ def init(self,metatag,obj,xy:tuple):
 
 class Toast(Tag.div):
     def init(self,main_non_used,obj,timeout=1000):
-        self <= Tag.div(obj,_style="position:fixed;right:10px;bottom:10px;z-index:1001;background:white;padding:10px;border:2px solid black;border-radius:10px;min-width:200px")
+        self <= Tag.div(obj,_style="position:fixed;right:10px;bottom:10px;z-index:1001;background:Canvas;padding:10px;border:2px solid black;border-radius:10px;min-width:200px")
         self.js="setTimeout( function() {self.remove()} , %s)" % timeout
 
 ######################################################################################

htagui/md/bases.py

@@ -215,7 +215,7 @@ def init(self,metatag,obj):
         self["style"].set("right","0px")
         self["style"].set("left","0px")
         self["style"].set("z-index","500")
-        self["style"].set("background","white")
+        self["style"].set("background","Canvas")
         self <= obj
 
 
@@ -290,7 +290,7 @@ def init(self,metatag,obj,mode:str):
             t,r,b,l= ("0px","0px",f"{size}%","0px")
 
         self <= Voile(_onmousedown=metatag.stepevent())
-        self <= Tag.div( obj ,_style=f"position:fixed;top:{t};bottom:{b};left:{l};right:{r};background:white;border-radius:0px;box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;;z-index:1001;padding:10px")
+        self <= Tag.div( obj ,_style=f"position:fixed;top:{t};bottom:{b};left:{l};right:{r};background:Canvas;border-radius:0px;box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;;z-index:1001;padding:10px")
 
 class Pop(Tag.div):
     def init(self,metatag,obj,xy:tuple):
@@ -306,14 +306,14 @@ def init(self,metatag,obj,xy:tuple):
                 let h=tag.clientHeight;
                 if(x+w > bw) x=bw-w;
                 if(y+h > bh) y=bh-h;
-                tag.style="position:fixed;z-index:2001;padding:2px;left:"+x+"px;top:"+y+"px;background:white";
+                tag.style="position:fixed;z-index:2001;padding:2px;left:"+x+"px;top:"+y+"px;background:Canvas";
             },0);
         })(self,%s,%s)""" % (x,y)
 
         self <= Tag.div( obj ,js=js)
 class Toast(Tag.div):
     def init(self,main_non_used,obj,timeout=1000):
-        self["style"]="position:fixed;right:10px;bottom:10px;z-index:1001;border:2px solid black;background:white;padding:10px";
+        self["style"]="position:fixed;right:10px;bottom:10px;z-index:1001;border:2px solid black;background:Canvas;padding:10px";
         self <= obj
         self.js="setTimeout( function() {self.remove()} , %s)" % timeout
 

htagui/shoelace/bases.py

@@ -141,7 +141,7 @@ def init(self,metatag,obj):
         self["style"].set("right","0px")
         self["style"].set("left","0px")
         self["style"].set("z-index","500")
-        self["style"].set("background","white")
+        self["style"].set("background","Canvas")
         self <= obj
 
 class ModalAlert(Tag.sl_dialog):
@@ -162,7 +162,7 @@ def init(self,metatag,obj,closable=True,wsize:float=None):
             %s;
         });""" % metatag.bind.step()
         if closable:
-            bc=Tag.button("X",_onclick = self.close,_style="float:right;border-radius:50%;border:0px;cursor:pointer;background:white")
+            bc=Tag.button("X",_onclick = self.close,_style="float:right;border-radius:50%;border:0px;cursor:pointer;background:Canvas")
             self <= [bc,obj]
         else:
             self <= obj

htagui/swipers.py

@@ -263,6 +263,22 @@ def init(self,x):
             self <= Tag.div(_style="height:200px; border:1px solid red;" ) <= ui.VScrollPager([lambda i=i: O(i) for i in range(1,200)])
 
 
+    class TestSwiper(Tag.div):
+        def init(self,root):
+            self.output=root.output
+
+            class Item(Tag.img):
+                def init(self,i):
+                    self["src"]=f"https://loremflickr.com/400/400/colors?random={i}"
+                    self["style"]="width:100px;height:100px"
+                    self["onclick"] = self.cc
+
+                def cc(self,ev):
+                    print(ev)
+
+            self<= ui.Swiper([Item(i) for i in range(50)])
+            self<= ui.Swiper([lambda i=i: Item(i) for i in range(50)])
+
 
     class App(ui.App):
         statics="""
@@ -271,7 +287,7 @@ class App(ui.App):
         hr {padding:0px !important;margin:4px !important;}
         """
 
-        imports=ui.ALL
+        imports=ui.ALL + [ui.Swiper]
         def init(self):
             self["class"]="content" # for bulma
 
@@ -299,6 +315,7 @@ def setter(o,testobject):
                 menu <= Tag.my("others",_onclick=lambda ev: setter(ev.target,TestOthers(self)) )
                 menu <= Tag.my("Sortable",_onclick=lambda ev: setter(ev.target,TestSortable(self)) )
                 menu <= Tag.my("VScroll",_onclick=lambda ev: setter(ev.target,TestVscroll(self)) )
+                menu <= Tag.my("Swiper",_onclick=lambda ev: setter(ev.target,TestSwiper(self)) )
             self <= menu
             self <= Tag.hr()
             self <= self.omain