Source code for abce.gui.dockpanel
from flexx.pyscript import window
from flexx.ui import Layout
from flexx import event
[docs]class DockPanel(Layout):
""" A layout that displays its children as dockable widgets.
This is a high level layout allowing the user to layout the child
widgets as he/she likes. The title of each child is used for its
corresponding tab label.
the widget's style property 'location' determines where to place the
next new widget.
location = N, S, W, or E:
for absolute placement.
location = L(eft), R(ight), U(nder), O(ver) B(efore) A(fter):
for relative placement.
relative:
Relative to the last widget or to the widget set with set_relative
"""
CSS = """
div.p-TabBar {
border: 1px solid #ccc;
width: 20% !important;
height: 100% !important;
overflow-y: scroll;
border-color: blue !important;
}
div.p-TabBar-body {
border-color: blue !important;
}
ul.p-TabBar-content {
display: block !important;
background-color: blue !important;
}
span.p-TabBar-tabText {
color: white !important;
}
span.p-TabBar-tabText:hover {
color: black !important;
}
li.p-TabBar-tab {
border-color: blue !important;
background-color: blue !important;
}
li.p-TabBar-tab:hover {
border-color: black !important;
border: 2px solid #ccc;
background-color: DodgerBlue !important;
}
li.p-mod-current {
background-color: DodgerBlue !important;
}
div.p-TabBar-tab button {
display: block !important;
background-color: red !important;
color: black;
padding: 22px 16px;
width: 20% !important;
border: none;
outline: none;
text-align: left !important;
cursor: pointer !important;
transition: 0.3s;
}
div.p-StackedPanel {
top: 0px !important;
padding: 0px 12px;
border: 1px solid #ccc;
width: 80% !important;
border-left: none !important;
left: 20% !important;
height: 100% !important;
}
"""
[docs] class Both:
[docs] def set_relative(self, widget):
""" The next attached widget will be placed relative to
this one """
self.relative = widget.phosphor
class JS:
@event.connect('myselectWidget')
def myselectWidget(self, event):
self.phosphor.selectWidget(event['widget'].phosphor)
def _init_phosphor_and_node(self):
self.phosphor = window.phosphor.dockpanel.DockPanel()
self.node = self.phosphor.node
self.relative = None
def _add_child(self, widget):
after = widget.style.split('location:')[1]
try:
location = after.split(';')[0]
except TypeError:
location = ""
location = location.upper()
if 'W' in location:
self.phosphor.insertLeft(widget.phosphor)
elif 'N' in location:
self.phosphor.insertTop(widget.phosphor)
elif 'E' in location:
self.phosphor.insertRight(widget.phosphor)
elif 'S' in location:
self.phosphor.insertBottom(widget.phosphor)
else:
if self.relative is None:
self.phosphor.insertLeft(widget.phosphor)
elif 'L' in location:
try:
self.phosphor.insertLeft(widget.phosphor,
self.relative)
self.lastworking = self.relative
except Exception:
self.phosphor.insertLeft(widget.phosphor,
self.lastworking)
elif 'O' in location:
try:
self.phosphor.insertTop(widget.phosphor,
self.relative)
self.lastworking = self.relative
except Exception:
self.phosphor.insertTop(widget.phosphor,
self.lastworking)
elif 'R' in location:
try:
self.phosphor.insertRight(widget.phosphor,
self.relative)
self.lastworking = self.relative
except Exception:
self.phosphor.insertRight(widget.phosphor,
self.lastworking)
elif 'U' in location:
try:
self.phosphor.insertBottom(widget.phosphor,
self.relative)
self.lastworking = self.relative
except Exception:
self.phosphor.insertBottom(widget.phosphor,
self.lastworking)
elif 'B' in location:
try:
self.phosphor.insertTabBefore(widget.phosphor,
self.relative)
self.lastworking = self.relative
except Exception:
self.phosphor.insertTabBefore(widget.phosphor,
self.lastworking)
elif 'A' in location:
try:
self.phosphor.insertTabAfter(widget.phosphor,
self.relative)
self.lastworking = self.relative
except Exception:
self.phosphor.insertTabAfter(widget.phosphor,
self.lastworking)
else:
self.phosphor.insertLeft(widget.phosphor)
self.relative = widget.phosphor