openkylin
/
ukui-menu
mirror of https://gitee.com/openkylin/ukui-menu.git
9
0
Fork 1
Code Issues Projects Releases Wiki Activity

完善全屏UI显示和左侧标签点击滑动

This commit is contained in:
qiqi 2023-03-30 16:44:53 +08:00 committed by hewenfei
parent 0bbb6cb65e
commit 4d7e7225e0
4 changed files with 112 additions and 69 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
qml/AppControls2/IconLabel.qml
View File

@ -13,6 +13,8 @@ Item {
// 上下布局spacing：0 左右布局spacing：12
property int spacing: 2
property bool textTruncated: iconText.truncated
property bool textHighLight: false
state: root.display
states: [
@ -26,8 +28,9 @@ Item {
}
PropertyChanges {
target: iconText
textMaxWidth: root.width - iconImage.width - root.spacing
width: root.width - iconImage.width - root.spacing * 2
horizontalAlignment: Text.AlignLeft
anchors.left: iconImage.right
anchors.leftMargin: root.spacing
anchors.verticalCenter: root.verticalCenter
@ -38,13 +41,14 @@ Item {
PropertyChanges {
target: iconImage
anchors.top: root.top
anchors.topMargin: (root.height - root.spacing -iconImage.height -iconText.height) / 2
anchors.topMargin: (root.height - root.spacing - iconImage.height - iconText.height) / 2
anchors.horizontalCenter: root.horizontalCenter
}
PropertyChanges {
target: iconText
textMaxWidth: root.width
width: root.width
horizontalAlignment: Text.AlignHCenter
anchors.top: iconImage.bottom
anchors.topMargin: root.spacing
anchors.horizontalCenter: root.horizontalCenter
@ -61,13 +65,9 @@ Item {
StyleText {
id: iconText
property int textMaxWidth: root.width
text: root.appName
font.pixelSize: 14
elide: Text.ElideRight
Component.onCompleted: {
var textWidth = contentWidth > textMaxWidth ? textMaxWidth : contentWidth
width = textWidth
}
paletteRole: root.textHighLight ? Palette.HighlightedText : Palette.Text
}
}

18
qml/AppControls2/StyleBackground.qml
View File

@ -5,26 +5,23 @@ Rectangle {
property bool useStyleTransparent: true
property int paletteRole: Palette.Base
property int paletteGroup: Palette.Active
property int borderColor: Palette.Base
property real alpha: 1.0
property bool isFocus: false
property real borderAlpha: 1.0
clip: true
border.width: 0
function updateColor() {
if (useStyleTransparent) {
color = themePalette.paletteColorWithTransparency(paletteRole,paletteGroup)
color = themePalette.paletteColorWithTransparency(paletteRole, paletteGroup)
} else {
color = themePalette.paletteColorWithCustomTransparency(paletteRole,paletteGroup,alpha)
color = themePalette.paletteColorWithCustomTransparency(paletteRole, paletteGroup, alpha)
}
}
function updateBorderColor() {
if (isFocus) {
border.color = themePalette.paletteColor(Palette.Highlight)
} else {
border.color = themePalette.paletteColorWithCustomTransparency(Palette.Base, Palette.Active, 0.1)
}
border.color = themePalette.paletteColorWithCustomTransparency(borderColor, Palette.Active, borderAlpha)
}
Component.onCompleted: {
@ -50,7 +47,10 @@ Rectangle {
onAlphaChanged: {
updateColor()
}
onIsFocusChanged: {
onBorderAlphaChanged: {
updateBorderColor()
}
onBorderColorChanged: {
updateBorderColor()
}
}

144
qml/AppUI/FullScreenContent.qml
View File

@ -25,21 +25,35 @@ import AppControls2 1.0 as AppControls2
RowLayout {
clip: true
spacing: 0
Item {
Layout.preferredWidth: 90
Layout.preferredWidth: 145
Layout.fillHeight: true
Layout.leftMargin: 15
ListView {
id: labelListView
signal labelClicked(string labelId)
property int maxLabelWidth: count < 20 ? width : 30
anchors.centerIn: parent
width: parent.width
height: contentHeight > parent.height ? parent.height : contentHeight
interactive: contentHeight > parent.height
spacing: 5
highlightMoveDuration: 300
highlight: AppControls2.StyleBackground {
width: labelListView.maxLabelWidth; height: 30
radius: 4
useStyleTransparent: false
paletteRole: Palette.Light
border.width: 1
alpha: 0.18; borderAlpha: 0.7
borderColor: Palette.HighlightedText
}
onCountChanged: currentIndex = 0
model: DelegateModel {
groups: DelegateModelGroup {
name: "disabledItem"
@ -59,25 +73,19 @@ RowLayout {
model: modelManager.getLabelModel()
delegate: MouseArea {
width: ListView.view.width
id: labelMouseArea
width: labelListView.maxLabelWidth
height: 30
hoverEnabled: true
AppControls2.StyleBackground {
AppControls2.StyleText {
anchors.fill: parent
radius: 4
paletteRole: Palette.Base
alpha: parent.containsPress ? 0.36 : parent.containsMouse ? 0.18 : 0
useStyleTransparent: false
AppControls2.StyleText {
anchors.fill: parent
paletteRole: Palette.Text
elide: Text.ElideRight
horizontalAlignment: Text.AlignHCenter
text: model.displayName
}
paletteRole: Palette.HighlightedText
elide: Text.ElideRight
horizontalAlignment: Text.AlignHCenter
text: model.displayName
}
onClicked: {
labelListView.currentIndex = DelegateModel.itemsIndex;
labelListView.labelClicked(model.id)
}
}
@ -149,21 +157,34 @@ RowLayout {
Component {
id: appComponent
MouseArea {
anchors.centerIn: parent
width: 100
height: 140
AppControls2.IconLabel {
anchors.fill: parent
iconWidth: 96
iconHeight: 96
appName: name
appIcon: icon
}
onClicked: {
parent.GridView.view.model.appClicked(index);
Item {
MouseArea {
id: appMouseArea
anchors.centerIn: parent
hoverEnabled: true
width: 170; height: width
AppControls2.StyleBackground {
anchors.fill: parent
useStyleTransparent: false
paletteRole: Palette.Light
radius: 16
alpha: appMouseArea.containsPress ? 0.25 : appMouseArea.containsMouse ? 0.15 : 0.00
AppControls2.IconLabel {
anchors.fill: parent
iconWidth: 96; iconHeight: 96
appName: name; appIcon: icon
spacing: 8
textHighLight: true
}
}
onClicked: {
parent.parent.GridView.view.model.appClicked(index);
}
}
}
}
Component {
@ -214,23 +235,30 @@ RowLayout {
cellWidth: contentViewBase.cellWidth
cellHeight: contentViewBase.cellHeight
header: Row {
header: Item {
width: labelAppsGridView.width
height: contentViewBase.headerHeight
spacing: 15
Text {
id: labelName
anchors.verticalCenter: parent.verticalCenter
verticalAlignment: Text.AlignVCenter
width: contentWidth
text: name
}
Row {
anchors.fill: parent
anchors.leftMargin: 67
spacing: 15
AppControls2.StyleText {
id: labelName
anchors.verticalCenter: parent.verticalCenter
verticalAlignment: Text.AlignVCenter
width: contentWidth
text: name
paletteRole: Palette.HighlightedText
}
AppControls2.StyleBackground {
anchors.verticalCenter: parent.verticalCenter
paletteRole: Palette.Light
height: 1
width: parent.width - labelName.width - parent.spacing
AppControls2.StyleBackground {
anchors.verticalCenter: parent.verticalCenter
useStyleTransparent: false
alpha: 0.14
paletteRole: Palette.Light
height: 1
width: parent.width - labelName.width - parent.spacing
}
}
}
@ -240,15 +268,27 @@ RowLayout {
height: GridView.view.cellHeight
MouseArea {
id: labelAppMouseArea
anchors.centerIn: parent
width: 100; height: 140
AppControls2.IconLabel {
hoverEnabled: true
width: 170; height: width
AppControls2.StyleBackground {
anchors.fill: parent
iconWidth: 96
iconHeight: 96
appName: modelData.name
appIcon: modelData.icon
useStyleTransparent: false
paletteRole: Palette.Light
radius: 16
alpha: labelAppMouseArea.containsPress ? 0.25 : labelAppMouseArea.containsMouse ? 0.15 : 0.00
AppControls2.IconLabel {
anchors.fill: parent
iconWidth: 96; iconHeight: 96
appName: modelData.name
appIcon: modelData.icon
spacing: 8
textHighLight: true
}
}
onClicked: {
//console.log("clicked", Object.keys(model))
labelRepeater.model.openApp(labelAppsGridView.labelIndex, model.index);
@ -302,12 +342,14 @@ RowLayout {
}
Item {
Layout.preferredWidth: 48
Layout.preferredWidth: 160
Layout.fillHeight: true
ScrollBar {
id: fullScreenScrollBar
anchors.centerIn: parent
anchors.verticalCenter: parent.verticalCenter
anchors.horizontalCenter: parent.right
anchors.horizontalCenterOffset: -24
height: 200
width: (hovered || pressed) ? 8 : 4
padding: 0

3
qml/AppUI/SearchInputBar.qml
View File

@ -31,7 +31,8 @@ AppControls2.StyleBackground {
useStyleTransparent: false
paletteRole: Palette.Text
border.width: 1
isFocus: textInput.activeFocus
borderAlpha: textInput.activeFocus ? 1 : 0.1
borderColor: textInput.activeFocus ? Palette.Highlight : Palette.Base
Item {
id: defaultSearch