dddomodossola
commented
1 year ago Hello @WAvdBeek,
You specified style['background'] but it should be style['background-color']. Here is the working code:
from remi import App, gui, start
class HighLightTableItem(gui.TableItem):
''' Hightlight the item when hovered over
'''
def __init__(self, *arg, **kwargs):
""" init, like before """
super(HighLightTableItem, self).__init__(*arg, **kwargs)
self.onmouseout.do(self.mouseout, js_stop_propagation = True, js_prevent_default = True)
self.onmouseleave.do(self.mouseout, js_stop_propagation = True, js_prevent_default = True)
self.onmouseover.do(self.mouseover, js_stop_propagation = True, js_prevent_default = True)
self.hover_over = False
def mouseover(self, _emitter):
""" mouse over """
self.hover_over = True
self.style['background-color'] = "rgba(4, 90, 188, 0.26)"
def mouseout(self, _emitter):
""" mouse out """
self.hover_over = False
del self.style['background-color']
class HighLightTableWidget(gui.Table):
''' A subclass of gui.Table that has the feature
that the last selected row is highlighted
and that allows for multi_row selection.
'''
@property
@gui.editor_attribute_decorator("WidgetSpecific", '''Table colum count.''', int, {'possible_values': '', 'min': 0, 'max': 100, 'default': 1, 'step': 1})
def column_count(self): return self.__column_count
@column_count.setter
def column_count(self, value): self.set_column_count(value)
@property
@gui.editor_attribute_decorator("WidgetSpecific", '''Table row count.''', int, {'possible_values': '', 'min': 0, 'max': 100, 'default': 1, 'step': 1})
def row_count(self): return len(self.children)
@row_count.setter
def row_count(self, value): self.set_row_count(value)
@property
@gui.editor_attribute_decorator("WidgetSpecific", '''Table use title.''', bool, {})
def use_title(self): return self.__use_title
@use_title.setter
def use_title(self, value): self.set_use_title(value)
def __init__(self, n_rows=2, n_columns=2, use_title=True, editable=False, use_selection=False, *arg, **kwargs):
self.__column_count = 0
self.__use_title = use_title
super(HighLightTableWidget, self).__init__(*arg, **kwargs)
self._editable = editable
self.set_use_title(use_title)
self.set_column_count(n_columns)
self.set_row_count(n_rows)
self.css_display = 'table'
# the additions below
self.attributes['tabindex'] = '1'
self.onkeydown.do(self.keydown)
self.onkeyup.do(self.keyup)
#self.onmouseout.do(self.mouseout)
#self.onmouseover.do(self.mouseover)
self.multi_selection_enabled = False
self.hover_over = False
self.selected_row_list = []
self.use_selection = use_selection
def set_use_title(self, use_title):
"""Returns the TableItem instance at row, column cordinates
Args:
use_title (bool): enable title bar.
"""
self.__use_title = use_title
self._update_first_row()
def _update_first_row(self):
cl = HighLightTableItem
if self.__use_title:
cl = gui.TableTitle
if len(self.children) > 0:
for c_key in self.children['0'].children.keys():
instance = cl(self.children['0'].children[c_key].get_text())
self.children['0'].append(instance, c_key)
# here the cells of the first row are overwritten
# and aren't appended by the standard Table.append
# method. We have to restore de standard on_click
#internal listener in order to make it working
# the Table.on_table_row_click functionality
instance.onclick.do(self.children['0'].on_row_item_click)
def append_from_list(self, content, fill_title=False):
"""
Appends rows created from the data contained in the provided
list of tuples of strings. The first tuple of the list can be
set as table title.
Args:
content (list): list of tuples of strings. Each tuple is a row.
fill_title (bool): if true, the first tuple in the list will
be set as title.
"""
row_index = 0
for row in content:
tr = gui.TableRow()
column_index = 0
for item in row:
if row_index == 0 and fill_title:
ti = gui.TableTitle(item)
else:
ti = HighLightTableItem(item)
tr.append(ti, str(column_index))
column_index = column_index + 1
self.append(tr, str(row_index))
row_index = row_index + 1
def set_row_count(self, count):
"""Sets the table row count.
Args:
count (int): number of rows
"""
current_row_count = self.row_count
current_column_count = self.column_count
if count > current_row_count:
cl = HighLightTableItem
for i in range(current_row_count, count):
tr = gui.TableRow()
for c in range(0, current_column_count):
tr.append(cl(), str(c))
if self._editable:
tr.children[str(c)].onchange.do(
self.on_item_changed, int(i), int(c))
self.append(tr, str(i))
self._update_first_row()
elif count < current_row_count:
for i in range(count, current_row_count):
self.remove_child(self.children[str(i)])
def set_column_count(self, count):
"""Sets the table column count.
Args:
count (int): column of rows
"""
current_row_count = self.row_count
current_column_count = self.column_count
if count > current_column_count:
cl = HighLightTableItem
for r_key in self.children.keys():
row = self.children[r_key]
for i in range(current_column_count, count):
row.append(cl(), str(i))
if self._editable:
row.children[str(i)].onchange.do(
self.on_item_changed, int(r_key), int(i))
self._update_first_row()
elif count < current_column_count:
for row in self.children.values():
for i in range(count, current_column_count):
row.remove_child(row.children[str(i)])
self.__column_count = count
@gui.decorate_event
def on_item_changed(self, item, new_value, row, column):
"""Event for the item change.
Args:
emitter (TableWidget): The emitter of the event.
item (TableItem): The TableItem instance.
new_value (str): New text content.
row (int): row index.
column (int): column index.
"""
return (item, new_value, row, column)
@gui.decorate_event
def on_table_row_click(self, row, item):
''' Highlight selected row(s)
and put the result of a muti_row selection
in the list "self.selected_row_list".
'''
if not self.multi_selection_enabled:
self.remove_selection()
if self.use_selection:
if row not in self.selected_row_list:
self.selected_row_list.append(row)
row.style['outline'] = "2px dotted blue"
return (row, item)
def keydown(self, _emitter, _key, ctrl, _shift, _alt):
""" key down function """
# print("key:%d ctrl:%d shift:%d alt:%d", (key, ctrl, shift, alt))
if self.use_selection:
if ctrl.lower() == 'true':
self.multi_selection_enabled = True
def keyup(self, _emitter, _key, _ctrl, _shift, _alt):
""" key up function """
self.multi_selection_enabled = False
def remove_selection(self):
""" remove selection """
for r in self.selected_row_list:
del r.style['outline']
self.selected_row_list = []
class MyApp(App):
def main(self):
#creating a container VBox type, vertical (you can use also HBox or Widget)
main_container = gui.VBox(width=300, height=200, style={'margin':'0px auto'})
self.table = HighLightTableWidget.new_from_list([('ID', 'First Name', 'Last Name'),
('101', 'Danny', 'Young'),
('102', 'Christine', 'Holand'),
('103', 'Lars', 'Gordon'),
('104', 'Roberto', 'Robitaille'),
('105', 'Maria', 'Papadopoulos')], width=300, height=200, margin='10px')
main_container.append(self.table)
# returning the root widget
return main_container
if __name__ == "__main__":
start(MyApp, address='0.0.0.0', port=0, start_browser=True, update_interval = 0)
I wrote some code on the backend to change color of a tab item. I copy paste the original table & table item and added the code to it via mouseover & mouseout function. i think this also should be possible on the front end. any idea how?
here is the code: