Implemented custom widget ColorButton OpenLP wide

openlp/core/ui/advancedtab.py

@@ -37,7 +37,7 @@ import sys
 from PyQt4 import QtCore, QtGui
 
 from openlp.core.common import AppLocation, Settings, SlideLimits, UiStrings, translate
-from openlp.core.lib import SettingsTab, build_icon
+from openlp.core.lib import ColorButton, SettingsTab, build_icon
 from openlp.core.utils import format_time, get_images_filter
 
 log = logging.getLogger(__name__)
@@ -181,7 +181,7 @@ class AdvancedTab(SettingsTab):
         self.default_image_layout.setObjectName('default_image_layout')
         self.default_color_label = QtGui.QLabel(self.default_image_group_box)
         self.default_color_label.setObjectName('default_color_label')
-        self.default_color_button = QtGui.QPushButton(self.default_image_group_box)
+        self.default_color_button = ColorButton(self.default_image_group_box)
         self.default_color_button.setObjectName('default_color_button')
         self.default_image_layout.addRow(self.default_color_label, self.default_color_button)
         self.default_file_label = QtGui.QLabel(self.default_image_group_box)
@@ -247,7 +247,7 @@ class AdvancedTab(SettingsTab):
         self.service_name_time.timeChanged.connect(self.update_service_name_example)
         self.service_name_edit.textChanged.connect(self.update_service_name_example)
         self.service_name_revert_button.clicked.connect(self.on_service_name_revert_button_clicked)
-        self.default_color_button.clicked.connect(self.on_default_color_button_clicked)
+        self.default_color_button.colorChanged.connect(self.on_default_color_button_changed)
         self.default_browse_button.clicked.connect(self.on_default_browse_button_clicked)
         self.default_revert_button.clicked.connect(self.on_default_revert_button_clicked)
         self.alternate_rows_check_box.toggled.connect(self.on_alternate_rows_check_box_toggled)
@@ -395,7 +395,7 @@ class AdvancedTab(SettingsTab):
             self.current_data_path = AppLocation.get_data_path()
             log.warning('User requested data path set to default %s' % self.current_data_path)
         self.data_directory_label.setText(os.path.abspath(self.current_data_path))
-        self.default_color_button.setStyleSheet('background-color: %s' % self.default_color)
+        self.default_color_button.color = self.default_color
         # Don't allow data directory move if running portable.
         if settings.value('advanced/is portable'):
             self.data_directory_group_box.hide()
@@ -498,14 +498,11 @@ class AdvancedTab(SettingsTab):
         self.service_name_edit.setText(UiStrings().DefaultServiceName)
         self.service_name_edit.setFocus()
 
-    def on_default_color_button_clicked(self):
+    def on_default_color_button_changed(self, color):
         """
         Select the background colour of the default display screen.
         """
-        new_color = QtGui.QColorDialog.getColor(QtGui.QColor(self.default_color), self)
+        self.default_color = color
-        if new_color.isValid():
-            self.default_color = new_color.name()
-            self.default_color_button.setStyleSheet('background-color: %s' % self.default_color)
 
     def on_default_browse_button_clicked(self):
         """

openlp/core/ui/media/playertab.py

@@ -32,7 +32,7 @@ The :mod:`~openlp.core.ui.media.playertab` module holds the configuration tab fo
 from PyQt4 import QtCore, QtGui
 
 from openlp.core.common import Registry, Settings, UiStrings, translate
-from openlp.core.lib import SettingsTab
+from openlp.core.lib import ColorButton, SettingsTab
 from openlp.core.lib.ui import create_button
 from openlp.core.ui.media import get_media_players, set_media_players
 
@@ -76,7 +76,7 @@ class PlayerTab(SettingsTab):
         self.background_color_label = QtGui.QLabel(self.background_color_group_box)
         self.background_color_label.setObjectName('background_color_label')
         self.color_layout.addWidget(self.background_color_label)
-        self.background_color_button = QtGui.QPushButton(self.background_color_group_box)
+        self.background_color_button = ColorButton(self.background_color_group_box)
         self.background_color_button.setObjectName('background_color_button')
         self.color_layout.addWidget(self.background_color_button)
         self.form_layout.addRow(self.color_layout)
@@ -124,7 +124,7 @@ class PlayerTab(SettingsTab):
         self.left_layout.addStretch()
         self.right_layout.addStretch()
         # Signals and slots
-        self.background_color_button.clicked.connect(self.on_background_color_button_clicked)
+        self.background_color_button.colorChanged.connect(self.on_background_color_button_changed)
 
     def retranslateUi(self):
         """
@@ -138,14 +138,11 @@ class PlayerTab(SettingsTab):
                                        'Visible background for videos with aspect ratio different to screen.'))
         self.retranslate_players()
 
-    def on_background_color_button_clicked(self):
+    def on_background_color_button_changed(self, color):
         """
         Set the background color
         """
-        new_color = QtGui.QColorDialog.getColor(QtGui.QColor(self.background_color), self)
+        self.background_color = color
-        if new_color.isValid():
-            self.background_color = new_color.name()
-            self.background_color_button.setStyleSheet('background-color: %s' % self.background_color)
 
     def on_player_check_box_changed(self, check_state):
         """
@@ -212,7 +209,7 @@ class PlayerTab(SettingsTab):
         self.background_color = settings.value('background color')
         self.initial_color = self.background_color
         settings.endGroup()
-        self.background_color_button.setStyleSheet('background-color: %s' % self.background_color)
+        self.background_color_button.color = self.background_color
 
     def save(self):
         """

openlp/core/ui/themeform.py

@@ -65,18 +65,19 @@ class ThemeForm(QtGui.QWizard, Ui_ThemeWizard, RegistryProperties):
         self.theme_layout_form = ThemeLayoutForm(self)
         self.background_combo_box.currentIndexChanged.connect(self.on_background_combo_box_current_index_changed)
         self.gradient_combo_box.currentIndexChanged.connect(self.on_gradient_combo_box_current_index_changed)
-        self.color_button.clicked.connect(self.on_color_button_clicked)
+        self.color_button.colorChanged.connect(self.on_color_button_changed)
-        self.image_color_button.clicked.connect(self.on_image_color_button_clicked)
+        #self.color_button.clicked.connect(self.on_color_button_clicked)
-        self.gradient_start_button.clicked.connect(self.on_gradient_start_button_clicked)
+        self.image_color_button.colorChanged.connect(self.on_image_color_button_changed)
-        self.gradient_end_button.clicked.connect(self.on_gradient_end_button_clicked)
+        self.gradient_start_button.colorChanged.connect(self.on_gradient_start_button_changed)
+        self.gradient_end_button.colorChanged.connect(self.on_gradient_end_button_changed)
         self.image_browse_button.clicked.connect(self.on_image_browse_button_clicked)
         self.image_file_edit.editingFinished.connect(self.on_image_file_edit_editing_finished)
-        self.main_color_button.clicked.connect(self.on_main_color_button_clicked)
+        self.main_color_button.colorChanged.connect(self.on_main_color_button_changed)
-        self.outline_color_button.clicked.connect(self.on_outline_color_button_clicked)
+        self.outline_color_button.colorChanged.connect(self.on_outline_color_button_changed)
-        self.shadow_color_button.clicked.connect(self.on_shadow_color_button_clicked)
+        self.shadow_color_button.colorChanged.connect(self.on_shadow_color_button_changed)
         self.outline_check_box.stateChanged.connect(self.on_outline_check_check_box_state_changed)
         self.shadow_check_box.stateChanged.connect(self.on_shadow_check_check_box_state_changed)
-        self.footer_color_button.clicked.connect(self.on_footer_color_button_clicked)
+        self.footer_color_button.colorChanged.connect(self.on_footer_color_button_changed)
         self.customButtonClicked.connect(self.on_custom_1_button_clicked)
         self.main_position_check_box.stateChanged.connect(self.on_main_position_check_box_state_changed)
         self.footer_position_check_box.stateChanged.connect(self.on_footer_position_check_box_state_changed)
@@ -295,14 +296,14 @@ class ThemeForm(QtGui.QWizard, Ui_ThemeWizard, RegistryProperties):
         Handle the display and state of the Background page.
         """
         if self.theme.background_type == BackgroundType.to_string(BackgroundType.Solid):
-            self.color_button.setStyleSheet('background-color: %s' % self.theme.background_color)
+            self.color_button.color = self.theme.background_color
             self.setField('background_type', 0)
         elif self.theme.background_type == BackgroundType.to_string(BackgroundType.Gradient):
-            self.gradient_start_button.setStyleSheet('background-color: %s' % self.theme.background_start_color)
+            self.gradient_start_button.color = self.theme.background_start_color
-            self.gradient_end_button.setStyleSheet('background-color: %s' % self.theme.background_end_color)
+            self.gradient_end_button.color = self.theme.background_end_color
             self.setField('background_type', 1)
         elif self.theme.background_type == BackgroundType.to_string(BackgroundType.Image):
-            self.image_color_button.setStyleSheet('background-color: %s' % self.theme.background_border_color)
+            self.image_color_button.color = self.theme.background_border_color
             self.image_file_edit.setText(self.theme.background_filename)
             self.setField('background_type', 2)
         elif self.theme.background_type == BackgroundType.to_string(BackgroundType.Transparent):
@@ -323,14 +324,14 @@ class ThemeForm(QtGui.QWizard, Ui_ThemeWizard, RegistryProperties):
         Handle the display and state of the Main Area page.
         """
         self.main_font_combo_box.setCurrentFont(QtGui.QFont(self.theme.font_main_name))
-        self.main_color_button.setStyleSheet('background-color: %s' % self.theme.font_main_color)
+        self.main_color_button.color = self.theme.font_main_color
         self.setField('main_size_spin_box', self.theme.font_main_size)
         self.setField('line_spacing_spin_box', self.theme.font_main_line_adjustment)
         self.setField('outline_check_box', self.theme.font_main_outline)
-        self.outline_color_button.setStyleSheet('background-color: %s' % self.theme.font_main_outline_color)
+        self.outline_color_button.color = self.theme.font_main_outline_color
         self.setField('outline_size_spin_box', self.theme.font_main_outline_size)
         self.setField('shadow_check_box', self.theme.font_main_shadow)
-        self.shadow_color_button.setStyleSheet('background-color: %s' % self.theme.font_main_shadow_color)
+        self.shadow_color_button.color = self.theme.font_main_shadow_color
         self.setField('shadow_size_spin_box', self.theme.font_main_shadow_size)
         self.setField('main_bold_check_box', self.theme.font_main_bold)
         self.setField('main_italics_check_box', self.theme.font_main_italics)
@@ -340,7 +341,7 @@ class ThemeForm(QtGui.QWizard, Ui_ThemeWizard, RegistryProperties):
         Handle the display and state of the Footer Area page.
         """
         self.footer_font_combo_box.setCurrentFont(QtGui.QFont(self.theme.font_footer_name))
-        self.footer_color_button.setStyleSheet('background-color: %s' % self.theme.font_footer_color)
+        self.footer_color_button.color = self.theme.font_footer_color
         self.setField('footer_size_spin_box', self.theme.font_footer_size)
 
     def set_position_page_values(self):
@@ -399,33 +400,29 @@ class ThemeForm(QtGui.QWizard, Ui_ThemeWizard, RegistryProperties):
             self.theme.background_direction = BackgroundGradientType.to_string(index)
             self.set_background_page_values()
 
-    def on_color_button_clicked(self):
+    def on_color_button_changed(self, color):
         """
         Background / Gradient 1 _color button pushed.
         """
-        self.theme.background_color = self._color_button(self.theme.background_color)
+        self.theme.background_color = color
-        self.set_background_page_values()
 
-    def on_image_color_button_clicked(self):
+    def on_image_color_button_changed(self, color):
         """
         Background / Gradient 1 _color button pushed.
         """
-        self.theme.background_border_color = self._color_button(self.theme.background_border_color)
+        self.theme.background_border_color = color
-        self.set_background_page_values()
 
-    def on_gradient_start_button_clicked(self):
+    def on_gradient_start_button_changed(self, color):
         """
         Gradient 2 _color button pushed.
         """
-        self.theme.background_start_color = self._color_button(self.theme.background_start_color)
+        self.theme.background_start_color = color
-        self.set_background_page_values()
 
-    def on_gradient_end_button_clicked(self):
+    def on_gradient_end_button_changed(self, color):
         """
         Gradient 2 _color button pushed.
         """
-        self.theme.background_end_color = self._color_button(self.theme.background_end_color)
+        self.theme.background_end_color = color
-        self.set_background_page_values()
 
     def on_image_browse_button_clicked(self):
         """
@@ -445,33 +442,29 @@ class ThemeForm(QtGui.QWizard, Ui_ThemeWizard, RegistryProperties):
         """
         self.theme.background_filename = str(self.image_file_edit.text())
 
-    def on_main_color_button_clicked(self):
+    def on_main_color_button_changed(self, color):
         """
         Set the main colour value
         """
-        self.theme.font_main_color = self._color_button(self.theme.font_main_color)
+        self.theme.font_main_color = color
-        self.set_main_area_page_values()
 
-    def on_outline_color_button_clicked(self):
+    def on_outline_color_button_changed(self, color):
         """
         Set the outline colour value
         """
-        self.theme.font_main_outline_color = self._color_button(self.theme.font_main_outline_color)
+        self.theme.font_main_outline_color = color
-        self.set_main_area_page_values()
 
-    def on_shadow_color_button_clicked(self):
+    def on_shadow_color_button_changed(self, color):
         """
         Set the shadow colour value
         """
-        self.theme.font_main_shadow_color = self._color_button(self.theme.font_main_shadow_color)
+        self.theme.font_main_shadow_color = color
-        self.set_main_area_page_values()
 
-    def on_footer_color_button_clicked(self):
+    def on_footer_color_button_changed(self, color):
         """
         Set the footer colour value
         """
-        self.theme.font_footer_color = self._color_button(self.theme.font_footer_color)
+        self.theme.font_footer_color = color
-        self.set_footer_area_page_values()
 
     def update_theme(self):
         """
@@ -532,12 +525,3 @@ class ThemeForm(QtGui.QWizard, Ui_ThemeWizard, RegistryProperties):
             return
         self.theme_manager.save_theme(self.theme, save_from, save_to)
         return QtGui.QDialog.accept(self)
-
-    def _color_button(self, field):
-        """
-        Handle _color buttons
-        """
-        new_color = QtGui.QColorDialog.getColor(QtGui.QColor(field), self)
-        if new_color.isValid():
-            field = new_color.name()
-        return field

openlp/core/ui/themewizard.py

@@ -32,7 +32,7 @@ The Create/Edit theme wizard
 from PyQt4 import QtCore, QtGui
 
 from openlp.core.common import UiStrings, translate, is_macosx
-from openlp.core.lib import build_icon
+from openlp.core.lib import build_icon, ColorButton
 from openlp.core.lib.theme import HorizontalType, BackgroundType, BackgroundGradientType
 from openlp.core.lib.ui import add_welcome_page, create_valign_selection_widgets
 
@@ -80,7 +80,7 @@ class Ui_ThemeWizard(object):
         self.color_layout.setObjectName('color_layout')
         self.color_label = QtGui.QLabel(self.color_widget)
         self.color_label.setObjectName('color_label')
-        self.color_button = QtGui.QPushButton(self.color_widget)
+        self.color_button = ColorButton(self.color_widget)
         self.color_button.setObjectName('color_button')
         self.color_layout.addRow(self.color_label, self.color_button)
         self.color_layout.setItem(1, QtGui.QFormLayout.LabelRole, self.spacer)
@@ -92,12 +92,12 @@ class Ui_ThemeWizard(object):
         self.gradient_layout.setObjectName('gradient_layout')
         self.gradient_start_label = QtGui.QLabel(self.gradient_widget)
         self.gradient_start_label.setObjectName('gradient_start_label')
-        self.gradient_start_button = QtGui.QPushButton(self.gradient_widget)
+        self.gradient_start_button = ColorButton(self.gradient_widget)
         self.gradient_start_button.setObjectName('gradient_start_button')
         self.gradient_layout.addRow(self.gradient_start_label, self.gradient_start_button)
         self.gradient_end_label = QtGui.QLabel(self.gradient_widget)
         self.gradient_end_label.setObjectName('gradient_end_label')
-        self.gradient_end_button = QtGui.QPushButton(self.gradient_widget)
+        self.gradient_end_button = ColorButton(self.gradient_widget)
         self.gradient_end_button.setObjectName('gradient_end_button')
         self.gradient_layout.addRow(self.gradient_end_label, self.gradient_end_button)
         self.gradient_type_label = QtGui.QLabel(self.gradient_widget)
@@ -115,7 +115,7 @@ class Ui_ThemeWizard(object):
         self.image_layout.setObjectName('image_layout')
         self.image_color_label = QtGui.QLabel(self.color_widget)
         self.image_color_label.setObjectName('image_color_label')
-        self.image_color_button = QtGui.QPushButton(self.color_widget)
+        self.image_color_button = ColorButton(self.color_widget)
         self.image_color_button.setObjectName('image_color_button')
         self.image_layout.addRow(self.image_color_label, self.image_color_button)
         self.image_label = QtGui.QLabel(self.image_widget)
@@ -154,7 +154,7 @@ class Ui_ThemeWizard(object):
         self.main_color_label.setObjectName('main_color_label')
         self.main_properties_layout = QtGui.QHBoxLayout()
         self.main_properties_layout.setObjectName('main_properties_layout')
-        self.main_color_button = QtGui.QPushButton(self.main_area_page)
+        self.main_color_button = ColorButton(self.main_area_page)
         self.main_color_button.setObjectName('main_color_button')
         self.main_properties_layout.addWidget(self.main_color_button)
         self.main_properties_layout.addSpacing(20)
@@ -190,7 +190,7 @@ class Ui_ThemeWizard(object):
         self.outline_check_box.setObjectName('outline_check_box')
         self.outline_layout = QtGui.QHBoxLayout()
         self.outline_layout.setObjectName('outline_layout')
-        self.outline_color_button = QtGui.QPushButton(self.main_area_page)
+        self.outline_color_button = ColorButton(self.main_area_page)
         self.outline_color_button.setEnabled(False)
         self.outline_color_button.setObjectName('Outline_color_button')
         self.outline_layout.addWidget(self.outline_color_button)
@@ -207,7 +207,7 @@ class Ui_ThemeWizard(object):
         self.shadow_check_box.setObjectName('shadow_check_box')
         self.shadow_layout = QtGui.QHBoxLayout()
         self.shadow_layout.setObjectName('shadow_layout')
-        self.shadow_color_button = QtGui.QPushButton(self.main_area_page)
+        self.shadow_color_button = ColorButton(self.main_area_page)
         self.shadow_color_button.setEnabled(False)
         self.shadow_color_button.setObjectName('shadow_color_button')
         self.shadow_layout.addWidget(self.shadow_color_button)
@@ -233,7 +233,7 @@ class Ui_ThemeWizard(object):
         self.footer_area_layout.addRow(self.footer_font_label, self.footer_font_combo_box)
         self.footer_color_label = QtGui.QLabel(self.footer_area_page)
         self.footer_color_label.setObjectName('footer_color_label')
-        self.footer_color_button = QtGui.QPushButton(self.footer_area_page)
+        self.footer_color_button = ColorButton(self.footer_area_page)
         self.footer_color_button.setObjectName('footer_color_button')
         self.footer_area_layout.addRow(self.footer_color_label, self.footer_color_button)
         self.footer_size_label = QtGui.QLabel(self.footer_area_page)

openlp/plugins/alerts/lib/alertstab.py

@@ -30,7 +30,7 @@
 from PyQt4 import QtGui
 
 from openlp.core.common import Settings, UiStrings, translate
-from openlp.core.lib import SettingsTab
+from openlp.core.lib import ColorButton, SettingsTab
 from openlp.core.lib.ui import create_valign_selection_widgets
 
 
@@ -57,14 +57,14 @@ class AlertsTab(SettingsTab):
         self.font_color_label.setObjectName('font_color_label')
         self.color_layout = QtGui.QHBoxLayout()
         self.color_layout.setObjectName('color_layout')
-        self.font_color_button = QtGui.QPushButton(self.font_group_box)
+        self.font_color_button = ColorButton(self.font_group_box)
         self.font_color_button.setObjectName('font_color_button')
         self.color_layout.addWidget(self.font_color_button)
         self.color_layout.addSpacing(20)
         self.background_color_label = QtGui.QLabel(self.font_group_box)
         self.background_color_label.setObjectName('background_color_label')
         self.color_layout.addWidget(self.background_color_label)
-        self.background_color_button = QtGui.QPushButton(self.font_group_box)
+        self.background_color_button = ColorButton(self.font_group_box)
         self.background_color_button.setObjectName('background_color_button')
         self.color_layout.addWidget(self.background_color_button)
         self.font_layout.addRow(self.font_color_label, self.color_layout)
@@ -95,8 +95,8 @@ class AlertsTab(SettingsTab):
         self.right_layout.addWidget(self.preview_group_box)
         self.right_layout.addStretch()
         # Signals and slots
-        self.background_color_button.clicked.connect(self.on_background_color_button_clicked)
+        self.background_color_button.colorChanged.connect(self.on_background_color_button_changed)
-        self.font_color_button.clicked.connect(self.on_font_color_button_clicked)
+        self.font_color_button.colorChanged.connect(self.on_font_color_button_changed)
         self.font_combo_box.activated.connect(self.on_font_combo_box_clicked)
         self.timeout_spin_box.valueChanged.connect(self.on_timeout_spin_box_changed)
         self.font_size_spin_box.valueChanged.connect(self.on_font_size_spin_box_changed)
@@ -113,15 +113,12 @@ class AlertsTab(SettingsTab):
         self.preview_group_box.setTitle(UiStrings().Preview)
         self.font_preview.setText(UiStrings().OLPV2x)
 
-    def on_background_color_button_clicked(self):
+    def on_background_color_button_changed(self, color):
         """
         The background color has been changed.
         """
-        new_color = QtGui.QColorDialog.getColor(QtGui.QColor(self.background_color), self)
+        self.background_color = color
-        if new_color.isValid():
+        self.update_display()
-            self.background_color = new_color.name()
-            self.background_color_button.setStyleSheet('background-color: %s' % self.background_color)
-            self.update_display()
 
     def on_font_combo_box_clicked(self):
         """
@@ -129,15 +126,12 @@ class AlertsTab(SettingsTab):
         """
         self.update_display()
 
-    def on_font_color_button_clicked(self):
+    def on_font_color_button_changed(self, color):
         """
         The Font Color button has clicked.
         """
-        new_color = QtGui.QColorDialog.getColor(QtGui.QColor(self.font_color), self)
+        self.font_color = color
-        if new_color.isValid():
+        self.update_display()
-            self.font_color = new_color.name()
-            self.font_color_button.setStyleSheet('background-color: %s' % self.font_color)
-            self.update_display()
 
     def on_timeout_spin_box_changed(self):
         """
@@ -169,8 +163,8 @@ class AlertsTab(SettingsTab):
         settings.endGroup()
         self.font_size_spin_box.setValue(self.font_size)
         self.timeout_spin_box.setValue(self.timeout)
-        self.font_color_button.setStyleSheet('background-color: %s' % self.font_color)
+        self.font_color_button.color = self.font_color
-        self.background_color_button.setStyleSheet('background-color: %s' % self.background_color)
+        self.background_color_button.color = self.background_color
         self.vertical_combo_box.setCurrentIndex(self.location)
         font = QtGui.QFont()
         font.setFamily(self.font_face)

openlp/plugins/images/lib/imagetab.py

@@ -30,7 +30,7 @@
 from PyQt4 import QtGui
 
 from openlp.core.common import Settings, UiStrings, translate
-from openlp.core.lib import SettingsTab
+from openlp.core.lib import ColorButton, SettingsTab
 
 
 class ImageTab(SettingsTab):
@@ -51,7 +51,7 @@ class ImageTab(SettingsTab):
         self.background_color_label = QtGui.QLabel(self.background_color_group_box)
         self.background_color_label.setObjectName('background_color_label')
         self.color_layout.addWidget(self.background_color_label)
-        self.background_color_button = QtGui.QPushButton(self.background_color_group_box)
+        self.background_color_button = ColorButton(self.background_color_group_box)
         self.background_color_button.setObjectName('background_color_button')
         self.color_layout.addWidget(self.background_color_button)
         self.form_layout.addRow(self.color_layout)
@@ -64,7 +64,7 @@ class ImageTab(SettingsTab):
         self.right_column.setSizePolicy(QtGui.QSizePolicy.Expanding, QtGui.QSizePolicy.Preferred)
         self.right_layout.addStretch()
         # Signals and slots
-        self.background_color_button.clicked.connect(self.on_background_color_button_clicked)
+        self.background_color_button.colorChanged.connect(self.on_background_color_button_changed)
 
     def retranslateUi(self):
         self.background_color_group_box.setTitle(UiStrings().BackgroundColor)
@@ -72,11 +72,8 @@ class ImageTab(SettingsTab):
         self.information_label.setText(
             translate('ImagesPlugin.ImageTab', 'Visible background for images with aspect ratio different to screen.'))
 
-    def on_background_color_button_clicked(self):
+    def on_background_color_button_changed(self, color):
-        new_color = QtGui.QColorDialog.getColor(QtGui.QColor(self.background_color), self)
+        self.background_color = new_color.name()
-        if new_color.isValid():
-            self.background_color = new_color.name()
-            self.background_color_button.setStyleSheet('background-color: %s' % self.background_color)
 
     def load(self):
         settings = Settings()
@@ -84,7 +81,7 @@ class ImageTab(SettingsTab):
         self.background_color = settings.value('background color')
         self.initial_color = self.background_color
         settings.endGroup()
-        self.background_color_button.setStyleSheet('background-color: %s' % self.background_color)
+        self.background_color_button.color = self.background_color
 
     def save(self):
         settings = Settings()