diff --git a/qml/AppControls2/IconLabel.qml b/qml/AppControls2/IconLabel.qml index 701d5bc..b9ed242 100644 --- a/qml/AppControls2/IconLabel.qml +++ b/qml/AppControls2/IconLabel.qml @@ -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 } } diff --git a/qml/AppControls2/StyleBackground.qml b/qml/AppControls2/StyleBackground.qml index 29c7a73..f301abf 100644 --- a/qml/AppControls2/StyleBackground.qml +++ b/qml/AppControls2/StyleBackground.qml @@ -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() } } diff --git a/qml/AppUI/FullScreenContent.qml b/qml/AppUI/FullScreenContent.qml index ae5e921..a4c4a8b 100644 --- a/qml/AppUI/FullScreenContent.qml +++ b/qml/AppUI/FullScreenContent.qml @@ -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 diff --git a/qml/AppUI/SearchInputBar.qml b/qml/AppUI/SearchInputBar.qml index 0cd483e..d92384a 100644 --- a/qml/AppUI/SearchInputBar.qml +++ b/qml/AppUI/SearchInputBar.qml @@ -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