diff --git a/gui/core/functions.py b/gui/core/functions.py new file mode 100644 index 0000000..5705a53 --- /dev/null +++ b/gui/core/functions.py @@ -0,0 +1,50 @@ +# /////////////////////////////////////////////////////////////// +# +# BY: WANDERSON M.PIMENTA +# PROJECT MADE WITH: Qt Designer and PySide6 +# V: 1.0.0 +# +# This project can be used freely for all uses, as long as they maintain the +# respective credits only in the Python scripts, any information in the visual +# interface (GUI) can be modified without any implication. +# +# There are limitations on Qt licenses if you want to use your products +# commercially, I recommend reading them on the official website: +# https://doc.qt.io/qtforpython/licenses.html +# +# /////////////////////////////////////////////////////////////// + +# IMPORT PACKAGES AND MODULES +# /////////////////////////////////////////////////////////////// +import os + +# APP FUNCTIONS +# /////////////////////////////////////////////////////////////// +class Functions: + + # SET SVG ICON + # /////////////////////////////////////////////////////////////// + def set_svg_icon(icon_name): + app_path = os.path.abspath(os.getcwd()) + folder = "gui/images/svg_icons/" + path = os.path.join(app_path, folder) + icon = os.path.normpath(os.path.join(path, icon_name)) + return icon + + # SET SVG IMAGE + # /////////////////////////////////////////////////////////////// + def set_svg_image(icon_name): + app_path = os.path.abspath(os.getcwd()) + folder = "gui/images/svg_images/" + path = os.path.join(app_path, folder) + icon = os.path.normpath(os.path.join(path, icon_name)) + return icon + + # SET IMAGE + # /////////////////////////////////////////////////////////////// + def set_image(image_name): + app_path = os.path.abspath(os.getcwd()) + folder = "gui/images/images/" + path = os.path.join(app_path, folder) + image = os.path.normpath(os.path.join(path, image_name)) + return image \ No newline at end of file diff --git a/gui/images/svg_images/logo_top_100x22.svg b/gui/images/svg_images/logo_top_100x22.svg new file mode 100644 index 0000000..f1a2c3d --- /dev/null +++ b/gui/images/svg_images/logo_top_100x22.svg @@ -0,0 +1,157 @@ + + + + + + + + + + image/svg+xml + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/gui/themes/default.json b/gui/themes/default.json index 099a702..67ed005 100644 --- a/gui/themes/default.json +++ b/gui/themes/default.json @@ -7,7 +7,7 @@ "dark_four" : "#272c36", "bg_one" : "#2c313c", "bg_two" : "#343b48", - "icon_normal" : "#c3ccdf", + "icon_color" : "#c3ccdf", "icon_hover" : "#dce1ec", "icon_pressed" : "#edf0f5", "icon_active" : "#f5f6f9", diff --git a/gui/uis/windows/main_window/setup_main_window.py b/gui/uis/windows/main_window/setup_main_window.py index 1fe592b..a3ec5ba 100644 --- a/gui/uis/windows/main_window/setup_main_window.py +++ b/gui/uis/windows/main_window/setup_main_window.py @@ -37,6 +37,68 @@ from gui.widgets import * # PY WINDOW # /////////////////////////////////////////////////////////////// class SetupMainWindow: + + # ADD LEFT MENUS + # /////////////////////////////////////////////////////////////// + add_left_menus = [ + { + "btn_icon" : "icon_home.svg", + "btn_id" : "btn_home", + "btn_text" : "Home", + "btn_tooltip" : "Home page", + "show_top" : True, + "is_active" : False + }, + { + "btn_icon" : "icon_widgets.svg", + "btn_id" : "btn_widgets", + "btn_text" : "Open Widgets", + "btn_tooltip" : "Show custom widgets", + "show_top" : True, + "is_active" : False + }, + { + "btn_icon" : "icon_add_user.svg", + "btn_id" : "btn_add_user", + "btn_text" : "Add Users", + "btn_tooltip" : "Add users", + "show_top" : True, + "is_active" : False + }, + { + "btn_icon" : "icon_file.svg", + "btn_id" : "btn_new_file", + "btn_text" : "New File", + "btn_tooltip" : "Create new file", + "show_top" : True, + "is_active" : False + }, + { + "btn_icon" : "icon_folder_open.svg", + "btn_id" : "btn_open_file", + "btn_text" : "Open File", + "btn_tooltip" : "Open file", + "show_top" : True, + "is_active" : False + }, + { + "btn_icon" : "icon_save.svg", + "btn_id" : "btn_save", + "btn_text" : "Save File", + "btn_tooltip" : "Save file", + "show_top" : True, + "is_active" : False + }, + { + "btn_icon" : "icon_settings.svg", + "btn_id" : "btn_settings", + "btn_text" : "Settings", + "btn_tooltip" : "Open settings", + "show_top" : False, + "is_active" : False + } + ] + # SETUP MAIN WINDOW WITH CUSTOM PARAMETERS # /////////////////////////////////////////////////////////////// def setup(self): diff --git a/gui/uis/windows/main_window/ui_main.py b/gui/uis/windows/main_window/ui_main.py index 86c8829..59ed864 100644 --- a/gui/uis/windows/main_window/ui_main.py +++ b/gui/uis/windows/main_window/ui_main.py @@ -113,9 +113,18 @@ class UI_MainWindow(object): self.left_menu = PyLeftMenu( parent = self.left_menu_frame, app_parent = self.central_widget, # For tooltip parent - dark_one = self.themes["app_color"]["dark_one"] + dark_one = self.themes["app_color"]["dark_one"], + dark_three = self.themes["app_color"]["dark_three"], + dark_four = self.themes["app_color"]["dark_four"], + bg_one = self.themes["app_color"]["bg_one"], + icon_color = self.themes["app_color"]["icon_color"], + icon_color_hover = self.themes["app_color"]["icon_hover"], + icon_color_pressed = self.themes["app_color"]["icon_pressed"], + icon_color_active = self.themes["app_color"]["icon_active"], + context_color = self.themes["app_color"]["context_color"], + text_foreground = self.themes["app_color"]["text_foreground"], + text_active = self.themes["app_color"]["text_active"] ) - self.left_menu.add_menus(self.settings["add_menus"]) self.left_menu_layout.addWidget(self.left_menu) # ADD LEFT COLUMN @@ -138,14 +147,18 @@ class UI_MainWindow(object): self.right_app_layout.setSpacing(6) # ADD TITLE BAR FRAME + # /////////////////////////////////////////////////////////////// self.title_bar_frame = QFrame() self.title_bar_frame.setMaximumHeight(40) self.title_bar_frame.setMaximumHeight(40) - self.title_bar_frame.setStyleSheet("background: #343b48; border-radius: 8px;") - # apagar - close = QPushButton("Fechar") - close.setParent(self.title_bar_frame) - close.clicked.connect(lambda: parent.close()) + self.title_bar_layout = QVBoxLayout(self.title_bar_frame) + self.title_bar_layout.setContentsMargins(0,0,0,0) + + # ADD CUSTOM TITLE BAR TO LAYOUT + self.title_bar = PyTitleBar( + parent + ) + self.title_bar_layout.addWidget(self.title_bar) # ADD CONTENT AREA self.content_area_frame = QFrame() diff --git a/gui/widgets/__init__.py b/gui/widgets/__init__.py index 5a5b27c..ec7bc7a 100644 --- a/gui/widgets/__init__.py +++ b/gui/widgets/__init__.py @@ -28,4 +28,8 @@ from . py_grips import PyGrips # LEFT MENU # /////////////////////////////////////////////////////////////// -from . py_left_menu import PyLeftMenu \ No newline at end of file +from . py_left_menu import PyLeftMenu + +# PY TITLE BAR +# /////////////////////////////////////////////////////////////// +from . py_title_bar import PyTitleBar \ No newline at end of file diff --git a/gui/widgets/py_left_menu/py_left_menu.py b/gui/widgets/py_left_menu/py_left_menu.py index 756b4fa..059297d 100644 --- a/gui/widgets/py_left_menu/py_left_menu.py +++ b/gui/widgets/py_left_menu/py_left_menu.py @@ -23,6 +23,10 @@ from qt_core import * from . py_left_menu_button import PyLeftMenuButton from . py_div import PyDiv +# IMPORT FUNCTIONS +# /////////////////////////////////////////////////////////////// +from gui.core.functions import * + # PY LEFT MENU # /////////////////////////////////////////////////////////////// class PyLeftMenu(QWidget): @@ -43,12 +47,14 @@ class PyLeftMenu(QWidget): icon_color_pressed = "#edf0f5", icon_color_active = "#f5f6f9", context_color = "#568af2", + text_foreground = "#8a95aa", + text_active = "#dce1ec", duration_time = 500, radius = 8, minimum_width = 50, maximum_width = 240, - icon_path = "gui/images/svg_icons/icon_menu.svg", - icon_path_close = "gui/images/svg_icons/icon_menu_close.svg", + icon_path = "icon_menu.svg", + icon_path_close = "icon_menu_close.svg", toggle_text = "Hide Menu", toggle_tooltip = "Expand/Retract menu" ): @@ -56,19 +62,23 @@ class PyLeftMenu(QWidget): # PROPERTIES # /////////////////////////////////////////////////////////////// - self._bg_dark_one = dark_one, - self._bg_one = bg_one, - self._icon_color = icon_color, - self._icon_color_hover = icon_color_hover, - self._icon_color_pressed = icon_color_pressed, - self._icon_color_active = icon_color_active, + self._dark_one = dark_one + self._dark_three = dark_three + self._dark_four = dark_four + self._bg_one = bg_one + self._icon_color = icon_color + self._icon_color_hover = icon_color_hover + self._icon_color_pressed = icon_color_pressed + self._icon_color_active = icon_color_active self._context_color = context_color + self._text_foreground = text_foreground + self._text_active = text_active self._duration_time = duration_time self._radius = radius self._minimum_width = minimum_width self._maximum_width = maximum_width - self._icon_path = icon_path - self._icon_path_close = icon_path_close + self._icon_path = Functions.set_svg_icon(icon_path) + self._icon_path_close = Functions.set_svg_icon(icon_path_close) # SET PARENT self._parent = parent @@ -86,6 +96,17 @@ class PyLeftMenu(QWidget): app_parent, text = toggle_text, tooltip_text = toggle_tooltip, + dark_one = self._dark_one, + dark_three = self._dark_three, + dark_four = self._dark_four, + bg_one = self._bg_one, + icon_color = self._icon_color, + icon_color_hover = self._icon_color_active, + icon_color_pressed = self._icon_color_pressed, + icon_color_active = self._icon_color_active, + context_color = self._context_color, + text_foreground = self._text_foreground, + text_active = self._text_active, icon_path = icon_path ) self.toggle_button.clicked.connect(self.toggle_animation) @@ -124,6 +145,17 @@ class PyLeftMenu(QWidget): text = _btn_text, btn_id = _btn_id, tooltip_text = _btn_tooltip, + dark_one = self._dark_one, + dark_three = self._dark_three, + dark_four = self._dark_four, + bg_one = self._bg_one, + icon_color = self._icon_color, + icon_color_hover = self._icon_color_active, + icon_color_pressed = self._icon_color_pressed, + icon_color_active = self._icon_color_active, + context_color = self._context_color, + text_foreground = self._text_foreground, + text_active = self._text_active, icon_path = _btn_icon, is_active = _is_active ) @@ -148,6 +180,7 @@ class PyLeftMenu(QWidget): # EXPAND / RETRACT LEF MENU # /////////////////////////////////////////////////////////////// def toggle_animation(self): + # SELECT TOGGLE WHEN EXPANDED if self.toggle_button._is_toggle_active: self.toggle_button.set_active_toggle(False) self.toggle_button.set_icon(self._icon_path) @@ -155,6 +188,7 @@ class PyLeftMenu(QWidget): self.toggle_button.set_active_toggle(True) self.toggle_button.set_icon(self._icon_path_close) + # CREATE ANIMATION self.animation = QPropertyAnimation(self._parent, b"minimumWidth") self.animation.stop() if self.width() == self._minimum_width: @@ -168,7 +202,7 @@ class PyLeftMenu(QWidget): self.animation.start() - # SET APP LAYOUT + # SETUP APP # /////////////////////////////////////////////////////////////// def setup_ui(self): # ADD MENU LAYOUT diff --git a/gui/widgets/py_left_menu/py_left_menu_button.py b/gui/widgets/py_left_menu/py_left_menu_button.py index 4c0e29a..a653c11 100644 --- a/gui/widgets/py_left_menu/py_left_menu_button.py +++ b/gui/widgets/py_left_menu/py_left_menu_button.py @@ -22,6 +22,10 @@ import os # /////////////////////////////////////////////////////////////// from qt_core import * +# IMPORT FUNCTIONS +# /////////////////////////////////////////////////////////////// +from gui.core.functions import * + # CUSTOM LEFT MENU # /////////////////////////////////////////////////////////////// class PyLeftMenuButton(QPushButton): @@ -43,8 +47,8 @@ class PyLeftMenuButton(QPushButton): context_color = "#568af2", text_foreground = "#8a95aa", text_active = "#dce1ec", - icon_path = "gui/images/svg_icons/icon_add_user.svg", - icon_active_menu = "gui/images/svg_icons/active_menu.svg", + icon_path = "icon_add_user.svg", + icon_active_menu = "active_menu.svg", is_active = False, is_toggle_active = False ): @@ -56,8 +60,8 @@ class PyLeftMenuButton(QPushButton): self.setObjectName(btn_id) # APP PATH - app_path = os.path.abspath(os.getcwd()) - self._icon_path = os.path.normpath(os.path.join(app_path, icon_path)) + self._icon_path = Functions.set_svg_icon(icon_path) + self._icon_active_menu = Functions.set_svg_icon(icon_active_menu) # PROPERTIES self._margin = margin @@ -70,7 +74,6 @@ class PyLeftMenuButton(QPushButton): self._icon_color_hover = icon_color_hover self._icon_color_pressed = icon_color_pressed self._icon_color_active = icon_color_active - self._icon_active_menu = icon_active_menu self._set_icon_color = self._icon_color # Set icon color self._set_bg_color = self._dark_one # Set BG color self._set_text_foreground = text_foreground @@ -108,10 +111,6 @@ class PyLeftMenuButton(QPushButton): rect_inside_active = QRect(7, 5, self.width(), self.height() - 10) rect_text = QRect(45, 0, self.width() - 50, self.height()) - # DRAW DEFAULT BG - p.setBrush(QColor(self._dark_one)) - p.drawRoundedRect(rect, 0, 0) - if self._is_active: # DRAW BG BLUE p.setBrush(QColor(self._context_color)) diff --git a/gui/widgets/py_title_bar/__init__.py b/gui/widgets/py_title_bar/__init__.py new file mode 100644 index 0000000..85dcd27 --- /dev/null +++ b/gui/widgets/py_title_bar/__init__.py @@ -0,0 +1,21 @@ +# /////////////////////////////////////////////////////////////// +# +# BY: WANDERSON M.PIMENTA +# PROJECT MADE WITH: Qt Designer and PySide6 +# V: 1.0.0 +# +# This project can be used freely for all uses, as long as they maintain the +# respective credits only in the Python scripts, any information in the visual +# interface (GUI) can be modified without any implication. +# +# There are limitations on Qt licenses if you want to use your products +# commercially, I recommend reading them on the official website: +# https://doc.qt.io/qtforpython/licenses.html +# +# /////////////////////////////////////////////////////////////// + +# PY TITLE BAR +# Top bar with move application, maximize, restore, minimize, +# close buttons and extra buttons +# /////////////////////////////////////////////////////////////// +from . py_title_bar import PyTitleBar \ No newline at end of file diff --git a/gui/widgets/py_title_bar/py_title_bar.py b/gui/widgets/py_title_bar/py_title_bar.py new file mode 100644 index 0000000..a5dc259 --- /dev/null +++ b/gui/widgets/py_title_bar/py_title_bar.py @@ -0,0 +1,113 @@ +# /////////////////////////////////////////////////////////////// +# +# BY: WANDERSON M.PIMENTA +# PROJECT MADE WITH: Qt Designer and PySide6 +# V: 1.0.0 +# +# This project can be used freely for all uses, as long as they maintain the +# respective credits only in the Python scripts, any information in the visual +# interface (GUI) can be modified without any implication. +# +# There are limitations on Qt licenses if you want to use your products +# commercially, I recommend reading them on the official website: +# https://doc.qt.io/qtforpython/licenses.html +# +# /////////////////////////////////////////////////////////////// + +# IMPORT QT CORE +# /////////////////////////////////////////////////////////////// +from qt_core import * + +# IMPORT FUNCTIONS +# /////////////////////////////////////////////////////////////// +from gui.core.functions import * + +# IMPORT SETTINGS +# /////////////////////////////////////////////////////////////// +from gui.core.json_settings import Settings + +# PY TITLE BAR +# Top bar with move application, maximize, restore, minimize, +# close buttons and extra buttons +# /////////////////////////////////////////////////////////////// +class PyTitleBar(QWidget): + def __init__( + self, + parent, + logo_image = "logo_top_100x22.svg", + logo_width = 100, + buttons = None, + bg_color = "#343b48", + radius = 8 + ): + super(PyTitleBar, self).__init__() + + settings = Settings() + self.settings = settings.items + + # SETUP UI + self.setup_ui() + + # ADD BG COLOR + self.bg.setStyleSheet(f"background-color: {bg_color}; border-radius: {radius}px;") + + # SET LOGO AND WIDTH + self.top_logo.setMinimumWidth(logo_width) + self.top_logo.setMaximumWidth(logo_width) + self.top_logo.setPixmap(Functions.set_svg_image(logo_image)) + + # ADD TITLE TEXT + self.title_label.setText(self.settings["app_name"]) + + # MOVE WINDOW / MAXIMIZE / RESTORE + def moveWindow(event): + # IF MAXIMIZED CHANGE TO NORMAL + # if self.isMaximized(): + # UiFunctions.maximize_restore(self) + # self.resize(_old_size) + # curso_x = self.pos().x() + # curso_y = event.globalPos().y() - QCursor.pos().y() + # self.move(curso_x, curso_y) + # MOVE WINDOW + if event.buttons() == Qt.LeftButton: + parent.move(parent.pos() + event.globalPos() - parent.dragPos) + parent.dragPos = event.globalPos() + event.accept() + self.top_logo.mouseMoveEvent = moveWindow + self.title_label.mouseMoveEvent = moveWindow + + # ADD WIDGETS TO TITLE BAR + self.bg_layout.addWidget(self.top_logo) + self.bg_layout.addWidget(self.title_label) + self.bg_layout.addWidget(self.right_frame) + + # SETUP APP + # /////////////////////////////////////////////////////////////// + def setup_ui(self): + # ADD MENU LAYOUT + self.title_bar_layout = QVBoxLayout(self) + self.title_bar_layout.setContentsMargins(0,0,0,0) + + # ADD BG + self.bg = QFrame() + + # ADD BG LAYOUT + self.bg_layout = QHBoxLayout(self.bg) + self.bg_layout.setContentsMargins(10,0,0,0) + self.bg_layout.setSpacing(0) + + # LEFT FRAME WITH MOVE APP + self.top_logo = QLabel() + + # TITLE LABEL + self.title_label = QLabel() + self.title_label.setAlignment(Qt.AlignVCenter) + self.title_label.setStyleSheet("padding-left: 10px; font-size: 10pt") + + # RIGHT FRAME WITH BUTTONS + self.right_frame = QFrame() + self.right_frame.setMinimumWidth(100) + self.right_frame.setStyleSheet("background: #CCC") + + # ADD TO LAYOUT + self.title_bar_layout.addWidget(self.bg) \ No newline at end of file diff --git a/main.py b/main.py index 7bf97d6..a308124 100644 --- a/main.py +++ b/main.py @@ -62,10 +62,14 @@ class MainWindow(QMainWindow): self.hide_grips = True # Show/Hide resize grips SetupMainWindow.setup(self) - # GET SIGNALS WHEN LEFT MENU BTN IS CLICKED / RELEASED + # LEFT MENUS / GET SIGNALS WHEN LEFT MENU BTN IS CLICKED / RELEASED # /////////////////////////////////////////////////////////////// + # ADD MENUS + self.ui.left_menu.add_menus(SetupMainWindow.add_left_menus) + + # SET SIGNALS self.ui.left_menu.clicked.connect(self.left_menu_btn_clicked) - self.ui.left_menu.clicked.connect(self.left_menu_btn_released) + self.ui.left_menu.released.connect(self.left_menu_btn_released) # SHOW MAIN WINDOW # /////////////////////////////////////////////////////////////// @@ -104,6 +108,12 @@ class MainWindow(QMainWindow): def resizeEvent(self, event): SetupMainWindow.resize_grips(self) + # MOUSE CLICK EVENTS + # /////////////////////////////////////////////////////////////// + def mousePressEvent(self, event): + # SET DRAG POS WINDOW + self.dragPos = event.globalPos() + # SETTINGS WHEN TO START # Set the initial class and also additional parameters of the "QApplication" class diff --git a/settings.json b/settings.json index 8c9a4b5..dd84267 100644 --- a/settings.json +++ b/settings.json @@ -18,63 +18,5 @@ "minimum" : 240, "maximum" : 240 }, - "add_menus" : [ - { - "btn_icon" : "gui/images/svg_icons/icon_home.svg", - "btn_id" : "btn_home", - "btn_text" : "Home", - "btn_tooltip" : "Home page", - "show_top" : true, - "is_active" : false - }, - { - "btn_icon" : "gui/images/svg_icons/icon_widgets.svg", - "btn_id" : "btn_widgets", - "btn_text" : "Open Widgets", - "btn_tooltip" : "Show custom widgets", - "show_top" : true, - "is_active" : false - }, - { - "btn_icon" : "gui/images/svg_icons/icon_add_user.svg", - "btn_id" : "btn_add_user", - "btn_text" : "Add Users", - "btn_tooltip" : "Add users", - "show_top" : true, - "is_active" : false - }, - { - "btn_icon" : "gui/images/svg_icons/icon_file.svg", - "btn_id" : "btn_new_file", - "btn_text" : "New File", - "btn_tooltip" : "Create new file", - "show_top" : true, - "is_active" : false - }, - { - "btn_icon" : "gui/images/svg_icons/icon_folder_open.svg", - "btn_id" : "btn_open_file", - "btn_text" : "Open File", - "btn_tooltip" : "Open file", - "show_top" : true, - "is_active" : false - }, - { - "btn_icon" : "gui/images/svg_icons/icon_save.svg", - "btn_id" : "btn_save", - "btn_text" : "Save File", - "btn_tooltip" : "Save file", - "show_top" : true, - "is_active" : false - }, - { - "btn_icon" : "gui/images/svg_icons/icon_settings.svg", - "btn_id" : "btn_settings", - "btn_text" : "Settings", - "btn_tooltip" : "Open settings", - "show_top" : false, - "is_active" : false - } - ], "theme_name": "default" } \ No newline at end of file