颜色对话框添加调整透明度功能

examples/color_dialog/demo.py

@@ -11,7 +11,7 @@ class Demo(QWidget):
 
     def __init__(self):
         super().__init__()
-        self.button = ColorPickerButton(QColor("#12aaa2"), 'Background Color', self)
+        self.button = ColorPickerButton(QColor("#5012aaa2"), 'Background Color', self, enableAlpha=True)
         self.resize(800, 720)
         self.button.move(352, 312)
         self.setStyleSheet("Demo{background:white}")

examples/settings/resource/i18n/qfluentwidgets_hk.ts

@@ -28,6 +28,10 @@
             <source>Green</source>
             <translation>綠色</translation>
         </message>
+        <message>
+            <source>Opacity</source>
+            <translation>透明度</translation>
+        </message>
     </context>
     <context>
         <name>MessageDialog</name>

examples/settings/resource/i18n/qfluentwidgets_zh.ts

@@ -28,6 +28,10 @@
         <source>Green</source>
         <translation>绿色</translation>
     </message>
+    <message>
+        <source>Opacity</source>
+        <translation>透明度</translation>
+    </message>
 </context>
 <context>
     <name>MessageDialog</name>

qfluentwidgets/__init__.py

@@ -12,7 +12,7 @@ Examples are available at https://github.com/zhiyiYo/PyQt-Fluent-Widgets/tree/ma
 :license: GPLv3, see LICENSE for more details.
 """
 
-__version__ = "0.7.3"
+__version__ = "0.7.4"
 
 from .components import *
 from .common import *

qfluentwidgets/_rc/qss/dark/color_dialog.qss

@@ -41,7 +41,7 @@ QLabel {
     font-size: 16px;
 }
 
-#prefixLabel {
+#prefixLabel, #suffixLabel  {
     padding: 0;
     font-size: 14px;
 }

qfluentwidgets/_rc/qss/light/color_dialog.qss

@@ -39,7 +39,7 @@ QLabel {
     font-size: 16px;
 }
 
-#prefixLabel {
+#prefixLabel, #suffixLabel {
     padding: 0;
     font-size: 14px;
 }

qfluentwidgets/common/config.py

@@ -145,7 +145,7 @@ class ColorSerializer(ConfigSerializer):
     """ QColor serializer """
 
     def serialize(self, value: QColor):
-        return value.name()
+        return value.name(QColor.HexArgb)
 
     def deserialize(self, value):
         if isinstance(value, list):

qfluentwidgets/components/dialog_box/color_dialog.py

@@ -4,7 +4,7 @@ from PyQt5.QtGui import (QBrush, QColor, QPixmap,
                          QPainter, QPen, QIntValidator, QRegExpValidator, QIcon)
 from PyQt5.QtWidgets import QApplication, QLabel, QWidget, QPushButton, QFrame, QVBoxLayout
 
-from ...common.style_sheet import FluentStyleSheet
+from ...common.style_sheet import FluentStyleSheet, isDarkTheme
 from ..widgets import Slider, ScrollArea, PushButton, PrimaryPushButton
 from ..widgets.line_edit import LineEdit
 from .mask_dialog_base import MaskDialogBase
@@ -101,7 +101,7 @@ class BrightnessSlider(Slider):
 
     def __onValueChanged(self, value):
         """ slider value changed slot """
-        self.color.setHsv(self.color.hue(), self.color.saturation(), value)
+        self.color.setHsv(self.color.hue(), self.color.saturation(), value, self.color.alpha())
         self.setColor(self.color)
         self.colorChanged.emit(self.color)
 
@@ -109,10 +109,24 @@ class BrightnessSlider(Slider):
 class ColorCard(QWidget):
     """ Color card """
 
-    def __init__(self, color, parent=None):
+    def __init__(self, color, parent=None, enableAlpha=False):
         super().__init__(parent)
         self.setFixedSize(44, 128)
         self.setColor(color)
+        self.enableAlpha = enableAlpha
+        self.titledPixmap = self._createTitledBackground()
+
+    def _createTitledBackground(self):
+        pixmap = QPixmap(8, 8)
+        pixmap.fill(Qt.transparent)
+        painter = QPainter(pixmap)
+
+        c = 255 if isDarkTheme() else 0
+        color = QColor(c, c, c, 26)
+        painter.fillRect(4, 0, 4, 4, color)
+        painter.fillRect(0, 4, 4, 4, color)
+        painter.end()
+        return pixmap
 
     def setColor(self, color):
         """ set the color of card """
@@ -123,6 +137,13 @@ class ColorCard(QWidget):
         painter = QPainter(self)
         painter.setRenderHints(QPainter.Antialiasing)
 
+        # draw tiled background
+        if self.enableAlpha:
+            painter.setBrush(QBrush(self.titledPixmap))
+            painter.setPen(QColor(0, 0, 0, 13))
+            painter.drawRoundedRect(self.rect(), 4, 4)
+
+        # draw color
         painter.setBrush(self.color)
         painter.setPen(QColor(0, 0, 0, 13))
         painter.drawRoundedRect(self.rect(), 4, 4)
@@ -152,9 +173,15 @@ class ColorLineEdit(LineEdit):
 class HexColorLineEdit(ColorLineEdit):
     """ Hex color line edit """
 
-    def __init__(self, color, parent=None):
-        super().__init__(QColor(color).name()[1:], parent)
-        self.setValidator(QRegExpValidator(QRegExp(r'[A-Fa-f0-9]{6}')))
+    def __init__(self, color, parent=None, enableAlpha=False):
+        f = QColor.HexArgb if enableAlpha else QColor.HexRgb
+        super().__init__(QColor(color).name(f)[1:], parent)
+
+        if enableAlpha:
+            self.setValidator(QRegExpValidator(QRegExp(r'[A-Fa-f0-9]{8}')))
+        else:
+            self.setValidator(QRegExpValidator(QRegExp(r'[A-Fa-f0-9]{6}')))
+
         self.setTextMargins(4, 0, 33, 0)
         self.prefixLabel = QLabel('#', self)
         self.prefixLabel.move(7, 2)
@@ -165,12 +192,32 @@ class HexColorLineEdit(ColorLineEdit):
         self.setText(color.name()[1:])
 
 
+class OpacityLineEdit(ColorLineEdit):
+    """ Opacity line edit """
+
+    def __init__(self, value, parent=None, enableAlpha=False):
+        super().__init__(int(value/255*100), parent)
+        self.setValidator(QRegExpValidator(QRegExp(r'[0-9][0-9]{0,1}|100')))
+        self.setTextMargins(4, 0, 33, 0)
+        self.suffixLabel = QLabel('%', self)
+        self.suffixLabel.setObjectName('suffixLabel')
+        self.textChanged.connect(self._adjustSuffixPos)
+
+    def showEvent(self, e):
+        super().showEvent(e)
+        self._adjustSuffixPos()
+
+    def _adjustSuffixPos(self):
+        x = self.fontMetrics().width(self.text()) + 18
+        self.suffixLabel.move(x, 2)
+
+
 class ColorDialog(MaskDialogBase):
     """ Color dialog """
 
     colorChanged = pyqtSignal(QColor)
 
-    def __init__(self, color, title: str, parent=None):
+    def __init__(self, color, title: str, parent=None, enableAlpha=False):
         """
         Parameters
         ----------
@@ -182,8 +229,16 @@ class ColorDialog(MaskDialogBase):
 
         parent: QWidget
             parent widget
+
+        enableAlpha: bool
+            whether to enable the alpha channel
         """
         super().__init__(parent)
+        self.enableAlpha = enableAlpha
+        if not enableAlpha:
+            color = QColor(color)
+            color.setAlpha(255)
+
         self.oldColor = QColor(color)
         self.color = QColor(color)
 
@@ -196,18 +251,20 @@ class ColorDialog(MaskDialogBase):
 
         self.titleLabel = QLabel(title, self.scrollWidget)
         self.huePanel = HuePanel(color, self.scrollWidget)
-        self.newColorCard = ColorCard(color, self.scrollWidget)
-        self.oldColorCard = ColorCard(color, self.scrollWidget)
+        self.newColorCard = ColorCard(color, self.scrollWidget, enableAlpha)
+        self.oldColorCard = ColorCard(color, self.scrollWidget, enableAlpha)
         self.brightSlider = BrightnessSlider(color, self.scrollWidget)
 
         self.editLabel = QLabel(self.tr('Edit Color'), self.scrollWidget)
         self.redLabel = QLabel(self.tr('Red'), self.scrollWidget)
         self.blueLabel = QLabel(self.tr('Blue'), self.scrollWidget)
         self.greenLabel = QLabel(self.tr('Green'), self.scrollWidget)
-        self.hexLineEdit = HexColorLineEdit(color, self.scrollWidget)
+        self.opacityLabel = QLabel(self.tr('Opacity'), self.scrollWidget)
+        self.hexLineEdit = HexColorLineEdit(color, self.scrollWidget, enableAlpha)
         self.redLineEdit = ColorLineEdit(self.color.red(), self.scrollWidget)
         self.greenLineEdit = ColorLineEdit(self.color.green(), self.scrollWidget)
         self.blueLineEdit = ColorLineEdit(self.color.blue(), self.scrollWidget)
+        self.opacityLineEdit = OpacityLineEdit(self.color.alpha(), self.scrollWidget)
 
         self.vBoxLayout = QVBoxLayout(self.widget)
 
@@ -218,9 +275,9 @@ class ColorDialog(MaskDialogBase):
         self.scrollArea.setViewportMargins(48, 24, 0, 24)
         self.scrollArea.setWidget(self.scrollWidget)
 
-        self.widget.setMaximumSize(488, 696)
-        self.widget.resize(488, 696)
-        self.scrollWidget.resize(440, 560)
+        self.widget.setMaximumSize(488, 696+40*self.enableAlpha)
+        self.widget.resize(488, 696+40*self.enableAlpha)
+        self.scrollWidget.resize(440, 560+40*self.enableAlpha)
         self.buttonGroup.setFixedSize(486, 81)
         self.yesButton.setFixedWidth(216)
         self.cancelButton.setFixedWidth(216)
@@ -247,6 +304,13 @@ class ColorDialog(MaskDialogBase):
         self.blueLabel.move(144, 524)
         self.hexLineEdit.move(196, 381)
 
+        if self.enableAlpha:
+            self.opacityLineEdit.move(0, 560)
+            self.opacityLabel.move(144, 567)
+        else:
+            self.opacityLineEdit.hide()
+            self.opacityLabel.hide()
+
         self.vBoxLayout.setSpacing(0)
         self.vBoxLayout.setAlignment(Qt.AlignTop)
         self.vBoxLayout.setContentsMargins(0, 0, 0, 0)
@@ -280,13 +344,14 @@ class ColorDialog(MaskDialogBase):
 
     def __onHueChanged(self, color):
         """ hue changed slot """
-        self.color.setHsv(color.hue(), color.saturation(), self.color.value())
+        self.color.setHsv(
+            color.hue(), color.saturation(), self.color.value(), self.color.alpha())
         self.setColor(self.color)
 
     def __onBrightnessChanged(self, color):
         """ brightness changed slot """
-        self.color.setHsv(self.color.hue(),
-                          self.color.saturation(), color.value())
+        self.color.setHsv(
+            self.color.hue(), self.color.saturation(), color.value(), color.alpha())
         self.setColor(self.color, False)
 
     def __onRedChanged(self, red):
@@ -304,6 +369,11 @@ class ColorDialog(MaskDialogBase):
         self.color.setGreen(int(green))
         self.setColor(self.color)
 
+    def __onOpacityChanged(self, opacity):
+        """ opacity channel changed slot """
+        self.color.setAlpha(int(int(opacity)/100*255))
+        self.setColor(self.color)
+
     def __onHexColorChanged(self, color):
         """ hex color changed slot """
         self.color.setNamedColor("#" + color)
@@ -323,6 +393,7 @@ class ColorDialog(MaskDialogBase):
         self.redLabel.adjustSize()
         self.greenLabel.adjustSize()
         self.blueLabel.adjustSize()
+        self.opacityLabel.adjustSize()
 
     def showEvent(self, e):
         self.updateStyle()
@@ -340,3 +411,4 @@ class ColorDialog(MaskDialogBase):
         self.blueLineEdit.valueChanged.connect(self.__onBlueChanged)
         self.greenLineEdit.valueChanged.connect(self.__onGreenChanged)
         self.hexLineEdit.valueChanged.connect(self.__onHexColorChanged)
+        self.opacityLineEdit.valueChanged.connect(self.__onOpacityChanged)

qfluentwidgets/components/settings/custom_color_setting_card.py

@@ -17,7 +17,7 @@ class CustomColorSettingCard(ExpandGroupSettingCard):
     colorChanged = pyqtSignal(QColor)
 
     def __init__(self, configItem: ColorConfigItem, icon: Union[str, QIcon, FluentIconBase], title: str,
-                 content=None, parent=None):
+                 content=None, parent=None, enableAlpha=False):
         """
         Parameters
         ----------
@@ -35,8 +35,12 @@ class CustomColorSettingCard(ExpandGroupSettingCard):
 
         parent: QWidget
             parent window
+
+        enableAlpha: bool
+            whether to enable the alpha channel
         """
         super().__init__(icon, title, content, parent=parent)
+        self.enableAlpha = enableAlpha
         self.configItem = configItem
         self.defaultColor = QColor(configItem.defaultValue)
         self.customColor = QColor(qconfig.get(configItem))
@@ -123,8 +127,8 @@ class CustomColorSettingCard(ExpandGroupSettingCard):
 
     def __showColorDialog(self):
         """ show color dialog """
-        w = ColorDialog(qconfig.get(self.configItem),
-                        self.tr('Choose color'), self.window())
+        w = ColorDialog(
+            qconfig.get(self.configItem), self.tr('Choose color'), self.window(), self.enableAlpha)
         w.colorChanged.connect(self.__onCustomColorChanged)
         w.exec()
 

qfluentwidgets/components/settings/setting_card.py

@@ -275,9 +275,10 @@ class ColorPickerButton(QToolButton):
 
     colorChanged = pyqtSignal(QColor)
 
-    def __init__(self, color: QColor, title: str, parent=None):
+    def __init__(self, color: QColor, title: str, parent=None, enableAlpha=False):
         super().__init__(parent=parent)
         self.title = title
+        self.enableAlpha = enableAlpha
         self.setFixedSize(96, 32)
         self.setAttribute(Qt.WA_TranslucentBackground)
 
@@ -288,7 +289,7 @@ class ColorPickerButton(QToolButton):
     def __showColorDialog(self):
         """ show color dialog """
         w = ColorDialog(self.color, self.tr(
-            'Choose ')+self.title, self.window())
+            'Choose ')+self.title, self.window(), self.enableAlpha)
         w.colorChanged.connect(self.__onColorChanged)
         w.exec()
 
@@ -307,7 +308,12 @@ class ColorPickerButton(QToolButton):
         painter.setRenderHints(QPainter.Antialiasing)
         pc = QColor(255, 255, 255, 10) if isDarkTheme() else QColor(234, 234, 234)
         painter.setPen(pc)
-        painter.setBrush(self.color)
+
+        color = QColor(self.color)
+        if not self.enableAlpha:
+            color.setAlpha(255)
+
+        painter.setBrush(color)
         painter.drawRoundedRect(self.rect().adjusted(1, 1, -1, -1), 5, 5)
 
 
@@ -316,7 +322,8 @@ class ColorSettingCard(SettingCard):
 
     colorChanged = pyqtSignal(QColor)
 
-    def __init__(self, configItem, icon: Union[str, QIcon, FluentIconBase], title, content=None, parent=None):
+    def __init__(self, configItem, icon: Union[str, QIcon, FluentIconBase],
+                 title: str, content: str = None, parent=None, enableAlpha=False):
         """
         Parameters
         ----------
@@ -334,11 +341,14 @@ class ColorSettingCard(SettingCard):
 
         parent: QWidget
             parent widget
+
+        enableAlpha: bool
+            whether to enable the alpha channel
         """
         super().__init__(icon, title, content, parent)
         self.configItem = configItem
         self.colorPicker = ColorPickerButton(
-            qconfig.get(configItem), title, self)
+            qconfig.get(configItem), title, self, enableAlpha)
         self.hBoxLayout.addWidget(self.colorPicker, 0, Qt.AlignRight)
         self.hBoxLayout.addSpacing(16)
         self.colorPicker.colorChanged.connect(self.__onColorChanged)

setup.py

@@ -6,7 +6,7 @@ with open('README.md', encoding='utf-8') as f:
 
 setuptools.setup(
     name="PyQt-Fluent-Widgets",
-    version="0.7.3",
+    version="0.7.4",
     keywords="pyqt fluent widgets",
     author="zhiyiYo",
     author_email="shokokawaii@outlook.com",