mirror of
https://github.com/Wanderson-Magalhaes/PyOneDark_Qt_Widgets_Modern_GUI.git
synced 2026-02-17 07:53:57 +00:00
31/05/2021
This commit is contained in:
VFX - Visual Effects
@@ -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)
|
||||
|
||||
271
gui/widgets/py_left_column/py_left_button.py
Normal file
271
gui/widgets/py_left_column/py_left_button.py
Normal file
@@ -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)
|
||||
@@ -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
|
||||
# ///////////////////////////////////////////////////////////////
|
||||
|
||||
@@ -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()
|
||||
|
||||
2
main.py
2
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"
|
||||
|
||||
@@ -25,3 +25,4 @@
|
||||
from PySide6.QtCore import *
|
||||
from PySide6.QtGui import *
|
||||
from PySide6.QtWidgets import *
|
||||
from PySide6.QtSvgWidgets import *
|
||||
|
||||
Reference in New Issue
Block a user