Skip to content

Commit

Permalink
Tables and theme updates.
Browse files Browse the repository at this point in the history
  • Loading branch information
ntoll committed Dec 20, 2024
1 parent 4d1b2a3 commit 9aa397a
Show file tree
Hide file tree
Showing 8 changed files with 189 additions and 9 deletions.
10 changes: 10 additions & 0 deletions examples/theme_testcard/dark-theme.css
Original file line number Diff line number Diff line change
Expand Up @@ -127,6 +127,16 @@ samp {
font-size: 1rem;
}

pre {
display: block;
max-width: 100%;
overflow: auto;
padding: 1rem;
border: 1px solid var(--primary-light);
background-color: var(--primary-dark);
}


/* Multimedia elements */

img, video {
Expand Down
27 changes: 27 additions & 0 deletions examples/theme_testcard/light-theme.css
Original file line number Diff line number Diff line change
Expand Up @@ -127,6 +127,33 @@ samp {
font-size: 1rem;
}

pre {
display: block;
max-width: 100%;
overflow: auto;
padding: 1rem;
border: 1px solid var(--primary-light);
background-color: var(--muted-light);
}

/* Table */

tr:nth-child(even) {
background-color: var(--muted-light);
}

thead {
background-color: var(--primary-light);
}

th {
text-align: start;
}

td, th {
padding: 0.5rem;
}

/* Multimedia elements */

img, video {
Expand Down
28 changes: 26 additions & 2 deletions examples/theme_testcard/main.py
Original file line number Diff line number Diff line change
Expand Up @@ -44,12 +44,36 @@
),
Code(
code="""def hello(name="world"):
return f"Hello, {name}"
"""
return f"Hello, {name}" """
),
Label(text="Some more extensive code:"),
Code(
code="""class Hello: # Enterprise programmer 👔
def __init__(self, name="world!"):
self.name = name
@property
def greet(self):
return f"{self.__class__.__name__} {name}"
print(Hello().greet)"""
),
Label(
text="# Heading 1\n\n## Heading2\n\n### Heading 3\n\n#### Heading 4\n\n##### Heading 5\n\n###### Heading 6"
),
Label(text="## A table"),
Table(data=[
["", "Hamble", "Jemima", "Humpty", "Little Ted", "Big Ted"],
["Toy-type", "Doll", "Rag doll", "Felt Egg", "Teddy", "Teddy"],
["Dress", "Blue pinafore dress", "Woolly trousers and jumper", "Tartan trousers", "None (just fur)", "None (just fur)"],
["Eyes", "Blue", "Blue", "Black", "Beady", "Beady"],
["Nose", "Pink", "None", "White", "Black", "Black"],
["Super power", "Sitting up", "Flopping over", "Rolling around", "Getting lost", "Falling over"],
["Weapon", "Knitting needles", "Laser eyes", "Flamethrower", "Gnashing teeth", "Bear stare"],
],
label="The Play School toys",
row_headers=True),
Label(text="## Form controls\n\n### Buttons"),
Row(
children=[
Expand Down
2 changes: 1 addition & 1 deletion index.html
Original file line number Diff line number Diff line change
Expand Up @@ -30,7 +30,7 @@ <h2>Express yourself with code.</h2>
<a href="https://github.com/invent-framework/invent" target="_blank">Source code</a> ·
<a href="https://invent-framework.github.io/" target="_blank">Documentation</a> ·
<a href="./examples/" target="_blank">Examples</a> ·
<a href="./static/widgets.html" target="_blank">Widgets</a> ·
<a href="./examples/theme_testcard/index.html" target="_blank">Widgets</a> ·
<a href="https://discord.gg/TKyjvSynTP" target="_blank">Community</a>
</p>
<p>Starting test suite... (<a href="index2.html">Pyodide version</a>)</p>
Expand Down
2 changes: 1 addition & 1 deletion index2.html
Original file line number Diff line number Diff line change
Expand Up @@ -30,7 +30,7 @@ <h2>Express yourself with code.</h2>
<a href="https://github.com/invent-framework/invent" target="_blank">Source code</a> ·
<a href="https://invent-framework.github.io/" target="_blank">Documentation</a> ·
<a href="./examples/" target="_blank">Examples</a> ·
<a href="./static/widgets.html" target="_blank">Widgets</a> ·
<a href="./examples/theme_testcard/index.html" target="_blank">Widgets</a> ·
<a href="https://discord.gg/TKyjvSynTP" target="_blank">Community</a>
</p>
<p>Starting test suite... (<a href="index.html">MicroPython version</a>)</p>
Expand Down
5 changes: 3 additions & 2 deletions src/invent/ui/__init__.py
Original file line number Diff line number Diff line change
Expand Up @@ -36,14 +36,13 @@
from .widgets.slider import Slider
from .widgets.switch import Switch
from .widgets.label import Label
from .widgets.table import Table
from .widgets.textinput import TextInput
from .widgets.time import TimePicker
from .widgets.video import Video


__all__ = [
"random_id",
"sanitize",
"Code",
"Page",
"Widget",
Expand All @@ -67,6 +66,7 @@
"Slider",
"Switch",
"Label",
"Table",
"TextInput",
"TimePicker",
"Video",
Expand All @@ -93,6 +93,7 @@
_("Slider"): Slider,
_("Switch"): Switch,
_("Label"): Label,
_("Table"): Table,
_("TextInput"): TextInput,
_("TimePicker"): TimePicker,
_("Video"): Video,
Expand Down
12 changes: 9 additions & 3 deletions src/invent/ui/widgets/code.py
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,7 @@

from invent.i18n import _
from invent.ui.core import Widget, TextProperty
from pyscript.web import pre
from pyscript.web import pre, code, link, page


_default = """
Expand All @@ -36,12 +36,18 @@ class Code(Widget):

code = TextProperty(_("The code to display."), default_value=_default)

language = TextProperty(_("The language of the code."), default_value=None)

@classmethod
def icon(cls):
return '<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 256 256"><path fill="currentColor" d="M69.12 94.15L28.5 128l40.62 33.85a8 8 0 1 1-10.24 12.29l-48-40a8 8 0 0 1 0-12.29l48-40a8 8 0 0 1 10.24 12.3m176 27.7l-48-40a8 8 0 1 0-10.24 12.3L227.5 128l-40.62 33.85a8 8 0 1 0 10.24 12.29l48-40a8 8 0 0 0 0-12.29m-82.39-89.37a8 8 0 0 0-10.25 4.79l-64 176a8 8 0 0 0 4.79 10.26A8.14 8.14 0 0 0 96 224a8 8 0 0 0 7.52-5.27l64-176a8 8 0 0 0-4.79-10.25"/></svg>' # noqa

def on_code_changed(self):
self.element.innerText = self.code
self.code_element.innerText = self.code

def on_language_changed(self):
self.code_element.classes.append(f"language-{self.language}")

def render(self):
return pre(self.code, id=self.id)
self.code_element = code()
return pre(self.code_element, id=self.id)
112 changes: 112 additions & 0 deletions src/invent/ui/widgets/table.py
Original file line number Diff line number Diff line change
@@ -0,0 +1,112 @@
"""
A table widget for the Invent framework.
Based on original pre-COVID work by [Nicholas H.Tollervey.](https://ntoll.org/)
Copyright (c) 2024 Invent contributors.
Licensed 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.
"""

from invent.i18n import _
from pyscript.web import table, caption, thead, tbody, tr, th, td
from invent.ui.core import Widget, ListProperty, TextProperty, BooleanProperty


class Table(Widget):
"""
A table widget for displaying tabular data.
"""

data = ListProperty(
_("The text/numeric data to display in the table."),
default_value=[
["Header 1", "Header 2"],
["Row 1, Cell 1", "Row 1, Cell 2"],
["Row 2, Cell 1", "Row 2, Cell 2"],
],
)

label = TextProperty(
_("An optional label for the table."), default_value=""
)

column_headers = BooleanProperty(
_("A flag to indicate if the first row of the table is a header row."),
default_value=True,
group="style",
)

row_headers = BooleanProperty(
_("A flag to indicate if the first item in each row is a header."),
default_value=False,
group="style",
)

@classmethod
def icon(cls):
return '<svg xmlns="http://www.w3.org/2000/svg" width="256" height="256" viewBox="0 0 256 256"><path fill="currentColor" d="M224 48H32a8 8 0 0 0-8 8v136a16 16 0 0 0 16 16h176a16 16 0 0 0 16-16V56a8 8 0 0 0-8-8M40 112h40v32H40Zm56 0h120v32H96Zm120-48v32H40V64ZM40 160h40v32H40Zm176 32H96v-32h120z"/></svg>' # noqa

def _tabulate(self):
"""
Convert the data into a table, given the current settings.
"""
# Reset the table in the DOM.
self._table_head._dom_element.replaceChildren()
self._table_body._dom_element.replaceChildren()
# If there's no data, there's nothing to do.
if self.data:
temp_data = self.data[:]
# If the first row contains the column headers, use it as such.
if self.column_headers:
self._table_head.append(
tr(*[th(header) for header in temp_data[0]])
)
temp_data = temp_data[1:]
# If the first item in each row is a header, use it as such.
if self.row_headers:
self._table_body.append(
[
tr(th(row[0]), *[td(cell) for cell in row[1:]])
for row in temp_data
]
)
else:
self._table_body.append(
[tr(*[td(cell) for cell in row]) for row in temp_data]
)


def on_data_changed(self):
self._tabulate()

def on_column_headers_changed(self):
self._tabulate()

def on_row_headers_changed(self):
self._tabulate()

def on_label_changed(self):
self._caption.text = self.label

def render(self):
self._caption = caption(self.label)
self._table_head = thead()
self._table_body = tbody()

return table(
self._caption,
self._table_head,
self._table_body,
id=self.id,
)

0 comments on commit 9aa397a

Please sign in to comment.