完善全屏UI显示和左侧标签点击滑动
This commit is contained in:
qiqi
hewenfei
parent
0bbb6cb65e
commit
4d7e7225e0
|
|
@ -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
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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()
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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 {
|
||||
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
|
||||
paletteRole: Palette.HighlightedText
|
||||
elide: Text.ElideRight
|
||||
horizontalAlignment: Text.AlignHCenter
|
||||
text: model.displayName
|
||||
}
|
||||
}
|
||||
onClicked: {
|
||||
labelListView.currentIndex = DelegateModel.itemsIndex;
|
||||
labelListView.labelClicked(model.id)
|
||||
}
|
||||
}
|
||||
|
|
@ -149,23 +157,36 @@ RowLayout {
|
|||
|
||||
Component {
|
||||
id: appComponent
|
||||
Item {
|
||||
MouseArea {
|
||||
id: appMouseArea
|
||||
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: appMouseArea.containsPress ? 0.25 : appMouseArea.containsMouse ? 0.15 : 0.00
|
||||
AppControls2.IconLabel {
|
||||
anchors.fill: parent
|
||||
iconWidth: 96
|
||||
iconHeight: 96
|
||||
appName: name
|
||||
appIcon: icon
|
||||
iconWidth: 96; iconHeight: 96
|
||||
appName: name; appIcon: icon
|
||||
spacing: 8
|
||||
textHighLight: true
|
||||
}
|
||||
}
|
||||
|
||||
onClicked: {
|
||||
parent.GridView.view.model.appClicked(index);
|
||||
parent.parent.GridView.view.model.appClicked(index);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
Component {
|
||||
id: folderComponent
|
||||
Item {
|
||||
|
|
@ -214,25 +235,32 @@ RowLayout {
|
|||
cellWidth: contentViewBase.cellWidth
|
||||
cellHeight: contentViewBase.cellHeight
|
||||
|
||||
header: Row {
|
||||
header: Item {
|
||||
width: labelAppsGridView.width
|
||||
height: contentViewBase.headerHeight
|
||||
Row {
|
||||
anchors.fill: parent
|
||||
anchors.leftMargin: 67
|
||||
spacing: 15
|
||||
Text {
|
||||
AppControls2.StyleText {
|
||||
id: labelName
|
||||
anchors.verticalCenter: parent.verticalCenter
|
||||
verticalAlignment: Text.AlignVCenter
|
||||
width: contentWidth
|
||||
text: name
|
||||
paletteRole: Palette.HighlightedText
|
||||
}
|
||||
|
||||
AppControls2.StyleBackground {
|
||||
anchors.verticalCenter: parent.verticalCenter
|
||||
useStyleTransparent: false
|
||||
alpha: 0.14
|
||||
paletteRole: Palette.Light
|
||||
height: 1
|
||||
width: parent.width - labelName.width - parent.spacing
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
model: extraData
|
||||
delegate: Item {
|
||||
|
|
@ -240,15 +268,27 @@ RowLayout {
|
|||
height: GridView.view.cellHeight
|
||||
|
||||
MouseArea {
|
||||
id: labelAppMouseArea
|
||||
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 {
|
||||
anchors.fill: parent
|
||||
iconWidth: 96
|
||||
iconHeight: 96
|
||||
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
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
Loading…
Reference in New Issue