Compare commits

...

5 Commits

21 changed files with 151 additions and 191 deletions

Binary file not shown.

Before

Width:  |  Height:  |  Size: 60 KiB

After

Width:  |  Height:  |  Size: 61 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 163 KiB

After

Width:  |  Height:  |  Size: 131 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 86 KiB

After

Width:  |  Height:  |  Size: 77 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 502 KiB

After

Width:  |  Height:  |  Size: 393 KiB

View File

@ -2,20 +2,17 @@ import QtQuick 2.15
import QtGraphicalEffects 1.0
import RibbonUI 1.0
Item {
RibbonRectangle {
id: control
property int radius: 0
property int topLeftRadius: radius
property int bottomLeftRadius: radius
property int topRightRadius: radius
property int bottomRightRadius: radius
property int blurRadius: 32
property alias target: effect.sourceItem
property rect targetRect : Qt.rect(control.x, control.y, control.width, control.height)
property color maskColor: RibbonTheme.isDarkMode ? RibbonTheme.modernStyle ? '#292929' : "#212629" : RibbonTheme.modernStyle ? "#F5F5F5" : "#FFFFFF"
property real maskOpacity: 0.5
property alias maskBorder: mask.border
property alias maskBorderColor: mask.borderColor
property alias maskBorderWidth: mask.borderWidth
property bool useSolidBg: true
color: control.useSolidBg ? control.maskColor : 'transparent'
ShaderEffectSource {
id: effect
@ -31,37 +28,17 @@ Item {
deviation: 8
samples: (control.blurRadius / 4) * 3
source: effect
visible: false
}
RibbonRectangle{
anchors.fill: parent
color: control.useSolidBg ? control.maskColor : 'transparent'
radius: control.radius
topLeftRadius: control.topLeftRadius
bottomLeftRadius: control.bottomLeftRadius
topRightRadius: control.topRightRadius
bottomRightRadius: control.bottomRightRadius
OpacityMask {
anchors.fill: parent
source: blur
maskSource: RibbonRectangle{
width: control.width
height: control.height
radius: control.radius
topLeftRadius: control.topLeftRadius
bottomLeftRadius: control.bottomLeftRadius
topRightRadius: control.topRightRadius
bottomRightRadius: control.bottomRightRadius
}
}
}
Rectangle{
id: mask
anchors.fill: parent
color: control.maskColor
opacity: control.maskOpacity
radius: control.radius
topLeftRadius: control.topLeftRadius
bottomLeftRadius: control.bottomLeftRadius
topRightRadius: control.topRightRadius
bottomRightRadius: control.bottomRightRadius
}
}

View File

@ -61,7 +61,7 @@ Item {
color: isDarkMode ? "#141414" : "#F5F5F5"
opacity: bgOpacity
anchors.fill: parent
bottomLeftRadius: Qt.platform.os === 'windows' ? RibbonUI.isWin11 ? 7 : 0 : 10
bottomLeftRadius: blur.bottomLeftRadius
bottomRightRadius: bottomLeftRadius
}

View File

@ -32,7 +32,7 @@ Button {
visible: showBg
border.color: isDarkMode ? "#7F7F7F" : "#D2D1CE"
border.width: 1
radius: 3
radius: 5
color: bgColor
}
contentItem: Item{
@ -41,7 +41,7 @@ Button {
implicitHeight: adaptHeight?root.parent.height>=layout.height?root.parent.height:layout.height:layout.height + 10
Rectangle{
anchors.fill: parent
radius: 3
radius: background.radius
color: {
if (root.pressed)
return pressedColor

View File

@ -173,8 +173,8 @@ ComboBox {
background: RibbonBlur{
radius: 5
maskOpacity: 1
maskBorder.color: RibbonTheme.isDarkMode ? "#5C5D5D" : "#B5B4B5"
maskBorder.width: 1
maskBorderColor: RibbonTheme.isDarkMode ? "#5C5D5D" : "#B5B4B5"
maskBorderWidth: 1
}
enter: Transition {

View File

@ -58,7 +58,7 @@ Popup {
RectangularGlow {
id: effect
anchors.fill: blur
anchors.margins: blur.maskBorder.width
anchors.margins: blur.maskBorderWidth
glowRadius: 20
spread: 0
color: RibbonTheme.isDarkMode ? Qt.rgba(0,0,0,0.7) : Qt.rgba(0,0,0,0.45)
@ -68,12 +68,12 @@ Popup {
implicitHeight: parent.height
implicitWidth: parent.width
id: blur
radius: 20
radius: 7
maskOpacity: blurEnabled ? 0.9 : 1
maskBorder.color: RibbonTheme.modernStyle ?
maskBorderColor: RibbonTheme.modernStyle ?
RibbonTheme.isDarkMode ? "#7A7A7A" : "#2C59B7" :
RibbonTheme.isDarkMode ? "#5C5D5D" : "#B5B4B5"
maskBorder.width: 1
maskBorderWidth: 1
}
}
contentItem: Item{

View File

@ -13,7 +13,6 @@ RibbonPopup {
property bool isDarkMode: RibbonTheme.isDarkMode
property int contentMargins: 20
showCloseBtn: false
radius: 5
signal neutralClicked
signal negativeClicked
signal positiveClicked
@ -25,7 +24,7 @@ RibbonPopup {
id:layout_content
anchors.fill: parent
color: 'transparent'
radius:5
radius:3
RibbonText{
id:text_title
font.pixelSize: 24

View File

@ -9,60 +9,63 @@ Item {
property int topRightRadius: radius
property int bottomLeftRadius: radius
property int bottomRightRadius: radius
property real borderWidth: 0
property var borderColor: Qt.color("transparent")
default property alias contentItem: container.data
onWidthChanged: {
canvas.requestPaint()
}
onHeightChanged: {
canvas.requestPaint()
}
onTopLeftRadiusChanged: {
canvas.requestPaint()
}
onTopRightRadiusChanged: {
canvas.requestPaint()
}
onBottomLeftRadiusChanged: {
canvas.requestPaint()
}
onBottomRightRadiusChanged: {
canvas.requestPaint()
}
onColorChanged: {
canvas.requestPaint()
}
Canvas {
id: canvas
Shape {
id: shape
anchors.fill: parent
visible: false
onPaint: {
var ctx = getContext("2d")
ctx.clearRect(0, 0, width, height)
ctx.beginPath()
ctx.moveTo(control.topLeftRadius, 0)
ctx.lineTo(width - control.topRightRadius, 0)
ctx.arcTo(width, 0, width, control.topRightRadius, control.topRightRadius)
ctx.lineTo(width, height - control.bottomRightRadius)
ctx.arcTo(width, height, width - control.bottomRightRadius, height, control.bottomRightRadius)
ctx.lineTo(control.bottomLeftRadius, height)
ctx.arcTo(0, height, 0, height - control.bottomLeftRadius, control.bottomLeftRadius)
ctx.lineTo(0, control.topLeftRadius)
ctx.arcTo(0, 0, control.topLeftRadius, 0, control.topLeftRadius)
ctx.closePath()
ctx.fillStyle = control.color
ctx.fill()
ShapePath {
capStyle: ShapePath.RoundCap
strokeWidth: 0
strokeColor: "transparent"
fillColor: control.color
joinStyle: ShapePath.RoundJoin
startX: control.topLeftRadius; startY: 0
PathLine { x: shape.width - control.topRightRadius; y: 0 }
PathArc { x: shape.width; y: control.topRightRadius; radiusX: control.topRightRadius; radiusY: radiusX }
PathLine { x: shape.width; y: shape.height - control.bottomRightRadius }
PathArc { x: shape.width - control.bottomRightRadius; y: shape.height; radiusX: control.bottomRightRadius; radiusY: radiusX }
PathLine { x: control.bottomLeftRadius; y: shape.height }
PathArc { x: 0; y: shape.height - control.bottomLeftRadius; radiusX: control.bottomLeftRadius; radiusY: radiusX }
PathLine { x: 0; y: control.topLeftRadius }
PathArc { x: control.topLeftRadius; y: 0; radiusX: control.topLeftRadius; radiusY: radiusX }
}
}
Rectangle {
Shape {
id: border
width: shape.width
height: shape.height
anchors.centerIn: parent
ShapePath {
capStyle: ShapePath.RoundCap
strokeWidth: control.borderWidth
strokeColor: control.borderColor
fillColor: "transparent"
joinStyle: ShapePath.RoundJoin
startX: control.topLeftRadius; startY: 0
PathLine { x: border.width - control.topRightRadius; y: 0 }
PathArc { x: border.width; y: control.topRightRadius; radiusX: control.topRightRadius; radiusY: radiusX }
PathLine { x: border.width; y: border.height - control.bottomRightRadius }
PathArc { x: border.width - control.bottomRightRadius; y: border.height; radiusX: control.bottomRightRadius; radiusY: radiusX }
PathLine { x: control.bottomLeftRadius; y: border.height }
PathArc { x: 0; y: border.height - control.bottomLeftRadius; radiusX: control.bottomLeftRadius; radiusY: radiusX }
PathLine { x: 0; y: control.topLeftRadius }
PathArc { x: control.topLeftRadius; y: 0; radiusX: control.topLeftRadius; radiusY: radiusX }
}
}
Item{
id: container
anchors.fill: parent
color: control.color
opacity: 0
clip: true
layer.enabled: true
layer.effect: OpacityMask {
implicitHeight: container.height
implicitWidth: container.width
maskSource: shape
}
OpacityMask {
anchors.fill: parent
source: container
maskSource: canvas
invert: control.color === "transparent" || control.color === "#00000000"
}
}

View File

@ -43,7 +43,7 @@ Popup {
RectangularGlow {
id: effect
anchors.fill: blur
anchors.margins: blur.maskBorder.width
anchors.margins: blur.maskBorderWidth
glowRadius: 10
spread: 0
color: RibbonTheme.isDarkMode ? Qt.rgba(0,0,0,0.7) : Qt.rgba(0,0,0,0.45)
@ -53,12 +53,12 @@ Popup {
implicitHeight: parent.height
implicitWidth: parent.width
id: blur
radius: 10
radius: 7
maskOpacity: blurEnabled ? 0.9 : 1
maskBorder.color: RibbonTheme.modernStyle ?
maskBorderColor: RibbonTheme.modernStyle ?
RibbonTheme.isDarkMode ? "#7A7A7A" : "#2C59B7" :
RibbonTheme.isDarkMode ? "#5C5D5D" : "#B5B4B5"
maskBorder.width: 1
maskBorderWidth: 1
}
}
contentItem: Item{

View File

@ -2,20 +2,17 @@ import QtQuick
import Qt5Compat.GraphicalEffects
import RibbonUI
Item {
RibbonRectangle {
id: control
property int radius: 0
property int topLeftRadius: radius
property int bottomLeftRadius: radius
property int topRightRadius: radius
property int bottomRightRadius: radius
property int blurRadius: 32
property alias target: effect.sourceItem
property rect targetRect : Qt.rect(control.x, control.y, control.width, control.height)
property color maskColor: RibbonTheme.isDarkMode ? RibbonTheme.modernStyle ? '#292929' : "#212629" : RibbonTheme.modernStyle ? "#F5F5F5" : "#FFFFFF"
property real maskOpacity: 0.5
property alias maskBorder: mask.border
property alias maskBorderColor: mask.borderColor
property alias maskBorderWidth: mask.borderWidth
property bool useSolidBg: true
color: control.useSolidBg ? control.maskColor : 'transparent'
ShaderEffectSource {
id: effect
@ -31,37 +28,17 @@ Item {
deviation: 8
samples: (control.blurRadius / 4) * 3
source: effect
visible: false
}
RibbonRectangle{
anchors.fill: parent
color: control.useSolidBg ? control.maskColor : 'transparent'
radius: control.radius
topLeftRadius: control.topLeftRadius
bottomLeftRadius: control.bottomLeftRadius
topRightRadius: control.topRightRadius
bottomRightRadius: control.bottomRightRadius
OpacityMask {
anchors.fill: parent
source: blur
maskSource: RibbonRectangle{
width: control.width
height: control.height
radius: control.radius
topLeftRadius: control.topLeftRadius
bottomLeftRadius: control.bottomLeftRadius
topRightRadius: control.topRightRadius
bottomRightRadius: control.bottomRightRadius
}
}
}
Rectangle{
id: mask
anchors.fill: parent
color: control.maskColor
opacity: control.maskOpacity
radius: control.radius
topLeftRadius: control.topLeftRadius
bottomLeftRadius: control.bottomLeftRadius
topRightRadius: control.topRightRadius
bottomRightRadius: control.bottomRightRadius
}
}

View File

@ -61,7 +61,7 @@ Item {
color: isDarkMode ? "#141414" : "#F5F5F5"
opacity: bgOpacity
anchors.fill: parent
bottomLeftRadius: Qt.platform.os === 'windows' ? RibbonUI.isWin11 ? 7 : 0 : 10
bottomLeftRadius: blur.bottomLeftRadius
bottomRightRadius: bottomLeftRadius
}

View File

@ -32,7 +32,7 @@ Button {
visible: showBg
border.color: isDarkMode ? "#7F7F7F" : "#D2D1CE"
border.width: 1
radius: 3
radius: 5
color: bgColor
}
contentItem: Item{
@ -41,7 +41,7 @@ Button {
implicitHeight: adaptHeight?root.parent.height>=layout.height?root.parent.height:layout.height:layout.height + 10
Rectangle{
anchors.fill: parent
radius: 3
radius: background.radius
color: {
if (root.pressed)
return pressedColor

View File

@ -171,8 +171,8 @@ ComboBox {
background: RibbonBlur{
radius: 5
maskOpacity: 1
maskBorder.color: RibbonTheme.isDarkMode ? "#5C5D5D" : "#B5B4B5"
maskBorder.width: 1
maskBorderColor: RibbonTheme.isDarkMode ? "#5C5D5D" : "#B5B4B5"
maskBorderWidth: 1
}
enter: Transition {

View File

@ -58,7 +58,7 @@ Popup {
RectangularGlow {
id: effect
anchors.fill: blur
anchors.margins: blur.maskBorder.width
anchors.margins: blur.maskBorderWidth
glowRadius: 20
spread: 0
color: RibbonTheme.isDarkMode ? Qt.rgba(0,0,0,0.7) : Qt.rgba(0,0,0,0.45)
@ -68,12 +68,12 @@ Popup {
implicitHeight: parent.height
implicitWidth: parent.width
id: blur
radius: 20
radius: 7
maskOpacity: blurEnabled ? 0.9 : 1
maskBorder.color: RibbonTheme.modernStyle ?
maskBorderColor: RibbonTheme.modernStyle ?
RibbonTheme.isDarkMode ? "#7A7A7A" : "#2C59B7" :
RibbonTheme.isDarkMode ? "#5C5D5D" : "#B5B4B5"
maskBorder.width: 1
maskBorderWidth: 1
}
}
contentItem: Item{

View File

@ -14,7 +14,6 @@ RibbonPopup {
property bool isDarkMode: RibbonTheme.isDarkMode
property int contentMargins: 20
showCloseBtn: false
radius: 5
signal neutralClicked
signal negativeClicked
signal positiveClicked
@ -26,7 +25,7 @@ RibbonPopup {
id:layout_content
anchors.fill: parent
color: 'transparent'
radius:5
radius:3
RibbonText{
id:text_title
font.pixelSize: 24

View File

@ -1,5 +1,6 @@
import QtQuick
import QtQuick.Controls
import QtQuick.Shapes
import Qt5Compat.GraphicalEffects
Item {
@ -10,60 +11,63 @@ Item {
property int topRightRadius: radius
property int bottomLeftRadius: radius
property int bottomRightRadius: radius
property real borderWidth: 0
property var borderColor: Qt.color("transparent")
default property alias contentItem: container.data
onWidthChanged: {
canvas.requestPaint()
}
onHeightChanged: {
canvas.requestPaint()
}
onTopLeftRadiusChanged: {
canvas.requestPaint()
}
onTopRightRadiusChanged: {
canvas.requestPaint()
}
onBottomLeftRadiusChanged: {
canvas.requestPaint()
}
onBottomRightRadiusChanged: {
canvas.requestPaint()
}
onColorChanged: {
canvas.requestPaint()
}
Canvas {
id: canvas
Shape {
id: shape
anchors.fill: parent
visible: false
onPaint: {
var ctx = getContext("2d")
ctx.clearRect(0, 0, width, height)
ctx.beginPath()
ctx.moveTo(control.topLeftRadius, 0)
ctx.lineTo(width - control.topRightRadius, 0)
ctx.arcTo(width, 0, width, control.topRightRadius, control.topRightRadius)
ctx.lineTo(width, height - control.bottomRightRadius)
ctx.arcTo(width, height, width - control.bottomRightRadius, height, control.bottomRightRadius)
ctx.lineTo(control.bottomLeftRadius, height)
ctx.arcTo(0, height, 0, height - control.bottomLeftRadius, control.bottomLeftRadius)
ctx.lineTo(0, control.topLeftRadius)
ctx.arcTo(0, 0, control.topLeftRadius, 0, control.topLeftRadius)
ctx.closePath()
ctx.fillStyle = control.color
ctx.fill()
ShapePath {
capStyle: ShapePath.RoundCap
strokeWidth: 0
strokeColor: "transparent"
fillColor: control.color
joinStyle: ShapePath.RoundJoin
startX: control.topLeftRadius; startY: 0
PathLine { x: shape.width - control.topRightRadius; y: 0 }
PathArc { x: shape.width; y: control.topRightRadius; radiusX: control.topRightRadius; radiusY: radiusX }
PathLine { x: shape.width; y: shape.height - control.bottomRightRadius }
PathArc { x: shape.width - control.bottomRightRadius; y: shape.height; radiusX: control.bottomRightRadius; radiusY: radiusX }
PathLine { x: control.bottomLeftRadius; y: shape.height }
PathArc { x: 0; y: shape.height - control.bottomLeftRadius; radiusX: control.bottomLeftRadius; radiusY: radiusX }
PathLine { x: 0; y: control.topLeftRadius }
PathArc { x: control.topLeftRadius; y: 0; radiusX: control.topLeftRadius; radiusY: radiusX }
}
}
Rectangle {
Shape {
id: border
width: shape.width
height: shape.height
anchors.centerIn: parent
ShapePath {
capStyle: ShapePath.RoundCap
strokeWidth: control.borderWidth
strokeColor: control.borderColor
fillColor: "transparent"
joinStyle: ShapePath.RoundJoin
startX: control.topLeftRadius; startY: 0
PathLine { x: border.width - control.topRightRadius; y: 0 }
PathArc { x: border.width; y: control.topRightRadius; radiusX: control.topRightRadius; radiusY: radiusX }
PathLine { x: border.width; y: border.height - control.bottomRightRadius }
PathArc { x: border.width - control.bottomRightRadius; y: border.height; radiusX: control.bottomRightRadius; radiusY: radiusX }
PathLine { x: control.bottomLeftRadius; y: border.height }
PathArc { x: 0; y: border.height - control.bottomLeftRadius; radiusX: control.bottomLeftRadius; radiusY: radiusX }
PathLine { x: 0; y: control.topLeftRadius }
PathArc { x: control.topLeftRadius; y: 0; radiusX: control.topLeftRadius; radiusY: radiusX }
}
}
Item{
id: container
anchors.fill: parent
color: control.color
opacity: 0
clip: true
layer.enabled: true
layer.effect: OpacityMask {
implicitHeight: container.height
implicitWidth: container.width
maskSource: shape
}
OpacityMask {
anchors.fill: parent
source: container
maskSource: canvas
invert: control.color === "transparent" || control.color === "#00000000"
}
}

View File

@ -44,7 +44,7 @@ Popup {
RectangularGlow {
id: effect
anchors.fill: blur
anchors.margins: blur.maskBorder.width
anchors.margins: blur.maskBorderWidth
glowRadius: 10
spread: 0
color: RibbonTheme.isDarkMode ? Qt.rgba(0,0,0,0.7) : Qt.rgba(0,0,0,0.45)
@ -54,12 +54,12 @@ Popup {
implicitHeight: parent.height
implicitWidth: parent.width
id: blur
radius: 10
radius: 7
maskOpacity: blurEnabled ? 0.9 : 1
maskBorder.color: RibbonTheme.modernStyle ?
maskBorderColor: RibbonTheme.modernStyle ?
RibbonTheme.isDarkMode ? "#7A7A7A" : "#2C59B7" :
RibbonTheme.isDarkMode ? "#5C5D5D" : "#B5B4B5"
maskBorder.width: 1
maskBorderWidth: 1
}
}
contentItem: Item{

View File

@ -36,7 +36,8 @@ void RibbonUI::init()
qputenv("QSG_RHI_BACKEND", "opengl");
#endif
QQuickWindow::setDefaultAlphaBuffer(true);
QGuiApplication::setAttribute(Qt::AA_EnableHighDpiScaling);
QGuiApplication::setHighDpiScaleFactorRoundingPolicy(
Qt::HighDpiScaleFactorRoundingPolicy::PassThrough);
}
void RibbonUI::registerTypes(const char *uri)