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

18
qml/AppControls2/StyleBackground.qml
View File

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

144
qml/AppUI/FullScreenContent.qml
View File

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

3
qml/AppUI/SearchInputBar.qml
View File

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