mirror of
https://github.com/Sygil-Dev/sygil-webui.git
synced 2024-12-14 22:13:41 +03:00
moved app_panel to 'flet_appbar.py'
This commit is contained in:
aedhcarrick
parent
90a7a5d6cf
commit
08070a5c0f
87
webui/flet/scripts/flet_appbar.py
Normal file
87
webui/flet/scripts/flet_appbar.py
Normal file
@ -0,0 +1,87 @@
|
||||
# flet_appbar.py
|
||||
|
||||
# Flet imports
|
||||
import flet as ft
|
||||
|
||||
# utils imports
|
||||
from scripts import flet_utils
|
||||
|
||||
|
||||
title = ft.Text(
|
||||
value = " Sygil ",
|
||||
text_align = 'center',
|
||||
)
|
||||
|
||||
prompt = ft.TextField(
|
||||
value = "",
|
||||
min_lines = 1,
|
||||
max_lines = 1,
|
||||
content_padding = ft.padding.only(left = 12, top = 0, right = 0, bottom = 0),
|
||||
shift_enter = True,
|
||||
tooltip = "Prompt to use for generation.",
|
||||
autofocus = True,
|
||||
hint_text = "A corgi wearing a top hat as an oil painting.",
|
||||
)
|
||||
|
||||
generate_button = ft.ElevatedButton(
|
||||
text = "Generate",
|
||||
on_click = None,
|
||||
)
|
||||
|
||||
def set_layout(e):
|
||||
e.page.set_layout(e)
|
||||
|
||||
layout_menu = ft.Row(
|
||||
alignment = 'start',
|
||||
controls = [
|
||||
ft.Dropdown(
|
||||
options = [
|
||||
ft.dropdown.Option(text="Default"),
|
||||
ft.dropdown.Option(text="Textual Inversion"),
|
||||
ft.dropdown.Option(text="Node Editor"),
|
||||
],
|
||||
value = 'Default',
|
||||
text_size = 20,
|
||||
alignment = ft.alignment.center,
|
||||
content_padding = ft.padding.only(left = 12, top = 0, right = 0, bottom = 0),
|
||||
tooltip = "Switch between different workspaces",
|
||||
on_change = set_layout,
|
||||
)
|
||||
],
|
||||
)
|
||||
|
||||
layout_menu.text_size = layout_menu.controls[0].text_size
|
||||
|
||||
theme_switcher = ft.IconButton(
|
||||
ft.icons.WB_SUNNY_OUTLINED,
|
||||
)
|
||||
|
||||
settings_button = ft.IconButton(
|
||||
icon = ft.icons.SETTINGS,
|
||||
)
|
||||
|
||||
option_list = ft.Row(
|
||||
controls = [
|
||||
ft.Container(content = layout_menu),
|
||||
ft.Container(content = theme_switcher),
|
||||
ft.Container(content = settings_button),
|
||||
],
|
||||
alignment = 'end'
|
||||
)
|
||||
|
||||
appbar = ft.Row(
|
||||
controls = [
|
||||
ft.Container(content = title),
|
||||
ft.Container(expand = True, content = prompt),
|
||||
#ft.Container(expand = 1, content = generate_button),
|
||||
ft.Container(content = option_list),
|
||||
],
|
||||
)
|
||||
|
||||
appbar.title = title
|
||||
appbar.prompt = prompt
|
||||
appbar.generate_button = generate_button
|
||||
appbar.layout_menu = layout_menu
|
||||
appbar.theme_switcher = theme_switcher
|
||||
appbar.settings_button = settings_button
|
||||
|
||||
@ -17,6 +17,24 @@ class AssetManager(ft.Container):
|
||||
def add_images_as_layers(self, images):
|
||||
self.layer_panel.add_images_as_layers(images)
|
||||
|
||||
def set_tab_text_size(self, size):
|
||||
for tab in self.tabs:
|
||||
tab.tab_content.size = size
|
||||
|
||||
def set_tab_bgcolor(self, color):
|
||||
for tab in self.tabs:
|
||||
tab.content.bgcolor = color
|
||||
|
||||
def set_tab_padding(self, padding):
|
||||
for tab in self.tabs:
|
||||
tab.content.padding = padding
|
||||
|
||||
def set_tab_margin(self, margin):
|
||||
for tab in self.tabs:
|
||||
tab.content.margin = margin
|
||||
|
||||
|
||||
|
||||
class AssetPanel(ft.Container):
|
||||
pass
|
||||
|
||||
@ -48,7 +66,9 @@ class LayerPanel(ft.Container):
|
||||
def add_layer_slot(self, image):
|
||||
label = ft.TextField(
|
||||
value = image.filename,
|
||||
content_padding = ft.padding.only(left = 4, top = 0, right = 0, bottom = 0),
|
||||
focused_border_color = self.page.tertiary_color,
|
||||
text_size = self.page.text_size,
|
||||
content_padding = ft.padding.only(left = 12, top = 0, right = 0, bottom = 0),
|
||||
expand = True,
|
||||
)
|
||||
handle = ft.Icon(
|
||||
@ -61,6 +81,7 @@ class LayerPanel(ft.Container):
|
||||
label,
|
||||
handle,
|
||||
],
|
||||
height = self.page.icon_size * 2,
|
||||
expand = True,
|
||||
),
|
||||
)
|
||||
@ -135,7 +156,6 @@ asset_manager_dragbar = ft.GestureDetector(
|
||||
)
|
||||
|
||||
asset_manager = AssetManager(
|
||||
clip_behavior = 'antiAlias',
|
||||
content = ft.Row(
|
||||
controls = [
|
||||
ft.Column(
|
||||
@ -145,12 +165,16 @@ asset_manager = AssetManager(
|
||||
animation_duration = 300,
|
||||
tabs = [
|
||||
ft.Tab(
|
||||
text = "Layers",
|
||||
content = layer_panel,
|
||||
tab_content = ft.Text(
|
||||
value = "Layers",
|
||||
),
|
||||
),
|
||||
ft.Tab(
|
||||
text = "Assets",
|
||||
content = asset_panel,
|
||||
tab_content = ft.Text(
|
||||
value = "Assets",
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
@ -162,8 +186,10 @@ asset_manager = AssetManager(
|
||||
],
|
||||
expand = True,
|
||||
),
|
||||
clip_behavior = 'antiAlias',
|
||||
)
|
||||
|
||||
asset_manager.tabs = asset_manager.content.controls[0].controls[0].tabs
|
||||
asset_manager.dragbar = asset_manager_dragbar
|
||||
asset_manager.layer_panel = layer_panel
|
||||
asset_manager.asset_panel = asset_panel
|
||||
|
||||
@ -71,6 +71,12 @@ image_stack = ImageStack(
|
||||
content = ft.Stack(),
|
||||
)
|
||||
|
||||
canvas_size_display = ft.Container(
|
||||
content = ft.Text(
|
||||
value = "test",
|
||||
),
|
||||
)
|
||||
|
||||
def zoom_in_canvas(e):
|
||||
pass
|
||||
|
||||
@ -92,9 +98,11 @@ zoom_out_button = ft.IconButton(
|
||||
canvas_tools = ft.Container(
|
||||
content = ft.Column(
|
||||
controls = [
|
||||
canvas_size_display,
|
||||
zoom_in_button,
|
||||
zoom_out_button,
|
||||
],
|
||||
horizontal_alignment = 'end',
|
||||
),
|
||||
top = 4,
|
||||
right = 4,
|
||||
@ -103,18 +111,9 @@ canvas_tools = ft.Container(
|
||||
canvas_tools.zoom_in = zoom_in_button
|
||||
canvas_tools.zoom_out = zoom_out_button
|
||||
|
||||
canvas_size_display = ft.Container(
|
||||
content = ft.Text(
|
||||
value = "test",
|
||||
),
|
||||
bottom = 4,
|
||||
right = 4,
|
||||
)
|
||||
|
||||
canvas_overlay = CanvasOverlay(
|
||||
[
|
||||
canvas_tools,
|
||||
canvas_size_display,
|
||||
],
|
||||
)
|
||||
|
||||
@ -129,6 +128,7 @@ canvas = Canvas(
|
||||
],
|
||||
clip_behavior = None,
|
||||
),
|
||||
clip_behavior = 'antiAlias',
|
||||
alignment = ft.alignment.center,
|
||||
expand = True,
|
||||
)
|
||||
|
||||
@ -8,7 +8,22 @@ from scripts import flet_utils
|
||||
|
||||
|
||||
class PropertyManager(ft.Container):
|
||||
pass
|
||||
def set_tab_text_size(self, size):
|
||||
for tab in self.tabs:
|
||||
tab.tab_content.size = size
|
||||
|
||||
def set_tab_bgcolor(self, color):
|
||||
for tab in self.tabs:
|
||||
tab.content.content.bgcolor = color
|
||||
|
||||
def set_tab_padding(self, padding):
|
||||
for tab in self.tabs:
|
||||
tab.content.padding = padding
|
||||
|
||||
def set_tab_margin(self, margin):
|
||||
for tab in self.tabs:
|
||||
tab.content.margin = margin
|
||||
|
||||
|
||||
class PropertyPanel(ft.Container):
|
||||
pass
|
||||
@ -20,6 +35,7 @@ property_panel = PropertyPanel(
|
||||
ft.Text("Under Construction"),
|
||||
],
|
||||
),
|
||||
clip_behavior = 'antiAlias',
|
||||
)
|
||||
|
||||
output_panel = PropertyPanel(
|
||||
@ -29,6 +45,7 @@ output_panel = PropertyPanel(
|
||||
ft.Text("Under Construction."),
|
||||
],
|
||||
),
|
||||
clip_behavior = 'antiAlias',
|
||||
)
|
||||
|
||||
def resize_property_manager(e: ft.DragUpdateEvent):
|
||||
@ -54,12 +71,16 @@ property_manager = PropertyManager(
|
||||
animation_duration = 300,
|
||||
tabs = [
|
||||
ft.Tab(
|
||||
text = 'Properties',
|
||||
content = property_panel,
|
||||
tab_content = ft.Text(
|
||||
value = "Properties",
|
||||
),
|
||||
),
|
||||
ft.Tab(
|
||||
text = 'Output',
|
||||
content = output_panel,
|
||||
tab_content = ft.Text(
|
||||
value = "Output",
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
@ -70,8 +91,10 @@ property_manager = PropertyManager(
|
||||
],
|
||||
expand = True,
|
||||
),
|
||||
clip_behavior = 'antiAlias',
|
||||
)
|
||||
|
||||
property_manager.tabs = property_manager.content.controls[1].controls[0].tabs
|
||||
property_manager.dragbar = property_manager_dragbar
|
||||
property_manager.property_panel = property_panel
|
||||
property_manager.output_panel = output_panel
|
||||
|
||||
@ -154,6 +154,7 @@ toolbar = ToolBar(
|
||||
],
|
||||
expand = True,
|
||||
),
|
||||
clip_behavior = 'antiAlias',
|
||||
)
|
||||
|
||||
toolbar.toolbox = toolbox
|
||||
|
||||
@ -11,6 +11,7 @@ from scripts import flet_utils
|
||||
from scripts.flet_settings_window import settings_window
|
||||
from scripts.flet_gallery_window import gallery_window
|
||||
from scripts.flet_file_manager import file_picker, uploads, imports
|
||||
from scripts.flet_appbar import appbar
|
||||
from scripts.flet_tool_manager import toolbar
|
||||
from scripts.flet_asset_manager import asset_manager
|
||||
from scripts.flet_canvas import canvas
|
||||
@ -50,7 +51,7 @@ def main(page: ft.Page):
|
||||
page.tertiary_color = 'blue'
|
||||
|
||||
page.text_color = None
|
||||
page.text_size = 20
|
||||
page.text_size = 14
|
||||
page.icon_size = 20
|
||||
page.padding = 0
|
||||
page.margin = 0
|
||||
@ -65,13 +66,13 @@ def main(page: ft.Page):
|
||||
def change_theme_mode(e):
|
||||
page.theme_mode = "dark" if page.theme_mode == "light" else "light"
|
||||
|
||||
if "(Light theme)" in theme_switcher.tooltip:
|
||||
theme_switcher.tooltip = theme_switcher.tooltip.replace("(Light theme)", '')
|
||||
if "(Light theme)" in appbar.theme_switcher.tooltip:
|
||||
appbar.theme_switcher.tooltip = appbar.theme_switcher.tooltip.replace("(Light theme)", '')
|
||||
|
||||
if "(Dark theme)" in theme_switcher.tooltip:
|
||||
theme_switcher.tooltip = theme_switcher.tooltip.replace("(Dark theme)", '')
|
||||
if "(Dark theme)" in appbar.theme_switcher.tooltip:
|
||||
appbar.theme_switcher.tooltip = appbar.theme_switcher.tooltip.replace("(Dark theme)", '')
|
||||
|
||||
theme_switcher.tooltip += "(Light theme)" if page.theme_mode == "light" else "(Dark theme)"
|
||||
appbar.theme_switcher.tooltip += "(Light theme)" if page.theme_mode == "light" else "(Dark theme)"
|
||||
page.update()
|
||||
|
||||
page.change_theme_mode = change_theme_mode
|
||||
@ -256,85 +257,27 @@ def main(page: ft.Page):
|
||||
|
||||
# app bar ############################################################
|
||||
|
||||
app_bar_title = ft.Text(
|
||||
value = "Sygil",
|
||||
size = page.appbar_height * 0.5,
|
||||
color = page.tertiary_color,
|
||||
text_align = 'center',
|
||||
)
|
||||
# have to rename appbar --> titlebar, because page.appbar is something we don't want.
|
||||
page.titlebar = appbar
|
||||
appbar.width = page.width
|
||||
appbar.height = page.appbar_height
|
||||
|
||||
prompt = ft.TextField(
|
||||
value = "",
|
||||
min_lines = 1,
|
||||
max_lines = 1,
|
||||
content_padding = 10,
|
||||
shift_enter = True,
|
||||
tooltip = "Prompt to use for generation.",
|
||||
autofocus = True,
|
||||
hint_text = "A corgi wearing a top hat as an oil painting.",
|
||||
height = page.appbar_height,
|
||||
)
|
||||
appbar.title.size = page.appbar_height * 0.5
|
||||
appbar.title.color = page.tertiary_color
|
||||
|
||||
generate_button = ft.ElevatedButton(
|
||||
text = "Generate",
|
||||
on_click = None,
|
||||
height = page.appbar_height,
|
||||
)
|
||||
appbar.prompt.text_size = max(12,page.appbar_height * 0.25)
|
||||
appbar.prompt.focused_border_color = page.tertiary_color
|
||||
|
||||
layout_menu = ft.Row(
|
||||
alignment = 'start',
|
||||
controls = [
|
||||
ft.Dropdown(
|
||||
options = [
|
||||
ft.dropdown.Option(text="Default"),
|
||||
ft.dropdown.Option(text="Textual Inversion"),
|
||||
ft.dropdown.Option(text="Node Editor"),
|
||||
],
|
||||
value = 'Default',
|
||||
content_padding = 10,
|
||||
width = 200,
|
||||
on_change = page.set_layout,
|
||||
tooltip = "Switch between different workspaces",
|
||||
height = page.appbar_height,
|
||||
)
|
||||
],
|
||||
height = page.appbar_height,
|
||||
)
|
||||
appbar.layout_menu.controls[0].text_size = page.text_size
|
||||
|
||||
theme_switcher = ft.IconButton(
|
||||
ft.icons.WB_SUNNY_OUTLINED,
|
||||
on_click = page.change_theme_mode,
|
||||
expand = 1,
|
||||
tooltip = f"Click to change between the light and dark themes. Current {'(Light theme)' if page.theme_mode == 'light' else '(Dark theme)'}",
|
||||
height = page.appbar_height,
|
||||
)
|
||||
appbar.theme_switcher.size = page.appbar_height
|
||||
appbar.theme_switcher.icon_size = page.appbar_height * 0.5
|
||||
appbar.theme_switcher.tooltip = f"Click to change between the light and dark themes. Current {'(Light theme)' if page.theme_mode == 'light' else '(Dark theme)'}"
|
||||
appbar.theme_switcher.on_click = page.change_theme_mode
|
||||
|
||||
settings_button = ft.IconButton(
|
||||
icon = ft.icons.SETTINGS,
|
||||
on_click = page.open_settings,
|
||||
height = page.appbar_height,
|
||||
)
|
||||
|
||||
option_list = ft.Row(
|
||||
controls = [
|
||||
ft.Container(expand = 2, content = layout_menu),
|
||||
ft.Container(expand = 1, content = theme_switcher),
|
||||
ft.Container(expand = 1, content = settings_button),
|
||||
],
|
||||
height = page.appbar_height,
|
||||
)
|
||||
|
||||
appbar = ft.Row(
|
||||
width = page.width,
|
||||
controls = [
|
||||
ft.Container(content = app_bar_title),
|
||||
ft.VerticalDivider(width = 20, opacity = 0),
|
||||
ft.Container(expand = 6, content = prompt),
|
||||
#ft.Container(expand = 1, content = generate_button),
|
||||
ft.Container(expand = 4, content = option_list),
|
||||
],
|
||||
height = page.appbar_height,
|
||||
)
|
||||
appbar.settings_button.size = page.appbar_height
|
||||
appbar.settings_button.icon_size = page.appbar_height * 0.5
|
||||
appbar.settings_button.on_click = page.open_settings
|
||||
|
||||
|
||||
# toolbar ############################################################
|
||||
@ -367,18 +310,14 @@ def main(page: ft.Page):
|
||||
asset_manager.bgcolor = page.primary_color
|
||||
asset_manager.padding = page.container_padding
|
||||
asset_manager.margin = page.container_margin
|
||||
asset_manager.set_tab_text_size(page.text_size)
|
||||
asset_manager.set_tab_bgcolor(page.secondary_color)
|
||||
asset_manager.set_tab_padding(page.container_padding)
|
||||
asset_manager.set_tab_margin(page.container_margin)
|
||||
|
||||
asset_manager.dragbar.content.width = page.vertical_divider_width
|
||||
asset_manager.dragbar.content.color = page.tertiary_color
|
||||
|
||||
asset_manager.layer_panel.bgcolor = page.secondary_color
|
||||
asset_manager.layer_panel.padding = page.container_padding
|
||||
asset_manager.layer_panel.margin = page.container_margin
|
||||
|
||||
asset_manager.asset_panel.bgcolor = page.secondary_color
|
||||
asset_manager.asset_panel.padding = page.container_padding
|
||||
asset_manager.asset_panel.margin = page.container_margin
|
||||
|
||||
|
||||
# canvas #############################################################
|
||||
|
||||
@ -414,12 +353,19 @@ def main(page: ft.Page):
|
||||
animation_duration = 300,
|
||||
tabs = [
|
||||
ft.Tab(
|
||||
text = 'Canvas',
|
||||
content = canvas,
|
||||
tab_content = ft.Text(
|
||||
value = 'Canvas',
|
||||
size = page.text_size,
|
||||
),
|
||||
),
|
||||
ft.Tab(
|
||||
text = 'Text Editor',
|
||||
content = text_editor,
|
||||
tab_content = ft.Text(
|
||||
value = 'Text Editor',
|
||||
size = page.text_size,
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
@ -504,18 +450,14 @@ def main(page: ft.Page):
|
||||
property_manager.bgcolor = page.primary_color
|
||||
property_manager.padding = page.container_padding
|
||||
property_manager.margin = page.container_margin
|
||||
property_manager.set_tab_text_size(page.text_size)
|
||||
property_manager.set_tab_bgcolor(page.secondary_color)
|
||||
property_manager.set_tab_padding(page.container_padding)
|
||||
property_manager.set_tab_margin(page.container_margin)
|
||||
|
||||
property_manager.dragbar.content.width = page.vertical_divider_width
|
||||
property_manager.dragbar.content.color = page.tertiary_color
|
||||
|
||||
property_manager.property_panel.bgcolor = page.secondary_color
|
||||
property_manager.property_panel.padding = page.container_padding
|
||||
property_manager.property_panel.margin = page.container_margin
|
||||
|
||||
property_manager.output_panel.bgcolor = page.secondary_color
|
||||
property_manager.output_panel.padding = page.container_padding
|
||||
property_manager.output_panel.margin = page.container_margin
|
||||
|
||||
|
||||
# layouts ############################################################
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user