Sygil-Dev/sygil-webui
1
1
Fork 0
mirror of https://github.com/Sygil-Dev/sygil-webui.git synced 2024-12-14 22:13:41 +03:00
Code Issues Projects Releases Wiki Activity

renamed appbar to titlebar, because we don't want 'page.appbar'(flet ui)

Browse Source
This commit is contained in:
aedhcarrick 2022-12-15 13:08:51 -06:00
parent 3df54f3645
commit 58db3ffe02
8 changed files with 188 additions and 196 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
webui/flet/scripts/flet_asset_manager.py
View File

@ -9,7 +9,18 @@ from scripts import flet_utils
class AssetManager(ft.Container):
def setup(self):
pass
self.width = self.page.left_panel_width
self.bgcolor = self.page.primary_color
self.padding = self.page.container_padding
self.margin = self.page.container_margin
self.set_tab_text_size(self.page.text_size)
self.set_tab_bgcolor(self.page.secondary_color)
self.set_tab_padding(self.page.container_padding)
self.set_tab_margin(self.page.container_margin)
self.dragbar.content.width = self.page.vertical_divider_width
self.dragbar.content.color = self.page.tertiary_color
def add_blank_layer(self, e):
self.layer_panel.add_blank_layer(e)

9
webui/flet/scripts/flet_canvas.py
View File

@ -9,6 +9,15 @@ from scripts import flet_utils
class Canvas(ft.Container):
def setup(self):
self.bgcolor = self.page.secondary_color
self.padding = self.page.container_padding
self.margin = self.page.container_margin
self.overlay.tools.zoom_in = self.page.icon_size
self.overlay.tools.zoom_out = self.page.icon_size
self.overlay.canvas_size.content.color = self.page.text_color
self.overlay.canvas_size.content.size = self.page.text_size
self.refresh_canvas()
def refresh_canvas(self):

7
webui/flet/scripts/flet_gallery_window.py
View File

@ -9,6 +9,9 @@ from scripts import flet_utils
class GalleryWindow(ft.AlertDialog):
def setup(self):
self.refresh_galleries()
def refresh_galleries(self):
self.refresh_gallery('uploads')
self.refresh_gallery('outputs')
@ -41,14 +44,14 @@ class GalleryDisplay(ft.Container):
ft.Row(
controls = [
ft.IconButton(
height = self.height * 0.75,
height = self.height * 0.5,
icon_size = 50,
content = ft.Icon(ft.icons.ARROW_CIRCLE_LEFT_OUTLINED),
tooltip = 'previous image',
on_click = None,
),
ft.IconButton(
height = self.height * 0.75,
height = self.height * 0.5,
icon_size = 50,
content = ft.Icon(ft.icons.ARROW_CIRCLE_RIGHT_OUTLINED),
tooltip = 'next image',

15
webui/flet/scripts/flet_messages.py
View File

@ -10,7 +10,18 @@ from scripts import flet_utils
class Messages(ft.Container):
def setup(self):
pass
self.height = self.page.bottom_panel_height
self.bgcolor = self.page.primary_color
self.padding = self.page.container_padding
self.margin = self.page.container_margin
self.set_tab_text_size(self.page.text_size)
self.set_tab_bgcolor(self.page.secondary_color)
self.set_tab_padding(self.page.container_padding)
self.set_tab_margin(self.page.container_margin)
self.dragbar.content.height = self.page.divider_height
self.dragbar.content.color = self.page.tertiary_color
def set_tab_text_size(self, size):
for tab in self.tabs:
@ -79,7 +90,7 @@ messages_dragbar = ft.GestureDetector(
)
messages = Messages(
content = ft.Column(
content = ft.Stack(
controls = [
messages_dragbar,
ft.Tabs(

12
webui/flet/scripts/flet_property_manager.py
View File

@ -8,6 +8,18 @@ from scripts import flet_utils
class PropertyManager(ft.Container):
def setup(self):
self.width = self.page.right_panel_width
self.bgcolor = self.page.primary_color
self.padding = self.page.container_padding
self.margin = self.page.container_margin
self.set_tab_text_size(self.page.text_size)
self.set_tab_bgcolor(self.page.secondary_color)
self.set_tab_padding(self.page.container_padding)
self.set_tab_margin(self.page.container_margin)
self.dragbar.content.width = self.page.vertical_divider_width
self.dragbar.content.color = self.page.tertiary_color
def set_tab_text_size(self, size):
for tab in self.tabs:
tab.tab_content.size = size

53
webui/flet/scripts/flet_appbar.py → webui/flet/scripts/flet_titlebar.py
View File

@ -7,6 +7,28 @@ import flet as ft
from scripts import flet_utils
class TitleBar(ft.Container):
def setup(self):
self.width = self.page.width
self.height = self.page.titlebar_height
self.title.size = self.page.titlebar_height * 0.5
self.title.color = self.page.tertiary_color
self.prompt.text_size = max(12, self.page.titlebar_height * 0.25)
self.prompt.focused_border_color = self.page.tertiary_color
self.layout_menu.controls[0].text_size = self.page.text_size
self.theme_switcher.size = self.page.titlebar_height
self.theme_switcher.icon_size = self.page.titlebar_height * 0.5
self.theme_switcher.tooltip = f"Click to change between the light and dark themes. Current {'(Light theme)' if self.page.theme_mode == 'light' else '(Dark theme)'}"
self.theme_switcher.on_click = self.page.change_theme_mode
self.settings_button.size = self.page.titlebar_height
self.settings_button.icon_size = self.page.titlebar_height * 0.5
self.settings_button.on_click = self.page.open_settings
title = ft.Text(
value = " Sygil ",
text_align = 'center',
@ -18,8 +40,9 @@ prompt = ft.TextField(
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,
expand = True,
tooltip = "Prompt to use for generation.",
hint_text = "A corgi wearing a top hat as an oil painting.",
)
@ -69,19 +92,21 @@ option_list = ft.Row(
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),
],
titlebar = TitleBar(
content = ft.Row(
controls = [
title,
prompt,
#generate_button,
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
titlebar.title = title
titlebar.prompt = prompt
titlebar.generate_button = generate_button
titlebar.layout_menu = layout_menu
titlebar.theme_switcher = theme_switcher
titlebar.settings_button = settings_button

75
webui/flet/scripts/flet_tool_manager.py
View File

@ -49,17 +49,35 @@ tool_list = [
Tool('fill', ft.icons.FORMAT_COLOR_FILL_OUTLINED, 'Fill tool', tool_select),
]
class ToolBar(ft.Container):
class ToolManager(ft.Container):
def setup(self):
self.toolbox.get_tools()
self.width = self.page.tool_manager_width
self.bgcolor = self.page.primary_color
self.padding = self.page.container_padding
self.margin = self.page.container_margin
def resize_toolbar(self, e: ft.DragUpdateEvent):
self.page.toolbar_width = max(50, self.page.toolbar_width + e.delta_x)
toolbar.width = self.page.toolbar_width
self.toolbox.bgcolor = self.page.secondary_color
self.toolbox.padding = self.page.container_padding
self.toolbox.margin = self.page.container_margin
self.tool_divider.height = self.page.divider_height
self.tool_divider.color = self.page.tertiary_color
self.tool_properties.bgcolor = self.page.secondary_color
self.tool_properties.padding = self.page.container_padding
self.tool_properties.margin = self.page.container_margin
self.dragbar.content.width = self.page.vertical_divider_width
self.dragbar.content.color = self.page.tertiary_color
def resize_tool_manager(self, e: ft.DragUpdateEvent):
self.page.tool_manager_width = max(50, self.page.tool_manager_width + e.delta_x)
tool_manager.width = self.page.tool_manager_width
self.page.update()
def resize_toolbox(self, e: ft.DragUpdateEvent):
min_height = (self.page.toolbar_button_size * 2)
min_height = (self.page.tool_manager_button_size * 2)
self.page.toolbox_height = max(min_height, self.page.toolbox_height + e.delta_y)
toolbox.height = self.page.toolbox_height
self.update()
@ -68,14 +86,18 @@ class ToolBox(ft.Container):
def get_tools(self):
for action in action_list:
self.content.controls.append(self.make_button(action))
divider = ft.Divider(
height = self.page.divider_height,
color = self.page.tertiary_color,
divider = ft.Container(
content = ft.Divider(
height = self.page.divider_height,
color = self.page.tertiary_color,
),
margin = 0,
padding = ft.padding.only(left = 10, top = 0, right = 0, bottom = 0),
)
self.content.controls.append(divider)
for tool in tool_list:
self.content.controls.append(self.make_button(tool))
toolbar.update()
tool_manager.update()
def make_button(self,button_info):
button = ft.IconButton(
@ -107,17 +129,23 @@ toolbox = ToolBox(
spacing = 0,
run_spacing = 0,
controls = [],
)
),
margin = 0,
padding = ft.padding.only(left = 15, top = 0, right = 0, bottom = 0),
)
def resize_toolbox(e):
toolbar.resize_toolbox(e)
tool_manager.resize_toolbox(e)
tool_divider = ft.GestureDetector(
mouse_cursor = ft.MouseCursor.RESIZE_ROW,
drag_interval = 50,
on_pan_update = resize_toolbox,
content = ft.Divider(),
content = ft.Container(
content = ft.Divider(),
margin = 0,
padding = ft.padding.only(left = 10, top = 0, right = 0, bottom = 0),
),
)
# ToolPropertyPanel == ft.Container
@ -127,18 +155,18 @@ tool_properties = ToolPropertyPanel(
)
)
def resize_toolbar(e):
toolbar.resize_toolbar(e)
def resize_tool_manager(e):
tool_manager.resize_tool_manager(e)
toolbar_dragbar = ft.GestureDetector(
tool_manager_dragbar = ft.GestureDetector(
mouse_cursor = ft.MouseCursor.RESIZE_COLUMN,
drag_interval = 50,
on_pan_update = resize_toolbar,
on_pan_update = resize_tool_manager,
content = ft.VerticalDivider(),
)
# ToolBar = ft.Container
toolbar = ToolBar(
# ToolManager = ft.Container
tool_manager = ToolManager(
content = ft.Row(
controls = [
ft.Column(
@ -148,17 +176,18 @@ toolbar = ToolBar(
tool_properties,
],
alignment = 'start',
horizontal_alignment = 'center',
expand = True,
),
toolbar_dragbar,
tool_manager_dragbar,
],
expand = True,
),
clip_behavior = 'antiAlias',
)
toolbar.toolbox = toolbox
toolbar.tool_divider = tool_divider
toolbar.tool_properties = tool_properties
toolbar.dragbar = toolbar_dragbar
tool_manager.toolbox = toolbox
tool_manager.tool_divider = tool_divider.content.content
tool_manager.tool_properties = tool_properties
tool_manager.dragbar = tool_manager_dragbar

200
webui/flet/webui_flet.py
View File

@ -11,8 +11,8 @@ 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_titlebar import titlebar
from scripts.flet_tool_manager import tool_manager
from scripts.flet_asset_manager import asset_manager
from scripts.flet_canvas import canvas
from scripts.flet_messages import messages
@ -28,16 +28,17 @@ def main(page: ft.Page):
# init ###############################################################
# messages
page.messages = messages
page.message = messages.message
page.max_message_history = 50
# ui
page.current_layout = 'Default'
page.appbar_height = 50
page.titlebar_height = 50
page.bottom_panel_height = page.height * 0.2
page.toolbox_height = 250
page.toolbar_width = 50
page.toolbar_button_size = 40
page.tool_manager_width = 50
page.tool_manager_button_size = 40
page.left_panel_width = 200
page.right_panel_width = 250
@ -59,6 +60,9 @@ def main(page: ft.Page):
page.divider_height = 10
page.vertical_divider_width = 10
# titlebar
page.titlebar = titlebar
def change_theme_mode(e):
page.theme_mode = "dark" if page.theme_mode == "light" else "light"
@ -82,24 +86,30 @@ def main(page: ft.Page):
page.set_layout = set_layout
# tools
page.tool_manager = tool_manager
page.current_tool = 'pan'
# layer manager
# asset manager
page.asset_manager = asset_manager
page.layer_list = []
page.visible_layer_list = []
page.active_layer_list = []
# canvas
page.canvas = canvas
page.canvas_background = flet_utils.get_canvas_background('webui/flet/assets/images/templategrid_albedo.png')
page.canvas_size = (512,512)
def get_viewport_size():
viewport_width = page.width - (page.toolbar_width + (page.vertical_divider_width * 3) + page.left_panel_width + page.right_panel_width)
viewport_width = page.width - (page.tool_manager_width + (page.vertical_divider_width * 3) + page.left_panel_width + page.right_panel_width)
viewport_height = page.height - (page.appbar_height * 3) - page.bottom_panel_height
return (viewport_width, viewport_height)
page.get_viewport_size = get_viewport_size
# property manager
page.property_manager = property_manager
# settings
def load_settings():
settings = flet_utils.get_user_settings_from_config()
@ -128,8 +138,6 @@ def main(page: ft.Page):
page.session.set('layout','default')
# settings window ####################################################
def close_settings_window(e):
@ -167,9 +175,8 @@ def main(page: ft.Page):
page.open_gallery = open_gallery_window
page.refresh_gallery = gallery_window.refresh_gallery
page.gallery_window = gallery_window
page.refresh_gallery = gallery_window.refresh_gallery
gallery_window.content.width = page.width * 0.5
gallery_window.content.bgcolor = page.primary_color
gallery_window.content.padding = page.container_padding
@ -186,7 +193,7 @@ def main(page: ft.Page):
gallery_window.uploads_gallery.margin = page.container_margin
# file manager ######################################################
# file manager #######################################################
def close_upload_window(e):
uploads.open = False
@ -229,107 +236,7 @@ def main(page: ft.Page):
page.overlay.append(file_picker)
# layouts ############################################################
def set_current_tools():
layout = page.current_layout
if layout == 'Default':
set_tools(default_tools)
elif layout == 'Textual Inversion':
set_tools(textual_inversion_tools)
elif layout == 'Node Editor':
set_tools(node_editor_tools)
toolbar.update()
def set_property_panel_options():
layout = page.current_layout
if layout == 'Default':
set_properties(default_properties)
elif layout == 'Textual Inversion':
set_properties(textual_inversion_properties)
elif layout == 'Node Editor':
set_properties(node_editor_properties)
# app bar ############################################################
# 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
appbar.title.size = page.appbar_height * 0.5
appbar.title.color = page.tertiary_color
appbar.prompt.text_size = max(12,page.appbar_height * 0.25)
appbar.prompt.focused_border_color = page.tertiary_color
appbar.layout_menu.controls[0].text_size = page.text_size
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
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 ############################################################
page.toolbar = toolbar
toolbar.width = page.toolbar_width
toolbar.bgcolor = page.primary_color
toolbar.padding = page.container_padding
toolbar.margin = page.container_margin
toolbar.toolbox.bgcolor = page.secondary_color
toolbar.toolbox.padding = page.container_padding
toolbar.toolbox.margin = page.container_margin
toolbar.tool_divider.content.height = page.divider_height
toolbar.tool_divider.content.color = page.tertiary_color
toolbar.tool_properties.bgcolor = page.secondary_color
toolbar.tool_properties.padding = page.container_padding
toolbar.tool_properties.margin = page.container_margin
toolbar.dragbar.content.width = page.vertical_divider_width
toolbar.dragbar.content.color = page.tertiary_color
# layer manager ######################################################
page.asset_manager = asset_manager
asset_manager.width = page.left_panel_width
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
# canvas #############################################################
page.canvas = canvas
canvas.bgcolor = page.secondary_color
canvas.padding = page.container_padding
canvas.margin = page.container_margin
canvas.overlay.tools.zoom_in = page.icon_size
canvas.overlay.tools.zoom_out = page.icon_size
canvas.overlay.canvas_size.content.color = page.text_color
canvas.overlay.canvas_size.content.size = page.text_size
# text editor ########################################################
# center panel #############################################################
text_editor = ft.Container(
content = ft.Text('Under Construction.'),
@ -337,9 +244,6 @@ def main(page: ft.Page):
expand = True,
)
# viewport ##########################################################
viewport = ft.Container(
bgcolor = page.primary_color,
padding = page.container_padding,
@ -368,25 +272,6 @@ def main(page: ft.Page):
expand = True,
)
# bottom_panel #######################################################
page.messages = messages
messages.height = page.bottom_panel_height
messages.bgcolor = page.primary_color
messages.padding = page.container_padding
messages.margin = page.container_margin
messages.set_tab_text_size(page.text_size)
messages.set_tab_bgcolor(page.secondary_color)
messages.set_tab_padding(page.container_padding)
messages.set_tab_margin(page.container_margin)
messages.dragbar.content.height = page.divider_height
messages.dragbar.content.color = page.tertiary_color
# center panel #######################################################
center_panel = ft.Container(
content = ft.Column(
controls = [
@ -401,27 +286,30 @@ def main(page: ft.Page):
)
# property manager ###################################################
page.property_manager = property_manager
property_manager.width = page.right_panel_width
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
# layouts ############################################################
def set_current_tools():
layout = page.current_layout
if layout == 'Default':
set_tools(default_tools)
elif layout == 'Textual Inversion':
set_tools(textual_inversion_tools)
elif layout == 'Node Editor':
set_tools(node_editor_tools)
tool_manager.update()
def set_property_panel_options():
layout = page.current_layout
if layout == 'Default':
set_properties(default_properties)
elif layout == 'Textual Inversion':
set_properties(textual_inversion_properties)
elif layout == 'Node Editor':
set_properties(node_editor_properties)
default_layout = ft.Row(
controls = [
toolbar,
tool_manager,
asset_manager,
center_panel,
property_manager,
@ -441,7 +329,7 @@ def main(page: ft.Page):
expand = True,
content = ft.Column(
controls = [
appbar,
titlebar,
current_layout,
],
),
@ -454,9 +342,13 @@ def main(page: ft.Page):
page.settings_window.setup(page.session.get('settings'))
page.gallery_window.setup()
page.toolbar.setup()
page.titlebar.setup()
page.tool_manager.setup()
page.asset_manager.setup()
page.canvas.setup()
page.messages.setup()
page.property_manager.setup()
page.update()
ft.app(target=main, port= 8505, assets_dir="assets", upload_dir="assets/uploads")