11/06/2021

gui/themes/default.json

@@ -21,6 +21,8 @@
         "text_active" : "#dce1ec",
         "white" : "#f5f6f9",
         "pink" : "#ff007f",
-        "green" : "#00ff7f"
+        "green" : "#00ff7f",
+        "red" : "#ff5555",
+        "yellow" : "#f1fa8c"
     }
 }

gui/themes/dracula.json

@@ -0,0 +1,28 @@
+{
+    "theme_name" : "dracula",
+    "app_color" : {
+        "dark_one" : "#282a36",
+        "dark_two" : "#2B2E3B",
+        "dark_three" : "#333645",
+        "dark_four" : "#3C4052",
+        "bg_one" : "#44475a",
+        "bg_two" : "#4D5066",
+        "bg_three" : "#595D75",
+        "icon_color" : "#c3ccdf",
+        "icon_hover" : "#dce1ec",
+        "icon_pressed" : "#ff79c6",
+        "icon_active" : "#f5f6f9",
+        "context_color" : "#ff79c6",
+        "context_hover" : "#FF84D7",
+        "context_pressed" : "#FF90DD",
+        "text_title" : "#dce1ec",
+        "text_foreground" : "#f8f8f2",
+        "text_description" : "#979EC7",
+        "text_active" : "#dce1ec",
+        "white" : "#f5f6f9",
+        "pink" : "#ff79c6",
+        "green" : "#00ff7f",
+        "red" : "#ff5555",
+        "yellow" : "#f1fa8c"
+    }
+}

gui/uis/pages/main_pages.ui

@@ -253,6 +253,12 @@ I will try to always record a new tutorial when adding a new Widget and updating
            <item>
             <layout class="QHBoxLayout" name="row_3_layout"/>
            </item>
+           <item>
+            <layout class="QVBoxLayout" name="row_4_layout"/>
+           </item>
+           <item>
+            <layout class="QVBoxLayout" name="row_5_layout"/>
+           </item>
           </layout>
          </widget>
         </widget>
@@ -262,9 +268,7 @@ I will try to always record a new tutorial when adding a new Widget and updating
      <widget class="QWidget" name="page_3">
       <property name="styleSheet">
        <string notr="true">QFrame {
-	background: lightgreen;
 	font-size: 16pt;
-	border-radius: 8px;
 }</string>
       </property>
       <layout class="QVBoxLayout" name="page_3_layout">

gui/uis/pages/ui_main_pages.py

@@ -124,6 +124,16 @@ class Ui_MainPages(object):
 
         self.verticalLayout.addLayout(self.row_3_layout)
 
+        self.row_4_layout = QVBoxLayout()
+        self.row_4_layout.setObjectName(u"row_4_layout")
+
+        self.verticalLayout.addLayout(self.row_4_layout)
+
+        self.row_5_layout = QVBoxLayout()
+        self.row_5_layout.setObjectName(u"row_5_layout")
+
+        self.verticalLayout.addLayout(self.row_5_layout)
+
         self.scroll_area.setWidget(self.contents)
 
         self.page_2_layout.addWidget(self.scroll_area)
@@ -132,9 +142,7 @@ class Ui_MainPages(object):
         self.page_3 = QWidget()
         self.page_3.setObjectName(u"page_3")
         self.page_3.setStyleSheet(u"QFrame {\n"
-"	background: lightgreen;\n"
 "	font-size: 16pt;\n"
-"	border-radius: 8px;\n"
 "}")
         self.page_3_layout = QVBoxLayout(self.page_3)
         self.page_3_layout.setObjectName(u"page_3_layout")

gui/uis/windows/main_window/setup_main_window.py

@@ -16,7 +16,10 @@
 
 # IMPORT PACKAGES AND MODULES
 # ///////////////////////////////////////////////////////////////
+from gui.widgets.py_table_widget.py_table_widget import PyTableWidget
+from . functions_main_window import *
 import sys
+import os
 
 # IMPORT QT CORE
 # ///////////////////////////////////////////////////////////////
@@ -443,6 +446,68 @@ class SetupMainWindow:
         self.push_button_2.setMinimumHeight(40)
         self.push_button_2.setIcon(self.icon_2)
 
+        # PY LINE EDIT
+        self.line_edit = PyLineEdit(
+            text = "",
+            place_holder_text = "Place holder text",
+            radius = 8,
+            border_size = 2,
+            color = self.themes["app_color"]["text_foreground"],
+            selection_color = self.themes["app_color"]["white"],
+            bg_color = self.themes["app_color"]["dark_one"],
+            bg_color_active = self.themes["app_color"]["dark_three"],
+            context_color = self.themes["app_color"]["context_color"]
+        )
+        self.line_edit.setMinimumHeight(30)
+
+        # TABLE WIDGETS
+        self.table_widget = PyTableWidget(
+            radius = 8,
+            color = self.themes["app_color"]["text_foreground"],
+            selection_color = self.themes["app_color"]["context_color"],
+            bg_color = self.themes["app_color"]["bg_two"],
+            header_horizontal_color = self.themes["app_color"]["dark_two"],
+            header_vertical_color = self.themes["app_color"]["bg_three"],
+            bottom_line_color = self.themes["app_color"]["bg_three"],
+            grid_line_color = self.themes["app_color"]["bg_one"],
+            scroll_bar_bg_color = self.themes["app_color"]["bg_one"],
+            scroll_bar_btn_color = self.themes["app_color"]["dark_four"],
+            context_color = self.themes["app_color"]["context_color"]
+        )
+        self.table_widget.setColumnCount(3)
+        self.table_widget.horizontalHeader().setSectionResizeMode(QHeaderView.Stretch)
+        self.table_widget.setSelectionMode(QAbstractItemView.ExtendedSelection)
+        self.table_widget.setSelectionBehavior(QAbstractItemView.SelectRows)
+
+        # Columns / Header
+        self.column_1 = QTableWidgetItem()
+        self.column_1.setTextAlignment(Qt.AlignCenter)
+        self.column_1.setText("NAME")
+
+        self.column_2 = QTableWidgetItem()
+        self.column_2.setTextAlignment(Qt.AlignCenter)
+        self.column_2.setText("NICK")
+
+        self.column_3 = QTableWidgetItem()
+        self.column_3.setTextAlignment(Qt.AlignCenter)
+        self.column_3.setText("PASS")
+
+        # Set column
+        self.table_widget.setHorizontalHeaderItem(0, self.column_1)
+        self.table_widget.setHorizontalHeaderItem(1, self.column_2)
+        self.table_widget.setHorizontalHeaderItem(2, self.column_3)
+
+        for x in range(10):
+            row_number = self.table_widget.rowCount()
+            self.table_widget.insertRow(row_number) # Insert row
+            self.table_widget.setItem(row_number, 0, QTableWidgetItem(str("Wanderson"))) # Add name
+            self.table_widget.setItem(row_number, 1, QTableWidgetItem(str("vfx_on_fire_" + str(x)))) # Add nick
+            self.pass_text = QTableWidgetItem()
+            self.pass_text.setTextAlignment(Qt.AlignCenter)
+            self.pass_text.setText("12345" + str(x))
+            self.table_widget.setItem(row_number, 2, self.pass_text) # Add pass
+            self.table_widget.setRowHeight(row_number, 22)
+
         # ADD WIDGETS
         self.ui.load_pages.row_1_layout.addWidget(self.circular_progress_1)
         self.ui.load_pages.row_1_layout.addWidget(self.circular_progress_2)
@@ -456,6 +521,8 @@ class SetupMainWindow:
         self.ui.load_pages.row_3_layout.addWidget(self.icon_button_3)
         self.ui.load_pages.row_3_layout.addWidget(self.push_button_1)
         self.ui.load_pages.row_3_layout.addWidget(self.push_button_2)
+        self.ui.load_pages.row_4_layout.addWidget(self.line_edit)
+        self.ui.load_pages.row_5_layout.addWidget(self.table_widget)
 
         # RIGHT COLUMN
         # ///////////////////////////////////////////////////////////////

gui/uis/windows/main_window/ui_main.py

@@ -17,7 +17,6 @@
 # IMPORT PACKAGES AND MODULES
 # ///////////////////////////////////////////////////////////////
 from gui.core.functions import Functions
-from gui.widgets.py_credits_bar.py_credits import PyCredits
 
 # IMPORT QT CORE
 # ///////////////////////////////////////////////////////////////
@@ -47,6 +46,10 @@ from gui.uis.pages.ui_main_pages import Ui_MainPages
 # ///////////////////////////////////////////////////////////////
 from gui.uis.columns.ui_right_column import Ui_RightColumn
 
+# CREDITS
+# ///////////////////////////////////////////////////////////////
+from gui.widgets.py_credits_bar.py_credits import PyCredits
+
 # PY WINDOW
 # ///////////////////////////////////////////////////////////////
 class UI_MainWindow(object):
@@ -164,6 +167,7 @@ class UI_MainWindow(object):
             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'],
+            context_color = self.themes['app_color']['context_color'],
             icon_color_pressed = self.themes['app_color']['icon_pressed'],
             icon_close_path = Functions.set_svg_icon("icon_close.svg")
         )

gui/widgets/__init__.py

@@ -60,4 +60,12 @@ from . py_circular_progress import PyCircularProgress
 
 # PY ICON BUTTON
 # ///////////////////////////////////////////////////////////////
-from . py_icon_button import PyIconButton
+from . py_icon_button import PyIconButton
+
+# PY LINE EDIT
+# ///////////////////////////////////////////////////////////////
+from . py_line_edit import PyLineEdit
+
+# PY TABLE WIDGET
+# ///////////////////////////////////////////////////////////////
+from . py_table_widget import PyTableWidget

gui/widgets/py_left_column/py_left_column.py

@@ -51,6 +51,7 @@ class PyLeftColumn(QWidget):
         icon_color,
         icon_color_hover,
         icon_color_pressed,
+        context_color,
         icon_close_path,
         radius = 8
     ):
@@ -71,6 +72,7 @@ class PyLeftColumn(QWidget):
         self._icon_color = icon_color
         self._icon_color_hover = icon_color_hover
         self._icon_color_pressed = icon_color_pressed
+        self._context_color = context_color
         self._icon_close_path = icon_close_path
         self._radius = radius
 
@@ -165,7 +167,7 @@ class PyLeftColumn(QWidget):
             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,
+            context_color = self._context_color,
             text_foreground = self._text_title_color,
             icon_path = self._icon_close_path,
             radius = 6,

gui/widgets/py_line_edit/__init__.py

@@ -0,0 +1,19 @@
+# ///////////////////////////////////////////////////////////////
+#
+# 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 LINE EDIT
+# ///////////////////////////////////////////////////////////////
+from . py_line_edit import PyLineEdit

gui/widgets/py_line_edit/py_line_edit.py

@@ -0,0 +1,95 @@
+# ///////////////////////////////////////////////////////////////
+#
+# 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 *
+
+# STYLE
+# ///////////////////////////////////////////////////////////////
+style = '''
+QLineEdit {{
+	background-color: {_bg_color};
+	border-radius: {_radius}px;
+	border: {_border_size}px solid transparent;
+	padding-left: 10px;
+    padding-right: 10px;
+	selection-color: {_selection_color};
+	selection-background-color: {_context_color};
+    color: {_color};
+}}
+QLineEdit:focus {{
+	border: {_border_size}px solid {_context_color};
+    background-color: {_bg_color_active};
+}}
+'''
+
+# PY PUSH BUTTON
+# ///////////////////////////////////////////////////////////////
+class PyLineEdit(QLineEdit):
+    def __init__(
+        self, 
+        text = "",
+        place_holder_text = "",
+        radius = 8,
+        border_size = 2,
+        color = "#FFF",
+        selection_color = "#FFF",
+        bg_color = "#333",
+        bg_color_active = "#222",
+        context_color = "#00ABE8"
+    ):
+        super().__init__()
+
+        # PARAMETERS
+        if text:
+            self.setText(text)
+        if place_holder_text:
+            self.setPlaceholderText(place_holder_text)
+
+        # SET STYLESHEET
+        self.set_stylesheet(
+            radius,
+            border_size,
+            color,
+            selection_color,
+            bg_color,
+            bg_color_active,
+            context_color
+        )
+
+    # SET STYLESHEET
+    def set_stylesheet(
+        self,
+        radius,
+        border_size,
+        color,
+        selection_color,
+        bg_color,
+        bg_color_active,
+        context_color
+    ):
+        # APPLY STYLESHEET
+        style_format = style.format(
+            _radius = radius,
+            _border_size = border_size,           
+            _color = color,
+            _selection_color = selection_color,
+            _bg_color = bg_color,
+            _bg_color_active = bg_color_active,
+            _context_color = context_color
+        )
+        self.setStyleSheet(style_format)

gui/widgets/py_table_widget/__init__.py

@@ -0,0 +1,19 @@
+# ///////////////////////////////////////////////////////////////
+#
+# 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 TABLE WIDGET
+# ///////////////////////////////////////////////////////////////
+from . py_table_widget import PyTableWidget

gui/widgets/py_table_widget/py_table_widget.py

@@ -0,0 +1,90 @@
+# ///////////////////////////////////////////////////////////////
+#
+# 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 STYLE
+# ///////////////////////////////////////////////////////////////
+from . style import *
+
+# PY PUSH BUTTON
+# ///////////////////////////////////////////////////////////////
+class PyTableWidget(QTableWidget):
+    def __init__(
+        self, 
+        radius = 8,
+        color = "#FFF",
+        bg_color = "#444",
+        selection_color = "#FFF",
+        header_horizontal_color = "#333",
+        header_vertical_color = "#444",
+        bottom_line_color = "#555",
+        grid_line_color = "#555",
+        scroll_bar_bg_color = "#FFF",
+        scroll_bar_btn_color = "#3333",
+        context_color = "#00ABE8"
+    ):
+        super().__init__()
+
+        # PARAMETERS
+
+        # SET STYLESHEET
+        self.set_stylesheet(
+            radius,
+            color,
+            bg_color,
+            header_horizontal_color,
+            header_vertical_color,
+            selection_color,
+            bottom_line_color,
+            grid_line_color,
+            scroll_bar_bg_color,
+            scroll_bar_btn_color,
+            context_color
+        )
+
+    # SET STYLESHEET
+    def set_stylesheet(
+        self,
+        radius,
+        color,
+        bg_color,
+        header_horizontal_color,
+        header_vertical_color,
+        selection_color,
+        bottom_line_color,
+        grid_line_color,
+        scroll_bar_bg_color,
+        scroll_bar_btn_color,
+        context_color
+    ):
+        # APPLY STYLESHEET
+        style_format = style.format(
+            _radius = radius,          
+            _color = color,
+            _bg_color = bg_color,
+            _header_horizontal_color = header_horizontal_color,
+            _header_vertical_color = header_vertical_color,
+            _selection_color = selection_color,
+            _bottom_line_color = bottom_line_color,
+            _grid_line_color = grid_line_color,
+            _scroll_bar_bg_color = scroll_bar_bg_color,
+            _scroll_bar_btn_color = scroll_bar_btn_color,
+            _context_color = context_color
+        )
+        self.setStyleSheet(style_format)

gui/widgets/py_table_widget/style.py

@@ -0,0 +1,135 @@
+# STYLE
+# ///////////////////////////////////////////////////////////////
+style = '''
+/* /////////////////////////////////////////////////////////////////////////////////////////////////
+QTableWidget */
+
+QTableWidget {{	
+	background-color: {_bg_color};
+	padding: 5px;
+	border-radius: {_radius}px;
+	gridline-color: {_grid_line_color};
+    color: {_color};
+}}
+QTableWidget::item{{
+	border-color: none;
+	padding-left: 5px;
+	padding-right: 5px;
+	gridline-color: rgb(44, 49, 60);
+    border-bottom: 1px solid {_bottom_line_color};
+}}
+QTableWidget::item:selected{{
+	background-color: {_selection_color};
+}}
+QHeaderView::section{{
+	background-color: rgb(33, 37, 43);
+	max-width: 30px;
+	border: 1px solid rgb(44, 49, 58);
+	border-style: none;
+    border-bottom: 1px solid rgb(44, 49, 60);
+    border-right: 1px solid rgb(44, 49, 60);
+}}
+QTableWidget::horizontalHeader {{	
+	background-color: rgb(33, 37, 43);
+}}
+QTableWidget QTableCornerButton::section {{
+    border: none;
+	background-color: {_header_horizontal_color};
+	padding: 3px;
+    border-top-left-radius: {_radius}px;
+}}
+QHeaderView::section:horizontal
+{{
+    border: none;
+	background-color: {_header_horizontal_color};
+	padding: 3px;
+}}
+QHeaderView::section:vertical
+{{
+    border: none;
+	background-color: {_header_vertical_color};
+	padding-left: 5px;
+    padding-right: 5px;
+    border-bottom: 1px solid {_bottom_line_color};
+    margin-bottom: 1px;
+}}
+
+
+/* /////////////////////////////////////////////////////////////////////////////////////////////////
+ScrollBars */
+QScrollBar:horizontal {{
+    border: none;
+    background: {_scroll_bar_bg_color};
+    height: 8px;
+    margin: 0px 21px 0 21px;
+	border-radius: 0px;
+}}
+QScrollBar::handle:horizontal {{
+    background: {_context_color};
+    min-width: 25px;
+	border-radius: 4px
+}}
+QScrollBar::add-line:horizontal {{
+    border: none;
+    background: {_scroll_bar_btn_color};
+    width: 20px;
+	border-top-right-radius: 4px;
+    border-bottom-right-radius: 4px;
+    subcontrol-position: right;
+    subcontrol-origin: margin;
+}}
+QScrollBar::sub-line:horizontal {{
+    border: none;
+    background: {_scroll_bar_btn_color};
+    width: 20px;
+	border-top-left-radius: 4px;
+    border-bottom-left-radius: 4px;
+    subcontrol-position: left;
+    subcontrol-origin: margin;
+}}
+QScrollBar::up-arrow:horizontal, QScrollBar::down-arrow:horizontal
+{{
+     background: none;
+}}
+QScrollBar::add-page:horizontal, QScrollBar::sub-page:horizontal
+{{
+     background: none;
+}}
+QScrollBar:vertical {{
+	border: none;
+    background: {_scroll_bar_bg_color};
+    width: 8px;
+    margin: 21px 0 21px 0;
+	border-radius: 0px;
+}}
+QScrollBar::handle:vertical {{	
+	background: {_context_color};
+    min-height: 25px;
+	border-radius: 4px
+}}
+QScrollBar::add-line:vertical {{
+     border: none;
+    background: {_scroll_bar_btn_color};
+     height: 20px;
+	border-bottom-left-radius: 4px;
+    border-bottom-right-radius: 4px;
+     subcontrol-position: bottom;
+     subcontrol-origin: margin;
+}}
+QScrollBar::sub-line:vertical {{
+	border: none;
+    background: {_scroll_bar_btn_color};
+     height: 20px;
+	border-top-left-radius: 4px;
+    border-top-right-radius: 4px;
+     subcontrol-position: top;
+     subcontrol-origin: margin;
+}}
+QScrollBar::up-arrow:vertical, QScrollBar::down-arrow:vertical {{
+     background: none;
+}}
+
+QScrollBar::add-page:vertical, QScrollBar::sub-page:vertical {{
+     background: none;
+}}
+'''