Compare commits
5 Commits
1e3333cdfa
...
5722928306
Author | SHA1 | Date |
---|---|---|
|
5722928306 | |
|
4ea04772d4 | |
|
8ccc7d3920 | |
|
662fbb260c | |
|
5eaea111f1 |
Before Width: | Height: | Size: 60 KiB After Width: | Height: | Size: 61 KiB |
Before Width: | Height: | Size: 163 KiB After Width: | Height: | Size: 131 KiB |
Before Width: | Height: | Size: 86 KiB After Width: | Height: | Size: 77 KiB |
Before Width: | Height: | Size: 502 KiB After Width: | Height: | Size: 393 KiB |
|
@ -2,20 +2,17 @@ import QtQuick 2.15
|
||||||
import QtGraphicalEffects 1.0
|
import QtGraphicalEffects 1.0
|
||||||
import RibbonUI 1.0
|
import RibbonUI 1.0
|
||||||
|
|
||||||
Item {
|
RibbonRectangle {
|
||||||
id: control
|
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 int blurRadius: 32
|
||||||
property alias target: effect.sourceItem
|
property alias target: effect.sourceItem
|
||||||
property rect targetRect : Qt.rect(control.x, control.y, control.width, control.height)
|
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 color maskColor: RibbonTheme.isDarkMode ? RibbonTheme.modernStyle ? '#292929' : "#212629" : RibbonTheme.modernStyle ? "#F5F5F5" : "#FFFFFF"
|
||||||
property real maskOpacity: 0.5
|
property real maskOpacity: 0.5
|
||||||
property alias maskBorder: mask.border
|
property alias maskBorderColor: mask.borderColor
|
||||||
|
property alias maskBorderWidth: mask.borderWidth
|
||||||
property bool useSolidBg: true
|
property bool useSolidBg: true
|
||||||
|
color: control.useSolidBg ? control.maskColor : 'transparent'
|
||||||
|
|
||||||
ShaderEffectSource {
|
ShaderEffectSource {
|
||||||
id: effect
|
id: effect
|
||||||
|
@ -31,37 +28,17 @@ Item {
|
||||||
deviation: 8
|
deviation: 8
|
||||||
samples: (control.blurRadius / 4) * 3
|
samples: (control.blurRadius / 4) * 3
|
||||||
source: effect
|
source: effect
|
||||||
visible: false
|
|
||||||
}
|
}
|
||||||
|
|
||||||
RibbonRectangle{
|
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
|
id: mask
|
||||||
anchors.fill: parent
|
anchors.fill: parent
|
||||||
color: control.maskColor
|
color: control.maskColor
|
||||||
opacity: control.maskOpacity
|
opacity: control.maskOpacity
|
||||||
radius: control.radius
|
radius: control.radius
|
||||||
|
topLeftRadius: control.topLeftRadius
|
||||||
|
bottomLeftRadius: control.bottomLeftRadius
|
||||||
|
topRightRadius: control.topRightRadius
|
||||||
|
bottomRightRadius: control.bottomRightRadius
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -61,7 +61,7 @@ Item {
|
||||||
color: isDarkMode ? "#141414" : "#F5F5F5"
|
color: isDarkMode ? "#141414" : "#F5F5F5"
|
||||||
opacity: bgOpacity
|
opacity: bgOpacity
|
||||||
anchors.fill: parent
|
anchors.fill: parent
|
||||||
bottomLeftRadius: Qt.platform.os === 'windows' ? RibbonUI.isWin11 ? 7 : 0 : 10
|
bottomLeftRadius: blur.bottomLeftRadius
|
||||||
bottomRightRadius: bottomLeftRadius
|
bottomRightRadius: bottomLeftRadius
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -32,7 +32,7 @@ Button {
|
||||||
visible: showBg
|
visible: showBg
|
||||||
border.color: isDarkMode ? "#7F7F7F" : "#D2D1CE"
|
border.color: isDarkMode ? "#7F7F7F" : "#D2D1CE"
|
||||||
border.width: 1
|
border.width: 1
|
||||||
radius: 3
|
radius: 5
|
||||||
color: bgColor
|
color: bgColor
|
||||||
}
|
}
|
||||||
contentItem: Item{
|
contentItem: Item{
|
||||||
|
@ -41,7 +41,7 @@ Button {
|
||||||
implicitHeight: adaptHeight?root.parent.height>=layout.height?root.parent.height:layout.height:layout.height + 10
|
implicitHeight: adaptHeight?root.parent.height>=layout.height?root.parent.height:layout.height:layout.height + 10
|
||||||
Rectangle{
|
Rectangle{
|
||||||
anchors.fill: parent
|
anchors.fill: parent
|
||||||
radius: 3
|
radius: background.radius
|
||||||
color: {
|
color: {
|
||||||
if (root.pressed)
|
if (root.pressed)
|
||||||
return pressedColor
|
return pressedColor
|
||||||
|
|
|
@ -173,8 +173,8 @@ ComboBox {
|
||||||
background: RibbonBlur{
|
background: RibbonBlur{
|
||||||
radius: 5
|
radius: 5
|
||||||
maskOpacity: 1
|
maskOpacity: 1
|
||||||
maskBorder.color: RibbonTheme.isDarkMode ? "#5C5D5D" : "#B5B4B5"
|
maskBorderColor: RibbonTheme.isDarkMode ? "#5C5D5D" : "#B5B4B5"
|
||||||
maskBorder.width: 1
|
maskBorderWidth: 1
|
||||||
}
|
}
|
||||||
|
|
||||||
enter: Transition {
|
enter: Transition {
|
||||||
|
|
|
@ -58,7 +58,7 @@ Popup {
|
||||||
RectangularGlow {
|
RectangularGlow {
|
||||||
id: effect
|
id: effect
|
||||||
anchors.fill: blur
|
anchors.fill: blur
|
||||||
anchors.margins: blur.maskBorder.width
|
anchors.margins: blur.maskBorderWidth
|
||||||
glowRadius: 20
|
glowRadius: 20
|
||||||
spread: 0
|
spread: 0
|
||||||
color: RibbonTheme.isDarkMode ? Qt.rgba(0,0,0,0.7) : Qt.rgba(0,0,0,0.45)
|
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
|
implicitHeight: parent.height
|
||||||
implicitWidth: parent.width
|
implicitWidth: parent.width
|
||||||
id: blur
|
id: blur
|
||||||
radius: 20
|
radius: 7
|
||||||
maskOpacity: blurEnabled ? 0.9 : 1
|
maskOpacity: blurEnabled ? 0.9 : 1
|
||||||
maskBorder.color: RibbonTheme.modernStyle ?
|
maskBorderColor: RibbonTheme.modernStyle ?
|
||||||
RibbonTheme.isDarkMode ? "#7A7A7A" : "#2C59B7" :
|
RibbonTheme.isDarkMode ? "#7A7A7A" : "#2C59B7" :
|
||||||
RibbonTheme.isDarkMode ? "#5C5D5D" : "#B5B4B5"
|
RibbonTheme.isDarkMode ? "#5C5D5D" : "#B5B4B5"
|
||||||
maskBorder.width: 1
|
maskBorderWidth: 1
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
contentItem: Item{
|
contentItem: Item{
|
||||||
|
|
|
@ -13,7 +13,6 @@ RibbonPopup {
|
||||||
property bool isDarkMode: RibbonTheme.isDarkMode
|
property bool isDarkMode: RibbonTheme.isDarkMode
|
||||||
property int contentMargins: 20
|
property int contentMargins: 20
|
||||||
showCloseBtn: false
|
showCloseBtn: false
|
||||||
radius: 5
|
|
||||||
signal neutralClicked
|
signal neutralClicked
|
||||||
signal negativeClicked
|
signal negativeClicked
|
||||||
signal positiveClicked
|
signal positiveClicked
|
||||||
|
@ -25,7 +24,7 @@ RibbonPopup {
|
||||||
id:layout_content
|
id:layout_content
|
||||||
anchors.fill: parent
|
anchors.fill: parent
|
||||||
color: 'transparent'
|
color: 'transparent'
|
||||||
radius:5
|
radius:3
|
||||||
RibbonText{
|
RibbonText{
|
||||||
id:text_title
|
id:text_title
|
||||||
font.pixelSize: 24
|
font.pixelSize: 24
|
||||||
|
|
|
@ -9,60 +9,63 @@ Item {
|
||||||
property int topRightRadius: radius
|
property int topRightRadius: radius
|
||||||
property int bottomLeftRadius: radius
|
property int bottomLeftRadius: radius
|
||||||
property int bottomRightRadius: radius
|
property int bottomRightRadius: radius
|
||||||
|
property real borderWidth: 0
|
||||||
|
property var borderColor: Qt.color("transparent")
|
||||||
default property alias contentItem: container.data
|
default property alias contentItem: container.data
|
||||||
onWidthChanged: {
|
|
||||||
canvas.requestPaint()
|
Shape {
|
||||||
}
|
id: shape
|
||||||
onHeightChanged: {
|
|
||||||
canvas.requestPaint()
|
|
||||||
}
|
|
||||||
onTopLeftRadiusChanged: {
|
|
||||||
canvas.requestPaint()
|
|
||||||
}
|
|
||||||
onTopRightRadiusChanged: {
|
|
||||||
canvas.requestPaint()
|
|
||||||
}
|
|
||||||
onBottomLeftRadiusChanged: {
|
|
||||||
canvas.requestPaint()
|
|
||||||
}
|
|
||||||
onBottomRightRadiusChanged: {
|
|
||||||
canvas.requestPaint()
|
|
||||||
}
|
|
||||||
onColorChanged: {
|
|
||||||
canvas.requestPaint()
|
|
||||||
}
|
|
||||||
Canvas {
|
|
||||||
id: canvas
|
|
||||||
anchors.fill: parent
|
anchors.fill: parent
|
||||||
visible: false
|
ShapePath {
|
||||||
onPaint: {
|
capStyle: ShapePath.RoundCap
|
||||||
var ctx = getContext("2d")
|
strokeWidth: 0
|
||||||
ctx.clearRect(0, 0, width, height)
|
strokeColor: "transparent"
|
||||||
ctx.beginPath()
|
fillColor: control.color
|
||||||
ctx.moveTo(control.topLeftRadius, 0)
|
joinStyle: ShapePath.RoundJoin
|
||||||
ctx.lineTo(width - control.topRightRadius, 0)
|
startX: control.topLeftRadius; startY: 0
|
||||||
ctx.arcTo(width, 0, width, control.topRightRadius, control.topRightRadius)
|
PathLine { x: shape.width - control.topRightRadius; y: 0 }
|
||||||
ctx.lineTo(width, height - control.bottomRightRadius)
|
PathArc { x: shape.width; y: control.topRightRadius; radiusX: control.topRightRadius; radiusY: radiusX }
|
||||||
ctx.arcTo(width, height, width - control.bottomRightRadius, height, control.bottomRightRadius)
|
PathLine { x: shape.width; y: shape.height - control.bottomRightRadius }
|
||||||
ctx.lineTo(control.bottomLeftRadius, height)
|
PathArc { x: shape.width - control.bottomRightRadius; y: shape.height; radiusX: control.bottomRightRadius; radiusY: radiusX }
|
||||||
ctx.arcTo(0, height, 0, height - control.bottomLeftRadius, control.bottomLeftRadius)
|
PathLine { x: control.bottomLeftRadius; y: shape.height }
|
||||||
ctx.lineTo(0, control.topLeftRadius)
|
PathArc { x: 0; y: shape.height - control.bottomLeftRadius; radiusX: control.bottomLeftRadius; radiusY: radiusX }
|
||||||
ctx.arcTo(0, 0, control.topLeftRadius, 0, control.topLeftRadius)
|
PathLine { x: 0; y: control.topLeftRadius }
|
||||||
ctx.closePath()
|
PathArc { x: control.topLeftRadius; y: 0; radiusX: control.topLeftRadius; radiusY: radiusX }
|
||||||
ctx.fillStyle = control.color
|
|
||||||
ctx.fill()
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
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
|
id: container
|
||||||
anchors.fill: parent
|
anchors.fill: parent
|
||||||
color: control.color
|
clip: true
|
||||||
opacity: 0
|
layer.enabled: true
|
||||||
}
|
layer.effect: OpacityMask {
|
||||||
OpacityMask {
|
implicitHeight: container.height
|
||||||
anchors.fill: parent
|
implicitWidth: container.width
|
||||||
source: container
|
maskSource: shape
|
||||||
maskSource: canvas
|
}
|
||||||
invert: control.color === "transparent" || control.color === "#00000000"
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -43,7 +43,7 @@ Popup {
|
||||||
RectangularGlow {
|
RectangularGlow {
|
||||||
id: effect
|
id: effect
|
||||||
anchors.fill: blur
|
anchors.fill: blur
|
||||||
anchors.margins: blur.maskBorder.width
|
anchors.margins: blur.maskBorderWidth
|
||||||
glowRadius: 10
|
glowRadius: 10
|
||||||
spread: 0
|
spread: 0
|
||||||
color: RibbonTheme.isDarkMode ? Qt.rgba(0,0,0,0.7) : Qt.rgba(0,0,0,0.45)
|
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
|
implicitHeight: parent.height
|
||||||
implicitWidth: parent.width
|
implicitWidth: parent.width
|
||||||
id: blur
|
id: blur
|
||||||
radius: 10
|
radius: 7
|
||||||
maskOpacity: blurEnabled ? 0.9 : 1
|
maskOpacity: blurEnabled ? 0.9 : 1
|
||||||
maskBorder.color: RibbonTheme.modernStyle ?
|
maskBorderColor: RibbonTheme.modernStyle ?
|
||||||
RibbonTheme.isDarkMode ? "#7A7A7A" : "#2C59B7" :
|
RibbonTheme.isDarkMode ? "#7A7A7A" : "#2C59B7" :
|
||||||
RibbonTheme.isDarkMode ? "#5C5D5D" : "#B5B4B5"
|
RibbonTheme.isDarkMode ? "#5C5D5D" : "#B5B4B5"
|
||||||
maskBorder.width: 1
|
maskBorderWidth: 1
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
contentItem: Item{
|
contentItem: Item{
|
||||||
|
|
|
@ -2,20 +2,17 @@ import QtQuick
|
||||||
import Qt5Compat.GraphicalEffects
|
import Qt5Compat.GraphicalEffects
|
||||||
import RibbonUI
|
import RibbonUI
|
||||||
|
|
||||||
Item {
|
RibbonRectangle {
|
||||||
id: control
|
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 int blurRadius: 32
|
||||||
property alias target: effect.sourceItem
|
property alias target: effect.sourceItem
|
||||||
property rect targetRect : Qt.rect(control.x, control.y, control.width, control.height)
|
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 color maskColor: RibbonTheme.isDarkMode ? RibbonTheme.modernStyle ? '#292929' : "#212629" : RibbonTheme.modernStyle ? "#F5F5F5" : "#FFFFFF"
|
||||||
property real maskOpacity: 0.5
|
property real maskOpacity: 0.5
|
||||||
property alias maskBorder: mask.border
|
property alias maskBorderColor: mask.borderColor
|
||||||
|
property alias maskBorderWidth: mask.borderWidth
|
||||||
property bool useSolidBg: true
|
property bool useSolidBg: true
|
||||||
|
color: control.useSolidBg ? control.maskColor : 'transparent'
|
||||||
|
|
||||||
ShaderEffectSource {
|
ShaderEffectSource {
|
||||||
id: effect
|
id: effect
|
||||||
|
@ -31,37 +28,17 @@ Item {
|
||||||
deviation: 8
|
deviation: 8
|
||||||
samples: (control.blurRadius / 4) * 3
|
samples: (control.blurRadius / 4) * 3
|
||||||
source: effect
|
source: effect
|
||||||
visible: false
|
|
||||||
}
|
}
|
||||||
|
|
||||||
RibbonRectangle{
|
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
|
id: mask
|
||||||
anchors.fill: parent
|
anchors.fill: parent
|
||||||
color: control.maskColor
|
color: control.maskColor
|
||||||
opacity: control.maskOpacity
|
opacity: control.maskOpacity
|
||||||
radius: control.radius
|
radius: control.radius
|
||||||
|
topLeftRadius: control.topLeftRadius
|
||||||
|
bottomLeftRadius: control.bottomLeftRadius
|
||||||
|
topRightRadius: control.topRightRadius
|
||||||
|
bottomRightRadius: control.bottomRightRadius
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -61,7 +61,7 @@ Item {
|
||||||
color: isDarkMode ? "#141414" : "#F5F5F5"
|
color: isDarkMode ? "#141414" : "#F5F5F5"
|
||||||
opacity: bgOpacity
|
opacity: bgOpacity
|
||||||
anchors.fill: parent
|
anchors.fill: parent
|
||||||
bottomLeftRadius: Qt.platform.os === 'windows' ? RibbonUI.isWin11 ? 7 : 0 : 10
|
bottomLeftRadius: blur.bottomLeftRadius
|
||||||
bottomRightRadius: bottomLeftRadius
|
bottomRightRadius: bottomLeftRadius
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -32,7 +32,7 @@ Button {
|
||||||
visible: showBg
|
visible: showBg
|
||||||
border.color: isDarkMode ? "#7F7F7F" : "#D2D1CE"
|
border.color: isDarkMode ? "#7F7F7F" : "#D2D1CE"
|
||||||
border.width: 1
|
border.width: 1
|
||||||
radius: 3
|
radius: 5
|
||||||
color: bgColor
|
color: bgColor
|
||||||
}
|
}
|
||||||
contentItem: Item{
|
contentItem: Item{
|
||||||
|
@ -41,7 +41,7 @@ Button {
|
||||||
implicitHeight: adaptHeight?root.parent.height>=layout.height?root.parent.height:layout.height:layout.height + 10
|
implicitHeight: adaptHeight?root.parent.height>=layout.height?root.parent.height:layout.height:layout.height + 10
|
||||||
Rectangle{
|
Rectangle{
|
||||||
anchors.fill: parent
|
anchors.fill: parent
|
||||||
radius: 3
|
radius: background.radius
|
||||||
color: {
|
color: {
|
||||||
if (root.pressed)
|
if (root.pressed)
|
||||||
return pressedColor
|
return pressedColor
|
||||||
|
|
|
@ -171,8 +171,8 @@ ComboBox {
|
||||||
background: RibbonBlur{
|
background: RibbonBlur{
|
||||||
radius: 5
|
radius: 5
|
||||||
maskOpacity: 1
|
maskOpacity: 1
|
||||||
maskBorder.color: RibbonTheme.isDarkMode ? "#5C5D5D" : "#B5B4B5"
|
maskBorderColor: RibbonTheme.isDarkMode ? "#5C5D5D" : "#B5B4B5"
|
||||||
maskBorder.width: 1
|
maskBorderWidth: 1
|
||||||
}
|
}
|
||||||
|
|
||||||
enter: Transition {
|
enter: Transition {
|
||||||
|
|
|
@ -58,7 +58,7 @@ Popup {
|
||||||
RectangularGlow {
|
RectangularGlow {
|
||||||
id: effect
|
id: effect
|
||||||
anchors.fill: blur
|
anchors.fill: blur
|
||||||
anchors.margins: blur.maskBorder.width
|
anchors.margins: blur.maskBorderWidth
|
||||||
glowRadius: 20
|
glowRadius: 20
|
||||||
spread: 0
|
spread: 0
|
||||||
color: RibbonTheme.isDarkMode ? Qt.rgba(0,0,0,0.7) : Qt.rgba(0,0,0,0.45)
|
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
|
implicitHeight: parent.height
|
||||||
implicitWidth: parent.width
|
implicitWidth: parent.width
|
||||||
id: blur
|
id: blur
|
||||||
radius: 20
|
radius: 7
|
||||||
maskOpacity: blurEnabled ? 0.9 : 1
|
maskOpacity: blurEnabled ? 0.9 : 1
|
||||||
maskBorder.color: RibbonTheme.modernStyle ?
|
maskBorderColor: RibbonTheme.modernStyle ?
|
||||||
RibbonTheme.isDarkMode ? "#7A7A7A" : "#2C59B7" :
|
RibbonTheme.isDarkMode ? "#7A7A7A" : "#2C59B7" :
|
||||||
RibbonTheme.isDarkMode ? "#5C5D5D" : "#B5B4B5"
|
RibbonTheme.isDarkMode ? "#5C5D5D" : "#B5B4B5"
|
||||||
maskBorder.width: 1
|
maskBorderWidth: 1
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
contentItem: Item{
|
contentItem: Item{
|
||||||
|
|
|
@ -14,7 +14,6 @@ RibbonPopup {
|
||||||
property bool isDarkMode: RibbonTheme.isDarkMode
|
property bool isDarkMode: RibbonTheme.isDarkMode
|
||||||
property int contentMargins: 20
|
property int contentMargins: 20
|
||||||
showCloseBtn: false
|
showCloseBtn: false
|
||||||
radius: 5
|
|
||||||
signal neutralClicked
|
signal neutralClicked
|
||||||
signal negativeClicked
|
signal negativeClicked
|
||||||
signal positiveClicked
|
signal positiveClicked
|
||||||
|
@ -26,7 +25,7 @@ RibbonPopup {
|
||||||
id:layout_content
|
id:layout_content
|
||||||
anchors.fill: parent
|
anchors.fill: parent
|
||||||
color: 'transparent'
|
color: 'transparent'
|
||||||
radius:5
|
radius:3
|
||||||
RibbonText{
|
RibbonText{
|
||||||
id:text_title
|
id:text_title
|
||||||
font.pixelSize: 24
|
font.pixelSize: 24
|
||||||
|
|
|
@ -1,5 +1,6 @@
|
||||||
import QtQuick
|
import QtQuick
|
||||||
import QtQuick.Controls
|
import QtQuick.Controls
|
||||||
|
import QtQuick.Shapes
|
||||||
import Qt5Compat.GraphicalEffects
|
import Qt5Compat.GraphicalEffects
|
||||||
|
|
||||||
Item {
|
Item {
|
||||||
|
@ -10,60 +11,63 @@ Item {
|
||||||
property int topRightRadius: radius
|
property int topRightRadius: radius
|
||||||
property int bottomLeftRadius: radius
|
property int bottomLeftRadius: radius
|
||||||
property int bottomRightRadius: radius
|
property int bottomRightRadius: radius
|
||||||
|
property real borderWidth: 0
|
||||||
|
property var borderColor: Qt.color("transparent")
|
||||||
default property alias contentItem: container.data
|
default property alias contentItem: container.data
|
||||||
onWidthChanged: {
|
|
||||||
canvas.requestPaint()
|
Shape {
|
||||||
}
|
id: shape
|
||||||
onHeightChanged: {
|
|
||||||
canvas.requestPaint()
|
|
||||||
}
|
|
||||||
onTopLeftRadiusChanged: {
|
|
||||||
canvas.requestPaint()
|
|
||||||
}
|
|
||||||
onTopRightRadiusChanged: {
|
|
||||||
canvas.requestPaint()
|
|
||||||
}
|
|
||||||
onBottomLeftRadiusChanged: {
|
|
||||||
canvas.requestPaint()
|
|
||||||
}
|
|
||||||
onBottomRightRadiusChanged: {
|
|
||||||
canvas.requestPaint()
|
|
||||||
}
|
|
||||||
onColorChanged: {
|
|
||||||
canvas.requestPaint()
|
|
||||||
}
|
|
||||||
Canvas {
|
|
||||||
id: canvas
|
|
||||||
anchors.fill: parent
|
anchors.fill: parent
|
||||||
visible: false
|
ShapePath {
|
||||||
onPaint: {
|
capStyle: ShapePath.RoundCap
|
||||||
var ctx = getContext("2d")
|
strokeWidth: 0
|
||||||
ctx.clearRect(0, 0, width, height)
|
strokeColor: "transparent"
|
||||||
ctx.beginPath()
|
fillColor: control.color
|
||||||
ctx.moveTo(control.topLeftRadius, 0)
|
joinStyle: ShapePath.RoundJoin
|
||||||
ctx.lineTo(width - control.topRightRadius, 0)
|
startX: control.topLeftRadius; startY: 0
|
||||||
ctx.arcTo(width, 0, width, control.topRightRadius, control.topRightRadius)
|
PathLine { x: shape.width - control.topRightRadius; y: 0 }
|
||||||
ctx.lineTo(width, height - control.bottomRightRadius)
|
PathArc { x: shape.width; y: control.topRightRadius; radiusX: control.topRightRadius; radiusY: radiusX }
|
||||||
ctx.arcTo(width, height, width - control.bottomRightRadius, height, control.bottomRightRadius)
|
PathLine { x: shape.width; y: shape.height - control.bottomRightRadius }
|
||||||
ctx.lineTo(control.bottomLeftRadius, height)
|
PathArc { x: shape.width - control.bottomRightRadius; y: shape.height; radiusX: control.bottomRightRadius; radiusY: radiusX }
|
||||||
ctx.arcTo(0, height, 0, height - control.bottomLeftRadius, control.bottomLeftRadius)
|
PathLine { x: control.bottomLeftRadius; y: shape.height }
|
||||||
ctx.lineTo(0, control.topLeftRadius)
|
PathArc { x: 0; y: shape.height - control.bottomLeftRadius; radiusX: control.bottomLeftRadius; radiusY: radiusX }
|
||||||
ctx.arcTo(0, 0, control.topLeftRadius, 0, control.topLeftRadius)
|
PathLine { x: 0; y: control.topLeftRadius }
|
||||||
ctx.closePath()
|
PathArc { x: control.topLeftRadius; y: 0; radiusX: control.topLeftRadius; radiusY: radiusX }
|
||||||
ctx.fillStyle = control.color
|
|
||||||
ctx.fill()
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
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
|
id: container
|
||||||
anchors.fill: parent
|
anchors.fill: parent
|
||||||
color: control.color
|
clip: true
|
||||||
opacity: 0
|
layer.enabled: true
|
||||||
}
|
layer.effect: OpacityMask {
|
||||||
OpacityMask {
|
implicitHeight: container.height
|
||||||
anchors.fill: parent
|
implicitWidth: container.width
|
||||||
source: container
|
maskSource: shape
|
||||||
maskSource: canvas
|
}
|
||||||
invert: control.color === "transparent" || control.color === "#00000000"
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -44,7 +44,7 @@ Popup {
|
||||||
RectangularGlow {
|
RectangularGlow {
|
||||||
id: effect
|
id: effect
|
||||||
anchors.fill: blur
|
anchors.fill: blur
|
||||||
anchors.margins: blur.maskBorder.width
|
anchors.margins: blur.maskBorderWidth
|
||||||
glowRadius: 10
|
glowRadius: 10
|
||||||
spread: 0
|
spread: 0
|
||||||
color: RibbonTheme.isDarkMode ? Qt.rgba(0,0,0,0.7) : Qt.rgba(0,0,0,0.45)
|
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
|
implicitHeight: parent.height
|
||||||
implicitWidth: parent.width
|
implicitWidth: parent.width
|
||||||
id: blur
|
id: blur
|
||||||
radius: 10
|
radius: 7
|
||||||
maskOpacity: blurEnabled ? 0.9 : 1
|
maskOpacity: blurEnabled ? 0.9 : 1
|
||||||
maskBorder.color: RibbonTheme.modernStyle ?
|
maskBorderColor: RibbonTheme.modernStyle ?
|
||||||
RibbonTheme.isDarkMode ? "#7A7A7A" : "#2C59B7" :
|
RibbonTheme.isDarkMode ? "#7A7A7A" : "#2C59B7" :
|
||||||
RibbonTheme.isDarkMode ? "#5C5D5D" : "#B5B4B5"
|
RibbonTheme.isDarkMode ? "#5C5D5D" : "#B5B4B5"
|
||||||
maskBorder.width: 1
|
maskBorderWidth: 1
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
contentItem: Item{
|
contentItem: Item{
|
||||||
|
|
|
@ -36,7 +36,8 @@ void RibbonUI::init()
|
||||||
qputenv("QSG_RHI_BACKEND", "opengl");
|
qputenv("QSG_RHI_BACKEND", "opengl");
|
||||||
#endif
|
#endif
|
||||||
QQuickWindow::setDefaultAlphaBuffer(true);
|
QQuickWindow::setDefaultAlphaBuffer(true);
|
||||||
QGuiApplication::setAttribute(Qt::AA_EnableHighDpiScaling);
|
QGuiApplication::setHighDpiScaleFactorRoundingPolicy(
|
||||||
|
Qt::HighDpiScaleFactorRoundingPolicy::PassThrough);
|
||||||
}
|
}
|
||||||
|
|
||||||
void RibbonUI::registerTypes(const char *uri)
|
void RibbonUI::registerTypes(const char *uri)
|
||||||
|
|