From 0eb4fb77fdae4c753904d072c39696bcee389a08 Mon Sep 17 00:00:00 2001 From: VFX - Visual Effects Date: Tue, 11 May 2021 13:29:36 -0300 Subject: [PATCH] 11/05/2021 --- gui/images/svg_icons/active_menu.svg | 79 +++++++++++ gui/images/svg_icons/icon_add_user.svg | 61 +++++++++ gui/images/svg_icons/icon_attachment.svg | 78 +++++++++++ gui/images/svg_icons/icon_busy.svg | 60 +++++++++ gui/images/svg_icons/icon_close.svg | 61 +++++++++ gui/images/svg_icons/icon_emoticons.svg | 78 +++++++++++ gui/images/svg_icons/icon_idle.svg | 60 +++++++++ gui/images/svg_icons/icon_invisible.svg | 61 +++++++++ gui/images/svg_icons/icon_maximize.svg | 61 +++++++++ gui/images/svg_icons/icon_minimize.svg | 61 +++++++++ gui/images/svg_icons/icon_more_options.svg | 78 +++++++++++ gui/images/svg_icons/icon_online.svg | 60 +++++++++ gui/images/svg_icons/icon_restore.svg | 60 +++++++++ gui/images/svg_icons/icon_search.svg | 60 +++++++++ gui/images/svg_icons/icon_send.svg | 78 +++++++++++ gui/images/svg_icons/icon_settings.svg | 78 +++++++++++ gui/images/svg_icons/icon_signal.svg | 78 +++++++++++ gui/uis/windows/main_window/ui_main.py | 31 +++-- gui/widgets/py_left_menu/py_left_menu.py | 47 +++++-- .../py_left_menu/py_left_menu_button.py | 123 +++++++++++++++--- gui/widgets/py_window/py_window.py | 2 +- main.py | 3 +- settings.json | 2 +- 23 files changed, 1318 insertions(+), 42 deletions(-) create mode 100644 gui/images/svg_icons/active_menu.svg create mode 100644 gui/images/svg_icons/icon_add_user.svg create mode 100644 gui/images/svg_icons/icon_attachment.svg create mode 100644 gui/images/svg_icons/icon_busy.svg create mode 100644 gui/images/svg_icons/icon_close.svg create mode 100644 gui/images/svg_icons/icon_emoticons.svg create mode 100644 gui/images/svg_icons/icon_idle.svg create mode 100644 gui/images/svg_icons/icon_invisible.svg create mode 100644 gui/images/svg_icons/icon_maximize.svg create mode 100644 gui/images/svg_icons/icon_minimize.svg create mode 100644 gui/images/svg_icons/icon_more_options.svg create mode 100644 gui/images/svg_icons/icon_online.svg create mode 100644 gui/images/svg_icons/icon_restore.svg create mode 100644 gui/images/svg_icons/icon_search.svg create mode 100644 gui/images/svg_icons/icon_send.svg create mode 100644 gui/images/svg_icons/icon_settings.svg create mode 100644 gui/images/svg_icons/icon_signal.svg diff --git a/gui/images/svg_icons/active_menu.svg b/gui/images/svg_icons/active_menu.svg new file mode 100644 index 0000000..b74309a --- /dev/null +++ b/gui/images/svg_icons/active_menu.svg @@ -0,0 +1,79 @@ + + + + + + + + + + image/svg+xml + + + + + + + + + diff --git a/gui/images/svg_icons/icon_add_user.svg b/gui/images/svg_icons/icon_add_user.svg new file mode 100644 index 0000000..52c916f --- /dev/null +++ b/gui/images/svg_icons/icon_add_user.svg @@ -0,0 +1,61 @@ + + + + + + + + image/svg+xml + + + + + + + + + diff --git a/gui/images/svg_icons/icon_attachment.svg b/gui/images/svg_icons/icon_attachment.svg new file mode 100644 index 0000000..51a21f5 --- /dev/null +++ b/gui/images/svg_icons/icon_attachment.svg @@ -0,0 +1,78 @@ + + + + + + + + + + image/svg+xml + + + + + + + + + diff --git a/gui/images/svg_icons/icon_busy.svg b/gui/images/svg_icons/icon_busy.svg new file mode 100644 index 0000000..309de02 --- /dev/null +++ b/gui/images/svg_icons/icon_busy.svg @@ -0,0 +1,60 @@ + + + + + + + + image/svg+xml + + + + + + + + + diff --git a/gui/images/svg_icons/icon_close.svg b/gui/images/svg_icons/icon_close.svg new file mode 100644 index 0000000..56651fa --- /dev/null +++ b/gui/images/svg_icons/icon_close.svg @@ -0,0 +1,61 @@ + + + + + + + + image/svg+xml + + + + + + + + + diff --git a/gui/images/svg_icons/icon_emoticons.svg b/gui/images/svg_icons/icon_emoticons.svg new file mode 100644 index 0000000..9b5c4e9 --- /dev/null +++ b/gui/images/svg_icons/icon_emoticons.svg @@ -0,0 +1,78 @@ + + + + + + + + + + image/svg+xml + + + + + + + + + diff --git a/gui/images/svg_icons/icon_idle.svg b/gui/images/svg_icons/icon_idle.svg new file mode 100644 index 0000000..0997f52 --- /dev/null +++ b/gui/images/svg_icons/icon_idle.svg @@ -0,0 +1,60 @@ + + + + + + + + image/svg+xml + + + + + + + + + diff --git a/gui/images/svg_icons/icon_invisible.svg b/gui/images/svg_icons/icon_invisible.svg new file mode 100644 index 0000000..cf2bcec --- /dev/null +++ b/gui/images/svg_icons/icon_invisible.svg @@ -0,0 +1,61 @@ + + + + + + + + image/svg+xml + + + + + + + + + diff --git a/gui/images/svg_icons/icon_maximize.svg b/gui/images/svg_icons/icon_maximize.svg new file mode 100644 index 0000000..4b15003 --- /dev/null +++ b/gui/images/svg_icons/icon_maximize.svg @@ -0,0 +1,61 @@ + + + + + + + + image/svg+xml + + + + + + + + + diff --git a/gui/images/svg_icons/icon_minimize.svg b/gui/images/svg_icons/icon_minimize.svg new file mode 100644 index 0000000..e333b56 --- /dev/null +++ b/gui/images/svg_icons/icon_minimize.svg @@ -0,0 +1,61 @@ + + + + + + + + image/svg+xml + + + + + + + + + diff --git a/gui/images/svg_icons/icon_more_options.svg b/gui/images/svg_icons/icon_more_options.svg new file mode 100644 index 0000000..689ac36 --- /dev/null +++ b/gui/images/svg_icons/icon_more_options.svg @@ -0,0 +1,78 @@ + + + + + + + + + + image/svg+xml + + + + + + + + + diff --git a/gui/images/svg_icons/icon_online.svg b/gui/images/svg_icons/icon_online.svg new file mode 100644 index 0000000..d335a7e --- /dev/null +++ b/gui/images/svg_icons/icon_online.svg @@ -0,0 +1,60 @@ + + + + + + + + image/svg+xml + + + + + + + + + diff --git a/gui/images/svg_icons/icon_restore.svg b/gui/images/svg_icons/icon_restore.svg new file mode 100644 index 0000000..18dabdd --- /dev/null +++ b/gui/images/svg_icons/icon_restore.svg @@ -0,0 +1,60 @@ + + + + + + + + image/svg+xml + + + + + + + + + diff --git a/gui/images/svg_icons/icon_search.svg b/gui/images/svg_icons/icon_search.svg new file mode 100644 index 0000000..b072584 --- /dev/null +++ b/gui/images/svg_icons/icon_search.svg @@ -0,0 +1,60 @@ + + + + + + + + image/svg+xml + + + + + + + + + diff --git a/gui/images/svg_icons/icon_send.svg b/gui/images/svg_icons/icon_send.svg new file mode 100644 index 0000000..8e75b7f --- /dev/null +++ b/gui/images/svg_icons/icon_send.svg @@ -0,0 +1,78 @@ + + + + + + + + + + image/svg+xml + + + + + + + + + diff --git a/gui/images/svg_icons/icon_settings.svg b/gui/images/svg_icons/icon_settings.svg new file mode 100644 index 0000000..02f1b90 --- /dev/null +++ b/gui/images/svg_icons/icon_settings.svg @@ -0,0 +1,78 @@ + + + + + + + + + + image/svg+xml + + + + + + + + + diff --git a/gui/images/svg_icons/icon_signal.svg b/gui/images/svg_icons/icon_signal.svg new file mode 100644 index 0000000..5c1558d --- /dev/null +++ b/gui/images/svg_icons/icon_signal.svg @@ -0,0 +1,78 @@ + + + + + + + + + + image/svg+xml + + + + + + + + + diff --git a/gui/uis/windows/main_window/ui_main.py b/gui/uis/windows/main_window/ui_main.py index 23157b8..11c1eda 100644 --- a/gui/uis/windows/main_window/ui_main.py +++ b/gui/uis/windows/main_window/ui_main.py @@ -57,6 +57,16 @@ class UI_MainWindow(object): # SET INITIAL PARAMETERS parent.setMinimumSize(self.settings["startup_size"][0], self.settings["startup_size"][1]) + + # SET CENTRAL WIDGET + # Add central widget to app + # /////////////////////////////////////////////////////////////// + self.central_widget = QWidget() + self.central_widget_layout = QVBoxLayout(self.central_widget) + if self.settings["custom_title_bar"]: + self.central_widget_layout.setContentsMargins(10,10,10,10) + else: + self.central_widget_layout.setContentsMargins(0,0,0,0) # LOAD PY WINDOW CUSTOM WIDGET # Add inside PyWindow "layout" all Widgets @@ -71,6 +81,9 @@ class UI_MainWindow(object): # If disable custom title bar if not self.settings["custom_title_bar"]: self.window.set_stylesheet(border_radius = 0, border_size = 0) + + # ADD PY WINDOW TO CENTRAL WIDGET + self.central_widget_layout.addWidget(self.window) # ADD FRAME LEFT MENU # Add here the custom left menu bar @@ -78,7 +91,6 @@ class UI_MainWindow(object): self.left_menu_frame = QFrame() self.left_menu_frame.setMaximumSize(50, 17280) self.left_menu_frame.setMinimumSize(self.settings["menu_size"]["minimum"], 0) - self.left_menu_frame.setStyleSheet("background: red; border-radius: 8px;") # LEFT MENU LAYOUT self.left_menu_layout = QHBoxLayout(self.left_menu_frame) @@ -87,14 +99,17 @@ class UI_MainWindow(object): # ADD LEFT MENU # Add custom left menu here # /////////////////////////////////////////////////////////////// - self.left_menu = PyLeftMenu(self.left_menu_frame) + self.left_menu = PyLeftMenu( + parent = self.left_menu_frame, + dark_one = self.themes["app_color"]["dark_one"] + ) self.left_menu_layout.addWidget(self.left_menu) + print(self.themes["app_color"]["dark_one"]) # ADD RIGHT WIDGETS # Add here the right widgets # /////////////////////////////////////////////////////////////// self.right_app_frame = QFrame() - self.right_app_frame.setStyleSheet("border-radius: 8px;") # ADD RIGHT APP LAYOUT self.right_app_layout = QVBoxLayout(self.right_app_frame) @@ -109,13 +124,13 @@ class UI_MainWindow(object): # ADD CONTENT AREA self.content_area_frame = QFrame() - self.content_area_frame.setStyleSheet("background: #f00") + self.content_area_frame.setStyleSheet("background: transparent") # CREDITS / BOTTOM APP FRAME self.credits_frame = QFrame() self.credits_frame.setMaximumHeight(26) self.credits_frame.setMaximumHeight(26) - self.credits_frame.setStyleSheet("background: #f00") + self.credits_frame.setStyleSheet("background: transparent") # ADD WIDGETS TO RIGHT LAYOUT self.right_app_layout.addWidget(self.title_bar_frame) @@ -130,8 +145,4 @@ class UI_MainWindow(object): # ADD CENTRAL WIDGET AND SET CONTENT MARGINS # /////////////////////////////////////////////////////////////// - parent.setCentralWidget(self.window) - if self.settings["custom_title_bar"]: - parent.setContentsMargins(10,10,10,10) - else: - parent.setContentsMargins(0,0,0,0) \ No newline at end of file + parent.setCentralWidget(self.central_widget) \ 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 e0f027e..7ed7be8 100644 --- a/gui/widgets/py_left_menu/py_left_menu.py +++ b/gui/widgets/py_left_menu/py_left_menu.py @@ -40,20 +40,29 @@ class PyLeftMenu(QWidget): def __init__( self, parent = None, - bg_color = "#1b1e23", - bg_color_app = "#2c313c", + dark_one = "#1b1e23", + bg_one = "#2c313c", icon_color = "#c3ccdf", icon_color_hover = "#dce1ec", icon_color_pressed = "#edf0f5", icon_color_active = "#f5f6f9", - context_color = "#568af2" + context_color = "#568af2", + duration_time = 500, + radius = 8 ): super(PyLeftMenu, self).__init__() - # LOAD THEMES + # PROPERTIES # /////////////////////////////////////////////////////////////// - themes = Themes() - self.themes = themes.items + 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._context_color = context_color + self._duration_time = duration_time + self._radius = radius # SET PARENT self.parent = parent @@ -61,19 +70,30 @@ class PyLeftMenu(QWidget): # SETUP WIDGETS self.setup_ui() - self.button = PyLeftMenuButton("tooltip") + # SET BG COLOR + self.bg.setStyleSheet(f"background: {dark_one}; border-radius: {radius};") + + self.button = PyLeftMenuButton("Add user menu") self.button.clicked.connect(lambda: self.size_change()) self.button_2 = QPushButton("teste") + self.button_3 = PyLeftMenuButton("Teste menu", icon_path="gui/images/svg_icons/icon_settings.svg") self.layout.addWidget(self.button) self.layout.addWidget(self.button_2) + self.layout.addWidget(self.button_3) - self.animation = QPropertyAnimation(parent, b"minimumWidth") - self.animation.setStartValue(50) - self.animation.setEndValue(240) + + + def size_change(self): + self.animation = QPropertyAnimation(self.parent, b"minimumWidth") + self.animation.stop() + if self.width() == 50: + self.animation.setStartValue(self.width()) + self.animation.setEndValue(240) + else: + self.animation.setStartValue(self.width()) + self.animation.setEndValue(50) self.animation.setEasingCurve(QEasingCurve.InOutCubic) - self.animation.setDuration(500) - - def size_change(self): + self.animation.setDuration(self._duration_time) self.animation.start() # SET APP LAYOUT @@ -84,7 +104,6 @@ class PyLeftMenu(QWidget): # ADD BG self.bg = QFrame(self) - self.bg.setStyleSheet("background: #CCC") # ADD LAYOUT self.layout = QVBoxLayout(self.bg) 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 7764f7f..e1f3a1d 100644 --- a/gui/widgets/py_left_menu/py_left_menu_button.py +++ b/gui/widgets/py_left_menu/py_left_menu_button.py @@ -47,17 +47,37 @@ class PyLeftMenuButton(QPushButton): self, text, margin = 4, - bg_one_color = "#2c313c" + dark_one = "#1b1e23", + dark_three = "#21252d", + bg_one = "#2c313c", + icon_color = "#c3ccdf", + icon_color_hover = "#dce1ec", + icon_color_pressed = "#edf0f5", + icon_color_active = "#f5f6f9", + context_color = "#568af2", + icon_path = "gui/images/svg_icons/icon_add_user.svg", + icon_active_menu = "gui/images/svg_icons/active_menu.svg" ): super(PyLeftMenuButton, self).__init__() self.setText(text) self.setCursor(Qt.PointingHandCursor) - self.setMaximumHeight(40) - self.setMinimumHeight(40) + self.setMaximumHeight(50) + self.setMinimumHeight(50) + + # APP PATH + app_path = os.path.abspath(os.getcwd()) + self._icon_path = os.path.normpath(os.path.join(app_path, icon_path)) # PROPERTIES self._margin = margin - self._bg_one_color = bg_one_color + self._dark_one = dark_one + self._dark_three = dark_three + self._bg_one = bg_one + self._context_color = context_color + self._icon_color = icon_color + self._icon_color_active = icon_color_active + self._icon_set_color = self._icon_color + self._icon_active_menu = icon_active_menu def paintEvent(self, event): # PAINTER @@ -65,26 +85,99 @@ class PyLeftMenuButton(QPushButton): p.begin(self) p.setRenderHint(QPainter.Antialiasing) p.setPen(Qt.NoPen) + font = p.font() + font.setFamily("Segoe UI") + font.setPointSize(10) + p.setFont(font) # RECTANGLES - rect = QRect(0, 0, self.width(), self.height()) - rect_inside = QRect( - self._margin, - self._margin, - self.width() - (self._margin * 2), - self.height() - (self._margin * 2) - ) + rect = QRect(4, 5, self.width(), self.height() - 10) + rect_icon = QRect(0, 0, 50, self.height()) + rect_blue = QRect(4, 5, 20, self.height() - 10) + rect_inside_active = QRect(7, 5, self.width(), self.height() - 10) + rect_active_bar = QRect(self.width() - 5, 0, 5, self.height() - 10) + rect_text = QRect(50, 0, self.width() - 50, self.height()) - # DRAW BG - p.setBrush(QColor(self._bg_one_color)) + # DRAW DEFAULT BG + p.setBrush(QColor(self._dark_one)) p.drawRoundedRect(rect, 0, 0) + # DRAW BG BLUE + p.setBrush(QColor(self._context_color)) + p.drawRoundedRect(rect_blue, 8, 8) + # BG INSIDE - p.setBrush(QColor("red")) - p.drawRoundedRect(rect_inside, self._margin, self._margin) + p.setBrush(QColor(self._bg_one)) + p.drawRoundedRect(rect_inside_active, 8, 8) + + # BG ACTIVE + # p.setBrush(QColor(self._bg_one)) + # p.drawRect(rect_active_bar) + + # DRAW ICONS + self.icon_paint(p, self._icon_path, rect_icon) + + # DRAW ACTIVE + # APP PATH + icon_path = self._icon_active_menu + app_path = os.path.abspath(os.getcwd()) + icon_path = os.path.normpath(os.path.join(app_path, icon_path)) + self.icon_active(p, icon_path, self.width()) + + # DRAW TEXT + p.setPen(QColor(self._context_color)) + p.drawText(rect_text, Qt.AlignVCenter, self.text()) p.end() + # DRAW ICON WITH COLORS + def icon_paint(self, qp, image, rect): + icon = QPixmap(image) + painter = QPainter(icon) + painter.setCompositionMode(QPainter.CompositionMode_SourceIn) + painter.fillRect(icon.rect(), self._icon_set_color) + qp.drawPixmap( + (rect.width() - icon.width()) / 2, + (rect.height() - icon.height()) / 2, + icon + ) + painter.end() + + # DRAW ICON WITH COLORS + def icon_active(self, qp, image, width): + icon = QPixmap(image) + painter = QPainter(icon) + painter.setCompositionMode(QPainter.CompositionMode_SourceIn) + painter.fillRect(icon.rect(), self._bg_one) + qp.drawPixmap(width - 5, 0, icon) + painter.end() + +class _ActiveIcon(QLabel): + def __init__(self, parent, tooltip): + QLabel.__init__(self) + + # LABEL SETUP + self.setObjectName(u"label_tooltip") + self.setStyleSheet(style_tooltip) + self.setMaximumSize(10,60) + self.setMinimumSize(10,60) + self.setParent(parent) + self.setText(tooltip) + self.adjustSize() + + # SET DROP SHADOW + self.shadow = QGraphicsDropShadowEffect(self) + self.shadow.setBlurRadius(15) + self.shadow.setXOffset(0) + self.shadow.setYOffset(0) + self.shadow.setColor(QColor(0, 0, 0, 160)) + self.setGraphicsEffect(self.shadow) + + # SET OPACITY + self.opacity = QGraphicsOpacityEffect(self) + self.opacity.setOpacity(0.85) + self.setGraphicsEffect(self.opacity) + class _ToolTip(QLabel): def __init__(self, parent, tooltip): QLabel.__init__(self) diff --git a/gui/widgets/py_window/py_window.py b/gui/widgets/py_window/py_window.py index db5d6ec..b9760c5 100644 --- a/gui/widgets/py_window/py_window.py +++ b/gui/widgets/py_window/py_window.py @@ -92,7 +92,7 @@ class PyWindow(QFrame): if self.settings["custom_title_bar"]: if enable_shadow: self.shadow = QGraphicsDropShadowEffect() - self.shadow.setBlurRadius(10) + self.shadow.setBlurRadius(20) self.shadow.setXOffset(0) self.shadow.setYOffset(0) self.shadow.setColor(QColor(0, 0, 0, 160)) diff --git a/main.py b/main.py index 83189ad..31efc01 100644 --- a/main.py +++ b/main.py @@ -45,6 +45,7 @@ os.environ["QT_FONT_DPI"] = "96" class MainWindow(QMainWindow): def __init__(self): QMainWindow.__init__(self) + # SETUP MAIN WINDOw # Load widgets from "gui\uis\main_window\ui_main.py" # /////////////////////////////////////////////////////////////// @@ -54,7 +55,7 @@ class MainWindow(QMainWindow): # LOAD SETTINGS # /////////////////////////////////////////////////////////////// settings = Settings() - self.settings = settings.items + self.settings = settings.items # SETUP MAIN WINDOW # /////////////////////////////////////////////////////////////// diff --git a/settings.json b/settings.json index 1d24c18..18ad689 100644 --- a/settings.json +++ b/settings.json @@ -1,6 +1,6 @@ { "app_name": "PyOneDark - Modern GUI", - "custom_title_bar": true, + "custom_title_bar": false, "startup_size": [ 1200, 720