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()
} }
} }

94
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 {
anchors.fill: parent
radius: 4
paletteRole: Palette.Base
alpha: parent.containsPress ? 0.36 : parent.containsMouse ? 0.18 : 0
useStyleTransparent: false
AppControls2.StyleText { AppControls2.StyleText {
anchors.fill: parent anchors.fill: parent
paletteRole: Palette.Text paletteRole: Palette.HighlightedText
elide: Text.ElideRight elide: Text.ElideRight
horizontalAlignment: Text.AlignHCenter horizontalAlignment: Text.AlignHCenter
text: model.displayName text: model.displayName
} }
}
onClicked: { onClicked: {
labelListView.currentIndex = DelegateModel.itemsIndex;
labelListView.labelClicked(model.id) labelListView.labelClicked(model.id)
} }
} }
@ -149,23 +157,36 @@ RowLayout {
Component { Component {
id: appComponent id: appComponent
Item {
MouseArea { MouseArea {
id: appMouseArea
anchors.centerIn: parent anchors.centerIn: parent
width: 100 hoverEnabled: true
height: 140 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 { AppControls2.IconLabel {
anchors.fill: parent anchors.fill: parent
iconWidth: 96 iconWidth: 96; iconHeight: 96
iconHeight: 96 appName: name; appIcon: icon
appName: name spacing: 8
appIcon: icon textHighLight: true
} }
}
onClicked: { onClicked: {
parent.GridView.view.model.appClicked(index); parent.parent.GridView.view.model.appClicked(index);
} }
} }
} }
}
Component { Component {
id: folderComponent id: folderComponent
Item { Item {
@ -214,25 +235,32 @@ 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
Row {
anchors.fill: parent
anchors.leftMargin: 67
spacing: 15 spacing: 15
Text { AppControls2.StyleText {
id: labelName id: labelName
anchors.verticalCenter: parent.verticalCenter anchors.verticalCenter: parent.verticalCenter
verticalAlignment: Text.AlignVCenter verticalAlignment: Text.AlignVCenter
width: contentWidth width: contentWidth
text: name text: name
paletteRole: Palette.HighlightedText
} }
AppControls2.StyleBackground { AppControls2.StyleBackground {
anchors.verticalCenter: parent.verticalCenter anchors.verticalCenter: parent.verticalCenter
useStyleTransparent: false
alpha: 0.14
paletteRole: Palette.Light paletteRole: Palette.Light
height: 1 height: 1
width: parent.width - labelName.width - parent.spacing width: parent.width - labelName.width - parent.spacing
} }
} }
}
model: extraData model: extraData
delegate: Item { delegate: Item {
@ -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
width: 170; height: width
AppControls2.StyleBackground {
anchors.fill: parent
useStyleTransparent: false
paletteRole: Palette.Light
radius: 16
alpha: labelAppMouseArea.containsPress ? 0.25 : labelAppMouseArea.containsMouse ? 0.15 : 0.00
AppControls2.IconLabel { AppControls2.IconLabel {
anchors.fill: parent anchors.fill: parent
iconWidth: 96 iconWidth: 96; iconHeight: 96
iconHeight: 96
appName: modelData.name appName: modelData.name
appIcon: modelData.icon 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