border-right not at full height
Using this:
QPushButton:hover {
background-color: #666666;
border-right: 5px solid #3497D8;
}
I have this:
I want this:
0
2 answers
You set yourself an impossible task :) Look, maybe it will fit like this:
from PyQt5 import QtCore, QtGui, QtWidgets
from PyQt5.QtSvg import QSvgWidget, QSvgRenderer
from base64 import b64encode
def iconFromBase64(base_64):
pixmap = QtGui.QPixmap()
pixmap.loadFromData(QtCore.QByteArray.fromBase64(base_64), "SVG")
icon = QtGui.QIcon(pixmap)
return icon
class PushButton(QtWidgets.QPushButton):
hover = QtCore.pyqtSignal(str)
def __init__(self, parent):
super(PushButton, self).__init__(parent)
pass
def enterEvent(self, event):
self.hover.emit("#f00")
def leaveEvent(self, event):
self.hover.emit("#00f")
class Ui_MainWindow(QtWidgets.QMainWindow):
def __init__(self):
super().__init__()
self.pb = QtWidgets.QPushButton("", self, objectName="pb", clicked=self.onClick)
self.pb.setGeometry(QtCore.QRect(0, 0, 100, 100))
self.pb.setCheckable(True)
self.pb_2 = PushButton(self)
self.pb_2.setObjectName("pb_2")
self.pb_2.setGeometry(QtCore.QRect(100, 100, 100, 100))
self.pb_2.hover.connect(self.onHover) #svgColor)
# +
self.pb_2.setStyleSheet("""
QPushButton:hover {
background-color: #666666;
border-right: 15px solid #3497D8;
border-top: 50px solid #666666;
border-left: 15px solid #666666;
border-bottom: 50px solid #666666;
}
""")
self.svgColor("#00f")
self.set_icon()
self.onHover("#00f")
def onClick(self, state):
if state: self.svgColor("#f00")
else: self.svgColor("#00f")
self.set_icon()
def svgColor(self, color):
self.svg_str = """
<svg width="210pt" height="210pt" viewBox="0 0 210 210">
<path fill="%s" opacity="1.00" d=" M 98.40 35.63 C 111.65 32.59 126.16 40.12 131.49 52.58 C 136.11 62.55 134.02 74.42 128.61 83.64 C 124.15 91.40 116.88 98.21 107.79 99.72 C 99.82 101.08 91.82 97.30 86.36 91.64 C 78.79 83.85 74.13 72.88 74.99 61.94 C 75.94 49.30 85.95 38.02 98.40 35.63 Z" />
<path fill="%s" opacity="1.00" d=" M 61.84 109.81 C 74.62 106.15 87.71 102.93 101.06 102.60 C 99.42 118.09 97.06 133.51 95.27 148.98 C 95.06 150.30 95.92 151.44 96.44 152.58 C 99.06 157.18 101.67 161.78 104.39 166.32 C 107.41 161.59 110.17 156.70 112.88 151.80 C 113.76 150.47 113.66 148.84 113.47 147.33 C 111.62 132.42 109.51 117.54 107.82 102.61 C 121.22 102.92 134.33 106.17 147.15 109.84 C 151.24 111.19 155.73 112.06 159.07 114.97 C 161.95 117.47 162.87 121.37 163.27 125.01 C 165.05 141.64 166.93 158.27 168.77 174.90 C 125.92 175.12 83.07 174.96 40.22 174.98 C 41.72 159.42 43.69 143.91 45.28 128.35 C 45.85 124.11 45.87 119.31 48.91 115.95 C 52.21 112.23 57.33 111.28 61.84 109.81 Z" />
</svg>
""" % (color, color)
def set_icon(self):
svg_base64_str = b64encode(self.svg_str.encode('utf-8'))
self.icon = iconFromBase64(svg_base64_str)
self.pb.setIcon(self.icon)
self.pb.setIconSize(QtCore.QSize(50, 50))
def onHover(self, color):
self.svgColor(color)
svg_base64_str = b64encode(self.svg_str.encode('utf-8'))
self.icon = iconFromBase64(svg_base64_str)
self.pb_2.setIcon(self.icon)
self.pb_2.setIconSize(QtCore.QSize(50, 50))
if __name__ == "__main__":
import sys
app = QtWidgets.QApplication(sys.argv)
app.setStyle("fusion")
ex = Ui_MainWindow()
ex.resize(300, 300)
ex.show()
sys.exit(app.exec_())
You can practice Border/Outline Generator
1
Author: S. Nick, 2019-10-10 20:46:05
I achieved..., it is not clear how to choose the size of the icon and the size of the border, it turned out only the selection for a specific task, crooked, but the result is there!
QPushButton:hover {
background-color: #E5E5E5;
border: 4px;
border-image: url("22.svg");
}
Original icon:
Maybe someone has thoughts on how to properly adjust the size?
0
Author: biomotor, 2019-10-11 09:19:20