mondriaan.py

open in new tab
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
"""
Piet Mondriaan was a Dutch painter who is famous for his style that looks
a little like this. Best viewed in a square window.
"""

from flexx import app, ui


class MyVBox(ui.BoxLayout):

    def __init__(self, **kwargs):
        kwargs['spacing'] = kwargs.get('spacing', 15)
        kwargs['padding'] = 0
        kwargs['orientation'] = 'vertical'
        super().__init__(**kwargs)

class MyHBox(ui.BoxLayout):
    def __init__(self, **kwargs):
        kwargs['spacing'] = kwargs.get('spacing', 15)
        kwargs['padding'] = 0
        super().__init__(**kwargs)


class Mondriaan(ui.Widget):

    CSS = """
    .flx-Mondriaan {background: #000;}
    .flx-Mondriaan .edge {background:none;}
    .flx-Mondriaan .white {background:#fff;}
    .flx-Mondriaan .red {background:#f23;}
    .flx-Mondriaan .blue {background:#249;}
    .flx-Mondriaan .yellow {background:#ff7;}
    """

    def init(self):
        with MyHBox():

            with MyVBox(flex=2):

                with MyVBox(flex=4, spacing=30):
                    ui.Widget(flex=1, css_class='white')
                    ui.Widget(flex=1, css_class='white')

                with MyVBox(flex=2, css_class='blue'):
                    ui.Widget(flex=1, css_class='edge')
                    ui.Widget(flex=1, css_class='edge')

            with MyVBox(flex=6):

                with MyVBox(flex=4, spacing=30, css_class='red'):
                    ui.Widget(flex=1, css_class='edge')
                    ui.Widget(flex=1, css_class='edge')

                with MyHBox(flex=2):
                    ui.Widget(flex=6, css_class='white')

                    with MyVBox(flex=1):
                        ui.Widget(flex=1, css_class='white')
                        ui.Widget(flex=1, css_class='yellow')


if __name__ == '__main__':
    m = app.launch(Mondriaan, 'app')
    app.run()