kodjo/MyFastHtml
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

First set of upgrades for the Panel component

Browse Source
This commit is contained in:
Kodjo Sossouvi
2025-12-20 11:52:44 +01:00
parent 1347f12618
commit 81a80a47b6
6 changed files with 1634 additions and 177 deletions
Download Patch File Download Diff File Expand all files Collapse all files

70
src/myfasthtml/assets/myfasthtml.css
View File

@@ -662,17 +662,29 @@
position: relative;
}
.mf-panel-left {
/* Common properties for side panels */
.mf-panel-left,
.mf-panel-right {
position: relative;
flex-shrink: 0;
width: 250px;
min-width: 150px;
max-width: 400px;
max-width: 500px;
height: 100%;
overflow: auto;
transition: width 0.3s ease, min-width 0.3s ease, max-width 0.3s ease;
}
/* Left panel specific */
.mf-panel-left {
border-right: 1px solid var(--color-border-primary);
}
/* Right panel specific */
.mf-panel-right {
border-left: 1px solid var(--color-border-primary);
}
.mf-panel-main {
flex: 1;
height: 100%;
@@ -680,16 +692,50 @@
min-width: 0; /* Important to allow the shrinking of flexbox */
}
.mf-panel-right {
position: relative;
flex-shrink: 0;
width: 300px;
min-width: 150px;
max-width: 500px;
height: 100%;
overflow: auto;
border-left: 1px solid var(--color-border-primary);
padding: 0.5rem;
/* Hidden state - common for both panels */
.mf-panel-left.mf-hidden,
.mf-panel-right.mf-hidden {
width: 0;
min-width: 0;
max-width: 0;
overflow: hidden;
border: none;
}
/* No transition during manual resize - common for both panels */
.mf-panel-left.no-transition,
.mf-panel-right.no-transition {
transition: none;
}
/* Common properties for panel toggle icons */
.mf-panel-hide-icon,
.mf-panel-show-icon {
position: absolute;
top: 0.5rem;
cursor: pointer;
z-index: 10;
padding: 0.25rem;
border-radius: 0.25rem;
}
.mf-panel-hide-icon:hover,
.mf-panel-show-icon:hover {
background-color: var(--color-bg-hover, rgba(0, 0, 0, 0.05));
}
/* Hide icon always on the right */
.mf-panel-hide-icon {
right: 0.5rem;
}
/* Show icon positioning */
.mf-panel-show-icon-left {
left: 0.5rem;
}
.mf-panel-show-icon-right {
right: 0.5rem;
}
/* *********************************************** */

4
src/myfasthtml/assets/myfasthtml.js
View File

@@ -72,6 +72,8 @@ function initResizer(containerId, options = {}) {
// Add resizing class for visual feedback
document.body.classList.add('mf-resizing');
currentItem.classList.add('mf-item-resizing');
// Disable transition during manual resize
currentItem.classList.add('no-transition');
}
/**
@@ -114,6 +116,8 @@ function initResizer(containerId, options = {}) {
// Remove resizing classes
document.body.classList.remove('mf-resizing');
currentItem.classList.remove('mf-item-resizing');
// Re-enable transition after manual resize
currentItem.classList.remove('no-transition');
// Get final width
const finalWidth = currentItem.offsetWidth;

120
src/myfasthtml/controls/Panel.py
View File

@@ -5,23 +5,37 @@ from fasthtml.components import Div
from fasthtml.xtend import Script
from myfasthtml.controls.BaseCommands import BaseCommands
from myfasthtml.controls.helpers import mk
from myfasthtml.core.commands import Command
from myfasthtml.core.dbmanager import DbObject
from myfasthtml.core.instances import MultipleInstance
from myfasthtml.icons.fluent_p1 import more_horizontal20_regular
from myfasthtml.icons.fluent_p2 import subtract20_regular
@dataclass
class PanelConf:
left: bool = False
left: bool = True
right: bool = True
class PanelState(DbObject):
def __init__(self, owner, name=None):
super().__init__(owner, name=name)
with self.initializing():
self.left_visible: bool = True
self.right_visible: bool = True
self.left_width: int = 250
self.right_width: int = 250
class Commands(BaseCommands):
def toggle_side(self, side: Literal["left", "right"]):
def toggle_side(self, side: Literal["left", "right"], visible: bool = None):
return Command("TogglePanelSide",
f"Toggle {side} side panel",
self._owner,
self._owner.toggle_side,
args=[side])
args=[side, visible]).htmx(target=f"#{self._id}_panel_{side}")
def update_side_width(self, side: Literal["left", "right"]):
"""
@@ -37,7 +51,7 @@ class Commands(BaseCommands):
f"Update {side} side panel width",
self._owner,
self._owner.update_side_width,
args=[side])
args=[side]).htmx(target=f"#{self._id}_panel_{side}")
class Panel(MultipleInstance):
@@ -54,15 +68,26 @@ class Panel(MultipleInstance):
super().__init__(parent, _id=_id)
self.conf = conf or PanelConf()
self.commands = Commands(self)
self._state = PanelState(self)
self._main = None
self._right = None
self._left = None
def update_side_width(self, side, width):
pass
if side == "left":
self._state.left_width = width
else:
self._state.right_width = width
return self._mk_panel(side)
def toggle_side(self, side):
pass
def toggle_side(self, side, visible):
if side == "left":
self._state.left_visible = visible
else:
self._state.right_visible = visible
return self._mk_panel(side), self._mk_show_icon(side)
def set_main(self, main):
self._main = main
@@ -76,35 +101,82 @@ class Panel(MultipleInstance):
self._left = left
return Div(self._left, id=f"{self._id}_l")
def _mk_right(self):
if not self.conf.right:
def _mk_panel(self, side: Literal["left", "right"]):
enabled = self.conf.left if side == "left" else self.conf.right
if not enabled:
return None
visible = self._state.left_visible if side == "left" else self._state.right_visible
content = self._right if side == "right" else self._left
resizer = Div(
cls="mf-resizer mf-resizer-right",
data_command_id=self.commands.update_side_width("right").id,
data_side="right"
cls=f"mf-resizer mf-resizer-{side}",
data_command_id=self.commands.update_side_width(side).id,
data_side=side
)
return Div(resizer, Div(self._right, id=f"{self._id}_r"), cls="mf-panel-right")
hide_icon = mk.icon(
subtract20_regular,
size=20,
command=self.commands.toggle_side(side, False),
cls="mf-panel-hide-icon"
)
panel_cls = f"mf-panel-{side}"
if not visible:
panel_cls += " mf-hidden"
# Left panel: content then resizer (resizer on the right)
# Right panel: resizer then content (resizer on the left)
if side == "left":
return Div(
Div(hide_icon, content, id=f"{self._id}_content_{side}"),
resizer,
cls=panel_cls,
id=f"{self._id}_panel_{side}"
)
else:
return Div(
resizer,
Div(hide_icon, content, id=f"{self._id}_content_{side}"),
cls=panel_cls,
id=f"{self._id}_panel_{side}"
)
def _mk_left(self):
if not self.conf.left:
def _mk_show_icon(self, side: Literal["left", "right"]):
"""
Create show icon for a panel side if it's hidden.
Args:
side: Which panel side ("left" or "right")
Returns:
Div with icon if panel is hidden, None otherwise
"""
enabled = self.conf.left if side == "left" else self.conf.right
if not enabled:
return None
resizer = Div(
cls="mf-resizer mf-resizer-left",
data_command_id=self.commands.update_side_width("left").id,
data_side="left"
)
is_visible = self._state.left_visible if side == "left" else self._state.right_visible
icon_cls = "hidden" if is_visible else f"mf-panel-show-icon mf-panel-show-icon-{side}"
return Div(Div(self._left, id=f"{self._id}_l"), resizer, cls="mf-panel-left")
return mk.icon(
more_horizontal20_regular,
command=self.commands.toggle_side(side, True),
cls=icon_cls,
id=f"{self._id}_show_{side}"
)
def render(self):
return Div(
self._mk_left(),
Div(self._main, cls="mf-panel-main"),
self._mk_right(),
self._mk_panel("left"),
Div(
self._mk_show_icon("left"),
self._main,
self._mk_show_icon("right"),
cls="mf-panel-main"
),
self._mk_panel("right"),
Script(f"initResizer('{self._id}');"),
cls="mf-panel",
id=self._id,