Mentalflow
/
RibbonUI
mirror of https://github.com/mentalfl0w/RibbonUI.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

RibbonRadioButton,RibbonTitleBar,RibbonButton,RibbonIcon and etc.: Improved.

This commit is contained in:
Mentalflow 2024-06-22 17:41:50 +08:00
parent 2474cf0c8e
commit fc4c1bade1
Signed by: Mentalflow
GPG Key ID: 5AE68D4401A2EE71
18 changed files with 163 additions and 50 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
example/qml/Qt5/example.qml
View File

@ -763,12 +763,13 @@ RibbonWindow {
RibbonButton{
showBg:false
adaptHeight:true
iconSource: RibbonIcons.AppStore
iconSource: RibbonIcons.StoreMicrosoft
checkable: true
tipText: "Test Button 7"
}
}
titleBar.titleIconSource: "qrc:/qt/qml/RibbonUI/resources/imgs/icon.png"
titleBar.rightContent:RowLayout{
spacing: 1
layoutDirection: Qt.RightToLeft

3
example/qml/Qt6/example.qml
View File

@ -763,12 +763,13 @@ RibbonWindow {
RibbonButton{
showBg:false
adaptHeight:true
iconSource: RibbonIcons.AppStore
iconSource: RibbonIcons.StoreMicrosoft
checkable: true
tipText: "Test Button 7"
}
}
titleBar.titleIconSource: "qrc:/qt/qml/RibbonUI/resources/imgs/icon.png"
titleBar.rightContent:RowLayout{
spacing: 1
layoutDirection: Qt.RightToLeft

3
lib_source/qml/Qt5/RibbonBackStageView.qml
View File

@ -97,7 +97,6 @@ Popup {
text: backText
font.pixelSize: 30
iconSource: RibbonIcons.ArrowCircleLeft
implicitWidth: ribbonIcon.width
implicitHeight: ribbonIcon.height
textColor: RibbonTheme.modernStyle && !RibbonTheme.isDarkMode ? "black" : "white"
ribbonIcon.filled: hovered
@ -105,7 +104,7 @@ Popup {
top: parent.top
topMargin: 30
left: parent.left
leftMargin: 30
leftMargin: 8
}
visible: showBackBtn
ribbonIcon.iconSize: 30

2
lib_source/qml/Qt5/RibbonBottomBar.qml
View File

@ -60,6 +60,7 @@ Item {
anchors{
left: parent.left
leftMargin: 20
verticalCenter: parent.verticalCenter
}
}
@ -71,6 +72,7 @@ Item {
anchors{
right: parent.right
rightMargin: 20
verticalCenter: parent.verticalCenter
}
layoutDirection: Qt.RightToLeft
RibbonButton{

6
lib_source/qml/Qt5/RibbonButton.qml
View File

@ -36,6 +36,7 @@ Button {
color: bgColor
}
contentItem: Item{
clip: true
implicitWidth: layout.width + 13
implicitHeight: adaptHeight?root.parent.height>=layout.height?root.parent.height:layout.height:layout.height + 10
Rectangle{
@ -76,7 +77,7 @@ Button {
id :rib_icon
iconSource: typeof(root.iconSource) === "number" ? root.iconSource : 0
iconSourceFilled: typeof(root.iconSourceFilled) === "number" ? root.iconSourceFilled : iconSource
iconSize: label.contentHeight
iconSize: label.visible ? label.contentHeight : 16
visible: typeof(root.iconSource) === "number"
Layout.alignment: Qt.AlignVCenter
filled: pressed || checked
@ -98,7 +99,7 @@ Button {
source: typeof(root.iconSource) === "string" ? root.iconSource : ""
visible: typeof(root.iconSource) === "string"
fillMode:Image.PreserveAspectFit
height: label.contentHeight
height: label.visible ? label.contentHeight : 16
width: height
Layout.alignment: Qt.AlignVCenter
}
@ -111,6 +112,7 @@ Button {
font.pixelSize: 12
font.family: Qt.platform.os === "osx" ? "PingFang SC" : "Microsoft YaHei UI"
renderType: RibbonTheme.nativeText ? Text.NativeRendering : Text.QtRendering
visible: text
color: {
if (!showBg && (hovered || checked || pressed) && textColorReverse)
return Qt.lighter(textColor)

1
lib_source/qml/Qt5/RibbonIcon.qml
View File

@ -6,6 +6,7 @@ Text {
property int iconSize: 20
property bool filled: false
property int iconSourceFilled
clip: true
onIconSourceChanged: {
if (typeof(iconSourceFilled) === 'undefined' || iconSourceFilled === iconSource)

4
lib_source/qml/Qt5/RibbonRadioButton.qml
View File

@ -48,9 +48,9 @@ RadioButton {
radius: width/2
color: {
if(control.down)
return Qt.rgba(255,255,255,0.2)
return RibbonTheme.isDarkMode ? Qt.rgba(255,255,255,0.2) : Qt.rgba(0,0,0,0.2)
if(control.hovered)
return Qt.rgba(255,255,255,0.1)
return RibbonTheme.isDarkMode ? Qt.rgba(255,255,255,0.1) : Qt.rgba(0,0,0,0.1)
return 'transparent'
}
}

78
lib_source/qml/Qt5/RibbonTitleBar.qml
View File

@ -7,7 +7,7 @@ import RibbonUI 1.0
Item {
id: control
height: 30
property int minimumWidth: title_text.implicitWidth + Math.max(leftContainer.width, rightContainer.width) * 2 + (Qt.platform.os === "osx" ? 65 : 0) + 20
property int minimumWidth: mid_layout.implicitWidth + Math.max(leftContainer.width, rightContainer.width) * 2 + (Qt.platform.os === "osx" ? 65 : 0) + 20
property string title: Window.window.title
property bool showStyleSwitch: true
property bool showDarkmodeBtn: true
@ -16,6 +16,9 @@ Item {
property bool modernStyle: RibbonTheme.modernStyle
property string titleColor: modernStyle ? "transparent" : isDarkMode ? "#282828" : "#2C59B7"
property string titleTextColor: modernStyle ? isDarkMode ? "white" : "black" : "white"
property var titleIconSource
property var titleIconSourceFilled
property var titleIcon: typeof(control.titleIconSource) === "string" ? pic_icon : rib_icon
default property alias content: leftContainer.data
property alias leftContent: leftContainer.data
property alias rightContent: rightContainer.data
@ -43,17 +46,58 @@ Item {
}
}
Text {
id: title_text
RowLayout{
id: mid_layout
anchors.centerIn: parent
text: control.title
font.family: Qt.platform.os === "osx" ? "PingFang SC" : "Microsoft YaHei UI"
color: titleTextColor
renderType: RibbonTheme.nativeText ? Text.NativeRendering : Text.QtRendering
Behavior on color {
ColorAnimation {
duration: 60
easing.type: Easing.OutSine
RibbonIcon{
id :rib_icon
iconSource: typeof(control.titleIconSource) === "number" ? control.titleIconSource : 0
iconSourceFilled: typeof(control.titleIconSourceFilled) === "number" ? control.titleIconSourceFilled : iconSource
iconSize: title_text.contentHeight
visible: typeof(control.titleIconSource) === "number"
Layout.preferredHeight: title_text.contentHeight
Layout.preferredWidth: Layout.preferredHeight
Layout.alignment: Qt.AlignVCenter
filled: mouse.pressed
color: {
if (mouse.containsMouse || mouse.pressed)
return Qt.lighter(titleTextColor)
else
return titleTextColor
}
Behavior on color {
ColorAnimation {
duration: 60
easing.type: Easing.OutSine
}
}
MouseArea{
id: mouse
hoverEnabled: true
}
}
Image {
id: pic_icon
source: typeof(control.titleIconSource) === "string" ? control.titleIconSource : ""
visible: typeof(control.titleIconSource) === "string"
fillMode:Image.PreserveAspectFit
Layout.preferredHeight: title_text.contentHeight
Layout.preferredWidth: Layout.preferredHeight
Layout.alignment: Qt.AlignVCenter
}
Text {
id: title_text
text: control.title
font.family: Qt.platform.os === "osx" ? "PingFang SC" : "Microsoft YaHei UI"
color: titleTextColor
renderType: RibbonTheme.nativeText ? Text.NativeRendering : Text.QtRendering
Layout.alignment: Qt.AlignVCenter
Behavior on color {
ColorAnimation {
duration: 60
easing.type: Easing.OutSine
}
}
}
}
@ -65,9 +109,15 @@ Item {
top: parent.top
left: parent.left
bottom: parent.bottom
leftMargin: Qt.platform.os === "osx" ? 65 : 10
leftMargin: Qt.platform.os === "osx" && Window.window.visibility === Window.Windowed ? 65 : 10
}
Layout.maximumWidth: (parent.width - title_text.contentWidth) / 2
Behavior on anchors.leftMargin {
NumberAnimation{
duration: 100
easing.type: Easing.OutSine
}
}
Layout.maximumWidth: (parent.width - mid_layout.contentWidth) / 2
}
RowLayout{
@ -79,7 +129,7 @@ Item {
bottom: parent.bottom
rightMargin: 10
}
Layout.maximumWidth: (parent.width - title_text.contentWidth) / 2
Layout.maximumWidth: (parent.width - mid_layout.contentWidth) / 2
layoutDirection: Qt.RightToLeft
RowLayout{
visible: Qt.platform.os !== "osx"

6
lib_source/qml/Qt5/RibbonToolTip.qml
View File

@ -18,10 +18,10 @@ ToolTip {
background: Rectangle {
radius: 3
color: RibbonTheme.isDarkMode ? "#2C2C29" : "#E0E0E2"
layer.enabled: true
color: RibbonTheme.modernStyle ? isDarkMode ? "black" : "white" : RibbonTheme.isDarkMode ? "#2C2C29" : "#E0E0E2"
layer.enabled: !RibbonTheme.modernStyle
layer.effect: RibbonShadow{}
border.color: isDarkMode ? "#5C5D5D" : "#B5B4B5"
border.color: RibbonTheme.modernStyle ? isDarkMode ? "#ADADAD" : "#616161" : isDarkMode ? "#5C5D5D" : "#B5B4B5"
border.width: 1
}
}

3
lib_source/qml/Qt5/RibbonWindow.qml
View File

@ -46,6 +46,7 @@ Window {
windowAgent.setSystemButton(WindowAgent.Maximize, titleBar.maximizeBtn);
windowAgent.setSystemButton(WindowAgent.Close, titleBar.closeBtn);
}
windowAgent.setSystemButton(WindowAgent.WindowIcon, titleBar.titleIcon);
windowAgent.setHitTestVisible(titleBar.leftContainer)
windowAgent.setHitTestVisible(titleBar.rightContainer)
windowAgent.setTitleBar(titleBar)
@ -115,7 +116,7 @@ Window {
return 'transparent'
}
border.color: RibbonTheme.isDarkMode ? "#7A7A7A" : "#2C59B7"
border.width: RibbonTheme.modernStyle ? 1 : 0
border.width: RibbonTheme.modernStyle && window.visibility === Window.Windowed ? 1 : 0
radius: Qt.platform.os === 'windows' ? RibbonUI.isWin11 ? 7 : 0 : 10
visible: RibbonTheme.modernStyle || blurBehindWindow
}

3
lib_source/qml/Qt6/RibbonBackStageView.qml
View File

@ -97,7 +97,6 @@ Popup {
text: backText
font.pixelSize: 30
iconSource: RibbonIcons.ArrowCircleLeft
implicitWidth: ribbonIcon.width
implicitHeight: ribbonIcon.height
textColor: RibbonTheme.modernStyle && !RibbonTheme.isDarkMode ? "black" : "white"
ribbonIcon.filled: hovered
@ -105,7 +104,7 @@ Popup {
top: parent.top
topMargin: 30
left: parent.left
leftMargin: 30
leftMargin: 8
}
visible: showBackBtn
ribbonIcon.iconSize: 30

2
lib_source/qml/Qt6/RibbonBottomBar.qml
View File

@ -60,6 +60,7 @@ Item {
anchors{
left: parent.left
leftMargin: 20
verticalCenter: parent.verticalCenter
}
}
@ -71,6 +72,7 @@ Item {
anchors{
right: parent.right
rightMargin: 20
verticalCenter: parent.verticalCenter
}
layoutDirection: Qt.RightToLeft
RibbonButton{

6
lib_source/qml/Qt6/RibbonButton.qml
View File

@ -36,6 +36,7 @@ Button {
color: bgColor
}
contentItem: Item{
clip: true
implicitWidth: layout.width + 13
implicitHeight: adaptHeight?root.parent.height>=layout.height?root.parent.height:layout.height:layout.height + 10
Rectangle{
@ -76,7 +77,7 @@ Button {
id :rib_icon
iconSource: typeof(root.iconSource) === "number" ? root.iconSource : 0
iconSourceFilled: typeof(root.iconSourceFilled) === "number" ? root.iconSourceFilled : iconSource
iconSize: label.contentHeight
iconSize: label.visible ? label.contentHeight : 16
visible: typeof(root.iconSource) === "number"
Layout.alignment: Qt.AlignVCenter
filled: pressed || checked
@ -98,7 +99,7 @@ Button {
source: typeof(root.iconSource) === "string" ? root.iconSource : ""
visible: typeof(root.iconSource) === "string"
fillMode:Image.PreserveAspectFit
height: label.contentHeight
height: label.visible ? label.contentHeight : 16
width: height
Layout.alignment: Qt.AlignVCenter
}
@ -111,6 +112,7 @@ Button {
font.pixelSize: 12
font.family: Qt.platform.os === "osx" ? "PingFang SC" : "Microsoft YaHei UI"
renderType: RibbonTheme.nativeText ? Text.NativeRendering : Text.QtRendering
visible: text
color: {
if (!showBg && (hovered || checked || pressed) && textColorReverse)
return Qt.lighter(textColor)

1
lib_source/qml/Qt6/RibbonIcon.qml
View File

@ -7,6 +7,7 @@ Text {
property int iconSize: 20
property bool filled: false
property int iconSourceFilled
clip: true
onIconSourceChanged: {
if (typeof(iconSourceFilled) === 'undefined' || iconSourceFilled === iconSource)

4
lib_source/qml/Qt6/RibbonRadioButton.qml
View File

@ -48,9 +48,9 @@ RadioButton {
radius: width/2
color: {
if(control.down)
return Qt.rgba(255,255,255,0.2)
return RibbonTheme.isDarkMode ? Qt.rgba(255,255,255,0.2) : Qt.rgba(0,0,0,0.2)
if(control.hovered)
return Qt.rgba(255,255,255,0.1)
return RibbonTheme.isDarkMode ? Qt.rgba(255,255,255,0.1) : Qt.rgba(0,0,0,0.1)
return 'transparent'
}
}

79
lib_source/qml/Qt6/RibbonTitleBar.qml
View File

@ -1,12 +1,13 @@
import QtQuick
import QtQuick.Controls
import QtQuick.Layouts
import QtQuick.Window
import RibbonUI
Item {
id: control
height: 30
property int minimumWidth: title_text.implicitWidth + Math.max(leftContainer.width, rightContainer.width) * 2 + (Qt.platform.os === "osx" ? 65 : 0) + 20
property int minimumWidth: mid_layout.implicitWidth + Math.max(leftContainer.width, rightContainer.width) * 2 + (Qt.platform.os === "osx" ? 65 : 0) + 20
property string title: Window.window.title
property bool showStyleSwitch: true
property bool showDarkmodeBtn: true
@ -15,6 +16,9 @@ Item {
property bool modernStyle: RibbonTheme.modernStyle
property string titleColor: modernStyle ? "transparent" : isDarkMode ? "#282828" : "#2C59B7"
property string titleTextColor: modernStyle ? isDarkMode ? "white" : "black" : "white"
property var titleIconSource
property var titleIconSourceFilled
property var titleIcon: typeof(control.titleIconSource) === "string" ? pic_icon : rib_icon
default property alias content: leftContainer.data
property alias leftContent: leftContainer.data
property alias rightContent: rightContainer.data
@ -42,17 +46,58 @@ Item {
}
}
Text {
id: title_text
RowLayout{
id: mid_layout
anchors.centerIn: parent
text: control.title
font.family: Qt.platform.os === "osx" ? "PingFang SC" : "Microsoft YaHei UI"
color: titleTextColor
renderType: RibbonTheme.nativeText ? Text.NativeRendering : Text.QtRendering
Behavior on color {
ColorAnimation {
duration: 60
easing.type: Easing.OutSine
RibbonIcon{
id :rib_icon
iconSource: typeof(control.titleIconSource) === "number" ? control.titleIconSource : 0
iconSourceFilled: typeof(control.titleIconSourceFilled) === "number" ? control.titleIconSourceFilled : iconSource
iconSize: title_text.contentHeight
visible: typeof(control.titleIconSource) === "number"
Layout.preferredHeight: title_text.contentHeight
Layout.preferredWidth: Layout.preferredHeight
Layout.alignment: Qt.AlignVCenter
filled: mouse.pressed
color: {
if (mouse.containsMouse || mouse.pressed)
return Qt.lighter(titleTextColor)
else
return titleTextColor
}
Behavior on color {
ColorAnimation {
duration: 60
easing.type: Easing.OutSine
}
}
MouseArea{
id: mouse
hoverEnabled: true
}
}
Image {
id: pic_icon
source: typeof(control.titleIconSource) === "string" ? control.titleIconSource : ""
visible: typeof(control.titleIconSource) === "string"
fillMode:Image.PreserveAspectFit
Layout.preferredHeight: title_text.contentHeight
Layout.preferredWidth: Layout.preferredHeight
Layout.alignment: Qt.AlignVCenter
}
Text {
id: title_text
text: control.title
font.family: Qt.platform.os === "osx" ? "PingFang SC" : "Microsoft YaHei UI"
color: titleTextColor
renderType: RibbonTheme.nativeText ? Text.NativeRendering : Text.QtRendering
Layout.alignment: Qt.AlignVCenter
Behavior on color {
ColorAnimation {
duration: 60
easing.type: Easing.OutSine
}
}
}
}
@ -64,9 +109,15 @@ Item {
top: parent.top
left: parent.left
bottom: parent.bottom
leftMargin: Qt.platform.os === "osx" ? 65 : 10
leftMargin: Qt.platform.os === "osx" && Window.window.visibility === Window.Windowed ? 65 : 10
}
Layout.maximumWidth: (parent.width - title_text.contentWidth) / 2
Behavior on anchors.leftMargin {
NumberAnimation{
duration: 100
easing.type: Easing.OutSine
}
}
Layout.maximumWidth: (parent.width - mid_layout.contentWidth) / 2
}
RowLayout{
@ -78,7 +129,7 @@ Item {
bottom: parent.bottom
rightMargin: 10
}
Layout.maximumWidth: (parent.width - title_text.contentWidth) / 2
Layout.maximumWidth: (parent.width - mid_layout.contentWidth) / 2
layoutDirection: Qt.RightToLeft
RowLayout{
visible: Qt.platform.os !== "osx"

6
lib_source/qml/Qt6/RibbonToolTip.qml
View File

@ -17,10 +17,10 @@ ToolTip {
background: Rectangle {
radius: 3
color: RibbonTheme.isDarkMode ? "#2C2C29" : "#E0E0E2"
layer.enabled: true
color: RibbonTheme.modernStyle ? isDarkMode ? "black" : "white" : RibbonTheme.isDarkMode ? "#2C2C29" : "#E0E0E2"
layer.enabled: !RibbonTheme.modernStyle
layer.effect: RibbonShadow{}
border.color: isDarkMode ? "#5C5D5D" : "#B5B4B5"
border.color: RibbonTheme.modernStyle ? isDarkMode ? "#ADADAD" : "#616161" : isDarkMode ? "#5C5D5D" : "#B5B4B5"
border.width: 1
}
}

3
lib_source/qml/Qt6/RibbonWindow.qml
View File

@ -45,6 +45,7 @@ Window {
windowAgent.setSystemButton(WindowAgent.Maximize, titleBar.maximizeBtn);
windowAgent.setSystemButton(WindowAgent.Close, titleBar.closeBtn);
}
windowAgent.setSystemButton(WindowAgent.WindowIcon, titleBar.titleIcon);
windowAgent.setHitTestVisible(titleBar.leftContainer)
windowAgent.setHitTestVisible(titleBar.rightContainer)
windowAgent.setTitleBar(titleBar)
@ -114,7 +115,7 @@ Window {
return 'transparent'
}
border.color: RibbonTheme.isDarkMode ? "#7A7A7A" : "#2C59B7"
border.width: RibbonTheme.modernStyle ? 1 : 0
border.width: RibbonTheme.modernStyle && window.visibility === Window.Windowed ? 1 : 0
radius: Qt.platform.os === 'windows' ? RibbonUI.isWin11 ? 7 : 0 : 10
visible: RibbonTheme.modernStyle || blurBehindWindow
}