diff --git a/gui/uis/windows/main_window/ui_main.py b/gui/uis/windows/main_window/ui_main.py index f768b0e..10d574b 100644 --- a/gui/uis/windows/main_window/ui_main.py +++ b/gui/uis/windows/main_window/ui_main.py @@ -16,6 +16,7 @@ # IMPORT PACKAGES AND MODULES # /////////////////////////////////////////////////////////////// +from gui.core.functions import Functions from gui.widgets.py_credits_bar.py_credits import PyCredits # IMPORT QT CORE @@ -42,6 +43,10 @@ from . setup_main_window import * # /////////////////////////////////////////////////////////////// from gui.uis.pages.ui_main_pages import Ui_MainPages +# RIGHT COLUMN +# /////////////////////////////////////////////////////////////// +from gui.uis.columns.ui_right_column import Ui_RightColumn + # PY WINDOW # /////////////////////////////////////////////////////////////// class UI_MainWindow(object): @@ -147,9 +152,21 @@ class UI_MainWindow(object): # ADD CUSTOM LEFT MENU WIDGET self.left_column = PyLeftColumn( - text_title = "Custom Column", - icon = "teste", - bg_color = self.themes['app_color']['context_color'] + parent, + app_parent = self.central_widget, + text_title = "Settings Left Frame", + text_title_size = self.settings["font"]["title_size"], + text_title_color = self.themes['app_color']['text_foreground'], + icon_path = Functions.set_svg_icon("icon_settings.svg"), + dark_one = self.themes['app_color']['dark_one'], + bg_color = self.themes['app_color']['bg_three'], + btn_color = self.themes['app_color']['bg_three'], + btn_color_hover = self.themes['app_color']['bg_two'], + btn_color_pressed = 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_close_path = Functions.set_svg_icon("icon_close.svg") ) self.left_column_layout.addWidget(self.left_column) @@ -174,6 +191,7 @@ class UI_MainWindow(object): # ADD CUSTOM TITLE BAR TO LAYOUT self.title_bar = PyTitleBar( parent, + logo_width = 100, app_parent = self.central_widget, logo_image = "logo_top_100x22.svg", bg_color = self.themes["app_color"]["bg_two"], @@ -217,6 +235,7 @@ class UI_MainWindow(object): self.content_area_right_frame.setMaximumWidth(self.settings["right_column_size"]["maximum"]) # IMPORT RIGHT COLUMN + # /////////////////////////////////////////////////////////////// self.content_area_right_layout = QVBoxLayout(self.content_area_right_frame) self.content_area_right_layout.setContentsMargins(5,5,5,5) self.content_area_right_layout.setSpacing(0) @@ -234,6 +253,10 @@ class UI_MainWindow(object): # ADD BG self.content_area_right_layout.addWidget(self.content_area_right_bg_frame) + # ADD RIGHT PAGES TO RIGHT COLUMN + self.right_column = Ui_RightColumn() + self.right_column.setupUi(self.content_area_right_bg_frame) + # ADD TO LAYOUTS self.content_area_layout.addWidget(self.content_area_left_frame) self.content_area_layout.addWidget(self.content_area_right_frame) diff --git a/gui/widgets/py_left_column/py_left_button.py b/gui/widgets/py_left_column/py_left_button.py new file mode 100644 index 0000000..0001048 --- /dev/null +++ b/gui/widgets/py_left_column/py_left_button.py @@ -0,0 +1,271 @@ +# /////////////////////////////////////////////////////////////// +# +# 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 * + +# PY TITLE BUTTON +# /////////////////////////////////////////////////////////////// +class PyLeftButton(QPushButton): + def __init__( + self, + parent, + app_parent = None, + tooltip_text = "", + btn_id = None, + width = 30, + height = 30, + radius = 8, + bg_color = "#343b48", + bg_color_hover = "#3c4454", + bg_color_pressed = "#2c313c", + icon_color = "#c3ccdf", + icon_color_hover = "#dce1ec", + icon_color_pressed = "#edf0f5", + icon_color_active = "#f5f6f9", + icon_path = "no_icon.svg", + dark_one = "#1b1e23", + context_color = "#568af2", + text_foreground = "#8a95aa", + is_active = False + ): + super().__init__() + + # SET DEFAULT PARAMETERS + self.setFixedSize(width, height) + self.setCursor(Qt.PointingHandCursor) + self.setObjectName(btn_id) + + # PROPERTIES + self._bg_color = bg_color + self._bg_color_hover = bg_color_hover + self._bg_color_pressed = bg_color_pressed + 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._top_margin = self.height() + 6 + self._is_active = is_active + # Set Parameters + self._set_bg_color = bg_color + self._set_icon_path = icon_path + self._set_icon_color = icon_color + self._set_border_radius = radius + # Parent + self._parent = parent + self._app_parent = app_parent + + # TOOLTIP + self._tooltip_text = tooltip_text + self._tooltip = _ToolTip( + app_parent, + tooltip_text, + dark_one, + context_color, + text_foreground + ) + self._tooltip.hide() + + # SET ACTIVE MENU + # /////////////////////////////////////////////////////////////// + def set_active(self, is_active): + self._is_active = is_active + self.repaint() + + # RETURN IF IS ACTIVE MENU + # /////////////////////////////////////////////////////////////// + def is_active(self): + return self._is_active + + # PAINT EVENT + # painting the button and the icon + # /////////////////////////////////////////////////////////////// + def paintEvent(self, event): + # PAINTER + paint = QPainter() + paint.begin(self) + paint.setRenderHint(QPainter.RenderHint.Antialiasing) + + if self._is_active: + # BRUSH + brush = QBrush(QColor(self._bg_color_pressed)) + else: + # BRUSH + brush = QBrush(QColor(self._set_bg_color)) + + # CREATE RECTANGLE + rect = QRect(0, 0, self.width(), self.height()) + paint.setPen(Qt.NoPen) + paint.setBrush(brush) + paint.drawRoundedRect( + rect, + self._set_border_radius, + self._set_border_radius + ) + + # DRAW ICONS + self.icon_paint(paint, self._set_icon_path, rect) + + # END PAINTER + paint.end() + + # CHANGE STYLES + # Functions with custom styles + # /////////////////////////////////////////////////////////////// + def change_style(self, event): + if event == QEvent.Enter: + self._set_bg_color = self._bg_color_hover + self._set_icon_color = self._icon_color_hover + self.repaint() + elif event == QEvent.Leave: + self._set_bg_color = self._bg_color + self._set_icon_color = self._icon_color + self.repaint() + elif event == QEvent.MouseButtonPress: + self._set_bg_color = self._bg_color_pressed + self._set_icon_color = self._icon_color_pressed + self.repaint() + elif event == QEvent.MouseButtonRelease: + self._set_bg_color = self._bg_color_hover + self._set_icon_color = self._icon_color_hover + self.repaint() + + # MOUSE OVER + # Event triggered when the mouse is over the BTN + # /////////////////////////////////////////////////////////////// + def enterEvent(self, event): + self.change_style(QEvent.Enter) + self.move_tooltip() + self._tooltip.show() + + # MOUSE LEAVE + # Event fired when the mouse leaves the BTN + # /////////////////////////////////////////////////////////////// + def leaveEvent(self, event): + self.change_style(QEvent.Leave) + self.move_tooltip() + self._tooltip.hide() + + # MOUSE PRESS + # Event triggered when the left button is pressed + # /////////////////////////////////////////////////////////////// + def mousePressEvent(self, event): + if event.button() == Qt.LeftButton: + self.change_style(QEvent.MouseButtonPress) + # SET FOCUS + self.setFocus() + # EMIT SIGNAL + return self.clicked.emit() + + # MOUSE RELEASED + # Event triggered after the mouse button is released + # /////////////////////////////////////////////////////////////// + def mouseReleaseEvent(self, event): + if event.button() == Qt.LeftButton: + self.change_style(QEvent.MouseButtonRelease) + # EMIT SIGNAL + return self.released.emit() + + # DRAW ICON WITH COLORS + # /////////////////////////////////////////////////////////////// + def icon_paint(self, qp, image, rect): + icon = QPixmap(image) + painter = QPainter(icon) + painter.setCompositionMode(QPainter.CompositionMode_SourceIn) + if self._is_active: + painter.fillRect(icon.rect(), self._context_color) + else: + painter.fillRect(icon.rect(), self._set_icon_color) + qp.drawPixmap( + (rect.width() - icon.width()) / 2, + (rect.height() - icon.height()) / 2, + icon + ) + painter.end() + + # SET ICON + # /////////////////////////////////////////////////////////////// + def set_icon(self, icon_path): + self._set_icon_path = icon_path + self.repaint() + + # MOVE TOOLTIP + # /////////////////////////////////////////////////////////////// + def move_tooltip(self): + # GET MAIN WINDOW PARENT + gp = self.mapToGlobal(QPoint(0, 0)) + + # SET WIDGET TO GET POSTION + # Return absolute position of widget inside app + pos = self._parent.mapFromGlobal(gp) + + # FORMAT POSITION + # Adjust tooltip position with offset + pos_x = (pos.x() - self._tooltip.width()) + self.width() + 5 + pos_y = pos.y() + self._top_margin + + # SET POSITION TO WIDGET + # Move tooltip position + self._tooltip.move(pos_x, pos_y) + +# TOOLTIP +# /////////////////////////////////////////////////////////////// +class _ToolTip(QLabel): + # TOOLTIP / LABEL StyleSheet + style_tooltip = """ + QLabel {{ + background-color: {_dark_one}; + color: {_text_foreground}; + padding-left: 10px; + padding-right: 10px; + border-radius: 17px; + border: 0px solid transparent; + border-right: 3px solid {_context_color}; + font: 800 9pt "Segoe UI"; + }} + """ + def __init__( + self, + parent, + tooltip, + dark_one, + context_color, + text_foreground + ): + QLabel.__init__(self) + + # LABEL SETUP + style = self.style_tooltip.format( + _dark_one = dark_one, + _context_color = context_color, + _text_foreground = text_foreground + ) + self.setObjectName(u"label_tooltip") + self.setStyleSheet(style) + self.setMinimumHeight(34) + self.setParent(parent) + self.setText(tooltip) + self.adjustSize() + + # SET DROP SHADOW + self.shadow = QGraphicsDropShadowEffect(self) + self.shadow.setBlurRadius(30) + self.shadow.setXOffset(0) + self.shadow.setYOffset(0) + self.shadow.setColor(QColor(0, 0, 0, 80)) + self.setGraphicsEffect(self.shadow) diff --git a/gui/widgets/py_left_column/py_left_column.py b/gui/widgets/py_left_column/py_left_column.py index d9cd02a..7729064 100644 --- a/gui/widgets/py_left_column/py_left_column.py +++ b/gui/widgets/py_left_column/py_left_column.py @@ -18,37 +18,72 @@ # /////////////////////////////////////////////////////////////// from qt_core import * +# IMPORT CLOSE BUTTON +# /////////////////////////////////////////////////////////////// +from . py_left_button import * + +# IMPORT LEFT COLUMN +# /////////////////////////////////////////////////////////////// +from gui.uis.columns.ui_left_column import Ui_LeftColumn + class PyLeftColumn(QWidget): def __init__( self, + parent, + app_parent, text_title, - icon, - bg_color + text_title_size, + text_title_color, + dark_one, + bg_color, + btn_color, + btn_color_hover, + btn_color_pressed, + icon_path, + icon_color, + icon_color_hover, + icon_color_pressed, + icon_close_path, + radius = 8 ): super().__init__() # PARAMETERS + self._parent = parent + self._app_parent = app_parent self._text_title = text_title - self._icon = icon + self._text_title_size = text_title_size + self._text_title_color = text_title_color + self._icon_path = icon_path + self._dark_one = dark_one self._bg_color = bg_color + self._btn_color = btn_color + self._btn_color_hover = btn_color_hover + self._btn_color_pressed = btn_color_pressed + self._icon_color = icon_color + self._icon_color_hover = icon_color_hover + self._icon_color_pressed = icon_color_pressed + self._icon_close_path = icon_close_path + self._radius = radius # SETUP UI self.setup_ui() # ADD LEFT COLUMN TO BG FRAME - + self.left_column = Ui_LeftColumn() + self.left_column.setupUi(self.content_frame) def setup_ui(self): # BASE LAYOUT self.base_layout = QVBoxLayout(self) self.base_layout.setContentsMargins(0,0,0,0) - self.base_layout.setSpacing(8) + self.base_layout.setSpacing(0) # TITLE FRAME # /////////////////////////////////////////////////////////////// self.title_frame = QFrame() - self.title_frame.setMaximumHeight(48) - self.title_frame.setMinimumHeight(48) + self.title_frame.setMaximumHeight(47) + self.title_frame.setMinimumHeight(47) # TITLE BASE LAYOUT self.title_base_layout = QVBoxLayout(self.title_frame) @@ -59,18 +94,74 @@ class PyLeftColumn(QWidget): self.title_bg_frame.setObjectName("title_bg_frame") self.title_bg_frame.setStyleSheet(f''' #title_bg_frame {{ - background: {self._bg_color}; - border-radius: 8px; + background-color: {self._bg_color}; + border-radius: {self._radius}px; }} ''') + # LAYOUT TITLE BG + self.title_bg_layout = QHBoxLayout(self.title_bg_frame) + self.title_bg_layout.setContentsMargins(5,5,5,5) + + # ICON + self.icon_frame = QFrame() + self.icon_frame.setFixedSize(30,30) + self.icon_frame.setStyleSheet("background: none;") + self.icon_layout = QVBoxLayout(self.icon_frame) + self.icon_layout.setContentsMargins(0,0,0,0) + self.icon_layout.setSpacing(5) + self.icon = QSvgWidget(self._icon_path) + self.icon_layout.addWidget(self.icon, Qt.AlignCenter, Qt.AlignCenter) + + # LABEL + self.title_label = QLabel(self._text_title) + self.title_label.setObjectName("title_label") + self.title_label.setStyleSheet(f''' + #title_label {{ + font-size: {self._text_title_size}pt; + color: {self._text_title_color}; + padding-bottom: 2px; + background: none; + }} + ''') + + # BTN FRAME + self.btn_frame = QFrame() + self.btn_frame.setFixedSize(30,30) + self.btn_frame.setStyleSheet("background: none;") + # CLOSE BUTTON + self.btn_close = PyLeftButton( + self._parent, + self._app_parent, + tooltip_text = "Hide", + dark_one = self._dark_one, + bg_color = self._btn_color, + bg_color_hover = self._btn_color_hover, + bg_color_pressed = self._btn_color_pressed, + icon_color = self._icon_color, + icon_color_hover = self._icon_color_hover, + icon_color_pressed = self._icon_color_pressed, + icon_color_active = self._icon_color_pressed, + context_color = self._icon_color_pressed, + text_foreground = self._text_title_color, + icon_path = self._icon_close_path, + radius = 6, + ) + self.btn_close.setParent(self.btn_frame) + + + # ADD TO TITLE LAYOUT + self.title_bg_layout.addWidget(self.icon_frame) + self.title_bg_layout.addWidget(self.title_label) + self.title_bg_layout.addWidget(self.btn_frame) + # ADD TITLE BG TO LAYOUT self.title_base_layout.addWidget(self.title_bg_frame) # CONTENT FRAME # /////////////////////////////////////////////////////////////// self.content_frame = QFrame() - self.content_frame.setStyleSheet("background: transparent") + self.content_frame.setStyleSheet("background: none") # ADD TO LAYOUT # /////////////////////////////////////////////////////////////// diff --git a/gui/widgets/py_title_bar/py_title_bar.py b/gui/widgets/py_title_bar/py_title_bar.py index c2f0c9b..ebfdd76 100644 --- a/gui/widgets/py_title_bar/py_title_bar.py +++ b/gui/widgets/py_title_bar/py_title_bar.py @@ -16,6 +16,7 @@ # IMPORT QT CORE # /////////////////////////////////////////////////////////////// +from PySide6 import QtSvgWidgets from qt_core import * # IMPORT FUNCTIONS @@ -78,6 +79,7 @@ class PyTitleBar(QWidget): self.settings = settings.items # PARAMETERS + self._logo_image = logo_image self._dark_one = dark_one self._bg_color = bg_color self._div_color = div_color @@ -105,7 +107,7 @@ class PyTitleBar(QWidget): # 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)) + #self.top_logo.setPixmap(Functions.set_svg_image(logo_image)) # MOVE WINDOW / MAXIMIZE / RESTORE # /////////////////////////////////////////////////////////////// @@ -268,6 +270,11 @@ class PyTitleBar(QWidget): # LEFT FRAME WITH MOVE APP self.top_logo = QLabel() + self.top_logo_layout = QVBoxLayout(self.top_logo) + self.top_logo_layout.setContentsMargins(0,0,0,0) + self.logo_svg = QSvgWidget() + self.logo_svg.load(Functions.set_svg_image(self._logo_image)) + self.top_logo_layout.addWidget(self.logo_svg, Qt.AlignCenter, Qt.AlignCenter) # TITLE LABEL self.title_label = QLabel() diff --git a/main.py b/main.py index 0eb8f14..0a1533f 100644 --- a/main.py +++ b/main.py @@ -45,7 +45,7 @@ os.environ["QT_FONT_DPI"] = "96" # /////////////////////////////////////////////////////////////// class MainWindow(QMainWindow): def __init__(self): - QMainWindow.__init__(self) + super().__init__() # SETUP MAIN WINDOw # Load widgets from "gui\uis\main_window\ui_main.py" diff --git a/qt_core.py b/qt_core.py index 957ac90..86f2b63 100644 --- a/qt_core.py +++ b/qt_core.py @@ -25,3 +25,4 @@ from PySide6.QtCore import * from PySide6.QtGui import * from PySide6.QtWidgets import * +from PySide6.QtSvgWidgets import *